/* Musik-Bingo – Aussehen */
/* Farbthemen: --surf/--deep sind RGB-Werte für getönte Glasflächen, --blob1/2 die Farbflächen im Hintergrund */
:root,[data-theme="graphit"]{--bg:#0c0c0f;--sheet:#141418;--surf:44,44,52;--deep:4,4,6;--blob1:#2c3442;--blob2:#1f3a32;--text:#f4f4f6;--muted:#a1a1ad}
[data-theme="lila"]{--bg:#0d0a1a;--sheet:#15112a;--surf:40,33,76;--deep:5,3,12;--blob1:#4a22a0;--blob2:#8a1458;--text:#f5f2ff;--muted:#a49dc6}
[data-theme="ozean"]{--bg:#05111a;--sheet:#0a1a26;--surf:24,46,64;--deep:2,6,10;--blob1:#0b4f75;--blob2:#0d6e66;--text:#eef6fb;--muted:#93b4c8}
[data-theme="abend"]{--bg:#130a0b;--sheet:#1c0f11;--surf:62,34,38;--deep:8,3,4;--blob1:#7a2e1c;--blob2:#7d1f4a;--text:#fbf1f1;--muted:#cfa9ab}
[data-theme="wald"]{--bg:#08110c;--sheet:#0d1a13;--surf:30,52,40;--deep:3,7,5;--blob1:#1d5a3a;--blob2:#4c5b1a;--text:#f0f7f2;--muted:#a3bfae}
:root{
  --glass:rgba(var(--surf),.62);
  --accent:#1ed760;--accent2:#ff4fa3;--warn:#ffb020;--danger:#ff5a6a;--line:rgba(255,255,255,.09);
  --cell:rgba(255,255,255,.055);--cat:#ffa03c;--radius:24px;
  --sat:env(safe-area-inset-top);--sab:env(safe-area-inset-bottom);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--bg)}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;color:var(--text);letter-spacing:-.01em;
  min-height:100vh;min-height:100dvh;background:var(--bg);overflow-x:hidden;overscroll-behavior-y:none;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
body.locked{overflow:hidden}
/* Feste Fläche hinter der iPhone-Statusleiste, damit dort nichts verschwommen durchscheint */
body::before{content:"";position:fixed;top:0;left:0;right:0;height:var(--sat);background:var(--bg);z-index:40;pointer-events:none}
input,textarea{-webkit-user-select:text;user-select:text}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
/* Akku: Die Farbflächen wandern nur in 5 Schritten pro Sekunde (steps) statt 60 – bei der starken Unschärfe ist jeder Schritt
   kleiner als ein Pixel, also unsichtbar. Sonst müssten alle Milchglas-Flächen darüber 60× pro Sekunde neu berechnet werden. */
.bg i{position:absolute;border-radius:50%;opacity:.55;animation:float 22s steps(110) infinite alternate;will-change:transform}
.bg i:nth-child(1){width:55vmax;height:55vmax;left:-15vmax;top:-20vmax;background:var(--blob1)}
.bg i:nth-child(2){width:45vmax;height:45vmax;right:-15vmax;top:5vmax;background:var(--blob2);animation-delay:-8s}
.bg i:nth-child(3){width:40vmax;height:40vmax;left:20vmax;bottom:-25vmax;background:var(--cat);opacity:.18;transition:background 1s;animation-delay:-14s}
@keyframes float{to{transform:translate(6vmax,4vmax) scale(1.1)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important}}

/* ---------- Grundelemente ---------- */
button,input,select{font:inherit;color:inherit}
input,select,textarea{font-size:16px} /* < 16px lässt iOS beim Antippen hineinzoomen */
button{cursor:pointer;border:0;border-radius:14px;padding:.75em 1.25em;background:var(--accent);color:#06150b;font-weight:700;
  transition:transform .1s,filter .15s,background .2s,opacity .2s;display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  white-space:nowrap;touch-action:manipulation}
button:active{transform:scale(.96)}
button:disabled{opacity:.4;cursor:not-allowed}
@media (hover:hover){button:hover{filter:brightness(1.08)} button.ghost:hover{background:rgba(255,255,255,.11)}}
button.ghost{color:var(--text);font-weight:600;border:1px solid var(--line)}
button.pink{background:var(--accent2);color:#fff}
button.big{font-size:1.12rem;padding:.95em 1.7em;border-radius:18px;box-shadow:0 10px 30px -10px var(--accent)}
button.link{background:none;color:var(--muted);padding:0;text-decoration:underline;font-weight:500}
input,select{background:rgba(0,0,0,.28);border:1px solid var(--line);border-radius:12px;padding:.65em .85em;min-width:0}
input:focus,select:focus{outline:2px solid var(--accent2);outline-offset:1px}
code{background:rgba(0,0,0,.35);padding:.1em .45em;border-radius:6px;font-size:.88em;word-break:break-all;-webkit-user-select:all;user-select:all}
a{color:var(--accent)}
.hidden{display:none!important}
.invisible{visibility:hidden}
.muted{color:var(--muted)}
.small{font-size:.85rem}
.vh{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.ic{width:1.25em;height:1.25em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Schieberegler */
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:30px;padding:0;border:0;background:transparent;cursor:pointer;--p:50%}
input[type=range]:focus{outline:none}
input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:4px;
  background:linear-gradient(var(--accent),var(--accent)) 0/var(--p) 100% no-repeat,rgba(255,255,255,.16)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-11px;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
input[type=range]::-moz-range-track{height:4px;border-radius:4px;background:rgba(255,255,255,.16)}
input[type=range]::-moz-range-progress{height:4px;border-radius:4px;background:var(--accent)}
input[type=range]::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:50%;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.4)}
input[type=range]:disabled{opacity:.4}

/* iOS-Schalter */
.switch{position:relative;width:51px;height:31px;flex:none}
.switch input{position:absolute;inset:0;margin:0;opacity:0;cursor:pointer;z-index:1}
.switch span{position:absolute;inset:0;border-radius:99px;background:rgba(120,120,128,.36);transition:background .2s}
.switch span::after{content:'';position:absolute;left:2px;top:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.3);transition:transform .25s cubic-bezier(.3,1.3,.5,1)}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span::after{transform:translateX(20px)}

/* ---------- Kopfzeile ---------- */
header{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:960px;margin:0 auto;
  padding:calc(var(--sat) + 16px) 20px 14px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.4rem;letter-spacing:.2px;min-width:0}
.logo img{width:38px;height:38px;border-radius:11px;box-shadow:0 6px 20px -6px var(--accent2)}
.logo span{background:linear-gradient(90deg,#fff,#d9cfff);-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.hdr-r{display:flex;gap:8px;align-items:center}
.hbtn{border:1px solid var(--line);color:var(--text);font-weight:600;padding:.6em .95em}
.hbtn .ic{width:1.15em;height:1.15em}

main{max-width:960px;margin:0 auto;padding:0 16px 40px}
.glass{border-radius:var(--radius)}

/* ---------- Spielfläche ---------- */
/* z-index: Die Spielfläche (mit der fixen Bedienleiste darin) muss über Lobby-Leiste und Verlauf liegen */
.stage{text-align:center;padding:22px 24px 26px;position:relative;z-index:3}
.round-meta{display:flex;justify-content:space-between;gap:8px;margin-bottom:18px}
.pill{font-size:.8rem;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:.35em .85em;white-space:nowrap}
.cat{display:flex;flex-direction:column;align-items:center;gap:8px}
.cat-kicker{text-transform:uppercase;letter-spacing:3px;font-size:.7rem;color:var(--cat);font-weight:800;transition:color .4s}
.cat-badge{display:inline-flex;align-items:center;gap:14px;padding:12px 24px 12px 12px;border-radius:22px;max-width:100%;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 22%,transparent),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--cat) 45%,transparent);transition:background .4s,border-color .4s}
.cat-icon{width:52px;height:52px;flex:none;border-radius:16px;display:grid;place-items:center;font-size:1.6rem;background:var(--cat);transition:background .4s}
.cat-name{font-size:clamp(1.35rem,5.2vw,2.5rem);font-weight:900;line-height:1.12;text-align:left;overflow-wrap:anywhere}
.cat.idle .cat-badge{background:rgba(255,255,255,.04);border-color:var(--line)}
.cat.idle .cat-icon{background:linear-gradient(135deg,#ffa03c,#ff3878);overflow:hidden}
.cat-icon img{width:100%;height:100%;object-fit:cover;display:block}
.cat.spin .cat-name{opacity:.55;filter:blur(1.5px)}
.cat.land .cat-badge{animation:land .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes land{0%{transform:scale(1.18)}100%{transform:scale(1)}}

.disc-wrap{position:relative;width:min(260px,62vw);aspect-ratio:1;margin:26px auto 24px}
.disc-wrap svg.ring-svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);opacity:0;transition:opacity .3s}
.disc-wrap.counting svg.ring-svg{opacity:1}
.ring-svg circle{fill:none;stroke-width:5}
.ring-svg .trk{stroke:rgba(255,255,255,.07)}
/* Ring + Schein: weichgezeichnete Kopie des Rings direkt in der Grafik (SVG-Filter) statt CSS drop-shadow – der malte
   in Chrome ein dunkles Quadrat vor das Milchglas. overflow:visible, damit der Schein am Rand nicht abgeschnitten wird.
   Fortschritt über --len/--off (gilt für Ring und Schein). */
.disc-wrap svg.ring-svg{overflow:visible}
.ring-svg .ring,.ring-svg .ring-glow{stroke:var(--cat);stroke-linecap:round;stroke-dasharray:var(--len,0);stroke-dashoffset:var(--off,0)}
.ring-svg .ring-glow{stroke-width:6;opacity:.85}
.disc-wrap.urgent .ring,.disc-wrap.urgent .ring-glow{stroke:var(--danger)}
.disc{position:absolute;inset:9%;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 31%,rgba(255,255,255,.05) 31.5% 32%,transparent 32.5% 40%,rgba(255,255,255,.04) 40.5% 41%,transparent 41.5% 52%,rgba(255,255,255,.05) 52.5% 53%,transparent 53.5% 66%,rgba(255,255,255,.04) 66.5% 67%,transparent 67.5%),
    conic-gradient(from 30deg,#111 0deg,#2a2a2a 40deg,#111 90deg,#1d1d1d 180deg,#111 230deg,#2a2a2a 270deg,#111 360deg);
  box-shadow:0 20px 50px -15px rgba(0,0,0,.8),inset 0 0 0 2px rgba(255,255,255,.04);
  animation:rot 3.2s linear infinite;animation-play-state:paused}
.disc-wrap.playing .disc{animation-play-state:running}
@keyframes rot{to{transform:rotate(360deg)}}
.disc-label{position:absolute;inset:0;margin:auto;width:40%;height:40%;border-radius:50%;
  background:radial-gradient(circle,var(--bg) 0 7%,transparent 7.5%),linear-gradient(135deg,var(--cat),#ff3878);transition:background .4s}
/* Startbildschirm: Etikett wie im Logo (Sunset-Verlauf mit Bingo-Diagonale) */
.label-grid{position:absolute;left:22%;top:22%;width:56%;height:56%;opacity:0;transition:opacity .3s}
.disc-wrap.idle .label-grid{opacity:1}
.disc-wrap.idle .disc-label{background:linear-gradient(135deg,#ffa03c,#ff3878)}
.disc-num{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(2.4rem,9vw,3.6rem);font-weight:900;
  font-variant-numeric:tabular-nums;text-shadow:0 4px 18px rgba(0,0,0,.7);pointer-events:none}
.disc-wrap.urgent .disc-num{color:var(--danger);animation:pulse 1s infinite}
@keyframes pulse{50%{transform:scale(1.12)}}

.controls{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.volume{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:20px;color:var(--muted)}
.volume input{width:200px}
.volume button{background:none;color:var(--muted);padding:.3em}
.volume.off{opacity:.45}
.hint{margin:16px 0 0;font-size:.8rem;color:var(--muted)}
.hint kbd{font-family:inherit;background:rgba(255,255,255,.08);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:.05em .45em}

.reveal{margin:22px auto 24px;max-width:640px;animation:pop .5s cubic-bezier(.3,1.4,.5,1)}
@keyframes pop{0%{opacity:0;transform:translateY(14px) scale(.97)}100%{opacity:1;transform:none}}
.rv-answer{border-radius:20px;padding:16px 18px;margin-bottom:12px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--cat) 25%,transparent),rgba(255,255,255,.03));
  border:1px solid color-mix(in srgb,var(--cat) 50%,transparent)}
.rv-q{color:var(--muted);font-size:.85rem}
.rv-a{font-size:clamp(1.5rem,5vw,2.4rem);font-weight:900;color:var(--cat);margin-top:2px;overflow-wrap:anywhere;line-height:1.15}
.rv-a .small{display:block;color:var(--muted);font-weight:500;margin-top:2px}
.rv-song{text-align:center;background:rgba(0,0,0,.25);border:1px solid var(--line);border-radius:20px;padding:14px 16px}
.rv-title{font-size:1.3rem;font-weight:800;line-height:1.2;overflow-wrap:anywhere}
.rv-artist{font-size:1.02rem;color:var(--accent2);font-weight:600;margin:3px 0 6px}
.rv-meta{color:var(--muted);font-size:.85rem}

.hist{margin-top:16px;padding:4px 20px}
.hist summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;align-items:center}
.hist summary::-webkit-details-marker{display:none}
.hist summary::after{content:'';width:9px;height:9px;border:solid var(--muted);border-width:0 2px 2px 0;transform:rotate(45deg);transition:transform .2s;margin-right:4px}
.hist[open] summary::after{transform:rotate(-135deg)}
#hist{margin:0 0 12px;padding:0;list-style:none;max-height:340px;overflow:auto}
#hist li{padding:9px 0;border-top:1px solid var(--line);font-size:.9rem;display:flex;gap:12px;align-items:center}
#hist li b{color:var(--accent2);min-width:2.4em}
#hist li img,#hist li .ph{width:40px;height:40px;border-radius:8px;object-fit:cover;flex:none;background:rgba(0,0,0,.3)}

/* ---------- Sheets (Playlists / Einstellungen) im iOS-Stil ---------- */
dialog{color:var(--text);padding:0;border:0}
dialog::backdrop{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sheet{border:1px solid var(--line);border-radius:22px;width:min(560px,calc(100vw - 24px));
  height:min(780px,calc(100dvh - 48px));max-height:none;overflow:hidden}
.sheet[open]{display:flex;flex-direction:column;animation:pop .28s ease}
.sheet-head{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:14px 8px 10px;
  border-bottom:1px solid var(--line);flex:none}
.grab{display:none;position:absolute;top:6px;left:50%;width:38px;height:5px;margin-left:-19px;border-radius:3px;background:rgba(255,255,255,.22)}
.nav-back,.nav-done{background:none;color:var(--accent);padding:8px 10px;font-weight:500;font-size:1.02rem;border-radius:10px}
.nav-back{justify-self:start;gap:0}
/* Zurück-Knopf und Sprachknopf teilen sich die linke Ecke der Kopfzeile (nie beide gleichzeitig sichtbar) */
.sheet-head>.nav-back,.sheet-head>.nav-lang{grid-column:1;grid-row:1}
.sheet-head>.nav-title{grid-column:2;grid-row:1}
.sheet-head>.nav-done{grid-column:3;grid-row:1}
.nav-lang{justify-self:start;margin-left:8px}
.nav-back .ic{width:1.35em;height:1.35em;margin-left:-6px}
.nav-done{justify-self:end;font-weight:700}
.nav-title{font-weight:700;font-size:1.05rem;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}
.sheet-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;padding:8px 16px calc(28px + var(--sab))}
.page{display:none}
.page.active{display:block;animation:slideIn .28s cubic-bezier(.2,.8,.3,1)}
.page.active.back{animation-name:slideBack}
@keyframes slideIn{from{opacity:0;transform:translateX(28px)}}
@keyframes slideBack{from{opacity:0;transform:translateX(-28px)}}

.group-h{display:flex;justify-content:space-between;align-items:center;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:24px 16px 8px}
.group-h button{background:none;color:var(--accent);padding:0;text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:600}
.group-f{font-size:.8rem;color:var(--muted);margin:8px 16px 0;line-height:1.45}
.group{border-radius:14px;overflow:hidden;margin-top:8px}
.cell{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 14px;position:relative;width:100%;
  background:none;border:0;border-radius:0;color:var(--text);font-weight:500;font-size:1rem;text-align:left;justify-content:flex-start;white-space:normal}
.cell+.cell::before,.cell+details::before{content:'';position:absolute;top:0;left:14px;right:0;height:1px;background:var(--line)}
.group.icons .cell+.cell::before{left:58px}
button.cell{transform:none!important;filter:none!important}
.cell.tap{cursor:pointer}
.cell.tap:active{background:rgba(255,255,255,.07)}
.cell.accent{color:var(--accent);font-weight:600}
.cell.danger{color:var(--danger)}
.cell.col{flex-direction:column;align-items:stretch;gap:2px}
.cell .grow{flex:1;min-width:0}
/* Untertitel: bis zu 2 Zeilen (vorher einzeilig und abgeschnitten – z. B. „Lobby schließen – alle Mitspieler kommen zur Code-Ein…“) */
.cell .sub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;font-size:.8rem;color:var(--muted);font-weight:400;margin-top:1px;line-height:1.3}
.cell .chev{color:rgba(255,255,255,.3);width:1.1em;height:1.1em}
.cell .trail{color:var(--muted);display:grid;place-items:center;min-width:24px;font-weight:700}
.cell .trail.ok{color:var(--accent)}
.cell-ic{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;font-size:1.05rem;color:#fff}
.cell-ic .ic{width:18px;height:18px}
.row-b{display:flex;justify-content:space-between;align-items:center}
.cell select{background-color:transparent;border:0;border-radius:0;color:var(--muted);padding:6px 22px 6px 0;max-width:58%;text-align:right;text-align-last:right;
  -webkit-appearance:none;appearance:none;cursor:pointer;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49dc6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:16px}
.cell select:focus{outline:none}
.cell input.bare{flex:1;background:none;border:0;border-radius:0;padding:4px 0;outline:none;color:var(--text)}
.cell input.bare::placeholder{color:rgba(164,157,198,.7)}
.cell input.num{flex:none;width:64px;text-align:right}
.cell .mini{padding:.5em .95em;border-radius:99px;font-size:.9rem}
.icon-btn{background:none;color:var(--muted);padding:8px;border-radius:10px}
.icon-btn.del{color:var(--muted);transition:color .15s}
.icon-btn.del:active{color:var(--danger)}
@media (hover:hover){.icon-btn.del:hover{color:var(--danger)}}
.pl-cover{width:44px;height:44px;border-radius:8px;object-fit:cover;flex:none;background:rgba(0,0,0,.35);display:grid;place-items:center;color:var(--muted);font-size:1.2rem}
.group.icons .pl-cover+.grow{margin-left:0}
.loader{width:18px;height:18px;border:2px solid rgba(255,255,255,.18);border-top-color:var(--accent);border-radius:50%;animation:rot .8s linear infinite}

.lib-hero{text-align:center;padding:18px 10px 6px}
.lib-num{font-size:3.2rem;font-weight:900;line-height:1;color:var(--text)}
.lib-sub{color:var(--muted);margin-top:6px;font-size:.92rem}
.profile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:22px 10px 8px;text-align:center}
.avatar{width:84px;height:84px;border-radius:50%;object-fit:cover;background:linear-gradient(135deg,#ffa03c,#ff3878);display:grid;place-items:center;font-size:2.2rem;font-weight:800;color:#fff}
.profile .name{font-size:1.35rem;font-weight:800}
.badge{display:inline-flex;align-items:center;gap:6px;padding:.25em .8em;border-radius:99px;font-size:.82rem;font-weight:600;background:rgba(30,215,96,.14);color:var(--accent)}
.badge.free{background:rgba(255,176,32,.14);color:var(--warn)}
.welcome{text-align:center;padding:18px 8px 4px}
.welcome .big-ic{width:72px;height:72px;border-radius:20px;margin:0 auto 12px;display:block;box-shadow:0 10px 30px -10px var(--accent2)}
.welcome h3{margin:0 0 6px;font-size:1.35rem}
.welcome p{margin:0;color:var(--muted);line-height:1.45}
.steps{counter-reset:s;margin:0;padding:0;list-style:none}
.steps li{counter-increment:s;display:flex;gap:12px;padding:12px 14px;line-height:1.45;font-size:.93rem;position:relative}
.steps li+li::before{content:'';position:absolute;top:0;left:52px;right:0;height:1px;background:var(--line)}
.steps li::after{content:counter(s);order:-1;flex:none;width:26px;height:26px;border-radius:50%;background:rgba(30,215,96,.16);color:var(--accent);font-weight:800;display:grid;place-items:center;font-size:.85rem}
.full{width:100%;margin-top:14px}
.warn{background:rgba(255,176,32,.1);border:1px solid rgba(255,176,32,.35);color:var(--warn);border-radius:14px;padding:10px 12px;font-size:.88rem;margin-top:12px}
.notice{background:var(--cell);border-radius:14px;padding:16px;margin-top:12px;text-align:center}
.notice p{margin:0 0 12px;color:var(--muted)}

/* iOS-Hinweisfenster */
.alert{background:rgba(var(--surf),.97);width:min(300px,calc(100vw - 48px));text-align:center;box-shadow:0 30px 60px -10px #000;overflow:hidden}
.alert[open]{animation:alertIn .22s ease}
@keyframes alertIn{from{opacity:0;transform:scale(1.12)}}
.alert p{margin:0;padding:20px 18px 6px;white-space:pre-line;line-height:1.4;font-size:.95rem}
.alert input{width:calc(100% - 32px);margin:10px 16px 4px;text-align:center}
.alert-btns{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:16px}
.alert-btns button{background:none;border-radius:0;color:var(--accent);padding:14px 10px;font-weight:700;font-size:1rem;transform:none!important;white-space:normal;line-height:1.25}
/* Linker Knopf (Abbrechen bzw. zweite Wahl) weiß, rechter (Hauptaktion) grün bzw. rot – so sind beide gut zu unterscheiden */
.alert-btns button:first-child{font-weight:500;color:var(--text);border-right:1px solid var(--line)}
.alert-btns button.danger{color:var(--danger)}

/* Hinweis liegt als Popover in der obersten Ebene – auch über geöffneten Menüs */
#toast{position:fixed;inset:auto;margin:0;color:var(--text);overflow:visible;left:50%;top:calc(var(--sat) + 12px);bottom:auto;transform:translateX(-50%) translateY(-30px);background:rgba(var(--surf),.96);border:1px solid var(--line);
  padding:12px 18px;border-radius:16px;width:max-content;max-width:calc(100vw - 32px);z-index:99;box-shadow:0 14px 40px rgba(0,0,0,.6);
  opacity:0;visibility:hidden;line-height:1.4;text-align:center;display:flex;align-items:center;justify-content:center;gap:12px}
#toast .mini{flex:none;padding:.5em .9em;border-radius:99px;font-size:.88rem}
#toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible}
/* Wegwischen nach oben (wie beim iPhone): der Hinweis folgt dem Finger (translate), danach fliegt er weg */
#toast{touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
#toast{transition:transform .35s cubic-bezier(.3,1.3,.5,1),opacity .25s,visibility .25s,translate .3s ease}
#embedWrap{position:fixed;left:0;bottom:0;width:320px;height:152px;opacity:0;pointer-events:none;z-index:-1}

/* ---------- Tipps ---------- */
.hintbox{display:flex;flex-direction:column;align-items:center;gap:6px;margin:14px auto 0;max-width:520px}
.hintbox .hint-item{display:flex;align-items:center;gap:8px;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.35);color:#ffd27a;
  border-radius:12px;padding:7px 12px;font-size:.92rem;font-weight:600;animation:pop .35s ease}
.hintbox .hint-item .ic{width:1.05em;height:1.05em}
.hintbox img{width:96px;height:96px;border-radius:12px;object-fit:cover;filter:blur(9px) saturate(1.2);animation:pop .35s ease}

/* ---------- Lobby ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chip-btn{color:var(--text);border:1px solid var(--line);border-radius:99px;padding:.5em 1em;font-weight:600}
.chip-btn.on{color:#06150b;border-color:transparent}
.scorebar{margin-top:16px;padding:12px 16px;display:flex;gap:8px;overflow-x:auto;scrollbar-width:none}
.scorebar::-webkit-scrollbar{display:none}
.scorebar .sc{cursor:pointer;transition:transform .1s,background .15s}
.scorebar .sc:active{transform:scale(.95)}
@media (hover:hover){.scorebar .sc:hover{background:rgba(255,255,255,.12)}}
.scorebar .sc{flex:none;display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.06);border-radius:99px;padding:.4em .9em;font-weight:600;white-space:nowrap}
.scorebar .sc b{color:var(--accent);font-variant-numeric:tabular-nums}
.scorebar .sc.code{background:var(--accent);color:#06150b;letter-spacing:.12em}
.scorebar .sc.won{background:var(--accent2);color:#fff}
.scorebar .sc.off{opacity:.45}
.pl-row .rank{width:30px;text-align:center;font-size:1.1rem;flex:none}
.on-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--accent);box-shadow:0 0 6px var(--accent);vertical-align:middle}
.pl-row .marks{font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.pl-row.won{background:color-mix(in srgb,var(--accent2) 18%,transparent)}
.lobby-code{text-align:center;font-size:2.4rem;font-weight:900;letter-spacing:.22em;margin:6px 0 0}
.round-live{display:flex;align-items:center;gap:12px;padding:14px 16px;margin-bottom:14px}
.round-live .rl-ic{font-size:1.9rem;line-height:1;flex:none}
.round-live .rl-k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.round-live .rl-n{font-weight:800;font-size:1.1rem}
.round-live .rl-a{margin-top:3px;font-weight:600;color:var(--accent)}
.join-box{padding:22px 18px;text-align:center}
.join-box h3{margin:6px 0 4px;font-size:1.35rem}
/* Kartenauswahl beim Beitreten: kleine Vorschau nur mit Symbolen */
/* Markieren nach Regeln: falsches Feld wackelt kurz */
.bcell.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.mark-help{display:none;text-align:center;margin-top:8px}
body.lobby-mode .mark-help{display:block}
.tv-hint{text-align:center;margin-top:26px;opacity:.7}
.tv-hint a{color:var(--muted)}
/* Statistik am Spielende */
.end-stats{display:flex;flex-direction:column;gap:6px;margin-top:14px;font-size:1rem}
.end-stats div{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:14px;padding:.5em .9em}
/* Fernseher-Ansicht: großer Bildschirm, alles live, nichts zum Bedienen */
body.tv-mode>header,body.tv-mode>main{display:none}
#tvApp{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);min-height:100dvh}
#tvApp.hidden{display:none}
.tv-top{display:flex;justify-content:space-between;align-items:center}
.tv-top .logo img{min-width:32px;min-height:32px}
.tv-top .pill{padding:.4em 1em}
.tv-round{text-align:center;display:flex;flex-direction:column;justify-content:center}
.tv-k{color:var(--muted);text-transform:uppercase;letter-spacing:.12em;font-weight:700}
.tv-cat{font-weight:900;line-height:1.1;font-family:Outfit,system-ui,sans-serif}
.tv-cat .tv-ic{display:block}
.tv-answer{font-weight:900;color:var(--accent);font-family:Outfit,system-ui,sans-serif}
.tv-cover{width:16vw;height:16vw;border-radius:1.5vw;object-fit:cover;margin:0 auto;box-shadow:0 2vw 4vw -1vw #000}
.tv-idle{font-weight:800;color:var(--muted)}
.tv-side{display:flex;flex-direction:column;align-items:stretch}
.tv-qr{margin:0 auto;padding:1vw}
.tv-join{text-align:center;color:var(--muted);overflow-wrap:anywhere}
#tvCode{margin:0;text-align:center}
.tv-players{display:flex;flex-direction:column;gap:.5vw}
.tv-players .tvp{display:flex;justify-content:space-between;gap:1vw;padding:.4vw .2vw;border-bottom:1px solid var(--line)}
.tv-players .tvp:last-child{border-bottom:0}
.tv-players .tvp b{color:var(--accent)}
.tv-players .tvp .g{color:var(--muted);font-weight:600;text-align:right}
.tv-players .tv-h{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-weight:700}
/* Spielende-Bildschirm */
.win.end{z-index:160}
.end-box{max-width:460px;width:100%;min-width:0}
.end-word{font-size:clamp(3rem,15vw,5.5rem)!important}
.end-winner{font-size:1.5rem;font-weight:800;margin:6px 0 12px}
.end-btns{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.end-btns button{width:100%;white-space:normal}
/* Neue Partie: Karte behalten oder neu wählen */
.repick{padding:14px 16px;margin-bottom:12px;text-align:center}
.repick .rp-h{font-weight:800;margin-bottom:2px}
.pick-keep{width:100%;margin-bottom:10px}
/* Jahr immer klein neben dem Interpreten */
.rv-year{opacity:.75;font-weight:600;font-size:.9em;white-space:nowrap}
/* Mehrere Bingo-Rufe gleichzeitig */
.check-multi{text-align:center;font-weight:800;margin:12px 0 4px;color:var(--warn)}
.check-name{font-weight:800;font-size:1.05rem;margin:16px 0 0;padding-top:12px;border-top:1px solid var(--line)}
/* Kartenwahl: eine Karte groß, „Andere Karte zeigen“ würfelt neu */
.pick-box{margin-top:12px;text-align:center}
.pick-box .bgrid{margin:10px 0 14px}
.pick-box .bcell{cursor:default}
.pick-box .bcell:active{transform:none}
.pick-box .bgrid{animation:pop .3s ease}
.bgrid.mini{gap:3px;margin:0;width:100%}
.bgrid.mini .bcell{border-radius:6px;padding:1px;font-size:.7rem;cursor:inherit}
.bgrid.mini .bcell span:not(.bi){display:none}
.bgrid.mini .bcell .bi{font-size:1.15em}
/* Partie-Stand und Tipps */
.match-live{padding:10px 14px;margin-bottom:12px;font-size:.9rem;display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.match-live b{color:var(--accent)}
.match-tbl{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0}
.match-tbl span{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:99px;padding:.3em .8em;font-weight:600;white-space:nowrap}
.match-tbl span.lead{background:var(--accent);color:#06150b;border-color:transparent}
.match-card{text-align:center;padding:12px 14px;margin:6px 0 12px;border-radius:18px;background:rgba(255,255,255,.06);border:1px solid var(--g-brd)}
.match-card .mc-h{font-weight:800;font-size:1.05rem}
.guess-live{margin:-4px 0 12px;display:flex;flex-wrap:wrap;gap:6px;justify-content:center;font-size:.85rem}
.guess-live span{background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:12px;padding:.35em .7em}
.guess-live span.ok{border-color:var(--accent)}
.guess-live b{color:var(--text)}
.guess-live span.ok b{color:var(--accent)}
.guess-list{margin-top:12px;text-align:left;background:rgba(255,255,255,.06);border:1px solid var(--g-brd);border-radius:18px;padding:10px 14px}
.guess-list .gl-h{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.guess-list div{padding:3px 0;border-top:1px solid rgba(255,255,255,.06)}
.guess-list div:first-of-type{border-top:0}
.join-box input{width:100%;margin:16px 0 12px;font-size:1.1rem;padding:.8em 1em;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.07);color:var(--text);text-align:center}

/* ---------- Bingo ---------- */
.qr-box{background:#fff;border-radius:20px;padding:16px;width:min(300px,78vw);margin:16px auto 8px;text-align:center;color:#333}
.qr-box svg,.qr-box img{width:100%;height:auto;display:block}
.qr-box .small{color:#555;margin-top:6px}
/* minmax(0,1fr): Spalten bleiben gleich breit, auch wenn ein Feld einen langen Namen hat (sonst ragt die Karte über den Rand) */
.bgrid{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:6px;margin:12px 0}
.bgrid>.bcell{min-width:0}
.bcell{--c:#888;aspect-ratio:1;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  background:color-mix(in srgb,var(--c) 26%,rgba(255,255,255,.02));border:2px solid color-mix(in srgb,var(--c) 80%,transparent);
  padding:4px;font-weight:700;font-size:clamp(.62rem,2.9vw,.9rem);line-height:1.12;overflow-wrap:anywhere;hyphens:auto;color:var(--text);
  position:relative;transition:background .2s,transform .1s;cursor:pointer;-webkit-user-select:none;user-select:none}
.bcell .bi{font-size:1.5em;line-height:1}
.bgrid.n5 .bcell{font-size:clamp(.5rem,2.3vw,.8rem);border-radius:11px}
.bgrid.n5 .bcell .bi{font-size:1.35em}
.bgrid.n3 .bcell{font-size:clamp(.8rem,3.8vw,1.05rem)}
.bcell:active{transform:scale(.95)}
.bcell.on{background:var(--c);color:#0b0816;border-color:transparent;box-shadow:0 6px 18px -8px var(--c)}
.bcell.on::after{content:'✓';position:absolute;top:4px;right:7px;font-size:.95em;font-weight:900}
.bcell.free{background:linear-gradient(135deg,#ffa03c,#ff3878)}
/* Felder der aktuellen Kategorie leuchten, die anderen treten zurück – so sieht man sofort, was man abhaken darf */
.bgrid.has-hot .bcell:not(.hot):not(.on):not(.free){opacity:.38;filter:saturate(.55)}
.bcell.free{cursor:default}
/* Leuchtende Felder: fester Ring + pulsierender Schein auf eigener Ebene (nur Transparenz – rechnet der Grafikchip ohne Neuzeichnen) */
.bcell.hot:not(.on){box-shadow:0 0 0 3px var(--c)}
.bcell.hot:not(.on)::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 22px -2px var(--c);animation:hotGlow 1.6s ease-in-out infinite;will-change:opacity}
@keyframes hotGlow{50%{opacity:.25}}
.bcell.line{box-shadow:0 0 0 2.5px #fff inset}
.cat-chip{display:inline-flex;align-items:center;gap:6px;padding:.38em .85em;border-radius:99px;font-weight:600;font-size:.86rem;white-space:nowrap;
  background:color-mix(in srgb,var(--c) 20%,transparent);border:1px solid color-mix(in srgb,var(--c) 55%,transparent)}
.seg{display:flex;gap:4px;border-radius:14px;padding:4px;margin-top:8px}
.seg button{flex:1;flex-direction:column;gap:1px;background:none;color:var(--text);padding:.6em .4em;border-radius:11px;font-weight:700;font-size:1rem}
.seg button small{font-size:.72rem;font-weight:500;color:var(--muted)}
/* Längere Texte (z. B. Französisch) dürfen umbrechen statt über den Rand zu laufen */
.seg button{min-width:0;white-space:normal;text-align:center;line-height:1.2}
.seg button small{line-height:1.2;overflow-wrap:anywhere}
.seg button.on{background:rgba(255,255,255,.16)}
.check-res{text-align:center;margin:10px 0 4px;font-weight:800;font-size:1.15rem}
.check-res.won{color:var(--accent)}
.check-res.no{color:var(--muted);font-weight:600;font-size:.98rem}
.chip-scroll{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:8px 0}
/* Kategorien beim Bingo-Einrichten: antippbar, ausgeschaltete blass und durchgestrichen */
button.cat-chip{color:var(--text)}
button.cat-chip.off{background:transparent;border-color:var(--line);color:var(--muted);opacity:.6;text-decoration:line-through}
details>summary.cell{list-style:none}
details>summary.cell::-webkit-details-marker{display:none}
details[open]>summary .chev{transform:rotate(90deg)}
details>summary .chev{transition:transform .2s}

/* Karten-Ansicht für Mitspieler */
body.card-mode>header,body.card-mode>main{display:none}
#cardApp{max-width:560px;margin:0 auto;padding:calc(var(--sat) + 14px) 14px calc(30px + var(--sab))}
#cardApp .card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
#cardApp .card-head .pill:has(#cardNo:empty){display:none}
/* Sprachumschalter für Mitspieler (DE | EN) */
.card-head-r{display:flex;align-items:center;gap:8px}
.lang-pill{position:relative;display:inline-flex;align-items:center;gap:4px;background:var(--g-bg);color:var(--text);border:1px solid var(--g-brd);box-shadow:var(--g-hi);
  border-radius:99px;padding:.35em .8em;font-size:.8rem;font-weight:700;cursor:pointer}
/* Die echte Auswahlliste liegt unsichtbar darüber – Antippen öffnet die Liste des Handys */
.lang-pill select{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
#cardApp .card-wrap{padding:16px}
.mycard-btn{width:100%;margin-top:16px;padding:.95em;border-radius:20px;font-size:1rem}
#cardApp p{line-height:1.45}
.win{position:fixed;inset:0;z-index:150;display:grid;place-items:center;text-align:center;padding:20px}
.win .big-word{font-size:clamp(3.5rem,18vw,7rem);font-weight:900;background:linear-gradient(135deg,#ffc94d,#ffa03c 40%,#ff3878);-webkit-background-clip:text;background-clip:text;color:transparent;animation:land .6s cubic-bezier(.3,1.6,.5,1)}
.win p{font-size:1.15rem;margin:6px 0 20px}

/* Tipp-Zettel in Handschrift */
.guess-wrap{padding:14px 16px 16px;margin-bottom:14px}
.guess-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-bottom:8px}
.guess-input{display:block;width:100%;resize:none;border:0;border-radius:14px;padding:6px 14px 4px;margin-bottom:12px;
  font-family:Caveat,"Bradley Hand","Segoe Print",cursive;font-size:2rem;font-weight:700;line-height:40px;color:#1f3a93;
  background:#fffdf3 repeating-linear-gradient(transparent 0 39px,#c9d6f2 39px 40px);background-position:0 6px;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.12),0 6px 16px -8px rgba(0,0,0,.5)}
.guess-input::placeholder{color:#9aa6c4}
/* Tipp: Eingabe (mit ✕ zum Löschen) und „Groß zeigen“ nebeneinander */
.guess-field{position:relative;flex:1;min-width:0;display:flex}
.guess-field .guess-input{padding-right:46px}
.guess-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:32px;height:32px;padding:0;border-radius:50%;
  background:rgba(31,58,147,.12);color:#1f3a93;font-size:.95rem;font-weight:800;box-shadow:none}
.guess-clear:active{transform:translateY(-50%) scale(.9)}
.guess-field:has(.guess-input:placeholder-shown) .guess-clear{display:none}
/* „Markierungen löschen“ als kleiner Knopf */
.chip-btn.force{color:#ffcf7a;border-color:rgba(255,176,32,.45)}
.card-clear{font-size:.82rem;padding:.45em .85em;color:#ffb4b4;border-color:rgba(255,120,120,.35)}
.card-clear .ic{width:1em;height:1em}
/* Nur Papierkorb, rund */
.card-clear.icon-only{width:38px;height:38px;padding:0;border-radius:50%;justify-content:center}
.card-clear.icon-only .ic{width:1.15em;height:1.15em}
.card-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
/* Bingo-Übersicht: Lobby-Code oben */
.lobby-hero{text-align:center;padding:16px 14px 14px;margin:6px 0 12px;border-radius:20px;
  background:linear-gradient(135deg,color-mix(in srgb,#ffa03c 22%,transparent),color-mix(in srgb,#ff3878 20%,transparent));
  border:1px solid var(--g-brd);box-shadow:var(--g-hi)}
.lobby-hero .lh-k{font-size:.74rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.lobby-hero .lobby-code{margin:2px 0 0}
.lobby-hero .lh-sub{font-size:.85rem;color:var(--muted);margin-top:2px}
/* Tipp: Eingabe und „Groß zeigen“ nebeneinander */
.guess-row{display:flex;gap:10px;align-items:stretch}
.guess-row .guess-input{flex:1;min-width:0;margin:0;height:58px;font-size:1.75rem;line-height:40px;padding:8px 12px 0;overflow:hidden;background-position:0 9px}
.guess-big{flex:none;width:74px;flex-direction:column;gap:3px;padding:6px 4px;border-radius:14px;font-size:.74rem;line-height:1.1;white-space:normal;
  background:var(--accent2);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 8px 20px -10px var(--accent2)}
.guess-big .ic{width:22px;height:22px}
.guess-state{font-weight:600;font-size:.78rem;margin-left:6px;color:var(--muted)}
.guess-state.ok{color:var(--accent)}
.guess-state.wait{color:var(--warn)}
.guess-input:focus{outline:3px solid var(--accent2)}
/* Lobby am Handy: kompakt, damit Karte und Tipp ohne Scrollen auf den Bildschirm passen.
   Die anderen sehen die Tipps ohnehin live – „Groß zeigen“ gibt es als kleinen Link. */
body.lobby-mode .guess-wrap{padding:10px 14px 12px;margin-bottom:10px}
body.lobby-mode .guess-head{margin-bottom:6px}
body.lobby-mode .card-help{display:none}
body.lobby-mode .round-live{padding:10px 14px;margin-bottom:10px}
body.lobby-mode .round-live .rl-ic{font-size:1.5rem}
body.lobby-mode .match-live{padding:8px 12px;margin-bottom:10px}
body.lobby-mode #cardApp .card-wrap{padding:12px}
body.lobby-mode #cardApp .card-head{margin-bottom:10px}
.guess-show{width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent}
.guess-show[open]{display:grid;place-items:center;animation:pop .3s ease}
.guess-show::backdrop{background:rgba(var(--deep),.85)}
.gs-paper{width:min(94vw,1100px);height:min(86dvh,760px);border-radius:18px;padding:28px 26px;display:flex;flex-direction:column;align-items:center;
  background:#fffdf3 repeating-linear-gradient(transparent 0 47px,#c9d6f2 47px 48px);box-shadow:0 30px 80px rgba(0,0,0,.6);transform:rotate(-1.5deg);cursor:pointer}
.gs-label{font-family:Outfit,sans-serif;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:#d04a7a;font-size:.85rem}
.gs-text{flex:1;width:100%;display:flex;align-items:center;justify-content:center;text-align:center;overflow-wrap:anywhere;
  font-family:Caveat,"Bradley Hand","Segoe Print",cursive;font-weight:700;line-height:1.05;color:#1f3a93}
.gs-hint{font-family:Outfit,sans-serif;color:#8a8fa8;font-size:.8rem}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:-20px;width:9px;height:14px;border-radius:2px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(720deg)}}

/* ---------- Glas-Look (angelehnt an iOS Liquid Glass) ---------- */
:root{
  --g-bg:rgba(255,255,255,.075);--g-brd:rgba(255,255,255,.17);
  --g-hi:inset 0 1px 0 rgba(255,255,255,.24),inset 0 -1px 0 rgba(0,0,0,.18);
  --g-blur:blur(26px) saturate(175%);
  --g-sheen:linear-gradient(140deg,rgba(255,255,255,.17),rgba(255,255,255,0) 34%,rgba(255,255,255,0) 68%,rgba(255,255,255,.06));
}
/* Unschärfe + Glanz liegen auf Pseudo-Elementen: so bleibt die fixe Bedienleiste in der Karte am Bildschirm verankert */
.glass{background:transparent;border:1px solid var(--g-brd);backdrop-filter:none;-webkit-backdrop-filter:none;position:relative;isolation:isolate;
  box-shadow:var(--g-hi),0 30px 60px -30px rgba(0,0,0,.65)}
.glass::before,.glass::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none}
.glass::before{background:var(--g-bg);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur)}
.glass::after{background:var(--g-sheen)}
/* Unschärfe nur auf großen Flächen – kleine Elemente liegen schon auf Glas (schont das iPhone beim Scrollen) */
/* Kopfzeilen-Knöpfe ohne Milchglas: Safari (v. a. iPad) zeichnet Schrift über den animierten Hintergrund sonst unscharf */
.hbtn{backdrop-filter:none;-webkit-backdrop-filter:none}
.hbtn,.pill,button.ghost,.chip-btn,.cat-chip,.scorebar .sc{box-shadow:var(--g-hi)}
.hbtn{background:rgba(var(--surf),.82) var(--g-sheen);border-color:var(--g-brd);border-radius:99px}
.logo span{-webkit-font-smoothing:antialiased}
.pill{background:var(--g-bg);border-color:var(--g-brd)}
button.ghost{background:rgba(255,255,255,.09) var(--g-sheen);border-color:var(--g-brd)}
.chip-btn{background:rgba(255,255,255,.08) var(--g-sheen);border-color:var(--g-brd)}
.chip-btn.on{background:var(--accent) linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 60%)}
/* Farbige Knöpfe mit Lichtkante oben */
button.big,button.mini,.seg button.on{background-image:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0) 58%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(0,0,0,.15),0 12px 30px -12px var(--accent)}
button.pink.big{box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 12px 30px -12px var(--accent2)}
.cat-badge{
  box-shadow:var(--g-hi),0 14px 34px -16px var(--cat);background-image:var(--g-sheen),linear-gradient(135deg,color-mix(in srgb,var(--cat) 24%,transparent),rgba(255,255,255,.03))}
.cat-icon{background-image:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,0) 60%);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 24px -8px var(--cat)}
.rv-answer,.rv-song,.award{box-shadow:var(--g-hi)}
.rv-answer{background-image:var(--g-sheen),linear-gradient(135deg,color-mix(in srgb,var(--cat) 25%,transparent),rgba(255,255,255,.03))}
.rv-song,.award{background:rgba(255,255,255,.06) var(--g-sheen);border-color:var(--g-brd)}
/* Menüs als Glasfläche */
dialog::backdrop{background:rgba(var(--deep),.42)}
.sheet{background:rgba(var(--surf),.66);backdrop-filter:blur(36px) saturate(180%);-webkit-backdrop-filter:blur(36px) saturate(180%);
  border-color:var(--g-brd);box-shadow:var(--g-hi),0 40px 80px -20px #000}
.sheet-head{background:transparent;border-bottom-color:rgba(255,255,255,.08)}
.group{background:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.seg{background:rgba(255,255,255,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.1)}
.seg button.on{background-color:rgba(255,255,255,.2);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 3px 10px rgba(0,0,0,.3)}
.alert,#toast{background:rgba(var(--surf),.62);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);
  border:1px solid var(--g-brd);box-shadow:var(--g-hi),0 20px 50px -10px rgba(0,0,0,.7)}
.alert{border-radius:22px}
.bcell{box-shadow:inset 0 1px 0 rgba(255,255,255,.14);background-image:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,0) 50%)}
.bcell.on,.bcell.free{background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 60%)}
.qr-box{box-shadow:0 20px 50px -15px rgba(0,0,0,.6),inset 0 1px 0 #fff}

/* ---------- Schrift: Systemschrift für Bedienung, Outfit nur für große Überschriften ---------- */
.logo,.cat-name,.cat-kicker,.rv-a,.rv-title,.lib-num,.disc-num,.win .big-word,.welcome h3,.profile .name,.pl-row .score,.check-res,
button.big{font-family:Outfit,-apple-system,system-ui,sans-serif;letter-spacing:0}

/* ---------- Auflösung: Platte dreht sich um und zeigt das Cover ---------- */
.disc-wrap{perspective:1200px;transition:margin .5s}
.flipper{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.25,1.3,.4,1)}
.disc-wrap.flipped .flipper{transform:rotateY(180deg)}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.face.back{transform:rotateY(180deg)}
.disc-cover{position:absolute;inset:6%;border-radius:24px;overflow:hidden;display:grid;place-items:center;font-size:5rem;color:#fff;
  background:linear-gradient(135deg,var(--cat),var(--accent2));box-shadow:0 28px 60px -18px rgba(0,0,0,.85),0 0 0 1px rgba(255,255,255,.12)}
.disc-cover img{width:100%;height:100%;object-fit:cover;display:block}
.disc-cover::after{content:'';position:absolute;inset:0;background:linear-gradient(140deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%);pointer-events:none}
.disc-wrap.flipped{margin-bottom:6px}

/* ---------- Platte antippen = Play/Pause ---------- */
.disc-wrap.tappable{cursor:pointer}
.disc-state{position:absolute;left:50%;top:50%;width:68px;height:68px;margin:-34px 0 0 -34px;border-radius:50%;display:grid;place-items:center;z-index:2;
  background:rgba(var(--surf),.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--g-brd);box-shadow:var(--g-hi),0 10px 30px -8px rgba(0,0,0,.6);
  color:#fff;opacity:0;transform:scale(.8);transition:opacity .25s,transform .25s;pointer-events:none}
.disc-state .ic{width:30px;height:30px}
.disc-wrap.paused .disc-state{opacity:1;transform:scale(1)}
/* Nach der Auflösung: Symbol nur kurz zeigen, dann ausblenden – das Cover bleibt sichtbar, Antippen spielt trotzdem weiter */
.disc-wrap.flipped.paused:not(.peek) .disc-state{opacity:0;transform:scale(.9);transition:opacity .6s,transform .6s}
.disc-wrap.tapped .disc-state{animation:tapFlash .7s ease}
@keyframes tapFlash{0%{opacity:1;transform:scale(1.3)}60%{opacity:1;transform:scale(1)}}
.disc-wrap.paused:not(.counting):not(.flipped) .disc-num{opacity:0}
.disc-wrap:active .flipper{transform:scale(.97)}
.disc-wrap.flipped:active .flipper{transform:rotateY(180deg) scale(.97)}
.action-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:-8px 0 18px}
.action-row:empty{display:none}
.pill-btn{background:rgba(255,255,255,.08) var(--g-sheen);border:1px solid var(--g-brd);box-shadow:var(--g-hi);color:var(--text);
  font-weight:600;font-size:.88rem;padding:.6em 1.05em;border-radius:99px;gap:.45em}
.pill-btn .ic{width:1.1em;height:1.1em}
/* Themen-Auswahl */
.theme-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:8px}
.theme-pick{flex-direction:column;gap:6px;background:none;color:var(--muted);font-weight:600;font-size:.78rem;padding:6px 2px;border-radius:14px;
  min-width:0;white-space:normal;hyphens:auto;overflow-wrap:anywhere;line-height:1.15;text-align:center}
.theme-pick i{width:46px;height:46px;border-radius:50%;display:block;border:2px solid transparent;box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
.theme-pick.on{color:var(--text)}
.theme-pick.on i{border-color:var(--text);box-shadow:0 0 0 3px rgba(255,255,255,.12)}

/* ---------- Handy ---------- */
@media (max-width:640px){
  header{padding:calc(var(--sat) + 16px) 14px 12px}
  .logo{font-size:1.18rem;gap:9px}.logo img{width:34px;height:34px;border-radius:9px}
  .hbtn .lbl{display:none}
  .hbtn{width:44px;height:44px;padding:0;border-radius:50%}
  .hbtn .ic{width:21px;height:21px}
  main{padding:0 12px calc(160px + var(--sab))}
  .stage{padding:16px 14px 18px}
  .round-meta{margin-bottom:14px}
  .cat-badge{padding:10px 18px 10px 10px;gap:11px;border-radius:20px}
  .cat-icon{width:44px;height:44px;font-size:1.35rem;border-radius:13px}
  .disc-wrap{margin:18px auto 6px;width:min(250px,64vw)}
  /* Bedienleiste unten als schwebende Glas-Kapsel */
  .controls{position:fixed;left:10px;right:10px;bottom:calc(max(var(--sab), 6px) + 6px);z-index:20;padding:8px;gap:6px;border-radius:32px;
    background:rgba(var(--surf),.5);backdrop-filter:var(--g-blur);-webkit-backdrop-filter:var(--g-blur);
    border:1px solid var(--g-brd);box-shadow:var(--g-hi),0 20px 44px -14px rgba(0,0,0,.75)}
  .controls{flex-wrap:nowrap;align-items:stretch}
  .controls .big{flex:1 1 auto;min-width:0;padding:.9em .8em;border-radius:26px;font-size:1.02rem}
  .controls .ghost{flex:0 0 auto;min-width:64px;flex-direction:column;gap:3px;padding:.55em .3em;font-size:.74rem;font-weight:600;border-radius:22px;
    background:transparent;border-color:transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .controls .ghost:active{background:rgba(255,255,255,.12)}
  .controls .ghost .ic{width:22px;height:22px}
  .volume,.hint{display:none}
  .reveal{margin:14px auto 6px}
  .rv-song{padding:12px}
  .hist{padding:2px 16px}
  /* Sheets kommen von unten wie in iOS */
  .sheet{width:100vw;max-width:100vw;height:calc(100dvh - max(var(--sat), 20px) - 24px);margin:auto 0 0;border-radius:28px 28px 0 0;border-bottom:0}
  .sheet[open]{animation:sheetUp .38s cubic-bezier(.2,.9,.3,1)}
  .grab{display:block}
  .sheet-head{padding-top:18px}
}
@keyframes sheetUp{from{transform:translateY(100%)}}
/* Sehr kleine Handys (z. B. iPhone SE 1. Gen.): Kopfzeile und Designs etwas kompakter */
@media (max-width:350px){
  header{gap:8px}
  .logo{font-size:1.02rem;gap:7px}.logo img{width:30px;height:30px}
  .hdr-r{gap:6px}
  .hbtn{width:40px;height:40px}
  .theme-pick{font-size:.68rem}.theme-pick i{width:40px;height:40px}
}
.logo span{min-width:0;overflow:hidden;text-overflow:ellipsis}
/* Lautstärke-Regler und Tastatur-Hinweise nur am PC/Laptop – auf Handy und iPad (auch mit Tastatur) ausblenden */
@media (pointer:coarse){.volume,.hint{display:none}}
html.ios .volume,html.ios .hint{display:none}

/* ---------- iPad / Tablet ---------- */
@media (min-width:641px) and (pointer:coarse){
  .hbtn{padding:.75em 1.15em;font-size:1.02rem;border-radius:16px}
  .controls .big{font-size:1.22rem;padding:1.05em 2.1em;border-radius:22px}
  .controls .ghost{padding:.95em 1.4em}
  .pill-btn{font-size:1rem;padding:.65em 1.15em}
  .cell{min-height:52px}
  .bcell{font-size:clamp(.8rem,1.9vw,1.1rem)}
  #cardApp{max-width:680px}
}
/* iPad hochkant: die Höhe nutzen – größere Platte und Kategorie */
@media (min-width:641px) and (min-height:900px){
  main{max-width:860px}
  .stage{padding:30px 34px 34px}
  .disc-wrap{margin:30px auto 26px}
  .cat-icon{width:66px;height:66px;font-size:2rem;border-radius:19px}
  .sheet{width:min(660px,calc(100vw - 48px));height:min(940px,calc(100dvh - 90px))}
}
/* iPad quer: Platte an die Höhe anpassen, damit die Knöpfe ohne Scrollen sichtbar bleiben */
@media (min-width:900px) and (max-height:899px) and (pointer:coarse){
  header{padding-top:calc(var(--sat) + 10px);padding-bottom:10px}
  .disc-wrap{margin:14px auto 14px}
  .round-meta{margin-bottom:10px}
  .sheet{height:calc(100dvh - 40px)}
}
/* ---------- Alles auf einen Bildschirm ---------- */
/* Eigene Karte und Mitspieler-Leiste nebeneinander statt untereinander */
.below{display:flex;gap:12px;margin-top:14px;align-items:stretch}
.below>.hidden{display:none}
.below .mycard-btn{margin:0;width:auto;flex:none;padding:.8em 1.3em}
.below .scorebar{margin:0;flex:1;min-width:0;padding:10px 14px}
.below .mycard-btn:only-child,.below .mycard-btn:has(+ .scorebar.hidden){flex:1}
/* Platte richtet sich nach der Höhe: der Rest der Spielfläche (Kopf, Kategorie, Knöpfe, Leiste) braucht ca. 640 px */
.disc-wrap{width:min(62vw,clamp(140px,calc(100dvh - 640px),420px))}
/* Niedrige Bildschirme (Laptop): enger, Tastatur-Hinweis weg */
@media (min-width:641px) and (max-height:900px){
  header{padding-top:calc(var(--sat) + 10px);padding-bottom:10px}
  .stage{padding:14px 22px 16px}
  .round-meta{margin-bottom:8px}
  .cat-badge{padding:8px 18px 8px 8px}
  .cat-icon{width:44px;height:44px;font-size:1.35rem}
  .cat-name{font-size:clamp(1.3rem,3.4vw,2rem)}
  .disc-wrap{margin:12px auto 12px;width:min(62vw,clamp(140px,calc(100dvh - 500px),400px))}
  .hint{display:none}
  .volume{margin-top:8px}
}
/* Auflösung auf breiten Bildschirmen: Platte links, Lösung rechts – so passt alles ohne Scrollen */
@media (min-width:900px){
  .stage.revealed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);column-gap:28px;align-items:center;
    grid-template-areas:"meta meta" "cat cat" "hints hints" "disc reveal" "act reveal" "ctrl ctrl" "vol vol" "hint hint"}
  .stage.revealed>.round-meta{grid-area:meta}
  .stage.revealed>.cat{grid-area:cat}
  .stage.revealed>.hintbox{grid-area:hints}
  .stage.revealed>.disc-wrap{grid-area:disc;width:min(100%,clamp(150px,calc(100dvh - 560px),340px));margin:14px auto 8px}
  .stage.revealed>.action-row{grid-area:act;margin-top:0}
  .stage.revealed>.reveal{grid-area:reveal;margin:14px 0 8px;max-width:none;width:100%}
  .stage.revealed>.controls{grid-area:ctrl;margin-top:10px}
  .stage.revealed>.volume{grid-area:vol}
  .stage.revealed>.hint{grid-area:hint}
}
/* Schmal/hochkant (iPad hochkant, kleine Fenster): Platte bei der Auflösung klein, Lösung darunter */
@media (min-width:641px) and (max-width:899px){
  .stage.revealed .disc-wrap{width:min(50vw,clamp(170px,calc(100dvh - 760px),300px));margin:12px auto 10px}
  .stage.revealed .reveal{margin:10px auto 10px}
}
/* Kompakte Auflösung auf niedrigen Bildschirmen: Album/Datum und Jahres-Chips weg (die Antwort steht ja oben) */
@media (max-height:900px),(max-width:640px){
  .stage.revealed .rv-meta{display:none}
  .stage.revealed .rv-q{display:none}   /* die Frage steht schon oben in der Kategorie */
  .stage.revealed .rv-answer{padding:12px 16px;margin-bottom:8px}
  .stage.revealed .rv-song{padding:10px 14px}
  .stage.revealed .guess-list{margin-top:8px;padding:8px 12px}
}
/* Handy: Bedienleiste ist fest unten */
@media (max-width:640px){
  .below{gap:8px;margin-top:10px}
  .below .mycard-btn{padding:.7em .95em;border-radius:18px;font-size:.92rem}
  .below .mycard-btn .lg{display:none}
  .below .scorebar{padding:8px 10px}
  .disc-wrap{width:min(64vw,clamp(130px,calc(100dvh - 505px),260px))}
  /* Cover nach der Auflösung gut erkennbar (mind. 150 px), auf großen Handys bis 240 px */
  .stage.revealed .disc-wrap{width:min(60vw,clamp(150px,calc(100dvh - 620px),240px))}
  .stage.revealed .reveal{margin:12px auto 8px}
  /* Platz unter der Platte: der Countdown-Ring leuchtet etwas über den Rand – nicht in „Tipp“/„Überspringen“ hinein */
  .action-row{margin-top:12px}
  /* Nach der Auflösung („Jahr korrigieren“): kleiner Knopf unter dem Cover */
  .stage.revealed .action-row{margin-top:6px}
  .stage.revealed .action-row .pill-btn{font-size:.76rem;padding:.42em .85em}
}
/* Joker-Feld in den Logo-Farben (muss nach dem Glas-Look stehen, der background-image der Felder setzt) */
.bcell.free{background-color:#ff6a50;background-image:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0) 60%),linear-gradient(135deg,#ffa03c,#ff3878);color:#fff;border-color:transparent;box-shadow:0 6px 18px -8px #ff3878}
.bcell.free .bi{font-size:1.6em}
.bcell.free.line{box-shadow:0 0 0 2.5px #fff inset,0 6px 18px -8px #ff3878}
/* Breite Knöpfe dürfen umbrechen (lange Texte in anderen Sprachen), kleine Pillen bleiben einzeilig */
.repick button,.pick-box button,.join-box button,.win button,.notice button,button.full{white-space:normal;line-height:1.25}
/* Mitspieler auf sehr schmalen Handys: oben nur das Logo-Bild, damit Sprache und Kartennummer Platz haben */
@media (max-width:350px){#cardApp .card-head .logo span{display:none}}
/* Fernseher: nie höher als der Bildschirm (dort kann niemand scrollen). Passen nicht alle Mitspieler drauf,
   läuft die Liste langsam endlos nach oben (zwei gleiche Kopien, um eine Hälfte verschoben = nahtlos) */
#tvApp{height:100dvh;overflow:hidden}
.tv-side{min-height:0;max-height:calc(100dvh - 6vw)}
.tv-players{min-height:0;overflow:hidden}
.tv-scroll{flex:1 1 auto;min-height:0;overflow:hidden}
.tv-copy{display:flex;flex-direction:column;gap:.5vw}
.tv-players.rolling .tv-scroll{-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(transparent,#000 8%,#000 92%,transparent)}
.tv-players.rolling .tv-copy{padding-bottom:.5vw}
.tv-players.rolling .tvp:last-child{border-bottom:1px solid var(--line)}
.tv-players.rolling .tv-track{animation:tvRoll var(--d,20s) linear infinite;will-change:transform}
@keyframes tvRoll{to{transform:translateY(-50%)}}
.tv-players .tvp span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Mitspieler-Leiste: weicher Rand, wenn links/rechts noch Namen kommen (zur Seite scrollbar); sehr lange Namen gekürzt */
.scorebar{overscroll-behavior-x:contain;-webkit-user-select:none;user-select:none}
.scorebar.fade-r{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
.scorebar.fade-l{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px);mask-image:linear-gradient(90deg,transparent,#000 34px)}
.scorebar.fade-l.fade-r{-webkit-mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent);mask-image:linear-gradient(90deg,transparent,#000 34px,#000 calc(100% - 34px),transparent)}
.scorebar .sc .nm{max-width:11em;overflow:hidden;text-overflow:ellipsis}
/* Bingo-Felder bleiben quadratisch – lange Kategorien werden nach 3 (5×5: 2) Zeilen mit … gekürzt statt das Feld zu strecken */
.bcell{min-height:0}
.bcell>span:not(.bi){display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;max-width:100%}
.bgrid.n5 .bcell>span:not(.bi){-webkit-line-clamp:2;line-clamp:2}
/* Buzzer & Countdown bei den Mitspielern: fester Platz rechts in der Runden-Box */
.round-live .rl-main{flex:1;min-width:0}
.rl-buzz,.rl-timer{flex:none;width:62px;height:62px;border-radius:50%}
.rl-buzz{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;font-size:1.45rem;line-height:1;
  background:linear-gradient(135deg,#ffa03c,#ff3878);color:#fff;border:0;box-shadow:0 8px 20px -8px #ff3878,inset 0 1px 0 rgba(255,255,255,.35);transition:transform .1s,opacity .2s}
.rl-buzz small{font-size:.58rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.rl-buzz:active{transform:scale(.9)}
.rl-buzz:disabled{opacity:.55;box-shadow:none}
.rl-timer{--c:var(--accent);--p:1;position:relative;display:grid;place-items:center}
.rl-timer::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--c) calc(var(--p) * 1turn),rgba(255,255,255,.12) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px))}
.rl-timer b{font-size:1.55rem;font-weight:900;font-variant-numeric:tabular-nums}
.rl-timer.urgent::before{background:conic-gradient(var(--danger) calc(var(--p) * 1turn),rgba(255,255,255,.12) 0)}
.rl-timer.urgent b{color:var(--danger)}
/* Spielleiter: wer gebuzzert hat */
.round-meta .buzz-by{background:linear-gradient(135deg,#ffa03c,#ff3878);color:#fff;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.round-live .rl-by{display:inline-block;max-width:100%;vertical-align:bottom;text-transform:none;letter-spacing:0;font-weight:800;color:#ff8a5c;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ---------- Fernseher (4.10.1): alles passt immer auf den Bildschirm ---------- */
/* --u: 1 % der Breite, aber nie mehr, als die Höhe hergibt (16:9 → 1vw ≈ 1.78vh) */
#tvApp{--u:min(1vw,1.78vh);gap:calc(var(--u) * 3);padding:calc(var(--u) * 3);align-items:stretch;grid-template-rows:minmax(0,1fr)}
.tv-main{display:flex;flex-direction:column;min-height:0;min-width:0}
.tv-top{margin-bottom:calc(var(--u) * 1.6)}
.tv-top .logo{font-size:calc(var(--u) * 2)}
.tv-top .logo img{width:calc(var(--u) * 3);height:calc(var(--u) * 3)}
.tv-top .pill{font-size:calc(var(--u) * 1.3)}
.tv-round{flex:1;min-height:0;overflow:hidden;padding:calc(var(--u) * 3);gap:calc(var(--u) * 1.4)}
.tv-k{font-size:calc(var(--u) * 1.4)}
.tv-idle{font-size:calc(var(--u) * 3)}
.tv-cat{font-size:calc(var(--u) * 4.4);display:flex;flex-direction:column;align-items:center}
.tv-cat .tv-ic{font-size:calc(var(--u) * 5.5);margin-bottom:calc(var(--u) * .6)}
.tv-listen{font-size:calc(var(--u) * 2);color:var(--muted);font-weight:700}
.tv-tips{font-size:calc(var(--u) * 1.6);color:var(--muted);font-weight:700;min-height:1.2em}
/* Countdown: Ring wie auf den Handys */
.tv-ring{--c:var(--accent);--p:1;position:relative;width:calc(var(--u) * 20);height:calc(var(--u) * 20);margin:0 auto;display:grid;place-items:center;flex:none}
.tv-ring::before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c) calc(var(--p) * 1turn),rgba(255,255,255,.1) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - calc(var(--u) * 1.3)),#000 calc(100% - calc(var(--u) * 1.2)));mask:radial-gradient(farthest-side,transparent calc(100% - calc(var(--u) * 1.3)),#000 calc(100% - calc(var(--u) * 1.2)))}
.tv-ring b{font-size:calc(var(--u) * 8);font-weight:900;font-variant-numeric:tabular-nums;line-height:1}
.tv-ring.urgent::before{background:conic-gradient(var(--danger) calc(var(--p) * 1turn),rgba(255,255,255,.1) 0)}
.tv-ring.urgent b{color:var(--danger)}
.tv-buzz{align-self:center;max-width:100%;background:linear-gradient(135deg,#ffa03c,#ff3878);color:#fff;font-weight:900;font-size:calc(var(--u) * 2.2);
  padding:.35em 1em;border-radius:99px;box-shadow:0 1vh 3vh -1vh #ff3878;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;animation:pop .45s cubic-bezier(.3,1.4,.5,1)}
/* Countdown & Auflösung: Frage kleiner, damit Ring bzw. Lösung Platz haben */
.tv-round.ph-c .tv-cat,.tv-round.ph-r .tv-cat{font-size:calc(var(--u) * 2.6);flex-direction:row;justify-content:center;gap:.4em}
.tv-round.ph-c .tv-cat .tv-ic,.tv-round.ph-r .tv-cat .tv-ic{font-size:1em;margin:0}
/* Auflösung: Cover links, Lösung rechts */
.tv-rev{display:grid;grid-template-columns:auto minmax(0,1fr);gap:calc(var(--u) * 3);align-items:center;text-align:left;margin-top:calc(var(--u) * 1)}
.tv-round .tv-cover{width:calc(var(--u) * 24);height:calc(var(--u) * 24);border-radius:calc(var(--u) * 1.5);margin:0;object-fit:cover;box-shadow:0 2vh 5vh -1vh #000}
.tv-nocover{display:grid;place-items:center;background:linear-gradient(135deg,#ffa03c,#ff3878);font-size:calc(var(--u) * 9);color:#fff}
.tv-rev-t{min-width:0;display:flex;flex-direction:column;gap:calc(var(--u) * .8)}
.tv-answer{font-size:calc(var(--u) * 4.6);line-height:1.05;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.tv-title{font-size:calc(var(--u) * 2.4);font-weight:800;line-height:1.15;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.tv-artist{font-size:calc(var(--u) * 1.9);color:var(--muted);font-weight:600;display:flex;gap:.35em;white-space:nowrap;min-width:0}
.tv-artist span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tv-artist .rv-year{flex:none}
.tv-artist .rv-year{color:var(--warn);font-weight:800}
/* Rechte Seite: während des Spiels QR-Code kleiner → mehr Platz für Mitspieler und Tipps */
.tv-side{gap:calc(var(--u) * 1.2)}
.tv-qr{width:min(20vw,34vh,340px)}
#tvApp.playing .tv-qr{width:min(13vw,22vh,240px)}
.tv-join{font-size:calc(var(--u) * 1.15)}
#tvCode{font-size:calc(var(--u) * 4)}
#tvApp.playing #tvCode{font-size:calc(var(--u) * 3)}
.tv-players{font-size:calc(var(--u) * 1.5);padding:calc(var(--u) * 1.4)}
.tv-players .tv-h{font-size:calc(var(--u) * 1.1)}
.tv-players .tvp .g{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:55%}
/* Große Einblendung (Bingo-Ruf, Sieg, neue Partie) */
.tv-banner{position:fixed;left:50%;top:50%;translate:-50% -50%;z-index:150;width:min(80vw,140vh);text-align:center;
  padding:calc(var(--u,1vw) * 3) calc(var(--u,1vw) * 4);border-radius:calc(var(--u,1vw) * 3);font-size:calc(min(1vw,1.78vh) * 3);font-weight:800;
  background:rgba(20,16,30,.88);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:2px solid rgba(255,255,255,.14);box-shadow:0 3vh 10vh -2vh #000}
.tv-banner.pop{animation:pop .5s cubic-bezier(.3,1.4,.5,1)}
.tv-banner .tv-b-big{font-family:Outfit,system-ui,sans-serif;font-size:2.4em;font-weight:900;line-height:1.05;margin-bottom:.2em}
.tv-banner .tv-b-big b{font-weight:900;background:linear-gradient(135deg,#ffa03c,#ff3878);-webkit-background-clip:text;background-clip:text;color:transparent}
body:not(.tv-mode) .tv-banner{display:none}
/* Regeln & Karten: feste Regeln des laufenden Bingos */
.cell.rule{cursor:default}
.rule-ic{width:30px;text-align:center;font-size:1.15rem;flex:none}
.rule-v{text-align:right;flex:none;max-width:45%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cell.rule .sub{-webkit-line-clamp:4;line-clamp:4}
/* Sprung aus „Regeln & Karten“: Zeile in den Einstellungen kurz aufleuchten lassen */
.cell.flash{animation:cellFlash 1.6s ease}
@keyframes cellFlash{0%,40%{background:color-mix(in srgb,var(--accent) 22%,transparent)}}
button.cell.rule{cursor:pointer}
/* Sprachknopf in den Einstellungen: größere Tippfläche; Auswahlliste mit 16 px – sonst zoomt das iPhone beim Antippen
   in die Seite, und die Liste öffnet sich oft nicht */
.lang-pill select{font-size:16px}
.nav-lang{min-height:36px;padding:.45em .95em}
/* Suchergebnis „von Spotify“: lässt sich mit Entwickler-Apps meist nicht laden → zurückgenommen */
.cell.pl-spotify{opacity:.6}
.cell.pl-spotify .sub{-webkit-line-clamp:3;line-clamp:3}
/* Akku: Ist ein Menü oder Fenster offen, stehen Hintergrund und Platte dahinter still. Sonst muss die Milchglas-Unschärfe
   des Menüs bei drehender Platte 60× pro Sekunde neu berechnet werden – zu sehen ist dahinter ohnehin nur ein Schimmer. */
body:has(dialog[open]) .bg i,body:has(dialog[open]) .disc,
body:has(.win:not(.hidden)) .bg i,body:has(.win:not(.hidden)) .disc{animation-play-state:paused!important}
/* „Bewegung reduzieren“ (Bedienungshilfen): Fernseher-Liste läuft nicht durch – die zweite Kopie bleibt dann versteckt */
@media (prefers-reduced-motion:reduce){.tv-copy[aria-hidden]{display:none}.tv-players.rolling .tv-scroll{-webkit-mask-image:none;mask-image:none}}
/* Einladen: Fernseher-Ansicht als eigene Zeile */
a.cell{color:inherit;text-decoration:none}
.tv-ic-s{width:22px;text-align:center;font-size:1.1rem;flex:none}
/* Wer hat schon getippt: während der Runde eine Zeile (seitlich wischbar) – Fertige zuerst und grün, Wartende blass.
   Der Zähler bleibt beim Wischen vorne stehen. Nach der Auflösung brechen die Tipps um. */
.guess-live.row{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.guess-live.row::-webkit-scrollbar{display:none}
.guess-live.row span{flex:none;white-space:nowrap}
.guess-live span.cnt{position:sticky;left:0;z-index:1;background:rgba(var(--surf),.96);font-weight:700}
.guess-live span.ok{color:var(--accent)}
.guess-live span.wait{opacity:.55}
/* Fernseher: abgegebene Tipps grün */
.tv-players .tvp.ok .g{color:var(--accent);font-weight:700}
.tv-answer small{display:block;font-size:.38em;color:var(--muted);font-weight:600;margin-top:.3em}
.round-live .rl-a small{font-size:.78em;color:var(--muted);font-weight:500}
/* Mitspieler-Liste: Platzhalter in Knopfbreite beim eigenen Eintrag – so stehen die Markierungs-Zahlen untereinander */
.icon-btn.del-ph{visibility:hidden}
.icon-btn.del-ph::before{content:'';display:block;width:1.25em;height:1.25em}
/* Lobby: Kategorien-Liste unter der Karte ist doppelt (die Felder zeigen sie schon) → weg, Karte und Tipp rücken zusammen */
body.lobby-mode #cardLegend,#myCardLegend{display:none}
/* Wiedergabe → „So klappt’s“ */
.play-help{display:flex;flex-direction:column;gap:8px}
.play-help .ph{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid var(--line)}
.play-help .ph-ic{font-size:1.3rem;line-height:1.2;flex:none}
.play-help b{display:block;font-size:.95rem}
.play-help span:not(.ph-ic){display:block;font-size:.84rem;color:var(--muted);margin-top:2px;line-height:1.4}
/* Eigene Spotify-App: Einleitung */
.own-intro{padding:4px 16px 2px;font-size:.86rem;color:var(--muted);line-height:1.45}
.own-intro p{margin:8px 0}
/* Hauptbildschirm: QR-Knopf neben „Runde …“ (Einladen) */
.round-meta{align-items:center}
.round-meta .meta-l{display:flex;gap:8px;align-items:center;min-width:0}
.qr-pill{display:inline-flex;align-items:center;gap:5px;cursor:pointer;color:var(--text);font-weight:800;letter-spacing:.06em;
  background:rgba(255,255,255,.08);border:1px solid var(--g-brd)}
.qr-pill .ic{width:1.15em;height:1.15em}
.qr-pill:active{transform:scale(.95)}
#remaining{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Handy: Kartennummer + Partie/Siege zweizeilig in einer Pille */
.card-pill{display:inline-flex;flex-direction:column;align-items:flex-end;line-height:1.2}
.card-pill small{font-size:.72em;font-weight:700;color:var(--accent);white-space:nowrap}
.round-meta .meta-l{flex:none}
/* Sehr schmale Handys: Für drei Anzeigen ist kein Platz – „Songs übrig“ weicht dem QR-Knopf (steht auch unter Playlists) */
@media (max-width:360px){.round-meta:has(#qrBtn:not(.hidden)) #remaining.songs{display:none}}
#remaining.partie{color:var(--accent);font-weight:700}
.card-pill .cp-l{white-space:nowrap}
/* Handy: Runden-Box nach der Auflösung – Cover rechts statt Symbol links, „(richtig …)“ klein neben der Jahreszahl */
.round-live .rl-cover{flex:none;width:62px;height:62px;border-radius:12px;object-fit:cover;box-shadow:0 6px 16px -6px #000}
.round-live.has-cover .rl-ic{display:none}
.round-live .rl-a small{display:inline;margin-left:.35em}
/* 4.14.0: Tipps für alle, kleines Auge, Buzzer-Icon, Bingo der anderen, Vibrieren */
.guess-head .guess-big.eye-mini{width:58px;height:32px;padding:0;flex-direction:row;background:rgba(255,255,255,.08);border:1px solid var(--g-brd);
  box-shadow:none;color:var(--muted);border-radius:12px}
.guess-big.eye-mini span{display:none}
.guess-big.eye-mini .ic{width:18px;height:18px}
.guess-big:disabled{opacity:.5;box-shadow:none}
.rl-buzz .ic{width:25px;height:25px;stroke-width:2.2}
.tv-hints{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(var(--u) * .6);margin-top:calc(var(--u) * .9)}
.tv-hints span{font-size:calc(var(--u) * 1.5);font-weight:700;color:#ffd27a;background:rgba(255,176,32,.12);border:1px solid rgba(255,176,32,.35);border-radius:99px;padding:.2em .8em}
.tv-hints img{width:calc(var(--u) * 5);height:calc(var(--u) * 5);border-radius:calc(var(--u) * .6);object-fit:cover;filter:blur(calc(var(--u) * .5))}
.other-win{cursor:pointer}
.other-win p{max-width:420px;margin-left:auto;margin-right:auto}
.vibe-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);font-size:.85rem;font-weight:600}
.vibe-row small{display:block;font-weight:500;color:var(--muted);font-size:.75rem}
.nav-title:focus{outline:none}
/* 4.14.1: Tipps ruhiger – kleiner Glühbirnen-Knopf mit Zahl, Tipps als eine Textzeile, Tipp-Feld einzeilig */
.guess-big.hint-req{position:relative;width:58px;padding:0;background:rgba(255,176,32,.14);border:1px solid rgba(255,176,32,.45);color:#ffc04d;box-shadow:none;border-radius:12px}
.guess-big.hint-req .ic{width:26px;height:26px}
.hint-req .hint-n{position:absolute;top:-7px;right:-7px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;display:grid;place-items:center;
  background:#ffb020;color:#2a1600;font-size:.72rem;font-weight:900;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.35)}
.guess-big.hint-req:disabled{opacity:.35}
.hint-req.wait{opacity:1!important}
.hint-req.wait .ic{animation:hintPulse .7s ease-in-out infinite alternate}
@keyframes hintPulse{to{opacity:.35;transform:scale(.85)}}
.guess-row input.guess-input{height:58px;line-height:normal;padding:4px 46px 0 14px;overflow:hidden;text-overflow:clip}
/* 4.14.2: Tipps als eine ruhige Zeile (Kurzform) – Handys und „Meine Karte“ */
.hints-line{display:flex;align-items:flex-start;gap:6px;margin-top:5px;font-size:.8rem;font-weight:600;line-height:1.35;color:#ffd27a}
.hints-line .ic{width:15px;height:15px;margin-top:1px;color:#ffb020}
.hints-line span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0}
.hints-line i{font-style:normal;opacity:.45;margin:0 .45em}
.hints-line img{width:18px;height:18px;border-radius:4px;object-fit:cover;vertical-align:-4px;filter:blur(2px)}
#myHints{margin:10px 4px 0}
#myHints .hints-line{margin:0;font-size:.85rem}
/* 4.14.3: neuer Tipp → Zeile leuchtet kurz auf statt Hinweis oben */
.hints-line.new{animation:hintGlow 1.6s ease-out}
@keyframes hintGlow{0%{color:#fff;text-shadow:0 0 12px #ffb020}100%{color:#ffd27a;text-shadow:none}}
/* 4.14.4: Buzzer – etwas Luft zwischen Glocke und Schrift */
.rl-buzz{gap:4px}
/* 4.15.0: OLED – echtes Schwarz (Pixel aus), keine Farbflächen im Hintergrund und keine Unschärfe-Effekte.
   Spart auf OLED-Bildschirmen Akku und entlastet den Grafikchip. */
[data-theme="oled"]{--bg:#000;--sheet:#000;--surf:16,16,18;--deep:0,0,0;--blob1:#000;--blob2:#000}
[data-theme="oled"] body{background:#000}
[data-theme="oled"] .bg{display:none}
[data-theme="oled"] *,[data-theme="oled"] *::before,[data-theme="oled"] *::after,[data-theme="oled"] ::backdrop{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
[data-theme="oled"] .sheet{background:#09090a}
[data-theme="oled"] .sheet-head{background:#09090a}
[data-theme="oled"] dialog::backdrop{background:rgba(0,0,0,.8)}
[data-theme="oled"] .alert,[data-theme="oled"] #toast{background:#151517}
[data-theme="oled"] .win{background:rgba(0,0,0,.92)}
.theme-pick[data-theme-pick="oled"] i{box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
/* 4.15.1: OLED stärker – keine grauen Flächen, keine Leucht-Schatten/Glanz, keine Dauer-Animationen, dunkler Tipp-Zettel,
   dunkler getönte Bingo-Felder (markierte bleiben voll farbig), Schrift minimal gedimmt */
[data-theme="oled"]{--text:#e4e4e9;--muted:#8a8a95;--cell:rgba(255,255,255,.035);--line:rgba(255,255,255,.08);
  --g-bg:transparent;--g-brd:rgba(255,255,255,.11);--g-blur:none;--glass:#000}
[data-theme="oled"] .sheet,[data-theme="oled"] .sheet-head{background:#000}
[data-theme="oled"]:not(.oled-fx) .glass{box-shadow:none}
[data-theme="oled"]:not(.oled-fx) .glass::after{display:none}
[data-theme="oled"]:not(.oled-fx) button.big,[data-theme="oled"]:not(.oled-fx) button.pink.big,[data-theme="oled"]:not(.oled-fx) button.mini,[data-theme="oled"]:not(.oled-fx) .seg button.on{box-shadow:none;background-image:none}
[data-theme="oled"]:not(.oled-fx) .cat-badge,[data-theme="oled"]:not(.oled-fx) .cat-icon,[data-theme="oled"]:not(.oled-fx) .on-dot,[data-theme="oled"]:not(.oled-fx) .rl-buzz,[data-theme="oled"]:not(.oled-fx) .guess-big{box-shadow:none}
[data-theme="oled"]:not(.oled-fx) .cat-badge{background-image:none;background-color:#000}
[data-theme="oled"]:not(.oled-fx) .disc{box-shadow:none}
[data-theme="oled"]:not(.oled-fx) .ring-glow{display:none}
[data-theme="oled"]:not(.oled-fx) .bcell:not(.free){background-image:none}
[data-theme="oled"] .bcell:not(.on):not(.free){background-color:color-mix(in srgb,var(--c) 11%,#000)}
[data-theme="oled"]:not(.oled-fx) .bcell:not(.hot):not(.line){box-shadow:none}
[data-theme="oled"]:not(.oled-fx) .bcell.hot:not(.on)::before{animation:none;opacity:.5}
[data-theme="oled"] .guess-input{background-color:#0b0b0e;background-image:repeating-linear-gradient(transparent 0 39px,rgba(130,150,220,.22) 39px 40px);color:#a9bcff;box-shadow:none}
[data-theme="oled"] .guess-input::placeholder{color:#4f5874}
[data-theme="oled"] .guess-clear{background:rgba(169,188,255,.12);color:#a9bcff}
[data-theme="oled"] .guess-big:not(.hint-req):not(.eye-mini){background:transparent;border:1.5px solid var(--accent2);color:var(--accent2)}
/* 4.15.3: „Leuchteffekte“ im OLED-Design bringt auch Lichtkanten, Glanz und Leucht-Schatten der Knöpfe zurück (wie bei den anderen Designs) */
[data-theme="oled"]:not(.oled-fx){--g-hi:0 0 #0000;--g-sheen:none}
/* 4.15.5: Weniger Last für den Grafikchip (auf iPhones fror die Mitspieler-Ansicht teils ein) */
/* Farbflächen als weicher Verlauf statt mit Unschärfe-Filter – sieht gleich aus, kostet aber fast nichts */
.bg i{filter:none;background:radial-gradient(closest-side,var(--bc) 0%,color-mix(in srgb,var(--bc) 60%,transparent) 40%,transparent 100%)!important}
.bg i:nth-child(1){--bc:var(--blob1)}
.bg i:nth-child(2){--bc:var(--blob2)}
.bg i:nth-child(3){--bc:var(--cat)}
/* Handys und Fernseher: Farbflächen stehen still – sonst müssen alle Glas-Flächen ständig ihre Unschärfe neu berechnen */
body.card-mode .bg i,body.tv-mode .bg i{animation:none}
/* Ganzseitige Einblendungen (Bingo, Spielende) ohne Unschärfe dahinter – nur abgedunkelt */
.win{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(var(--deep),.9)}
body.card-mode dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
/* Während einer Einblendung oder eines Fensters pausieren die leuchtenden Felder */
body:has(.win:not(.hidden)) .bcell.hot::before,body:has(dialog[open]) .bcell.hot::before{animation-play-state:paused}
/* Handy: Einstellungen unter der Karte zum Aufklappen */
.card-opts{margin-top:10px;border-top:1px solid var(--line)}
.card-opts summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 2px 2px;cursor:pointer;
  font-size:.85rem;font-weight:700;color:var(--muted)}
.card-opts summary::-webkit-details-marker{display:none}

.card-opts .vibe-row:first-of-type{margin-top:8px}
/* 4.16.0: Handy – Sprache in den Einstellungen unter der Karte (oben nur noch vor dem Beitreten) */
body:has(#cardLive:not(.hidden)) #cardApp .card-head .lang-pill{display:none}
.vibe-row select{flex:none;width:auto;max-width:55%;font-size:16px;background-color:transparent;border:0;border-radius:0;color:var(--muted);
  padding:6px 22px 6px 0;text-align:right;text-align-last:right;-webkit-appearance:none;appearance:none;cursor:pointer;font-weight:600;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a49dc6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 10l4-4 4 4M8 14l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right center;background-size:16px}
.vibe-row select:focus{outline:none}
/* Spielleiter: „Nächster Song · 8“ (Automatisch weiter) */
#controls .an{font-variant-numeric:tabular-nums;opacity:.85}
/* 4.17.0: Handy – Runde, Tipp und Karte in einem gemeinsamen Rahmen (Kategorie-Farbe am Rahmen), dünne Trennlinien */
.live-panel{padding:0;margin-bottom:14px;transition:border-color .4s}
.live-panel>.round-live,.live-panel>.guess-wrap{margin:0;border-radius:0}
.live-panel>.round-live,.live-panel>.guess-wrap{border-bottom:1px solid var(--line)}
.live-panel>.guess-live{margin:0;padding:10px 14px 0}
.live-panel>.card-wrap{padding:14px 16px 16px}
body.lobby-mode .live-panel>.guess-wrap{margin:0}
/* 4.17.0: Linien-Symbole statt Emojis */
.lang-pill .ic{width:15px;height:15px}
.vibe-row>span:first-child>.ic,.card-opts summary>span>.ic{width:18px;height:18px;margin-right:8px;vertical-align:-4px;color:var(--muted)}
.card-opts summary>span{display:inline-flex;align-items:center}
.card-opts summary>span>.ic{vertical-align:0}
.card-opts summary .ic.chev,.card-opts summary>.ic{width:16px;height:16px;transform:rotate(90deg);transition:transform .2s;margin:0}
.card-opts[open] summary>.ic{transform:rotate(-90deg)}
.rule-ic .ic{width:20px;height:20px;color:var(--muted);vertical-align:middle}
.play-help .ph-ic .ic{width:22px;height:22px;color:var(--muted)}
.rl-by .ic,.buzz-by .ic{width:1em;height:1em;margin-right:3px;vertical-align:-2px}
.guess-live span.cnt .ic{width:14px;height:14px;margin-right:4px;vertical-align:-2px}
.tv-buzz .ic,.tv-tips .ic,.tv-hints span .ic{width:1em;height:1em;margin-right:.3em;vertical-align:-.12em}
/* 4.17.1: Rahmen neutral, Kategorie-Farbe als getöntes Kästchen hinter dem Symbol */
.live-panel>.round-live .rl-ic{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-size:1.45rem;
  background:color-mix(in srgb,var(--rc,#888) 24%,transparent)}
/* 4.17.1: Regeln & Karten – ruhiger: Werte schlicht grau statt grün und fett, keine Untertitel */
.rule-v{font-weight:600;color:var(--muted)}
.cell.rule .grow{font-weight:600}
/* 4.17.2: Kategorie-Kästchen leuchtet in seiner Farbe (im OLED-Design nur mit „Leuchteffekte“) */
.live-panel>.round-live .rl-ic{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#888) 55%,transparent),0 0 20px 1px color-mix(in srgb,var(--rc,#888) 60%,transparent),0 0 6px color-mix(in srgb,var(--rc,#888) 50%,transparent);transition:box-shadow .4s,background .4s}
[data-theme="oled"]:not(.oled-fx) .live-panel>.round-live .rl-ic{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--rc,#888) 55%,transparent)}
/* 4.17.11: Versionsnummer → Neuerungen */
.app-version{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;margin-top:28px;padding:10px;background:none;box-shadow:none;
  color:var(--muted);font-size:.8rem;font-weight:500;opacity:.75;white-space:normal;text-align:center}
.app-version span{font-size:.78rem;font-weight:700;color:var(--accent)}
.app-version:active{opacity:1}
.changes{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.chg{background:var(--cell);border:1px solid var(--line);border-radius:16px;padding:12px 14px}
.chg-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.chg-h b{font-size:1rem}
.chg-d{margin-left:auto;font-size:.78rem;color:var(--muted)}
.chg-now{font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);border-radius:99px;padding:.1em .55em}
.chg ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px}
.chg li{font-size:.85rem;line-height:1.45;color:var(--text)}
.chg code{font-size:.85em;background:rgba(255,255,255,.08);border-radius:5px;padding:0 .3em}
/* 4.20.0: Film/Serie bei der Auflösung */
.rv-film{color:#d8b4fe}
.round-live .rl-film{margin-top:2px}
.tv-film{font-size:calc(var(--u) * 1.6);color:#d8b4fe;font-weight:700;margin-top:calc(var(--u) * .6)}

/* Passwortschutz beim Start: Seite bleibt verborgen, bis das Gerät freigeschaltet ist */
body.pw-locked > :not(dialog):not(.bg) { visibility: hidden; }
body.pw-locked::after { content: "🔒"; position: fixed; inset: 0; display: grid; place-items: center; font-size: 48px; opacity: .35; pointer-events: none; }