/* GameMath RPG Academy. Self-hosted fonts: no request leaves the device. */
@font-face{font-family:'Fredoka';font-weight:400;font-display:swap;src:url(../assets/fonts/fredoka-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:500;font-display:swap;src:url(../assets/fonts/fredoka-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:600;font-display:swap;src:url(../assets/fonts/fredoka-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Fredoka';font-weight:700;font-display:swap;src:url(../assets/fonts/fredoka-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-weight:700;font-display:swap;src:url(../assets/fonts/orbitron-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Orbitron';font-weight:900;font-display:swap;src:url(../assets/fonts/orbitron-latin-900-normal.woff2) format('woff2')}
:root{
  --bg1:#0d1030;--bg2:#1c2260;
  --card:rgba(255,255,255,.07);--card-b:rgba(255,255,255,.16);
  --green:#34d399;--green-d:#059669;--cyan:#67e8f9;--gold:#fcd34d;--gold-d:#f59e0b;
  --pink:#f9a8d4;--purple:#c4b5fd;--indigo:#6366f1;--orange:#fdba74;
  --text:#f8fafc;--soft:#cbd5e1;
  --fun:'Fredoka','Baloo 2','Nunito','Trebuchet MS',system-ui,sans-serif;
  --orb:'Orbitron','Fredoka',sans-serif;
  --light:0;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;overflow:hidden}
body{font-family:var(--fun);color:var(--text);
  background:linear-gradient(180deg,var(--bg1) 0%,var(--bg2) 100%);
  display:flex;flex-direction:column;touch-action:manipulation;
  user-select:none;-webkit-user-select:none}
button{font-family:inherit;color:inherit;cursor:pointer;touch-action:manipulation}
button:focus-visible{outline:4px solid var(--cyan);outline-offset:3px}

/* ── Camadas de fundo ── */
#bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#glow{position:fixed;inset:0;z-index:0;pointer-events:none;transition:opacity 1.5s;
  background:
    radial-gradient(ellipse 90% 60% at 50% 105%,rgba(52,211,153,.45),transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 0%,rgba(252,211,77,.35),transparent 70%),
    radial-gradient(ellipse 50% 40% at 10% 10%,rgba(196,181,253,.3),transparent 70%);
  opacity:calc(.12 + var(--light) * .88)}
#fx{position:fixed;inset:0;z-index:60;pointer-events:none}

/* ── HUD: Pixel fala aqui ── */
#hud{position:relative;z-index:20;flex-shrink:0;display:none;align-items:center;gap:12px;
  padding:10px 14px;background:rgba(10,12,40,.62);backdrop-filter:blur(10px);
  border-bottom:2px solid rgba(103,232,249,.22)}
#hud.on{display:flex}
.hud-btn{width:64px;height:64px;flex-shrink:0;border-radius:20px;font-size:30px;
  background:var(--card);border:2px solid var(--card-b);display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .2s}
.hud-btn:active{transform:scale(.92)}
.hud-btn.hide{visibility:hidden}
#btn-repeat{background:linear-gradient(160deg,#0e7490,#22d3ee);border-color:rgba(255,255,255,.35);
  box-shadow:0 5px 0 #155e75}
#hud-pixel{width:62px;height:62px;flex-shrink:0;filter:drop-shadow(0 0 8px rgba(52,211,153,.6))}
#hud-pixel.talking{animation:talk .35s ease-in-out infinite alternate}
@keyframes talk{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-4px) rotate(2deg)}}
#bubble{flex:1;min-height:64px;display:flex;align-items:center;
  background:rgba(255,255,255,.08);border:2px solid rgba(103,232,249,.35);
  border-radius:22px 22px 22px 6px;padding:10px 18px;
  font-size:clamp(17px,2.2vw,24px);font-weight:500;line-height:1.3}

/* ── Telas ── */
#screens{flex:1;position:relative;z-index:10;min-height:0}
.screen{position:absolute;inset:0;display:none;flex-direction:column}
.screen.on{display:flex;animation:fadein .45s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* ── Tela inicial ── */
#scr-start{align-items:center;justify-content:center;gap:clamp(14px,3vh,26px);text-align:center;padding:20px}
.st-tag{font-family:var(--orb);font-size:clamp(11px,1.4vw,14px);letter-spacing:4px;color:var(--cyan);opacity:.75}
.st-title{font-family:var(--orb);font-weight:900;font-size:clamp(56px,12vw,132px);letter-spacing:8px;line-height:1;
  background:linear-gradient(135deg,var(--gold),var(--green) 55%,var(--cyan));
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 30px rgba(252,211,77,.35))}
.st-sub{font-size:clamp(22px,3.4vw,34px);font-weight:600;color:var(--soft)}
.st-pixel{width:clamp(90px,14vw,140px);height:auto;animation:bob 2.6s ease-in-out infinite;
  filter:drop-shadow(0 0 16px rgba(52,211,153,.7))}
.btn-play{width:clamp(130px,20vw,170px);aspect-ratio:1;border-radius:50%;border:6px solid rgba(255,255,255,.4);
  background:radial-gradient(circle at 35% 30%,#6ee7b7,var(--green-d));font-size:clamp(56px,9vw,78px);
  display:flex;align-items:center;justify-content:center;padding-left:10px;
  box-shadow:0 10px 0 #065f46,0 0 50px rgba(52,211,153,.6);animation:pulse 1.6s ease-in-out infinite}
.btn-play:active{transform:translateY(6px);box-shadow:0 4px 0 #065f46}
.st-note{font-size:16px;color:rgba(203,213,225,.7)}
@keyframes pulse{0%,100%{box-shadow:0 10px 0 #065f46,0 0 40px rgba(52,211,153,.5)}50%{box-shadow:0 10px 0 #065f46,0 0 80px rgba(52,211,153,.95)}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── Intro ── */
#scr-intro{align-items:center;justify-content:center;padding:16px;gap:20px}
#intro-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(14px,3vh,28px);width:100%;flex:1}
.intro-scene{position:relative;width:min(760px,94vw);height:min(46vh,360px);border-radius:32px;
  background:radial-gradient(ellipse at 50% 120%,rgba(52,211,153,.18),transparent 60%),rgba(255,255,255,.04);
  border:2px solid rgba(196,181,253,.25);overflow:hidden}
.intro-castle{position:absolute;left:50%;bottom:6%;transform:translateX(-50%);font-size:clamp(90px,15vw,150px);
  transition:filter 1.2s}
.intro-castle.dark{filter:grayscale(1) brightness(.35)}
.istar{position:absolute;font-size:clamp(26px,4vw,40px);transition:filter .5s,transform .5s}
.istar.off{filter:grayscale(1) brightness(.3);transform:scale(.8)}
.intro-shadow{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(30,10,60,.0),rgba(10,0,25,.0));
  transition:background 1.5s;pointer-events:none}
.intro-shadow.on{background:radial-gradient(circle at 50% 40%,rgba(30,10,60,.35),rgba(10,0,25,.75))}
.intro-pix{position:absolute;left:6%;bottom:8%;width:clamp(70px,11vw,110px);animation:bob 2.4s ease-in-out infinite;
  filter:drop-shadow(0 0 14px rgba(52,211,153,.7))}
.big-act{min-width:clamp(150px,22vw,210px);height:clamp(90px,13vw,110px);border-radius:32px;
  border:5px solid rgba(255,255,255,.35);font-size:clamp(44px,7vw,60px);font-weight:700;
  display:flex;align-items:center;justify-content:center;gap:12px;padding:0 28px;
  background:linear-gradient(160deg,#10b981,#34d399);box-shadow:0 9px 0 #065f46,0 0 40px rgba(52,211,153,.5);
  animation:popin .4s cubic-bezier(.34,1.56,.64,1)}
.big-act span{font-size:clamp(26px,4vw,34px)}
.big-act:active{transform:translateY(6px);box-shadow:0 3px 0 #065f46}
.big-act.attn{animation:popin .4s cubic-bezier(.34,1.56,.64,1),pulse 1.6s 0.4s ease-in-out infinite}
@keyframes popin{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}}
.skip-btn{position:absolute;top:12px;right:14px;z-index:5;font-size:15px;padding:8px 14px;border-radius:12px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6)}

.hero-row{display:flex;gap:clamp(12px,3vw,30px);flex-wrap:wrap;justify-content:center}
.hero-card{width:clamp(140px,22vw,210px);padding:18px 10px 14px;border-radius:30px;
  background:rgba(255,255,255,.06);border:4px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;align-items:center;gap:6px;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s;
  animation:popin .45s cubic-bezier(.34,1.56,.64,1) both}
.hero-card .he{font-size:clamp(76px,12vw,112px);line-height:1.1}
.hero-card .hn{font-size:clamp(22px,3vw,30px);font-weight:700}
.hero-card.sel{border-color:var(--hc);transform:translateY(-8px) scale(1.06);
  box-shadow:0 0 0 4px rgba(255,255,255,.08),0 0 50px var(--hc);background:rgba(255,255,255,.12)}

/* ── Mapa ── */
#map-wrap{position:absolute;inset:0}
#map-svg{position:absolute;inset:0;width:100%;height:100%}
.map-title{position:absolute;top:3%;left:4%;font-family:var(--orb);font-weight:900;font-size:clamp(16px,2.6vw,28px);
  letter-spacing:4px;color:rgba(255,255,255,.2)}
.mnode{position:absolute;transform:translate(-50%,-50%);width:clamp(92px,13vw,132px);aspect-ratio:1;border-radius:50%;
  font-size:clamp(44px,6.4vw,64px);display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.18),rgba(20,24,70,.9));
  border:5px solid var(--nc,#67e8f9);box-shadow:0 0 26px color-mix(in srgb,var(--nc,#67e8f9) 55%,transparent);
  transition:transform .2s}
.mnode:active{transform:translate(-50%,-50%) scale(.93)}
.mnode.locked{filter:grayscale(1) brightness(.45);box-shadow:none}
.mnode.current{animation:nodepulse 1.5s ease-in-out infinite}
.mnode.done{border-color:var(--gold);box-shadow:0 0 34px rgba(252,211,77,.7)}
@keyframes nodepulse{0%,100%{box-shadow:0 0 20px color-mix(in srgb,var(--nc) 50%,transparent);transform:translate(-50%,-50%) scale(1)}
  50%{box-shadow:0 0 60px var(--nc);transform:translate(-50%,-50%) scale(1.08)}}
.mnum{position:absolute;top:-8px;left:-8px;width:40px;height:40px;border-radius:50%;background:#1e1b4b;
  border:3px solid var(--nc,#67e8f9);font-size:22px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mlock{position:absolute;bottom:-6px;right:-6px;font-size:28px}
.mstars{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:6px;font-size:clamp(18px,2.4vw,24px);
  white-space:nowrap;letter-spacing:2px}
.mstars .off{filter:grayscale(1) brightness(.4)}
.mhero{position:absolute;transform:translate(-50%,-100%);font-size:clamp(46px,6.4vw,64px);pointer-events:none;
  animation:herobob 1.2s ease-in-out infinite;filter:drop-shadow(0 6px 6px rgba(0,0,0,.5));transition:left .8s,top .8s;z-index:3}
@keyframes herobob{0%,100%{transform:translate(-50%,-100%)}50%{transform:translate(-50%,-115%)}}
.mcastle{position:absolute;transform:translate(-50%,-50%);font-size:clamp(70px,11vw,120px);background:none;border:none;
  filter:grayscale(1) brightness(calc(.35 + var(--light)*.75));transition:filter 1s}
.mcastle.lit{filter:drop-shadow(0 0 30px rgba(252,211,77,.9));animation:bob 2.4s ease-in-out infinite}
.adult-btn{position:absolute;bottom:14px;left:14px;font-size:16px;padding:10px 14px;border-radius:14px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.75);z-index:4}

/* ── Fase ── */
#scr-phase{align-items:stretch}
#phead{display:flex;align-items:center;justify-content:center;gap:14px;padding:10px 12px 0;flex-shrink:0}
#ph-icon{font-size:clamp(30px,4vw,40px)}
#ph-name{font-size:clamp(16px,2vw,20px);font-weight:600;color:var(--soft);display:none}
#dots{display:flex;gap:10px}
.rdot{width:30px;height:30px;border-radius:50%;border:3px solid rgba(255,255,255,.25);background:rgba(255,255,255,.05);
  display:flex;align-items:center;justify-content:center;font-size:18px;transition:all .3s}
.rdot.cur{border-color:var(--cyan);box-shadow:0 0 14px rgba(103,232,249,.7)}
.rdot.done{border-color:var(--gold);background:rgba(252,211,77,.2)}
#stage{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;overflow-x:hidden;
  gap:clamp(14px,3vh,30px);padding:12px;min-height:0}

/* Botões de número */
.choices{display:flex;gap:clamp(14px,3vw,30px);justify-content:center;flex-wrap:wrap;min-height:10px}
.numbtn{width:clamp(96px,14vw,132px);aspect-ratio:1;border-radius:30px;font-size:clamp(56px,8.4vw,80px);font-weight:700;
  background:linear-gradient(160deg,#6366f1,#8b5cf6);border:4px solid rgba(255,255,255,.3);
  box-shadow:0 9px 0 #3730a3,0 0 26px rgba(139,92,246,.45);display:flex;align-items:center;justify-content:center;
  animation:popin .4s cubic-bezier(.34,1.56,.64,1) both;transition:transform .12s}
.numbtn:active{transform:translateY(6px);box-shadow:0 3px 0 #3730a3}
.numbtn.right{background:linear-gradient(160deg,#059669,#34d399);box-shadow:0 9px 0 #065f46,0 0 50px rgba(52,211,153,.8);
  animation:joy .6s ease}
.numbtn.wrong{opacity:.5;animation:shake .45s ease}
.hint{animation:hintglow 1s ease-in-out infinite !important}
@keyframes hintglow{0%,100%{box-shadow:0 0 0 0 rgba(252,211,77,.0),0 0 20px rgba(252,211,77,.4);filter:brightness(1)}
  50%{box-shadow:0 0 0 8px rgba(252,211,77,.35),0 0 50px rgba(252,211,77,.9);filter:brightness(1.25)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}40%{transform:translateX(10px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
@keyframes joy{0%{transform:scale(1)}40%{transform:scale(1.2) rotate(-4deg)}70%{transform:scale(.96) rotate(3deg)}100%{transform:scale(1)}}

/* Fase 1 · céu de estrelas */
.field{position:relative;width:min(900px,94vw);height:min(44vh,380px);border-radius:32px;
  background:radial-gradient(ellipse at 50% 0%,rgba(196,181,253,.14),transparent 70%),rgba(255,255,255,.035);
  border:2px solid rgba(196,181,253,.25)}
.cstar{position:absolute;transform:translate(-50%,-50%);width:clamp(66px,9.5vw,96px);aspect-ratio:1;
  background:none;border:none;font-size:clamp(44px,6.6vw,66px);display:flex;align-items:center;justify-content:center;
  filter:grayscale(1) brightness(.42);transition:filter .3s}
.cstar .ce{display:block;transition:transform .3s}
.cstar.lit{filter:drop-shadow(0 0 14px rgba(252,211,77,.85))}
.cstar.lit .ce{animation:joy .5s ease}
.cstar .badge{position:absolute;top:-4px;right:-4px;min-width:36px;height:36px;border-radius:18px;padding:0 6px;
  background:var(--gold);color:#1e1b4b;font-size:22px;font-weight:700;display:none;align-items:center;justify-content:center;
  box-shadow:0 0 12px rgba(252,211,77,.8)}
.cstar.lit .badge{display:flex}
.cstar.focus .ce{transform:scale(1.4)}
.cstar.focus{filter:drop-shadow(0 0 26px #fff)}
.cstar.wob .ce{animation:shake .4s ease}

/* Fase 2 · pedestais */
.path-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:clamp(6px,1.4vw,16px);max-width:96vw}
.ped{display:flex;flex-direction:column;align-items:center;width:clamp(68px,8.4vw,100px);background:none;border:none;
  border-radius:20px;padding:4px 0}
.ped .flame{font-size:clamp(28px,4vw,44px);height:1.2em;opacity:0;transform:scale(.2) translateY(10px);transition:all .4s cubic-bezier(.34,1.56,.64,1)}
.ped .orb{width:clamp(62px,7.8vw,92px);aspect-ratio:1;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:clamp(34px,4.8vw,52px);font-weight:700;background:#262b5e;border:4px solid #4b5299;color:#a5b4fc;transition:all .35s}
.ped .base{width:84%;height:18px;margin-top:-6px;border-radius:4px 4px 12px 12px;background:linear-gradient(#5560a8,#2a2f66)}
.ped.lit .flame{opacity:1;transform:scale(1) translateY(0)}
.ped.lit .orb{background:radial-gradient(circle at 35% 30%,#fff7c2,var(--gold) 55%,var(--gold-d));border-color:#fff3b0;color:#3b1d00;
  box-shadow:0 0 30px rgba(252,211,77,.85)}
.ped.mystery .orb{background:radial-gradient(circle at 35% 30%,#a78bfa,#6d28d9);border-color:#ddd6fe;color:#fff;animation:mysto 1.4s ease-in-out infinite}
@keyframes mysto{0%,100%{box-shadow:0 0 14px rgba(167,139,250,.5)}50%{box-shadow:0 0 40px rgba(167,139,250,1)}}
.ped.shake{animation:shake .45s ease}
.ped.focus .orb{transform:scale(1.18);box-shadow:0 0 0 6px rgba(255,255,255,.35),0 0 40px #fff}
.ped.hint .orb{animation:hintglow 1s ease-in-out infinite}
.ped.hint{animation:none !important}

/* Fase 2 · constelação */
#cons{width:min(860px,94vw);max-height:min(60vh,520px);overflow:visible}
#cons-fill{fill:rgba(252,211,77,0);stroke:none;transition:fill 1.2s}
#cons-fill.on{fill:rgba(252,211,77,.22)}
.cline{stroke:var(--gold);stroke-width:1.1;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;
  animation:draw .45s ease forwards;filter:drop-shadow(0 0 1.5px rgba(252,211,77,.9))}
@keyframes draw{to{stroke-dashoffset:0}}
.cnode{cursor:pointer;transform-box:fill-box;transform-origin:center}
.cnode circle{fill:#262b5e;stroke:#818cf8;stroke-width:.7;transition:fill .3s}
.cnode text{fill:#e0e7ff;font-size:5.2px;font-weight:700;font-family:var(--fun);pointer-events:none;text-anchor:middle;dominant-baseline:central}
.cnode.lit circle{fill:var(--gold);stroke:#fff3b0}
.cnode.lit text{fill:#3b1d00}
.cnode.hint circle{animation:svghint 1s ease-in-out infinite}
@keyframes svghint{0%,100%{stroke-width:.7;stroke:#fcd34d}50%{stroke-width:2.2;stroke:#fff}}
.cnode.shake{animation:shake .4s ease}

/* Fase 3 · fila */
.queue-wrap{display:flex;flex-direction:column;align-items:center;max-width:98vw}
.queue{display:flex;align-items:flex-end;gap:clamp(4px,1.4vw,16px)}
.door{display:flex;flex-direction:column;align-items:center;margin-right:clamp(4px,1.5vw,18px)}
.door .dc{font-size:clamp(46px,11vw,120px);line-height:1;filter:drop-shadow(0 0 20px rgba(252,211,77,.5))}
.door .df{font-size:clamp(14px,1.8vw,18px);color:var(--gold);font-weight:600;margin-top:2px}
.ground{width:100%;height:10px;border-radius:6px;margin-top:4px;background:linear-gradient(90deg,rgba(252,211,77,.5),rgba(52,211,153,.25))}
.friend{display:flex;flex-direction:column;align-items:center;background:none;border:none;gap:4px}
.friend .face{font-size:clamp(32px,7.4vw,82px);width:clamp(50px,10.5vw,110px);aspect-ratio:1;border-radius:26px;
  display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);border:4px solid transparent;
  transition:all .25s;animation:popin .4s cubic-bezier(.34,1.56,.64,1) both}
.friend .tag{font-size:clamp(18px,3vw,32px);font-weight:700;color:var(--gold);min-height:1.3em;opacity:0;transition:opacity .3s}
.friend.showtag .tag{opacity:1}
.friend.spot .face{border-color:var(--cyan);background:rgba(103,232,249,.15);box-shadow:0 0 34px rgba(103,232,249,.75);transform:translateY(-10px)}
.friend.right .face{border-color:var(--green);background:rgba(52,211,153,.2);box-shadow:0 0 40px rgba(52,211,153,.9)}
.friend.shake .face{animation:shake .45s ease}
.friend.hint .face{animation:hintglow 1s ease-in-out infinite}
.friend.mine .face{background:rgba(253,186,116,.12)}
.ordbtn{font-size:clamp(46px,7vw,66px) !important}
.ordbtn sup{font-size:.5em}

/* Fase 4 · comparar */
.cmp{display:flex;align-items:center;gap:clamp(10px,2.6vw,30px)}
.pan{width:clamp(112px,34vw,340px);min-height:clamp(170px,34vh,290px);border-radius:32px;
  background:rgba(255,255,255,.06);border:5px solid rgba(103,232,249,.4);display:flex;flex-wrap:wrap;
  align-content:center;justify-content:center;gap:clamp(4px,1vw,10px);padding:14px;transition:all .25s;
  box-shadow:0 8px 0 rgba(0,0,0,.25)}
.pan:active{transform:translateY(4px)}
.pan .it{font-size:clamp(32px,5vw,50px);border-radius:50%;padding:2px;transition:all .3s;display:inline-block}
.pan .it.pair{box-shadow:0 0 0 4px var(--pc);background:color-mix(in srgb,var(--pc) 25%,transparent)}
.pan .it.extra{animation:hintglow 1s ease-in-out infinite;background:rgba(252,211,77,.25)}
.pan.num{flex-direction:column;flex-wrap:nowrap}
.pan .bignum{font-size:clamp(96px,16vw,160px);font-weight:700;line-height:1;color:#fff;text-shadow:0 0 30px rgba(103,232,249,.6)}
.pan .dots{display:none;flex-wrap:wrap;justify-content:center;gap:5px;max-width:90%;margin-top:6px}
.pan .dots i{width:clamp(14px,2vw,20px);aspect-ratio:1;border-radius:50%;background:var(--gold);box-shadow:0 0 8px rgba(252,211,77,.8)}
.pan.showdots .dots{display:flex}
.pan.right{border-color:var(--green);background:rgba(52,211,153,.18);box-shadow:0 0 50px rgba(52,211,153,.7)}
.pan.wrong{animation:shake .45s ease;opacity:.6}
.pan.glowside{border-color:var(--gold);box-shadow:0 0 50px rgba(252,211,77,.7)}
.eqbtn{width:clamp(80px,11vw,112px);aspect-ratio:1;border-radius:50%;font-size:clamp(52px,7.6vw,72px);font-weight:700;
  background:linear-gradient(160deg,#0891b2,#67e8f9);color:#0c1445;border:4px solid rgba(255,255,255,.4);
  box-shadow:0 8px 0 #155e75,0 0 26px rgba(103,232,249,.5);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.eqbtn:active{transform:translateY(5px);box-shadow:0 3px 0 #155e75}
.eqbtn.right{background:linear-gradient(160deg,#059669,#34d399);box-shadow:0 8px 0 #065f46,0 0 50px rgba(52,211,153,.8)}
.eqbtn.wrong{animation:shake .45s ease;opacity:.6}

/* ── Overlay de fase completa ── */
.overlay{position:fixed;inset:0;z-index:50;display:none;align-items:center;justify-content:center;
  background:rgba(8,10,35,.82);backdrop-filter:blur(8px);padding:20px}
.overlay.on{display:flex;animation:fadein .35s ease}
.ov-card{display:flex;flex-direction:column;align-items:center;gap:clamp(14px,3vh,26px);text-align:center}
.ov-icon{font-size:clamp(90px,14vw,140px);animation:joy 1s ease;filter:drop-shadow(0 0 30px rgba(252,211,77,.8))}
.ov-stars{display:flex;gap:14px;font-size:clamp(60px,9vw,90px)}
.ov-stars span{animation:popin .5s cubic-bezier(.34,1.56,.64,1) both}
.ov-stars .off{filter:grayscale(1) brightness(.35)}

/* ── Vitória ── */
#scr-victory{align-items:center;justify-content:center;gap:clamp(12px,2.6vh,24px);text-align:center;padding:16px;position:relative;overflow:hidden}
.v-rays{position:absolute;left:50%;top:42%;width:900px;height:900px;transform:translate(-50%,-50%);pointer-events:none;
  background:repeating-conic-gradient(from 0deg,rgba(252,211,77,.10) 0deg 10deg,transparent 10deg 20deg);
  animation:spin 30s linear infinite;border-radius:50%;
  mask:radial-gradient(circle,#000 20%,transparent 65%);-webkit-mask:radial-gradient(circle,#000 20%,transparent 65%)}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.v-castle{font-size:clamp(110px,18vw,190px);line-height:1;filter:drop-shadow(0 0 40px rgba(252,211,77,.9));animation:bob 2.6s ease-in-out infinite;position:relative}
.v-hero{position:absolute;right:-30%;bottom:0;font-size:.42em;animation:herobob2 1s ease-in-out infinite}
@keyframes herobob2{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.v-title{font-family:var(--orb);font-weight:900;font-size:clamp(30px,6vw,60px);letter-spacing:4px;
  background:linear-gradient(135deg,var(--gold),var(--green));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;position:relative}
.v-stars{font-size:clamp(26px,4vw,40px);letter-spacing:4px;position:relative}
.v-btns{display:flex;gap:clamp(12px,2.4vw,22px);flex-wrap:wrap;justify-content:center;position:relative}
.v-btn{min-width:clamp(120px,17vw,170px);padding:14px 18px;border-radius:26px;border:4px solid rgba(255,255,255,.3);
  display:flex;flex-direction:column;align-items:center;gap:4px;font-size:clamp(40px,6vw,54px);
  background:rgba(255,255,255,.08);box-shadow:0 7px 0 rgba(0,0,0,.35)}
.v-btn small{font-size:clamp(15px,1.8vw,18px);font-weight:600;color:var(--soft)}
.v-btn.main{background:linear-gradient(160deg,#4f46e5,#7c3aed);box-shadow:0 7px 0 #312e81,0 0 30px rgba(124,58,237,.6)}
.v-btn:active{transform:translateY(5px)}

/* ── Painel dos adultos ── */
.modal{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  background:rgba(5,6,20,.85);backdrop-filter:blur(10px);padding:16px}
.modal.on{display:flex}
.m-card{width:min(720px,100%);max-height:90vh;overflow-y:auto;background:#151a45;border:2px solid rgba(196,181,253,.35);
  border-radius:22px;padding:22px 24px;user-select:text;-webkit-user-select:text}
.m-card h2{font-size:24px;margin-bottom:6px}
.m-card h3{font-size:17px;margin:18px 0 8px;color:var(--cyan);letter-spacing:.5px}
.m-card p,.m-card li{font-size:16px;line-height:1.55;color:#e2e8f0}
.m-card ul{padding-left:20px}
.m-card table{width:100%;border-collapse:collapse;font-size:15px}
.m-card th,.m-card td{padding:8px 6px;border-bottom:1px solid rgba(255,255,255,.1);text-align:left;vertical-align:top}
.m-card th{color:var(--soft);font-weight:600}
.m-card code{background:rgba(103,232,249,.12);color:var(--cyan);padding:1px 6px;border-radius:5px}
.m-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.m-btn{padding:10px 16px;border-radius:12px;font-size:16px;font-weight:600;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22)}
.m-btn.danger{border-color:rgba(248,113,113,.6);color:#fecaca}
.m-btn.ok{background:var(--green-d);border-color:var(--green)}


/* ═══════════ M02 · Blocos de Lumos (material dourado) ═══════════
   Código de cores fixo: DEZENA = dourado · UNIDADE = azul */
:root{--seg:clamp(9px,1.45vh,14px)}
.d{color:var(--gold)}.u{color:var(--cyan)}
.numbtn .d,.pairbtn .d{color:#ffd84d;text-shadow:0 0 12px rgba(252,211,77,.6)}
.numbtn .u,.pairbtn .u{color:#5ef2ff;text-shadow:0 0 12px rgba(103,232,249,.6)}
.ped.lit .orb .d{color:#7c2d12}.ped.lit .orb .u{color:#0e5a6e}
body:not([data-module=m01]) .ped .orb{font-size:clamp(28px,4vw,44px)}
.numbtn.right .d,.numbtn.right .u{color:#fff}
.cube{display:inline-block;width:var(--seg);height:var(--seg);border-radius:3px;
  background:linear-gradient(140deg,#cffafe,#22d3ee 60%,#0891b2);box-shadow:0 0 6px rgba(103,232,249,.7);transition:transform .25s,box-shadow .25s}
.rod{display:inline-flex;flex-direction:column;gap:2px;padding:3px;border-radius:7px;
  background:rgba(252,211,77,.12);border:2px solid rgba(252,211,77,.85);box-shadow:0 0 14px rgba(252,211,77,.4);transition:transform .25s,box-shadow .25s}
.rod i{display:block;width:var(--seg);height:var(--seg);border-radius:3px;background:linear-gradient(140deg,#fff7c2,#fcd34d 60%,#f59e0b)}
.rod.new{animation:popin .5s cubic-bezier(.34,1.56,.64,1)}
.rod.focus,.cube.focus{transform:scale(1.22);box-shadow:0 0 0 3px #fff,0 0 26px #fff}
.blk{display:flex;align-items:flex-end;gap:clamp(4px,.9vw,9px);flex-wrap:wrap;justify-content:center}
.blk.big{--seg:clamp(11px,1.9vh,18px)}
.units{display:grid;grid-template-columns:repeat(2,var(--seg));gap:3px;align-content:end;padding:3px}
.pv{display:flex;gap:6px}
.pv>div{display:flex;flex-direction:column;align-items:center;min-width:clamp(52px,8vw,74px);padding:6px 8px;border-radius:14px;animation:popin .4s cubic-bezier(.34,1.56,.64,1)}
.pv b{font-size:clamp(36px,6vw,56px);line-height:1}
.pv small{font-size:14px;font-weight:700;opacity:.85}
.pvD{background:rgba(252,211,77,.16);border:3px solid var(--gold);color:var(--gold)}
.pvU{background:rgba(103,232,249,.13);border:3px solid var(--cyan);color:var(--cyan)}
.pvwrap{min-height:clamp(70px,10vh,96px);display:flex;align-items:center}
.numbtn.w2{width:clamp(112px,16vw,150px);font-size:clamp(46px,7vw,70px);aspect-ratio:auto;height:clamp(96px,14vw,132px)}
.tnum{font-size:clamp(70px,11vw,110px);font-weight:700;line-height:1;text-shadow:0 0 30px rgba(255,255,255,.25)}
/* Fábrica */
.tf-top{display:flex;align-items:flex-end;justify-content:center;gap:clamp(14px,3vw,34px);min-height:calc(var(--seg)*10 + 52px)}
.shelf{display:flex;gap:8px;align-items:flex-end;min-width:30px}
.tframe{display:grid;grid-template-columns:repeat(5,clamp(32px,5vw,50px));gap:6px;padding:10px;border-radius:18px;
  background:rgba(255,255,255,.06);border:3px dashed rgba(103,232,249,.5)}
.slot{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.05);border:2px solid rgba(255,255,255,.12);transition:all .25s}
.slot.on{background:linear-gradient(140deg,#cffafe,#22d3ee 60%,#0891b2);border-color:#cffafe;box-shadow:0 0 12px rgba(103,232,249,.8);animation:popin .3s}
.slot.focus{transform:scale(1.2);box-shadow:0 0 0 3px #fff,0 0 22px #fff}
.tframe.flash{animation:frameflash .6s ease}
@keyframes frameflash{50%{background:rgba(252,211,77,.45);border-color:var(--gold);transform:scale(1.06)}}
.field.loose{height:min(30vh,250px)}
.lc{position:absolute;transform:translate(-50%,-50%);width:clamp(52px,7vw,70px);aspect-ratio:1;background:none;border:none;
  display:flex;align-items:center;justify-content:center;transition:transform .3s,opacity .3s}
.lc .cube{--seg:clamp(26px,3.6vw,36px);border-radius:7px;animation:floaty 3s ease-in-out infinite}
.lc.gone{transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Escada / ferramentas */
.stair{display:flex;align-items:flex-end;justify-content:center;gap:clamp(5px,1.3vw,14px);min-height:calc(var(--seg)*10 + 130px)}
.scol{display:flex;flex-direction:column;align-items:center;gap:6px}
.scol b{font-size:clamp(20px,3.3vw,34px);font-weight:700}
.addrod,.addcube{width:clamp(104px,14vw,136px);height:clamp(104px,14vw,136px);border-radius:30px;border:4px solid rgba(255,255,255,.4);
  display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(36px,5vw,48px);font-weight:700}
.addrod{background:linear-gradient(160deg,#92400e,#fbbf24);box-shadow:0 9px 0 #78350f,0 0 30px rgba(252,211,77,.45);color:#3b1d00}
.addrod .rod{--seg:clamp(6px,.85vw,8px);background:rgba(0,0,0,.2)}
.addcube{background:linear-gradient(160deg,#0e7490,#67e8f9);box-shadow:0 9px 0 #155e75,0 0 30px rgba(103,232,249,.45);color:#082f49}
.addcube .cube{--seg:clamp(26px,3.4vw,34px);border-radius:7px}
.addrod:active,.addcube:active{transform:translateY(6px)}
.build{min-height:calc(var(--seg)*10 + 30px);min-width:min(320px,80vw);padding:12px;border-radius:24px;border:3px dashed rgba(255,255,255,.22);
  display:flex;align-items:flex-end;justify-content:center;background:rgba(255,255,255,.03)}
.target{display:flex;align-items:center;gap:clamp(12px,3vw,26px)}
.tools{display:flex;gap:clamp(22px,5vw,48px)}
.tgrp{display:flex;flex-direction:column;align-items:center;gap:10px}
.minus{width:clamp(60px,8vw,76px);height:52px;border-radius:16px;font-size:34px;font-weight:700;line-height:1;
  background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.28)}
/* Juntar / separar */
.compose{display:flex;align-items:center;gap:clamp(10px,2vw,22px)}
.ccard{display:flex;flex-direction:column;align-items:center;gap:10px;padding:12px 16px;border-radius:24px;min-width:clamp(96px,14vw,130px)}
.ccard.g{border:4px solid var(--gold);background:rgba(252,211,77,.08)}
.ccard.c{border:4px solid var(--cyan);background:rgba(103,232,249,.07)}
.ccard b{font-size:clamp(46px,8vw,78px);line-height:1}
.ccard.g b{color:var(--gold)}.ccard.c b{color:var(--cyan)}
.plus{font-size:clamp(44px,7vw,70px);font-weight:700}
.pairbtn{padding:14px clamp(14px,2.4vw,24px);border-radius:26px;font-size:clamp(32px,5vw,50px);font-weight:700;color:#fff;
  background:linear-gradient(160deg,#312e81,#5b21b6);border:4px solid rgba(255,255,255,.25);box-shadow:0 8px 0 #1e1b4b;
  animation:popin .4s cubic-bezier(.34,1.56,.64,1) both}
.pairbtn:active{transform:translateY(5px)}
.pairbtn.right{background:linear-gradient(160deg,#059669,#34d399);box-shadow:0 8px 0 #065f46,0 0 40px rgba(52,211,153,.8)}
.pairbtn.wrong{opacity:.5;animation:shake .45s ease}
/* Comparar */
.pan.c2{flex-direction:column;flex-wrap:nowrap;gap:12px}
.pan.c2 .bignum{font-size:clamp(64px,11vw,110px);font-weight:700;line-height:1}
.vs{font-size:clamp(40px,6vw,60px);font-weight:700;color:var(--soft)}
/* Quadro numérico */
.chart{display:grid;grid-template-columns:repeat(10,1fr);gap:3px;width:min(560px,94vw,62vh)}
.cell{aspect-ratio:1;border-radius:6px;padding:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);
  font-size:clamp(10px,1.8vw,17px);font-weight:600;color:rgba(255,255,255,.4);display:flex;align-items:center;justify-content:center;transition:all .35s}
.cell.tens{border-color:rgba(252,211,77,.55);color:rgba(252,211,77,.8)}
.cell.row-lit{background:rgba(103,232,249,.18);color:#e0f2fe;border-color:rgba(103,232,249,.45)}
.cell.lit{background:radial-gradient(circle,#fff7c2,var(--gold));color:#3b1d00;box-shadow:0 0 14px rgba(252,211,77,.9)}
.cell.shake{animation:shake .4s ease}
.chart.all .cell{background:radial-gradient(circle,#fff7c2,#fcd34d);color:#3b1d00;box-shadow:0 0 10px rgba(252,211,77,.7)}
/* Intro M02 */
.icube{position:absolute;--seg:clamp(16px,2.4vw,24px);transition:left .5s cubic-bezier(.4,0,.2,1),top .5s cubic-bezier(.4,0,.2,1),opacity .4s;
  animation:floaty 3s ease-in-out infinite}
.irod{position:absolute;left:80%;bottom:10%;--seg:clamp(10px,1.6vw,16px);opacity:0;transition:opacity .4s}
.irod.on{opacity:1;animation:popin .5s cubic-bezier(.34,1.56,.64,1)}

/* ═══════════ M03 · Porto de Dekus (oceano neon suavizado) ═══════════
   Cores dos grupos na soma: 1ª parcela = laranja · 2ª parcela = verde */
body[data-module=m03]{background:linear-gradient(180deg,#041526 0%,#08304a 65%,#0b4660 100%)}
body[data-module=m03] #glow{background:
  radial-gradient(ellipse 90% 50% at 50% 110%,rgba(45,212,191,.45),transparent 70%),
  radial-gradient(ellipse 60% 40% at 85% 0%,rgba(251,146,60,.3),transparent 70%),
  radial-gradient(ellipse 50% 40% at 10% 10%,rgba(103,232,249,.25),transparent 70%)}
#waves{display:none;position:fixed;left:0;right:0;bottom:0;height:70px;z-index:1;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 70'%3E%3Cpath d='M0 30 Q30 12 60 30 T120 30 T180 30 T240 30 V70 H0Z' fill='%2367e8f9' fill-opacity='.3'/%3E%3C/svg%3E") repeat-x;
  background-size:240px 70px;animation:wave 9s linear infinite}
@keyframes wave{to{background-position-x:240px}}
.ea{color:#fb923c}.eb{color:#a3e635}
.crate{display:inline-block;width:var(--cr,clamp(24px,min(4.4vw,5.2vh),44px));aspect-ratio:1;border-radius:6px;position:relative;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.18),0 3px 0 rgba(0,0,0,.3);transition:transform .25s,box-shadow .25s}
.crate::before,.crate::after{content:'';position:absolute;background:rgba(0,0,0,.2);border-radius:2px}
.crate::before{left:46%;right:46%;top:16%;bottom:16%}
.crate::after{top:46%;bottom:46%;left:16%;right:16%}
.crate.ca{background:linear-gradient(160deg,#fdba74,#f97316 60%,#c2410c)}
.crate.cb{background:linear-gradient(160deg,#d9f99d,#84cc16 60%,#4d7c0f)}
.crate.in{animation:popin .35s cubic-bezier(.34,1.56,.64,1)}
.crate.focus{transform:scale(1.25);box-shadow:0 0 0 3px #fff,0 0 22px #fff}
.tapcrate{background:none;border:none;padding:3px;transition:transform .3s,opacity .3s}
.tapcrate .crate{--cr:clamp(34px,min(6vw,6.6vh),56px)}
.tapcrate.gone{transform:scale(0);opacity:0;pointer-events:none}
.docks{display:flex;gap:clamp(12px,4vw,40px);justify-content:center;flex-wrap:wrap}
.dock{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:center;max-width:min(48vw,440px);
  padding:6px 10px;border-radius:18px;background:rgba(120,72,30,.35);border:3px solid rgba(253,186,116,.35);min-height:clamp(52px,9vh,76px)}
.dock .lbl{font-size:clamp(36px,5.4vw,52px);font-weight:700;margin-right:8px}
.ship{position:relative;display:flex;flex-direction:column;align-items:center;animation:sail 3.4s ease-in-out infinite}
@keyframes sail{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-5px) rotate(1deg)}}
.ship.rock{animation:rock .7s ease}
@keyframes rock{20%{transform:rotate(-7deg)}50%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}
.hold{display:flex;flex-wrap:wrap-reverse;justify-content:center;align-items:flex-end;gap:4px;
  min-width:clamp(200px,34vw,340px);max-width:min(94vw,440px);min-height:clamp(44px,6.6vw,62px);padding:4px 10px}
.hull{width:clamp(230px,40vw,400px);height:clamp(30px,min(5.8vw,6.4vh),54px);background:linear-gradient(180deg,#9a3412,#5b1f05);
  clip-path:polygon(0 0,100% 0,90% 100%,10% 100%);position:relative;display:flex;align-items:center;justify-content:center}
.hull.wide{width:clamp(300px,62vw,560px)}
.hull::before{content:'';position:absolute;left:0;right:0;top:7px;height:5px;background:#fde68a;opacity:.7}
.drops{font-size:22px;position:relative;z-index:2;letter-spacing:2px}
.lid{display:flex;align-items:center;justify-content:center;min-width:clamp(78px,12vw,110px);height:clamp(46px,7vw,64px);border-radius:12px;
  background:linear-gradient(160deg,#fdba74,#c2410c);border:3px solid #fed7aa;box-shadow:0 0 18px rgba(251,146,60,.6);margin-right:6px;transition:transform .25s,box-shadow .25s}
.lid b{font-size:clamp(32px,5vw,46px);color:#3b1003}
.lid.focus{transform:scale(1.15);box-shadow:0 0 0 4px #fff,0 0 30px #fff}
.eq{display:flex;align-items:center;gap:clamp(8px,1.6vw,16px);font-size:clamp(38px,6.2vw,62px);font-weight:700;padding:2px 18px;border-radius:20px;background:rgba(0,0,0,.25)}
.eo{color:#e2e8f0}.er{color:#fff;min-width:1.2em;text-align:center}
.eq .done{color:var(--gold);text-shadow:0 0 20px rgba(252,211,77,.8);animation:joy .6s}
.eqw{min-height:clamp(54px,8vw,76px);display:flex;align-items:center}
.twins{display:flex;gap:clamp(8px,3vw,30px);flex-wrap:wrap;justify-content:center}
.twins .hull{width:clamp(150px,30vw,260px)}
.twins .hold{min-width:clamp(140px,26vw,240px);max-width:min(45vw,260px)}
.slot.on.ca{background:linear-gradient(160deg,#fdba74,#f97316 60%,#c2410c);border-color:#fed7aa;box-shadow:0 0 10px rgba(251,146,60,.7)}
.slot.on.cb{background:linear-gradient(160deg,#d9f99d,#84cc16 60%,#4d7c0f);border-color:#ecfccb;box-shadow:0 0 10px rgba(163,230,53,.7)}
.frames{display:flex;gap:clamp(6px,1.4vw,12px);flex-wrap:nowrap;justify-content:center}
.frames .tframe{grid-template-columns:repeat(5,clamp(22px,min(3.6vw,5.4vh),40px));gap:4px;padding:7px}
.row2{display:flex;gap:clamp(10px,3vw,30px);align-items:center;justify-content:center;flex-wrap:wrap}
.scene{display:flex;gap:clamp(16px,4vw,44px);align-items:center;justify-content:center;min-height:clamp(130px,24vh,220px);
  padding:12px 18px;border-radius:26px;background:rgba(255,255,255,.04);border:2px solid rgba(103,232,249,.22)}
.grp{display:flex;flex-wrap:wrap;gap:6px;max-width:min(40vw,320px);justify-content:center}
.sit{font-size:clamp(38px,6.2vw,60px);display:inline-block;animation:popin .45s cubic-bezier(.34,1.56,.64,1) both;transition:transform .2s,filter .2s}
.sit.slide{animation:slidein .6s cubic-bezier(.34,1.3,.64,1) both}
@keyframes slidein{from{transform:translateX(120px);opacity:0}to{transform:none;opacity:1}}
.sit.focus{transform:scale(1.3);filter:drop-shadow(0 0 12px #fff)}
/* Intro M03 */
.iship{position:absolute;bottom:14%;left:58%;transform:scale(.8);transform-origin:bottom center}
.icrate{position:absolute;transition:left .6s cubic-bezier(.4,0,.2,1),top .6s cubic-bezier(.4,0,.2,1),opacity .3s}

@media (max-width:640px){
  #hud{gap:8px;padding:8px}
  .hud-btn{width:52px;height:52px;font-size:24px;border-radius:16px}
  #hud-pixel{width:46px;height:46px}
  #bubble{font-size:16px;min-height:52px;padding:8px 12px}
  .field{height:40vh}
}
@media (max-height:560px){
  #phead{padding-top:4px}
  .rdot{width:24px;height:24px;font-size:14px}
}

/* Centraliza quando cabe; se não couber, nada é cortado (rola em vez de esconder) */
#stage::before{content:'';margin-top:auto}
#stage::after{content:'';margin-bottom:auto}
/* Telas baixas (notebook 720p, celular deitado): tudo um pouco mais compacto */
@media (max-height:740px){
  #hud{padding:6px 12px}
  .hud-btn{width:54px;height:54px;font-size:26px}
  #hud-pixel{width:50px;height:50px}
  #bubble{min-height:54px;font-size:clamp(16px,2vw,21px);padding:6px 14px}
  #stage{gap:clamp(8px,2vh,18px);padding:8px}
  .numbtn{width:clamp(84px,11vw,112px);border-radius:24px;font-size:clamp(46px,7vh,66px)}
  .numbtn.w2{width:clamp(96px,12vw,128px);height:clamp(80px,12vh,104px)}
}
@media (max-height:480px){
  #hud{padding:4px 10px}
  .hud-btn{width:44px;height:44px;font-size:22px;border-radius:14px}
  #hud-pixel{width:40px;height:40px}
  #bubble{min-height:44px;font-size:15px}
  #phead{padding-top:2px}
  .rdot{width:20px;height:20px;font-size:12px}
  #stage{gap:4px;padding:2px 8px}
  #phead{display:none}
  .numbtn{width:68px;font-size:40px;border-radius:18px;box-shadow:0 5px 0 #3730a3}
  .numbtn.w2{width:84px;height:62px;font-size:38px}
  .pairbtn{font-size:28px;padding:8px 14px}
  .eq{font-size:34px}
  .field,.field.loose{height:42vh}
  .tf-top{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}

/* ═══════════ App shell: start title, hub, adult area, safe areas ═══════════ */
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
body[data-module=m03] #waves{display:block}
.st-title{font-size:clamp(36px,11vw,112px);letter-spacing:clamp(2px,.6vw,8px)}
.st-note span{opacity:.6;font-size:13px}
#scr-hub #hub-wrap{position:absolute;inset:0}
#hub-svg{position:absolute;inset:0;width:100%;height:100%}
.hubnode.soon{filter:grayscale(.7) brightness(.6);box-shadow:none}
.mnode:not(.done):not(.current):not(.locked){border-color:var(--nc)}
.hlabel{position:absolute;top:100%;left:50%;transform:translateX(-50%);margin-top:4px;display:flex;flex-direction:column;align-items:center;
  white-space:nowrap;line-height:1.15}
.hlabel b{font-size:clamp(14px,1.9vw,20px);font-weight:700}
.hlabel small{font-size:clamp(11px,1.4vw,15px);font-weight:500;color:var(--soft)}
.adult-btn.hint{border-color:var(--gold)}
/* Generous hit area around each constellation point */
.cnode circle.hit{fill:transparent !important;stroke:none !important;animation:none !important}
/* Adult area */
.m-label{display:block;margin:8px 0 4px;font-size:15px;color:var(--soft)}
.m-input{width:100%;padding:10px;border-radius:10px;background:#0d1030;color:var(--text);border:1px solid rgba(255,255,255,.25);
  font-family:monospace;font-size:13px;word-break:break-all;user-select:text;-webkit-user-select:text}
.m-card a{color:var(--cyan)}
.m-version{margin-top:14px;font-size:13px !important;opacity:.6}
.gate-opt{min-width:72px;min-height:52px;font-size:20px}
/* Number chart: on short screens the cells stretch sideways to stay tappable */
@media (max-height:480px){
  .chart{width:94vw;gap:2px}
  .cell{aspect-ratio:auto;height:calc((100vh - 72px)/10 - 3px);font-size:12px}
}
/* Build rounds: keep the tools on screen without scrolling on short or narrow phones */
@media (max-height:480px){
  .tgrp{flex-direction:row;gap:6px;align-items:center}
  .tools{gap:14px}
  .addrod,.addcube{width:68px;height:60px;border-radius:18px;font-size:26px;box-shadow:0 4px 0 rgba(0,0,0,.35)}
  .addrod .rod{--seg:4px}
  .addcube .cube{--seg:20px}
  .minus{width:52px;height:48px;font-size:28px}
  .tnum{font-size:44px}
  .pv b{font-size:26px}.pv>div{min-width:40px;padding:2px 6px}.pv small{font-size:11px}
  .build{--seg:7px;min-height:calc(var(--seg)*10 + 30px);padding:4px}
  .stair{--seg:8px;min-height:0}
}
@media (max-height:700px) and (max-width:480px){
  .addrod,.addcube{width:92px;height:84px}
  .minus{height:48px}
  .tnum{font-size:56px}
}