/* A textured 2D table: the browser only composites elements that actually move. */
html.flat-table body.in-game .game{background:linear-gradient(#10271e55,#10271e55),url('/assets/table-v180/baize.webp') center/640px 640px repeat!important;isolation:isolate;border:1px solid #b19a6b!important;box-shadow:inset 0 0 0 2px #796747,inset 0 0 0 3px #c0a67680,0 3px 12px #17181155!important;border-radius:3.2cqw!important;overflow:visible}
html.flat-table body.in-game{background:#3b3025 url('/assets/table-v161/walnut.webp') center/768px 768px repeat!important}
html.flat-table .game .card{opacity:1;filter:none}
html.flat-table .game .hand .card{z-index:var(--z);box-shadow:0 3px 7px #0006;transform:translate(var(--x),var(--y)) rotate(var(--r));transition:transform .18s ease,box-shadow .15s}
html.flat-table .game .hand .card.selected{transform:translate(var(--x),calc(var(--y) - 16px)) rotate(var(--r));box-shadow:0 0 0 2px #fff0bb,0 0 16px 4px #f1d38baa}
html.flat-table .game .hand .card.playable{box-shadow:0 0 0 2px #ebce7e,0 0 12px 3px #eac75f99,0 3px 7px #0006}
html.flat-table .game .card.playable:after{display:none}
html.flat-table .game .mini-back{--fan-index:calc(var(--i) - (var(--count) - 1)/2);background-image:var(--deck-back);box-shadow:0 1px 3px #0005}
html.flat-table .game .card.drag-origin{opacity:.12!important}
body .flat-flight{opacity:1;aspect-ratio:auto;min-height:0;max-width:none;border-radius:6px;box-shadow:0 6px 12px #0005;will-change:transform,opacity}
html.flat-table .game.is-your-turn:after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 100% 100%,#d6c39508,transparent 50%)}
@media(hover:hover) and (pointer:fine){html.flat-table .game .hand .card:hover{transform:translate(var(--x),calc(var(--y) - 18px)) rotate(var(--r));z-index:var(--z)}}
@media(max-width:900px) and (orientation:portrait){
 html.flat-table body.in-game .game{border:0!important;border-radius:0!important;box-shadow:none!important;overflow:hidden}
 html.flat-table .game .hand .card.selected{transform:translate(var(--x),calc(var(--y) - 12px)) rotate(var(--r))}
}
@media(prefers-reduced-motion:reduce){html.flat-table .game .hand .card{transition:none}}

@media(min-width:901px),(orientation:landscape){html.flat-table .game .supply>.mobile-stock-count,html.flat-table .game .supply>.mobile-trump-preview{display:none}}

/* Recover the compact desktop HUD spacing previously provided by projection. */
@media(min-width:901px){
 html.flat-table body.in-game .game:not(.club-table) .table-stats,html.flat-table .game .last-action{left:3%!important}
 html.flat-table .game .player-dock{left:3%!important;right:3%!important}
 html.flat-table .game .game-top{right:3%!important;top:4%!important}
}

html.flat-table .game .hand .card.selected.playable{box-shadow:0 0 0 2px #fff0bb,0 0 16px 4px #f1d38baa}

/* Other players' attention raises only a card back, preserving its fan angle. */
html.flat-table .game .mini-back{transition:translate .18s ease,box-shadow .18s ease}
html.flat-table .game .mini-back.opponent-looking{translate:0 -10px;box-shadow:0 0 0 1px #f4db91,0 0 10px #e6c36799}
@media(prefers-reduced-motion:reduce){html.flat-table .game .mini-back{transition:none}}

/* The result veil follows the table edge; clip the normally overflowing hand. */
html.flat-table body.in-game .game:has(.result){overflow:hidden!important}
html.flat-table body.in-game .game>.result{position:absolute!important;grid-area:auto!important;inset:0!important;width:auto!important;height:auto!important;margin:0!important}
/* Shared controls use explicit centering instead of inline baselines. */
body.in-game .game .control-stack .mobile-sort-group>button,body.in-game .game .control-stack>.multi-toggle,body.in-game .game .actions>button{display:flex!important;align-items:center;justify-content:center;line-height:1.15;box-sizing:border-box}
body.in-game .game .control-stack svg{display:block;flex-shrink:0;vertical-align:initial}
body.in-game .game .opponent-count{display:grid;place-items:center;padding:0;line-height:1}
body.in-game .game .opponent-count>.count-value{display:block;line-height:1;transform:translateY(-.06em)}
.game .count-meta .self-player-name{display:block;max-width:15cqw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:inherit;color:#ecdfbd;line-height:1.2}
@media(min-width:901px){
 html.flat-table body.in-game .game:not(.club-table):has(.supply-empty) .table-stats{top:3%!important}
 html.flat-table body.in-game .game .last-action{padding-top:18px}
}
@media(max-width:900px){.game .count-meta .self-player-name{max-width:100px;font-size:11px}}

/* Timer is attached to the portrait, outside the profile's text flow. */
body.in-game .game .self-avatar{overflow:visible}
body.in-game .game .self-avatar .self-clock{left:auto;top:auto;right:-5px;bottom:-5px;z-index:2;min-width:2.2em;text-align:center;padding:2px 4px;font-size:clamp(10px,.85cqw,14px);line-height:1.2}

html.flat-table body.in-game .game.is-your-turn .control-stack:has(.actions button)::before{background:radial-gradient(ellipse at 65% 65%,#d6c39512,transparent 70%)}
html.flat-table body.in-game .game.is-your-turn .actions button{box-shadow:inset 0 1px 1px #d8c49f26,0 3px 7px #1e211e44}
html.flat-table body.in-game>.grain{display:none}

/* Keep a narrow strip of walnut visible on every edge of the viewport. */
html.flat-table body.in-game main:has(>.game){width:min(calc(100vw - 24px),calc((100dvh - 24px)*16/9));height:min(calc(100dvh - 24px),calc((100vw - 24px)*9/16))}
@media(max-width:900px) and (orientation:portrait){
 html.flat-table body.in-game main:has(>.game){width:calc(100vw - 12px);height:calc(100dvh - 12px)}
}

@media(min-width:901px){
 body.in-game .game .turn-text{--self-avatar-size:clamp(68px,5.2cqw,96px);--self-avatar-gap:clamp(12px,1cqw,18px)}
 body.in-game .game .self-avatar{box-sizing:border-box}
 body.in-game .game .turn-text:has(.self-avatar) .hand-count-text{display:flex;align-items:center;min-height:var(--self-avatar-size);box-sizing:border-box}
}

@media(min-width:901px){
 html.flat-table body.in-game .game:not(.club-table) .player-dock{bottom:3cqw}
}
@media(max-width:900px){
 html.flat-table body.in-game{background:#303f30!important}
 html.flat-table body.in-game main:has(>.game){width:100vw;height:100dvh}
 html.flat-table body.in-game .game{border:0!important;border-radius:0!important;box-shadow:none!important}
}