/* Okey table: felt with four seats, discard piles in the corners between them, the middle stack and
   indicator in the centre, and a two-shelf wooden rack. Tiles keep one ivory artwork in both themes;
   numbers carry their colour and every tile has a text label. */
.ok-workbench{max-width:100%;overflow:hidden}
.ok-toolbar,.ok-options,.ok-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.ok-toolbar{margin-bottom:12px}.ok-options label{min-height:44px;display:flex;align-items:center;gap:5px}
.ok-actions{margin:10px 0;justify-content:center}.ok-instructions{font-weight:650;margin:0}
.ok-act{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px}
.ok-note{color:var(--muted);margin:0;font-weight:700}
.ok-stage{display:grid;gap:10px;width:100%;max-width:880px;margin:0 auto}
.ok-table{--felt-ink:#e3eee8;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);grid-template-areas:"d2 s2 d1" "s3 mid s1" "d3 s0 d0" "melds melds melds";gap:8px;align-items:center;justify-items:center;padding:10px;border-radius:16px;background:radial-gradient(ellipse at center,#2d6a5d,#153f38 75%);box-shadow:inset 0 1px 14px #0005;color:var(--felt-ink)}
.ok-seat{display:flex;align-items:center;gap:6px;min-width:0;max-width:100%;padding:4px 8px 4px 4px;border-radius:999px;background:#0003}
.ok-seat[data-seat="0"]{grid-area:s0}.ok-seat[data-seat="1"]{grid-area:s1}.ok-seat[data-seat="2"]{grid-area:s2}.ok-seat[data-seat="3"]{grid-area:s3}
.ok-avatar{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#fbf6ea;color:#153f38;font-weight:800;transition:box-shadow .2s}
.ok-seat[data-turn=true] .ok-avatar{box-shadow:0 0 0 3px #f2c94c,0 0 14px #f2c94ccc}
.ok-seat-text{display:grid;min-width:0;line-height:1.15}.ok-seat-text strong,.ok-seat-text small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ok-seat-text strong{font-size:.82rem}.ok-seat-text small{font-size:.72rem;opacity:.8}
.ok-pile{position:relative;display:grid;place-items:center;min-width:44px;min-height:58px;padding:3px;border:2px dashed #ffffff3d;border-radius:10px;background:#0002;color:var(--felt-ink)}
.ok-pile[data-pile="0"]{grid-area:d0}.ok-pile[data-pile="1"]{grid-area:d1}.ok-pile[data-pile="2"]{grid-area:d2}.ok-pile[data-pile="3"]{grid-area:d3}
.ok-pile[data-depth] .ok-tile{box-shadow:2px 2px 0 #c9bfa8,4px 4px 0 #b9ae95}
button.ok-pile{cursor:pointer;touch-action:none}button.ok-pile:disabled{cursor:default}
button.ok-pile:not(:disabled){border-style:solid;border-color:#f2c94c}
.ok-center{grid-area:mid;display:flex;align-items:flex-end;justify-content:center;gap:10px}
.ok-stock{position:relative;display:grid;place-items:center;min-width:48px;min-height:64px;padding:0;border:0;border-radius:8px;background:repeating-linear-gradient(135deg,#efe6cf 0 6px,#e5d9bb 6px 12px);box-shadow:2px 2px 0 #c9bfa8,4px 4px 0 #b9ae95,6px 6px 0 #a39679;color:#153f38;font-weight:800;cursor:pointer;touch-action:none}
.ok-stock:disabled{cursor:default;filter:saturate(.6) brightness(.9)}.ok-stock:not(:disabled){outline:3px solid #f2c94c;outline-offset:3px}
.ok-indicator{display:grid;justify-items:center;gap:2px;margin:0}.ok-indicator figcaption{font-size:.7rem;opacity:.85;text-transform:capitalize}
.ok-melds{grid-area:melds;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:100%}
.ok-meld{display:flex;gap:2px;padding:4px;border:2px solid transparent;border-radius:8px;background:#0003}
button.ok-meld{cursor:pointer}button.ok-meld:not(:disabled){border-color:#f2c94c}
/* Tiles */
.ok-tile{position:relative;display:inline-flex;align-items:flex-start;justify-content:center;width:38px;height:54px;padding:6px 0 0;border-radius:6px;background:linear-gradient(#fffdf6,#f1e9d4);border:1px solid #c9bfa8;box-shadow:0 2px 0 #b9ae95;font:900 1.45rem/1 var(--font);letter-spacing:-.02em;color:#141414;user-select:none;-webkit-user-select:none}
.ok-tile::after{content:"";position:absolute;left:50%;bottom:16%;width:22%;aspect-ratio:1;border-radius:50%;background:currentColor;transform:translateX(-50%)}
.ok-tile.ok-fake::after{display:none}.ok-tile.ok-fake{align-items:center;padding:0}
/* Four clearly different hues on ivory (all ≥ 4.5:1): crimson red, deep amber, royal blue and black. */
.ok-tile[data-color=red]{color:#d0101e}.ok-tile[data-color=yellow]{color:#a45c00}.ok-tile[data-color=blue]{color:#0b4fd6}.ok-tile[data-color=black]{color:#111}.ok-tile[data-color=fake]{color:#1f7a32}
.ok-tile.ok-wild{box-shadow:0 2px 0 #b9ae95,inset 0 0 0 2px #d4a017}
.ok-meld .ok-tile,.ok-pile .ok-tile,.ok-indicator .ok-tile{width:30px;height:42px;padding-top:4px;font-size:1rem}
button.ok-tile{cursor:grab;touch-action:none}button.ok-tile:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
button.ok-tile[aria-pressed=true]{transform:translateY(-14%);box-shadow:0 0 0 3px #f2c94c,0 4px 6px #0006}
button.ok-tile[data-staged]{opacity:1;cursor:default;box-shadow:0 2px 0 #b9ae95,inset 0 -4px 0 var(--group)}
button.ok-tile[data-staged="0"]{--group:#2f80ed}button.ok-tile[data-staged="1"]{--group:#27ae60}button.ok-tile[data-staged="2"]{--group:#eb5757}button.ok-tile[data-staged="3"]{--group:#9b51e0}
/* Rack: two wooden shelves of fixed slots; gaps separate groups. */
.ok-rack{--cols:13;container-type:inline-size;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:12px 2px;width:100%;box-sizing:border-box;padding:8px 6px 14px;border-radius:12px;background:linear-gradient(180deg,#b07a46 0,#8b5a2f 48%,#6e4321 49%,#8b5a2f 51%,#7a4c26 100%);box-shadow:inset 0 2px 0 #c99662,inset 0 -5px 0 #5a3519,0 6px 14px #0004}
.ok-slot{position:relative;display:grid;min-width:0;aspect-ratio:7/10;border-radius:5px;box-shadow:0 5px 0 -1px #4e2d13}
.ok-slot:empty{background:#0000001a}
.ok-slot[data-drop-hover]{background:#f2c94c66}
.ok-rack .ok-tile{width:100%;height:100%;min-width:0;padding-top:10%;border-radius:clamp(3px,.8cqw,6px);font-size:clamp(.95rem,calc(100cqw / var(--cols) * .62),1.9rem)}
/* A freshly drawn tile floats, selected and slightly larger, just above the middle of the rack until you place it. */
.ok-rack{position:relative}
.ok-rack .ok-tile.ok-floating{--slot:calc((100cqw - 24px) / var(--cols));position:absolute;left:50%;bottom:calc(100% + 6px);width:calc(var(--slot) * 1.25);height:auto;aspect-ratio:7/10;padding-top:calc(var(--slot) * .125);transform:translateX(-50%);z-index:2;box-shadow:0 0 0 3px #f2c94c,0 10px 18px #0006;font-size:clamp(1.15rem,calc(100cqw / var(--cols) * .78),2.3rem);animation:ok-float-in .18s ease-out}
@keyframes ok-float-in{from{transform:translate(-50%,8px)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.ok-rack .ok-tile.ok-floating{animation:none}}
/* Short landscape: the table is shallow, so the tile floats beside the centre and never hides the indicator or stock. */
@media (max-height:500px) and (orientation:landscape){.ok-rack .ok-tile.ok-floating{left:calc(50% + var(--slot) * 2.2);width:calc(var(--slot) * 1.1);padding-top:calc(var(--slot) * .11)}}
[data-drop-ready]{transition:outline-color .15s}[data-drop-hover]:not(.ok-slot){outline:3px solid #f2c94c;outline-offset:2px}
.piece-ghost{opacity:.92;transform:scale(1.08) rotate(-2deg);box-shadow:0 10px 18px #0006 !important;cursor:grabbing}
.piece-dragging{opacity:.35}
@media (max-width:480px){.ok-rack{padding:6px 3px 12px;gap:10px 1px}.ok-table{gap:6px;padding:8px}.ok-avatar{width:26px;height:26px;font-size:.8rem}.ok-seat-text strong{font-size:.74rem}.ok-seat-text small{font-size:.66rem}}
@media (max-width:600px) and (min-height:700px){.ok-table{gap:14px 6px;padding:14px 8px}.ok-pile .ok-tile,.ok-indicator .ok-tile{width:34px;height:48px;font-size:1.1rem}.ok-stock{min-width:52px;min-height:70px}}
@media (max-height:500px) and (orientation:landscape){.ok-stage{gap:6px}.ok-table{padding:4px 8px;gap:2px 8px}.ok-pile{min-height:44px;padding:1px}.ok-pile .ok-tile,.ok-indicator .ok-tile,.ok-meld .ok-tile{width:26px;height:36px;font-size:.85rem}.ok-stock{min-width:44px;min-height:46px}.ok-indicator figcaption{display:none}.ok-avatar{width:24px;height:24px;font-size:.75rem}.ok-rack{padding:5px 6px 9px;gap:7px 2px}.ok-slot{aspect-ratio:3/4}}