/* Raumansicht im Neon-Arcade-Look: Kopfleiste, Warteraum, Übungsleiste, Ergebnis und Bestenliste.
   Gilt nur bei body[data-ansicht=spiel]. Farben und Schriften kommen aus neon.css (:root).
   Talnovia steht hier nirgends: die Marke lebt in der gerenderten Kulisse der Spiele. */
body[data-ansicht=spiel] { background:var(--neon-grund); color-scheme:dark; }
body[data-ansicht=spiel] #main[data-screen=room] { background:var(--neon-grund); color:var(--neon-text); font-family:var(--neon-schrift); }
body[data-ansicht=spiel] :is(#main,#start-menu,#room-rankings) :focus-visible { outline:none; }
body[data-ansicht=spiel] :is(.roomtop,.outcome,#room-rankings .rank-bar,.warteraum) :is(button,a,summary):focus-visible { filter:brightness(1.35) saturate(1.2); }

/* Kopfleiste */
body[data-ansicht=spiel] #main[data-screen=room] .roomtop {
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem clamp(.5rem,1.2vw,1rem); min-height:52px;
  padding:.4rem clamp(.6rem,1.5vw,1.3rem); background:linear-gradient(#1a0d28,#110819); border-bottom:2px solid var(--neon-pink);
  box-shadow:0 2px 14px rgba(255,62,165,.35); font-family:var(--neon-schrift);
}
body[data-ansicht=spiel] .roomtop .room-brand {
  order:-2; flex:none; font:10px/1.4 var(--neon-pixel); letter-spacing:.08em; text-transform:uppercase; color:var(--neon-cyan);
  text-shadow:0 0 8px rgba(44,241,255,.7);
}
body[data-ansicht=spiel] #main .roomtop .room-heading { order:-1; flex:0 1 auto; min-width:0; }
body[data-ansicht=spiel] #main .roomtop .room-heading summary { padding-inline-end:26px; }
body[data-ansicht=spiel] #main .roomtop .room-heading summary::after { inset-inline-end:6px; color:var(--neon-leise); }
body[data-ansicht=spiel] .roomtop .room-heading summary h1 {
  font:700 clamp(1rem,1.6vw,1.35rem)/1.15 var(--neon-schrift); letter-spacing:.04em; text-transform:uppercase; color:#fff;
  text-shadow:0 0 10px rgba(255,62,165,.8); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body[data-ansicht=spiel] .roomtop .room-heading .participants {
  background:var(--neon-kasten); color:var(--neon-text); border:2px solid var(--neon-linie); border-radius:0 0 12px 12px;
  box-shadow:0 10px 30px #000a; font-size:.9rem; line-height:1.5;
}
body[data-ansicht=spiel] #main .roomtop .tabs { order:0; flex:0 1 auto; flex-wrap:wrap; gap:.3rem; margin-inline-end:auto; }
body[data-ansicht=spiel] #main .roomtop #sound { order:2; margin:0; }
body[data-ansicht=spiel] #main .roomtop #sound input { accent-color:var(--neon-cyan); }
body[data-ansicht=spiel] #main .roomtop [data-fullscreen] { order:3; }
body[data-ansicht=spiel] #main .roomtop .controls { order:4; display:flex; flex:0 1 auto; width:auto; flex-wrap:wrap; gap:.35rem; justify-self:auto; margin:0 0 0 auto; padding:0; border:0; }
body[data-ansicht=spiel] #main .roomtop :is(.tabs button,[data-fullscreen],.controls button),
body[data-ansicht=spiel] #main .roomtop :is(.tabs button,[data-fullscreen],.controls button):hover:enabled {
  margin:0; min-height:36px; padding:.4rem .75rem; border:2px solid var(--neon-linie); border-radius:9px; background:var(--neon-kasten2);
  color:var(--neon-text); font:600 .82rem/1.1 var(--neon-schrift); letter-spacing:.03em; white-space:nowrap; box-shadow:none;
}
body[data-ansicht=spiel] #main .roomtop :is(.tabs button,[data-fullscreen],.controls button):hover:enabled { border-color:var(--neon-cyan); color:#fff; }
body[data-ansicht=spiel] #main .roomtop .tabs [aria-current=page] { border-color:var(--neon-pink); color:#fff; }
body[data-ansicht=spiel] #main .roomtop [data-fullscreen][aria-pressed=true] { border-color:var(--neon-cyan); color:var(--neon-cyan); background:var(--neon-kasten2); }
body[data-ansicht=spiel] #main .roomtop .controls .primary,
body[data-ansicht=spiel] #main .roomtop .controls .primary:hover:enabled {
  border-color:var(--neon-gelb); background:var(--neon-gelb); color:#1a0d00; box-shadow:0 3px 0 #b39a00,0 0 14px rgba(255,229,59,.4);
}
body[data-ansicht=spiel] #main .roomtop [data-leave] { color:var(--neon-leise); }

/* Warteraum und geschlossener Raum */
body[data-ansicht=spiel] #main:is([data-room-status=lobby],[data-room-status=closed]) .room-panel {
  justify-content:flex-start; align-items:center; color:var(--neon-text);
  background:radial-gradient(ellipse at 50% 30%,rgba(255,62,165,.16),transparent 62%),linear-gradient(#0c0614d9,#0c0614f2),var(--game-cover) center/cover;
}
body[data-ansicht=spiel] #main:is([data-room-status=lobby],[data-room-status=closed]) .play {
  flex:none; width:min(92%,52rem); margin:auto; padding:.8rem 0; border:0; border-radius:0; background:none; text-align:center; font-size:1rem; font-weight:400;
}
.warteraum {
  display:grid; justify-items:center; gap:.9rem; padding:clamp(1.3rem,4vw,2.6rem); border:2px solid var(--neon-pink); border-radius:20px;
  background:linear-gradient(160deg,#1f0f2c,#0f0718); box-shadow:0 0 24px rgba(255,62,165,.4),inset 0 0 0 1px #ffffff10;
}
.warteraum > small { font:11px/1.5 var(--neon-pixel); letter-spacing:.14em; text-transform:uppercase; color:var(--neon-cyan); text-shadow:0 0 8px var(--neon-cyan); }
.warteraum > strong { font:700 clamp(1.6rem,4.4vw,2.6rem)/1.05 var(--neon-schrift); letter-spacing:.05em; text-transform:uppercase; color:#fff; text-shadow:0 0 8px var(--neon-pink),0 0 22px var(--neon-pink); overflow-wrap:anywhere; }
.warteraum .plaetze { display:flex; flex-wrap:wrap; justify-content:center; gap:.7rem; margin:.4rem 0 0; padding:0; list-style:none; }
.warteraum .plaetze li {
  display:grid; justify-items:center; align-content:end; gap:.15rem; width:clamp(104px,15vw,136px); min-height:150px; padding:.3rem .5rem .7rem;
  border:2px solid var(--neon-linie); border-radius:14px; background:#0c0614;
}
.warteraum .plaetze li img { width:100%; aspect-ratio:1; margin-bottom:-14%; object-fit:contain; }
.warteraum .plaetze li b { font:700 1rem/1.2 var(--neon-schrift); color:#fff; overflow-wrap:anywhere; }
.warteraum .plaetze li small { font:9px/1.5 var(--neon-pixel); text-transform:uppercase; color:var(--neon-cyan); }
.warteraum .plaetze li[data-frei] { align-content:center; border-style:dashed; background:none; }
.warteraum .plaetze li[data-frei] b { font-weight:600; color:var(--neon-aus); }
.warteraum p { margin:.2rem 0 0; max-width:38rem; font:600 clamp(1rem,1.6vw,1.15rem)/1.5 var(--neon-schrift); color:var(--neon-leise); }

/* Hinweise der Bot-Übung */
body[data-ansicht=spiel] #main .room-panel > .practice-feed:has(li) { background:#120922; border-top:2px solid var(--neon-linie); color:var(--neon-leise); font-size:.85rem; }
body[data-ansicht=spiel] #main .room-panel > .practice-feed ul { display:flex; flex-wrap:wrap; gap:.35rem .5rem; margin:0; padding:.2rem 0; list-style:none; }
body[data-ansicht=spiel] #main .room-panel > .practice-feed li { padding:.22rem .6rem; border:1px solid var(--neon-linie); border-radius:6px; background:#1a0f30; color:var(--neon-text); overflow-wrap:anywhere; }
body[data-ansicht=spiel] #main .practice-text { color:var(--neon-text); }

/* Ergebnis */
body[data-ansicht] .arcade-dialog::backdrop { background:rgba(8,3,14,.76); backdrop-filter:blur(4px); }
body[data-ansicht=spiel] #main .room-panel > dialog.outcome[open] {
  width:min(40rem,calc(100vw - 2rem)); padding:clamp(1rem,2.6vw,1.7rem); border:2px solid var(--neon-pink); border-radius:18px;
  background:linear-gradient(160deg,#1f0f2c,#0f0718); color:var(--neon-text); font-family:var(--neon-schrift);
  box-shadow:0 0 22px rgba(255,62,165,.45),0 30px 80px #000a;
}
body[data-ansicht=spiel] #main .outcome h2 {
  margin:0 0 .9rem; padding:0; background:none; border-radius:0; font:clamp(.95rem,2.4vw,1.25rem)/1.5 var(--neon-pixel); letter-spacing:.06em;
  text-transform:uppercase; color:var(--neon-gelb); text-shadow:0 0 12px rgba(255,229,59,.55);
}
body[data-ansicht=spiel] #main .match-highlight { margin:0 0 .9rem; padding:.8rem 1rem; border:2px solid var(--neon-cyan); border-radius:12px; background:#0c0614; box-shadow:0 0 14px rgba(44,241,255,.25); }
body[data-ansicht=spiel] #main .match-highlight :is(small,span) { color:var(--neon-leise); font-size:.86rem; }
body[data-ansicht=spiel] #main .match-highlight strong { color:#fff; font:700 clamp(1.2rem,3vw,1.6rem)/1.15 var(--neon-schrift); letter-spacing:.02em; }
body[data-ansicht=spiel] #main .outcome .score-ticket {
  display:grid; grid-template-columns:52px minmax(0,1fr) auto; align-items:center; column-gap:.7rem; margin:.45rem 0; padding:.45rem .8rem .5rem .45rem;
  border:2px solid var(--neon-linie); border-radius:12px; background:var(--neon-kasten2); color:transparent; font-size:0;
}
body[data-ansicht=spiel] #main .outcome .score-ticket[data-place="1"] { border-color:var(--neon-gelb); box-shadow:0 0 14px rgba(255,229,59,.28); }
body[data-ansicht=spiel] #main .score-ticket .ticket-figur { grid-row:1 / 3; width:52px; height:52px; object-fit:contain; }
body[data-ansicht=spiel] #main .score-ticket strong { grid-column:2; color:#fff; font:700 1.02rem/1.25 var(--neon-schrift); }
body[data-ansicht=spiel] #main .score-ticket b { grid-column:3; grid-row:1; float:none; color:var(--neon-cyan); font:12px/1.4 var(--neon-pixel); white-space:nowrap; }
body[data-ansicht=spiel] #main .score-ticket[data-place="1"] b { color:var(--neon-gelb); }
body[data-ansicht=spiel] #main .score-ticket small { grid-column:2 / 4; padding:0; color:var(--neon-leise); font:400 .84rem/1.4 var(--neon-schrift); }
body[data-ansicht=spiel] #main .outcome .practice-record { display:block; margin:.8rem 0 0; color:var(--neon-gruen); font:600 .95rem/1.4 var(--neon-schrift); }
body[data-ansicht=spiel] #main .room-panel > dialog.outcome[open] { width:min(62rem,calc(100vw - 2rem)); }
/* Alle Knöpfe des Ergebnisses in einer Zeile; am Handy umbrechend und gleich breit. */
body[data-ansicht=spiel] #main .outcome .result-actions { display:flex; flex-wrap:nowrap; gap:.5rem; margin-top:1.1rem; }
body[data-ansicht=spiel] #main .outcome .result-actions button,
body[data-ansicht=spiel] #main .outcome .result-actions button:hover:enabled {
  flex:1 1 auto; min-width:0; min-height:46px; margin:0; padding:.6rem .8rem; border:2px solid var(--neon-cyan); border-radius:12px; background:transparent; color:var(--neon-cyan);
  font:700 .84rem/1.15 var(--neon-schrift); letter-spacing:.02em; white-space:nowrap; box-shadow:0 4px 0 #0a5f66;
}
body[data-ansicht=spiel] #main .outcome .result-actions .primary,
body[data-ansicht=spiel] #main .outcome .result-actions .primary:hover:enabled {
  border-color:var(--neon-gelb); background:var(--neon-gelb); color:#1a0d00; box-shadow:0 5px 0 #b39a00,0 0 18px rgba(255,229,59,.45);
}
body[data-ansicht=spiel] #main .outcome .result-actions :is([data-close-result],[data-hall],[data-freestyle],[data-switch]),
body[data-ansicht=spiel] #main .outcome .result-actions :is([data-close-result],[data-hall],[data-freestyle],[data-switch]):hover:enabled { border-color:var(--neon-linie); color:var(--neon-text); box-shadow:0 4px 0 #1b1027; }
body[data-ansicht=spiel] #main .outcome .result-actions [data-switch] { border-color:var(--neon-pink); }
body[data-ansicht=spiel] #main .outcome .result-actions button:active { transform:translateY(3px); box-shadow:none; }
body[data-ansicht=spiel] #main .outcome .result-wait { margin:.9rem 0 0; padding:.6rem .8rem; border:2px dashed var(--neon-linie); border-radius:12px; color:var(--neon-leise); font:600 .92rem/1.4 var(--neon-schrift); }
body[data-ansicht=spiel] #main .outcome .olympia-zeile { display:block; margin:-.4rem 0 .8rem; color:var(--neon-cyan); font:10px/1.6 var(--neon-pixel); letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:760px) {
  body[data-ansicht=spiel] #main .outcome .result-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
  body[data-ansicht=spiel] #main .outcome .result-actions button { white-space:normal; }
}

/* Olympiade: Zwischenstand und Siegerehrung */
body[data-ansicht=spiel] #main .outcome .olympia { margin:1rem 0 0; padding:.8rem; border:2px solid var(--neon-violett); border-radius:14px; background:var(--neon-kasten2); }
body[data-ansicht=spiel] #main .outcome .olympia h3 { margin:0 0 .6rem; color:var(--neon-gelb); font:11px/1.5 var(--neon-pixel); letter-spacing:.08em; text-transform:uppercase; }
body[data-ansicht=spiel] #main .outcome .olympia-hinweis { margin:.3rem 0; color:var(--neon-leise); font:600 .86rem/1.4 var(--neon-schrift); }
body[data-ansicht=spiel] #main .outcome .olympia-scroll { overflow-x:auto; }
body[data-ansicht=spiel] #main .outcome .olympia-tabelle { width:100%; border-collapse:collapse; color:var(--neon-text); font:600 .86rem/1.3 var(--neon-schrift); }
body[data-ansicht=spiel] #main .outcome .olympia-tabelle :is(th,td) { padding:.35rem .5rem; border-bottom:1px solid var(--neon-linie); text-align:start; white-space:nowrap; }
body[data-ansicht=spiel] #main .outcome .olympia-tabelle th { color:var(--neon-leise); font-weight:600; font-size:.76rem; }
body[data-ansicht=spiel] #main .outcome .olympia-tabelle td:last-child { color:var(--neon-cyan); font-weight:700; }
body[data-ansicht=spiel] #main .outcome .olympia-tabelle tr[data-place="1"] td { color:var(--neon-gelb); }
body[data-ansicht=spiel] #main .outcome .olympia-tabelle small { color:var(--neon-rot); font-size:.74rem; }
body[data-ansicht=spiel] #main .outcome .podest { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; margin:0 0 .8rem; padding:0; list-style:none; }
body[data-ansicht=spiel] #main .outcome .podest li { display:grid; justify-items:center; gap:.15rem; padding:.7rem .4rem; border:2px solid var(--neon-linie); border-radius:12px; background:var(--neon-kasten); text-align:center; }
body[data-ansicht=spiel] #main .outcome .podest li[data-place="1"] { border-color:var(--neon-gelb); box-shadow:0 0 16px rgba(255,229,59,.35); }
body[data-ansicht=spiel] #main .outcome .podest li[data-place="2"] { border-color:var(--neon-cyan); }
body[data-ansicht=spiel] #main .outcome .podest li[data-place="3"] { border-color:var(--neon-gold); }
body[data-ansicht=spiel] #main .outcome .podest b { color:var(--neon-gelb); font:14px/1.4 var(--neon-pixel); }
body[data-ansicht=spiel] #main .outcome .podest strong { color:#fff; font:700 1.05rem/1.2 var(--neon-schrift); overflow-wrap:anywhere; }
body[data-ansicht=spiel] #main .outcome .podest span { color:var(--neon-leise); font:600 .84rem/1.3 var(--neon-schrift); }

/* Lobby: Badge in der Leiste, Moduswahl und Optionswerte im Warteraum */
body[data-ansicht=spiel] #main .roomtop .room-heading summary { flex-wrap:wrap; column-gap:.4rem; row-gap:0; }
body[data-ansicht=spiel] .roomtop .lobby-badge { flex:1 0 100%; order:-1; color:var(--neon-violett); font:9px/1.5 var(--neon-pixel); letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.warteraum .optionswerte { display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin:0; padding:0; list-style:none; }
.warteraum .optionswerte li { padding:.3rem .65rem; border:2px solid var(--neon-cyan); border-radius:999px; color:var(--neon-cyan); font:600 .88rem/1.3 var(--neon-schrift); }
.warteraum .lobby-modus { display:grid; justify-items:center; gap:.45rem; width:100%; padding-top:.6rem; border-top:2px solid var(--neon-linie); }
.warteraum .modus-titel { color:var(--neon-gelb); font:10px/1.5 var(--neon-pixel); letter-spacing:.08em; text-transform:uppercase; }
.warteraum .modus-hinweis { color:var(--neon-leise); font:600 .88rem/1.4 var(--neon-schrift); }
.warteraum .olympia-folge { display:flex; flex-wrap:wrap; justify-content:center; gap:.35rem; margin:0; padding:0; list-style:none; counter-reset:folge; }
.warteraum .olympia-folge li { counter-increment:folge; padding:.25rem .6rem; border:2px solid var(--neon-linie); border-radius:8px; color:var(--neon-text); font:600 .86rem/1.3 var(--neon-schrift); }
.warteraum .olympia-folge li::before { content:counter(folge) ". "; color:var(--neon-leise); }
.warteraum .olympia-folge li[data-aktuell] { border-color:var(--neon-gelb); color:var(--neon-gelb); }
.warteraum > button, .warteraum .lobby-modus > button {
  min-height:42px; margin:0; padding:.5rem 1rem; border:2px solid var(--neon-cyan); border-radius:10px; background:transparent; color:var(--neon-cyan); font:700 .88rem/1.1 var(--neon-schrift); box-shadow:none;
}

/* Knopfgruppen statt nativer Auswahllisten: Startmenü, Moduswahl, Anzahl der Disziplinen */
body[data-ansicht] .wahl-gruppe { display:flex; flex-wrap:wrap; gap:.35rem; }
body[data-ansicht] :is(#start-menu,#main,#game-picker) .wahl-gruppe [role=radio],
body[data-ansicht] :is(#start-menu,#main,#game-picker) .wahl-gruppe [role=radio]:hover:enabled {
  min-height:40px; min-width:44px; margin:0; padding:.4rem .7rem; border:2px solid var(--neon-linie); border-radius:10px; background:var(--neon-kasten2);
  color:var(--neon-leise); font:600 .88rem/1.1 var(--neon-schrift); letter-spacing:.01em; text-transform:none; white-space:nowrap; box-shadow:none;
}
body[data-ansicht] :is(#start-menu,#main,#game-picker) .wahl-gruppe [role=radio]:hover:enabled { border-color:var(--neon-cyan); color:var(--neon-text); }
body[data-ansicht] :is(#start-menu,#main,#game-picker) .wahl-gruppe [role=radio][aria-checked=true] { border-color:var(--neon-cyan); background:#0d2a33; color:#fff; box-shadow:0 0 12px rgba(44,241,255,.35); }
body[data-ansicht] :is(#start-menu,#main,#game-picker) .wahl-gruppe [role=radio]:focus-visible { outline:none; filter:brightness(1.35) saturate(1.2); }
body[data-ansicht] #start-menu .menu-options { display:grid; gap:.55rem; }
body[data-ansicht] #start-menu .option-setting { display:grid; gap:.4rem; padding:.55rem 0; border-top:1px solid var(--neon-linie); }
body[data-ansicht] #start-menu .option-setting > span strong { display:block; color:var(--neon-text); font-weight:600; }
body[data-ansicht] #start-menu .option-setting > span small { display:block; color:var(--neon-leise); }

/* Spielauswahl der Leitung */
body[data-ansicht] #game-picker { width:min(64rem,calc(100vw - 2rem)); padding:0; border:2px solid var(--neon-pink); border-radius:18px; background:var(--neon-grund); color:var(--neon-text); font-family:var(--neon-schrift); box-shadow:0 0 22px rgba(255,62,165,.4); }
body[data-ansicht] #game-picker :focus-visible { outline:none; filter:brightness(1.35) saturate(1.2); }
body[data-ansicht] #game-picker .rank-bar { position:sticky; top:0; z-index:1; background:linear-gradient(#1a0d28,#110819); border-bottom:2px solid var(--neon-linie); }
body[data-ansicht] #game-picker .rank-bar strong { font:12px/1.5 var(--neon-pixel); letter-spacing:.08em; text-transform:uppercase; color:var(--neon-gelb); }
body[data-ansicht] #game-picker button { font-family:var(--neon-schrift); }
body[data-ansicht] #game-picker .rank-bar button,
body[data-ansicht] #game-picker .rank-bar button:hover:enabled { min-height:40px; border:2px solid var(--neon-cyan); border-radius:10px; background:transparent; color:var(--neon-cyan); font:700 .85rem/1.1 var(--neon-schrift); }
body[data-ansicht] #game-picker .picker-body { display:grid; gap:1rem; padding:clamp(.8rem,2vw,1.3rem); }
body[data-ansicht] #game-picker .picker-olympia { display:grid; gap:.6rem; padding:.8rem; border:2px solid var(--neon-violett); border-radius:14px; background:var(--neon-kasten2); }
body[data-ansicht] #game-picker .picker-zeile { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1rem; }
body[data-ansicht] #game-picker .picker-hinweis { color:var(--neon-leise); font-size:.88rem; }
body[data-ansicht] #game-picker .picker-folge { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; counter-reset:folge; }
body[data-ansicht] #game-picker .picker-folge li { counter-increment:folge; display:flex; align-items:center; gap:.4rem; min-height:40px; padding:.2rem .3rem .2rem .65rem; border:2px solid var(--neon-gelb); border-radius:10px; color:var(--neon-text); font-weight:600; }
body[data-ansicht] #game-picker .picker-folge li::before { content:counter(folge) "."; color:var(--neon-leise); }
body[data-ansicht] #game-picker .picker-folge li[data-zufall] { border-style:dashed; border-color:var(--neon-linie); color:var(--neon-leise); padding-inline-end:.65rem; }
body[data-ansicht] #game-picker .picker-folge button,
body[data-ansicht] #game-picker .picker-folge button:hover:enabled { min-height:32px; margin:0; padding:.2rem .5rem; border:1px solid var(--neon-linie); border-radius:7px; background:transparent; color:var(--neon-leise); font-size:.78rem; }
body[data-ansicht] #game-picker [data-plan-olympia],
body[data-ansicht] #game-picker [data-plan-olympia]:hover:enabled { min-height:40px; padding:.4rem .9rem; border:2px solid var(--neon-violett); border-radius:10px; background:transparent; color:var(--neon-text); font-weight:700; }
body[data-ansicht] #game-picker [data-olympia-save],
body[data-ansicht] #game-picker [data-olympia-save]:hover:enabled { justify-self:start; min-height:46px; padding:.6rem 1.2rem; border:0; border-radius:12px; background:var(--neon-gelb); color:#1a0d00; font-weight:700; box-shadow:0 5px 0 #b39a00; }
body[data-ansicht] #game-picker .picker-kacheln { display:grid; grid-template-columns:repeat(auto-fill,minmax(10.5rem,1fr)); gap:.7rem; }
body[data-ansicht] #game-picker .picker-kachel,
body[data-ansicht] #game-picker .picker-kachel:hover:enabled {
  position:relative; display:grid; align-content:start; gap:.2rem; margin:0; padding:0 0 .6rem; overflow:hidden; border:2px solid var(--neon-linie); border-radius:14px;
  background:var(--neon-kasten); color:var(--neon-text); text-align:start; box-shadow:none;
}
body[data-ansicht] #game-picker .picker-kachel:hover:not([aria-disabled=true]) { border-color:var(--neon-cyan); }
body[data-ansicht] #game-picker .picker-kachel img { width:100%; aspect-ratio:16/10; object-fit:cover; margin-bottom:.3rem; }
body[data-ansicht] #game-picker .picker-kachel :is(strong,small,.kachel-grund) { padding-inline:.65rem; }
body[data-ansicht] #game-picker .picker-kachel strong { font:700 1rem/1.2 var(--neon-schrift); color:#fff; }
body[data-ansicht] #game-picker .picker-kachel small { color:var(--neon-leise); font-size:.82rem; }
body[data-ansicht] #game-picker .picker-kachel .kachel-grund { color:var(--neon-rot); font:600 .8rem/1.3 var(--neon-schrift); }
body[data-ansicht] #game-picker .picker-kachel[aria-disabled=true] { cursor:not-allowed; border-style:dashed; }
body[data-ansicht] #game-picker .picker-kachel[aria-disabled=true] img { filter:grayscale(1) brightness(.45); }
body[data-ansicht] #game-picker .picker-kachel[aria-pressed=true] { border-color:var(--neon-gelb); box-shadow:0 0 14px rgba(255,229,59,.35); }
body[data-ansicht] #game-picker .picker-kachel .kachel-platz { position:absolute; top:.45rem; inset-inline-start:.45rem; padding:.2rem .45rem; border-radius:6px; background:var(--neon-gelb); color:#1a0d00; font:9px/1.4 var(--neon-pixel); }
@media (max-width:560px) { body[data-ansicht] #game-picker .picker-kacheln { grid-template-columns:repeat(2,minmax(0,1fr)); } }

/* Startmenü im Raum: Schalter wie in der Halle, Wortmarke aus */
body[data-ansicht] #start-menu .menu-art .menu-wordmark { display:none; }
body[data-ansicht=spiel] :is(#start-menu .menu-setting button,.roomtop #sound button) {
  display:inline-flex; align-items:center; gap:8px; min-height:32px; margin:0; padding:0 4px; border:0; border-radius:6px; background:transparent;
  font:600 13px/1 var(--neon-schrift); color:var(--neon-leise); white-space:nowrap; box-shadow:none;
}
body[data-ansicht=spiel] :is(#start-menu .menu-setting button,.roomtop #sound button)::before {
  content:""; flex:none; width:30px; height:18px; border-radius:4px; border:1px solid #4a3561; box-shadow:inset 0 2px 4px #000;
  background:linear-gradient(#8a7aa0,#4d3f62) 3px 2px/10px 12px no-repeat,#241634;
}
body[data-ansicht=spiel] :is(#start-menu .menu-setting button,.roomtop #sound button)[aria-pressed=true] { color:var(--neon-text); }
body[data-ansicht=spiel] :is(#start-menu .menu-setting button,.roomtop #sound button)[aria-pressed=true]::before {
  border-color:var(--neon-cyan); box-shadow:inset 0 2px 4px #000,0 0 8px rgba(44,241,255,.5);
  background:linear-gradient(#bffcff,var(--neon-cyan)) 15px 2px/10px 12px no-repeat,#241634;
}
body[data-ansicht=spiel] :is(#start-menu .menu-setting button,.roomtop #sound button):hover:enabled { background:transparent; color:var(--neon-text); border-color:transparent; }
body[data-ansicht=spiel] #start-menu :is(button,a,summary,select,input):focus-visible { filter:brightness(1.35) saturate(1.2); }

/* Bestenliste über dem Spiel */
body[data-ansicht] #room-rankings { border:2px solid var(--neon-cyan); border-radius:18px; background:var(--neon-grund); box-shadow:0 0 22px rgba(44,241,255,.35); }
body[data-ansicht] #room-rankings .rank-bar { background:linear-gradient(#1a0d28,#110819); border-bottom:2px solid var(--neon-linie); color:#fff; font-family:var(--neon-schrift); }
body[data-ansicht] #room-rankings .rank-bar strong { font:12px/1.5 var(--neon-pixel); letter-spacing:.08em; text-transform:uppercase; color:var(--neon-gelb); }
body[data-ansicht] #room-rankings .rank-bar button,
body[data-ansicht] #room-rankings .rank-bar button:hover:enabled { min-height:40px; border:2px solid var(--neon-cyan); border-radius:10px; background:transparent; color:var(--neon-cyan); font:700 .85rem/1.1 var(--neon-schrift); }

@media (prefers-reduced-motion:no-preference) {
  .warteraum .plaetze li:not([data-frei]) img { animation:raum-wippen 1.6s ease-in-out infinite alternate; }
  .warteraum .plaetze li:nth-child(2n) img { animation-delay:-.8s; }
}
@keyframes raum-wippen { from { translate:0 0; } to { translate:0 -5%; } }

@media (max-width:720px) {
  body[data-ansicht=spiel] .roomtop .room-brand { display:none; }
  body[data-ansicht=spiel] #main .roomtop .room-heading { flex:1 1 100%; }
  body[data-ansicht=spiel] #main .roomtop :is(.tabs button,[data-fullscreen],.controls button) { padding:.4rem .55rem; font-size:.78rem; }
}
/* Handy quer: die Leiste darf nur eine Zeile kosten */
@media (max-height:480px) and (orientation:landscape) {
  body[data-ansicht=spiel] #main[data-screen=room] .roomtop { flex-wrap:nowrap; min-height:44px; padding-block:.25rem; overflow-x:auto; scrollbar-width:none; }
  body[data-ansicht=spiel] #main .roomtop .room-heading { flex:0 0 auto; }
  body[data-ansicht=spiel] #main .roomtop .tabs { flex-wrap:nowrap; flex:0 0 auto; }
  body[data-ansicht=spiel] #main .roomtop .controls { flex-wrap:nowrap; }
  .warteraum { gap:.4rem; padding:.8rem 1.2rem; }
  .warteraum .plaetze li { min-height:0; width:122px; }
  .warteraum > strong { font-size:1.4rem; }
}

/* Kopfleiste bleibt in jeder Breite einzeilig: nur der Spielname gibt nach (gekürzt), alle Knöpfe bleiben im Bild.
   Unter 900 px zeigen Wertung und Vollbild nur ein Symbol, unter 640 px alle Knöpfe (der Name bleibt als Zugänglichkeitsname erhalten). */
body[data-ansicht=spiel] #main[data-screen=room] .roomtop { flex-wrap:nowrap; }
body[data-ansicht=spiel] #main .roomtop .room-heading { min-width:0; flex:0 1 auto; }
body[data-ansicht=spiel] #main .roomtop .room-heading summary { display:block; min-width:0; max-width:100%; overflow:hidden; }
body[data-ansicht=spiel] #main .roomtop .room-heading summary .lobby-badge { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
body[data-ansicht=spiel] #main .roomtop :is(.tabs,.controls) { flex-wrap:nowrap; flex:none; }
body[data-ansicht=spiel] #main .roomtop :is([data-fullscreen],.controls button,.tabs button) { flex:none; }
@media (max-width:900px) {
  body[data-ansicht=spiel] #main[data-screen=room] .roomtop { gap:.25rem .4rem; padding-inline:.5rem; }
  body[data-ansicht=spiel] #main .roomtop .room-brand { display:none; }
  body[data-ansicht=spiel] #main .roomtop :is(.tabs button,[data-fullscreen],.controls button) { padding:.35rem .55rem; }
  body[data-ansicht=spiel] #main .roomtop :is([data-nav=stats],[data-fullscreen]) { font-size:0!important; min-width:38px; padding-inline:.4rem; }
  body[data-ansicht=spiel] #main .roomtop [data-nav=stats]::before { content:"★"; font-size:.95rem; }
  body[data-ansicht=spiel] #main .roomtop [data-fullscreen]::before { content:"⛶"; font-size:.95rem; }
}
@media (max-width:640px) {
  body[data-ansicht=spiel] #main .roomtop :is([data-menu],[data-nav=lobby],[data-leave]) { font-size:0!important; min-width:38px; padding-inline:.4rem; }
  body[data-ansicht=spiel] #main .roomtop [data-menu]::before { content:"⚙"; font-size:.95rem; }
  body[data-ansicht=spiel] #main .roomtop [data-nav=lobby]::before { content:"←"; font-size:.95rem; }
  body[data-ansicht=spiel] #main .roomtop [data-leave]::before { content:"✕"; font-size:.95rem; }
}
@media (max-width:400px) {
  body[data-ansicht=spiel] #main[data-screen=room] .roomtop { gap:.25rem; padding-inline:.4rem; }
  body[data-ansicht=spiel] #main .roomtop :is([data-menu],[data-nav=lobby],[data-nav=stats],[data-fullscreen],[data-leave]) { min-width:34px; padding-inline:.25rem; }
}

/* Handy hochkant: Ergebnis und Siegerehrung kompakt, damit Tabelle und letzter Knopf ohne Scrollen im Bild liegen */
@media (max-width:520px) {
  body[data-ansicht=spiel] #main .room-panel > dialog.outcome[open] { padding:.8rem; }
  body[data-ansicht=spiel] #main .outcome h2 { margin-bottom:.6rem; }
  body[data-ansicht=spiel] #main .match-highlight { margin-bottom:.6rem; padding:.55rem .8rem; }
  body[data-ansicht=spiel] #main .outcome .score-ticket { margin:.35rem 0; padding:.3rem .6rem .35rem .35rem; column-gap:.55rem; grid-template-columns:44px minmax(0,1fr) auto; }
  body[data-ansicht=spiel] #main .score-ticket .ticket-figur { width:44px; height:44px; }
  body[data-ansicht=spiel] #main .score-ticket small { font-size:.78rem; line-height:1.3; }
  body[data-ansicht=spiel] #main .outcome .result-actions { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; margin-top:.8rem; }
  body[data-ansicht=spiel] #main .outcome .result-actions button,
  body[data-ansicht=spiel] #main .outcome .result-actions button:hover:enabled { min-height:44px; padding:.4rem .25rem; font-size:.76rem; letter-spacing:0; }
  body[data-ansicht=spiel] #main .outcome .olympia { padding:.55rem; margin-top:.6rem; }
  body[data-ansicht=spiel] #main .outcome .podest { gap:.35rem; margin-bottom:.5rem; }
  body[data-ansicht=spiel] #main .outcome .podest li { padding:.4rem .25rem; }
  /* Tabelle ohne Querscroll: Disziplin-Köpfe und lange Namen werden gekürzt, Zellen eng */
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle { font-size:.78rem; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle :is(th,td) { padding:.3rem .22rem; white-space:nowrap; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle th { font-size:.64rem; line-height:1.2; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle { table-layout:fixed; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle :is(th,td) { overflow:hidden; text-overflow:ellipsis; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle th:first-child { width:1.9rem; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle th:nth-child(2) { width:4.3rem; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle th:nth-last-child(2) { width:2.1rem; }
  body[data-ansicht=spiel] #main .outcome .olympia-tabelle th:last-child { width:2.6rem; }
  body[data-ansicht=spiel] #main .outcome .olympia { padding:.4rem; }
}

/* Eingabefelder im Spiel, Betreiber-Standard „Variante D“ (eingabefelder-ohne-zoom.md): 16 px rechnen gegen den iOS-Zoom,
   per scale(.875) wie 14 px aussehen. Zentral für alle Spiele (Ein Wort, Resonanz, Deckname, Buntstift, Papierpost, Hinweis).
   Das Maß wird durch 0,875 geteilt und der Überhang per Rand zurückgenommen, damit das Feld nicht kleiner wirkt als gestaltet. */
@media (pointer:coarse) {
  #main[data-screen=room] input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=file],[type=button],[type=submit],[type=reset],[type=image],[type=hidden]) {
    font-size:16px!important; transform:scale(.875); transform-origin:left center;
    width:calc(100% / .875); max-width:none; margin-inline-end:calc(100% / -7);
    min-height:calc(44px / .875); margin-block:calc((44px - 44px / .875) / 2);
  }
  #main[data-screen=room] .dk-zaehler input { width:calc(3.6rem / .875); margin-inline-end:calc(3.6rem / .875 * -.125); }
  #main[data-screen=room] :is(textarea,[contenteditable]) { font-size:16px!important; }
}

/* Einstellungen-Dialog: die Überschrift stand doppelt (h2 im Kopf, h3 im Rumpf); im Einstellungsmodus bleibt nur die im Kopf */
#start-menu[data-preflight="false"] .menu-body > h3 { display:none; }