/* finn-core.css — khung dùng chung: màu/chữ mặc định, thanh đầu, thanh mục, toast, pháo giấy, nút Nghe lại, khung phiếu A4.
   Trang nạp file này TRƯỚC <style> riêng, nên bài vẫn đổi được màu (:root) và mọi thứ khác của mình. */
:root{
  --bg:#E6F4F1; --card:#FFFFFF; --ink:#1E2A44; --muted:#5A6B78; --line:#CFE3DF;
  --red:#EF4444; --blue:#3B82F6; --accent:#0EA5E9; --accent-l:#E0F2FE; --soft:#F1F8F6;
  --green:#16A34A; --green-l:#DCFCE7; --orange:#F97316; --orange-l:#FFEDD5; --yellow:#FACC15;
  /* "Máy học Toán" (docs/design-guidelines.md): thân máy đỏ, màn hình bạc hà, thẻ kem, nút vàng */
  --shell:#E9342B; --shell-dark:#9F1717; --shell-light:#FF564A; --screen:#DDF5E8; --cream:#FFF8E7; --cta:#FFD84A;
  --font-text: "Andika", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-fun: "Baloo 2", ui-rounded, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-family: var(--font-text);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-size:20px;line-height:1.4;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;touch-action:manipulation}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:980px;margin:0 auto;padding:16px}

/* ---------- Header & section tabs (drawn by Finn.lesson) ---------- */
h1, .pill, nav.steps button, .toast, .replay{font-family:var(--font-fun)}
header.top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.title{flex:1;min-width:220px}
.title small{display:block;color:var(--muted);font-size:14px;font-weight:700;letter-spacing:.04em}
.title h1{margin:2px 0 0;font-size:clamp(26px,4.5vw,36px);line-height:1.1}
.pill{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:2px solid var(--line);border-radius:999px;padding:6px 14px;font-weight:800;font-size:18px}
nav.steps{display:grid;grid-template-columns:repeat(var(--tabs,3),1fr);gap:8px;margin:16px 0}
nav.steps button{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px;font-weight:800;font-size:19px;display:flex;align-items:center;gap:8px;justify-content:center;min-height:56px}
nav.steps .n{display:inline-grid;place-items:center;width:28px;height:28px;font-size:20px;flex:none}
nav.steps button[aria-selected=true], nav.steps a[aria-selected=true]{border-color:var(--ink);background:var(--ink);color:#fff}
nav.steps a{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:10px;font-family:var(--font-fun);font-weight:800;font-size:18px;display:flex;align-items:center;justify-content:center;min-height:56px;color:inherit;text-align:center}
@media (max-width:620px){ nav.steps button{font-size:16px;padding:8px 4px;gap:4px;flex-direction:column} }

/* ---------- Toast, confetti, shared animations ---------- */
.toast{position:fixed;left:50%;top:16px;transform:translate(-50%,-40px);opacity:0;pointer-events:none;background:var(--ink);color:#fff;font-weight:800;font-size:20px;padding:12px 22px;border-radius:22px;transition:.3s;z-index:70;width:max-content;max-width:calc(100vw - 32px);text-align:center}   /* max-content: left:50% would otherwise squeeze it to half the screen */
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.ok{background:var(--green)} .toast.bad{background:var(--orange)}
.toast .ic{width:28px;height:28px}
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti i{position:absolute;top:-20px;width:10px;height:16px;border-radius:3px;animation:fall 1.9s ease-in forwards}
@keyframes fall{to{top:110vh;transform:rotate(600deg)}}
@keyframes pop{0%{transform:scale(.2)}70%{transform:scale(1.15)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- 🔊 Nghe lại: hear the current question again ---------- */
button.replay{position:fixed;right:16px;bottom:16px;z-index:45;display:flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border-radius:999px;padding:12px 20px 12px 16px;font-weight:800;font-size:20px;box-shadow:0 4px 0 #0369A1,0 8px 24px rgba(14,165,233,.35)}
.replay:active{transform:translateY(2px);box-shadow:0 2px 0 #0369A1}
.replay.hint{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 4px 0 #0369A1,0 0 0 0 rgba(14,165,233,.5)}50%{box-shadow:0 4px 0 #0369A1,0 0 0 14px rgba(14,165,233,0)}}
.finn-print-mode .replay{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- Worksheet frame: A4 pages inside #sheet ---------- */
.sheet-tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:10px}
.sheet-tools label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:18px}
.sheet-tools input{width:22px;height:22px}
.page{background:#fff;color:#111;width:min(210mm,100%);min-height:297mm;margin:0 auto 18px;padding:13mm;box-shadow:0 6px 24px rgba(0,0,0,.08);font-size:14pt;line-height:1.35}
/* Page kicker from finn-lesson.js (--finn-sheet-kicker); lessons that write their own .pk kicker keep theirs */
.page:not(:has(.pk))::before{content:var(--finn-sheet-kicker);display:block;font-size:10pt;font-weight:700;letter-spacing:.05em;color:#555;margin-bottom:1mm}
.answers-off .answer-page{display:none}
#sheet{overflow-x:auto}   /* A4 preview scrolls inside itself on phones */

/* ---------- Print: only the worksheet ---------- */
@media print{
  @page{size:A4;margin:0}
  body{background:#fff}
  header.top, nav.steps, .no-print, .toast, .replay, .confetti, .step{display:none!important}
  section[data-sec="phieu"]{display:block!important}
  .wrap{padding:0;max-width:none}
  #sheet{overflow:visible}
  .page{box-shadow:none;margin:0;width:210mm;height:297mm;min-height:0;overflow:hidden;break-after:page;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .page:last-child{break-after:auto}
}

/* ---------- 🔒 Parent gate (finn-parent-gate.js) ---------- */
.finn-gate{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;padding:16px}
.finn-gate-card{background:var(--card);border-radius:22px;padding:24px;box-shadow:0 3px 0 var(--line);width:min(100%,380px);text-align:center}
.finn-gate-card h2{font-family:var(--font-fun);margin:0 0 12px;font-size:28px}
.finn-gate-card input{font:inherit;font-size:32px;width:5em;text-align:center;padding:8px;border:3px solid var(--line);border-radius:14px;margin:0 0 12px}
.finn-gate-btn{touch-action:none;position:relative;overflow:hidden;width:100%;min-height:56px;border-radius:16px;background:var(--ink);color:#fff;font-family:var(--font-fun);font-weight:800;font-size:21px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.finn-gate-btn span{position:relative}
.finn-gate-fill{position:absolute!important;left:0;top:0;bottom:0;width:0;background:var(--green)}
.finn-gate-err{color:var(--orange);min-height:1.4em;margin:8px 0 0;font-size:17px}
.finn-gate-home{display:inline-block;margin-top:16px;color:var(--muted);font-weight:700}

/* ---------- 🎁 Reward box: choose 1 of 3 (finn-rewards.js) ---------- */
.finn-reward{position:fixed;inset:0;z-index:80;background:rgba(30,42,68,.6);display:grid;place-items:center;padding:16px}
.finn-reward-card{background:var(--card);border-radius:26px;padding:20px 16px;width:min(100%,560px);text-align:center;animation:pop .35s}
.finn-reward-card h2{font-family:var(--font-fun);margin:0;font-size:28px}
.finn-reward-card p{margin:4px 0 14px;color:var(--muted)}
.finn-reward-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));grid-auto-flow:column;gap:8px}
.finn-reward-pick{background:var(--soft);border:3px solid var(--line);border-radius:20px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;min-height:56px;transition:transform .2s,opacity .3s}
.finn-reward-pick img{width:min(110px,100%);aspect-ratio:1;object-fit:contain}
.finn-reward-pick b{font-family:var(--font-fun);font-size:clamp(14px,4vw,19px);line-height:1.1}
.finn-reward-pick small{color:var(--muted);font-size:12px;line-height:1.2}
.finn-reward-pick.chosen{border-color:var(--yellow);background:#FFF7D6;transform:scale(1.08)}
.finn-reward-pick.off{opacity:.25}
/* After the pick: the new friend's trading card (finn-card.css) on a night sky with turning light rays; it lands face down,
   wobbles, then flips (.open) with a flash, the rays burst out and the "Mới!" tag pops. Gold rays for final evolutions,
   rainbow for legends. The button to put it away shows once the card has been read out. */
.finn-reveal{background:radial-gradient(circle at 50% 42%,#33507F,#141D33 70%);overflow-y:auto;overflow-x:hidden;--ray:rgba(255,255,255,.16)}
.finn-reveal.rare{--ray:rgba(255,215,90,.26)} .finn-reveal.legend{--ray:rgba(216,180,254,.3);background:radial-gradient(circle at 50% 42%,#5B3F8F,#1B1433 70%)}
.finn-reveal-rays{position:fixed;left:50%;top:42%;width:160vmax;aspect-ratio:1;margin:-80vmax 0 0 -80vmax;pointer-events:none;border-radius:50%;
  background:repeating-conic-gradient(var(--ray) 0 9deg,transparent 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 55%);mask:radial-gradient(circle,#000 8%,transparent 55%);
  opacity:.4;transform:scale(.45);transition:transform .7s cubic-bezier(.2,.8,.3,1.2),opacity .7s;animation:raysTurn 24s linear infinite}
.finn-reveal.open .finn-reveal-rays{opacity:1;transform:scale(1)}
@keyframes raysTurn{to{rotate:360deg}}
.finn-reveal.open::after{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 42%,#fff,rgba(255,255,255,0) 60%);animation:revealFlash .7s ease-out forwards}
@keyframes revealFlash{from{opacity:.95}to{opacity:0}}
.finn-reveal-stage{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;width:min(100%,360px);margin:auto}
.finn-reveal-title{margin:0;min-height:2.3em;display:grid;place-items:center;font-family:var(--font-fun);font-size:clamp(22px,6vw,28px);line-height:1.15;color:#fff;text-align:center;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.finn-reveal-title .ic{width:30px;height:30px;vertical-align:-4px}
.finn-reveal-slot{position:relative;width:100%;display:flex;justify-content:center}
.finn-reveal-tag{position:absolute;z-index:3;left:-6px;top:-14px;display:flex;align-items:center;gap:4px;background:var(--cta);color:var(--ink);border:3px solid var(--ink);border-radius:999px;
  padding:2px 14px;font-family:var(--font-fun);font-size:22px;rotate:-10deg;box-shadow:0 4px 0 #D49D0C;opacity:0;scale:.2;transition:opacity .2s .45s,scale .4s .45s cubic-bezier(.3,1.6,.5,1)}
.finn-reveal-tag .ic{width:24px;height:24px}
.finn-reveal.open .finn-reveal-tag{opacity:1;scale:1}
.finn-reveal-ok{display:inline-flex;align-items:center;gap:10px;min-height:64px;padding:8px 26px;background:var(--cta);color:var(--ink);border:2px solid var(--ink);border-radius:18px;
  font-family:var(--font-fun);font-weight:800;font-size:24px;box-shadow:0 6px 0 #D49D0C;animation:pop .35s}
.finn-reveal-ok[hidden]{display:none}
.finn-reveal-ok .ic{width:34px;height:34px}
.finn-reveal-ok:active{transform:translateY(4px);box-shadow:0 2px 0 #D49D0C}
@media (prefers-reduced-motion:reduce){.finn-reveal.open::after{display:none}}
.shiny-mon{filter:hue-rotate(160deg) saturate(1.4) drop-shadow(0 0 8px #FACC15)}

/* ---------- Pokémon cards by rarity (album, big card, reward box) ---------- */
.rare-card{background:linear-gradient(135deg,#FFF7D6,#FDE68A)!important;border-color:#F5C542!important}
.legend-card{background:linear-gradient(120deg,#FDE68A,#FBCFE8,#C4B5FD,#93C5FD,#A7F3D0,#FDE68A)!important;background-size:300% 300%!important;
  animation:shimmer 6s linear infinite;border-color:#A78BFA!important}
@keyframes shimmer{to{background-position:300% 0}}
.tilt{transform:perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .1s}
@keyframes dance{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-10px) rotate(-6deg)}75%{transform:translateY(-10px) rotate(6deg)}}

/* Pixel frame around the animated (pixel-art) companion: stepped corners, a 3px deep-blue edge (--px-edge) with a light
   line on the inner top edge, a flat sky-blue inside (no picture). Children sit above it. */
.px-frame{--px-clip:polygon(0 12px,4px 12px,4px 8px,8px 8px,8px 4px,12px 4px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 8px) 4px,
  calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),
  calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),
  calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),0 calc(100% - 12px));
  position:relative;isolation:isolate;background:var(--px-edge)!important;border:0!important;border-radius:0!important;box-shadow:none!important;clip-path:var(--px-clip)}
.px-frame::before{content:"";position:absolute;inset:3px;z-index:-1;clip-path:var(--px-clip);image-rendering:pixelated;
  background:#CDEFFF}
.px-frame::after{content:"";position:absolute;left:15px;right:15px;top:3px;height:2px;background:rgba(255,255,255,.6);pointer-events:none}
:root{--px-edge:#1D4E89}

/* ---------- 🎮 "Máy học Toán": khung cho các trang khung phía bé (index, pokemon, hanh-trinh, on-tap) ----------
   Bài học và khu phụ huynh KHÔNG dùng (chỉ dùng token màu). Thanh đầu do assets/core/finn-frame.js vẽ vào <header class="devbar">. */
body.framed{background:#F3EADB;font-size:19px;overflow-x:hidden}
.framed h1,.framed h2,.framed h3,.framed b{font-family:var(--font-fun)}
.device{max-width:1380px;margin:24px auto;padding:0 20px 22px;background:var(--shell);border:4px solid var(--shell-dark);border-radius:38px;
  box-shadow:inset 0 5px 0 var(--shell-light),inset 0 -6px 0 #851010,0 6px 0 #7A0C0C,0 20px 40px rgba(30,42,68,.22)}
.screen{position:relative;background:var(--screen) radial-gradient(rgba(30,42,68,.05) 1.5px,transparent 1.6px) 0 0/18px 18px;
  border:3px solid var(--shell-dark);border-radius:24px;box-shadow:inset 0 4px 6px rgba(22,60,40,.14);padding:18px 20px;min-width:0}
.cream{background:var(--cream);border:2px solid var(--ink);border-radius:20px;box-shadow:0 4px 0 #E2D5B5}
.btn-cta,.btn-2nd{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--font-fun);font-weight:800;text-decoration:none;
  color:var(--ink);border:2px solid var(--ink);border-radius:18px;transition:transform .08s,box-shadow .08s}
.btn-cta{background:var(--cta);min-height:64px;padding:8px 24px;font-size:24px;box-shadow:0 6px 0 #D49D0C}
.btn-cta:active{transform:translateY(4px);box-shadow:0 2px 0 #D49D0C}
.btn-2nd{background:var(--cream);min-height:48px;padding:6px 16px;font-size:18px;box-shadow:0 4px 0 #D2C4A2}
.btn-2nd:active{transform:translateY(3px);box-shadow:0 1px 0 #D2C4A2}

/* Thanh đầu: ống kính + 3 đèn · logo · tab · ☁️ 🔊 🔒 */
.devbar{display:flex;align-items:center;gap:14px;min-height:96px;padding:10px 2px}
.devbar .hw{display:flex;align-items:center;gap:10px;flex:none;background:#821212;padding:8px 12px;border-radius:18px;border:2px solid #540707}
.lens{width:42px;height:42px;border-radius:50%;flex:none;border:4px solid #fff;box-shadow:0 0 0 2px #540707;
  background:radial-gradient(circle at 35% 30%,#D6F0FF 0 14%,#3BA3F0 32%,#1060B0 75%)}
.lens.syncing{animation:lens 1.1s ease-in-out infinite}
@keyframes lens{50%{filter:brightness(1.45);box-shadow:0 0 0 2px #540707,0 0 16px #7CC8FF}}
.leds{display:flex;gap:6px}
.leds i{width:13px;height:13px;border-radius:50%;border:2px solid #540707}
.leds i:nth-child(1){background:#FF6B6B} .leds i:nth-child(2){background:var(--cta)} .leds i:nth-child(3){background:#5BD47A}
.logo{font-family:var(--font-fun);font-weight:800;font-size:34px;line-height:1;white-space:nowrap;text-decoration:none;color:var(--cream);
  text-shadow:2px 0 0 var(--ink),-2px 0 0 var(--ink),0 2px 0 var(--ink),0 -2px 0 var(--ink),2px 2px 0 var(--ink),-2px 2px 0 var(--ink),2px -2px 0 var(--ink),-2px -2px 0 var(--ink),0 5px 0 var(--ink)}
.logo .f{color:var(--cta)}
.grade{flex:none;font-family:var(--font-fun);font-weight:800;font-size:16px;background:var(--cream);color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:2px 12px}
.devtabs{display:flex;gap:12px;margin-left:auto}
.devtab{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:56px;padding:6px 22px;border-radius:18px;text-decoration:none;
  font-family:var(--font-fun);font-weight:800;font-size:20px;white-space:nowrap;background:var(--shell-dark);color:#fff;border:2px solid #5A0808;box-shadow:0 4px 0 #5A0808}
.devtab[aria-current=page]{background:var(--cta);color:var(--ink);border-color:var(--ink);box-shadow:0 5px 0 #D49D0C}
.devtab:active{transform:translateY(3px);box-shadow:none}
.devbtns{display:flex;align-items:center;gap:10px;flex:none}
.devbtn{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-size:24px;text-decoration:none;background:var(--cream);
  border:2px solid var(--ink);box-shadow:0 4px 0 #7A0C0C}
.devbtn:active{transform:translateY(3px);box-shadow:0 1px 0 #7A0C0C}
.devbtn.sync{cursor:default;box-shadow:none;background:transparent;border-color:transparent;width:40px}
.devbtn.sync:active{transform:none}
.ic{width:1.3em;height:1.3em;object-fit:contain;flex:none;vertical-align:-.3em}   /* sticker icon next to a label */
.devtab .ic{width:32px;height:32px}
.devbtn .ic{width:32px;height:32px}
.devbtn.sync .ic{width:34px;height:34px}

@media (max-width:1099px){
  .devbar{flex-wrap:wrap}
  .devtabs{order:9;width:100%;margin:0}
  .devtab{flex:1}
  .devbtns{margin-left:auto}
}
@media (max-width:699px){
  .device{margin:8px;padding:0 10px 12px;border-width:3px;border-radius:24px}
  .devbar{min-height:64px;gap:8px;padding:8px 0}
  .devbar .hw{padding:5px;border-radius:14px}
  .devbar .leds{display:none}
  .lens{width:28px;height:28px;border-width:3px}
  .logo{font-size:23px}
  .grade{display:none}   /* không đủ chỗ ở 390px: tab và nút quan trọng hơn */
  .devtab{font-size:17px;padding:6px 8px;min-height:52px}
  .devtabs{gap:8px}
  .devbtns{gap:6px}
  .devbtn{width:48px;height:48px;font-size:21px}
  .devtab .ic,.devbtn .ic{width:28px;height:28px}
  .devbtn.sync{width:30px}
  .screen{padding:14px}
}

/* ---------- 📚 Bài học: chỉ dùng token "Máy học Toán", KHÔNG bọc khung máy (docs/design-guidelines.md mục 2) ----------
   Bài đặt <body class="lesson">. :where() giữ độ ưu tiên thấp như một lớp đơn, nên CSS riêng của bài vẫn ghi đè được. */
body.lesson{background:var(--screen) radial-gradient(rgba(30,42,68,.05) 1.5px,transparent 1.6px) 0 0/18px 18px}
@media screen{body.lesson{padding-bottom:110px}}   /* room to scroll the last row clear of the floating 🔊 Nghe lại and the companion */

/* ---------- Companion in the bottom-left corner (finn-dex.js): a still pixel frame, pixel effects around it ----------
   right = "power" (stepped gold ring bursting out, sparks, rising stars) · wrong = "thinking" bubble · tap = rising heart.
   Effects live in .finn-buddy-fx beside the frame: the frame's clip-path would cut anything inside it. */
.finn-buddy-wrap{position:fixed;left:16px;bottom:16px;z-index:44;width:84px;height:84px}
.finn-buddy{position:absolute;inset:0;width:84px;height:84px;padding:0}
.finn-buddy .finn-buddy-face{position:absolute;inset:3px;display:grid;place-items:center}
.finn-buddy img{display:block;width:66px;height:66px;object-fit:contain;filter:drop-shadow(0 3px 0 rgba(0,0,0,.14))}
.finn-buddy img.shiny-mon{filter:hue-rotate(160deg) saturate(1.4) drop-shadow(0 0 6px #FACC15)}
.finn-buddy-fx{position:absolute;inset:0;pointer-events:none;z-index:1}
.finn-buddy-fx i{position:absolute;display:block}
/* Power: the frame's stepped outline in gold, growing and fading (steps() keeps it chunky like pixel art) */
.finn-buddy-fx .fb-aura{inset:0;background:#FFC93C;clip-path:var(--px-clip);padding:5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  --px-clip:polygon(0 12px,4px 12px,4px 8px,8px 8px,8px 4px,12px 4px,12px 0,calc(100% - 12px) 0,calc(100% - 12px) 4px,calc(100% - 8px) 4px,calc(100% - 8px) 8px,calc(100% - 4px) 8px,calc(100% - 4px) 12px,100% 12px,100% calc(100% - 12px),calc(100% - 4px) calc(100% - 12px),calc(100% - 4px) calc(100% - 8px),calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) calc(100% - 4px),calc(100% - 12px) calc(100% - 4px),calc(100% - 12px) 100%,12px 100%,12px calc(100% - 4px),8px calc(100% - 4px),8px calc(100% - 8px),4px calc(100% - 8px),4px calc(100% - 12px),0 calc(100% - 12px));
  filter:drop-shadow(0 0 6px rgba(255,201,60,.9));opacity:0;animation:fb-aura .7s steps(7) forwards}
@keyframes fb-aura{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.45)}}
.finn-buddy-fx .fb-spark{left:40px;top:40px;width:6px;height:6px;box-shadow:0 0 6px #FFC93C;animation:fb-spark .6s steps(6) forwards}
@keyframes fb-spark{0%{transform:none;opacity:1}100%{transform:translate(var(--dx),var(--dy));opacity:0}}
.finn-buddy-fx .fb-star{left:calc(32px + var(--x));top:-6px;width:4px;height:4px;opacity:0;animation:fb-rise 1.1s steps(11) forwards}
@keyframes fb-rise{0%{opacity:1;transform:translateY(0)}80%{opacity:1}100%{opacity:0;transform:translateY(-44px)}}
/* Thinking: stepped white bubble up-right of the frame, two trailing squares, three dots blinking in turn */
.finn-buddy-fx .fb-think{left:66px;top:-56px;width:58px;height:36px;background:var(--ink);opacity:0;
  clip-path:polygon(0 8px,4px 8px,4px 4px,8px 4px,8px 0,calc(100% - 8px) 0,calc(100% - 8px) 4px,calc(100% - 4px) 4px,calc(100% - 4px) 8px,100% 8px,100% calc(100% - 8px),calc(100% - 4px) calc(100% - 8px),calc(100% - 4px) calc(100% - 4px),calc(100% - 8px) calc(100% - 4px),calc(100% - 8px) 100%,8px 100%,8px calc(100% - 4px),4px calc(100% - 4px),4px calc(100% - 8px),0 calc(100% - 8px));
  display:flex;align-items:center;justify-content:center;gap:6px;animation:fb-think 2.2s steps(1) forwards}
.finn-buddy-fx .fb-think::before{content:"";position:absolute;inset:3px;background:#fff;z-index:-1;
  clip-path:polygon(0 6px,3px 6px,3px 3px,6px 3px,6px 0,calc(100% - 6px) 0,calc(100% - 6px) 3px,calc(100% - 3px) 3px,calc(100% - 3px) 6px,100% 6px,100% calc(100% - 6px),calc(100% - 3px) calc(100% - 6px),calc(100% - 3px) calc(100% - 3px),calc(100% - 6px) calc(100% - 3px),calc(100% - 6px) 100%,6px 100%,6px calc(100% - 3px),3px calc(100% - 3px),3px calc(100% - 6px),0 calc(100% - 6px))}
.finn-buddy-fx .fb-think{isolation:isolate}
.finn-buddy-fx .fb-think b{width:6px;height:6px;background:var(--ink);animation:fb-dot .9s steps(1) infinite}
.finn-buddy-fx .fb-think b:nth-child(2){animation-delay:.3s}.finn-buddy-fx .fb-think b:nth-child(3){animation-delay:.6s}
@keyframes fb-dot{0%,50%{opacity:1}51%,100%{opacity:.2}}
@keyframes fb-think{0%{opacity:1;transform:translate(-4px,4px) scale(.6)}8%{transform:translate(-2px,2px) scale(.85)}16%,90%{opacity:1;transform:none}100%{opacity:0}}
/* Two small squares from the frame up to the bubble */
.finn-buddy-wrap:has(.fb-think)::before,.finn-buddy-wrap:has(.fb-think)::after{content:"";position:absolute;z-index:1;background:#fff;box-shadow:0 0 0 2px var(--ink);pointer-events:none}
.finn-buddy-wrap:has(.fb-think)::before{left:70px;top:-6px;width:6px;height:6px}
.finn-buddy-wrap:has(.fb-think)::after{left:62px;top:4px;width:4px;height:4px}
/* Tap: pixel heart floats up from the frame top */
.finn-buddy-fx .fb-heart{left:28px;top:-10px;width:4px;height:4px;animation:fb-rise 1.2s steps(12) forwards}
@media (prefers-reduced-motion:reduce){.finn-buddy-fx i,.finn-buddy-fx b{animation-duration:.01s!important}.finn-buddy-fx .fb-think{animation-duration:2.2s!important}}
/* Animated Showdown sprites are small pixel art: scale them up with crisp pixels instead of a blur */
img.anim{image-rendering:pixelated}
html[data-finn-sec=hoc] .finn-buddy-wrap,html[data-finn-sec=phieu] .finn-buddy-wrap{display:none}
@media print{.finn-buddy-wrap{display:none!important}}
:where(body.lesson) .card{background:var(--cream);border:2px solid var(--ink);border-radius:22px;padding:20px;box-shadow:0 4px 0 #E2D5B5;margin-bottom:16px}
:where(body.lesson) .say{font-size:clamp(21px,3.2vw,26px);font-weight:700;margin:0 0 8px}
:where(body.lesson) .hint{color:var(--muted);font-size:18px;margin:0 0 10px;min-height:1.4em}
:where(body.lesson) .row-btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;justify-content:center}
:where(body.lesson) .primary,:where(body.lesson) .secondary{font-family:var(--font-fun);font-weight:800;color:var(--ink);border:2px solid var(--ink);border-radius:18px;transition:transform .08s,box-shadow .08s}
:where(body.lesson) .primary{background:var(--cta);padding:10px 24px;min-height:56px;font-size:21px;box-shadow:0 5px 0 #D49D0C}
:where(body.lesson) .secondary{background:var(--cream);padding:8px 20px;min-height:52px;font-size:19px;box-shadow:0 4px 0 #D2C4A2}
:where(body.lesson) .primary:active,:where(body.lesson) .secondary:active{transform:translateY(3px);box-shadow:0 1px 0 #D2C4A2}
:where(body.lesson) .end{text-align:center;padding:16px 0}
:where(body.lesson) .end h2{font-size:32px;margin:8px 0}
:where(body.lesson) .chip{background:var(--cream);border:2px solid var(--ink);border-radius:999px;padding:6px 16px;font-family:var(--font-fun);font-weight:800;font-size:18px;min-height:44px}
:where(body.lesson) .chip[aria-pressed=true]{background:var(--cta);color:var(--ink);box-shadow:0 3px 0 #D49D0C}
:where(body.lesson) .r{color:var(--red)} :where(body.lesson) .b{color:var(--blue)} :where(body.lesson) .g{color:var(--green)}
/* Lesson header (Finn.lesson): 🏠 · title · badges · 🔊, and the section tabs */
#finn-top .pill{background:var(--cream);border:2px solid var(--ink);box-shadow:0 3px 0 #D2C4A2;min-height:48px;color:var(--ink);text-decoration:none}
#finn-top .pill .ic{width:26px;height:26px}
#finn-top .pill.home{width:56px;height:56px;padding:0;justify-content:center}
#finn-top .pill.home .ic{width:36px;height:36px}
#finn-top button.pill:active,#finn-top a.pill:active{transform:translateY(2px);box-shadow:none}
#finn-tabs button{background:var(--cream);border:2px solid var(--ink);border-radius:18px;box-shadow:0 4px 0 #D2C4A2}
#finn-tabs button[aria-selected=true]{background:var(--cta);border-color:var(--ink);color:var(--ink);box-shadow:0 4px 0 #D49D0C}
#finn-tabs .n{width:auto;height:auto}
#finn-tabs .n .ic{width:30px;height:30px}
button.replay{border:2px solid var(--ink)}
.replay .ic{width:28px;height:28px}
@media print{ body.lesson{background:#fff} }