:root { --amber: #b8a0ff; --amber-hot: #dfd0ff; --text: #f2f0ff; --muted: #9a9fb9; --line: #2b2b49; }
body { background: radial-gradient(ellipse at 50% 30%, #16132e, #05050c 70%); }
#app { background: #090914; border-color: #222139; }
.title-screen { isolation: isolate; justify-content: center; gap: 22px; background: radial-gradient(ellipse at 50% 35%, #25204799, transparent 60%), #090914; }
.title-screen::before { top: 8%; border-color: #61558b33; box-shadow: 0 0 100px #7867d511, 0 0 0 38px #8070aa06, 0 0 0 39px #71649322; }
.cosmic-topline { position: absolute; top: max(22px, env(safe-area-inset-top)); left: 24px; right: 24px; display: flex; justify-content: space-between; color: #a8a3c1; font: 10px monospace; letter-spacing: .18em; }
.cosmic-topline b { color: #baaff1; font-weight: 500; }
.brand-lockup { margin-top: 52px; }
.brand-lockup .eyebrow { color: #b1a3e6; font-size: 9px; letter-spacing: .35em; }
h1 { font-family: Impact, "Arial Narrow", sans-serif; font-weight: 900; font-size: clamp(92px, 22vw, 150px); line-height: .85; letter-spacing: -.04em; margin: 30px 0 25px; }
h1 span { display: inline-block; font-size: .59em; color: #e5ddff; letter-spacing: .02em; text-shadow: 0 0 55px #ac84ff55; }
.tagline { font-size: 12px; letter-spacing: .14em; line-height: 1.9; color: #a4a0ba; }
.primary-button { background: linear-gradient(120deg, #d3c1ff, #a5b9ff); border: 1px solid #ece5ff; color: #171024; border-radius: 10px; box-shadow: 0 0 36px #ae8cff22, inset 0 1px #ffffff88; }
#start-button { font-size: 22px; padding: 17px; letter-spacing: .3em; }
#start-button small { float: right; font: 11px monospace; margin-top: 7px; }
.title-launch { max-width: 320px; gap: 12px; }
.daily-button { padding: 13px 15px; border-radius: 9px; border-color: #49415e; background: #17132588; }
.title-settings { max-width: 400px; gap: 8px; }
.title-settings button, .title-settings a { border-radius: 5px; background: #161321aa; color: #b3adc7; font: 10px system-ui; text-decoration: none; padding: 7px 9px; }
.title-meta { font-size: 10px; color: #817893; }
.floating-orbs { position: absolute; inset: 0; pointer-events: none; z-index: -1; transform: translate(var(--pointer-x, 0px), var(--pointer-y, 0px)); transition: transform .8s ease-out; }
.floating-orbs i { position: absolute; width: var(--size); height: var(--size); left: var(--x); top: var(--y); border-radius: 50%; background: radial-gradient(circle at 30% 25%, #fff, var(--orb) 18%, #070915 75%); border: 1px solid color-mix(in srgb, var(--orb), transparent 45%); box-shadow: 0 0 25px color-mix(in srgb, var(--orb), transparent 80%), inset -5px -8px 15px #0007; animation: orb-drift 9s ease-in-out infinite alternate; animation-delay: var(--delay); }
@keyframes orb-drift { to { translate: 8px -24px; } }
.title-screen.departing .floating-orbs i { animation: none; left: 50%; top: 42%; scale: .05; opacity: 0; transition: all .4s cubic-bezier(.6,0,1,.6); }
.title-screen.departing .brand-lockup { opacity: 0; scale: 1.12; transition: .4s; }
.overlay-screen { background: #0d0c19ed; backdrop-filter: blur(14px); }
.choice-card, .core-card { border-radius: 12px; background: linear-gradient(145deg, #211b3399, #10101c); }
.choice-card { animation: card-arrive .4s both; }
.choice-card:nth-child(2) { animation-delay: .08s; }
.choice-card:nth-child(3) { animation-delay: .16s; }
@keyframes card-arrive { from { opacity: 0; translate: 0 20px; } }
.choice-card[data-rarity="LEGENDARY"] { box-shadow: 0 0 40px #ffc35a44; }
.run-status { position: absolute; top: 6px; left: 10px; right: 10px; z-index: 3; display: flex; gap: 10px; align-items: center; font: 9px monospace; pointer-events: none; }
.run-status button { pointer-events: auto; margin-left: auto; min-width: 42px; min-height: 36px; border: 1px solid #514969; border-radius: 6px; background: #12101de8; color: #e5ddff; }
.fever-meter { width: 75px; height: 3px; background: #363044; overflow: hidden; }
.run-status time, #live-score { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.run-status .fever-meter { flex: 0 1 75px; min-width: 24px; }
#fever-fill { height: 100%; background: #af8aff; transition: width .1s linear; }
.fever-active #fever-fill { background: #ffe7a2; }
.fever-active .board-wrap { box-shadow: inset 0 0 45px #9456ff22; }
.cascade-pulse .board-wrap { animation: space-pulse .6s ease-out; }
@keyframes space-pulse { from { box-shadow: inset 0 0 70px #a877ff55; } }
.experience-dialog { color: #eee9ff; background: #151020; border: 1px solid #63547e; border-radius: 18px; width: min(420px, 90vw); max-height: 85dvh; padding: 26px; overflow: auto; }
.experience-dialog::backdrop { background: #05040bc9; backdrop-filter: blur(12px); }
.experience-dialog h2 { font-size: 28px; margin: 10px 0 22px; }
.experience-dialog label { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; font-size: 14px; }
.experience-dialog select { padding: 9px; background: #211932; border: 1px solid #55456f; color: white; border-radius: 6px; }
.experience-dialog input { accent-color: #bc9eff; }
.experience-dialog .primary-button { margin-top: 20px; }
#performance-readout { display: none; font: 9px monospace; color: #b8b2d2; padding: 4px; }
.dev #performance-readout { display: block; }
.low-quality .floating-orbs, .low-quality .title-screen::before { display: none; }
.low-quality .board-wrap { box-shadow: none !important; }
button, a, input, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 2px solid #dfc9ff; outline-offset: 4px; }
.reduced-motion *, .reduced-motion *::before, .reduced-motion *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
.no-flash .enemy-panel.is-hit, .no-flash .cascade-pulse .board-wrap { animation: none !important; }
.collection-dialog { width: min(680px, 94vw); }
#collection-close { position: sticky; bottom: 0; }
.collection-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.collection-grid article { padding: 14px; background: #211a31; border: 1px solid #453655; border-radius: 10px; }
.collection-grid article p { color: #b3a8c9; font-size: 12px; line-height: 1.6; }
.collection-grid .undiscovered { opacity: .55; }
.collection-grid label { font-size: 11px; justify-content: flex-start; }
.challenge-mode-label { display: grid; gap: 10px; margin: 14px 0; font: 10px monospace; color: #b7a5cf; }
#challenge-mode { max-width: 100%; min-height: 42px; border: 1px solid #534365; border-radius: 8px; background: #191222; color: #e2d7f4; padding: 8px; }
.tutorial-hint { position: absolute; z-index: 4; left: 50%; top: 38%; transform: translateX(-50%); color: #f5e7ff; border: 1px solid #c4a4ff88; background: #241634c9; padding: 14px 24px; border-radius: 10px; font: bold 17px monospace; pointer-events: none; white-space: nowrap; }
.boss-telegraph { position: absolute; z-index: 5; left: 12px; right: 12px; bottom: 48px; text-align: center; padding: 14px; color: #fff3c3; border: 2px dashed #ffcc75; background: #391c11ed; font: bold 13px monospace; pointer-events: none; }
#result-extra { text-align: center; color: #ded0ff; }
#share-status { min-height: 1em; color: #c6b7d8; font-size: 12px; text-align: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (max-height: 700px) { .title-screen { gap: 12px; } .brand-lockup { margin-top: 40px; } h1 { margin: 15px 0; font-size: 96px; } .tagline { margin: 8px 0; } .title-meta { display: none; } }
@media (max-height: 480px) { .title-screen { justify-content: flex-start; } .cosmic-topline { position: relative; inset: auto; width: 100%; } .brand-lockup { margin-top: 0; } }
@media (max-width: 420px) { .title-screen { padding-inline: 20px; } .title-settings button, .title-settings a { min-height: 36px; } .run-status { gap: 6px; } #fever-label { display: none; } }