:root{
  --red1:#9a0f12; --red2:#7d0b0e; --red3:#4d0608; --red4:#2a0405;
  --ink:#1c0304; --yellow:#F5C518; --blood:#c31018; --card:#160c0a;
  --disp:'Oswald',sans-serif; --body:'Manrope',sans-serif; --hand:'Caveat',cursive; --hand2:'Marck Script',cursive;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#2a0405}
body,button,.card,a,input{cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='34' height='34'><g transform='translate(34 0) scale(-1 1)'><line x1='10' y1='31' x2='24' y2='9' stroke='%233a2410' stroke-width='6' stroke-linecap='round'/><line x1='10' y1='31' x2='24' y2='9' stroke='%237a4a22' stroke-width='4' stroke-linecap='round'/><line x1='11' y1='29' x2='23' y2='10' stroke='%23a06a35' stroke-width='1.2' stroke-linecap='round'/><path d='M26.5 2 L13.5 3 Q6.5 8.5 8.5 17.5 L24 13 Q28 8 26.5 2 Z' fill='%23c9ccd4' stroke='%23596070' stroke-width='1.1'/><path d='M13.5 3 Q6.5 8.5 8.5 17.5 L12 16.5 Q10.2 9.8 15.8 4.4 Z' fill='%23f2f4f7'/><path d='M7.5 21 q3.4 3.8 0 6.4 q-3.4 -2.6 0 -6.4' fill='%23c31018'/></g></svg>") 26 16, auto}
body{font-family:var(--body);color:#f3e7d8;position:relative;
  background:radial-gradient(130% 100% at 50% 30%,var(--red1) 0%,var(--red2) 34%,var(--red3) 72%,var(--red4) 100%)}
.hidden{display:none!important}
/* подчёркивание у ссылок нигде не нужно — часть из них оформлена кнопками */
a{text-decoration:none}

/* texture */
.grain{position:fixed;inset:0;opacity:.14;mix-blend-mode:multiply;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/></svg>")}
.vig{position:fixed;inset:0;pointer-events:none;z-index:2;box-shadow:inset 0 0 320px 90px rgba(20,2,3,.85)}
#wall{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.qw{position:absolute;color:var(--ink);font-family:var(--hand);font-weight:700;line-height:.95;white-space:pre;
  opacity:0;text-shadow:0 1px 0 rgba(255,120,90,.05)}
.qw.mk{font-family:var(--hand2);opacity:.5}
.qw .cursor{color:#3a0608}

.screen{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* ---------- SPLASH ---------- */
.openvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:0}
/* заглушки-силуэты скрыты по умолчанию: показываем ТОЛЬКО если видео не завелось */
#fighters,#spbFallback{display:none}
body.novideo #fighters{display:flex}
body.novideo #spbFallback{display:block}
#splash::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(20,2,3,.72) 0%,rgba(20,2,3,.15) 32%,rgba(20,2,3,.2) 62%,rgba(20,2,3,.85) 100%)}
body.novideo #splash::before{background:none}
body:not(.novideo) #splash .startbtn{margin-top:auto;margin-bottom:8vh}
body:not(.novideo) #splash{justify-content:flex-start;padding-top:4vh}
.spb{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:-1;pointer-events:none;opacity:.85;
  background:
    linear-gradient(180deg,rgba(42,4,5,0) 0%,rgba(42,4,5,.2) 60%,rgba(20,2,3,.9) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='1200' height='300' preserveAspectRatio='none'><g fill='%23230304'><rect x='0' y='210' width='1200' height='90'/><rect x='60' y='150' width='40' height='140'/><rect x='120' y='170' width='120' height='120'/><rect x='300' y='120' width='90' height='170'/><path d='M345 120 l0 -60 l8 0 l0 60'/><rect x='430' y='160' width='160' height='130'/><ellipse cx='700' cy='150' rx='70' ry='40' fill='%232a0405'/><rect x='665' y='150' width='70' height='140'/><path d='M700 110 l0 -55 l6 0 l0 55'/><rect x='800' y='175' width='140' height='115'/><rect x='980' y='140' width='70' height='150'/><rect x='1080' y='185' width='120' height='105'/></g></svg>") bottom center / cover no-repeat}
.spb::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;
  background:linear-gradient(180deg,rgba(120,20,15,.0),rgba(160,30,20,.25));
  mask:linear-gradient(180deg,transparent,black)}
.s18{position:absolute;top:24px;left:28px;font-family:var(--disp);font-size:24px;color:#e9c9c9;opacity:.5;z-index:6}
.slogan{position:absolute;top:6%;text-align:center;font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:clamp(28px,5vw,58px);line-height:1.02;letter-spacing:3px;color:#fff;z-index:6;
  text-shadow:0 3px 0 var(--red3),0 0 40px rgba(0,0,0,.5)}
.slogan .y{color:var(--yellow);text-shadow:0 3px 0 var(--red3),0 0 34px rgba(245,197,24,.45)}
.fighters{display:flex;align-items:center;justify-content:center;gap:min(6vw,90px);z-index:5;margin-top:2%}
.fighter{width:min(30vw,340px);height:min(52vh,540px);position:relative;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.fighter svg{width:100%;height:100%}
.fighter .nm{position:absolute;bottom:-6px;width:100%;text-align:center;font-family:var(--disp);font-weight:700;
  text-transform:uppercase;letter-spacing:2px;font-size:clamp(14px,1.6vw,22px);color:var(--yellow);
  text-shadow:0 2px 0 var(--red3),0 0 18px rgba(0,0,0,.6)}
.vsbig{font-family:var(--disp);font-weight:700;font-size:clamp(48px,8vw,110px);color:#fff;transform:rotate(-4deg);
  text-shadow:0 0 34px rgba(195,16,24,.9),0 7px 0 var(--red3);z-index:6}
.startbtn{position:relative;margin-top:3%;z-index:6;font-family:var(--disp);font-weight:700;font-size:clamp(20px,2.4vw,30px);
  letter-spacing:4px;color:#fff;background:linear-gradient(180deg,#e11419,#8c0a0e);border:none;
  padding:18px 60px;border-radius:12px;cursor:pointer;text-transform:uppercase;
  box-shadow:0 12px 0 #5a0608,0 22px 40px -8px rgba(180,10,10,.8),inset 0 2px 0 rgba(255,255,255,.25);
  transition:transform .12s ease-out,box-shadow .12s ease-out}
.startbtn:hover{transform:translateY(-2px)}
.startbtn:active{transform:translateY(8px);box-shadow:0 4px 0 #5a0608,0 10px 24px -8px rgba(180,10,10,.8)}
.startbtn .drip{position:absolute;left:0;right:0;top:100%;height:40px;pointer-events:none;
  background:
   radial-gradient(6px 12px at 18% 0,#b00d12 60%,transparent 62%),
   radial-gradient(5px 22px at 44% 0,#b00d12 60%,transparent 62%),
   radial-gradient(7px 16px at 72% 0,#b00d12 60%,transparent 62%),
   radial-gradient(4px 28px at 88% 0,#b00d12 60%,transparent 62%)}
.credits{position:absolute;bottom:22px;font-family:var(--hand2);font-size:16px;color:#e8b7a2;opacity:.6;z-index:6}

/* ---------- WHO (name entry) ---------- */
.whobox{position:relative;z-index:6;text-align:center;background:rgba(20,3,4,.55);border:1px solid rgba(245,197,24,.25);
  border-radius:22px;padding:44px 56px 40px;box-shadow:0 40px 90px -30px rgba(0,0,0,.9);backdrop-filter:blur(3px)}
.whoeyebrow{font-family:var(--hand2);font-size:19px;color:#e8a48a;margin-bottom:10px}
.whotitle{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:2px;
  font-size:clamp(24px,3.4vw,40px);color:#fff;line-height:1.05;margin-bottom:26px;
  text-shadow:0 3px 0 var(--red3),0 0 34px rgba(0,0,0,.5)}
.whotitle .y{color:var(--yellow)}
.whoinput{display:block;margin:0 auto 16px;width:min(70vw,320px);text-align:center;
  font-family:var(--hand);font-size:30px;font-weight:700;color:#fff;background:rgba(0,0,0,.35);
  border:none;border-bottom:3px solid var(--blood);border-radius:8px 8px 0 0;padding:10px 14px;outline:none}
.whoinput::placeholder{color:#a86}
.whoinput:focus{border-bottom-color:var(--yellow)}
.whoquick{display:flex;gap:10px;justify-content:center;margin-bottom:28px}
.whochip{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:1px;color:#f3d;color:#f0d0c0;
  background:rgba(195,16,24,.22);border:1px solid rgba(227,48,23,.5);border-radius:999px;padding:8px 22px;
  transition:all .14s ease-out}
.whochip:hover{background:var(--blood);color:#fff;transform:translateY(-2px)}
.startbtn.small{font-size:clamp(17px,1.8vw,22px);padding:14px 46px;margin-top:0}

/* ---------- BATTLE ---------- */
.roundbar{position:absolute;top:5%;text-align:center;z-index:6}
#roundName{display:block;font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:5px;
  font-size:clamp(22px,3vw,40px);color:var(--yellow);text-shadow:0 3px 0 var(--red3),0 0 30px rgba(245,197,24,.35)}
#roundProg{display:block;margin-top:6px;font-family:var(--disp);letter-spacing:3px;color:#f0d0c0;opacity:.8;font-size:14px}
.stage{display:flex;align-items:center;justify-content:center;gap:min(7vw,90px);z-index:5;width:100%}
.vsmid{font-family:var(--disp);font-weight:700;font-size:clamp(40px,6vw,84px);color:#fff;transform:rotate(-4deg);
  text-shadow:0 0 30px rgba(195,16,24,.9),0 6px 0 var(--red3);z-index:6}

/* card */
.card{width:min(30vw,380px);background:linear-gradient(180deg,#1a0f0d,#120807);border:1px solid rgba(245,197,24,.28);
  border-radius:18px;overflow:hidden;position:relative;cursor:pointer;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.85),0 0 0 1px rgba(195,16,24,.12);
  transition:transform .16s cubic-bezier(.23,1,.32,1),box-shadow .16s ease-out}
.card:hover{transform:translateY(-6px) scale(1.015);box-shadow:0 40px 80px -18px rgba(0,0,0,.9),0 0 0 2px var(--yellow),0 0 40px rgba(245,197,24,.3)}
.card:active{transform:translateY(-2px) scale(.995)}
.stamp{position:absolute;top:12px;left:12px;z-index:4;transform:rotate(-7deg);
  font-family:var(--disp);font-weight:700;font-size:17px;letter-spacing:1.6px;text-transform:uppercase;
  color:#ff5a5a;border:3px solid #ff5a5a;border-radius:6px;padding:5px 14px;
  background:#0b0102;text-shadow:0 0 12px rgba(255,90,90,.9);
  box-shadow:inset 0 0 12px rgba(255,90,90,.3), 0 4px 18px rgba(0,0,0,.9), 0 0 0 2px rgba(0,0,0,.55)}
.card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:18px;opacity:.10;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.tag{position:absolute;top:13px;right:13px;z-index:3;font-family:var(--disp);font-size:11px;font-weight:600;letter-spacing:.5px;
  padding:4px 9px;border-radius:999px;text-transform:uppercase;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.45)}
.tag.fav{background:var(--yellow);color:#2a0405}.tag.stay{background:#fff;color:#8c0a0e}
.card .ph{height:210px;position:relative;overflow:hidden}
.card .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.9) contrast(1.06) sepia(.12);opacity:0;transition:opacity .35s ease}
.card .ph img.on{opacity:1}
.card .dots{position:absolute;left:0;right:0;bottom:9px;z-index:4;display:flex;gap:7px;justify-content:center}
.card .dots i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.4);
  box-shadow:0 1px 4px rgba(0,0,0,.6);transition:all .2s}
.card .dots i.on{background:var(--yellow);transform:scale(1.25)}
.card .dots i:hover{background:#fff}
.card .phcount{position:absolute;top:10px;right:12px;z-index:4;font-family:var(--disp);font-size:11px;
  letter-spacing:.5px;color:#fff;background:rgba(16,2,3,.7);border-radius:20px;padding:2px 9px}
.card:hover .ph::before{content:"наведи — листаются фото";position:absolute;left:0;right:0;bottom:26px;z-index:4;
  text-align:center;font-family:var(--disp);font-size:10px;letter-spacing:1px;color:rgba(255,255,255,.75);
  text-shadow:0 1px 6px #000;animation:fadeHint 2.6s ease forwards}
@keyframes fadeHint{0%{opacity:0}18%{opacity:1}70%{opacity:1}100%{opacity:0}}
.card .ph::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(120,10,10,.14) 0%,transparent 30%),
             radial-gradient(120% 90% at 50% 30%,transparent 55%,rgba(90,6,8,.35) 100%),
             linear-gradient(180deg,transparent 42%,rgba(18,8,7,.95))}
.card .cb{padding:15px 17px 18px}
.card h3{font-family:var(--disp);font-weight:600;font-size:21px;color:#fff;text-transform:uppercase;letter-spacing:.3px;line-height:1.05}
.card .meta{font-size:12.5px;color:#caa;margin-top:4px}
.card .price{font-family:var(--disp);font-weight:700;font-size:30px;color:var(--yellow);margin:11px 0 3px}
.card .price small{font-size:13px;color:#b98;font-weight:400}
.card .per{font-size:11px;color:#c99;margin-bottom:12px}
.card .bars{display:flex;flex-direction:column;gap:6px}
.card .bar{display:flex;align-items:center;gap:9px}
.card .bar b{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.4px;color:#c9a;width:66px;flex:0 0 66px}
.card .bar i{height:7px;border-radius:4px;background:#2a1512;flex:1;overflow:hidden;position:relative}
.card .bar i s{position:absolute;left:0;top:0;bottom:0;border-radius:4px;background:linear-gradient(90deg,var(--yellow),var(--blood))}
.card .bar u{font-family:var(--disp);font-size:11px;color:#eex;width:14px;text-align:right;color:#f0d8b8;text-decoration:none}
.card .blurb{font-family:var(--hand);font-size:17px;color:#f0c3a8;margin-top:11px;line-height:1.15}
.card .desc{font-size:11px;color:#b9948a;margin-top:7px;line-height:1.45;border-top:1px dashed rgba(227,48,23,.25);padding-top:7px}
.chip{display:inline-block;align-self:flex-start;font-family:var(--disp);font-size:10px;letter-spacing:.4px;color:#e33;background:#2a0d0a;
  border:1px solid rgba(227,48,23,.4);padding:3px 9px;border-radius:6px;margin-top:8px}
/* blood sparks */
.spark{position:fixed;border-radius:50% 50% 50% 0;background:#a30d12;z-index:40;pointer-events:none;
  box-shadow:0 0 6px rgba(163,13,18,.7)}
.stain{position:absolute;border-radius:50%;background:radial-gradient(circle,rgba(140,6,10,.92) 0%,rgba(110,4,8,.6) 55%,transparent 75%);
  z-index:6;pointer-events:none}

/* fatality overlay */
.slash{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:0}
.slash .cut{position:absolute;top:50%;left:-10%;width:120%;height:5px;background:linear-gradient(90deg,transparent,#fff,transparent);
  transform:translateY(-50%) rotate(-18deg);box-shadow:0 0 24px #fff}
.slash .blood{position:absolute;inset:0;background:
  radial-gradient(60px 30px at 30% 46%,rgba(150,5,8,.9),transparent 70%),
  radial-gradient(90px 40px at 62% 54%,rgba(120,4,6,.85),transparent 70%);mix-blend-mode:multiply}
.winnerglow{box-shadow:0 0 0 3px var(--yellow),0 0 70px rgba(245,197,24,.6),0 30px 70px -18px rgba(0,0,0,.9)!important}

/* ---------- PODIUM ---------- */
#podium{justify-content:flex-start;padding-top:3.5%;overflow-y:auto;overflow-x:hidden}
#podium>*{flex:0 0 auto}
.podtitle{font-family:var(--disp);font-weight:700;letter-spacing:8px;text-transform:uppercase;
  font-size:clamp(26px,4vw,52px);color:var(--yellow);text-shadow:0 3px 0 var(--red3),0 0 40px rgba(245,197,24,.4);margin-bottom:10px}
.congrats{font-family:var(--hand);font-size:clamp(20px,2.3vw,30px);color:#f6ddc8;margin-bottom:2.4%;text-align:center;
  text-shadow:0 2px 6px rgba(0,0,0,.5)}
.congrats s{color:#d98a7c;text-decoration-thickness:3px;text-decoration-color:var(--blood)}
.congrats .fix{color:var(--yellow);font-weight:700;position:relative;padding:0 2px}
.ghostbtn.mini{position:fixed;top:18px;right:22px;z-index:9;font-size:12px;padding:8px 16px;opacity:.85}
.podstage{display:flex;align-items:flex-end;justify-content:center;gap:min(4vw,50px);perspective:1200px}
.podslot{display:flex;flex-direction:column;align-items:center;gap:14px}
.podslot .medal{font-family:var(--disp);font-weight:700;font-size:clamp(30px,5vw,64px)}
.podslot.p1 .medal{color:var(--yellow);text-shadow:0 0 30px rgba(245,197,24,.7)}
.podslot.p2 .medal{color:#d8d8e0}.podslot.p3 .medal{color:#cd7f32}
.podcard{width:min(24vw,290px);border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#1a0f0d,#120807);
  border:1px solid rgba(245,197,24,.3);box-shadow:0 30px 70px -20px rgba(0,0,0,.85);transform-style:preserve-3d}
.podslot.p1 .podcard{width:min(30vw,360px);box-shadow:0 0 0 3px var(--yellow),0 0 90px rgba(245,197,24,.55),0 40px 90px -20px rgba(0,0,0,.9)}
.podcard .ph{height:170px}.podslot.p1 .podcard .ph{height:220px}
.podcard .ph img{width:100%;height:100%;object-fit:cover}
.podcard .pc{padding:12px 14px 15px}
.podcard h3{font-family:var(--disp);font-weight:600;text-transform:uppercase;color:#fff;font-size:18px;line-height:1.05}
.podcard .price{font-family:var(--disp);font-weight:700;color:var(--yellow);font-size:24px;margin-top:6px}
.podbtns{margin-top:3%;z-index:6;flex:0 0 auto;display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.ghostbtn.gold{background:var(--yellow);color:#2a0405;border-color:var(--yellow)}
.ghostbtn.gold:hover{background:#ffd94d;border-color:#ffd94d}
.toast{position:fixed;bottom:34px;left:50%;transform:translateX(-50%);z-index:99;
  font-family:var(--disp);font-size:15px;letter-spacing:1px;color:#fff;
  background:rgba(16,2,3,.92);border:1px solid var(--yellow);border-radius:10px;padding:12px 26px;
  box-shadow:0 12px 40px rgba(0,0,0,.6);opacity:0;pointer-events:none}
.ghostbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:2px;text-transform:uppercase;
  color:var(--yellow);text-decoration:none;white-space:nowrap;line-height:1.15;
  background:transparent;border:2px solid var(--yellow);padding:12px 26px;border-radius:10px;
  transition:background .15s,color .15s,border-color .15s}
.ghostbtn:hover{background:var(--yellow);color:#2a0405}
.podcard .alink{display:block;font-family:var(--disp);font-size:12px;letter-spacing:.5px;color:var(--yellow);
  margin-top:8px;text-decoration:none;border-top:1px dashed rgba(245,197,24,.3);padding-top:8px}
.podcard .alink:hover{color:#fff}
.vidwrap{margin:6px auto 0;z-index:6;width:min(60vw,640px);border-radius:16px;overflow:hidden;
  border:1px solid rgba(245,197,24,.3);box-shadow:0 30px 70px -20px rgba(0,0,0,.85)}
.vidwrap video{display:block;width:100%}
.vidnote{font-family:var(--hand2);font-size:17px;color:#e8b7a2;opacity:.75;z-index:6;margin:26px 0 4px;text-align:center}
.credits2{margin:8px 0 26px;font-family:var(--hand2);font-size:17px;color:#e8b7a2;opacity:.85;z-index:6}
.credits2 b{color:var(--yellow);font-weight:600}
.ember{position:fixed;width:5px;height:5px;border-radius:50%;background:#ffb347;box-shadow:0 0 8px #ff7a1a;z-index:4;pointer-events:none}



/* ================================================================
   МОБИЛЬНЫЙ СЛОЙ. Всё ниже живёт только внутри медиазапросов —
   на десктопе ни одно правило отсюда не применяется.
   ================================================================ */
@media (max-width:760px){

  /* ---------- дуэль: компактная карточка ----------
     На телефоне две полноценные карточки рядом не встают: при width:30vw
     получалось 117px ширины и 1080px высоты. Поэтому карточки делим поровну
     по ширине экрана, а из содержимого оставляем только то, по чему реально
     выбирают — фото, название, цену и три главные шкалы. */
  .stage{gap:6px;padding:0 6px;align-items:stretch}
  .stage .card{width:auto;flex:1 1 0;min-width:0;max-width:none}
  /* align-items:stretch растягивал и «VS» — надпись уезжала к верхнему краю */
  .vsmid{align-self:center}
  .card .ph{height:132px}
  .card .cb{padding:10px 10px 12px}
  .card h3{font-size:15px;letter-spacing:0}
  .card .meta{font-size:10.5px;margin-top:3px}
  .card .price{font-size:21px;margin:7px 0 2px}
  .card .per{font-size:10px}
  .card .bars{margin-top:8px}
  .card .bar{font-size:9.5px}
  .card .bar b{width:52px}
  .card .bar u{font-size:9.5px;width:11px}
  /* шкалы идут в порядке: цена, локация, оснащение, размер, вайб, уборка, заезд —
     на маленьком экране оставляем первые три */
  .card .bars .bar:nth-child(n+4){display:none}
  .card .blurb,.card .desc{display:none}
  .card .chip{font-size:9.5px;padding:3px 7px}
  .card .stamp{font-size:9.5px;padding:3px 7px}
  .card .tag{font-size:9px;padding:3px 7px;top:9px;right:9px}
  .card .phcount{font-size:9.5px;padding:2px 7px}
  .card:hover .ph::before{content:none}   /* подсказка про наведение мышью на телефоне бессмысленна */
  .vsmid{font-size:24px;flex:0 0 auto;align-self:center}
  .roundbar{top:12px}
  #roundName{font-size:18px;letter-spacing:2px}
  #roundProg{font-size:10px}

  /* ---------- пьедестал: в столбик ----------
     В ряд слоты сжимались до 94px и названия было не прочесть. */
  #podium{justify-content:flex-start;padding:56px 12px 20px;overflow-y:auto}
  .podtitle{font-size:26px;letter-spacing:4px}
  .congrats{font-size:18px;margin-bottom:14px}
  .podstage{flex-direction:column;align-items:center;gap:14px;perspective:none;width:100%}
  .podslot{flex-direction:row;align-items:center;gap:12px;width:100%;max-width:340px}
  .podslot .medal{font-size:30px;flex:0 0 30px}
  .podcard,.podslot.p1 .podcard{width:auto;flex:1 1 auto;min-width:0;
    display:flex;align-items:stretch;transform:none!important}
  .podcard .ph,.podslot.p1 .podcard .ph{height:auto;width:104px;flex:0 0 104px}
  .podcard .pc{padding:10px 12px;flex:1;min-width:0}
  .podcard h3{font-size:14px}
  .podcard .price{font-size:18px;margin-top:4px}
  .podcard .alink{font-size:10.5px;margin-top:6px;padding-top:6px}
  .podbtns{margin-top:16px;gap:8px}
  .podbtns .ghostbtn{font-size:12px;padding:10px 16px;letter-spacing:1px}
  .vidwrap{width:min(92vw,420px)}
  .vidnote{font-size:14px;margin:14px 0 4px}
  .credits2{font-size:14px;margin:10px 0 18px}

  /* ---------- заставка и ввод имени ---------- */
  .slogan{font-size:26px;letter-spacing:1px;top:7%}
  .s18{font-size:17px;top:14px;left:14px}
  .startbtn{font-size:19px;letter-spacing:2px;padding:15px 42px}
  .whobox{padding:30px 22px 26px;width:min(92vw,420px)}
  .whotitle{font-size:22px;margin-bottom:18px}
  .whoeyebrow{font-size:16px}
  .whoinput{font-size:24px;width:100%}
  .whoquick{flex-wrap:wrap;margin-bottom:20px}
  .whochip{font-size:13px;padding:7px 16px}
  .ghostbtn.mini{top:10px;right:10px;font-size:11px;padding:7px 12px}
}

/* узкие экраны (iPhone SE и подобные — 375px) */
@media (max-width:400px){
  .stage{gap:4px;padding:0 4px}
  .card .ph{height:112px}
  .card h3{font-size:13px}
  .card .meta{font-size:10px}
  .card .price{font-size:17px}
  .card .per{font-size:9.5px}
  .card .cb{padding:9px 8px 10px}
  .card .bar b{width:46px}
  .card .bars .bar:nth-child(n+3){display:none}   /* оставляем цену и локацию */
  .vsmid{font-size:19px;align-self:center}
}

/* невысокий экран: у SE по высоте всего ~570 под контент */
@media (max-width:760px) and (max-height:720px){
  .card .ph{height:104px}
  .card .bars{margin-top:6px}
  .card .cb{padding:8px 9px 10px}
  .roundbar{top:6px}
  #roundName{font-size:16px}
  .stage{padding-top:6px}
}

/* телефон лёжа: экран низкий, ужимаем вертикаль */
@media (max-height:520px) and (orientation:landscape){
  .card .ph{height:96px}
  .card .blurb,.card .desc{display:none}
  .card .bars .bar:nth-child(n+4){display:none}
  .slogan{font-size:22px;top:3%}
  .startbtn{padding:11px 32px;font-size:17px}
  .podstage{gap:8px}
}