/* The quiet frame belongs to the studio. The artwork, controls and colours on each playing surface belong to its game. */
:root{--studio-ground:#f5f5f7;--studio-panel:#fff;--studio-text:#1d1d1f;--studio-body:#424245;--studio-muted:#595960;--studio-line:#dedee3;--studio-blue:#0066cc;--studio-focus:#147ce5;--studio-shadow:0 1px 3px #0000000d,0 14px 40px #0000000d;--studio-font:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
body:has(#main:is([data-screen=login],[data-screen=lobby],[data-screen=stats])){background:var(--studio-ground);color:var(--studio-text)}
#main:is([data-screen=lobby],[data-screen=login],[data-screen=stats]),#start-menu,.standings-content {font-family:var(--studio-font)}
#main[data-screen=lobby] .intro,#main[data-screen=login] .intro {border-radius:24px;box-shadow:var(--studio-shadow);margin-bottom:clamp(25px,4vw,52px)}
#main .shelf>h2,#main section[data-rooms]>h2 {color:var(--studio-text);letter-spacing:-.05em}
#main .shelf>h2::before{display:none}
.shelf-genres{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 1.2rem;width:fit-content;background:#e9e9ed;border-radius:24px;padding:3px}
.shelf-genres button{min-height:38px;border:0;border-radius:22px;padding:.45rem .95rem;color:var(--studio-body);background:transparent;font:600 .89rem var(--studio-font)}
.shelf-genres button[aria-pressed=true]{background:white;color:var(--studio-text);box-shadow:0 1px 4px #0002}
#main .game-card {border-radius:18px;border:1px solid #0000000d;box-shadow:0 1px 2px #0000000a,0 8px 24px #0000000c;background:white;color:var(--studio-text);overflow:hidden}
#main .game-card[hidden]{display:none}
#main .game-card .cartridge{border-radius:0;border:0}
#main .game-card .card-top,#main .game-card .card-top small{color:var(--studio-muted)}
#main .game-card h3{font:740 clamp(1.24rem,2.2vw,1.8rem)/1.05 var(--studio-font);letter-spacing:-.045em;color:var(--studio-text)}
#main .game-card p{color:var(--studio-body);font:450 .92rem/1.45 var(--studio-font)}
#main .game-card footer button,.room-row button{border:0;border-radius:12px;min-height:44px;color:var(--studio-text);background:#eeeef2;font-weight:620}
#main .game-card footer button.primary,#main .game-card footer button.primary:hover:enabled {background:#182839;color:white}
#main .game-card footer button:hover:enabled,.room-row button:hover:enabled{background:#e1e3e9;color:var(--studio-text)}
#main .roomlist {overflow:hidden;border-radius:18px;background:white;gap:0;border:1px solid var(--studio-line)}
#main .room-row{margin:0;border:0;border-radius:0;box-shadow:none;border-bottom:1px solid var(--studio-line);background:white;color:var(--studio-text)}
#main .room-row:last-child{border:0}#main .room-row small{color:var(--studio-muted)}
#main[data-screen=room] .roomtop{background:#152030f2;border-bottom:1px solid #75818c66;box-shadow:0 2px 8px #0002;font-family:var(--studio-font)}
#main[data-screen=room] .roomtop button{font-family:var(--studio-font);font-weight:620}
#start-menu {background:var(--studio-panel);color:var(--studio-text);color-scheme:light;border:1px solid #fff7;border-radius:22px;box-shadow:0 2px 8px #0002,0 30px 80px #0004}
.arcade-dialog::backdrop {background:#151c2c88;backdrop-filter:blur(5px)}
#start-menu .menu-art h2 {font:760 clamp(2.1rem,5.3vw,3.4rem)/1 var(--studio-font);letter-spacing:-.055em}
#start-menu .menu-body{gap:.65rem;padding:clamp(1rem,2.4vw,1.5rem)}
#start-menu [data-menu-description]{color:var(--studio-body)}
#start-menu .menu-body h3{font:710 1.06rem var(--studio-font);letter-spacing:-.025em;color:var(--studio-text)}
#start-menu .menu-setting{border-color:var(--studio-line);padding:.4rem 0;color:var(--studio-text)}
#start-menu .menu-setting :is(small,output){color:var(--studio-muted)}
#start-menu .menu-setting button,#start-menu .tempo-setting select,#start-menu [data-cancel-start],#start-menu [data-menu-full]{border:1px solid var(--studio-line);border-radius:10px;background:#f4f4f7;color:var(--studio-text);min-height:40px}
#start-menu .tempo-setting .select{color:var(--studio-text)}
#start-menu input[type=range]{accent-color:var(--studio-blue)}
#start-menu .menu-actions{padding-top:.4rem;gap:.5rem}
#start-menu .menu-actions button{min-height:44px;border-radius:13px}
#start-menu .menu-actions .menu-primary{background:#183553;color:white;border-color:#183553;font-weight:680;min-width:7.5rem}
#start-menu .menu-actions .menu-primary:hover:enabled{background:#244d75;color:white}
#start-menu details{margin:0;padding:0 0 .25rem;border:0;background:none;color:var(--studio-text)}
#start-menu summary{display:flex;align-items:center;gap:.5rem;min-height:38px;color:#174e7d;cursor:pointer;font-weight:660;list-style:none}
#start-menu summary::after {content:'+';font-size:1.15rem;margin-inline-start:auto}
#start-menu details[open] summary::after {content:'−'}
#start-menu details svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#start-menu details[open]{border-bottom:1px solid var(--studio-line)}
#start-menu details strong,#start-menu details p{display:block;margin:.45rem 0;color:var(--studio-text);line-height:1.45}
#start-menu details p[data-rule]{font-size:.86rem;color:var(--studio-muted)}
#main .room-panel>dialog.outcome[open]{border:1px solid #d5d7dd;background:white;color:var(--studio-text);box-shadow:0 2px 8px #0002,0 30px 80px #0004;border-radius:22px;font-family:var(--studio-font)}
#main .outcome h2{color:white;border-radius:13px;letter-spacing:-.045em;background-color:#12243e}
#main .match-highlight{display:grid;gap:.12rem;margin:.7rem 0;padding:.15rem 0 .7rem;border-bottom:1px solid var(--studio-line)}
.match-highlight small,.match-highlight span{color:var(--studio-muted);font-size:.84rem}
.match-highlight strong{letter-spacing:-.035em;font-size:clamp(1.2rem,3vw,1.72rem);line-height:1.12;color:var(--studio-text)}
#main .outcome .score-ticket{border:0;border-bottom:1px solid var(--studio-line);border-radius:0;box-shadow:none;background:white;color:var(--studio-text);margin:0;padding:.63rem .2rem}
#main .outcome .score-ticket small{color:var(--studio-muted)}
#main .outcome .score-ticket b{color:#163e64}
#main .outcome .practice-record{display:block;color:#244866;margin-block:.65rem}
#main .outcome .result-actions button{border-radius:12px;min-height:42px;border:0;background:#eceef2;color:var(--studio-text)}
#main .outcome .result-actions [data-next],#main .outcome .result-actions [data-ranking]{background:#19354f;color:white}
#room-rankings{background:var(--studio-ground);border-color:#d1d5dd}
#room-rankings .rank-bar{font-family:var(--studio-font);background:#182739ed;color:white;border-bottom:0}
:is(#main[data-screen=stats],.standings-content) .stats-section {background:white;border-color:var(--studio-line);color:var(--studio-text);box-shadow:var(--studio-shadow)}
:is(#main[data-screen=stats],.standings-content) .stats-section :is(h2,p){color:var(--studio-text)}
:is(#main[data-screen=stats],.standings-content) .stats-scroll{background:white;border-color:var(--studio-line);color:var(--studio-text)}
:is(#main[data-screen=stats],.standings-content) .stats-scroll :is(td,th){color:var(--studio-text);background:white;border-color:var(--studio-line)}
:is(#main[data-screen=stats],.standings-content) .stats-scroll th{background:#f3f4f6}
:is(#main[data-screen=stats],.standings-content) .stats-scroll tr[data-user] :is(td,th) a{color:var(--studio-blue)}
:is(#main[data-screen=stats],.standings-content) [data-testid=game-scores] {background:linear-gradient(90deg,#fffffffa,#ffffffec),var(--discipline-art) center/cover}
:is(#main[data-screen=stats],.standings-content) .league-banner p{color:white}
#main .beach-score{border:0;border-bottom:1px solid #937859;background:#182e33;color:#fff8dd;font-family:var(--studio-font)}
#main .beach-score [data-score]{font-size:clamp(.8rem,1.45vw,1.14rem);letter-spacing:.03em}
#main .beach-score :is(.blue-score,.gold-score){border:0;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
#main .beach-game .actions{gap:.5rem}
#main .beach-game .actions button[data-cooling=true]{box-shadow:inset 0 2px 2px #463d3e44;background:#e0c7a4}
#main .beach-game .actions button{min-height:42px}
#main .beach-game .volley-help{color:#3e342d}
#main .fall-board[data-own=true]{border-color:#b6e6d8;box-shadow:inset 0 2px #9be0c9}
#main .fp-seat[data-target=true]:focus-visible,#main .fp-isle:focus-visible{outline:none;filter:brightness(1.25)}
#main .at-paper:focus-visible,#main .role-tile:focus-visible{outline:none;filter:brightness(1.25)}
#main .play :is(input,textarea,select){font-family:var(--studio-font)}
@media(pointer:coarse){.shelf-genres button,#start-menu .menu-setting button,#start-menu summary,#main .beach-game .actions button{min-height:44px}}
@media(max-width:550px){#main .beach-game .actions{gap:.22rem;flex-wrap:wrap}#main .beach-game .actions button{padding-inline:.42rem;font-size:.84rem}.shelf-genres button{padding-inline:.64rem}#main .outcome .score-ticket{padding-block:.48rem}}
@media(prefers-reduced-motion:no-preference){#start-menu[open],#main .outcome[open],#room-rankings[open]{animation:studio-in .19s cubic-bezier(.2,.8,.2,1)}@keyframes studio-in{from{opacity:.1;transform:translateY(5px) scale(.987)}to{opacity:1;transform:none}}}
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more){.arcade-dialog::backdrop{backdrop-filter:none;background:#111b2be6}#main[data-screen=room] .roomtop{background:#152030}}
@media(forced-colors:active){#start-menu .menu-actions button,#main .result-actions button,.shelf-genres button{border:1px solid ButtonText}.shelf-genres button[aria-pressed=true]{outline:2px solid Highlight}}
/* Local affordances. Each treatment describes an actual game state, not a theme border. */
#main .fp-bombe .fp-seat[data-holder=true] {outline:3px solid #ffd27a;outline-offset:2px}
#main .fp-bombe .fp-seat[data-target=true] {box-shadow:0 0 0 2px #f5ddb9,0 3px 0 #443248}
#main .fp-islands .fp-isle[data-sunken=true]{filter:saturate(.4) brightness(.8)}
#main .ss-sprint[data-phase=go] .ss-button:enabled {outline:3px solid #ceffac;outline-offset:2px}
#main .ss-dive .ss-options button[aria-pressed=true]{box-shadow:0 0 0 2px #fff3ce,inset 0 0 0 2px #17595f}
#main .wave-readout {font-variant-numeric:tabular-nums;font-weight:730;letter-spacing:-.03em}
#main .wave-controls input[type=range]{min-height:36px;cursor:ew-resize}
#main .role-board button.role-tile:focus-visible,#main .im-ballots button:focus-visible{outline:none;filter:brightness(1.25);z-index:2}
#main .at-album-strip{scroll-snap-type:inline proximity;scroll-padding-inline:1rem}
#main .at-album-page{scroll-snap-align:start}
#main .at-term-card {text-wrap:balance}
#main .at-chat-list {overscroll-behavior:contain}
#main .at-deck button:focus-visible,#main .at-word-deck button:focus-visible{outline-offset:3px}
#main .im-ticket,#main .at-answer,#main .at-letter {font-feature-settings:"ss01" on}
#main .wave-stage {position:relative;isolation:isolate}
@media(prefers-reduced-motion:reduce){#main .play *,#main .play *::before,#main .play *::after{scroll-behavior:auto!important}}
#start-menu .menu-body .menu-setting output{color:#565961}
#main .at-felt:has(.at-hidden-row){background:radial-gradient(ellipse at 50% 42%,#2d7668,#1c514d 78%);color:#fff7e5}
#main .at-felt:has(.at-hidden-row) .at-collection-count{color:#fff4dc;font-size:clamp(.9rem,1.5vw,1.15rem);font-weight:620}
#main .at-hidden-row{gap:clamp(.5rem,1.5vw,1.2rem)}
#main .at-hidden-row .at-board-back{position:relative;display:grid;place-items:center;width:clamp(36px,10vw,122px);height:auto;aspect-ratio:1.45;border:2px solid #b4b4a5;opacity:1;border-radius:9px;background:repeating-linear-gradient(45deg,#435564 0 3px,#3d4c59 3px 6px);box-shadow:0 4px 0 #153b34}
#main .at-hidden-row .at-board-back::before {content:"";width:32%;height:42%;background:url(/talnovia-marke.webp) center/contain no-repeat;opacity:.7}
#main .at-hidden-row .at-board-back[data-received=true]{border-color:#edc584;background:#273e45}
#main .at-hidden-row .at-board-back[data-received=true]::after{content:"✓";position:absolute;inset:.2rem .3rem auto auto;color:#ffda90;font-weight:800}
#main .at-malen:has(.at-word-deck) .at-word-deck::before{content:"";display:block;width:clamp(80px,11vw,150px);aspect-ratio:638/172;background:url(/talnovia-wortmarke.webp) center/contain no-repeat;justify-self:center;margin:0 auto .65rem;filter:drop-shadow(0 2px 2px #16213c)}
#main[data-screen=room] .im-stage:has(.im-categories){background:linear-gradient(105deg,#151c30f2,#262b44e6 60%,#362336d1),var(--game-cover) center/cover;color:#fff1ce}
#main[data-screen=room] .im-stage:has(.im-categories) :is(h2,h3,.role-copy){color:#fff1ce}
#main .im-categories button{transition:transform .14s ease,border-color .14s ease}
#main .im-categories button:hover:enabled{transform:translateY(-2px)}
#main .at-post .at-letter{border-top:3px solid #b54f54;box-shadow:0 7px 19px #33294826}
#main .wave-cabinet{box-shadow:inset 0 0 0 2px #d6b57b66,0 5px 15px #1d252b30}
@media(prefers-reduced-motion:reduce){#main .im-categories button{transition:none}#main .im-categories button:hover:enabled{transform:none}}
#start-menu [data-rock-preview]{padding:.55rem .75rem;min-height:42px;margin-block:.25rem .65rem;border-radius:11px;border:1px solid var(--studio-line);background:#edf2f7;color:#193f63}
:is(#main[data-screen=stats],.standings-content) .stats-section :is(summary,dt){color:#234970}
:is(#main[data-screen=stats],.standings-content) .stats-section dl dd{color:var(--studio-body)}
:is(#main[data-screen=stats],.standings-content) .stats-section textarea{background:#f6f6f8;border:1px solid #afb4bd;color:var(--studio-text)}
/* Waves move the water and the runners; the target under a finger stays put between waves. */
#main .fp-water button.fp-isle,#main .fp-water button.fp-isle[data-sunken=true]{transform:none;transition:opacity .18s,filter .18s}
#main .fp-water button.fp-isle[data-sunken=true]{box-shadow:0 1px #637e7d,0 3px #39808c}