:root{
  --panel: rgba(255,248,242,.86);
  --ink:#4b2f4a; --ink-soft:#8a6784;
  --pink:#ff7aa2; --sky:#7cc8ff; --lemon:#ffd84d; --mint:#6fdcaa; --lav:#b79bff;
  --stitch: rgba(255,255,255,.75);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --panel: rgba(58,40,66,.88); --ink:#fff0f6; --ink-soft:#d8b9d0; --stitch: rgba(255,255,255,.35); }
}
:root[data-theme="dark"]{ --panel: rgba(58,40,66,.88); --ink:#fff0f6; --ink-soft:#d8b9d0; --stitch: rgba(255,255,255,.35); }
html{ scroll-padding-top:env(safe-area-inset-top,0px); }
html,body{ height:100%; margin:0; overflow:hidden; }
body{
  background:#ffe6d6; color:var(--ink);
  font-family:'Fredoka', ui-rounded, 'Nunito', 'Segoe UI', system-ui, sans-serif;
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; touch-action:none;
}
*{ box-sizing:border-box; }
canvas#game{ position:fixed; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
button{ font-family:inherit; color:inherit; }
button:focus-visible{ outline:3px solid var(--sky); outline-offset:2px; }

.panel{
  background:var(--panel); border-radius:20px; padding:8px 14px 9px;
  box-shadow:0 4px 0 rgba(140,70,100,.18), 0 10px 24px rgba(140,70,100,.18);
  outline:2px dashed var(--stitch); outline-offset:-6px;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.hud-tl{ position:fixed; top:0; left:0; padding:calc(env(safe-area-inset-top,0px) + 10px) 0 0 calc(env(safe-area-inset-left,0px) + 10px); pointer-events:none; }
.hud-tr{ position:fixed; top:0; right:0; padding:calc(env(safe-area-inset-top,0px) + 10px) calc(env(safe-area-inset-right,0px) + 10px) 0 0; display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.best{ font-size:13px; font-weight:600; color:var(--ink-soft); display:flex; align-items:center; gap:6px; }
.best b{ color:var(--ink); font-size:16px; }
.now{ display:flex; align-items:baseline; gap:8px; }
.now .lbl{ font-size:12px; font-weight:600; color:var(--pink); letter-spacing:.02em; }
.now b{ font-size:30px; font-weight:700; line-height:1.05; font-variant-numeric:tabular-nums; }
.formula{ font-size:13px; font-weight:500; color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.parts{ font-size:11px; color:var(--ink-soft); opacity:.85; margin-top:1px; }
.lvl{ text-align:right; max-width:min(46vw,300px); }
.lvbadge{ font-size:13px; font-weight:600; color:var(--ink-soft); }
.lvbadge b{ font-size:24px; color:var(--ink); }
.next{ font-size:12px; line-height:1.35; color:var(--ink-soft); }
.next .ok{ color:#2fae6b; font-weight:600; } .next .no{ color:#e0567a; font-weight:600; }
.btns{ display:flex; gap:6px; }
.btns button{
  width:40px; height:40px; border-radius:14px; border:none; cursor:pointer; font-size:19px;
  background:var(--panel); box-shadow:0 3px 0 rgba(140,70,100,.22); outline:2px dashed var(--stitch); outline-offset:-5px;
  transition:transform .1s;
}
.btns button:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(140,70,100,.22); }
.btns button.on{ background:#ffd1dc; }
.btns button.off{ position:relative; opacity:.55; }
.btns button.off::after{ content:''; position:absolute; left:9px; right:9px; top:50%; height:3px; border-radius:2px; background:#e0527a; transform:rotate(-45deg); }
.btns button.warn{ background:#ff9fb6; width:auto; padding:0 10px; font-size:13px; font-weight:600; }

#hotbar{
  position:fixed; left:50%; bottom:0; transform:translateX(-50%);
  padding:8px 8px calc(env(safe-area-inset-bottom,0px) + 8px); display:flex; gap:6px;
  max-width:100vw; overflow-x:auto; scrollbar-width:none;
}
#hotbar::-webkit-scrollbar{ display:none; }
.slot{
  position:relative; flex:0 0 auto; width:50px; height:50px; border-radius:14px; border:none; cursor:pointer; padding:6px;
  background:var(--panel); box-shadow:0 4px 0 rgba(140,70,100,.2); outline:2px dashed var(--stitch); outline-offset:-5px;
  transition:transform .12s;
}
.slot img{ width:100%; height:100%; object-fit:contain; display:block; image-rendering:auto; }
.slot .key{ position:absolute; top:1px; left:5px; font-size:10px; font-weight:600; color:var(--ink-soft); }
.slot.sel{ transform:translateY(-6px) scale(1.06); background:#fff; box-shadow:0 6px 0 var(--pink), 0 10px 18px rgba(255,122,162,.35); }
.slot.locked img{ filter:grayscale(1) brightness(1.1); opacity:.35; }
.slot .lock{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:var(--ink-soft); }

.hint, .toast{
  position:fixed; left:50%; transform:translateX(-50%); text-align:center; pointer-events:none;
  font-size:13px; font-weight:500; padding:7px 14px; border-radius:999px; background:var(--panel);
  box-shadow:0 4px 14px rgba(140,70,100,.18); max-width:92vw; transition:opacity .5s, transform .3s;
}
.hint{ bottom:calc(env(safe-area-inset-bottom,0px) + 80px); }
body.touch .hint{ bottom:auto; top:calc(env(safe-area-inset-top,0px) + 108px); }
.toast{ top:calc(env(safe-area-inset-top,0px) + 108px); opacity:0; transform:translate(-50%,-8px); font-weight:600; }
body.touch .toast{ top:calc(env(safe-area-inset-top,0px) + 150px); }
.toast.show{ opacity:1; transform:translate(-50%,0); }
.hint.hide{ opacity:0; }

.stick{
  display:none; position:fixed; bottom:calc(env(safe-area-inset-bottom,0px) + 78px);
  width:124px; height:124px; border-radius:50%;
  background:rgba(255,255,255,.28); outline:3px dashed rgba(255,255,255,.8); outline-offset:-8px;
  box-shadow:inset 0 -6px 14px rgba(140,70,100,.15); touch-action:none;
}
.stick.l{ left:calc(env(safe-area-inset-left,0px) + 14px); }
.stick.r{ right:calc(env(safe-area-inset-right,0px) + 14px); }
.stick .knob{
  position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff, #ffc2d4 60%, #ff90b0); box-shadow:0 4px 0 rgba(200,70,110,.35);
}
.stick.r .knob{ background:radial-gradient(circle at 35% 30%, #fff, #bfe6ff 60%, #7cc8ff); box-shadow:0 4px 0 rgba(60,130,200,.35); }
.stick span{ position:absolute; bottom:-20px; width:100%; text-align:center; font-size:11px; font-weight:600; color:#fff; text-shadow:0 1px 3px rgba(100,40,70,.5); }
body.touch .stick{ display:block; }
body.touch #hotbar .slot{ width:44px; height:44px; }

#banner{
  position:fixed; left:50%; top:30%; transform:translate(-50%,-50%) scale(.3); opacity:0; pointer-events:none; text-align:center;
}
#banner.show{ animation:bannerPop 2.6s cubic-bezier(.2,1.4,.4,1) forwards; }
@keyframes bannerPop{
  0%{ opacity:0; transform:translate(-50%,-50%) scale(.3) rotate(-6deg); }
  14%{ opacity:1; transform:translate(-50%,-50%) scale(1.08) rotate(2deg); }
  22%{ transform:translate(-50%,-50%) scale(1) rotate(0); }
  82%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-62%) scale(.95); }
}
#banner .t{
  font-size:clamp(40px,11vw,86px); font-weight:700; line-height:1; color:#fff;
  -webkit-text-stroke:3px #ff5f8f; paint-order:stroke fill;
  text-shadow:0 6px 0 #d8487a, 0 12px 24px rgba(200,60,110,.35);
}
#banner .s{ margin-top:10px; display:inline-block; font-size:16px; font-weight:600; background:var(--panel); padding:6px 14px; border-radius:999px; }

.modal{
  position:fixed; inset:0; display:none; align-items:center; justify-content:center; padding:16px;
  background:radial-gradient(circle at 50% 40%, rgba(255,220,235,.72), rgba(255,190,215,.82));
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); overflow:auto;
}
.modal.show{ display:flex; }
.card{
  background:#fff8f3; color:#4b2f4a; border-radius:32px; padding:22px 22px 18px; max-width:560px; width:100%;
  box-shadow:0 8px 0 rgba(200,90,130,.25), 0 24px 60px rgba(160,60,110,.3);
  outline:3px dashed #ffc6d8; outline-offset:-10px; text-align:center;
}
.card h1{ margin:2px 0 0; font-size:clamp(34px,8vw,52px); line-height:1; font-weight:700; color:#fff; -webkit-text-stroke:2.5px #ff6f9c; paint-order:stroke fill; text-shadow:0 5px 0 #e5578a; }
.card .sub{ margin:12px 0 14px; font-size:15px; color:#8a6784; }
.pickrow{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:16px; }
.popit{
  display:grid; grid-template-columns:repeat(5,1fr); gap:9px; padding:16px; border-radius:38px;
  background:linear-gradient(135deg,#ff9aa8,#ffc3a0 25%,#fff0a0 45%,#b6f0c0 65%,#a8dcff 82%,#cdb8ff);
  box-shadow:inset 0 -7px 0 rgba(0,0,0,.08), inset 0 4px 0 rgba(255,255,255,.5), 0 10px 26px rgba(160,60,110,.2);
}
.bub{
  width:min(46px,11vw); aspect-ratio:1; border-radius:50%; border:none; cursor:pointer; padding:0;
  background:radial-gradient(circle at 34% 28%, rgba(255,255,255,.9), rgba(255,255,255,0) 38%), var(--c);
  box-shadow:inset 0 -6px 9px rgba(0,0,0,.2), 0 4px 0 rgba(0,0,0,.14);
  transition:transform .12s, box-shadow .12s, background .12s;
}
.bub.popped{
  background:radial-gradient(circle at 62% 72%, rgba(255,255,255,.55), rgba(255,255,255,0) 42%), var(--c);
  box-shadow:inset 0 7px 11px rgba(0,0,0,.32), 0 1px 0 rgba(0,0,0,.1); transform:scale(.93);
}
.bub.sel{ outline:3px solid #fff; outline-offset:3px; }
#preview{ width:150px; height:118px; background:radial-gradient(circle at 50% 80%, #ffe3ec, #fff8f3 70%); border-radius:24px; }
.go{
  margin-top:16px; border:none; cursor:pointer; font-size:20px; font-weight:700; color:#fff; padding:12px 28px; border-radius:999px;
  background:linear-gradient(#ff8db0,#ff6f9c); box-shadow:0 5px 0 #d8487a, 0 10px 20px rgba(216,72,122,.35);
  outline:2px dashed rgba(255,255,255,.7); outline-offset:-6px;
}
.go:active{ transform:translateY(3px); box-shadow:0 2px 0 #d8487a; }
.how{ font-size:13px; line-height:1.5; color:#8a6784; margin:14px auto 0; max-width:440px; }
.brand{ display:inline-flex; align-items:center; gap:8px; margin-top:12px; font-size:12px; color:#a88aa2; text-decoration:none; opacity:.85; transition:opacity .15s; }
.brand:hover{ opacity:1; }
.brand img{ height:28px; width:auto; display:block; }
@media (max-width:560px){
  .now b{ font-size:24px; } .parts{ display:none; } .formula{ font-size:12px; }
  .panel{ padding:7px 11px 8px; }
  .btns button{ width:36px; height:36px; font-size:17px; }
}
@media (prefers-reduced-motion: reduce){
  #banner.show{ animation-duration:1.6s; }
}