/* ==================================================================
   table.css — the practice table. Loaded after base.css.
================================================================== */

.ruleline{font-size:12.5px; color:var(--grey); padding:8px 0 0; margin:0}

.grid{display:grid; grid-template-columns:minmax(0,1fr) 336px}
.col-play{border-right:1px solid var(--ink); padding:16px 24px 0 0; min-width:0}
.col-data{padding:16px 0 0 22px; min-width:0}

/* ---------- the table sheet ---------- */
.sheet{background:var(--sheet); border:1.5px solid var(--ink)}
.seat{
  display:grid; grid-template-columns:64px minmax(0,1fr) auto;
  align-items:center; gap:14px; padding:16px 18px; min-height:132px;
}
.seat + .seat{border-top:1px solid var(--ink)}
.seat.dealer{background:var(--sheet-2)}
.seat-name{
  font-size:12px; font-weight:600; color:var(--grey);
  writing-mode:vertical-rl; transform:rotate(180deg);
  justify-self:start; align-self:stretch; display:flex; align-items:center;
}
.seat.dealer .seat-name{color:var(--ink)}
.seat-total{font-size:clamp(30px,4.4vw,52px); font-weight:800; letter-spacing:-.05em; line-height:.8; min-width:2ch; text-align:right}
.seat-total small{display:block; font-size:11px; font-weight:600; letter-spacing:0; color:var(--grey); text-align:right; margin-top:6px}
.seat-total.bust{color:var(--red)}
.seat-total.hidden-t{color:var(--grey)}

.hands{display:flex; gap:22px; flex-wrap:wrap; align-items:flex-start}
.hand{display:flex; flex-direction:column; gap:8px; padding:6px 8px 6px 0; position:relative}
.hand.focus::before{content:""; position:absolute; left:-9px; top:0; bottom:0; width:3px; background:var(--ink)}
.hand.spent{opacity:.4}
.cards{display:flex; min-height:calc(var(--card-w)*1.42)}
.cards .card + .card{margin-left:calc(var(--card-w)*-0.46)}
.hand-meta{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; flex-wrap:wrap}
.hand-meta .t{border:1px solid var(--ink); padding:0 5px; min-width:26px; text-align:center}
.hand-meta .b{color:var(--grey); font-weight:500; display:flex; align-items:center; gap:4px}
.stamp{
  border:2px solid var(--ink); padding:1px 6px 0; font-size:11px; font-weight:800;
  letter-spacing:.04em; transform:rotate(-3deg); background:var(--sheet);
}
.stamp.win{color:var(--blue); border-color:var(--blue)}
.stamp.loss{color:var(--red); border-color:var(--red)}
.stamp.push{color:var(--grey); border-color:var(--grey)}

/* dealt cards get a flip, so they need their own markup */
.cards .card{perspective:700px; box-shadow:none}
.card-in{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .38s cubic-bezier(.4,.05,.2,1)}
.card.down .card-in{transform:rotateY(180deg)}
.cards .face{backface-visibility:hidden}
.cards .front{background:#fff}
.cards .front.red{color:var(--red)}
.back{
  position:absolute; inset:0; backface-visibility:hidden; border:1.5px solid var(--ink); border-radius:2px;
  box-shadow:2px 2px 0 rgba(0,0,0,.85);
  transform:rotateY(180deg); background:var(--red);
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 1px, transparent 1px 7px);
  background-position:3px 3px;
}
@media (prefers-reduced-motion: reduce){ .card-in{transition:none} }

/* ---------- status ---------- */
.statusline{
  border:1.5px solid var(--ink); border-top:none; padding:9px 18px; font-size:13px;
  display:flex; justify-content:space-between; gap:14px; background:var(--sheet);
}
.statusline .right{color:var(--grey); white-space:nowrap}

/* ---------- chips and actions ---------- */
.bar{margin-top:18px; display:flex; flex-wrap:wrap; gap:22px; align-items:flex-start}
.group{display:flex; flex-direction:column; gap:7px; min-width:0}
.group.grow{flex:1}
.group .cap{font-size:11px; font-weight:600; color:var(--grey)}
.chips{display:flex; gap:7px}
.chip{
  --chip:#fff; --spot:#c9ccc6;
  width:44px; height:44px; border-radius:50%; border:2px solid var(--ink);
  font-size:12px; font-weight:700; flex:none; position:relative;
  display:grid; place-items:center; transition:transform .1s; user-select:none;
  /* the rim carries the edge spots, the inner disc stays clean for the value */
  background:
    radial-gradient(circle at 50% 50%, var(--chip) 0 59%, transparent 59%),
    repeating-conic-gradient(from 15deg, var(--spot) 0 22deg, var(--chip) 22deg 60deg);
}
.chip::after{           /* the pressed inner ring every clay chip has */
  content:""; position:absolute; inset:7px; border-radius:50%;
  border:1px solid rgba(0,0,0,.35);
}
.chip > *, .chip{z-index:0}
.chip[data-v="5"]{--chip:#f6c9c9; --spot:#c8102e}
.chip[data-v="25"]{--chip:#bfe0c4; --spot:#1f7a45}
.chip[data-v="100"]{--chip:#1d1d1d; --spot:#e8e8e8; color:#fff}
.chip[data-v="500"]{--chip:#c9c2ea; --spot:#6b2b8f}
.chip:hover:not(:disabled){transform:translateY(-2px)}
.chip:disabled{opacity:.3; cursor:not-allowed}

/* the little stacks shown on the table: same spots, four of them */
.mini-chip{
  --chip:#fff; --spot:#c9ccc6;
  width:16px; height:16px; border:1.5px solid var(--ink); border-radius:50%;
  display:inline-block; margin-left:-7px;
  background:
    radial-gradient(circle at 50% 50%, var(--chip) 0 52%, transparent 52%),
    repeating-conic-gradient(from 22deg, var(--spot) 0 24deg, var(--chip) 24deg 90deg);
}
.mini-chip:first-child{margin-left:0}
.mini-chip[data-v="5"]{--chip:#f6c9c9; --spot:#c8102e}
.mini-chip[data-v="25"]{--chip:#bfe0c4; --spot:#1f7a45}
.mini-chip[data-v="100"]{--chip:#1d1d1d; --spot:#e8e8e8}
.mini-chip[data-v="500"]{--chip:#c9c2ea; --spot:#6b2b8f}

.actions{display:flex; gap:7px; flex-wrap:wrap}
.act{
  border:1.5px solid var(--ink); padding:9px 14px; min-height:var(--tap);
  font-size:14px; font-weight:600; background:var(--sheet);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .12s, color .12s;
}
.act:hover:not(:disabled){background:var(--ink); color:var(--sheet)}
.act:disabled{opacity:.28; cursor:not-allowed}
.act.key{background:var(--ink); color:var(--sheet)}
.act.key:hover:not(:disabled){background:var(--blue); border-color:var(--blue)}
.act kbd{font:inherit; font-size:10px; opacity:.55; margin-left:6px}
.act.flagged{box-shadow:0 0 0 3px var(--blue)}

/* ---------- data column ---------- */
.mod + .mod{margin-top:20px; border-top:1px solid var(--ink); padding-top:12px}
.mod h3{font-size:12px; font-weight:700; margin-bottom:8px}
.readout{font-size:clamp(30px,4vw,44px); font-weight:800; letter-spacing:-.04em; line-height:.95}
.readout.neg{color:var(--red)}
.sub-read{font-size:12.5px; color:var(--grey); margin-top:4px}
.sub-read.up{color:var(--blue)} .sub-read.down{color:var(--red)}

.ruler{margin-top:10px}
.ruler .track{position:relative; height:26px; border:1.5px solid var(--ink); background:#fff; overflow:hidden}
.ruler .used{position:absolute; inset:0 auto 0 0; background:var(--ink); opacity:.14}
.ruler .ticks{position:absolute; inset:0; display:flex}
.ruler .ticks i{flex:1; border-right:1px solid rgba(0,0,0,.25)}
.ruler .ticks i:last-child{border:none}
.ruler .cutline{position:absolute; top:-2px; bottom:-2px; width:3px; background:var(--red)}
.ruler .legend{display:flex; justify-content:space-between; font-size:11px; color:var(--grey); margin-top:4px}

table.data{width:100%; border-collapse:collapse; font-size:13px}
table.data td{padding:3px 0; border-bottom:1px dotted rgba(0,0,0,.25)}
table.data td:last-child{text-align:right; font-weight:600}
table.data tr:last-child td{border-bottom:none}

/* ---------- strategy chart ---------- */
.tabs{display:flex; margin-bottom:8px}
.tabs button{border:1px solid var(--ink); padding:6px 11px; font-size:11.5px; font-weight:600; margin-right:-1px; background:var(--sheet); min-height:34px}
.tabs button[aria-selected="true"]{background:var(--ink); color:var(--sheet)}
.chart-scroll{overflow-x:auto}
.chart{width:100%; min-width:290px; border-collapse:collapse; font-size:10.5px; font-weight:600; table-layout:fixed}
.chart th, .chart td{border:1px solid rgba(0,0,0,.45); text-align:center; height:19px; padding:0}
.chart th{font-weight:600; font-size:10px; color:var(--grey)}
.chart td.H{background:#fff}
.chart td.S{background:var(--ink); color:#fff}
.chart td.D{background:var(--red); color:#fff}
.chart td.P{background:var(--blue); color:#fff}
.chart td.R{background:var(--grey); color:#fff}
.chart td.live{box-shadow:inset 0 0 0 3px var(--blue); position:relative}
.chart td.live::after{content:""; position:absolute; inset:0; border:1px solid #fff}
.legend-key{display:flex; gap:10px; font-size:11px; color:var(--grey); margin-top:7px; flex-wrap:wrap}
.legend-key span{display:flex; align-items:center; gap:4px}
.legend-key i{width:10px; height:10px; border:1px solid rgba(0,0,0,.5); display:inline-block}

.verdict{font-size:13.5px; line-height:1.35; border-left:3px solid var(--ink); padding-left:9px; min-height:38px}
.verdict.bad{border-color:var(--red)}
.verdict.good{border-color:var(--blue)}

.opt{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:13px; padding:4px 0; color:var(--grey)}
.opt select{border:1px solid var(--ink); background:#fff; padding:5px 6px; font:inherit; font-size:12.5px; min-height:34px}
.tog{position:relative; width:34px; height:20px; flex:none}
.tog input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; width:100%; height:100%}
.tog i{position:absolute; inset:0; border:1.5px solid var(--ink); background:#fff}
.tog i::after{content:""; position:absolute; top:2px; left:2px; width:12px; height:12px; background:var(--ink); transition:transform .15s}
.tog input:checked + i{background:var(--ink)}
.tog input:checked + i::after{transform:translateX(15px); background:#fff}
.tog input:focus-visible + i{outline:2px solid var(--blue); outline-offset:2px}

.foot{font-size:11.5px; color:var(--grey); margin-top:12px; line-height:1.5}
.link{text-decoration:underline; text-underline-offset:3px; font-size:12.5px; color:var(--grey); padding:6px 0}
.link:hover{color:var(--red)}

.pagefoot{
  border-top:1px solid var(--ink); margin-top:26px;
  padding:14px 0 calc(30px + var(--safe-b));
  font-size:12.5px; color:var(--grey); display:flex; gap:18px; flex-wrap:wrap;
}
.pagefoot a{color:var(--ink)}

/* ==================================================================
   Portrait phones. The table stacks, and the action row sticks to the
   bottom of the viewport so Hit and Stand are always in reach.
================================================================== */
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .col-play{border-right:none; padding:12px 0 0}
  .col-data{
    padding:22px 0 0; border-top:2px solid var(--ink); margin-top:24px;
    display:flex; flex-direction:column;
  }
  /* the chart is what you need while deciding, so it comes first here */
  .mod.coach{order:-1}
  .mod.coach + .mod{border-top:none; padding-top:0}
  .mod.coach{margin-top:0; border-top:none; padding-top:0}
  .mod.bank{order:0}
}
@media (max-width:640px){
  :root{--card-w:clamp(44px, 13vw, 62px)}

  .seat{
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"name name" "cards total";
    gap:4px 12px; padding:12px 13px; min-height:0;
  }
  .seat-name{
    grid-area:name; writing-mode:horizontal-tb; transform:none;
    align-self:auto; display:block; font-size:11px;
  }
  .hands{grid-area:cards; gap:14px}
  .seat-total{grid-area:total; align-self:end; font-size:38px}
  .hand{padding-right:0}
  .hand.focus::before{left:-7px; width:2px}

  .statusline{flex-direction:column; gap:2px; padding:9px 13px}
  .statusline .right{text-align:left}

  /* sticky control bar */
  .bar{
    position:sticky; bottom:0; z-index:20;
    margin:12px calc(-1 * clamp(14px,4vw,32px)) 0;
    padding:10px clamp(14px,4vw,32px) calc(10px + var(--safe-b));
    background:var(--paper); border-top:1.5px solid var(--ink);
    gap:10px; align-items:stretch;
  }
  .bar .cap{display:none}
  /* chips are dead weight once the cards are out */
  body:not([data-phase="bet"]) .group.chips-group{display:none}
  .group.chips-group{order:2}
  .group.grow{order:1; flex:1 1 100%}
  .chips{overflow-x:auto; padding-bottom:2px; -webkit-overflow-scrolling:touch}
  .actions{gap:6px}
  .act{flex:1 1 auto; padding:9px 10px; font-size:14px}
  .act kbd{display:none}

  .mod h3{font-size:13px}
  .chart{font-size:11px}
  .chart th, .chart td{height:26px}
  .opt{padding:6px 0}
  .pagefoot{gap:10px}
}

/* ==================================================================
   Table tier line and the leaderboard module in the data column.
================================================================== */
.tableline{
  font-size:13px; font-weight:600; padding:10px 0 0; margin:0;
  display:flex; align-items:baseline; gap:8px;
}
.ruleline{padding-top:2px}

/* chips for the higher tables */
.chip[data-v="1000"]{--chip:#f0d98a; --spot:#8a6d17}
.chip[data-v="5000"]{--chip:#e0e2dd; --spot:#4a4d47}
.chip[data-v="25000"]{--chip:#9fd0e8; --spot:#14506e}
.chip[data-v="100000"]{--chip:#e8a94f; --spot:#6e3c0a}
.mini-chip[data-v="1000"]{--chip:#f0d98a; --spot:#8a6d17}
.mini-chip[data-v="5000"]{--chip:#e0e2dd; --spot:#4a4d47}
.mini-chip[data-v="25000"]{--chip:#9fd0e8; --spot:#14506e}
.mini-chip[data-v="100000"]{--chip:#e8a94f; --spot:#6e3c0a}
.chip{font-size:11px}

.mod.board .note-sm{font-size:12px; color:var(--grey); line-height:1.4; margin:6px 0}
.mod.board .note-sm.err{color:var(--red)}
.claim{display:flex; gap:6px; margin-top:8px}
.claim input, .restore input, .keyfield{
  flex:1; min-width:0; font:inherit; font-size:13px;
  border:1.5px solid var(--ink); background:#fff; padding:8px 9px; min-height:var(--tap);
}
.keyfield{width:100%; font-size:11px; margin:4px 0 6px}
.board-links{display:flex; gap:14px; flex-wrap:wrap; margin-top:8px}
.restore{margin-top:10px; font-size:12.5px; color:var(--grey)}
.restore summary{cursor:pointer; padding:4px 0}
.restore input{margin:6px 0}