/* CapyKaki — cartoon game-kit theme: chocolate board, parchment panels, glossy pills & gems */
:root {
  --bg: #573330; --bg-d: #43262A; --shade: #3A201F;
  --cream: #F7DDBF; --cream-l: #FFF3E1; --cream-mute: #C79D84;
  --paper: #F8DDC0; --paper-l: #FDEBD6; --paper-edge: #E7BD93; --paper-d: #C99466;
  --ink: #5B3222; --ink-mute: #A0705A;
  --board: #CB6236; --board-d: #8A3920;
  --red: #E4503E; --red-l: #F57A64; --red-d: #9C2D23;
  --orange: #F79A1A; --orange-l: #FFBE4F; --orange-d: #B5620A;
  --green: #8CB321; --green-l: #AED443; --green-d: #57720E;
  --teal: #35AFC0; --teal-l: #6FD3DD; --teal-d: #1F7482;
  --gold: #FFC934; --gold-d: #D08409;
  --r: 22px;
  --display: 'Lilita One', 'Fredoka', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: 'Fredoka', system-ui, sans-serif; font-weight: 500; color: var(--cream); min-height: 100vh;
  background-color: var(--bg);
  background-image: radial-gradient(rgba(0,0,0,.13) 1.5px, transparent 1.8px), radial-gradient(ellipse at 50% 0%, #6A3E38 0, transparent 70%);
  background-size: 26px 26px, 100% 100%;
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: .4px; }
.glyph { font-family: 'Klee One', 'Hiragino Maru Gothic ProN', sans-serif; font-weight: 600; }
.ic { width: 1.2em; height: 1.2em; flex: none; vertical-align: -.22em; }

/* ---------- top bar: the wooden board ---------- */
.topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  background: linear-gradient(#D66D3E 0 55%, var(--board) 55%); border-bottom: 4px solid var(--board-d);
  box-shadow: 0 5px 0 rgba(0,0,0,.22); }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 24px; color: var(--cream-l); text-shadow: 0 2px 0 var(--board-d); }
.logo { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 22px;
  background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.6) 0 3px, transparent 4px), linear-gradient(var(--red-l), var(--red));
  border: 3px solid var(--red-d); box-shadow: 0 3px 0 var(--red-d); text-shadow: 0 2px 0 var(--red-d); transform: rotate(-6deg); }
.tabs { display: flex; gap: 8px; margin: 0 auto; }
.tabs button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px; border-radius: 999px; font-family: var(--display); font-size: 16px;
  color: var(--cream); background: rgba(58,20,10,.28); box-shadow: inset 0 3px 0 rgba(0,0,0,.18); letter-spacing: .4px; }
.tabs button.on { color: #fff; background: linear-gradient(var(--gold) 0 50%, #F4B321 50%); border: 3px solid var(--gold-d);
  box-shadow: 0 3px 0 var(--gold-d); text-shadow: 0 2px 0 var(--gold-d); padding: 4px 13px; }
.coins { display: inline-flex; align-items: center; gap: 6px; background: rgba(58,20,10,.35); border-radius: 999px; padding: 4px 14px 4px 5px;
  font-family: var(--display); font-size: 18px; color: var(--cream-l); box-shadow: inset 0 3px 0 rgba(0,0,0,.25); white-space: nowrap; }
.coins .ic { width: 28px; height: 28px; }
.bump { animation: bump .5s; }
.testbar { background: repeating-linear-gradient(-45deg, var(--teal) 0 14px, #2E9DAD 14px 28px); color: #fff; text-align: center; padding: 6px 12px;
  font-family: var(--display); letter-spacing: .5px; font-size: 14px; text-shadow: 0 2px 0 var(--teal-d); border-bottom: 3px solid var(--teal-d); }
.testbar button { margin-left: 8px; text-decoration: underline; font-family: 'Fredoka'; font-weight: 600; font-size: 13px; }
main { max-width: 760px; margin: 0 auto; padding: 24px 16px 200px; }

/* ---------- glossy pill buttons ---------- */
.btn { --b: var(--orange); --l: var(--orange-l); --d: var(--orange-d);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px; font-family: var(--display); font-size: 18px; letter-spacing: .6px; color: #fff;
  background: linear-gradient(var(--l) 0 48%, var(--b) 48%); border: 3px solid var(--d);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.35), inset 0 -4px 0 rgba(0,0,0,.12), 0 5px 0 var(--d), 0 9px 10px rgba(0,0,0,.25);
  text-shadow: 0 2px 0 var(--d); transition: transform .08s, box-shadow .08s; }
.btn .ic { filter: drop-shadow(0 2px 0 var(--d)); }
.btn:active { transform: translateY(4px); box-shadow: inset 0 3px 0 rgba(255,255,255,.35), 0 1px 0 var(--d), 0 3px 4px rgba(0,0,0,.25); }
.btn.primary { --b: var(--green); --l: var(--green-l); --d: var(--green-d); }
.btn.danger  { --b: var(--red);   --l: var(--red-l);   --d: var(--red-d); }
.btn.teal    { --b: var(--teal);  --l: var(--teal-l);  --d: var(--teal-d); }
.btn.cream   { --b: #F1DDBF; --l: var(--cream-l); --d: #A9744F; color: var(--ink); text-shadow: none; }
.btn.cream .ic { filter: none; }
.btn.small { padding: 6px 14px; font-size: 15px; }
.btn:disabled { filter: grayscale(.85) brightness(.9); opacity: .7; pointer-events: none; }
.row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }
.link { font-weight: 600; text-decoration: underline; padding: 8px; }

/* ---------- parchment panels ---------- */
.card, .paper { position: relative; background: linear-gradient(var(--paper-l), var(--paper)); color: var(--ink); border-radius: var(--r); padding: 24px;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.45), inset 0 -7px 0 var(--paper-edge), 0 7px 0 var(--shade), 0 14px 22px rgba(0,0,0,.28); }
.paper { border-bottom-right-radius: 4px; }
.paper::after { content: ''; position: absolute; right: 0; bottom: 0; width: 38px; height: 38px; border-top-left-radius: 10px;
  background: linear-gradient(315deg, var(--bg) 49%, #E9C49C 50%, var(--paper-l) 100%); box-shadow: -3px -3px 5px rgba(90,40,20,.15); }

/* ---------- home ---------- */
.hero { display: flex; gap: 18px; align-items: center; justify-content: space-between; margin-bottom: 30px; }
.hero h1 { font-size: 34px; color: var(--ink); }
.hero p { color: var(--ink-mute); margin: 2px 0 12px; font-weight: 600; }
.goal { font-family: var(--display); text-align: center; white-space: nowrap; padding: 10px 18px; border-radius: 14px; color: #fff; transform: rotate(3deg);
  background: linear-gradient(var(--red-l) 0 50%, var(--red) 50%); border: 3px solid var(--red-d); box-shadow: 0 5px 0 var(--red-d); text-shadow: 0 2px 0 var(--red-d); }
.goal small { display: block; font-size: 13px; opacity: .9; letter-spacing: 1px; text-transform: uppercase; }
.goal b { font-weight: 400; font-size: 24px; }
.bar { height: 22px; flex: 1; min-width: 120px; border-radius: 99px; padding: 3px; background: #6E3D2E; border: 3px solid var(--shade);
  box-shadow: inset 0 3px 0 rgba(0,0,0,.3); }
.bar i { display: block; height: 100%; border-radius: 99px; transition: width .4s;
  background: linear-gradient(rgba(255,255,255,.4) 0 35%, transparent 35%), repeating-linear-gradient(-45deg, var(--teal-l) 0 9px, var(--teal) 9px 18px);
  box-shadow: inset 0 -2px 0 var(--teal-d); }
.lesson-top .bar i { background: linear-gradient(rgba(255,255,255,.4) 0 35%, transparent 35%), repeating-linear-gradient(-45deg, var(--green-l) 0 9px, var(--green) 9px 18px); box-shadow: inset 0 -2px 0 var(--green-d); }

.unit { margin-bottom: 30px; --sec-d: color-mix(in srgb, var(--sec) 62%, #2A0E08); --sec-l: color-mix(in srgb, var(--sec) 72%, #fff); }
.unit-head { display: flex; align-items: center; gap: 14px; color: #fff; border-radius: 18px; padding: 12px 18px;
  background: linear-gradient(var(--sec-l) 0 50%, var(--sec) 50%); border: 3px solid var(--sec-d);
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.22), inset 0 -5px 0 rgba(0,0,0,.12), 0 6px 0 var(--sec-d), 0 11px 14px rgba(0,0,0,.25); text-shadow: 0 2px 0 var(--sec-d); }
.unit-head .glyph { font-size: 24px; white-space: nowrap; background: rgba(0,0,0,.18); border-radius: 12px; padding: 4px 12px; box-shadow: inset 0 3px 0 rgba(0,0,0,.15); text-shadow: none; }
.unit-head h2 { font-size: 23px; }
.unit-head p { font-size: 14px; font-weight: 600; opacity: .95; }
.unit-head .count { margin-left: auto; font-family: var(--display); font-size: 16px; background: rgba(0,0,0,.2); border-radius: 99px; padding: 3px 12px; }
.path { display: flex; flex-direction: column; align-items: center; padding: 22px 0 4px; --k: 1; }
.node-wrap { display: flex; flex-direction: column; align-items: center; margin: 10px 0; position: relative; transform: translateX(calc(var(--x) * var(--k))); }
.node { width: 82px; height: 82px; border-radius: 26px; font-size: 38px; color: #fff; position: relative; display: grid; place-items: center;
  background: radial-gradient(circle at 27% 22%, rgba(255,255,255,.75) 0 5px, transparent 6px), radial-gradient(circle at 42% 17%, rgba(255,255,255,.55) 0 3px, transparent 4px),
    linear-gradient(160deg, var(--sec-l), var(--sec) 55%, color-mix(in srgb, var(--sec) 85%, #000));
  border: 3px solid var(--sec-d); text-shadow: 0 3px 0 var(--sec-d);
  box-shadow: inset 0 -6px 0 rgba(0,0,0,.14), inset 0 3px 0 rgba(255,255,255,.3), 0 6px 0 var(--sec-d), 0 12px 14px rgba(0,0,0,.3); transition: transform .12s; }
.node:hover { transform: translateY(-3px) rotate(-2deg); }
.node:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--sec-d); }
.node.locked { --sec: #74463A; --sec-l: #8A5646; --sec-d: #3F221C; color: #B88E7A; text-shadow: none; }
.node.locked .ic { width: 30px; height: 30px; }
.node.done::after { content: ''; position: absolute; right: -12px; top: -12px; width: 34px; height: 34px; transform: rotate(12deg);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 1.6 3.2 6.5 7.1 1-5.1 5 1.2 7.1L12 17.8l-6.4 3.4 1.2-7.1-5.1-5 7.1-1z' fill='%23FFC934' stroke='%23D08409' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.node.current { animation: bob 1.6s ease-in-out infinite; }
.node.current::before { content: ''; position: absolute; inset: -11px; border-radius: 34px; border: 4px dashed var(--gold); animation: spin 8s linear infinite; opacity: .9; }
.node-label { margin-top: 12px; font-family: var(--display); font-size: 16px; letter-spacing: .4px; text-align: center; color: var(--cream); text-shadow: 0 2px 0 var(--shade); }
.node-label .stars { display: flex; gap: 1px; justify-content: center; margin-top: 2px; }
.node-label .stars .ic { width: 18px; height: 18px; }
.locked + .node-label { color: var(--cream-mute); }
.start-tag { position: absolute; top: -38px; z-index: 2; font-family: var(--display); font-size: 15px; letter-spacing: 1px; color: var(--ink);
  background: var(--cream-l); padding: 4px 12px; border-radius: 10px; box-shadow: 0 4px 0 var(--paper-d); animation: float 1.4s ease-in-out infinite; white-space: nowrap; }
.start-tag::after { content: ''; position: absolute; left: 50%; bottom: -6px; width: 12px; height: 12px; background: var(--cream-l); transform: translateX(-50%) rotate(45deg); }

/* ---------- lesson ---------- */
.lesson-top { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.lesson-top .x { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--cream-l);
  background: linear-gradient(var(--red-l) 0 50%, var(--red) 50%); border: 3px solid var(--red-d); box-shadow: 0 4px 0 var(--red-d); }
.lesson-top .x .ic { width: 20px; height: 20px; filter: drop-shadow(0 2px 0 var(--red-d)); }
.hearts { display: flex; gap: 3px; white-space: nowrap; }
.hearts .ic { width: 30px; height: 30px; filter: drop-shadow(0 3px 0 rgba(0,0,0,.25)); }
.hearts.hit { animation: shake .4s; }
.tag { display: inline-block; font-family: var(--display); font-size: 13px; letter-spacing: 1px; color: #fff; padding: 4px 12px; border-radius: 8px;
  background: var(--orange); box-shadow: 0 3px 0 var(--orange-d); text-shadow: 0 1px 0 var(--orange-d); transform: rotate(-2deg); }
.learn-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 12px; }
.learn-head .main { font-family: var(--display); font-size: 40px; line-height: 1.05; }
.learn-head .sub { color: var(--ink-mute); font-size: 18px; font-weight: 600; }
.q-title { font-family: var(--display); font-size: 25px; letter-spacing: .3px; text-align: center; }
.q-title b { display: inline-block; min-width: 1.7em; font-weight: 400; color: #fff; background: var(--orange); font-size: 1.25em; padding: 0 14px; border-radius: 12px; margin-left: 4px;
  box-shadow: 0 4px 0 var(--orange-d); text-shadow: 0 2px 0 var(--orange-d); transform: rotate(-2deg); }
.q-sub { text-align: center; color: var(--ink-mute); margin-top: 8px; font-weight: 600; }
.q-glyph { font-size: 120px; text-align: center; line-height: 1.25; margin: 4px 0 6px; color: var(--ink); text-shadow: 0 4px 0 rgba(160,112,90,.25); }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.opt { padding: 16px 10px; border-radius: 20px; font-family: var(--display); font-size: 22px; letter-spacing: .4px; color: var(--ink);
  background: linear-gradient(var(--cream-l) 0 50%, #F4E2C5 50%); border: 3px solid #B9875F;
  box-shadow: inset 0 -4px 0 rgba(160,110,70,.18), 0 5px 0 #8E5E3E, 0 9px 10px rgba(0,0,0,.15); transition: transform .08s; }
.opt:active { transform: translateY(4px); box-shadow: 0 1px 0 #8E5E3E; }
.opt.glyph { font-family: 'Klee One', sans-serif; font-size: 44px; padding: 8px; }
.opt.ok { color: #fff; background: linear-gradient(var(--green-l) 0 50%, var(--green) 50%); border-color: var(--green-d); box-shadow: 0 5px 0 var(--green-d); text-shadow: 0 2px 0 var(--green-d); }
.opt.bad { color: #fff; background: linear-gradient(var(--red-l) 0 50%, var(--red) 50%); border-color: var(--red-d); box-shadow: 0 5px 0 var(--red-d); text-shadow: 0 2px 0 var(--red-d); animation: shake .4s; }
.opts.done .opt { pointer-events: none; }

/* notebook writing sheet */
.pad-wrap { position: relative; margin-top: 30px; border-radius: 20px; background: #FFF7EA;
  box-shadow: inset 0 0 0 3px #EFD2AE, inset 0 -6px 0 #F1DCC0, 0 5px 0 var(--paper-d), 0 9px 12px rgba(90,40,20,.18); }
.pad-wrap canvas { display: block; width: 100%; touch-action: none; cursor: crosshair; border-radius: 20px; }
.rings { position: absolute; left: 6%; right: 6%; top: -20px; display: flex; justify-content: space-between; pointer-events: none; z-index: 1; }
.rings i { position: relative; width: 12px; height: 34px; border-radius: 8px; background: linear-gradient(90deg, #8E9AA4, #E3EAEF 45%, #B9C3CB); box-shadow: 0 2px 0 #6E7880; }
.rings i::after { content: ''; position: absolute; left: -3px; right: -3px; bottom: 3px; height: 10px; border-radius: 50%; background: #D9B892; z-index: -1; }
.score-chip { position: absolute; top: 12px; right: 12px; z-index: 2; font-family: var(--display); font-size: 15px; letter-spacing: .4px; color: #fff; padding: 3px 11px;
  border-radius: 8px; background: var(--teal); box-shadow: 0 3px 0 var(--teal-d); text-shadow: 0 1px 0 var(--teal-d); transform: rotate(3deg); }

/* ---------- feedback bar ---------- */
.feedback { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); color: #fff;
  transform: translateY(110%); transition: transform .28s cubic-bezier(.3,1.4,.6,1); border-top: 4px solid; box-shadow: 0 -6px 16px rgba(0,0,0,.25); }
.feedback.show { transform: none; }
.feedback.ok  { background: linear-gradient(var(--green-l) 0 40%, var(--green) 40%); border-color: var(--green-d); --d: var(--green-d); }
.feedback.bad { background: linear-gradient(var(--red-l) 0 40%, var(--red) 40%); border-color: var(--red-d); --d: var(--red-d); }
.fb-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; text-shadow: 0 2px 0 var(--d); }
.fb-msg b { display: block; font-family: var(--display); font-weight: 400; font-size: 26px; letter-spacing: .5px; }
.fb-msg span { font-weight: 600; }
.fb-msg .glyph { font-size: 1.3em; }
.fb-btns { display: flex; align-items: center; gap: 8px; }
.feedback .btn { --b: #F1DDBF; --l: var(--cream-l); --d: #7A4A2E; color: var(--ink); text-shadow: none; }
.feedback .btn .ic { filter: none; }
body.fb-open #capy { bottom: 124px; }
body.fb-open #testBtn { opacity: 0; pointer-events: none; }

/* ---------- results ---------- */
.result { text-align: center; }
.big-stars { display: flex; justify-content: center; align-items: flex-end; gap: 4px; }
.big-stars .ic.big { width: 72px; height: 72px; filter: drop-shadow(0 4px 0 rgba(0,0,0,.2)); animation: pop .5s both; }
.big-stars .ic.big:nth-child(2) { width: 90px; height: 90px; animation-delay: .15s; }
.big-stars .ic.big:nth-child(3) { animation-delay: .3s; }
.result h1 { font-size: 36px; margin-top: 8px; }
.rewards { display: flex; gap: 12px; justify-content: center; margin: 22px 0 6px; flex-wrap: wrap; }
.reward { background: rgba(160,100,60,.12); border-radius: 16px; padding: 12px 18px; font-weight: 600; color: var(--ink-mute); box-shadow: inset 0 3px 0 rgba(120,60,30,.12); }
.reward b { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--display); font-weight: 400; font-size: 26px; color: var(--ink); }
.reward .ic { width: 28px; height: 28px; }

/* ---------- playground ---------- */
.play-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.play-head h1, .shop-title { font-size: 36px; color: var(--cream-l); text-shadow: 0 3px 0 var(--shade); }
.play-head p { color: var(--cream-mute); font-weight: 600; }
.stats { display: flex; gap: 8px; }
.stats div { display: flex; flex-direction: column; align-items: center; min-width: 70px; padding: 6px 10px; border-radius: 16px; font-family: var(--display); font-size: 20px;
  color: var(--cream-l); background: rgba(0,0,0,.22); box-shadow: inset 0 3px 0 rgba(0,0,0,.2); }
.stats .ic { width: 24px; height: 24px; margin-bottom: -2px; }
.stats small { font-family: 'Fredoka'; font-size: 11px; font-weight: 600; color: var(--cream-mute); text-transform: uppercase; letter-spacing: .5px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.chip { padding: 6px 16px; border-radius: 99px; font-family: var(--display); font-size: 15px; letter-spacing: .4px; color: var(--cream); background: rgba(0,0,0,.22); box-shadow: inset 0 3px 0 rgba(0,0,0,.18); }
.chip.on { color: #fff; background: linear-gradient(var(--orange-l) 0 50%, var(--orange) 50%); box-shadow: 0 3px 0 var(--orange-d); text-shadow: 0 2px 0 var(--orange-d); }
.prompt { text-align: center; }
.prompt-kind { display: inline-block; font-family: var(--display); font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #fff;
  background: var(--teal); padding: 3px 12px; border-radius: 8px; box-shadow: 0 3px 0 var(--teal-d); text-shadow: 0 1px 0 var(--teal-d); }
.prompt-main { font-family: var(--display); font-size: 50px; line-height: 1.1; margin-top: 8px; }
.prompt-sub { color: var(--ink-mute); font-size: 18px; font-weight: 600; }
.empty { text-align: center; padding: 40px 22px; }
.empty .glyph { font-size: 76px; color: var(--paper-d); }
.empty h2 { font-size: 28px; margin: 6px 0; }
.empty p { color: var(--ink-mute); margin-bottom: 18px; font-weight: 600; }

/* ---------- shop ---------- */
.shop-hero { display: flex; gap: 20px; align-items: center; margin-bottom: 8px; }
.shop-hero h1 { font-size: 34px; }
.shop-hero p { color: var(--ink-mute); margin: 4px 0 12px; font-weight: 600; }
.shop-hero .coins { background: rgba(120,60,30,.15); color: var(--ink); box-shadow: inset 0 3px 0 rgba(120,60,30,.15); }
.shop-capy { width: 150px; flex: none; border-radius: 50%; padding: 12px; background: radial-gradient(circle at 50% 40%, #FFF7EA, #F1D2AE);
  box-shadow: inset 0 -6px 0 var(--paper-edge), 0 5px 0 var(--paper-d); }
.ribbon { position: relative; display: inline-block; margin: 30px 0 16px 14px; padding: 5px 22px; font-size: 21px; color: #fff; border-radius: 6px;
  background: linear-gradient(var(--red-l) 0 50%, var(--red) 50%); box-shadow: 0 4px 0 var(--red-d); text-shadow: 0 2px 0 var(--red-d); transform: rotate(-2deg); }
.ribbon::before, .ribbon::after { content: ''; position: absolute; top: 8px; width: 18px; height: 100%; background: var(--red-d); z-index: -1; }
.ribbon::before { left: -12px; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40% 50%); }
.ribbon::after { right: -12px; clip-path: polygon(0 0, 100% 0, 60% 50%, 100% 100%, 0 100%); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 14px; }
.item { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; padding: 14px 10px; border-radius: 20px; color: var(--ink);
  background: linear-gradient(var(--paper-l), var(--paper)); box-shadow: inset 0 -6px 0 var(--paper-edge), 0 6px 0 var(--shade), 0 10px 14px rgba(0,0,0,.25); }
.item.eq { box-shadow: inset 0 0 0 4px var(--green), inset 0 -6px 0 var(--paper-edge), 0 6px 0 var(--green-d), 0 10px 14px rgba(0,0,0,.25); }
.item-art { width: 92px; border-radius: 50%; background: rgba(160,100,60,.1); padding: 4px; }
.item b { font-family: var(--display); font-weight: 400; font-size: 16px; letter-spacing: .3px; }
.reset { display: block; margin: 40px auto 0; color: var(--cream-mute); font-size: 13px; text-decoration: underline; }

/* ---------- mascot ---------- */
.capy { position: fixed; right: 14px; bottom: 14px; z-index: 40; width: 108px; transition: bottom .3s cubic-bezier(.3,1.4,.6,1); }
#capyArt { width: 100%; padding: 0; display: block; }
#capyArt svg { width: 100%; display: block; filter: drop-shadow(0 6px 0 rgba(0,0,0,.25)); transform-origin: 50% 100%; }
.bubble { position: absolute; right: 90px; bottom: 78px; width: max-content; max-width: min(250px, 62vw); padding: 11px 15px; color: var(--ink);
  background: linear-gradient(var(--cream-l), var(--paper)); border-radius: 16px 16px 4px 16px; font-weight: 600; font-size: 15px; line-height: 1.3;
  box-shadow: inset 0 -4px 0 var(--paper-edge), 0 5px 0 var(--shade), 0 10px 14px rgba(0,0,0,.25);
  opacity: 0; transform: scale(.7) translateY(8px); transform-origin: 100% 100%; transition: opacity .2s, transform .25s cubic-bezier(.3,1.6,.6,1); pointer-events: none; }
.bubble.show { opacity: 1; transform: none; }
.m-idle svg { animation: breathe 3.2s ease-in-out infinite; }
.m-happy svg { animation: hop .45s ease 3; }
.m-sad svg { animation: droop .6s ease forwards; }
.m-wow svg { animation: pop .45s ease; }
.m-think svg { animation: tilt 1.4s ease-in-out infinite; }
.eyes { animation: blink 4.5s infinite; transform-box: fill-box; transform-origin: center; }
#testBtn { position: fixed; left: 14px; bottom: 14px; z-index: 40; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: var(--cream-mute);
  background: rgba(0,0,0,.25); box-shadow: inset 0 3px 0 rgba(0,0,0,.2); opacity: .8; transition: .2s; }
#testBtn .ic { width: 20px; height: 20px; }
#testBtn:hover { opacity: 1; color: var(--cream); }
body.test-on #testBtn { color: #fff; opacity: 1; background: linear-gradient(var(--teal-l) 0 50%, var(--teal) 50%); box-shadow: 0 4px 0 var(--teal-d); border: 3px solid var(--teal-d); }
#fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
#fx i { position: absolute; top: -40px; font-style: normal; animation: fall 2.4s cubic-bezier(.3,.6,.5,1) forwards; }

@keyframes breathe { 50% { transform: scale(1.03, .97); } }
@keyframes hop { 40% { transform: translateY(-16px) scale(.96, 1.05); } 80% { transform: translateY(0) scale(1.05, .95); } }
@keyframes droop { to { transform: translateY(4px) scale(1.02, .95) rotate(-3deg); } }
@keyframes pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }
@keyframes tilt { 50% { transform: rotate(-6deg); } }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 97% { transform: scaleY(.1); } }
@keyframes bob { 50% { transform: translateY(-5px); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 50% { transform: translateY(-4px); } }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@keyframes bump { 40% { transform: scale(1.2); } }
@keyframes fall { to { transform: translateY(112vh) rotate(560deg); } }

@media (max-width: 720px) {
  .tabs button span { display: none; }
  .tabs button { padding: 8px 12px; }
  .tabs button.on { padding: 5px 9px; }
}
@media (max-width: 600px) {
  .brand .name { display: none; }
  .unit-head { gap: 10px; padding: 10px 12px; }
  .unit-head .glyph { font-size: 18px; padding: 4px 8px; }
  .unit-head h2 { font-size: 20px; }
  .topbar { gap: 8px; }
  .path { --k: .55; }
  .hero { flex-direction: column; align-items: stretch; }
  .goal { align-self: flex-start; }
  .capy { width: 80px; }
  .bubble { right: 66px; bottom: 60px; }
  .q-glyph { font-size: 96px; }
  .prompt-main, .learn-head .main { font-size: 34px; }
  .shop-capy { width: 110px; }
  .card, .paper { padding: 18px; }
  .btn { padding: 10px 16px; font-size: 16px; }
  .opts { gap: 10px; }
  body.fb-open #capy { bottom: 160px; }
}