/* ═══════════════════════════════════════════════════════════════════════════
   Zapytaj — style silnika gry.  Paleta: Strona Dobra.
   Wspólne dla wszystkich gier tego silnika — nie edytuj per-gra.
═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg-0:#2a0304; --bg-1:#450507; --panel:#380406; --panel-2:#520a0a;
  --card:#4a090b; --tile:#5c1010; --tile-2:#480a0c;
  --deepred:#6c0c00; --red:#c22504; --red-2:#e2401c;
  --orange:#f05400; --orange-2:#ff7a24; --gold:#ffb35a;
  --ink:#fdf3ec; --muted:#e0b0a2;
  --line:rgba(255,179,90,.18); --line-soft:rgba(255,255,255,.09);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:var(--sans);color:var(--ink);
  background:radial-gradient(900px 620px at 85% -10%,#5a0a0a 0%,transparent 60%),
             linear-gradient(165deg,var(--bg-0),var(--bg-1));
  overflow:hidden;
}
button{font-family:inherit;cursor:pointer}

.zap-empty{font-family:var(--sans);padding:48px 24px;text-align:center;color:var(--ink)}
.zap-empty h2{font-family:var(--serif);color:var(--gold);margin:0 0 10px}
.zap-empty p{color:var(--muted);max-width:520px;margin:0 auto;line-height:1.5}

.app{display:grid;grid-template-columns:296px 1fr;height:100vh}

/* ── PANEL BOCZNY ───────────────────────────────────────────────────────── */
.side{background:linear-gradient(185deg,var(--panel),var(--bg-0));color:var(--ink);
  display:flex;flex-direction:column;padding:18px 16px;gap:13px;min-height:0}
.brand h1{font-family:var(--serif);font-weight:900;font-size:32px;letter-spacing:.4px;margin:0;color:#fff}
.brand .tagline{font-family:var(--serif);font-style:italic;font-size:13px;color:var(--gold);margin-top:2px}
.fs-btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:9px;
  border-radius:10px;border:1px solid var(--line-soft);background:rgba(255,255,255,.05);
  color:var(--ink);font-size:13px;font-weight:600;transition:.15s}
.fs-btn:hover{background:rgba(255,179,90,.14)}
.label{font-size:10.5px;letter-spacing:1.4px;text-transform:uppercase;
  color:rgba(253,243,236,.5);font-weight:700}

.teams{display:flex;flex-direction:column;gap:8px;overflow:auto;min-height:0;flex:1}
.team{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1.5px solid transparent;transition:.18s;position:relative;cursor:pointer}
.team:hover{background:rgba(255,255,255,.09)}
.team.active{border-color:var(--orange);
  background:linear-gradient(135deg,rgba(240,84,0,.28),rgba(240,84,0,.06));
  box-shadow:0 8px 22px -12px var(--orange)}
.team .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto}
.team .nm{font-weight:600;font-size:14px;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.team .sc{font-family:var(--serif);font-weight:900;font-size:21px;
  font-variant-numeric:tabular-nums;color:var(--gold)}
.team .sc.neg{color:#ff8f6b}
.team .crown{position:absolute;top:-7px;right:8px;font-size:13px}

.foot{background:linear-gradient(180deg,var(--panel-2),var(--bg-0));border:1px solid var(--line);
  border-radius:16px;padding:14px;display:flex;flex-direction:column;gap:12px}
.stat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;
  border-radius:12px;background:linear-gradient(135deg,rgba(255,179,90,.16),rgba(240,84,0,.05));
  border:1.5px solid rgba(255,179,90,.4)}
.stat .t{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--gold);font-weight:700}
.stat b{font-family:var(--serif);font-weight:900;font-size:26px;color:var(--gold);line-height:1}
.powered{display:flex;flex-direction:column;align-items:center;gap:7px}
.powered span{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:700}
.powered a{color:var(--gold);text-decoration:none}
.powered .pill{background:#fff;border-radius:10px;padding:6px 12px;display:inline-flex;transition:opacity .2s}
.powered .pill:hover{opacity:.85}
.powered img{height:28px;width:auto;display:block}

/* ── PLANSZA ────────────────────────────────────────────────────────────── */
.main{padding:22px 26px;display:flex;flex-direction:column;min-height:0;overflow:hidden}
.board{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;min-height:0}
.col{display:flex;flex-direction:column;gap:10px;min-height:0}
.cat{min-height:66px;display:flex;align-items:center;justify-content:center;text-align:center;
  padding:10px 12px;font-family:var(--serif);font-weight:700;font-size:clamp(18px,2.1vw,31px);
  line-height:1.08;color:#fff;border-radius:13px;
  background:linear-gradient(180deg,var(--orange-2),var(--red));box-shadow:0 6px 16px -10px #000}
.cells{flex:1;display:grid;grid-template-rows:repeat(6,1fr);gap:10px;min-height:0}
.cell{display:flex;align-items:center;justify-content:center;border-radius:13px;
  border:1px solid var(--line-soft);background:linear-gradient(155deg,var(--tile),var(--tile-2));
  font-family:var(--serif);font-weight:900;font-size:clamp(26px,3vw,48px);color:var(--gold);
  cursor:pointer;transition:transform .12s,box-shadow .18s,opacity .25s,color .15s}
.cell:hover:not(.used){transform:translateY(-3px);color:#fff;
  box-shadow:0 14px 30px -14px var(--orange);border-color:var(--orange)}
.cell.used{opacity:.28;pointer-events:none;color:var(--muted);
  background:var(--tile-2);border-color:transparent;cursor:default}

/* ── OVERLAY / KARTY ────────────────────────────────────────────────────── */
.overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(20,2,2,.55);backdrop-filter:blur(7px);z-index:50;padding:20px}
/* Okno pytania zasłania TYLKO planszę — panel z punktami drużyn zostaje czytelny
   (niezbędne do decyzji taktycznych przy stawce w bonusie). */
#qOverlay{left:296px}
.hidden{display:none!important}

.card{width:min(560px,94vw);background:var(--card);border-radius:22px;padding:30px;
  box-shadow:0 40px 90px -24px #000;border:1px solid var(--line)}
.card h2{font-family:var(--serif);font-weight:900;font-size:30px;margin:0 0 4px;color:#fff}
.card .sub{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--gold);margin:0 0 22px}
.count{display:flex;gap:10px;margin:12px 0 22px}
.count button{flex:1;padding:16px 0;border-radius:14px;border:1.5px solid var(--line);
  background:var(--tile-2);color:var(--ink);font-family:var(--serif);font-weight:900;font-size:24px;transition:.15s}
.count button.on,.count button:hover{border-color:var(--orange);background:rgba(240,84,0,.15);color:var(--gold)}
.names{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.nameRow{display:flex;align-items:center;gap:10px}
.nameRow .dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto}
.nameRow input{flex:1;padding:11px 13px;border-radius:10px;border:1.5px solid var(--line);
  background:var(--bg-0);color:var(--ink);font-size:14px;font-family:inherit}
.nameRow input:focus{outline:none;border-color:var(--orange)}
.time-box{margin:4px 0 22px}
.time-box .tb-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.time-box .tb-lbl{color:var(--muted);font-size:13px}
.time-box .tb-top b{font-family:var(--serif);font-weight:900;font-size:22px;color:var(--gold)}
.btn-primary{width:100%;padding:15px;border-radius:14px;border:none;
  background:linear-gradient(135deg,var(--orange-2),var(--red));color:#fff;
  font-weight:800;font-size:16px;letter-spacing:.3px;transition:.15s}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* ── OKNO PYTANIA (duże — czytelne z końca klasy) ───────────────────────── */
.modal{width:min(1060px,calc(100% - 28px));background:var(--card);border-radius:22px;overflow:hidden;
  box-shadow:0 40px 100px -24px #000;display:flex;flex-direction:column;max-height:94vh;
  border:1px solid var(--line)}
.modal .top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:18px 28px;border-bottom:1px solid var(--line)}
.modal .cat-tag{font-family:var(--serif);font-weight:600;color:var(--gold);font-size:21px}
.modal .pts{font-family:var(--serif);font-weight:900;font-size:19px;color:#fff;padding:6px 17px;
  border-radius:999px;background:linear-gradient(135deg,var(--orange-2),var(--red));white-space:nowrap}
.modal .body{padding:34px 42px;overflow:auto}
.kicker{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-bottom:10px}
.kicker-warn{color:#ff8f6b}
.clue{font-family:var(--serif);font-weight:600;font-size:clamp(25px,3.4vw,42px);line-height:1.3;color:#fff}
.answer-box{margin-top:26px;padding:22px 24px;border-radius:14px;border:1.5px dashed var(--gold);
  background:rgba(255,179,90,.09)}
.answer-box .kicker{color:var(--gold)}
.answer-box .q{font-family:var(--serif);font-weight:900;font-size:clamp(22px,3vw,34px);color:var(--gold)}

.timer-wrap{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.timer{font-family:var(--serif);font-weight:900;font-size:42px;font-variant-numeric:tabular-nums;
  min-width:108px;text-align:center;padding:8px 0;border-radius:12px;border:1.5px solid var(--line);
  background:var(--bg-0);color:var(--gold)}
.timer.warn{color:var(--orange-2);border-color:var(--orange)}
.timer.zero{color:#ff8f6b;animation:zap-pulse 1s infinite}
@keyframes zap-pulse{50%{opacity:.4}}
.timer-wrap .who{color:var(--muted);font-size:14px}

.modal .actions{display:flex;gap:12px;padding:20px 28px;border-top:1px solid var(--line);
  background:var(--tile-2)}
.modal .actions button{flex:1;padding:18px;border-radius:13px;border:none;font-weight:800;
  font-size:17px;transition:.15s;color:#fff}
.act-reveal{background:linear-gradient(135deg,var(--orange-2),var(--red))}
.act-good{background:linear-gradient(135deg,#ff9a3d,var(--orange))}
.act-bad{background:linear-gradient(135deg,#7a1512,var(--deepred));color:var(--muted)}
.modal .actions button:hover{filter:brightness(1.08);transform:translateY(-1px)}

/* ── BONUS / PRZEJĘCIE / KONIEC ─────────────────────────────────────────── */
.bonus{padding:30px 34px;text-align:center}
.bonus .badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:999px;
  margin-bottom:16px;background:linear-gradient(135deg,var(--gold),var(--orange));color:#3a1500;
  font-weight:800;letter-spacing:2px;text-transform:uppercase;font-size:14px}
.bonus .badge-time{background:linear-gradient(135deg,#ff8f6b,var(--red));color:#fff}
.bonus .who{font-family:var(--serif);font-size:21px;margin-bottom:6px;color:#fff}
.bonus .who b{color:var(--gold)}
.bonus .rule{color:var(--muted);font-size:14px;line-height:1.55;margin-bottom:20px}
.bonus .rule b{color:var(--gold)}
.bonus .rule i{color:#ff8f6b;font-style:normal}
.bet-val{font-family:var(--serif);font-weight:900;font-size:58px;color:var(--gold);line-height:1}
.bet-val small{font-size:17px;color:var(--muted);font-weight:600;font-family:var(--sans)}
.slider-row{display:flex;align-items:center;gap:14px;margin:18px 0 4px}
.slider-row span{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:28px}
.bet-stake{color:var(--muted);font-size:14px;margin-top:14px}
.bet-stake b{color:var(--gold)}
.bet-stake i{color:#ff8f6b;font-style:normal}

input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--orange) var(--p,50%),#6b2418 var(--p,50%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold),var(--orange));cursor:pointer;
  box-shadow:0 4px 14px -3px var(--orange),0 0 0 4px rgba(255,179,90,.18)}
input[type=range]::-moz-range-thumb{width:26px;height:26px;border:none;border-radius:50%;
  background:var(--orange);cursor:pointer}

.steal-opts{display:flex;flex-direction:column;gap:10px}
.steal-btn{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 22px;
  border-radius:14px;border:1.5px solid var(--line);background:var(--tile-2);color:var(--ink);
  text-align:left;transition:.15s}
.steal-btn:hover{border-color:var(--orange);background:rgba(240,84,0,.12);transform:translateY(-1px)}
.steal-btn .lbl{font-family:var(--serif);font-weight:900;font-size:20px;display:flex;align-items:center;gap:10px}
.steal-btn .dot{width:12px;height:12px;border-radius:50%}
.steal-btn .eff{font-size:13px;font-weight:700;color:var(--muted)}

.winner{font-family:var(--serif);font-weight:900;font-size:44px;color:var(--gold);margin:4px 0 18px}
.end-list{display:flex;flex-direction:column;gap:8px;text-align:left}
.end-row{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:12px;
  background:var(--tile-2);border:1px solid var(--line-soft)}
.end-row .pos{font-family:var(--serif);font-weight:900;color:var(--muted);min-width:24px}
.end-row .dot{width:12px;height:12px;border-radius:50%}
.end-row .nm{flex:1;font-weight:600}
.end-row .sc{font-family:var(--serif);font-weight:900;font-size:22px;color:var(--gold);
  font-variant-numeric:tabular-nums}
.end-row .sc.neg{color:#ff8f6b}

/* ── TELEFON — układ blokowy (przewijanie, bez nachodzenia) ─────────────── */
@media (max-width:820px){
  html,body{height:auto;overflow:auto}
  .app{display:block;height:auto;min-height:100vh}
  #qOverlay{left:0}                     /* panel jest u góry → okno pełnoekranowe */
  .modal{width:min(680px,calc(100% - 20px))}
  .modal .body{padding:22px 20px}
  .bonus{padding:22px 20px}

  .side{padding:14px;gap:11px}
  .brand h1{font-size:27px}
  .teams{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;gap:8px;flex:none;padding-bottom:4px}
  .team{min-width:140px;flex:0 0 auto}
  .foot{flex-direction:row;align-items:center;justify-content:space-between;gap:12px}
  .foot .stat{flex:1}
  .powered{flex-direction:row;gap:9px}

  .main{display:block;overflow:visible;padding:14px}
  .board{display:block;min-height:0}
  .col{display:block;flex:none;margin-bottom:18px;min-height:0}
  .cat{min-height:0;display:block;font-size:21px;padding:13px 14px;margin-bottom:9px}
  .cells{display:grid!important;flex:none;grid-template-rows:none!important;
    grid-template-columns:repeat(3,1fr);grid-auto-rows:66px;gap:9px;min-height:0}
  .cell{font-size:25px}
}