:root{
  --ground:#16110E; --ground-line:#2E241E;
  --red:#B82A24; --red-deep:#8E1F1A; --red-ink:#B4261F; --red-on-ink:#F0796F;
  --card:#F0E4CB; --ink:#1B1714; --ink-soft:#5B4D3C; --birch:#DDBB84; --birch-dark:#A9824C; --birch-light:#EBD2A6;
  --on-red:#FBEFE2; --on-red-soft:#FCE5DC; --on-ground:#EADCC3; --on-ground-soft:#B9A68A;
  --ok:#2F6B3A;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box}
html{background:var(--ground);scrollbar-color:var(--red-deep) var(--ground)}
body{margin:0;overflow-x:clip;color:var(--on-ground);font:15px/1.4 "PT Sans",sans-serif;-webkit-font-smoothing:antialiased}
::selection{background:var(--red);color:var(--on-red)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--birch);outline-offset:2px}
[hidden]{display:none!important}
h3{margin:0 0 8px;font:700 14px/1.2 Oswald,sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--on-ground-soft)}

/* кнопки и поля */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 14px;border:1.5px solid transparent;font:700 15px/1.1 "PT Sans";transition:background .15s,color .15s,transform .1s}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.ink{background:var(--ink);color:var(--birch);border-color:var(--ink)}
.btn.ink:hover:not(:disabled){background:#000}
.btn.red{background:var(--red);color:var(--on-red);border-color:var(--red)}
.btn.red:hover:not(:disabled){background:var(--red-deep);border-color:var(--red-deep)}
.btn.line{background:transparent;color:var(--red-ink);border-color:var(--red-ink)}
.btn.line:hover:not(:disabled){background:var(--red-ink);color:var(--on-red)}
.btn.light{background:var(--on-red);color:var(--red-deep);border-color:var(--on-red)}
.btn.light:hover:not(:disabled){background:#fff}
.btn.small{padding:4px 8px;font:700 11px/1.2 "PT Sans Narrow";text-transform:uppercase;letter-spacing:.06em}
.btn.big{width:100%;padding:14px;font:700 18px/1.1 Oswald;text-transform:uppercase;letter-spacing:.05em}
.field{display:block;margin:0 0 12px}
.field input{display:block;width:100%;margin-top:4px;padding:10px 12px;background:#FBF4E4;border:1.5px solid var(--red-ink);color:var(--ink);font:700 16px "PT Sans";caret-color:var(--red-ink)}
.field input::placeholder{color:#6A5C49;font-weight:400}
.field input:disabled{background:transparent;border-style:dashed}
.hint{color:var(--on-ground-soft);font-size:14px;margin:10px 0 0}

/* карточка лото */
.card{position:relative;background:var(--card);color:var(--ink);padding:5px;box-shadow:0 2px 0 rgba(0,0,0,.25),0 10px 24px -12px rgba(0,0,0,.7)}
.card-in{border:2px solid var(--red-ink);outline:1px solid var(--red-ink);outline-offset:-6px}
.head{display:flex;align-items:baseline;gap:8px;padding:8px 10px 6px;border-bottom:2px solid var(--red-ink);min-width:0}
.seat{font:700 13px Oswald;color:var(--red-ink)}
.name{font:700 21px/1 Oswald;text-transform:uppercase;letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.state{margin-left:auto;flex:none;font:700 12px/1 "PT Sans Narrow";text-transform:uppercase;letter-spacing:.06em;padding:4px 6px;border:1.5px solid currentColor;color:var(--red-ink)}
.state.quiet{color:var(--ink-soft)}
.cells{display:grid;grid-template-columns:repeat(4,1fr)}
.cell{position:relative;min-width:0;min-height:70px;padding:6px 7px;border-right:1px solid var(--red-ink);border-bottom:1px solid var(--red-ink)}
.cell:nth-child(4n){border-right:0}
.cell:nth-last-child(-n+4){border-bottom:0}
.lab{display:block;font:700 11px/1 "PT Sans Narrow";text-transform:uppercase;letter-spacing:.07em;color:var(--red-ink);margin-bottom:4px}
.val{display:block;font:700 13.5px/1.25 "PT Sans";hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.chip{position:absolute;left:50%;top:56%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:var(--red-deep);box-shadow:inset 0 0 0 3px #A52A23,inset 0 0 0 4px var(--card),0 2px 3px rgba(0,0,0,.35);display:grid;place-items:center;font:700 13px Oswald;color:var(--on-red)}
.chip.fly{animation:fly .9s var(--ease) forwards;pointer-events:none}
@keyframes fly{to{transform:translate(28px,-46px) rotate(160deg);opacity:0}}
.cell.fresh{background:#FFF6DF}
.cell.fresh .val{animation:ink .6s var(--ease) both}
@keyframes ink{from{opacity:0;transform:translateY(4px)}}
.slot-empty{color:var(--ink-soft);font:italic 400 13px "PT Sans"}

/* выворот: чей ход */
.card.turn{background:var(--ink);color:var(--card)}
.card.turn .card-in,.card.turn .head,.card.turn .cell{border-color:var(--red)}
.card.turn .card-in{outline-color:var(--red)}
.card.turn .lab,.card.turn .seat{color:var(--red-on-ink)}
.card.turn .state{background:var(--red);color:var(--on-red);border-color:var(--red)}
.card.turn .chip{box-shadow:inset 0 0 0 3px #A52A23,inset 0 0 0 4px var(--ink),0 2px 3px rgba(0,0,0,.35)}
.card.turn .cell.fresh{background:var(--card);color:var(--ink)}
.card.turn .cell.fresh .lab{color:var(--red-ink)}

/* выгнан, голос */
.card.out{opacity:.62}
.mark-svg{position:absolute;inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px);pointer-events:none;overflow:visible}
.strike{stroke:var(--red-ink);stroke-width:3;fill:none;vector-effect:non-scaling-stroke}
.ring{stroke:var(--red);stroke-width:3;fill:none;vector-effect:non-scaling-stroke}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw .7s var(--ease) forwards}
.drawn{stroke-dasharray:none}
@keyframes draw{to{stroke-dashoffset:0}}
.vote-row{padding:8px 10px;border-top:2px solid var(--red-ink);display:flex;gap:8px;align-items:center}
.card.turn .vote-row{border-color:var(--red)}
.vote-row .btn{flex:1}

/* полоса ведущего */
.rail{background:var(--red);color:var(--on-red)}
.rail-top{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:start;max-width:1400px;margin:0 auto;padding:16px 24px 12px}
.mark{font:700 34px/1 Oswald;letter-spacing:.04em;text-transform:uppercase}
.mark small{display:block;font:500 13px/1.3 Oswald;letter-spacing:.08em;color:var(--on-red-soft);margin-top:6px}
.cat h2{margin:0;font:700 20px/1.15 Oswald;text-transform:uppercase;letter-spacing:.03em}
.cat p{margin:4px 0 0;max-width:68ch;color:var(--on-red-soft)}
.cat p.clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.cat-more{margin:6px 0 0;padding:2px 0;background:none;border:0;color:var(--on-red);font:700 11px/1.2 "PT Sans Narrow";text-transform:uppercase;letter-spacing:.07em;text-decoration:underline;text-underline-offset:3px}
.cat-more:hover{text-decoration-thickness:2px}
/* критерии выживания — подсказка в первом раунде */
.rules{margin-top:10px;padding-top:8px;border-top:1px solid rgba(251,239,226,.35);max-width:68ch}
.rules-lab{display:block;margin-bottom:4px;font:500 13px/1 Oswald;letter-spacing:.06em;text-transform:uppercase}
.rules ul{margin:0;padding:0 0 0 18px;font-size:14px;line-height:1.4;color:var(--on-red-soft)}
.rules b{color:var(--on-red)}
.bunker{text-align:right;font:500 15px/1.35 Oswald;letter-spacing:.03em;max-width:420px}
.bunker b{font-size:26px;display:block;line-height:1.1}
.bunker span{display:block;color:var(--on-red-soft);font:400 13px/1.35 "PT Sans"}
.caller{border-top:1px solid rgba(251,239,226,.35);background:var(--red-deep)}
.caller-in{max-width:1400px;margin:0 auto;padding:10px 24px;display:grid;grid-template-columns:72px 1fr 280px;gap:18px;align-items:center;min-height:80px}
.barrel-slot{width:72px;height:56px}
.barrel{width:72px;height:56px;display:block}
.barrel text{font:700 20px Oswald;fill:var(--red-ink)}
.barrel.roll{animation:roll .9s var(--ease) both}
@keyframes roll{from{transform:translateX(-60px) rotate(-200deg);opacity:0}}
.call{font:700 22px/1.3 Oswald;letter-spacing:.01em}
.call em{font-style:normal;color:var(--on-red-soft);font-weight:500}
.call .who{display:block;font:400 15px/1.35 "PT Sans";color:var(--on-red-soft);margin-top:2px}
.call .who b{color:var(--on-red)}
.tape{font:500 13px Oswald;letter-spacing:.06em;text-transform:uppercase;color:var(--on-red-soft)}
.tape-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px}
.tape-row b{color:var(--on-red);font-size:20px;letter-spacing:0;font-variant-numeric:tabular-nums}
.tape-bar{height:10px;background:rgba(0,0,0,.35);border:1px solid rgba(251,239,226,.5)}
.tape-bar i{display:block;height:100%;background:var(--on-red);transform-origin:left;transform:scaleX(0);transition:transform .25s linear}
.call-action{margin-top:8px;display:flex;gap:8px}
.call-action .btn{flex:1}

/* стол */
.table-main{max-width:1400px;margin:0 auto;padding:18px 24px 24px}
.table{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mine{display:grid;grid-template-columns:minmax(0,1fr) 300px 300px;gap:14px;margin-top:18px}
.my .cell{min-height:82px}
.my .val{font-size:15px}
.my .hid .val{color:var(--ink-soft)}
.my .hid .chip{left:auto;right:6px;top:8px;margin:0;width:22px;height:22px;font-size:10px}
.my .btn.small{margin-top:6px}
.my .cell.can{background:#FFF6DF}

/* особое условие — билет */
.ticket{position:relative;background:var(--birch);color:var(--ink);padding:14px 16px;box-shadow:0 10px 24px -12px rgba(0,0,0,.7)}
.ticket::before,.ticket::after{content:"";position:absolute;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--ground)}
.ticket::before{left:-8px}.ticket::after{right:-8px}
.ticket .lab{color:var(--red-deep)}
.ticket p{margin:4px 0 12px;font:700 17px/1.25 "PT Sans"}
.ticket .row{display:flex;gap:6px}
.ticket select{flex:1;min-width:0;padding:8px 10px;border:1.5px solid var(--ink);background:var(--birch-light);color:var(--ink);font-weight:700}
.ticket.used{background:var(--card)}
.ticket.used p{text-decoration:line-through;text-decoration-color:var(--red-ink);text-decoration-thickness:2px}

.log{font-size:13.5px;line-height:1.45;color:var(--on-ground-soft);max-height:200px;overflow:auto;scrollbar-color:var(--red-deep) transparent}
.log div{padding:3px 0;border-bottom:1px solid var(--ground-line)}
.log b{color:var(--on-ground);font-weight:700}

/* финал */
.verdict{margin-bottom:18px}
.verdict .card-in{padding:18px 0 0}
.verdict-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 24px;align-items:start;padding:0 22px}
.verdict h2{margin:0;font:700 40px/1.05 Oswald;text-transform:uppercase;letter-spacing:.01em;text-wrap:balance}
.verdict.ok h2{color:var(--ok)} .verdict.extinct h2{color:var(--ink)} .verdict.dead h2{color:var(--red-ink)}
.verdict-lede{margin:8px 0 0;max-width:68ch;font-size:16px;color:var(--ink)}
.verdict-acts{display:flex;flex-direction:column;gap:8px}
/* протокол: три проверки клетками карточки */
.checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px;border-top:2px solid var(--red-ink)}
.check{min-width:0;padding:12px 16px 14px;border-right:1px solid var(--red-ink)}
.check:last-child{border-right:0}
.check-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.check-head .lab{margin:0}
.seal{flex:none;padding:4px 8px;border:2px solid currentColor;font:700 13px/1 Oswald;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);transform:rotate(-5deg)}
.check.fail .seal{color:var(--red-ink)}
.check-sum{display:block;margin-top:10px;font:700 24px/1.1 Oswald;text-transform:uppercase;letter-spacing:.01em}
.check.fail .check-sum{color:var(--red-ink)}
.check-rule{display:block;margin-top:3px;font-size:13.5px;color:var(--ink-soft)}
.check-list{list-style:none;margin:10px 0 0;padding:0;font-size:14px;line-height:1.35}
.check-list li{padding:6px 0;border-top:1px solid rgba(180,38,31,.3)}
.check-list li:has(>.lab){display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px;align-items:baseline}
.check-list .lab{margin:0}
.check-list .miss{color:var(--red-ink);font-weight:700}

/* вход */
#login{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login-card{width:100%;max-width:440px}
.login-card .card-in{padding:22px 24px 24px}
.login-head{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.login-head .barrel{animation:roll 1.1s var(--ease) both}
.login-head h1{margin:0;font:700 52px/1 Oswald;text-transform:uppercase;letter-spacing:.04em;color:var(--red-ink)}
.lede{margin:0 0 18px;font-size:16px;color:var(--ink)}
.login-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:6px}

/* лобби */
.lobby-main{max-width:1400px;margin:0 auto;padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:24px;align-items:start}
.lobby-main .cell{min-height:92px;padding:10px}
.lobby-main .val{font:700 20px/1.1 Oswald;text-transform:uppercase;letter-spacing:.02em}
.lobby-main .tag{display:inline-block;margin-top:6px;font:700 11px "PT Sans Narrow";text-transform:uppercase;letter-spacing:.06em;color:var(--red-ink)}
.lobby-side h3{margin-top:4px}
.invite{display:flex;gap:6px;margin-bottom:18px}
.invite input{flex:1;min-width:0;padding:9px 10px;background:var(--ground);border:1.5px solid var(--on-ground-soft);color:var(--on-ground);font:400 14px "PT Sans"}
.presets{display:flex;gap:6px;margin-bottom:8px}
.presets .btn{flex:1;color:var(--on-ground);border-color:var(--ground-line)}
.presets .btn:hover:not(:disabled){background:rgba(184,42,36,.16);color:var(--on-ground)}
.presets .btn.on{border-color:var(--red);background:rgba(184,42,36,.16)}
.timers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.timers .lab{color:var(--on-ground-soft)}
.packs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:14px}
.pack{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--ground-line);font:700 14px/1.2 "PT Sans";cursor:pointer;transition:border-color .15s,background .15s}
.pack:has(input:checked){border-color:var(--red);background:rgba(184,42,36,.16)}
.pack:has(input:disabled){cursor:default}
.pack input{margin:0;flex:none;accent-color:var(--red)}
.timers input{background:var(--ground);color:var(--on-ground);border-color:var(--on-ground-soft);font:700 18px Oswald}

#toast{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9;max-width:calc(100% - 32px);background:var(--ink);color:var(--card);border:2px solid var(--red);padding:10px 16px;font-weight:700;box-shadow:0 10px 24px -10px rgba(0,0,0,.8)}

@media (max-width:1100px){.table{grid-template-columns:repeat(2,minmax(0,1fr))}.mine{grid-template-columns:1fr 1fr}.mine .my{grid-column:1/-1}}
@media (max-width:720px){
  .rail-top{grid-template-columns:1fr;gap:10px;padding:14px 16px 10px}.bunker{text-align:left}
  .caller-in{grid-template-columns:56px minmax(0,1fr);padding:10px 16px}.barrel-slot,.barrel{width:56px;height:44px}.tape{grid-column:1/-1}
  .call{font-size:18px}
  .table-main,.lobby-main{padding:14px 16px}
  .table{grid-template-columns:1fr}.mine{grid-template-columns:1fr}
  .my .cells{grid-template-columns:1fr 1fr}.my .cell:nth-child(4n){border-right:1px solid var(--red-ink)}.my .cell:nth-child(2n){border-right:0}.my .cell:nth-last-child(-n+4){border-bottom:1px solid var(--red-ink)}.my .cell:nth-last-child(-n+2){border-bottom:0}
  .lobby-main{grid-template-columns:1fr}
  .verdict-head{grid-template-columns:1fr;padding:0 16px}.verdict-acts{flex-direction:row}.verdict-acts .btn{flex:1}.verdict h2{font-size:30px}
  .checks{grid-template-columns:1fr}.check{border-right:0;border-bottom:1px solid var(--red-ink);padding:12px 16px}.check:last-child{border-bottom:0}
  .login-actions{grid-template-columns:1fr}
}
/* разовые анимации: раздача карточек и протокол финала */
@keyframes press{from{transform:scale(1.7);opacity:0}}
@keyframes deal{from{transform:translateY(-28px) rotate(-2.5deg);opacity:0}}
.table.deal>.card{animation:deal .55s var(--ease) both;animation-delay:calc(var(--i) * 60ms)}
.verdict.enter{animation:rise .5s var(--ease) both}
@keyframes rise{from{transform:translateY(-20px);opacity:0}}
.verdict.enter .check{animation:ink .5s var(--ease) both;animation-delay:calc(.3s + var(--i) * .35s)}
.verdict.enter .seal{animation:seal .35s var(--ease) both;animation-delay:calc(.55s + var(--i) * .35s)}
@keyframes seal{from{transform:rotate(-5deg) scale(1.9);opacity:0}}
.verdict.enter h2{animation:press .45s var(--ease) both;animation-delay:1.45s;transform-origin:left center}
.verdict.enter .verdict-lede{animation:ink .5s var(--ease) both;animation-delay:1.7s}

/* переходы между экранами и фазами */
.rail{view-transition-name:rail}
.mark{view-transition-name:mark}
.caller{view-transition-name:caller}
.login-card{view-transition-name:login}
::view-transition{pointer-events:none}
::view-transition-group(*){animation-duration:.45s;animation-timing-function:var(--ease)}
@media (prefers-reduced-motion:no-preference){
  :root[data-vt=screen]::view-transition-old(login){animation:card-off .3s cubic-bezier(.5,0,.75,0) both}
  :root[data-vt=screen]::view-transition-new(rail){animation:rail-in .45s var(--ease) both}
  :root[data-vt=phase]::view-transition-old(caller){animation:.15s ease-in both vt-out}
  :root[data-vt=phase]::view-transition-new(caller){animation:write .55s var(--ease) both}
}
@keyframes card-off{to{transform:translateY(70px) rotate(5deg);opacity:0}}
@keyframes rail-in{from{clip-path:inset(0 0 100% 0)}}
@keyframes write{from{clip-path:inset(0 100% 0 0)}}
@keyframes vt-out{to{opacity:0}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.draw{stroke-dashoffset:0}}
.final .tape{visibility:hidden}
/* правки по финальному ревью */
.head{position:relative;z-index:2;background:var(--card)}
.card.turn .head{background:var(--ink)}
.state{background:var(--card)}
.card.turn .state{background:var(--red)}
.mark-svg{z-index:1}
.mark-svg.ring-svg{inset:-11px;width:calc(100% + 22px);height:calc(100% + 22px)}
.final .caller{display:none}
.my .hid .lab,.my .hid .val{padding-right:30px}
.ticket p{margin:0 0 12px}
.ticket .note{display:block;margin-top:10px;font:700 12px/1.3 "PT Sans Narrow";text-transform:uppercase;letter-spacing:.06em;color:var(--red-deep)}
.ticket.over{background:var(--card)}