/* Vở ô li vui: phong cách "bản đồ phiêu lưu" kiểu sticker. */
:root{
  --font:"Baloo 2",system-ui,-apple-system,"Segoe UI",sans-serif;
  --display:"Paytone One","Baloo 2",system-ui,sans-serif;
  --sky-top:#74C6FF; --sky-bot:#E4F5FF;
  --ink:#22264B; --ink-soft:#4E5582;
  --card:#FFFFFF; --edge:#22264B; --on-c:#FFFFFF;
  --sun:#FFC93C; --sun-bg:#FFF1C4; --sun-ink:#7A4E00;
  --ok:#16834A; --ok-bg:#D4F7E2; --bad:#C42B3C; --bad-bg:#FFE0E3;
  --c-tv:#E8466A; --c-toan:#2F7BF0; --c-anh:#D9650B;
  --l-tv:#C8F2C2; --l-toan:#A9E2F7; --l-anh:#FFDDB8;
  --o1:#FFE27A; --o2:#FFC9DA; --o3:#B8EEDC;
  --cloud:#FFFFFF; --cloud-op:.9; --star-op:0; --pat:rgba(255,255,255,.38);
  --orb:#FFD84D; --orb-glow:rgba(255,216,77,.45);
  --trail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='120' viewBox='0 0 60 120'%3E%3Cpath d='M30 0C58 30 58 30 30 60S2 90 30 120' fill='none' stroke='%2322264B' stroke-opacity='.45' stroke-width='7' stroke-linecap='round' stroke-dasharray='1 14'/%3E%3C/svg%3E");
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sky-top:#0C1231; --sky-bot:#27316E;
    --ink:#F4F1FF; --ink-soft:#C3C7EE;
    --card:#2B3470; --edge:#080B1F; --on-c:#1A1E3F;
    --sun-bg:#4D3C0E; --sun-ink:#FFD66B;
    --ok:#5BE39A; --ok-bg:#164A33; --bad:#FF8A95; --bad-bg:#552029;
    --c-tv:#FF7393; --c-toan:#76A9FF; --c-anh:#FFA552;
    --l-tv:#1F4D3C; --l-toan:#153F63; --l-anh:#553519;
    --o1:#5E4B10; --o2:#652841; --o3:#1C5548;
    --cloud:#AFC0FF; --cloud-op:.08; --star-op:1; --pat:rgba(255,255,255,.07);
    --orb:#F3F0D8; --orb-glow:rgba(243,240,216,.25);
    --trail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='120' viewBox='0 0 60 120'%3E%3Cpath d='M30 0C58 30 58 30 30 60S2 90 30 120' fill='none' stroke='%23FFFFFF' stroke-opacity='.4' stroke-width='7' stroke-linecap='round' stroke-dasharray='1 14'/%3E%3C/svg%3E");
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --sky-top:#0C1231; --sky-bot:#27316E;
  --ink:#F4F1FF; --ink-soft:#C3C7EE;
  --card:#2B3470; --edge:#080B1F; --on-c:#1A1E3F;
  --sun-bg:#4D3C0E; --sun-ink:#FFD66B;
  --ok:#5BE39A; --ok-bg:#164A33; --bad:#FF8A95; --bad-bg:#552029;
  --c-tv:#FF7393; --c-toan:#76A9FF; --c-anh:#FFA552;
  --l-tv:#1F4D3C; --l-toan:#153F63; --l-anh:#553519;
  --o1:#5E4B10; --o2:#652841; --o3:#1C5548;
  --cloud:#AFC0FF; --cloud-op:.08; --star-op:1; --pat:rgba(255,255,255,.07);
  --orb:#F3F0D8; --orb-glow:rgba(243,240,216,.25);
  --trail:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='120' viewBox='0 0 60 120'%3E%3Cpath d='M30 0C58 30 58 30 30 60S2 90 30 120' fill='none' stroke='%23FFFFFF' stroke-opacity='.4' stroke-width='7' stroke-linecap='round' stroke-dasharray='1 14'/%3E%3C/svg%3E");
  color-scheme:dark;
}

/* ---------- Nền trời ---------- */
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--sky-bot)}
html,body{min-height:100%;margin:0}
body{
  font-family:var(--font);color:var(--ink);
  background:linear-gradient(180deg,var(--sky-top) 0,var(--sky-bot) 70vh) fixed var(--sky-bot);
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;
}
.sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.sky::before{
  content:"";position:absolute;inset:0;opacity:var(--star-op);
  background:
    radial-gradient(2px 2px at 20% 18%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 72% 9%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 45% 32%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 88% 40%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 8% 55%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 60% 68%,#fff 50%,transparent 51%),
    radial-gradient(1.5px 1.5px at 30% 82%,#fff 50%,transparent 51%),
    radial-gradient(2px 2px at 92% 88%,#fff 50%,transparent 51%);
  animation:twinkle 4s ease-in-out infinite alternate;
}
.orb{position:absolute;top:22px;right:-26px;width:110px;height:110px;border-radius:50%;background:var(--orb);box-shadow:0 0 0 18px var(--orb-glow),0 0 0 40px var(--orb-glow)}
.cloud{position:absolute;left:0;width:120px;height:38px;border-radius:40px;background:var(--cloud);opacity:var(--cloud-op);animation:drift 70s linear infinite}
.cloud::before,.cloud::after{content:"";position:absolute;border-radius:50%;background:inherit}
.cloud::before{width:52px;height:52px;top:-26px;left:18px}
.cloud::after{width:66px;height:66px;top:-36px;right:14px}
.cloud.c1{top:12%;animation-delay:-10s}
.cloud.c2{top:38%;transform:scale(.7);animation-duration:95s;animation-delay:-55s}
.cloud.c3{top:70%;transform:scale(.85);animation-duration:80s;animation-delay:-30s}
@keyframes drift{from{translate:-160px 0}to{translate:calc(100vw + 40px) 0}}
@keyframes twinkle{from{opacity:calc(var(--star-op)*.45)}to{opacity:var(--star-op)}}

#app{position:relative;z-index:1}
button{font-family:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:4px solid var(--c-toan);outline-offset:3px}
.page{max-width:560px;margin:0 auto;padding:16px 16px 40px;min-height:100vh}

/* Kiểu sticker dùng chung: viền đậm, bóng cứng phía dưới. */
.stk{background:var(--card);border:3px solid var(--edge);box-shadow:0 5px 0 var(--edge)}
.press{transition:transform .12s ease,box-shadow .12s ease}
.press:active{transform:translateY(4px);box-shadow:0 1px 0 var(--edge)}
@media (hover:hover){.press:not(:disabled):hover{transform:translateY(-2px)}}

/* ---------- Bản đồ ---------- */
.map-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 6px}
.map-head h1{font-family:var(--display);font-weight:400;font-size:40px;line-height:1;margin:0;letter-spacing:.5px;color:var(--ink);text-shadow:0 4px 0 var(--sun)}
.star-badge{flex:none;display:inline-flex;align-items:center;gap:4px;min-height:44px;background:var(--sun-bg);color:var(--sun-ink);border:3px solid var(--edge);box-shadow:0 4px 0 var(--edge);border-radius:999px;padding:2px 14px;font-weight:800;font-size:20px;white-space:nowrap}
.hero{display:flex;align-items:flex-end;gap:6px;margin:4px 0 14px}
.hero .pencil{width:78px;flex:none;animation:bob 3s ease-in-out infinite}
.bubble{position:relative;flex:1;margin-bottom:22px;padding:10px 14px;border-radius:22px;font-size:19px;font-weight:700;line-height:1.3}
.bubble::before{content:"";position:absolute;left:-12px;bottom:14px;width:18px;height:18px;background:var(--card);border-left:3px solid var(--edge);border-bottom:3px solid var(--edge);transform:rotate(45deg)}
.settings{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:22px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:48px;border-radius:999px;padding:6px 16px 6px 8px;font-size:16px;font-weight:700;color:var(--ink)}
.sw{position:relative;width:44px;height:26px;border-radius:99px;background:var(--ink-soft);opacity:.55;transition:background .2s,opacity .2s}
.sw::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s}
.chip.on .sw{background:var(--ok);opacity:1}
.chip.on .sw::after{transform:translateX(18px)}

.land{position:relative;margin:0 0 26px;padding:14px 12px 20px;border-radius:30px;background-color:var(--l)}
.land-tv{background-image:radial-gradient(var(--pat) 2.5px,transparent 3.5px);background-size:22px 22px}
.land-toan{background-image:radial-gradient(circle at 12px -6px,transparent 13px,var(--pat) 14px,transparent 17px);background-size:24px 18px}
.land-anh{background-image:repeating-linear-gradient(45deg,var(--pat) 0 8px,transparent 8px 22px)}
.sign{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.sign-ic{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:18px;font-size:32px;background:var(--c);rotate:-6deg}
.sign h2{margin:0;font-family:var(--display);font-weight:400;font-size:24px;line-height:1.1;color:var(--ink)}
.sign small{display:inline-block;margin-top:4px;padding:1px 10px;border-radius:99px;background:var(--card);border:2px solid var(--edge);font-size:15px;font-weight:800;color:var(--ink)}
.deco{position:absolute;top:-16px;right:18px;font-size:26px;letter-spacing:6px;white-space:nowrap;rotate:8deg}
.trail{position:relative;display:grid;gap:16px}
.trail::before{content:"";position:absolute;top:-6px;bottom:-6px;left:50%;width:60px;margin-left:-30px;background:var(--trail) repeat-y center top}
.stop{position:relative;display:flex;align-items:center;gap:12px;width:min(90%,400px);text-align:left;border-radius:60px 26px 26px 60px;padding:8px 14px 8px 8px;animation:drop-in .5s cubic-bezier(.3,1.5,.6,1) backwards;animation-delay:calc(var(--n)*70ms)}
.stop:nth-child(even){margin-left:auto;flex-direction:row-reverse;text-align:right;border-radius:26px 60px 60px 26px;padding:8px 8px 8px 14px}
.medal{display:grid;place-items:center;flex:none;width:74px;height:74px;border-radius:50%;font-size:42px;line-height:1;background:var(--c);border:3px solid var(--edge);box-shadow:inset 0 -7px 0 rgba(0,0,0,.16)}
.st{flex:1;min-width:0}
.st b{display:block;font-size:20px;font-weight:800;line-height:1.15}
.st small{display:block;font-size:15px;color:var(--ink-soft);font-weight:600;line-height:1.3}
.stars{display:inline-flex;align-items:center;gap:2px;margin-top:2px;font-size:18px;line-height:1}
.stars i{font-style:normal;filter:grayscale(1);opacity:.35}
.stars i.on{filter:none;opacity:1}
.stars em{font-style:normal;font-size:14px;font-weight:800;color:var(--ink-soft);margin:0 4px}
.new{position:absolute;top:-12px;right:18px;padding:0 10px;border-radius:99px;background:var(--sun);color:#22264B;border:2px solid var(--edge);font-size:13px;font-weight:800;rotate:6deg}
.stop:nth-child(even) .new{right:auto;left:18px;rotate:-6deg}
.foot{color:var(--ink-soft);font-size:14px;font-weight:600;text-align:center;margin-top:4px}
@keyframes drop-in{from{opacity:0;transform:translateY(-16px) scale(.92)}}
@keyframes bob{50%{transform:translateY(-6px) rotate(3deg)}}

/* ---------- Bút chì (linh vật) ---------- */
.pencil{display:block;overflow:visible}
.pencil .m-oops{display:none}
.pencil.oops .m-smile{display:none}
.pencil.oops .m-oops{display:inline}
.pencil.happy{animation:hop .6s ease}
.pencil.happy .arm-r{animation:wave .3s ease-in-out 2 alternate}
.pencil.oops{animation:wobble .5s ease}
.arm-r{transform-origin:62px 66px}
@keyframes hop{30%{transform:translateY(-14px) rotate(-6deg)}60%{transform:translateY(0) rotate(4deg)}}
@keyframes wave{to{transform:rotate(-35deg)}}
@keyframes wobble{25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* ---------- Màn chơi ---------- */
.topbar{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.back{min-height:48px;border-radius:999px;padding:4px 16px;font-weight:800;font-size:17px}
.ttl{flex:1;min-width:0;line-height:1.1}
.ttl small{display:block;font-size:15px;font-weight:800;color:var(--ink-soft)}
.ttl b{display:block;font-family:var(--display);font-weight:400;font-size:20px;line-height:1.15}
.track{position:relative;list-style:none;display:flex;justify-content:space-between;align-items:center;margin:0 4px 14px;padding:0}
.track::before{content:"";position:absolute;left:8px;right:8px;top:50%;border-top:4px dotted var(--ink-soft);opacity:.5}
.track li{position:relative;width:28px;height:28px;border-radius:50%;border:3px solid var(--edge);background:var(--card);display:grid;place-items:center;font-size:14px;line-height:1;font-weight:800}
.track li.cur{background:var(--c);animation:pulse 1.2s ease-in-out infinite}
.track li.star{background:var(--sun-bg)}
.track li.sprout{background:var(--ok-bg)}
.track li.retry{background:var(--bad-bg);color:var(--bad)}
.track li.miss{opacity:.55}
@keyframes pulse{50%{transform:scale(1.25)}}
.timer{height:16px;border-radius:99px;background:var(--card);border:3px solid var(--edge);overflow:hidden;margin-bottom:14px}
.timer-fill{height:100%;width:100%;background:var(--ok);transform-origin:left}
.timer.low .timer-fill{background:var(--bad)}
.card{border-radius:30px;padding:14px 16px 18px;text-align:center;box-shadow:0 7px 0 var(--edge)}
.card-top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:6px}
.tag{padding:2px 12px;border-radius:99px;background:var(--sun-bg);color:var(--sun-ink);border:2px solid var(--edge);font-size:15px;font-weight:800}
.tag.retry{background:var(--bad-bg);color:var(--bad)}
.listens{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.listen{min-height:44px;border-radius:999px;padding:4px 14px;font-size:15px;font-weight:800;box-shadow:0 3px 0 var(--edge)}
.pic{display:grid;place-items:center;width:128px;height:128px;margin:8px auto 6px;border-radius:50%;font-size:78px;line-height:1;background:var(--l);border:3px dashed var(--c)}
.pic.grid{width:auto;height:auto;max-width:320px;padding:12px 14px;border-radius:24px;font-size:38px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 10px}
.sentence{font-size:26px;font-weight:800;line-height:1.3;margin:6px 0}
.prompt{font-size:22px;font-weight:700;line-height:1.3;margin:6px 0}
.hint{font-size:17px;color:var(--ink-soft);font-weight:600;margin:0 0 6px;line-height:1.35}
.big{font-family:var(--display);font-weight:400;font-size:54px;line-height:1.15;margin:6px 0 10px;letter-spacing:1px}
.big .gap{display:inline-block;min-width:1.3em;padding:0 .15em;border-bottom:5px dashed var(--ink-soft);color:var(--ink-soft)}
.big .gap.filled{border-bottom-style:solid;border-color:var(--ok);color:var(--ok)}
.helper{font-size:20px;letter-spacing:2px;margin:-4px 0 10px;line-height:1.4}
.slotrow{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px 0 4px}
.drag{font-size:34px;font-weight:800;min-width:86px;min-height:64px;padding:6px 16px;border-radius:18px;background:var(--c);color:var(--on-c);border:3px solid var(--edge);box-shadow:0 5px 0 var(--edge);touch-action:none;position:relative;z-index:5}
.drag.lift{box-shadow:0 14px 24px rgba(0,0,0,.25);transition:none}
.drag.home{transition:transform .2s ease}
.plus{font-size:30px;font-weight:800;color:var(--ink-soft)}
.slot{font-size:34px;font-weight:800;min-width:86px;padding:6px 16px;border-radius:18px;border:3px dashed var(--ink-soft);color:var(--ink-soft)}
.slot.filled{border-style:solid;border-color:var(--ok);color:var(--ok);background:var(--ok-bg)}
.help{font-size:15px;color:var(--ink-soft);margin:4px 0 12px;font-weight:600}
.opts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:10px}
.opts.long{grid-template-columns:1fr}
.opt{font-size:30px;font-weight:800;line-height:1.1;color:var(--ink);background:var(--o1);border:3px solid var(--edge);box-shadow:0 5px 0 var(--edge);border-radius:20px;min-height:70px;padding:8px 6px}
.opt:nth-child(3n+2){background:var(--o2)}
.opt:nth-child(3n){background:var(--o3)}
.opts.long .opt{font-size:21px;min-height:58px}
.opts.pics .opt{font-size:50px;min-height:88px}
.opt.target{outline:4px dashed var(--c);outline-offset:3px}
.opt.ok{background:var(--ok-bg);color:var(--ok);border-color:var(--ok)}
.opt.bad{background:var(--bad-bg);color:var(--bad);border-color:var(--bad)}
.opt:disabled{cursor:default}
.opt.dim{opacity:.45}
.fbrow{display:flex;align-items:center;gap:10px;min-height:76px;margin:14px 0 4px;text-align:left}
.buddy{flex:none;width:46px}
.fb{flex:1;margin:0;font-size:18px;font-weight:700;line-height:1.35;color:var(--ink-soft)}
.fb.ok{color:var(--ok)} .fb.bad{color:var(--bad)}
.next{min-height:52px;border-radius:18px;padding:8px 28px;margin-top:4px;font-size:20px;font-weight:800;background:var(--sun);color:#22264B}
.next[hidden]{display:none}
.pop{animation:pop .35s ease}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.08)}100%{transform:scale(1)}}
.shake{animation:shake .35s ease}
@keyframes shake{25%{transform:translateX(-7px)}75%{transform:translateX(7px)}}

/* ---------- Pháo giấy ---------- */
.confetti{position:absolute;left:50%;top:40%;width:0;height:0;pointer-events:none;z-index:20}
.confetti i{position:absolute;width:10px;height:14px;border-radius:3px;background:var(--k);animation:burst .9s ease-out forwards}
@keyframes burst{
  from{transform:translate(0,0) rotate(0);opacity:1}
  to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}
}

/* ---------- Kết quả ---------- */
.end-card{position:relative;overflow:hidden;margin-top:30px;padding:26px 18px 26px}
.end-card .pencil{width:96px;margin:0 auto;animation:hop .7s ease .4s 3}
.end-stars{display:flex;justify-content:center;gap:6px;margin:10px 0 0;font-size:56px;line-height:1}
.end-stars i{font-style:normal;filter:grayscale(1);opacity:.3}
.end-stars i.on{filter:none;opacity:1;animation:star-in .5s cubic-bezier(.3,1.6,.6,1) backwards;animation-delay:calc(.3s + var(--n)*.25s)}
.end-stars i:nth-child(2){translate:0 -12px}
@keyframes star-in{from{transform:scale(0) rotate(-90deg)}}
.end-score{font-family:var(--display);font-size:22px;margin:8px 0 0;color:var(--ink-soft)}
.end-card h2{font-family:var(--display);font-weight:400;font-size:34px;margin:6px 0 4px}
.end-card p.detail{font-size:18px;color:var(--ink-soft);font-weight:600;margin:0 0 18px}
.end-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ghost{min-height:52px;border-radius:18px;padding:8px 24px;font-size:20px;font-weight:800}
.toast{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--card);padding:10px 16px;border-radius:14px;font-weight:700;font-size:15px;max-width:min(92vw,440px);text-align:center;z-index:50}

@media (min-width:700px){
  .map-head h1{font-size:48px}
  .land{padding:18px 22px 24px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .confetti{display:none}
}