/* ============================================================
   DUDAS JUMP — $TOAD x WEBCADE
   Portrait-only UI shell. Gameplay renders to <canvas>; every
   panel and control here is DOM so text stays crisp at any DPR.
   ============================================================ */

:root{
  --ink:#05070a; --char:#0b1016;
  --lime:#8dff2f; --lime-hi:#c6ff8a; --lime-dim:#3f8c14;
  --cyan:#35e6ff; --cyan-dim:#1a7f93;
  --gold:#ffc93c; --gold-hi:#ffe9a3;
  --violet:#9b6bff; --danger:#ff4d5e;
  --text:#eef5f0; --muted:rgba(238,245,240,.6); --faint:rgba(238,245,240,.34);
  --glass:rgba(10,17,22,.62);
  --stroke:rgba(140,255,180,.16);
  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --num:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  background:#000; color:var(--text); font-family:var(--ui);
  overflow:hidden; overscroll-behavior:none; touch-action:none;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  -webkit-font-smoothing:antialiased;
}
body{ display:flex; align-items:center; justify-content:center;
  background:radial-gradient(120% 80% at 50% 0%, #0c151c 0%, #05070a 55%, #000 100%); }

/* ---------- portrait stage ---------- */
#stage{
  position:relative; width:100vw; height:100vh; height:100dvh;
  overflow:hidden; background:var(--ink); isolation:isolate;
}
@media (min-width:760px) and (min-height:560px){
  body{ padding:18px; }
  #stage{
    width:min(53vh,520px); height:min(94vh,940px); max-height:94vh; border-radius:34px;
    box-shadow:0 0 0 1px rgba(140,255,180,.10), 0 0 0 9px #0a0d10,
      0 0 0 10px rgba(160,255,190,.07),
      0 40px 120px -20px rgba(120,255,60,.14), 0 30px 90px -30px rgba(120,80,255,.22);
  }
}
canvas#game{ position:absolute; inset:0; width:100%; height:100%; display:block; }

#vignette{ position:absolute; inset:0; pointer-events:none; z-index:41;
  background:radial-gradient(122% 78% at 50% 46%, rgba(0,0,0,0) 38%, rgba(0,0,0,.5) 86%, rgba(0,0,0,.78) 100%); }
#lowWarning{ position:absolute; inset:0; pointer-events:none; z-index:42; opacity:0;
  transition:opacity .16s linear;
  background:linear-gradient(to top, rgba(255,40,70,.42), rgba(255,40,70,0) 34%),
    linear-gradient(to right, rgba(255,40,70,.2), transparent 12%, transparent 88%, rgba(255,40,70,.2)); }
#flash{ position:absolute; inset:0; pointer-events:none; z-index:60; opacity:0;
  background:radial-gradient(80% 60% at 50% 42%, #e6ffd6, #9dff5a 40%, rgba(150,255,90,0) 78%); }

/* ---------- screens ---------- */
.screen{
  position:absolute; inset:0; z-index:20; display:flex; flex-direction:column;
  padding:calc(var(--safe-t) + 14px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 14px) calc(var(--safe-l) + 16px);
  opacity:0; pointer-events:none; transition:opacity .38s ease;
}
.screen.active{ opacity:1; pointer-events:auto; }
.screen[hidden]{ display:none; }
.screen.hud, .screen.hud.active{ pointer-events:none; }
.screen.overlay{ z-index:50; justify-content:center; align-items:center;
  background:rgba(4,7,10,.6);
  -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%); }
.screen.overlay .panel{ transform:translateY(16px) scale(.97); opacity:0;
  transition:transform .34s cubic-bezier(.2,.9,.25,1), opacity .3s ease; }
.screen.overlay.active .panel{ transform:none; opacity:1; }

/* ---------- logo ---------- */
.logo{ margin:0; text-align:center; line-height:.86; font-weight:900; letter-spacing:-.03em;
  display:flex; flex-direction:column; align-items:center; }
.logo-a{ font-size:clamp(38px,13vw,62px); color:#f6fff5;
  text-shadow:0 0 20px rgba(140,255,90,.32), 0 3px 0 rgba(0,0,0,.5); }
.logo-b{ font-size:clamp(52px,18.5vw,88px); letter-spacing:-.045em;
  background:linear-gradient(180deg,#e6ffc4 0%,var(--lime) 46%,#3f9c12 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 24px rgba(141,255,47,.42)) drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.logo-big .logo-a{ font-size:clamp(42px,14vw,68px); }
.logo-big .logo-b{ font-size:clamp(58px,21vw,100px); }
.logo-sub{ margin:10px 0 0; text-align:center; font-size:12px; letter-spacing:.34em;
  font-weight:700; display:flex; gap:9px; justify-content:center; align-items:center; color:var(--muted); }
.tag-toad{ color:var(--lime); text-shadow:0 0 12px rgba(141,255,47,.5); }
.tag-web{ color:var(--cyan); text-shadow:0 0 12px rgba(53,230,255,.45); }
.tag-x{ color:var(--faint); letter-spacing:0; }

/* ---------- loading ---------- */
#screen-loading{ justify-content:space-between; }
.load-top{ margin-top:11vh; animation:floatIn .8s cubic-bezier(.2,.9,.25,1) both; }
@keyframes floatIn{ from{opacity:0;transform:translateY(-14px)} to{opacity:1;transform:none} }
#screen-loading.exiting .logo-b{ filter:drop-shadow(0 0 46px rgba(160,255,90,.95)); transition:filter .45s ease; }
.load-bottom{ margin-bottom:4vh; }
.load-track{ position:relative; height:9px; border-radius:99px; background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(53,230,255,.2); }
.load-fill{ position:absolute; inset:0; width:0%; border-radius:99px;
  background:linear-gradient(90deg,#2b8f12,var(--lime) 55%,var(--lime-hi));
  box-shadow:0 0 16px rgba(141,255,47,.6), 0 2px 0 rgba(53,230,255,.75), 0 0 40px rgba(141,255,47,.26);
  transition:width .2s linear; }
.load-fill::after{ content:""; position:absolute; inset:0; border-radius:99px; opacity:.5;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.28) 0 6px, rgba(255,255,255,0) 6px 14px); }
.load-toad{ position:absolute; top:50%; left:0; color:var(--lime-hi); transform:translate(-50%,-50%);
  filter:drop-shadow(0 0 10px rgba(160,255,90,.8)); transition:left .2s linear; }
.load-toad.hop{ animation:hop .42s ease-in-out infinite; }
@keyframes hop{ 0%,100%{transform:translate(-50%,-50%)} 50%{transform:translate(-50%,-88%)} }
.load-meta{ display:flex; justify-content:space-between; margin-top:11px;
  font-family:var(--num); font-size:10px; letter-spacing:.18em; color:var(--faint); }

/* ---------- menu ---------- */
#screen-menu{ justify-content:flex-start; }
.menu-top{ display:flex; align-items:center; justify-content:space-between; }
.brand{ font-size:12px; font-weight:900; letter-spacing:.16em; }
.brand-web{ color:var(--text); } .brand-web span{ color:var(--cyan); text-shadow:0 0 14px rgba(53,230,255,.5); }
.brand-toad{ color:var(--lime); text-shadow:0 0 14px rgba(141,255,47,.45); }
.menu-mid{ text-align:center; margin-top:3.5vh; }
.menu-bottom{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:auto; margin-bottom:1vh; }
.best-line{ font-family:var(--num); font-size:11px; letter-spacing:.22em; color:var(--muted); }
.best-line b{ color:var(--lime-hi); font-weight:700; }

.play-btn{ position:relative; width:min(78%,320px); height:66px; border:none; border-radius:20px;
  cursor:pointer; overflow:hidden; color:#04140a;
  background:linear-gradient(180deg, rgba(140,255,110,.16), rgba(20,60,20,.5));
  box-shadow:inset 0 0 0 1.5px rgba(160,255,120,.55), 0 12px 34px -10px rgba(141,255,47,.6), 0 2px 0 rgba(0,0,0,.4);
  transition:transform .12s cubic-bezier(.2,.9,.25,1); animation:playPulse 2.6s ease-in-out infinite; }
@keyframes playPulse{ 0%,100%{box-shadow:inset 0 0 0 1.5px rgba(160,255,120,.55),0 12px 34px -10px rgba(141,255,47,.5),0 2px 0 rgba(0,0,0,.4)}
  50%{box-shadow:inset 0 0 0 1.5px rgba(190,255,150,.85),0 14px 44px -8px rgba(141,255,47,.85),0 2px 0 rgba(0,0,0,.4)} }
.play-fill{ position:absolute; inset:0; background:linear-gradient(180deg,var(--lime-hi),var(--lime) 45%,#3fa614); }
.play-fill::after{ content:""; position:absolute; inset:0; opacity:.45; transform:translateX(-100%);
  background:linear-gradient(105deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 65%);
  animation:sheen 3.4s ease-in-out infinite; }
@keyframes sheen{ 0%,55%{transform:translateX(-110%)} 85%,100%{transform:translateX(110%)} }
.play-label{ position:relative; font-size:26px; font-weight:900; letter-spacing:.22em;
  text-shadow:0 1px 0 rgba(255,255,255,.35); }
.play-btn:active{ transform:scale(.955) translateY(2px); }

.menu-nav{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:340px; }
.ghost-btn{ padding:11px 14px; border-radius:13px; cursor:pointer; border:1px solid var(--stroke);
  background:var(--glass); color:var(--text); font-size:11px; font-weight:800; letter-spacing:.14em;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .12s ease, border-color .2s ease, background .2s ease; }
.ghost-btn:active{ transform:scale(.94); border-color:rgba(141,255,47,.5); background:rgba(141,255,47,.13); }
.ghost-btn.wide{ width:100%; }

/* ---------- HUD (matches the gameplay reference layout) ---------- */
.hud{ justify-content:flex-start; gap:8px; }
.hud-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.hud-cell{ display:flex; flex-direction:column; gap:1px; }
.hud-left{ align-items:flex-start; }
.hud-center{ align-items:center; flex:1; }
.hud-right{ flex-direction:row; align-items:center; gap:7px; }
.hud-label{ font-size:9px; letter-spacing:.26em; color:rgba(255,255,255,.62); font-weight:700;
  text-shadow:0 1px 6px #000; }
.hud-score{ font-family:var(--num); font-size:25px; font-weight:700; color:#fff;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums; text-shadow:0 2px 12px rgba(0,0,0,.85); }
.hud-height{ font-family:var(--num); font-size:25px; font-weight:700; color:var(--lime);
  font-variant-numeric:tabular-nums;
  text-shadow:0 0 16px rgba(141,255,47,.5), 0 2px 12px rgba(0,0,0,.85); }
.hud-height.bump{ animation:bump .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes bump{ 0%{transform:scale(1)} 35%{transform:scale(1.28); color:#fff} 100%{transform:scale(1)} }

.chip{ display:flex; align-items:center; gap:5px; padding:4px 10px 4px 6px; border-radius:99px;
  background:rgba(6,12,16,.6); border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-family:var(--num); font-size:13px; font-weight:700; font-variant-numeric:tabular-nums; }
.chip-coin{ color:var(--gold); border-color:rgba(255,201,60,.26); }
.chip-toad{ color:var(--lime); border-color:rgba(141,255,47,.28); }
.chip.pop{ animation:chipPop .3s ease; }
@keyframes chipPop{ 50%{transform:scale(1.16)} }

.icon-btn{ width:38px; height:38px; display:grid; place-items:center; border-radius:12px;
  border:1px solid var(--stroke); background:var(--glass); color:var(--text); cursor:pointer;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  transition:transform .12s ease, background .2s ease; }
.icon-btn:active{ transform:scale(.9); background:rgba(141,255,47,.16); }
.pause-btn{ pointer-events:auto; width:36px; height:36px; }

.powerups{ display:flex; gap:7px; margin-top:6px; }
.pu{ position:relative; width:34px; height:34px; border-radius:50%; display:grid; place-items:center;
  background:rgba(6,12,16,.62); border:1px solid rgba(255,255,255,.1); font-size:13px;
  animation:puIn .3s cubic-bezier(.2,1.5,.4,1); }
@keyframes puIn{ from{transform:scale(.4);opacity:0} to{transform:scale(1);opacity:1} }
.pu svg{ position:absolute; inset:-1px; transform:rotate(-90deg); }
.pu circle{ fill:none; stroke-width:2.4; }
.pu .trk{ stroke:rgba(255,255,255,.1); }
.pu.low{ animation:puBlink .4s steps(2) infinite; }
@keyframes puBlink{ 50%{opacity:.42} }

.combo{ position:absolute; top:16.5%; left:50%; transform:translateX(-50%) scale(.8);
  display:flex; flex-direction:column; align-items:center; opacity:0;
  transition:opacity .2s ease, transform .2s cubic-bezier(.2,1.5,.4,1); }
.combo.show{ opacity:1; transform:translateX(-50%) scale(1); }
.combo b{ font-family:var(--num); font-size:30px; color:var(--gold-hi); text-shadow:0 0 20px rgba(255,201,60,.7); }
.combo span{ font-size:8px; letter-spacing:.36em; color:var(--muted); }

.callout{ position:absolute; top:24%; left:0; right:0; text-align:center; font-size:20px;
  font-weight:900; letter-spacing:.14em; color:var(--lime-hi);
  text-shadow:0 0 26px rgba(141,255,47,.85); opacity:0; transform:scale(.7); }
.callout.show{ animation:callout 1.5s cubic-bezier(.2,.9,.25,1); }
@keyframes callout{ 0%{opacity:0;transform:scale(.6)} 18%{opacity:1;transform:scale(1.1)}
  30%{transform:scale(1)} 78%{opacity:1} 100%{opacity:0;transform:scale(1) translateY(-24px)} }

.drag-hint{ position:absolute; bottom:27%; left:0; right:0; text-align:center; font-size:12px;
  letter-spacing:.3em; color:rgba(255,255,255,.74); text-shadow:0 2px 10px #000;
  animation:blink 1.8s ease-in-out infinite; transition:opacity .5s ease; }
@keyframes blink{ 0%,100%{opacity:.3} 50%{opacity:.9} }
.drag-hint[hidden]{ display:none; }
.drag-hint.fade{ opacity:0; }

/* ---------- joystick (lower-left, cyan, ~72% transparent at rest) ---------- */
.stick{ position:absolute; left:calc(var(--safe-l) + 20px); bottom:calc(var(--safe-b) + 24px);
  width:150px; height:150px; pointer-events:none; opacity:.28; transition:opacity .25s ease; }
.stick.on{ opacity:.92; }
.stick-base{ position:absolute; inset:0; border-radius:50%; border:2px solid rgba(53,230,255,.42);
  background:radial-gradient(circle at 50% 45%, rgba(20,40,52,.5), rgba(8,14,20,.52) 62%, rgba(8,14,20,.24));
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
.stick.on .stick-base{ border-color:rgba(53,230,255,.85);
  box-shadow:0 0 26px rgba(53,230,255,.3), inset 0 0 24px rgba(53,230,255,.12); }
.ar{ position:absolute; width:0; height:0; border:7px solid transparent; }
.ar-u{ top:9px; left:50%; margin-left:-7px; border-bottom-color:rgba(210,240,250,.5); border-top-width:0; }
.ar-d{ bottom:9px; left:50%; margin-left:-7px; border-top-color:rgba(210,240,250,.5); border-bottom-width:0; }
.ar-l{ left:9px; top:50%; margin-top:-7px; border-right-color:rgba(210,240,250,.72); border-left-width:0; }
.ar-r{ right:9px; top:50%; margin-top:-7px; border-left-color:rgba(210,240,250,.72); border-right-width:0; }
.stick-knob{ position:absolute; left:50%; top:50%; width:62px; height:62px; margin:-31px 0 0 -31px;
  border-radius:50%; transition:transform .06s linear;
  background:radial-gradient(circle at 42% 34%, rgba(200,245,255,.95), rgba(53,230,255,.62) 46%, rgba(16,74,92,.72));
  box-shadow:0 6px 18px rgba(0,0,0,.5), inset 0 0 0 1.5px rgba(200,245,255,.55); }
.stick.on .stick-knob{ box-shadow:0 6px 22px rgba(0,0,0,.55), 0 0 26px rgba(53,230,255,.6), inset 0 0 0 1.5px rgba(220,250,255,.85); }

/* ---------- panels ---------- */
.panel{ width:min(92%,380px); padding:22px 20px; border-radius:24px;
  background:linear-gradient(180deg, rgba(18,30,38,.8), rgba(7,12,16,.88));
  border:1px solid var(--stroke);
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.07);
  -webkit-backdrop-filter:blur(18px) saturate(130%); backdrop-filter:blur(18px) saturate(130%);
  display:flex; flex-direction:column; gap:14px; align-items:center;
  max-height:88%; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.panel-modal{ gap:16px; }
.panel-title{ margin:0; font-size:19px; font-weight:900; letter-spacing:.2em; color:#fff;
  text-shadow:0 0 20px rgba(141,255,47,.32); }
.panel-stats{ display:flex; gap:26px; }
.panel-stats div{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.panel-stats span{ font-size:8.5px; letter-spacing:.28em; color:var(--faint); }
.panel-stats b{ font-family:var(--num); font-size:19px; color:var(--lime-hi); }

.solid-btn{ width:100%; padding:16px; border:none; border-radius:16px; cursor:pointer;
  background:linear-gradient(180deg,var(--lime-hi),var(--lime) 48%,#3ca513); color:#04140a;
  font-size:15px; font-weight:900; letter-spacing:.2em;
  box-shadow:0 10px 26px -10px rgba(141,255,47,.85), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .12s cubic-bezier(.2,.9,.25,1); }
.solid-btn.small{ padding:13px; font-size:12px; }
.solid-btn:active{ transform:scale(.96); }
.btn-row{ display:flex; gap:9px; width:100%; }
.btn-row .ghost-btn{ flex:1; padding:13px 8px; }
.toggle{ padding:12px 10px; border-radius:12px; cursor:pointer; border:1px solid var(--stroke);
  background:rgba(255,255,255,.04); color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.14em; }
.toggle b{ color:var(--lime); }
.toggle[aria-pressed="false"] b{ color:var(--danger); }
.toggle.wide{ width:100%; display:flex; justify-content:space-between; }
.toggle.danger{ border-color:rgba(255,77,94,.3); color:rgba(255,140,150,.9); justify-content:center; }
.toggle:active{ transform:scale(.97); }
.settings{ display:flex; flex-direction:column; gap:9px; width:100%; }

.how-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; width:100%; }
.how-list li{ display:flex; gap:12px; align-items:center; }
.how-list div{ display:flex; flex-direction:column; gap:2px; }
.how-list b{ font-size:11px; letter-spacing:.16em; color:#fff; }
.how-list i{ font-style:normal; font-size:11px; color:var(--muted); line-height:1.35; }
.how-ico{ flex:none; width:38px; height:38px; border-radius:12px; position:relative;
  background:rgba(141,255,47,.08); border:1px solid rgba(141,255,47,.22); }
.how-ico::before,.how-ico::after{ content:""; position:absolute; }
.ico-jump::before{ left:50%; top:9px; width:12px; height:12px; margin-left:-6px; border-radius:50%;
  background:var(--lime); box-shadow:0 0 12px rgba(141,255,47,.7); animation:iconHop 1.1s ease-in-out infinite; }
.ico-jump::after{ left:9px; bottom:9px; width:20px; height:4px; border-radius:2px; background:rgba(141,255,47,.5); }
@keyframes iconHop{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }
.ico-stick::before{ inset:8px; border-radius:50%; border:1.5px solid rgba(53,230,255,.55); }
.ico-stick::after{ left:50%; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%;
  background:var(--cyan); animation:iconSlide 1.6s ease-in-out infinite; }
@keyframes iconSlide{ 0%,100%{transform:translateX(-6px)} 50%{transform:translateX(6px)} }
.ico-plat::before{ left:7px; top:12px; width:16px; height:5px; border-radius:3px; background:var(--lime);
  box-shadow:0 3px 0 rgba(53,230,255,.6); }
.ico-plat::after{ right:7px; bottom:11px; width:16px; height:5px; border-radius:3px; background:rgba(141,255,47,.5);
  box-shadow:0 3px 0 rgba(53,230,255,.35); }
.ico-coin::before{ left:8px; top:12px; width:14px; height:14px; border-radius:50%; background:var(--gold);
  box-shadow:0 0 12px rgba(255,201,60,.6); }
.ico-coin::after{ right:7px; bottom:10px; width:14px; height:12px; border-radius:50% 50% 46% 46%; background:var(--lime); }
.ico-up::before{ left:50%; margin-left:-1.5px; top:9px; width:3px; height:20px; border-radius:2px; background:var(--lime); }
.ico-up::after{ left:50%; margin-left:-6px; top:8px; width:12px; height:12px; transform:rotate(45deg);
  border-left:3px solid var(--lime); border-top:3px solid var(--lime); border-radius:2px; }
.fineprint{ margin:0; font-size:9.5px; line-height:1.5; color:var(--faint); text-align:center; letter-spacing:.04em; }

.board{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:5px; }
.board li{ display:grid; grid-template-columns:20px 1fr auto auto auto; gap:8px; align-items:center;
  padding:9px 10px; border-radius:11px; background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.055); font-family:var(--num); font-size:12px; }
.board li.top{ border-color:rgba(141,255,47,.34); background:rgba(141,255,47,.08); }
.board .rk{ color:var(--faint); font-size:10px; }
.board .sc{ color:#fff; font-weight:700; }
.board .ht{ color:var(--lime); font-size:11px; }
.board .td{ color:var(--gold); font-size:11px; }
.board .dt{ color:var(--faint); font-size:9px; }
.board .empty{ display:block; text-align:center; color:var(--faint); font-family:var(--ui);
  font-size:11px; letter-spacing:.14em; padding:18px; }

.credits{ display:flex; flex-direction:column; gap:8px; text-align:center; }
.credits p{ margin:0; font-size:12px; line-height:1.6; color:var(--muted); }
.credits b{ color:#fff; letter-spacing:.14em; }

/* ---------- game over: frozen world stays visible ---------- */
.screen.overlay.over{
  background:linear-gradient(to bottom, rgba(3,5,8,.88) 0%, rgba(3,5,8,.74) 40%, rgba(3,5,8,.26) 66%, rgba(3,5,8,.44) 100%),
    radial-gradient(130% 70% at 50% 48%, rgba(0,0,0,0) 44%, rgba(0,0,0,.62) 100%);
  -webkit-backdrop-filter:blur(2px) saturate(118%); backdrop-filter:blur(2px) saturate(118%);
  justify-content:flex-start; padding-top:calc(var(--safe-t) + 7vh);
}
.over-inner{ width:min(92%,380px); display:flex; flex-direction:column; align-items:center; gap:12px; }
.over-title{ margin:0; font-size:clamp(30px,10vw,44px); font-weight:900; letter-spacing:.1em; color:#fff;
  text-shadow:0 0 34px rgba(255,77,94,.42), 0 4px 0 rgba(0,0,0,.5);
  animation:overIn .55s cubic-bezier(.2,.9,.25,1) both; }
@keyframes overIn{ from{opacity:0;transform:translateY(-18px) scale(1.1);letter-spacing:.34em} to{opacity:1;transform:none} }
.record-badge{ padding:7px 14px; border-radius:99px; font-size:10px; font-weight:900; letter-spacing:.22em;
  color:#04140a; background:linear-gradient(90deg,var(--gold-hi),var(--gold));
  box-shadow:0 0 26px rgba(255,201,60,.6); animation:badgePop .6s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes badgePop{ from{transform:scale(.4) rotate(-6deg);opacity:0} to{transform:none;opacity:1} }
.panel-results{ gap:14px; background:linear-gradient(180deg, rgba(20,34,44,.42), rgba(7,12,16,.5));
  -webkit-backdrop-filter:blur(10px) saturate(130%); backdrop-filter:blur(10px) saturate(130%); }
.result-hero{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.result-hero span{ font-size:8.5px; letter-spacing:.3em; color:var(--faint); }
.result-hero b{ font-family:var(--num); font-size:42px; font-weight:700; color:#fff;
  font-variant-numeric:tabular-nums; text-shadow:0 0 28px rgba(141,255,47,.42); }
.result-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:11px 8px; width:100%; }
.result-grid div{ display:flex; flex-direction:column; align-items:center; gap:2px; }
.result-grid span{ font-size:7.5px; letter-spacing:.2em; color:var(--faint); text-align:center; }
.result-grid b{ font-family:var(--num); font-size:14px; color:var(--lime-hi); font-variant-numeric:tabular-nums; }
.share-note{ margin:0; font-size:10px; letter-spacing:.18em; color:var(--lime); text-align:center; }

/* ---------- rotate lock ---------- */
#rotate{ position:absolute; inset:0; z-index:90; display:none; align-items:center; justify-content:center;
  background:rgba(4,7,10,.96);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.rotate-inner{ display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--lime); }
.rotate-inner p{ margin:0; font-size:12px; letter-spacing:.28em; color:var(--text); font-weight:800; }
.rotate-inner svg{ animation:tilt 2s ease-in-out infinite; }
@keyframes tilt{ 0%,100%{transform:rotate(-90deg)} 50%{transform:rotate(0)} }
body.landscape #rotate{ display:flex; }

body.reduced *{ animation-duration:.001s !important; animation-iteration-count:1 !important; }