/* ============================================================
   POCKET CHAMPS: GAUNTLET RUSH  -  interface
   landscape phone first. all sizing rides on --u (screen height)
   ============================================================ */
@font-face{font-family:Anton;src:url(../fonts/anton.woff2) format('woff2');font-weight:400;font-display:block}
@font-face{font-family:Nunito;src:url(../fonts/nunito.woff2) format('woff2');font-weight:400 1000;font-display:block}
@font-face{font-family:Rajdhani;src:url(../fonts/rajdhani-600.woff2) format('woff2');font-weight:600;font-display:block}
@font-face{font-family:Rajdhani;src:url(../fonts/rajdhani-700.woff2) format('woff2');font-weight:700;font-display:block}

:root{
  --u:4.3px;                     /* set from JS: 1% of viewport height */
  --ink:#05070f;
  --panel:rgba(11,17,36,.74);
  --panel2:rgba(17,25,50,.86);
  --line:rgba(150,200,255,.16);
  --line2:rgba(255,255,255,.30);
  --cy:#3ff0ff;
  --mg:#ff43a8;
  --li:#b8ff3d;
  --am:#ffc247;
  --txt:#eaf2ff;
  --dim:#8fa2c8;
  --glass:blur(16px) saturate(1.25);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink);color:var(--txt);
  font-family:Nunito,DejaVu Sans,sans-serif;font-weight:800;
  -webkit-user-select:none;user-select:none;touch-action:none;overscroll-behavior:none}

#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0}

/* ---------- fullscreen post overlays ---------- */
#speedlines{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 3%,rgba(255,255,255,.30) 3.1%,rgba(255,255,255,0) 3.6%);
  -webkit-mask-image:radial-gradient(ellipse 42% 48% at 50% 52%,transparent 40%,#000 100%);
  mask-image:radial-gradient(ellipse 42% 48% at 50% 52%,transparent 40%,#000 100%);
  mix-blend-mode:screen;transition:opacity .12s linear}
#vignette{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(ellipse 78% 82% at 50% 50%,transparent 46%,rgba(2,4,12,.62) 100%);
  box-shadow:inset 0 0 calc(9*var(--u)) rgba(0,0,0,.5)}
#flash{position:fixed;inset:0;z-index:3;pointer-events:none;opacity:0;background:#fff;mix-blend-mode:screen}

/* ---------- screens ---------- */
.screen{position:fixed;inset:0;z-index:10;display:none;align-items:center;justify-content:center;
  padding:calc(2.5*var(--u)) calc(3*var(--u));
  padding-left:max(calc(3*var(--u)),env(safe-area-inset-left));
  padding-right:max(calc(3*var(--u)),env(safe-area-inset-right))}
.screen.show{display:flex}
.screen.bare{background:none;pointer-events:none}
.screen.bare.show{display:block}

/* ============================== LOADING ============================== */
#loading{background:
  radial-gradient(ellipse 70% 90% at 50% 120%,#1b2a6b 0%,transparent 60%),
  radial-gradient(ellipse 60% 70% at 50% -10%,#3a1150 0%,transparent 60%),
  #05070f;flex-direction:column}
.load-inner{text-align:center}
.load-logo{font-family:Anton;letter-spacing:.02em;line-height:.86;font-size:calc(11*var(--u))}
.ll-1{display:block;color:#cfe0ff;opacity:.75;font-size:.44em;letter-spacing:.34em;margin-bottom:.4em}
.ll-2{display:block;background:linear-gradient(180deg,#fff,#8fd8ff 55%,#3aa8ff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 calc(.4*var(--u)) calc(1.4*var(--u)) rgba(60,180,255,.55))}
.load-sub{font-family:Rajdhani;font-weight:700;letter-spacing:.5em;font-size:calc(2.4*var(--u));color:var(--cy);margin:calc(1.6*var(--u)) 0 calc(3*var(--u))}
.load-bar{width:calc(58*var(--u));max-width:74vw;height:calc(1.5*var(--u));border-radius:999px;
  background:rgba(255,255,255,.09);overflow:hidden;margin:0 auto;box-shadow:inset 0 0 0 1px var(--line)}
.load-bar i{display:block;height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg,var(--cy),var(--li) 60%,var(--am));
  box-shadow:0 0 calc(2*var(--u)) rgba(120,240,255,.8);transition:width .25s ease}
.load-note{margin-top:calc(1.8*var(--u));font-size:calc(2*var(--u));color:var(--dim);letter-spacing:.16em;text-transform:uppercase}

/* ============================== TITLE ============================== */
#title{background:linear-gradient(180deg,rgba(4,6,16,.30),rgba(4,6,16,.80));flex-direction:column}
.t-glow{position:absolute;inset:auto -20% -40% -20%;height:70%;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(63,240,255,.22),transparent 65%)}
.t-stack{position:relative;text-align:center;display:flex;flex-direction:column;align-items:center;gap:calc(1.4*var(--u))}
.t-kicker{font-family:Rajdhani;font-weight:700;font-size:calc(1.9*var(--u));letter-spacing:.42em;color:var(--am);
  padding:calc(.7*var(--u)) calc(2.4*var(--u));border:1px solid rgba(255,194,71,.4);border-radius:999px;
  background:rgba(255,194,71,.08)}
.t-logo{font-family:Anton;line-height:.82;letter-spacing:.01em}
.t-logo span{display:block;font-size:calc(4.6*var(--u));letter-spacing:.36em;color:#bcd4ff;opacity:.9;margin-bottom:.16em}
.t-logo em{display:block;font-style:normal;font-size:calc(14*var(--u));
  background:linear-gradient(180deg,#ffffff 6%,#a8e6ff 42%,#3aa8ff 74%,#7a5cff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 calc(.6*var(--u)) calc(2.2*var(--u)) rgba(60,170,255,.6))}
.t-rule{display:flex;align-items:center;gap:calc(1.6*var(--u));width:100%}
.t-rule i{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.t-rule b{font-family:Rajdhani;font-weight:700;font-size:calc(2.2*var(--u));letter-spacing:.4em;color:var(--cy);white-space:nowrap}
.t-track{display:flex;gap:calc(1*var(--u));margin-top:calc(.6*var(--u))}
.tt-row{display:flex;flex-direction:column;gap:calc(.3*var(--u));align-items:center;
  padding:calc(.9*var(--u)) calc(2*var(--u));border-radius:calc(1.6*var(--u));
  background:var(--panel);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 calc(.6*var(--u)) calc(2*var(--u)) rgba(0,0,0,.4)}
.tt-k{font-family:Rajdhani;font-weight:600;font-size:calc(1.5*var(--u));letter-spacing:.24em;color:var(--dim)}
.tt-v{font-family:Rajdhani;font-weight:700;font-size:calc(2.2*var(--u));letter-spacing:.08em;color:#fff}
.t-hint{font-family:Rajdhani;font-weight:600;font-size:calc(1.7*var(--u));letter-spacing:.2em;color:var(--dim);margin-top:calc(.4*var(--u))}

/* ---------- buttons ---------- */
.btn{position:relative;border:0;cursor:pointer;color:#04121a;font-family:Anton;letter-spacing:.14em;
  font-size:calc(3.1*var(--u));padding:calc(1.5*var(--u)) calc(4.4*var(--u));border-radius:calc(2*var(--u));
  background:linear-gradient(180deg,#8ff8ff,var(--cy) 46%,#12b6d8);
  box-shadow:0 calc(.6*var(--u)) 0 #0a7f9c,0 calc(1.4*var(--u)) calc(3*var(--u)) rgba(63,240,255,.34),inset 0 1px 0 rgba(255,255,255,.7);
  overflow:hidden;transition:transform .09s ease,box-shadow .09s ease}
.btn:after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;transform:skewX(-22deg);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:shine 3.4s ease-in-out infinite}
@keyframes shine{0%,72%{left:-60%}100%{left:130%}}
.btn:active{transform:translateY(calc(.5*var(--u)));box-shadow:0 calc(.1*var(--u)) 0 #0a7f9c,inset 0 1px 0 rgba(255,255,255,.5)}
.btn.big{font-size:calc(3.6*var(--u));padding:calc(1.7*var(--u)) calc(6*var(--u))}
.btn.go{background:linear-gradient(180deg,#ffe58f,var(--am) 46%,#f08a1c);box-shadow:0 calc(.6*var(--u)) 0 #a95a06,0 calc(1.4*var(--u)) calc(3*var(--u)) rgba(255,194,71,.34),inset 0 1px 0 rgba(255,255,255,.7)}
.btn.ghost{background:rgba(255,255,255,.08);color:#dce8ff;box-shadow:inset 0 0 0 2px var(--line2),0 calc(.6*var(--u)) calc(2*var(--u)) rgba(0,0,0,.35)}
.pulse{animation:pl 1.6s ease-in-out infinite}
@keyframes pl{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ============================== SELECT ============================== */
#select{background:linear-gradient(180deg,rgba(4,6,16,.62),rgba(4,6,16,.90));flex-direction:column;gap:calc(1.4*var(--u))}
.sel-head{text-align:center}
.sel-title{font-family:Anton;font-size:calc(5*var(--u));letter-spacing:.16em;
  background:linear-gradient(180deg,#fff,#9fd9ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.sel-sub{font-family:Rajdhani;font-weight:600;font-size:calc(1.8*var(--u));letter-spacing:.26em;color:var(--dim);text-transform:uppercase}
.sel-rail{display:flex;gap:calc(1.4*var(--u));align-items:stretch;justify-content:center;width:100%}
.card{position:relative;flex:1 1 0;max-width:calc(26*var(--u));border-radius:calc(2.2*var(--u));
  background:var(--panel);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line),0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.45);
  padding:calc(1*var(--u));cursor:pointer;overflow:hidden;transition:transform .16s cubic-bezier(.2,1.5,.4,1),box-shadow .16s ease}
.card:before{content:"";position:absolute;inset:0;opacity:.5;
  background:radial-gradient(ellipse 100% 60% at 50% 0%,var(--c,#3ff0ff),transparent 70%);mix-blend-mode:screen}
.card.on{transform:translateY(calc(-1.1*var(--u))) scale(1.045);
  box-shadow:inset 0 0 0 2px var(--c,#3ff0ff),0 0 calc(3*var(--u)) var(--c,#3ff0ff),0 calc(1.4*var(--u)) calc(4*var(--u)) rgba(0,0,0,.55)}
.card .cv{position:relative;width:100%;aspect-ratio:1/1;border-radius:calc(1.6*var(--u));overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(0,0,0,.28))}
.card .cv canvas{width:100%;height:100%;display:block}
.card .cn{position:relative;font-family:Anton;font-size:calc(2.5*var(--u));letter-spacing:.08em;text-align:center;margin-top:calc(.7*var(--u));color:#fff;white-space:nowrap}
/* the taglines are short but one of them is long enough to clip at six cards
   across, so it wraps to a second line and the row keeps a level baseline */
.card .ct{position:relative;font-family:Rajdhani;font-weight:600;font-size:calc(1.4*var(--u));letter-spacing:.06em;text-align:center;color:var(--dim);text-transform:uppercase;white-space:normal;line-height:1.14;min-height:calc(3.2*var(--u));display:flex;align-items:center;justify-content:center;padding:0 calc(.5*var(--u))}
.card .cb{position:relative;display:flex;flex-direction:column;gap:calc(.35*var(--u));margin-top:calc(.7*var(--u))}
.sbar{display:flex;align-items:center;gap:calc(.6*var(--u))}
.sbar span{font-family:Rajdhani;font-weight:700;font-size:calc(1.35*var(--u));letter-spacing:.1em;color:var(--dim);width:calc(4.6*var(--u))}
.sbar i{flex:1;height:calc(.85*var(--u));border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.sbar i u{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--c,#3ff0ff),#fff)}
.card .cr{position:absolute;top:calc(.9*var(--u));left:calc(.9*var(--u));z-index:2;
  font-family:Rajdhani;font-weight:700;font-size:calc(1.5*var(--u));letter-spacing:.1em;
  padding:calc(.15*var(--u)) calc(.9*var(--u));border-radius:999px;background:rgba(0,0,0,.5);color:var(--c,#3ff0ff);
  box-shadow:inset 0 0 0 1px currentColor}
.sel-foot{display:flex;align-items:center;gap:calc(2.4*var(--u));justify-content:center}
.sel-detail{font-family:Rajdhani;font-weight:600;font-size:calc(1.9*var(--u));letter-spacing:.1em;color:#b9cbea;max-width:calc(60*var(--u));text-align:right}
.sel-detail b{color:#fff}

/* ============================== INTRO ============================== */
.intro-top{position:absolute;top:calc(3*var(--u));left:50%;transform:translateX(-50%);text-align:center;
  opacity:0;animation:fadeIn .6s .2s ease forwards}
.it-badge{display:inline-block;font-family:Rajdhani;font-weight:700;font-size:calc(1.7*var(--u));letter-spacing:.4em;color:var(--am);
  padding:calc(.4*var(--u)) calc(2*var(--u));border:1px solid rgba(255,194,71,.4);border-radius:999px;background:rgba(0,0,0,.35)}
.it-name{font-family:Anton;font-size:calc(4*var(--u));letter-spacing:.2em;color:#fff;margin-top:calc(.6*var(--u));
  text-shadow:0 calc(.4*var(--u)) calc(1.6*var(--u)) rgba(0,0,0,.8)}
@keyframes fadeIn{to{opacity:1}}
.lower3{position:absolute;left:calc(4*var(--u));bottom:calc(7*var(--u));display:flex;align-items:stretch;
  opacity:0;transform:translateX(calc(-6*var(--u)))}
.lower3.in{animation:l3in .5s cubic-bezier(.15,1.4,.35,1) forwards}
.lower3.out{animation:l3out .3s ease forwards}
/* during the countdown only the numeral is wanted, the rest of the intro steps aside */
#intro.counting .intro-top,#intro.counting .lower3,#intro.counting .intro-skip{display:none}
/* the whole intro is the skip button, but it must not eat taps once the countdown owns the screen */
#intro.show{pointer-events:auto}
#intro.counting{pointer-events:none}
@keyframes l3in{to{opacity:1;transform:none}}
@keyframes l3out{to{opacity:0;transform:translateX(calc(-4*var(--u)))}}
.l3-rank{font-family:Anton;font-size:calc(2*var(--u));letter-spacing:.16em;writing-mode:vertical-rl;
  display:flex;align-items:center;justify-content:center;padding:0 calc(.9*var(--u));
  border-radius:calc(1.4*var(--u)) 0 0 calc(1.4*var(--u));color:#04121a;
  background:linear-gradient(180deg,var(--c,#3ff0ff),#0f9dbd)}
.l3-body{padding:calc(1.1*var(--u)) calc(2.6*var(--u)) calc(1.1*var(--u)) calc(1.6*var(--u));
  border-radius:0 calc(1.4*var(--u)) calc(1.4*var(--u)) 0;background:var(--panel2);
  backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.l3-name{font-family:Anton;font-size:calc(4.4*var(--u));letter-spacing:.1em;line-height:1;color:#fff}
.l3-tag{font-family:Rajdhani;font-weight:600;font-size:calc(1.7*var(--u));letter-spacing:.24em;color:var(--c,#3ff0ff);text-transform:uppercase}
.l3-stats{display:flex;gap:calc(1.4*var(--u));margin-top:calc(.7*var(--u))}
.l3-stats div{font-family:Rajdhani;font-weight:700;font-size:calc(1.5*var(--u));letter-spacing:.1em;color:var(--dim)}
.l3-stats div b{color:#fff;font-size:calc(1.9*var(--u))}
.intro-skip{position:absolute;right:calc(3*var(--u));bottom:calc(2.4*var(--u));font-family:Rajdhani;font-weight:600;
  font-size:calc(1.6*var(--u));letter-spacing:.3em;color:rgba(255,255,255,.5);animation:pl 2s ease-in-out infinite}
.countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:Anton;font-size:calc(26*var(--u));line-height:1;color:#fff;opacity:0;
  text-shadow:0 0 calc(4*var(--u)) rgba(63,240,255,.9),0 calc(1*var(--u)) calc(2*var(--u)) rgba(0,0,0,.7)}
.countdown.go{animation:cd .9s cubic-bezier(.1,1,.3,1)}
.countdown.golast{animation:cdg 1s cubic-bezier(.1,1,.3,1)}
@keyframes cd{0%{opacity:0;transform:scale(2.4)}22%{opacity:1;transform:scale(1)}72%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.7)}}
@keyframes cdg{0%{opacity:0;transform:scale(.4) rotate(-8deg)}18%{opacity:1;transform:scale(1.35) rotate(2deg)}60%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(2.6)}}

/* ============================== HUD ============================== */
#hud{padding:0}
.hud-top{position:absolute;top:max(calc(1.6*var(--u)),env(safe-area-inset-top));left:0;right:0;
  padding:0 max(calc(2.2*var(--u)),env(safe-area-inset-left)) 0 max(calc(2.2*var(--u)),env(safe-area-inset-right));
  display:flex;align-items:flex-start;gap:calc(2*var(--u))}

.rankpill{display:flex;align-items:center;gap:calc(.7*var(--u));padding:calc(.5*var(--u)) calc(1.5*var(--u)) calc(.5*var(--u)) calc(1.1*var(--u));
  border-radius:calc(1.7*var(--u));background:var(--panel);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.14),0 calc(.6*var(--u)) calc(2*var(--u)) rgba(0,0,0,.45);
  transition:transform .2s cubic-bezier(.2,1.6,.4,1)}
.rankpill.bump{transform:scale(1.16)}
.rankpill.p1{box-shadow:inset 0 0 0 2px var(--am),0 0 calc(2.4*var(--u)) rgba(255,194,71,.5),0 calc(.6*var(--u)) calc(2*var(--u)) rgba(0,0,0,.45)}
.rp-num{font-family:Anton;font-size:calc(6.4*var(--u));line-height:.9;
  background:linear-gradient(180deg,#fff,#ffd86b);-webkit-background-clip:text;background-clip:text;color:transparent}
.rp-col{display:flex;flex-direction:column;line-height:1}
.rp-ord{font-family:Anton;font-size:calc(2.2*var(--u));letter-spacing:.06em;color:#fff}
.rp-of{font-family:Rajdhani;font-weight:700;font-size:calc(1.4*var(--u));letter-spacing:.18em;color:var(--dim)}

.progwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:calc(.5*var(--u));padding-top:calc(.4*var(--u))}
.prog-act{font-family:Anton;font-size:calc(1.9*var(--u));letter-spacing:.22em;color:#dbe8ff;text-align:center;
  text-shadow:0 calc(.2*var(--u)) calc(.8*var(--u)) rgba(0,0,0,.8);white-space:nowrap;overflow:hidden}
.prog{position:relative;height:calc(1.9*var(--u));border-radius:999px;background:rgba(6,10,24,.72);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 calc(.2*var(--u)) calc(.6*var(--u)) rgba(0,0,0,.6)}
.prog-fill{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:999px;
  background:linear-gradient(90deg,rgba(63,240,255,.45),var(--cy) 70%,#fff);
  box-shadow:0 0 calc(1.6*var(--u)) rgba(63,240,255,.7)}
.prog-ticks{position:absolute;inset:0}
.prog-ticks i{position:absolute;top:calc(-.35*var(--u));bottom:calc(-.35*var(--u));width:1px;background:rgba(255,255,255,.30)}
.prog-dots{position:absolute;inset:0}
.prog-dots b{position:absolute;top:50%;width:calc(1.5*var(--u));height:calc(1.5*var(--u));border-radius:50%;
  transform:translate(-50%,-50%);box-shadow:0 0 0 1.5px rgba(4,8,18,.9);transition:left .12s linear}
.prog-dots b.me{width:calc(2.5*var(--u));height:calc(2.5*var(--u));z-index:3;
  box-shadow:0 0 0 2px #fff,0 0 calc(1.6*var(--u)) currentColor}
.prog-flag{position:absolute;right:calc(-1.6*var(--u));top:50%;transform:translateY(-50%);font-size:calc(2.4*var(--u));color:#fff;
  text-shadow:0 0 calc(1*var(--u)) rgba(0,0,0,.9)}
.prog-meta{display:flex;justify-content:space-between;font-family:Rajdhani;font-weight:700;font-size:calc(1.5*var(--u));
  letter-spacing:.14em;color:var(--dim);text-shadow:0 1px 2px rgba(0,0,0,.8)}
.prog-meta span:last-child{color:var(--cy)}

.timer{text-align:right;padding:calc(.4*var(--u)) calc(1.3*var(--u));border-radius:calc(1.4*var(--u));
  background:var(--panel);backdrop-filter:var(--glass);-webkit-backdrop-filter:var(--glass);
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgba(255,255,255,.12)}
.tm-lab{font-family:Rajdhani;font-weight:600;font-size:calc(1.3*var(--u));letter-spacing:.26em;color:var(--dim)}
.tm-val{font-family:Rajdhani;font-weight:700;font-size:calc(3.1*var(--u));letter-spacing:.05em;color:#fff;font-variant-numeric:tabular-nums}

/* ---------- rival tracker ---------- */
.tracker{--trowk:3.85;position:absolute;right:max(calc(2.2*var(--u)),env(safe-area-inset-right));top:calc(15*var(--u));
  width:calc(28*var(--u));display:flex;flex-direction:column;gap:calc(.35*var(--u))}
.trow{position:absolute;left:0;right:0;display:flex;align-items:center;gap:calc(.7*var(--u));height:calc((var(--trowk) - .35)*var(--u));
  padding:0 calc(.9*var(--u)) 0 calc(.4*var(--u));border-radius:calc(1.1*var(--u));
  background:rgba(9,14,30,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:inset 0 0 0 1px rgba(160,200,255,.12);
  transition:transform .28s cubic-bezier(.2,1.3,.4,1),background .2s ease,box-shadow .2s ease}
.trow.me{background:rgba(30,48,96,.80);box-shadow:inset 0 0 0 1.5px var(--cy),0 0 calc(1.6*var(--u)) rgba(63,240,255,.35)}
.trow .tp{font-family:Anton;font-size:calc(1.9*var(--u));width:calc(3*var(--u));text-align:center;color:#fff;opacity:.95}
.trow .tc{width:calc(2.4*var(--u));height:calc(2.4*var(--u));border-radius:calc(.7*var(--u));flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-family:Anton;font-size:calc(1.5*var(--u));color:rgba(0,0,0,.62);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.trow .tn{flex:1;font-family:Rajdhani;font-weight:700;font-size:calc(1.7*var(--u));letter-spacing:.1em;color:#e6eeff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tg{font-family:Rajdhani;font-weight:700;font-size:calc(1.6*var(--u));letter-spacing:.04em;font-variant-numeric:tabular-nums}
.trow .tg.ahead{color:var(--mg)}.trow .tg.behind{color:var(--li)}.trow .tg.self{color:var(--cy)}
.trow .tf{font-size:calc(1.5*var(--u));opacity:.8}

/* ---------- callouts / combo / act banner ---------- */
/* held sideways there are only a hundred units of height. at 30u the callout stack
   grew straight down through the act title, and above the title it ran into the
   combo counter, so it sits below both. portrait uses its own left rail instead. */
.callouts{position:absolute;left:0;right:0;top:calc(48*var(--u));display:flex;flex-direction:column;align-items:center;gap:calc(.4*var(--u))}
.co{font-family:Anton;letter-spacing:.1em;white-space:nowrap;animation:coa 1.05s cubic-bezier(.1,1,.3,1) forwards}
.co.s{font-size:calc(4.6*var(--u))}
.co.m{font-size:calc(3.4*var(--u))}
.co.l{font-size:calc(6.4*var(--u))}
@keyframes coa{0%{opacity:0;transform:translateY(calc(1.6*var(--u))) scale(.6)}
  18%{opacity:1;transform:translateY(0) scale(1.14)}30%{transform:scale(1)}
  74%{opacity:1;transform:translateY(calc(-1*var(--u)))}100%{opacity:0;transform:translateY(calc(-3.4*var(--u))) scale(.94)}}

.combo{position:absolute;left:50%;top:calc(22*var(--u));transform:translateX(-50%) scale(.4);opacity:0;
  display:flex;flex-direction:column;align-items:center;line-height:.9;transition:opacity .18s ease,transform .18s cubic-bezier(.2,1.7,.4,1)}
.combo.on{opacity:1;transform:translateX(-50%) scale(1)}
.combo.pop{transform:translateX(-50%) scale(1.3)}
.combo b{font-family:Anton;font-size:calc(5.4*var(--u));
  background:linear-gradient(180deg,#fff,var(--am) 60%,var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(1.4*var(--u)) rgba(255,120,180,.7))}
.combo span{font-family:Rajdhani;font-weight:700;font-size:calc(1.6*var(--u));letter-spacing:.4em;color:#fff;opacity:.85}

.actbanner{position:absolute;left:50%;top:calc(38*var(--u));transform:translate(-50%,0);text-align:center;opacity:0;pointer-events:none}
.actbanner.in{animation:aba 2.6s cubic-bezier(.1,1,.3,1) forwards}
@keyframes aba{0%{opacity:0;transform:translate(-50%,0) scale(.8);filter:blur(6px)}
  12%{opacity:1;transform:translate(-50%,0) scale(1);filter:blur(0)}
  80%{opacity:1}100%{opacity:0;transform:translate(-50%,calc(-2*var(--u))) scale(1.04)}}
.actbanner i{display:block;font-family:Rajdhani;font-weight:700;font-style:normal;font-size:calc(2*var(--u));letter-spacing:.5em;color:var(--am)}
.actbanner b{display:block;font-family:Anton;font-size:calc(6.2*var(--u));letter-spacing:.1em;line-height:1;
  background:linear-gradient(180deg,#fff,#a9dcff);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 calc(.4*var(--u)) calc(1.6*var(--u)) rgba(0,0,0,.8))}

/* ---------- bottom controls ---------- */
.hud-bot{z-index:3;position:absolute;left:0;right:0;bottom:max(calc(1.8*var(--u)),env(safe-area-inset-bottom));
  padding:0 max(calc(2.4*var(--u)),env(safe-area-inset-left)) 0 max(calc(2.4*var(--u)),env(safe-area-inset-right));
  display:flex;align-items:flex-end;justify-content:space-between;gap:calc(2*var(--u))}

/* the gauge sits beside the jump pad, not between the two pads: held sideways
   the middle of the floor is where the champ runs and nothing may cover it */
.gauge{position:relative;width:calc(15*var(--u));height:calc(15*var(--u));flex:0 0 auto;order:2;margin-right:auto}
.g-svg{width:100%;height:100%;transform:rotate(135deg)}
.g-bg{fill:none;stroke:rgba(6,10,24,.75);stroke-width:9;stroke-linecap:round;stroke-dasharray:216.8 289;}
.g-fg{fill:none;stroke:url(#gg);stroke-width:9;stroke-linecap:round;stroke-dasharray:0 289;
  filter:drop-shadow(0 0 4px rgba(120,240,255,.9));transition:stroke-dasharray .08s linear}
.g-txt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:.9}
.g-txt b{font-family:Rajdhani;font-weight:700;font-size:calc(5*var(--u));color:#fff;font-variant-numeric:tabular-nums;
  text-shadow:0 0 calc(1.4*var(--u)) rgba(63,240,255,.6)}
.g-txt span{font-family:Rajdhani;font-weight:600;font-size:calc(1.4*var(--u));letter-spacing:.22em;color:var(--dim)}

.pad{position:relative;flex:0 0 auto;border:0;cursor:pointer;pointer-events:auto;
  width:calc(15*var(--u));height:calc(15*var(--u));border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(.2*var(--u));
  transition:transform .08s ease,filter .12s ease}
.pad svg{width:calc(5.6*var(--u));height:calc(5.6*var(--u));fill:#04121a;opacity:.85}
.pad b{font-family:Anton;font-size:calc(1.8*var(--u));letter-spacing:.16em;color:#04121a;opacity:.85}
.pad.jump{order:1;background:linear-gradient(180deg,#dcffa6,var(--li) 48%,#63c412);
  box-shadow:0 calc(.7*var(--u)) 0 #3f8a06,0 calc(1.4*var(--u)) calc(3*var(--u)) rgba(184,255,61,.30),inset 0 2px 0 rgba(255,255,255,.65)}
.pad.dash{background:linear-gradient(180deg,#ffd3ec,var(--mg) 48%,#c00f68);
  box-shadow:0 calc(.7*var(--u)) 0 #8b0a4a,0 calc(1.4*var(--u)) calc(3*var(--u)) rgba(255,67,168,.30),inset 0 2px 0 rgba(255,255,255,.6)}
.pad:active,.pad.hit{transform:translateY(calc(.6*var(--u))) scale(.95)}
.pad.cold{filter:grayscale(.85) brightness(.62)}
.pad.ready{animation:padrdy 1.1s ease-in-out infinite}
@keyframes padrdy{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35) drop-shadow(0 0 calc(1.6*var(--u)) rgba(255,67,168,.8))}}
.pad-ring{position:absolute;inset:calc(-1.1*var(--u));width:auto;height:auto;transform:rotate(-90deg);pointer-events:none}
.pad-ring circle{fill:none;stroke-width:5;stroke-linecap:round}
.pad-ring circle:first-child{stroke:rgba(4,8,18,.55)}
.pad-ring circle:last-child{stroke:#fff;stroke-dasharray:0 283;filter:drop-shadow(0 0 3px #fff)}

.boostbox{order:3;display:flex;flex-direction:column;align-items:center;gap:calc(.6*var(--u));flex:0 0 auto}
.bb-lab{display:flex;align-items:baseline;gap:calc(.8*var(--u));font-family:Rajdhani;font-weight:700;
  font-size:calc(1.5*var(--u));letter-spacing:.24em;color:var(--dim);text-shadow:0 1px 2px #000}
.bb-lab i{font-style:normal;color:var(--mg);font-variant-numeric:tabular-nums}
.bb-bar{display:flex;gap:calc(.35*var(--u));width:calc(19*var(--u))}
.bb-bar u{flex:1;height:calc(1.2*var(--u));border-radius:calc(.3*var(--u));background:rgba(6,10,24,.7);
  box-shadow:inset 0 0 0 1px var(--line);transition:background .12s linear,box-shadow .12s linear}
.bb-bar u.f{background:linear-gradient(180deg,#ffb0dc,var(--mg));box-shadow:0 0 calc(1.2*var(--u)) rgba(255,67,168,.85)}
.bb-bar.full u.f{background:linear-gradient(180deg,#fff5b0,var(--am));box-shadow:0 0 calc(1.4*var(--u)) rgba(255,194,71,.95)}

/* ---------- the tap halves. a thumb anywhere on a side counts ---------- */
.touch{position:absolute;top:0;bottom:0;width:50%;z-index:1;pointer-events:auto;background:transparent;
  -webkit-tap-highlight-color:transparent;touch-action:none}
#touchL{left:0}#touchR{right:0}

/* ---------- action prompt ---------- */
.prompt{position:absolute;left:50%;bottom:calc(21*var(--u));transform:translate(-50%,0) scale(.6);opacity:0;
  display:flex;align-items:center;gap:calc(1.2*var(--u));padding:calc(.7*var(--u)) calc(2.2*var(--u));
  border-radius:999px;background:rgba(6,10,24,.66);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:opacity .14s ease,transform .18s cubic-bezier(.2,1.7,.4,1)}
.prompt.on{opacity:1;transform:translate(-50%,0) scale(1)}
.prompt i{font-style:normal;font-size:calc(3.4*var(--u));line-height:1;color:var(--pc,#b8ff3d);filter:drop-shadow(0 0 calc(1*var(--u)) var(--pc,#b8ff3d))}
.prompt b{font-family:Anton;font-size:calc(2.8*var(--u));letter-spacing:.22em;color:#fff}
.prompt.on i{animation:prb .55s ease-in-out infinite}
@keyframes prb{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(-.7*var(--u)))}}

.finishbig{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:Anton;font-size:calc(20*var(--u));letter-spacing:.06em;opacity:0;
  background:linear-gradient(180deg,#fff,var(--am) 55%,var(--mg));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 calc(3*var(--u)) rgba(255,180,80,.8))}
.finishbig.go{animation:fb 1.5s cubic-bezier(.1,1,.3,1) forwards}
@keyframes fb{0%{opacity:0;transform:scale(3.2);filter:blur(20px)}
  16%{opacity:1;transform:scale(1);filter:blur(0)}70%{opacity:1}100%{opacity:0;transform:scale(1.25)}}

/* ============================== RESULTS ============================== */
#results{background:linear-gradient(180deg,rgba(4,6,16,.72),rgba(4,6,16,.94));flex-direction:column;gap:calc(1.2*var(--u));justify-content:center}
.res-flare{position:absolute;inset:auto -30% -50% -30%;height:100%;pointer-events:none;
  background:conic-gradient(from 0deg at 50% 100%,transparent 0deg,rgba(255,194,71,.14) 12deg,transparent 24deg,
   transparent 36deg,rgba(63,240,255,.12) 48deg,transparent 60deg,transparent 120deg,rgba(255,67,168,.12) 132deg,transparent 144deg);
  animation:spin 30s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.res-head{position:relative;display:flex;align-items:center;gap:calc(1.6*var(--u));justify-content:center}
.res-medal{--mc:#ffc247;position:relative;flex:0 0 auto;width:calc(8.4*var(--u));height:calc(8.4*var(--u));
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 34% 26%,#fffbe9,var(--mc) 44%,rgba(0,0,0,.55) 128%);
  box-shadow:0 0 calc(2.6*var(--u)) var(--mc),inset 0 0 0 calc(.42*var(--u)) rgba(255,255,255,.45),
    inset 0 calc(-.9*var(--u)) calc(1.8*var(--u)) rgba(0,0,0,.30)}
.res-medal:before{content:"";position:absolute;inset:calc(1.05*var(--u));border-radius:50%;
  border:calc(.26*var(--u)) dashed rgba(255,255,255,.52)}
.res-medal b{position:relative;font-family:Anton;font-size:calc(4*var(--u));color:rgba(28,18,0,.78);line-height:1}
.res-place{font-family:Anton;font-size:calc(9*var(--u));line-height:.9;
  background:linear-gradient(180deg,#fff,#ffd05b);-webkit-background-clip:text;background-clip:text;color:transparent}
.res-place sup{font-size:.4em;letter-spacing:.06em}
.res-word{font-family:Anton;font-size:calc(4.4*var(--u));letter-spacing:.2em;color:#fff}
.res-time{font-family:Rajdhani;font-weight:700;font-size:calc(3.4*var(--u));letter-spacing:.06em;color:var(--cy);
  padding:calc(.2*var(--u)) calc(1.4*var(--u));border-radius:calc(1*var(--u));background:rgba(63,240,255,.10);
  box-shadow:inset 0 0 0 1px rgba(63,240,255,.35);font-variant-numeric:tabular-nums}
.res-body{position:relative;display:flex;gap:calc(2*var(--u));align-items:stretch;width:100%;justify-content:center}
.podium{width:calc(44*var(--u));height:calc(30*var(--u));flex:0 0 auto;border-radius:calc(2*var(--u));overflow:hidden;
  background:radial-gradient(ellipse 80% 60% at 50% 100%,rgba(63,240,255,.18),transparent 70%),rgba(8,12,28,.6);
  box-shadow:inset 0 0 0 1px var(--line)}
.podium canvas{width:100%;height:100%;display:block}
.res-cols{display:flex;gap:calc(1.4*var(--u));align-items:stretch}
.res-list{width:calc(33*var(--u));display:flex;flex-direction:column;gap:calc(.4*var(--u))}
.rrow{display:flex;align-items:center;gap:calc(.8*var(--u));height:calc(3.9*var(--u));padding:0 calc(1*var(--u));
  border-radius:calc(1.1*var(--u));background:rgba(10,16,34,.66);box-shadow:inset 0 0 0 1px var(--line);
  opacity:0;transform:translateX(calc(2*var(--u)));animation:rrin .4s cubic-bezier(.2,1.4,.4,1) forwards}
@keyframes rrin{to{opacity:1;transform:none}}
.rrow.me{background:rgba(34,54,108,.8);box-shadow:inset 0 0 0 1.5px var(--cy)}
.rrow .rp{font-family:Anton;font-size:calc(2.2*var(--u));width:calc(3.4*var(--u));color:#fff}
.rrow .rc{width:calc(2.6*var(--u));height:calc(2.6*var(--u));border-radius:calc(.8*var(--u));flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;font-family:Anton;font-size:calc(1.6*var(--u));color:rgba(0,0,0,.6);
  box-shadow:inset 0 -2px 0 rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.rrow .rn{flex:1;font-family:Rajdhani;font-weight:700;font-size:calc(1.8*var(--u));letter-spacing:.1em;color:#e8f0ff;white-space:nowrap;overflow:hidden}
.rrow .rt{font-family:Rajdhani;font-weight:700;font-size:calc(1.7*var(--u));color:var(--dim);font-variant-numeric:tabular-nums}
.res-stats{width:calc(28*var(--u));display:flex;flex-direction:column;gap:calc(.4*var(--u))}
.stat{display:flex;align-items:center;justify-content:space-between;height:calc(3.9*var(--u));padding:0 calc(1.2*var(--u));
  border-radius:calc(1.1*var(--u));background:rgba(10,16,34,.5);box-shadow:inset 0 0 0 1px var(--line)}
.stat span{font-family:Rajdhani;font-weight:600;font-size:calc(1.5*var(--u));letter-spacing:.2em;color:var(--dim);text-transform:uppercase}
.stat b{font-family:Rajdhani;font-weight:700;font-size:calc(2.2*var(--u));color:#fff;font-variant-numeric:tabular-nums}
.stat b.hi{color:var(--am)}
.res-xp{position:relative;width:calc(66*var(--u));max-width:90vw}
.rx-lab{display:flex;justify-content:space-between;font-family:Rajdhani;font-weight:700;font-size:calc(1.6*var(--u));
  letter-spacing:.2em;color:var(--dim);margin-bottom:calc(.4*var(--u))}
.rx-lab b{color:#fff}.rx-lab i{font-style:normal;color:var(--li)}
.rx-bar{height:calc(1.4*var(--u));border-radius:999px;background:rgba(6,10,24,.7);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.rx-bar u{display:block;height:100%;width:0%;border-radius:999px;background:linear-gradient(90deg,var(--li),var(--cy));
  box-shadow:0 0 calc(1.6*var(--u)) rgba(184,255,61,.7);transition:width 1.2s cubic-bezier(.2,.9,.2,1)}
.res-btns{position:relative;display:flex;gap:calc(1.6*var(--u))}
.res-btns .btn{font-size:calc(2.5*var(--u));padding:calc(1.1*var(--u)) calc(3.2*var(--u))}




/* ============================================================
   PORTRAIT. --u rides the narrow side here, so a phone held
   upright gets the same layout logic with a different stack.
   ============================================================ */
body.portrait .screen{padding:calc(2.2*var(--u)) calc(2.4*var(--u))}

body.portrait .load-logo{font-size:calc(9*var(--u))}
body.portrait .sel-title{font-size:calc(3.4*var(--u));letter-spacing:.1em}
body.portrait .sel-sub{font-size:calc(1.5*var(--u))}
body.portrait .t-logo em{font-size:calc(11.5*var(--u))}
body.portrait .t-logo span{font-size:calc(3.8*var(--u))}
body.portrait .t-track{flex-direction:column;width:100%;gap:calc(.7*var(--u))}
body.portrait .tt-row{flex-direction:row;justify-content:space-between;align-items:center;width:100%;
  padding:calc(.7*var(--u)) calc(1.6*var(--u))}
body.portrait .t-kicker{font-size:calc(1.6*var(--u));letter-spacing:.3em}
body.portrait .btn.big{font-size:calc(3.2*var(--u));padding:calc(1.5*var(--u)) calc(4*var(--u))}

/* ---- select: two rows of three ---- */
body.portrait #select{gap:calc(2.2*var(--u))}
body.portrait .sel-rail{flex-wrap:wrap;gap:calc(1.1*var(--u))}
body.portrait .card{flex:0 0 calc(31.4%);max-width:none}
body.portrait .card .cn{font-size:calc(2.2*var(--u))}
body.portrait .card .ct{font-size:calc(1.1*var(--u));letter-spacing:.02em;white-space:normal;line-height:1.12;min-height:calc(2.5*var(--u));display:flex;align-items:center;justify-content:center;padding:0 calc(.4*var(--u))}
body.portrait .sel-foot{flex-direction:column;gap:calc(1.4*var(--u));width:100%}
body.portrait .sel-detail{text-align:center;max-width:100%;font-size:calc(1.8*var(--u))}

/* ---- intro ---- */
body.portrait .lower3{left:calc(2.4*var(--u));right:calc(2.4*var(--u));bottom:calc(12*var(--u))}
body.portrait .l3-body{flex:1;padding:calc(1*var(--u)) calc(1.4*var(--u))}
body.portrait .l3-name{font-size:calc(3.8*var(--u))}
body.portrait .it-name{font-size:calc(3.2*var(--u))}
body.portrait .countdown{font-size:calc(22*var(--u))}

/* ---- hud: rank and clock on one line, the track bar on its own ---- */
body.portrait .hud-top{flex-wrap:wrap;justify-content:space-between;gap:calc(.9*var(--u))}
body.portrait .rankpill{order:1}
body.portrait .timer{order:2}
body.portrait .progwrap{order:3;flex:0 0 100%}
body.portrait .rp-num{font-size:calc(5.4*var(--u))}
body.portrait .tm-val{font-size:calc(2.8*var(--u))}
/* held upright, the middle band of the screen is the race. every readout
   is pushed to a rail: rivals top right, shout-outs top left, meters on the
   floor either side of the two pads. nothing sits over the champ. */
body.portrait .tracker{--trowk:3.1;top:calc(21.5*var(--u));width:calc(24*var(--u))}
body.portrait .trow{padding:0 calc(.7*var(--u));gap:calc(.5*var(--u))}
body.portrait .trow .tp{font-size:calc(1.6*var(--u));width:calc(2.2*var(--u))}
body.portrait .trow .tc{width:calc(2*var(--u));height:calc(2*var(--u));font-size:calc(1.2*var(--u))}
body.portrait .trow .tn{font-size:calc(1.4*var(--u));letter-spacing:.02em}
body.portrait .trow .tg{font-size:calc(1.3*var(--u))}

/* shout-outs take the left rail, opposite the rival board */
body.portrait .combo{left:calc(2.4*var(--u));top:calc(22*var(--u));
  transform:scale(.4);transform-origin:left top}
body.portrait .combo.on{transform:scale(1)}
body.portrait .combo.pop{transform:scale(1.24)}
body.portrait .combo b{font-size:calc(4.2*var(--u))}
body.portrait .combo span{font-size:calc(1.25*var(--u));letter-spacing:.22em}
body.portrait .callouts{left:calc(2.4*var(--u));right:auto;top:calc(30*var(--u));
  align-items:flex-start;text-align:left}
body.portrait .co.s{font-size:calc(3.2*var(--u))}
body.portrait .co.m{font-size:calc(2.3*var(--u))}
body.portrait .co.l{font-size:calc(4.2*var(--u))}
/* the act wipe is brief, so it rides the top band rather than the track */
/* held upright the act title wraps to two lines, and at 15.5u the second line
   landed straight on top of the position tracker. it moves down into the empty
   band between the callout rail and the champ, where it reads as a splash */
body.portrait .actbanner{top:calc(46*var(--u))}
body.portrait .actbanner b{font-size:calc(4.6*var(--u))}
body.portrait .actbanner i{font-size:calc(1.6*var(--u));letter-spacing:.34em}
body.portrait .finishbig{font-size:calc(15*var(--u))}

/* thumbs: one pad per bottom corner, meters on the floor beside them */
body.portrait .pad{width:calc(17*var(--u));height:calc(17*var(--u))}
body.portrait .pad svg{width:calc(6.4*var(--u));height:calc(6.4*var(--u))}
body.portrait .pad b{font-size:calc(2*var(--u))}
body.portrait .gauge{position:absolute;left:max(calc(1.6*var(--u)),env(safe-area-inset-left));
  bottom:calc(24.4*var(--u));width:calc(13*var(--u));height:calc(13*var(--u))}
body.portrait .g-txt b{font-size:calc(4.2*var(--u))}
body.portrait .g-txt span{font-size:calc(1.2*var(--u))}
/* boost reads as one strip across the floor right above both pads. the dash
   button lives inside .boostbox, so only the readout moves, never the pad */
body.portrait .bb-lab{position:absolute;right:calc(2.4*var(--u));bottom:calc(21.6*var(--u));
  font-size:calc(1.3*var(--u));letter-spacing:.22em}
body.portrait .bb-bar{position:absolute;left:calc(2.4*var(--u));right:calc(2.4*var(--u));
  bottom:calc(19.6*var(--u));width:auto}
body.portrait .bb-bar u{height:calc(1.5*var(--u))}
body.portrait .prompt{bottom:calc(25*var(--u))}
body.portrait .prompt i{font-size:calc(2.8*var(--u))}
body.portrait .prompt b{font-size:calc(2.4*var(--u))}

/* ---- results ---- */
body.portrait #results{justify-content:center;gap:calc(1.2*var(--u))}
body.portrait .res-head{flex-wrap:wrap;gap:calc(.8*var(--u))}
body.portrait .res-medal{width:calc(6.2*var(--u));height:calc(6.2*var(--u))}
body.portrait .res-medal b{font-size:calc(3*var(--u))}
body.portrait .res-place{font-size:calc(7*var(--u))}
body.portrait .res-word{font-size:calc(3.2*var(--u));letter-spacing:.14em}
body.portrait .res-time{font-size:calc(2.8*var(--u));flex:0 0 100%;text-align:center}
body.portrait .res-body{flex-direction:column;align-items:center;gap:calc(1*var(--u))}
body.portrait .podium{width:100%;height:calc(36*var(--u))}
body.portrait .res-cols{width:100%;gap:calc(1*var(--u))}
body.portrait .res-list,body.portrait .res-stats{width:auto;flex:1 1 0;min-width:0}
body.portrait .rrow{height:calc(3.4*var(--u));gap:calc(.5*var(--u));padding:0 calc(.7*var(--u))}
body.portrait .rrow .rp{font-size:calc(1.8*var(--u));width:calc(2.4*var(--u))}
body.portrait .rrow .rn{font-size:calc(1.5*var(--u));letter-spacing:.02em}
body.portrait .rrow .rt{font-size:calc(1.4*var(--u))}
body.portrait .stat{height:calc(3.4*var(--u));padding:0 calc(.8*var(--u))}
body.portrait .stat span{font-size:calc(1.2*var(--u));letter-spacing:.06em}
body.portrait .stat b{font-size:calc(1.8*var(--u))}
body.portrait .res-xp{width:100%}
body.portrait .res-btns .btn{font-size:calc(2.2*var(--u));padding:calc(1*var(--u)) calc(2.4*var(--u))}