/* =========================================================
   LUNA RUSH
   Landing page + arcade HUD
   Dark teal machinery + neon green energy
   ========================================================= */

:root{
  /* --- palette --- */
  --green:        #4dff7c;
  --green-hot:    #b6ffce;
  --lime:         #9dff3d;
  --turq:         #35ffd0;
  --teal-deep:    #04181d;
  --teal-mid:     #0b2f36;
  --magenta:      #ff4fa3;
  --amber:        #ffc24d;
  --ink:          #02090b;

  /* --- semantic tokens: use these, not the raw palette above --- */
  --bg:           #01070a;
  --panel:        rgba(6, 26, 30, .72);
  --panel-solid:  #061a1e;
  --text:         #e9fff5;
  --muted:        rgba(168, 214, 202, .62);
  --primary:      #4dff7c;      /* neon green */
  --secondary:    #35ffd0;      /* cyan */
  --border:       rgba(77, 255, 124, .22);
  --border-soft:  rgba(150, 220, 205, .13);
  --glow:         rgba(77, 255, 124, .45);
  --glow-soft:    rgba(77, 255, 124, .18);

  /* --- motion --- */
  --t-fast: 160ms;
  --t-mid:  300ms;
  --t-slow: 520ms;
  --ease:   cubic-bezier(.2, .7, .3, 1);

  /* --- safe area --- */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);

  --font-arcade: "Arial Black", "Arial Bold", "Segoe UI Black", Impact, system-ui, sans-serif;
  --font-ui: "Consolas", "SF Mono", "Menlo", monospace;
}

*{ margin:0; padding:0; box-sizing:border-box; }

/* The UA's [hidden] rule is a bare attribute selector, so any id/class rule
   that sets `display` silently defeats it. State it once, with weight, so
   `hidden` always means hidden. */
[hidden]{ display:none !important; }

html, body{
  width:100%; height:100%;
  overflow:hidden;                 /* no page scrolling, ever */
  overscroll-behavior:none;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}

body{ cursor: crosshair; }
body.menu{ cursor: default; }

#scene{
  position:fixed; inset:0;
  width:100%; height:100%;
  display:block;
  /* the menu diorama doubles as the landing backdrop, dimmed behind the UI */
  opacity: 1;
  transition: opacity var(--t-slow) var(--ease);
}
body.menu #scene{ opacity: .55; }
body.playing #scene{ opacity: 1; }

.hidden{ display:none !important; }

/* =========================================================
   LANDING — background layers
   Sit over the dimmed 3D scene, under all landing UI.
   ========================================================= */

#landingFX{
  position:fixed; inset:0;
  z-index:5;
  pointer-events:none;
  transition: opacity var(--t-slow) var(--ease);
}
#landingFX.is-leaving{ opacity:0; }

.fxGrid{
  position:absolute; inset:-20%;
  background-image:
    linear-gradient(to right,  rgba(77,255,124,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(77,255,124,.055) 1px, transparent 1px);
  background-size: 64px 64px;
  transform: perspective(520px) rotateX(62deg) translateY(6%);
  transform-origin: 50% 100%;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 78%, #000 10%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 78%, #000 10%, transparent 72%);
  animation: gridDrift 14s linear infinite;
  opacity:.85;
}
@keyframes gridDrift{
  from{ background-position: 0 0, 0 0; }
  to  { background-position: 0 64px, 0 64px; }
}

.fxScan{
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    to bottom, rgba(180,255,225,.028) 0 1px, transparent 1px 3px);
  opacity:.5;
}

.fxGlow{
  position:absolute; left:50%; top:44%;
  width:min(120vw, 1100px); aspect-ratio:1;
  transform: translate(-50%,-50%);
  background: radial-gradient(circle,
      rgba(77,255,124,.16) 0%,
      rgba(53,255,208,.07) 32%,
      transparent 62%);
  filter: blur(14px);
  animation: glowBreath 7s ease-in-out infinite;
}
@keyframes glowBreath{
  0%,100%{ opacity:.75; transform: translate(-50%,-50%) scale(1); }
  50%    { opacity:1;   transform: translate(-50%,-50%) scale(1.07); }
}

.fxVignette{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 78% 68% at 50% 50%, transparent 42%, rgba(0,0,0,.72) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.55) 0%, transparent 22%, transparent 74%, rgba(0,0,0,.72) 100%);
}

/* =========================================================
   LANDING — shell
   ========================================================= */

#landing{
  position:fixed; inset:0;
  z-index:20;
  display:grid;
  grid-template-rows:auto 1fr auto;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "top    top"
    "hero   hero"
    "bl     br";
  padding:
    calc(22px + var(--sat)) calc(26px + var(--sar))
    calc(22px + var(--sab)) calc(26px + var(--sal));
  pointer-events:none;                 /* only real controls catch input */
  transition: opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease);
}
#landing > *{ pointer-events:auto; }
#landing.is-leaving{ opacity:0; transform: scale(1.03); }

/* ---------- top bar ---------- */

.landingTop{
  grid-area:top;
  display:flex; align-items:center; justify-content:space-between;
  gap:18px;
}

.brandRow{ display:flex; align-items:center; gap:30px; min-width:0; }

.logoWrap{ display:flex; align-items:center; flex:0 0 auto; }
#gameLogo{
  display:block;
  height:clamp(30px, 3.4vw, 46px);
  width:auto; max-width:min(46vw, 260px);
  object-fit:contain;
  filter: drop-shadow(0 0 14px var(--glow-soft));
}
/* an ID selector outranks the UA's [hidden] rule, so state it explicitly —
   otherwise a missing logo.png renders as a broken-image glyph */
#gameLogo[hidden]{ display:none; }
#logoFallback{
  font-family: var(--font-arcade);
  font-size: clamp(17px, 1.9vw, 25px);
  letter-spacing:1.5px;
  color: var(--text);
  text-shadow: 0 0 18px var(--glow-soft);
  white-space:nowrap;
}
#logoFallback i{ font-style:normal; color: var(--primary); margin-left:.34em; }

#mainNav{ display:flex; align-items:center; gap:6px; }

.navLink{
  appearance:none; background:none; border:0;
  font-family: var(--font-ui);
  font-size:11.5px; letter-spacing:2.2px;
  color: var(--muted);
  padding:12px 14px;
  min-height:44px;
  cursor:pointer;
  position:relative;
  transition: color var(--t-fast) var(--ease), text-shadow var(--t-fast) var(--ease);
}
.navLink::after{
  content:""; position:absolute; left:14px; right:14px; bottom:8px;
  height:1.5px; background: var(--primary);
  transform: scaleX(0); transform-origin:50%;
  box-shadow: 0 0 10px var(--glow);
  transition: transform var(--t-mid) var(--ease);
}
.navLink:hover{ color: var(--text); text-shadow: 0 0 12px var(--glow-soft); }
.navLink.is-active{ color: var(--primary); text-shadow: 0 0 14px var(--glow); }
.navLink.is-active::after{ transform: scaleX(1); }
.navLink:focus-visible{ outline:1px solid var(--primary); outline-offset:2px; }

.topRight{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }

/* ---------- buttons ---------- */

.ghostBtn{
  appearance:none; cursor:pointer;
  text-decoration:none;              /* some are <a>, which would underline */
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; padding:0 18px;
  font-family: var(--font-ui);
  font-size:11px; letter-spacing:2px;
  color: var(--text);
  background: linear-gradient(180deg, rgba(10,40,44,.5), rgba(6,24,28,.36));
  border:1px solid var(--border);
  border-radius:10px;
  backdrop-filter: blur(6px);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.ghostBtn svg{ width:16px; height:16px; fill:currentColor; opacity:.85; }
.ghostBtn:hover{
  color: var(--primary);
  border-color: rgba(77,255,124,.5);
  box-shadow: 0 0 22px var(--glow-soft), inset 0 0 18px rgba(77,255,124,.06);
}
.ghostBtn:active{ transform: translateY(1px); }
.ghostBtn:focus-visible{ outline:1px solid var(--primary); outline-offset:2px; }
/* still visually secondary, but never below the 44px touch minimum */
.ghostBtn.tiny{ min-height:44px; padding:0 12px; font-size:9.5px; letter-spacing:1.6px; }
.ghostBtn.is-disabled, .ghostBtn:disabled{ opacity:.4; cursor:not-allowed; }

.iconBtn{
  appearance:none; cursor:pointer;
  width:44px; height:44px;
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--text);
  background: rgba(8,30,34,.42);
  border:1px solid var(--border-soft);
  border-radius:10px;
  backdrop-filter: blur(6px);
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.iconBtn svg{ width:19px; height:19px; fill:currentColor; }
.iconBtn:hover{
  color: var(--primary); border-color: rgba(77,255,124,.45);
  box-shadow: 0 0 20px var(--glow-soft);
}
.iconBtn:active{ transform: translateY(1px); }
.iconBtn:focus-visible{ outline:1px solid var(--primary); outline-offset:2px; }
#btnSettings:hover svg{ transform: rotate(35deg); }
#btnSettings svg{ transition: transform var(--t-mid) var(--ease); }

.burger{ display:none; }

/* ---------- hero ---------- */

.hero{
  grid-area:hero;
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  gap:0;
  padding:10px 16px;
}
/* The reactor core burns right behind the hero. Without a scrim the tagline and
   best-score line sit on top of it and stop being readable. */
.hero::before{
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(126vw, 980px); height:min(86vh, 620px);
  background: radial-gradient(ellipse at center,
      rgba(1,7,10,.80) 0%, rgba(1,7,10,.58) 42%, rgba(1,7,10,.18) 66%, transparent 78%);
  pointer-events:none;
}

#heroTitle{
  font-family: var(--font-arcade);
  font-size: clamp(44px, 9.5vw, 132px);
  line-height:.9;
  letter-spacing:-1px;
  color:#fff;
  text-shadow: 0 0 70px rgba(77,255,124,.28), 0 6px 40px rgba(0,0,0,.7);
  margin-bottom:2px;
}
#heroTitle span{
  display:block;
  color: var(--primary);
  text-shadow: 0 0 46px var(--glow), 0 0 90px rgba(77,255,124,.3);
}

.heroRule{
  width:min(62vw, 380px); height:1px; margin:22px auto 16px;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  box-shadow: 0 0 16px var(--glow);
}

#heroTagline{
  font-size:12px; letter-spacing:3.6px;
  color: var(--muted);
  text-transform:uppercase;
  margin-bottom:34px;
}

.playBtn{
  appearance:none; cursor:pointer; position:relative;
  min-height:60px; padding:0 clamp(38px, 6vw, 68px);
  font-family: var(--font-arcade);
  font-size: clamp(17px, 2vw, 23px);
  letter-spacing:4px;
  color: var(--ink);
  background: linear-gradient(180deg, #7dffa4, var(--primary));
  border:0; border-radius:12px;
  box-shadow: 0 0 40px var(--glow), 0 10px 30px rgba(0,0,0,.5);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease),
              filter var(--t-fast) var(--ease);
  animation: playPulse 3.2s ease-in-out infinite;
}
.playBtn:hover{ filter:brightness(1.1); box-shadow: 0 0 66px var(--glow), 0 10px 30px rgba(0,0,0,.5); }
.playBtn:active{ transform: translateY(2px); }
.playBtn:focus-visible{ outline:2px solid var(--secondary); outline-offset:4px; }
.playBtn:disabled{ filter:grayscale(.7); cursor:not-allowed; animation:none; }
@keyframes playPulse{
  0%,100%{ box-shadow: 0 0 34px var(--glow-soft), 0 10px 30px rgba(0,0,0,.5); }
  50%    { box-shadow: 0 0 58px var(--glow),      0 10px 30px rgba(0,0,0,.5); }
}

.yourBest{
  margin-top:22px;
  font-size:10.5px; letter-spacing:3px;
  color: var(--muted);
}
.yourBest b{
  font-family: var(--font-arcade);
  font-size:15px; letter-spacing:.5px;
  color: var(--secondary);
  margin-left:8px;
  text-shadow: 0 0 14px rgba(53,255,208,.5);
}

.loadStatus{
  margin-top:12px; min-height:13px;
  font-size:9.5px; letter-spacing:1.8px;
  color: rgba(150,215,195,.36);
}

/* ---------- corner panels ---------- */

.cornerPanel{
  align-self:end;
  padding:14px 16px;
  background: var(--panel);
  border:1px solid var(--border-soft);
  border-left:2px solid var(--primary);
  border-radius:10px;
  backdrop-filter: blur(9px);
  box-shadow: 0 0 30px rgba(0,0,0,.45), -1px 0 20px var(--glow-soft);
  min-width:210px;
}
.cornerBL{ grid-area:bl; justify-self:start; }

.panelHead{
  font-family: var(--font-arcade);
  font-size:10px; letter-spacing:2.6px;
  color: var(--primary);
  margin-bottom:10px;
  text-shadow: 0 0 12px var(--glow-soft);
}

.scoreList{ list-style:none; margin:0 0 12px; padding:0; }
.scoreList li{
  display:grid; grid-template-columns:26px 1fr auto;
  align-items:baseline; gap:10px;
  padding:4px 0;
  font-size:11px;
}
.scoreList .rk{ color: var(--secondary); font-family: var(--font-arcade); font-size:10px; }
.scoreList .nm{ color: var(--muted); letter-spacing:1.4px; }
.scoreList .sc{
  font-family: var(--font-arcade); font-size:12px;
  color: var(--text); letter-spacing:.3px;
}

/* ---------- social ---------- */

.cornerBR{
  grid-area:br; justify-self:end; align-self:end;
  display:flex; align-items:center; gap:8px;
}
.socialBtn{
  width:44px; height:44px;                 /* touch target, icon stays small */
  display:inline-flex; align-items:center; justify-content:center;
  color: var(--text);
  opacity:.42;
  border-radius:10px;
  text-decoration:none;
  cursor:pointer;
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
              filter var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.socialBtn svg{ width:17px; height:17px; fill:currentColor; }
.socialBtn:hover{
  opacity:1; color: var(--primary);
  transform: scale(1.05);
  filter: drop-shadow(0 0 10px var(--glow));
}
.socialBtn:focus-visible{ outline:1px solid var(--primary); outline-offset:2px; opacity:1; }
.socialBtn.is-disabled{ cursor:default; }
.socialBtn.is-disabled:hover{ transform:none; }

/* =========================================================
   MOBILE DRAWER
   ========================================================= */

#mobileMenu{
  position:fixed;
  top: calc(76px + var(--sat)); right: calc(18px + var(--sar));
  z-index:55;
  display:flex; flex-direction:column;
  min-width:200px; padding:8px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 44px rgba(0,0,0,.6), 0 0 30px var(--glow-soft);
  animation: drawerIn var(--t-mid) var(--ease);
}
@keyframes drawerIn{
  from{ opacity:0; transform: translateY(-8px) scale(.97); }
  to  { opacity:1; transform:none; }
}
#mobileMenu .navLink{ text-align:left; padding:13px 14px; }
#mobileMenu .navLink::after{ left:14px; right:auto; width:22px; }

/* =========================================================
   MODALS / GLASS PANELS
   ========================================================= */

#modalOverlay{
  position:fixed; inset:0;
  z-index:70;
  display:flex; align-items:center; justify-content:center;
  padding: calc(20px + var(--sat)) calc(20px + var(--sar))
           calc(20px + var(--sab)) calc(20px + var(--sal));
  background: rgba(1,7,10,.72);
  backdrop-filter: blur(6px);
  animation: fadeIn var(--t-mid) var(--ease);
}
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.glassPanel{
  width:min(94vw, 440px);
  max-height: min(86vh, 720px);
  overflow:auto;
  display:flex; flex-direction:column;
  padding:26px 26px 22px;
  background: linear-gradient(180deg, rgba(9,32,36,.92), rgba(5,19,23,.9));
  border:1px solid var(--border);
  border-radius:16px;
  backdrop-filter: blur(16px);
  box-shadow: 0 26px 70px rgba(0,0,0,.7), 0 0 42px var(--glow-soft),
              inset 0 1px 0 rgba(180,255,225,.07);
  animation: panelIn var(--t-mid) var(--ease);
}
.glassPanel.wide{ width:min(94vw, 560px); }
@keyframes panelIn{
  from{ opacity:0; transform: translateY(14px) scale(.97); }
  to  { opacity:1; transform:none; }
}

.panelTitle{
  font-family: var(--font-arcade);
  font-size:19px; letter-spacing:2.6px;
  color: var(--primary);
  text-shadow: 0 0 20px var(--glow-soft);
  margin-bottom:18px;
}
.panelBody{ flex:1; font-size:12.5px; line-height:1.75; color: rgba(214,244,234,.84); }
.panelBody p{ margin-bottom:12px; }
.panelBody p:last-child{ margin-bottom:0; }

.closeBtn{ align-self:flex-start; margin-top:22px; }

/* ---------- how to play ---------- */

.howGroup{ margin-bottom:18px; }
.howGroupHead{
  font-family: var(--font-arcade);
  font-size:9.5px; letter-spacing:2.6px;
  color: var(--secondary);
  margin-bottom:8px;
}
.howRow{
  display:grid; grid-template-columns: minmax(96px, 38%) 1fr;
  gap:14px; align-items:baseline;
  padding:7px 0;
  border-bottom:1px solid rgba(150,220,205,.07);
}
.howRow:last-child{ border-bottom:0; }
.howRow b{
  font-family: var(--font-arcade);
  font-size:11px; letter-spacing:1.2px;
  color: var(--text);
}
.howRow span{ font-size:12px; color: var(--muted); }
.howRow.core b{ padding-left:12px; position:relative; }
.howRow.core b::before{
  content:""; position:absolute; left:0; top:.35em;
  width:6px; height:6px; border-radius:50%;
}
.howRow.speed  b::before{ background:#39ffd6; box-shadow:0 0 8px #39ffd6; }
.howRow.heal   b::before{ background:var(--green); box-shadow:0 0 8px var(--green); }
.howRow.impact b::before{ background:#c23bff; box-shadow:0 0 8px #c23bff; }
.howNote{ font-size:12px; color: var(--muted); margin:0 0 18px; }

/* ---------- leaderboard ---------- */

.lbHead{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:12px; padding:0 2px 8px;
  font-size:9.5px; letter-spacing:2.4px;
  color: rgba(150,215,195,.5);
  border-bottom:1px solid var(--border-soft);
}
.lbList{ list-style:none; margin:0; padding:0; }
.lbList li{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:12px; align-items:baseline;
  padding:10px 2px;
  border-bottom:1px solid rgba(150,220,205,.06);
}
.lbList .rk{ font-family: var(--font-arcade); font-size:12px; color: var(--secondary); }
.lbList .nm{ letter-spacing:1.8px; font-size:12px; color: var(--text); }
.lbList .sc{ font-family: var(--font-arcade); font-size:13px; color: var(--text); }
.lbList li:nth-child(1) .sc{ color: var(--primary); text-shadow:0 0 12px var(--glow-soft); }
.lbNote{ margin-top:14px; font-size:10.5px; letter-spacing:1.2px; color: rgba(150,215,195,.42); }

/* ---------- wallet ---------- */

.panelBody .dim{ color: rgba(150,215,195,.55); }
.panelBody .tiny{ font-size:10px; letter-spacing:1.4px; }

.ghostBtn.primary{
  border-color: rgba(77,255,124,.5);
  color: var(--primary);
  box-shadow: 0 0 20px var(--glow-soft);
  margin-top:14px;
}
.ghostBtn.is-connected{ border-color: rgba(77,255,124,.45); color: var(--primary); }

.walletHead{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
  margin-bottom:8px;
}
.walletShort{
  font-family: var(--font-arcade);
  font-size:17px; letter-spacing:1px;
  color: var(--primary);
  text-shadow: 0 0 16px var(--glow-soft);
}
.walletAddress{
  font-size:10px; letter-spacing:.4px; line-height:1.6;
  color: rgba(150,215,195,.5);
  word-break:break-all;
  padding:8px 10px; margin-bottom:6px;
  background: rgba(4,20,24,.55);
  border:1px solid var(--border-soft);
  border-radius:8px;
}

.handleRow{ margin:16px 0 4px; }
.handleInputRow{ display:flex; gap:8px; margin-top:7px; }
#handleInput{
  flex:1; min-width:0; min-height:44px;
  padding:0 12px;
  font-family: var(--font-ui); font-size:12px; letter-spacing:1.4px;
  color: var(--text);
  background: rgba(4,20,24,.6);
  border:1px solid var(--border-soft);
  border-radius:9px;
}
#handleInput:focus{
  outline:none;
  border-color: rgba(77,255,124,.5);
  box-shadow: 0 0 16px var(--glow-soft);
}
#handleInput::placeholder{ color: rgba(150,215,195,.32); letter-spacing:1px; }

.statGrid{
  display:grid; grid-template-columns:1fr 1fr; gap:8px;
  margin-top:16px;
}
.statCell{
  padding:10px 12px;
  background: rgba(4,20,24,.5);
  border:1px solid var(--border-soft);
  border-left:2px solid rgba(77,255,124,.35);
  border-radius:8px;
}
.statCell span{
  display:block;
  font-size:9px; letter-spacing:2.2px;
  color: rgba(150,215,195,.55);
  margin-bottom:4px;
}
.statCell b{
  font-family: var(--font-arcade);
  font-size:15px; letter-spacing:.4px;
  color: var(--text);
}

.walletMsg{
  margin-top:14px; padding:9px 12px;
  font-size:11px; line-height:1.6; letter-spacing:.6px;
  background: rgba(4,20,24,.5);
  border-left:2px solid var(--border-soft);
  border-radius:6px;
  color: var(--muted);
}
.walletMsg.is-ok   { border-left-color: var(--primary);   color: var(--green-hot); }
.walletMsg.is-warn { border-left-color: var(--amber);     color: #ffd98a; }
.walletMsg.is-error{ border-left-color: var(--magenta);   color: #ff9ec7; }

/* your own row on the leaderboard */
.lbList li.is-me{
  background: rgba(77,255,124,.07);
  box-shadow: inset 2px 0 0 var(--primary);
}
.lbMe{
  display:grid; grid-template-columns:52px 1fr auto;
  gap:12px; align-items:baseline;
  margin-top:10px; padding:10px 2px;
  border-top:1px solid var(--border);
}
.lbMe .rk{ font-family: var(--font-arcade); font-size:12px; color: var(--primary); }
.lbMe .nm{ letter-spacing:1.8px; font-size:12px; color: var(--primary); }
.lbMe .sc{ font-family: var(--font-arcade); font-size:13px; color: var(--primary); }

/* sample-data hint on the corner panel */
.panelHead.is-sample::after{
  content:" · SAMPLE";
  color: rgba(150,215,195,.4);
  letter-spacing:1.6px;
}

.yourBest i{
  font-style:normal;
  margin-left:8px; padding:2px 6px;
  font-size:8.5px; letter-spacing:1.6px;
  color: var(--ink); background: var(--secondary);
  border-radius:4px;
  vertical-align:middle;
}

/* ---------- settings ---------- */

.setRow{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:11px 0;
  border-bottom:1px solid rgba(150,220,205,.07);
}
.setRow:last-child{ border-bottom:0; }
.setLabel{ font-size:10.5px; letter-spacing:2.4px; color: var(--muted); }

.segment{
  display:flex; gap:4px;
  padding:3px;
  background: rgba(4,20,24,.6);
  border:1px solid var(--border-soft);
  border-radius:9px;
}
.segment button{
  appearance:none; cursor:pointer;
  min-width:46px; min-height:34px; padding:0 10px;
  font-family: var(--font-ui);
  font-size:10px; letter-spacing:1.4px;
  color: var(--muted);
  background:none; border:0; border-radius:6px;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.segment button:hover{ color: var(--text); }
.segment button.is-on{
  color: var(--ink);
  background: var(--primary);
  box-shadow: 0 0 16px var(--glow-soft);
}
.segment button:focus-visible{ outline:1px solid var(--primary); outline-offset:1px; }

/* =========================================================
   GAME-OVER / PAUSE button row
   ========================================================= */

.overButtons{
  display:flex; align-items:center; justify-content:center; gap:12px;
  flex-wrap:wrap;
}

/* =========================================================
   HUD
   ========================================================= */

#hud{
  position:fixed; inset:0;
  pointer-events:none;
  user-select:none;
  z-index:10;
}

/* ---- score, top-left ---- */

#scoreBlock{
  position:absolute;
  top: 14px; left: 22px;
}

#bestLine{
  font-family: var(--font-arcade);
  font-size: 12px;
  letter-spacing: 1.6px;
  color: rgba(224,255,240,.72);
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
  margin-left: 4px;
  margin-bottom: -4px;
}

#scoreRow{
  display:flex;
  align-items: baseline;
  gap: 10px;
}

#scoreValue{
  font-family: var(--font-arcade);
  font-size: 58px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -1px;
  color:#ffffff;
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px  3px 0 var(--ink), 3px  3px 0 var(--ink),
     0   -3px 0 var(--ink), 0    3px 0 var(--ink),
    -3px  0   0 var(--ink), 3px  0   0 var(--ink),
     0 6px 14px rgba(0,0,0,.65);
  transition: transform .08s ease-out;
}

#scoreValue.bump{ transform: scale(1.09); }

/* floating +score popups */

#popupLayer{
  position:relative;
  width:0; height:0;
}

.popup{
  position:absolute;
  left:0; bottom: 10px;
  white-space:nowrap;
  font-family: var(--font-arcade);
  font-size: 22px;
  font-weight:900;
  letter-spacing:.5px;
  color:#fff;
  text-shadow:
    -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
    -2px  2px 0 var(--ink), 2px  2px 0 var(--ink);
  animation: popFloat 1.05s cubic-bezier(.16,.9,.3,1) forwards;
}
.popup.green  { color: var(--green-hot); }
.popup.lime   { color: var(--lime); }
.popup.amber  { color: var(--amber); }
.popup.cyan   { color: #39ffd6; }
.popup.magenta{ color: #ff6bc0; }

@keyframes popFloat{
  0%   { opacity:0; transform: translate(0, 8px) scale(.7); }
  18%  { opacity:1; transform: translate(0, 0) scale(1.14); }
  32%  { transform: translate(0,-2px) scale(1); }
  100% { opacity:0; transform: translate(14px,-42px) scale(.95); }
}

/* ---- status block, bottom-left ---- */

/* No backdrop-filter on anything visible during a run.
   Blurring a region of the WebGL canvas forces the compositor to read it back
   and blur it every single frame — one of the few CSS properties that can cost
   more than the 3D scene itself. The landing and modals still use it; they are
   display:none while playing. A slightly more opaque background reads the same. */
#statusBlock{
  position:absolute;
  left: 26px; bottom: 26px;
  display:flex; flex-direction:column; gap:9px;
  padding: 12px 16px 12px 14px;
  background: linear-gradient(100deg, rgba(4,26,30,.82), rgba(4,26,30,.34));
  border-left: 3px solid var(--green);
  box-shadow: -1px 0 18px rgba(77,255,124,.18);
}

.statLabel{
  font-family: var(--font-arcade);
  font-size: 10px;
  letter-spacing: 2.4px;
  color: rgba(180,255,215,.6);
  width: 46px;
  display:inline-block;
}

#hpRow, #boostRow, #distRow{
  display:flex; align-items:center; gap:12px;
}

#hpPips{ display:flex; gap:6px; }

.pip{
  width: 26px; height: 9px;
  display:block;
  background: var(--green);
  box-shadow: 0 0 10px var(--green), 0 0 22px rgba(77,255,124,.45);
  transform: skewX(-22deg);
  transition: background .18s, box-shadow .18s, opacity .18s;
}
.pip.spent{
  background: rgba(120,190,170,.16);
  box-shadow: none;
}
.pip.low{
  background: var(--magenta);
  box-shadow: 0 0 10px var(--magenta), 0 0 22px rgba(255,79,163,.45);
  animation: pipPulse .55s steps(2) infinite;
}
@keyframes pipPulse{ 0%{opacity:1} 50%{opacity:.35} 100%{opacity:1} }

#boostTrack{
  width: 168px; height: 9px;
  background: rgba(120,190,170,.14);
  transform: skewX(-22deg);
  overflow:hidden;
}
#boostFill{
  height:100%; width:100%;
  background: linear-gradient(90deg, var(--turq), var(--lime));
  box-shadow: 0 0 14px rgba(157,255,61,.6);
  transform-origin: left center;
  transition: width .08s linear;
}
#boostFill.empty{
  background: linear-gradient(90deg, #5b3b52, var(--magenta));
  box-shadow: none;
}

#distValue{
  font-family: var(--font-arcade);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--green-hot);
  text-shadow: 0 0 12px rgba(77,255,124,.55);
}

/* ---- combo badge ---- */

#comboBadge{
  position:absolute;
  right: 40px; top: 30px;
  font-family: var(--font-arcade);
  font-size: 46px;
  font-weight:900;
  color: var(--lime);
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px  3px 0 var(--ink), 3px  3px 0 var(--ink),
     0 0 26px rgba(157,255,61,.85);
  transform-origin: 100% 50%;
}
#comboBadge.kick{ animation: comboKick .3s cubic-bezier(.2,1.5,.4,1); }
@keyframes comboKick{
  0%{ transform: scale(1.55) rotate(-5deg); }
  100%{ transform: scale(1) rotate(0deg); }
}

/* ---- center flash text (NEAR MISS / RING BONUS) ---- */

#centerFlash{
  position:absolute;
  left:50%; top: 25%;
  transform: translate(-50%,-50%);
  font-family: var(--font-arcade);
  font-size: 40px;
  letter-spacing: 4px;
  color: var(--green-hot);
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px  3px 0 var(--ink), 3px  3px 0 var(--ink),
     0 0 34px rgba(77,255,124,.9);
  opacity:0;
}
#centerFlash.show{ animation: flashIn .62s ease-out; }
@keyframes flashIn{
  0%   { opacity:0; transform: translate(-50%,-50%) scale(.6); letter-spacing: 22px; }
  22%  { opacity:1; transform: translate(-50%,-50%) scale(1.06); letter-spacing: 4px; }
  70%  { opacity:1; }
  100% { opacity:0; transform: translate(-50%,-58%) scale(1); }
}

/* ---- active power-up banner ---- */

#powerBanner{
  position:absolute;
  left:50%; bottom: 34px;
  transform: translateX(-50%);
  min-width: 230px;
  padding: 9px 16px 10px;
  background: linear-gradient(180deg, rgba(4,26,30,.88), rgba(4,26,30,.62));
  border: 1px solid var(--power-tint, var(--turq));
  box-shadow: 0 0 26px var(--power-glow, rgba(53,255,208,.35));
  animation: powerIn .22s cubic-bezier(.2,1.4,.4,1);
}
@keyframes powerIn{
  from{ opacity:0; transform: translateX(-50%) translateY(10px) scale(.9); }
  to  { opacity:1; transform: translateX(-50%) translateY(0) scale(1); }
}

#powerRow{
  display:flex; align-items:baseline; justify-content:space-between; gap: 18px;
  margin-bottom: 6px;
}
#powerName{
  font-family: var(--font-arcade);
  font-size: 14px; letter-spacing: 2.6px;
  color: var(--power-tint, var(--turq));
  text-shadow: 0 0 14px var(--power-glow, rgba(53,255,208,.7));
}
#powerTime{
  font-family: var(--font-arcade);
  font-size: 16px; letter-spacing: .5px;
  color:#fff;
  text-shadow: -2px -2px 0 var(--ink), 2px -2px 0 var(--ink),
               -2px  2px 0 var(--ink), 2px  2px 0 var(--ink);
  min-width: 46px; text-align:right;
}

#powerTrack{
  height: 5px;
  background: rgba(120,190,170,.16);
  overflow:hidden;
}
#powerFill{
  height:100%; width:100%;
  background: var(--power-tint, var(--turq));
  box-shadow: 0 0 12px var(--power-glow, rgba(53,255,208,.8));
  transform-origin: left center;
}

/* the last second reads as urgency, not decoration */
#powerBanner.ending{ animation: powerPulse .28s steps(2) infinite; }
@keyframes powerPulse{ 0%{opacity:1} 50%{opacity:.45} 100%{opacity:1} }

#powerBanner.speed  { --power-tint:#39ffd6; --power-glow: rgba(57,255,214,.55); }
#powerBanner.impact { --power-tint:#ff4fa3; --power-glow: rgba(194,59,255,.6); }

/* ---- heal feedback ---- */

#healFlash{
  position:absolute;
  left:50%; top: 42%;
  transform: translate(-50%,-50%);
  font-family: var(--font-arcade);
  font-size: 40px; letter-spacing: 2px;
  color: var(--green);
  text-shadow:
    -3px -3px 0 var(--ink), 3px -3px 0 var(--ink),
    -3px  3px 0 var(--ink), 3px  3px 0 var(--ink),
     0 0 32px rgba(77,255,124,.95);
}
#healFlash.show{ animation: healPop .8s cubic-bezier(.16,.9,.3,1); }
@keyframes healPop{
  0%   { opacity:0; transform: translate(-50%,-40%) scale(.6); }
  20%  { opacity:1; transform: translate(-50%,-50%) scale(1.16); }
  55%  { opacity:1; transform: translate(-50%,-52%) scale(1); }
  100% { opacity:0; transform: translate(-50%,-74%) scale(1); }
}

/* ---- impact power screen tint ---- */

#powerVignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(194,59,255,0) 45%, rgba(194,59,255,.42) 100%);
  opacity:0;
  transition: opacity .25s ease-out;
}
#powerVignette.on{ opacity:1; }

/* ---- damage vignette ---- */

#hitVignette{
  position:absolute; inset:0;
  background: radial-gradient(ellipse at center, rgba(255,40,110,0) 35%, rgba(255,40,110,.55) 100%);
  opacity:0;
  transition: opacity .12s ease-out;
}
#hitVignette.on{ opacity:1; transition: none; }

/* =========================================================
   SCREENS
   ========================================================= */

.screen{
  position:fixed; inset:0;
  z-index: 40;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at 50% 45%, rgba(10,60,58,.42) 0%, rgba(2,10,12,.9) 62%, rgba(1,6,7,.97) 100%);
  backdrop-filter: blur(2px);
  animation: screenIn .28s ease-out;
}
@keyframes screenIn{ from{opacity:0} to{opacity:1} }

.screenInner{
  text-align:center;
  padding: 30px 46px;
  max-width: 720px;
}

/* --- title --- */

.titleStack{ margin-bottom: 34px; }

.gameTitle{
  font-family: var(--font-arcade);
  font-size: clamp(46px, 9vw, 104px);
  line-height: .92;
  letter-spacing: -2px;
  color:#ffffff;
  text-shadow:
    -4px -4px 0 var(--ink), 4px -4px 0 var(--ink),
    -4px  4px 0 var(--ink), 4px  4px 0 var(--ink),
     0 0 60px rgba(77,255,124,.35);
  animation: titleBob 3.4s ease-in-out infinite;
}
.gameTitle .titleAccent{
  display:block;
  color: var(--green);
  text-shadow:
    -4px -4px 0 var(--ink), 4px -4px 0 var(--ink),
    -4px  4px 0 var(--ink), 4px  4px 0 var(--ink),
     0 0 46px rgba(77,255,124,.9);
}
@keyframes titleBob{
  0%,100%{ transform: translateY(0) }
  50%    { transform: translateY(-8px) }
}

.titleRule{
  width: 70%; height:2px; margin: 20px auto 14px;
  background: linear-gradient(90deg, transparent, var(--green), transparent);
  box-shadow: 0 0 18px rgba(77,255,124,.8);
}

.tagline{
  font-family: var(--font-ui);
  font-size: 12px;
  letter-spacing: 3.4px;
  color: rgba(170,240,215,.66);
}

/* --- controls --- */

.controlsGrid{
  display:flex; flex-wrap:wrap; justify-content:center; gap: 10px;
  margin-bottom: 34px;
}
.ctrl{
  display:flex; flex-direction:column; gap:5px; align-items:center;
  padding: 10px 18px;
  border: 1px solid rgba(77,255,124,.22);
  background: rgba(8,38,42,.42);
}
.ctrl b{
  font-family: var(--font-arcade);
  font-size: 15px; letter-spacing: 1.4px;
  color: var(--green-hot);
}
.ctrl span{
  font-size: 9.5px; letter-spacing: 2.4px;
  color: rgba(160,225,205,.55);
}

/* --- button --- */

.arcadeBtn{
  pointer-events:auto;
  cursor:pointer;
  font-family: var(--font-arcade);
  font-size: 26px;
  letter-spacing: 3px;
  color: var(--ink);
  background: var(--green);
  border:none;
  padding: 17px 52px;
  transform: skewX(-8deg);
  box-shadow: 0 0 30px rgba(77,255,124,.55), 0 8px 0 #14603a;
  transition: transform .1s, box-shadow .16s, background .16s;
  animation: btnPulse 1.9s ease-in-out infinite;
}
.arcadeBtn:hover{
  background: var(--green-hot);
  box-shadow: 0 0 52px rgba(77,255,124,.95), 0 8px 0 #14603a;
}
.arcadeBtn:active{
  transform: skewX(-8deg) translateY(6px);
  box-shadow: 0 0 30px rgba(77,255,124,.6), 0 2px 0 #14603a;
}
@keyframes btnPulse{
  0%,100%{ filter: brightness(1) }
  50%    { filter: brightness(1.22) }
}

#loadStatus{
  margin-top: 22px;
  font-size: 10.5px;
  letter-spacing: 2.2px;
  color: rgba(150,215,195,.45);
  min-height: 14px;
}

/* --- game over --- */

.overTitle{
  font-family: var(--font-arcade);
  font-size: clamp(38px, 7vw, 76px);
  letter-spacing: -1px;
  color: #ffffff;
  text-shadow:
    -4px -4px 0 var(--ink), 4px -4px 0 var(--ink),
    -4px  4px 0 var(--ink), 4px  4px 0 var(--ink),
     0 0 50px rgba(255,79,163,.6);
  margin-bottom: 26px;
}

.resultGrid{
  display:flex; flex-direction:column; gap: 3px;
  margin-bottom: 24px;
  min-width: 380px;
}
.resultRow{
  display:flex; justify-content:space-between; align-items:baseline;
  padding: 9px 18px;
  background: rgba(8,38,42,.5);
  border-left: 2px solid rgba(77,255,124,.3);
}
.resultRow span{
  font-size: 11px; letter-spacing: 2.6px;
  color: rgba(165,230,210,.6);
}
.resultRow b{
  font-family: var(--font-arcade);
  font-size: 20px; letter-spacing: .5px;
  color: var(--green-hot);
}
.resultRow.big{
  border-left-color: var(--green);
  background: rgba(12,54,50,.6);
}
.resultRow.big b{
  font-size: 38px;
  color:#fff;
  text-shadow: 0 0 28px rgba(77,255,124,.75);
}

#newBestTag{
  font-family: var(--font-arcade);
  font-size: 18px; letter-spacing: 5px;
  color: var(--lime);
  text-shadow: 0 0 26px rgba(157,255,61,.9);
  margin-bottom: 22px;
  animation: pipPulse .7s steps(2) infinite;
}

/* --- fatal error --- */

#fatalError{
  position:fixed; inset:0; z-index:99;
  display:flex; align-items:center; justify-content:center;
  padding: 40px;
  background:#02090b;
  color:#ff6ba6;
  font-size: 13px; line-height:1.7;
  white-space: pre-wrap;
  text-align:center;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

/* ---------- tablet ---------- */
@media (max-width: 1024px){
  #landing{ padding:
    calc(18px + var(--sat)) calc(20px + var(--sar))
    calc(18px + var(--sab)) calc(20px + var(--sal)); }
  .brandRow{ gap:16px; }
  #mainNav{ gap:0; }
  .navLink{ padding:12px 9px; font-size:10.5px; letter-spacing:1.6px; }
  .ghostBtn{ padding:0 13px; font-size:10px; letter-spacing:1.4px; }
  .walletBtn svg{ display:none; }
  #heroTagline{ font-size:11px; letter-spacing:2.6px; margin-bottom:28px; }
  .cornerPanel{ min-width:184px; padding:12px 13px; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px){
  /* nav and wallet collapse into the drawer; only logo + gear + burger remain */
  #mainNav{ display:none; }
  .walletBtn{ display:none; }
  .burger{ display:inline-flex; }

  #landing{
    grid-template-rows:auto 1fr auto;
    padding:
      calc(14px + var(--sat)) calc(14px + var(--sar))
      calc(14px + var(--sab)) calc(14px + var(--sal));
  }
  .topRight{ gap:8px; }

  #heroTitle{ font-size: clamp(40px, 15vw, 74px); }
  .heroRule{ margin:16px auto 12px; }
  #heroTagline{ font-size:10px; letter-spacing:2.2px; margin-bottom:24px; }
  .playBtn{ min-height:58px; padding:0 44px; font-size:18px; letter-spacing:3px; }
  .yourBest{ margin-top:18px; }

  .cornerPanel{ min-width:0; width:min(52vw, 200px); padding:10px 12px; }
  .scoreList li{ grid-template-columns:22px 1fr auto; gap:7px; font-size:10px; }
  .scoreList .sc{ font-size:11px; }
  .panelHead{ font-size:9px; letter-spacing:2px; margin-bottom:7px; }
  .ghostBtn.tiny{ min-height:44px; font-size:8.5px; padding:0 9px; }

  .glassPanel{ padding:20px 18px 18px; border-radius:14px; }
  .panelTitle{ font-size:16px; letter-spacing:2px; margin-bottom:14px; }
  .howRow{ grid-template-columns:1fr; gap:2px; }
  .lbHead, .lbList li{ grid-template-columns:38px 1fr auto; gap:8px; }
  .setRow{ flex-direction:column; align-items:flex-start; gap:9px; }
  .segment{ width:100%; }
  .segment button{ flex:1; }

  /* in-game HUD */
  #scoreValue{ font-size: 38px; }
  #comboBadge{ font-size: 32px; right: 20px; top: 20px; }
  #statusBlock{ left: 14px; bottom: 14px; padding: 9px 12px; }
  #boostTrack{ width: 110px; }
  .resultGrid{ min-width: 0; width: 84vw; }
  .screenInner{ padding: 20px; }
  #centerFlash{ font-size: 26px; }
  #powerBanner{ min-width: 180px; bottom: 96px; padding: 7px 12px 8px; }
  #powerName{ font-size: 11px; letter-spacing: 1.8px; }
  #powerTime{ font-size: 13px; }
  #healFlash{ font-size: 26px; }
}

/* very short landscape phones: the hero must not push the corners off screen */
@media (max-height: 460px) and (max-width: 900px){
  #heroTitle{ font-size: clamp(28px, 8vh, 46px); }
  .heroRule{ margin:10px auto 8px; }
  #heroTagline{ margin-bottom:14px; }
  .playBtn{ min-height:48px; font-size:15px; }
  .yourBest, .loadStatus{ display:none; }
  .cornerPanel{ padding:8px 10px; }
  .scoreList li:nth-child(n+3){ display:none; }
}

/* in-game safe area: keep the HUD clear of notches and home indicators */
#scoreBlock{ top: calc(14px + var(--sat)); left: calc(22px + var(--sal)); }
#statusBlock{ left: calc(26px + var(--sal)); bottom: calc(26px + var(--sab)); }
#comboBadge{ right: calc(40px + var(--sar)); top: calc(30px + var(--sat)); }
#powerBanner{ bottom: calc(34px + var(--sab)); }

/* =========================================================
   REDUCED MOTION
   Keep the page readable and calm: no drifting grid, no breathing
   glow, no pulsing buttons — transitions collapse to near-instant.
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .fxGrid{ animation:none; opacity:.5; }
  .fxScan{ display:none; }
  .fxGlow{ animation:none; opacity:.7; }
  .playBtn{ animation:none; box-shadow: 0 0 34px var(--glow-soft), 0 10px 30px rgba(0,0,0,.5); }
  .gameTitle{ animation:none; }
  #btnSettings:hover svg{ transform:none; }
  .socialBtn:hover{ transform:none; }
}