/* StoneLeos — стили сайта */
/* Layout: игровой автомат — бегущая строка, гигантский ник, CRT-экран эфира рядом с картой игрока, кассетная дека, полка золотых картриджей */
:root{
  --night:#0d0f22; --cab:#171a38; --edge:#2b2f5e;
  --paper:#f4efe2; --haze:#9da2cf; --gold:#ffc531; --gold-deep:#c98a0b; --pink:#ff3d81; --cyan:#38e1ff;
  --display:"Rubik Mono One","Arial Black",system-ui,sans-serif;
  --pixel:"Press Start 2P",ui-monospace,monospace;
  --body:"Manrope",system-ui,-apple-system,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--night);color:var(--paper);font-family:var(--body);font-size:16px;line-height:1.55;overflow-x:hidden;
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%,rgba(255,61,129,.22),transparent 70%),radial-gradient(ellipse 60% 40% at 100% 40%,rgba(56,225,255,.12),transparent 70%)}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
.px{font-family:var(--pixel);font-size:10px;letter-spacing:.06em;line-height:1.7;text-transform:uppercase}
:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* бегущая строка */
.ticker{background:var(--gold);color:var(--night);overflow:hidden;white-space:nowrap;border-bottom:3px solid var(--night)}
.ticker div{display:inline-flex;gap:36px;padding:9px 0;animation:run 38s linear infinite}
.ticker span{font-family:var(--pixel);font-size:11px}
.ticker span::after{content:"★";margin-left:36px}
@keyframes run{to{transform:translateX(-50%)}}

.wrap{max-width:1200px;margin:0 auto;padding-inline:20px;padding-block:22px 70px;display:flex;flex-direction:column;gap:56px}
header{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.p1{font-family:var(--pixel);font-size:11px;color:var(--gold)}
.p1 b{color:var(--pink);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
nav{display:flex;gap:8px;flex-wrap:wrap}
nav a{font-family:var(--pixel);font-size:10px;text-decoration:none;padding:9px 12px;border:2px solid var(--edge);color:var(--haze)}
nav a:hover{border-color:var(--gold);color:var(--gold)}

/* ник */
.name{position:relative;line-height:.82}
.name h1{font-family:var(--display);font-size:clamp(52px,13.5vw,176px);letter-spacing:-.04em;
  background:linear-gradient(100deg,var(--gold-deep) 0%,var(--gold) 25%,#fff4c4 40%,var(--gold) 55%,var(--gold-deep) 80%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s ease-in-out infinite;
  filter:drop-shadow(6px 6px 0 var(--pink)) drop-shadow(6px 6px 0 rgba(56,225,255,.55))}
@keyframes shine{0%,100%{background-position:100% 0}50%{background-position:0 0}}
.tag{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px}
.stamp{font-family:var(--pixel);font-size:12px;background:var(--pink);color:#fff;padding:10px 14px;transform:rotate(-3deg);box-shadow:4px 4px 0 var(--night),4px 4px 0 2px var(--gold)}
.tag p{margin:0;font-size:18px;font-weight:600;color:var(--haze);max-width:44ch}
.tag p b{color:var(--paper)}

/* сцена: экран + карта игрока */
.stage{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:26px}
@media (max-width:900px){.stage{grid-template-columns:1fr}}
.cabinet{background:var(--cab);border:3px solid var(--edge);border-radius:18px;padding:16px;box-shadow:0 0 0 3px var(--night),0 24px 60px rgba(0,0,0,.5);min-width:0}
.crt{position:relative;aspect-ratio:16/10;max-width:100%;border-radius:14px;overflow:hidden;background:#05060f;
  box-shadow:inset 0 0 60px rgba(0,0,0,.9),inset 0 0 0 2px #000}
.crt canvas{position:absolute;inset:0;width:100%;height:100%}
.crt::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 4px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
.crt-ui{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(14px,3vw,28px);z-index:1}
.crt-top{display:flex;justify-content:space-between;gap:10px;font-family:var(--pixel);font-size:clamp(8px,1.2vw,11px);color:var(--cyan)}
.crt-mid{display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vw,18px);text-align:center}
.crt-mid h2{font-family:var(--pixel);font-size:clamp(14px,2.8vw,28px);line-height:1.4;color:var(--gold);text-shadow:3px 3px 0 var(--pink)}
.insert{font-family:var(--pixel);font-size:clamp(9px,1.4vw,13px);color:#fff;animation:blink 1.2s steps(2) infinite}
.crt-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.key{font-family:var(--pixel);font-size:11px;text-decoration:none;padding:13px 16px;border:0;cursor:pointer;color:var(--night);background:var(--gold);box-shadow:0 5px 0 var(--gold-deep);transition:transform .08s,box-shadow .08s}
.key:active{transform:translateY(5px);box-shadow:0 0 0 var(--gold-deep)}
.key.pink{background:var(--pink);color:#fff;box-shadow:0 5px 0 #a3194c}
.key.cyan{background:var(--cyan);box-shadow:0 5px 0 #1488a3}
.key:hover{filter:brightness(1.12)}
.panel{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:16px 6px 2px}
.stick{display:flex;gap:10px;align-items:center}
.ball{width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff8db5,var(--pink) 60%,#8e1440)}
.btn-r{width:22px;height:22px;border-radius:50%}
.score{font-family:var(--pixel);font-size:11px;color:var(--haze);font-variant-numeric:tabular-nums}
.score b{color:var(--gold)}

.card{background:var(--paper);color:var(--night);border-radius:14px;padding:20px;display:flex;flex-direction:column;gap:14px;transform:rotate(1.2deg);box-shadow:8px 8px 0 var(--pink);min-width:0}
.card h3{font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.card .px{color:#5b5f8a}
.stat{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;font-weight:800;font-size:13px}
.bar{height:14px;background:#dcd5c2;border:2px solid var(--night);position:relative}
.bar i{position:absolute;inset:0 auto 0 0;background:var(--c,var(--gold))}
.facts{display:flex;flex-direction:column;border-top:2px dashed #c9c1ac;padding-top:12px;gap:8px;font-size:14px}
.facts div{display:flex;justify-content:space-between;gap:10px}
.facts b{text-align:right}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.week span{font-family:var(--pixel);font-size:8px;line-height:1.5;text-align:center;padding:6px 0;border:2px solid var(--night);background:transparent;display:flex;flex-direction:column;gap:2px}
.week span em{font-style:normal;font-size:7px}
.week span.today{box-shadow:inset 0 -3px 0 var(--pink)}
.week span.on{background:var(--night);color:var(--gold)}
.next{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.count{font-family:var(--pixel);font-size:14px;color:var(--pink);font-variant-numeric:tabular-nums}

/* кассетная дека */
.sec-head{display:flex;justify-content:space-between;align-items:end;gap:14px;flex-wrap:wrap;margin-bottom:22px}
.sec-head h2{font-family:var(--display);font-size:clamp(30px,5vw,56px);letter-spacing:-.03em;line-height:.95}
.sec-head h2 span{color:var(--gold)}
.deck{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:860px){.deck{grid-template-columns:1fr}}
.tape{position:relative;aspect-ratio:1.6;max-width:100%;border-radius:14px;padding:5%;
  background:linear-gradient(160deg,#262a52,#14173a);border:3px solid var(--edge);box-shadow:8px 8px 0 var(--cyan)}
.tape .lbl{position:absolute;left:6%;right:6%;top:7%;height:67%;border-radius:8px;background:var(--lbl,var(--gold));padding:4% 5%;display:flex;flex-direction:column;justify-content:space-between;color:var(--night)}
.tape .lbl .t{font-family:var(--display);font-size:clamp(15px,2.6vw,26px);line-height:1;letter-spacing:-.02em}
.tape .lbl .a{font-family:var(--pixel);font-size:clamp(7px,1vw,10px)}
.tape{animation:float 3.2s ease-in-out infinite}
.tape.playing{animation:hum .18s linear infinite}
@keyframes float{50%{transform:translateY(-6px) rotate(-.6deg)}}
@keyframes hum{25%{transform:translate(.6px,-.4px)}75%{transform:translate(-.6px,.4px)}}
.tape .win{position:absolute;left:13%;right:13%;top:25.5%;height:35%;border-radius:999px;background:#0b0c1c;border:3px solid var(--night);display:flex;justify-content:space-between;align-items:center;padding:0 3%;overflow:hidden;box-shadow:inset 0 0 18px rgba(0,0,0,.8)}
.tape .win::after{content:"";position:absolute;left:22%;right:22%;bottom:9%;height:3px;background:#3a2418}
.hub{position:relative;height:100%;aspect-ratio:1;display:grid;place-items:center}
.spool{position:absolute;width:100%;aspect-ratio:1;border-radius:50%;background:repeating-radial-gradient(circle,#3b2518 0 2px,#2a170d 2px 3px);box-shadow:0 0 0 1px #000}
.reel{position:relative;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#0b0c1c 0 22%,transparent 23%),repeating-conic-gradient(var(--paper) 0 22deg,#0b0c1c 22deg 60deg);border:4px solid var(--paper);box-shadow:0 0 0 2px #0b0c1c}
.reel::after{content:"";position:absolute;inset:38%;border-radius:2px;background:var(--paper)}
.playing .reel{animation:spin 1.1s linear infinite}
.tape .reel,.tape.playing .reel,.tape.winding .reel,.tape.winding.rew .reel{animation:none!important}
.spool{transform:scale(.6)}
.tape.winding{animation:hum .1s linear infinite}
.winding .reel{animation:spin .22s linear infinite!important}
.winding.rew .reel{animation-direction:reverse!important}
/* дека: кассета уезжает в неё и выезжает новая */
.player{position:relative;overflow:hidden;padding:12px 16px 0 8px;display:flex;flex-direction:column;min-width:0}
.player .twirl{position:relative;margin-bottom:-26px}
/* перемотка карандашом */
.player.penmode{overflow:visible;z-index:10;pointer-events:none}
.player.penmode .twirl{z-index:3}
/* карандаш из двух половин: остриё уходит под кассету, хвост торчит снаружи — как палка в колесе */
.pencil{position:absolute;left:0;top:0;width:clamp(180px,24vw,250px);height:auto;pointer-events:none;transform-origin:50% 50%;opacity:0;will-change:transform}
.pencil.under{z-index:2;clip-path:inset(0 50% 0 0)}
.pencil.over{z-index:5;clip-path:inset(0 0 0 50%);filter:drop-shadow(4px 6px 0 rgba(0,0,0,.45))}
.pencil.fly{animation:pIn .6s cubic-bezier(.25,.8,.35,1) forwards}
/* --dx: 1 для левой катушки (хвост вправо-вверх), -1 для правой (хвост влево-вверх, к центру экрана) */
.pencil{--dx:1;--pa:-35deg;--pf:1}
.pencil.on{opacity:1;transform:translate(-50%,-50%) rotate(var(--pa)) scaleY(var(--pf));animation:wob .35s ease-in-out infinite}
.pencil.out{animation:pOut .5s cubic-bezier(.5,0,.8,.5) forwards}
@keyframes pIn{0%{opacity:1;transform:translate(calc(-50% + 360px * var(--dx)),calc(-50% - 360px)) rotate(calc(var(--pa) - 360deg * var(--dx))) scaleY(var(--pf))}
  55%{opacity:1;transform:translate(calc(-50% + 82px * var(--dx)),calc(-50% - 57px)) rotate(var(--pa)) scaleY(var(--pf))}
  85%{opacity:1;transform:translate(calc(-50% - 4px * var(--dx)),calc(-50% + 3px)) rotate(var(--pa)) scaleY(var(--pf))}
  100%{opacity:1;transform:translate(-50%,-50%) rotate(var(--pa)) scaleY(var(--pf))}}
@keyframes wob{50%{transform:translate(-50%,-50%) rotate(calc(var(--pa) + 3deg * var(--dx))) scaleY(var(--pf))}}
@keyframes pOut{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--pa)) scaleY(var(--pf))}
  40%{opacity:1;transform:translate(calc(-50% + 82px * var(--dx)),calc(-50% - 57px)) rotate(var(--pa)) scaleY(var(--pf))}
  100%{opacity:0;transform:translate(calc(-50% + 340px * var(--dx)),calc(-50% - 360px)) rotate(calc(var(--pa) + 255deg * var(--dx))) scaleY(var(--pf))}}
html,body{overflow-x:clip}
svg.pencil{overflow:visible}
.pencil.over{clip-path:inset(-300% -40% -300% 50%)}
.pencil.crank{opacity:1}
.pencil .fingers{opacity:0;transition:opacity .25s}
.pencil.crank .fingers{opacity:1}
.player.penmode .twirl{will-change:transform}
.tape.out{animation:tapeOut .42s cubic-bezier(.55,0,.9,.45) forwards}
.tape.in{animation:tapeIn .6s cubic-bezier(.2,.9,.3,1.25)}
@keyframes tapeOut{to{transform:translateY(118%) rotate(3deg)}}
@keyframes tapeIn{from{transform:translateY(118%) rotate(-3deg)}}
.deckbar{position:relative;z-index:2;height:76px;border-radius:12px;border:3px solid var(--edge);background:linear-gradient(180deg,#2a2e5c,#101230);display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:0 16px 12px;box-shadow:0 10px 24px rgba(0,0,0,.45)}
.deckbar .px{font-size:8px;color:var(--haze)}
.led{width:10px;height:10px;border-radius:50%;background:#3a1a2a;box-shadow:0 0 0 2px #05060f}
.playing-deck .led{background:#7ad66b;box-shadow:0 0 0 2px #05060f,0 0 10px #7ad66b}
.swapping .led{background:var(--gold);box-shadow:0 0 0 2px #05060f,0 0 10px var(--gold);animation:blink .2s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.tape,.tape.playing,.tape.in,.tape.out{animation:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.tape .holes{position:absolute;left:30%;right:30%;bottom:7%;height:18%;background:#0b0c1c;clip-path:polygon(10% 0,90% 0,100% 100%,0 100%);opacity:.7}
.slot{position:absolute;top:8px;left:5%;right:5%;height:26px;border-radius:13px;background:#05060f;box-shadow:inset 0 2px 5px #000;display:flex;align-items:center;gap:12px;padding:0 14px}
.tm{flex:none;font-family:var(--pixel);font-size:8px;color:var(--haze);font-variant-numeric:tabular-nums}
#seek{flex:1;min-width:0;margin:0;height:6px;border-radius:3px;cursor:pointer;-webkit-appearance:none;appearance:none;background:linear-gradient(90deg,var(--gold) var(--p,0%),#2b2f5e var(--p,0%))}
#seek::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:2px;background:var(--cyan);border:2px solid #0b0c1c}
#seek::-moz-range-thumb{width:11px;height:11px;border-radius:2px;background:var(--cyan);border:2px solid #0b0c1c}
#prev,#next{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ctrl{display:flex;flex-direction:column;gap:16px;min-width:0}
#viz{width:100%;height:80px;display:block;image-rendering:pixelated;border:3px solid var(--edge);border-radius:10px;background:#090a1a}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.vol{flex:1;display:flex;gap:10px;align-items:center;min-width:140px}
.vol input{width:100%;accent-color:var(--pink)}
.tracks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.tracks button{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) auto;gap:12px;align-items:center;text-align:left;background:var(--cab);border:2px solid var(--edge);color:var(--paper);padding:10px 12px;cursor:pointer;font-family:var(--body);font-weight:600;font-size:15px}
.tracks .n,.tracks .bpm{font-family:var(--pixel);font-size:9px;color:var(--haze)}
.tracks button[aria-current="true"]{border-color:var(--gold);background:var(--gold);color:var(--night)}
.tracks button[aria-current="true"] .n,.tracks button[aria-current="true"] .bpm{color:var(--night)}
.tracks button:hover{border-color:var(--gold)}

/* полка картриджей */
.filters{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--pixel);font-size:9px;padding:9px 11px;border:2px solid var(--edge);background:none;color:var(--haze);cursor:pointer}
.chip[aria-pressed="true"]{background:var(--pink);border-color:var(--pink);color:#fff}
.shelf{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 22px}
.cart{position:relative;text-decoration:none;display:flex;flex-direction:column;gap:12px;min-width:0;transition:transform .2s}
.cart:nth-child(odd){transform:rotate(-1.5deg)}
.cart:nth-child(even){transform:rotate(1.2deg)}
.cart:hover{transform:translateY(-8px) rotate(0)}
.shell{position:relative;aspect-ratio:1/1.05;max-width:100%;border-radius:10px 10px 4px 4px;padding:9% 9% 0;background:var(--shell);box-shadow:inset 0 -14px 0 rgba(0,0,0,.25),6px 6px 0 var(--night),6px 6px 0 3px var(--edge)}
.shell::before{content:"";position:absolute;top:3%;left:30%;right:30%;height:3%;border-radius:4px;background:rgba(0,0,0,.25)}
.sticker{position:relative;height:72%;border-radius:4px;overflow:hidden;background:var(--night)}
.sticker canvas{position:absolute;inset:0;width:100%;height:100%}
.sticker .no{position:absolute;left:8px;bottom:6px;font-family:var(--display);font-size:30px;color:#fff;text-shadow:3px 3px 0 var(--pink)}
.sticker .genre{position:absolute;right:6px;top:6px;font-family:var(--pixel);font-size:8px;background:var(--paper);color:var(--night);padding:5px 6px}
.ribs{display:flex;gap:6%;justify-content:center;padding-top:7%}
.ribs i{width:7%;height:12px;border-radius:2px;background:rgba(0,0,0,.25)}
.cart h3{font-size:16px;font-weight:800;line-height:1.3}
.cart .info{font-family:var(--pixel);font-size:8.5px;color:var(--haze);display:flex;gap:12px;flex-wrap:wrap}
.cart:hover h3{color:var(--gold)}

/* финал */
.links{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.link{display:flex;flex-direction:column;gap:10px;text-decoration:none;padding:22px;border-radius:14px;background:var(--c);color:var(--ink,var(--night));box-shadow:6px 6px 0 var(--night),6px 6px 0 3px var(--paper);transition:transform .15s}
.link:hover{transform:translate(-3px,-3px)}
.link b{font-family:var(--display);font-size:clamp(22px,3vw,30px);letter-spacing:-.02em}
.link span{font-weight:600;font-size:14px}
/* «будь здоров» на панели автомата, очки в HI-SCORE */
.snz{display:flex;align-items:center;gap:10px}
.sneeze-key{font-family:var(--pixel);font-size:10px;line-height:1.3;color:#fff;cursor:pointer;padding:12px 14px;border:3px solid #05060f;border-radius:999px;
  background:radial-gradient(circle at 35% 30%,#ff8a8a,#e8253f 55%,#a10f24);box-shadow:0 6px 0 #05060f;text-shadow:2px 2px 0 #05060f;transition:transform .06s,box-shadow .06s;-webkit-tap-highlight-color:transparent}
.sneeze-key:active,.sneeze-key.hit{transform:translateY(5px);box-shadow:0 1px 0 #05060f}
.snz-n{font-family:var(--pixel);font-size:12px;color:var(--gold);font-variant-numeric:tabular-nums}
.snz-n.bump{animation:bump .25s steps(2)}
@keyframes bump{50%{color:#fff;transform:scale(1.25)}}
#hi{color:var(--gold)}
#hi.counting{color:#fff;text-shadow:0 0 6px var(--gold)}
.crt-pops{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.crt-pop{position:absolute;font-family:var(--pixel);font-size:clamp(9px,1.5vw,14px);color:var(--gold);text-shadow:2px 2px 0 var(--pink);white-space:nowrap;animation:crtPop 1.1s steps(11) forwards}
.crt-pop.score{color:#fff;text-shadow:2px 2px 0 #1488a3}
@keyframes crtPop{0%{opacity:1;transform:translateY(0)}70%{opacity:1}100%{opacity:0;transform:translateY(-44px)}}
.cabinet.shake{animation:shake .3s}
/* комиксные звёздочки из машины, авария, CONTINUE */
.crt-boom{position:absolute;z-index:3;width:clamp(84px,18%,150px);aspect-ratio:1.35;display:grid;place-items:center;transform:translate(-50%,-50%);animation:boomFly 1.2s cubic-bezier(.2,.8,.3,1) forwards}
.crt-boom::before,.crt-boom::after{content:"";position:absolute;inset:0;background:#111;clip-path:polygon(50% 0,61% 20%,82% 8%,78% 31%,100% 35%,83% 52%,98% 72%,74% 72%,72% 96%,54% 80%,36% 100%,32% 76%,6% 82%,18% 60%,0 42%,22% 32%,14% 8%,38% 20%)}
.crt-boom::after{inset:6px;background:#fff}
.crt-boom b{position:relative;z-index:1;font-family:var(--display);font-weight:400;font-size:clamp(10px,1.9vw,17px);color:#111;transform:rotate(-6deg)}
.crt-boom.big{width:clamp(130px,30%,240px);animation:boomStay 2.6s cubic-bezier(.2,.8,.3,1) forwards}
.crt-boom.big::after{background:var(--gold)}
.crt-boom.big b{font-size:clamp(16px,3.2vw,30px);color:var(--pink);text-shadow:2px 2px 0 #111}
@keyframes boomFly{0%{transform:translate(-50%,-50%) scale(.2) rotate(-20deg);opacity:0}15%{transform:translate(-50%,-60%) scale(1.15) rotate(var(--r));opacity:1}30%{transform:translate(-50%,-70%) scale(1) rotate(var(--r))}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% - 80px)) scale(.85) rotate(var(--r));opacity:0}}
@keyframes boomStay{0%{transform:translate(-50%,-50%) scale(.2) rotate(-25deg);opacity:0}10%{transform:translate(-50%,-50%) scale(1.25) rotate(var(--r));opacity:1}18%{transform:translate(-50%,-50%) scale(1) rotate(var(--r))}85%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(var(--r))}100%{opacity:0;transform:translate(-50%,-50%) scale(1.1) rotate(var(--r))}}
.continue{position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);z-index:4;font-family:var(--pixel);font-size:clamp(14px,2.8vw,26px);color:#fff;text-shadow:3px 3px 0 var(--pink);background:rgba(5,6,15,.8);padding:14px 20px;display:flex;gap:18px;align-items:center;white-space:nowrap}
.continue b{color:var(--gold);font-weight:400}
@media (prefers-reduced-motion:reduce){.crt-boom,.crt-boom.big{animation:none;opacity:0}}
.lives{display:flex;gap:6px;align-items:center}
.lives svg{width:clamp(12px,1.8vw,18px);height:auto;display:block;image-rendering:pixelated;shape-rendering:crispEdges}
.wrench{position:absolute;left:0;top:0;z-index:9;width:clamp(30px,4vw,44px);pointer-events:none;filter:drop-shadow(0 3px 0 rgba(0,0,0,.4))}
.wrench svg{display:block;width:100%;height:auto}
.cart.fxing{z-index:5}
.fx{position:absolute;pointer-events:none;z-index:6;image-rendering:pixelated}
/* праздники */
.garland{position:absolute;left:14px;right:14px;top:-9px;height:18px;display:flex;justify-content:space-between;pointer-events:none;z-index:4}
.garland::before{content:"";position:absolute;left:0;right:0;top:3px;height:2px;background:#2f6b3a;border-radius:2px}
.garland i{position:relative;width:9px;height:12px;border-radius:40% 40% 50% 50%;margin-top:4px;background:var(--c);box-shadow:0 0 8px var(--c);animation:bulb 1.2s steps(2) infinite}
.garland i:nth-child(even){animation-delay:.6s}
@keyframes bulb{50%{background:#2a2c48;box-shadow:none}}
.web{position:absolute;right:6px;top:6px;width:clamp(60px,9vw,96px);pointer-events:none;z-index:4;opacity:.75}
.cake{position:absolute;right:clamp(18px,6%,46px);top:0;transform:translateY(-82%);width:clamp(72px,9vw,104px);padding:0;border:0;background:none;cursor:pointer;z-index:4;filter:drop-shadow(0 4px 0 rgba(0,0,0,.35))}
.cake canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
@media (prefers-reduced-motion:reduce){.garland i{animation:none}}
.name-fx{position:absolute;pointer-events:none;z-index:2}
.name-back{z-index:0;opacity:.92}
.name h1{position:relative;z-index:1}
[hidden]{display:none!important}
/* ближайшие эфиры на карте игрока */
.soon{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.soon li{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px;align-items:baseline;font-size:13px}
.soon li.has-art{grid-template-columns:36px auto auto minmax(0,1fr);align-items:start}
.soon-art{width:36px;height:48px;object-fit:cover;border:2px solid var(--night)}
.soon-main{display:flex;flex-direction:column;gap:1px;min-width:0}
.soon-t{font-weight:700;overflow-wrap:anywhere}
.soon-g{font-size:12px;color:#5b5f8a;font-weight:600}
.soon-tags{font-size:11px;color:#c0182f;font-weight:700;overflow-wrap:anywhere}
.soon-g:empty,.soon-tags:empty{display:none}
.soon li b{font-family:var(--pixel);font-size:8px;color:#5b5f8a;white-space:nowrap}
.count.onair{color:#e8253f;animation:blink 1s steps(2) infinite}
/* консоль управления */
.console-link{margin-left:10px;font:inherit;font-size:12px;background:none;border:0;border-bottom:2px dotted currentColor;color:#5b5f8a;cursor:pointer;padding:0}
.console{color-scheme:light;position:fixed;inset:0;z-index:20000;background:rgba(5,6,15,.78);display:grid;place-items:center;padding:16px}
.con-box{width:min(720px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--paper);color:#111;border:4px solid #111;box-shadow:10px 10px 0 var(--pink);padding:20px;display:flex;flex-direction:column;gap:16px}
.con-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.con-head h2{font-family:var(--display);font-size:clamp(18px,3vw,24px);letter-spacing:-.02em}
.con-x{width:36px;height:36px;border:3px solid #111;background:var(--gold);font-size:16px;cursor:pointer;flex:none}
.con-login{display:flex;flex-direction:column;gap:8px;max-width:340px}
.con-login p,.con-deny p{margin:0 0 6px;color:#3a3d5c;font-weight:600}
.con-login label{font-family:var(--pixel);font-size:9px;color:#5b5f8a}
.console input{font:inherit;font-size:15px;padding:9px 10px;border:3px solid #111;background:#fff;color:#111;min-width:0;border-radius:0}
.console input:focus-visible{outline:3px solid var(--cyan);outline-offset:1px}
.con-login .key{align-self:flex-start;margin-top:8px}
.con-sub{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.con-sub h3{font-family:var(--display);font-size:16px}
.con-sub .px{color:#5b5f8a}
.con-rows{display:flex;flex-direction:column;gap:12px}
.con-row{display:grid;grid-template-columns:160px 136px minmax(0,1fr) 44px;gap:8px;align-items:center;padding:12px;border:3px solid #111;background:#fbf8f0}
.con-row .f-game{grid-column:1/3;display:flex;gap:8px;align-items:center;min-width:0}
.con-row .f-game input{flex:1;min-width:0}
.g-art{width:32px;height:44px;flex:none;border:2px solid #111;background:repeating-linear-gradient(45deg,#e9e2cf 0 4px,#f4efe2 4px 8px)}
.g-art img{width:100%;height:100%;object-fit:cover;display:block}
.con-row .f-genre{grid-column:3/5}
.con-row .f-tags{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.tag-box{display:contents}
.tchip{font:inherit;font-size:12px;line-height:1.2;font-weight:700;padding:4px 7px;border:2px solid #111;background:#fff;color:#5b5f8a;cursor:pointer}
.tchip.on{background:#111;color:var(--gold)}
.con-row .f-tags input{width:130px;font-size:13px;padding:4px 8px;border-width:2px}
.con-row.past{opacity:.45}
.con-row .f-del{height:44px;border:3px solid #111;background:#fff;color:#111;cursor:pointer;font-size:16px;font-weight:700}
.con-row .f-del:hover{background:#ffd6e4}
.tchip:hover{border-color:var(--pink)}
.con-empty{margin:0;color:#5b5f8a;font-weight:600}
.con-actions{display:flex;gap:10px;flex-wrap:wrap}
.key.ghost{background:#fff;color:#111;box-shadow:0 5px 0 #8a8fa8}
.con-msg{min-height:1.4em;font-weight:700;color:#3a3d5c}
.con-msg.err{color:#c0182f}
@media (max-width:600px){.con-box{padding:16px}.con-row{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr) 44px;padding:10px}.con-row .f-title,.con-row .f-game,.con-row .f-genre{grid-column:1/-1}.con-row .f-del{grid-row:1;grid-column:3}}
.nav-con{font-family:var(--pixel);font-size:10px;padding:9px 12px;border:2px solid var(--gold);background:var(--gold);color:var(--night);cursor:pointer}
.nav-con:hover{background:#fff4c4}
.con-tabs{display:flex;gap:0;border-bottom:3px solid #111;margin-top:-4px}
.con-tabs button{font-family:var(--pixel);font-size:10px;padding:10px 14px;border:3px solid #111;border-bottom:0;background:#e9e2cf;color:#5b5f8a;cursor:pointer;margin-right:-3px;position:relative;top:3px}
.con-tabs button[aria-selected="true"]{background:var(--paper);color:#111;z-index:1}
.con-tabs i{display:inline-block;width:8px;height:8px;background:#e8253f;margin-left:6px;vertical-align:middle;animation:blink 1s steps(2) infinite}
#tabSched,#tabAnn,#tabGames{display:flex;flex-direction:column;gap:12px}
#tabSched[hidden],#tabAnn[hidden],#tabGames[hidden]{display:none}
.ann-form{display:flex;flex-direction:column;gap:6px}
.ann-form label,.ann-mode legend{font-family:var(--pixel);font-size:9px;color:#5b5f8a;margin-top:6px}
.console textarea{font:inherit;font-size:15px;padding:9px 10px;border:3px solid #111;background:#fff;color:#111;resize:vertical;border-radius:0}
.ann-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ann-two>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.ann-mode{border:3px solid #111;padding:10px 12px;margin:8px 0 0;display:flex;flex-direction:column;gap:8px}
.ann-mode legend{padding:0 6px;margin:0}
.ann-radio{display:flex;align-items:center;gap:8px;font-weight:700;color:#111;font-size:14px;cursor:pointer}
.ann-radio input{width:18px;height:18px;accent-color:var(--pink)}
.ann-until.off{opacity:.4;pointer-events:none}
#annState.on{color:#1f8a3e}
@media (max-width:600px){.ann-two{grid-template-columns:1fr}.ann-mode .ann-two{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}}
/* игротека */
.lib-filters{margin:-8px 0 20px}
.lib-filters .chip{display:inline-flex;align-items:center;gap:8px}
.lib-filters .chip svg{width:14px;height:14px}
.lib-filters .chip b{font-weight:400;opacity:.7}
.lib{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.lg{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:start;padding:12px;background:var(--cab);border:3px solid var(--edge);border-left:6px solid var(--sc,var(--edge))}
.lg-cover{width:64px;height:86px;border:2px solid #05060f;display:grid;place-items:center;overflow:hidden;background:linear-gradient(160deg,#2b2f5e,#14173a);
  font-family:var(--pixel);font-size:13px;color:var(--sc,var(--gold));text-shadow:2px 2px 0 #05060f;position:relative}
.lg-cover::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 2px,transparent 2px 4px)}
.lg-cover img{width:100%;height:100%;object-fit:cover;display:block}
.lg-main{display:flex;flex-direction:column;gap:6px;min-width:0}
.lg-main h3{font-size:16px;font-weight:800;line-height:1.25;overflow-wrap:anywhere}
.lg-st{display:inline-flex;align-items:center;gap:7px;font-family:var(--pixel);font-size:9px;color:var(--sc)}
.lg-st svg{width:16px;height:16px;flex:none}
.lg-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:12px;color:var(--haze);font-weight:600}
.lg-meta b{color:var(--paper);font-variant-numeric:tabular-nums}
.lib-note{margin:14px 0 0;color:var(--haze);font-size:14px}
.lib-empty{color:var(--haze);font-weight:600;margin:0}
svg.px-ico{image-rendering:pixelated;shape-rendering:crispEdges}
/* консоль: игры */
.lib-row{display:grid;grid-template-columns:32px minmax(0,1.5fr) minmax(170px,1.3fr) 76px minmax(0,1fr) 44px;gap:8px;align-items:center;padding:10px;border:3px solid #111;background:#fbf8f0}
.lib-row select{font:inherit;font-size:14px;padding:9px 6px;border:3px solid #111;background:#fff;color:#111;min-width:0;border-radius:0}
.lib-row .st-wrap{display:flex;gap:6px;align-items:center;min-width:0}
.lib-row .st-wrap svg{width:20px;height:20px;flex:none}
.lib-row .st-wrap select{flex:1}
.lib-row input[type=number]{width:100%}
.lib-row .f-del{height:44px;border:3px solid #111;background:#fff;color:#111;cursor:pointer;font-size:16px;font-weight:700}
@media (max-width:760px){.lib-row{grid-template-columns:32px minmax(0,1fr) 44px}.lib-row .st-wrap,.lib-row .lib-h,.lib-row .lib-g{grid-column:2/4}.lib-row .f-del{grid-row:1;grid-column:3}}
/* пыль с ника */
.name h1{cursor:pointer}
.name h1.dusted{animation:dustShake .28s steps(3)}
@keyframes dustShake{33%{transform:translate(-2px,1px)}66%{transform:translate(2px,-1px)}}
.dust-fx{position:absolute;pointer-events:none;z-index:3}
.cough{position:absolute;z-index:4;pointer-events:none;font-family:var(--pixel);font-size:11px;color:#111;background:#f4efe2;border:3px solid #111;padding:6px 9px;white-space:nowrap;animation:coughUp 1.3s ease-out forwards}
@keyframes coughUp{0%{opacity:0;transform:translateY(8px) scale(.7)}15%{opacity:1;transform:translateY(0) scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-24px)}}
@media (prefers-reduced-motion:reduce){.name h1.dusted,.cough{animation:none}}
.remind{align-self:flex-start;margin-top:3px;font-family:var(--pixel);font-size:7.5px;color:#5b5f8a;text-decoration:none;border-bottom:2px dotted currentColor}
.remind:hover{color:var(--pink)}
/* достижения */
.hdr-left{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ach-badge{display:inline-flex;align-items:center;gap:7px;padding:6px 9px;border:2px solid var(--gold);background:transparent;color:var(--gold);
  font-family:var(--pixel);font-size:10px;cursor:pointer}
.ach-badge:hover{background:var(--gold);color:#05060f}
.ach-badge svg{width:16px;height:16px}
.ach-badge.pulse{animation:achPulse .9s steps(2) 3}
@keyframes achPulse{50%{background:var(--gold);color:#05060f}}
.ach-toast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top,0px));z-index:21000;transform:translateX(-50%);display:flex;gap:12px;align-items:center;
  background:#05060f;color:#fff;border:3px solid var(--gold);padding:10px 14px;box-shadow:0 0 0 3px #05060f,6px 6px 0 var(--pink);max-width:calc(100vw - 32px);animation:toastIn 3.2s steps(16) forwards;pointer-events:none}
.ach-toast svg{width:28px;height:28px;flex:none}
.ach-toast small{display:block;font-family:var(--pixel);font-size:8px;color:var(--gold);margin-bottom:5px}
.ach-toast b{font-family:var(--pixel);font-size:11px;font-weight:400;line-height:1.5}
@keyframes toastIn{0%{transform:translate(-50%,-140%)}10%,85%{transform:translate(-50%,0)}100%{transform:translate(-50%,-140%)}}
.ach-panel{position:fixed;inset:0;z-index:20500;background:rgba(5,6,15,.78);display:grid;place-items:center;padding:16px}
.ach-box{width:min(640px,100%);max-height:calc(100vh - 32px);overflow:auto;background:var(--cab);border:3px solid var(--gold);box-shadow:8px 8px 0 var(--pink);padding:20px;display:flex;flex-direction:column;gap:14px}
.ach-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.ach-head h2{font-family:var(--pixel);font-size:14px;color:var(--gold);font-weight:400;line-height:1.5}
.ach-head button{width:36px;height:36px;border:3px solid #05060f;background:var(--gold);cursor:pointer;font-size:15px;flex:none}
.ach-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:8px;list-style:none;margin:0;padding:0}
.ach-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:10px;align-items:center;padding:10px;border:2px solid var(--edge);background:var(--night)}
.ach-list li svg{width:26px;height:26px}
.ach-list li b{display:block;font-family:var(--pixel);font-size:9px;font-weight:400;color:var(--paper);line-height:1.6}
.ach-list li span{font-size:13px;color:var(--haze)}
.ach-list li.off b{color:#5b5f8a}
.ach-list li.off svg{opacity:.35;filter:grayscale(1)}
.ach-foot{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;color:var(--haze);font-size:13px}
.ach-foot button{font-family:var(--pixel);font-size:8px;background:none;border:2px solid var(--edge);color:var(--haze);padding:7px 9px;cursor:pointer}
@media (prefers-reduced-motion:reduce){.ach-toast,.ach-badge.pulse{animation:none}.ach-toast{transform:translateX(-50%)}}
.live-btn.is-live{box-shadow:0 6px 0 #05060f,0 0 18px #e8253f}
.live-btn.is-live::after{animation-duration:.9s}
.live-btn.is-live span{font-size:7px}
.notify-btn{align-self:flex-start;font-family:var(--pixel);font-size:9px;padding:9px 11px;border:2px solid var(--night);background:#fff;color:var(--night);cursor:pointer;box-shadow:3px 3px 0 var(--night)}
.notify-btn.on{background:var(--night);color:var(--gold)}
.nav-install{background:var(--cyan);border-color:var(--cyan)}
.tg-opt{display:flex;gap:8px;align-items:center;font-weight:700;font-size:14px;color:#111;cursor:pointer}
.tg-opt input{width:18px;height:18px;accent-color:#2aa3df}
.con-data{display:flex;gap:10px;flex-wrap:wrap;align-items:center;border-top:3px dashed #c9c1ac;padding-top:14px}
.con-data .px{color:#5b5f8a;margin-right:4px}
.con-data .key{font-size:9px;padding:9px 11px}
.con-data .con-msg{flex-basis:100%}
.con-data .con-msg button{margin:8px 8px 0 0}
.sticker .vod-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* коты */
.stage{margin-top:70px}
.cabinet,.card,.comic-zone{--u:clamp(1.8px,.205vw,2.55px)}
.card{position:relative}
.cat{position:absolute;z-index:8;width:calc(var(--n) * var(--u));left:calc(var(--x) - var(--n) * var(--u) / 2);top:calc(var(--f) * var(--u) * -1 + 4px);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.card .cat{z-index:3}
.cat canvas,.yarn canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.cat.hop{animation:catHop .5s steps(5)}
@keyframes catHop{40%{transform:translateY(-12px)}70%{transform:translateY(0) scale(1.06,.94)}}
.cat-say{position:absolute;z-index:9;bottom:calc(100% + 12px);left:calc(50% - 14px);font-family:var(--pixel);font-size:10px;line-height:1.5;color:#111;background:#fff;border:3px solid #111;padding:6px 9px;white-space:nowrap;pointer-events:none;animation:sayUp 1.6s steps(8) forwards}
.cat-say::after{content:"";position:absolute;left:12px;bottom:-9px;border-top:9px solid #111;border-right:9px solid transparent}
.cat.say-l .cat-say{left:auto;right:calc(50% - 14px)}
.cat.say-l .cat-say::after{left:auto;right:12px;border-right:0;border-left:9px solid transparent}
.cat-senya .cat-say{background:#f7ecd8}
@keyframes sayUp{0%{opacity:0;transform:translateY(6px)}12%,80%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-6px)}}
.cat-star{position:absolute;left:calc(50% - 4px);top:-16px;width:9px;height:9px;background:var(--gold);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  filter:drop-shadow(0 0 4px var(--gold));animation:twinkle 3s ease-in-out infinite}
.pose-curl .cat-star{left:22%;top:-18px}
.cat.purr .cat-star{animation:starUp 1.6s ease-out}
@keyframes twinkle{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@keyframes starUp{0%{opacity:1;transform:scale(1)}50%{opacity:1;transform:translateY(-10px) scale(1.8)}100%{opacity:.4;transform:translateY(0) scale(.8)}}
.zzz{position:absolute;left:4%;top:-6px;pointer-events:none}
.cat-senya .zzz{left:-4%}
.cat.awake .zzz{display:none}
.zzz i{position:absolute;font-family:var(--pixel);font-style:normal;font-size:9px;color:#9da2cf;opacity:0;animation:zzz 3.6s linear infinite}
.zzz i:nth-child(2){animation-delay:1.2s;font-size:7px}.zzz i:nth-child(3){animation-delay:2.4s;font-size:11px}
@keyframes zzz{0%{opacity:0;transform:translate(0,0)}20%{opacity:.9}100%{opacity:0;transform:translate(-14px,-30px)}}
.cat.purr canvas{animation:purrShake .12s steps(2) 12}
@keyframes purrShake{50%{transform:translateX(1px)}}
.yarn{position:absolute;z-index:9;left:0;width:calc(12 * var(--u));top:calc(-12 * var(--u) + 4px);padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.yarn::before{content:"";position:absolute;inset:-10px}
body.cats-s5 #links{margin-top:90px}
@media (max-width:900px){.stage{row-gap:70px}}
@media (max-width:600px){.stage{margin-top:52px}body.cats-s5 #links .caption{margin-top:16px}}
@media (prefers-reduced-motion:reduce){.zzz i,.cat-star,.cat.hop,.cat.purr canvas{animation:none}.zzz i{opacity:.6}}
/* окно анонса для зрителей */
.announce{position:fixed;inset:0;z-index:19000;background:rgba(5,6,15,.72);display:grid;place-items:center;padding:16px;color-scheme:light}
.ann-box{position:relative;width:min(520px,100%);background:var(--paper);color:#111;border:4px solid #111;box-shadow:10px 10px 0 var(--pink);padding:56px 24px 22px;display:flex;flex-direction:column;gap:12px;
  background-image:radial-gradient(rgba(17,17,17,.08) 1.4px,transparent 1.6px);background-size:12px 12px;animation:annIn .45s cubic-bezier(.2,.9,.3,1.3)}
@keyframes annIn{from{transform:scale(.6) rotate(-4deg);opacity:0}}
.ann-burst{position:absolute;left:-12px;top:-30px;width:122px;aspect-ratio:1.35;display:grid;place-items:center;transform:rotate(-10deg)}
.ann-burst::before,.ann-burst::after{content:"";position:absolute;inset:0;background:#111;clip-path:polygon(50% 0,61% 20%,82% 8%,78% 31%,100% 35%,83% 52%,98% 72%,74% 72%,72% 96%,54% 80%,36% 100%,32% 76%,6% 82%,18% 60%,0 42%,22% 32%,14% 8%,38% 20%)}
.ann-burst::after{inset:6px;background:var(--gold)}
.ann-burst b{position:relative;z-index:1;font-family:var(--display);font-weight:400;font-size:16px;color:var(--pink);text-shadow:2px 2px 0 #111}
.ann-x{position:absolute;right:10px;top:10px;width:36px;height:36px;border:3px solid #111;background:#fff;color:#111;font-size:16px;cursor:pointer}
.ann-box h2{font-family:var(--display);font-size:clamp(20px,4vw,28px);letter-spacing:-.02em;line-height:1.1;padding-right:30px;overflow-wrap:anywhere}
.ann-box p{margin:0;font-size:16px;font-weight:600;color:#3a3d5c;white-space:pre-line;overflow-wrap:anywhere}
.ann-box p:empty{display:none}
.ann-acts{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
@media (prefers-reduced-motion:reduce){.ann-box{animation:none}.con-tabs i{animation:none}}
/* кнопка LIVE и режим прямого эфира */
.crt.is-live{aspect-ratio:16/9}
.live-btn{position:relative;width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;text-decoration:none;
  font-family:var(--pixel);font-size:10px;color:#fff;text-shadow:2px 2px 0 #05060f;border:3px solid #05060f;
  background:radial-gradient(circle at 35% 30%,#ff8a8a,#e8253f 55%,#8e0f22);box-shadow:0 6px 0 #05060f;transition:transform .06s,box-shadow .06s;-webkit-tap-highlight-color:transparent}
.live-btn::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:3px solid #e8253f;opacity:0;animation:liveRing 1.6s ease-out infinite;pointer-events:none}
@keyframes liveRing{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.live-btn i{position:absolute;top:11px;width:6px;height:6px;background:#fff;box-shadow:0 0 6px #fff;animation:blink 1s steps(2) infinite}
.live-btn span{margin-top:8px}
.live-btn:active{transform:translateY(5px);box-shadow:0 1px 0 #05060f}
.live-btn.on{background:radial-gradient(circle at 35% 30%,#fff4c4,var(--gold) 55%,var(--gold-deep))}
.live-btn.on::after{border-color:var(--gold)}
.live-btn.on span{color:#05060f;text-shadow:none}
.crt-live{position:absolute;inset:0;z-index:6;background:#000}
.crt-live iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.live-x{position:absolute;right:10px;top:10px;z-index:2;font-family:var(--pixel);font-size:9px;padding:8px 10px;border:2px solid #05060f;background:var(--gold);color:#05060f;cursor:pointer;box-shadow:0 3px 0 #05060f}
.chatbox{display:flex;flex-direction:column;min-height:440px;background:var(--cab);border:3px solid var(--edge);border-radius:14px;overflow:hidden;box-shadow:8px 8px 0 var(--pink);min-width:0}
.chatbox[hidden]{display:none}
.chat-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:12px 14px;border-bottom:2px solid var(--edge);color:var(--haze)}
.chat-head a{color:var(--gold);text-decoration:none}
.chat-frame{position:relative;flex:1;min-height:380px;background:#18181b}
.chat-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media (max-width:600px){.live-btn{width:52px;height:52px;font-size:8px}.live-btn i{top:9px}.chatbox{min-height:460px}}
@media (prefers-reduced-motion:reduce){.live-btn::after,.live-btn i{animation:none}}
/* пасхалка */
.cabinet{position:relative}
.crt.broken{animation:flick .16s steps(2) infinite}
@keyframes flick{50%{filter:brightness(1.7) contrast(1.4) hue-rotate(25deg)}}
.crt .static{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  background:#222 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:noise .18s steps(3) infinite;opacity:.92}
@keyframes noise{33%{background-position:37px -21px}66%{background-position:-48px 29px}}
.crt .static span{font-family:var(--pixel);font-size:clamp(12px,2.6vw,24px);line-height:1.7;text-align:center;color:#fff;background:#05060f;padding:10px 16px;text-shadow:2px 2px 0 var(--pink);animation:blink .5s steps(2) infinite}
.puff{position:absolute;z-index:6;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(210,210,220,.85),rgba(130,130,145,.45) 55%,transparent 70%);animation:puff 2.6s ease-out forwards}
@keyframes puff{from{transform:translate(-50%,-50%) scale(.5);opacity:.95}to{transform:translate(calc(-50% + var(--dx)),-280px) scale(3.2);opacity:0}}
.cub{position:absolute;z-index:7;width:clamp(96px,11vw,144px);padding:0;border:0;background:none;cursor:pointer;left:var(--lx,50%);top:var(--ly,90%);transform:translate(-50%,-50%);
  animation:cubOut 1.9s cubic-bezier(.3,.6,.4,1) forwards;filter:drop-shadow(0 5px 0 rgba(0,0,0,.4))}
.cub canvas{display:block;width:100%;height:auto;image-rendering:pixelated;image-rendering:crisp-edges}
.cub.landed{animation:none}
.cub.landed.rawr{animation:hop .45s steps(4)}
@keyframes cubOut{
  0%{left:50%;top:45%;transform:translate(-50%,-50%) scale(.15);opacity:0}
  12%{opacity:1}
  30%{left:50%;top:42%;transform:translate(-50%,-50%) scale(1.25) rotate(-10deg)}
  48%{left:calc((50% + var(--lx)) / 2);top:12%;transform:translate(-50%,-50%) scale(1) rotate(200deg)}
  72%{left:var(--lx);top:calc(var(--ly) + 6px);transform:translate(-50%,-50%) rotate(360deg)}
  82%{left:var(--lx);top:calc(var(--ly) - 34px);transform:translate(-50%,-50%) scale(1.06,.94) rotate(360deg)}
  92%{left:var(--lx);top:calc(var(--ly) + 2px);transform:translate(-50%,-50%) scale(1.12,.88) rotate(360deg)}
  100%{left:var(--lx);top:var(--ly);transform:translate(-50%,-50%) rotate(360deg);opacity:1}}
.sneeze-key.squished{transform:translateY(5px);box-shadow:0 1px 0 #05060f;filter:saturate(.55) brightness(.85);cursor:default}
.cub.leave{animation:cubBack 1.25s cubic-bezier(.4,0,.6,1) forwards;pointer-events:none}
.cub.done{cursor:default}
.wrench-4th{position:fixed;z-index:10000;width:44px}
.crack{position:fixed;inset:0;z-index:9999;pointer-events:none}
.crack svg{width:100%;height:100%;display:block}
.wrap.shake{animation:shake .35s 2}
@keyframes cubBack{
  0%{left:var(--lx);top:var(--ly);transform:translate(-50%,-50%) scale(1.12,.84)}
  14%{left:var(--lx);top:var(--ly);transform:translate(-50%,-50%) scale(.9,1.15)}
  45%{left:calc((50% + var(--lx)) / 2);top:6%;transform:translate(-50%,-50%) scale(1) rotate(-180deg)}
  100%{left:50%;top:45%;transform:translate(-50%,-50%) scale(.08) rotate(-360deg);opacity:0}}
@keyframes hop{40%{transform:translate(-50%,calc(-50% - 22px)) scale(1.06)}70%{transform:translate(-50%,-50%) scale(1.1,.9)}}
@keyframes shake{25%{transform:translate(-3px,1px) rotate(-.4deg)}75%{transform:translate(3px,-1px) rotate(.4deg)}}
@media (prefers-reduced-motion:reduce){.cabinet.shake,.crt-pop,.snz-n.bump{animation:none}}
@media (max-width:600px){.panel{gap:12px}.sneeze-key{font-size:8px;padding:10px 12px}.snz-n{font-size:10px}.stick .btn-r{width:16px;height:16px}.stick .ball{width:20px;height:20px}}
/* отсылки: трекер «будь здоров» */
.refs{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:26px;align-items:start}
@media (max-width:760px){.refs{grid-template-columns:1fr}}
.sneeze{position:relative;overflow:hidden;background:var(--paper);color:#111;border:4px solid #111;box-shadow:10px 10px 0 var(--pink);padding:22px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;
  background-image:radial-gradient(rgba(17,17,17,.08) 1.4px,transparent 1.6px);background-size:12px 12px}
.sn-top{align-self:stretch;display:flex;justify-content:space-between;gap:10px;color:#5b5f8a}
.sneeze h3{font-family:var(--display);font-size:clamp(26px,4vw,40px);letter-spacing:-.02em}
.sneeze p{margin:0;font-weight:600;color:#3a3d5c;max-width:36ch}
.odo{display:flex;gap:6px;--dh:clamp(54px,8vw,76px)}
.dg{width:calc(var(--dh) * .72);height:var(--dh);background:#111;border-radius:6px;overflow:hidden;position:relative;box-shadow:inset 0 0 0 2px #333,0 4px 0 var(--gold-deep)}
.dg .strip{display:flex;flex-direction:column;transition:transform .5s cubic-bezier(.3,1.4,.5,1)}
.dg .strip span{height:var(--dh);flex:none;display:grid;place-items:center;font-family:var(--pixel);font-size:calc(var(--dh) * .42);color:var(--gold)}
.dg::after{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:rgba(0,0,0,.65)}
.sn-btn{width:clamp(150px,22vw,190px);aspect-ratio:1;border-radius:50%;border:5px solid #111;cursor:pointer;color:#fff;font-family:var(--display);font-size:clamp(15px,2vw,19px);line-height:1.1;text-shadow:2px 2px 0 #111;
  background:radial-gradient(circle at 35% 30%,#ff8a8a,#e8253f 55%,#a10f24);box-shadow:0 10px 0 #111;transition:transform .06s,box-shadow .06s;-webkit-tap-highlight-color:transparent}
.sn-btn:active,.sn-btn.hit{transform:translateY(8px);box-shadow:0 2px 0 #111}
.pops{position:absolute;inset:0;pointer-events:none}
.pop{position:absolute;font-family:var(--display);font-size:16px;color:#111;background:var(--gold);border:3px solid #111;padding:4px 10px;white-space:nowrap;animation:popUp 1s ease-out forwards}
.pop.alt{background:var(--cyan)}
@keyframes popUp{0%{opacity:0;transform:translateY(10px) scale(.6) rotate(var(--r))}15%{opacity:1;transform:translateY(0) scale(1.1) rotate(var(--r))}100%{opacity:0;transform:translateY(-90px) scale(1) rotate(var(--r))}}
.sneeze.shake{animation:shake .3s}
@keyframes shake{25%{transform:translate(-3px,1px) rotate(-.6deg)}75%{transform:translate(3px,-1px) rotate(.6deg)}}
.ref-soon{border:3px dashed var(--edge);padding:20px;display:flex;flex-direction:column;gap:12px}
.ref-soon h3{font-family:var(--display);font-size:22px;letter-spacing:-.02em}
.ref-soon p{margin:0;color:var(--haze)}
.ref-slot{display:flex;gap:14px;align-items:center;padding:12px 14px;border:2px solid var(--edge);background:var(--cab);color:var(--haze);font-weight:600}
.ref-slot b{font-family:var(--pixel);font-size:10px;color:var(--gold)}
@media (prefers-reduced-motion:reduce){.sneeze.shake,.dg .strip{animation:none;transition:none}}
/* комиксный низ */
.comic-zone{position:relative;background:var(--paper);color:#111;border:4px solid #111;padding:clamp(16px,3vw,30px);box-shadow:12px 12px 0 var(--pink);
  background-image:radial-gradient(rgba(17,17,17,.09) 1.4px,transparent 1.6px);background-size:12px 12px;display:flex;flex-direction:column;gap:22px}
.caption{align-self:flex-start;background:var(--gold);color:#111;border:3px solid #111;padding:9px 16px;font-family:var(--display);font-size:clamp(13px,2vw,18px);box-shadow:5px 5px 0 #111;transform:rotate(-1.5deg)}
.page{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px;background:#111;padding:14px}
@media (max-width:760px){.page{grid-template-columns:1fr}}
.panel-c{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:20px;min-height:230px;padding:22px;text-decoration:none;color:#111;background:var(--bgc);overflow:hidden;transition:transform .15s}
.panel-c::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(0,0,0,.2) 1.6px,transparent 1.8px);background-size:9px 9px;pointer-events:none}
.panel-c:hover{transform:scale(1.015) rotate(.5deg);z-index:2}
.p-tw{grid-row:span 2;min-height:480px;background:repeating-conic-gradient(from 0deg at 72% 38%,#ffc531 0 5deg,#ffe28a 5deg 10deg)}
@media (max-width:760px){.p-tw{grid-row:auto;min-height:340px}}
.p-yt{--bgc:#ff3d81}
.p-tg{--bgc:#38e1ff}
.bubble{position:relative;z-index:1;align-self:flex-start;background:#fff;border:3px solid #111;border-radius:24px;padding:14px 18px;font-family:"Neucha","Comic Sans MS",cursive;font-size:clamp(19px,2.2vw,24px);line-height:1.2;max-width:26ch;box-shadow:4px 4px 0 #111}
.bubble::before{content:"";position:absolute;left:30px;bottom:-24px;border-top:24px solid #111;border-right:22px solid transparent}
.bubble::after{content:"";position:absolute;left:33px;bottom:-16px;border-top:17px solid #fff;border-right:15px solid transparent}
.boom{position:absolute;right:12px;top:12px;z-index:1;width:clamp(110px,14vw,150px);aspect-ratio:1;display:grid;place-items:center;transform:rotate(12deg)}
.boom::before,.boom::after{content:"";position:absolute;inset:0;background:#111;clip-path:polygon(50% 0,61% 20%,82% 8%,78% 31%,100% 35%,83% 52%,98% 72%,74% 72%,72% 96%,54% 80%,36% 100%,32% 76%,6% 82%,18% 60%,0 42%,22% 32%,14% 8%,38% 20%)}
.boom::after{inset:7px;background:var(--bc,#fff)}
.boom span{position:relative;z-index:1;font-family:var(--display);font-size:clamp(15px,2vw,21px);color:#111;transform:rotate(-4deg)}
.pad{position:relative;z-index:1;width:min(78%,300px);align-self:center}
.foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:end;gap:10px;flex-wrap:wrap;background:#111;color:#fff;margin:0 -22px -22px;padding:12px 22px}
.foot b{font-family:var(--display);font-size:clamp(22px,3vw,32px);letter-spacing:-.02em}
.foot span{font-weight:700;font-size:14px}
.endnote{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.endnote .caption{transform:rotate(1deg);background:#fff}
.endnote small{font-weight:700;font-size:14px}
/* телефон */
.name h1{font-size:min(176px,calc((100vw - 56px)/10.5));white-space:nowrap;display:inline-block;padding-right:8px}
@media (max-width:600px){
  .wrap{gap:40px}
  .name h1{filter:drop-shadow(3px 3px 0 var(--pink)) drop-shadow(3px 3px 0 rgba(56,225,255,.55))}
  .tag p{font-size:16px}
  .cabinet{padding:10px;border-radius:14px}
  .crt{aspect-ratio:4/5}
  .crt-ui{justify-content:flex-start;gap:14px}
  .crt-ui > .crt-top:last-child{margin-top:auto}
  .crt-mid{gap:12px}
  .crt-mid h2{font-size:14px;text-shadow:2px 2px 0 var(--pink),0 0 12px #05060f}
  .insert{display:none}
  .crt-btns{gap:10px}
  .crt-btns .key{font-size:9px;padding:10px 14px}
  .crt-top{font-size:7px}
  .card{transform:none;box-shadow:6px 6px 0 var(--pink)}
  .tape{box-shadow:5px 5px 0 var(--cyan)}
  .shelf{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .cart:nth-child(n){transform:none}
  .sticker .no{font-size:20px;left:6px;bottom:4px}
  .sticker .genre{font-size:6.5px;padding:4px}
  .cart h3{font-size:14px}
  .cart .info{font-size:7px;gap:6px}
  .comic-zone{box-shadow:6px 6px 0 var(--pink)}
  .page{padding:10px;gap:10px}
  .panel-c{padding:16px;min-height:200px}
  .foot{margin:0 -16px -16px;padding:10px 16px}
  .boom{width:84px;right:8px;top:8px}
  .boom span{font-size:12px}
  .bubble{max-width:calc(100% - 80px);font-size:18px;padding:12px 14px}
  .endnote{flex-direction:column-reverse;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){.ticker div,.name h1,.insert,.p1 b,.playing .reel{animation:none}.cart,.cart:nth-child(n){transform:none}}