/* Direction: Vocabu — playful, chunky, leaf green on clean white, rounded Nunito */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #ffffff;
  --surface: #ffffff;
  --surface-2: #f3f6f1;
  --border: #e3e8e0;
  --border-strong: #b6bbb3;
  --ink: #3c3c3c;
  --muted: #646f78;
  --accent: #58cc02;
  --accent-hover: #4bad02;
  --accent-ink: #0c1d00;
  --accent-text: #2f7a00;
  --accent-strong: #357b02;
  --accent-soft: #e8f8dc;
  --accent-border: #b4e88d;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #e3f0e8;
  --success-strong: #137638;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #f6eae1;
  --warning-strong: #a64c08;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #f7e4e4;
  --danger-strong: #b91c1c;
  --chart-1: #4aa810;
  --chart-2: #069fa3;
  --chart-3: #1672e6;
  --chart-4: #c86be5;
  --chart-5: #cd2d48;
  --chart-6: #bd8621;

  --font-display: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --display-weight: 900;
  --radius-card: 20px;
  --radius-btn: 16px;
  --radius-input: 14px;
  --x-green: #58cc02;
  --x-green-d: #46a302;
  --x-blue: #1cb0f6;
  --x-blue-d: #1899d6;
  --x-yellow: #ffc800;
  --x-yellow-d: #d9a800;
  --x-red: #ff4b4b;
  --x-red-d: #d93636;
  --x-purple: #ce82ff;
  --x-purple-d: #a468d6;
  --x-on-color: #10200f;
  --x-cream: #efffd6;
  --x-white: #ffffff;
  --x-night: #131f24;
  --x-silver: #b8c2c9;
  --x-bronze: #d98a4b;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --display-tracking: -0.02em;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #070f00;
  --surface: #20271a;
  --surface-2: #131b0d;
  --border: #2a3124;
  --border-strong: #51574d;
  --ink: #ffffff;
  --muted: #9c9f99;
  --accent: #58cc02;
  --accent-hover: #71d428;
  --accent-ink: #0c1d00;
  --accent-text: #58cc02;
  --accent-strong: #58cc02;
  --accent-soft: #193900;
  --accent-border: #2b6401;
  --success: #15803d;
  --success-ink: #ffffff;
  --success-soft: #0a280d;
  --success-strong: #499c68;
  --warning: #b45309;
  --warning-ink: #ffffff;
  --warning-soft: #2d1e02;
  --warning-strong: #c57a40;
  --danger: #b91c1c;
  --danger-ink: #ffffff;
  --danger-soft: #2e1206;
  --danger-strong: #d16969;
  --chart-1: #58cc02;
  --chart-2: #30d6db;
  --chart-3: #4e94f7;
  --chart-4: #e59dfd;
  --chart-5: #fe3a5b;
  --chart-6: #f7ae13;
}

/* Vocabu — chunky 3D controls, path nodes, mascot, lesson motion. Tokens only. */

html { -webkit-tap-highlight-color: transparent; }
body { font-family: var(--font-body); overflow-x: hidden; }

.ic { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; }
.ic svg { width: 1em; height: 1em; stroke-width: 2.6; }
.ic-fill svg { fill: currentColor; }

/* ---------- 3D buttons ---------- */
.vbtn {
  --c: var(--x-green); --cd: var(--x-green-d);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 3.25rem; padding: .7rem 1.5rem; border-radius: 1rem;
  background: var(--c); color: var(--x-on-color);
  font-weight: 900; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase; text-align: center;
  box-shadow: 0 4px 0 var(--cd); cursor: pointer; user-select: none;
  transition: transform .08s, box-shadow .08s, filter .15s;
}
.vbtn:hover:not(:disabled) { filter: brightness(1.06); }
.vbtn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 0 0 var(--cd); }
.vbtn:focus-visible, .opt:focus-visible, .node:focus-visible, .tile:focus-visible, .nav-i:focus-visible, .chip-stat:focus-visible, .spk:focus-visible {
  outline: 3px solid var(--x-blue); outline-offset: 3px;
}
.vbtn:disabled { background: var(--surface-2); color: var(--muted); box-shadow: 0 4px 0 var(--border); cursor: not-allowed; }
.vbtn-blue { --c: var(--x-blue); --cd: var(--x-blue-d); }
.vbtn-yellow { --c: var(--x-yellow); --cd: var(--x-yellow-d); }
.vbtn-red { --c: var(--x-red); --cd: var(--x-red-d); }
.vbtn-purple { --c: var(--x-purple); --cd: var(--x-purple-d); }
.vbtn-ghost { --c: var(--surface); --cd: var(--border); color: var(--ink); border: 2px solid var(--border); }
.vbtn-sm { min-height: 2.5rem; padding: .4rem 1rem; font-size: .8rem; border-radius: .85rem; }
.vbtn-block { width: 100%; }

/* ---------- cards & chips ---------- */
.vcard { background: var(--surface); border: 2px solid var(--border); border-radius: 1.25rem; padding: 1rem; }
.vcard-3d { box-shadow: 0 3px 0 var(--border); }
.chip-stat { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .6rem; border-radius: .9rem; font-weight: 900; cursor: pointer; transition: background .15s; }
.chip-stat:hover { background: var(--surface-2); }
.c-flame { color: var(--x-bronze); } .c-gem { color: var(--x-blue-d); } .c-xp { color: var(--x-yellow-d); } .c-heart { color: var(--x-red); }
.pill { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .6rem; border-radius: 999px; font-weight: 800; font-size: .75rem; background: var(--surface-2); color: var(--ink); }
.s-new { background: color-mix(in srgb, var(--x-silver) 35%, var(--canvas)); }
.s-learning { background: color-mix(in srgb, var(--x-yellow) 35%, var(--canvas)); }
.s-strong { background: color-mix(in srgb, var(--x-blue) 28%, var(--canvas)); }
.s-mastered { background: color-mix(in srgb, var(--x-green) 35%, var(--canvas)); }

.bar { height: .9rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--x-green); transition: width .45s cubic-bezier(.3,.8,.3,1); position: relative; }
.bar > i::after { content: ""; position: absolute; left: 8px; right: 8px; top: 3px; height: 4px; border-radius: 4px; background: color-mix(in srgb, var(--x-white) 35%, transparent); }
.bar-blue > i { background: var(--x-blue); } .bar-yellow > i { background: var(--x-yellow); }

/* ---------- nav ---------- */
.nav-i { display: flex; align-items: center; gap: .9rem; padding: .7rem .9rem; border-radius: 1rem; border: 2px solid transparent; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; font-size: .85rem; color: var(--muted); cursor: pointer; width: 100%; }
.nav-i:hover { background: var(--surface-2); }
.nav-i[aria-current="page"] { color: var(--x-blue-d); background: color-mix(in srgb, var(--x-blue) 14%, var(--canvas)); border-color: var(--x-blue); }
.nav-b { flex-direction: column; justify-content: center; gap: .1rem; padding: .35rem .25rem; font-size: .65rem; flex: 1; width: auto; }
.nav-b .ic { font-size: 1.5rem; }

/* ---------- unit banner + path nodes ---------- */
.u-green { --c: var(--x-green); --cd: var(--x-green-d); }
.u-blue { --c: var(--x-blue); --cd: var(--x-blue-d); }
.u-yellow { --c: var(--x-yellow); --cd: var(--x-yellow-d); }
.u-purple { --c: var(--x-purple); --cd: var(--x-purple-d); }
.u-red { --c: var(--x-red); --cd: var(--x-red-d); }
.ubanner { background: var(--c); color: var(--x-on-color); box-shadow: 0 5px 0 var(--cd); border-radius: 1.25rem; padding: 1rem 1.25rem; }
.node { width: 4.5rem; height: 4.5rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; position: relative; background: var(--c); color: var(--x-on-color); box-shadow: 0 6px 0 var(--cd); border: 0; cursor: pointer; transition: transform .1s, box-shadow .1s; }
.node:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--cd); }
.node-done { --c: var(--x-yellow); --cd: var(--x-yellow-d); }
.node-lock { --c: var(--surface-2); --cd: var(--border); color: var(--muted); }
.node-active { animation: glow 1.9s ease-in-out infinite; }
@keyframes glow {
  0%, 100% { box-shadow: 0 6px 0 var(--cd), 0 0 0 0 color-mix(in srgb, var(--c) 60%, transparent); }
  50% { box-shadow: 0 6px 0 var(--cd), 0 0 0 16px color-mix(in srgb, var(--c) 0%, transparent); }
}
.start-bubble { position: absolute; top: -2.6rem; left: 50%; translate: -50% 0; background: var(--surface); color: var(--c); border: 2px solid var(--border); border-radius: .9rem; padding: .2rem .8rem; font-weight: 900; letter-spacing: .06em; font-size: .8rem; animation: bob 1.2s ease-in-out infinite; white-space: nowrap; }
.start-bubble { color: var(--ink); }
.start-bubble::after { content: ""; position: absolute; bottom: -7px; left: 50%; translate: -50% 0; width: 12px; height: 12px; background: var(--surface); border-right: 2px solid var(--border); border-bottom: 2px solid var(--border); rotate: 45deg; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* ---------- lesson ---------- */
.opt { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 3.5rem; padding: .7rem 1rem; border: 2px solid var(--border); border-bottom-width: 4px; border-radius: 1rem; background: var(--surface); color: var(--ink); font-weight: 800; font-size: 1.05rem; text-align: left; cursor: pointer; transition: transform .08s, border-color .15s, background .15s; }
.opt:hover:not(:disabled) { background: var(--surface-2); }
.opt:active:not(:disabled) { transform: translateY(2px); border-bottom-width: 2px; }
.opt .kbd { flex-shrink: 0; width: 1.8rem; height: 1.8rem; border: 2px solid var(--border); border-radius: .5rem; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; color: var(--muted); }
.opt.sel { border-color: var(--x-blue); background: color-mix(in srgb, var(--x-blue) 16%, var(--canvas)); }
.opt.ok { border-color: var(--x-green); background: color-mix(in srgb, var(--x-green) 24%, var(--canvas)); }
.opt.bad { border-color: var(--x-red); background: color-mix(in srgb, var(--x-red) 20%, var(--canvas)); }
.opt.dim { opacity: .55; }
.opt:disabled { cursor: default; }
.opt-pic { flex-direction: column; justify-content: center; min-height: 8rem; font-size: 3.6rem; gap: .2rem; }
.opt-pic .kbd { position: absolute; top: .5rem; left: .5rem; }
.tile { display: inline-flex; align-items: center; padding: .55rem .9rem; border: 2px solid var(--border); border-bottom-width: 4px; border-radius: .9rem; background: var(--surface); font-weight: 800; font-size: 1.05rem; cursor: pointer; color: var(--ink); transition: transform .08s; }
.tile:active { transform: translateY(2px); }
.tile.ghost { background: var(--surface-2); color: transparent; border-color: var(--surface-2); pointer-events: none; }
.tile.ok { border-color: var(--x-green); background: color-mix(in srgb, var(--x-green) 24%, var(--canvas)); pointer-events: none; }
.tile.bad { border-color: var(--x-red); background: color-mix(in srgb, var(--x-red) 20%, var(--canvas)); }
.tile.sel { border-color: var(--x-blue); background: color-mix(in srgb, var(--x-blue) 16%, var(--canvas)); }
.tile-wide { width: 100%; justify-content: flex-start; min-height: 3.4rem; }
.ans-line { min-height: 4.2rem; display: flex; flex-wrap: wrap; gap: .5rem; padding: .6rem 0; border-top: 2px solid var(--border); border-bottom: 2px solid var(--border); background-image: linear-gradient(var(--border) 2px, transparent 2px); background-size: 100% 3.2rem; background-position: 0 2.6rem; }
.prompt-bubble { position: relative; border: 2px solid var(--border); border-radius: 1.1rem; padding: .8rem 1.1rem; font-size: 1.35rem; font-weight: 800; background: var(--surface); }
.type-in { width: 100%; padding: .9rem 1rem; border: 2px solid var(--border); border-radius: 1rem; background: var(--surface-2); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.type-in:focus { outline: none; border-color: var(--x-blue); background: var(--surface); }
.spk { display: inline-flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .9rem; background: var(--x-blue); color: var(--x-on-color); box-shadow: 0 3px 0 var(--x-blue-d); font-size: 1.3rem; cursor: pointer; flex-shrink: 0; }
.spk:active { transform: translateY(3px); box-shadow: none; }
.spk-lg { width: 6rem; height: 6rem; border-radius: 1.5rem; font-size: 2.6rem; box-shadow: 0 5px 0 var(--x-blue-d); }

.banner { border-top: 2px solid var(--border); padding: 1rem 1rem 1.25rem; animation: slide-up .32s cubic-bezier(.2,.9,.3,1.2); }
.b-ok { background: color-mix(in srgb, var(--x-green) 22%, var(--canvas)); border-color: var(--x-green); }
.b-bad { background: color-mix(in srgb, var(--x-red) 20%, var(--canvas)); border-color: var(--x-red); }
.ex-in { animation: ex-in .3s ease-out; }
.shake { animation: shake .4s; }
.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.3); }
.vo-bounce { animation: vo-bounce 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
.flame-pop { animation: pop .7s cubic-bezier(.2,.9,.3,1.3) both; }
@keyframes slide-up { from { transform: translateY(70px); } to { transform: translateY(0); } }
@keyframes ex-in { from { transform: translateX(46px); } to { transform: translateX(0); } }
@keyframes shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-9px); } 40% { transform: translateX(9px); } 60% { transform: translateX(-6px); } 80% { transform: translateX(6px); } }
@keyframes pop { 0% { transform: scale(.6); } 60% { transform: scale(1.14); } 100% { transform: scale(1); } }
@keyframes vo-bounce { 0%,100% { transform: translateY(0) scaleY(1); } 45% { transform: translateY(-12px) scaleY(1.03); } 80% { transform: translateY(0) scaleY(.96); } }
@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 8s linear infinite; }

/* ---------- mascot ---------- */
.vo { overflow: visible; }
.vo-b { fill: var(--x-green); }
.vo-d { fill: var(--x-green-d); }
.vo-belly { fill: var(--x-cream); }
.vo-w { fill: var(--x-white); stroke: var(--x-green-d); stroke-width: 2; }
.vo-p { fill: var(--x-night); }
.vo-hl { fill: var(--x-white); }
.vo-beak { fill: var(--x-yellow); stroke: var(--x-yellow-d); stroke-width: 2; stroke-linejoin: round; }
.vo-line { fill: none; stroke: var(--x-night); stroke-width: 5; stroke-linecap: round; }
.vo-tear { fill: var(--x-blue); }

/* ---------- progress widgets ---------- */
.ring-bg { stroke: var(--surface-2); }
.ring-fg { stroke: var(--x-green); transition: stroke-dashoffset .8s ease; }
.col-bar { background: var(--x-blue); border-radius: .5rem .5rem .2rem .2rem; min-height: 4px; transition: height .6s; }
.col-bar.today { background: var(--x-green); }
.cal-d { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 800; font-size: .8rem; color: var(--muted); }
.cal-d.on { background: var(--x-yellow); color: var(--x-on-color); }
.cal-d.fz { background: var(--x-blue); color: var(--x-on-color); }
.cal-d.today { outline: 2px solid var(--x-green); outline-offset: 1px; }
.ach { text-align: center; padding: .75rem .4rem; border-radius: 1rem; border: 2px solid var(--border); background: var(--surface); }
.ach .badge-i { width: 3.4rem; height: 3.4rem; margin: 0 auto .35rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; background: var(--x-yellow); color: var(--x-on-color); box-shadow: 0 3px 0 var(--x-yellow-d); }
.ach.locked { opacity: .55; }
.ach.locked .badge-i { background: var(--surface-2); color: var(--muted); box-shadow: 0 3px 0 var(--border); }
.lb-row { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; border-radius: 1rem; }
.lb-row.me { background: color-mix(in srgb, var(--x-green) 20%, var(--canvas)); border: 2px solid var(--x-green); }
.m1 { color: var(--x-yellow-d); } .m2 { color: var(--x-silver); } .m3 { color: var(--x-bronze); }
.zone { display: flex; align-items: center; gap: .5rem; font-weight: 900; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; padding: .5rem 0; }
.zone-up { color: var(--accent-text); } .zone-down { color: var(--x-red-d); }
.tier { width: 3.2rem; height: 3.2rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; background: var(--surface-2); color: var(--muted); font-size: 1.5rem; }
.tier.cur { background: var(--x-yellow); color: var(--x-on-color); box-shadow: 0 3px 0 var(--x-yellow-d); }
.seg { display: flex; gap: .25rem; padding: .25rem; border-radius: 1rem; background: var(--surface-2); }
.seg button { flex: 1; padding: .5rem; border-radius: .8rem; font-weight: 900; font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 0 var(--border); }
.toggle { width: 3.4rem; height: 2rem; border-radius: 999px; background: var(--border); position: relative; transition: background .2s; flex-shrink: 0; cursor: pointer; }
.toggle::after { content: ""; position: absolute; top: .25rem; left: .25rem; width: 1.5rem; height: 1.5rem; border-radius: 999px; background: var(--x-white); transition: translate .2s; box-shadow: 0 1px 2px color-mix(in srgb, var(--x-night) 30%, transparent); }
.toggle[aria-checked="true"] { background: var(--x-green); }
.toggle[aria-checked="true"]::after { translate: 1.4rem 0; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 60; background: var(--canvas); display: flex; flex-direction: column; overflow-y: auto; }
dialog.vmodal { border: 2px solid var(--border); border-radius: 1.5rem; padding: 0; background: var(--surface); color: var(--ink); width: calc(100% - 2rem); max-width: 26rem; margin: auto; max-height: 90vh; overflow-y: auto; }
dialog.vmodal::backdrop { background: color-mix(in srgb, var(--x-night) 60%, transparent); }
dialog.vmodal[open] { animation: pop .3s cubic-bezier(.2,.9,.3,1.2); }
.vtoasts { position: fixed; top: .75rem; left: 50%; translate: -50% 0; z-index: 300; display: flex; flex-direction: column; gap: .5rem; align-items: center; pointer-events: none; width: calc(100% - 2rem); max-width: 24rem; }
.vtoast { background: var(--x-night); color: var(--x-white); padding: .6rem 1rem; border-radius: 1rem; font-weight: 800; font-size: .9rem; animation: ex-in .25s ease-out; text-align: center; }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 250; }

/* ---------- motion preferences ---------- */
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}