:root { --bg:#03050f; --gold:#e8c547; --gold-2:#f6e7b0; --blue:#4d86ff; --ok:#3dffb0; --bad:#ff5a7a; --muted:#9aa6d4; --text:#f5f7ff; --line:rgba(232,197,71,.24); }
* { box-sizing:border-box; margin:0; padding:0; }
html, body, #app { min-height:100%; }
body { background:
  radial-gradient(ellipse 80% 50% at 50% -10%, rgba(74,108,210,.38), transparent 58%),
  radial-gradient(ellipse 40% 40% at 0% 100%, rgba(120,62,12,.28), transparent 50%),
  radial-gradient(ellipse 35% 35% at 100% 90%, rgba(28,48,130,.32), transparent 48%), var(--bg);
  color:var(--text); font-family:Outfit,sans-serif; }
button, input, textarea { font-family:inherit; }
.logo { font-family:Cinzel,serif; letter-spacing:.16em; color:var(--gold); text-shadow:0 0 28px rgba(232,197,71,.4); text-align:center; }
.logo small { display:block; margin-top:8px; letter-spacing:.38em; font-size:.68rem; color:var(--gold-2); font-family:Outfit,sans-serif; font-weight:500; }
.logo.big { font-size:clamp(1.8rem,4vw,3rem); margin-bottom:26px; }
.eyebrow { font-size:.72rem; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.hint { color:var(--muted); font-size:.9rem; line-height:1.5; margin:10px 0; }
code { font-family:ui-monospace,Consolas,monospace; font-size:.84em; color:var(--gold-2); }

.panel { background:linear-gradient(180deg,rgba(22,32,74,.88),rgba(9,14,36,.9)); border:1px solid var(--line); border-radius:22px; padding:22px; box-shadow:0 22px 50px rgba(0,0,0,.32); margin-bottom:18px; }
.panel h2 { font-family:Cinzel,serif; font-size:1.02rem; color:var(--gold); margin:4px 0 12px; }
summary { cursor:pointer; color:var(--gold-2); font-weight:600; }
input[type=text], textarea { width:100%; background:rgba(6,10,28,.85); border:1px solid #2c3a72; color:var(--text); border-radius:12px; padding:10px 12px; outline:none; }
input[type=text]:focus, textarea:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,197,71,.15); }
textarea { resize:vertical; line-height:1.45; margin:8px 0; }
.home { max-width:760px; margin:0 auto; padding:40px 20px 90px; }
.names { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:18px; }
.rules { padding-left:20px; line-height:1.6; color:#d7defa; }
.rules li { margin-bottom:6px; } .rules b { color:var(--gold-2); }
.cta, .row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:18px; }

.btn { border:0; border-radius:14px; padding:11px 16px; font-size:.9rem; line-height:1.2; white-space:nowrap; cursor:pointer; font-weight:700; transition:transform .12s ease, filter .12s ease; }
.btn:hover:not(:disabled) { transform:translateY(-1px); filter:brightness(1.07); }
.btn:disabled { opacity:.4; cursor:not-allowed; }
.btn-xl { padding:14px 26px; font-size:1.05rem; }
.btn.sm { padding:8px 10px; font-size:.85rem; border-radius:10px; }
.btn-gold { background:linear-gradient(180deg,#f6dc78,#c49a1e); color:#1a1403; box-shadow:0 10px 22px rgba(196,154,30,.32); }
.btn-blue { background:linear-gradient(180deg,#5b7ef0,#2a4bb8); color:#fff; }
.btn-ghost { background:rgba(255,255,255,.03); color:var(--gold-2); border:1px solid rgba(232,197,71,.32); }
.btn-ok { background:linear-gradient(180deg,#22c58a,#12885c); color:#fff; box-shadow:0 10px 22px rgba(18,136,92,.28); }

.studio { min-height:100vh; display:grid; grid-template-rows:auto 1fr auto; }
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; padding:12px 22px; border-bottom:1px solid var(--line); background:rgba(5,9,22,.78); backdrop-filter:blur(14px); }
.brand { text-align:left; font-size:.92rem; }
.ladder { display:flex; gap:6px; }
.ladder i { width:26px; height:8px; border-radius:4px; background:#1a2554; }
.ladder i.done { background:var(--gold); } .ladder i.now { background:var(--blue); box-shadow:0 0 12px var(--blue); }
.bank { text-align:right; } .bank span { display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.bank b { font-family:Cinzel,serif; font-size:1.3rem; color:var(--gold-2); }

.center { min-height:calc(100vh - 60px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:30px 20px; }
.studio > .center { min-height:0; }
.title { font-family:Cinzel,serif; font-size:clamp(1.4rem,3vw,2.2rem); color:var(--gold-2); margin-bottom:28px; }
.cats { display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.cats .cat { width:clamp(220px,28vw,320px); padding:44px 20px; border-radius:22px; cursor:pointer; border:1px solid var(--line); color:var(--gold-2); font-family:Cinzel,serif; font-size:1.5rem; font-weight:700; background:linear-gradient(180deg,rgba(32,48,110,.9),rgba(10,16,42,.95)); box-shadow:0 22px 50px rgba(0,0,0,.35); transition:transform .15s, border-color .15s, box-shadow .15s; }
.cats .cat:hover { transform:translateY(-4px) scale(1.02); border-color:var(--gold); box-shadow:0 0 36px rgba(232,197,71,.25); }

.stage { padding:18px 22px 10px; display:flex; flex-direction:column; gap:16px; max-width:1300px; width:100%; margin:0 auto; }
.qcard { position:relative; text-align:center; padding:22px 90px; background:linear-gradient(180deg,rgba(22,32,74,.9),rgba(9,14,36,.92)); border:1px solid var(--line); border-radius:22px; }
.q { font-size:clamp(1.3rem,2.6vw,2.1rem); font-weight:600; line-height:1.3; }
.timer { position:absolute; right:22px; top:50%; transform:translateY(-50%); width:62px; height:62px; border-radius:50%; display:grid; place-items:center; font-family:Cinzel,serif; font-weight:800; font-size:1.5rem; color:var(--gold-2); border:3px solid var(--gold); }
.timer.warn { color:var(--bad); border-color:var(--bad); animation:pulse .5s infinite alternate; }
@keyframes pulse { to { box-shadow:0 0 20px var(--bad); } }

.traps { display:grid; gap:14px; grid-template-columns:repeat(4,1fr); }
.traps.n3 { grid-template-columns:repeat(3,1fr); } .traps.n2 { grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto; width:100%; }
.trap { display:flex; flex-direction:column; gap:10px; background:rgba(12,18,44,.75); border:1px solid #243260; border-radius:18px; padding:12px; transition:transform 1.1s cubic-bezier(.6,-.2,.9,.5), opacity 1.1s ease .15s, border-color .3s, box-shadow .3s; }
.ans { display:flex; align-items:center; gap:10px; min-height:52px; }
.let { flex:none; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; background:#1a2554; border:1px solid rgba(232,197,71,.4); color:var(--gold); font-weight:700; }
.txt { font-weight:600; font-size:1.05rem; }
.well { position:relative; height:clamp(110px,22vh,200px); border-radius:12px; background:rgba(2,4,14,.7); border:1px dashed #2c3a72; overflow:hidden; display:flex; align-items:flex-end; }
.cash { width:100%; background:repeating-linear-gradient(0deg,#2f8f5b 0 10px,#256f47 10px 12px); border-top:3px solid #5fd69a; transition:height .25s ease; }
.amt { position:absolute; inset:0; display:grid; place-items:center; font-family:Cinzel,serif; font-weight:800; font-size:1.05rem; text-shadow:0 2px 8px #000; }
.ctrl { display:flex; gap:6px; } .ctrl .btn { flex:1; }
.trap.ok { border-color:var(--ok); box-shadow:0 0 34px rgba(61,255,176,.35); }
.trap.fall { border-color:var(--bad); }
.trap.fall.go { transform:translateY(120vh) rotate(4deg); opacity:0; }
/* sekwencja odsłaniania: najpierw nic, potem spadają złe, na końcu zapala się dobra */
body.rv-seq .trap.ok { border-color:#243260; box-shadow:none; }
/* zapadnia wyrzucona przez prowadzącego (ręcznie lub automatem): animacja spadania, potem zostaje „po niej puste miejsce” */
.trap.dropped { border-color:var(--bad); pointer-events:none; animation:trapDrop 1.1s cubic-bezier(.6,-.2,.9,.5) both; }
.trap.dropped.gone { animation:none; transform:translateY(120vh) rotate(4deg); opacity:0; }
@keyframes trapDrop { 0%,14% { transform:none; opacity:1; } 100% { transform:translateY(120vh) rotate(4deg); opacity:0; } }
/* znacznik poprawnej odpowiedzi — renderowany tylko w widoku prowadzącego */
.key-tag { align-self:flex-start; padding:3px 10px; border-radius:999px; font-size:.74rem; font-weight:700; color:var(--ok); background:rgba(61,255,176,.1); border:1px dashed rgba(61,255,176,.6); }
body.rv-seq.rv-lit .trap.ok { border-color:var(--ok); box-shadow:0 0 34px rgba(61,255,176,.35); }
body.rv-seq:not(.rv-lit) .footbar .result, body.rv-seq:not(.rv-lit) .footbar [data-a="next"] { visibility:hidden; }
body.rv-seq:not(.rv-lit) .bank b { filter:blur(7px); }
.bank b { transition:filter .4s; }
.paused .trap { opacity:.55; }
.note { text-align:center; color:#ffd7a0; background:rgba(120,62,12,.35); border:1px solid rgba(255,170,60,.4); border-radius:12px; padding:10px 14px; }

.footbar { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:14px 22px; border-top:1px solid var(--line); background:rgba(5,9,22,.85); }
.hand { margin-right:auto; } .hand span { display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.hand b { font-family:Cinzel,serif; font-size:1.4rem; color:var(--gold-2); }
.steps { display:flex; gap:6px; }
.chip { border:1px solid rgba(232,197,71,.35); background:none; color:var(--gold-2); border-radius:999px; padding:8px 12px; cursor:pointer; font-weight:600; }
.chip.on { background:var(--gold); color:#1a1403; }
.result { margin-right:auto; font-family:Cinzel,serif; font-size:1.3rem; font-weight:700; }
.result small { display:block; font-family:Outfit,sans-serif; font-size:.8rem; font-weight:400; color:var(--muted); }
.result.good { color:var(--ok); } .result.mid { color:var(--gold-2); } .result.bad { color:var(--bad); }

.end .who { color:var(--muted); font-size:1.1rem; margin-bottom:10px; }
.prize { font-family:Cinzel,serif; font-weight:800; font-size:clamp(2.4rem,8vw,5rem); color:var(--gold); text-shadow:0 0 40px rgba(232,197,71,.6); margin:8px 0 14px; }
.prize.zero { color:var(--bad); text-shadow:0 0 30px rgba(255,90,122,.5); }

#sound-toggle { position:fixed; right:14px; bottom:14px; z-index:50; display:flex; flex-direction:row-reverse; align-items:center; height:42px; border-radius:21px; background:rgba(12,18,44,.9); border:1px solid rgba(232,197,71,.4); box-shadow:0 8px 20px rgba(0,0,0,.4); }
#sound-toggle .snd-btn { width:40px; height:40px; border:0; background:none; cursor:pointer; font-size:1.1rem; color:var(--gold-2); border-radius:50%; }
#sound-toggle.off .snd-btn { opacity:.6; }
#sound-toggle .snd-vol { width:0; opacity:0; margin:0; cursor:pointer; accent-color:var(--gold); transition:width .2s, opacity .2s, margin .2s; }
#sound-toggle:hover .snd-vol, #sound-toggle:focus-within .snd-vol { width:110px; opacity:1; margin:0 4px 0 14px; }
.footbar { padding-right:90px; }

@media (max-width:820px) {
  .traps, .traps.n3 { grid-template-columns:1fr 1fr; }
  .qcard { padding:18px 18px 82px; } .timer { top:auto; bottom:12px; right:50%; transform:translateX(50%); }
  .names { grid-template-columns:1fr; } .hand, .result { margin-right:0; width:100%; }
}

.setup { max-width:1240px; margin:0 auto; padding:36px 22px 72px; }
.setup-hero { text-align:center; margin-bottom:32px; }
.setup-hero .logo { font-size:clamp(1.6rem,3vw,2.4rem); }
.setup-grid { display:grid; grid-template-columns:1fr; gap:22px; }
.setup-grid.pnm-setup { grid-template-columns:1fr; }
.panel-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.panel-head h2 { margin-bottom:0; }
.count-pill { min-width:32px; height:28px; padding:0 10px; display:grid; place-items:center; border-radius:999px; background:rgba(232,197,71,.12); border:1px solid var(--line); color:var(--gold-2); font-weight:700; font-size:.85rem; }
.q-list { max-height:400px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; margin-top:12px; }
.q-item { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:10px; align-items:start; background:rgba(8,14,36,.8); border-radius:14px; padding:12px; border:1px solid #243260; }

.q-item .meta { color:var(--muted); font-size:.84rem; margin-top:4px; }
.q-actions { display:flex; flex-direction:column; gap:6px; }
.row-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.setup-cta { display:flex; flex-direction:column; align-items:center; margin-top:28px; text-align:center; }
.setup-cta .hint { max-width:720px; }
.btn-sm { padding:8px 12px; }
.btn-danger { background:#4e142c; color:#ffd0da; padding:8px 12px; }
.bulk-label { display:block; color:var(--gold-2); font-size:.82rem; font-weight:600; margin:4px 0 8px; }
.brand-sub { color:var(--muted); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; margin-top:2px; font-family:Outfit,sans-serif; }
.hostbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:10px 22px; border-top:1px solid var(--line); background:rgba(5,9,22,.9); }
.hostbar.slim { padding:8px 22px; }
.host-left, .host-main { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.host-hint { color:var(--gold-2); font-weight:600; }
.studio { grid-template-rows:auto 1fr auto auto; }
body.audience .studio { grid-template-rows:auto 1fr; }
body.audience #sound-toggle, body.audience .brand-sub { display:none; }
.audio-hint { position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:60; padding:8px 18px; border-radius:999px; font-size:.85rem; color:var(--gold-2); background:rgba(12,18,44,.92); border:1px solid var(--line); }
.resume-box { display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; width:min(720px,100%); margin-bottom:22px; padding:16px 20px; text-align:left; border-radius:18px; background:linear-gradient(180deg,rgba(20,138,94,.2),rgba(12,20,48,.9)); border:1px solid rgba(61,255,176,.38); }
.resume-box strong { display:block; color:var(--ok); }
.resume-box span { color:var(--muted); font-size:.9rem; }

.lobby-grid { display:grid; grid-template-columns:1fr 380px; gap:22px; max-width:1100px; margin:0 auto; padding:0 20px 40px; align-items:start; }
.lobby-list { display:flex; flex-direction:column; gap:8px; margin-top:14px; }
.lobby-row { display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:12px; background:rgba(8,13,36,.8); border:1px solid rgba(232,197,71,.18); }
.lobby-row .name { flex:1; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lobby-row .meta { color:var(--ok); font-size:.82rem; }
.lobby-row.off { opacity:.5; }
.lobby-row.off .meta { color:var(--muted); }
.seat { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; background:#1a2554; color:var(--gold); font-weight:700; font-size:.82rem; border:1px solid rgba(232,197,71,.28); flex-shrink:0; }
.room-code { font-family:Cinzel,serif; font-weight:800; font-size:clamp(2.4rem,7vw,3.6rem); letter-spacing:.25em; text-align:center; color:var(--gold); padding:14px 0 14px .25em; margin:14px 0 8px; border-radius:14px; background:rgba(4,8,24,.9); border:1px dashed var(--line); }
.break-all { word-break:break-all; text-align:center; }
.join-panel { max-width:460px; margin:0 auto; }
.net-cta { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin-bottom:14px; }
.home-grid { display:grid; grid-template-columns:1fr 1fr; gap:22px; max-width:820px; margin:10px auto 40px; padding:0 20px; }
.home-card { display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; cursor:pointer; padding:38px 24px; border-radius:22px; color:var(--text); font-size:1rem; line-height:1.5; background:linear-gradient(160deg,rgba(26,37,84,.92),rgba(10,16,42,.95)); border:1px solid var(--line); box-shadow:0 18px 40px rgba(0,0,0,.35); transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.home-card:hover { transform:translateY(-4px); border-color:var(--gold); box-shadow:0 22px 48px rgba(232,197,71,.16); }
.home-card strong { font-family:Cinzel,serif; font-size:1.5rem; color:var(--gold); }
.home-card span:last-child { color:var(--muted); font-size:.95rem; }
.home-ico { font-size:2.6rem; }
.join-panel input[type="password"] { width:100%; padding:12px 14px; border-radius:10px; border:1px solid #2f3e78; color:var(--text); margin-top:6px; background:transparent; }
.room-opts { margin-bottom:18px; text-align:left; }
.check-row { display:flex; align-items:flex-start; gap:10px; margin-top:14px; color:var(--muted); font-size:.92rem; line-height:1.4; cursor:pointer; }
.check-row input { margin-top:3px; accent-color:#e8c547; }
.room-list-panel { max-width:720px; margin:18px auto 0; }
.room-list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.room-row { flex-wrap:wrap; row-gap:8px; }
.room-code-sm { margin-left:8px; font-family:Cinzel,serif; letter-spacing:.15em; font-size:.78rem; color:var(--muted); }
.room-row .meta.live { color:#e8c547; }
.room-btns { display:flex; gap:8px; flex-wrap:wrap; }
.modal-back { position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(4,8,24,.78); backdrop-filter:blur(3px); }
.modal-box { width:100%; max-width:400px; padding:22px 22px 18px; border-radius:16px; background:#0f1738; border:1px solid rgba(232,197,71,.45); box-shadow:0 20px 60px rgba(0,0,0,.6); text-align:left; }
.modal-box h2 { margin:0 0 4px; color:var(--gold); font-family:Cinzel,serif; }
.modal-sub { margin:0 0 12px; color:var(--muted); font-size:.95rem; }
.modal-err { min-height:1.2em; margin:10px 0 0; color:#ff8a8a; font-size:.9rem; }
.session-banner { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; max-width:720px; margin:0 auto 18px; border-color:rgba(232,197,71,.45); }
.session-banner strong { display:block; }
.session-banner span { display:block; color:var(--muted); font-size:.92rem; margin-top:2px; }
label.btn { cursor:pointer; display:inline-flex; align-items:center; }
@media (max-width:820px) { .lobby-grid { grid-template-columns:1fr; } }
@media (max-width:640px) { .home-grid { grid-template-columns:1fr; } }


/* ===== poprawki wyglądu ===== */
select { background:rgba(6,10,28,.85); border:1px solid #2c3a72; color:var(--text); border-radius:12px; padding:10px 12px; outline:none; font-family:inherit; font-size:.92rem; }
select:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(232,197,71,.15); }
[hidden] { display:none !important; }

/* panel startowy: odstepy zamiast nachodzacych przyciskow */
.setup-cta { gap:18px; }
.setup-cta > * { margin:0; }
.net-cta, .audience-row { display:flex; gap:12px; flex-wrap:wrap; justify-content:center; margin:0; }
.row-actions .btn { white-space:normal; }

/* lista pytan */
.q-item { align-items:center; }
.q-stage { font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--gold); text-align:center; padding:6px 4px; border-radius:10px; background:rgba(232,197,71,.1); border:1px solid var(--line); }
.q-body { min-width:0; }
.q-text { font-weight:600; line-height:1.35; overflow-wrap:anywhere; }
.q-cat { display:inline-block; margin-right:6px; padding:1px 8px; border-radius:999px; font-size:.74rem; font-weight:700; color:var(--gold-2); background:rgba(77,134,255,.18); border:1px solid rgba(77,134,255,.35); vertical-align:1px; }
.q-item .meta { display:flex; flex-wrap:wrap; gap:4px 14px; overflow-wrap:anywhere; }
.good-ans { color:var(--ok); } .bad-ans { color:#ff9db0; }
.q-actions { flex-direction:row; }
.q-list { max-height:460px; }
.q-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-top:14px; }
.q-toolbar input[type=text] { flex:1 1 200px; width:auto; }
.stage-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.stage-chip { padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:700; color:var(--ok); background:rgba(61,255,176,.08); border:1px solid rgba(61,255,176,.3); }
.stage-chip.low { color:#ffb4a0; background:rgba(255,90,122,.12); border-color:rgba(255,90,122,.45); }

/* okno edycji pytania */
.modal-back { overflow-y:auto; align-items:flex-start; }
.modal-box { margin:auto; }
.modal-box.wide { max-width:640px; }
.modal-box textarea, .modal-box select { width:100%; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.form-grid.three { grid-template-columns:repeat(3,1fr); }
.modal-box .bulk-label { margin-top:12px; }
.in-ok { border-color:rgba(61,255,176,.55) !important; }
.in-bad { border-color:rgba(255,90,122,.4) !important; }
.modal-actions { justify-content:flex-end; margin-top:16px; }

/* plansza gry */
.traps-clip { overflow:hidden; overflow:clip; overflow-clip-margin:44px; margin:-8px; padding:8px; }
.trap { min-width:0; }
.txt { min-width:0; overflow-wrap:anywhere; line-height:1.25; }
.amt { padding:0 8px; pointer-events:none; }
.amt span { display:inline-block; max-width:100%; padding:4px 12px; border-radius:10px; background:rgba(2,4,14,.72); border:1px solid rgba(255,255,255,.08); font-size:clamp(.82rem,1.1vw,1.05rem); overflow-wrap:anywhere; }
.ctrl { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.ctrl .btn { flex:none; width:100%; padding:9px 6px; font-size:.82rem; min-width:0; }
.ctrl .btn.wide { grid-column:1 / -1; }
.qcard .q { overflow-wrap:anywhere; }
.note { overflow-wrap:anywhere; }

/* paski na dole: miejsce na przycisk dzwieku */
.footbar, .hostbar { padding-right:68px; }
.footbar { row-gap:10px; }
.steps { flex-wrap:wrap; }

@media (max-width:820px) {
  body { padding-bottom:60px; }
  .topbar { grid-template-columns:1fr auto; grid-template-areas:"brand bank" "ladder ladder"; row-gap:10px; padding:10px 14px; }
  .brand { grid-area:brand; } .bank { grid-area:bank; white-space:nowrap; } .bank b { font-size:1.1rem; }
  .ladder { grid-area:ladder; justify-content:center; } .ladder i { flex:1; max-width:40px; width:auto; }
  .brand { font-size:.8rem; letter-spacing:.1em; }
  .stage { padding:12px 12px 8px; }
  .qcard { padding:16px 14px 84px; }
  .traps { gap:10px; } .trap { padding:10px; }
  .well { height:clamp(90px,16vh,130px); }
  .ans { min-height:0; } .let { width:30px; height:30px; }
  .footbar { padding:12px 14px; justify-content:center; } .footbar .hand, .footbar .result { width:100%; text-align:center; }
  .hostbar { padding:10px 14px; }
  .q-item { grid-template-columns:minmax(0,1fr); gap:8px; } .q-stage { justify-self:start; padding:3px 10px; }
  .q-actions { justify-content:flex-end; }
  .form-grid, .form-grid.three { grid-template-columns:1fr; }
  .cats .cat { width:100%; padding:30px 16px; font-size:1.25rem; }
  .cats { gap:12px; width:100%; }
}

input[type=text], input[type=password], textarea, select { font-size:.95rem; }
select { min-height:42px; }

/* gra drużynowa: status zatwierdzeń */
.team-confirm { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; }
.tc-label { font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }
.tc { padding:6px 14px; border-radius:999px; font-weight:700; color:var(--gold-2); background:rgba(232,197,71,.08); border:1px solid rgba(232,197,71,.35); }
.tc.ok { color:var(--ok); background:rgba(61,255,176,.1); border-color:rgba(61,255,176,.45); }
.cats .cat .votes { display:block; margin-top:12px; font-family:Outfit,sans-serif; font-style:normal; font-size:.9rem; font-weight:600; color:var(--ok); }
.cats .cat.mine { border-color:var(--ok); box-shadow:0 0 30px rgba(61,255,176,.3); }
.cats .cat:disabled { cursor:default; opacity:.85; }
.cats .cat:disabled:hover { transform:none; border-color:var(--line); box-shadow:0 22px 50px rgba(0,0,0,.35); }
.cats .cat.mine:disabled:hover { border-color:var(--ok); }

/* ekran zapowiedzi wybranej kategorii */
.cats .cat .cat-ico { display:block; font-size:2.2rem; line-height:1; margin-bottom:12px; font-weight:400; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4)); }
.cat-picked { position:relative; overflow:hidden; overflow:clip; gap:0; }
.cat-picked > * { position:relative; z-index:1; }
.cat-picked .cp-rays { position:absolute; z-index:0; left:50%; top:50%; width:150vmax; height:150vmax; margin:-75vmax 0 0 -75vmax; pointer-events:none;
  background:repeating-conic-gradient(from 0deg, rgba(232,197,71,.10) 0 6deg, transparent 6deg 18deg);
  -webkit-mask-image:radial-gradient(circle, #000 0, transparent 34%); mask-image:radial-gradient(circle, #000 0, transparent 34%);
  animation:cpSpin 40s linear infinite, cpFade 1s ease both; }
.cat-picked::before { content:""; position:absolute; z-index:0; left:50%; top:50%; width:min(900px,120vw); height:min(900px,120vw); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(77,134,255,.28), rgba(232,197,71,.08) 40%, transparent 68%); pointer-events:none; }
.cp-pill { padding:7px 18px; border-radius:999px; border:1px solid var(--line); background:rgba(5,9,22,.6); color:var(--muted); font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; margin-bottom:26px; animation:cpUp .6s ease both; }
.cp-card { position:relative; min-width:min(560px,88vw); padding:44px clamp(26px,6vw,70px) 38px; border-radius:26px; border:1px solid rgba(232,197,71,.55);
  background:linear-gradient(180deg,rgba(32,48,110,.92),rgba(8,13,36,.96)); box-shadow:0 0 0 6px rgba(232,197,71,.06), 0 30px 80px rgba(0,0,0,.55), 0 0 90px rgba(232,197,71,.18);
  animation:cpCard .75s cubic-bezier(.2,1.2,.4,1) .1s both; }
.cp-corner { position:absolute; width:22px; height:22px; border:2px solid var(--gold); opacity:.9; }
.cp-corner.tl { left:12px; top:12px; border-right:0; border-bottom:0; border-top-left-radius:10px; }
.cp-corner.tr { right:12px; top:12px; border-left:0; border-bottom:0; border-top-right-radius:10px; }
.cp-corner.bl { left:12px; bottom:12px; border-right:0; border-top:0; border-bottom-left-radius:10px; }
.cp-corner.br { right:12px; bottom:12px; border-left:0; border-top:0; border-bottom-right-radius:10px; }
.cp-icon { font-size:clamp(3rem,9vw,4.8rem); line-height:1; filter:drop-shadow(0 8px 22px rgba(232,197,71,.45)); animation:cpIcon .8s cubic-bezier(.2,1.4,.4,1) .35s both; }
.cp-label { margin-top:18px; font-size:.78rem; letter-spacing:.32em; text-transform:uppercase; color:var(--muted); animation:cpUp .6s ease .5s both; }
.cp-name { margin:8px 0 0; font-family:Cinzel,serif; font-size:clamp(2.2rem,7vw,4.4rem); font-weight:800; line-height:1.1; letter-spacing:.04em;
  background:linear-gradient(180deg,#fff6cf,#e8c547 70%,#b88a14); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 26px rgba(232,197,71,.35)); animation:cpName .8s cubic-bezier(.2,1.2,.4,1) .6s both; }
.cp-rule { height:2px; width:0; margin:22px auto 0; border-radius:2px; background:linear-gradient(90deg,transparent,var(--gold),transparent); animation:cpRule .9s ease .95s forwards; }
.cp-note { margin-top:18px; color:var(--gold-2); font-size:1rem; line-height:1.5; max-width:34ch; margin-left:auto; margin-right:auto; animation:cpUp .6s ease 1.1s both; }
.cp-bar { width:min(360px,70vw); height:4px; margin-top:30px; border-radius:4px; background:rgba(255,255,255,.08); overflow:hidden; }
.cp-bar i { display:block; height:100%; background:linear-gradient(90deg,#c49a1e,#f6dc78); box-shadow:0 0 12px rgba(232,197,71,.6); transform-origin:left; animation:cpBar linear both; }
@keyframes cpSpin { to { transform:rotate(360deg); } }
@keyframes cpFade { from { opacity:0; } to { opacity:1; } }
@keyframes cpUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
@keyframes cpCard { from { opacity:0; transform:scale(.7) translateY(20px); } to { opacity:1; transform:none; } }
@keyframes cpIcon { from { opacity:0; transform:scale(.2) rotate(-20deg); } to { opacity:1; transform:none; } }
@keyframes cpName { from { opacity:0; transform:scale(.8); letter-spacing:.3em; } to { opacity:1; transform:none; letter-spacing:.04em; } }
@keyframes cpRule { to { width:min(260px,60%); } }
@keyframes cpBar { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@media (prefers-reduced-motion:reduce) { .cat-picked .cp-rays { animation:none; } }

/* czytanie pytania */
.read-bar { position:absolute; left:22px; right:22px; bottom:10px; height:3px; border-radius:3px; background:rgba(255,255,255,.08); overflow:hidden; }
.read-bar i { display:block; height:100%; background:linear-gradient(90deg,#c49a1e,#f6dc78); transform-origin:left; animation:rdBar linear both; }
@keyframes rdBar { from { transform:scaleX(1); } to { transform:scaleX(0); } }

/* ustawienia pokoju: lista liczby graczy na całą szerokość */
.room-opts select { width:100%; margin-bottom:8px; }