@import url('/design-tokens.css');
@import url('/styles.css');
.page { width: min(100% - 32px, 1040px); margin: 0 auto; padding: 14px 0 52px; }
.topbar { display:flex; align-items:center; gap:18px; min-height:48px; border-bottom:1px solid var(--line); }
.diagnostics-note { margin:8px 0 0; color:var(--muted); font-size:13px; text-align:right; }
.brand { color:var(--ink); text-decoration:none; font:700 23px var(--serif); letter-spacing:-.04em; }
.game-picker { position:relative; }
#game-picker-button { border:0; background:transparent; border-radius:10px; padding:8px 10px; font-weight:650; cursor:pointer; }
#game-switch { position:absolute; z-index:8; top:calc(100% + 5px); left:0; min-width:210px; max-height:calc(100dvh - 80px); overflow-y:auto; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--surface); box-shadow:var(--card-shadow); }
#game-switch a { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:var(--ink); text-decoration:none; }
.picker-icon { width:22px; height:22px; flex:none; border-radius:5px; object-fit:contain; }
#game-switch a:hover,#game-switch a[aria-current] { background:var(--invite-soft); }
.game { display:flex; flex-direction:column; padding-top:22px; }
.title-row { order:0; }
.connection-bar { order:1; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px 12px; margin-bottom:8px; }
.play-area { order:2; }
.title-row { display:flex; align-items:center; justify-content:space-between; margin:0 0 14px; }
.title-row h1 { margin:2px 0 0; font:600 clamp(27px,4vw,38px)/1.05 var(--serif); letter-spacing:-.03em; }
.eyebrow,.round-label { margin:0; color:var(--muted); font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.primary,.secondary,.quiet,.icon-button { min-height:44px; border-radius:11px; padding:9px 15px; font-weight:650; cursor:pointer; }
.primary { border:1px solid var(--invite-action); color:white; background:var(--invite-action); }
.primary:hover { background:var(--invite-action-hover); }
.primary:disabled,.secondary:disabled,.icon-button:disabled { opacity:.55; cursor:not-allowed; box-shadow:none; }
.secondary,.icon-button { border:1px solid var(--line-strong); color:var(--ink); background:var(--surface); }
.quiet,.text-button { border:0; background:transparent; color:var(--invite-action); cursor:pointer; }
.connection-note { min-height:20px; margin:0; color:var(--muted); font-size:13px; }
.play-area { margin-top:4px; }
#invite-link { width:100%; min-height:44px; margin-top:10px; border:1px solid var(--line); border-radius:9px; padding:9px 11px; background:white; }
.lobby { margin-top:14px; }
.lobby .mp-connection-primary { width:100%; }
.lobby-seats { margin-bottom:10px; }
.seat .dot { background:var(--seat-color); }
.seat.open .dot { background:transparent; }
.seat small { margin-left:0; }
/* The table owns game color; shared paper, type and invitation tokens stay intact. */
.table-felt { --table-ink:#faf7ec; --table-muted:#cad9ce; position:relative; overflow:hidden; min-height:568px; padding:12px 28px 20px; border:2px solid #677465; border-radius:32px; color:var(--table-ink); background:#28553f; box-shadow:inset 0 0 0 5px #f0e4c51a,0 10px 28px #26372d16; }
.table-felt::before { position:absolute; inset:8px; border:1px solid #e5dfc925; border-radius:23px; content:""; pointer-events:none; }
.table-topline { position:relative; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:44px; }
.round-label { color:var(--table-muted); font-size:11px; letter-spacing:.09em; }
.table-help { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:8px 0 8px 12px; border:0; background:transparent; color:var(--table-muted); font-size:12px; cursor:pointer; }
.table-help span { display:inline-grid; place-items:center; width:18px; height:18px; border:1px solid #cbd8ca70; border-radius:50%; font-size:11px; }
.table-help:hover { color:white; }
.table-arena { position:relative; min-height:270px; display:grid; grid-template-columns:142px minmax(0,1fr) 142px; align-items:end; }
.opponents { position:absolute; inset:0; --back-width:48px; --back-height:68px; }
.opponent { position:absolute; display:flex; flex-direction:column; align-items:center; gap:7px; min-width:0; width:142px; padding:8px 5px; border-radius:12px; }
.opponent[data-position=left] { left:0; top:104px; }
.opponent[data-position=top] { left:50%; top:0; transform:translateX(-50%); }
.opponent[data-position=right] { right:0; top:104px; }
.opponent.active .opponent-heading { color:#f8df9f; }
.opponent.is-next:not(.active) .opponent-heading { color:#e0e9de; }
.opponent.winner .opponent-heading { color:#f8df9f; }
.opponent-cards { display:grid; grid-template-columns:repeat(var(--card-count),minmax(0,1fr)); width:min(100%,calc(var(--back-width) + var(--card-count)*7px)); max-width:210px; min-height:var(--back-height); padding-right:var(--back-width); box-sizing:border-box; }
.mini-back { display:block; width:var(--back-width); height:var(--back-height); border:1px solid #eee6d7; border-radius:4px; background:#f7f5ec var(--card-back-art) center/100% 100% no-repeat; box-shadow:0 1px 2px #0004; }
.opponent-copy { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:13px; text-align:center; }
.opponent-heading { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:4px 6px; }
.opponent-turn { color:#f8df9f; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.opponent-turn::before { content:""; display:inline-block; width:5px; height:5px; margin-right:4px; border-radius:50%; background:currentColor; vertical-align:1px; }
.opponent-copy small { color:var(--table-muted); font-size:11px; line-height:1.3; }
.center-piles { grid-column:2; position:relative; display:grid; grid-template-columns:auto auto; justify-content:center; align-items:center; column-gap:28px; row-gap:10px; padding:110px 0 0; min-width:0; }
.draw-pile,.discard-stack { display:flex; align-items:center; gap:8px; border:0; color:var(--table-ink); background:none; }
.draw-pile { flex-direction:column; padding:4px; cursor:pointer; }
.draw-pile:disabled { cursor:default; }
.draw-pile:disabled > small { opacity:.65; }
.draw-pile:not(:disabled) .deck-back { box-shadow:0 0 0 2px #e9cc82,0 5px 12px #102f2380; }
.draw-pile:not(:disabled):hover .deck-back { transform:translateY(-3px) rotate(-4deg); }
.draw-pile > small { color:var(--table-muted); font-size:11px; line-height:1.3; }
.deck-back { position:relative; display:block; overflow:hidden; width:88px; height:124px; border:1px solid #ded8cb; border-radius:9px; background:#f7f5ec; box-shadow:0 5px 12px #102f2380; transform:rotate(-4deg); transition:transform .2s cubic-bezier(.2,.7,.25,1),box-shadow .2s ease; }
.draw-pile.draw-ready .deck-back { animation:draw-ready-breathe 2.8s ease-in-out infinite; }
.draw-pile.draw-ready .deck-back::after { position:absolute; z-index:2; inset:-20%; background:linear-gradient(112deg,transparent 36%,#fff0 43%,#fff8 50%,#fff0 57%,transparent 64%); content:""; pointer-events:none; animation:draw-ready-glint 4.2s ease-in-out infinite; }
.card-art { display:block; width:100%; height:100%; border-radius:inherit; }
.card-face,.playing-card { --corner-rank:17px; --corner-suit:12px; --card-inset:6px; position:relative; display:block; flex:none; width:70px; height:100px; padding:0; border:1px solid #ded8cb; border-radius:9px; color:#183d38; background:#f7f5ec; box-shadow:0 4px 9px #102f2360; }
.card-face { width:88px; height:124px; }
.card-face.red,.playing-card.red { color:#ce4938; }
.discard-stack { flex-direction:row; gap:18px; }
.discard-context { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; width:132px; gap:9px; }
.suit-call { display:flex; align-items:center; justify-content:center; gap:8px; width:max-content; max-width:100%; min-height:44px; padding:8px 12px; border:1px solid #fff8e247; border-radius:12px; background:#f5efdf; color:#243e32; font-size:16px; font-weight:650; line-height:1.2; box-shadow:0 2px 8px #123b2818; }
.suit-symbol { display:block; width:100%; height:100%; }
.suit-call .suit-symbol { width:23px; height:23px; }
.suit-call .red { color:#b64031; }
.match-rule { margin:0; color:var(--table-muted); font-size:12px; line-height:1.5; }
.last-play { grid-column:1 / -1; min-height:18px; margin:0; color:var(--table-muted); text-align:center; font-size:12px; line-height:1.5; }
.self-seat { position:relative; width:min(100%,640px); margin:18px auto 0; }
.turn-bar { display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px; border-top:1px solid #e5dfc927; padding-top:12px; }
.turn-copy { min-width:0; flex:1; }
.turn-copy h2 { margin:0 0 4px; color:#e9ede3; font:600 23px/1.15 var(--serif); }
.self-seat.active .turn-copy h2 { color:#f9e5ad; }
.turn-detail { min-height:18px; margin:0; color:var(--table-muted); font-size:13px; line-height:1.4; }
.self-label { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin:12px 4px 0; color:var(--table-muted); font-size:12px; }
.self-label strong { font:600 12px var(--sans); }
.self-label span { color:var(--table-muted); font-size:12px; }
.hand-scroll { --hand-card-width:92px; --hand-card-step:26px; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:thin; scrollbar-color:#c9ddcb66 transparent; border-radius:4px; }
.hand { --hand-preview-extra:0px; --hand-preview-gap:6px; display:flex; flex-wrap:nowrap; justify-content:flex-start; width:max-content; min-width:100%; box-sizing:border-box; padding:22px max(4px,calc(var(--hand-inset,4px) - var(--hand-preview-extra))) 10px var(--hand-inset,4px); }
.hand .playing-card { isolation:isolate; width:var(--hand-card-width); height:132px; }
.hand .playing-card + .playing-card { margin-left:calc(var(--hand-card-step) - var(--hand-card-width)); }
/* Open the selected card as one intact surface. Keep its left edge anchored;
   only later cards move, using the existing trailing space before scrolling. */
.hand .playing-card.selected + .playing-card { margin-left:var(--hand-preview-gap); }
.hand:has(.playing-card.selected:not(:last-child)):not(:has(.playing-card:focus-visible)),.hand:has(.playing-card:focus-visible:not(:last-child)) { --hand-preview-extra:calc(var(--hand-card-width) - var(--hand-card-step) + var(--hand-preview-gap)); }
.hand:has(.playing-card:focus-visible) .playing-card + .playing-card { margin-left:calc(var(--hand-card-step) - var(--hand-card-width)); }
.hand:has(.playing-card:focus-visible) .playing-card:focus-visible + .playing-card { margin-left:var(--hand-preview-gap); }
.playing-card { text-align:left; cursor:pointer; transition:transform .2s cubic-bezier(.2,.7,.25,1),box-shadow .2s ease,filter .2s ease,opacity .2s ease; }
.playing-card.playable { box-shadow:0 4px 9px #102f2360; }
.playing-card.unplayable { filter:saturate(.42) brightness(.72); box-shadow:0 2px 5px #102f234d; }
.playing-card.hovered:not(:disabled) { transform:translateY(-9px); box-shadow:0 0 0 2px #e8cb84,0 9px 15px #102f2385; }
.playing-card.selected,.hand .playing-card:focus-visible { z-index:5; transform:translateY(-14px); box-shadow:0 0 0 3px #faf3d9,0 10px 16px #102f2390; }
.hand:has(.playing-card:focus-visible) .playing-card.selected:not(:focus-visible) { z-index:auto; transform:none; box-shadow:0 4px 9px #102f2360; }
.playing-card:disabled { opacity:1; cursor:default; }
.playing-card.new-card::after { content:"New"; position:absolute; z-index:1; left:50%; bottom:-5px; transform:translateX(-50%); padding:2px 6px; border-radius:5px; color:#244733; background:#f9e5ad; font:700 9px/1.2 var(--sans); letter-spacing:.02em; pointer-events:none; box-shadow:0 1px 3px #102f2333; }
.card-corner { position:absolute; top:var(--card-inset); left:var(--card-inset); display:flex; flex-direction:column; align-items:center; font:700 var(--corner-rank)/1 var(--serif); }
.card-corner.wild-index { background:#eee3c9; border-radius:2px; box-shadow:0 0 0 3px #eee3c9; }
.card-rank { display:block; }
.card-corner small { display:block; width:var(--corner-suit); height:var(--corner-suit); }
.card-glyph { position:absolute; inset:0; border-radius:inherit; pointer-events:none; }
.card-corner.bottom { top:auto; left:auto; bottom:var(--card-inset); right:var(--card-inset); transform:rotate(180deg); }
.hand-hint { min-height:16px; margin:0; color:var(--table-muted); text-align:center; font-size:11px; }
.hand-hint[data-overflow="false"] { visibility:hidden; }
.action-row { display:flex; flex:none; align-items:center; justify-content:center; }
#draw-button { border:1px solid #f4edd9; background:#f4edd9; color:#254a36; white-space:nowrap; font-size:13px; padding:9px 13px; }
#draw-button:disabled { opacity:.4; }
.table-result { position:relative; width:min(100%,520px); margin:12px auto 0; padding:18px 20px 14px; border:1px solid #f0e4c538; border-radius:18px; background:#eff0df12; text-align:center; }
.result-eyebrow { margin:0 0 6px; color:var(--table-muted); font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.table-result h2 { margin:0; color:#f9e5ad; font:600 28px/1.15 var(--serif); }
.result-detail { margin:7px 0 0; color:var(--table-muted); font-size:13px; line-height:1.4; }
.result-scores { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 18px; margin:13px 0; color:#e8eee2; font-size:12px; line-height:1.5; }
.result-score { display:flex; gap:6px; }
.result-score strong { color:white; }
#again { min-width:156px; border-color:#f4edd9; background:#f4edd9; color:#254a36; }
#again:disabled { opacity:.7; }
.rematch-status { min-height:18px; margin:9px 0 0; color:var(--table-muted); font-size:12px; line-height:1.5; }
.table-felt[data-phase=finished] .turn-bar { display:none; }
.table-felt[data-phase=finished] .self-seat { margin-top:12px; }
.table-felt[data-phase=finished] .table-arena { min-height:238px; }
.table-felt[data-phase=finished] .center-piles { padding-top:60px; }
.table-felt[data-phase=finished] .hand { padding-top:12px; }
.action-status { min-height:18px; margin:6px 0 0; color:var(--muted); text-align:center; font-size:12px; }
.action-status:empty { min-height:0; margin:0; }
.room-actions { display:flex; justify-content:center; gap:5px; }
.text-button { min-height:44px; padding:8px 10px; }
.suit-dialog { position:fixed; z-index:20; width:min(420px,calc(100% - 28px)); max-height:calc(100dvh - 32px); margin:auto; padding:23px; border:1px solid var(--line); border-radius:18px; background:var(--surface); box-shadow:0 18px 60px #1e211db3; }
.suit-dialog::backdrop { background:#1e211d88; }
.rules-dialog { width:min(560px,calc(100% - 28px)); overflow:auto; }
.rules-dialog ul { padding-left:20px; line-height:1.55; }
.rules-dialog p { line-height:1.55; }
.suit-dialog h2 { margin:0; font:600 24px var(--serif); }
.suit-dialog p { color:var(--muted); }
.suit-chooser { position:absolute; z-index:12; width:min(244px,calc(100% - 24px)); color:#fbf8ec; transform:translate(-50%,-100%); pointer-events:none; }
.suit-chooser[hidden] { display:none; }
.suit-prompt { position:absolute; top:calc(100% + 8px); left:50%; width:max-content; max-width:100%; margin:0; color:#dce9da; font:600 10px/1.2 var(--sans); letter-spacing:.015em; text-align:center; text-shadow:0 1px 4px #08291f,0 0 7px #08291f; transform:translateX(-50%); white-space:nowrap; }
.suit-prompt strong { color:#f3d98e; font:600 12px/1.2 var(--serif); letter-spacing:0; }
.suit-options { display:flex; align-items:flex-end; justify-content:center; gap:9px; }
.suit-options button { --rest-y:0px; --rest-rotate:0deg; --origin-x:0px; position:relative; display:grid; flex:none; width:45px; height:62px; padding:0; border:1px solid #ded8cb; border-radius:7px; color:#183d38; background:linear-gradient(145deg,#fffdf8 0,#f7f3e8 68%,#e8decc 100%); box-shadow:inset 0 0 0 1px #fff9,0 5px 10px #09291b78; cursor:pointer; transform:translateY(var(--rest-y)) rotate(var(--rest-rotate)); transform-origin:50% 78%; place-items:center; pointer-events:auto; transition:color .14s ease,box-shadow .14s ease,transform .14s cubic-bezier(.2,.7,.25,1); }
.suit-options button:nth-child(1) { --rest-y:0px; --rest-rotate:-10deg; --origin-x:78px; }
.suit-options button:nth-child(2) { --rest-y:-8px; --rest-rotate:-3deg; --origin-x:26px; }
.suit-options button:nth-child(3) { --rest-y:-8px; --rest-rotate:3deg; --origin-x:-26px; }
.suit-options button:nth-child(4) { --rest-y:0px; --rest-rotate:10deg; --origin-x:-78px; }
.suit-options button > .suit-symbol { width:25px; height:25px; filter:drop-shadow(0 1px 0 #fff); }
.suit-choice-corner { position:absolute; top:5px; left:5px; display:block; width:8px; height:8px; }
.suit-choice-corner .suit-symbol { display:block; width:8px; height:8px; }
.suit-choice-corner.bottom { top:auto; right:5px; bottom:5px; left:auto; transform:rotate(180deg); }
.suit-options button[data-suit=hearts],.suit-options button[data-suit=diamonds] { color:#bc3930; }
.suit-options button:focus-visible { outline:2px solid #f4d77d; outline-offset:3px; box-shadow:inset 0 0 0 1px #fff9,0 0 0 1px #a78339,0 7px 15px #09291ba8; }
.suit-chooser.is-opening .suit-options button { animation:suit-token-in .34s cubic-bezier(.18,.82,.25,1.2) both; }
.suit-chooser.is-opening .suit-options button:nth-child(2) { animation-delay:38ms; }
.suit-chooser.is-opening .suit-options button:nth-child(3) { animation-delay:76ms; }
.suit-chooser.is-opening .suit-options button:nth-child(4) { animation-delay:114ms; }
.suit-chooser.is-opening .suit-prompt { animation:suit-prompt-in .24s .16s ease-out both; }
.suit-tether { position:absolute; left:calc(50% + var(--anchor-delta,0px)); bottom:-34px; width:1px; height:38px; background:linear-gradient(#e7c568,#e7c56800); transform:translateX(-50%); transform-origin:top; }
.suit-tether::before { position:absolute; top:-3px; left:50%; width:5px; height:5px; border:1px solid #f4d77d; border-radius:50%; background:#d5ad46; box-shadow:0 0 8px #f4d77dbd; content:""; transform:translateX(-50%); }
.suit-tether i { position:absolute; top:34px; left:50%; width:7px; height:7px; border:1px solid #f4d77d; border-radius:50%; background:#285f45; box-shadow:0 1px 4px #09291b; transform:translateX(-50%); }
.suit-chooser.is-opening .suit-tether { animation:suit-tether-in .26s .08s ease-out both; }
.suit-chooser.is-choosing .suit-prompt,.suit-chooser.is-choosing .suit-tether { opacity:0; transition:opacity .12s ease; }
.suit-chooser.is-choosing .suit-options button:not(.is-chosen) { animation:suit-token-out .18s ease-in both; }
.suit-chooser.is-choosing .suit-options button.is-chosen { animation:suit-token-confirm .18s ease-out both; }
.table-felt.choosing-suit .playing-card.selected { transform:translateY(-12px); box-shadow:0 0 0 1px #173f31,0 0 0 3px #e9c96d,0 11px 18px #072517a3; }
#current-suit.is-changed { animation:suit-change-cue .55s cubic-bezier(.2,.7,.25,1); }
.card-flight-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.card-flight { position:fixed; z-index:40; display:block; transform-origin:top left; will-change:transform,opacity; pointer-events:none; }
.card-flight-back,.card-flight-face { position:absolute; inset:0; display:block; width:100%; height:100%; backface-visibility:hidden; transform:none; transition:none; }
.card-flight-face { overflow:hidden; cursor:default; }
.card-flight-face .card-art { width:100%; height:100%; }
.motion-hidden { visibility:hidden!important; }
.retry { flex:none; }
.private-room .game { position:relative; padding-top:8px; }
.private-room .play-area { margin-top:0; }
.private-room .title-row { margin:0; }
.private-room .title-row > div { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.private-room .connection-bar[data-healthy="true"] { min-height:44px; padding:0 2px; margin:0 0 2px; border:0; border-radius:0; background:transparent; flex-wrap:nowrap; }
.private-room .connection-bar[data-healthy="true"] .connection-note { flex:1 1 auto; min-width:0; font-size:12px; }
.private-room .connection-bar[data-healthy="true"] > button { flex:none; min-height:44px; padding-inline:10px; border:0; background:transparent; font-size:12px; }
.private-room .connection-bar:has(#game-retry:not([hidden])) { padding:9px 12px; border:1px solid var(--line); border-radius:12px; background:var(--surface); flex-wrap:wrap; }
#leave-room { flex:none; margin-left:auto; }
.trust-links { display:flex; justify-content:center; gap:12px; margin:22px 0; }
.trust-links a { color:var(--muted); font-size:12px; }
.public-info { max-width:720px; margin:40px auto 0; color:#525850; font-size:14px; line-height:1.65; }
.public-info h2,.public-info h3 { color:var(--ink); font-family:var(--serif); }
@media(max-width:850px) and (min-width:651px) {
 .table-felt { padding-inline:20px; }
 .table-arena { grid-template-columns:110px minmax(0,1fr) 110px; }
 .opponent { width:110px; }
 .center-piles { column-gap:18px; }
 .discard-stack { gap:12px; }
 .discard-context { width:116px; }
 .suit-call { padding-inline:9px; font-size:15px; }
}
@media(max-width:650px) {
 .page { width:calc(100% - 24px); padding-top:8px; padding-bottom:24px; }
 .topbar { min-height:44px; }
 .game { padding-top:15px; }
 .private-room .game { padding-top:2px; }
 .connection-bar:has(#game-retry:not([hidden])) { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:6px; }
 .connection-bar:has(#game-retry:not([hidden])) .connection-note { grid-column:1 / -1; }
 .connection-bar:has(#game-retry:not([hidden])) .retry { justify-self:start; padding-inline:12px; }
 .table-felt { min-height:448px; padding:4px 10px 10px; border-radius:22px; }
 .table-felt::before { inset:5px; border-radius:16px; }
 .table-topline { min-height:44px; }
 .round-label { font-size:10px; letter-spacing:.07em; }
 .table-help { gap:5px; padding-left:8px; font-size:11px; }
 .table-arena { display:flex; flex-direction:column; justify-content:flex-start; min-height:204px; }
 .opponents { position:static; inset:auto; --back-width:42px; --back-height:60px; display:grid; grid-template-columns:repeat(var(--opponent-count,1),minmax(0,1fr)); gap:8px; width:100%; min-height:96px; margin:0 auto; }
 .opponent,.opponent[data-position] { position:static; transform:none; width:auto; gap:5px; padding:3px 0 5px; }
 .opponent-copy { font-size:11px; gap:2px; }
 .opponent-copy small { font-size:10px; }
 .opponent-heading { gap:3px; }
 .opponent-turn { font-size:8px; }
 .opponent-turn::before { width:4px; height:4px; margin-right:3px; }
 .opponent-cards { min-height:40px; }
 .center-piles { display:grid; grid-template-columns:auto auto; width:max-content; max-width:100%; column-gap:18px; row-gap:6px; padding:7px 0 0; margin:0 auto; }
 .deck-back,.card-face { width:64px; height:90px; }
 .card-face { --corner-rank:15px; --corner-suit:10px; --card-inset:5px; }
 .draw-pile { padding:2px; gap:6px; }
 .draw-pile > small { font-size:10px; }
 .discard-stack { gap:12px; }
 .discard-context { width:112px; gap:6px; }
 .suit-call { min-height:39px; padding:7px 8px; gap:6px; border-radius:10px; font-size:14px; }
 .suit-call .suit-symbol { width:20px; height:20px; }
 .match-rule { font-size:11px; line-height:1.4; }
 .last-play { min-height:17px; font-size:11px; line-height:1.4; }
 .self-seat { margin-top:5px; }
 .turn-bar { gap:8px; min-height:57px; padding-top:8px; }
 .turn-copy h2 { font-size:21px; margin-bottom:3px; }
 .turn-detail { min-height:17px; font-size:12px; line-height:1.35; }
 #draw-button { min-height:44px; padding:8px 11px; font-size:12px; }
 .self-label { margin:8px 3px 0; font-size:11px; }
 .self-label strong,.self-label span { font-size:11px; }
 .hand-scroll { --hand-card-width:68px; }
 .hand { padding-top:20px; padding-bottom:7px; }
 .hand .playing-card { height:98px; }
 .playing-card { --corner-rank:15px; --corner-suit:10px; --card-inset:5px; }
 .hand-hint { min-height:14px; font-size:10px; }
 .table-result { margin:8px auto 0; padding:13px 12px 10px; }
 .table-result h2 { font-size:25px; }
 .result-detail { font-size:12px; }
 .result-scores { gap:5px 12px; margin:10px 0; font-size:11px; }
 .table-felt[data-phase=finished] .table-arena { min-height:204px; }
 .table-felt[data-phase=finished] .center-piles { padding-top:7px; }
 .table-felt[data-phase=finished] .hand .playing-card { height:98px; }
}
@media(max-width:380px) {
 .center-piles { column-gap:12px; }
 .discard-stack { gap:9px; }
 .discard-context { width:108px; }
 .suit-call { font-size:13px; }
 .opponent-heading { column-gap:4px; }
 .suit-chooser { width:min(228px,calc(100% - 20px)); }
 .suit-options { gap:7px; }
 .suit-options button { width:42px; height:58px; }
 .suit-options button > .suit-symbol { width:23px; height:23px; }
}
@media(max-width:650px) and (max-height:650px) {
 .page { padding-top:4px; }
 .table-felt { min-height:428px; padding-bottom:6px; }
 .table-arena { min-height:188px; }
 .opponents { min-height:64px; --back-height:48px; --back-width:34px; }
 .opponent,.opponent[data-position] { gap:3px; padding-block:2px; }
 .opponent-copy { line-height:1.15; }
 .opponent-copy small { display:none; }
 .opponent-cards { min-height:32px; }
 .center-piles { padding-top:3px; row-gap:4px; }
 .last-play { min-height:14px; }
 .self-seat { margin-top:3px; }
 .turn-bar { min-height:54px; padding-top:6px; }
 .self-label { margin-top:5px; }
 .hand { padding-top:14px; padding-bottom:5px; }
 .hand-hint { min-height:12px; }
}
@keyframes draw-ready-breathe { 0%,100% { transform:rotate(-4deg) translateY(0); } 50% { transform:rotate(-4deg) translateY(-3px); } }
@keyframes draw-ready-glint { 0%,38% { transform:translateX(-120%); opacity:0; } 48% { opacity:.55; } 66%,100% { transform:translateX(120%); opacity:0; } }
@keyframes suit-change-cue { 0% { transform:scale(.94); box-shadow:0 0 0 0 #e9c96d00; } 45% { transform:scale(1.07); box-shadow:0 0 0 4px #e9c96d66; } 100% { transform:scale(1); box-shadow:0 0 0 0 #e9c96d00; } }
@keyframes suit-token-in { from { opacity:0; transform:translate(var(--origin-x),30px) scale(.3) rotate(0); } 70% { opacity:1; } to { opacity:1; transform:translateY(var(--rest-y)) scale(1) rotate(var(--rest-rotate)); } }
@keyframes suit-token-out { from { opacity:1; transform:translateY(var(--rest-y)) scale(1) rotate(var(--rest-rotate)); } to { opacity:0; transform:translate(var(--origin-x),26px) scale(.28) rotate(0); } }
@keyframes suit-token-confirm { 0% { transform:translateY(var(--rest-y)) scale(1) rotate(var(--rest-rotate)); } 55% { transform:translateY(calc(var(--rest-y) - 6px)) scale(1.14) rotate(0); box-shadow:inset 0 0 0 1px #fff9,0 0 0 2px #e0bd5f,0 0 19px #f4d77da8; } 100% { transform:translateY(calc(var(--rest-y) - 3px)) scale(1.06) rotate(0); box-shadow:inset 0 0 0 1px #fff9,0 0 0 2px #e0bd5f,0 0 13px #f4d77d80; } }
@keyframes suit-prompt-in { from { opacity:0; transform:translate(-50%,3px); } to { opacity:1; transform:translate(-50%,0); } }
@keyframes suit-tether-in { from { opacity:0; transform:translateX(-50%) scaleY(0); } to { opacity:1; transform:translateX(-50%) scaleY(1); } }
@media(prefers-reduced-motion:reduce) {
 *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
 .draw-pile.draw-ready .deck-back { box-shadow:0 0 0 2px #e9c96d,0 5px 12px #102f2380; }
 .draw-pile.draw-ready .deck-back::after { display:none; }
 #current-suit.is-changed { outline:2px solid #e9c96d; outline-offset:2px; }
 .suit-chooser.is-opening .suit-options button,.suit-chooser.is-opening .suit-prompt,.suit-chooser.is-opening .suit-tether { opacity:1; }
}