/* ===================================================================
   GameMaster — moderner Retro-TV-Gameshow-Look (Neon + Scanlines)
   Drei Ansichten: .screen-view (Beamer), .host-view (Moderator), .play-view (Handy)
   =================================================================== */
:root {
    --jb-bg: #070a1f;
    --jb-bg2: #121845;
    --jb-panel: #1a2156;
    --jb-panel2: #232c6e;
    --jb-blue: #18266f;
    --jb-blue-deep: #0c1545;
    --jb-gold: #ffce3a;
    --jb-gold-deep: #d99a1f;
    --jb-cyan: #2de2e6;
    --jb-magenta: #ff3caa;
    --jb-text: #eef0ff;
    --jb-muted: #8e95c9;
    --jb-green: #29e08a;
    --jb-red: #ff4d4d;
    --jb-shadow: 0 8px 30px rgba(0,0,0,.45);
    --jb-display: "Arial Black", "Segoe UI", Impact, system-ui, sans-serif;
}

body {
    background:
        radial-gradient(1200px 600px at 50% -10%, rgba(45,226,230,.10), transparent 60%),
        radial-gradient(900px 500px at 50% 110%, rgba(255,60,170,.10), transparent 60%),
        linear-gradient(160deg, var(--jb-bg2), var(--jb-bg));
    background-attachment: fixed;
    color: var(--jb-text);
    font-family: "Segoe UI", system-ui, sans-serif;
}

/* CRT-Scanlines als dezentes Overlay */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 2px, rgba(0,0,0,.06) 3px, rgba(0,0,0,0) 4px);
    z-index: 9999;
    mix-blend-mode: multiply;
}

/* Vollbreites Gameshow-Layout (ersetzt das Template-Sidebar-Layout) */
.jb-shell { min-height: 100vh; }
.jb-shell .content { max-width: 1280px; margin: 0 auto; padding: 1.25rem 1.5rem 3rem; }

/* Beamer: volles Fenster, niemals scrollen */
.jb-shell .content:has(.screen-view) { max-width: 100%; height: 100vh; overflow: hidden; padding: 1rem 1.5rem; }
/* Handy: volle Höhe inkl. Browserleisten (dvh), kein Scrollen */
.jb-shell .content:has(.play-view) { max-width: 100%; height: 100vh; height: 100dvh; overflow: hidden; padding: .75rem; }
/* Moderator: breit, darf scrollen */
.jb-shell .content:has(.host-view) { max-width: 1500px; }

.muted { color: var(--jb-muted); }
.mb-2 { margin-bottom: .5rem; }
.mt-2 { margin-top: .5rem; }
.mt-3 { margin-top: 1rem; }

/* ---------- Buttons ---------- */
.btn { border-radius: 8px; font-weight: 700; }
.btn-amber {
    background: linear-gradient(180deg, var(--jb-gold), var(--jb-gold-deep));
    color: #2a1c00; font-weight: 800; border: none; letter-spacing: .03em;
    box-shadow: 0 3px 0 #9c6f10, var(--jb-shadow);
}
.btn-amber:hover { filter: brightness(1.08); color: #2a1c00; }
.btn-amber:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c6f10; }
.btn-amber:disabled { opacity: .45; box-shadow: none; }

.btn-outline { background: transparent; color: var(--jb-cyan); border: 2px solid var(--jb-cyan);
    font-weight: 700; box-shadow: 0 0 12px rgba(45,226,230,.25); }
.btn-outline:hover { background: rgba(45,226,230,.12); color: var(--jb-cyan); }

.btn-good { background: linear-gradient(180deg, #36f59b, #16b76a); color: #042c17; font-weight: 800;
    border: none; box-shadow: 0 3px 0 #0c7a45; }
.btn-good:hover { color: #042c17; filter: brightness(1.08); }
.btn-good:active { transform: translateY(2px); box-shadow: 0 1px 0 #0c7a45; }
.btn-bad { background: linear-gradient(180deg, #ff6b6b, #e23030); color: #2c0606; font-weight: 800;
    border: none; box-shadow: 0 3px 0 #9c1717; }
.btn-bad:hover { color: #2c0606; filter: brightness(1.08); }
.btn-bad:active { transform: translateY(2px); box-shadow: 0 1px 0 #9c1717; }

.form-control { background: #0c1238; color: var(--jb-text); border: 1px solid #2f3a83; border-radius: 8px; }
.form-control::placeholder { color: #5b63a0; }
.form-control:focus { background: #0c1238; color: var(--jb-text); border-color: var(--jb-gold);
    box-shadow: 0 0 0 .15rem rgba(255,206,58,.2); }

/* ---------- Startseite ---------- */
.home-wrap { max-width: 920px; margin: 3rem auto; text-align: center; }
.home-title {
    font-family: var(--jb-display); font-size: 5rem; font-weight: 900; letter-spacing: .08em;
    color: var(--jb-gold);
    text-shadow: 0 0 8px rgba(255,206,58,.5), 4px 4px 0 var(--jb-blue), 6px 6px 0 var(--jb-magenta);
    margin-bottom: .25rem;
}
.home-sub { color: var(--jb-cyan); margin-bottom: 2.5rem; letter-spacing: .08em; text-transform: uppercase;
    font-size: .95rem; }
.home-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.home-card { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 14px;
    padding: 1.5rem; text-align: left; border: 1px solid #34409a; box-shadow: var(--jb-shadow); }
.home-card h2 { color: var(--jb-gold); font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
    font-size: 1.3rem; }
.home-card p { color: var(--jb-muted); font-size: .9rem; }
.code-input { text-transform: uppercase; letter-spacing: .35em; text-align: center; font-weight: 800;
    font-size: 1.2rem; color: var(--jb-gold); }

/* ---------- Topbar (Host) ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); padding: .55rem 1rem;
    border-radius: 12px; margin-bottom: 1rem; border: 1px solid #34409a; box-shadow: var(--jb-shadow); }
.room-code strong { color: var(--jb-gold); font-size: 1.35rem; letter-spacing: .2em;
    text-shadow: 0 0 8px rgba(255,206,58,.4); }
.phase-label { color: var(--jb-cyan); font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    font-size: .9rem; }
.topbar-right { display: flex; align-items: center; gap: .75rem; }
.btn-sound { background: #0c1238; border: 1px solid #34409a; border-radius: 8px; font-size: 1.1rem;
    padding: .25rem .5rem; cursor: pointer; text-decoration: none; }
.btn-sound:hover { border-color: var(--jb-gold); }

/* Musik-Steuerung */
.music-controls { display: flex; align-items: center; gap: .5rem; background: #0c1238; padding: .25rem .6rem;
    border-radius: 8px; border: 1px solid #34409a; }
.btn-music { background: transparent; color: var(--jb-cyan); border: 1px solid var(--jb-cyan); border-radius: 6px;
    padding: .2rem .55rem; cursor: pointer; font-weight: 700; font-size: .85rem; }
.btn-music.on { background: var(--jb-cyan); color: #042c2d; }
.music-vol { width: 90px; accent-color: var(--jb-gold); }

/* ===================================================================
   Moderator (/host)
   =================================================================== */
.host-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; align-items: start; }
.host-main, .host-side { display: flex; flex-direction: column; gap: 1rem; }
.host-hint { color: var(--jb-muted); text-align: center; margin-top: .8rem; }

.panel { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 12px;
    padding: 1rem 1.2rem; border: 1px solid #34409a; box-shadow: var(--jb-shadow); }
.panel h3 { color: var(--jb-gold); text-transform: uppercase; letter-spacing: .03em; font-size: 1.05rem; }
.panel h4 { font-size: .95rem; }

.join-url { background: #0c1238; border: 1px solid var(--jb-cyan); border-radius: 8px; padding: .6rem .8rem;
    color: var(--jb-cyan); font-family: ui-monospace, Consolas, monospace; word-break: break-all; }

.player-list { list-style: none; padding: 0; margin: 0; max-height: 420px; overflow-y: auto; }
.player-list li { display: flex; justify-content: space-between; align-items: center; gap: .5rem;
    padding: .3rem 0; border-bottom: 1px solid #2a3380; }
.x { background: transparent; border: none; color: var(--jb-muted); cursor: pointer; font-size: .9rem; }
.x:hover { color: var(--jb-red); }

.team-list, .team-reveal { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .8rem; }
.team-box { background: #0c1238; border: 2px solid var(--team, var(--jb-gold)); border-radius: 12px;
    padding: .7rem .9rem; }
.team-box h4 { color: var(--team, var(--jb-gold)); font-weight: 800; text-transform: uppercase;
    letter-spacing: .03em; margin-bottom: .4rem; }
.team-box ul { list-style: none; padding: 0; margin: 0; }
.team-box li { display: flex; justify-content: space-between; align-items: center; gap: .4rem;
    padding: .15rem 0; font-size: .9rem; }
.team-box select { background: #0c1238; color: var(--jb-muted); border: 1px solid #34409a; border-radius: 6px;
    font-size: .75rem; }

.cat-picker { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.cat-chip { background: #0c1238; color: var(--jb-text); border: 1px solid #34409a; border-radius: 20px;
    padding: .4rem 1rem; cursor: pointer; transition: all .12s; }
.cat-chip:hover { border-color: var(--jb-cyan); }
.cat-chip.on { background: linear-gradient(180deg, var(--jb-gold), var(--jb-gold-deep)); color: #2a1c00;
    font-weight: 800; border-color: var(--jb-gold); box-shadow: 0 0 10px rgba(255,206,58,.35); }

/* Frage-Steuerung im Host */
.qpanel { background: linear-gradient(180deg, #17246b, var(--jb-blue-deep)); border-radius: 16px;
    padding: 1.25rem 1.5rem; border: 2px solid #2a3680; box-shadow: var(--jb-shadow); }
.qmeta { color: var(--jb-cyan); text-transform: uppercase; letter-spacing: .05em; font-size: .85rem;
    font-weight: 700; }
.qtext { font-size: 1.5rem; font-weight: 800; margin: 1rem 0; line-height: 1.35; }
.qsolution { background: rgba(0,0,0,.4); border: 1px dashed var(--jb-gold); border-radius: 8px;
    padding: .5rem .8rem; color: var(--jb-gold); }
.qsolution .label { text-transform: uppercase; font-size: .75rem; letter-spacing: .06em; margin-right: .5rem;
    color: var(--jb-muted); }
.qstate { color: var(--jb-cyan); margin: .9rem 0; font-style: italic; }
.qbuttons { display: flex; gap: .6rem; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,.15);
    padding-top: 1rem; margin-top: 1rem; }

.devbox { margin-top: 1rem; padding-top: .8rem; border-top: 1px dashed #4b2e83; display: flex;
    flex-wrap: wrap; gap: .4rem; align-items: center; color: var(--jb-muted); font-size: .85rem; }
.devbox button { background: #2a3266; color: var(--jb-text); border: none; border-radius: 6px;
    padding: .2rem .6rem; cursor: pointer; font-size: .85rem; }
.devbox button:hover { background: var(--jb-magenta); }
.dev-answer { display: inline-flex; align-items: center; gap: .25rem; background: rgba(0,0,0,.25);
    border-radius: 6px; padding: .15rem .4rem; }

.finalists { display: flex; flex-wrap: wrap; gap: .5rem; }
.finalist { display: flex; align-items: center; gap: .4rem; background: #0c1238; border: 1px solid #34409a;
    border-radius: 20px; padding: .3rem .8rem; }
.finalist.out { opacity: .45; text-decoration: line-through; }
.finalist .tick { color: var(--jb-gold); font-weight: 800; font-size: .8rem; }

/* ---------- Board (Beamer + Host) ---------- */
.board { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr);
    grid-template-rows: auto repeat(3, 1fr); gap: .6rem; height: 100%; }
.board-head {
    background: linear-gradient(180deg, #1c2c7a, var(--jb-blue-deep)); color: var(--jb-gold);
    font-weight: 900; text-align: center; padding: .9rem .3rem; border-radius: 8px; text-transform: uppercase;
    font-size: clamp(.9rem, 1.4vw, 1.4rem); min-height: 56px; display: flex; align-items: center;
    justify-content: center; letter-spacing: .03em; text-shadow: 0 1px 2px rgba(0,0,0,.6); border: 1px solid #2a3680;
}
.board-cell {
    background: linear-gradient(180deg, #17246b, var(--jb-blue-deep)); color: var(--jb-gold);
    font-family: var(--jb-display); font-size: clamp(1.4rem, 3.5vw, 3.5rem); font-weight: 900;
    border: 1px solid #2a3680; border-radius: 8px; min-height: 3.5rem; cursor: pointer;
    transition: transform .08s, filter .15s; text-shadow: 0 0 6px rgba(255,206,58,.25), 0 2px 2px rgba(0,0,0,.5);
}
.board-cell:hover:not(:disabled) { filter: brightness(1.18); transform: scale(1.03); }
.board-cell.solved { background: #0c1238; color: transparent; cursor: default; text-shadow: none;
    border-color: #1a2050; }
.board-cell:disabled { cursor: default; }

/* ---------- Teamstände ---------- */
.scoreboard { display: flex; gap: .6rem; margin-bottom: 1rem; flex-wrap: wrap; }
.score-card { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 12px;
    padding: .6rem 1rem; min-width: 150px; flex: 1 1 0; text-align: center;
    border: 2px solid var(--team, #34409a); position: relative; }
.score-card.buzzed { box-shadow: 0 0 20px var(--team, var(--jb-green)); transform: scale(1.03); }
.score-card.locked { opacity: .5; }
.score-card.winner { box-shadow: 0 0 24px var(--jb-gold); }
.score-name { font-weight: 800; color: var(--team, var(--jb-text)); text-transform: uppercase;
    letter-spacing: .03em; font-size: .95rem; }
.score-value { font-family: var(--jb-display); font-size: 2rem; font-weight: 900; color: var(--jb-gold);
    text-shadow: 0 0 10px rgba(255,206,58,.4); line-height: 1.1; }
.score-value.huge { font-size: 3.5rem; }
.score-members { color: var(--jb-muted); font-size: .75rem; }
.score-tag { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.score-tag.buzz { color: var(--jb-green); }
.score-tag.lock { color: var(--jb-red); }
.score-fix { display: flex; gap: .3rem; justify-content: center; margin-top: .3rem; }
.score-fix button { background: #2a3266; color: var(--jb-muted); border: none; border-radius: 5px;
    font-size: .7rem; padding: .1rem .4rem; cursor: pointer; }
.score-fix button:hover { color: var(--jb-text); }

/* ===================================================================
   Beamer (/screen)
   =================================================================== */
.screen-view { height: calc(100vh - 2rem); display: flex; flex-direction: column; gap: 1rem;
    position: relative; }
.screen-sound { position: absolute; top: 0; right: 0; z-index: 5; opacity: .35; }
.screen-sound:hover { opacity: 1; }
.screen-title { font-family: var(--jb-display); color: var(--jb-gold); text-align: center;
    font-size: clamp(1.6rem, 3vw, 2.8rem); letter-spacing: .05em;
    text-shadow: 0 0 10px rgba(255,206,58,.4), 3px 3px 0 var(--jb-blue); }

/* Beitritts-Bildschirm mit QR */
.join-screen { display: grid; grid-template-columns: 1.3fr 1fr; gap: 2rem; align-items: center; flex: 0 0 auto; }
.join-left { text-align: center; }
.screen-logo { font-family: var(--jb-display); font-size: clamp(2.5rem, 6vw, 5rem); color: var(--jb-gold);
    letter-spacing: .08em; text-shadow: 0 0 10px rgba(255,206,58,.5), 4px 4px 0 var(--jb-blue), 7px 7px 0 var(--jb-magenta); }
.join-call { color: var(--jb-cyan); text-transform: uppercase; letter-spacing: .1em; margin-top: 1rem; }
.join-code { font-family: var(--jb-display); font-size: clamp(4rem, 12vw, 9rem); color: #fff;
    letter-spacing: .15em; line-height: 1; text-shadow: 0 0 25px var(--jb-cyan); }
.join-link { color: var(--jb-muted); font-family: ui-monospace, Consolas, monospace; margin-top: .5rem;
    font-size: clamp(.8rem, 1.3vw, 1.2rem); }
.join-right { display: flex; justify-content: center; }
.qr { background: #fff; padding: 1rem; border-radius: 16px; box-shadow: var(--jb-shadow); line-height: 0; }
.qr svg { width: clamp(180px, 22vw, 340px); height: auto; display: block; }

.join-players { flex: 1 1 auto; min-height: 0; overflow: hidden; text-align: center; }
.join-players h3 { color: var(--jb-gold); text-transform: uppercase; letter-spacing: .05em; }
.name-cloud { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.name-chip { background: #0c1238; border: 1px solid #34409a; border-radius: 20px; padding: .3rem .9rem;
    font-size: clamp(.9rem, 1.3vw, 1.3rem); animation: pop .25s ease-out; }
.name-chip.in { border-color: var(--jb-green); color: var(--jb-green); }
.name-chip.out { opacity: .4; text-decoration: line-through; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.team-reveal .team-box.big h4 { font-size: clamp(1rem, 1.8vw, 1.6rem); }
.team-reveal .team-box.big li { font-size: clamp(.9rem, 1.4vw, 1.3rem); }

/* Frage auf der Leinwand */
.screen-question { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 1.5rem; text-align: center;
    background: linear-gradient(180deg, #17246b, var(--jb-blue-deep)); border: 2px solid #2a3680;
    border-radius: 18px; padding: 2rem; box-shadow: var(--jb-shadow); }
.qtext.big { font-size: clamp(1.6rem, 3.6vw, 3.4rem); font-weight: 900; line-height: 1.25; margin: 0;
    text-shadow: 0 3px 6px rgba(0,0,0,.5); }
/* "Bild erraten": das Bild IST die Frage, darum darf es den halben Beamer füllen. */
.qimage { max-height: 52vh; max-width: 92%; border-radius: 12px; border: 2px solid rgba(255,255,255,.2);
    object-fit: contain; }

/* "Bild schärft sich": startet unscharf und klart über --reveal-time auf. Die Animation
   steht still, bis .running dazukommt (Buzzer frei), und friert beim Buzzern wieder ein —
   deshalb animation-play-state statt eines neu gestarteten Timers. Unschärfe in vmin,
   damit sie auf dem Beamer genauso stark wirkt wie auf dem Laptop. */
.qimage.blur-reveal { filter: blur(3vmin);
    animation: unblur var(--reveal-time, 20s) linear forwards; animation-play-state: paused; }
.qimage.blur-reveal.running { animation-play-state: running; }
.qimage.blur-reveal.done { animation: none; filter: blur(0); transition: filter .5s ease-out; }
@keyframes unblur {
    from { filter: blur(3vmin); }
    to { filter: blur(0); }
}

/* "Musik erraten": ohne Bild bliebe die Leinwand leer — die pulsierende Note sagt, dass Ton läuft. */
.qclip { display: flex; align-items: center; gap: 1.5rem; }
.qclip-note { font-size: clamp(3rem, 10vw, 8rem); line-height: 1; color: var(--jb-gold);
    animation: qclip-pulse 1.1s ease-in-out infinite; }
.qclip-text { font-family: var(--jb-display); font-size: clamp(1.2rem, 3vw, 2.6rem);
    letter-spacing: .08em; color: var(--jb-muted); }
@keyframes qclip-pulse {
    0%, 100% { transform: scale(1); opacity: .75; }
    50% { transform: scale(1.18); opacity: 1; }
}

/* Host: Bild klein mitlesen, Ton nachschieben. */
.host-qimage { max-height: 22vh; max-width: 100%; border-radius: 10px;
    border: 1px solid rgba(255,255,255,.18); object-fit: contain; }
.qclip-controls { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.qclip-controls .label { font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
    color: var(--jb-muted); }

.buzz-state { font-family: var(--jb-display); font-size: clamp(1.2rem, 2.6vw, 2.4rem); letter-spacing: .05em;
    padding: .5rem 2rem; border-radius: 12px; }
.buzz-state.wait { color: var(--jb-muted); }
.buzz-state.open { color: #fff; background: linear-gradient(180deg, #ff6b6b, #e23030);
    animation: buzz-pulse 1s infinite; }
.buzz-state.locked { color: #042c17; background: linear-gradient(180deg, #36f59b, #16b76a); }
@keyframes buzz-pulse { 0%,100% { box-shadow: 0 0 20px rgba(255,77,77,.4); }
    50% { box-shadow: 0 0 45px rgba(255,77,77,.9); } }

.reveal { display: flex; align-items: center; gap: 1rem; }
.reveal-label { color: var(--jb-muted); text-transform: uppercase; letter-spacing: .1em; }
.reveal-answer { font-family: var(--jb-display); font-size: clamp(2rem, 5vw, 4rem); color: var(--jb-gold);
    text-shadow: 0 0 20px rgba(255,206,58,.6); }

.survivors { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; flex: 0 0 auto; }

.winner-screen { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .5rem; }
.trophy { font-size: clamp(4rem, 12vw, 9rem); animation: pop .5s ease-out; }
.winner-name { font-family: var(--jb-display); font-size: clamp(2.5rem, 8vw, 6rem); color: var(--jb-gold);
    text-shadow: 0 0 25px rgba(255,206,58,.6), 4px 4px 0 var(--jb-blue); margin: 0; }

/* ===================================================================
   Handy (/play) — nur eine Sache pro Bildschirm, fingerfreundlich
   =================================================================== */
.play-view { height: 100%; display: flex; flex-direction: column; gap: .75rem; }
.play-top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex: 0 0 auto; }
.play-me { font-weight: 700; }
.team-chip { background: var(--team, var(--jb-gold)); color: #0b1020; font-weight: 800; border-radius: 20px;
    padding: .2rem .8rem; font-size: .85rem; text-transform: uppercase; }
.team-big { font-family: var(--jb-display); font-size: 2rem; color: var(--team, var(--jb-gold));
    text-shadow: 0 0 20px var(--team, var(--jb-gold)); }

.play-msg { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; gap: .6rem; background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel));
    border: 1px solid #34409a; border-radius: 16px; padding: 1.5rem; }
.play-msg h2 { color: var(--jb-gold); font-family: var(--jb-display); }
.play-msg p { color: var(--jb-muted); margin: 0; }
.play-msg.out { border-color: var(--jb-red); }
.play-msg.out h2 { color: var(--jb-red); }
.play-msg.in { border-color: var(--jb-green); }
.play-msg.in h2 { color: var(--jb-green); }
.play-msg.win { border-color: var(--jb-gold); box-shadow: 0 0 30px rgba(255,206,58,.5); }
.play-msg.win h1 { font-size: 4rem; margin: 0; }
.play-logo { font-family: var(--jb-display); font-size: 2.2rem; color: var(--jb-gold); letter-spacing: .06em;
    text-shadow: 0 0 8px rgba(255,206,58,.5), 3px 3px 0 var(--jb-blue); }
.play-input { font-size: 1.2rem; padding: .8rem; text-align: center; max-width: 320px; }
.play-join { font-size: 1.2rem; padding: .7rem 2rem; }
.play-hint { flex: 0 0 auto; text-align: center; color: var(--jb-muted); min-height: 2.5rem; }

/* Der Buzzer füllt den Bildschirm — mit Daumen treffbar, ohne hinzusehen */
.buzzer { flex: 1 1 auto; width: 100%; border: none; border-radius: 24px; cursor: pointer;
    font-family: var(--jb-display); font-size: clamp(2.5rem, 14vw, 5rem); letter-spacing: .05em;
    text-transform: uppercase; color: #fff; transition: transform .06s;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.buzzer.idle { background: #262c52; color: #4a5392; box-shadow: inset 0 0 0 2px #333c6e; }
.buzzer.armed { background: linear-gradient(180deg, #ff6b6b, #e23030);
    box-shadow: 0 10px 0 #a82a1d, 0 0 40px rgba(255,77,77,.6); animation: buzz-pulse 1s infinite; }
.buzzer.armed:active { transform: translateY(8px); box-shadow: 0 2px 0 #a82a1d; }
.buzzer.mine { background: linear-gradient(180deg, #36f59b, #16b76a); color: #042c17;
    box-shadow: 0 0 50px rgba(41,224,138,.7); }
.buzzer.taken { background: #262c52; color: #4a5392; }
.buzzer:disabled { cursor: default; }

/* Ja/Nein im Finale */
.yesno { flex: 1 1 auto; display: grid; grid-template-rows: 1fr 1fr; gap: .75rem; }
.yn { border: none; border-radius: 20px; font-family: var(--jb-display); font-size: clamp(2rem, 11vw, 4rem);
    color: #fff; cursor: pointer; transition: transform .06s; -webkit-tap-highlight-color: transparent;
    touch-action: manipulation; opacity: .75; }
.yn.yes { background: linear-gradient(180deg, #36f59b, #16b76a); color: #042c17; box-shadow: 0 8px 0 #0c7a45; }
.yn.no { background: linear-gradient(180deg, #ff6b6b, #e23030); box-shadow: 0 8px 0 #9c1717; }
.yn:active:not(:disabled) { transform: translateY(6px); }
/* Gewählte Antwort: innerer Rahmen statt outline — Bootstraps
   `button:focus:not(:focus-visible){outline:0}` würde eine outline wegräumen. */
.yn.picked { opacity: 1; box-shadow: inset 0 0 0 6px var(--jb-gold); }
/* Noch nicht freigegeben: sichtbar, damit jeder weiß wohin — aber erkennbar tot */
.yesno.closed .yn { filter: grayscale(.8) brightness(.55); box-shadow: none; cursor: default; }

/* ---------- Ende / Fehlerseiten ---------- */
.finished { background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); border-radius: 16px;
    padding: 2rem; text-align: center; max-width: 520px; margin: 2rem auto; border: 1px solid #34409a; }
.finished h2 { color: var(--jb-gold); font-family: var(--jb-display); }
.finished .winner-name { font-size: 2.5rem; }
.notfound { text-align: center; margin: 4rem auto; max-width: 520px;
    background: linear-gradient(180deg, var(--jb-panel2), var(--jb-panel)); padding: 2rem; border-radius: 16px;
    border: 1px solid #34409a; }
.notfound h2 { color: var(--jb-gold); }

/* ---------- Admin ---------- */
.admin-gate { max-width: 360px; margin: 4rem auto; background: var(--jb-panel); padding: 1.5rem;
    border-radius: 14px; border: 1px solid #34409a; text-align: center; }
.admin-gate h2 { color: var(--jb-gold); }
.admin-wrap { padding: .5rem; }
.admin-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.admin-top h1 { color: var(--jb-gold); }
.admin-sets { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin-bottom: 1rem;
    background: var(--jb-panel); padding: .7rem; border-radius: 10px; border: 1px solid #34409a; }
.admin-sets label { color: var(--jb-muted); }
.set-select { max-width: 280px; }
.admin-status { background: rgba(41,224,138,.15); color: var(--jb-green); padding: .5rem .8rem;
    border-radius: 8px; margin-bottom: 1rem; border: 1px solid rgba(41,224,138,.3); }
.admin-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
.admin-list { background: var(--jb-panel); border-radius: 12px; padding: 1rem; border: 1px solid #34409a; }
.admin-list-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .6rem; }
.q-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.q-table th { text-align: left; color: var(--jb-gold); border-bottom: 1px solid #34409a; padding: .35rem .4rem; }
.q-table td { padding: .35rem .4rem; border-bottom: 1px solid #222a55; }
.q-table tr.sel { background: rgba(255,206,58,.1); }
.q-actions { white-space: nowrap; }
.btn-mini { background: #2a3266; border: none; border-radius: 6px; padding: .2rem .45rem; cursor: pointer; font-size: .9rem; }
.btn-mini.del:hover { background: var(--jb-red); }
.csv-box { margin-top: 1rem; background: #0c1238; padding: .7rem; border-radius: 8px; }
.csv-box code { color: var(--jb-cyan); }
.csv-replace { display: block; margin-top: .5rem; color: var(--jb-muted); }
.admin-edit { background: var(--jb-panel); border-radius: 12px; padding: 1rem; border: 1px solid var(--jb-gold);
    position: sticky; top: .5rem; }
.admin-edit h3 { color: var(--jb-gold); }
.admin-edit label { display: block; margin: .6rem 0 .2rem; color: var(--jb-muted); font-size: .85rem; }
.answer-edit { display: flex; align-items: center; gap: .4rem; margin: .3rem 0; }
.ae-letter { width: 1.4rem; height: 1.4rem; line-height: 1.4rem; text-align: center; border-radius: 50%;
    background: var(--jb-gold); color: #2a1c00; font-weight: 800; flex: 0 0 auto; }
.media-preview { max-width: 100%; max-height: 160px; margin-top: .5rem; border-radius: 8px; }
.edit-actions { display: flex; gap: .5rem; margin-top: 1rem; }
.alert-error { background: rgba(255,77,77,.15); color: #ffb0a8; padding: .5rem .75rem; border-radius: 6px;
    border: 1px solid rgba(255,77,77,.35); }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
    .home-cards, .host-grid, .join-screen, .admin-grid { grid-template-columns: 1fr; }
    .home-title { font-size: 3.2rem; }
    .topbar { flex-wrap: wrap; }
}