:root {
  --app-height: 100dvh;
  --app-width: 100vw;
  --vh: 1vh;
  --platform-safe-top: 0px;
  --platform-safe-right: 0px;
  --platform-safe-bottom: 0px;
  --platform-safe-left: 0px;
  --browser-safe-bottom: 0px;
  --bg: #02050c;
  --bg2: #06111f;
  --panel: rgba(7, 18, 33, .88);
  --panel-strong: rgba(7, 17, 31, .96);
  --text: #f7fbff;
  --muted: #8fa7ba;
  --line: rgba(117, 236, 255, .18);
  --line-strong: rgba(117, 236, 255, .34);
  --cyan: #73ecff;
  --blue: #7aa7ff;
  --violet: #9c7dff;
  --red: #ff5a73;
  --green: #8dffc9;
  --gold: #ffe28a;
  --shadow: 0 24px 72px rgba(0, 0, 0, .44);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; background: var(--bg); color: var(--text); }
html { overflow: hidden; overscroll-behavior: none; }
body {
  position: fixed;
  inset: 0;
  min-width: 280px;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
  background:
    radial-gradient(circle at 50% 10%, rgba(117,236,255,.12), transparent 30%),
    radial-gradient(circle at 50% 100%, rgba(156,125,255,.12), transparent 34%),
    linear-gradient(180deg, #06111e 0%, #040912 54%, #02050a 100%);
}
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .35;
  background:
    linear-gradient(90deg, transparent 49.85%, rgba(117,236,255,.024) 50%, transparent 50.15%),
    linear-gradient(0deg, transparent 49.85%, rgba(117,236,255,.02) 50%, transparent 50.15%);
}
img { display: block; max-width: 100%; }
button, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

.app-root {
  position: fixed;
  z-index: 1;
  inset: 0 auto auto 0;
  width: var(--app-width);
  height: var(--app-height);
  max-width: 100vw;
  max-height: var(--app-height);
  overflow: hidden;
}

.boot-screen,
.emergency-start {
  width: 100%;
  height: 100%;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  text-align: center;
}
.boot-orbit {
  width: 90px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid rgba(117,236,255,.14);
  display: grid;
  place-items: center;
  animation: spin 4.8s linear infinite;
}
.boot-orbit span { width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 20px var(--cyan); }
.boot-wordmark,
.emergency-mark { font-weight: 950; letter-spacing: .18em; }
.boot-wordmark b,
.emergency-mark b { color: var(--cyan); }
.boot-line { width: 170px; height: 4px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; }
.boot-line i { display: block; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--cyan), transparent); animation: load 1s ease-in-out infinite; }
.boot-screen p,
.emergency-start p { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.emergency-start h1 { margin: 0; font-size: clamp(42px, 12vw, 72px); }
.emergency-start button { min-height: 46px; padding: 0 18px; border: 0; border-radius: 14px; background: var(--cyan); color: #031018; font-weight: 900; }

.game-shell {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
  padding:
    max(8px, env(safe-area-inset-top), var(--platform-safe-top))
    max(8px, env(safe-area-inset-right), var(--platform-safe-right))
    max(8px, env(safe-area-inset-bottom), var(--platform-safe-bottom))
    max(8px, env(safe-area-inset-left), var(--platform-safe-left));
  overflow: hidden;
  margin: 0 auto;
}

.topbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.brand {
  min-height: 42px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0 3px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  font-weight: 1000;
  letter-spacing: .15em;
  font-size: clamp(13px, 3.6vw, 17px);
}
.brand em { color: var(--cyan); font-style: normal; }
.brand-signal { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.top-actions { display: flex; align-items: center; gap: 7px; }
.platform-chip {
  height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}
.icon-btn,
.pause-btn {
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 13px;
  background: rgba(255,255,255,.04);
  color: var(--text);
  display: grid;
  place-items: center;
  cursor: pointer;
}

.view { min-width: 0; min-height: 0; overflow: auto; scrollbar-width: none; }
.view::-webkit-scrollbar { display: none; }
.screen-foot { display: flex; align-items: center; justify-content: center; }

.btn {
  border: 0;
  min-width: 0;
  min-height: 50px;
  border-radius: 16px;
  padding: 0 15px;
  color: var(--text);
  font-weight: 950;
  letter-spacing: .045em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  line-height: 1.15;
  white-space: normal;
  transition: transform .12s ease, opacity .2s ease, filter .2s ease;
}
.btn:active, .tile:active, .icon-btn:active, .pause-btn:active { transform: scale(.985); }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: #031018; background: linear-gradient(96deg, #a1f5ff 0%, #5fe4f7 47%, #87bfff 100%); box-shadow: 0 10px 28px rgba(64,218,243,.22), inset 0 -1px rgba(0,0,0,.14); }
.btn-secondary { border: 1px solid var(--line); background: linear-gradient(180deg, rgba(15,35,57,.96), rgba(7,18,31,.96)); }
.btn-ghost { min-height: 44px; border: 1px solid rgba(255,255,255,.07); background: rgba(255,255,255,.025); color: #a6bac8; }
.btn-danger { border: 1px solid rgba(255,90,115,.24); background: rgba(255,90,115,.10); color: #ff9cac; }

.status-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 6px; }
.stat-mini {
  min-width: 0;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,.065);
  border-radius: 13px;
  background: rgba(255,255,255,.028);
  display: grid;
  place-content: center;
  text-align: center;
  padding: 5px 6px;
}
.stat-mini b { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: clamp(12px, 3.6vw, 18px); line-height: 1.05; }
.stat-mini span { margin-top: 3px; color: var(--muted); font-size: 6.5px; letter-spacing: .12em; }

.challenge-banner {
  min-height: 32px;
  border: 1px solid rgba(255,226,138,.22);
  background: rgba(255,226,138,.07);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 10px;
  color: var(--gold);
  font-size: 8px;
  letter-spacing: .1em;
}
.challenge-banner b { color: #fff; }

/* HOME — deliberately no scrolling on phones. */
.home-shell { max-width: 1220px; }
.home-shell .view { overflow: hidden; padding: 0; }
.home-view {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0,1fr);
  gap: 6px;
}
.home-view:not(:has(.challenge-banner)) { grid-template-rows: minmax(0,1fr); }
.home-layout {
  min-height: 0;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 6px;
}
.hero {
  min-height: 0;
  height: 100%;
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0,1fr) auto;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: clamp(22px, 5.5vw, 34px);
  background:
    radial-gradient(circle at 50% 44%, rgba(117,236,255,.15), transparent 34%),
    radial-gradient(circle at 50% 92%, rgba(156,125,255,.10), transparent 38%),
    linear-gradient(180deg, rgba(12,31,51,.92), rgba(5,12,23,.94));
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.04);
}
.hero-copy { position: relative; z-index: 3; padding: 12px 14px 0; text-align: center; }
.kicker { font-size: clamp(8px, 2.3vw, 10px); letter-spacing: .24em; text-transform: uppercase; color: var(--cyan); font-weight: 900; }
.hero h1 { margin: 6px 0 5px; font-size: clamp(32px, 9.3vw, 58px); line-height: .9; letter-spacing: -.06em; font-weight: 1000; }
.hero h1 span { background: linear-gradient(90deg, #fff 5%, var(--cyan) 70%, #9db9ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p { margin: 0 auto; max-width: 460px; color: #a5bbcc; font-size: clamp(9px, 2.75vw, 13px); line-height: 1.35; text-wrap: balance; }

.mascot-zone {
  position: relative;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: 2px 10px 8px;
  overflow: hidden;
}
.orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(117,236,255,.10); pointer-events: none; }
.orbit-a { width: min(60vw, 300px); aspect-ratio: 1; animation: orbitPulse 3.6s ease-in-out infinite; }
.orbit-b { width: min(76vw, 400px); aspect-ratio: 1; border-style: dashed; opacity: .34; animation: spin 18s linear infinite; }
.eye-beam { position: absolute; z-index: 1; width: min(70vw, 380px); height: 44%; border-radius: 50%; background: radial-gradient(ellipse, rgba(117,236,255,.15), rgba(117,236,255,.03) 44%, transparent 68%); filter: blur(8px); }
.portrait-stage {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.09), rgba(117,236,255,.03) 52%, rgba(3,8,16,.10) 70%, rgba(3,8,16,0) 71%),
    radial-gradient(circle at 50% 56%, rgba(117,236,255,.18), rgba(117,236,255,.07) 48%, rgba(117,236,255,0) 72%);
  border: 1px solid rgba(117,236,255,.12);
  box-shadow: inset 0 1px rgba(255,255,255,.04), 0 22px 38px rgba(0,0,0,.28), 0 0 38px rgba(117,236,255,.10);
}
.hero-portrait { width: min(64vw, 34vh, 300px); max-height: 94%; aspect-ratio: 1; }
.mascot { width: min(80%, 320px); max-height: 88%; height: auto; object-fit: contain; filter: drop-shadow(0 0 16px rgba(184,239,255,.24)) drop-shadow(0 22px 28px rgba(0,0,0,.38)); animation: breathe 3.2s ease-in-out infinite; }
.rule-pill {
  position: absolute;
  z-index: 5;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 18px);
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 999px;
  border: 1px solid rgba(117,236,255,.14);
  background: rgba(3,9,17,.80);
  padding: 0 10px;
  color: #b8cbd8;
  font-size: 7px;
  letter-spacing: .11em;
  font-weight: 800;
  white-space: nowrap;
}
.rule-pill i { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 9px var(--cyan); }

.hero-controls { position: relative; z-index: 4; padding: 5px 10px 10px; display: grid; gap: 5px; }
.play-btn { min-height: clamp(48px, 6.5vh, 58px); font-size: clamp(15px, 4.3vw, 20px); position: relative; overflow: hidden; }
.play-btn::after { content: ""; position: absolute; inset: 0 auto 0 -45%; width: 34%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.58), transparent); animation: shine 4.2s ease-in-out infinite; }
.play-pulse { width: 7px; height: 7px; border-radius: 50%; background: #041017; box-shadow: 0 0 0 0 rgba(3,16,23,.28); animation: buttonPulse 1.8s ease-out infinite; }
.play-note { text-align: center; font-size: 6.5px; color: #718a9c; letter-spacing: .13em; }

.home-rail { min-height: 0; }
.pressure-card { display: none; }
.pressure-top { display: flex; align-items: center; justify-content: space-between; color: var(--cyan); font-size: 9px; letter-spacing: .18em; }
.pressure-top i { width: 9px; height: 9px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); }
.pressure-card strong { margin-top: 10px; display: block; font-size: clamp(26px, 3.6vw, 40px); line-height: .9; letter-spacing: -.06em; }
.pressure-card p { margin: 9px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); grid-template-rows: repeat(2, minmax(0,1fr)); gap: 6px; }
.tile {
  position: relative;
  min-width: 0;
  height: clamp(48px, 7vh, 58px);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px;
  background: linear-gradient(145deg, rgba(13,31,51,.88), rgba(5,13,24,.90));
  color: var(--text);
  display: grid;
  grid-template-columns: 34px minmax(0,1fr) auto;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  overflow: hidden;
  text-align: left;
  cursor: pointer;
}
.tile::after { content: ""; position: absolute; width: 92px; height: 60px; right: -38px; bottom: -38px; border-radius: 50%; background: rgba(117,236,255,.07); filter: blur(8px); }
.tile-icon { width: 34px; height: 34px; border: 1px solid rgba(117,236,255,.17); border-radius: 11px; background: rgba(117,236,255,.05); display: grid; place-items: center; font-size: 14px; }
.tile strong { display: block; font-size: clamp(9px, 2.65vw, 11px); letter-spacing: .06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile small { display: block; margin-top: 1px; color: var(--muted); font-size: clamp(6.5px, 1.95vw, 8px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile > b { position: relative; z-index: 2; color: #7391a8; font-size: 16px; }
.tile > em { position: relative; z-index: 2; font-style: normal; border: 1px solid rgba(255,226,138,.22); color: var(--gold); border-radius: 5px; padding: 2px 4px; font-size: 6px; letter-spacing: .08em; }
.chaos-tile { border-color: rgba(156,125,255,.18); }

/* Active game */
.play-shell {
  width: 100%;
  max-width: none;
  display: block;
  padding:
    max(5px, env(safe-area-inset-top), var(--platform-safe-top))
    max(5px, env(safe-area-inset-right), var(--platform-safe-right))
    max(5px, env(safe-area-inset-bottom), var(--platform-safe-bottom))
    max(5px, env(safe-area-inset-left), var(--platform-safe-left));
}
.play-shell .view { width: 100%; height: 100%; overflow: hidden; }
.game-view { width: 100%; height: 100%; min-height: 0; }
.stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  border-radius: clamp(18px, 4vw, 28px);
  border: 1px solid rgba(117,236,255,.14);
  background:
    radial-gradient(circle at 50% 44%, rgba(117,236,255,.14), transparent 30%),
    radial-gradient(circle at 50% 80%, rgba(156,125,255,.11), transparent 35%),
    linear-gradient(180deg, #0a1a2b 0%, #050b15 58%, #02050a 100%);
  touch-action: none;
  cursor: crosshair;
  isolation: isolate;
}
.stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .42;
  background:
    repeating-linear-gradient(90deg, transparent 0 47px, rgba(117,236,255,.025) 47px 48px),
    repeating-linear-gradient(0deg, transparent 0 47px, rgba(117,236,255,.025) 47px 48px);
  transform: perspective(620px) rotateX(66deg) scale(1.75);
  transform-origin: center bottom;
}
.stage-atmosphere { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 100%, rgba(117,236,255,.08), transparent 52%); }
.hud { position: absolute; z-index: 30; top: max(8px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 14px), 780px); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) 42px; gap: 6px; pointer-events: none; }
.hud-box { min-width: 0; height: 42px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(3,9,17,.72); backdrop-filter: blur(14px); display: grid; place-content: center; text-align: center; }
.hud-box span { color: var(--muted); font-size: 6.5px; letter-spacing: .13em; }
.hud-box b { margin-top: 1px; font-size: clamp(12px, 3.8vw, 16px); }
.pause-btn { pointer-events: auto; width: 42px; height: 42px; background: rgba(3,9,17,.72); backdrop-filter: blur(14px); }
.mode-marker { position: absolute; z-index: 18; top: 59px; left: 50%; transform: translateX(-50%); color: rgba(191,219,232,.62); font-size: 7.5px; font-weight: 900; letter-spacing: .18em; white-space: nowrap; }
.stage-core { position: absolute; inset: clamp(78px, 12vh, 112px) 4% clamp(66px, 10vh, 102px); display: grid; place-items: center; pointer-events: none; }
.focus-halo { position: absolute; width: min(72vw, 540px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(117,236,255,.13), transparent 54%); filter: blur(8px); }
.stage-portrait { width: min(72vw, 70vh, 520px); min-height: min(72vw, 70vh, 520px); aspect-ratio: 1; display: grid; place-items: center; padding: 14px; }
.stage-mascot { width: min(84%, 420px); max-height: 90%; height: auto; object-fit: contain; filter: drop-shadow(0 0 18px rgba(184,239,255,.24)) drop-shadow(0 30px 30px rgba(0,0,0,.5)); transition: transform .12s ease, filter .16s ease; }
.stage.warmup-focus .stage-core { inset: clamp(82px, 13vh, 116px) 6% clamp(78px, 11vh, 112px); }
.stage.warmup-focus .stage-portrait { width: min(76vw, 72vh, 560px); min-height: min(76vw, 72vh, 560px); }
.stage.warmup-focus .stage-mascot { width: min(84%, 440px); max-height: 92%; transform: translateY(-2px); }
.stage.warmup-focus .clone { display: none !important; }
.stage.cue-live .stage-mascot { transform: scale(1.02); }
.stage.bait-flash .stage-mascot { transform: translateX(2px) scale(.996); filter: drop-shadow(-8px 0 0 rgba(255,90,115,.08)) drop-shadow(8px 0 0 rgba(117,236,255,.08)) drop-shadow(0 30px 30px rgba(0,0,0,.5)); }
.stage.hit-flash { box-shadow: inset 0 0 0 1px rgba(117,236,255,.44), 0 0 56px rgba(117,236,255,.16); }
.stage.fail-flash { box-shadow: inset 0 0 0 1px rgba(255,90,115,.42), 0 0 56px rgba(255,90,115,.16); }
.stage.grace-flash { box-shadow: inset 0 0 0 1px rgba(255,226,138,.42), 0 0 46px rgba(255,226,138,.12); }
.stage-feedback { position: absolute; z-index: 25; left: 50%; top: clamp(90px, 14vh, 122px); transform: translateX(-50%) scale(.96); min-height: 24px; padding: 0 12px; border-radius: 999px; background: rgba(3,9,17,.72); border: 1px solid rgba(255,255,255,.06); display: inline-flex; align-items: center; justify-content: center; text-align: center; color: rgba(200,220,232,.94); font-size: 8px; letter-spacing: .15em; font-weight: 900; opacity: 0; white-space: nowrap; transition: opacity .12s, transform .12s; }
.stage-feedback.show { opacity: 1; transform: translateX(-50%) scale(1); }
.stage-feedback.good { color: var(--cyan); }
.stage-feedback.bad { color: #ff7990; }
.stage-feedback.hint,
.stage-feedback.grace { color: var(--gold); }
.scenario-label { position: absolute; z-index: 25; top: 74px; left: 50%; transform: translateX(-50%); opacity: 0; border: 1px solid rgba(156,125,255,.18); background: rgba(8,9,19,.68); color: #c4b5ff; border-radius: 999px; padding: 5px 9px; font-size: 7px; letter-spacing: .15em; font-weight: 900; white-space: nowrap; transition: opacity .12s; }
.scenario-label.visible { opacity: 1; }
.tap-hint { position: absolute; z-index: 20; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); color: rgba(190,211,223,.50); font-size: clamp(7px, 2.2vw, 9px); letter-spacing: .15em; white-space: nowrap; }
.countdown { position: absolute; z-index: 60; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; background: rgba(2,5,10,.58); backdrop-filter: blur(5px); pointer-events: none; }
.countdown b { font-size: clamp(88px, 28vw, 180px); line-height: .8; font-weight: 1000; letter-spacing: -.08em; color: #fff; text-shadow: 0 0 44px rgba(117,236,255,.24); }
.countdown span { color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .22em; text-align: center; }
.clone { display: none; position: absolute; z-index: 2; width: min(30vw, 210px); max-height: 44%; object-fit: contain; opacity: .36; filter: blur(.2px) drop-shadow(0 10px 20px rgba(0,0,0,.4)); }
.clone.a { left: 2%; top: 28%; transform: rotate(-8deg); }
.clone.b { right: 2%; top: 37%; transform: rotate(7deg); }
.stage.scenario-clone .clone { display: block; }
.stage.scenario-blackout::after { content: ""; position: absolute; inset: 0; z-index: 15; pointer-events: none; background: #010203; opacity: .62; animation: blackout .58s ease both; }
.stage.scenario-glitch { animation: glitch .16s steps(2) 3; }
.stage.scenario-mirror .stage-core { transform: scaleX(-1); }
.stage.scenario-freeze .stage-mascot { filter: grayscale(1) contrast(1.15) drop-shadow(0 30px 30px rgba(0,0,0,.5)); }
.stage.scenario-red .stage-mascot { filter: hue-rotate(315deg) saturate(1.35) drop-shadow(0 0 25px rgba(255,55,95,.25)) drop-shadow(0 30px 30px rgba(0,0,0,.5)); }
.stage.scenario-eye::after { content: ""; position: absolute; z-index: 8; width: min(62vw, 480px); aspect-ratio: 1.75; top: 50%; left: 50%; transform: translate(-50%,-50%); border: 3px solid rgba(117,236,255,.7); border-radius: 50%; box-shadow: 0 0 55px rgba(117,236,255,.22); pointer-events: none; }

/* Shared screens */
.screen-card { width: min(100%, 760px); margin: 0 auto; border: 1px solid var(--line); background: linear-gradient(180deg, rgba(9,24,40,.92), rgba(4,12,22,.94)); border-radius: clamp(22px, 5vw, 30px); box-shadow: var(--shadow); padding: clamp(16px, 4vw, 26px); }
.section-title { margin: 6px 0 8px; font-size: clamp(30px, 8vw, 50px); letter-spacing: -.05em; line-height: .95; }
.section-sub { margin: 0 0 18px; max-width: 580px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.mode-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: rgba(117,236,255,.06); color: var(--cyan); font-size: 9px; font-weight: 900; letter-spacing: .12em; }
.feature-art { min-height: 210px; height: min(35vh, 330px); border: 1px solid rgba(255,255,255,.06); border-radius: 22px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(circle at 50% 46%, rgba(117,236,255,.11), transparent 34%), radial-gradient(circle at 50% 82%, rgba(156,125,255,.12), transparent 48%), linear-gradient(180deg, rgba(7,17,31,.92), rgba(6,12,20,.96)); padding: 14px; }
.feature-portrait { width: min(100%, 310px); aspect-ratio: 1; }
.feature-art img { max-width: 78%; max-height: 78%; object-fit: contain; filter: drop-shadow(0 22px 30px rgba(0,0,0,.42)); }
.chaos-head { transform: translateY(10px); }
.result-shell .view { display: grid; place-items: center; }
.result-view { width: 100%; }
.result-card { width: min(100%, 620px); }
.result-reason { text-align: center; color: #ff91a3; font-size: 9px; font-weight: 900; letter-spacing: .18em; }
.result-score { text-align: center; padding: 6px 0 14px; }
.result-score .label { color: var(--muted); font-size: 9px; letter-spacing: .18em; }
.result-score .score { font-size: clamp(62px, 19vw, 100px); line-height: .92; font-weight: 1000; letter-spacing: -.07em; background: linear-gradient(180deg, #fff 10%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grade { display: inline-flex; min-height: 28px; align-items: center; margin-top: 7px; padding: 0 11px; border: 1px solid rgba(117,236,255,.2); border-radius: 999px; background: rgba(117,236,255,.07); color: var(--cyan); font-size: 8px; font-weight: 900; letter-spacing: .14em; }
.result-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 10px; }
.result-actions { display: grid; gap: 8px; }
.action-pair { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; }
.ad-tag { display: inline-flex; align-items: center; min-height: 18px; padding: 0 5px; border: 1px solid rgba(255,226,138,.25); border-radius: 5px; color: var(--gold); font-size: 7px; letter-spacing: .08em; }
.notice { min-height: 16px; color: var(--muted); font-size: 9px; text-align: center; line-height: 1.45; }
.tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px 10px; padding: 2px; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 1px solid rgba(255,255,255,.07); border-radius: 11px; background: rgba(255,255,255,.025); color: #8fa7ba; font-size: 8px; font-weight: 900; letter-spacing: .08em; cursor: pointer; }
.tab.active { border-color: rgba(117,236,255,.26); background: rgba(117,236,255,.08); color: var(--cyan); }
.list { display: grid; gap: 7px; }
.leader-row { min-height: 58px; display: grid; grid-template-columns: 40px 42px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid rgba(255,255,255,.055); border-radius: 15px; background: rgba(255,255,255,.025); }
.leader-empty { padding: 24px 18px; border-radius: 20px; border: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); text-align: center; }
.leader-empty-mark { width: 56px; height: 56px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 50%; color: var(--cyan); font-size: 24px; background: rgba(115,236,255,.08); border: 1px solid rgba(115,236,255,.12); }
.leader-empty b { display: block; margin-bottom: 6px; }
.leader-empty p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.rank { color: var(--cyan); font-weight: 900; font-size: 11px; }
.avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: contain; background: rgba(255,255,255,.96); }
.player { min-width: 0; }
.player b, .player small { display: block; }
.player b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 11px; }
.player small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.platform-badge { display: inline-flex; margin-right: 5px; min-width: 22px; height: 15px; align-items: center; justify-content: center; border-radius: 4px; color: #fff; font-size: 6px; letter-spacing: .05em; }
.platform-badge.tg { background: #229ed9; }
.platform-badge.fb { background: #4267b2; }
.score-val { font-weight: 950; font-size: 12px; }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
.archive-item { min-width: 0; border: 1px solid rgba(255,255,255,.055); border-radius: 18px; background: rgba(255,255,255,.025); overflow: hidden; padding: 12px; }
.archive-art { height: 144px; display: grid; place-items: center; overflow: hidden; border-radius: 16px; }
.archive-portrait { width: 100%; height: 100%; border-radius: 18px; }
.archive-art img { width: min(74%, 126px); max-height: 122px; height: auto; object-fit: contain; filter: drop-shadow(0 0 14px rgba(184,239,255,.20)); }
.archive-art img.locked { filter: grayscale(1) brightness(.35) blur(1.6px); }
.archive-mask { position: absolute; inset: auto 12px 12px auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.10); color: var(--text); font-size: 14px; font-weight: 900; }
.archive-item b { display: block; margin-top: 9px; font-size: 10px; letter-spacing: .07em; }
.archive-item p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.45; }
.archive-back-wrap { margin-top: 20px; display: flex; justify-content: flex-start; }
.archive-back-space { padding-top: 10px; padding-bottom: max(8px, env(safe-area-inset-bottom), var(--platform-safe-bottom)); }
.page-back { min-width: 148px; }
.input { width: 100%; min-height: 50px; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.035); color: var(--text); padding: 0 14px; outline: none; user-select: text; -webkit-user-select: text; }
.input:focus { border-color: rgba(117,236,255,.34); box-shadow: 0 0 0 3px rgba(117,236,255,.06); }
.form-row { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 8px; }
.settings-list { display: grid; gap: 8px; }
.setting { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border: 1px solid rgba(255,255,255,.055); border-radius: 16px; background: rgba(255,255,255,.025); padding: 10px 12px; }
.setting b, .setting small { display: block; }
.setting b { font-size: 11px; }
.setting small { margin-top: 3px; color: var(--muted); font-size: 8px; }
.switch { flex: 0 0 auto; width: 46px; height: 26px; border: 1px solid rgba(255,255,255,.10); border-radius: 999px; background: rgba(255,255,255,.06); padding: 3px; cursor: pointer; }
.switch i { display: block; width: 18px; height: 18px; border-radius: 50%; background: #7f94a4; transition: transform .18s, background .18s; }
.switch.on i { transform: translateX(18px); background: var(--cyan); }

.modal { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: max(14px, env(safe-area-inset-top), var(--platform-safe-top)) max(14px, env(safe-area-inset-right), var(--platform-safe-right)) max(14px, env(safe-area-inset-bottom), var(--platform-safe-bottom)) max(14px, env(safe-area-inset-left), var(--platform-safe-left)); background: rgba(0,2,6,.72); backdrop-filter: blur(10px); }
.modal-card { width: min(100%, 460px); max-height: calc(var(--app-height) - var(--platform-safe-top) - var(--platform-safe-bottom) - 28px); overflow-y: auto; border: 1px solid var(--line); border-radius: 24px; background: var(--panel-strong); box-shadow: var(--shadow); padding: 22px; }
.modal-card h2 { margin: 6px 0; font-size: 28px; }
.modal-card p { margin: 0 0 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.motion-preview-card { width: min(100%, 562px); }
.motion-preview-frame { margin: 6px 0 12px; padding: 10px; border: 1px solid rgba(117,236,255,.12); border-radius: 20px; background: linear-gradient(180deg, rgba(10,24,39,.96), rgba(5,12,22,.98)); box-shadow: inset 0 1px rgba(255,255,255,.04); }
.luxury-frame { box-shadow: inset 0 1px rgba(255,255,255,.04), 0 14px 34px rgba(0,0,0,.35); }
.motion-preview-video,
.motion-preview-image { width: 100%; display: block; border-radius: 16px; background: #041018; }
.motion-preview-brand { margin: 0 0 14px; text-align: center; color: var(--cyan); font-size: 10px; font-weight: 900; letter-spacing: .34em; }
.modal-actions { display: grid; gap: 8px; }
.motion-actions { margin-top: 6px; }
.reentry b { font-size: clamp(92px, 28vw, 180px); line-height: 1; }

/* Short phones: compress, never scroll the home screen. */
@media (max-width: 759px) {
  .home-shell .view { overflow: hidden; }
  .home-layout { grid-template-rows: minmax(0,1fr) auto; }
}

@media (max-height: 700px) and (orientation: portrait) {
  .game-shell { gap: 5px; padding-top: max(6px, env(safe-area-inset-top), var(--platform-safe-top)); padding-bottom: max(6px, env(safe-area-inset-bottom), var(--platform-safe-bottom)); }
  .topbar { min-height: 38px; }
  .brand { min-height: 38px; font-size: clamp(12px, 3.4vw, 15px); }
  .icon-btn { width: 38px; height: 38px; }
  .platform-chip { height: 26px; }
  .home-view, .home-layout { gap: 5px; }
  .hero-copy { padding: 9px 11px 0; }
  .kicker { font-size: 7px; }
  .hero h1 { margin: 4px 0; font-size: clamp(30px, 8.7vw, 44px); }
  .hero p { font-size: clamp(8.5px, 2.55vw, 11px); line-height: 1.28; }
  .hero-portrait { width: min(61vw, 31vh, 245px); }
  .rule-pill { min-height: 24px; bottom: 4px; font-size: 6.5px; }
  .hero-controls { padding: 3px 8px 8px; gap: 4px; }
  .play-btn { min-height: 46px; font-size: clamp(14px, 4vw, 18px); }
  .play-note { font-size: 6px; }
  .stat-mini { min-height: 43px; }
  .tile { height: clamp(44px, 6.6vh, 52px); padding: 6px 8px; grid-template-columns: 30px minmax(0,1fr) auto; gap: 6px; }
  .tile-icon { width: 30px; height: 30px; border-radius: 10px; font-size: 13px; }
  .stage-core { inset: 70px 3% 54px; }
  .stage-portrait { width: min(74vw, 58vh, 410px); min-height: min(74vw, 58vh, 410px); }
  .stage.warmup-focus .stage-portrait { width: min(76vw, 60vh, 430px); min-height: min(76vw, 60vh, 430px); }
  .archive-art { height: 118px; }
}

@media (max-height: 610px) and (orientation: portrait) {
  .game-shell { gap: 4px; padding-top: max(5px, env(safe-area-inset-top), var(--platform-safe-top)); padding-bottom: max(5px, env(safe-area-inset-bottom), var(--platform-safe-bottom)); }
  .topbar { min-height: 34px; }
  .brand { min-height: 34px; font-size: 12px; }
  .icon-btn { width: 34px; height: 34px; border-radius: 11px; }
  .platform-chip { height: 24px; font-size: 7px; }
  .hero { border-radius: 20px; }
  .hero-copy { padding-top: 7px; }
  .kicker { font-size: 6.5px; }
  .hero h1 { font-size: clamp(28px, 8.3vw, 38px); margin: 3px 0; }
  .hero p { font-size: 8.5px; line-height: 1.2; }
  .hero-portrait { width: min(58vw, 30vh, 190px); }
  .rule-pill { min-height: 22px; padding: 0 8px; font-size: 6px; }
  .hero-controls { padding: 2px 7px 7px; gap: 3px; }
  .play-btn { min-height: 42px; font-size: 14px; }
  .play-note { display: none; }
  .stat-mini { min-height: 39px; border-radius: 11px; }
  .stat-mini b { font-size: 12px; }
  .stat-mini span { font-size: 5.8px; }
  .tile-grid { gap: 4px; }
  .tile { height: 42px; border-radius: 13px; padding: 5px 7px; grid-template-columns: 27px minmax(0,1fr); gap: 5px; }
  .tile-icon { width: 27px; height: 27px; border-radius: 9px; font-size: 12px; }
  .tile small, .tile > b, .tile > em { display: none; }
  .tile strong { font-size: 8px; }
}

@media (max-width: 340px) {
  .game-shell { padding-left: max(6px, env(safe-area-inset-left), var(--platform-safe-left)); padding-right: max(6px, env(safe-area-inset-right), var(--platform-safe-right)); }
  .brand { font-size: 11px; letter-spacing: .11em; }
  .platform-chip { display: none; }
  .hero h1 { font-size: clamp(28px, 9vw, 36px); }
  .hero p { font-size: 8.5px; }
  .hero-portrait { width: min(60vw, 31vh, 210px); }
  .tile { grid-template-columns: 28px minmax(0,1fr); }
  .tile-icon { width: 28px; height: 28px; }
  .tile > b, .tile > em { display: none; }
  .action-pair,
  .form-row { grid-template-columns: 1fr; }
  .archive-grid { grid-template-columns: 1fr; }
  .archive-back-wrap { margin-top: 16px; }
  .result-grid { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 5px; }
  .hud { grid-template-columns: repeat(3, minmax(0,1fr)) 38px; }
  .pause-btn { width: 38px; height: 38px; }
}

@media (max-width: 300px) {
  .tile small { display: none; }
  .rule-pill { max-width: calc(100% - 12px); white-space: normal; text-align: center; line-height: 1.1; padding: 4px 7px; }
  .tap-hint { max-width: calc(100% - 16px); white-space: normal; text-align: center; line-height: 1.3; }
  .result-grid { grid-template-columns: 1fr; }
}

/* Tablet / desktop */
@media (min-width: 760px) {
  .home-shell .view { overflow: hidden; }
  .home-layout { height: 100%; grid-template-columns: minmax(0, 1.75fr) minmax(280px, .8fr); grid-template-rows: minmax(0,1fr); align-items: stretch; gap: 10px; }
  .hero { min-height: 0; }
  .home-rail { min-height: 0; display: grid; grid-template-rows: auto minmax(0,1fr); gap: 8px; }
  .pressure-card { display: block; border: 1px solid rgba(255,255,255,.07); border-radius: 22px; padding: 16px; background: linear-gradient(160deg, rgba(15,31,51,.84), rgba(5,14,25,.86)); }
  .tile-grid { grid-template-columns: 1fr; grid-template-rows: repeat(4, minmax(0,1fr)); }
  .tile { height: auto; min-height: 54px; }
  .hero-copy { padding-top: 20px; }
  .hero-portrait { width: min(32vw, 38vh, 400px); }
  .archive-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .archive-art { height: 158px; }
}

@media (orientation: landscape) {
  .game-shell:not(.play-shell) { max-width: none; padding: 6px 10px; grid-template-rows: auto minmax(0,1fr); }
  .game-shell:not(.play-shell) .view { height: 100%; }
  .home-layout { grid-template-columns: minmax(0,1.45fr) minmax(250px,.75fr); grid-template-rows: minmax(0,1fr); }
  .home-rail { display: grid; grid-template-rows: minmax(0,1fr); }
  .pressure-card { display: none; }
  .tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); grid-template-rows: repeat(2,minmax(0,1fr)); height: 100%; }
  .tile { height: auto; min-height: 46px; }
  .hero-copy { padding-top: 10px; }
  .hero h1 { font-size: clamp(28px, 6vw, 48px); }
  .hero p { font-size: 10px; }
  .hero-portrait { width: min(28vw, 44vh, 260px); }
  .stage-core { inset: clamp(68px, 18vh, 100px) 3% clamp(40px, 10vh, 80px); }
  .stage-portrait { width: min(50vw, 68vh, 500px); min-height: min(50vw, 68vh, 500px); }
  .stage.warmup-focus .stage-portrait { width: min(52vw, 70vh, 520px); min-height: min(52vw, 70vh, 520px); }
}

.reduced-motion *,
.reduced-motion *::before,
.reduced-motion *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }

@keyframes breathe { 0%,100% { transform: translateY(-4px) scale(1); } 50% { transform: translateY(-8px) scale(1.015); } }
@keyframes orbitPulse { 0%,100% { transform: scale(1); opacity: .26; } 50% { transform: scale(1.05); opacity: .44; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shine { 0%,18% { transform: translateX(0) skewX(-22deg); opacity: 0; } 24%,52% { transform: translateX(410%) skewX(-22deg); opacity: .8; } 100% { transform: translateX(410%) skewX(-22deg); opacity: 0; } }
@keyframes buttonPulse { 0% { box-shadow: 0 0 0 0 rgba(3,16,23,.28); } 70% { box-shadow: 0 0 0 10px rgba(3,16,23,0); } 100% { box-shadow: 0 0 0 0 rgba(3,16,23,0); } }
@keyframes blackout { 0% { opacity: 0; } 15%,85% { opacity: .62; } 100% { opacity: 0; } }
@keyframes glitch { 0% { transform: translate(0,0); } 25% { transform: translate(2px,-1px); } 50% { transform: translate(-1px,2px); } 75% { transform: translate(2px,1px); } 100% { transform: translate(0,0); } }
@keyframes load { 0% { transform: translateX(-120%); } 100% { transform: translateX(260%); } }