:root {
  color-scheme: light;
  --bg: #f6f8fb;
  --panel: #ffffff;
  --ink: #17202a;
  --muted: #607080;
  --line: #d8e1ea;
  --teal: #108f8f;
  --teal-dark: #06716f;
  --coral: #ee6a5f;
  --sun: #f4bd3f;
  --leaf: #5f9f62;
  --blue: #3d7edb;
  --lavender: #7d6ad8;
  --paper: #fffaf0;
  --soft-blue: #eaf3ff;
  --soft-teal: #e8f7f5;
  --soft-coral: #fff0ee;
  --soft-sun: #fff7db;
  --shadow: 0 18px 42px rgba(31, 48, 66, 0.11);
  --soft-shadow: 0 10px 24px rgba(31, 48, 66, 0.08);
  --kid-card-button-height: 40px;
  --kid-card-button-font: 15px;
  --kid-card-button-pad: 11px;
  --kid-card-big-width: 52px;
  --kid-card-next-width: 82px;
  --kid-card-tool-width: 76px;
  --kid-sound-choice-height: 64px;
  --kid-sound-choice-font: 22px;
  --kid-meaning-choice-height: 54px;
  --kid-meaning-choice-font: 20px;
  --kid-meaning-picture-width: 148px;
  --kid-meaning-picture-height: 106px;
  --kid-card-picture-width: 104px;
  --kid-card-picture-height: 72px;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background:
    linear-gradient(90deg, rgba(16, 143, 143, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(61, 126, 219, 0.05) 1px, transparent 1px),
    linear-gradient(135deg, #f8fbff 0%, #fffaf0 45%, #f3faf6 100%);
  background-size: 28px 28px, 28px 28px, auto;
  color: var(--ink);
  font-family: "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
}

button,
input,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

.app-shell {
  min-height: 100vh;
  padding: 18px;
}

.cover-screen {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 22px;
  background:
    linear-gradient(90deg, rgba(16, 143, 143, 0.08) 1px, transparent 1px),
    linear-gradient(0deg, rgba(244, 189, 63, 0.12) 1px, transparent 1px),
    linear-gradient(135deg, #fffaf0 0%, #f3fbff 48%, #eef8f5 100%);
  background-size: 32px 32px, 32px 32px, auto;
}

.cover-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.01);
  transition: opacity 220ms ease, transform 220ms ease;
}

.cover-card {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 10px;
  width: min(760px, 100%);
  min-height: min(680px, calc(100vh - 28px));
  align-content: center;
  padding: 24px;
  border: 1px solid #d9e5ec;
  border-top: 7px solid var(--sun);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 28px 70px rgba(31, 48, 66, 0.18);
  overflow: hidden;
}

.cover-card::before,
.cover-card::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 26px;
  border-radius: 8px;
  background: rgba(16, 143, 143, 0.13);
  transform: rotate(-8deg);
}

.cover-card::before {
  left: -42px;
  top: 74px;
}

.cover-card::after {
  right: -50px;
  bottom: 86px;
  background: rgba(244, 189, 63, 0.22);
  transform: rotate(10deg);
}

.cover-card h1 {
  max-width: 620px;
  color: #17202a;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.04;
  text-align: center;
}

.cover-card p {
  color: #4e6174;
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 800;
}

.cover-people {
  width: min(330px, 62vw);
  aspect-ratio: 941 / 1672;
  display: grid;
  place-items: center;
  overflow: visible;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: linear-gradient(180deg, #fff, #f8fbff);
}

.cover-people img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
}

.cover-word {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 4px 0 6px;
}

.cover-word span {
  display: grid;
  place-items: center;
  width: clamp(54px, 9vw, 78px);
  height: clamp(54px, 9vw, 78px);
  border: 2px solid #c9dcfa;
  border-radius: 8px;
  background: linear-gradient(180deg, #f9fcff, #eaf3ff);
  color: #244f8e;
  font-size: clamp(28px, 6vw, 44px);
  font-weight: 900;
  box-shadow: inset 0 -7px 0 rgba(61, 126, 219, 0.08);
}

.cover-word span:nth-child(2n) {
  border-color: #edd27d;
  background: linear-gradient(180deg, #fffdf2, #fff7db);
  color: #745107;
}

.cover-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.cover-button {
  min-width: 138px;
}

.topbar,
.learn-panel,
.parent-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-top: 5px solid var(--sun);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: var(--soft-teal);
  color: var(--teal-dark);
  border: 2px solid #bfe4df;
  font-weight: 900;
  font-size: 22px;
  box-shadow: inset 0 -4px 0 rgba(16, 143, 143, 0.1);
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  font-size: 24px;
  line-height: 1.1;
}

.brand p {
  margin-top: 4px;
  color: var(--muted);
  font-size: 14px;
}

.top-actions,
.import-actions,
.file-row,
.card-actions,
.game-actions,
.spell-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 16px;
  align-items: start;
}

.learn-panel {
  min-height: calc(100vh - 116px);
  padding: 16px;
  border-top: 5px solid var(--teal);
}

.parent-panel {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow: auto;
  padding: 16px;
  border-top: 5px solid var(--blue);
}

.status-strip,
.panel-heading,
.word-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.panel-heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.setting-exit-button {
  min-height: 36px;
  padding: 0 12px;
  white-space: nowrap;
}

.status-strip {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(135deg, #fbfdff, #fffdf6);
}

.eyebrow {
  display: inline-block;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
}

#deckTitle {
  margin-top: 3px;
  font-size: 26px;
}

.stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.stats span,
.progress-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  white-space: nowrap;
}

.stats strong,
.progress-pill strong {
  color: var(--ink);
}

.mode-tabs {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  margin: 14px 0;
}

.mode-tab,
.text-button,
.primary-button,
.soft-button,
.danger-button,
.icon-button,
.tile-button,
.choice-button,
.chunk-button {
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease, border-color 130ms ease;
}

.mode-tab {
  min-height: 48px;
  padding: 8px 10px;
  background: #f1f5f8;
  border: 1px solid #dce7ef;
  color: #304154;
  font-weight: 800;
}

.mode-tab.is-active {
  background: linear-gradient(135deg, var(--teal), var(--blue));
  border-color: transparent;
  color: white;
  box-shadow: var(--soft-shadow);
}

.text-button,
.primary-button,
.soft-button,
.danger-button {
  min-height: 44px;
  padding: 0 15px;
  font-weight: 800;
}

.text-button,
.primary-button {
  background: linear-gradient(135deg, var(--teal), #0c7f9c);
  color: #fff;
}

.soft-button {
  background: #eef3f7;
  color: #304154;
}

.soft-button:disabled,
.primary-button:disabled,
.danger-button:disabled,
.icon-button:disabled,
.next-button:disabled {
  opacity: 0.45;
  cursor: default;
  transform: none;
}

.danger-button {
  background: var(--soft-coral);
  color: #a3332d;
}

.icon-button {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: var(--soft-sun);
  color: #7b5600;
  font-size: 22px;
  font-weight: 900;
}

.icon-button.is-muted {
  background: #eef3f7;
  color: #6b7886;
}

.icon-button.mini {
  width: 34px;
  height: 34px;
  font-size: 22px;
}

.mode-tab:hover,
.text-button:hover,
.primary-button:hover,
.soft-button:hover,
.danger-button:hover,
.icon-button:hover,
.tile-button:hover,
.choice-button:hover,
.chunk-button:hover {
  transform: translateY(-1px);
}

.mode-tab:focus-visible,
.text-button:focus-visible,
.primary-button:focus-visible,
.soft-button:focus-visible,
.danger-button:focus-visible,
.icon-button:focus-visible,
.tile-button:focus-visible,
.choice-button:focus-visible,
.chunk-button:focus-visible,
.text-input:focus,
.word-input:focus {
  outline: 3px solid rgba(61, 126, 219, 0.28);
  outline-offset: 2px;
}

.game-area {
  min-height: 570px;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 250, 240, 0.72), rgba(255, 255, 255, 0.95)),
    #fff;
  padding: 18px;
}

.game-area > .stage-fitted {
  align-self: start;
  justify-self: center;
  overflow: visible !important;
  transform: scale(var(--stage-fit-scale, 1));
  transform-origin: top center;
}

.game-area > .stage-measuring {
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

.game-area > .stage-measuring .card-main {
  overflow: visible !important;
}

.game-area > .stage-fitted .card-main {
  overflow: visible;
}

body.stage-fit-active .game-area {
  overflow: hidden !important;
}

.daily-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 260px) auto;
  align-items: center;
  gap: 14px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid #dce7ef;
  border-radius: 8px;
  background: linear-gradient(135deg, #fffaf0, #eef8f5);
}

.daily-copy {
  display: grid;
  gap: 4px;
}

.daily-copy h3 {
  font-size: 21px;
}

.daily-copy p {
  color: var(--muted);
  line-height: 1.4;
}

.daily-meter {
  display: grid;
  gap: 7px;
}

.daily-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.daily-actions .soft-button,
.daily-actions .primary-button {
  min-height: 40px;
  padding: 0 12px;
  white-space: nowrap;
}

.daily-meter strong {
  text-align: right;
  color: #334557;
}

.meter-track {
  height: 12px;
  overflow: hidden;
  border-radius: 8px;
  background: #dfe8ef;
}

.meter-track span {
  display: block;
  width: 0%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--leaf), var(--sun));
  transition: width 260ms ease;
}

.stamp-button {
  min-width: 112px;
}

.empty-state,
.flash-card,
.question-card,
.review-panel,
.match-panel {
  min-height: 532px;
  display: grid;
  align-content: center;
  gap: 16px;
}

.empty-state {
  justify-items: center;
  text-align: center;
}

.empty-state .visual {
  width: 112px;
  height: 112px;
}

.visual {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  background: var(--soft-blue);
  border: 2px solid #c9dcfa;
  color: var(--blue);
  font-size: 64px;
  font-weight: 900;
  justify-self: center;
  box-shadow: inset 0 -8px 0 rgba(61, 126, 219, 0.08);
}

.meaning-picture {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  overflow: hidden;
  padding: 6px;
  border: 2px solid #c9dcfa;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  box-shadow: inset 0 -8px 0 rgba(61, 126, 219, 0.08);
}

.meaning-picture.is-card {
  width: 208px;
  height: 148px;
}

.meaning-picture.is-question {
  width: 174px;
  height: 124px;
}

.meaning-picture img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: auto;
}

.meaning-picture span {
  display: none;
  color: var(--blue);
  font-size: 58px;
  font-weight: 900;
}

.meaning-picture.is-letter span {
  display: grid;
}

.flash-card {
  justify-items: center;
  text-align: center;
}

.card-main {
  width: 100%;
  min-height: 0;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 8px;
  overflow: hidden;
}

.card-image-step {
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: min(560px, 100%);
  padding: 8px 10px;
  border: 1px dashed #c9dcfa;
  border-radius: 8px;
  background: #f9fcff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.card-image-step > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
}

.word-big {
  font-size: clamp(48px, 8vw, 92px);
  line-height: 1;
  font-weight: 900;
  color: var(--ink);
  word-break: break-word;
  text-shadow: 0 2px 0 rgba(244, 189, 63, 0.22);
}

.meaning-big {
  max-width: min(760px, 100%);
  font-size: 32px;
  line-height: 1.25;
  color: #34495e;
  font-weight: 800;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.meaning-small {
  font-size: 26px;
}

.meaning-smaller {
  font-size: 22px;
  line-height: 1.32;
}

.meaning-tiny {
  font-size: 18px;
  line-height: 1.38;
}

.phonetic-line {
  min-height: 28px;
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 800;
}

.lookup-note {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--soft-teal);
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.phonics-row,
.phonics-slots,
.chunk-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.phonics-row {
  max-width: 720px;
}

.phonics-guide {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid #d8e8f2;
  border-radius: 8px;
  background: #f8fbfd;
}

.phonics-title {
  color: var(--teal-dark);
  font-size: 15px;
  font-weight: 900;
}

.phonics-chip,
.chunk-button,
.phonics-slot {
  min-width: 56px;
  min-height: 48px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 24px;
  font-weight: 900;
  text-transform: lowercase;
}

.phonics-chip,
.chunk-button {
  border: 2px solid #c9dcfa;
  background: var(--soft-blue);
  color: #244f8e;
}

.phonics-chip {
  display: grid;
  gap: 2px;
  justify-items: center;
  align-content: center;
  min-width: 72px;
  min-height: 48px;
  border-radius: 8px;
}

.chunk-button {
  cursor: pointer;
}

.phonics-chip strong {
  font-size: 24px;
  line-height: 1;
}

.phonics-chip span {
  color: #496783;
  font-size: 12px;
  font-weight: 800;
}

.phrase-gap,
.phrase-note {
  color: var(--muted);
  font-weight: 900;
}

.phrase-gap {
  align-self: center;
  padding: 0 4px;
  font-size: 13px;
}

.phrase-note {
  font-size: 13px;
}

.chunk-button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.phonics-slot {
  display: grid;
  place-items: center;
  border: 2px solid var(--line);
  background: #fff;
}

.phonics-slot.is-fixed {
  background: #f4f7fa;
  color: var(--muted);
  border-style: dashed;
}

.phonics-slot.is-space {
  min-width: 44px;
}

.phonics-slot.is-space::before {
  content: "空格";
  font-size: 12px;
}

.hint-line {
  min-height: 28px;
  color: var(--teal-dark);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

.example {
  max-width: 720px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.45;
}

.stars {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
}

.star {
  color: #c7d0d9;
  font-size: 24px;
}

.star.is-filled {
  color: var(--sun);
}

.card-actions,
.game-actions {
  justify-content: center;
}

.card-actions-top {
  width: 100%;
  align-self: start;
}

.card-tool-button {
  min-height: 58px;
  padding: 0 16px;
  white-space: nowrap;
}

.draw-button:not(:disabled) {
  background: linear-gradient(135deg, var(--sun), #f28c38);
  color: #17202a;
  box-shadow: 0 8px 18px rgba(244, 189, 63, 0.28), inset 0 -4px 0 rgba(23, 32, 42, 0.08);
}

.draw-button.is-used {
  min-width: 78px;
}

.big-round,
.next-button {
  min-width: 88px;
  min-height: 58px;
  border-radius: 8px;
  border: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 900;
  cursor: pointer;
}

.big-round {
  background: var(--blue);
}

.next-button {
  background: var(--leaf);
  padding: 0 24px;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(95, 159, 98, 0.28), inset 0 -4px 0 rgba(23, 32, 42, 0.1);
}

.spell-check-button {
  min-width: 92px;
  box-shadow: 0 8px 18px rgba(16, 143, 143, 0.24);
}

.again-button {
  background: var(--coral);
}

.question-card {
  align-content: start;
  text-align: center;
}

body.mode-meaning .question-card {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 6px;
  overflow: hidden;
}

body.mode-meaning .question-top {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "label prompt picture"
    "rep prompt picture";
  align-items: center;
  justify-items: start;
  gap: 6px 10px;
  width: 100%;
  padding: 0;
}

body.mode-meaning .question-label {
  grid-area: label;
  font-size: 12px;
}

body.mode-meaning .question-top .meaning-picture {
  grid-area: picture;
}

body.mode-meaning .question-top .question-prompt {
  grid-area: prompt;
  justify-self: center;
}

body.mode-meaning .question-top .rep-line {
  grid-area: rep;
  min-height: 18px;
  font-size: 12px;
}

body.mode-meaning .meaning-picture.is-question {
  width: clamp(78px, 15dvh, 126px);
  height: clamp(58px, 11dvh, 92px);
  padding: 4px;
}

body.mode-meaning .meaning-picture span {
  font-size: clamp(28px, 6dvh, 42px);
}

body.mode-meaning .question-prompt {
  max-width: 100%;
  font-size: clamp(22px, 4.4dvh, 40px);
  line-height: 1.12;
}

body.mode-meaning .meaning-prompt.meaning-small,
body.mode-meaning .meaning-prompt.meaning-smaller,
body.mode-meaning .meaning-prompt.meaning-tiny {
  font-size: clamp(16px, 3.1dvh, 28px);
  line-height: 1.18;
}

body.mode-meaning .choices {
  align-self: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
  min-height: 0;
}

body.mode-meaning .choice-button {
  min-height: 0;
  padding: 8px 10px;
  font-size: clamp(18px, 3.8dvh, 30px);
  line-height: 1.08;
}

body.mode-meaning .feedback {
  min-height: 20px;
  font-size: 14px;
}

.question-top {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 10px 0 6px;
}

.question-label {
  color: var(--muted);
  font-weight: 800;
}

.question-prompt {
  max-width: min(780px, 100%);
  font-size: clamp(36px, 6vw, 68px);
  line-height: 1.05;
  font-weight: 900;
  color: var(--ink);
  word-break: break-word;
  overflow-wrap: anywhere;
}

.meaning-prompt.meaning-small {
  font-size: clamp(28px, 4.6vw, 48px);
  line-height: 1.15;
}

.meaning-prompt.meaning-smaller {
  font-size: clamp(24px, 4vw, 38px);
  line-height: 1.2;
}

.meaning-prompt.meaning-tiny {
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1.28;
}

.choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.choice-button {
  min-height: 108px;
  padding: 16px;
  background: #f9fbfd;
  border: 2px solid var(--line);
  color: var(--ink);
  font-size: clamp(22px, 4vw, 38px);
  font-weight: 900;
  word-break: break-word;
  box-shadow: inset 0 -5px 0 rgba(31, 48, 66, 0.04);
}

.choice-button.is-correct {
  background: var(--soft-teal);
  border-color: var(--teal);
  color: var(--teal-dark);
}

.choice-button.is-wrong {
  background: var(--soft-coral);
  border-color: var(--coral);
  color: #a3332d;
}

.feedback {
  min-height: 34px;
  color: var(--muted);
  font-size: 20px;
  font-weight: 800;
}

.feedback.good {
  color: var(--teal-dark);
}

.feedback.try {
  color: #a3332d;
}

.read-once {
  width: min(520px, 100%);
  justify-self: center;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 2px solid #b8d9e1;
  border-radius: 8px;
  background: #f2fbfc;
  color: var(--ink);
}

.read-once.is-done {
  border-color: #cfe2d6;
  background: #f4fbf6;
}

.read-once.is-listening {
  border-color: var(--sun);
  background: #fff9e6;
}

.read-once.needs-retry {
  border-color: var(--coral);
  background: #fff3f1;
}

.read-once-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
  text-align: left;
}

.read-once-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 900;
}

.read-once strong {
  color: var(--teal-dark);
  font-size: clamp(20px, 4vh, 30px);
  line-height: 1;
  word-break: break-word;
}

.read-once em {
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
}

.read-once-actions {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.read-once-button {
  min-width: 110px;
  min-height: 48px;
  flex: 0 0 auto;
}

.read-speak-button {
  min-width: 52px;
  min-height: 44px;
  font-size: 20px;
}

.read-playback-button {
  min-width: 92px;
  min-height: 44px;
}

.spell-answer-feedback strong {
  color: #244f8e;
  font-size: 1.08em;
}

.mode-progress {
  width: min(520px, 100%);
  justify-self: center;
  display: grid;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #cfe2ee;
  border-radius: 8px;
  background: #f8fbfd;
}

.mode-progress-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
}

.mode-progress-head strong {
  color: var(--ink);
}

.mini-meter {
  height: 8px;
  overflow: hidden;
  border-radius: 8px;
  background: #dfe8ef;
}

.mini-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--teal), var(--sun));
  transition: width 240ms ease;
}

.rep-line {
  min-height: 24px;
  color: var(--teal-dark);
  font-size: 16px;
  font-weight: 900;
}

.mode-complete p {
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
}

.spell-board {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.chunk-board {
  display: grid;
  justify-items: center;
  gap: 14px;
  text-align: center;
}

.answer-slots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  min-height: 66px;
  padding: 8px;
}

.answer-slot {
  display: grid;
  place-items: center;
  width: 48px;
  height: 58px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 28px;
  font-weight: 900;
  text-transform: lowercase;
}

.answer-slot.is-fixed {
  border-style: dashed;
  background: var(--soft-blue);
  color: #496783;
  font-size: 22px;
}

.letter-bank {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  max-width: 760px;
}

.spell-input {
  width: min(430px, 100%);
  min-height: 54px;
  padding: 6px 12px;
  border: 2px solid #c9dcfa;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: 0;
  text-align: center;
  text-transform: lowercase;
}

.tile-button {
  width: 50px;
  height: 50px;
  background: var(--soft-sun);
  border: 2px solid #edd27d;
  color: #4c3a05;
  font-size: 24px;
  font-weight: 900;
  text-transform: lowercase;
  box-shadow: inset 0 -5px 0 rgba(123, 86, 0, 0.1);
}

.tile-button:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
}

.match-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.match-card {
  min-height: 94px;
  padding: 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #f9fbfd;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
  cursor: pointer;
  word-break: break-word;
}

.match-card.is-selected {
  border-color: var(--blue);
  background: var(--soft-blue);
}

.match-card.is-done {
  border-color: var(--teal);
  background: var(--soft-teal);
  color: var(--teal-dark);
  cursor: default;
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 7px;
  align-content: start;
}

.review-panel {
  grid-template-rows: auto minmax(0, 1fr);
  align-content: start;
  overflow: hidden;
}

.review-page-grid {
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  overflow-y: auto;
  padding-right: 2px;
}

.review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.review-actions button {
  min-height: 38px;
}

.review-item,
.word-row {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.review-item {
  position: relative;
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  align-items: center;
  justify-items: stretch;
  gap: 8px;
  min-height: 104px;
  padding: 8px;
}

.review-selectable {
  width: 100%;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.review-selectable.is-selected {
  border-color: var(--blue);
  background: var(--soft-blue);
  box-shadow: 0 0 0 2px rgba(61, 126, 219, 0.16);
}

.review-check {
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--blue);
  color: var(--blue);
  font-weight: 900;
}

.review-picture {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid #d7e4ec;
  border-radius: 8px;
  background: #f7fbfc;
}

.review-picture img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #fff;
}

.review-picture.is-drawing {
  border-color: #a9d6cf;
  background: #f4fbf6;
}

.review-picture.is-letter span {
  display: none;
}

.review-picture.is-letter .review-picture-tag {
  display: inline-block;
}

.review-picture.is-letter .review-letter-fallback {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--soft-blue);
  color: var(--blue);
  font-size: 22px;
  font-weight: 900;
}

.review-picture-tag {
  position: absolute;
  left: 4px;
  top: 4px;
  z-index: 1;
  padding: 1px 4px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
}

.review-compact-copy {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.review-word {
  padding-right: 18px;
  font-size: 18px;
  font-weight: 900;
  word-break: break-word;
  line-height: 1.05;
}

.review-stars {
  justify-content: start;
  gap: 2px;
  min-height: 18px;
}

.review-stars-top {
  grid-column: 1 / -1;
  padding-right: 24px;
  min-height: 20px;
}

.review-stars .star {
  font-size: 17px;
}

.review-meaning,
.review-meta {
  color: var(--muted);
}

.review-meta {
  font-size: 12px;
  font-weight: 800;
}

.review-recording {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 24px;
  padding: 0 7px;
  border: 1px solid #a9d6cf;
  border-radius: 8px;
  background: #f4fbf6;
  color: var(--teal-dark);
  font-size: 12px;
  font-weight: 900;
}

.review-recording:focus-visible {
  outline: 3px solid rgba(61, 126, 219, 0.25);
  outline-offset: 2px;
}

.field-label {
  display: block;
  margin: 14px 0 6px;
  color: #34495e;
  font-weight: 800;
}

.helper-copy {
  margin: -2px 0 8px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.text-input,
.word-input {
  width: 100%;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--ink);
}

.text-input {
  height: 44px;
  padding: 0 12px;
}

.word-input {
  min-height: 178px;
  resize: vertical;
  padding: 12px;
  line-height: 1.5;
}

.import-actions,
.file-row {
  margin-top: 10px;
}

#fileInput {
  display: none;
}

.preview-box {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft-blue);
  color: #244260;
}

.settings-section {
  margin: 4px 0 12px;
  padding: 10px 0 12px;
  border-block: 1px solid #e4ebf2;
}

.settings-section summary {
  cursor: pointer;
  color: #244260;
  font-weight: 900;
  list-style-position: outside;
}

.setting-row,
.range-field,
.select-field {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.setting-title,
.range-field span,
.select-field span {
  color: #34495e;
  font-size: 13px;
  font-weight: 800;
}

.segmented-control {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.segmented-control button {
  min-height: 34px;
  border: 1px solid #dce7ef;
  border-radius: 8px;
  background: #eef3f7;
  color: #304154;
  font-weight: 900;
  cursor: pointer;
}

.segmented-control button.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--teal), #0c7f9c);
  color: #fff;
  box-shadow: var(--soft-shadow);
}

.range-field {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

.range-field input {
  grid-column: 1 / -1;
  width: 100%;
  accent-color: var(--teal);
}

.range-field output {
  color: var(--teal-dark);
  font-weight: 900;
}

.select-field select {
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fbfdff;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.select-field select:disabled {
  opacity: 0.58;
  cursor: default;
}

.setting-inline-actions {
  display: flex;
  gap: 8px;
}

.small-setting-button {
  width: 100%;
  min-height: 36px;
  margin-top: 10px;
}

.calendar-panel {
  display: grid;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.calendar-head,
.calendar-actions,
.week-reward {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.calendar-head h3 {
  font-size: 18px;
}

.week-reward {
  padding: 10px;
  border: 1px solid #e8d89b;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff9de, #eef8f5);
}

.week-reward strong {
  display: block;
  font-size: 15px;
}

.week-reward p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.week-reward.is-ready {
  border-color: var(--sun);
  background: linear-gradient(135deg, #fff4b8, #e8f7f5);
}

.week-reward.is-claimed {
  border-color: #d8c36c;
  background: #fff8d9;
}

.week-reward .soft-button {
  min-height: 36px;
  padding: 0 10px;
  white-space: nowrap;
}

.growth-panel {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border: 1px solid #cfe4df;
  border-radius: 8px;
  background: linear-gradient(135deg, #f4fffb, #fff9df);
}

.growth-panel h3 {
  font-size: 18px;
}

.growth-panel p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.growth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.growth-actions button {
  flex: 1;
  min-width: 124px;
}

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

.calendar-weekdays span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  text-align: center;
}

.calendar-day {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 44px;
  border: 1px solid #dfe8ef;
  border-radius: 8px;
  background: #fff;
  color: #34495e;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}

.calendar-day.is-outside {
  opacity: 0.35;
}

.calendar-day.is-today {
  border-color: var(--blue);
  box-shadow: inset 0 0 0 2px rgba(61, 126, 219, 0.15);
}

.calendar-day.is-progress {
  background: var(--soft-blue);
}

.calendar-day.is-checked {
  border-color: var(--leaf);
  background: var(--soft-teal);
  color: var(--teal-dark);
}

.calendar-day.is-full-week::after {
  content: "◆";
  position: absolute;
  right: 5px;
  top: 3px;
  color: var(--sun);
  font-size: 12px;
}

.calendar-day .day-mark {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  line-height: 1;
}

.word-list-head {
  margin-top: 16px;
}

.word-list-head h3 {
  font-size: 18px;
}

.word-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.word-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 6px 10px;
  padding: 10px;
}

.word-identity {
  display: grid;
  gap: 6px;
  justify-items: center;
  align-content: start;
  min-width: 0;
}

.word-image-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 78px;
  height: 58px;
  overflow: hidden;
  padding: 3px;
  border: 2px solid #c9dcfa;
  border-radius: 8px;
  background: #fff;
  color: var(--blue);
  font-size: 28px;
  font-weight: 900;
}

.word-image-preview img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center center;
  margin: auto;
}

.word-image-preview span {
  display: none;
}

.word-image-preview.is-letter span {
  display: grid;
}

.word-row strong {
  word-break: break-word;
  align-self: center;
  text-align: center;
}

.word-row span {
  color: var(--muted);
}

.word-row.needs-meaning {
  border-color: var(--coral);
  background: var(--soft-coral);
}

.meaning-edit {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.meaning-edit span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.meaning-input {
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.needs-meaning .meaning-input {
  border-color: var(--coral);
}

.word-row .mini-stars {
  grid-column: 1 / -1;
  color: var(--sun);
  font-size: 14px;
}

.image-status {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.image-status span {
  flex-basis: 100%;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}

.tiny-button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 12px;
}

.word-row .word-extra {
  grid-column: 2;
  color: var(--teal-dark);
  font-size: 13px;
  font-weight: 800;
}

.word-row .source-extra {
  grid-column: 2;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 10;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 8px;
  background: #17202a;
  color: #fff;
  box-shadow: var(--shadow);
  transform: translate(-50%, 20px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease, transform 160ms ease;
  font-weight: 800;
}

.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

.celebration-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9;
}

.spark {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  animation: pop 780ms ease-out forwards;
}

@keyframes pop {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6) rotate(0deg);
  }
  20% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1) rotate(180deg);
  }
}

.shake {
  animation: shake 220ms ease-in-out;
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0) scale(var(--stage-fit-scale, 1));
  }
  25% {
    transform: translateX(-7px) scale(var(--stage-fit-scale, 1));
  }
  75% {
    transform: translateX(7px) scale(var(--stage-fit-scale, 1));
  }
}

.compact-only {
  display: none;
}

@media (max-width: 1080px) {
  .main-grid {
    grid-template-columns: 1fr;
  }

  .parent-panel {
    position: static;
    max-height: none;
  }

  .daily-panel {
    grid-template-columns: 1fr;
  }

  .daily-actions {
    justify-content: stretch;
  }

  .daily-actions button {
    flex: 1;
  }

  .daily-meter strong {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .app-shell {
    padding: 10px;
  }

  .cover-card {
    min-height: calc(100vh - 28px);
    padding: 28px 18px;
  }

  .cover-actions,
  .cover-button {
    width: 100%;
  }

  .topbar,
  .status-strip,
  .panel-heading,
  .word-list-head,
  .calendar-head,
  .week-reward {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar {
    gap: 12px;
  }

  .top-actions {
    width: 100%;
  }

  .top-actions .text-button {
    flex: 1;
  }

  .mode-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

  .calendar-actions,
  .week-reward .soft-button,
  .stamp-button {
    width: 100%;
  }

  .learn-panel,
  .parent-panel {
    padding: 12px;
  }

  .word-row {
    grid-template-columns: 82px minmax(0, 1fr);
  }

  .word-image-preview {
    width: 68px;
    height: 52px;
  }

  .image-candidate-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-area {
    min-height: 520px;
    padding: 12px;
  }

  .empty-state,
  .flash-card,
  .question-card,
  .review-panel,
  .match-panel {
    min-height: 494px;
  }

  .visual {
    width: 128px;
    height: 128px;
    font-size: 56px;
  }
}

/* Surface-friendly app layout */
html,
body {
  width: 100%;
  height: 100%;
  min-height: 100%;
  overflow: hidden;
}

body {
  overscroll-behavior: none;
}

.app-shell {
  height: 100dvh;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px;
  overflow: hidden;
}

.topbar {
  min-height: 70px;
  margin-bottom: 0;
  padding: 8px 12px;
}

.main-grid {
  min-height: 0;
  display: block;
  overflow: hidden;
}

.learn-panel {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  padding: 10px;
  overflow: hidden;
}

.status-strip {
  min-height: 58px;
  padding: 8px 10px;
}

#deckTitle {
  font-size: 21px;
}

.stats span {
  min-height: 28px;
  padding: 4px 8px;
  font-size: 13px;
}

.daily-panel {
  grid-template-columns: minmax(0, 1fr) minmax(140px, 220px) auto;
  min-height: 58px;
  margin: 0;
  padding: 8px 10px;
}

.daily-copy h3 {
  font-size: 18px;
}

.daily-copy p {
  font-size: 13px;
}

.meter-track {
  height: 8px;
}

.mode-tabs {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}

.mode-tab {
  min-height: 38px;
  padding: 4px 6px;
  font-size: 14px;
}

body.mode-cards .topbar,
body.mode-sound .topbar,
body.mode-meaning .topbar,
body.mode-chunks .topbar,
body.mode-final .topbar {
  min-height: 52px;
  padding: 6px 10px;
}

body.mode-cards .brand-mark,
body.mode-sound .brand-mark,
body.mode-meaning .brand-mark,
body.mode-chunks .brand-mark,
body.mode-final .brand-mark {
  width: 38px;
  height: 38px;
  font-size: 17px;
}

body.mode-cards .brand h1,
body.mode-sound .brand h1,
body.mode-meaning .brand h1,
body.mode-chunks .brand h1,
body.mode-final .brand h1 {
  font-size: 19px;
}

body.mode-cards .brand p,
body.mode-sound .brand p,
body.mode-meaning .brand p,
body.mode-chunks .brand p,
body.mode-final .brand p {
  display: none;
}

body.mode-cards .top-actions .icon-button,
body.mode-sound .top-actions .icon-button,
body.mode-meaning .top-actions .icon-button,
body.mode-chunks .top-actions .icon-button,
body.mode-final .top-actions .icon-button {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

body.mode-cards .top-actions .text-button,
body.mode-sound .top-actions .text-button,
body.mode-meaning .top-actions .text-button,
body.mode-chunks .top-actions .text-button,
body.mode-final .top-actions .text-button {
  min-height: 36px;
  padding: 0 10px;
  font-size: 13px;
}

body.mode-cards .status-strip,
body.mode-cards .daily-panel,
body.mode-sound .status-strip,
body.mode-sound .daily-panel,
body.mode-meaning .status-strip,
body.mode-meaning .daily-panel,
body.mode-chunks .status-strip,
body.mode-chunks .daily-panel,
body.mode-final .status-strip,
body.mode-final .daily-panel {
  display: none;
}

body.mode-cards .learn-panel,
body.mode-sound .learn-panel,
body.mode-meaning .learn-panel,
body.mode-chunks .learn-panel,
body.mode-final .learn-panel {
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  padding: 8px;
}

body.mode-cards .mode-tabs,
body.mode-sound .mode-tabs,
body.mode-meaning .mode-tabs,
body.mode-chunks .mode-tabs,
body.mode-final .mode-tabs {
  gap: 5px;
}

body.mode-cards .mode-tab,
body.mode-sound .mode-tab,
body.mode-meaning .mode-tab,
body.mode-chunks .mode-tab,
body.mode-final .mode-tab {
  min-height: 32px;
  padding: 3px 6px;
  font-size: 12px;
}

.game-area {
  min-height: 0;
  height: 100%;
  display: grid;
  padding: 10px;
  overflow: hidden;
}

body.mode-cards .game-area,
body.mode-sound .game-area,
body.mode-meaning .game-area,
body.mode-chunks .game-area,
body.mode-final .game-area {
  padding: 6px;
}

.empty-state,
.flash-card,
.question-card,
.review-panel,
.match-panel {
  min-height: 0;
  height: 100%;
  gap: 8px;
  overflow: hidden;
}

.flash-card,
.question-card,
.spell-board,
.chunk-board {
  align-content: center;
}

body.mode-cards .flash-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 5px;
}

body.mode-cards .card-main {
  gap: 4px;
}

body.mode-cards .flash-card .mode-progress,
body.mode-meaning .question-card .mode-progress {
  gap: 3px;
  padding: 4px 8px;
}

body.mode-cards .flash-card .mode-progress-head,
body.mode-meaning .question-card .mode-progress-head {
  font-size: 12px;
  line-height: 1.1;
}

body.mode-cards .flash-card .mini-meter,
body.mode-meaning .question-card .mini-meter {
  height: 5px;
}

body.mode-cards .flash-card .meaning-picture.is-card {
  width: clamp(100px, 15dvh, 150px);
  height: clamp(70px, 10.5dvh, 102px);
  padding: 4px;
}

body.mode-cards .flash-card .stars {
  min-height: 20px;
  gap: 3px;
}

body.mode-cards .flash-card .star {
  font-size: 17px;
}

body.mode-cards .flash-card .word-big {
  font-size: clamp(28px, 5.2dvh, 48px);
  line-height: 0.98;
}

body.mode-cards .flash-card .meaning-big {
  font-size: clamp(14px, 2.3dvh, 20px);
  line-height: 1.16;
}

body.mode-cards .flash-card .phonetic-line,
body.mode-cards .flash-card .lookup-note,
body.mode-cards .flash-card .example {
  display: none;
}

body.mode-cards .flash-card .phonics-guide {
  gap: 2px;
  padding: 3px 5px;
}

body.mode-cards .flash-card .phonics-title {
  font-size: clamp(11px, 1.8dvh, 13px);
  line-height: 1.1;
}

body.mode-cards .flash-card .phonics-row {
  gap: 4px;
}

body.mode-cards .flash-card .phonics-chip {
  min-width: 34px;
  min-height: 26px;
  padding: 2px 5px;
}

body.mode-cards .flash-card .phonics-chip strong {
  font-size: clamp(13px, 2.3dvh, 17px);
}

body.mode-cards .flash-card .phrase-note {
  display: none;
}

body.mode-cards .flash-card .rep-line {
  min-height: 18px;
  font-size: 12px;
  line-height: 1.1;
}

body.mode-cards .flash-card .card-actions {
  gap: 4px;
  padding: 3px;
}

body.mode-cards .flash-card .card-actions button {
  min-height: 32px;
  padding: 0 8px;
  font-size: 13px;
}

body.mode-cards .flash-card .big-round,
body.mode-cards .flash-card .next-button {
  min-width: 42px;
}

body.mode-cards .flash-card .card-tool-button {
  min-width: 58px;
}

.visual {
  width: clamp(74px, 12vh, 116px);
  height: clamp(74px, 12vh, 116px);
  font-size: clamp(34px, 6vh, 54px);
}

.empty-state .visual {
  width: clamp(76px, 12vh, 112px);
  height: clamp(76px, 12vh, 112px);
}

.word-big {
  font-size: clamp(42px, 9vh, 78px);
}

.meaning-big {
  font-size: clamp(21px, 3.6vh, 30px);
}

.phonetic-line {
  min-height: 22px;
  font-size: 17px;
}

.example {
  font-size: 16px;
  line-height: 1.3;
}

.phonics-chip,
.chunk-button,
.phonics-slot {
  min-width: 46px;
  min-height: 38px;
  padding: 5px 9px;
  font-size: 20px;
}

.big-round,
.next-button {
  min-width: 66px;
  min-height: 44px;
  font-size: 19px;
}

.question-top {
  gap: 8px;
  padding: 2px 0;
}

.question-prompt {
  font-size: clamp(32px, 7vh, 58px);
}

.choices {
  gap: 8px;
  margin-top: 4px;
}

.choice-button {
  min-height: clamp(72px, 14vh, 104px);
  padding: 10px;
  font-size: clamp(22px, 5vh, 34px);
}

.answer-slots {
  min-height: 48px;
  padding: 2px;
  gap: 6px;
}

.answer-slot,
.tile-button {
  width: clamp(38px, 6vh, 50px);
  height: clamp(42px, 7vh, 54px);
  font-size: clamp(22px, 4.2vh, 28px);
}

.spell-controls,
.card-actions {
  gap: 7px;
}

.feedback {
  min-height: 24px;
  font-size: 17px;
}

.mode-progress {
  padding: 7px 10px;
}

.mode-progress-head,
.rep-line {
  font-size: 13px;
}

.mini-meter {
  height: 6px;
}

.parent-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 42;
  width: min(440px, 100vw);
  max-height: none;
  padding: 16px;
  overflow: auto;
  border-radius: 0;
  transform: translateX(105%);
  transition: transform 180ms ease;
}

.drawer-open .parent-panel {
  transform: translateX(0);
}

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 41;
  background: rgba(23, 32, 42, 0.28);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.drawer-open .drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

.word-input {
  min-height: 132px;
}

.word-list {
  max-height: 180px;
  overflow: auto;
}

.profile-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
  width: min(620px, 100%);
}

.profile-choice {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 8px;
  min-height: 82px;
  padding: 12px 16px;
  border: 2px solid #d8e1ea;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  box-shadow: var(--soft-shadow);
}

.profile-choice strong {
  display: block;
  font-size: clamp(22px, 4vw, 32px);
}

.choice-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.choice-copy span {
  color: var(--muted);
  font-weight: 800;
}

.choice-arrow {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 8px;
  background: var(--soft-sun);
  color: #7b5600;
  font-size: 28px;
  font-weight: 900;
}

.handwriting-panel {
  display: grid;
  grid-template-columns: minmax(300px, 380px) auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

#handwritingCanvas {
  width: min(380px, 100%);
  height: 176px;
  border: 2px solid #c9dcfa;
  border-radius: 8px;
  background: #fffdf6;
  touch-action: none;
}

.handwriting-actions,
.camera-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

.camera-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(23, 32, 42, 0.42);
}

.camera-modal.is-open {
  display: grid;
}

.reward-modal,
.growth-modal,
.calendar-modal,
.image-picker-modal,
.drawing-modal {
  position: fixed;
  inset: 0;
  z-index: 52;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(23, 32, 42, 0.46);
}

.reward-modal.is-open,
.growth-modal.is-open,
.calendar-modal.is-open,
.image-picker-modal.is-open,
.drawing-modal.is-open {
  display: grid;
}

.photo-preview {
  position: fixed;
  inset: 0;
  z-index: 56;
  display: none;
  place-items: center;
  padding: 18px;
  background: rgba(23, 32, 42, 0.58);
}

.photo-preview.is-open {
  display: grid;
}

.photo-preview-card {
  position: relative;
  display: grid;
  place-items: center;
  max-width: min(92vw, 920px);
  max-height: 88vh;
}

.photo-preview-card img {
  max-width: 100%;
  max-height: 88vh;
  border: 6px solid #fff;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  object-fit: contain;
}

.photo-preview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border-color: rgba(255, 255, 255, 0.82);
  background: rgba(255, 255, 255, 0.92);
}

.camera-card {
  display: grid;
  gap: 12px;
  width: min(620px, 100%);
  padding: 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}

#cameraVideo,
#cameraCanvas {
  width: 100%;
  max-height: 56vh;
  border-radius: 8px;
  background: #17202a;
  object-fit: cover;
}

.reward-card,
.growth-card,
.calendar-card,
.image-picker-card,
.drawing-card {
  width: min(620px, 100%);
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.image-picker-card {
  width: min(860px, 100%);
  max-height: min(720px, calc(100dvh - 36px));
  display: grid;
  gap: 10px;
  overflow: hidden;
}

.drawing-card {
  width: min(840px, 100%);
  max-height: calc(100dvh - 36px);
  display: grid;
  gap: 12px;
  overflow: auto;
}

#drawingCanvas {
  width: 100%;
  aspect-ratio: 3 / 2;
  max-height: min(54dvh, 480px);
  border: 2px solid #c9dcfa;
  border-radius: 8px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(61, 126, 219, 0.08);
  cursor: crosshair;
  touch-action: none;
}

#drawingCanvas.is-locked {
  cursor: not-allowed;
  opacity: 0.88;
}

.drawing-timer {
  display: inline-grid;
  place-items: center;
  min-width: 74px;
  min-height: 36px;
  padding: 0 12px;
  border: 2px solid #bfe4df;
  border-radius: 8px;
  background: var(--soft-teal);
  color: var(--teal-dark);
  font-weight: 900;
}

.drawing-timer.is-low {
  border-color: #f5c1ba;
  background: var(--soft-coral);
  color: #b63c35;
}

.drawing-timer.is-done {
  border-color: #d8e1ea;
  background: #eef3f7;
  color: var(--muted);
}

.drawing-tools,
.drawing-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.drawing-tools {
  justify-content: space-between;
}

.drawing-colors {
  display: flex;
  align-items: center;
  gap: 8px;
}

.drawing-colors button {
  width: 38px;
  height: 38px;
  border: 3px solid #fff;
  border-radius: 8px;
  background: var(--swatch, #17202a);
  box-shadow: 0 0 0 1px #cbd8e4, var(--soft-shadow);
  cursor: pointer;
}

.drawing-colors button.is-active {
  box-shadow: 0 0 0 3px rgba(16, 143, 143, 0.3), var(--soft-shadow);
}

.eraser-button.is-active {
  background: var(--soft-teal);
  color: var(--teal-dark);
  box-shadow: 0 0 0 3px rgba(16, 143, 143, 0.18);
}

.eraser-button {
  min-width: 48px;
  padding: 0 12px;
}

.eraser-icon {
  position: relative;
  display: inline-block;
  width: 26px;
  height: 18px;
  transform: rotate(-18deg);
}

.eraser-icon::before {
  content: "";
  position: absolute;
  inset: 2px 5px 2px 0;
  border: 2px solid #304154;
  border-right: 0;
  border-radius: 5px 0 0 5px;
  background: #f7b8c8;
}

.eraser-icon::after {
  content: "";
  position: absolute;
  right: 0;
  top: 2px;
  width: 10px;
  height: 14px;
  border: 2px solid #304154;
  border-left: 0;
  border-radius: 0 5px 5px 0;
  background: #fff;
}

.brush-size {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-weight: 900;
}

.brush-size input {
  width: 150px;
}

.drawing-actions {
  justify-content: flex-end;
}

.image-candidate-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  overflow: auto;
  padding: 2px 2px 8px;
}

.image-candidate {
  display: grid;
  gap: 6px;
  padding: 8px;
  border: 2px solid #d8e1ea;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  font-weight: 900;
}

.image-candidate img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  border-radius: 6px;
  background: #f6f9fc;
}

.image-candidate span {
  color: var(--muted);
  font-size: 12px;
}

.image-candidate:hover,
.image-candidate:focus-visible {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(16, 143, 143, 0.14);
}

.image-candidate:disabled {
  cursor: wait;
  opacity: 0.72;
}

.image-candidate.is-broken {
  min-height: 120px;
  border-style: dashed;
  color: var(--muted);
}

.image-candidate.is-broken::before {
  content: "加载失败";
  display: grid;
  place-items: center;
  min-height: 82px;
  border-radius: 6px;
  background: var(--soft-blue);
}

.image-picker-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 180px;
  border: 2px dashed #c9dcfa;
  border-radius: 8px;
  background: #f9fcff;
  color: var(--muted);
  font-weight: 900;
  text-align: center;
}

.reward-card {
  display: grid;
  gap: 10px;
  text-align: center;
  border-top: 6px solid var(--sun);
}

.reward-card h2 {
  font-size: clamp(24px, 4vw, 34px);
}

.reward-card p {
  color: var(--muted);
  font-weight: 800;
}

.sticker-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-top: 4px;
}

.sticker-button {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 118px;
  padding: 12px 8px;
  border: 2px solid #d8e1ea;
  border-radius: 8px;
  background: #f9fcff;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  font-weight: 900;
  box-shadow: var(--soft-shadow);
}

.sticker-button:hover,
.sticker-button:focus-visible {
  border-color: var(--teal);
  background: var(--soft-teal);
  transform: translateY(-1px);
}

.sticker-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 8px;
  background: var(--sticker-bg, #fff7db);
  color: var(--sticker-color, #8a6400);
  font-size: 34px;
  line-height: 1;
}

.growth-card {
  width: min(920px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
}

.calendar-card {
  width: min(520px, calc(100vw - 28px));
  max-height: calc(100dvh - 32px);
  display: grid;
  gap: 10px;
  overflow: auto;
}

.calendar-card .calendar-head p {
  margin-top: 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.growth-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
  min-height: 0;
  overflow: auto;
  padding: 2px 4px 2px 0;
}

.growth-item {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--soft-shadow);
}

.growth-photo {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: linear-gradient(135deg, #eaf3ff, #fff7db);
  color: inherit;
  font: inherit;
  text-align: inherit;
}

.growth-photo.is-clickable {
  cursor: zoom-in;
}

.growth-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.18s ease;
}

.growth-photo.is-clickable:hover img {
  transform: scale(1.02);
}

.growth-photo-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  width: 100%;
  height: 100%;
  color: #244260;
  font-weight: 900;
}

.growth-photo-placeholder span {
  font-size: 44px;
}

.growth-photo-placeholder em {
  font-style: normal;
  color: var(--muted);
}

.growth-sticker {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: var(--sticker-bg, #fff7db);
  color: var(--sticker-color, #8a6400);
  font-size: 28px;
  box-shadow: 0 8px 18px rgba(31, 48, 66, 0.18);
}

.wall-danger-zone {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.wall-danger-zone summary {
  cursor: pointer;
  list-style: none;
  text-align: right;
}

.wall-danger-zone summary::-webkit-details-marker {
  display: none;
}

.wall-danger-zone[open] {
  display: grid;
  justify-items: end;
  gap: 8px;
  padding-top: 4px;
}

.wall-danger-zone .danger-button {
  min-height: 34px;
  padding: 0 10px;
  font-size: 12px;
}

.growth-meta {
  display: grid;
  gap: 3px;
  padding: 10px;
}

.growth-meta strong {
  font-size: 18px;
}

.growth-meta span,
.growth-meta small {
  min-width: 0;
  overflow: hidden;
  color: var(--muted);
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.growth-meta small {
  color: var(--teal-dark);
  font-size: 12px;
}

.growth-empty {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  min-height: 260px;
  padding: 20px;
  border: 2px dashed #cfe4df;
  border-radius: 8px;
  background: #f7fffb;
  text-align: center;
}

.growth-empty strong {
  font-size: 22px;
}

.growth-empty span {
  color: var(--muted);
  font-weight: 800;
}

@media (max-height: 660px) {
  .topbar {
    min-height: 60px;
  }

  .brand-mark {
    width: 44px;
    height: 44px;
  }

  .daily-panel {
    min-height: 48px;
  }

  .daily-copy p,
  .phonetic-line,
  .lookup-note,
  .example {
    display: none;
  }

  .mode-tab {
    min-height: 34px;
  }

  #handwritingCanvas {
    height: 92px;
  }

  .reward-card {
    gap: 8px;
    padding: 12px;
  }

  .sticker-button {
    min-height: 92px;
  }

  .sticker-icon {
    width: 46px;
    height: 46px;
    font-size: 28px;
  }
}

@media (max-width: 760px) {
  .profile-chooser {
    grid-template-columns: 1fr;
  }

  .daily-panel {
    grid-template-columns: 1fr;
  }

  .mode-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .handwriting-panel {
    grid-template-columns: 1fr;
  }

  .sticker-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

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

body.surface-compact .app-shell {
  gap: 6px;
  padding: 6px;
}

body.surface-compact .cover-screen {
  padding: 8px;
}

body.surface-compact .cover-card {
  width: min(680px, 100%);
  height: calc(100dvh - 16px);
  min-height: 0;
  gap: 6px;
  align-content: center;
  padding: 12px;
}

body.surface-compact .cover-card::before,
body.surface-compact .cover-card::after {
  display: none;
}

body.surface-compact .cover-card h1 {
  font-size: clamp(26px, 5vw, 42px);
}

body.surface-compact .cover-card p {
  font-size: 14px;
}

body.surface-compact .cover-people {
  width: min(230px, 54vw);
  height: auto;
}

body.surface-compact .profile-chooser {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  width: min(520px, 100%);
}

body.surface-compact .profile-choice {
  min-height: 58px;
  padding: 8px 10px;
}

body.surface-compact .profile-choice strong {
  font-size: 22px;
}

body.surface-compact .choice-copy span {
  font-size: 12px;
}

body.surface-compact .choice-arrow {
  width: 34px;
  height: 34px;
  font-size: 22px;
}

body.surface-compact .topbar {
  min-height: 50px;
  gap: 8px;
  padding: 6px 8px;
}

body.surface-compact .brand {
  gap: 8px;
}

body.surface-compact .brand-mark {
  width: 38px;
  height: 38px;
  font-size: 17px;
}

body.surface-compact .brand h1 {
  font-size: 18px;
}

body.surface-compact .brand p {
  display: none;
}

body.surface-compact .top-actions {
  gap: 5px;
}

body.surface-compact .top-actions .icon-button {
  width: 36px;
  height: 36px;
  font-size: 18px;
}

body.surface-compact .top-actions .text-button {
  min-height: 36px;
  padding: 0 8px;
  font-size: 13px;
}

body.surface-compact .learn-panel {
  gap: 6px;
  padding: 6px;
}

body.surface-compact .status-strip {
  min-height: 42px;
  padding: 5px 8px;
}

body.surface-compact #deckTitle {
  font-size: 17px;
}

body.surface-compact .eyebrow {
  font-size: 10px;
}

body.surface-compact .stats {
  gap: 5px;
}

body.surface-compact .stats span {
  min-height: 24px;
  padding: 2px 6px;
  font-size: 12px;
}

body.surface-compact .daily-panel {
  grid-template-columns: minmax(0, 1fr) minmax(90px, 140px) minmax(190px, auto);
  min-height: 42px;
  gap: 8px;
  padding: 5px 8px;
}

body.surface-compact .daily-copy h3 {
  font-size: 16px;
}

body.surface-compact .daily-copy p {
  display: none;
}

body.surface-compact .daily-meter {
  gap: 4px;
}

body.surface-compact .daily-meter strong {
  font-size: 12px;
}

body.surface-compact .stamp-button {
  min-width: 82px;
  min-height: 34px;
  padding: 0 8px;
  font-size: 13px;
}

body.surface-compact .daily-actions {
  gap: 4px;
}

body.surface-compact .daily-actions .soft-button,
body.surface-compact .daily-actions .primary-button {
  min-height: 32px;
  padding: 0 7px;
  font-size: 12px;
}

body.surface-compact .mode-tabs {
  gap: 4px;
}

body.surface-compact .mode-tab {
  min-height: 32px;
  padding: 3px 4px;
  font-size: 12px;
}

body.surface-compact.mode-cards .status-strip,
body.surface-compact.mode-cards .daily-panel {
  display: none;
}

body.surface-compact.mode-cards .learn-panel {
  grid-template-rows: auto minmax(0, 1fr);
}

body.surface-compact .game-area {
  padding: 4px;
  overflow: auto;
  overflow-x: hidden;
}

body.surface-compact.mode-cards .game-area {
  padding: 3px;
  overflow: hidden;
}

body.surface-compact .empty-state,
body.surface-compact .flash-card,
body.surface-compact .question-card,
body.surface-compact .review-panel,
body.surface-compact .match-panel {
  min-height: 100%;
  height: auto;
  gap: 6px;
  overflow: visible;
}

body.surface-compact .flash-card,
body.surface-compact .question-card,
body.surface-compact .spell-board,
body.surface-compact .chunk-board {
  align-content: start;
}

body.surface-compact .visual {
  width: clamp(58px, 11dvh, 84px);
  height: clamp(58px, 11dvh, 84px);
  font-size: clamp(28px, 5dvh, 40px);
}

body.surface-compact .meaning-picture.is-card {
  width: clamp(104px, 20dvh, 148px);
  height: clamp(72px, 14dvh, 100px);
  padding: 5px;
}

body.surface-compact .meaning-picture.is-question {
  width: clamp(108px, 21dvh, 148px);
  height: clamp(78px, 15dvh, 106px);
  padding: 5px;
}

body.surface-compact .meaning-picture span {
  font-size: clamp(30px, 6dvh, 42px);
}

body.surface-compact .card-image-step {
  gap: 3px;
  padding: 4px 6px;
  font-size: 11px;
}

body.surface-compact .card-image-step > span {
  display: none;
}

body.surface-compact .image-picker-card {
  width: min(760px, calc(100vw - 22px));
  max-height: calc(100dvh - 22px);
  padding: 12px;
}

body.surface-compact .drawing-card {
  width: min(760px, calc(100vw - 18px));
  max-height: calc(100dvh - 18px);
  padding: 10px;
  gap: 8px;
}

body.surface-compact #drawingCanvas {
  max-height: min(46dvh, 300px);
}

body.surface-compact .drawing-tools,
body.surface-compact .drawing-actions {
  gap: 6px;
}

body.surface-compact .drawing-colors {
  gap: 6px;
}

body.surface-compact .drawing-colors button {
  width: 30px;
  height: 30px;
}

body.surface-compact .drawing-timer {
  min-width: 62px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 13px;
}

body.surface-compact .brush-size input {
  width: 112px;
}

body.surface-compact .drawing-actions .primary-button,
body.surface-compact .drawing-actions .soft-button,
body.surface-compact .drawing-actions .danger-button {
  min-height: 34px;
  padding: 0 9px;
  font-size: 13px;
}

body.surface-compact .image-candidate-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

body.surface-compact .image-candidate {
  padding: 6px;
}

body.surface-compact .image-candidate span {
  font-size: 11px;
}

body.surface-compact .word-big {
  font-size: clamp(30px, 7dvh, 48px);
}

body.surface-compact .meaning-big {
  font-size: clamp(15px, 3dvh, 21px);
}

body.surface-compact .meaning-small,
body.surface-compact .meaning-smaller,
body.surface-compact .meaning-tiny {
  font-size: clamp(15px, 3dvh, 21px);
}

body.surface-compact .phonetic-line,
body.surface-compact .lookup-note,
body.surface-compact .example {
  display: none;
}

body.surface-compact .phonics-row,
body.surface-compact .phonics-slots,
body.surface-compact .chunk-bank {
  gap: 5px;
}

body.surface-compact .phonics-guide {
  gap: 4px;
  padding: 4px 6px;
}

body.surface-compact .phonics-title {
  font-size: 12px;
}

body.surface-compact .phonics-chip,
body.surface-compact .chunk-button,
body.surface-compact .phonics-slot {
  min-width: 36px;
  min-height: 28px;
  padding: 3px 6px;
  font-size: 15px;
}

body.surface-compact .phonics-slot.is-space {
  min-width: 30px;
}

body.surface-compact .phonics-slot.is-space::before {
  font-size: 10px;
}

body.surface-compact .phonics-chip strong {
  font-size: 15px;
}

body.surface-compact .phonics-chip span {
  display: none;
}

body.surface-compact .phrase-gap,
body.surface-compact .phrase-note {
  font-size: 11px;
}

body.surface-compact .big-round,
body.surface-compact .next-button {
  min-width: 42px;
  min-height: 30px;
  padding: 0 8px;
  font-size: 14px;
}

body.surface-compact .card-actions {
  position: sticky;
  top: 0;
  z-index: 12;
  width: 100%;
  justify-content: center;
  padding: 5px;
  border: 1px solid #d8e1ea;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px rgba(31, 48, 66, 0.08);
}

body.surface-compact.mode-cards .card-actions {
  position: static;
  top: auto;
  z-index: 1;
  box-shadow: none;
}

body.surface-compact .flash-card .card-actions {
  gap: 3px;
  padding: 3px;
}

body.surface-compact .flash-card .card-actions button {
  min-height: 28px;
  padding: 0 6px;
  font-size: 12px;
}

body.surface-compact .flash-card {
  padding-bottom: 0;
}

body.surface-compact.mode-cards .flash-card {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  align-content: stretch;
  gap: 3px;
  overflow: hidden;
}

body.surface-compact.mode-cards .card-main {
  gap: 2px;
  align-content: center;
  overflow: hidden;
}

body.surface-compact .card-actions,
body.surface-compact .spell-controls,
body.surface-compact .handwriting-actions {
  gap: 5px;
}

body.surface-compact .card-actions button,
body.surface-compact .spell-controls button,
body.surface-compact .handwriting-actions button {
  min-height: 30px;
  padding: 0 7px;
  font-size: 13px;
}

body.surface-compact .card-tool-button {
  min-width: 54px;
}

body.surface-compact .draw-button.is-used {
  min-width: 58px;
}

body.surface-compact .spell-check-button {
  min-width: 64px;
}

body.surface-compact .question-top {
  gap: 5px;
  padding: 0;
}

body.surface-compact .question-label,
body.surface-compact .rep-line,
body.surface-compact .mode-progress-head {
  font-size: 12px;
}

body.surface-compact .question-prompt {
  font-size: clamp(24px, 6dvh, 42px);
}

body.surface-compact .meaning-prompt.meaning-small,
body.surface-compact .meaning-prompt.meaning-smaller,
body.surface-compact .meaning-prompt.meaning-tiny {
  font-size: clamp(17px, 4dvh, 28px);
}

body.surface-compact .choices {
  gap: 6px;
  margin-top: 2px;
}

body.surface-compact .choice-button {
  min-height: clamp(54px, 12dvh, 76px);
  padding: 7px;
  font-size: clamp(18px, 4.3dvh, 28px);
}

body.surface-compact .feedback {
  min-height: 20px;
  font-size: 14px;
}

body.surface-compact .read-once {
  width: min(360px, 100%);
  gap: 8px;
  padding: 7px 9px;
}

body.surface-compact .read-once-actions {
  gap: 6px;
}

body.surface-compact .read-once-label {
  font-size: 12px;
}

body.surface-compact .read-once strong {
  font-size: clamp(17px, 3.6dvh, 24px);
}

body.surface-compact .read-once em {
  font-size: 12px;
}

body.surface-compact .read-once-button {
  min-width: 92px;
  min-height: 40px;
  padding: 0 10px;
  font-size: 13px;
}

body.surface-compact .read-speak-button {
  min-width: 44px;
  min-height: 38px;
  padding: 0 8px;
  font-size: 17px;
}

body.surface-compact .read-playback-button {
  min-width: 76px;
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
}

body.surface-compact .mode-progress {
  gap: 4px;
  padding: 5px 8px;
}

body.surface-compact .mini-meter {
  height: 5px;
}

body.surface-compact .flash-card {
  gap: 4px;
}

body.surface-compact .flash-card .mode-progress {
  gap: 2px;
  padding: 3px 6px;
}

body.surface-compact.mode-cards .flash-card .mode-progress {
  padding: 2px 6px;
}

body.surface-compact .flash-card .mode-progress-head {
  font-size: 11px;
  line-height: 1.1;
}

body.surface-compact.mode-cards .flash-card .mode-progress-head {
  display: none;
}

body.surface-compact .flash-card .mini-meter {
  height: 4px;
}

body.surface-compact .flash-card .meaning-picture.is-card {
  width: clamp(88px, 16dvh, 124px);
  height: clamp(58px, 11dvh, 82px);
  padding: 3px;
}

body.surface-compact.mode-cards .flash-card .meaning-picture.is-card {
  width: clamp(76px, 13dvh, 110px);
  height: clamp(48px, 8dvh, 68px);
  padding: 2px;
}

body.surface-compact .flash-card .stars {
  min-height: 18px;
  gap: 3px;
}

body.surface-compact .flash-card .star {
  font-size: 16px;
}

body.surface-compact .flash-card .word-big {
  font-size: clamp(26px, 5.8dvh, 40px);
  line-height: 0.96;
}

body.surface-compact.mode-cards .flash-card .word-big {
  font-size: clamp(24px, 5.2dvh, 36px);
  line-height: 0.94;
}

body.surface-compact .flash-card .meaning-big {
  font-size: clamp(13px, 2.4dvh, 18px);
  line-height: 1.15;
}

body.surface-compact.mode-cards .flash-card .meaning-big {
  font-size: clamp(12px, 2.1dvh, 16px);
  line-height: 1.12;
}

body.surface-compact .flash-card .phonics-guide {
  gap: 2px;
  padding: 3px 5px;
}

body.surface-compact.mode-cards .flash-card .phonics-guide {
  gap: 1px;
  padding: 2px 4px;
}

body.surface-compact .flash-card .phonics-title {
  font-size: 11px;
  line-height: 1.15;
}

body.surface-compact .flash-card .phonics-chip {
  min-width: 32px;
  min-height: 24px;
  padding: 2px 5px;
}

body.surface-compact.mode-cards .flash-card .phonics-chip {
  min-width: 28px;
  min-height: 22px;
  padding: 1px 4px;
}

body.surface-compact .flash-card .phonics-chip strong {
  font-size: 13px;
}

body.surface-compact .flash-card .phrase-gap,
body.surface-compact .flash-card .phrase-note,
body.surface-compact .flash-card .rep-line {
  font-size: 11px;
  line-height: 1.15;
}

body.surface-compact.mode-cards .flash-card .phrase-note {
  display: none;
}

body.surface-compact .spell-board,
body.surface-compact .chunk-board {
  gap: 6px;
}

body.surface-compact .spell-board.is-handwriting {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  align-items: center;
}

body.surface-compact .spell-board.is-handwriting .mode-progress,
body.surface-compact .spell-board.is-handwriting .spell-controls,
body.surface-compact .spell-board.is-handwriting .feedback {
  grid-column: 1 / -1;
}

body.surface-compact .spell-board.is-handwriting .question-top,
body.surface-compact .spell-board.is-handwriting .answer-slots,
body.surface-compact .spell-board.is-handwriting .spell-input {
  grid-column: 1;
}

body.surface-compact .spell-board.is-handwriting .handwriting-panel {
  grid-column: 2;
  grid-row: 2 / span 3;
  grid-template-columns: 1fr;
}

body.surface-compact .answer-slots {
  min-height: 38px;
  gap: 4px;
  padding: 0;
}

body.surface-compact .answer-slot {
  width: clamp(30px, 5dvh, 38px);
  height: clamp(34px, 6dvh, 42px);
  font-size: clamp(19px, 3.8dvh, 25px);
}

body.surface-compact .letter-bank {
  gap: 5px;
  max-width: 680px;
}

body.surface-compact .tile-button {
  width: clamp(32px, 5.8dvh, 42px);
  height: clamp(32px, 5.8dvh, 42px);
  font-size: clamp(18px, 3.6dvh, 23px);
}

body.surface-compact .spell-input {
  width: min(340px, 100%);
  min-height: 40px;
  padding: 4px 8px;
  font-size: 23px;
}

body.surface-compact .handwriting-panel {
  grid-template-columns: minmax(260px, 340px) auto;
  gap: 8px;
}

body.surface-compact #handwritingCanvas {
  width: min(340px, 100%);
  height: 148px;
}

@media (max-width: 760px) {
  body.surface-compact .spell-board.is-handwriting {
    grid-template-columns: 1fr;
  }

  body.surface-compact .spell-board.is-handwriting .question-top,
  body.surface-compact .spell-board.is-handwriting .answer-slots,
  body.surface-compact .spell-board.is-handwriting .spell-input,
  body.surface-compact .spell-board.is-handwriting .handwriting-panel,
  body.surface-compact .spell-board.is-handwriting .mode-progress,
  body.surface-compact .spell-board.is-handwriting .spell-controls,
  body.surface-compact .spell-board.is-handwriting .feedback {
    grid-column: 1;
    grid-row: auto;
  }
}

body.surface-compact .sticker-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

body.surface-compact .sticker-button {
  min-height: 86px;
  padding: 8px 5px;
  font-size: 12px;
}

body.surface-compact .sticker-icon {
  width: 42px;
  height: 42px;
  font-size: 26px;
}

@media (max-height: 560px) {
  body.surface-compact .status-strip {
    display: none;
  }

  body.surface-compact .daily-panel {
    min-height: 36px;
  }

  body.surface-compact #handwritingCanvas {
    height: 126px;
  }
}

/* Final card-priority overrides: keep the word readable before anything else. */
body.mode-cards .flash-card .card-main,
body.surface-compact.mode-cards .flash-card .card-main {
  grid-auto-rows: min-content;
  align-content: center;
  gap: clamp(6px, 1.1dvh, 10px);
  overflow: visible;
}

body.mode-cards .flash-card .word-big,
body.surface-compact.mode-cards .flash-card .word-big {
  position: relative;
  z-index: 2;
  margin: 2px 0 4px;
  font-size: clamp(42px, 6.8dvh, 76px);
  line-height: 1.08;
}

body.mode-cards .flash-card .phonics-guide,
body.surface-compact.mode-cards .flash-card .phonics-guide {
  position: relative;
  z-index: 1;
  width: min(760px, 96%);
  margin-top: 6px;
  gap: 4px;
  padding: 5px 7px;
}

body.mode-cards .flash-card .phonics-title,
body.surface-compact.mode-cards .flash-card .phonics-title {
  font-size: clamp(12px, 1.8dvh, 15px);
  line-height: 1.25;
}

body.mode-cards .flash-card .phonics-row,
body.surface-compact.mode-cards .flash-card .phonics-row {
  gap: 5px;
}

body.mode-cards .flash-card .phonics-chip,
body.surface-compact.mode-cards .flash-card .phonics-chip {
  min-width: 38px;
  min-height: 28px;
  padding: 3px 7px;
}

body.mode-cards .flash-card .phonics-chip strong,
body.surface-compact.mode-cards .flash-card .phonics-chip strong {
  font-size: clamp(15px, 2.4dvh, 20px);
}

body.mode-cards .flash-card .meaning-big,
body.surface-compact.mode-cards .flash-card .meaning-big {
  font-size: clamp(16px, 2.4dvh, 22px);
  line-height: 1.2;
}

body.mode-cards .flash-card .meaning-picture.is-card,
body.surface-compact.mode-cards .flash-card .meaning-picture.is-card {
  width: clamp(76px, 11dvh, 126px);
  height: clamp(52px, 7.8dvh, 86px);
}

body.mode-cards .flash-card .stars,
body.surface-compact.mode-cards .flash-card .stars {
  min-height: 16px;
}

body.mode-cards .flash-card .star,
body.surface-compact.mode-cards .flash-card .star {
  font-size: 15px;
}

@media (max-height: 760px) {
  body.mode-cards .flash-card .meaning-picture.is-card,
  body.surface-compact.mode-cards .flash-card .meaning-picture.is-card,
  body.mode-cards .flash-card .stars,
  body.surface-compact.mode-cards .flash-card .stars {
    display: none;
  }

  body.mode-cards .flash-card .word-big,
  body.surface-compact.mode-cards .flash-card .word-big {
    font-size: clamp(44px, 8dvh, 70px);
  }
}

/* Final button-size tuning for kid touch targets without letting choices fill the whole screen. */
body.mode-cards .flash-card .card-actions,
body.surface-compact.mode-cards .flash-card .card-actions {
  gap: 6px;
  padding: 4px;
}

body.mode-cards .flash-card .card-actions button,
body.surface-compact.mode-cards .flash-card .card-actions button {
  min-height: 40px;
  padding: 0 11px;
  font-size: 15px;
}

body.mode-cards .flash-card .big-round,
body.surface-compact.mode-cards .flash-card .big-round {
  min-width: 52px;
}

body.mode-cards .flash-card .next-button,
body.surface-compact.mode-cards .flash-card .next-button {
  min-width: 82px;
}

body.mode-cards .flash-card .card-tool-button,
body.surface-compact.mode-cards .flash-card .card-tool-button {
  min-width: 76px;
}

body.mode-sound .choices,
body.mode-meaning .choices,
body.surface-compact.mode-sound .choices,
body.surface-compact.mode-meaning .choices {
  align-self: center;
  justify-self: center;
  width: min(100%, 820px);
  gap: clamp(6px, 1dvh, 10px);
  margin-top: 0;
}

body.mode-meaning .question-card,
body.surface-compact.mode-meaning .question-card {
  grid-template-rows: auto auto auto auto;
  align-content: center;
}

body.mode-sound .choice-button,
body.surface-compact.mode-sound .choice-button {
  min-height: clamp(48px, 8dvh, 72px);
  padding: 7px 10px;
  font-size: clamp(17px, 3dvh, 24px);
  line-height: 1.08;
}

body.mode-meaning .choice-button,
body.surface-compact.mode-meaning .choice-button {
  min-height: clamp(44px, 7.2dvh, 64px);
  padding: 6px 9px;
  font-size: clamp(16px, 2.7dvh, 22px);
  line-height: 1.08;
}

@media (max-height: 760px) {
  body.mode-cards .flash-card .card-actions button,
  body.surface-compact.mode-cards .flash-card .card-actions button {
    min-height: 36px;
    padding: 0 9px;
    font-size: 14px;
  }

  body.mode-sound .choice-button,
  body.surface-compact.mode-sound .choice-button {
    min-height: clamp(42px, 7dvh, 58px);
    font-size: clamp(15px, 2.8dvh, 21px);
  }

  body.mode-meaning .choice-button,
  body.surface-compact.mode-meaning .choice-button {
    min-height: clamp(38px, 6.2dvh, 54px);
    font-size: clamp(14px, 2.5dvh, 19px);
  }
}

/* Meaning-choice layout: keep the word picture near the clue instead of pinned to the right edge. */
body.mode-meaning .question-top,
body.surface-compact.mode-meaning .question-top {
  justify-self: center;
  width: min(100%, 780px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "label rep"
    "picture prompt";
  align-items: center;
  justify-content: center;
  column-gap: clamp(12px, 2.2vw, 24px);
  row-gap: 6px;
  padding: 2px 0 4px;
}

body.mode-meaning .question-label,
body.surface-compact.mode-meaning .question-label {
  justify-self: start;
}

body.mode-meaning .question-top .rep-line,
body.surface-compact.mode-meaning .question-top .rep-line {
  justify-self: end;
}

body.mode-meaning .question-top .meaning-picture,
body.surface-compact.mode-meaning .question-top .meaning-picture {
  grid-area: picture;
  justify-self: end;
}

body.mode-meaning .meaning-picture.is-question,
body.surface-compact.mode-meaning .meaning-picture.is-question {
  width: clamp(116px, 18dvh, 168px);
  height: clamp(82px, 13dvh, 122px);
  padding: 5px;
}

body.mode-meaning .question-top .question-prompt,
body.surface-compact.mode-meaning .question-top .question-prompt {
  justify-self: start;
  text-align: left;
}

@media (max-width: 720px), (max-height: 680px) {
  body.mode-meaning .question-top,
  body.surface-compact.mode-meaning .question-top {
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "picture"
      "prompt"
      "rep";
    justify-items: center;
    row-gap: 4px;
  }

  body.mode-meaning .question-label,
  body.surface-compact.mode-meaning .question-label,
  body.mode-meaning .question-top .rep-line,
  body.surface-compact.mode-meaning .question-top .rep-line,
  body.mode-meaning .question-top .meaning-picture,
  body.surface-compact.mode-meaning .question-top .meaning-picture,
  body.mode-meaning .question-top .question-prompt,
  body.surface-compact.mode-meaning .question-top .question-prompt {
    justify-self: center;
    text-align: center;
  }

  body.mode-meaning .meaning-picture.is-question,
  body.surface-compact.mode-meaning .meaning-picture.is-question {
    width: clamp(112px, 19dvh, 146px);
    height: clamp(78px, 13dvh, 104px);
  }
}

/* Parent-controlled layout settings. These stay last so the controls win over device presets. */
body.layout-compact .topbar {
  min-height: 48px;
  padding: 4px 8px;
}

body.layout-roomy .topbar {
  min-height: 58px;
  padding: 8px 14px;
}

body.layout-compact .learn-panel {
  gap: 4px;
  padding: 6px;
}

body.layout-roomy .learn-panel {
  gap: 10px;
  padding: 14px;
}

body.layout-compact .mode-tabs {
  gap: 4px;
}

body.layout-roomy .mode-tabs {
  gap: 7px;
}

body.layout-compact .mode-tab {
  min-height: 30px;
  padding: 2px 5px;
  font-size: 12px;
}

body.layout-roomy .mode-tab {
  min-height: 40px;
  padding: 5px 8px;
  font-size: 14px;
}

body.layout-compact .game-area {
  padding: 4px;
}

body.layout-roomy .game-area {
  padding: 9px;
}

body.mode-cards .flash-card .card-actions button,
body.surface-compact.mode-cards .flash-card .card-actions button {
  min-height: var(--kid-card-button-height);
  padding: 0 var(--kid-card-button-pad);
  font-size: var(--kid-card-button-font);
}

body.mode-cards .flash-card .big-round,
body.surface-compact.mode-cards .flash-card .big-round {
  min-width: var(--kid-card-big-width);
}

body.mode-cards .flash-card .next-button,
body.surface-compact.mode-cards .flash-card .next-button {
  min-width: var(--kid-card-next-width);
}

body.mode-cards .flash-card .card-tool-button,
body.surface-compact.mode-cards .flash-card .card-tool-button {
  min-width: var(--kid-card-tool-width);
}

body.mode-sound .choice-button,
body.surface-compact.mode-sound .choice-button {
  min-height: var(--kid-sound-choice-height);
  font-size: var(--kid-sound-choice-font);
}

body.mode-meaning .choice-button,
body.surface-compact.mode-meaning .choice-button {
  min-height: var(--kid-meaning-choice-height);
  font-size: var(--kid-meaning-choice-font);
}

body.mode-meaning .meaning-picture.is-question,
body.surface-compact.mode-meaning .meaning-picture.is-question {
  width: var(--kid-meaning-picture-width);
  height: var(--kid-meaning-picture-height);
}

body.mode-cards .flash-card .meaning-picture.is-card,
body.surface-compact.mode-cards .flash-card .meaning-picture.is-card {
  display: flex;
  width: var(--kid-card-picture-width);
  height: var(--kid-card-picture-height);
}

.qwerty-bank {
  display: grid;
  justify-items: center;
  gap: 6px;
  width: min(100%, 600px);
  max-width: none;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 6px;
  width: 100%;
}

.qwerty-bank .tile-button {
  width: clamp(38px, 6.2dvh, 46px);
  height: clamp(38px, 6.2dvh, 46px);
  font-size: clamp(18px, 3.1dvh, 23px);
}

body.surface-compact .qwerty-bank {
  gap: 5px;
  width: min(100%, 520px);
}

body.surface-compact .keyboard-row {
  gap: 5px;
}

body.surface-compact .qwerty-bank .tile-button {
  width: clamp(34px, 5.6dvh, 40px);
  height: clamp(34px, 5.6dvh, 40px);
  font-size: clamp(17px, 3.2dvh, 21px);
}