@font-face{font-family:"Fredoka";src:url("./fonts/Fredoka.ttf") format("truetype");font-weight:300 700;font-display:swap}
@font-face{font-family:"Orbitron";src:url("./fonts/Orbitron.ttf") format("truetype");font-weight:400 900;font-display:swap}

:root{
  --night:#13102b; --night-2:#1b1740; --glass:rgba(255,255,255,.08); --glass-2:rgba(255,255,255,.14);
  --line:rgba(255,255,255,.16); --ink:#f6f1ff; --ink-dim:#b9b0dc;
  --cyan:#6cc4ec; --pink:#ec7fb6; --lime:#86d3a8; --violet:#9583ec; --sun:#f9cd6a;
  --r:22px; --tap:68px;
  --font:"Fredoka",ui-rounded,"Nunito",system-ui,sans-serif; --tech:"Orbitron","Fredoka",sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;touch-action:manipulation;background:var(--night);color:var(--ink);font-family:var(--font);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
svg{display:block}

#app{position:fixed;inset:0}
.screen{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));overflow:hidden}
.screen.active{display:flex;animation:fadeIn .45s ease}
@keyframes fadeIn{from{opacity:0;transform:scale(.985)}to{opacity:1;transform:none}}

.aurora{position:absolute;inset:-20%;z-index:-1;pointer-events:none;
  background:
   radial-gradient(40% 35% at 18% 20%,rgba(149,131,236,.32),transparent 70%),
   radial-gradient(35% 30% at 85% 15%,rgba(236,127,182,.2),transparent 70%),
   radial-gradient(45% 40% at 70% 90%,rgba(108,196,236,.16),transparent 70%),
   linear-gradient(180deg,#13102b,#191540 60%,#100d26);
  animation:drift 18s ease-in-out infinite alternate}
.aurora::after{content:"";position:absolute;inset:0;opacity:.22;
  background-image:radial-gradient(1.5px 1.5px at 20% 30%,#fff,transparent),radial-gradient(1px 1px at 70% 60%,#fff,transparent),radial-gradient(1.2px 1.2px at 40% 80%,#fff,transparent),radial-gradient(1px 1px at 85% 25%,#fff,transparent),radial-gradient(1.4px 1.4px at 55% 15%,#fff,transparent);
  background-size:420px 420px}
@keyframes drift{to{transform:translate3d(3%,-2%,0) rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.aurora{animation:none}.screen.active{animation:none}}

/* HOME */
.brand{margin-top:clamp(20px,7vh,80px);text-align:center}
.logo{font-family:var(--tech);font-weight:900;letter-spacing:.08em;line-height:.95;font-size:clamp(44px,10vw,96px);display:flex;flex-direction:column;align-items:center}
.logo span{font-size:.42em;letter-spacing:.5em;margin-right:-.5em;color:var(--ink-dim);font-weight:600}
.logo b{background:linear-gradient(90deg,var(--cyan),var(--violet) 45%,var(--pink) 75%,var(--sun));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 10px rgba(149,131,236,.35));background-size:200% 100%;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:200% 0}}
.tag{margin-top:12px;color:var(--ink-dim);font-size:clamp(15px,2.2vw,19px)}
.choices{flex:1;display:flex;gap:clamp(16px,4vw,40px);align-items:center;justify-content:center;flex-wrap:wrap;width:100%;max-width:880px}
.choice{width:min(42vw,340px);aspect-ratio:1/1.08;border-radius:36px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
  border:1.5px solid var(--line);box-shadow:0 20px 60px -20px rgba(108,196,236,.45),inset 0 1px 0 rgba(255,255,255,.25);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;transition:transform .18s cubic-bezier(.3,1.6,.5,1)}
.choice.melon{box-shadow:0 20px 60px -20px rgba(236,127,182,.5),inset 0 1px 0 rgba(255,255,255,.25)}
.choice:active{transform:scale(.94)}
.choice-art{width:72%;animation:bob 3.4s ease-in-out infinite}
.choice.melon .choice-art{animation-delay:-1.7s}
@keyframes bob{50%{transform:translateY(-8px) rotate(-3deg)}}
.choice-label{font-weight:600;font-size:clamp(20px,3.6vw,30px)}
.foot{color:var(--ink-dim);font-size:13px;opacity:.8;text-align:center}
@media (max-width:520px){.choice{width:min(80vw,300px);aspect-ratio:1.5/1;flex-direction:row;gap:14px}.choice-art{width:38%}}

/* top bar */
.topbar{width:100%;max-width:1100px;display:flex;align-items:center;justify-content:space-between;gap:10px;z-index:3}
.round{width:var(--tap);height:var(--tap);border-radius:50%;flex:none;display:grid;place-items:center;background:var(--glass);border:1.5px solid var(--line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s}
.round:active{transform:scale(.9)}
.round svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.round .dot{fill:var(--ink);stroke:none}
.round[aria-pressed="false"] .wave{opacity:0}
.round[aria-pressed="false"]{opacity:.6}
.top-actions{display:flex;gap:10px}
.hint,.hello{font-weight:600;font-size:clamp(17px,2.6vw,24px);text-align:center;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hello em{font-style:normal;background:linear-gradient(90deg,var(--cyan),var(--pink));-webkit-background-clip:text;background-clip:text;color:transparent}

/* GLOBE */
.globe-wrap{flex:1;width:100%;display:grid;place-items:center;min-height:0}
#globe{width:min(92vw,72vh);height:min(92vw,72vh);touch-action:none;cursor:grab;filter:drop-shadow(0 0 28px rgba(108,196,236,.22))}
#globe:active{cursor:grabbing}
#globe .land{stroke:#13102b;stroke-width:.6;transition:fill .2s}
#globe .land.hit{fill:#fff !important}
.place{min-height:36px;font-weight:600;font-size:clamp(20px,3vw,28px);letter-spacing:.02em}

/* STUDIO */
#studio{gap:8px}
.stage-wrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;gap:12px;position:relative}
.stage{position:relative;height:100%;max-height:calc(100vh - 290px);aspect-ratio:6/7;max-width:calc(100vw - 110px);touch-action:none}
.stage::before{content:"";position:absolute;inset:6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(149,131,236,.3),transparent);filter:blur(10px);z-index:0}
.stage>*{position:absolute;inset:0;width:100%;height:100%}
#base{z-index:1}#paint{z-index:2}#live{z-index:3;pointer-events:none}#top{z-index:4;pointer-events:none}#stick{z-index:5;pointer-events:none}
.side-tools{display:flex;flex-direction:column;gap:12px}
.round.big{width:64px;height:64px}
#btn-clear.armed{background:rgba(236,127,182,.35);border-color:var(--pink);animation:pulse .6s ease infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}

.tabs{display:flex;gap:8px;justify-content:center;flex-wrap:nowrap;max-width:100%;overflow-x:auto;padding:2px 4px;scrollbar-width:none}
.tab{width:72px;height:60px;border-radius:18px;background:var(--glass);border:1.5px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:12px;font-weight:600;color:var(--ink-dim);flex:none}
.tab svg{width:28px;height:28px}
.tab[aria-selected="true"]{background:linear-gradient(160deg,rgba(108,196,236,.3),rgba(149,131,236,.35));border-color:var(--cyan);color:var(--ink);box-shadow:0 0 20px rgba(108,196,236,.35)}

.panel{width:100%;max-width:1000px;min-height:150px;border-radius:26px;padding:12px 14px;background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1.5px solid var(--line);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center;overflow-x:auto;padding:4px 2px;scrollbar-width:none}
.row::-webkit-scrollbar,.tabs::-webkit-scrollbar{display:none}
.swatch{width:54px;height:54px;border-radius:50%;flex:none;border:3px solid rgba(255,255,255,.25);transition:transform .15s;box-shadow:inset 0 -6px 10px rgba(0,0,0,.18),inset 0 4px 8px rgba(255,255,255,.35)}
.swatch[aria-pressed="true"]{transform:scale(1.14);border-color:#fff;box-shadow:0 0 0 3px var(--night),0 0 0 6px #fff,0 0 22px currentColor}
.tool{width:76px;height:76px;flex:none;border-radius:22px;background:var(--glass);border:1.5px solid var(--line);display:grid;place-items:center;transition:transform .15s}
.tool svg{width:56px;height:56px}
.tool[aria-pressed="true"]{background:rgba(255,255,255,.2);border-color:#fff;transform:translateY(-3px);box-shadow:0 8px 24px -6px rgba(108,196,236,.6)}
.tool:active,.swatch:active{transform:scale(.9)}
.sliders{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.slider{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.slider .ico{width:34px;height:34px;flex:none}
input[type=range]{-webkit-appearance:none;appearance:none;flex:1;height:44px;background:transparent;touch-action:none}
input[type=range]::-webkit-slider-runnable-track{height:14px;border-radius:10px;background:var(--track,linear-gradient(90deg,rgba(255,255,255,.1),#fff))}
input[type=range]::-moz-range-track{height:14px;border-radius:10px;background:var(--track,linear-gradient(90deg,rgba(255,255,255,.1),#fff))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:40px;height:40px;margin-top:-13px;border-radius:50%;background:#fff;border:4px solid var(--violet);box-shadow:0 0 16px rgba(149,131,236,.8)}
input[type=range]::-moz-range-thumb{width:34px;height:34px;border-radius:50%;background:#fff;border:4px solid var(--violet)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,40px);opacity:0;padding:12px 20px;border-radius:999px;background:rgba(20,12,50,.9);border:1px solid var(--line);font-weight:600;transition:.3s;z-index:10;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

.sparkle-burst{position:absolute;pointer-events:none;z-index:6;width:14px;height:14px;border-radius:50%;background:radial-gradient(#fff,var(--c,#ec7fb6) 60%,transparent 70%);animation:burst .7s ease-out forwards}
@keyframes burst{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}

@media (max-width:640px){
  :root{--tap:58px}
  .stage{max-height:calc(100vh - 330px);max-width:calc(100vw - 92px)}
  .round.big{width:56px;height:56px}
  .tool{width:66px;height:66px}.tool svg{width:48px;height:48px}
  .swatch{width:48px;height:48px}
  .tab{width:62px}
}
@media (max-height:620px) and (orientation:landscape){
  #studio{display:none;flex-direction:row;flex-wrap:wrap}
  #studio.active{display:grid;grid-template-columns:1fr minmax(320px,44%);grid-template-rows:auto 1fr auto;column-gap:12px}
  #studio .topbar{grid-column:1/-1}
  .stage-wrap{grid-row:2/4}
  .stage{max-height:calc(100vh - 110px)}
  .tabs{grid-column:2;grid-row:2;align-self:end;flex-wrap:wrap}
  .panel{grid-column:2;grid-row:3}
}

.space-deco{position:absolute;inset:0;pointer-events:none;z-index:0}
.pl{position:absolute;filter:drop-shadow(0 0 18px rgba(255,255,255,.25));animation:float 9s ease-in-out infinite}
.pl1{width:clamp(80px,12vw,150px);top:12%;left:5%}
.pl2{width:clamp(44px,6vw,80px);top:20%;right:8%;animation-delay:-3s}
.pl3{width:clamp(60px,8vw,110px);bottom:12%;right:6%;animation:fly 7s ease-in-out infinite}
.pl4{width:28px;bottom:22%;left:12%;animation:twinkle 2.4s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-14px) rotate(6deg)}}
@keyframes fly{50%{transform:translate(-14px,-22px) rotate(-6deg)}}
@keyframes twinkle{50%{transform:scale(.5);opacity:.4}}
#home .brand,#home .choices,#home .foot{position:relative;z-index:1}
.tip{color:var(--ink-dim);font-weight:600;font-size:16px}
#top .blink{transform-box:fill-box;transform-origin:center;animation:blink 5.5s infinite}
@keyframes blink{0%,94%,100%{transform:scaleY(1)}97%{transform:scaleY(.1)}}
.tool svg{overflow:visible}
@media (prefers-reduced-motion:reduce){.pl,#top .blink{animation:none}}
.tabs{justify-content:flex-start}
.tabs>:first-child{margin-left:auto}.tabs>:last-child{margin-right:auto}
@media (max-width:640px){
  .tabs{gap:5px}
  .tab{width:54px;height:56px;font-size:10.5px;border-radius:16px}
  .tab svg{width:24px;height:24px}
  .pl1{width:64px;top:2%;left:-10px}
  .pl2{width:36px;top:3%;right:6px}
  .pl3{width:52px;bottom:4%;right:4%}
  .pl4{bottom:6%}
}

/* v2: instructions, continents, fun facts */
#globe-screen .hint{white-space:normal;line-height:1.15;font-size:clamp(17px,2.8vw,26px)}
.home-listen{position:absolute;top:max(14px,env(safe-area-inset-top));right:14px;z-index:2}
.foot a{color:var(--cyan);font-weight:600;margin-left:6px;text-underline-offset:3px}
.steps{list-style:none;display:flex;gap:clamp(10px,3vw,28px);justify-content:center;margin-top:6px}
.steps li{display:flex;align-items:center;gap:8px;font-size:clamp(15px,2vw,19px);color:var(--ink)}
.steps li+li::before{content:"";width:18px;height:3px;border-radius:2px;background:var(--line);margin-right:4px}
.step-ico{width:44px;height:44px;border-radius:14px;background:var(--glass);border:1.5px solid var(--line);display:grid;place-items:center}
.step-ico svg{width:34px;height:34px}
.ring{transform-box:fill-box;transform-origin:center;animation:ring 1.6s ease-out infinite}
@keyframes ring{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.3);opacity:0}}
.globe-wrap{position:relative}
.tap-hint{position:absolute;left:50%;top:50%;width:64px;height:64px;pointer-events:none;transform:translate(10%,0);animation:tap 1.6s ease-in-out infinite;transition:opacity .3s}
.tap-hint.gone{opacity:0}
@keyframes tap{0%,100%{transform:translate(10%,10%)}50%{transform:translate(0,0) scale(.9)}}
#globe .land.hit{fill:#fff !important;opacity:.85}
#globe .land.hit-country{fill:#fff !important;opacity:1;stroke:var(--sun);stroke-width:2}
#globe .pin{transition:opacity .2s}
.continents{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;width:100%;max-width:900px}
.cont{width:118px;padding:8px 6px 10px;border-radius:22px;background:var(--glass);border:2px solid var(--c);display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .15s;box-shadow:0 0 18px -6px var(--c)}
.cont:active{transform:scale(.92)}
.cont-face{width:52px;height:52px;border-radius:50%;background:var(--c);display:grid;place-items:center;overflow:hidden}
.cont-face svg{width:48px;height:48px}
.cont-name{font-weight:600;font-size:14px;line-height:1.1;text-align:center}
.fact{width:100%;max-width:1000px;display:flex;align-items:center;gap:10px;text-align:left;padding:8px 12px;border-radius:20px;background:linear-gradient(160deg,rgba(249,205,106,.18),rgba(255,255,255,.04));border:1.5px solid rgba(249,205,106,.5);font-size:clamp(14px,1.9vw,17px);line-height:1.25}
.fact[hidden]{display:none}
.fact b{color:var(--sun);margin-right:4px}
.fact-ico svg{width:32px;height:32px}
.fact-spk{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;background:var(--glass);display:grid;place-items:center}
.fact-spk svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .steps{gap:6px}.steps li+li::before{width:8px}.step-ico{width:36px;height:36px}.step-ico svg{width:28px;height:28px}
  .continents{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
  .cont{width:auto;padding:6px 4px 8px}.cont-face{width:40px;height:40px}.cont-face svg{width:38px;height:38px}.cont-name{font-size:12px}
  .stage{max-height:calc(100vh - 400px)}
}
@media (prefers-reduced-motion:reduce){.tap-hint,.ring{animation:none}}
@media (max-width:640px){
  #studio .hello{white-space:normal;line-height:1.15;font-size:17px}
  .foot a{white-space:nowrap}
}
.foot .copy{display:block;margin-top:4px;font-size:12px;opacity:.75}