/*!
 * Page Probabilités de Blind Up - https://screen97.fr
 * Copyright (c) 2026 screen97. Tous droits réservés.
 */

/* ----- tableaux de la page ----- */
.odds-table { font-size: .9rem; }
.odds-table th { text-align: right; font-weight: 600; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--line); }
.odds-table th:first-child { text-align: left; }
.odds-table td { text-align: right; padding: 8px 10px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.doc .odds-table td:first-child { text-align: left; white-space: normal; min-width: 9em; }
.odds-table td.now, .odds-table th.now { color: var(--accent); font-weight: 700; }
.odds-table tbody tr:last-child td { border-bottom: 0; }
.odds-table th { white-space: normal; line-height: 1.2; vertical-align: bottom; }
@media (max-width: 560px) {
  .odds-table { font-size: .84rem; }
  .odds-table th, .odds-table td { padding: 8px 5px; }
  .doc .odds-table td:first-child { min-width: 0; }
}
.odds-note { margin: 10px 0 0; color: var(--muted); font-size: .85rem; }

/* ----- cartes : emplacements ----- */
.oc-grp { margin: 12px 0 4px; }
.oc-lab { display: block; margin-bottom: 6px; font-size: .85rem; font-weight: 600; color: var(--muted); }
.oc-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.oc-slotwrap { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.oc-slotlab { font-size: .68rem; line-height: 1; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.oc-slot {
  width: 46px; height: 64px; min-height: 0; padding: 0; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 1.15rem; font-weight: 700; line-height: 1;
  color: var(--muted); background: var(--panel-2); border: 2px dashed var(--line);
}
.oc-slot.empty { cursor: default; }
.oc-slot.empty:hover { filter: none; }
.oc-slot.full { background: #f7f5ef; color: #14181a; border: 2px solid #d9d4c7; }
.oc-slot.full.s1, .oc-slot.full.s2 { color: #c42a35; }
.oc-sep { width: 12px; }
@media (max-width: 420px) {
  .oc-row { gap: 6px; }
  .oc-slot { width: 40px; height: 56px; font-size: 1rem; }
}

/* ----- cartes : sélecteur 4 x 13 ----- */
.oc-picker { display: grid; gap: 2px; margin: 12px 0; }
.oc-prow { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 2px; }
.oc-pick {
  min-width: 0; min-height: 0; height: 40px; padding: 0; border-radius: 5px;
  font-size: .72rem; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  color: #14181a; background: #f7f5ef; border: 1px solid #d9d4c7;
}
.oc-prow.s1 .oc-pick, .oc-prow.s2 .oc-pick { color: #c42a35; }
.oc-pick.used { opacity: .2; }
@media (min-width: 560px) {
  .oc-prow, .oc-picker { gap: 3px; }
  .oc-pick { height: 44px; font-size: .9rem; letter-spacing: 0; }
}

/* ----- commandes et résultats ----- */
.oc-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: end; margin: 6px 0 0; }
.oc-tools .field { flex: 1 1 180px; }
.oc-tools button { flex: 0 0 auto; }
.oc-status { margin: 10px 0 0; min-height: 1.4em; color: var(--muted); font-size: .88rem; }
.oc-result { margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oc-stat { padding: 10px 6px; text-align: center; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.oc-stat b { display: block; font-size: 1.3rem; color: var(--accent); font-variant-numeric: tabular-nums; }
.oc-stat.main b { color: var(--gold); }
.oc-stat span { display: block; margin-top: 2px; font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.oc-result[hidden] { display: none; }
.oc-meta { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--muted); }
.oc-subh { margin: 22px 0 8px; font-size: 1.02rem; color: var(--gold); }
.oc-potrow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.oc-need { margin: 10px 0 0; font-size: .95rem; }
.oc-need b { color: var(--accent); font-size: 1.2rem; }
.oc-cmp { margin: 6px 0 0; font-size: .9rem; color: var(--muted); }
.oc-cmp.ok { color: var(--accent); }
.oc-cmp.ko { color: #ff8a80; }

/* ----- grille des 169 mains ----- */
.og-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; }
.og-tools .field { flex: 0 1 240px; }
.og-grid { display: grid; grid-template-columns: 1.2em repeat(13, minmax(0, 1fr)); gap: 2px; margin: 12px 0 8px; }
.og-h { display: grid; place-items: center; font-size: .68rem; font-weight: 700; color: var(--muted); }
.og-c {
  position: relative; aspect-ratio: 1 / 1; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 4px;
  display: grid; place-items: center; color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .5);
  font-variant-numeric: tabular-nums;
}
.og-c:hover { filter: brightness(1.12); }
.og-l { display: none; }
.og-v { font-size: .62rem; font-weight: 700; letter-spacing: -.02em; }
.og-c.above { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8); }
.og-c.sel { outline: 3px solid var(--gold); outline-offset: 1px; z-index: 1; }
@media (min-width: 640px) {
  .og-grid { gap: 3px; grid-template-columns: 1.4em repeat(13, minmax(0, 1fr)); }
  .og-h { font-size: .8rem; }
  .og-c { border-radius: 6px; }
  .og-l { display: block; position: absolute; top: 4px; left: 5px; font-size: .62rem; font-weight: 600; opacity: .9; }
  .og-v { font-size: 1rem; margin-top: 10px; }
  .og-c.above { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .8); }
}
.og-legend { margin: 0; font-size: .82rem; color: var(--muted); }
.og-detail { margin-top: 12px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.og-dhead { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.og-dname { font-size: 1.5rem; color: var(--gold); }
.og-dkind { color: var(--muted); font-size: .9rem; }
.og-dline { margin: 6px 0 10px; font-size: .9rem; }
.og-dcap { margin: 0 0 6px; font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.og-dgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.og-dbox { padding: 6px 4px; text-align: center; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); }
.og-dbox span { display: block; font-size: .72rem; color: var(--muted); }
.og-dbox b { display: block; font-size: .92rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.og-dbox.now { border-color: var(--accent); }
.og-dbox.now b { color: var(--accent); }
@media (min-width: 640px) { .og-dgrid { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

@media print { .oc-picker, .oc-tools, .og-tools { display: none; } }