:root{--gold:#f3d99b;--gold-deep:#c89b4a;--ink:#e9f3ff;--mist:#c8e1ff8c;--serif:"Cormorant Garamond", Georgia, "Times New Roman", serif;--display:"Cinzel Decorative", "Cinzel", Georgia, serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{background:#01030a;width:100%;height:100%;overflow:hidden}body{font-family:var(--serif);color:var(--ink);-webkit-font-smoothing:antialiased;-webkit-user-select:none;user-select:none}.stage{position:fixed;inset:0}.ocean{touch-action:none;width:100%;height:100%;display:block;position:absolute;inset:0}.stage.playing,.stage.playing .ocean{cursor:none}.title-screen{text-align:center;pointer-events:none;background:radial-gradient(#00041426 0%,#00020c99 75%);flex-direction:column;justify-content:center;align-items:center;padding:2rem;animation:2.4s cubic-bezier(.2,.7,.2,1) both rise;display:flex;position:absolute;inset:0}.title-screen>*{pointer-events:auto}.sigil{color:var(--gold);opacity:.8;text-shadow:0 0 18px var(--gold);font-size:1.4rem;animation:4s ease-in-out infinite breathe}.title{font-family:var(--display);letter-spacing:.12em;background:linear-gradient(100deg,#8a6a2f 0%,#f7e7b4 25%,#fffaf0 40%,#e8c77a 55%,#9c7433 80%,#f3d99b 100%) 0 0/250% 100%;color:#0000;filter:drop-shadow(0 0 28px #f3d99b59);-webkit-background-clip:text;background-clip:text;margin:.5rem 0 .2rem;padding-left:.12em;font-size:clamp(3.5rem,11vw,9rem);font-weight:700;line-height:1;animation:7s linear infinite shimmer}.subtitle{letter-spacing:.5em;color:var(--mist);text-transform:lowercase;padding-left:.5em;font-size:clamp(1.1rem,2.4vw,1.6rem);font-style:italic}.rule{background:linear-gradient(90deg, transparent, var(--gold), transparent);opacity:.6;width:min(360px,60vw);height:1px;margin:1.8rem 0 1.4rem}.lore{color:#e1eeffc7;max-width:40rem;font-size:clamp(1rem,1.9vw,1.3rem);font-style:italic;line-height:1.75}.awaken{cursor:pointer;color:var(--gold);font-family:var(--display);letter-spacing:.45em;background:radial-gradient(#f3d99b29,#f3d99b05 70%);border:1px solid #f3d99b8c;border-radius:999px;margin-top:2.2rem;padding:1rem 2.8rem 1rem 3.25rem;font-size:1.15rem;transition:all .5s cubic-bezier(.2,.7,.2,1);position:relative;box-shadow:0 0 30px #f3d99b1f,inset 0 0 20px #f3d99b14}.awaken:before,.awaken:after{content:"";border-radius:inherit;border:1px solid #f3d99b33;animation:3s ease-out infinite halo;position:absolute;inset:-7px}.awaken:after{animation-delay:1.5s}.awaken:hover{color:#fffaf0;letter-spacing:.6em;box-shadow:0 0 60px #f3d99b59,inset 0 0 30px #f3d99b33}.how{color:#d2e4ff99;flex-wrap:wrap;justify-content:center;gap:2.2rem;margin-top:2.4rem;font-size:1rem;list-style:none;display:flex}.how b{color:var(--gold);letter-spacing:.08em;font-weight:600}.hint{letter-spacing:.3em;text-transform:uppercase;color:#c8dcff59;margin-top:1.4rem;font-size:.85rem}.hud-top{pointer-events:none;justify-content:space-between;align-items:flex-start;padding:1.6rem 2rem;animation:1.5s both fade;display:flex;position:absolute;top:0;left:0;right:0}.rank{align-items:center;gap:1rem;display:flex}.numeral{font-family:var(--display);color:var(--gold);border:1px solid #f3d99b73;border-radius:50%;place-items:center;width:3.2rem;height:3.2rem;font-size:1.5rem;display:grid;box-shadow:0 0 24px #f3d99b33,inset 0 0 14px #f3d99b1f}.rank-name{font-family:var(--display);letter-spacing:.22em;color:var(--ink);text-shadow:0 0 12px #a0dcff80;font-size:1rem}.bar{background:#ffffff1a;border-radius:3px;width:210px;height:3px;margin:.45rem 0 .3rem;overflow:hidden}.fill{background:linear-gradient(90deg, var(--gold-deep), #fff6d8);height:100%;box-shadow:0 0 10px var(--gold);transition:width .3s}.rank-next{color:#d2e4ff80;font-size:.9rem;font-style:italic}.score{text-align:right}.radiance{font-family:var(--display);color:#fffaf0;text-shadow:0 0 22px #f3d99b99;font-variant-numeric:tabular-nums;font-size:2.6rem;line-height:1}.label{letter-spacing:.3em;text-transform:uppercase;color:#d2e4ff80;margin-top:.35rem;font-size:.8rem}.combo{opacity:0;text-align:center;pointer-events:none;transition:all .4s cubic-bezier(.2,.7,.2,1);position:absolute;top:50%;right:2.2rem;transform:translateY(-50%)scale(.8)}.combo.show{opacity:1;transform:translateY(-50%)scale(1)}.combo-n{font-family:var(--display);color:var(--gold);text-shadow:0 0 26px #f3d99bb3;font-size:3.2rem;line-height:1;display:block}.combo-l{letter-spacing:.35em;color:#f3d99ba6;font-style:italic}.hud-bottom{text-align:center;pointer-events:none;position:absolute;bottom:1.8rem;left:50%;transform:translate(-50%)}.surge{background:#ffffff14;border-radius:4px;width:240px;height:4px;overflow:hidden}.surge-fill{background:linear-gradient(90deg,#6ae3ff,#e9fbff);height:100%;box-shadow:0 0 12px #6ae3ff}.surge.spent .surge-fill{box-shadow:none;background:linear-gradient(90deg,#6b5a8a,#a89ac7)}.surge-label{letter-spacing:.45em;text-transform:uppercase;color:#d2e4ff73;margin-top:.45rem;font-size:.75rem}.mute{width:2.6rem;height:2.6rem;color:var(--gold);cursor:pointer;background:#0003;border:1px solid #f3d99b59;border-radius:50%;font-size:1.1rem;position:absolute;bottom:1.4rem;right:1.6rem}.banner{text-align:center;pointer-events:none;animation:4.2s cubic-bezier(.2,.7,.2,1) both banner;position:absolute;top:22%;left:0;right:0}.banner-kicker{letter-spacing:.6em;text-transform:uppercase;color:#f3d99bbf;font-size:.9rem}.banner-name{font-family:var(--display);letter-spacing:.1em;background:linear-gradient(#fffaf0,#f3d99b 60%,#b8893c);color:#0000;filter:drop-shadow(0 0 30px #f3d99b80);-webkit-background-clip:text;background-clip:text;margin:.4rem 0;font-size:clamp(2.4rem,7vw,5.5rem)}.banner-title{color:#e1eeffcc;letter-spacing:.1em;font-size:clamp(1.1rem,2.4vw,1.6rem);font-style:italic}.omen{color:#d2e4ffbf;letter-spacing:.12em;pointer-events:none;white-space:nowrap;font-size:1.2rem;font-style:italic;animation:3.2s both omen;position:absolute;top:5.8rem;left:50%;transform:translate(-50%)}.omen.gold{color:var(--gold);text-shadow:0 0 16px #f3d99b99}@keyframes shimmer{to{background-position:-250% 0}}@keyframes breathe{50%{opacity:.35;transform:scale(.85)}}@keyframes halo{0%{opacity:.8;transform:scale(1)}to{opacity:0;transform:scale(1.35,1.7)}}@keyframes rise{0%{opacity:0;filter:blur(6px);transform:translateY(18px)}}@keyframes fade{0%{opacity:0}}@keyframes banner{0%{opacity:0;letter-spacing:.02em;filter:blur(10px);transform:scale(.96)}18%{opacity:1;filter:blur();transform:scale(1)}78%{opacity:1}to{opacity:0;filter:blur(6px);transform:scale(1.03)}}@keyframes omen{0%{opacity:0}15%,80%{opacity:1}to{opacity:0}}@media (prefers-reduced-motion:reduce){.title,.sigil,.awaken:before,.awaken:after{animation:none}}@media (width<=640px){.how{flex-direction:column;gap:.8rem}.hud-top{padding:1rem}.bar{width:130px}.radiance{font-size:2rem}}