:root {
  color-scheme: light;
  --ink: #172033;
  --muted: #68758c;
  --paper: #fffefa;
  --surface: rgba(255, 253, 247, .9);
  --line: rgba(39, 52, 82, .12);
  --blue: #2563eb;
  --blue-soft: #e7f0ff;
  --green: #128447;
  --green-soft: #e5f9ec;
  --red: #c1283d;
  --red-soft: #fff0f2;
  --yellow: #facc15;
  --pink: #ec4899;
  --cyan: #0891b2;
  --shadow: 0 24px 56px rgba(130, 88, 42, .14);
  --shadow-soft: 0 10px 24px rgba(130, 88, 42, .08);
}

* {
  box-sizing: border-box;
}

html {
  background: #fff2dd;
}

body {
  position: relative;
  margin: 0;
  min-height: 100vh;
  font-family: ui-rounded, "SF Pro Rounded", "Avenir Next", "Nunito", system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 12% 14%, rgba(255, 216, 138, .36), transparent 25%),
    radial-gradient(circle at 86% 16%, rgba(255, 182, 193, .22), transparent 24%),
    radial-gradient(circle at 20% 84%, rgba(255, 232, 169, .34), transparent 28%),
    radial-gradient(circle at 82% 88%, rgba(186, 230, 253, .16), transparent 24%),
    linear-gradient(180deg, #fff8e8 0%, #fff2dd 52%, #ffeccc 100%);
  background-size: auto;
  overflow: hidden;
}

body::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: auto 0 0;
  height: 34vh;
  background:
    linear-gradient(180deg, rgba(255, 248, 232, 0), rgba(255, 225, 184, .42)),
    radial-gradient(circle at 16% 68%, rgba(255, 255, 255, .42) 0 28px, transparent 29px),
    radial-gradient(circle at 72% 76%, rgba(255, 255, 255, .32) 0 22px, transparent 23px);
  z-index: -2;
}

body::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255, 205, 96, .18) 0 6px, transparent 7px),
    radial-gradient(circle, rgba(255, 151, 169, .12) 0 5px, transparent 6px),
    radial-gradient(circle, rgba(125, 211, 252, .10) 0 5px, transparent 6px);
  background-position: 28px 90%, 76% 84%, 48% 95%;
  background-size: 190px 92px, 170px 86px, 150px 76px;
  background-repeat: repeat-x;
  z-index: -1;
}

button,
input {
  font: inherit;
}

.app {
  height: 100vh;
  height: 100svh;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

header {
  position: relative;
  z-index: 30000;
  display: grid;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  border-radius: 8px;
  text-align: center;
}

.header-tools {
  position: relative;
  z-index: 3;
  justify-self: start;
  display: grid;
  gap: 5px;
  width: max-content;
}

.header-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  justify-self: end;
}

.streak-badge {
  min-width: 142px;
  padding: 4px 9px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  background: rgba(255, 253, 247, .72);
  color: #9a5a12;
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", system-ui, sans-serif;
  font-size: 15px;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 8px 16px rgba(141, 87, 33, .08);
  white-space: nowrap;
}

.shell {
  position: relative;
  z-index: 20000;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin-top: 11px;
  flex: 1 1 auto;
  min-height: 0;
}

.panel,
.quiz {
  border-radius: 8px;
}

.quiz {
  border-color: rgba(255, 255, 255, .86);
  background:
    linear-gradient(180deg, rgba(255, 253, 247, .96), rgba(255, 246, 232, .82)),
    var(--paper);
}

.panel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  width: auto;
  min-height: 0;
  border-color: rgba(255, 255, 255, .72);
}

.tools-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.file-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 34px;
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: var(--blue-soft);
  color: #1e3a8a;
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 -1px 0 rgba(37, 99, 235, .1);
  transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.file-label:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 8px 16px rgba(37, 99, 235, .14), inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.file-label strong {
  display: block;
  margin-bottom: 0;
  font-size: inherit;
  line-height: inherit;
}

#csvFile,
#restoreFile {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

.parent-box {
  width: auto;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.parent-label {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-weight: 800;
  text-align: center;
}

.parent-label input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 4px;
  background: rgba(255, 255, 255, .88);
  color: var(--ink);
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.parent-label input:focus {
  border-color: rgba(37, 99, 235, .48);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}

.parent-clear {
  display: none;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 999px;
  background: #fee2e2;
  color: #dc2626;
  cursor: pointer;
  font-size: 17px;
  font-weight: 950;
  line-height: 1;
}

.parent-clear.show {
  display: grid;
}

.parent-clear:hover {
  background: #fecaca;
}

.parent-actions {
  display: none;
}

.parent-actions.show {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 10;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 8px;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 12px 28px rgba(30, 41, 59, .14);
  backdrop-filter: blur(16px);
}

.header-tools .actions {
  gap: 4px;
  margin-top: 0;
}

.calendar-wrap {
  position: relative;
  z-index: 4;
}

.icon-btn {
  display: grid;
  place-items: center;
  border: 1px solid rgba(37, 99, 235, .18);
  border-radius: 8px;
  background: linear-gradient(180deg, #ffffff, #eff6ff);
  color: #1d4ed8;
  cursor: pointer;
  box-shadow: inset 0 -1px 0 rgba(37, 99, 235, .08);
  transition: transform .16s ease, box-shadow .16s ease;
}

.icon-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(37, 99, 235, .12);
}

.calendar-popover {
  display: none;
  position: fixed;
  left: 18px;
  top: 78px;
  z-index: 2147483647;
  width: min(340px, calc(100vw - 28px));
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 8px;
  background: rgba(255, 253, 247, .98);
  box-shadow: 0 18px 38px rgba(30, 41, 59, .16);
  backdrop-filter: blur(16px);
  text-align: left;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.calendar-popover.show {
  display: block;
}

.word-editor {
  display: none;
  position: fixed;
  left: 18px;
  top: 138px;
  z-index: 2147483647;
  width: min(460px, calc(100vw - 28px));
  max-height: min(680px, calc(100vh - 156px));
  overflow: auto;
  padding: 12px;
  border: 1px solid rgba(255, 255, 255, .82);
  border-radius: 18px;
  background: rgba(255, 253, 247, .98);
  box-shadow: 0 18px 42px rgba(30, 41, 59, .17);
  backdrop-filter: blur(18px);
  text-align: left;
}

.word-editor.show {
  display: block;
}

.word-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  color: #8a5a2c;
  font-size: 16px;
  font-weight: 950;
}

.word-editor-close {
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 237, 213, .9);
  color: #9a3412;
  cursor: pointer;
  font-size: 18px;
  font-weight: 950;
}

.word-edit-card {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid rgba(244, 180, 80, .24);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .48);
}

.word-edit-card + .word-edit-card {
  margin-top: 10px;
}

.word-edit-title {
  color: #334155;
  font-size: 17px;
  font-weight: 950;
}

.word-edit-meta {
  color: #8b735d;
  font-size: 12px;
  font-weight: 850;
}

.word-edit-card label {
  display: grid;
  gap: 4px;
  color: #7c5f45;
  font-size: 12px;
  font-weight: 900;
}

.word-edit-card textarea {
  width: 100%;
  min-height: 58px;
  resize: vertical;
  border: 1px solid rgba(148, 163, 184, .34);
  border-radius: 12px;
  padding: 8px 9px;
  background: rgba(255, 255, 255, .92);
  color: #334155;
  font: 850 14px/1.35 "Arial Rounded MT Bold", "SF Pro Rounded", system-ui, sans-serif;
  outline: none;
}

.word-edit-card textarea:focus {
  border-color: rgba(37, 99, 235, .45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, .1);
}

.word-edit-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.word-edit-empty {
  margin: 0;
  padding: 16px 4px;
  color: #8b735d;
  font-size: 14px;
  font-weight: 900;
  text-align: center;
}

.calendar-title {
  margin: 0 0 10px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 950;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-note {
  grid-column: 1 / -1;
  margin: 0;
  padding: 10px 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.calendar-day {
  display: grid;
  place-items: center;
  min-height: 35px;
  border: 1px solid rgba(39, 52, 82, .1);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}

.calendar-day strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
}

.calendar-day.has-work {
  color: #1e3a8a;
  background: #eaf2ff;
  border-color: rgba(147, 197, 253, .8);
}

.library-count {
  display: grid;
  place-items: center;
  min-width: 154px;
  width: 100%;
  border-radius: 8px;
  padding: 6px 11px;
  color: #475569;
  border: 1px solid rgba(255, 255, 255, .72);
  background: rgba(255, 252, 244, .62);
  box-shadow: 0 12px 26px rgba(142, 91, 33, .08);
  backdrop-filter: blur(18px);
  font-weight: 900;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
}

.btn.needs-backup {
  color: #92400e;
  background: linear-gradient(180deg, #fff7d6, #ffefb0);
  box-shadow: inset 0 -1px 0 rgba(245, 158, 11, .18), 0 8px 16px rgba(245, 158, 11, .10);
}

.btn {
  min-height: 34px;
  border: 0;
  border-radius: 8px;
  padding: 7px 10px;
  color: #fff;
  background: var(--blue);
  cursor: pointer;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12);
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
}

.btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 8px 16px rgba(37, 99, 235, .14), inset 0 -2px 0 rgba(0, 0, 0, .12);
}

.btn.secondary {
  color: #1e3a8a;
  background: var(--blue-soft);
  box-shadow: inset 0 -1px 0 rgba(37, 99, 235, .1);
}

.quiz-actions .btn {
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-weight: 950;
}

.btn:disabled {
  cursor: not-allowed;
  opacity: .48;
  transform: none;
}

.message {
  display: none;
  min-height: 22px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.quiz {
  min-height: 0;
  overflow: hidden;
}

.progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 850;
}

.task-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
  font-weight: 900;
}

.task-label,
.wrong-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  border-radius: 8px;
  padding: 5px 9px;
  border: 1px solid rgba(39, 52, 82, .1);
  white-space: nowrap;
}

.task-label {
  border-color: rgba(147, 197, 253, .75);
}

.wrong-pill {
  border-color: rgba(254, 205, 211, .9);
}

.bar {
  overflow: hidden;
  flex: 1;
  border-radius: 999px;
}

.bar span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  transition: width .3s ease;
}

.word-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(255, 248, 218, .98), rgba(222, 255, 235, .78), rgba(222, 247, 255, .82)),
    var(--paper);
  box-shadow: inset 0 -8px 0 rgba(255, 255, 255, .54), 0 18px 34px rgba(141, 93, 38, .10);
  text-align: center;
}

.word {
  overflow-wrap: anywhere;
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-weight: 950;
  letter-spacing: 0;
}

.speak-icon {
  display: grid;
  place-items: center;
  border-radius: 50%;
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease;
}

.speak-icon:hover {
  transform: scale(1.06);
  box-shadow: 0 12px 22px rgba(37, 99, 235, .16);
}

.choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.choice {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  cursor: pointer;
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-weight: 950;
  box-shadow: 0 5px 0 rgba(148, 163, 184, .16), 0 14px 22px rgba(34, 48, 84, .06);
  transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.choice:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #60a5fa;
  background: #f8fbff;
  box-shadow: 0 7px 0 rgba(96, 165, 250, .18), 0 16px 26px rgba(37, 99, 235, .1);
}

.choice:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(148, 163, 184, .16);
}

.choice.correct {
  color: var(--green);
}

.choice.wrong {
  color: var(--red);
}

.choice:disabled {
  cursor: default;
}

.result {
  visibility: hidden;
  width: min(880px, 100%);
  min-height: 0;
  max-height: 0;
  margin-top: 0;
  overflow: hidden;
}

.result.show {
  visibility: visible;
}

.flying-star {
  pointer-events: none;
  position: fixed;
  left: var(--star-start-x);
  top: var(--star-start-y);
  z-index: 20;
  color: #facc15;
  font-size: 58px;
  line-height: 1;
  text-shadow: 0 4px 0 #f97316, 0 16px 34px rgba(250, 204, 21, .48);
  offset-path: path(var(--star-path));
  offset-rotate: 0deg;
  transform: translate(-50%, -50%);
  animation: star-fly 980ms cubic-bezier(.16, .84, .28, 1) forwards;
}

@keyframes star-fly {
  0% {
    opacity: 0;
    offset-distance: 0%;
    transform: translate(-50%, -50%) scale(.42) rotate(-22deg);
  }

  12% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.22) rotate(-8deg);
  }

  100% {
    opacity: 0;
    offset-distance: 100%;
    transform: translate(-50%, -50%) scale(.32) rotate(28deg);
  }
}

@media (max-width: 700px) {
  header {
    grid-template-columns: 1fr;
    align-items: center;
  }

  .header-tools,
  .header-right {
    justify-self: center;
  }

  .calendar-popover {
    left: 50%;
    top: 128px;
    transform: translateX(-50%);
  }

  .word-editor {
    left: 50%;
    top: 176px;
    width: min(430px, calc(100vw - 24px));
    max-height: calc(100vh - 190px);
    transform: translateX(-50%);
  }

  .star-bank {
    min-width: 112px;
  }

  .shell {
    grid-template-columns: 1fr;
  }

  .quiz {
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .app {
    width: min(100% - 20px, 1040px);
    padding-top: 18px;
  }

  header {
    gap: 8px;
  }

  .header-tools,
  .header-right {
    justify-self: center;
  }

  .header-right {
    justify-content: flex-end;
  }

  .actions {
    grid-template-columns: 1fr;
  }

  .choice {
    min-height: 72px;
  }
}

@media (max-height: 820px) and (min-width: 700px) {

  .actions {
    margin-top: 8px;
  }

  .result {
    max-height: 86px;
  }
}

.app {
  width: min(1080px, calc(100% - 34px));
  padding: 38px 0 14px;
}

header {
  grid-template-columns: minmax(260px, 1fr) auto minmax(140px, 1fr);
  min-height: 76px;
  margin-bottom: 8px;
  padding: 4px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.panel {
  padding: 6px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  background: rgba(255, 252, 244, .62);
  box-shadow: 0 12px 26px rgba(142, 91, 33, .08);
  backdrop-filter: blur(18px);
}

.icon-btn,
.file-label,
.parent-label input,
.library-count,
.btn.secondary {
  border-radius: 15px;
}

.star-bank strong {
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", system-ui, sans-serif;
  letter-spacing: .02em;
}

.shell {
  align-items: stretch;
}

.quiz {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  padding: clamp(10px, 1.7vw, 18px) clamp(18px, 3vw, 34px) clamp(12px, 2vw, 20px);
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

#quizState {
  display: flex;
  flex-direction: column;
  min-height: 0;
}

#quizState[hidden] {
  display: none;
}

.task-strip {
  width: min(760px, 100%);
  margin: 0 auto 8px;
  color: #77624d;
}

.task-label,
.wrong-pill {
  min-height: 32px;
  border: 1px solid rgba(244, 180, 80, .28);
  background: rgba(255, 255, 255, .66);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .34);
}

.task-label {
  color: #0f6f8a;
  background: rgba(225, 248, 255, .72);
}

.wrong-pill {
  color: #c2415a;
  background: rgba(255, 238, 242, .76);
}

.progress-row {
  width: min(760px, 100%);
  height: 24px;
  margin: 0 auto 8px;
  color: #8a7158;
}

.bar {
  height: 17px;
  border: 1px solid rgba(255, 183, 77, .42);
  background: rgba(255, 250, 235, .8);
}

.bar span {
  background: linear-gradient(90deg, #fbbf24, #34d399, #38bdf8);
}

.choices {
  width: min(860px, 100%);
  margin: 0 auto;
  gap: 22px;
}

.choice:hover:not(:disabled) {
  border-color: rgba(45, 178, 209, .48);
  background: linear-gradient(180deg, #ffffff, #f2fcff);
  box-shadow:
    0 7px 0 rgba(45, 178, 209, .18),
    0 18px 30px rgba(45, 178, 209, .10);
}

.quiz-actions {
  margin: 14px auto 0;
}

.quiz-actions .btn {
  box-shadow: 0 8px 0 rgba(37, 99, 235, .16), 0 18px 30px rgba(37, 99, 235, .14);
}

.quiz-actions .btn.secondary {
  color: #37506d;
  background: linear-gradient(180deg, #ffffff, #eef7ff);
  box-shadow: 0 8px 0 rgba(148, 163, 184, .18), 0 18px 28px rgba(100, 116, 139, .09);
}

@media (max-height: 820px) and (min-width: 700px) {
  .app {
    width: min(1030px, calc(100% - 28px));
    padding-bottom: 8px;
  }

  header {
    min-height: 58px;
    margin-bottom: 4px;
  }

  .star-bank {
    padding: 6px 10px;
  }

  .quiz {
    padding-top: 6px;
    padding-bottom: 8px;
  }

  .task-strip {
    margin-bottom: 5px;
    font-size: 12px;
  }

  .progress-row {
    margin-bottom: 5px;
  }

  .choices {
    gap: 18px;
  }

  .quiz-actions .btn {
    border-radius: 18px;
  }
}

.star-bank {
  display: grid;
  place-items: center;
  min-width: 172px;
  min-height: 52px;
  padding: 8px 16px;
  border: 1px solid rgba(251, 191, 36, .5);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff6bd, #fffdf1);
  box-shadow: 0 14px 30px rgba(250, 204, 21, .20), inset 0 -3px 0 rgba(234, 179, 8, .18);
}

.star-bank strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #a35a00;
  font-size: 29px;
  line-height: 1;
  text-shadow:
    0 1px 0 #fff7b8,
    0 3px 0 #f59e0b,
    0 8px 14px rgba(180, 83, 9, .32);
}

.star-bank strong b {
  text-shadow: none;
}

.word-card {
  width: min(860px, 100%);
  border: 2px solid rgba(255, 228, 157, .72);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 248, 217, .98), rgba(230, 255, 238, .86) 52%, rgba(220, 248, 255, .90)),
    #fffefa;
  box-shadow:
    inset 0 -10px 0 rgba(255, 255, 255, .48),
    0 24px 46px rgba(141, 87, 33, .13);
}

.word-main {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: auto;
  min-height: 0;
  max-width: 100%;
}

.word {
  color: #16243d;
  font-size: clamp(58px, 7.6vw, 96px);
  line-height: .98;
  text-shadow: none;
}

.word-card.definition-mode .word {
  max-width: 780px;
  color: #172033;
  font-size: clamp(34px, 3.9vw, 52px);
  line-height: 1.14;
}

.speak-icon {
  position: static;
  flex: 0 0 auto;
  border: 1px solid rgba(14, 165, 233, .18);
  font-size: 24px;
}

.choice {
  justify-content: center;
  gap: 0;
  min-height: clamp(68px, 10.2vh, 88px);
  border: 1px solid rgba(186, 143, 87, .16);
  border-radius: 24px;
  padding: 14px 18px;
  background: linear-gradient(180deg, #ffffff, #fffaf0);
  color: #172033;
  text-align: center;
  box-shadow:
    0 6px 0 rgba(214, 172, 112, .20),
    0 16px 28px rgba(109, 74, 36, .08);
}

.choice.correct {
  border-color: rgba(34, 197, 94, .58);
  background: linear-gradient(180deg, #f2fff7, #dcfce7);
  box-shadow:
    0 6px 0 rgba(34, 197, 94, .18),
    0 16px 28px rgba(34, 197, 94, .10);
}

.choice.wrong {
  border-color: rgba(248, 113, 113, .62);
  background: linear-gradient(180deg, #fff7f8, #ffe4e8);
}

@media (max-height: 820px) and (min-width: 700px) {
  .word-card {
    border-radius: 26px;
  }

  .word {
    font-size: clamp(44px, 5.8vw, 70px);
  }

  .word-card.definition-mode .word {
    font-size: clamp(27px, 3.1vw, 40px);
  }

  .result.show {
    max-height: 84px;
  }

  .choice {
    min-height: 58px;
    border-radius: 20px;
    padding: 9px 12px;
  }
}

@media (orientation: landscape) and (min-width: 900px) {
  .app {
    width: min(1280px, calc(100% - 20px));
  }

  header {
    padding-left: clamp(36px, calc((100vw - 1180px) / 2), 72px);
    padding-right: clamp(36px, calc((100vw - 1180px) / 2), 72px);
  }

  .quiz {
    padding-left: clamp(8px, 1.2vw, 18px);
    padding-right: clamp(8px, 1.2vw, 18px);
  }

  .task-strip,
  .progress-row {
    width: min(1160px, 100%);
  }

  .word-card,
  .choices {
    width: min(1180px, 100%);
  }

  .quiz-actions {
    width: min(680px, 100%);
  }
}

.choice {
  font-size: clamp(30px, 2.95vw, 40px);
  line-height: 1.22;
}

@media (max-height: 820px) and (min-width: 700px) {
  .choice {
    font-size: clamp(25px, 2.55vw, 33px);
  }
}

.sentence {
  display: block;
  width: min(1160px, calc(100% - 4px));
  min-height: 0;
  margin: 8px 0 0;
  padding: 13px 22px;
  border: 0;
  border-radius: 999px;
  color: #6f4518;
  background:
    radial-gradient(circle at 13% 50%, rgba(255, 249, 215, .34), transparent 25%),
    linear-gradient(180deg, #fffbea 0%, #fff6d4 100%);
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-size: clamp(29px, 2.8vw, 39px);
  line-height: 1.16;
  font-weight: 950;
  text-shadow: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
  filter: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .48),
    inset 0 -3px 0 rgba(222, 169, 55, .035),
    0 4px 10px rgba(226, 169, 61, .04);
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
}

.sentence::before {
  content: none;
  display: none;
}

.sentence * {
  text-shadow: none;
  -webkit-text-stroke: 0;
  paint-order: normal;
  filter: none;
}

.result,
.result.show {
  width: 100%;
  min-height: 76px;
  max-height: none;
  overflow: visible;
}

@media (max-height: 820px) and (min-width: 700px) {
  .sentence {
    min-height: 0;
    padding: 9px 16px;
    width: min(1160px, calc(100% - 4px));
    font-size: clamp(22px, 2.18vw, 30px);
  }
}

.quiz-actions .result-title {
  grid-column: 1 / -1;
  justify-self: center;
  align-self: center;
  min-width: 0;
  margin: 2px 0 0;
  color: #f59e0b;
  font-family: "Arial Rounded MT Bold", "SF Pro Rounded", "Avenir Next", system-ui, sans-serif;
  font-size: clamp(24px, 2.22vw, 32px);
  font-weight: 950;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}

.quiz-actions .result-title:empty {
  display: none;
}

@media (max-height: 820px) and (min-width: 700px) {
  .quiz-actions .result-title {
    font-size: clamp(21px, 2vw, 27px);
  }
}

.word-card {
  flex: 0 0 220px;
  height: 220px;
  min-height: 0;
  max-height: 220px;
  margin: 3px auto 9px;
  padding: clamp(13px, 1.9vw, 22px);
  gap: 7px;
  overflow: visible;
}

.quiz-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 19px;
  gap: 14px;
  width: min(780px, 100%);
}

.quiz-actions .btn {
  min-height: 78px;
  border-radius: 24px;
  padding: 18px 34px;
  font-size: clamp(24px, 2.35vw, 32px);
}

.speak-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: #9a8f7b;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.speak-icon {
  width: 42px;
  height: 42px;
  border-color: transparent;
  background: transparent;
  color: #9a8f7b;
  box-shadow: none;
  opacity: .72;
}

.speak-icon:hover {
  opacity: .9;
  background: rgba(255, 255, 255, .32);
  box-shadow: none;
}

@media (max-height: 820px) and (min-width: 700px) {
  .word-card {
    flex-basis: 190px;
    height: 190px;
    min-height: 0;
    max-height: 190px;
    margin: 2px auto 6px;
    padding: 10px 16px;
    gap: 5px;
  }

  .result,
  .result.show {
    min-height: 62px;
  }

  .sentence {
    margin-top: 6px;
  }

  .quiz-actions {
    margin-top: 17px;
    width: min(720px, 100%);
  }

  .quiz-actions .btn {
    min-height: 70px;
    padding: 16px 30px;
    font-size: clamp(21px, 2.15vw, 28px);
  }

  .speak-icon svg {
    width: 23px;
    height: 23px;
  }

  .speak-icon {
    width: 38px;
    height: 38px;
  }
}

.title-card {
  display: grid;
  place-items: center;
  min-width: min(500px, 52vw);
  position: relative;
  z-index: 1;
}

.title-stack {
  position: relative;
  width: max-content;
  height: clamp(74px, 7vw, 94px);
  display: grid;
  place-items: start center;
}

.title-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(7px, 1vw, 12px);
}

h1 {
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  height: clamp(44px, 4.5vw, 60px);
  margin: 0;
  color: #f05297;
  font-family: "SF Pro Rounded", "Comic Sans MS", "Marker Felt", ui-rounded, "Avenir Next", cursive;
  font-size: clamp(36px, 4.35vw, 56px);
  line-height: .85;
  letter-spacing: 0;
  text-shadow:
    0 4px 0 #ffe08b,
    0 12px 24px rgba(236, 72, 153, .20);
  white-space: nowrap;
}

h1 .arc-letter {
  display: inline-block;
  transform-origin: 50% 120%;
  text-shadow:
    0 2px 0 rgba(255, 255, 255, .92),
    0 4px 0 rgba(255, 224, 139, .95),
    0 10px 18px rgba(236, 72, 153, .18);
}

h1 .arc-gap {
  width: .22em;
}

h1 .arc-letter:nth-child(1) { color: #f43f5e; transform: translateY(18px) rotate(-18deg); }
h1 .arc-letter:nth-child(2) { color: #ec4899; transform: translateY(10px) rotate(-14deg); }
h1 .arc-letter:nth-child(3) { color: #f97316; transform: translateY(3px) rotate(-10deg); }
h1 .arc-letter:nth-child(4) { color: #f59e0b; transform: translateY(-3px) rotate(-7deg); }
h1 .arc-letter:nth-child(5) { color: #eab308; transform: translateY(-8px) rotate(-4deg); }
h1 .arc-letter:nth-child(6) { transform: translateY(-10px); }
h1 .arc-letter:nth-child(7) { color: #84cc16; transform: translateY(-13px) rotate(-2deg); }
h1 .arc-letter:nth-child(8) { color: #22c55e; transform: translateY(-16px) rotate(1deg); }
h1 .arc-letter:nth-child(9) { color: #14b8a6; transform: translateY(-14px) rotate(4deg); }
h1 .arc-letter:nth-child(10) { color: #0ea5e9; transform: translateY(-9px) rotate(7deg); }
h1 .arc-letter:nth-child(11) { color: #3b82f6; transform: translateY(-3px) rotate(10deg); }
h1 .arc-letter:nth-child(12) { color: #6366f1; transform: translateY(4px) rotate(13deg); }
h1 .arc-letter:nth-child(13) { color: #6366f1; transform: translateY(4px) rotate(13deg); }
h1 .arc-letter:nth-child(14) { color: #8b5cf6; transform: translateY(11px) rotate(16deg); }
h1 .arc-letter:nth-child(15) { color: #f43f5e; transform: translateY(18px) rotate(19deg); }

.subtitle {
  position: absolute;
  top: clamp(50px, 4.8vw, 66px);
  left: 50%;
  margin: 0;
  color: #1194aa;
  font-family: "Marker Felt", "Comic Sans MS", "SF Pro Rounded", ui-rounded, cursive;
  font-size: clamp(21px, 2.28vw, 27px);
  font-weight: 950;
  letter-spacing: .04em;
  text-shadow: 0 2px 0 rgba(255, 255, 255, .9), 0 5px 10px rgba(17, 148, 170, .16);
  transform: translateX(-50%);
  white-space: nowrap;
}

.subtitle span {
  display: inline-block;
  transform-origin: 50% 70%;
}

.subtitle span:nth-child(1) {
  transform: translateY(1px) rotate(-8deg);
  color: #0ea5a8;
}

.subtitle span:nth-child(2) {
  transform: translateY(-2px) rotate(6deg);
  color: #f59e0b;
}

.subtitle span:nth-child(3) {
  transform: translateY(2px) rotate(-5deg);
  color: #ec4899;
}

.subtitle span:nth-child(4) {
  transform: translateY(-1px) rotate(8deg);
  color: #22c55e;
}

.subtitle span:nth-child(5) {
  transform: translateY(2px) rotate(-7deg);
  color: #38bdf8;
}

.subtitle span:nth-child(6) {
  transform: translateY(-2px) rotate(5deg);
  color: #a855f7;
}

.subtitle span:nth-child(7) {
  transform: translateY(1px) rotate(-4deg);
  color: #f97316;
}

.title-kid {
  display: block;
  width: auto;
  height: clamp(78px, 8.8vw, 126px);
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  position: relative;
  z-index: 0;
  filter: drop-shadow(0 8px 12px rgba(141, 87, 33, .13));
}

.title-kid.left {
  height: clamp(82px, 9.4vw, 132px);
  margin-block: -24px;
  transform: translate(-25px, 44px) rotate(-3deg) scale(1.46);
}

.title-kid.right {
  margin-block: -24px;
  transform: translate(19px, 33px) rotate(3deg) scale(1.34);
}

.icon-btn {
  width: 40px;
  height: 38px;
  font-size: 15px;
}

.parent-label {
  font-size: 11px;
}

.parent-label input {
  width: 50px;
  min-height: 32px;
  font-size: 12px;
}

.task-strip {
  font-size: 17px;
}

.task-label,
.wrong-pill {
  font-size: 17px;
}

.progress-row {
  font-size: 17px;
}

.no-due-state .task-strip,
.no-due-state .progress-row,
.no-due-state .choices,
.no-due-state .quiz-actions {
  display: none;
}

.no-due-state .word-card {
  display: grid;
  place-items: center;
  width: min(900px, 100%);
  height: clamp(280px, 42vh, 420px);
  max-height: none;
  margin: calc(clamp(18px, 4vh, 42px) + 3cm) auto 0;
  padding: clamp(28px, 4vw, 54px);
  border: 2px solid rgba(255, 218, 120, .72);
  border-radius: 34px;
  background:
    radial-gradient(circle at 22% 18%, rgba(255, 255, 255, .72), transparent 28%),
    linear-gradient(135deg, #fff7d9, #fffdf3 52%, #e9fbff);
  box-shadow:
    inset 0 -10px 0 rgba(255, 255, 255, .48),
    0 24px 46px rgba(141, 87, 33, .13);
}

.no-due-state .word-main {
  display: grid;
  place-items: center;
}

.no-due-state .word {
  color: #f05297;
  font-size: clamp(46px, 6.8vw, 88px);
  line-height: 1.05;
  text-shadow: 0 4px 0 #ffe08b, 0 12px 24px rgba(236, 72, 153, .18);
}

.no-due-state .speak-icon,
.no-due-state .result {
  display: none;
}

@media (max-height: 820px) and (min-width: 700px) {
  .app {
    padding-top: 52px;
  }

  h1 {
    font-size: clamp(31px, 3.72vw, 46px);
    height: clamp(38px, 4.2vw, 50px);
  }

  .subtitle {
    top: 48px;
    font-size: 21px;
  }

  .title-stack {
    height: 72px;
  }

  .title-kid {
    height: clamp(80px, 8.2vw, 112px);
  }

  .title-kid.left {
    height: clamp(88px, 8.7vw, 118px);
  }

  .icon-btn {
    width: 39px;
    height: 37px;
    font-size: 14px;
  }

  .parent-label,
  .library-count {
    font-size: 15px;
  }

  .parent-label input {
    min-height: 31px;
    font-size: 12px;
  }

  .task-strip,
  .task-label,
  .wrong-pill,
  .progress-row {
    font-size: 16px;
  }

  .no-due-state .word-card {
    height: clamp(230px, 38vh, 320px);
    margin-top: calc(clamp(12px, 3vh, 28px) + 3cm);
  }

  .no-due-state .word {
    font-size: clamp(38px, 6vw, 70px);
  }
}

@media (max-width: 700px) {
  .title-kid {
    height: clamp(44px, 12vw, 62px);
    margin-block: -10px;
  }
}