/* Surface tokens also apply to overlays, menus and learning content. Phaser
   uses the corresponding materials in core/Constants.ts; never a canvas filter. */
:root {
  --surface: #fbf6eb;
  --ink: #24332f;
  --muted: #5d6558;
  --edge: #9e8b71;
  --accent: #b5482e;
  --soft: #e9dfcd;
  --round: 5px;
  --mist: #c78a61;
  --display-font: Georgia, 'Times New Roman', serif;
}
html[data-theme='jade'] {
  --surface: #eef7ee;
  --ink: #173f36;
  --muted: #365f50;
  --edge: #568978;
  --accent: #327568;
  --soft: #cadfd1;
  --round: 18px;
  --mist: #98ceb8;
  --display-font: 'Trebuchet MS', system-ui, sans-serif;
}
html[data-theme='night'] {
  --surface: #2c414a;
  --ink: #ffefd0;
  --muted: #d3c6ad;
  --edge: #819a9c;
  --accent: #e7b568;
  --soft: #22353e;
  --round: 9px;
  --mist: #e7b568;
  --display-font: Georgia, 'Times New Roman', serif;
}
.home-hero h1,
.panel-header h2 {
  font-family: var(--display-font);
}
.theme-choice[aria-pressed='true'] {
  border: 2px solid var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
}
.level-controls,
.help-controls {
  background: var(--soft) !important;
  border-color: var(--edge) !important;
}
.level-controls button,
.level-controls select,
.help-controls button,
.learning-card button,
.tool-dialog button,
.home-setting select,
.collection-tab {
  color: var(--ink);
  background: var(--surface);
  border-color: var(--edge);
}
.level-goals,
.play-hint,
.daily-reset,
.help-status {
  color: var(--muted);
}
.game-instruction,
.candidate-card,
.learning-card,
.result-card,
.collection-detail,
.home-level-map {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--edge);
  border-radius: var(--round);
}
.candidate-card {
  border-top: 3px solid var(--accent);
}
.candidate-target,
.candidate-meta,
.candidate-pinyin,
.candidate-gloss,
.learning-examples,
.candidate-empty {
  color: var(--ink);
}
.hint-panel,
.tool-dialog {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--edge);
}
.hint-target,
.hint-next {
  color: var(--ink);
}
.hint-record {
  border-color: var(--edge);
}
.result-card h2 {
  color: var(--ink);
}
.result-detail,
.discovered-results {
  color: var(--muted);
}
.result-card button {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
  border-radius: var(--round);
}
.candidate-btn {
  color: var(--surface);
  background: var(--ink);
  border-color: var(--ink);
  border-radius: var(--round);
}
.candidate-meta {
  scrollbar-width: thin;
}
.candidate-meta .candidate-pinyin,
.candidate-meta .learning-examples {
  color: var(--ink);
}
.learning-card {
  color: var(--ink);
}
.learning-feedback {
  background: linear-gradient(180deg, #15201ec9 0%, #15201e99 65%, transparent 84%);
  padding-top: clamp(12px, 5%, 36px);
  min-height: 0;
  overflow: auto;
}
.learning-feedback .learning-card {
  max-height: 100%;
  min-height: 0;
}
.stroke-replay {
  color: var(--ink);
}
.pronunciation-control {
  display: grid;
  place-items: center;
  gap: 4px;
}
.pronunciation-button {
  color: var(--ink) !important;
  flex-shrink: 0;
}
.learning-card .pronunciation-button,
.collection-detail .pronunciation-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  line-height: 1;
}
.pronunciation-button svg {
  display: block;
  width: 22px;
  height: 22px;
}
.pronunciation-status:empty {
  display: none;
}
.pronunciation-status,
.meaning-language {
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}
.home-level-map {
  border: 1px solid var(--edge);
  padding: 10px;
}
.home-level-map summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 600;
}
.level-map-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding-block: 8px;
}
.level-map-button {
  min-height: 44px;
  border: 1px solid var(--edge);
  background: var(--soft);
  color: var(--ink);
  border-radius: var(--round);
  padding: 8px;
  text-align: start;
  font-weight: 700;
}
.level-map-button small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  margin-top: 4px;
}
.level-map-button:disabled {
  opacity: 0.65;
  background: transparent;
  border-style: dashed;
}
.collection-card bdi {
  font:
    500 30px/1.3 'GameCJK',
    sans-serif;
}
dialog.collection-detail {
  width: min(90vw, 380px);
  max-height: 80dvh;
  overflow: auto;
  color: var(--ink);
  margin: auto;
}
dialog.collection-detail:not([open]) {
  display: none;
}
dialog.collection-detail::backdrop {
  background: #14231dcc;
}
.collection-detail .candidate-gloss {
  font-size: 16px;
  line-height: 1.6;
}
.collection-detail .candidate-pinyin {
  font-size: 18px;
}
.collection-detail button {
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--edge);
  border-radius: var(--round);
}
.slot-synthesis-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 42;
  overflow: hidden;
}
.slot-echo {
  position: absolute;
  display: grid;
  place-items: center;
  min-width: 32px;
  height: 38px;
  font:
    500 24px/1 'GameCJK',
    sans-serif;
  font-style: normal;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: var(--round);
  box-shadow: 0 0 12px var(--mist);
}
.slot-mist {
  position: absolute;
  width: 150px;
  height: 70px;
  background: radial-gradient(ellipse, var(--mist), transparent 65%);
  filter: blur(5px);
}
.ink-buddy {
  position: relative;
  background: #263c36 !important;
  border: 0 !important;
  border-radius: 48% 51% 42% 46% / 58% 53% 40% 41% !important;
  color: transparent !important;
  box-shadow:
    inset -5px -5px 0 #152a25,
    inset 3px 3px 0 #465d52,
    0 5px 0 #14291f25 !important;
  isolation: isolate;
}
.ink-buddy::before,
.ink-buddy::after {
  display: none;
}
.buddy-tuft {
  position: absolute;
  width: 28%;
  height: 30%;
  left: 42%;
  top: -16%;
  border-radius: 80% 0 60% 10%;
  background: #263c36;
  transform: rotate(-26deg);
  box-shadow: inset 3px 1px 0 #465d52;
  z-index: -1;
}
.buddy-eyes {
  content: '';
  position: absolute;
  top: 39%;
  left: 29%;
  width: 10%;
  height: 16%;
  background: #fff7e8;
  border-radius: 50%;
  box-shadow: calc(var(--buddy-size, 76px) * 0.27) 0 0 #fff7e8;
}
.buddy-mouth {
  content: '';
  position: absolute;
  top: 63%;
  left: 42%;
  width: 18%;
  height: 11%;
  border: 0;
  border-bottom: 2px solid #fff7e8;
  border-radius: 50%;
  background: transparent;
}
.buddy-cheeks {
  position: absolute;
  top: 58%;
  left: 16%;
  width: 16%;
  height: 8%;
  border-radius: 50%;
  background: #d38a72;
  opacity: 0.7;
  box-shadow: calc(var(--buddy-size, 76px) * 0.5) 0 0 #d38a72;
}
.buddy-feet {
  position: absolute;
  bottom: -4%;
  left: 23%;
  width: 22%;
  height: 12%;
  background: #263c36;
  border-radius: 50%;
  box-shadow: calc(var(--buddy-size, 76px) * 0.34) 0 0 #263c36;
}
.ink-buddy[data-mood='curious'] .buddy-eyes,
.ink-buddy[data-mood='wonder'] .buddy-eyes {
  height: 22%;
  transform: translateY(-12%);
}
.ink-buddy[data-mood='wonder'] .buddy-mouth,
.ink-buddy[data-mood='puzzled'] .buddy-mouth {
  border: 2px solid #fff7e8;
  width: 13%;
  height: 15%;
  border-radius: 50%;
}
.ink-buddy[data-mood='happy'] .buddy-eyes,
.ink-buddy[data-mood='celebrate'] .buddy-eyes {
  background: transparent;
  height: 11%;
  border-top: 2px solid #fff7e8;
  box-shadow: none;
}
.ink-buddy[data-mood='happy'] .buddy-eyes::after,
.ink-buddy[data-mood='celebrate'] .buddy-eyes::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  left: calc(var(--buddy-size, 76px) * 0.27);
  top: -2px;
  border-top: 2px solid #fff7e8;
  border-radius: 50%;
}
.ink-buddy[data-mood='happy'] .buddy-mouth,
.ink-buddy[data-mood='celebrate'] .buddy-mouth {
  background: #fff7e8;
  height: 16%;
  border-radius: 10% 10% 50% 50%;
}
.ink-buddy[data-mood='worried'] .buddy-eyes {
  height: 8%;
  transform: rotate(-15deg);
}
.ink-buddy[data-mood='worried'] .buddy-mouth {
  border-top: 2px solid #fff7e8;
  border-bottom: 0;
}
.home-mark.ink-buddy {
  --buddy-size: 76px;
  transform: rotate(-7deg);
}
.game-companion.ink-buddy {
  position: absolute;
  --buddy-size: min(40px, calc(var(--canvas-width, 360px) * 0.1));
  width: var(--buddy-size);
  height: var(--buddy-size);
  top: calc(var(--canvas-top, 0px) + 1px);
  right: max(12px, calc((100% - var(--canvas-width, 100%)) / 2 + 12px));
  animation: none;
}
.ink-buddy span {
  display: none;
}
html[data-theme='jade'] .ink-buddy {
  outline: 2px solid #6eaa91;
  outline-offset: 3px;
}
html[data-theme='night'] .ink-buddy {
  outline: 1px solid #e7b568;
  outline-offset: 3px;
}
button:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}
@media (max-height: 650px) {
  .home-screen {
    padding-block: 12px;
  }
  .home-content {
    gap: 8px;
  }
  .home-hero {
    padding: 0;
  }
  .home-mark {
    width: 52px;
    --buddy-size: 52px !important;
    margin-bottom: 8px;
  }
  .home-hero h1 {
    font-size: 28px;
  }
  .home-hero p {
    margin-block: 6px;
  }
  .game-instruction {
    display: none;
  }
  .learning-card {
    max-height: 70dvh;
  }
}

/* Compact game surfaces are anchored to Phaser's actual fitted canvas. */
.game-instruction {
  display: none;
}
.play-tools {
  margin-block: 2px;
}
.play-hint {
  min-height: 16px;
}
.lesson-title {
  position: absolute;
  top: calc(var(--canvas-top, 0px) + var(--canvas-width, 360px) * 0.026);
  left: calc(var(--canvas-left, 0px) + 12px);
  max-width: calc(var(--canvas-width, 100%) - 76px);
  font-size: clamp(10px, calc(var(--canvas-width, 360px) * 0.039), 14px);
  font-weight: 650;
  color: var(--muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.play-area {
  --visible-rail-top: min(
    var(--rail-top, 62%),
    calc(var(--slot-top, 80%) - max(58px, var(--rail-height, 17%)) - 2px)
  );
}
.candidate-rail {
  top: var(--visible-rail-top);
  left: calc(var(--canvas-left, 0px) + 8px);
  right: auto;
  width: calc(var(--canvas-width, 100%) - 16px);
  height: max(58px, var(--rail-height, 17%));
  padding-bottom: 2px;
}
.candidate-card,
.candidate-card:not([data-candidate-kind='character']) {
  flex-basis: 230px;
  grid-template-columns: 30px minmax(0, 1fr) 54px;
  grid-template-rows: minmax(44px, 1fr);
  padding: 4px;
  gap: 6px;
}
.candidate-card:not([data-candidate-kind='character']) {
  grid-template-columns: minmax(48px, auto) minmax(0, 1fr) 54px;
  flex-basis: 270px;
}
.candidate-card .candidate-btn {
  grid-column: auto;
  padding: 0 3px;
  font-size: 12px;
}
.candidate-meta {
  align-self: center;
  max-height: 100%;
}
.learning-source {
  display: block;
  color: inherit;
  font-size: 11px;
  overflow-wrap: anywhere;
  text-decoration: underline;
  margin-block-start: 4px;
}
.candidate-meta {
  scrollbar-width: thin;
}
.candidate-meta:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.learning-usage,
.learning-idiom-note {
  margin-block-start: 3px;
}
.candidate-empty {
  margin: auto 8px;
}
.discovered-results {
  top: calc(var(--visible-rail-top) - 15px);
}
.result-overlay {
  background: var(--surface);
}
body {
  background: var(--soft);
}
.stroke-player {
  display: grid;
  justify-items: center;
  gap: 5px;
}
.stroke-player .stroke-replay {
  width: 128px;
  height: 128px;
}
.stroke-player .stroke-replay path[data-active='true'] {
  color: var(--accent);
}
.stroke-progress {
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.stroke-player button {
  padding: 4px 12px;
  font-size: 12px;
}
.learning-card {
  padding: 10px;
}
.learning-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.learning-feedback .learning-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  grid-template-rows: auto minmax(44px, 1fr) auto;
  gap: 6px;
  height: 100%;
  overflow: hidden;
}
.learning-card > .stroke-player,
.learning-card > .learning-target {
  grid-area: 1 / 1;
}
.learning-card > .pronunciation-control {
  grid-area: 1 / 2;
  min-width: 0;
}
.learning-card > .learning-copy {
  grid-area: 2 / 1 / auto / -1;
  min-height: 0;
  margin: 0;
  overflow: auto;
}
.learning-card > .learning-actions {
  grid-area: 3 / 1 / auto / -1;
  flex-wrap: nowrap;
  gap: 4px;
}
.learning-actions button {
  flex: 1;
  min-width: 0;
  padding-inline: 4px;
  font-size: 12px;
  overflow-wrap: anywhere;
}
@media (max-height: 800px) {
  .learning-card .stroke-player .stroke-replay {
    width: 80px;
    height: 80px;
  }
}
.learning-card::after {
  display: none;
}
.learning-vocabulary {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1px 8px;
  margin-block: 5px;
  text-align: start;
  overflow-wrap: anywhere;
}
.learning-vocabulary .example-meaning {
  grid-column: 1 / -1;
}
.example-language {
  display: block;
  color: var(--muted);
}
.learning-reference summary {
  cursor: pointer;
  padding-block: 6px;
}
.learning-reference summary:focus-visible {
  outline: 2px solid currentColor;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}