.wordmark,.room-wordmark {display:block;object-fit:contain;flex:none}
.brand .wordmark {width:145px;height:40px}
#main .roomtop .room-wordmark {order:-1;width:clamp(94px,8.9vw,148px);height:36px;margin-inline-end:.35rem}
@media(max-width:1050px) {
  #main[data-screen="room"] .roomtop {flex-wrap:wrap}
  #main .roomtop .room-wordmark {width:100px;height:28px}
}
@media(max-width:550px){.brand .wordmark{width:110px}}

:root {--night:#111829;--gold:#ffbc56;--cream:#fff5db;--line-night:#344258}
body>header,#main[data-screen="room"] .roomtop {background:#101727;border-bottom:2px solid #c88a33}
.brand {color:#fff2d5;gap:.25rem}
.mast {min-height:68px}
.tabs button[aria-current="page"],.roomtop nav .tabs [aria-current="page"] {color:#ffce73;border-color:#ffbd58}
#sound input {accent-color:var(--gold)}
#main .roomtop .controls .primary,.game-card footer button.primary {background:#ffc66d;color:#241a18;border-color:#ffc66d}
#main .roomtop .room-heading summary {padding-inline-end:40px;position:relative;width:fit-content;max-width:100%}
#main .roomtop .room-heading summary::after {position:absolute;inset-inline-end:16px;width:12px;text-align:center}
.room-heading h1 {overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:has(main:is([data-screen="login"],[data-screen="lobby"],[data-screen="stats"])) {background:radial-gradient(ellipse at top right,#242b49,transparent 42rem),#101625}
#main:is([data-screen="login"],[data-screen="lobby"]) .intro {box-shadow:inset 0 0 0 1px #ffdd932d,0 15px 40px #06090e47}
.shelf>h2::before {background:#ffbd58}
.game-card {background:#1b2537;border-color:#36435a;box-shadow:0 5px 14px #080c1a44}
.game-card .card-top small {color:#ffc877}
.game-card footer button {background:#28354c;border-color:#506078}
.room-row {background:#fff9e8}

:is(#main[data-screen="stats"],.standings-content) {max-width:1280px;color:#f7f3e9}
.league-banner {min-height:clamp(175px,17vw,250px);display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,4vw,60px);border:1px solid #4a5169;border-radius:18px;background:#17203c url(/pokal.webp) center 48% / cover}
.league-banner h1 {font-size:clamp(2.8rem,6.6vw,6rem);line-height:.99;letter-spacing:-.065em;color:#fff5db;margin:0}
.league-banner p {color:#fff1c7;max-width:55%;margin:1rem 0 0;font-weight:650}
.league-shortcuts {display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:1rem 0}
.league-shortcuts a {text-decoration:none;color:#e8e9ee;background:#202c41;border:1px solid #4a576b;border-radius:2rem;padding:.5rem .9rem;font-size:.9rem;font-weight:700}
.league-shortcuts a:hover,.league-shortcuts a:focus-visible {color:#111b2b;background:#ffd68b}
:is(#main[data-screen="stats"],.standings-content) .stats-section {padding:clamp(1rem,2.7vw,2.15rem);margin:1rem 0;border-radius:17px;border:1px solid #384459;background:#1a2435;color:#f4f0e5;scroll-margin:1rem;overflow:hidden}
:is(#main[data-screen="stats"],.standings-content) h2 {color:#fff2d5;font-size:clamp(1.45rem,2.5vw,2.3rem);letter-spacing:-.045em}
:is(#main[data-screen="stats"],.standings-content) p {color:#c9d1de;line-height:1.5;max-width:83ch}
:is(#main[data-screen="stats"],.standings-content) .league-banner p {color:#fff1c7;max-width:58%}
:is(#main[data-screen="stats"],.standings-content) .stats-scroll {background:#141e2e;border:1px solid #334054;border-radius:.7rem}
.stats-scroll table {margin:0;font-size:.9rem;color:#e4e7ec}
.stats-scroll th {background:#243248;color:#dbe4ec;border:0;padding:.75rem}
.stats-scroll td {border-color:#334054;vertical-align:middle}
.stats-scroll tbody tr:last-child td {border-bottom:0}
.stats-scroll [data-place="1"] td:first-child {color:#ffce79;font-weight:850}
.stats-scroll [data-place] td:nth-child(3) {font-weight:800;color:#fff0ca}
.stats-scroll [data-initial]::before {content:attr(data-initial);display:inline-grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:50%;margin-inline-end:.55rem;background:#344359;color:#f7d397;font-weight:800}
.league-podium {display:flex;flex-wrap:wrap;gap:.7rem;padding:0;margin:1.2rem 0;list-style:none}
.league-podium li {position:relative;box-sizing:border-box;display:grid;gap:.22rem;flex:1 1 145px;min-width:0;padding:1rem 1.2rem;background:linear-gradient(112deg,#354153,#263449);border:1px solid #617187;border-radius:10px;color:#eff2f4}
.league-podium li[data-place="1"] {background:linear-gradient(112deg,#f3bc65,#f7d79e);border-color:#f6c982;color:#312516}
.league-podium small {text-transform:uppercase;letter-spacing:.12em;font-weight:800}
.league-podium strong {font-size:clamp(1.3rem,2.3vw,2.1rem);line-height:1.2;overflow-wrap:anywhere}
.league-podium span {font-variant-numeric:tabular-nums}
:is(#main,.standings-content) .stats-games {gap:.45rem;margin:.9rem 0 1.2rem}
:is(#main,.standings-content) .stats-games button,:is(#main,.standings-content) .stats-day button {background:#243449;border:1px solid #536279;color:#f0edde;border-radius:2rem;padding:.45rem .85rem}
:is(#main,.standings-content) .stats-games button[aria-pressed="true"] {outline:0;background:#ffce80;border-color:#ffce80;color:#2d2117}
:is(#main,.standings-content) .stats-day button:disabled {color:#9ca8b8;opacity:.75}
:is(#main,.standings-content) [data-testid="game-scores"] {background:linear-gradient(90deg,#1a2435 47%,#1a2435ab),var(--discipline-art) right top / auto 10.5rem no-repeat,#1a2435}
:is(#main,.standings-content) .stats-section summary {color:#ffcc82}
:is(#main,.standings-content) .stats-section dl dd {color:#c9d5de}
:is(#main,.standings-content) .stats-section dt {color:#fff1d5}
:is(#main,.standings-content) .stats-section textarea {background:#111b2b;border:1px solid #61728a;color:#fff}

#main[data-screen="room"] .roomtop {background:linear-gradient(100deg,#0d1628 28%,#0c1728da 78%,#0c1728ee),var(--game-cover) center 45%/cover}
#main[data-room-status="lobby"] .room-panel,#main[data-room-status="closed"] .room-panel {background:linear-gradient(90deg,#101727e6,#10172780),var(--game-cover) center/cover}
#main[data-room-status="finished"] .outcome:not(:empty) {color:#faf2df;border-color:#a27940;background:#1a2335}
#main .outcome h2 {color:#fff3d9;line-height:1.08;padding:1.4rem 28% 1.4rem .85rem;margin:0 0 1rem;border-radius:.6rem;background:#222d46 url(/pokal.webp) 75% center/cover}
#main .outcome .score-ticket {display:block;position:relative;background:#253246;border:1px solid #405068;border-radius:9px;color:transparent;font-size:0;padding:.75rem .8rem;margin:.5rem 0}
#main .score-ticket strong,#main .score-ticket b {color:#fff2d5;font-size:.97rem}
#main .score-ticket b {float:inline-end;font-variant-numeric:tabular-nums}
#main .score-ticket small {display:block;clear:both;padding-top:.32rem;color:#d2d9e3;font-size:.82rem;line-height:1.4}
#main .score-ticket[data-place="1"] {border-inline-start:4px solid #ffc677}
#main .outcome button {background:#ffd08b;border-color:#ffc879;color:#281c14}
#main .practice-record {color:#ffd394}
#main[data-game="volley"] .beach-game {background:#202e3a}
#main[data-game="volley"] .beach-game canvas {background-color:#17353b;background-image:repeating-linear-gradient(45deg,#ffffff06 0 3px,transparent 3px 18px),radial-gradient(ellipse at center,#518582,#19343a 75%)}
.beach-score {border-block:2px solid #57352e;background:linear-gradient(90deg,#19434e,#30333b 50%,#69442c);font-size:clamp(1.05rem,2.2vw,1.85rem);text-shadow:0 2px #35313a}
.beach-score strong {padding:.52rem max(14px,3vw)}
.beach-score .blue-score {background:#194c88;border-inline-end:3px solid #6fbce7}
.beach-score .gold-score {background:#ffbe52;border-inline-start:3px solid #ffdf79;text-shadow:none}
.beach-game .beach-stands,.beach-game .actions,.beach-game .volley-help {background:#f7dca7}
.beach-game .actions button {font-weight:800;border:2px solid #573e41;background:#fff5d8;box-shadow:0 3px #875c41}
#main .at-post {background:linear-gradient(110deg,#5c2355f5,#5d2858aa),var(--game-cover) center/cover}
#main .at-hinweis .at-felt {background:linear-gradient(95deg,#f7edd6e8,#f9f0dfce),var(--game-cover) center/cover}
#main[data-screen="room"] .im-stage {background:linear-gradient(105deg,#f3ebf4f7 33%,#f3ebf4a0),var(--game-cover) center/cover}
#main[data-screen="room"] .wave-stage {background:linear-gradient(105deg,#f0f3e6f5 28%,#eef1dfb5),var(--game-cover) center/cover}
#main[data-screen="room"] .word-stage {background:linear-gradient(105deg,#eee2cce8 30%,#f4ebd6b5),var(--game-cover) center/cover}
#main .ss-sprint {background:linear-gradient(155deg,#282543e8,#1d2134c4),var(--game-cover) center/cover}
#main .ss-dive {background:linear-gradient(145deg,#184b57e8,#0d3245ce),var(--game-cover) center/cover}
#main .fall-race {background:linear-gradient(120deg,#181d35db,#201833e5),var(--game-cover) center/cover}
#main .at-malen {background:linear-gradient(120deg,#344984f5,#2b3c73ce),var(--game-cover) center/cover}
#main .fp-party .fp-seat {border-radius:1rem;border-color:#3e2447}
#main .fp-party .fp-isle {outline:2px solid #34565d;outline-offset:1px}
@media(max-width:700px){.league-banner{background-position:62% center}.league-banner h1{font-size:2.75rem}.stats-scroll td,.stats-scroll th{padding:.55rem}.league-podium li{flex-basis:90px}.league-shortcuts a{padding:.45rem .6rem}}
@media(forced-colors:active){.league-podium li,.score-ticket,.league-shortcuts a {border:1px solid ButtonText}.room-wordmark,.wordmark {background:#111829;forced-color-adjust:none}}
.volley .cartridge::before,.volley .cartridge::after {content:"";position:absolute;bottom:6%;width:42%;height:81%;background:center bottom/contain no-repeat;pointer-events:none}
.volley .cartridge::before {inset-inline-start:7%;background-image:url(/lama-blau.webp)}
.volley .cartridge::after {inset-inline-end:7%;transform:scaleX(-1);background-image:url(/lama-gold.webp)}
.volley .ranking-link {z-index:1}
#main[data-game="volley"],:is(#main,.standings-content) [data-testid="game-scores"]:has([data-game="volley"][aria-pressed=true]) {--game-cover:url(/tempel.webp)!important;--discipline-art:url(/tempel.webp)!important}
:is(#main[data-screen="lobby"],#main[data-screen="login"]) .intro .overline {color:#ffcf87!important}
.hero-wordmark {width:clamp(118px,10vw,165px);height:auto;display:block;margin:0 0 clamp(.55rem,1.2vw,1rem)}
.league-banner {background:linear-gradient(90deg,#111a37 0%,#111a37 30%,#111a3700 65%),url(/pokal.webp) right center/auto 100% no-repeat,#111a37}
@media(min-width:741px) and (max-width:950px) {
  #main[data-screen="room"] .roomtop {display:grid;grid-template-columns:auto 1fr auto auto;gap:.2rem .65rem}
  #main .roomtop .room-wordmark {grid-column:1;grid-row:1}
  #main .roomtop .room-heading {grid-column:2;grid-row:1}
  #main .roomtop #sound {grid-column:3;grid-row:1}
  #main .roomtop [data-fullscreen] {grid-column:4;grid-row:1}
  #main .roomtop .tabs {grid-column:1 / 3;grid-row:2}
  #main .roomtop .controls {grid-column:3 / 5;grid-row:2;justify-self:end}
}
@media (orientation:portrait) {
  #main[data-game="volley"] .beach-game canvas {flex:0 0 auto;height:auto;aspect-ratio:800/290}
  #main[data-game="volley"] .beach-game {justify-content:flex-start}
  #main[data-game="volley"] .beach-stands {
    flex:1;min-height:11rem;display:grid;grid-template-columns:1fr 1fr;gap:.7rem;padding:clamp(.7rem,2vw,1.4rem);
    background:radial-gradient(ellipse at 20% 100%,#254051,transparent 68%),#142e37;border-block:2px solid #745534
  }
  .beach-stands span {position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:end;min-width:0;text-align:center;overflow:hidden;
    padding:clamp(.6rem,2vh,1.2rem) .7rem;color:#fff7e6;font-size:clamp(.9rem,2vw,1.25rem);background:linear-gradient(150deg,#253e66,#15283e);border:1px solid #6484a4;border-radius:12px}
  .beach-stands span+span {background:linear-gradient(150deg,#79502f,#30272b);border-color:#b08249}
  .beach-stands span::before {content:"";flex:1;min-height:65px;max-height:225px;width:100%;margin-bottom:1rem;background:url(/lama-blau.webp) center bottom/contain no-repeat}
  .beach-stands span+span::before {background-image:url(/lama-gold.webp);transform:scaleX(-1)}
}

/* The final board keeps the same play area while the native dialogs sit above it. */
#main[data-room-status="finished"] .room-panel {display:flex;flex-flow:column}
#main[data-screen="room"] .room-panel > .play {flex:1 1 0;min-height:0}
#main[data-room-status="finished"] .practice-feed {display:none}
.arcade-dialog {position:fixed;inset:0;box-sizing:border-box;width:min(34rem,calc(100vw - 2rem));height:fit-content;max-height:calc(100dvh - 2rem);overflow:auto;overscroll-behavior:contain;margin:auto;padding:0;border:1px solid #a7804f;border-radius:18px;background:#172237;color:#fff0d3;box-shadow:0 20px 80px #05091599;color-scheme:dark}
.arcade-dialog:not([open]) {display:none!important}
.arcade-dialog::backdrop {background:rgb(6 13 26 / .6)}
#main .room-panel>dialog.outcome[open] {position:fixed;inset:0;display:block;align-self:auto;max-height:calc(100dvh - 2rem);height:fit-content;width:min(37rem,calc(100vw - 2rem));margin:auto;padding:clamp(1rem,2.6vw,1.8rem);border:1px solid #a7804f;border-radius:18px;overflow:auto;background:#172237}
#main .outcome h2 {margin:0 0 .8rem;padding:1.25rem 30% 1.25rem 1rem;font-size:clamp(1.5rem,3vw,2.5rem);background-position:right center}
.result-actions,.start-actions {display:flex;gap:.5rem;flex-wrap:wrap;margin-top:1rem}
#main .outcome [data-close-result] {background:transparent;color:#fff0cf;border-color:#637389}
#main .outcome [data-next] {background:#fff0c5}
#room-rankings {width:min(1120px,calc(100vw - 2rem));height:min(87dvh,920px);overflow:hidden}
#room-rankings[open] {display:flex;flex-direction:column}
.rank-bar {display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 1rem;background:#101a2b;border-bottom:1px solid #455372}
.rank-bar button,.menu-body>button,.start-actions button {background:#23334b;color:#fff2d4;border:1px solid #62718a}
.standings-content {overflow:auto;overscroll-behavior:contain;min-height:0;padding:clamp(.75rem,2vw,1.5rem)}
.menu-art {padding:1.5rem 2rem;background:linear-gradient(90deg,#141a39e6,transparent),url(/spielhalle.webp) center/cover}
.menu-art img {width:8rem;display:block}
.menu-art h2 {margin:.45rem 0 0;color:#fff2d5;font-size:clamp(2rem,5vw,3.6rem);line-height:1.05}
.menu-body {display:grid;gap:1rem;padding:clamp(1.1rem,3vw,2rem)}
.menu-body h3 {margin:0;color:#ffdf9e;font-size:1.2rem}
.menu-body .menu-primary,.start-actions .menu-primary {color:#272018;background:#ffd083;border:1px solid #ffd083}
.menu-setting {padding:.75rem 0;border-top:1px solid #44506a;display:grid;align-items:center;grid-template-columns:minmax(0,1fr) auto minmax(80px,29%);gap:.65rem}
.menu-setting strong,.menu-setting output {display:block}
.menu-setting output {font-size:.82rem;color:#c5d0df}
#menu-effects {grid-column:2 / -1;display:grid;grid-template-columns:auto minmax(80px,1fr)}
.menu-setting button {background:#27364b;border-color:#596a82;color:#fff2d7}
.menu-setting input {width:100%;min-height:32px;accent-color:#ffc572}
.start-actions button {min-height:42px}
#main[data-screen="room"] .roomtop [data-menu] {border:1px solid #6a6b72;border-radius:.45rem;color:#ffe2aa}
@media(max-width:1050px){#main .roomtop #sound {display:none}}
.cover-imprint {position:absolute;inset:8% auto auto 5%;width:34%;aspect-ratio:638/172;z-index:1;background:url(/talnovia-wortmarke.webp) center/contain no-repeat;opacity:.85;filter:drop-shadow(0 1px 2px #15172b);pointer-events:none}
.fp-ring,.fp-water,.word-stage,.im-stage,.at-post,.at-felt,.at-malen {position:relative;isolation:isolate}
.fp-ring::before,.fp-water::before,.word-stage::before,.im-stage::before,.at-post::before,.at-felt::before,.at-malen::before {content:"";position:absolute;inset:auto 3% 6% auto;width:clamp(110px,18%,270px);aspect-ratio:638/172;background:url(/talnovia-wortmarke.webp) center/contain no-repeat;pointer-events:none;opacity:.58;filter:drop-shadow(0 1px 2px #102134);z-index:-1}
.fp-ring::before,.fp-water::before {z-index:0;inset:3% auto auto 3%;width:clamp(110px,14%,220px)}
.at-malen::before {inset:auto 3% 1% auto}
#main .outcome h2 {background-image:url(/talnovia-wortmarke.webp),url(/pokal.webp);background-position:1rem .5rem,right center;background-size:5rem auto,cover;background-repeat:no-repeat;padding-top:2.2rem}
@media(max-width:740px){.menu-setting {gap:.4rem;font-size:.88rem}.arcade-dialog,#room-rankings {max-height:95dvh}.roomtop .tabs{flex-wrap:wrap}.start-actions button{font-size:.85rem}}
/* The paper stays transparent to ink and eraser; the printed imprint belongs to the sheet. */
.play canvas.at-paper {background-color:#fff;background-image:url(/talnovia-wortmarke.webp),linear-gradient(#465065,#465065);background-position:right 2.5% bottom 4%,right 1.8% bottom 3.2%;background-size:13% auto,14.5% 8.5%;background-repeat:no-repeat}
.fp-ring::before,.fp-water::before,.word-stage::before,.im-stage::before,.at-post::before,.at-felt::before {background-color:#1d2b3b;background-size:88% auto;border-radius:5px;opacity:.76}
#start-menu button:hover:enabled,#room-rankings .rank-bar button:hover:enabled {
  background:#354760;border-color:#e7b969;color:#fff6df
}
#start-menu .menu-primary:hover:enabled {background:#ffda99;color:#2b2014}
#start-menu .menu-art {position:relative;padding:clamp(1rem,3vw,1.75rem);background:linear-gradient(90deg,#081428 3%,#0a152bef 32%,#0a152b3a 85%),var(--cover,url(/spielhalle.webp)) right 45%/cover;isolation:isolate;border-bottom:2px solid #dfaa60}
#start-menu .menu-art img {width:8.5rem;margin-bottom:1rem}
.menu-art small {display:block;letter-spacing:.16em;text-transform:uppercase;color:#ffd99d;font-weight:750;font-size:.72rem}
#start-menu [hidden] {display:none!important}
.menu-body [data-menu-description] {margin:0;color:#d9e1ef;line-height:1.4}
.menu-body .menu-actions {display:flex;justify-content:flex-end;align-items:center;gap:.65rem}
.menu-actions button {min-height:44px;padding-inline:1.4rem}
.menu-actions [data-cancel-start] {background:transparent;color:#ece4d3;border-color:#52627a}
.menu-body .tempo-setting {grid-template-columns:1fr auto}.tempo-setting small {display:block;color:#c1cbda}
#start-menu select {width:9.2rem;max-width:100%;min-width:0}
#main .fall-top {display:flex;align-items:center;gap:.9rem}
#main .fall-top h3 {margin-inline-end:auto}
#main .fall-top progress {width:clamp(36px,9vw,140px);height:5px;border:0;accent-color:#ffc45d}
#main .fall-top progress::-webkit-progress-bar {background:#38394e;border-radius:8px}
#main .fall-top progress::-webkit-progress-value {background:linear-gradient(90deg,#927440,#ffd88b);border-radius:8px}
#main .fall-clock {color:#ffdda0;border-color:#725c42;background:#201b26}
@media(max-width:580px){#start-menu .menu-body{gap:.55rem}#main .fall-top {gap:.4rem}#main .fall-top h3{font-size:1.05rem}}
#main .fall-top h3::before {width:1.28em;height:1.28em;box-shadow:none;vertical-align:-.15em;background:transparent url(/talnovia-marke.webp) center/contain no-repeat;margin-inline-end:.38em}
#start-menu .tempo-setting select {background-color:#23334b;color:#fff2d5;border-color:#64758b}
@media(max-width:480px){
  #start-menu .menu-setting:not(.tempo-setting){grid-template-columns:minmax(0,1fr) minmax(84px,auto);gap:.3rem .7rem}
  #start-menu .menu-setting:not(.tempo-setting) strong{font-size:.95rem}
  #start-menu .menu-setting:not(.tempo-setting) output{display:inline;color:#cfdae6}
  #start-menu [data-music-volume],#start-menu #menu-effects input{grid-column:1/-1;min-height:24px}
  #start-menu #menu-effects{display:contents}
  #start-menu .menu-art img{margin-bottom:.6rem}
}