/* Поздравление для Димы (#dima): тревога, ринг, раунды команды, торт и финал. */
.scr-dima{padding-left:12px;padding-right:12px}
.gr-stage{position:relative;flex:1;min-height:0;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:center}
.gr-hint{font-family:T5;font-size:12px;letter-spacing:2px;color:var(--y);text-align:center;padding-top:6px;text-shadow:2px 2px 0 #000;
  animation:grsoft 1.1s steps(1) infinite}
@keyframes grsoft{50%{opacity:.6}}

/* тревога */
.gr-alert{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.gr-stripes{width:calc(100% + 24px);height:18px;background:repeating-linear-gradient(45deg,#ffd23f 0 12px,#0b0716 12px 24px);
  animation:grtape .6s steps(4) infinite;box-shadow:0 3px 0 rgba(0,0,0,.5)}
@keyframes grtape{to{background-position:34px 0}}
.gr-warn{font-family:P2;font-size:36px;color:#fff;text-shadow:3px 3px 0 var(--red),6px 6px 0 #000,-2px 0 0 rgba(63,224,255,.7);
  animation:grblink .5s steps(1) infinite,grglitch 2.2s steps(1) infinite;margin-top:8px}
@keyframes grblink{50%{color:var(--y)}}
@keyframes grglitch{0%,100%{transform:none}31%{transform:translate(-3px,1px) skewX(-8deg)}33%{transform:translate(4px,-1px)}35%{transform:none}71%{transform:translate(2px,0) skewX(10deg)}73%{transform:none}}
.gr-boss{visibility:hidden;font-family:P2;font-size:22px;color:var(--y);text-shadow:3px 3px 0 var(--red),6px 6px 0 #000;animation:grglitch 1.7s steps(1) infinite}
.gr-line{font-family:P2;font-size:13px;color:var(--cream);min-height:16px;text-shadow:2px 2px 0 #000}
.gr-xp{visibility:hidden;width:240px;height:16px;border:2px solid var(--cream);padding:2px;background:rgba(0,0,0,.6);box-shadow:3px 3px 0 #000}
.gr-xp i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--y) 0 8px,var(--mus) 8px 10px)}
.gr-levelup{visibility:hidden;font-family:P2;font-size:18px;color:var(--cy);text-shadow:3px 3px 0 #1a3a8c,5px 5px 0 #000;animation:grblink2 .7s steps(1) infinite}
@keyframes grblink2{50%{color:#fff}}

/* выход на ринг */
.gr-ring{width:100%;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.gr-ringt{font-family:P2;font-size:17px;line-height:1.5;color:var(--y);text-shadow:3px 3px 0 var(--red),5px 5px 0 #000;min-height:52px;max-width:330px}
.gr-ringrow{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;width:100%;max-width:360px}
.gr-rh{background:linear-gradient(#2b1a2a,#120a12);border:2px solid #4a3040;animation:grhop .9s steps(3) infinite}
.gr-rh img{width:100%;height:auto}
@keyframes grhop{0%,60%,100%{transform:none}30%{transform:translateY(-6px)}}
.gr-rings{visibility:hidden;font-family:P2;font-size:11px;color:#fff;background:var(--red);padding:7px 9px 6px;box-shadow:3px 3px 0 #000}

/* раунды */
.gr-fight{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-evenly;gap:6px}
.gr-ftop{width:100%;display:flex;flex-direction:column;gap:8px}
.gr-round{align-self:center;display:flex;align-items:center;gap:8px;font-family:P2;font-size:12px;color:var(--y);text-shadow:2px 2px 0 var(--red),4px 4px 0 #000}
.gr-round b{font-weight:400;color:#fff;background:var(--red);padding:5px 7px 4px;text-shadow:none;box-shadow:3px 3px 0 #000}
.gr-meter{width:100%;background:rgba(10,4,6,.8);border:2px solid #5a3a3e;padding:6px 8px 7px}
.gr-mlab{display:flex;justify-content:space-between;font-family:T5;font-size:12px;letter-spacing:1px;color:var(--cy);margin-bottom:5px}
.gr-mlab b{font-weight:400;color:#fff}
.gr-mbar{display:flex;gap:2px}
.gr-mbar i{flex:1;height:10px;background:#2a1a1e;box-shadow:inset 0 -2px 0 rgba(0,0,0,.4)}
.gr-mbar i.on{background:var(--y);box-shadow:inset 0 -2px 0 #c58a00}
.gr-mbar i.max{background:var(--mag);box-shadow:inset 0 -2px 0 #7a1a4a;animation:grmax .4s steps(1) infinite}
@keyframes grmax{50%{background:var(--y)}}
.gr-queue{display:flex;justify-content:center;gap:6px}
.gr-q{width:40px;height:40px;background:linear-gradient(#2b1a2a,#120a12);border:2px solid #4a3040;overflow:hidden;transition:transform .1s steps(2)}
.gr-q img{width:100%;height:auto}
.gr-q.cur{border-color:var(--y);box-shadow:0 0 0 2px var(--red);transform:translateY(-5px) scale(1.12)}
.gr-q.done{opacity:.45}
.gr-arena{position:relative;width:100%;display:flex;align-items:flex-end;justify-content:space-between}
.gr-side{display:flex;flex-direction:column;align-items:center;min-width:0}
.gr-bust{display:block;filter:drop-shadow(4px 0 0 rgba(0,0,0,.55))}
.gr-side.l .gr-bust{filter:drop-shadow(0 0 14px rgba(229,72,60,.75))}
.gr-side.r .gr-bust{filter:drop-shadow(0 0 14px rgba(63,224,255,.6))}
.gr-plate{margin-top:6px;font-family:P2;font-size:11px;color:#fff;background:#000;border:2px solid var(--y);padding:4px 6px 3px;white-space:nowrap}
.gr-side.l .gr-plate{border-color:var(--red)}
.gr-side.r .gr-plate{border-color:var(--cy)}
.gr-role{margin-top:4px;font-family:T5;font-size:11px;letter-spacing:1px;color:var(--mus)}
.gr-vs{visibility:hidden;position:absolute;left:50%;top:36%;translate:-50% 0;font-family:P2;font-size:30px;color:var(--y);
  text-shadow:3px 3px 0 var(--red),6px 6px 0 #000;z-index:2}
.gr-bubble{visibility:hidden;position:relative;width:100%;min-height:72px;background:#fff;color:var(--ink);padding:11px 12px 10px;
  box-shadow:0 0 0 3px var(--ink),5px 5px 0 3px rgba(0,0,0,.5)}
.gr-bubble::before{content:"";position:absolute;left:54px;top:-12px;width:12px;height:12px;background:#fff;box-shadow:-3px 0 0 var(--ink),3px 0 0 var(--ink),0 -3px 0 var(--ink)}
.gr-bubble::after{content:"";position:absolute;left:57px;top:-18px;width:6px;height:6px;background:#fff;box-shadow:-3px 0 0 var(--ink),3px 0 0 var(--ink),0 -3px 0 var(--ink)}
.gr-bt{font-family:P2;font-size:11px;line-height:1.7;min-height:18px}
.gr-bt + .gr-bt{margin-top:8px;color:var(--red-d)}
.gr-ok{visibility:hidden;font-family:P2;font-size:10px;color:#5dff9a;text-shadow:2px 2px 0 #000;min-height:13px;text-align:center}
.gr-fight.boss .gr-round span{color:#fff;animation:grblink .4s steps(1) infinite}
.gr-fight.boss .gr-side.l .gr-bust{filter:drop-shadow(0 0 18px #e5483c) drop-shadow(0 0 6px #ffd23f)}
.gr-fight.boss .gr-side.l .gr-plate{background:var(--red);border-color:var(--y)}
.gr-bosswarn{position:absolute;left:-12px;right:-12px;top:40%;z-index:5;display:flex;flex-direction:column;gap:8px;align-items:center;background:rgba(40,0,6,.92)}
.gr-bw{font-family:P2;font-size:22px;color:#fff;text-shadow:3px 3px 0 var(--red),6px 6px 0 #000;animation:grblink .3s steps(1) infinite,grglitch 1s steps(1) infinite;padding:6px 0}
/* болельщики у канатов */
.gr-crowd{position:relative;width:calc(100% + 24px);margin:0 -12px;height:78px;flex:none}
.gr-rope{position:absolute;left:0;right:0;height:4px;box-shadow:0 2px 0 rgba(0,0,0,.5);z-index:2}
.gr-rope.a{top:22px;background:repeating-linear-gradient(90deg,#e5483c 0 18px,#f4ead2 18px 24px)}
.gr-rope.b{top:40px;background:repeating-linear-gradient(90deg,#f4ead2 0 18px,#e5483c 18px 24px)}
.gr-rope.c{top:58px;background:repeating-linear-gradient(90deg,#e5483c 0 18px,#f4ead2 18px 24px)}
.gr-post{position:absolute;top:14px;bottom:0;width:10px;background:linear-gradient(90deg,#c9c2d8,#6a6680);box-shadow:0 0 0 2px #0b0716;z-index:3}
.gr-post.l{left:4px}.gr-post.r{right:4px}
.gr-fan{position:absolute;bottom:4px;width:44px;margin-left:-22px;z-index:1;animation:grhop 1.1s steps(3) infinite}
.gr-fan img{width:100%;height:auto;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.6))}
.gr-crowd.cheer .gr-fan{animation:grcheer .5s steps(3) 2}
@keyframes grcheer{0%,100%{transform:none}50%{transform:translateY(-16px)}}
/* то, что летит поверх экрана */
.gr-prop{position:fixed;left:0;top:0;z-index:22;pointer-events:none;filter:drop-shadow(2px 3px 0 rgba(0,0,0,.6))}
.gr-heart{position:fixed;z-index:22;pointer-events:none}
.gr-plus{position:fixed;z-index:22;pointer-events:none;font-family:P2;font-size:16px;color:#5dff9a;text-shadow:2px 2px 0 #000}
.gr-capfly{position:fixed;z-index:22;pointer-events:none;height:auto;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.6))}

/* торт */
.gr-final{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center}
.gr-ctitle{font-family:P2;font-size:22px;color:var(--y);text-shadow:3px 3px 0 var(--mag),6px 6px 0 #000}
.gr-cake{position:relative;width:220px;height:170px;margin-top:30px;cursor:pointer;filter:drop-shadow(0 10px 0 rgba(0,0,0,.5)) drop-shadow(0 0 26px rgba(255,210,63,.45))}
.gr-cake > img{position:absolute;left:0;top:0}
.gr-wick{position:absolute;top:-38px;width:44px;height:56px;margin-left:-22px;cursor:pointer}
.gr-flame{position:absolute;left:50%;top:33px;margin-left:-7.5px;animation:grflame .3s steps(1) infinite;transform-origin:50% 100%}
@keyframes grflame{0%{transform:none}33%{transform:scaleX(-1) translateY(-2px)}66%{transform:scale(1.1,.9)}}
.gr-chint{font-family:P2;font-size:12px;color:#fff;text-shadow:2px 2px 0 #000;animation:grsoft 1s steps(1) infinite}

/* финал */
.gr-final.end{position:relative;justify-content:flex-start;gap:8px;padding-top:62px}
.gr-disco{position:absolute;left:50%;top:-14px;width:66px;height:80px;margin-left:-33px;pointer-events:none}
.gr-string{position:absolute;left:32px;top:0;width:2px;height:16px;background:#9a90b0}
.gr-ball{position:absolute;left:0;top:14px;width:66px;height:66px;filter:drop-shadow(0 0 12px rgba(200,220,255,.55))}
.gr-beams{position:absolute;left:33px;top:47px;width:2px;height:2px}
.gr-beams::before,.gr-beams::after{content:"";position:absolute;left:-220px;top:-220px;width:440px;height:440px;border-radius:50%;
  background:conic-gradient(from 0deg,rgba(255,240,180,.16) 0 6deg,transparent 6deg 40deg,rgba(63,224,255,.13) 40deg 46deg,transparent 46deg 90deg,
    rgba(255,143,192,.14) 90deg 96deg,transparent 96deg 140deg,rgba(255,210,63,.14) 140deg 146deg,transparent 146deg 200deg,
    rgba(63,224,255,.12) 200deg 206deg,transparent 206deg 270deg,rgba(255,240,180,.14) 270deg 276deg,transparent 276deg);
  animation:grspin 6s linear infinite}
.gr-beams::after{animation-duration:9s;animation-direction:reverse;opacity:.7}
@keyframes grspin{to{transform:rotate(360deg)}}
.gr-hb{position:relative;z-index:2}
.gr-hb .a{font-family:P2;font-size:15px;color:var(--cream);text-shadow:2px 2px 0 var(--mag),4px 4px 0 #000}
.gr-hb .b{font-family:P2;font-size:42px;color:var(--y);margin-top:8px;text-shadow:4px 4px 0 var(--mag),8px 8px 0 #000,-2px 0 0 rgba(63,224,255,.6);animation:grbob 1s ease-in-out infinite}
@keyframes grbob{50%{transform:translateY(-4px) rotate(-2deg)}}
.gr-dance{position:relative;flex:1;min-height:0;width:calc(100% + 24px);margin:0 -12px;display:flex;align-items:flex-end;justify-content:center;
  background:radial-gradient(40% 10% at 50% 74%,rgba(0,0,0,.55) 0 60%,transparent 62%)}
.gr-dance::before{content:"";position:absolute;left:50%;top:0;bottom:16%;width:76%;translate:-50% 0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,240,180,0),rgba(255,240,180,.18));clip-path:polygon(44% 0,56% 0,100% 100%,0 100%)}
.gr-dbox{position:relative;z-index:1;margin-bottom:58px;filter:drop-shadow(0 0 16px rgba(255,210,63,.5))}
.gr-dancer{position:absolute;left:0;top:0}
.gr-bighead{position:absolute;transform-origin:50% 90%}
.gr-front{position:absolute;left:8px;right:8px;bottom:0;z-index:2;display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:auto auto;column-gap:2px}
.gr-fh{grid-row:2;min-width:0}
.gr-fh.back{grid-row:1;translate:50% 0;margin-bottom:-22px;filter:brightness(.72)}
.gr-fh img{width:100%;max-width:48px;height:auto;margin:0 auto;filter:drop-shadow(2px 2px 0 rgba(0,0,0,.6))}
.gr-tail{width:calc(100% + 24px);margin:0 -12px;padding:8px 12px 0;display:flex;flex-direction:column;gap:8px;align-items:center;
  background:linear-gradient(180deg,rgba(11,7,22,.6),rgba(11,7,22,.92))}
.gr-done{font-family:P2;font-size:11px;color:var(--y);text-shadow:2px 2px 0 #000;animation:grsoft 1.1s steps(1) infinite}
.gr-from{font-family:T5;font-size:11px;letter-spacing:2px;color:#cfc3ff}
.gr-btns{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gr-btns .pbtn{font-size:11px}

@media (max-height:700px){
  .gr-q{width:32px;height:32px}
  .gr-crowd{height:62px}
  .gr-rope.a{top:16px}.gr-rope.b{top:31px}.gr-rope.c{top:46px}
  .gr-fan{width:34px;margin-left:-17px}
  .gr-bubble{min-height:60px;padding:9px 10px 8px}
  .gr-hb .b{font-size:32px}
  .gr-cake{transform:scale(.8);margin-top:20px}
  .gr-final.end{padding-top:54px}
  .gr-dbox{margin-bottom:44px}
  .gr-fh img{max-width:38px}
}
@media (prefers-reduced-motion:reduce){
  .gr-beams::before,.gr-beams::after{animation:none}
}