/* ===== СВОЯ ИГРА · СССР · Atomic Heart ===== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Russo+One&display=swap');

:root{
  --bg:#140b0a;
  --bg2:#1d100e;
  --panel:#241311;
  --panel2:#2e1714;
  --red:#e0231a;
  --red-deep:#9e1109;
  --gold:#e8b923;
  --gold-soft:#f4d35e;
  --cream:#f3e7c9;
  --ink:#0c0605;
  --line:#5a2a23;
  --green:#3fa34d;
  --shadow:0 8px 30px rgba(0,0,0,.55);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;height:100%;}
body{
  font-family:'Oswald',system-ui,sans-serif;
  color:var(--cream);
  background:
    radial-gradient(1200px 700px at 50% -10%, #3a1410 0%, transparent 60%),
    repeating-linear-gradient(45deg,#170c0b 0 22px,#190d0c 22px 44px),
    var(--bg);
  min-height:100%;
}
h1,h2,h3,.disp-title{font-family:'Russo One',sans-serif;letter-spacing:.5px;}

/* звёзды-фон */
.starfield::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:0;
  background-image:radial-gradient(var(--gold) 1px, transparent 1px);
  background-size:46px 46px;
}

/* серп и молот (svg помещается inline) */
.emblem{display:inline-block;vertical-align:middle;filter:drop-shadow(0 2px 4px #000);}

.bar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;
  background:linear-gradient(180deg,var(--red-deep),#5e0a05);
  border-bottom:3px solid var(--gold);box-shadow:var(--shadow);position:relative;z-index:2;
}
.bar .ttl{font-family:'Russo One';font-size:24px;color:var(--gold-soft);text-transform:uppercase;}
.bar .spacer{flex:1;}
.tag{font-size:15px;color:var(--cream);opacity:.8;}

.wrap{position:relative;z-index:1;padding:18px;max-width:1500px;margin:0 auto;}

/* кнопки */
button{font-family:'Oswald';cursor:pointer;border:none;}
.btn{
  background:linear-gradient(180deg,#e0231a,#a3120b);
  color:#fff;border:1px solid #ffcaa3;border-radius:8px;
  padding:11px 16px;font-size:15px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;
  box-shadow:0 3px 0 #6c0a05,0 6px 14px rgba(0,0,0,.4);transition:transform .05s;
}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 #6c0a05;}
.btn.gold{background:linear-gradient(180deg,#f4d35e,#d49a00);color:#3a1400;border-color:#fff3c4;box-shadow:0 3px 0 #8a6200,0 6px 14px rgba(0,0,0,.4);}
.btn.green{background:linear-gradient(180deg,#46b85b,#247a33);box-shadow:0 3px 0 #135018,0 6px 14px rgba(0,0,0,.4);}
.btn.ghost{background:#2c1714;color:var(--cream);border:1px solid var(--line);box-shadow:none;}
.btn.sm{padding:7px 11px;font-size:13px;}
.btn:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4);}

.panel{background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);border-radius:12px;padding:16px;box-shadow:var(--shadow);}
.label{font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--gold);opacity:.85;margin-bottom:6px;}

input[type=text],input[type=number]{
  font-family:'Oswald';background:#160c0b;border:1px solid var(--line);color:var(--cream);
  border-radius:8px;padding:11px 12px;font-size:16px;width:100%;
}
input:focus{outline:2px solid var(--gold);}

/* ===== ТАБЛО ===== */
.board{display:grid;gap:8px;}
.board .col{display:flex;flex-direction:column;gap:8px;}
.cat-head{
  background:linear-gradient(180deg,#7a0f08,#4c0a05);border:1px solid var(--gold);
  color:var(--gold-soft);font-family:'Russo One';text-transform:uppercase;
  font-size:16px;line-height:1.15;text-align:center;padding:12px 8px;border-radius:8px;min-height:70px;
  display:flex;align-items:center;justify-content:center;
}
.cell{
  background:radial-gradient(circle at 50% 30%,#27313f,#141c27);
  border:1px solid #3c4a5e;border-radius:8px;color:var(--gold-soft);
  font-family:'Russo One';font-size:36px;text-align:center;padding:20px 6px;
  cursor:pointer;transition:.12s;box-shadow:inset 0 0 14px rgba(0,0,0,.5);
}
.cell:hover{border-color:var(--gold);color:#fff;transform:translateY(-2px);}
.cell.used{background:#1a1110;color:#3a2a28;border-color:#2a1c1a;cursor:default;transform:none;box-shadow:none;}
.cell.used::after{content:"★";opacity:.25;}

/* ===== СЧЁТ ===== */
.scores{display:flex;flex-wrap:wrap;gap:10px;}
.score-card{
  background:linear-gradient(180deg,var(--panel),#1c0f0d);border:2px solid var(--line);
  border-radius:10px;padding:10px 14px;min-width:150px;flex:1;position:relative;overflow:hidden;
}
.score-card .nm{font-weight:600;font-size:20px;display:flex;align-items:center;gap:8px;}
.score-card .pts{font-family:'Russo One';font-size:40px;color:var(--gold-soft);}
.score-card .dot{width:14px;height:14px;border-radius:50%;border:2px solid #0008;}
.score-card.picking{border-color:var(--gold);box-shadow:0 0 0 2px var(--gold),0 0 18px rgba(232,185,35,.5);}
.score-card.off{opacity:.45;}
.badge{position:absolute;top:6px;right:8px;font-size:10px;background:var(--gold);color:#3a1400;padding:1px 6px;border-radius:6px;text-transform:uppercase;font-weight:700;}

/* ===== ВОПРОС ===== */
.q-stage{text-align:center;}
.q-price{font-family:'Russo One';color:var(--gold);font-size:36px;}
.q-cat{color:#e8b9b3;text-transform:uppercase;letter-spacing:2px;font-size:19px;margin:6px 0 16px;}
.q-text{font-size:40px;line-height:1.4;white-space:pre-wrap;max-width:1200px;margin:0 auto;}
.q-img{margin-top:18px;}
.q-img img{max-height:46vh;max-width:90%;border:3px solid var(--gold);border-radius:10px;box-shadow:var(--shadow);}
.answer-box{margin-top:18px;padding:16px;border:2px dashed var(--green);border-radius:10px;background:rgba(63,163,77,.08);}
.answer-box .a-lbl{color:var(--green);font-weight:700;letter-spacing:1px;font-size:20px;}
.modifier-stage{border:3px solid var(--gold);background:linear-gradient(180deg,#3a1d05,#241204);border-radius:14px;padding:26px;max-width:1000px;margin:0 auto;}
.modifier-stage .mh{font-family:'Russo One';color:var(--gold-soft);font-size:30px;}
.modifier-stage .mt{font-size:24px;line-height:1.45;margin-top:12px;}

/* очередь нажатий */
.buzz-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px;}
.buzz-chip{display:flex;align-items:center;gap:8px;background:#1c0f0d;border:2px solid var(--line);border-radius:30px;padding:10px 18px;font-size:22px;}
.buzz-chip .num{font-family:'Russo One';color:var(--gold);}
.buzz-chip.active{border-color:var(--green);box-shadow:0 0 14px rgba(63,163,77,.5);}

.muted{opacity:.6;}
.center{text-align:center;}
.flash{animation:flash 1s ease;}
@keyframes flash{0%{background:rgba(232,185,35,.25);}100%{background:transparent;}}

/* ===== АНИМАЦИИ ПЕРЕХОДОВ ===== */
@keyframes screenIn{
  from{opacity:0;transform:translateY(22px) scale(.985);filter:blur(2px);}
  to{opacity:1;transform:none;filter:blur(0);}
}
.screen-anim{animation:screenIn .42s cubic-bezier(.16,.84,.3,1);}

/* плитки табло появляются «волной» */
@keyframes cellIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
.screen-anim .cat-head{animation:cellIn .4s both;}
.screen-anim .col .cell{animation:cellIn .4s both;}
.screen-anim .col:nth-child(1) .cell{animation-delay:.02s;}
.screen-anim .col:nth-child(2) .cell{animation-delay:.06s;}
.screen-anim .col:nth-child(3) .cell{animation-delay:.10s;}
.screen-anim .col:nth-child(4) .cell{animation-delay:.14s;}
.screen-anim .col:nth-child(5) .cell{animation-delay:.18s;}
.screen-anim .col:nth-child(6) .cell{animation-delay:.22s;}
.screen-anim .col:nth-child(7) .cell{animation-delay:.26s;}

/* заголовок раунда над табло */
.round-banner{
  font-family:'Russo One',sans-serif;text-align:center;color:var(--gold-soft);
  font-size:30px;line-height:1.2;text-transform:uppercase;letter-spacing:.5px;
  margin:2px 0 16px;text-shadow:0 2px 10px rgba(0,0,0,.6);
}

/* ответ появляется отдельно */
.answer-box{animation:screenIn .4s cubic-bezier(.16,.84,.3,1);}
.q-img img{animation:screenIn .5s ease both;}

@media (prefers-reduced-motion: reduce){
  .screen-anim,.screen-anim .cell,.screen-anim .cat-head,.answer-box,.q-img img{animation:none !important;}
}

/* ===== ТЕЛЕФОН КОМАНДЫ ===== */
.phone{max-width:520px;margin:0 auto;padding:14px;}
.buzzer{
  width:100%;aspect-ratio:1/1;border-radius:50%;font-family:'Russo One';font-size:42px;color:#fff;
  background:radial-gradient(circle at 50% 35%,#ff4b3e,#9e1109);border:6px solid var(--gold);
  box-shadow:0 10px 0 #5a0a04,0 16px 30px rgba(0,0,0,.5);text-transform:uppercase;
}
.buzzer:active{transform:translateY(6px);box-shadow:0 4px 0 #5a0a04;}
.buzzer:disabled{background:radial-gradient(circle at 50% 35%,#5a4a48,#2a1c1a);border-color:#6b5a3a;box-shadow:0 6px 0 #1a1110;color:#9a8a88;}
.buzzer.first{background:radial-gradient(circle at 50% 35%,#46b85b,#1c6a2a);border-color:var(--gold-soft);}

/* ===== ДИСПЛЕЙ ОДНИМ ЭКРАНОМ (без прокрутки) ===== */
body.fitscreen{height:100dvh;overflow:hidden;display:flex;flex-direction:column;}
body.fitscreen .wrap{flex:1;min-height:0;overflow:hidden;width:100%;}
body.fitscreen #app{transform-origin:50% 0;}

/* ===== ЛАЙТБОКС (картинка на весь экран) ===== */
.q-img img{cursor:zoom-in;}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.93);display:flex;
  align-items:center;justify-content:center;z-index:50;cursor:zoom-out;}
.lightbox img{max-width:96vw;max-height:96vh;border:3px solid var(--gold);
  border-radius:10px;box-shadow:var(--shadow);}

/* ===== ВИДЕО (YouTube) ===== */
.q-video{margin-top:14px;display:flex;justify-content:center;}
.q-video iframe{width:min(860px,92%);aspect-ratio:16/9;border:3px solid var(--gold);
  border-radius:10px;background:#000;}

.qr-grid{display:flex;flex-wrap:wrap;gap:40px;justify-content:center;align-items:flex-start;}
/* пара QR: без VPN (IP) + с VPN (домен) */
.qr-pair{display:flex;gap:18px;flex-wrap:wrap;justify-content:center;}
.qr-one{display:flex;flex-direction:column;align-items:center;gap:6px;}
.qr-one img{background:#fff;padding:10px;border-radius:12px;border:3px solid var(--gold);box-shadow:var(--shadow);}
.qr-cap{font-size:14px;text-align:center;color:var(--cream);opacity:.85;line-height:1.35;}
.qr-cap b{color:var(--gold-soft);}
.qr-card{display:flex;flex-direction:column;align-items:center;gap:10px;}
.qr-card img{background:#fff;padding:12px;border-radius:14px;border:4px solid var(--gold);box-shadow:var(--shadow);}
.qr-role{font-family:'Russo One',sans-serif;font-size:24px;color:var(--gold-soft);text-transform:uppercase;letter-spacing:.5px;}

/* hammer-sickle emblem helper sizes */
.em-lg{width:42px;height:42px;}
.em-sm{width:22px;height:22px;}

.hidden{display:none !important;}