/* =======================================================================
   Экран ведущего — неоновая тема для большого экрана / телевизора
   ======================================================================= */
:root{
  --ink:#05060a;
  --mag:#ff2fd0; --cyan:#22e0ff; --lime:#b6ff2f; --gold:#ffd23f; --violet:#a855f7;
  --red:#ff2d55; --yel:#ffd23f; --grn:#3dff88; --blu:#22a7ff;
  --text:#eaf6ff; --dim:#8094ab;
  --gap: clamp(8px, 1.1vw, 18px);
  --radius: clamp(14px, 1.6vw, 26px);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--ink); color:var(--text); overflow:hidden;
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button{font-family:inherit; border:0; background:none; color:inherit}
/* ведущий работает мышью на большом экране — курсор-микрофон вместо системного */
body, button, a, .cell, .ctl, .ghost{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 38 38'%3E%3Cg fill='none' stroke='%2322e0ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='13' y='4' width='12' height='19' rx='6' fill='%23ff2fd0' fill-opacity='.85' stroke='%23fff'/%3E%3Cpath d='M8.5 18a10.5 10.5 0 0 0 21 0'/%3E%3Cpath d='M19 28.5V34'/%3E%3Cpath d='M12.5 34h13'/%3E%3C/g%3E%3C/svg%3E") 19 4, pointer}
[hidden]{display:none !important}

/* неоновый фон с сеткой */
.neon-bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(80% 55% at 12% 0%, rgba(255,47,208,.20), transparent 62%),
    radial-gradient(75% 55% at 88% 8%, rgba(34,224,255,.18), transparent 62%),
    radial-gradient(70% 50% at 50% 108%, rgba(168,85,247,.20), transparent 60%),
    var(--ink);
}
.neon-bg::after{
  content:""; position:absolute; inset:0; opacity:.14;
  background-image:linear-gradient(rgba(34,224,255,.26) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,47,208,.2) 1px, transparent 1px);
  background-size:clamp(40px,4vw,70px) clamp(40px,4vw,70px);
  mask-image:radial-gradient(80% 70% at 50% 45%, #000, transparent 78%);
}

/* ======================= ЭКРАН 1 ======================= */
.board{
  position:fixed; inset:0; z-index:1; display:flex; flex-direction:column;
  padding: clamp(10px,1.6vh,22px) clamp(12px,2vw,34px) clamp(14px,2.4vh,28px);
  will-change:transform,filter,opacity;
}
.board__head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:clamp(8px,1.4vh,18px)}
.board__head h1{
  margin:0; font-family:"Oswald",sans-serif; font-weight:700;
  font-size:clamp(18px,2.6vw,38px); letter-spacing:.09em; text-transform:uppercase; color:#fff;
  text-shadow:0 0 10px rgba(34,224,255,.85), 0 0 30px rgba(34,224,255,.5), 0 0 60px rgba(255,47,208,.35);
}
.board__tools{display:flex; align-items:center; gap:10px}
.counter{font-size:clamp(11px,1vw,14px); color:var(--dim); letter-spacing:.04em}
.ghost{
  border:1px solid rgba(34,224,255,.32); color:#bfe8ff; border-radius:999px;
  padding:7px 14px; font-size:clamp(11px,1vw,14px); font-weight:700;
  background:rgba(10,14,22,.7); transition:.18s; display:inline-flex; align-items:center; gap:6px;
}
.ghost:hover{color:#fff; border-color:var(--cyan); box-shadow:0 0 16px rgba(34,224,255,.4)}
a.ghost{text-decoration:none}
.ghost--accent{border-color:rgba(255,47,208,.45); color:#ffc9f2}
.ghost--accent:hover{border-color:var(--mag); box-shadow:0 0 18px rgba(255,47,208,.5)}
.ghost--warn{color:var(--gold); border-color:rgba(255,210,63,.5); background:rgba(40,30,4,.8)}
.ghost.is-live{
  color:#fff; border-color:var(--mag); background:rgba(70,6,52,.75);
  box-shadow:0 0 18px rgba(255,47,208,.55); animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{50%{box-shadow:0 0 30px rgba(255,47,208,.85)}}

.grid{flex:1; display:grid; grid-template-rows:repeat(5,1fr); gap:var(--gap); min-height:0}
.row{display:grid; grid-template-columns:1.45fr repeat(4,1fr); gap:var(--gap); min-height:0}

/* категории — тёмное стекло с неоновой каймой */
.cat{
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  border-radius:var(--radius); padding:6px 14px;
  background:linear-gradient(180deg, rgba(20,26,40,.95), rgba(8,11,18,.95));
  color:#fff; font-family:"Oswald",sans-serif; font-weight:700; text-transform:uppercase;
  font-size:clamp(11px,1.28vw,22px); line-height:1.12; letter-spacing:.04em;
  border:1.5px solid rgba(34,224,255,.45);
  box-shadow:0 0 18px rgba(34,224,255,.22), inset 0 0 26px rgba(34,224,255,.08);
  text-shadow:0 0 12px rgba(34,224,255,.75);
}
.cat small{display:block; margin-top:.25em; font-size:.6em; opacity:.6; font-weight:500; letter-spacing:0; text-shadow:none}

/* ячейки — неоновые плитки */
.cell{
  position:relative; border-radius:var(--radius); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:rgba(8,11,18,.92); border:2px solid var(--c, var(--cyan));
  box-shadow:0 0 18px color-mix(in srgb, var(--c,var(--cyan)) 45%, transparent),
             inset 0 0 30px color-mix(in srgb, var(--c,var(--cyan)) 18%, transparent);
  transition:transform .18s cubic-bezier(.2,.9,.3,1.4), box-shadow .18s, filter .18s;
  will-change:transform;
}
.cell::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c,var(--cyan)) 25%, transparent), transparent 70%);
}
.cell--red{--c:var(--red)} .cell--yel{--c:var(--yel)} .cell--grn{--c:var(--grn)} .cell--blu{--c:var(--blu)}
.cell:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 0 42px color-mix(in srgb, var(--c,var(--cyan)) 85%, transparent),
             inset 0 0 40px color-mix(in srgb, var(--c,var(--cyan)) 28%, transparent);
}
.cell:active{transform:translateY(1px) scale(.99)}

.cell__pts{
  position:relative; z-index:2; font-family:"Oswald",sans-serif; font-weight:700;
  font-size:clamp(26px,4.4vw,74px); line-height:1; letter-spacing:.02em; color:#fff;
  text-shadow:0 0 12px var(--c,var(--cyan)), 0 0 34px color-mix(in srgb, var(--c,var(--cyan)) 70%, transparent);
}
.cell__note{
  position:absolute; z-index:1; right:12%; top:50%; transform:translateY(-50%);
  width:34%; max-width:70px; opacity:.55; fill:none; stroke:var(--c,var(--cyan)); stroke-width:6;
  filter:drop-shadow(0 0 6px var(--c,var(--cyan)));
}
.cell--done,.cell--empty{
  pointer-events:none; background:rgba(8,10,14,.85); border-color:rgba(255,255,255,.06); box-shadow:none;
}
.cell--done::after,.cell--empty::after{display:none}
.cell--done > *{display:none}
.cell--empty .cell__note{opacity:.1; stroke:#4a5666; filter:none}
.cell--empty .cell__pts{color:#333d4a; text-shadow:none}

/* провал внутрь */
.board.diving{animation:dive-out .62s cubic-bezier(.6,0,.75,0) forwards}
@keyframes dive-out{0%{transform:scale(1); filter:blur(0) brightness(1); opacity:1}100%{transform:scale(1.6); filter:blur(14px) brightness(.4); opacity:0}}
.board.rising{animation:dive-in .55s cubic-bezier(.16,1,.3,1) forwards}
@keyframes dive-in{0%{transform:scale(1.45); filter:blur(12px) brightness(.5); opacity:0}100%{transform:scale(1); filter:blur(0) brightness(1); opacity:1}}

.dive{position:fixed; inset:0; pointer-events:none; z-index:60}
.dive__cell{position:fixed; border-radius:var(--radius); will-change:transform,opacity}

/* ======================= ЭКРАН 2 ======================= */
.task{
  position:fixed; inset:0; z-index:40; display:none;
  padding:clamp(12px,2.2vh,28px) clamp(14px,3vw,48px);
  background:radial-gradient(120% 90% at 50% 0%, #0d1220 0%, #06080e 55%, #04050a 100%);
}
.task.open{display:flex; flex-direction:column}
.task__glow{
  position:absolute; inset:-30% -10% auto -10%; height:70%;
  background:radial-gradient(60% 100% at 50% 0%, var(--accent,#22e0ff) 0%, transparent 70%);
  opacity:.3; filter:blur(40px); pointer-events:none; transition:opacity .4s;
}
.task__inner{position:relative; z-index:2; flex:1; display:flex; flex-direction:column; min-height:0}
.task__top{display:flex; align-items:center; justify-content:space-between; gap:20px}
.task__cat{
  font-family:"Oswald",sans-serif; text-transform:uppercase; letter-spacing:.1em;
  font-size:clamp(14px,2.1vw,34px); color:#fff; text-shadow:0 0 14px var(--accent,#22e0ff);
}
.task__pts{
  font-family:"Oswald",sans-serif; font-weight:700; font-size:clamp(20px,3vw,46px);
  padding:.05em .55em; border-radius:999px; color:#fff; background:rgba(8,11,18,.9);
  border:2px solid var(--accent,#22e0ff);
  box-shadow:0 0 26px color-mix(in srgb, var(--accent,#22e0ff) 70%, transparent);
  text-shadow:0 0 14px var(--accent,#22e0ff);
}

.stage{flex:1; display:flex; align-items:center; justify-content:center; min-height:0; position:relative; padding:clamp(6px,2vh,26px) 0}

.viz{position:relative; z-index:1; width:100%; max-width:1100px; display:flex; flex-direction:column; align-items:center; gap:14px}
.viz canvas{width:100%; height:clamp(140px,30vh,320px); display:block; filter:drop-shadow(0 0 14px color-mix(in srgb, var(--accent,#22e0ff) 55%, transparent))}
.viz__hint{color:var(--dim); font-size:clamp(12px,1.2vw,17px); letter-spacing:.04em}

.emoji-box{
  font-size:clamp(52px,13vw,190px); line-height:1.25; text-align:center; letter-spacing:.06em;
  filter:drop-shadow(0 12px 40px rgba(0,0,0,.6));
  animation:emoji-in .7s cubic-bezier(.16,1,.3,1) both;
}
@keyframes emoji-in{from{opacity:0; transform:scale(.6) rotate(-6deg)}to{opacity:1; transform:none}}

.puzzle{
  max-height:min(56vh,620px); max-width:92%; border-radius:22px; border:2px solid var(--accent,#22e0ff);
  box-shadow:0 0 48px color-mix(in srgb, var(--accent,#22e0ff) 55%, transparent);
  animation:emoji-in .7s cubic-bezier(.16,1,.3,1) both;
}
.lobby__warn{color:var(--gold); font-size:clamp(11px,1.05vw,15px); line-height:1.5; margin-top:10px}

/* плашка «кто нажал» */
.buzzplate{
  position:absolute; z-index:6; top:6%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 42px; border-radius:22px;
  background:rgba(12,6,20,.86); border:2px solid var(--mag);
  box-shadow:0 0 46px rgba(255,47,208,.6), inset 0 0 30px rgba(255,47,208,.18);
  animation:buzz-in .45s cubic-bezier(.16,1,.3,1) both;
}
@keyframes buzz-in{from{opacity:0; transform:translateX(-50%) scale(.8)}to{opacity:1; transform:translateX(-50%) scale(1)}}
.buzzplate__l{font-size:clamp(10px,1vw,14px); letter-spacing:.3em; text-transform:uppercase; color:#ff9fe6}
.buzzplate b{
  font-family:"Oswald",sans-serif; font-size:clamp(26px,4vw,62px); color:#fff; line-height:1;
  text-shadow:0 0 18px var(--mag), 0 0 46px rgba(255,47,208,.7);
}

/* ответ */
.answer{
  position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center;
  gap:clamp(18px,3.4vw,54px); flex-wrap:wrap;
  background:rgba(4,6,10,.7); backdrop-filter:blur(6px); border-radius:24px;
  animation:ans-in .75s cubic-bezier(.16,1,.3,1) both;
}
@keyframes ans-in{from{opacity:0; transform:scale(.94)}to{opacity:1; transform:none}}
.answer__cover{
  position:relative; width:clamp(150px,26vh,320px); aspect-ratio:1; border-radius:18px; overflow:hidden;
  border:2px solid var(--accent,#22e0ff);
  box-shadow:0 0 50px color-mix(in srgb, var(--accent,#22e0ff) 60%, transparent);
  animation:cover-in .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes cover-in{from{opacity:0; transform:perspective(900px) rotateY(-55deg) scale(.7)}to{opacity:1; transform:none}}
.answer__cover img{width:100%; height:100%; object-fit:cover; display:block}
.cover-fallback{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:clamp(46px,9vh,120px); background:linear-gradient(135deg, color-mix(in srgb, var(--accent,#22e0ff) 55%, #0b0f16), #080b12 85%);
}
.answer__text{max-width:min(52ch,50vw)}
.answer__label{color:var(--accent,#22e0ff); font-weight:800; letter-spacing:.2em; text-transform:uppercase; font-size:clamp(10px,1vw,14px); margin-bottom:.6em; text-shadow:0 0 12px var(--accent,#22e0ff)}
.answer__title{font-family:"Oswald",sans-serif; font-weight:700; font-size:clamp(24px,4vw,64px); line-height:1.06; color:#fff; text-shadow:0 0 22px rgba(255,255,255,.35)}
.answer__artist{margin-top:.35em; font-size:clamp(14px,1.7vw,26px); color:#9fb0c2}
.answer__state{margin-top:1em; font-size:clamp(11px,1.1vw,15px); color:var(--dim)}

/* кнопки управления */
.controls{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(8px,1.4vw,20px)}
.ctl{
  display:flex; align-items:center; justify-content:center; gap:.5em;
  padding:clamp(10px,1.9vh,22px) 8px; border-radius:18px; font-weight:800;
  font-size:clamp(12px,1.3vw,20px); letter-spacing:.03em; color:#fff; text-transform:uppercase;
  background:rgba(10,13,20,.9); border:2px solid var(--cc,var(--cyan));
  box-shadow:0 0 20px color-mix(in srgb, var(--cc,var(--cyan)) 45%, transparent), inset 0 0 22px color-mix(in srgb, var(--cc,var(--cyan)) 14%, transparent);
  text-shadow:0 0 12px var(--cc,var(--cyan));
  transition:transform .12s, box-shadow .2s, background .2s;
}
.ctl b{font-family:"Oswald",sans-serif; font-size:1.5em; line-height:1}
.ctl:hover{box-shadow:0 0 36px color-mix(in srgb, var(--cc,var(--cyan)) 80%, transparent); background:color-mix(in srgb, var(--cc,var(--cyan)) 14%, rgba(10,13,20,.9))}
.ctl:active{transform:translateY(4px)}
.ctl:disabled{opacity:.35; filter:grayscale(.6); pointer-events:none}
.ctl--minus{--cc:var(--gold)} .ctl--stop{--cc:var(--red)}
.ctl--plus{--cc:var(--grn)}   .ctl--home{--cc:#7d8da0}
.ctl--right{--cc:var(--lime)} .ctl--wrong{--cc:#ff4d6d}
.ctl.is-live{animation:ctlPulse 1.15s ease-in-out infinite}
@keyframes ctlPulse{50%{box-shadow:0 0 44px color-mix(in srgb, var(--cc,var(--cyan)) 95%, transparent)}}

.task.enter{animation:task-in .5s cubic-bezier(.16,1,.3,1) both}
@keyframes task-in{from{opacity:0; transform:scale(1.12)}to{opacity:1; transform:none}}
.task.leave{animation:task-out .42s cubic-bezier(.6,0,.75,0) both}
@keyframes task-out{from{opacity:1; transform:none}to{opacity:0; transform:scale(.72)}}

/* ======================= ТАБЛО СЧЁТА ======================= */
/* ======================= ОВЕРЛЕИ ======================= */
.overlay{
  position:fixed; inset:0; z-index:70; display:flex; align-items:center; justify-content:center;
  padding:clamp(14px,3vh,40px); background:rgba(3,4,8,.82); backdrop-filter:blur(10px);
  opacity:0; transition:opacity .25s;
}
.overlay--in{opacity:1}
.overlay__box{
  width:min(1180px,100%); max-height:100%; overflow:auto; padding:clamp(18px,3vh,38px) clamp(18px,3vw,44px);
  border-radius:28px; background:rgba(9,12,20,.92); border:2px solid rgba(34,224,255,.35);
  box-shadow:0 0 60px rgba(34,224,255,.2), inset 0 0 60px rgba(34,224,255,.05);
  animation:box-in .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes box-in{from{opacity:0; transform:translateY(24px) scale(.97)}to{opacity:1; transform:none}}
.neon-title{
  margin:0 0 clamp(14px,2.4vh,26px); text-align:center; font-family:"Oswald",sans-serif; font-weight:700;
  font-size:clamp(20px,3.2vw,46px); letter-spacing:.1em; text-transform:uppercase; color:#fff;
  text-shadow:0 0 14px rgba(34,224,255,.9), 0 0 40px rgba(255,47,208,.5);
}
.neon-title--gold{text-shadow:0 0 16px rgba(255,210,63,.95), 0 0 46px rgba(255,140,0,.55)}
.muted{color:var(--dim); font-size:clamp(11px,1vw,15px)}

/* вход ведущего */
.overlay--gate{z-index:95; background:rgba(3,4,8,.94)}
.gate{width:min(560px,100%); text-align:center}
.gate__note{color:var(--dim); margin:0 0 clamp(14px,2.4vh,24px); font-size:clamp(12px,1.3vw,18px); line-height:1.6}
#gateForm{display:flex; gap:clamp(8px,1.4vw,16px); align-items:stretch; justify-content:center; flex-wrap:wrap}
.gate__pin{
  flex:1 1 220px; max-width:320px; background:#080b12; border:2px solid rgba(34,224,255,.4); color:#fff;
  border-radius:16px; padding:clamp(10px,1.8vh,18px) 18px; text-align:center;
  font-family:"Oswald",sans-serif; font-size:clamp(26px,4vw,48px); letter-spacing:.4em;
}
.gate__pin:focus{outline:none; border-color:var(--cyan); box-shadow:0 0 24px rgba(34,224,255,.35)}
.gate__go{flex:0 0 auto; padding-left:clamp(18px,2.6vw,34px); padding-right:clamp(18px,2.6vw,34px)}
.gate__err{min-height:1.4em; margin:clamp(10px,1.6vh,18px) 0 0; color:#ff6b81; font-size:clamp(12px,1.2vw,16px)}
.gate--taken .neon-title{text-shadow:0 0 16px rgba(255,84,112,.9)}

/* лобби */
.lobby__grid{display:grid; grid-template-columns:auto auto 1fr; gap:clamp(16px,3vw,44px); align-items:center; margin-bottom:clamp(14px,2.4vh,26px)}
.lobby__qr{display:flex; flex-direction:column; align-items:center; gap:8px}
.lobby__qr canvas{
  width:clamp(140px,17vw,250px); height:auto; border-radius:14px; padding:6px; background:#05060a;
  border:2px solid var(--cyan); box-shadow:0 0 30px rgba(34,224,255,.45);
  image-rendering:pixelated;
}
.lobby__qr span{font-size:clamp(9px,.85vw,12px); letter-spacing:.16em; text-transform:uppercase; color:var(--dim)}
.lobby__pin{text-align:center}
.lobby__pin span{display:block; font-size:clamp(10px,1vw,14px); letter-spacing:.3em; text-transform:uppercase; color:var(--dim); margin-bottom:6px}
.lobby__pin b{
  font-family:"Oswald",sans-serif; font-size:clamp(56px,10vw,150px); line-height:1; letter-spacing:.12em; color:#fff;
  text-shadow:0 0 20px var(--mag), 0 0 60px rgba(255,47,208,.75);
}
.lobby__how{font-size:clamp(13px,1.3vw,20px); line-height:1.6; color:var(--dim)}
.lobby__how b{
  display:block; margin:6px 0; font-family:"Oswald",sans-serif; color:#fff;
  font-size:clamp(20px,2.6vw,40px); letter-spacing:.04em; text-shadow:0 0 16px rgba(34,224,255,.85);
}
.lobby__players{display:flex; flex-wrap:wrap; gap:10px; min-height:52px; margin-bottom:clamp(14px,2.4vh,24px)}
.chip{
  padding:9px 18px; border-radius:999px; background:rgba(16,22,34,.9); border:1.5px solid rgba(182,255,47,.45);
  color:#eaffd6; font-weight:700; font-size:clamp(12px,1.2vw,18px);
  box-shadow:0 0 16px rgba(182,255,47,.22); animation:chip-in .4s cubic-bezier(.16,1,.3,1) both;
}
@keyframes chip-in{from{opacity:0; transform:scale(.7)}to{opacity:1; transform:none}}
.chip--off{opacity:.4; border-color:rgba(255,255,255,.15); box-shadow:none}
.lobby__acts{display:grid; grid-auto-flow:column; gap:clamp(8px,1.4vw,18px); justify-content:center}

/* таблица игроков поверх экрана */
.scores{width:min(1100px,100%)}
.scores__head{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.scores__head .neon-title{margin:0}
.scores__tags{display:flex; align-items:center; gap:10px}
.tag{
  font-size:clamp(10px,1vw,14px); letter-spacing:.1em; text-transform:uppercase; color:var(--dim);
  border:1px solid rgba(255,255,255,.12); border-radius:999px; padding:6px 14px; background:rgba(10,14,22,.7);
}
.scores__table{width:100%; border-collapse:separate; border-spacing:0 clamp(5px,.9vh,11px); margin-top:clamp(10px,1.8vh,20px)}
.scores__table thead th{
  text-align:left; font-size:clamp(9px,.9vw,12px); letter-spacing:.2em; text-transform:uppercase;
  color:var(--dim); font-weight:700; padding:0 clamp(10px,1.4vw,22px) 4px;
}
.c-place{width:clamp(70px,9vw,130px)}
.c-state{width:clamp(100px,13vw,200px)}
.c-score{width:clamp(80px,10vw,160px); text-align:right}
.scores__table tbody tr{
  background:rgba(10,14,22,.85); box-shadow:inset 0 0 0 1.5px rgba(34,224,255,.18);
  transition:box-shadow .3s, background .3s, transform .3s;
}
.scores__table tbody td{
  padding:clamp(8px,1.5vh,17px) clamp(10px,1.4vw,22px); font-size:clamp(13px,1.6vw,26px); font-weight:700;
}
.scores__table tbody td:first-child{border-radius:14px 0 0 14px}
.scores__table tbody td:last-child{border-radius:0 14px 14px 0; text-align:right}
.place{font-family:"Oswald",sans-serif; font-size:clamp(15px,2vw,30px); color:var(--dim); display:inline-flex; align-items:center; gap:.4em}
.score{font-family:"Oswald",sans-serif; font-size:clamp(18px,2.6vw,40px); color:var(--cyan); text-shadow:0 0 16px rgba(34,224,255,.8)}
.state{font-size:clamp(10px,1vw,14px); font-weight:600; color:var(--dim); letter-spacing:.04em}
.state--buzz{color:var(--mag); text-shadow:0 0 12px rgba(255,47,208,.8)}
.state--locked{color:#7a8797}
.state--off{color:#5a6674}
.scores__table tr.is-first{box-shadow:inset 0 0 0 2px var(--gold), 0 0 26px rgba(255,210,63,.28); background:rgba(28,22,6,.85)}
.scores__table tr.is-first .place,
.scores__table tr.is-first .score{color:var(--gold); text-shadow:0 0 18px rgba(255,210,63,.9)}
.scores__table tr.is-second{box-shadow:inset 0 0 0 2px rgba(215,227,238,.7)}
.scores__table tr.is-third{box-shadow:inset 0 0 0 2px rgba(227,160,106,.7)}
.scores__table tr.is-buzz{box-shadow:inset 0 0 0 2px var(--mag), 0 0 30px rgba(255,47,208,.4)}
.scores__table tr.is-off{opacity:.45}
.scores__table tr.bump{animation:bump .8s cubic-bezier(.16,1,.3,1)}
@keyframes bump{
  0%{transform:scale(1)}
  35%{transform:scale(1.02); box-shadow:inset 0 0 0 2px var(--lime), 0 0 34px rgba(182,255,47,.5)}
  100%{transform:scale(1)}
}
.delta{margin-left:.4em; font-size:.55em; font-family:"Montserrat",sans-serif; color:var(--lime); text-shadow:0 0 12px rgba(182,255,47,.8)}
.scores__empty{color:var(--dim); text-align:center; line-height:1.7; font-size:clamp(12px,1.3vw,18px); margin:clamp(20px,5vh,60px) 0 0}

/* финал */
.podium{display:flex; align-items:flex-end; justify-content:center; gap:clamp(10px,2vw,30px); margin-bottom:clamp(14px,2.6vh,30px)}
.pod{display:flex; flex-direction:column; align-items:center; gap:8px; width:clamp(90px,16vw,220px)}
.pod__name{font-weight:800; font-size:clamp(12px,1.4vw,22px); color:#fff; text-align:center; text-shadow:0 0 12px rgba(34,224,255,.6)}
.pod__col{
  width:100%; display:flex; align-items:center; justify-content:center; border-radius:16px 16px 0 0;
  font-family:"Oswald",sans-serif; font-size:clamp(28px,4vw,64px); color:#05060a;
  animation:rise .9s cubic-bezier(.16,1,.3,1) both;
}
@keyframes rise{from{transform:scaleY(.1); opacity:0; transform-origin:bottom}to{transform:none; opacity:1}}
.pod--1 .pod__col{height:clamp(110px,20vh,230px); background:linear-gradient(180deg,var(--gold),#b8860b); box-shadow:0 0 50px rgba(255,210,63,.7)}
.pod--2 .pod__col{height:clamp(80px,14vh,170px); background:linear-gradient(180deg,#d7e3ee,#8b9bab); box-shadow:0 0 34px rgba(215,227,238,.5)}
.pod--3 .pod__col{height:clamp(62px,11vh,130px); background:linear-gradient(180deg,#e3a06a,#96572c); box-shadow:0 0 30px rgba(227,160,106,.5)}
.pod__score{font-family:"Oswald",sans-serif; font-size:clamp(16px,2vw,32px); color:var(--cyan); text-shadow:0 0 14px rgba(34,224,255,.8)}
.final__list{display:flex; flex-direction:column; gap:8px; max-width:640px; margin:0 auto clamp(14px,2.4vh,24px)}
.final__row{display:flex; justify-content:space-between; gap:14px; padding:10px 18px; border-radius:12px; background:rgba(14,19,29,.9); border:1px solid rgba(255,255,255,.08)}
.final__row b{font-family:"Oswald",sans-serif; color:var(--cyan)}

/* конфетти */
.confetti{position:fixed; inset:0; z-index:90; pointer-events:none; overflow:hidden}
.confetti i{position:absolute; top:-6vh; width:10px; height:16px; border-radius:2px; opacity:.9; animation:fall linear forwards}
@keyframes fall{to{transform:translateY(112vh) rotate(720deg); opacity:.15}}

@media (max-width:760px){
  .row{grid-template-columns:1.25fr repeat(4,1fr)}
  .controls{grid-template-columns:repeat(2,1fr) !important}
  .answer{flex-direction:column; gap:14px; padding:12px}
  .answer__text{text-align:center; max-width:90vw}
  .lobby__grid{grid-template-columns:1fr; text-align:center; justify-items:center}
  .lobby__acts{grid-auto-flow:row}
}