:root{--ink:#fff;--panel:rgba(30,12,70,.72);--gold:#ffd54a;--accent:#ff4f9a;--btn:#ffb21f;--btn2:#e2670b}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2a1158;color:var(--ink);
  font-family:"Trebuchet MS","Arial Rounded MT Bold",system-ui,sans-serif;user-select:none;-webkit-user-select:none}
#app{position:fixed;inset:0;max-width:640px;margin:0 auto;
  background:radial-gradient(circle at 20% 10%,#7b3fe4 0,transparent 45%),radial-gradient(circle at 85% 80%,#ff5fa2 0,transparent 40%),linear-gradient(#3b1a86,#1b0b44)}
.screen{position:absolute;inset:0;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.hidden{display:none!important}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
.topbar{display:flex;gap:8px;padding:10px 12px;align-items:center;z-index:2}
.pill{background:var(--panel);border-radius:999px;padding:6px 12px;font-size:15px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.15);white-space:nowrap}
#inv{flex:1;overflow:hidden;text-overflow:ellipsis}
.btn:active,.big:active,.boost:active,.node:active{transform:scale(.92)}
#giftBtn.ready{animation:wobble 1.2s infinite}
@keyframes wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-12deg) scale(1.1)}40%{transform:rotate(10deg) scale(1.1)}60%{transform:rotate(0)}}

/* map */
#mapScroll{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:none}
#mapScroll::-webkit-scrollbar{display:none}
#mapInner{position:relative;width:100%}
.band{position:absolute;left:0;right:0}
.band h3{position:absolute;top:24px;left:0;right:0;text-align:center;margin:0;font-size:22px;letter-spacing:1px;
  text-shadow:0 3px 0 rgba(0,0,0,.35);opacity:.9}
.deco{position:absolute;border-radius:50%;opacity:.35;pointer-events:none}
#mapInner svg{position:absolute;left:0;top:0;pointer-events:none}
.node{position:absolute;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;font-weight:bold;font-size:20px;
  background:radial-gradient(circle at 35% 30%,#fff3a6,#ffb21f 55%,#c25e00);box-shadow:0 5px 0 #7a3a00,0 8px 14px rgba(0,0,0,.4);
  text-shadow:0 2px 0 rgba(0,0,0,.35);transition:transform .1s}
.node.locked{background:radial-gradient(circle at 35% 30%,#ddd,#888 60%,#555);box-shadow:0 5px 0 #333;color:#eee;cursor:default}
.node.cur{animation:bob 1.1s ease-in-out infinite;background:radial-gradient(circle at 35% 30%,#ffd0f0,#ff4f9a 55%,#a3005a);box-shadow:0 5px 0 #6a0039,0 0 0 6px rgba(255,255,255,.35),0 8px 16px rgba(0,0,0,.4)}
@keyframes bob{50%{transform:translateY(-6px)}}
.node .stars{position:absolute;left:50%;top:52px;transform:translateX(-50%);font-size:14px;color:var(--gold);letter-spacing:-2px;text-shadow:0 1px 2px #000;white-space:nowrap}
.node .stars i{font-style:normal;color:rgba(255,255,255,.3)}

/* hud */
#hud{display:flex;gap:8px;padding:8px 10px;align-items:stretch}
#hud>div{background:var(--panel);border-radius:16px;padding:6px 10px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
#hudMoves{text-align:center;min-width:70px}
#hudMoves b{display:block;font-size:34px;line-height:1;color:var(--gold);text-shadow:0 3px 0 #a35b00}
small{font-size:12px;opacity:.85;text-transform:uppercase;letter-spacing:1px}
#hudGoals{flex:1;display:flex;gap:6px;justify-content:center;align-items:center}
.goal{position:relative;display:flex;flex-direction:column;align-items:center;font-weight:bold;font-size:16px}
.goal img{width:34px;height:34px}
.goal .em{font-size:28px;line-height:34px}
.goal.done b{color:#7dff8a}
#hudScore{min-width:120px;text-align:right}
#hudScore b{display:block;font-size:20px}
#bar{position:relative;height:10px;border-radius:5px;background:rgba(0,0,0,.4);margin-top:6px}
#barFill{position:absolute;left:0;top:0;bottom:0;width:100%;border-radius:5px;background:linear-gradient(90deg,#ffe066,#ff8a1f);
  transform:scaleX(0);transform-origin:left;transition:transform .3s} /* transform, not width: no layout per frame mid-cascade */
.st{position:absolute;top:-8px;margin-left:-9px;font-size:18px;color:rgba(255,255,255,.35);text-shadow:0 1px 2px #000;transition:transform .3s,color .3s}
.st.on{color:var(--gold);transform:scale(1.25)}
#boardWrap{flex:1;position:relative;min-height:0}
#cv,#cvbg{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#boosters{display:flex;justify-content:center;gap:14px;padding:8px 10px 14px}
.boost{position:relative;width:60px;height:60px;border-radius:18px;font-size:28px;background:var(--panel);box-shadow:inset 0 0 0 2px rgba(255,255,255,.2),0 4px 0 rgba(0,0,0,.35)}
.boost span{position:absolute;right:-4px;top:-4px;min-width:22px;height:22px;border-radius:11px;background:var(--accent);font-size:13px;line-height:22px;font-weight:bold}
.boost span:empty{display:none}
.boost.active{box-shadow:0 0 0 3px var(--gold),0 0 18px var(--gold)}
#word{position:absolute;left:0;right:0;top:40%;text-align:center;pointer-events:none;font-size:52px;font-weight:900;opacity:0;
  color:#fff;-webkit-text-stroke:2px #8a1e7a;text-shadow:0 4px 0 #8a1e7a,0 8px 20px rgba(0,0,0,.5)}
#word.show{animation:word 1.1s ease-out}
#word{will-change:transform,opacity}
@keyframes word{0%{opacity:0;transform:scale(.3) rotate(-8deg)}20%{opacity:1;transform:scale(1.15) rotate(3deg)}35%{transform:scale(1)}75%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}
#tip{position:absolute;left:16px;right:16px;bottom:12px;background:rgba(255,255,255,.95);color:#4a1f7a;border-radius:16px;padding:12px 14px;
  font-weight:bold;text-align:center;box-shadow:0 6px 18px rgba(0,0,0,.35);animation:pop .3s}

/* modal */
#modal{position:absolute;inset:0;background:rgba(10,0,30,.6);display:flex;align-items:center;justify-content:center;z-index:10;padding:16px}
.card{width:100%;max-width:360px;background:linear-gradient(#fff6e6,#ffe1b8);color:#5a2a00;border-radius:26px;padding:20px 18px;text-align:center;
  box-shadow:0 0 0 5px #ffb21f,0 0 0 9px #a35b00,0 20px 40px rgba(0,0,0,.5);animation:pop .35s cubic-bezier(.3,1.6,.6,1)}
@keyframes pop{0%{transform:scale(.5);opacity:0}100%{transform:scale(1);opacity:1}}
.card h2{margin:0 0 8px;font-size:28px;color:#c2318a;text-shadow:0 2px 0 #fff}
.card p{margin:8px 0}
.big{display:inline-block;margin:6px 4px;padding:12px 26px;border-radius:999px;font-size:20px;font-weight:bold;color:#fff;
  background:linear-gradient(#7ee05a,#2c9a16);box-shadow:0 5px 0 #1d6a0c;text-shadow:0 2px 0 rgba(0,0,0,.3)}
.big.alt{background:linear-gradient(#ffb0d8,#e2468f);box-shadow:0 5px 0 #8c1c55}
.big.gray{background:linear-gradient(#bbb,#777);box-shadow:0 5px 0 #444}
.goals{display:flex;gap:14px;justify-content:center;margin:12px 0;font-weight:bold;font-size:18px}
.goals div{display:flex;flex-direction:column;align-items:center}
.goals img{width:44px;height:44px}
.bigstars{font-size:54px;letter-spacing:4px;margin:6px 0}
.bigstars i{font-style:normal;color:#e0c9a6;display:inline-block}
.bigstars i.on{color:#ffbf00;text-shadow:0 3px 0 #a35b00;animation:pop .4s cubic-bezier(.3,1.8,.6,1) both}
label.opt{display:flex;gap:8px;align-items:center;justify-content:center;margin:10px 0;font-weight:bold}
.chest{font-size:72px;display:inline-block;animation:wobble 1s 2}
label.opt small{text-transform:none;letter-spacing:0;font-weight:normal}
.big.toggle{min-width:250px}