:root{
    --bg:#05070a; --ink:#f5f7fa; --muted:#9ca6b5; --line:rgba(255,255,255,.12);
    --panel:rgba(9,12,17,.68); --panel-2:rgba(9,12,17,.86);
    --success:#d7ff9c; --danger:#ff9a92; --gold:#ffe8a3;
    --accent:#d7f9ff; --stage-hue:188; --stage-glow:rgba(104,224,255,.28);
    --safe:#d9f7ff; --mid:#ffe39a; --hard:#ff9ac9;
  }
  *{box-sizing:border-box}
  [hidden]{display:none!important}
  html,body{height:100%;margin:0;background:#030507;color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;overflow:hidden}
  button,input{font:inherit}
  button{color:inherit}
  body{user-select:none;-webkit-tap-highlight-color:transparent}
  .game{position:relative;height:100dvh;min-height:620px;overflow:hidden;overflow:clip;background:
    radial-gradient(120% 85% at 50% 8%,hsla(var(--stage-hue),72%,30%,.28),transparent 58%),
    linear-gradient(180deg,#080b10 0%,#040609 58%,#020304 100%)}
  .game::before{content:"";position:absolute;inset:-20%;background:
    radial-gradient(circle at 18% 35%,hsla(calc(var(--stage-hue) + 34),80%,58%,.10),transparent 26%),
    radial-gradient(circle at 82% 30%,hsla(calc(var(--stage-hue) - 24),78%,58%,.10),transparent 28%);
    filter:blur(30px);animation:ambient 11s ease-in-out infinite alternate;pointer-events:none}
  @keyframes ambient{to{transform:scale(1.06) translate3d(1.5%,-1%,0);filter:blur(40px)}}
  .grain{position:absolute;inset:0;opacity:.045;mix-blend-mode:screen;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E")}
  .topbar{position:absolute;z-index:30;left:0;right:0;top:0;padding:max(18px,env(safe-area-inset-top)) 24px 0;display:flex;align-items:center;justify-content:space-between;gap:14px}
  .brand{display:flex;align-items:center;gap:12px;min-width:0}
  .mark{width:31px;height:31px;position:relative;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:10px;background:rgba(255,255,255,.045);box-shadow:0 0 30px rgba(165,240,255,.08) inset}
  .mark::before,.mark::after{content:"";position:absolute;width:13px;height:2px;background:white;transform:rotate(-35deg);border-radius:2px;box-shadow:0 0 8px rgba(255,255,255,.45)}
  .mark::before{margin-top:-6px}.mark::after{margin-top:6px}
  .brand-text{display:flex;flex-direction:column;line-height:1}
  .brand b{font-size:15px;letter-spacing:.28em;font-weight:820}.brand small{font-size:9px;color:var(--muted);letter-spacing:.16em;margin-top:6px;text-transform:uppercase}
  .top-actions{display:flex;align-items:center;gap:8px}
  .balance{height:42px;display:flex;align-items:center;gap:9px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:rgba(4,7,10,.66);backdrop-filter:blur(16px);box-shadow:0 14px 50px rgba(0,0,0,.25)}
  .balance small{font-size:10px;letter-spacing:.13em;color:var(--muted);text-transform:uppercase}.balance strong{font-size:15px;font-variant-numeric:tabular-nums}
  .icon-btn{width:42px;height:42px;border-radius:14px;border:1px solid var(--line);background:rgba(4,7,10,.66);backdrop-filter:blur(16px);cursor:pointer;display:grid;place-items:center;transition:.18s ease}
  .icon-btn:hover{transform:translateY(-1px);border-color:rgba(255,255,255,.25)}
  .scene{position:absolute;inset:0;perspective:900px}
  .moon{position:absolute;left:50%;top:17%;width:240px;height:240px;border-radius:50%;transform:translateX(-50%);background:radial-gradient(circle at 50% 46%,rgba(238,252,255,.95) 0%,hsla(var(--stage-hue),75%,83%,.5) 12%,hsla(var(--stage-hue),70%,54%,.15) 44%,transparent 70%);filter:blur(.3px);opacity:.73;box-shadow:0 0 100px hsla(var(--stage-hue),80%,68%,.17);animation:moon 7s ease-in-out infinite alternate}
  @keyframes moon{to{transform:translateX(-50%) scale(1.06);opacity:.9}}
  .horizon{position:absolute;left:-10%;right:-10%;bottom:24%;height:37%;background:
    linear-gradient(180deg,transparent 0%,rgba(2,3,5,.08) 20%,rgba(2,3,5,.75) 100%),
    radial-gradient(ellipse at 50% 100%,hsla(var(--stage-hue),65%,45%,.16),transparent 54%);filter:blur(.2px)}
  .architecture{position:absolute;left:50%;bottom:25%;width:min(1150px,96vw);height:52%;transform:translateX(-50%);opacity:.7;pointer-events:none}
  .architecture::before{content:"";position:absolute;left:2%;right:2%;bottom:0;height:79%;clip-path:polygon(0 100%,0 34%,7% 34%,7% 13%,15% 13%,15% 41%,22% 41%,22% 21%,30% 21%,30% 0,35% 0,35% 34%,42% 34%,42% 8%,48% 8%,48% 26%,52% 26%,52% 8%,58% 8%,58% 34%,65% 34%,65% 0,70% 0,70% 21%,78% 21%,78% 41%,85% 41%,85% 13%,93% 13%,93% 34%,100% 34%,100% 100%);background:linear-gradient(180deg,rgba(129,158,170,.16),rgba(3,5,7,.78));filter:drop-shadow(0 -8px 35px hsla(var(--stage-hue),70%,70%,.04))}
  .floor{position:absolute;left:50%;bottom:-15%;width:130vw;height:55%;transform:translateX(-50%) rotateX(63deg);transform-origin:center top;background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 74px),repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 82px);mask-image:linear-gradient(180deg,rgba(0,0,0,.9),transparent 90%);opacity:.55}
  .fog,.fog2{position:absolute;left:-20%;right:-20%;height:22%;bottom:19%;background:radial-gradient(ellipse at center,rgba(220,245,255,.11),transparent 65%);filter:blur(30px);animation:fog 9s linear infinite alternate;pointer-events:none}.fog2{bottom:9%;opacity:.55;animation-duration:14s;animation-direction:alternate-reverse}
  @keyframes fog{to{transform:translateX(8%) scaleX(1.1)}}
  .hero{position:absolute;z-index:8;left:50%;bottom:14.5%;width:82px;height:176px;transform:translateX(-50%);filter:drop-shadow(0 0 20px rgba(205,242,255,.13)) drop-shadow(0 22px 24px rgba(0,0,0,.62));transition:.72s cubic-bezier(.2,.8,.2,1);pointer-events:none;opacity:.94;transform-origin:50% 100%}
  .hero-asset{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom;opacity:0;filter:saturate(.66) contrast(1.08) brightness(.92);transition:opacity .32s ease,filter .45s ease}
  .game.hero-art-ready .hero-asset{opacity:.98}
  .hero::before{content:"";position:absolute;left:25px;top:0;width:32px;height:36px;border-radius:48% 48% 44% 44% / 42% 42% 58% 58%;background:radial-gradient(circle at 58% 34%,rgba(255,255,255,.13),transparent 20%),linear-gradient(110deg,#020304 15%,#18212a 48%,#040506 78%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 0 20px rgba(190,235,255,.07);transition:opacity .2s ease}
  .hero::after{content:"";position:absolute;left:12px;top:31px;width:58px;height:138px;background:linear-gradient(90deg,#010203 0%,#0b1016 24%,#1b252f 50%,#0a0f14 74%,#010203 100%);clip-path:polygon(35% 0,65% 0,82% 9%,91% 34%,76% 42%,72% 100%,56% 100%,50% 60%,44% 100%,28% 100%,24% 42%,9% 34%,18% 9%);box-shadow:inset 0 0 16px rgba(255,255,255,.025);transition:opacity .2s ease}
  .game.hero-art-ready .hero::before,.game.hero-art-ready .hero::after{opacity:0}
  .game.stage-2.hero-art-ready .hero-asset{filter:saturate(.62) contrast(1.09) brightness(.90)}
  .game.stage-3.hero-art-ready .hero-asset{filter:saturate(.58) contrast(1.10) brightness(.88)}
  @media (min-width:821px){
    .hero{left:44%;bottom:20%;filter:drop-shadow(0 0 10px rgba(220,238,236,.32)) drop-shadow(0 22px 24px rgba(0,0,0,.68))}
    .game.hero-art-ready .hero-asset{filter:saturate(.62) contrast(1.12) brightness(1.08)}
    .game.stage-2.hero-art-ready .hero-asset{filter:saturate(.58) contrast(1.12) brightness(1.04)}
    .game.stage-3.hero-art-ready .hero-asset{filter:saturate(.54) contrast(1.12) brightness(1.00)}
  }
  @media (min-width:821px) and (max-height:850px){.hero{left:42%;bottom:26%}}\n  .game.traversing .hero{transform:translateX(-50%) translateY(-80px) scale(.55);opacity:.12}
  .stage-meta{position:absolute;z-index:12;top:96px;left:50%;transform:translateX(-50%);text-align:center;width:min(720px,88vw);pointer-events:none}