/* ============================================================
   DROP RIOT — UI stylesheet
   Fonts: Anton (display) / Orbitron (numerals) / Jost (UI)
   ============================================================ */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body {
  width:100%; height:100%; overflow:hidden; background:#061522;
  font-family:'Jost','Hiragino Kaku Gothic ProN','Hiragino Sans',sans-serif;
  touch-action:none;
}
#wrap { position:fixed; inset:0; }
canvas { display:block; }

/* ============ boot sequence ============ */
.boot-loader {
  position:fixed; inset:0; z-index:50; display:grid; place-items:center; overflow:hidden;
  padding:28px; color:#c9f4ff; background:
    radial-gradient(ellipse at 50% 42%,rgba(24,113,154,.24),transparent 48%),
    linear-gradient(145deg,#020914,#061a29 56%,#03101d);
  transition:opacity .42s ease,filter .42s ease,transform .42s cubic-bezier(.2,.7,.2,1);
}
.boot-loader::before {
  content:""; position:absolute; inset:-30%; pointer-events:none; opacity:.42;
  background:repeating-linear-gradient(112deg,transparent 0 46px,rgba(103,218,255,.045) 47px 48px,transparent 49px 94px);
  animation:bootDrift 2.4s linear infinite;
}
.boot-loader::after {
  content:""; position:absolute; left:0; right:0; top:0; height:1px; opacity:.7;
  background:linear-gradient(90deg,transparent,#7de8ff 35%,#e8fcff 50%,#7de8ff 65%,transparent);
  box-shadow:0 0 18px rgba(84,216,255,.85); animation:bootScan 1.35s ease-in-out infinite;
}
.boot-loader-inner { position:relative; width:min(74vw,360px); }
.boot-system { display:flex; align-items:end; justify-content:space-between; margin-bottom:11px; }
.boot-system span { font-family:'Orbitron',monospace; font-size:9px; font-weight:600; letter-spacing:.32em; }
.boot-system b { min-width:2.2em; font-family:'Orbitron',monospace; font-size:12px; font-weight:600; text-align:right; color:#81e5ff; }
.boot-track { position:relative; height:2px; overflow:hidden; background:rgba(155,227,250,.13); }
.boot-track i {
  display:block; width:8%; height:100%; background:linear-gradient(90deg,#3dbde9,#e4fbff);
  box-shadow:0 0 14px rgba(86,219,255,.9); transition:width .28s cubic-bezier(.2,.7,.2,1);
}
.boot-status { margin-top:10px; font-size:8px; font-weight:600; letter-spacing:.3em; color:rgba(188,230,245,.62); }
.boot-loader.is-complete { opacity:0; transform:scale(1.012); pointer-events:none; }
.boot-loader.is-error .boot-track i { width:100% !important; background:#ff835f; box-shadow:0 0 14px rgba(255,93,67,.75); }
.boot-loader.is-error .boot-status { color:#ffb39e; }
body.is-loading #title { visibility:hidden; opacity:0; }
@keyframes bootDrift { to { transform:translate3d(94px,0,0); } }
@keyframes bootScan {
  0% { top:8%; opacity:0; }
  18% { opacity:.72; }
  82% { opacity:.5; }
  100% { top:92%; opacity:0; }
}

/* ============ first-person immersion layers ============ */
#lensFx, #fallFx { position:fixed; inset:0; pointer-events:none; z-index:3; }
#lensFx {
  --wet:0; --rush:0; opacity:calc(var(--wet) * .92);
  mix-blend-mode:screen; transition:opacity .18s linear;
  background:
    radial-gradient(ellipse at 50% 112%, rgba(185,235,255,.22), transparent 48%),
    linear-gradient(105deg, transparent 21%, rgba(220,248,255,.05) 49%, transparent 67%);
}
.lens-sheen {
  position:absolute; inset:-12%; opacity:calc(.18 + var(--rush) * .35);
  background:conic-gradient(from 198deg at 50% 115%, transparent 0 26%, rgba(190,240,255,.1) 31%, transparent 39% 61%, rgba(220,250,255,.08) 66%, transparent 73%);
  filter:blur(8px); transform:scaleY(calc(1 + var(--rush) * .16));
}
.lens-drops {
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 10px 17px at 9% 23%, rgba(230,251,255,.28) 0 9%, rgba(128,210,238,.12) 18%, transparent 56%),
    radial-gradient(ellipse 7px 12px at 22% 68%, rgba(235,252,255,.24) 0 8%, rgba(130,205,230,.1) 20%, transparent 58%),
    radial-gradient(ellipse 13px 22px at 79% 19%, rgba(235,252,255,.3) 0 8%, rgba(130,205,230,.12) 18%, transparent 55%),
    radial-gradient(ellipse 6px 11px at 91% 61%, rgba(235,252,255,.22) 0 9%, rgba(130,205,230,.1) 20%, transparent 58%),
    radial-gradient(ellipse 4px 8px at 63% 76%, rgba(235,252,255,.24) 0 8%, rgba(130,205,230,.1) 20%, transparent 58%);
  filter:blur(.15px) drop-shadow(0 1px 2px rgba(5,45,70,.34));
  transform:translateY(calc(var(--rush) * 5px)) scaleY(calc(1 + var(--rush) * .2));
}
#fallFx {
  --fall:0; opacity:var(--fall);
  background:
    repeating-conic-gradient(from 0deg at 50% 48%, transparent 0 4.2deg, rgba(225,247,255,.09) 4.5deg 4.7deg, transparent 5deg 9deg),
    radial-gradient(circle at 50% 48%, transparent 0 24%, rgba(170,225,250,.08) 61%, rgba(220,246,255,.2) 100%);
  mask-image:radial-gradient(circle, transparent 0 19%, #000 48%, #000 100%);
  filter:blur(calc(var(--fall) * 1.4px));
}

/* 加速時だけ外周を引き伸ばす軽量な疑似モーションブラー。中央は常に鮮明。 */
#speedRush {
  --rush:0; position:fixed; inset:-8%; z-index:2; overflow:hidden;
  pointer-events:none; opacity:calc(var(--rush) * .88); mix-blend-mode:screen;
  contain:strict; will-change:opacity;
  mask-image:radial-gradient(ellipse at 50% 50%, transparent 0 25%, rgba(0,0,0,.18) 37%, #000 68%);
}
#speedRush::before,
#speedRush::after,
#speedRush .speed-streaks { content:""; position:absolute; inset:-14%; will-change:transform,opacity; }
#speedRush .speed-streaks {
  opacity:calc(.2 + var(--rush) * .8);
  background:
    repeating-conic-gradient(from 1deg at 50% 50%,
      transparent 0 2.8deg, rgba(205,244,255,.04) 3deg,
      rgba(108,215,255,.2) 3.18deg, transparent 3.55deg 7.4deg),
    repeating-conic-gradient(from 4.1deg at 50% 50%,
      transparent 0 5.7deg, rgba(235,252,255,.12) 5.9deg,
      transparent 6.2deg 12.8deg);
  filter:blur(calc(.6px + var(--rush) * 1.5px));
  transform:scale(calc(1 + var(--rush) * .16));
}
#speedRush::before {
  background:radial-gradient(ellipse at 49.5% 50%, transparent 27%, rgba(51,201,255,.03) 49%, rgba(55,207,255,.2) 100%);
  transform:translateX(calc(var(--rush) * -3px)) scale(calc(1 + var(--rush) * .09));
  filter:blur(calc(var(--rush) * 2px));
}
#speedRush::after {
  background:radial-gradient(ellipse at 50.5% 50%, transparent 31%, rgba(255,155,116,.02) 58%, rgba(255,137,104,.12) 100%);
  transform:translateX(calc(var(--rush) * 3px)) scale(calc(1 + var(--rush) * .11));
  filter:blur(calc(var(--rush) * 2.4px));
}

/* ---- LAST GRIP: 世界が絞られる短い回復チャンス ---- */
#lastGripFx {
  --grip:0; position:fixed; inset:0; z-index:3; overflow:hidden; pointer-events:none;
  opacity:var(--grip);
  background:
    linear-gradient(90deg,rgba(255,126,79,.16),transparent 16% 84%,rgba(255,126,79,.16)),
    radial-gradient(ellipse at 50% 47%,transparent 0 32%,rgba(5,21,35,.18) 54%,rgba(1,7,16,.76) 100%);
  box-shadow:inset 0 0 90px rgba(72,205,255,.12);
}
#lastGripFx::before {
  content:""; position:absolute; inset:-6%; opacity:.52;
  background:repeating-conic-gradient(from 0deg at 50% 48%,transparent 0 7deg,rgba(183,235,255,.045) 7.15deg 7.35deg,transparent 7.5deg 14deg);
  mask-image:radial-gradient(ellipse at center,transparent 0 31%,#000 60%);
}

/* PRACTICE専用の薄い走査膜。コースの視認性を優先し、中央はほぼ透明に保つ。 */
#simulationFx {
  position:fixed; inset:0; z-index:2; overflow:hidden; pointer-events:none;
  opacity:0; transition:opacity .28s ease; mix-blend-mode:screen;
  background:
    repeating-linear-gradient(0deg,transparent 0 5px,rgba(73,218,255,.022) 6px),
    radial-gradient(ellipse at center,transparent 36%,rgba(23,183,224,.06) 76%,rgba(3,43,64,.18));
}
body.practice-simulation #simulationFx { opacity:.72; }
#simulationFx::after {
  content:""; position:absolute; left:-8%; right:-8%; top:-4%; height:2px; opacity:0;
  background:linear-gradient(90deg,transparent,#58dcff 24%,#e5fbff 50%,#58dcff 76%,transparent);
  box-shadow:0 0 22px 4px rgba(54,207,247,.48);
}
body.practice-simulation #simulationFx::after { animation:simulationBoot .86s cubic-bezier(.18,.68,.22,1) .12s both; }
@keyframes simulationBoot {
  0% { top:-4%; opacity:0; }
  14% { opacity:.92; }
  82% { opacity:.62; }
  100% { top:104%; opacity:0; }
}
/* ============ HUD ============ */
#hud { position:fixed; inset:0; z-index:4; pointer-events:none; display:none; }
#hud.on { display:block; }

.hud-top {
  position:absolute; top:calc(10px + env(safe-area-inset-top));
  left:0; right:0; display:flex; justify-content:space-between; padding:0 18px;
}
.stat { color:#eafcff; text-shadow:0 1px 8px rgba(0,30,70,.65); }
.stat .lbl { font-size:9px; font-weight:600; letter-spacing:.34em; opacity:.72; }
.stat .val {
  font-family:'Orbitron',monospace; font-size:25px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.1;
}
.stat .unit { font-family:'Jost'; font-size:11px; font-weight:400; opacity:.75; margin-left:3px; letter-spacing:.05em; }
#spd.boost { color:#8ef2ff; text-shadow:0 0 16px rgba(90,225,255,.9), 0 1px 8px rgba(0,30,70,.65); }
.stat.right { text-align:right; }

.mult {
  display:inline-block; margin-top:3px; padding:1px 10px;
  font-family:'Orbitron',monospace; font-size:12px; font-weight:700;
  color:#9fefff; border:1px solid rgba(120,225,255,.4); border-radius:20px;
  background:rgba(10,45,80,.35); backdrop-filter:blur(3px);
  transition:color .25s, border-color .25s, box-shadow .25s;
}
.mult.h1 { color:#c8ff9f; border-color:rgba(170,255,140,.5); }
.mult.h2 { color:#ffe27a; border-color:rgba(255,220,110,.55); box-shadow:0 0 12px rgba(255,210,90,.25); }
.mult.h3 { color:#ffab6e; border-color:rgba(255,160,90,.6); box-shadow:0 0 16px rgba(255,150,70,.35); }
.mult.h4 { color:#ff7ab8; border-color:rgba(255,120,190,.65); box-shadow:0 0 20px rgba(255,110,180,.45); }
.mult.practice-hidden { display:none; }

#info {
  position:absolute; top:calc(14px + env(safe-area-inset-top));
  left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.14em; color:#cfeeff; opacity:.55;
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
#info i { font-style:normal; font-size:9px; opacity:.8; margin-left:2px; }
#info em { font-style:normal; margin:0 8px; opacity:.5; }

#practiceMode {
  position:absolute; top:calc(45px + env(safe-area-inset-top)); left:50%;
  display:flex; align-items:center; gap:10px; min-width:min(76vw,340px);
  transform:translateX(-50%); opacity:0; color:#80e8ff;
  font-family:'Orbitron',monospace; font-size:8px; font-weight:600;
  letter-spacing:.29em; text-indent:.29em; text-shadow:0 0 12px rgba(65,216,255,.62);
  transition:opacity .28s ease; white-space:nowrap;
}
#practiceMode i { flex:1; height:1px; opacity:.42; background:linear-gradient(90deg,transparent,#66dcfa); }
#practiceMode i:last-child { background:linear-gradient(90deg,#66dcfa,transparent); }
body.practice-simulation #hud.on #practiceMode { opacity:.78; }

/* ---- unobtrusive pause control ---- */
.pause-btn {
  position:absolute; top:calc(88px + env(safe-area-inset-top)); right:18px;
  width:38px; height:38px; display:grid; place-items:center; pointer-events:auto;
  border:1px solid rgba(174,229,248,.24); border-radius:50%; cursor:pointer;
  color:#d8f5ff; background:rgba(5,24,40,.28); box-shadow:0 5px 18px rgba(0,18,36,.14);
  backdrop-filter:blur(7px); opacity:.64; transition:opacity .18s,background .18s,border-color .18s,transform .12s;
}
.pause-btn span,
.pause-btn span::after {
  display:block; width:3px; height:11px; border-radius:2px; background:currentColor;
  box-shadow:0 0 8px rgba(135,225,255,.35);
}
.pause-btn span { position:relative; transform:translateX(-3px); }
.pause-btn span::after { content:""; position:absolute; left:6px; top:0; }
.pause-btn:hover, .pause-btn:focus-visible { opacity:1; background:rgba(10,48,72,.58); border-color:rgba(156,229,255,.62); outline:none; }
.pause-btn:focus-visible { box-shadow:0 0 0 3px rgba(105,215,255,.2); }
.pause-btn:active { transform:scale(.92); }

/* ---- score popups ---- */
#pops { position:absolute; top:31%; left:0; right:0; text-align:center; }
.pop {
  position:absolute; left:0; right:0;
  font-family:'Orbitron',monospace; font-size:17px; font-weight:700; letter-spacing:.1em;
  color:#c9f6ff; text-shadow:0 0 14px rgba(90,210,255,.75), 0 2px 8px rgba(0,20,50,.7);
  animation:popRise 1.15s cubic-bezier(.2,.7,.3,1) both; pointer-events:none;
}
.pop.gold { color:#ffe89a; text-shadow:0 0 16px rgba(255,200,80,.8), 0 2px 8px rgba(40,20,0,.6); }
.pop.hot  { color:#ffb8d8; text-shadow:0 0 16px rgba(255,120,190,.85), 0 2px 8px rgba(50,0,25,.6); }
@keyframes popRise {
  0%   { opacity:0; transform:translateY(14px) scale(.7); }
  14%  { opacity:1; transform:translateY(0) scale(1.08); }
  24%  { transform:translateY(0) scale(1); }
  75%  { opacity:1; }
  100% { opacity:0; transform:translateY(-34px) scale(.96); }
}

/* ---- edge lean glows ---- */
.eglow { position:fixed; top:0; bottom:0; width:16vw; opacity:0; transition:opacity .18s; }
.eglow.l { left:0;  background:linear-gradient(90deg,  rgba(70,215,255,.34), transparent); }
.eglow.r { right:0; background:linear-gradient(270deg, rgba(70,215,255,.34), transparent); }
.eglow.danger.l { background:linear-gradient(90deg,  rgba(255,120,60,.4), transparent); }
.eglow.danger.r { background:linear-gradient(270deg, rgba(255,120,60,.4), transparent); }

/* ============ full-screen fx ============ */
#vig {
  position:fixed; inset:0; pointer-events:none; opacity:0; transition:opacity .15s;
  background:radial-gradient(ellipse at center, transparent 52%, rgba(255,60,30,.42) 100%);
}
#flash {
  position:fixed; inset:0; pointer-events:none; opacity:0; background:#eaf8ff;
}
#flash.go { animation:flashOut .5s ease-out both; }
@keyframes flashOut { 0% { opacity:.95; } 100% { opacity:0; } }

#fallAlt {
  position:fixed; left:0; right:0; bottom:18%; text-align:center;
  pointer-events:none; display:none;
  font-family:'Orbitron',monospace; font-size:clamp(40px,11vw,72px); font-weight:900;
  color:#ffd9c9; text-shadow:0 0 26px rgba(255,90,40,.75), 0 3px 12px rgba(0,0,0,.5);
  font-variant-numeric:tabular-nums; letter-spacing:.04em;
}
#fallAlt.on { display:block; }
#fallAlt b { display:block; margin-bottom:4px; font-family:'Jost',sans-serif; font-size:10px; letter-spacing:.42em; color:#d7f3ff; opacity:.72; }
#fallAlt small { font-size:.38em; font-weight:700; opacity:.8; margin-left:4px; }

#ejectOv {
  position:fixed; inset:0; display:flex; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; z-index:5;
}
#ejectOv.show { opacity:1; }
#ejectOv .t {
  font-family:'Anton',sans-serif; font-size:clamp(44px,12vw,84px); font-weight:400;
  letter-spacing:.05em; color:#fff; transform:rotate(-5deg) skewX(-6deg);
  text-shadow:0 0 34px rgba(255,80,30,.9), 0 5px 16px rgba(0,0,0,.5);
}
#ejectOv.show .t { animation:ejIn .45s cubic-bezier(.2,1.6,.4,1) both; }
@keyframes ejIn {
  from { opacity:0; transform:scale(1.8) rotate(-5deg) skewX(-6deg); }
  to   { opacity:1; transform:scale(1)   rotate(-5deg) skewX(-6deg); }
}

/* ============ overlays ============ */
.ov {
  position:fixed; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; color:#eafcff;
  background:
    linear-gradient(180deg, rgba(3,18,31,.2), rgba(3,14,27,.82)),
    radial-gradient(ellipse at 50% 24%, rgba(20,105,150,.28), rgba(4,14,30,.76));
  backdrop-filter:blur(7px) saturate(1.12); z-index:10; padding:24px;
}
.ov.hide { display:none; }
body.is-loading.title-underlay #title { visibility:visible; opacity:1; }
body.is-loading.title-underlay #title > * { visibility:hidden; }

.title-kicker { display:flex; align-items:center; gap:10px; margin-bottom:13px; font-size:8px; font-weight:600; letter-spacing:.36em; color:#a8eaff; text-indent:.36em; }
.title-kicker span { width:28px; height:1px; background:linear-gradient(90deg,transparent,#77ddff); }
.title-kicker span:last-child { background:linear-gradient(90deg,#77ddff,transparent); }

.title-logo {
  position:relative; isolation:isolate; width:clamp(250px,54vw,560px); margin:0;
  line-height:0; transform:skewX(-4deg);
}
.title-logo img {
  display:block; width:100%; height:auto;
}
.title-logo::after {
  content:""; position:absolute; z-index:2; left:-3%; right:-3%; top:0; height:2px;
  pointer-events:none; opacity:0; background:linear-gradient(90deg,transparent,#dffaff 22%,#5edcff 76%,transparent);
  box-shadow:0 0 13px rgba(93,222,255,.95);
}
body.app-ready #title:not(.hide):not(.launching) .title-logo img { animation:logoReveal 1.02s cubic-bezier(.16,.78,.2,1) both; }
body.app-ready #title:not(.hide):not(.launching) .title-logo::after { animation:logoScan .82s cubic-bezier(.2,.68,.28,1) .12s both; }
@keyframes logoReveal {
  0% { opacity:0; clip-path:inset(0 100% 0 0); transform:translate3d(0,15px,0) scaleX(.72); }
  46% { opacity:1; clip-path:inset(0 0 0 0); transform:translate3d(-5px,0,0) scaleX(1.025); }
  70% { transform:translate3d(2px,0,0) scaleX(.995); }
  100% { opacity:1; clip-path:inset(0 0 0 0); transform:translate3d(0,0,0) scaleX(1); }
}
@keyframes logoScan {
  0% { top:0; opacity:0; }
  18% { opacity:1; }
  78% { top:100%; opacity:.88; }
  100% { top:100%; opacity:0; }
}
#title.launching { pointer-events:none; animation:titleLaunchOut .38s cubic-bezier(.55,.02,.85,.32) both; }
#title.launching .title-logo { animation:titleLogoOut .38s cubic-bezier(.3,.04,.8,.26) both; }
#title.launching .title-logo img,
#title.launching .title-logo::after { animation:none; }
@keyframes titleLaunchOut {
  0% { opacity:1; }
  55% { opacity:.72; }
  100% { opacity:0; }
}
@keyframes titleLogoOut {
  0% { opacity:1; transform:translate3d(0,0,0) skewX(-4deg) scaleX(1); }
  100% { opacity:0; transform:translate3d(34vw,-6px,0) skewX(-11deg) scaleX(1.24); }
}
.ttl-sub {
  margin-top:12px; font-size:13px; font-weight:600; letter-spacing:.52em;
  color:#8fdcff; text-indent:.52em;
}
.ttl-ja { margin-top:5px; font-size:11px; letter-spacing:.4em; color:#9cc4e0; opacity:.85; text-indent:.4em; }
.desc { margin-top:24px; font-size:13px; font-weight:400; line-height:2; color:#d8f2ff; opacity:.92; max-width:360px; letter-spacing:.03em; }
.desc b { color:#ffe98a; font-weight:600; }
.feature-line { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:16px; font-family:'Orbitron',monospace; font-size:7px; letter-spacing:.17em; color:rgba(195,236,251,.64); }
.feature-line i { width:3px; height:3px; border-radius:50%; background:#65d9ff; box-shadow:0 0 7px rgba(90,220,255,.8); }

.modes { margin-top:28px; display:flex; flex-direction:column; gap:12px; align-items:center; }
.btn {
  pointer-events:auto; padding:15px 54px; min-width:240px;
  font-family:'Jost',sans-serif; font-size:16px; font-weight:700; letter-spacing:.3em; text-indent:.3em;
  color:#04263f; background:linear-gradient(180deg,#d9f7ff,#6fd2ff);
  border:none; border-radius:40px; cursor:pointer;
  box-shadow:0 6px 24px rgba(70,190,255,.5), inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .12s;
}
.btn:active { transform:scale(.95); }
.btn.ghost {
  background:rgba(12,45,80,.5); color:#bfeaff;
  border:1px solid rgba(130,220,255,.45);
  box-shadow:0 4px 18px rgba(20,80,140,.35);
}
.btn.small { padding:10px 34px; min-width:0; font-size:12px; }
.btn .sub { display:block; font-size:10px; font-weight:500; letter-spacing:.18em; opacity:.7; margin-top:2px; }
.practice-btn { padding-top:11px; padding-bottom:11px; font-size:13px; }

.sound-toggle {
  margin-top:14px; padding:6px 12px; display:inline-flex; align-items:center; gap:7px;
  pointer-events:auto; border:1px solid rgba(132,213,242,.22); border-radius:999px; cursor:pointer;
  color:#9fcce0; background:rgba(5,27,45,.32); backdrop-filter:blur(5px);
  font-family:'Jost',sans-serif; font-size:8px; font-weight:600; letter-spacing:.2em;
  transition:color .18s,border-color .18s,background .18s,opacity .18s; opacity:.82;
}
.sound-toggle b { min-width:22px; color:#81e4ff; font:inherit; letter-spacing:.12em; text-align:left; }
.sound-bars { height:11px; display:flex; align-items:center; gap:2px; }
.sound-bars i { width:2px; border-radius:2px; background:#8ce7ff; box-shadow:0 0 5px rgba(91,217,255,.42); transition:height .18s,opacity .18s; }
.sound-bars i:nth-child(1) { height:5px; }
.sound-bars i:nth-child(2) { height:10px; }
.sound-bars i:nth-child(3) { height:7px; }
.sound-toggle.off { color:#6f94a6; border-color:rgba(132,190,212,.14); background:rgba(5,22,36,.24); opacity:.66; }
.sound-toggle.off b { color:#7795a3; }
.sound-toggle.off .sound-bars i { height:2px; opacity:.5; box-shadow:none; }
.sound-toggle:hover, .sound-toggle:focus-visible { opacity:1; color:#e2f8ff; border-color:rgba(137,224,251,.58); background:rgba(8,43,66,.5); outline:none; }
.sound-toggle:focus-visible { box-shadow:0 0 0 3px rgba(105,215,255,.14); }
.sound-toggle + .ctrl-hint { margin-top:16px; }

.ctrl-hint { margin-top:24px; font-size:10px; font-weight:500; color:#9cc9e8; letter-spacing:.2em; line-height:1.9; }
.about-link {
  margin-top:14px; padding:5px 2px; pointer-events:auto;
  color:#bcecff; font-size:9px; font-weight:600; letter-spacing:.28em;
  text-decoration:none; border-bottom:1px solid rgba(130,220,255,.35);
  transition:color .2s, border-color .2s, letter-spacing .2s;
}
.about-link:hover, .about-link:focus-visible { color:#fff; border-color:#9ce8ff; letter-spacing:.32em; outline:none; }
.about-link span { display:inline-block; margin-left:7px; transition:transform .2s; }
.about-link:hover span, .about-link:focus-visible span { transform:translateX(4px); }
.foot { position:absolute; bottom:calc(16px + env(safe-area-inset-bottom)); font-size:10px; color:#6a97b8; letter-spacing:.12em; }
.footer-credit { display:flex; align-items:center; justify-content:center; gap:6px; max-width:calc(100% - 30px); white-space:nowrap; }
.footer-credit a { pointer-events:auto; color:#85b9d3; text-decoration:none; border-bottom:1px solid rgba(125,190,220,.24); transition:color .2s,border-color .2s; }
.footer-credit a:hover, .footer-credit a:focus-visible { color:#ccefff; border-color:rgba(160,225,250,.66); outline:none; }
.footer-credit i { margin:0 4px; color:#466f86; font-style:normal; }

/* ---- game over ---- */
#gameover {
  background:
    radial-gradient(ellipse at 50% 43%, rgba(5,25,43,.56) 0, rgba(4,18,32,.24) 43%, rgba(3,12,24,.62) 100%),
    linear-gradient(180deg, rgba(4,14,25,.12), rgba(4,14,25,.35));
  backdrop-filter:blur(1.2px) saturate(1.12);
}
#goTtl {
  font-family:'Anton',sans-serif; font-weight:400; font-size:clamp(36px,9.5vw,58px);
  letter-spacing:.06em; color:#ffd9c4; transform:skewX(-4deg);
  text-shadow:0 0 26px rgba(255,110,60,.7);
}
#gameover:not(.hide) #goTtl { animation:resultSlam .48s cubic-bezier(.18,.9,.25,1.24) both; }
#gameover:not(.hide) .go-mode,
#gameover:not(.hide) .go-score,
#gameover:not(.hide) .go-stats,
#gameover:not(.hide) #best,
#gameover:not(.hide) .modes { animation:resultLift .42s ease-out .12s both; }
@keyframes resultSlam {
  0% { opacity:0; transform:translateY(-22px) scale(1.35) skewX(-8deg); filter:blur(5px); }
  64% { opacity:1; transform:translateY(2px) scale(.97) skewX(-4deg); filter:blur(0); }
  100% { opacity:1; transform:translateY(0) scale(1) skewX(-4deg); }
}
@keyframes resultLift {
  from { opacity:0; transform:translateY(12px); }
  to { opacity:1; transform:translateY(0); }
}
.go-mode { margin-top:8px; font-size:10px; font-weight:600; letter-spacing:.4em; text-indent:.4em; color:#8fbcdc; }
.go-score { margin-top:20px; }
.go-score .l { font-size:10px; font-weight:600; letter-spacing:.4em; color:#9cc9e8; }
.go-score .v {
  font-family:'Orbitron',monospace; font-size:clamp(38px,10vw,56px); font-weight:900;
  color:#fff; text-shadow:0 0 22px rgba(120,220,255,.55);
  font-variant-numeric:tabular-nums;
}
.go-stats { margin-top:16px; display:flex; gap:30px; }
.go-stats .s .l { font-size:9px; font-weight:600; letter-spacing:.24em; color:#9cc9e8; }
.go-stats .s .v {
  font-family:'Orbitron',monospace; font-size:22px; font-weight:700;
  font-variant-numeric:tabular-nums; color:#e8f8ff;
}
.go-stats .s .v small { font-size:11px; font-weight:400; opacity:.7; font-family:'Jost'; }
#best { margin-top:16px; font-size:12px; font-weight:500; color:#8ecfff; letter-spacing:.18em; min-height:1.2em; }
#best.newbest { color:#ffe27a; text-shadow:0 0 14px rgba(255,210,90,.5); }

/* ---- pause ---- */
#pause {
  background:
    radial-gradient(ellipse at 50% 42%,rgba(18,78,108,.26),transparent 48%),
    rgba(3,10,22,.76);
  backdrop-filter:blur(5px) saturate(.86);
}
.pause-kicker { margin-bottom:10px; font-size:8px; font-weight:600; letter-spacing:.42em; text-indent:.42em; color:#79d9f7; }
.p-t { font-family:'Anton',sans-serif; font-size:clamp(48px,12vw,76px); line-height:1; letter-spacing:.1em; text-indent:.1em; color:#e5f9ff; text-shadow:0 0 28px rgba(90,210,255,.35); }
.p-s { margin-top:17px; font-size:9px; font-weight:600; letter-spacing:.32em; text-indent:.32em; color:#7fb8dc; }
.pause-actions { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:32px; }
.pause-actions .btn { min-width:260px; }
.pause-actions .btn.small { padding:11px 30px; font-size:11px; }

.load-error { position:fixed; inset:0; z-index:60; display:grid; place-items:center; padding:24px; background:#061522; color:#d9f5ff; text-align:center; }

@media (max-height:700px) {
  .title-kicker { margin-bottom:8px; }
  .ttl-sub { margin-top:8px; }
  .feature-line { margin-top:10px; }
  .modes { margin-top:18px; }
  #title .modes { gap:8px; }
  #title .btn { padding-top:11px; padding-bottom:11px; }
  #title .practice-btn { padding-top:8px; padding-bottom:8px; }
  .sound-toggle { margin-top:9px; }
  .sound-toggle + .ctrl-hint { margin-top:11px; }
  .pause-btn { top:calc(82px + env(safe-area-inset-top)); }
  #practiceMode { top:calc(42px + env(safe-area-inset-top)); }
}

@media (prefers-reduced-motion:reduce) {
  .pop, #ejectOv.show .t, #flash.go { animation-duration:.01ms !important; }
  .boot-loader::before, .boot-loader::after, #title.launching, #title.launching .title-logo,
  #title:not(.hide) .title-logo img, #title:not(.hide) .title-logo::after { animation:none; }
  .title-logo::after { display:none; }
  #fallFx, #speedRush { display:none; }
  #simulationFx::after { animation:none !important; }
}