:root {
  /* paper + ink: the same ink as the chibi outlines, so UI and drawings read as one sticker book */
  --bg: #FFF6E9;
  --paper-2: #FCEBD3;
  --card: #FFFFFF;
  --ink: #3E302A;
  --line: #4A3B32;
  --muted: #8A7867;
  --brand: #FF8A3D;      /* Gash orange */
  --brand-dark: #E0702A;
  --sky: #49B8F2;
  --sky-dark: #2A93CF;
  --leaf: #4CC27A;
  --leaf-dark: #2F9C59;
  --berry: #FF5A6E;
  --gold: #FFC83D;
  --gold-dark: #E0A21A;
  /* tappable things are stickers: ink outline + hard ink drop. Static panels get a soft paper drop. */
  --edge: 2.5px solid var(--line);
  --drop: 0 4px 0 var(--line);
  --drop-press: 0 1px 0 var(--line);
  --shadow: 0 4px 0 #F0DCC0;
  --radius: 24px;
  --font: "Mali", "Noto Sans Lao Looped", "Noto Sans Thai", "Noto Sans Lao", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-en: "Fredoka", "Mali", system-ui, -apple-system, "Segoe UI", sans-serif;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body, #root { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font); font-weight: 500;
  background-image: radial-gradient(#F4E3CA 1.3px, transparent 1.5px); background-size: 22px 22px;
  font-size: 18px; line-height: 1.45; overscroll-behavior: none; user-select: none;
}
h1, h2 { margin: 0.4em 0; font-weight: 800; }
h1 { font-size: 36px; color: var(--brand-dark); font-family: var(--font-en); letter-spacing: .5px; }
h2 { color: var(--ink); }
h2 { font-size: 24px; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
button:disabled { opacity: 0.5; cursor: default; }
input { font: inherit; }

.screen { min-height: 100%; padding: 16px; padding-bottom: 40px; max-width: 520px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.loading { justify-content: center; }
.emoji { font-size: 32px; line-height: 1; }
.emoji.big { font-size: 56px; }
.emoji.huge { font-size: 96px; }
.row { display: flex; gap: 12px; justify-content: center; margin-top: 16px; width: 100%; }

.btn {
  background: var(--card); border: var(--edge); border-radius: 20px; padding: 12px 22px; font-size: 20px; font-weight: 700;
  box-shadow: var(--drop); min-height: 58px; min-width: 58px; transition: transform .08s, box-shadow .08s;
}
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--drop-press); }
.btn.primary { background: var(--brand); color: #fff; text-shadow: 0 1px 0 rgba(74,59,50,.25); }
.btn.wide { width: 100%; }
.row .btn.primary { flex: 1; }
.link { color: var(--muted); text-decoration: underline; font-size: 16px; margin-top: 8px; }
.icon-btn { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--card); border: var(--edge); box-shadow: 0 3px 0 var(--line); font-size: 18px; font-weight: 800; }
.icon-btn:active { transform: translateY(2px); box-shadow: var(--drop-press); }
.err { color: var(--berry); font-weight: 700; margin-top: 8px; }

/* profiles */
.logo { display: flex; flex-direction: column; align-items: center; margin: 0 0 4px; }
.logo h1 { margin: 0; font-size: 46px; color: var(--brand); text-shadow: 0 3px 0 var(--line); }
.lang-toggle { align-self: flex-end; display: flex; gap: 4px; background: var(--card); border-radius: 999px; padding: 4px; border: var(--edge); }
.lang-toggle button { padding: 6px 14px; border-radius: 999px; font-weight: 700; }
.lang-toggle button.on { background: var(--brand); color: #fff; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; width: 100%; }
.profile-card { background: var(--card); border-radius: var(--radius); padding: 16px 8px; display: flex; flex-direction: column; align-items: center; gap: 6px; border: var(--edge); box-shadow: var(--drop); font-weight: 700; font-size: 18px; }
.profile-card.new { border-style: dashed; box-shadow: none; color: var(--brand-dark); font-size: 36px; background: #FFF1E2; }
.profile-card.new span { font-size: 18px; }
.profile-card.static { width: 160px; margin-bottom: 8px; }
.create { width: 100%; display: flex; flex-direction: column; gap: 10px; }
.create label { font-weight: 700; display: flex; flex-direction: column; gap: 6px; }
.create input[type=text], .create input:not([type]) { padding: 12px 16px; border-radius: 18px; border: var(--edge); font-size: 22px; background: var(--card); box-shadow: inset 0 3px 0 #F3E6D3; }
.create input:focus { outline: 3px solid var(--sky); outline-offset: 2px; }
.field-label { font-weight: 700; margin-top: 6px; }
.pick-row { display: flex; gap: 10px; }
.pick { flex: 1; background: var(--card); border-radius: 20px; padding: 8px 4px; font-size: 40px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: var(--edge); box-shadow: 0 3px 0 var(--line); }
.pick small { font-size: 14px; font-weight: 700; color: var(--muted); }
.pick.on { background: #FFE3CC; box-shadow: 0 0 0 3px var(--brand), 0 3px 0 var(--line); }
.slider { width: 100%; accent-color: var(--brand); height: 36px; }
.keypad { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.pin-dots { display: flex; gap: 14px; }
.pin { width: 20px; height: 20px; border-radius: 50%; border: var(--edge); background: var(--card); }
.pin.on { background: var(--brand); }
.keys { display: grid; grid-template-columns: repeat(3, 72px); gap: 10px; }
.key { width: 72px; height: 62px; border-radius: 18px; background: var(--card); font-size: 26px; font-weight: 700; border: var(--edge); box-shadow: var(--drop); font-family: var(--font-en); }
.key:active { transform: translateY(3px); box-shadow: var(--drop-press); }

/* map */
.map { padding-top: 8px; position: relative; }
.top-bar { width: 100%; display: flex; justify-content: space-between; align-items: center; }
.avatar-btn { display: flex; align-items: center; gap: 8px; background: var(--card); border-radius: 999px; padding: 4px 14px 4px 4px; border: var(--edge); box-shadow: 0 3px 0 var(--line); font-weight: 700; }
.wallet { display: flex; align-items: center; gap: 10px; background: var(--card); border-radius: 999px; padding: 6px 12px; box-shadow: var(--shadow); font-weight: 800; }
.map-title { color: var(--ink); font-size: 22px; text-align: center; margin: 22px 0 6px; }
.path { width: 100%; display: flex; flex-direction: column; gap: 18px; padding: 8px 0; position: relative; }
.path::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 8px dotted #EBCFA6; transform: translateX(-50%); }
.node-row { display: flex; position: relative; }
.node-row.left { justify-content: flex-start; padding-left: 8%; }
.node-row.right { justify-content: flex-end; padding-right: 8%; }
.node { background: var(--card); border-radius: 26px; width: 172px; padding: 12px 12px 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: var(--edge); box-shadow: var(--drop); position: relative; z-index: 1; }
.node:active:not(:disabled) { transform: translateY(3px); box-shadow: var(--drop-press); }
.node-no { width: 44px; height: 44px; border-radius: 50%; background: var(--paper-2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 21px; font-family: var(--font-en); border: 2px solid var(--line); }
.node.done .node-no { background: var(--leaf); color: #fff; }
.node.now { background: #FFF1E2; box-shadow: 0 0 0 4px var(--brand), var(--drop); }
.node.now .node-no { animation: pulse 1.4s infinite; }
.node.now .node-no { background: var(--brand); color: #fff; }
.node.locked { opacity: 1; background: #F7EFE3; border-color: #CDBBA4; box-shadow: none; color: var(--muted); }
.node.locked .node-no { border-color: #CDBBA4; color: #B5A28A; }
.node.boss { opacity: 0.5; font-size: 40px; }
.node-title { font-weight: 700; }
.node-stars { color: var(--gold-dark); letter-spacing: 1px; font-size: 16px; font-weight: 800; }
@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
.pet-corner { position: fixed; right: 12px; bottom: 70px; pointer-events: none; }
.map-foot { width: 100%; margin-top: 24px; display: flex; justify-content: center; }
.dl { color: var(--muted); font-weight: 700; }
.dl.ok { color: var(--leaf); }

/* lesson */
.lesson { min-height: 100%; display: flex; flex-direction: column; max-width: 520px; margin: 0 auto; padding: 12px 16px 20px; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
.lesson-bar { display: flex; align-items: center; gap: 12px; }
.track { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.track-bar { display: flex; gap: 5px; }
.seg { flex: 1; height: 12px; border-radius: 999px; background: var(--paper-2); }
.seg.done { background: var(--leaf); }
.seg.now { background: var(--brand); box-shadow: inset 0 -3px 0 rgba(74,59,50,.18); }
.track-label { font-size: 15px; font-weight: 700; color: var(--ink); padding-left: 2px; }
.lesson-stars { font-weight: 800; color: var(--ink); min-width: 52px; text-align: center; background: #FFF1C9; border-radius: 999px; padding: 4px 10px; font-size: 16px; }

.hook, .input, .reward, .activity { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; padding-top: 22px; }
.hook > .gash-bubble, .input > .say-card { margin-top: auto; }
.dock { margin-top: auto; width: 100%; padding-top: 12px; position: sticky; bottom: 0; }
.dock.row { display: flex; gap: 12px; }
.gash-bubble { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.gash-main { animation: talk 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes talk { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg); } 60% { transform: rotate(2deg); } }
.bubble { background: var(--card); border: var(--edge); border-radius: 26px; padding: 16px 22px; box-shadow: var(--drop); position: relative; text-align: center; max-width: 100%; }
.bubble::before { content: ''; position: absolute; top: -14px; left: 50%; margin-left: -12px; width: 22px; height: 22px; background: var(--card); border-left: var(--edge); border-top: var(--edge); transform: rotate(45deg); border-radius: 4px 0 0 0; }
.say-en { font-family: var(--font-en); font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.say-hint { color: var(--muted); font-size: 18px; margin-top: 2px; }
.explain { color: var(--muted); text-align: center; margin: 0; font-size: 17px; max-width: 32ch; }
.speak-btn { width: 72px; height: 72px; border-radius: 50%; background: var(--sky); color: #fff; display: flex; align-items: center; justify-content: center; border: var(--edge); box-shadow: var(--drop); flex: none; }
.speak-btn:active { transform: translateY(3px); box-shadow: var(--drop-press); }
.activity-head .speak-btn { width: 60px; height: 60px; }
.say-card { background: var(--card); border: var(--edge); border-radius: 30px; padding: 22px; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 6px; box-shadow: var(--drop); text-align: center; }
.say-card.tall { min-height: 340px; justify-content: center; }
.say-card .say-en { font-size: 38px; }
.tap-hint { display: flex; align-items: center; gap: 6px; color: var(--sky-dark); font-weight: 700; font-size: 15px; margin-top: 6px; }

.activity-head { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.prompt { font-weight: 700; font-size: 22px; line-height: 1.3; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; width: 100%; }
.card { background: var(--card); border: var(--edge); border-radius: var(--radius); box-shadow: var(--drop); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; transition: transform .08s, box-shadow .08s; overflow: hidden; }
.card.big { aspect-ratio: 1; padding: 6px; }
.card.big .emoji { font-size: 72px; }
.card:active { transform: translateY(3px); box-shadow: var(--drop-press); }
.card.wrong { background: #FFE9EC; border-color: var(--berry); box-shadow: 0 4px 0 var(--berry); animation: shake .35s; }
.card.correct { background: #E7F8EE; border-color: var(--leaf-dark); box-shadow: 0 4px 0 var(--leaf-dark); }
.card .label { font-weight: 600; font-size: 20px; font-family: var(--font-en); }
@keyframes shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }
/* match game (template B) */
.match-count { font-weight: 800; color: var(--ink); background: var(--card); border-radius: 999px; padding: 4px 14px; border: var(--edge); }
.match-hint { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--muted); font-size: 15px; width: 100%; justify-content: center; }
.hint-step { display: flex; align-items: center; gap: 6px; }
.hint-no { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--line); }
.hint-arrow { color: var(--brand); font-size: 20px; }
.match-board { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.match-col { display: flex; flex-direction: column; gap: 12px; }
.tile { position: relative; background: var(--card); border-radius: 22px; border: var(--edge); box-shadow: var(--drop); min-height: 86px; display: flex; align-items: center; justify-content: center; gap: 8px; transition: transform .08s, background .2s, border-color .2s; }
.tile:active { transform: translateY(3px); box-shadow: var(--drop-press); }
.tile.sound { color: var(--sky-dark); background: #EAF6FE; }
.tile.sound .tile-icon { width: 50px; height: 50px; border-radius: 50%; background: var(--sky); color: #fff; border: var(--edge); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tile.sound.picked { animation: wobble .6s infinite; }
.tile.sound.picked .tile-icon { box-shadow: 0 0 0 8px rgba(79,195,247,0.3); }
.tile-dots { color: #C8BFB0; letter-spacing: 2px; font-weight: 800; }
.tile-word { font-weight: 600; color: var(--ink); font-size: 19px; font-family: var(--font-en); }
.tile.picture .emoji { font-size: 52px; }
.tile.picture.ready { background: #FFF6DA; animation: breathe 1.2s infinite; }
.tile.picture.wrong { border-color: var(--berry); background: #FFE9EC; animation: shake .35s; }
.tile.matched { opacity: 0.95; }
.tile-check { position: absolute; top: -10px; right: -10px; width: 28px; height: 28px; border-radius: 50%; color: #fff; font-weight: 900; font-size: 15px; display: flex; align-items: center; justify-content: center; border: var(--edge); }
.feedback.big { font-size: 56px; }
@keyframes wobble { 0%,100% { transform: rotate(-1.5deg); } 50% { transform: rotate(1.5deg); } }
@keyframes breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.03); } }

.round-dots { display: flex; gap: 8px; margin-top: 4px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--paper-2); }
.dot.done { background: var(--leaf); }
.dot.now { background: var(--brand); transform: scale(1.35); box-shadow: 0 0 0 2px var(--line); }
.feedback { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: 20px; }
.stars .star { color: #EADFCF; -webkit-text-stroke: 1.5px #D9C9B2; }
.stars .star.on { color: var(--gold); -webkit-text-stroke: 1.5px var(--line); }

.mic-btn { width: 116px; height: 116px; border-radius: 50%; background: var(--brand); font-size: 48px; border: 3px solid var(--line); box-shadow: 0 6px 0 var(--line); transition: transform .08s; touch-action: none; }
.mic-btn.rec { background: var(--berry); box-shadow: 0 0 0 14px rgba(255,90,110,0.25), 0 6px 0 var(--line); }
.mic-btn.dim { opacity: 0.4; }
.mic-label { font-weight: 700; color: var(--muted); }

.reward h2 { color: var(--brand-dark); font-size: 32px; margin: 0; }
.big-stars { font-size: 20px; font-weight: 700; }
.outcome-list { display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center; background: var(--card); border-radius: 20px; padding: 8px 14px; box-shadow: var(--shadow); }
.chest { background: var(--card); border-radius: 18px; padding: 12px 20px; font-weight: 800; box-shadow: var(--shadow); font-size: 20px; }
.bounce { animation: bounce 1s infinite; }
@keyframes bounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* which-is-missing (template C) */
.shelf { display: flex; gap: 12px; width: 100%; justify-content: center; }
.shelf-item { flex: 1; aspect-ratio: 1; max-width: 112px; background: var(--card); border-radius: 20px; border: var(--edge); display: flex; align-items: center; justify-content: center; position: relative; overflow: visible; }
.shelf-item .emoji { font-size: 48px; }
.shelf-item.boxed { background: #FFF1C9; border-style: dashed; animation: breathe 1.2s infinite; }
.shelf-item.boxed .q { position: absolute; top: -12px; right: -8px; background: var(--brand); color: #fff; border-radius: 50%; width: 30px; height: 30px; font-weight: 900; display: flex; align-items: center; justify-content: center; border: var(--edge); }
.shelf-item.peek { border-color: var(--leaf-dark); background: #E7F8EE; }
.grid2.small .card.opt { flex-direction: row; gap: 10px; padding: 10px 12px; min-height: 80px; }
.grid2.small .card.opt .emoji { font-size: 40px; }

/* word order (template F) */
.say-hint.center { text-align: center; }
.answer-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: 100%; min-height: 70px; padding: 10px; border-radius: 22px; background: #FFF1C9; border: 3px dashed #E5C68C; }
.answer-row.wrong { border-color: var(--berry); background: #FFE9EC; animation: shake .35s; }
.answer-row.right, .answer-row.reveal { border-color: var(--leaf-dark); border-style: solid; background: #E7F8EE; }
.slot { min-width: 64px; height: 50px; border-radius: 14px; background: rgba(74,59,50,0.07); font-weight: 600; font-size: 21px; padding: 0 12px; font-family: var(--font-en); }
.slot.filled { background: var(--card); border: var(--edge); box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.chip-pool { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; width: 100%; }
.chip { background: var(--card); border-radius: 16px; padding: 10px 18px; font-weight: 600; font-size: 22px; font-family: var(--font-en); border: var(--edge); box-shadow: var(--drop); }
.chip:active { transform: translateY(3px); box-shadow: var(--drop-press); }
.chip.used { opacity: 0.2; box-shadow: none; }

/* map: unit headers + review nodes */
.unit-head { width: 100%; text-align: center; font-weight: 700; color: var(--ink); background: #FFE3CC; border-radius: 999px; padding: 6px 16px; margin: 10px 0 4px; position: relative; z-index: 1; border: 2px solid #F2C9A0; }
.node.review { background: #FFF6DA; }
.node.review .node-no { background: var(--gold); color: var(--ink); }
.node-badge { font-size: 12px; font-weight: 800; color: #B8860B; }

/* picture images (svg) sized like their emoji slot */
img.pic { display: block; object-fit: contain; border-radius: 18px; }
.emoji.pic { width: 1.15em; height: 1.15em; }
.card.big .emoji.pic { width: 100%; height: 100%; border-radius: 18px; }
.tile.picture .emoji.pic { width: 72px; height: 72px; }
.shelf-item .emoji.pic { width: 100%; height: 100%; border-radius: 17px; }
.grid2.small .card.opt .emoji.pic { width: 48px; height: 48px; }
.emoji.huge.pic { width: 190px; height: 190px; border-radius: 26px; }

/* ---------- phase 4: home, pet, quests, shop, reward ---------- */
.coin-btn { font-weight: 800; background: #FFF1C9; border-radius: 999px; padding: 2px 10px; border: 2px solid var(--line); }
.home-card { width: 100%; display: flex; align-items: center; gap: 12px; background: var(--card); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); margin-top: 12px; }
.pet { line-height: 1; transition: transform .3s; }
.pet.happy { animation: bounce 1.6s infinite; }
.pet.sleepy { opacity: .9; }
.pet-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pet-name { font-weight: 800; }
.pet-mood { color: var(--muted); font-size: 15px; }
.pet-bar { height: 12px; background: var(--paper-2); border-radius: 999px; overflow: hidden; }
.pet-fill { height: 100%; background: var(--leaf); border-radius: 999px; transition: width .4s; }
.daily-chest { display: flex; flex-direction: column; align-items: center; gap: 2px; background: #FFF1C9; border-radius: 20px; padding: 8px 10px; font-weight: 800; font-size: 13px; border: var(--edge); box-shadow: 0 3px 0 var(--line); }
.daily-chest.got { border-color: #E6DCCB; box-shadow: none; background: #F7F2EA; color: var(--muted); }
.wiggle { animation: wiggle 1s infinite; display: inline-block; }
@keyframes wiggle { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
.quests { width: 100%; background: var(--card); border-radius: var(--radius); padding: 12px 14px; box-shadow: var(--shadow); margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.quests-head { display: flex; justify-content: space-between; font-weight: 800; }
.weekly { color: var(--muted); font-size: 14px; }
.quest { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: #FFF8EE; }
.quest.done { background: #E7F8EE; color: var(--muted); }
.quest.done .q-name { text-decoration: line-through; }
.q-emoji { font-size: 22px; }
.q-name { flex: 1; font-weight: 700; }
.q-prog { font-weight: 800; color: var(--brand-dark); }
.quest.done .q-prog { color: var(--leaf); }
.row.actions { margin-top: 10px; }
.row.actions .btn { flex: 1; position: relative; font-size: 17px; }
.pill { position: absolute; top: -10px; right: -8px; background: var(--berry); color: #fff; border-radius: 999px; font-size: 13px; padding: 1px 8px; border: 2px solid var(--line); }
.node.boss.open { opacity: 1; background: #FFE9EC; animation: pulse 1.4s infinite; }
.node.boss.done { opacity: 1; background: #FFF4D6; border-color: var(--gold); }
.gain-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.gain { background: var(--card); border-radius: 999px; padding: 6px 14px; font-weight: 800; border: var(--edge); }
.chest-box { background: #FFF1C9; border: 3px dashed var(--line); border-radius: 26px; padding: 14px 28px; }
.chest-box.open { border-style: solid; background: #E7F8EE; box-shadow: var(--drop); }
.chest-content { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; }
.news { background: var(--card); border-radius: 16px; padding: 10px 16px; font-weight: 700; box-shadow: var(--shadow); font-size: 16px; }

/* boss */
.boss-mode { background: linear-gradient(#FDECEC, var(--bg) 40%); }
.hp { flex: 1; display: flex; align-items: center; gap: 8px; }
.hp-face { font-size: 28px; }
.hp-bar { flex: 1; height: 18px; background: #F2D9B5; border-radius: 999px; overflow: hidden; border: 2px solid #E0B080; }
.hp-fill { height: 100%; background: linear-gradient(90deg, #EF5350, #FF8A3D); transition: width .5s; }
.hp-num { font-weight: 800; min-width: 26px; text-align: right; }

/* avatar */
.avatar { position: relative; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.av-base { position: relative; z-index: 1; }
.av-room { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .35; z-index: 0; }
.av-hat { position: absolute; top: -6%; left: 50%; transform: translateX(-50%); z-index: 2; }
.av-face { position: absolute; top: 34%; left: 50%; transform: translateX(-50%); z-index: 2; }
.av-neck { position: absolute; bottom: 2%; left: 50%; transform: translateX(-50%); z-index: 2; }

/* shop */
.shop h2 { margin: 0; }
.dressing { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); margin: 10px 0; }
.tabs { display: flex; gap: 4px; background: var(--card); border-radius: 999px; padding: 4px; border: var(--edge); }
.tab { padding: 8px 16px; border-radius: 999px; font-weight: 700; }
.tab.on { background: var(--brand); color: #fff; }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; margin-top: 14px; }
.shop-item { background: var(--card); border-radius: 22px; padding: 12px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; border: var(--edge); box-shadow: var(--drop); }
.shop-item.owned { background: #FFF8EE; }
.shop-item.on { background: #E7F8EE; box-shadow: 0 0 0 3px var(--leaf), var(--drop); }
.shop-item.rare { opacity: .6; }
.item-name { font-weight: 700; font-size: 14px; }
.item-price { font-size: 13px; color: var(--brand-dark); font-weight: 800; }

/* certificate */
.cert h2 { margin: 0; }
.cert-canvas { width: 100%; max-width: 520px; border-radius: 16px; box-shadow: var(--shadow); margin: 12px 0; }

.act-wrap { flex: 1; display: flex; flex-direction: column; }

/* chibi pets (art/pets.ts) */
.pet-art { display: inline-block; line-height: 0; flex: none; }
.pet-art svg { display: block; overflow: visible; }
.pet-art.bounce { animation: bounce 1.6s infinite; }
.pick .pet-art { margin: 2px 0; }
.news .pet-art { vertical-align: middle; margin-right: 4px; }

/* offline + install card (home) */
.map-foot { margin-top: 20px; }
.offline-card { width: 100%; background: var(--card); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.offline-head { display: flex; align-items: center; gap: 12px; }
.offline-icon { width: 44px; height: 44px; border-radius: 50%; background: #E3F4FF; color: #2E9BC9; display: flex; align-items: center; justify-content: center; flex: none; }
.offline-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.offline-title { font-weight: 800; font-size: 17px; }
.offline-sub { color: var(--muted); font-size: 15px; font-weight: 700; }
.offline-bar { height: 10px; background: #F2E3C9; border-radius: 999px; overflow: hidden; }
.offline-fill { height: 100%; background: var(--sky); border-radius: 999px; transition: width .3s; }
.offline-note { font-size: 15px; color: var(--muted); line-height: 1.35; }
.btn.small { padding: 10px 16px; font-size: 16px; min-height: 44px; display: inline-flex; align-items: center; gap: 6px; }
.btn.primary.small { flex: none; }
.install-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border-top: 2px solid #F7EEDC; padding-top: 10px; }
.install-why { color: var(--muted); font-size: 14px; font-weight: 700; }
.offline-mini { align-self: center; color: var(--leaf); font-weight: 800; font-size: 14px; background: #EFFAEF; border-radius: 999px; padding: 4px 12px; }
.dl-btn { width: 100%; flex: none; }

/* ---------- farm ---------- */
.farm-door { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: var(--radius); background: #D6F2DF; border: var(--edge); box-shadow: var(--drop); text-align: left; }
.farm-door:active { transform: translateY(3px); box-shadow: var(--drop-press); }
.farm-door.locked { background: #EFEAE2; border-color: #B9A994; box-shadow: 0 4px 0 #B9A994; }
.farm-door.locked .farm-door-text b { color: var(--muted); }
.farm-door.locked .farm-door-text small { color: var(--ink); font-weight: 700; }
.farm-door.nudge { animation: shake .35s; }
.farm-news { background: #D6F2DF; }
.farm-door-art { display: inline-flex; width: 56px; height: 56px; }
.farm-door-text { flex: 1; display: flex; flex-direction: column; }
.farm-door-text b { font-size: 19px; color: #2E7D46; }
.farm-door-text small { color: var(--muted); font-size: 14px; }
.farm-door-go { font-size: 20px; color: #2E7D46; }

.screen.farm { background: #EAF7EC; min-height: 100vh; max-width: 560px; }
.farm-art { display: inline-flex; flex: none; }
.farm-art svg { display: block; width: 100%; height: 100%; }
.farm-title { font-size: 20px; margin: 0; color: #2E7D46; }
.fcoin { display: inline-flex; align-items: center; gap: 3px; font-weight: 800; }
.farm-level { width: 100%; display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; }
.farm-level .pet-bar { flex: 1; }
.farm-level small { color: var(--muted); font-weight: 700; min-width: 56px; text-align: right; }
.lv-badge { background: #5CC97B; color: #fff; font-weight: 800; border-radius: 999px; padding: 2px 12px; font-size: 15px; }

.farm-field { width: 100%; margin-top: 8px; padding: 12px; border-radius: 28px; background: #BFE7A8; box-shadow: inset 0 -8px 0 #A6D98C; display: flex; flex-direction: column; gap: 12px; }
.farm-buildings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bld { position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 18px; background: rgba(255,255,255,.55); font-weight: 800; font-size: 14px; }
.bld:active { transform: scale(.95); }
.badge { position: absolute; top: 2px; right: 8px; min-width: 24px; height: 24px; border-radius: 12px; background: var(--brand); color: #fff; font-style: normal; font-size: 13px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.badge.go { background: #2EBD59; animation: wiggle 1.2s infinite; }

.yard { position: relative; height: 120px; border-radius: 22px; background: #CFEFBC; overflow: hidden; }
.spot { position: absolute; bottom: 8px; width: 62px; height: 62px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.spot:not(.has) { border: 3px dashed rgba(74,59,50,.22); }
.spot .plus { font-size: 26px; color: rgba(74,59,50,.3); font-weight: 800; }
.spot.s0 { left: 4px; } .spot.s1 { left: 70px; bottom: 40px; } .spot.s2 { right: 70px; bottom: 40px; } .spot.s3 { right: 4px; }
.yard-pet { position: absolute; bottom: 4px; left: 50%; margin-left: -43px; animation: stroll 9s ease-in-out infinite; }
.yard-pet .hop { display: inline-block; animation: hop .5s ease-out; }
.pet-spark { position: absolute; top: 0; right: 0; font-style: normal; animation: wiggle 1.4s infinite; }
@keyframes stroll { 0%, 100% { transform: translateX(-34px); } 50% { transform: translateX(34px); } }
@keyframes hop { 0% { transform: translateY(0); } 40% { transform: translateY(-26px) scale(1.06); } 100% { transform: translateY(0); } }

.collect-all { width: 100%; flex: none; font-size: 18px; }
.plots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.plot { position: relative; aspect-ratio: 1; border-radius: 18px; background: rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; }
.plot:active { transform: scale(.95); }
.plot .plot-art { width: 100%; height: 100%; }
.plot.ready { background: rgba(255,236,150,.75); animation: glow 1.4s ease-in-out infinite; }
.plot.wet .plot-art { filter: saturate(1.25) brightness(.94); }
.plot .plus { position: absolute; top: 18%; font-size: 30px; font-weight: 800; color: rgba(74,59,50,.35); }
.plot-info { position: absolute; top: 6px; left: 6px; right: 6px; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.mini-bar { width: 80%; height: 8px; border-radius: 4px; background: rgba(74,59,50,.15); overflow: hidden; }
.mini-bar span { display: block; height: 100%; background: #5CC97B; }
.time { font-size: 13px; font-weight: 800; color: #4A3B32; background: rgba(255,255,255,.7); border-radius: 8px; padding: 0 6px; }
.water-hint { position: absolute; top: 26px; right: -2px; animation: wiggle 1.4s infinite; }
.ready-tag { position: absolute; top: 4px; font-size: 13px; font-weight: 800; background: #FF8A3D; color: #fff; border-radius: 10px; padding: 1px 8px; }
.plot.locked { flex-direction: column; gap: 2px; background: rgba(255,255,255,.5); border: 3px dashed rgba(74,59,50,.25); }
.plot-buy { font-size: 13px; font-weight: 800; }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255,200,61,.0); } 50% { box-shadow: 0 0 0 6px rgba(255,200,61,.55); } }

.pens { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 4px; border-top: 4px dashed rgba(169,116,74,.35); }
.pen { position: relative; aspect-ratio: 1; border-radius: 18px; background: #F2DDB9; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; }
.pen.ready { background: #FFEFA8; animation: glow 1.4s ease-in-out infinite; }
.pen .munch { animation: munch 1s ease-in-out infinite; }
.thought { position: absolute; top: 4px; right: 4px; background: #fff; border-radius: 16px; padding: 2px 4px; display: flex; align-items: center; gap: 2px; box-shadow: 0 2px 0 rgba(0,0,0,.08); }
.thought b { font-size: 13px; }
.thought.want { opacity: .9; }
@keyframes munch { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-4deg) translateY(-2px); } }

.sheet-back { position: fixed; inset: 0; background: rgba(43,43,43,.35); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { position: relative; width: 100%; max-width: 560px; max-height: 78vh; overflow-y: auto; background: #FFFDF6; border-radius: 28px 28px 0 0; padding: 18px 16px 28px; animation: up .22s ease-out; }
.sheet h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 21px; }
.sheet-x { position: absolute; top: 10px; right: 12px; width: 40px; height: 40px; border-radius: 50%; background: #F1ECE2; font-size: 18px; }
@keyframes up { from { transform: translateY(40%); opacity: .4; } to { transform: none; opacity: 1; } }
.sheet .tabs { margin-bottom: 10px; }
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.pick-grid .pick { flex: none; font-size: inherit; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px; border-radius: 20px; background: #fff; text-align: center; }
.pick.off { opacity: .55; }
.pick.own { outline: 3px solid #5CC97B; }
.pick-name { font-weight: 800; font-size: 15px; line-height: 1.2; }
.pick-sub { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 2px; }
.pick-price { font-size: 14px; font-weight: 800; }
.pick .count { font-size: 16px; }
.pick .btn.small { padding: 4px 10px; min-height: 36px; font-size: 14px; margin-top: 4px; }
.orders { display: flex; flex-direction: column; gap: 10px; }
.order { background: #fff; border-radius: 20px; padding: 12px; box-shadow: var(--shadow); border: 3px solid transparent; }
.order.ok { border-color: #5CC97B; }
.order-items { display: flex; gap: 10px; flex-wrap: wrap; }
.need { display: flex; flex-direction: column; align-items: center; opacity: .75; }
.need.got { opacity: 1; }
.need b { font-size: 14px; }
.need.got b { color: #2E9B4E; }
.order-foot { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.order-foot .reward { flex: 1; display: flex; align-items: center; gap: 6px; }
.farm-pop { position: fixed; transform: translate(-50%, -50%); display: flex; gap: 6px; pointer-events: none; z-index: 60; font-weight: 900; font-size: 20px; color: #2E7D46; animation: rise 1s ease-out forwards; }
.farm-pop span { display: inline-flex; align-items: center; background: rgba(255,255,255,.9); border-radius: 16px; padding: 2px 8px; }
@keyframes rise { from { opacity: 1; transform: translate(-50%, -30%); } to { opacity: 0; transform: translate(-50%, -160%); } }
.farm-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); background: #4A3B32; color: #fff; font-weight: 700; padding: 10px 18px; border-radius: 999px; z-index: 70; animation: up .2s ease-out; max-width: 90vw; text-align: center; }
.muted { color: var(--muted); }
.spin { animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* install card (home) */
.install-card { width: 100%; display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 10px 14px; border-radius: var(--radius); background: #E3F3FD; border: var(--edge); box-shadow: var(--drop); text-align: left; }
.install-card:active { transform: translateY(3px); box-shadow: var(--drop-press); }
.install-icon { border-radius: 14px; border: 2px solid var(--line); flex: none; }
.install-text { flex: 1; display: flex; flex-direction: column; }
.install-text b { font-size: 19px; color: var(--sky-dark); }
.install-text small { color: var(--muted); font-size: 14px; }
.install-go { width: 40px; height: 40px; border-radius: 50%; background: var(--sky); color: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; }
.install-steps { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 10px; }
.install-steps li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border-radius: 18px; padding: 12px; box-shadow: var(--shadow); font-weight: 600; }
.step-n { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff; border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }

/* ---------- ตัวหนู: 2D chibi kid ---------- */
.kid-art { display: inline-flex; line-height: 0; flex: none; }
.kid-art svg { display: block; overflow: visible; }
.avatar-btn .kid-art { border-radius: 50%; overflow: hidden; background: #E3F3FD; border: 2px solid var(--line); }

.create .wizard-track { display: flex; gap: 6px; width: 100%; }
.wz { flex: 1; display: flex; flex-direction: column; gap: 4px; text-align: left; }
.wz:disabled { opacity: 1; }
.wz-bar { height: 12px; border-radius: 999px; background: var(--paper-2); }
.wz.done .wz-bar { background: var(--leaf); }
.wz.now .wz-bar { background: var(--brand); }
.wz-label { font-size: 13px; font-weight: 700; color: var(--muted); }
.wz.now .wz-label { color: var(--ink); }
.wz-head { text-align: center; }
.wz-head h2 { margin: 6px 0 0; font-size: 28px; }
.wz-head p { margin: 0; color: var(--muted); }
.wz-pair { display: flex; justify-content: center; align-items: flex-end; gap: 6px; }

.kid-builder { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.kid-stage { position: relative; display: flex; justify-content: center; }
.kid-preview { width: 190px; height: 210px; border-radius: 30px; background: #3D9BFF; border: var(--edge); box-shadow: var(--drop); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; animation: pop .35s ease-out; }
@keyframes pop { 0% { transform: scale(.9); } 60% { transform: scale(1.04); } 100% { transform: none; } }
.kid-roll { position: absolute; left: calc(50% + 62px); bottom: -10px; width: 62px; height: 62px; border-radius: 50%; background: var(--gold); border: var(--edge); box-shadow: 0 3px 0 var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 22px; line-height: 1; }
.kid-roll small { font-size: 12px; font-weight: 700; }
.kid-roll:active { transform: translateY(2px); box-shadow: var(--drop-press); }
.kid-skins { display: flex; justify-content: center; gap: 12px; padding-top: 6px; }
.swatch { width: 44px; height: 44px; border-radius: 50%; border: 2.5px solid var(--line); flex: none; }
.swatch.on { box-shadow: 0 0 0 4px var(--brand); }
.swatch.small { width: 34px; height: 34px; }
.kid-tabs { justify-content: space-between; width: 100%; }
.kid-tabs .tab { flex: 1; padding: 8px 4px; }
.kid-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }
.kid-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0 4px; border-radius: 18px; background: #fff; border: 2.5px solid var(--line); box-shadow: 0 3px 0 var(--line); font-size: 13px; font-weight: 700; overflow: hidden; }
.kid-opt.on { background: #FFE3CC; box-shadow: 0 0 0 3px var(--brand), 0 3px 0 var(--line); }
.kid-opt:active { transform: translateY(2px); }
.kid-opt .dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); }
.kid-colors { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; padding-top: 4px; }

.buddy-scene { position: relative; width: 100%; height: 190px; border-radius: 28px; background: linear-gradient(#CDEBFF, #E6F6FF 55%, #BFE7A8 55%); border: var(--edge); box-shadow: var(--drop); overflow: hidden; }
.buddy-scene .tag { position: absolute; top: 10px; background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 0 12px; font-weight: 700; font-size: 15px; z-index: 1; }
.tag-me { left: 32px; } .tag-pet { right: 34px; }
.bs-kid { position: absolute; left: 18px; bottom: 2px; }
.bs-heart { position: absolute; left: 50%; top: 56px; margin-left: -10px; color: #FF6B81; font-size: 30px; animation: pulse 1.2s infinite; }
.bs-pet { position: absolute; right: 12px; bottom: 4px; line-height: 0; animation: pop .35s ease-out; }
.buddy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.buddy { display: flex; flex-direction: column; align-items: center; padding: 6px 6px 10px; border-radius: 24px; background: #fff; border: var(--edge); box-shadow: var(--drop); }
.buddy b { font-size: 19px; }
.buddy small { color: var(--muted); font-size: 14px; }
.buddy.on { background: #E7F8EE; box-shadow: 0 0 0 4px var(--leaf), var(--drop); }

.dressing-room { width: 100%; display: flex; gap: 12px; margin: 10px 0; }
.dress-kid { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: var(--radius); background: #E3F3FD; border: var(--edge); box-shadow: var(--drop); }
.dress-kid:active { transform: translateY(3px); box-shadow: var(--drop-press); }
.dress-edit { font-weight: 700; font-size: 15px; color: var(--sky-dark); }
.dressing-room .dressing { flex: 1.2; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding: 10px 6px; }
.dress-cap { font-weight: 700; font-size: 14px; color: var(--muted); }
.kid-sheet { max-height: 92vh; }
.kid-sheet .btn.wide { margin-top: 14px; }

/* farm time */
.farm-timer { background: #fff; border: 2px solid var(--line); border-radius: 999px; padding: 1px 10px; font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.farm-timer.low { background: #FFE9EC; color: #C2334A; animation: pulse 1s infinite; }
.sleep-back { position: fixed; inset: 0; z-index: 80; background: rgba(40,48,90,.55); display: flex; align-items: center; justify-content: center; padding: 20px; }
.sleep-card { width: 100%; max-width: 360px; background: #FFFDF6; border: var(--edge); box-shadow: var(--drop); border-radius: 28px; padding: 20px 18px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; animation: pop .35s ease-out; }
.sleep-card h3 { margin: 4px 0 0; font-size: 22px; }
.sleep-card p { margin: 0 0 8px; color: var(--muted); }

/* ---- speak-along (template D) ---- */
.activity.say { position: relative; gap: 12px; }
.say-guide { width: 100%; display: flex; align-items: center; gap: 10px; }
.say-guide .gash-art { flex: none; }
.say-bubble { flex: 1; background: #fff; border: var(--edge); border-radius: 18px; padding: 9px 13px; font-weight: 700; font-size: 16px; line-height: 1.35; }
.say-bubble small { display: block; font-weight: 600; font-size: 13px; color: var(--muted); margin-top: 2px; }
.say .say-card { padding: 16px 16px 18px; }
.say .say-card .emoji.huge, .say .say-card img { width: 170px; height: 170px; font-size: 120px; }
.say-word { font-family: var(--font-en); font-weight: 600; font-size: 54px; line-height: 1.12; letter-spacing: 1px; color: var(--ink); word-break: break-word; }
.say-word.long { font-size: 36px; }
.say-word .l-focus { color: #E5701F; text-decoration: underline; text-decoration-thickness: 5px; text-underline-offset: 8px; }
.say-word .l-ok { color: var(--leaf-dark, #2F9C59); }
.say-word .l-try { color: #C9520A; text-decoration: underline dotted; text-decoration-thickness: 5px; text-underline-offset: 8px; }
.say-tip { width: 100%; box-sizing: border-box; display: flex; gap: 10px; align-items: center; background: #FFF1E3; border: var(--edge); border-radius: 20px; padding: 10px 12px; font-size: 15px; line-height: 1.4; animation: pop .3s ease-out; }
.say-tip-sound { flex: none; min-width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: var(--font-en); font-weight: 700; font-size: 20px; color: #C9520A; padding: 0 6px; box-sizing: border-box; }
.say-moved { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; background: #EAF7EE; border: var(--edge); border-radius: 20px; padding: 12px 14px; font-size: 15px; line-height: 1.4; animation: pop .3s ease-out; }
.say-moved b { font-size: 17px; }
.say-moved span { color: var(--muted); font-weight: 600; }
.say-moved-tip { color: var(--ink) !important; }
.say-dock { width: 100%; margin-top: auto; display: flex; flex-direction: column; gap: 14px; }
.say-controls { display: flex; align-items: flex-start; justify-content: space-between; }
.say-ctl { width: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.say-ctl.main { flex: 1; width: auto; gap: 8px; }
.say-round { width: 64px; height: 64px; border-radius: 50%; border: var(--edge); box-shadow: 0 4px 0 var(--line); background: #fff; color: var(--sky-dark, #2A93CF); display: flex; align-items: center; justify-content: center; padding: 0; }
.say-round.on { background: var(--sky, #49B8F2); color: #fff; animation: pulse 1s infinite; }
.say-round.mine { color: var(--leaf-dark, #2F9C59); }
.say-round:disabled { opacity: .4; box-shadow: none; transform: translateY(4px); }
.say-mic-row { display: flex; align-items: center; justify-content: center; gap: 10px; }
.say .mic-btn { width: 104px; height: 104px; display: flex; align-items: center; justify-content: center; padding: 0; color: #fff; font-size: 0; }
.say .mic-btn.rec { animation: none; }
.say .mic-label { color: var(--ink); font-size: 15px; }
.say-waves { display: flex; align-items: center; gap: 4px; height: 40px; }
.say-waves span { width: 5px; border-radius: 3px; background: var(--berry, #FF5A6E); transition: height .08s; }
.say-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.say-tries { display: flex; align-items: center; gap: 6px; }
.say-tries > span { width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--line); background: #fff; }
.say-tries > span.on { background: var(--brand); }
.say-tries small { margin-left: 4px; font-size: 13px; font-weight: 700; color: var(--muted); }
.btn.small.skip-btn { padding: 8px 16px; font-size: 15px; }
.say-next { margin-top: 4px; }
.say-win { position: absolute; inset: -10px; z-index: 30; background: rgba(255,246,233,.86); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; animation: pop .35s ease-out; border-radius: 24px; }
.say-win .gash-art { animation: bounce 1s ease-in-out infinite; }
.say-ribbon { margin-top: -22px; background: var(--gold); border: 3px solid var(--line); box-shadow: 0 5px 0 var(--line); border-radius: 18px; padding: 4px 28px; font-family: var(--font-en); font-weight: 700; font-size: 38px; transform: rotate(-4deg); }
.say-win .stars { margin-top: 10px; }
.say-win-sub { font-weight: 700; font-size: 18px; }
.say-win-next { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14px; font-weight: 700; color: var(--muted); }
.say-win-next > span { width: 110px; height: 8px; border-radius: 4px; background: #F1E2C8; overflow: hidden; display: block; }
.say-win-next i { display: block; height: 100%; background: var(--leaf, #4CC27A); animation: fillbar 1.6s linear forwards; }
@keyframes fillbar { from { width: 0; } to { width: 100%; } }

/* anti-mash */
.grid2.wait .card, .match-board.wait .tile.picture { opacity: .55; transition: opacity .15s; }
.nudge { align-self: center; background: #FFF4D6; border: var(--edge); border-radius: 999px; padding: 6px 14px; font-weight: 700; font-size: 15px; animation: pop .3s ease-out; }
.retry-tag { display: inline-flex; align-items: center; gap: 2px; margin-left: 6px; background: #E6F6FD; border: 2px solid var(--sky-dark); color: var(--sky-dark); border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 700; vertical-align: middle; }
.round-dots .dot.retry { background: #BDE7FF; border-color: var(--sky-dark); }
.news.farm-coin-news { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.news.farm-coin-news small { color: var(--muted); font-weight: 600; }

.say-mode { align-self: center; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 2px 10px; border: 2px solid; max-width: 100%; text-align: center; }
.say-mode.letters { color: var(--leaf-dark); border-color: #A9DDB9; background: #EFFAF2; }
.say-mode.loudness { color: #9A5A12; border-color: #F0C98A; background: #FFF6E3; }

/* ---- farm tabs, pens, crafting ---- */
.farm-tabs { display: flex; gap: 6px; }
.ftab { position: relative; flex: 1; min-height: 50px; border-radius: 16px; border: 2.5px solid #9CC98A; background: #E5F5DA; color: var(--muted); font-weight: 700; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 4px; padding: 4px; }
.ftab.on { background: #fff; border-color: var(--line); box-shadow: 0 3px 0 var(--line); color: var(--ink); }
.ftab .badge { position: absolute; top: -8px; right: -4px; }
.farm-hint { margin: 0; display: flex; align-items: center; gap: 6px; background: rgba(255,255,255,.7); border-radius: 14px; padding: 6px 10px; font-weight: 600; font-size: 14px; color: var(--ink); }
.farm-hint.small { font-size: 12px; }
.plot.fert { box-shadow: inset 0 0 0 3px #C9A26A; }
.btn.gold { background: var(--gold); color: var(--ink); }
.btn:disabled { opacity: .5; box-shadow: none; transform: translateY(3px); }

.pen-list { display: flex; flex-direction: column; gap: 10px; }
.pen-card { background: #DDF2CF; border: var(--edge); border-radius: 22px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.pen-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.pen-head b { flex: 1; }
.pen-head small { font-weight: 700; color: var(--muted); }
.pen-chain { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--muted); font-size: 13px; }
.pen-yard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: #C9EBB2; border-radius: 16px; padding: 6px; border-bottom: 6px solid #E0A060; }
.pen-yard .pen { aspect-ratio: auto; min-height: 96px; }
.pen.buy-more { border: 2.5px dashed #9CC98A; background: rgba(255,255,255,.55); flex-direction: column; justify-content: center; align-items: center; gap: 4px; font-weight: 700; font-size: 13px; color: var(--muted); padding: 6px; }
.pen-actions { display: flex; gap: 8px; }
.pen-actions .btn { flex: 1; justify-content: center; font-size: 14px; padding: 6px 8px; }
.pen-unlocks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.unlock-card { background: #fff; border: var(--edge); border-radius: 20px; padding: 10px 8px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 15px; }
.unlock-card.locked { background: #F3EBDD; border-style: dashed; border-color: #CDBBA4; color: var(--muted); }
.unlock-card small { font-weight: 700; font-size: 12px; }
.unlock-art { position: relative; }
.unlock-card.locked .unlock-art .farm-art:first-child { opacity: .45; filter: grayscale(.6); }
.unlock-lock { position: absolute; right: -10px; bottom: -4px; }
.unlock-card .btn { font-size: 14px; padding: 4px 10px; min-height: 38px; }

.craft { display: flex; flex-direction: column; gap: 10px; }
.mtabs { display: flex; gap: 6px; }
.mtab { position: relative; flex: 1; border-radius: 16px; border: 2.5px solid #D9C4A6; background: #fff; padding: 6px 4px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-weight: 700; font-size: 13px; color: var(--ink); }
.mtab.on { background: #FFF4B8; border-color: var(--line); box-shadow: 0 3px 0 var(--line); }
.mtab.locked { background: #F3EBDD; color: var(--muted); }
.mtab small { font-size: 12px; }
.mtab .badge { position: absolute; top: -8px; right: -4px; }
.machine-buy { background: #fff; border: var(--edge); border-radius: 22px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.recipe-peek { display: flex; gap: 6px; }
.queue-box { background: #FFF4D6; border: var(--edge); border-radius: 22px; padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.queue-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 15px; }
.queue-head small { color: var(--muted); font-weight: 600; font-size: 12px; }
.queue { display: flex; gap: 6px; }
.qslot { flex: 1; min-height: 84px; border-radius: 16px; border: 2.5px solid var(--line); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-weight: 700; font-size: 12px; padding: 4px; }
.qslot.ready { background: #E7F8EE; border-color: var(--leaf-dark); color: var(--leaf-dark); animation: glow 1.4s ease-in-out infinite; }
.qslot.waiting { opacity: .7; }
.qslot.empty { border-style: dashed; border-color: #D9C4A6; background: #FBF3E4; color: var(--muted); }
.qslot.empty span { font-size: 24px; color: #CDBBA4; }
.qslot .mini-bar { width: 80%; }
.recipes-title { margin: 2px 0 0; font-size: 17px; }
.recipe { display: flex; align-items: center; gap: 8px; background: #fff; border: var(--edge); border-radius: 18px; padding: 8px; }
.recipe-out { width: 60px; height: 60px; border-radius: 14px; background: #FFF6E9; display: flex; align-items: center; justify-content: center; flex: none; }
.recipe-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.recipe-name { display: flex; justify-content: space-between; align-items: center; gap: 4px; font-size: 15px; }
.recipe-needs { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.recipe-needs small { color: var(--muted); font-weight: 600; }
.ing { display: inline-flex; align-items: center; gap: 1px; padding: 0 6px 0 2px; border-radius: 12px; border: 2px solid #E6A06A; background: #FFF1E3; color: #A4470E; font-weight: 700; font-size: 13px; }
.ing.ok { border-color: #2F9C59; background: #E7F8EE; color: #1F6B3B; }
.recipe .btn { flex: none; font-size: 14px; padding: 6px 10px; min-width: 64px; justify-content: center; }

/* ---------- parents' corner: cloud backup ---------- */
.link-btn { background: none; border: 0; color: var(--ink-soft, #6b5b4b); text-decoration: underline; font: inherit; font-size: 15px; padding: 10px; cursor: pointer; min-height: 44px; }
.link-btn.danger { color: var(--berry); }
.cl-entry { display: block; margin: 18px auto 0; }
.screen.cloud { max-width: 520px; margin: 0 auto; padding: 24px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.cl-head h2 { margin: 0 0 6px; }
.cl-head p { margin: 0; color: var(--ink-soft, #6b5b4b); line-height: 1.5; }
.cl-gate { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 12px 0; }
.cl-sum { font-size: 34px; font-weight: 800; }
.cl-gate input { width: 96px; font-size: 30px; text-align: center; padding: 8px; border-radius: 14px; border: 2px solid #e6d8c4; }
.cl-card { background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 4px 0 rgba(0,0,0,.06); display: flex; flex-direction: column; gap: 10px; }
.cl-card p { margin: 0; line-height: 1.5; }
.cl-list { margin: 0; padding-left: 20px; line-height: 1.6; }
.cl-check { display: flex; gap: 10px; align-items: center; font-weight: 700; padding: 10px; background: #fff7e8; border-radius: 12px; }
.cl-check input { width: 24px; height: 24px; flex: none; }
.cl-label { font-size: 14px; color: var(--ink-soft, #6b5b4b); }
.cl-code { font: 800 30px/1.2 ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; background: #fff7e8; border: 2px dashed #f0b44c; border-radius: 14px; padding: 12px; text-align: center; user-select: all; overflow-wrap: anywhere; }
.cl-hint { font-size: 14px; color: var(--ink-soft, #6b5b4b); }
.cl-sync { font-size: 14px; color: var(--ink-soft, #6b5b4b); margin-top: 6px; }
.cl-email { margin-top: 4px; }
.cl-ok { color: #2e8b57; font-weight: 700; }
.cl-code-in { font: 700 24px ui-monospace, Menlo, Consolas, monospace; letter-spacing: 2px; text-align: center; padding: 12px; border-radius: 14px; border: 2px solid #e6d8c4; width: 100%; box-sizing: border-box; }
.cl-choices { display: grid; gap: 12px; }
.cl-choice { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto; column-gap: 12px; text-align: left; background: #fff; border: 2px solid #f1e4d0; border-radius: 18px; padding: 14px; font: inherit; cursor: pointer; }
.cl-choice .cl-ic { grid-row: 1 / 3; font-size: 36px; align-self: center; }
.cl-choice small { color: var(--ink-soft, #6b5b4b); }
.cl-danger { display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 18px; border-top: 1px solid #eee2d0; padding-top: 8px; }
.btn.danger { background: var(--berry); color: #fff; }
.screen.cloud label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; }
.screen.cloud input[type=email] { font-size: 18px; padding: 12px; border-radius: 14px; border: 2px solid #e6d8c4; }
.cl-keep { display: flex; gap: 8px; flex-wrap: wrap; }
.cl-keep .btn { flex: 1 1 140px; justify-content: center; }
.say-heard { margin: 6px auto 0; max-width: 420px; text-align: center; font-size: 15px; color: var(--ink-soft, #6b5b4b); }
.say-heard q { font-weight: 700; color: var(--ink, #2b2118); quotes: '“' '”'; }
.say-heard small { opacity: .6; }

/* ---------- lesson not passed (below the first-try pass mark) ---------- */
.reward.not-passed h2 { color: var(--ink, #2b2118); }
.np-score { width: 100%; max-width: 420px; margin: 8px auto 4px; display: flex; flex-direction: column; gap: 10px; }
.np-line { font-size: 18px; text-align: center; }
.np-bar { position: relative; height: 22px; border-radius: 12px; background: #f1e4d0; overflow: visible; margin: 18px 0 6px; }
.np-fill { height: 100%; border-radius: 12px; background: linear-gradient(90deg, #f0a24c, #f5c04a); transition: width .6s ease; }
.np-mark { position: absolute; top: -8px; bottom: -8px; width: 3px; background: #2e8b57; border-radius: 2px; transform: translateX(-1px); }
.np-mark span { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: #2e8b57; white-space: nowrap; }
.np-need { text-align: center; color: var(--ink-soft, #6b5b4b); }
.np-tip { background: #fff7e8; border-radius: 14px; padding: 12px 14px; text-align: center; max-width: 420px; margin: 6px auto; }
.np-dock { display: flex; flex-direction: column; gap: 10px; }