:root{
  --card:#ffffff; --ink:#42384c; --muted:#9b93ab;
  --line:#ffe0a8; --accent:#ff7a4d; --accent-d:#ff6a4d; --accent-soft:#ffd7c4;
  --good:#3dc46a; --good-soft:#d4f6df; --bad:#ff556e; --bad-soft:#ffd5dd; --gold:#ffb627;
  --shadow:0 12px 30px rgba(120,90,60,.16); --shadow-sm:0 5px 14px rgba(120,90,60,.12);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{height:100%}
body{
  font-family:'Quicksand',system-ui,-apple-system,sans-serif;color:var(--ink);
  background:
    radial-gradient(900px 420px at 80% -8%, #fff6b8 0%, transparent 60%),
    linear-gradient(180deg,#8ed8ff 0%,#bfe9ff 34%,#ffe9b0 100%);
  background-attachment:fixed;
  display:flex;justify-content:center;height:100dvh;overflow:hidden;
  padding:14px 14px calc(env(safe-area-inset-bottom) + 16px);padding-top:max(14px,env(safe-area-inset-top));
}
.app{width:100%;max-width:440px;display:flex;flex-direction:column;gap:14px;height:100%;position:relative;z-index:1}
.muted{color:var(--muted);font-weight:600}

/* modern animated backdrop — soft pastel blobs + gently rising bubbles */
.bg-deco{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.bg-deco .blob{position:absolute;border-radius:50%;filter:blur(40px);will-change:transform,border-radius;
  animation:blobFloat 22s ease-in-out infinite}
.bg-deco .b1{width:220px;height:220px;background:radial-gradient(circle at 35% 35%,#ffe6cf,#ffd4b0);top:-60px;left:-50px;opacity:.4}
.bg-deco .b2{width:260px;height:260px;background:radial-gradient(circle at 35% 35%,#dcefff,#bfe0ff);bottom:-80px;right:-80px;
  animation-duration:28s;animation-delay:-8s;opacity:.38}
.bg-deco .b3{width:180px;height:180px;background:radial-gradient(circle at 35% 35%,#ece0ff,#ffdcef);top:46%;left:-60px;
  animation-duration:34s;animation-delay:-15s;opacity:.32}
@keyframes blobFloat{
  0%,100%{transform:translate(0,0) scale(1);border-radius:50%}
  33%{transform:translate(22px,32px) scale(1.1);border-radius:60% 40% 55% 45%}
  66%{transform:translate(-16px,16px) scale(.95);border-radius:42% 58% 45% 55%}}

/* soft bubbles drifting bottom -> top, like underwater */
.bg-deco .bubble{position:absolute;bottom:-14vh;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.9),rgba(255,255,255,.18));
  box-shadow:inset 0 0 6px rgba(255,255,255,.45);will-change:transform,opacity;
  animation:rise linear infinite}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) scale(.9);opacity:0}
  10%{opacity:.55}
  50%{transform:translateY(-58vh) translateX(12px) scale(1.05)}
  90%{opacity:.4}
  100%{transform:translateY(-118vh) translateX(-8px) scale(1);opacity:0}}
.bg-deco .u1{left:8%;width:26px;height:26px;animation-duration:16s}
.bg-deco .u2{left:20%;width:15px;height:15px;animation-duration:12s;animation-delay:-4s}
.bg-deco .u3{left:33%;width:34px;height:34px;animation-duration:20s;animation-delay:-9s}
.bg-deco .u4{left:47%;width:13px;height:13px;animation-duration:11s;animation-delay:-2s}
.bg-deco .u5{left:59%;width:22px;height:22px;animation-duration:17s;animation-delay:-6s}
.bg-deco .u6{left:72%;width:30px;height:30px;animation-duration:22s;animation-delay:-13s}
.bg-deco .u7{left:85%;width:18px;height:18px;animation-duration:14s;animation-delay:-3s}
.bg-deco .u8{left:27%;width:19px;height:19px;animation-duration:18s;animation-delay:-15s}
.bg-deco .u9{left:65%;width:12px;height:12px;animation-duration:13s;animation-delay:-7s}

/* friendly bobbing icon on text-only puzzles */
.card-icon{font-size:42px;text-align:center;line-height:1;margin-bottom:-2px;animation:bob 2.6s ease-in-out infinite}
.card-icon.hidden{display:none}

/* header */
.head{display:flex;justify-content:space-between;align-items:center}
.brand{display:flex;gap:10px;align-items:center}
.logo{font-size:30px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.1));animation:bob 3s ease-in-out infinite}
h1{font-size:26px;font-weight:700;line-height:1;color:#3a3245}
.tag{font-size:12px;color:#6f6780;font-weight:600;margin-top:2px}
.tag b{color:var(--accent)}
.meta{text-align:right;display:flex;flex-direction:column;gap:2px}
.lvl{font-size:16px;font-weight:700;color:var(--accent)}
.meta .muted{font-size:12px;color:#6f6780}

/* main centers the card in the available space (no awkward empty bottom) */
main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:14px}

/* card */
.card{background:var(--card);border:3px solid #fff;border-radius:26px;padding:22px 18px;box-shadow:var(--shadow);
  display:flex;flex-direction:column;gap:16px;min-height:300px}
.prompt{font-size:19px;font-weight:700;line-height:1.4;text-align:center;color:#3a3245}
/* sponsored (native ad) label — required disclosure */
.sponsor-tag{align-self:center;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--muted);background:#f3eee6;border:1px solid var(--line);border-radius:30px;padding:3px 10px}
.sponsor-tag.hidden{display:none}
.scene{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center;min-height:80px}
/* non-interactive display tiles (e.g. counting puzzles) */
.disp{font-size:clamp(26px,8vw,40px);line-height:1.1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.12))}
/* realistic native app-install ad */
.native-ad{width:100%;display:flex;flex-direction:column;gap:12px;background:#fff;border:1px solid var(--line);
  border-radius:18px;padding:14px;box-shadow:var(--shadow-sm)}
.na-top{display:flex;align-items:center;gap:12px}
.na-icon{width:58px;height:58px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:33px;flex:0 0 auto;box-shadow:var(--shadow-sm)}
.na-meta{display:flex;flex-direction:column;gap:2px;text-align:left}
.na-meta b{font-size:17px;color:var(--ink)} .na-meta span{font-size:12.5px;color:var(--muted);font-weight:600}
.na-tag{font-size:14.5px;font-weight:600;color:var(--ink);text-align:left;line-height:1.3}
.na-install{align-self:stretch;background:#1aa860;color:#fff;border:none;border-radius:12px;padding:13px;
  font-family:inherit;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 6px 16px rgba(26,168,96,.32)}
.na-install:active{transform:scale(.97)}
.item{border:2px solid #fff;background:var(--accent-soft);border-radius:18px;padding:10px 14px;cursor:pointer;
  line-height:1;transition:transform .1s, background .15s, box-shadow .15s;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shadow-sm)}
.item:active{transform:scale(.92)}
.item.sel{background:var(--good-soft);box-shadow:0 0 0 3px var(--good)}
.item.wrong{animation:shake .35s;background:var(--bad-soft)}
.item.big{font-size:clamp(40px,16vw,86px);padding:6px 12px}

/* multiple-choice buttons */
.choice{width:100%;font-family:inherit;font-weight:700;font-size:16px;cursor:pointer;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:16px;padding:14px;transition:.12s;box-shadow:var(--shadow-sm)}
.choice:active{transform:scale(.98)}
.choice.sel{background:var(--good-soft);border-color:var(--good)}
.choice.wrong{animation:shake .35s;background:var(--bad-soft);border-color:var(--bad)}

/* icon (visual) choices — a row of picture options */
.choice-icons{display:flex;gap:10px;justify-content:center;width:100%}
.choice-ic{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--card);
  border:2px solid var(--line);border-radius:18px;padding:16px 6px;cursor:pointer;box-shadow:var(--shadow-sm);transition:.12s}
.choice-ic .ic{font-size:clamp(34px,12vw,52px);line-height:1}
.choice-ic .cap{font-size:12.5px;font-weight:700;color:var(--muted)}
.choice-ic:active{transform:scale(.95)}
.choice-ic.sel{background:var(--good-soft);border-color:var(--good)}
.choice-ic.wrong{animation:shake .35s;background:var(--bad-soft);border-color:var(--bad)}

/* input */
.input-area{display:flex;flex-direction:column;gap:10px;align-items:center}
.answer-row{display:flex;gap:8px;width:100%}
.answer{flex:1;font-family:inherit;font-size:18px;font-weight:700;color:var(--ink);text-align:center;
  border:2px solid var(--line);border-radius:14px;padding:13px;outline:none;background:#fffdf7}
.answer:focus{border-color:var(--accent)}

.feedback{text-align:center;font-size:14px;font-weight:700;min-height:18px}
.feedback.bad{color:var(--bad)}
.feedback.good{color:var(--good)}

/* reveal-answer capsule (appears after 3 tries) */
.reveal{align-self:center;font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;
  border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent-d);
  border-radius:30px;padding:10px 20px;transition:.12s;animation:pop .25s ease}
.reveal:active{transform:scale(.95)}
.reveal.hidden{display:none}
@keyframes pop{from{transform:scale(.7);opacity:0}to{transform:scale(1);opacity:1}}

/* controls */
.controls{display:flex;gap:10px}
.btn{font-family:inherit;font-weight:700;border:none;cursor:pointer;border-radius:15px;transition:.12s;color:var(--ink)}
.btn:active{transform:scale(.96)}
.btn.ghost{flex:1;background:var(--card);border:2px solid var(--line);box-shadow:var(--shadow-sm);padding:13px}
.btn.primary{background:linear-gradient(135deg,#ff9b4d,#ff6a4d);color:#fff;padding:15px;font-size:16px;width:100%;
  box-shadow:0 9px 22px rgba(255,106,77,.4)}
.btn.small{font-size:13px;background:transparent;color:var(--muted);box-shadow:none}
.btn.submit{background:var(--accent);color:#fff;padding:13px 20px;box-shadow:var(--shadow-sm)}

.promise{text-align:center;font-size:12px;color:#6f6780;font-weight:600;background:#fff;
  border-radius:30px;padding:9px 12px;border:2px solid var(--line)}
.foot{text-align:center;font-size:12px;color:#6f6780;font-weight:600}

/* modal */
.modal{position:fixed;inset:0;background:rgba(70,55,90,.4);backdrop-filter:blur(3px);
  display:flex;align-items:flex-end;justify-content:center;z-index:50;animation:fade .2s}
.modal.hidden{display:none}
.sheet{background:linear-gradient(180deg,#ffffff,#fff7ec);width:100%;max-width:440px;border-radius:28px 28px 0 0;
  padding:26px 22px calc(26px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:13px;
  animation:slideUp .3s cubic-bezier(.2,.8,.2,1)}
.sheet.center{text-align:center;align-items:center}
.sheet h2{font-size:24px;color:#3a3245}
.disc-emoji{font-size:58px;animation:bob 2.2s ease-in-out infinite}
.sheet-stats{display:flex;gap:10px;width:100%}
.sheet-stats>div{flex:1;background:#fff5dd;border-radius:14px;padding:12px}
.sheet-stats b{display:block;font-size:23px;color:var(--accent)}
.sheet-stats small{font-size:11px;color:var(--muted);font-weight:700}

/* start-over floating button (bottom-left) */
.how-btn{position:fixed;left:16px;bottom:16px;width:44px;height:44px;border-radius:50%;border:2px solid #fff;
  background:#fff;font-size:20px;cursor:pointer;box-shadow:var(--shadow);z-index:40;color:var(--accent)}
.how-btn:active{transform:scale(.94)}

/* toast */
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);background:#42384c;color:#fff;
  font-weight:600;font-size:13.5px;padding:11px 18px;border-radius:30px;z-index:60;box-shadow:var(--shadow);animation:fade .2s;max-width:90%;text-align:center}
.toast.hidden{display:none}

/* confetti */
.confetti{position:fixed;top:-24px;font-size:22px;z-index:55;pointer-events:none;animation:fall linear forwards}

@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{transform:translateY(40px);opacity:.4}to{transform:translateY(0);opacity:1}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes fall{to{transform:translateY(105vh) rotate(420deg);opacity:.15}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important}}