:root{
  --bg:#fff4e0; --ink:#3a2a20; --card:#ffffff; --muted:#7a6a5c;
  --brand:#ff7a3d; --brand-d:#e05f22; --teal:#2bb3a3; --teal-d:#1d8f82;
  --gold:#ffcc33; --ok:#3cc47c; --ok-d:#2a9a5f; --pink:#ff9db1; --violet:#7c6cf2;
  --shadow:0 6px 0 rgba(58,42,32,.14);
  --accent:#ff7a3d;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
body{
  font-family:'Baloo 2',system-ui,sans-serif;color:var(--ink);
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;
}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
a{color:inherit}
canvas.stage{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}

/* ---------- top bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;align-items:center;gap:8px;padding:10px 12px;pointer-events:none;flex-wrap:nowrap}
.topbar > *{pointer-events:auto}
.spacer{flex:1;pointer-events:none!important}
.chip{background:#fff;border-radius:999px;box-shadow:var(--shadow);min-height:44px;display:flex;align-items:center;gap:6px;padding:4px 14px;font-weight:800;white-space:nowrap}
.icon-btn{width:44px;height:44px;flex:none;border-radius:50%;background:#fff;box-shadow:var(--shadow);font-size:1.3rem;display:grid;place-items:center;text-decoration:none}
.icon-btn:active,.chip:active{transform:translateY(3px)}
.seg{display:flex;background:#fff;border-radius:999px;padding:4px;box-shadow:var(--shadow);flex:none}
.seg button{padding:2px 12px;border-radius:999px;font-weight:800;min-height:36px;white-space:nowrap}
.seg button[aria-pressed="true"]{background:var(--accent);color:#fff}
.title-chip .ico{font-size:1.4rem}
.dots{display:flex;gap:6px;align-items:center}
.dots i{width:14px;height:14px;border-radius:50%;background:rgba(58,42,32,.15);display:block}
.dots i.on{background:var(--gold);box-shadow:0 0 0 2px #fff}

/* ---------- guide bar ---------- */
.guidebar{position:fixed;left:0;right:0;bottom:0;z-index:15;display:flex;align-items:flex-end;gap:10px;padding:0 12px max(10px,env(safe-area-inset-bottom));pointer-events:none}
.guidebar > *{pointer-events:auto}
#guideCanvas{width:112px;height:112px;flex:none;border-radius:50%;background:radial-gradient(circle at 50% 40%,#fff,var(--accent-l,#ffe9d6));box-shadow:var(--shadow);border:4px solid #fff;cursor:pointer}
.bubble{position:relative;background:#fff;border-radius:22px;padding:10px 50px 10px 16px;font-size:1.25rem;font-weight:700;line-height:1.25;box-shadow:var(--shadow);min-height:60px;display:flex;align-items:center;max-width:560px;flex:1;margin-bottom:24px}
.bubble p{margin:0}
.bubble::before{content:'';position:absolute;left:-12px;bottom:18px;border:12px solid transparent;border-right-color:#fff;border-left:0}
.bubble .icon-btn{position:absolute;right:7px;top:50%;transform:translateY(-50%);width:36px;height:36px;font-size:1rem;box-shadow:none;background:var(--bg)}
#actions{display:flex;gap:10px;margin-left:auto;margin-bottom:24px}
.big-btn{background:var(--ok);color:#fff;font-size:1.45rem;font-weight:800;padding:8px 28px;border-radius:999px;box-shadow:0 6px 0 var(--ok-d);min-height:58px;white-space:nowrap}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--ok-d)}
.big-btn.alt{background:var(--brand);box-shadow:0 6px 0 var(--brand-d)}
.big-btn.soft{background:#fff;color:var(--ink);box-shadow:var(--shadow)}

/* ---------- choices ---------- */
.choices{position:fixed;left:0;right:0;z-index:14;display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:0 12px;pointer-events:none}
.choices > *{pointer-events:auto}
.choice{background:#fff;border:4px solid var(--accent);border-radius:20px;font-size:1.7rem;font-weight:800;min-width:76px;min-height:64px;padding:4px 18px;box-shadow:var(--shadow)}
.choice:active{transform:translateY(3px)}
.choice:disabled{opacity:.35;border-color:#ccc}
.choice.right{background:var(--ok);border-color:var(--ok-d);color:#fff}
.shake{animation:shake .4s}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:16px;background:rgba(255,244,224,.72);backdrop-filter:blur(3px)}
.card{background:#fff;border-radius:32px;box-shadow:var(--shadow);padding:24px;max-width:460px;width:100%;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.card h2{margin:0;font-size:2rem;line-height:1.1;color:var(--accent)}
.card .stars-big{font-size:3.4rem;letter-spacing:4px;animation:pop .6s ease}
.card .row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.pop{animation:pop .5s ease}
@keyframes pop{40%{transform:scale(1.25)}}
.star-burst{position:fixed;left:50%;top:42%;z-index:30;font-size:7rem;pointer-events:none;transform:translate(-50%,-50%);animation:burst 1.4s ease forwards}
@keyframes burst{0%{transform:translate(-50%,-50%) scale(0) rotate(-180deg);opacity:1}35%{transform:translate(-50%,-50%) scale(1.2) rotate(0)}70%{opacity:1}100%{transform:translate(-50%,-160%) scale(.6);opacity:0}}
#loading{position:fixed;inset:0;z-index:80;display:grid;place-items:center;background:var(--bg);font-weight:800;font-size:2.4rem}
#loading span{animation:bob 1s ease-in-out infinite;display:inline-block}
@keyframes bob{50%{transform:translateY(-12px)}}

/* ---------- confetti ---------- */
.confetti{position:fixed;top:-20px;width:10px;height:16px;border-radius:3px;z-index:60;pointer-events:none;animation:fall linear forwards}
@keyframes fall{to{transform:translate(var(--x),110vh) rotate(var(--r))}}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .title-chip .txt{display:none}
  .topbar{gap:6px;padding:8px 10px}
  .chip{padding:4px 10px}
  .seg button{padding:2px 9px}
  .dots{position:fixed;top:62px;left:50%;transform:translateX(-50%);pointer-events:none}
  .dots i{width:10px;height:10px}
  #guideCanvas{width:84px;height:84px}
  .bubble{font-size:1.05rem;min-height:52px;margin-bottom:14px;padding-right:46px}
  #actions{position:fixed;right:12px;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 92px);margin:0}
  .big-btn{font-size:1.2rem;min-height:50px;padding:6px 20px}
  .choice{font-size:1.35rem;min-width:62px;min-height:54px;padding:2px 12px}
}
@media (max-height:480px){
  #guideCanvas{width:76px;height:76px}
  .bubble{font-size:1rem;min-height:46px;margin-bottom:10px}
  #actions{margin-bottom:10px}
  .big-btn{min-height:46px;font-size:1.15rem}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}