/* Mines Classic (internal id clear-the-table): board and dock styles. Linked from quick.html after quick.css, and scoped to
   .ctt*. */

/* Control bar: the Joker count stepper, and its quick picks in a small sheet above it */
.ctt-opts{position:relative;display:flex;min-width:0}
.ctt-count{flex:1 1 auto;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:4px;min-width:0;max-width:340px}
.ctt-count>button{height:44px;border:0;border-radius:10px;background:var(--felt-up);font:500 24px/1 var(--mono);color:var(--cream)}
.ctt-count>button:hover:not(:disabled){background:#316b53}
.ctt-count>button:disabled{opacity:.45}
.ctt-count>.ctt-count-value{display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;padding:0 10px;background:var(--felt-dark);font:inherit;white-space:nowrap}
.ctt-count>.ctt-count-value:hover:not(:disabled){background:#0b1f16}
.ctt-count-value strong{font:600 18px/1.1 var(--serif)}
.ctt-count-value small{font:400 13px/1.1 var(--ui);color:var(--cream-2);overflow:hidden;text-overflow:ellipsis}
.ctt-count-value svg{flex:none;width:12px;height:12px;color:var(--cream-2)}
.ctt-count-value[aria-expanded=true] svg{transform:rotate(180deg)}
.ctt-picks{position:absolute;z-index:20;left:0;bottom:calc(100% + 10px);width:max-content;max-width:calc(100vw - 20px);padding:10px 12px 12px;border-radius:14px;background:var(--felt-deep);border:1px solid var(--line-2);box-shadow:0 18px 44px #000a}
.ctt-picks-title{margin:0 0 8px;font:600 16px/1.2 var(--serif)}
/* Specific enough to beat the bar's own .q-options .q-seg column rules: the sheet sizes to its five picks. */
.q-options .ctt-picks .ctt-presets{grid-template-columns:repeat(var(--seg-count),minmax(52px,auto))}
.ctt-presets button{min-height:48px}

/* Board */
.ctt{--gap:6px;--bar:58px;--bar-gap:10px;height:100%;display:grid;grid-template-rows:var(--bar) minmax(0,1fr);gap:var(--bar-gap)}
/* The figures bar is as wide as the table (at least 520px when the board allows), centred above it. */
.ctt-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;justify-self:center;width:min(100%,max(520px,calc(5*var(--cw) + 4*var(--gap))))}
.ctt-stat{margin:0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;padding:4px 6px;background:#10291e66;text-align:center}
.ctt-stat-label{font:400 12.5px/1.15 var(--ui);color:var(--cream-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ctt-stat-value{font:500 19px/1.1 var(--mono);font-variant-numeric:tabular-nums;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ctt-stat-value[data-long]{font-size:14px}
.ctt-stat[data-state=cash]{background:var(--cream)}
.ctt-stat[data-state=cash] .ctt-stat-label{color:#1b1a17b0}
.ctt-stat[data-state=cash] .ctt-stat-value{color:var(--felt-deep)}
.ctt-stat[data-state=next]{box-shadow:inset 0 0 0 1.5px var(--cream)}
.ctt-stat[data-state=muted] .ctt-stat-value{font:400 14px/1.1 var(--ui);color:var(--cream-2)}
.ctt-stat[data-state=lost]{background:var(--ink);box-shadow:inset 0 0 0 1.5px var(--red-text)}
.ctt-stat[data-state=lost] .ctt-stat-value{color:var(--red-text)}

/* The 5x5 table: cards keep a playing-card shape and fill whichever side of the board runs out first */
.ctt{--ch:min(calc((100cqh - var(--bar) - var(--bar-gap) - 4*var(--gap))/5),calc((100cqw - 4*var(--gap))/5/.74));--cw:calc(var(--ch)*.74)}
.ctt-grid{display:grid;grid-template-columns:repeat(5,var(--cw));grid-auto-rows:var(--ch);gap:var(--gap);justify-content:center;align-content:center;min-height:0}
.ctt-card{position:relative;width:100%;height:100%;padding:0;border:0;border-radius:calc(var(--ch)*.1);background:var(--red);color:var(--ink);display:grid;place-items:center;overflow:hidden;transition:transform .15s var(--ease),background .15s}
.ctt-back{position:absolute;inset:calc(var(--ch)*.055);border-radius:calc(var(--ch)*.06);box-shadow:inset 0 0 0 2px #f2ead980;background:url('/assets/baize-mark-v5.svg') center/auto 34% no-repeat}
.ctt-grid[data-state=live] .ctt-card[data-face=back]:hover,.ctt-grid[data-state=idle] .ctt-card[data-face=back]:hover{transform:translateY(-3px);background:var(--red-up)}
.ctt-grid:not([data-state=done]) .ctt-card[aria-disabled=true][data-face=back]{cursor:default}
.ctt-grid[data-state=done] .ctt-card{cursor:default}

/* Faces */
.ctt-face{position:absolute;inset:0;display:grid;place-items:center}
.ctt-card[data-face=safe]{background:var(--cream)}
.ctt-card[data-mark=picked]{box-shadow:inset 0 0 0 3px var(--win)}
.ctt-face[data-suit=hearts],.ctt-face[data-suit=diamonds]{color:var(--red)}
.ctt-face[data-suit=spades],.ctt-face[data-suit=clubs]{color:var(--ink)}
.ctt-pip svg{display:block;width:calc(var(--cw)*.42);height:auto}
.ctt-index{position:absolute;top:calc(var(--ch)*.06);left:calc(var(--cw)*.09);display:flex;flex-direction:column;align-items:center;gap:1px}
.ctt-index b{font:600 calc(var(--ch)*.2)/1 var(--serif);letter-spacing:-.04em}
.ctt-index svg{width:calc(var(--ch)*.12);height:auto}
.ctt-index-low{top:auto;left:auto;bottom:calc(var(--ch)*.06);right:calc(var(--cw)*.09);transform:rotate(180deg)}
.ctt-card[data-mark=picked].q-flip .ctt-pip{animation:q-pop calc(.26s*var(--pace,1)) calc(.3s*var(--pace,1)) var(--ease)}
.ctt-joker{grid-template-rows:auto auto;align-content:center;gap:calc(var(--ch)*.05)}
.ctt-joker svg{width:calc(var(--cw)*.4);height:auto;justify-self:center}
.ctt-joker b{font:600 calc(var(--ch)*.15)/1 var(--ui);color:var(--cream)}
.ctt-card[data-face=joker]{background:var(--ink);color:var(--red-text)}
.ctt-card[data-mark=hit]{background:var(--red);color:var(--cream);box-shadow:inset 0 0 0 3px var(--cream)}
.ctt-card[data-mark=hit].q-flip{animation:q-flip calc(.3s*var(--pace,1)) both linear,q-shake calc(.32s*var(--pace,1)) calc(.3s*var(--pace,1)) var(--ease)}
.ctt-card[data-mark=hit].q-flip::after{background:var(--red-up)}
.ctt-card[data-mark=unturned]{background:var(--felt-up)}
.ctt-card[data-mark=unturned] .ctt-back{box-shadow:inset 0 0 0 2px #f2ead933;opacity:.45}

@container (max-width:420px){.ctt-stat-detail{display:none}.ctt{--gap:5px;--bar:50px;--bar-gap:8px}.ctt{--cw:min(calc((100cqw - 4*var(--gap))/5),calc(var(--ch)*.86))}.ctt-stat-label{font-size:11.5px}.ctt-stat-value{font-size:17px}.ctt-stat-value[data-long]{font-size:12.5px}.ctt-stat{border-radius:10px;padding:3px 4px}}
@container (min-width:560px){.ctt-stat-value{font-size:21px}.ctt-stat-label{font-size:13px}}

@media (max-width:359px){.ctt-count-value small{display:none}}
/* Short boards: a slimmer figures bar, so the 5x5 table keeps its cards 44px wide. */
@container (max-height:420px){.ctt{--bar:46px;--bar-gap:6px}.ctt-stat{padding:2px 6px}}