/* ============================================================
   QUIZNACHT – Design
   Bühne bei Nacht: tiefes Indigo, warmes Rampenlicht-Gold,
   königsblaue Spielfeld-Kacheln, glänzender Arcade-Buzzer.
   ============================================================ */

:root{
    --bg:        #0d1024;   /* Saalfinsternis */
    --bg-soft:   #131735;
    --panel:     #191f42;   /* Bühnenelemente */
    --panel-2:   #212a58;
    --line:      #2c3568;
    --tile:      #2743b5;   /* Spielfeld-Königsblau */
    --tile-deep: #1b2f86;
    --gold:      #ffc93c;   /* Rampenlicht */
    --gold-deep: #d9a51a;
    --red:       #e5484d;   /* Buzzer */
    --red-deep:  #a72025;
    --green:     #3dd68c;
    --text:      #eaedfb;
    --muted:     #9aa3ce;
    --radius:    14px;
    --font-disp: 'Bungee', 'Rubik', sans-serif;
    --font-body: 'Rubik', system-ui, sans-serif;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:var(--font-body); line-height:1.45;
    background-image:
        radial-gradient(1200px 600px at 50% -200px, #232b5e 0%, transparent 60%),
        radial-gradient(800px 400px at 90% 110%, #1a1440 0%, transparent 55%);
    min-height:100vh;
}

h1,h2,h3{ margin:0; }
button{ font:inherit; cursor:pointer; }
input{ font:inherit; }
[hidden]{ display:none !important; }

/* ---------- Grund-Bausteine ---------- */
.btn{
    border:0; border-radius:10px; padding:.62em 1.1em; font-weight:700;
    color:#101321; background:var(--gold); transition:transform .08s, filter .15s;
}
.btn:hover{ filter:brightness(1.08); }
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--gold); outline-offset:2px; }
.btn-gold{ background:linear-gradient(180deg, var(--gold), var(--gold-deep)); }
.btn-blue{ background:linear-gradient(180deg,#4a68e8,#2743b5); color:#fff; }
.btn-danger{ background:linear-gradient(180deg,#e5484d,#a72025); color:#fff; }
.btn-ghost{ background:transparent; color:var(--muted); border:1px solid var(--line); }
.btn-ghost:hover{ color:var(--text); border-color:var(--muted); filter:none; }
.btn-sm{ padding:.4em .8em; font-size:.86rem; }
.btn-big{ width:100%; padding:.9em; font-size:1.05rem; }

input[type=text],input:not([type]),input[type=file],.code-input{
    width:100%; padding:.6em .8em; border-radius:10px;
    border:1px solid var(--line); background:var(--bg-soft); color:var(--text);
}
input:focus-visible{ outline:3px solid var(--tile); outline-offset:1px; }
input::placeholder{ color:#6b74a3; }
label{ display:block; font-size:.85rem; color:var(--muted); margin:.9em 0 .3em; }

.hint{ color:var(--muted); font-size:.85rem; margin:.4em 0 0; }
.row{ display:flex; gap:.5em; flex-wrap:wrap; align-items:center; }
.row input:not([type=file]){ flex:1; min-width:120px; width:auto; }

/* ---------- Logo & Landing ---------- */
.logo{
    font-family:var(--font-disp); font-size:clamp(2.2rem,7vw,4rem);
    letter-spacing:.04em; color:#fff; text-shadow:0 4px 0 #0a0d1e, 0 10px 30px rgba(39,67,181,.55);
}
.logo .g{ color:var(--gold); }
.logo-small{ font-size:1.15rem; text-decoration:none; text-shadow:0 2px 0 #0a0d1e; }

.landing-wrap{ max-width:820px; margin:0 auto; padding:6vh 20px 60px; text-align:center; }
.tagline{ color:var(--muted); margin:.4em 0 2.2em; }

/* Rampenlicht-Reihe über dem Logo */
.brand-lights{ display:flex; justify-content:center; gap:22px; margin-bottom:14px; }
.brand-lights span{
    width:14px; height:14px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #fff6d8, var(--gold) 55%, var(--gold-deep));
    box-shadow:0 0 14px 3px rgba(255,201,60,.55);
    animation:marquee 1.6s infinite;
}
.brand-lights span:nth-child(2){ animation-delay:.32s }
.brand-lights span:nth-child(3){ animation-delay:.64s }
.brand-lights span:nth-child(4){ animation-delay:.96s }
.brand-lights span:nth-child(5){ animation-delay:1.28s }
@keyframes marquee{ 0%,100%{ opacity:.35 } 50%{ opacity:1 } }

.landing-cards{ display:grid; grid-template-columns:1fr 1fr; gap:18px; text-align:left; }
.card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:22px; box-shadow:0 14px 40px rgba(0,0,0,.35);
}
.card h2{ font-family:var(--font-disp); font-size:1.05rem; letter-spacing:.03em; }
.card .btn{ width:100%; margin-top:1.2em; }
.code-input{ text-transform:uppercase; letter-spacing:.25em; font-weight:700; }
.landing-msg{ min-height:1.4em; color:#ff9b9e; font-weight:500; margin-top:1.2em; }

/* ---------- Spielseite: Kopf & Layout ---------- */
.topbar{
    display:flex; justify-content:space-between; align-items:center; gap:12px;
    padding:12px 18px; border-bottom:1px solid var(--line);
    background:rgba(13,16,36,.85); position:sticky; top:0; z-index:20; backdrop-filter:blur(6px);
}
.session-info{ display:flex; align-items:center; gap:12px; }
.who{ color:var(--muted); font-size:.9rem; }
.code-badge{
    background:var(--panel-2); border:1px dashed var(--gold); color:var(--text);
    border-radius:10px; padding:.35em .8em; letter-spacing:.05em;
}
.code-badge strong{ color:var(--gold); letter-spacing:.2em; font-family:var(--font-disp); font-weight:400; }

.layout{
    display:grid; gap:16px; padding:16px;
    grid-template-columns:minmax(260px,340px) minmax(420px,1fr) minmax(280px,380px);
    max-width:1500px; margin:0 auto; align-items:start;
}
.col{ display:flex; flex-direction:column; gap:16px; min-width:0; }

.panel{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:16px; box-shadow:0 10px 26px rgba(0,0,0,.3);
}
.panel-title{ font-family:var(--font-disp); font-size:.95rem; letter-spacing:.05em; margin-bottom:.7em; }
.panel-head{ display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:.5em; }
.panel-head .panel-title{ margin-bottom:0; }
.panel-footer{ display:flex; gap:10px; justify-content:flex-end; }

/* ---------- Der Buzzer (Herzstück) ---------- */
.panel-buzzer{ text-align:center; }
.buzzer-wrap{ padding:8px 0 4px; }
.buzzer{
    --size:min(58vw, 230px);
    width:var(--size); height:var(--size); border-radius:50%; border:0; padding:0;
    background:radial-gradient(circle at 50% 118%, #5a0d10, #2a0507 70%);
    box-shadow:0 14px 0 #12060a, 0 22px 40px rgba(0,0,0,.55), 0 0 0 10px #171b3a, 0 0 34px 6px rgba(229,72,77,.35);
    position:relative; transition:transform .07s, box-shadow .07s, filter .2s;
    touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.buzzer-face{
    position:absolute; inset:8%;
    display:flex; align-items:center; justify-content:center; border-radius:50%;
    background:radial-gradient(circle at 32% 26%, #ff8d90 0%, var(--red) 38%, var(--red-deep) 90%);
    box-shadow:inset 0 -14px 22px rgba(0,0,0,.35), inset 0 10px 14px rgba(255,255,255,.28);
    font-family:var(--font-disp); font-size:clamp(1.3rem, 8vw, 2rem); color:#fff;
    letter-spacing:.05em; text-shadow:0 3px 0 rgba(0,0,0,.35);
}
.buzzer:active:not(:disabled), .buzzer.pressed{ transform:translateY(9px); box-shadow:0 5px 0 #12060a, 0 12px 22px rgba(0,0,0,.5), 0 0 0 10px #171b3a; }
.buzzer:disabled{ filter:grayscale(.75) brightness(.75); cursor:not-allowed; box-shadow:0 14px 0 #12060a, 0 22px 40px rgba(0,0,0,.55), 0 0 0 10px #171b3a; }
.buzzer:focus-visible{ outline:4px solid var(--gold); outline-offset:6px; }
.buzzer-state{ margin:1em 0 0; color:var(--muted); min-height:1.3em; font-weight:500; }

.buzzer-host{ display:flex; flex-direction:column; gap:.8em; align-items:stretch; text-align:left; }
.switch{ display:flex; align-items:center; gap:.6em; margin:0; color:var(--text); font-size:.95rem; cursor:pointer; }
.switch input{ width:1.15em; height:1.15em; accent-color:var(--gold); }

/* 5-Sekunden-Antwortzeit: Punkte im Stil der Startseiten-Lichter */
.buzz-timer{
    margin-top:1em; padding:.7em .6em; border-radius:10px;
    background:var(--bg-soft); border:1px solid var(--line);
    display:flex; flex-direction:column; align-items:center; gap:.5em;
}
.bt-dots{ display:flex; gap:16px; }
.bt-dots span{ width:13px; height:13px; border-radius:50%; transition:background .3s, box-shadow .3s; }
.bt-dots span.on{
    background:radial-gradient(circle at 35% 30%, #fff6d8, var(--gold) 55%, var(--gold-deep));
    box-shadow:0 0 12px 3px rgba(255,201,60,.55);
    animation:marquee 1s infinite;
}
.bt-dots span.off{ background:#2a325f; box-shadow:none; }
.bt-label{ font-size:.88rem; color:var(--muted); font-variant-numeric:tabular-nums; min-height:1.2em; }
.buzz-timer.expired{ border-color:var(--red); }
.buzz-timer.expired .bt-label{ color:#ff9b9e; font-weight:700; }

/* Countdown des Hosts */
.panel-timer{ display:flex; flex-direction:column; gap:12px; }
.timer-display{ text-align:center; }
.timer-big{
    font-family:var(--font-disp); font-size:clamp(2rem, 6vw, 3.2rem); color:var(--gold);
    text-shadow:0 3px 0 #0a0d1e; font-variant-numeric:tabular-nums; line-height:1.1; display:block;
}
.timer-bar{ height:10px; border-radius:999px; background:#2a325f; overflow:hidden; margin-top:.5em; }
.timer-fill{ height:100%; background:linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius:999px; transition:width .12s linear; }
.panel-timer.expired .timer-big{ color:#ff5a60; animation:tpulse .8s infinite; }
.panel-timer.expired{ border-color:var(--red); }
@keyframes tpulse{ 0%,100%{ opacity:1 } 50%{ opacity:.45 } }
.timer-controls{ display:flex; gap:10px; justify-content:space-between; flex-wrap:wrap; }

/* Banner „Ausgewählt: …" über dem Spielfeld */
.play-banner{
    margin:.2em 0 .8em; padding:.55em .9em; border-radius:10px;
    background:linear-gradient(180deg, #33290b, #241d07); border:1px solid var(--gold);
    color:var(--text); font-size:.95rem;
}
.play-banner strong{ color:var(--gold); }

/* Buzz-Reihenfolge */
.buzz-order{ list-style:none; margin:1em 0 0; padding:0; display:flex; flex-direction:column; gap:6px; text-align:left; }
.buzz-order li{
    display:flex; align-items:center; gap:10px; padding:.5em .8em;
    background:var(--panel-2); border-radius:10px; border:1px solid var(--line);
}
.buzz-order .pos{
    font-family:var(--font-disp); width:1.9em; height:1.9em; border-radius:50%;
    display:flex; align-items:center; justify-content:center; flex:none;
    background:#39406f; color:#cfd4f4; font-size:.85rem;
}
.buzz-order li:nth-child(1) .pos{ background:linear-gradient(180deg,var(--gold),var(--gold-deep)); color:#231a02; }
.buzz-order li:nth-child(2) .pos{ background:linear-gradient(180deg,#d7dbee,#9aa3ce); color:#1b2040; }
.buzz-order li:nth-child(3) .pos{ background:linear-gradient(180deg,#e0955c,#a35a24); color:#2a1503; }
.buzz-order li:nth-child(1){ border-color:var(--gold); box-shadow:0 0 14px rgba(255,201,60,.25); }
.buzz-order .bname{ flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.buzz-order .bdelta{ color:var(--muted); font-size:.82rem; font-variant-numeric:tabular-nums; }
.buzz-empty{ color:var(--muted); font-size:.9rem; padding:.4em 0; list-style:none; }

/* ---------- Spielfeld ---------- */
.board{
    display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
}
.cat{
    background:linear-gradient(180deg, var(--panel-2), #1a2148);
    border:1px solid var(--line); border-radius:10px;
    min-height:3.4em; padding:.45em .4em;
    display:flex; align-items:center; justify-content:center; text-align:center;
    font-weight:700; font-size:clamp(.62rem, 1.5vw, .9rem); text-transform:uppercase;
    letter-spacing:.04em; color:#dfe3fa; word-break:break-word;
}
button.cat:hover{ border-color:var(--gold); color:#fff; }
.tile{
    position:relative; border-radius:10px; border:1px solid #33449e;
    background:linear-gradient(180deg, var(--tile), var(--tile-deep));
    min-height:3.1em; display:flex; align-items:center; justify-content:center;
    font-family:var(--font-disp); font-size:clamp(.8rem, 2.4vw, 1.35rem); color:var(--gold);
    text-shadow:0 2px 0 rgba(0,0,0,.45); padding:.2em;
    transition:filter .15s, transform .1s;
}
button.tile:hover{ filter:brightness(1.15); }
button.tile:focus-visible, button.cat:focus-visible{ outline:3px solid var(--gold); outline-offset:1px; }
.tile.selected{ outline:3px solid var(--gold); outline-offset:1px; box-shadow:0 0 18px rgba(255,201,60,.45); }
.tile.played{
    background:var(--bg-soft); color:#4b5387; border-color:var(--line);
    text-decoration:line-through; text-shadow:none; filter:none;
}
.tile .tick{
    position:absolute; top:3px; right:3px; width:1.6em; height:1.6em; border-radius:7px;
    border:1px solid rgba(255,255,255,.25); background:rgba(10,13,30,.45); color:#fff;
    font-family:var(--font-body); font-size:.7em; line-height:1;
    display:flex; align-items:center; justify-content:center;
}
.tile .tick:hover{ background:var(--green); color:#06281a; border-color:var(--green); }
.tile.played .tick{ background:var(--green); color:#06281a; border-color:var(--green); }
.board-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.tool-group{ display:flex; gap:6px; align-items:center; }
.tool-group label{ margin:0; }
.tool-group input{ width:4.2em; text-align:center; }
.host-hint{ margin-bottom:.8em; }

/* ---------- Scoreboard ---------- */
.award-bar{
    display:flex; gap:.5em; align-items:center; flex-wrap:wrap;
    background:var(--bg-soft); border:1px solid var(--line); border-radius:10px;
    padding:.5em .7em; margin-bottom:.8em; font-size:.9rem;
}
.award-bar strong{
    font-family:var(--font-disp); color:var(--gold); font-weight:400;
    min-width:2.5em; text-align:center; font-size:1.05rem;
}
.award-bar input{ width:7em; }

.scoreboard{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.scoreboard li{
    display:flex; align-items:center; gap:8px; padding:.55em .7em;
    background:var(--panel-2); border:1px solid var(--line); border-radius:10px;
}
.scoreboard li.me{ border-color:var(--gold); }
.rank{ color:var(--muted); font-size:.8rem; width:1.6em; flex:none; font-variant-numeric:tabular-nums; }
.dot{ width:.55em; height:.55em; border-radius:50%; background:#4b5387; flex:none; }
.dot.on{ background:var(--green); box-shadow:0 0 6px var(--green); }
.pname{ flex:1; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pts{ font-family:var(--font-disp); color:var(--gold); font-variant-numeric:tabular-nums; }
.pt-btns{ display:flex; gap:4px; }
.pt-btns button{
    border:0; border-radius:8px; width:2em; height:2em; font-weight:700; font-size:.95rem;
}
.pt-plus{ background:var(--green); color:#06281a; }
.pt-minus{ background:#e5484d; color:#fff; }
.pt-kick{ background:transparent; border:1px solid var(--line) !important; color:var(--muted); }
.pt-kick:hover{ color:#ff9b9e; border-color:#e5484d; }

/* ---------- Antwortfelder ---------- */
.answer-feed{ list-style:none; margin:.6em 0 0; padding:0; display:flex; flex-direction:column; gap:6px; max-height:380px; overflow-y:auto; }
.answer-feed li.ans{
    background:var(--bg-soft); border:1px solid var(--line); border-radius:10px; padding:.5em .7em; font-size:.92rem;
}
.ans.locked{ border-color:var(--gold); background:#1c1f3f; }
.ans.open .a-text{ color:var(--muted); font-style:italic; }
.ans.closed{ opacity:.75; }
.a-meta{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:.2em; }
.a-meta .a-name{ color:var(--gold); font-weight:700; }
.a-right{ display:flex; align-items:center; gap:6px; }
.a-text{ word-wrap:break-word; }
.a-empty{ color:#5b6497; font-style:italic; }
.chip{ font-size:.72rem; border-radius:999px; padding:.1em .6em; border:1px solid var(--line); color:var(--muted); }
.chip-locked{ background:var(--gold); border-color:var(--gold); color:#231a02; font-weight:700; }
.chip-open{ border-color:var(--green); color:var(--green); }
.field-btn{
    background:transparent; border:1px solid var(--line); border-radius:8px;
    padding:.1em .35em; font-size:.9rem; line-height:1.3;
}
.field-btn:hover{ border-color:var(--gold); }
.count-badge{ background:var(--gold); color:#231a02; border-radius:999px; padding:.08em .6em; font-size:.72rem; font-family:var(--font-body); vertical-align:middle; white-space:nowrap; }
.count-badge:empty{ display:none; }

/* ---------- Bild: groß & mittig, Klick = Vollbild ---------- */
.panel-image{ padding:10px; }
.shared-image{
    width:100%; max-height:56vh; object-fit:contain; border-radius:10px; display:block;
    border:1px solid var(--line); background:#0a0d1e; cursor:zoom-in;
}
.panel-image.flash{ animation:imgflash 1.2s ease-out; }
@keyframes imgflash{
    0%{ box-shadow:0 0 0 3px var(--gold), 0 0 40px 8px rgba(255,201,60,.55); }
    100%{ box-shadow:0 10px 26px rgba(0,0,0,.3); }
}
.lightbox{
    position:fixed; inset:0; z-index:90; background:rgba(6,8,20,.94);
    display:flex; align-items:center; justify-content:center; cursor:zoom-out; padding:16px;
}
.lightbox img{ max-width:96vw; max-height:96vh; border-radius:8px; }

/* ---------- Overlay & Toast ---------- */
.overlay{
    position:fixed; inset:0; background:rgba(9,11,26,.9); z-index:50;
    display:flex; align-items:center; justify-content:center; padding:20px;
}
.overlay[hidden]{ display:none; }
.overlay-box{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
    padding:26px 30px; max-width:420px; text-align:center; font-size:1.05rem;
}
.overlay-box a{ color:var(--gold); }
.toast{
    position:fixed; left:50%; bottom:22px; transform:translateX(-50%) translateY(20px);
    background:var(--panel-2); border:1px solid var(--gold); color:var(--text);
    padding:.6em 1.1em; border-radius:10px; opacity:0; pointer-events:none;
    transition:opacity .25s, transform .25s; z-index:60; max-width:90vw;
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- Responsiv ---------- */
@media (max-width: 1100px){
    .layout{ grid-template-columns:1fr 1fr; }
    .col-board{ grid-column:1 / -1; order:-1; }
}
@media (max-width: 680px){
    .layout{ grid-template-columns:1fr; padding:12px; }
    .col-board{ order:0; }
    .landing-cards{ grid-template-columns:1fr; }
    .topbar{ flex-wrap:wrap; }
}

@media (prefers-reduced-motion: reduce){
    *{ animation:none !important; transition:none !important; }
}