:root {
  --purple: #7c3aed;
  --pink: #ed4799;
  --orange: #fa7317;
  --teal: #14b8a6;
  --ink: #312e81;
  --green: #16a34a;
  --red: #dc2626;
  --muted: #6b7280;
  --faint: #9ca3af;
  --gradient: linear-gradient(135deg, var(--purple), var(--pink) 55%, var(--orange));
  --rounded: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: ui-serif, "New York", Georgia, "Times New Roman", serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100dvh;
  font: 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #111827;
  background: var(--gradient) fixed;
  -webkit-tap-highlight-color: transparent;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid rgba(255, 255, 255, .85); outline-offset: 3px; }
.card :focus-visible, .panel :focus-visible { outline-color: var(--purple); }
[hidden] { display: none !important; }

.screen {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100dvh;
  padding: calc(16px + var(--safe-top)) 16px calc(110px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ---------- Bottom action bar ---------- */
.bottom-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + var(--safe-bottom));
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  z-index: 10;
}
.bottom-bar.clear { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.bottom-bar .row { max-width: 600px; margin: 0 auto; display: flex; gap: 12px; }

/* ---------- Chunky buttons ---------- */
.chunky {
  --c: var(--purple);
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
  background: var(--c);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--c) 45%, transparent);
  transition: transform .12s ease, box-shadow .12s ease, background .2s;
  -webkit-user-select: none; user-select: none;
}
.chunky:active:not(:disabled) { transform: scale(.97); box-shadow: 0 1px 3px color-mix(in srgb, var(--c) 45%, transparent); }
.chunky:disabled { background: rgba(156, 163, 175, .6); box-shadow: none; }
.chunky.ink { --c: var(--ink); }
.chunky.green { --c: var(--green); }
.chunky.ghost { --c: rgba(255, 255, 255, .28); box-shadow: none; }
.chunky.narrow { flex: 0 0 auto; min-width: 128px; }

/* ---------- Home ---------- */
.hero { color: #fff; padding-top: 8px; }
.hero .school { font-weight: 800; text-transform: uppercase; letter-spacing: .12em; font-size: .85rem; opacity: .88; }
.hero h1 {
  margin: 4px 0 6px;
  font: 900 clamp(2.1rem, 9vw, 2.6rem)/1.05 var(--rounded);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.hero p { margin: 0; font-weight: 600; opacity: .92; font-size: 1.05rem; }

.panel {
  background: #fff;
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}
.book-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.book-head h2 { margin: 0; font: 800 1.4rem var(--rounded); color: var(--ink); display: flex; align-items: center; gap: 8px; }
.book-head h2 .num {
  display: inline-grid; place-items: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--ink); color: #fff; font-size: .95rem;
}
.pill-btn {
  font-weight: 700; font-size: .85rem;
  color: var(--purple);
  background: color-mix(in srgb, var(--purple) 12%, transparent);
  padding: 7px 13px; border-radius: 999px;
}

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.tile {
  --c: var(--purple);
  position: relative;
  min-height: 96px;
  border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  color: var(--c);
  background: color-mix(in srgb, var(--c) 13%, #fff);
  transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), background .2s, color .2s, box-shadow .2s;
}
.tile .emoji { font-size: 1.6rem; line-height: 1.2; }
.tile .name { font-weight: 800; font-size: .95rem; }
.tile .count { font-weight: 600; font-size: .72rem; opacity: .85; }
.tile[aria-pressed="true"] {
  background: var(--c); color: #fff;
  transform: scale(1.04);
  box-shadow: 0 4px 12px color-mix(in srgb, var(--c) 50%, transparent);
}
.tile .tick {
  position: absolute; top: 6px; right: 6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff; color: var(--c);
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 900;
  transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1);
}
.tile[aria-pressed="true"] .tick { transform: scale(1); }
.tile.pop .emoji { animation: bounce .45s cubic-bezier(.3, 1.6, .5, 1); }

.direction h3 { margin: 0 0 10px; color: #fff; font-size: 1.05rem; }
.segmented { display: flex; gap: 8px; }
.segmented button {
  flex: 1;
  padding: 12px 6px;
  border-radius: 14px;
  font-weight: 700; font-size: .92rem;
  color: #fff;
  background: rgba(255, 255, 255, .2);
  white-space: nowrap;
  transition: background .2s, color .2s;
}
.segmented button[aria-pressed="true"] { background: #fff; color: var(--purple); }

.browse {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  padding: 16px;
  border-radius: 16px;
  color: #fff; font-weight: 700;
  background: rgba(255, 255, 255, .18);
}

/* ---------- Quiz ---------- */
.quiz-bg {
  position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--c), color-mix(in srgb, var(--c) 65%, transparent) 50%, color-mix(in srgb, var(--purple) 80%, transparent));
  background-color: var(--purple);
  transition: background .4s;
}
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #fff; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .25);
  color: #fff; font-weight: 800; font-size: 1.1rem;
}
.counter { font-weight: 900; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.score-pill {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 12px; border-radius: 999px;
  background: rgba(255, 255, 255, .25);
  font-weight: 900; font-variant-numeric: tabular-nums;
}
.score-pill .streak { color: #fde047; animation: pop .35s cubic-bezier(.3, 1.6, .5, 1); }
.progress { height: 8px; border-radius: 999px; background: rgba(255, 255, 255, .3); overflow: hidden; margin-top: -10px; }
.progress > div { height: 100%; background: #fff; border-radius: inherit; transition: width .35s ease; }

.card {
  background: #fff;
  border-radius: 28px;
  padding: 22px 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
}
.prompt {
  min-height: 190px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
  animation: card-in .35s cubic-bezier(.2, 1.2, .4, 1);
}
.stage-chip {
  display: inline-flex; gap: 6px; align-items: center;
  padding: 5px 11px; border-radius: 999px;
  background: var(--c); color: #fff;
  font-weight: 800; font-size: .78rem;
}
.prompt .word { margin: 0; color: var(--ink); font-weight: 800; overflow-wrap: anywhere; }
.prompt .word.latin { font-family: var(--serif); font-size: clamp(1.9rem, 9vw, 2.6rem); }
.prompt .word.english { font-family: var(--rounded); font-size: clamp(1.6rem, 7.5vw, 2.1rem); }
.prompt .hint { color: var(--muted); font-weight: 600; font-size: .95rem; }
.prompt.no-enter { animation: none; }
.prompt.shake { animation: shake .4s linear; }

.answer-input {
  width: 100%;
  padding: 18px;
  border-radius: 18px;
  border: 2px solid rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .22);
  color: #fff;
  font-size: 1.25rem; font-weight: 600;
  outline: none;
  caret-color: #fff;
  transition: border-color .2s;
}
.answer-input::placeholder { color: rgba(255, 255, 255, .75); }
.answer-input:focus { border-color: rgba(255, 255, 255, .95); }

.feedback {
  border-radius: 22px;
  border: 3px solid var(--fc);
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  animation: slide-up .35s cubic-bezier(.2, 1.2, .4, 1);
}
.feedback.right { --fc: var(--green); }
.feedback.wrong { --fc: var(--red); }
.feedback .cheer {
  margin: 0;
  display: flex; align-items: center; gap: 10px;
  font: 900 1.85rem var(--rounded); color: var(--fc);
}
.feedback .cheer .mark {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--fc); color: #fff; font-size: 1.1rem;
  animation: bounce .5s cubic-bezier(.3, 1.6, .5, 1);
}
.feedback .close-note { margin: -4px 0 0; color: #ea580c; font-weight: 600; font-size: .92rem; }
.feedback dl { width: 100%; margin: 0; display: grid; gap: 6px; }
.feedback .line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.feedback dt { color: var(--muted); font-size: .92rem; }
.feedback dd { margin: 0; text-align: right; overflow-wrap: anywhere; }
.feedback dd.wrong-text { color: var(--red); text-decoration: line-through; }
.feedback dd.answer { color: var(--ink); font-weight: 800; }
.feedback .pos { width: 100%; color: var(--muted); font-weight: 600; font-size: .78rem; }
.override { color: var(--purple); font-weight: 700; font-size: .95rem; padding: 4px 8px; }

/* ---------- Results ---------- */
.result-card { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px; border-radius: 30px; margin-top: 12px; }
.stars { display: flex; gap: 10px; align-items: flex-end; padding-top: 6px; }
.star { font-size: 2.4rem; line-height: 1; color: rgba(156, 163, 175, .35); transform: scale(.8); }
.star.big { font-size: 3rem; transform: translateY(-8px) scale(.8); }
.star.on { color: #facc15; text-shadow: 0 0 10px rgba(249, 115, 22, .5); animation: star-pop .45s cubic-bezier(.3, 1.8, .5, 1) both; }
.star.big.on { animation-name: star-pop-big; }

.ring { position: relative; width: 180px; height: 180px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring .track { stroke: color-mix(in srgb, var(--purple) 12%, transparent); }
.ring .fill { transition: stroke-dashoffset 1.2s ease-out .2s; }
.ring .label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ring .pct { font: 900 2.9rem/1 var(--rounded); color: var(--ink); font-variant-numeric: tabular-nums; }
.ring .of { font-weight: 700; color: var(--muted); }

.result-card h2 { margin: 0; font: 900 1.75rem/1.15 var(--rounded); color: var(--ink); }
.result-card .sub { margin: 0; color: var(--muted); font-weight: 600; font-size: .95rem; }
.pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pill {
  --c: var(--purple);
  display: inline-flex; gap: 6px; align-items: center;
  padding: 6px 11px; border-radius: 999px;
  color: var(--c); background: color-mix(in srgb, var(--c) 12%, transparent);
  font-weight: 700; font-size: .8rem;
}
.pill.orange { --c: var(--orange); }

.practise h3 { margin: 0 0 12px; color: var(--ink); font-size: 1.05rem; }
.practise ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.practise li { display: flex; gap: 12px; }
.practise .bar { flex: 0 0 6px; border-radius: 3px; background: var(--c); }
.practise .p-prompt { font: 700 1rem var(--serif); color: var(--ink); }
.practise .p-answer { color: var(--green); font-weight: 600; font-size: .92rem; }
.practise .p-typed { color: var(--red); font-size: .8rem; }
.result-buttons { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Word list ---------- */
.list-head { display: flex; align-items: center; gap: 12px; color: #fff; }
.list-head h1 { margin: 0; font: 900 1.8rem var(--rounded); }
.search {
  width: 100%;
  padding: 14px 16px;
  border: 0; border-radius: 14px;
  font-size: 1rem;
  background: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
}
.search:focus { outline: 3px solid rgba(255, 255, 255, .8); }
.stage-list h2 { margin: 0 0 8px; font: 800 1.1rem var(--rounded); color: var(--c); display: flex; gap: 6px; align-items: center; }
.stage-list ul { list-style: none; margin: 0; padding: 0; }
.stage-list li { padding: 9px 0; border-top: 1px solid #f1f1f4; }
.stage-list li:first-child { border-top: 0; }
.stage-list .w-latin { font: 700 1rem var(--serif); color: var(--ink); }
.stage-list .w-english { color: var(--muted); }
.stage-list .w-pos { color: var(--faint); font-size: .78rem; }
.empty { color: #fff; text-align: center; font-weight: 600; }

/* ---------- Dialog ---------- */
.dialog-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(17, 24, 39, .45);
  display: grid; place-items: end center;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  animation: fade .2s ease;
}
.dialog {
  width: 100%; max-width: 420px;
  background: #fff; border-radius: 24px; padding: 20px;
  text-align: center;
  animation: slide-up .3s cubic-bezier(.2, 1.2, .4, 1);
}
.dialog h2 { margin: 0 0 6px; color: var(--ink); font: 800 1.3rem var(--rounded); }
.dialog p { margin: 0 0 16px; color: var(--muted); }
.dialog .buttons { display: flex; flex-direction: column; gap: 10px; }
.chunky.danger { --c: var(--red); }
.chunky.plain { --c: #eef0f4; color: var(--ink); box-shadow: none; }

/* ---------- Confetti ---------- */
#confetti { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
#confetti i {
  position: absolute; top: -20px;
  display: block;
  animation: fall linear forwards;
}

.noscript { color: #fff; text-align: center; padding: 40px 16px; font-weight: 700; }

/* ---------- Animations ---------- */
@keyframes bounce { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  12.5%, 62.5% { transform: translateX(10px); }
  37.5%, 87.5% { transform: translateX(-10px); }
}
@keyframes card-in { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes star-pop { from { transform: scale(.4); } to { transform: scale(1); } }
@keyframes star-pop-big { from { transform: translateY(-8px) scale(.4); } to { transform: translateY(-8px) scale(1); } }
@keyframes fall { to { transform: translateY(110vh) rotate(var(--spin)); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #confetti { display: none; }
}