/* Complete Mixtape presentation pass. Kept separate from the foundation stylesheet for maintainability. */
:root {
  --ui-scale: 1;
  --ui-font-size: 16px;
  --glass: rgba(12, 8, 22, .88);
  --glass-strong: rgba(9, 6, 17, .96);
  --soft-line: rgba(153, 116, 255, .28);
  --cyan-glow: 0 0 28px rgba(89, 234, 255, .2);
  --pink-glow: 0 0 34px rgba(255, 79, 184, .22);
}

html { font-size: var(--ui-font-size); }

.ambient-shell { position: fixed; z-index: 1; inset: 0; overflow: hidden; pointer-events: none; background: linear-gradient(145deg,#07040d,#100718 58%,#05050c); }
.ambient-shell > i { position: absolute; width: 48vw; aspect-ratio: 1; border-radius: 50%; filter: blur(80px); opacity: .12; animation: ambient-drift 15s ease-in-out infinite alternate; }
.ambient-shell > i:nth-child(1) { left: -16vw; top: -22vw; background: var(--violet); }
.ambient-shell > i:nth-child(2) { right: -19vw; top: 8vh; background: var(--pink); animation-delay: -6s; }
.ambient-shell > i:nth-child(3) { left: 30vw; bottom: -35vw; background: var(--cyan); animation-delay: -10s; }
.ambient-shell > span { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px); background-size: 64px 64px; mask-image: linear-gradient(transparent,black 30%,black 70%,transparent); transform: perspective(650px) rotateX(62deg) translateY(40%); transform-origin: center bottom; }
@keyframes ambient-drift { to { transform: translate3d(5vw,4vh,0) scale(1.12); opacity: .2; } }

#game-canvas { z-index: 2; }

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: .045;
  background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.18) 3px 4px);
  mix-blend-mode: soft-light;
}

.intro-screen { z-index: 95; padding: 0; overflow: hidden; background: #020104; backdrop-filter: none; }
.intro-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #020104; }
.intro-vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg,rgba(2,1,5,.34),transparent 24%,transparent 68%,rgba(2,1,5,.72)),radial-gradient(circle at center,transparent 45%,rgba(0,0,0,.5)); }
.intro-endcard { position:absolute; z-index:5; inset:0; display:grid; place-content:center; padding:24px; background:radial-gradient(circle at 50% 44%,rgba(88,31,136,.42),transparent 42%),#030107; text-align:center; pointer-events:none; animation:screen-in .16s ease-out both; }
.intro-endcard h2 { margin:0; line-height:.72; letter-spacing:-.07em; }
.intro-endcard h2 small,.intro-endcard h2 strong { display:block; }
.intro-endcard h2 small { font-size:clamp(2.5rem,8vw,5.4rem); }
.intro-endcard h2 strong { font-size:clamp(4.4rem,13vw,9rem); background:linear-gradient(90deg,var(--pink),var(--orange),var(--cyan)); -webkit-background-clip:text; color:transparent; text-shadow:8px 8px 0 rgba(72,29,138,.44); }
.intro-endcard p { margin:30px 0 0; color:#e3d8e8; font-size:clamp(.7rem,1.7vw,1rem); font-weight:950; letter-spacing:.2em; }
.intro-gate { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 70% 22%,rgba(255,79,184,.16),transparent 34%),linear-gradient(90deg,rgba(3,2,8,.96),rgba(4,2,10,.72) 54%,rgba(3,2,8,.84)); }
.intro-card { width: min(680px,92vw); padding: clamp(26px,5vw,56px); border: 1px solid rgba(89,234,255,.38); border-radius: 26px; background: linear-gradient(145deg,rgba(25,10,43,.93),rgba(5,4,11,.95)); box-shadow: 0 35px 120px rgba(0,0,0,.82),0 0 55px rgba(139,82,255,.16); text-align: center; }
.intro-kicker { color: var(--cyan); font-size: .62rem; font-weight: 950; letter-spacing: .25em; text-shadow: 0 0 20px rgba(89,234,255,.4); }
.intro-card h1 { margin: 22px 0 24px; line-height: .7; letter-spacing: -.08em; }
.intro-card h1 small,.intro-card h1 strong { display: block; }
.intro-card h1 small { font-size: clamp(2.6rem,8vw,5.4rem); }
.intro-card h1 strong { font-size: clamp(4.6rem,13vw,8.7rem); background: linear-gradient(90deg,var(--pink),var(--orange),var(--cyan)); -webkit-background-clip: text; color: transparent; text-shadow: 8px 8px 0 rgba(72,29,138,.42); }
.intro-card p { margin: 0 auto 25px; color: #e4d9e9; font-size: clamp(.9rem,2vw,1.1rem); }
.intro-actions { display: grid; gap: 9px; }
.intro-audio-note { display: block; margin-top: 18px; color: #8f819a; font-size: .52rem; font-weight: 900; letter-spacing: .13em; }
.intro-hud { position: absolute; z-index: 4; inset: 0; pointer-events: none; }
.intro-bug { position: absolute; left: 24px; top: 22px; padding: 10px 12px; border-left: 3px solid var(--pink); background: linear-gradient(90deg,rgba(6,3,10,.82),transparent); text-shadow: 0 2px 10px #000; }
.intro-bug small,.intro-bug b { display: block; }
.intro-bug small { color: var(--pink); font-size: .48rem; font-weight: 950; letter-spacing: .18em; }
.intro-bug b { margin-top: 3px; font-size: .68rem; letter-spacing: .06em; }
.intro-controls { position: absolute; right: 22px; top: 22px; display: flex; gap: 8px; pointer-events: auto; }
.intro-control { cursor: pointer; padding: 9px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 999px; background: rgba(6,3,11,.72); color: #fff; font-size: .56rem; font-weight: 950; letter-spacing: .08em; backdrop-filter: blur(8px); }
.intro-control:hover { border-color: var(--cyan); background: rgba(14,8,24,.9); }
.intro-control kbd { margin-left: 5px; padding: 2px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 4px; background: rgba(255,255,255,.06); font: inherit; }
.intro-timeline { position: absolute; left: 24px; right: 82px; bottom: 24px; height: 5px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.18); box-shadow: 0 2px 12px rgba(0,0,0,.7); }
.intro-timeline i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--pink),var(--orange),var(--cyan)); box-shadow: 0 0 14px rgba(89,234,255,.55); }
.intro-time { position: absolute; right: 24px; bottom: 18px; font-size: .62rem; font-weight: 950; font-variant-numeric: tabular-nums; text-shadow: 0 2px 8px #000; }

button { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: not-allowed; }
button:not(:disabled):active { transform: translateY(1px) scale(.988); }

.screen:not(.hidden) { animation: screen-in .24s ease-out both; }
.screen:not(.hidden) > .panel,
.screen:not(.hidden) > .title-shell { animation: panel-in .38s cubic-bezier(.2,.85,.25,1) both; }

@keyframes screen-in { from { opacity: 0; } }
@keyframes panel-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }

.panel,
.title-shell {
  position: relative;
  isolation: isolate;
  border-color: rgba(112, 222, 255, .34);
  box-shadow: 0 32px 110px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.055);
}

.panel::before,
.title-shell::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(89,234,255,.055), transparent 30%, transparent 70%, rgba(255,79,184,.06));
}

.panel-head { padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,.075); }
.panel-head p { margin-bottom: 0; }
.panel-head h2 { text-wrap: balance; }
.eyebrow, .chip { text-shadow: 0 0 18px rgba(89,234,255,.36); }

.title-shell {
  grid-template-columns: minmax(500px, 1fr) minmax(330px, 390px);
  min-height: min(760px, 94vh);
  padding: clamp(34px, 4vw, 58px);
  gap: clamp(34px, 5vw, 72px);
  background:
    radial-gradient(circle at 78% 18%, rgba(255,79,184,.24), transparent 30%),
    radial-gradient(circle at 8% 95%, rgba(89,234,255,.13), transparent 34%),
    linear-gradient(145deg, rgba(29,12,53,.99), rgba(6,5,14,.99));
}

.title-kicker-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.build-number { color: #9687a3; font-size: .58rem; font-weight: 900; letter-spacing: .14em; }
.title-copy h1 { filter: drop-shadow(0 12px 34px rgba(0,0,0,.35)); }
.title-copy h1 strong { text-shadow: 8px 8px 0 rgba(72,29,138,.48), 0 0 42px rgba(255,79,184,.13); }
.title-copy h1 small { font-size:clamp(2.5rem,6vw,4.7rem); }
.title-copy h1 strong { font-size:clamp(4.4rem,10vw,7.6rem); }
.title-copy > p { margin-bottom: 15px; font-size: 1.13rem; letter-spacing: .015em; }

.feature-pills { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 20px; }
.feature-pills span {
  padding: 6px 9px;
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
  color: #c9bbd2;
  font-size: .55rem;
  font-weight: 900;
  letter-spacing: .1em;
}

.title-mission { position: relative; display: grid; grid-template-columns:minmax(180px,.7fr) 1fr; gap: 8px 18px; align-items: center; margin: 0 0 15px; padding: 12px 38px 12px 14px; border: 1px solid rgba(89,234,255,.2); border-radius: 13px; background: linear-gradient(100deg,rgba(89,234,255,.075),rgba(255,79,184,.045)); overflow: hidden; }
.title-mission small,.title-mission b { display: block; }
.title-mission small { color: var(--cyan); font-size: .5rem; font-weight: 950; letter-spacing: .14em; }
.title-mission b { margin-top: 3px; font-size: .72rem; letter-spacing: .025em; }
.title-mission > span { color: #ae9db8; font-size: .68rem; line-height: 1.35; }
.title-mission > i { position: absolute; right: 15px; width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 16px var(--cyan); animation: signal-pulse 1.4s ease-in-out infinite; }
@keyframes signal-pulse { 50% { opacity: .28; transform: scale(.7); } }

.title-achievements { margin: 0 0 14px; padding: 10px; border: 1px solid rgba(255,207,85,.24); border-radius: 13px; background: linear-gradient(110deg,rgba(255,207,85,.055),rgba(139,82,255,.045)); }
.title-achievements > header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:7px; }
.title-achievements > header small,.title-achievements > header b { display:block; }
.title-achievements > header small { color:var(--orange); font-size:.48rem; font-weight:950; letter-spacing:.14em; }
.title-achievements > header b { margin-top:2px; font-size:.66rem; }
.tracker-link { cursor:pointer; padding:5px 8px; border:1px solid rgba(255,255,255,.13); border-radius:999px; background:rgba(255,255,255,.035); color:var(--cyan); font-size:.48rem; font-weight:950; letter-spacing:.08em; }
.achievement-trackers { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.achievement-card { position:relative; display:grid; grid-template-columns:48px 1fr auto; align-items:center; gap:11px; min-width:0; padding:13px; border:1px solid rgba(139,82,255,.34); border-radius:14px; background:linear-gradient(145deg,rgba(43,20,66,.58),rgba(8,6,14,.9)); overflow:hidden; }
.achievement-card.complete { border-color:rgba(223,255,96,.5); background:linear-gradient(145deg,rgba(60,74,22,.22),rgba(8,6,14,.92)); }
.achievement-glyph { display:grid; place-items:center; width:48px; height:48px; border:1px solid rgba(89,234,255,.35); border-radius:12px; background:rgba(89,234,255,.06); color:var(--cyan); font-size:.82rem; font-weight:1000; }
.achievement-card.complete .achievement-glyph { border-color:rgba(223,255,96,.48); color:var(--lime); }
.achievement-card > div:nth-child(2) { min-width:0; }
.achievement-card header { display:flex; justify-content:space-between; gap:10px; }
.achievement-card header b { overflow:hidden; font-size:.72rem; text-overflow:ellipsis; white-space:nowrap; }
.achievement-card header span { flex:none; color:var(--cyan); font-size:.55rem; font-weight:900; }
.achievement-card small { display:block; margin-top:4px; color:#9f90aa; font-size:.62rem; line-height:1.35; }
.achievement-card em { color:var(--orange); font-size:.54rem; font-style:normal; font-weight:950; }
.achievement-bar { height:5px; margin-top:8px; border-radius:99px; background:rgba(255,255,255,.09); overflow:hidden; }
.achievement-bar i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--violet),var(--cyan)); box-shadow:0 0 8px rgba(89,234,255,.32); }
.achievement-card.complete .achievement-bar i { background:linear-gradient(90deg,#7ca92b,var(--lime)); }
.achievement-card.compact { grid-template-columns:24px 1fr; gap:6px; padding:6px; border-radius:8px; }
.achievement-card.compact .achievement-glyph { width:24px; height:24px; border-radius:6px; font-size:.44rem; }
.achievement-card.compact header b { font-size:.48rem; }
.achievement-card.compact header span { font-size:.43rem; }
.achievement-card.compact small,.achievement-card.compact em { display:none; }
.achievement-card.compact .achievement-bar { height:3px; margin-top:4px; }
.achievement-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.achievement-total { display:flex; align-items:center; gap:14px; }
.achievement-total > b { color:var(--orange); font-size:.68rem; letter-spacing:.08em; }

.title-menu { gap: 10px; }
.title-menu button { position: relative; overflow: hidden; text-align: left; }
.title-menu button::after { content: "›"; position: absolute; right: 16px; opacity: .45; font-size: 1.25rem; }
.title-menu .primary { text-align: center; }
.title-menu .primary::after { opacity: .82; }
.title-menu button:not(:disabled):hover { border-color: rgba(89,234,255,.7); background-color: rgba(42,24,64,.96); }

.title-save-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 14px; }
.title-save-stats > div { padding: 10px 11px; border-top: 1px solid rgba(255,255,255,.1); }
.title-save-stats small, .title-save-stats b { display: block; }
.title-save-stats small { color: #887a94; font-size: .49rem; font-weight: 850; letter-spacing: .11em; }
.title-save-stats b { margin-top: 3px; font-size: .7rem; }

.title-art {
  min-height: 610px;
  border-color: rgba(255,79,184,.56);
  box-shadow: var(--pink-glow), inset 0 0 0 1px rgba(255,255,255,.04);
}
.title-art::before { content: ""; position: absolute; z-index: 2; inset: 0; pointer-events: none; border: 1px solid rgba(89,234,255,.18); border-radius: inherit; }
.title-art > img { object-fit: cover; object-position: 50% 10%; transform: scale(1.015); }
.title-art > div { z-index: 3; padding-top: 70px; }
.title-art small { display: block; color: #b8a9c2; font-size: .55rem; font-weight: 900; letter-spacing: .15em; }
.title-art span { margin-top: 2px; color: #fff; font-size: 1.55rem; letter-spacing: .04em; }
.title-art b { color: var(--cyan); }
.live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 13px rgba(223,255,96,.8); }

.story-card, .map-card, .character-card, .collection-card, .powerup-card, .upgrade-card { transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, filter .18s ease; }
.story-card:not(:disabled):hover, .map-card:not(:disabled):hover, .character-card:not(:disabled):hover { transform: translateY(-5px); border-color: rgba(89,234,255,.76); box-shadow: var(--cyan-glow); }
.story-card img, .map-card img { filter: saturate(1.08) contrast(1.03); }
.story-card.current::before { content: "PLAY NEXT"; position: absolute; z-index: 2; right: 10px; top: 10px; padding: 5px 8px; border-radius: 999px; background: var(--cyan); color: #071015; font-size: .48rem; font-weight: 1000; letter-spacing: .1em; }
.story-card.complete::before { content: "CLEARED"; position: absolute; z-index: 2; right: 10px; top: 10px; padding: 5px 8px; border-radius: 999px; background: var(--lime); color: #101507; font-size: .48rem; font-weight: 1000; letter-spacing: .1em; }
.story-card.locked::before { content: none; }

.character-card img { height: 138px; padding: 5px; }
.character-card.selected, .map-card.selected { transform: translateY(-3px); }
.collection-card:not(.locked):hover { transform: translateY(-4px); border-color: rgba(255,79,184,.64); box-shadow: var(--pink-glow); }
.collection-card img { filter: saturate(1.08); }
.character-card .card-stats,.map-card .card-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; padding: 0; }
.character-card .card-stats span,.map-card .card-tags span { padding: 4px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 999px; color: #b9a9c5; background: rgba(255,255,255,.035); font-size: .46rem; font-weight: 900; letter-spacing: .06em; }
.character-card.selected::after,.map-card.selected::after { content:"SELECTED"; position:absolute; right:8px; top:8px; z-index:3; padding:4px 7px; border-radius:999px; background:var(--cyan); color:#071015; font-size:.44rem; font-weight:1000; letter-spacing:.08em; }

.powerup-card { background: radial-gradient(circle at 15% 0, rgba(89,234,255,.075), transparent 38%), linear-gradient(160deg,rgba(73,34,106,.32),rgba(10,7,17,.94)); }
.powerup-card:hover { transform: translateY(-3px); border-color: rgba(89,234,255,.56); }
.powerup-card header img { filter: saturate(1.08); }
.powerup-card button:not(:disabled):hover { border-color: var(--cyan); background: rgba(89,234,255,.1); }
.rank-track { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; margin:10px 0 12px; }
.rank-track i { height:4px; border-radius:9px; background:rgba(255,255,255,.1); }
.rank-track i.filled { background:linear-gradient(90deg,var(--violet),var(--cyan)); box-shadow:0 0 7px rgba(89,234,255,.3); }

.option { border-radius: 10px; transition: background .18s ease, padding .18s ease; }
.option:hover { padding-inline: 10px; background: rgba(255,255,255,.025); }
.range-control { display: flex; align-items: center; gap: 12px; }
.range-control output { min-width: 48px; color: var(--cyan); font-size: .7rem; font-weight: 950; text-align: right; }
.option input[type="range"] { cursor: pointer; }

#hud { font-variant-numeric: tabular-nums; }
.player-hud, .time-hud, .run-hud {
  min-height: 68px;
  padding: 10px 12px;
  border: 1px solid rgba(124,208,255,.25);
  border-radius: 12px;
  background: linear-gradient(150deg, rgba(15,9,25,.9), rgba(8,6,14,.72));
  box-shadow: 0 10px 30px rgba(0,0,0,.23);
  backdrop-filter: blur(7px);
}
.time-hud { justify-self: center; min-width: 140px; }
.run-hud { justify-self: end; min-width: 220px; }
.meter { box-shadow: inset 0 1px 5px rgba(0,0,0,.75); }
.meter i { box-shadow: 0 0 12px currentColor; }
.objective-hud { border-color: rgba(89,234,255,.48); box-shadow: 0 12px 38px rgba(0,0,0,.3), var(--cyan-glow); }
.loadout-slot { min-height: 44px; border-color: rgba(149,111,219,.42); background: rgba(11,7,19,.9); box-shadow: 0 7px 18px rgba(0,0,0,.18); }
.loadout-slot img { width: 34px; height: 34px; }
.pause-button { box-shadow: 0 8px 22px rgba(0,0,0,.26); }
.pause-button:hover { border-color: var(--cyan); box-shadow: var(--cyan-glow); }
.xp-hud { padding: 7px 10px 9px; border: 1px solid rgba(140,91,211,.32); border-radius: 12px; background: rgba(9,6,15,.76); backdrop-filter: blur(6px); }
.wave-pips { display: grid; grid-template-columns: repeat(8,1fr); gap: 3px; width: 116px; margin: 5px auto 0; }
.wave-pips i { height: 3px; border-radius: 9px; background: rgba(255,255,255,.13); transition: background .2s, box-shadow .2s; }
.wave-pips i.done { background: rgba(89,234,255,.48); }
.wave-pips i.active { background: var(--orange); box-shadow: 0 0 8px rgba(255,155,69,.55); }

.minimap-shell { position: absolute; right: 20px; top: 166px; width: 154px; padding: 8px; border: 1px solid rgba(89,234,255,.32); border-radius: 12px; background: rgba(9,6,15,.8); backdrop-filter: blur(7px); box-shadow: 0 12px 32px rgba(0,0,0,.26); }
.minimap-shell > span,.minimap-shell > small { display: block; color: #a99ab2; font-size: .46rem; font-weight: 950; letter-spacing: .12em; }
.minimap-shell > small { margin-top: 3px; color: var(--cyan); text-align: right; }
#minimap-canvas { display: block; width: 136px; height: 136px; margin-top: 5px; border: 1px solid rgba(255,255,255,.07); border-radius: 8px; background: rgba(4,3,8,.64); }

.hud-controls-hint { position: absolute; right: 20px; bottom: 22px; display: flex; align-items: center; gap: 6px; padding: 7px 9px; border: 1px solid rgba(255,255,255,.09); border-radius: 9px; background: rgba(9,6,15,.68); color: #978a9f; font-size: .48rem; letter-spacing: .08em; }
.hud-controls-hint b { color: #ddd3e4; font-size: .52rem; }
.hud-controls-hint i { width: 1px; height: 15px; margin: 0 3px; background: rgba(255,255,255,.12); }

.combo-hud { position: absolute; right: 188px; top: 168px; padding: 10px 14px; border-right: 3px solid var(--orange); border-radius: 10px 0 0 10px; background: linear-gradient(90deg, rgba(10,6,17,.24), rgba(23,10,31,.91)); text-align: right; animation: combo-pop .22s ease-out; }
.combo-hud span, .combo-hud b { display: block; }
.combo-hud span { color: var(--orange); font-size: .48rem; font-weight: 950; letter-spacing: .13em; }
.combo-hud b { font-size: 1.7rem; line-height: 1; }
@keyframes combo-pop { from { opacity: 0; transform: translateX(15px) scale(.9); } }

.boss-banner { position: absolute; left: 50%; top: 22%; transform: translateX(-50%); min-width: min(520px, 80vw); padding: 14px 32px; border-block: 1px solid rgba(255,79,184,.75); background: linear-gradient(90deg, transparent, rgba(31,7,29,.94) 18% 82%, transparent); text-align: center; animation: boss-in 2.8s ease both; }
.boss-banner small, .boss-banner b { display: block; }
.boss-banner small { color: var(--pink); font-size: .56rem; font-weight: 1000; letter-spacing: .26em; }
.boss-banner b { margin-top: 4px; font-size: clamp(1.4rem, 4vw, 2.5rem); letter-spacing: -.03em; }
@keyframes boss-in { 0% { opacity: 0; transform: translate(-50%,-12px) scale(.96); } 12%, 78% { opacity: 1; transform: translate(-50%,0) scale(1); } 100% { opacity: 0; } }

.upgrade-panel { background: radial-gradient(circle at 50% 0, rgba(89,234,255,.12), transparent 34%), linear-gradient(150deg,rgba(26,14,44,.99),rgba(7,6,14,.99)); }
.upgrade-subtitle { max-width: 700px; margin: -13px auto 20px; color: #aa9ab5; line-height: 1.45; }
.upgrade-card { overflow: hidden; }
.upgrade-card::before { content: ""; position: absolute; inset: -50% -70%; pointer-events: none; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.08) 48%, transparent 61%); transform: translateX(-35%); transition: transform .45s ease; }
.upgrade-card:hover::before { transform: translateX(35%); }
.upgrade-card:hover { box-shadow: var(--cyan-glow); }
.upgrade-card .card-art { width: 120px; height: 112px; }
.upgrade-card .card-art img { filter: saturate(1.08); }
.upgrade-card .recipe { margin-top: 9px; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.08); color: #91849c; font-size: .5rem; font-weight: 850; letter-spacing: .07em; }

.result-panel, .pause-panel { background: radial-gradient(circle at 50% 0, rgba(255,79,184,.1), transparent 36%), linear-gradient(150deg,rgba(26,14,44,.99),rgba(7,6,14,.99)); }
.pause-panel { width: min(820px, 94vw) !important; }
.result-grade { position: absolute; right: 27px; top: 25px; display: grid; place-items: center; width: 88px; aspect-ratio: 1; border: 1px solid rgba(255,207,85,.5); border-radius: 50%; background: radial-gradient(circle,rgba(255,207,85,.11),transparent 68%); box-shadow: 0 0 28px rgba(255,207,85,.12); }
.result-grade small { color: #c6ad78; font-size: .43rem; font-weight: 950; letter-spacing: .1em; }
.result-grade b { color: var(--orange); font-size: 2.25rem; line-height: .9; }
.stat { transition: border-color .18s, background .18s; }
.stat:hover { border-color: rgba(89,234,255,.45); background: rgba(89,234,255,.055); }

.signature-button { overflow: hidden; isolation: isolate; }
.signature-button::after { content: ""; position: absolute; z-index: 0; inset: 0; background: conic-gradient(rgba(7,4,12,.72) var(--signature-angle, 0deg), transparent 0); }
.signature-button small, .signature-button b, .signature-button > span { position: relative; z-index: 1; }
.signature-button.ready { animation: ready-pulse 1.5s ease-in-out infinite; }
.signature-button > span { display: block; min-height: 12px; font-size: .55rem; font-weight: 1000; }
@keyframes ready-pulse { 50% { box-shadow: 0 0 42px rgba(255,207,85,.55); } }

.menu-legend { position: fixed; z-index: 60; left: 50%; bottom: max(8px,env(safe-area-inset-bottom)); transform: translateX(-50%); display: flex; gap: 16px; padding: 7px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 999px; background: rgba(7,4,12,.72); color: #8f8199; pointer-events: none; backdrop-filter: blur(7px); }
.menu-legend span { font-size: .47rem; font-weight: 850; letter-spacing: .08em; white-space: nowrap; }
.menu-legend kbd { padding: 2px 5px; border: 1px solid rgba(255,255,255,.16); border-radius: 4px; background: rgba(255,255,255,.045); color: #ded5e4; font: inherit; }
body[data-screen="playing"] .menu-legend,body[data-screen="loading"] .menu-legend,body[data-screen="intro"] .menu-legend,body[data-screen="upgrade"] .menu-legend { display:none; }

@media (pointer: fine) {
  #touch-controls { display: none !important; }
}

@media (max-width: 1050px) {
  .title-shell { grid-template-columns: minmax(450px,1fr) 320px; gap: 28px; }
  .title-art { min-height: 560px; }
  .hud-controls-hint { display: none; }
  .minimap-shell { width: 134px; }
  #minimap-canvas { width:116px;height:116px; }
  .combo-hud { right:154px; }
}

@media (max-width: 900px) {
  .title-shell { grid-template-columns: 1fr; min-height: 0; }
  .title-art { display: none; }
  .title-save-stats { display: none; }
  .feature-pills { margin-bottom: 15px; }
  .player-hud, .time-hud { min-height: 62px; }
  .boss-banner { top: 26%; }
  .minimap-shell { display:none; }
  .combo-hud { right:10px; }
  .menu-legend { display:none; }
  .achievement-grid { grid-template-columns:1fr; }
}

@media (max-width: 620px) {
  body::before { opacity: .025; }
  .screen { padding: 7px; }
  .title-shell { padding: 24px 19px; border-radius: 22px; }
  .title-copy h1 { margin-top: 18px; }
  .title-copy > p { margin-top: 21px; font-size: .98rem; }
  .feature-pills span:nth-child(n+3) { display: none; }
  .title-mission { grid-template-columns:1fr; padding-right:34px; }
  .title-mission > span { display:none; }
  .achievement-trackers { grid-template-columns:1fr; }
  .achievement-card.compact:nth-child(n+2) { display:none; }
  .achievement-total > b { display:none; }
  .panel-head { margin-bottom: 12px; }
  .player-hud, .time-hud { padding: 8px; }
  .time-hud { min-width: 110px; }
  .loadout-hud { top: 130px; }
  .combo-hud { right: 8px; top: 143px; }
  .upgrade-subtitle { font-size: .75rem; }
  .intro-gate { padding: 10px; }
  .intro-card { padding: 27px 18px; border-radius: 20px; }
  .intro-bug { left: 12px; top: 12px; }
  .intro-bug b { display: none; }
  .intro-controls { right: 10px; top: 10px; }
  .intro-control { padding: 8px 9px; }
  .intro-control kbd { display: none; }
  .intro-timeline { left: 12px; right: 64px; bottom: 16px; }
  .intro-time { right: 12px; bottom: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* Story cinematics */
.story-cinematic-screen{background:#020106;overflow:hidden;padding:0}
.story-cinematic-screen>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#020106}
.story-cinematic-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(2,1,6,.56),transparent 24%,transparent 70%,rgba(2,1,6,.78)),radial-gradient(circle at center,transparent 48%,rgba(2,1,6,.52))}
.story-cinematic-header,.story-cinematic-footer{position:absolute;z-index:3;left:clamp(20px,4vw,72px);right:clamp(20px,4vw,72px);display:flex;align-items:center;gap:22px}
.story-cinematic-header{top:clamp(20px,4vw,58px);justify-content:space-between}.story-cinematic-header>div{display:grid;gap:5px}.story-cinematic-header small{color:#59eaff;letter-spacing:.22em;font-weight:900}.story-cinematic-header b{font-size:clamp(18px,2vw,32px);letter-spacing:.06em}
.story-cinematic-footer{bottom:clamp(22px,4vw,58px)}.story-cinematic-footer .intro-timeline{flex:1}.story-cinematic-footer span{min-width:54px;font-weight:900;text-align:right}
.story-cinematic-fallback{position:absolute;z-index:4;inset:50% auto auto 50%;transform:translate(-50%,-50%);width:min(720px,calc(100% - 40px));padding:clamp(28px,5vw,64px);border:1px solid rgba(89,234,255,.42);border-radius:28px;background:linear-gradient(145deg,rgba(26,8,42,.96),rgba(7,4,13,.97));box-shadow:0 30px 100px #000;text-align:center}
.story-cinematic-fallback h2{margin:.35em 0;font-size:clamp(34px,6vw,74px);line-height:.9}.story-cinematic-fallback p{max-width:580px;margin:0 auto 28px;color:#d8cce2;font-size:clamp(16px,2vw,21px);line-height:1.55}