:root {
  --ink: #17202a;
  --muted: #5e6a75;
  --line: #d8e0e7;
  --paper: #fbfcfd;
  --panel: #ffffff;
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --green: #14815f;
  --red: #c2413a;
  --yellow: #b7791f;
  --shadow: 0 16px 40px rgba(23, 32, 42, 0.08);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: Arial, "Noto Sans TC", sans-serif;
  letter-spacing: 0;
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Shared, centered status notifications. The layer is pointer-transparent so it never traps the app UI. */
.app-notice-layer,
#app-notice-layer {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: grid;
  place-items: center;
  align-content: center;
  gap: .7rem;
  padding: clamp(1rem, 4vw, 2.5rem);
  pointer-events: none;
}
.app-notice-layer[hidden],
#app-notice-layer[hidden],
.app-notice-layer:empty,
#app-notice-layer:empty { display: none; }
.app-notice {
  --notice-accent: #2563eb;
  --notice-surface: rgba(239,246,255,.97);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: .75rem;
  width: min(100%, 36rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: .9rem 1rem 1.05rem;
  border: 1px solid color-mix(in srgb, var(--notice-accent) 45%, #fff);
  border-radius: 1rem;
  background: var(--notice-surface);
  color: #1e293b;
  box-shadow: 0 20px 56px rgba(15,23,42,.2), 0 4px 16px rgba(15,23,42,.12), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(14px) saturate(1.18);
  pointer-events: auto;
  opacity: 0;
  transform: translateY(12px) scale(.97);
  animation: app-notice-enter 320ms cubic-bezier(.2,.8,.25,1) forwards;
}
.app-notice.is-leaving,
.app-notice[data-state="leaving"],
.app-notice[aria-hidden="true"] {
  animation: app-notice-exit 220ms ease forwards;
  pointer-events: none;
}
.app-notice-success,
.app-notice[data-variant="success"],
.app-notice.success { --notice-accent: #16a34a; --notice-surface: rgba(240,253,244,.97); color: #14532d; }
.app-notice-error,
.app-notice[data-variant="error"],
.app-notice.error { --notice-accent: #dc2626; --notice-surface: rgba(254,242,242,.98); color: #7f1d1d; }
.app-notice-info,
.app-notice[data-variant="info"],
.app-notice.info { --notice-accent: #2563eb; --notice-surface: rgba(239,246,255,.97); color: #1e3a8a; }
.app-notice-warning,
.app-notice[data-variant="warning"],
.app-notice.warning { --notice-accent: #d97706; --notice-surface: rgba(255,251,235,.98); color: #78350f; }
.app-notice-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: .7rem;
  background: color-mix(in srgb, var(--notice-accent) 14%, #fff);
  color: var(--notice-accent);
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1;
}
.app-notice-content { display: grid; gap: .18rem; min-width: 0; }
.app-notice-title { color: inherit; font-size: .96rem; font-weight: 900; line-height: 1.25; }
.app-notice-message { color: color-mix(in srgb, currentColor 78%, #334155); font-size: .86rem; line-height: 1.45; }
.app-notice-dismiss {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -.15rem -.2rem 0 0;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: color-mix(in srgb, currentColor 66%, #64748b);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
.app-notice-dismiss:hover,
.app-notice-dismiss:focus-visible { background: color-mix(in srgb, var(--notice-accent) 12%, transparent); color: var(--notice-accent); outline: none; }
.app-notice-dismiss:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--notice-accent) 22%, transparent); }
.app-notice-progress {
  grid-column: 1 / -1;
  position: relative;
  height: .24rem;
  margin: .25rem -1rem -1.05rem;
  overflow: hidden;
  border-radius: 0 0 1rem 1rem;
  background: color-mix(in srgb, var(--notice-accent) 14%, transparent);
}
.app-notice-progress::before,
.app-notice-progress > span {
  display: block;
  width: var(--notice-progress, 100%);
  height: 100%;
  border-radius: inherit;
  background: var(--notice-accent);
  transform-origin: left center;
}
.app-notice.is-timed .app-notice-progress::before,
.app-notice[data-duration] .app-notice-progress::before { animation: app-notice-progress var(--notice-duration, 4s) linear forwards; }
@keyframes app-notice-enter { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes app-notice-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-8px) scale(.98); } }
@keyframes app-notice-progress { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@keyframes app-notice-enter-centered { from { opacity: 0; transform: translate(-50%, calc(-50% + 12px)) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes app-notice-exit-centered { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, calc(-50% - 8px)) scale(.98); } }

/* The current app renderer mounts a single [data-app-notice] aside directly on body. */
[data-app-notice] {
  --notice-accent: #2563eb;
  --notice-surface: rgba(239,246,255,.97);
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: 2000;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  width: min(calc(100vw - 2rem), 36rem);
  max-height: calc(100vh - 2rem);
  overflow: auto;
  padding: .9rem 1rem 1.12rem;
  border: 1px solid color-mix(in srgb, var(--notice-accent) 45%, #fff);
  border-radius: 1rem;
  background: var(--notice-surface);
  color: #1e293b;
  box-shadow: 0 20px 56px rgba(15,23,42,.2), 0 4px 16px rgba(15,23,42,.12), inset 0 1px rgba(255,255,255,.85);
  backdrop-filter: blur(14px) saturate(1.18);
  opacity: 0;
  transform: translate(-50%, calc(-50% + 12px)) scale(.97);
  animation: app-notice-enter-centered 320ms cubic-bezier(.2,.8,.25,1) forwards;
}
[data-app-notice][hidden] { display: none; }
[data-app-notice][data-notice-state="hidden"],
[data-app-notice][aria-hidden="true"] { animation: app-notice-exit-centered 220ms ease forwards; pointer-events: none; }
[data-app-notice][data-notice-kind="success"] { --notice-accent: #16a34a; --notice-surface: rgba(240,253,244,.97); color: #14532d; }
[data-app-notice][data-notice-kind="error"] { --notice-accent: #dc2626; --notice-surface: rgba(254,242,242,.98); color: #7f1d1d; }
[data-app-notice][data-notice-kind="info"] { --notice-accent: #2563eb; --notice-surface: rgba(239,246,255,.97); color: #1e3a8a; }
[data-app-notice][data-notice-kind="warning"] { --notice-accent: #d97706; --notice-surface: rgba(255,251,235,.98); color: #78350f; }
[data-app-notice] [data-app-notice-message] { min-width: 0; color: color-mix(in srgb, currentColor 78%, #334155); font-size: .86rem; font-weight: 700; line-height: 1.45; }
[data-app-notice] [data-app-notice-dismiss] {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  margin: -.1rem -.2rem 0 0;
  border: 0;
  border-radius: .55rem;
  background: transparent;
  color: color-mix(in srgb, currentColor 66%, #64748b);
  font-size: 1.15rem;
  font-weight: 900;
  line-height: 1;
}
[data-app-notice] [data-app-notice-dismiss]:hover,
[data-app-notice] [data-app-notice-dismiss]:focus-visible { background: color-mix(in srgb, var(--notice-accent) 12%, transparent); color: var(--notice-accent); outline: none; }
[data-app-notice] [data-app-notice-dismiss]:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--notice-accent) 22%, transparent); }
[data-app-notice]::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: .24rem;
  border-radius: 0 0 1rem 1rem;
  background: var(--notice-accent);
  content: "";
  transform-origin: left center;
  animation: app-notice-progress 4.8s linear forwards;
}

button {
  cursor: pointer;
}

.app-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  min-width: 0;
  background: #ffffff;
  border-right: 1px solid var(--line);
  padding: 24px 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.brand-mark {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

.brand h1,
.brand p,
.topbar h2,
.eyebrow {
  margin: 0;
}

.brand h1 {
  font-size: 22px;
}

.brand p,
.eyebrow,
.quick-stats small,
.word-meta,
.translation,
.panel-heading span {
  color: var(--muted);
}

.nav-tabs {
  display: grid;
  gap: 8px;
}

.nav-tab {
  display: grid;
  gap: 2px;
  width: 100%;
  min-height: 58px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  padding: 10px 12px;
}

.nav-label-zh,
.nav-label-en {
  display: block;
  overflow-wrap: anywhere;
}

.nav-label-zh {
  font-size: 1rem;
  font-weight: 800;
}

.nav-label-en {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.15;
}

.nav-tab.active,
.nav-tab:hover {
  background: #eaf1ff;
  border-color: #c7d8ff;
  color: var(--blue-dark);
}

.nav-tab.active .nav-label-en,
.nav-tab:hover .nav-label-en {
  color: #4c63a8;
}

.main {
  padding: 28px;
  min-width: 0;
  overflow-x: hidden;
}

.topbar {
  display: grid;
  grid-template-columns: minmax(150px, .8fr) minmax(180px, 1.1fr) minmax(180px, 1.1fr) minmax(260px, 1.6fr);
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.topbar > * { min-width: 0; }

.topbar h2 {
  font-size: 30px;
  margin-top: 4px;
}

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

@media (max-width: 1180px) {
  .topbar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.student-switcher {
  display: grid;
  gap: 6px;
}

.student-switcher label,
.player-switcher-label,
.voice-switcher span {
  color: var(--muted);
  font-size: 14px;
}

.voice-switcher {
  display: grid;
  gap: 6px;
}
.tts-status { color: var(--muted); font-size: 11px; font-weight: 700; }
.tts-status.is-error { color: var(--red); }
.setup-tts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 12px; }
.setup-tts-grid label { display: grid; gap: 5px; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.setup-tts-grid input,
.setup-tts-grid select,
.setup-tts-grid textarea { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; background: #fff; color: var(--ink); }
.setup-tts-style-field { grid-column: 1 / -1; }
.setup-tts-clear { display: flex !important; grid-column: 1 / -1; align-items: center; grid-template-columns: auto 1fr !important; }
.setup-tts-clear input { width: auto; }

.student-switcher > div {
  display: flex;
  gap: 8px;
}

.student-switcher input {
  min-width: 0;
  flex: 1;
}

.player-chip {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
  min-width: 0;
}
.player-chip > div { min-width: 0; overflow-wrap: anywhere; }

.player-chip strong,
.saved-player-card strong {
  display: block;
  font-size: 18px;
  line-height: 1.2;
}

.player-chip small,
.saved-player-card span {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.player-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.58);
}

.player-gate-card {
  width: min(560px, 100%);
  display: grid;
  gap: 20px;
  border: 1px solid #243247;
  border-radius: 8px;
  padding: 26px;
  background: #ffffff;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
}

.player-gate-card h2 {
  margin-top: 4px;
  font-size: 36px;
}

.player-form {
  display: grid;
  gap: 14px;
}

.player-form label {
  display: grid;
  gap: 7px;
  font-weight: 800;
}

.player-form small,
.helper-text {
  color: var(--muted);
}

.saved-player-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 14px;
  background: #eff6ff;
}

.player-gate-actions {
  display: grid;
  gap: 10px;
}

.quick-stats div,
.result-grid div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-width: 0;
}

.quick-stats span,
.result-grid span {
  display: block;
  font-size: 24px;
  font-weight: 800;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.toolbar,
.quiz-setup,
.section-heading {
  display: flex;
  align-items: end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.search-box,
.field-group {
  display: grid;
  gap: 6px;
}

.search-box {
  min-width: min(360px, 100%);
}

.search-box span,
.field-group label,
.field-group span {
  color: var(--muted);
  font-size: 14px;
}

input,
select,
textarea {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 12px;
  background: #ffffff;
  color: var(--ink);
}

textarea {
  width: 100%;
  resize: vertical;
  line-height: 1.5;
}

.primary-button,
.secondary-button,
.icon-button {
  min-height: 44px;
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 10px 14px;
  font-weight: 700;
}

.primary-button {
  background: var(--blue);
  color: #ffffff;
}

.primary-button:hover {
  background: var(--blue-dark);
}

.secondary-button,
.icon-button {
  background: #ffffff;
  border-color: var(--line);
  color: var(--ink);
}

.secondary-button:hover,
.icon-button:hover {
  border-color: #9bb2c8;
}

.learn-grid {
  display: grid;
  grid-template-columns: minmax(300px, 460px) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
}

.word-card,
.word-list-panel,
.question-card,
.result-panel,
.form-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}

.word-card {
  padding: 28px;
}

.word-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
}

.word-card h3 {
  margin: 18px 0 6px;
  font-size: 58px;
  line-height: 1;
}

.phonetic {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 22px;
  font-weight: 700;
}

.phonetic-label {
  margin: 0 0 2px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.meaning {
  margin: 0 0 18px;
  font-size: 30px;
  font-weight: 800;
  color: var(--green);
}

.example {
  margin: 0 0 8px;
  font-size: 20px;
}

.translation {
  margin: 0 0 24px;
}

.dialogue-panel {
  display: grid;
  gap: 10px;
  margin: 0 0 18px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.dialogue-heading,
.dialogue-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialogue-heading span {
  margin-right: auto;
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 800;
}

.dialogue-line {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.dialogue-line p,
.dialogue-status,
.dialogue-error {
  margin: 0;
  font-weight: 800;
}

.dialogue-line span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
}

.dialogue-error {
  color: var(--red);
}

.dialogue-examples {
  display: grid;
  gap: 10px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.dialogue-examples > strong {
  font-size: 0.95rem;
}

.dialogue-pos-group {
  display: grid;
  gap: 6px;
  padding: 8px 10px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 6px;
}

.dialogue-pos-group header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.dialogue-pos-group .pos-tag {
  font-weight: 800;
  color: var(--green);
}

.dialogue-pos-group .pos-meaning {
  color: var(--muted);
  font-size: 0.9rem;
}

.dialogue-pos-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.dialogue-example {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}

.dialogue-example:first-child {
  padding-top: 0;
  border-top: 0;
}

.dialogue-example p {
  margin: 0;
  font-weight: 700;
}

.dialogue-example span {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.9rem;
}

.card-actions,
.question-top {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.card-actions {
  margin: 0 0 18px;
}

.word-navigation {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.word-navigation .secondary-button {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
}

.word-navigation span {
  min-width: 54px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  text-align: center;
}

.word-list-panel {
  overflow: hidden;
}

.panel-heading,
.section-heading {
  justify-content: space-between;
}

.panel-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
}

.panel-heading h3,
.section-heading h3 {
  margin: 0;
}

.word-list,
.review-list,
.score-list,
.admin-list {
  display: grid;
  gap: 10px;
}

.word-list {
  max-height: 62vh;
  overflow: auto;
  padding: 12px;
}

.word-row,
.review-row,
.score-row,
.admin-row {
  display: grid;
  gap: 4px;
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
}

.word-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.word-row button {
  min-height: 36px;
  padding: 7px 10px;
}

.word-row strong,
.review-row strong {
  font-size: 18px;
}

.tag-line {
  color: var(--muted);
  font-size: 14px;
}

.quiz-runner {
  display: grid;
  gap: 16px;
  max-width: 780px;
}

.quiz-progress {
  display: grid;
  gap: 8px;
}

.quiz-progress > div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

.quiz-progress-stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quiz-mode-help {
  min-height: 2.4em;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.quiz-timer {
  min-width: 58px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 9px;
  background: #ffffff;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  text-align: center;
}

progress {
  width: 100%;
  height: 12px;
  accent-color: var(--blue);
}

.question-card,
.result-panel {
  padding: 24px;
}

.question-top {
  justify-content: space-between;
  align-items: center;
}

#question-kind {
  color: var(--muted);
  font-weight: 700;
}

#question-prompt {
  margin: 20px 0 10px;
  font-size: 44px;
}

#question-hint {
  min-height: 24px;
  margin: 0 0 18px;
  color: var(--muted);
}

.phonics-blend-panel {
  display: grid;
  gap: 8px;
  margin: -4px 0 18px;
  padding: 14px;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  background: #f5f3ff;
}

.phonics-blend-label {
  color: #6d28d9;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.phonics-chunks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.phonics-chunks span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 7px 12px;
  border: 2px solid #c4b5fd;
  border-radius: 8px;
  background: #ffffff;
  color: #4c1d95;
  font-size: 18px;
  font-weight: 800;
}

.phonics-blend-note {
  color: #7c3aed;
  font-size: 13px;
}

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

.choice-option {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 10px;
  min-height: 64px;
  background: #ffffff;
  border: 2px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  color: var(--ink);
  font-size: 18px;
  font-weight: 800;
}

.choice-label {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #eaf2fb;
  color: var(--blue-dark);
  font-size: 16px;
}

.choice-text {
  grid-column: 2;
  overflow-wrap: anywhere;
}

.choice-option:hover {
  border-color: var(--blue);
}

.choice-option.correct {
  border-color: var(--green);
  background: #ecfdf5;
}

.choice-option.wrong {
  border-color: var(--red);
  background: #fff1f2;
}

.spelling-form {
  display: flex;
  gap: 10px;
}

.spelling-form input {
  flex: 1;
}

.letter-scramble {
  display: grid;
  gap: 12px;
}

.scramble-answer {
  min-height: 56px;
  padding: 12px 14px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 4px;
}

.scramble-letters,
.scramble-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.letter-tile {
  width: 48px;
  height: 48px;
  border: 2px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  color: var(--ink);
  font-size: 22px;
  font-weight: 900;
}

.letter-tile:not(:disabled):hover {
  border-color: var(--blue);
}

.letter-tile:disabled {
  opacity: 0.35;
}

.answer-feedback {
  min-height: 32px;
  margin-top: 14px;
  font-weight: 800;
}

.answer-feedback.good {
  color: var(--green);
}

.answer-feedback.bad {
  color: var(--red);
}

.quiz-next-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-height: 42px;
  margin-top: 10px;
}

.quiz-next-status {
  color: var(--muted);
  font-size: 13px;
}

.quiz-next-row .primary-button {
  width: auto;
}

.phonics-result-summary {
  display: grid;
  gap: 6px;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #ddd6fe;
  border-radius: 8px;
  background: #f5f3ff;
  color: #5b21b6;
  font-size: 14px;
}

.quiz-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.quiz-result-actions button {
  width: auto;
}

.review-list,
.score-list,
.admin-list {
  max-width: 900px;
}

.review-row,
.score-row,
.admin-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}

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

.review-row-expanded {
  align-items: start;
}

.review-main {
  display: grid;
  gap: 10px;
}

.review-dialogue {
  display: grid;
  gap: 10px;
  margin-top: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

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

.review-dialogue.empty p {
  margin: 4px 0 0;
  color: var(--muted);
}

.score-row strong {
  font-size: 24px;
}

.score-row meter {
  width: 200px;
}

.manager-grid {
  display: grid;
  grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
  gap: 18px;
  align-items: start;
  margin-bottom: 18px;
}

.form-panel {
  padding: 18px;
}

.form-panel h3 {
  margin: 0 0 14px;
}

.word-form,
.csv-form {
  display: grid;
  gap: 12px;
}

.word-form label,
.csv-form label {
  display: grid;
  gap: 6px;
}

.word-form label span,
.csv-form label span,
.helper-text {
  color: var(--muted);
  font-size: 14px;
}

.helper-text {
  margin: 0;
}

.form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.form-message {
  min-height: 22px;
  margin: 0;
  color: var(--green);
  font-weight: 700;
}

.manage-list-panel {
  max-width: 900px;
}

.admin-list {
  padding: 12px;
}

.result-panel {
  max-width: 560px;
}

.result-panel h3 {
  margin-top: 0;
}

.zh-main,
.en-sub {
  display: block;
}

.zh-main {
  font-weight: 900;
}

.en-sub {
  margin-top: 3px;
  color: var(--muted);
  font-size: .58em;
  font-weight: 700;
  line-height: 1.2;
}

#result-score {
  margin: 0 0 14px;
  font-weight: 800;
  color: var(--blue-dark);
}

#result-score .zh-main {
  font-size: 56px;
}

#result-score .en-sub {
  color: #64748b;
  font-size: 18px;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.result-grid small .zh-main {
  font-size: 18px;
}

.result-grid small .en-sub {
  font-size: 12px;
}

.reward-drop-zone {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 14px;
  border: 2px solid #4D494D;
  border-radius: 8px;
  background: #16121d;
  color: #ffffff;
}

.reward-drop-zone .en-sub {
  color: #cbd5e1;
}

.reward-rule-note {
  margin: 8px 0 12px;
}

.reward-rule-note .zh-main {
  font-size: 16px;
}

.reward-rule-note .en-sub {
  font-size: 12px;
}

.drop-items {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 76px;
  align-items: center;
}

.drop-item {
  display: grid;
  justify-items: center;
  gap: 5px;
  min-width: 96px;
  animation: item-burst 720ms cubic-bezier(.18,.72,.23,1.18) both, item-float 1800ms ease-in-out 760ms infinite;
  animation-delay: calc(var(--i) * 90ms), calc(760ms + var(--i) * 90ms);
}

.drop-item .zh-main {
  font-size: 18px;
}

.drop-item .en-sub {
  font-size: 12px;
  max-width: 110px;
}

.reward-drop-zone.spark .drop-item {
  filter: drop-shadow(0 0 8px #ffffff);
}

.reward-drop-zone.end .drop-item {
  filter: drop-shadow(0 0 12px #b889ff);
}

.pixel-item,
.pixel-weapon {
  width: 42px;
  height: 42px;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.pixel-weapon {
  width: 62px;
  height: 62px;
}

@keyframes item-burst {
  from {
    opacity: 0;
    transform: translateY(-48px) scale(.6) rotate(-18deg);
  }
  65% {
    opacity: 1;
    transform: translateY(10px) scale(1.08) rotate(8deg);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
}

@keyframes item-float {
  50% {
    transform: translateY(-6px);
  }
}

.adventure-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(320px, 1.2fr);
  gap: 16px;
  align-items: start;
}

.battle-layout {
  display: grid;
  gap: 16px;
}

.game-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 18px;
}

.game-panel h3 {
  margin: 0 0 14px;
}

.inventory-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px;
}

.inventory-item {
  display: grid;
  justify-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.inventory-item.empty {
  opacity: .48;
}

.crafting-list {
  display: grid;
  gap: 10px;
}

.craft-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.craft-card.locked {
  background: #fbfcfd;
}

.craft-card.craftable {
  border-color: #86efac;
  background: #f0fdf4;
  box-shadow: 0 0 0 2px rgba(20, 129, 95, 0.1);
}

.craft-card p,
.craft-card small {
  margin: 3px 0 0;
  color: var(--muted);
}

.crafting-message {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  width: min(520px, calc(100vw - 48px));
  margin: 0;
  padding: 14px 16px;
  border: 2px solid #fed7aa;
  border-radius: 8px;
  background: #fff7ed;
  color: #9a3412;
  font-weight: 800;
  box-shadow: 0 18px 42px rgba(23, 32, 42, 0.16);
}

.craft-ready {
  background: #16a34a;
  border-color: #16a34a;
  color: #ffffff;
  box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.14);
}

.craft-ready:hover {
  background: #15803d;
}

.craft-locked {
  color: var(--muted);
}

.battle-panel {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
}

.boss-picker-wrapper {
  margin-bottom: 12px;
}

.boss-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.boss-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  border: 2px solid transparent;
  border-radius: 10px;
  background: #1c1326;
  color: #f8fafc;
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, border-color 120ms ease;
}

.boss-card:hover {
  transform: translateY(-2px);
}

.boss-card.active {
  border-color: #facc15;
  box-shadow: 0 0 12px rgba(250, 204, 21, 0.5);
}

.boss-card.boss-tier-1 { background: linear-gradient(180deg, #14532d 0%, #1c1326 100%); }
.boss-card.boss-tier-2 { background: linear-gradient(180deg, #1e40af 0%, #1c1326 100%); }
.boss-card.boss-tier-3 { background: linear-gradient(180deg, #6d28d9 0%, #1c1326 100%); }
.boss-card.boss-tier-4 { background: linear-gradient(180deg, #7f1d1d 0%, #0f0712 100%); }

.boss-card-stage {
  display: grid;
  place-items: center;
  height: 84px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    rgba(0, 0, 0, 0.35);
  background-size: 12px 12px;
  border-radius: 6px;
  overflow: hidden;
}

.boss-card-stage svg {
  width: 90%;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.boss-card-stage .battle-fail-mark,
.boss-card-stage .battle-hit-spark,
.boss-card-stage .defeat-effect {
  display: none;
}

.boss-card-info {
  display: grid;
  gap: 2px;
  font-size: 12px;
  padding: 0 2px 4px;
}

.boss-card-info strong {
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px;
}

.boss-card-info strong .boss-card-en {
  font-size: 10px;
  font-weight: 600;
  color: #cbd5f5;
}

.boss-card-tier {
  font-size: 10px;
  color: #fde68a;
}

.boss-card-tier .en-inline,
.boss-card-rec .en-inline,
.boss-card-rate .en-inline {
  display: block;
  color: #cbd5f5;
  font-weight: 600;
  font-size: 10px;
}

.boss-card-rec,
.boss-card-rate {
  color: #fef3c7;
}

.boss-stage {
  display: grid;
  place-items: center;
  min-height: 170px;
  border-radius: 8px;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    #16121d;
  background-size: 16px 16px;
}

.boss-stage svg {
  width: min(360px, 100%);
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.boss-stage.boss-tier-1 svg { filter: drop-shadow(0 0 10px #22c55e); }
.boss-stage.boss-tier-2 svg { filter: drop-shadow(0 0 10px #38bdf8); }
.boss-stage.boss-tier-3 svg { filter: drop-shadow(0 0 12px #7c3aed); }
.boss-stage.boss-tier-4 svg { filter: drop-shadow(0 0 16px #f87171); }

.boss-aura {
  animation: dragon-aura-pulse 1800ms ease-in-out infinite;
}

.boss-sprite {
  transform-origin: 160px 90px;
}

.boss-idle .boss-sprite-creeper { animation: creeper-bob 1600ms ease-in-out infinite; }
.boss-idle .boss-sprite-zombie-villager { animation: zombie-shuffle 1800ms ease-in-out infinite; }
.boss-idle .boss-sprite-skeleton { animation: skeleton-aim 2000ms ease-in-out infinite; }
.boss-idle .boss-sprite-piglin-brute { animation: piglin-stomp 1400ms ease-in-out infinite; }
.boss-idle .boss-sprite-dragon { animation: dragon-fly 3400ms ease-in-out infinite; }
.boss-idle .boss-sprite-wither { animation: wither-hover 2400ms ease-in-out infinite; }
.boss-idle .boss-sprite-guardian { animation: guardian-glow 2200ms ease-in-out infinite; }
.boss-idle .boss-sprite-warden { animation: warden-pulse 2600ms ease-in-out infinite; }

.boss-idle .wither-skull-l { animation: wither-skull-l 1800ms ease-in-out infinite; }
.boss-idle .wither-skull-r { animation: wither-skull-r 1800ms ease-in-out infinite; }

.dragon-left-wing { transform-origin: 134px 58px; }
.dragon-right-wing { transform-origin: 186px 58px; }

.boss-idle .boss-sprite-dragon .dragon-left-wing { animation: dragon-left-wing-flap 680ms steps(2, end) infinite; }
.boss-idle .boss-sprite-dragon .dragon-right-wing { animation: dragon-right-wing-flap 680ms steps(2, end) infinite; }

.boss-victory .boss-sprite { animation: boss-victory-fall 1200ms ease-in both; }

.boss-defeat svg { animation: dragon-stage-impact 520ms steps(2, end) both; }
.boss-defeat .boss-sprite { animation: dragon-attack-lunge 680ms steps(3, end) both; }
.boss-defeat .boss-sprite-dragon .dragon-left-wing,
.boss-defeat .boss-sprite-dragon .dragon-right-wing {
  animation: dragon-wing-strike 520ms steps(2, end) both;
}

.defeat-effect,
.battle-fail-mark,
.battle-hit-spark {
  opacity: 0;
}

.boss-defeat .battle-fail-mark { animation: fail-mark-pop 880ms steps(2, end) both; }
.boss-defeat .battle-hit-spark { animation: hit-spark 760ms steps(3, end) both; }

.boss-defeat.defeat-fire .effect-fire,
.boss-defeat.defeat-charge .effect-charge,
.boss-defeat.defeat-magic .effect-magic,
.boss-defeat.defeat-tail .effect-tail,
.boss-defeat.defeat-gust .effect-gust,
.boss-defeat.defeat-crystal .effect-crystal,
.boss-defeat.defeat-void .effect-void,
.boss-defeat.defeat-bite .effect-bite,
.boss-defeat.defeat-shockwave .effect-shockwave,
.boss-defeat.defeat-purple-flame .effect-purple-flame,
.boss-defeat.defeat-creeper-explode .effect-creeper-explode,
.boss-defeat.defeat-creeper-jump .effect-creeper-jump,
.boss-defeat.defeat-creeper-panic .effect-creeper-panic,
.boss-defeat.defeat-zombie-grab .effect-zombie-grab,
.boss-defeat.defeat-zombie-horde .effect-zombie-horde,
.boss-defeat.defeat-zombie-bite .effect-zombie-bite,
.boss-defeat.defeat-skeleton-arrow .effect-skeleton-arrow,
.boss-defeat.defeat-skeleton-kite .effect-skeleton-kite,
.boss-defeat.defeat-skeleton-volley .effect-skeleton-volley,
.boss-defeat.defeat-brute-axe .effect-brute-axe,
.boss-defeat.defeat-brute-charge .effect-brute-charge,
.boss-defeat.defeat-brute-squad .effect-brute-squad,
.boss-defeat.defeat-wither-skull .effect-wither-skull,
.boss-defeat.defeat-wither-aura .effect-wither-aura,
.boss-defeat.defeat-wither-charge .effect-wither-charge,
.boss-defeat.defeat-guardian-laser .effect-guardian-laser,
.boss-defeat.defeat-guardian-curse .effect-guardian-curse,
.boss-defeat.defeat-guardian-spike .effect-guardian-spike,
.boss-defeat.defeat-warden-sonic .effect-warden-sonic,
.boss-defeat.defeat-warden-smell .effect-warden-smell,
.boss-defeat.defeat-warden-dark .effect-warden-dark {
  animation: defeat-effect-burst 1100ms steps(3, end) both;
}

.boss-defeat.defeat-charge .effect-charge,
.boss-defeat.defeat-gust .effect-gust,
.boss-defeat.defeat-skeleton-arrow .effect-skeleton-arrow,
.boss-defeat.defeat-skeleton-kite .effect-skeleton-kite,
.boss-defeat.defeat-brute-charge .effect-brute-charge,
.boss-defeat.defeat-wither-charge .effect-wither-charge,
.boss-defeat.defeat-guardian-laser .effect-guardian-laser {
  animation-name: defeat-line-sweep;
}

.boss-defeat.defeat-shockwave .effect-shockwave,
.boss-defeat.defeat-void .effect-void,
.boss-defeat.defeat-creeper-explode .effect-creeper-explode,
.boss-defeat.defeat-warden-sonic .effect-warden-sonic {
  animation-name: defeat-ground-wave;
}

.boss-defeat.defeat-crystal .effect-crystal,
.boss-defeat.defeat-bite .effect-bite,
.boss-defeat.defeat-skeleton-volley .effect-skeleton-volley,
.boss-defeat.defeat-zombie-bite .effect-zombie-bite,
.boss-defeat.defeat-warden-dark .effect-warden-dark {
  animation-name: defeat-flash;
}

.battle-result {
  min-height: 44px;
  border-radius: 8px;
  padding: 10px;
  background: #f8fafc;
}

.battle-result strong,
.battle-result span {
  display: block;
}

.battle-event {
  margin-top: 10px;
  border-radius: 8px;
  padding: 10px;
  color: #111827;
}

.battle-event b,
.battle-event p {
  display: block;
  margin: 0;
}

.battle-event p {
  margin-top: 4px;
}

.battle-event.egg {
  border: 1px solid #a7f3d0;
  background: #d1fae5;
}

.battle-event.defeat {
  border: 1px solid #fecdd3;
  background: #ffe4e6;
}

.battle-result.win {
  background: #ecfdf5;
  color: var(--green);
}

.battle-result.lose {
  background: #fff1f2;
  color: var(--red);
}

@keyframes dragon-fly {
  0% {
    transform: translate(-10px, 4px);
  }
  35% {
    transform: translate(10px, -10px);
  }
  70% {
    transform: translate(-2px, 6px);
  }
  100% {
    transform: translate(-10px, 4px);
  }
}

@keyframes dragon-left-wing-flap {
  50% {
    transform: translateY(9px);
  }
}

@keyframes dragon-right-wing-flap {
  50% {
    transform: translateY(9px);
  }
}

@keyframes dragon-aura-pulse {
  50% {
    opacity: .72;
    transform: scale(1.06);
  }
}

@keyframes dragon-stage-impact {
  20% {
    transform: translate(-5px, 3px);
  }
  42% {
    transform: translate(5px, -2px);
  }
  64% {
    transform: translate(-3px, 1px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes dragon-attack-lunge {
  0% {
    transform: translate(0, 0);
  }
  45% {
    transform: translate(-18px, 8px);
  }
  100% {
    transform: translate(0, 0);
  }
}

@keyframes dragon-wing-strike {
  50% {
    transform: translateY(12px);
  }
}

@keyframes dragon-victory-rise {
  0% {
    transform: translate(0, 6px);
  }
  50% {
    transform: translate(0, -18px);
  }
  100% {
    transform: translate(0, -8px);
  }
}

@keyframes defeat-effect-burst {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(.82);
  }
  24% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-6px) scale(1.06);
  }
}

@keyframes defeat-line-sweep {
  0% {
    opacity: 0;
    transform: translateX(44px);
  }
  24% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(-42px);
  }
}

@keyframes defeat-ground-wave {
  0% {
    opacity: 0;
    transform: scaleX(.45);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scaleX(1.12);
  }
}

@keyframes defeat-flash {
  0%,
  100% {
    opacity: 0;
  }
  18%,
  42%,
  68% {
    opacity: 1;
  }
}

@keyframes fail-mark-pop {
  0% {
    opacity: 0;
    transform: scale(.5);
  }
  24%,
  74% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(.9);
  }
}

@keyframes hit-spark {
  0% {
    opacity: 0;
  }
  30%,
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes creeper-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

@keyframes zombie-shuffle {
  0%, 100% { transform: translateX(0) rotate(0); }
  25% { transform: translateX(-4px) rotate(-1deg); }
  75% { transform: translateX(4px) rotate(1deg); }
}

@keyframes skeleton-aim {
  0%, 100% { transform: translateY(0); }
  40% { transform: translate(-2px, -3px); }
  60% { transform: translate(2px, 3px); }
}

@keyframes piglin-stomp {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(3px) scale(1.02); }
}

@keyframes wither-hover {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes wither-skull-l {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px) translateX(-3px); }
}

@keyframes wither-skull-r {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px) translateX(3px); }
}

@keyframes guardian-glow {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

@keyframes warden-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50% { transform: scale(1.02); filter: brightness(1.4); }
}

@keyframes boss-victory-fall {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  60% { transform: translateY(20px) rotate(-8deg); opacity: 0.8; }
  100% { transform: translateY(40px) rotate(-12deg); opacity: 0; }
}

/* Weapon attack overlays */
.boss-stage {
  position: relative;
}

.attack-fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
}

.attack-fx svg,
.boss-stage .attack-fx {
  width: 100%;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
}

.attack-fx-sword .attack-slash-left,
.attack-fx-sword .attack-slash-right,
.attack-fx-sword .attack-spark,
.attack-fx-axe .attack-axe-left,
.attack-fx-axe .attack-axe-right,
.attack-fx-axe .attack-axe-impact,
.attack-fx-bow .attack-arrow-left,
.attack-fx-bow .attack-arrow-trail-left,
.attack-fx-bow .attack-arrow-right,
.attack-fx-bow .attack-arrow-trail-right,
.attack-fx-crossbow .attack-bolt-left,
.attack-fx-crossbow .attack-bolt-trail-left,
.attack-fx-crossbow .attack-bolt-right,
.attack-fx-crossbow .attack-bolt-trail-right,
.attack-fx-trident .attack-trident-left,
.attack-fx-trident .attack-trident-trail-left,
.attack-fx-trident .attack-trident-right,
.attack-fx-trident .attack-trident-trail-right,
.attack-fx-unarmed .attack-fist-left,
.attack-fx-unarmed .attack-fist-right,
.attack-fx-unarmed .attack-fist-spark {
  opacity: 0;
}

/* Show overlays when battle resolves */
.boss-stage[class*="attack-"] .attack-fx { opacity: 1; }

/* Sword: dual converging slashes from upper-left and upper-right */
.attack-sword .attack-fx-sword .attack-slash-left {
  animation: attack-slash-left 1100ms ease-out infinite;
}
.attack-sword .attack-fx-sword .attack-slash-right {
  animation: attack-slash-right 1100ms ease-out infinite;
}
.attack-sword .attack-fx-sword .attack-spark {
  animation: attack-spark-burst 900ms ease-out 380ms infinite;
}

/* Axe: dual chops from top-left and top-right */
.attack-axe .attack-fx-axe .attack-axe-left {
  animation: attack-axe-fall-left 1100ms cubic-bezier(.55, .06, .68, .19) infinite;
}
.attack-axe .attack-fx-axe .attack-axe-right {
  animation: attack-axe-fall-right 1100ms cubic-bezier(.55, .06, .68, .19) infinite;
}
.attack-axe .attack-fx-axe .attack-axe-impact {
  animation: attack-impact-flash 900ms ease-out 600ms infinite;
}

/* Bow: arrows from far left + far right converging */
.attack-bow .attack-fx-bow .attack-arrow-left,
.attack-bow .attack-fx-bow .attack-arrow-trail-left {
  animation: attack-arrow-left 1200ms cubic-bezier(.4, 0, .2, 1) infinite;
}
.attack-bow .attack-fx-bow .attack-arrow-right,
.attack-bow .attack-fx-bow .attack-arrow-trail-right {
  animation: attack-arrow-right 1200ms cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Crossbow: faster bolts from both sides */
.attack-crossbow .attack-fx-crossbow .attack-bolt-left,
.attack-crossbow .attack-fx-crossbow .attack-bolt-trail-left {
  animation: attack-arrow-left 850ms cubic-bezier(.3, 0, .1, 1) infinite;
}
.attack-crossbow .attack-fx-crossbow .attack-bolt-right,
.attack-crossbow .attack-fx-crossbow .attack-bolt-trail-right {
  animation: attack-arrow-right 850ms cubic-bezier(.3, 0, .1, 1) infinite;
}

/* Trident: thrusts from both sides with overshoot */
.attack-trident .attack-fx-trident .attack-trident-left,
.attack-trident .attack-fx-trident .attack-trident-trail-left {
  animation: attack-thrust-left 1300ms cubic-bezier(.34, 1.56, .64, 1) infinite;
}
.attack-trident .attack-fx-trident .attack-trident-right,
.attack-trident .attack-fx-trident .attack-trident-trail-right {
  animation: attack-thrust-right 1300ms cubic-bezier(.34, 1.56, .64, 1) infinite;
}

/* Unarmed: dual fists punching from both sides */
.attack-unarmed .attack-fx-unarmed .attack-fist-left {
  animation: attack-punch-left 950ms ease-out infinite;
}
.attack-unarmed .attack-fx-unarmed .attack-fist-right {
  animation: attack-punch-right 950ms ease-out infinite;
}
.attack-unarmed .attack-fx-unarmed .attack-fist-spark {
  animation: attack-spark-burst 900ms ease-out 360ms infinite;
}

/* When the outcome is locked in, stop looping and play one final dramatic strike */
.boss-stage.battle-locked .attack-fx-sword .attack-slash-left,
.boss-stage.battle-locked .attack-fx-sword .attack-slash-right,
.boss-stage.battle-locked .attack-fx-sword .attack-spark,
.boss-stage.battle-locked .attack-fx-axe .attack-axe-left,
.boss-stage.battle-locked .attack-fx-axe .attack-axe-right,
.boss-stage.battle-locked .attack-fx-axe .attack-axe-impact,
.boss-stage.battle-locked .attack-fx-bow .attack-arrow-left,
.boss-stage.battle-locked .attack-fx-bow .attack-arrow-trail-left,
.boss-stage.battle-locked .attack-fx-bow .attack-arrow-right,
.boss-stage.battle-locked .attack-fx-bow .attack-arrow-trail-right,
.boss-stage.battle-locked .attack-fx-crossbow .attack-bolt-left,
.boss-stage.battle-locked .attack-fx-crossbow .attack-bolt-trail-left,
.boss-stage.battle-locked .attack-fx-crossbow .attack-bolt-right,
.boss-stage.battle-locked .attack-fx-crossbow .attack-bolt-trail-right,
.boss-stage.battle-locked .attack-fx-trident .attack-trident-left,
.boss-stage.battle-locked .attack-fx-trident .attack-trident-trail-left,
.boss-stage.battle-locked .attack-fx-trident .attack-trident-right,
.boss-stage.battle-locked .attack-fx-trident .attack-trident-trail-right,
.boss-stage.battle-locked .attack-fx-unarmed .attack-fist-left,
.boss-stage.battle-locked .attack-fx-unarmed .attack-fist-right,
.boss-stage.battle-locked .attack-fx-unarmed .attack-fist-spark {
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

/* Sword slashes converge from upper-left and upper-right */
@keyframes attack-slash-left {
  0% { opacity: 0; transform: translate(-90px, -40px) rotate(-12deg); }
  20% { opacity: 1; }
  55% { opacity: 1; transform: translate(60px, 0) rotate(0); }
  85% { opacity: .8; transform: translate(70px, 8px) rotate(6deg); }
  100% { opacity: 0; transform: translate(80px, 16px) rotate(10deg); }
}

@keyframes attack-slash-right {
  0% { opacity: 0; transform: translate(90px, -40px) rotate(12deg); }
  20% { opacity: 1; }
  55% { opacity: 1; transform: translate(-60px, 0) rotate(0); }
  85% { opacity: .8; transform: translate(-70px, 8px) rotate(-6deg); }
  100% { opacity: 0; transform: translate(-80px, 16px) rotate(-10deg); }
}

@keyframes attack-spark-burst {
  0% { opacity: 0; transform: scale(.3); }
  35% { opacity: 1; transform: scale(1.4); }
  60% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.6); }
}

/* Axe falls from top-left and top-right */
@keyframes attack-axe-fall-left {
  0% { opacity: 0; transform: translate(-40px, -90px) rotate(-25deg); }
  20% { opacity: 1; }
  60% { opacity: 1; transform: translate(60px, 60px) rotate(0); }
  100% { opacity: 0; transform: translate(70px, 70px) rotate(8deg); }
}

@keyframes attack-axe-fall-right {
  0% { opacity: 0; transform: translate(40px, -90px) rotate(25deg); }
  20% { opacity: 1; }
  60% { opacity: 1; transform: translate(-60px, 60px) rotate(0); }
  100% { opacity: 0; transform: translate(-70px, 70px) rotate(-8deg); }
}

@keyframes attack-impact-flash {
  0% { opacity: 0; transform: scaleX(.3); }
  35% { opacity: 1; transform: scaleX(1.1); }
  70% { opacity: .9; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.3); }
}

/* Arrows / bolts fly from far left or far right toward center */
@keyframes attack-arrow-left {
  0% { opacity: 0; transform: translateX(-40px); }
  20% { opacity: 1; }
  85% { opacity: 1; transform: translateX(190px); }
  100% { opacity: 0; transform: translateX(210px); }
}

@keyframes attack-arrow-right {
  0% { opacity: 0; transform: translateX(40px); }
  20% { opacity: 1; }
  85% { opacity: 1; transform: translateX(-190px); }
  100% { opacity: 0; transform: translateX(-210px); }
}

/* Tridents thrust inward and pull back */
@keyframes attack-thrust-left {
  0% { opacity: 0; transform: translateX(-80px); }
  25% { opacity: 1; }
  55% { opacity: 1; transform: translateX(110px); }
  80% { transform: translateX(70px); }
  100% { opacity: 0; transform: translateX(40px); }
}

@keyframes attack-thrust-right {
  0% { opacity: 0; transform: translateX(80px); }
  25% { opacity: 1; }
  55% { opacity: 1; transform: translateX(-110px); }
  80% { transform: translateX(-70px); }
  100% { opacity: 0; transform: translateX(-40px); }
}

/* Fists punch in from each side and meet in the middle */
@keyframes attack-punch-left {
  0% { opacity: 0; transform: translateX(-40px) scale(.7); }
  30% { opacity: 1; transform: translateX(140px) scale(1.15); }
  55% { opacity: 1; transform: translateX(120px) scale(1); }
  85% { opacity: .9; transform: translateX(60px) scale(.95); }
  100% { opacity: 0; transform: translateX(0) scale(.9); }
}

@keyframes attack-punch-right {
  0% { opacity: 0; transform: translateX(40px) scale(.7); }
  30% { opacity: 1; transform: translateX(-140px) scale(1.15); }
  55% { opacity: 1; transform: translateX(-120px) scale(1); }
  85% { opacity: .9; transform: translateX(-60px) scale(.95); }
  100% { opacity: 0; transform: translateX(0) scale(.9); }
}

/* Result banner */
.battle-banner {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  pointer-events: none;
  font-weight: 900;
  letter-spacing: 2px;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.55);
  background: transparent;
  opacity: 1;
  transition: background 200ms ease-out;
  z-index: 4;
}

/* Rolling state — fast, jittery flicker before lock */
.battle-banner.rolling {
  animation: battle-banner-flicker 180ms steps(2, end) infinite;
}

.battle-banner.rolling .zh-main {
  font-size: 30px;
  letter-spacing: 6px;
  filter: blur(.4px);
}

.battle-banner.rolling .en-sub {
  font-size: 16px;
  letter-spacing: 3px;
  filter: blur(.3px);
}

@keyframes battle-banner-flicker {
  0% { transform: scale(.95) translateX(-2px); }
  50% { transform: scale(1.04) translateX(2px); }
  100% { transform: scale(1) translateX(-1px); }
}

/* Locked-in dramatic reveal */
.battle-banner.locked {
  animation: battle-banner-lock 1300ms cubic-bezier(.18, 1.5, .4, 1) both;
}

.battle-banner.battle-banner-win.locked {
  background: transparent;
}

.battle-banner.battle-banner-lose.locked {
  background: transparent;
}

.battle-banner.locked .zh-main {
  font-size: 38px;
}

.battle-banner.locked .en-sub {
  font-size: 18px;
}

@keyframes battle-banner-lock {
  0% { opacity: 0; transform: scale(.4) rotate(-6deg); filter: blur(6px); }
  18% { opacity: 1; transform: scale(1.6) rotate(2deg); filter: blur(0); }
  35% { transform: scale(.92) rotate(-1deg); }
  50% { transform: scale(1.12) rotate(.5deg); }
  62% { transform: scale(.98); }
  74% { transform: scale(1.04); }
  100% { transform: scale(1) rotate(0); }
}

/* Subtle screen-shake on the stage when locking in */
.boss-stage.battle-locked {
  animation: stage-shake 600ms steps(8, end) both;
}

@keyframes stage-shake {
  0%, 100% { transform: translate(0, 0); }
  10% { transform: translate(-3px, 1px); }
  20% { transform: translate(4px, -2px); }
  30% { transform: translate(-2px, 3px); }
  40% { transform: translate(3px, 1px); }
  50% { transform: translate(-4px, -1px); }
  60% { transform: translate(2px, 2px); }
  70% { transform: translate(-1px, -2px); }
  80% { transform: translate(1px, 1px); }
}

.battle-banner .zh-main {
  font-size: 44px;
  letter-spacing: 8px;
}

.battle-banner .en-sub {
  font-size: 22px;
  margin-top: 4px;
  letter-spacing: 4px;
}

.battle-banner-win {
  color: #fef3c7;
}

.battle-banner-win .zh-main {
  color: #fde047;
  text-shadow: 0 0 14px rgba(250, 204, 21, 0.8), 0 2px 8px rgba(0, 0, 0, 0.7);
}

.battle-banner-win .en-sub {
  color: #fef9c3;
}

.battle-banner-lose {
  color: #fee2e2;
}

.battle-banner-lose .zh-main {
  color: #f87171;
  text-shadow: 0 0 14px rgba(220, 38, 38, 0.8), 0 2px 8px rgba(0, 0, 0, 0.7);
}

.battle-banner-lose .en-sub {
  color: #fecaca;
}

/* battle-banner-pop replaced by battle-banner-flicker + battle-banner-lock */

.battle-record-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.battle-record-list {
  display: grid;
  gap: 10px;
}

.battle-record-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #ffffff;
}

.battle-record-row p {
  margin: 3px 0 0;
  color: #374151;
}

.battle-record-row.success {
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.battle-record-row.failed {
  border-color: #fecdd3;
  background: #fff7f8;
}

.battle-record-rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #111827;
  color: #ffffff;
  font-weight: 900;
}

.battle-record-row .tag-line {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin-top: 4px;
}

.spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 16px;
}

.spec-panel h3 {
  margin-bottom: 14px;
}

.setup-card {
  max-width: 760px;
  margin-bottom: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.setup-card h3 {
  margin: 0 0 8px;
}

.setup-form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.setup-form label {
  display: grid;
  gap: 6px;
  font-weight: 800;
}

.setup-env-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.setup-env-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.setup-env-row.ok strong {
  color: var(--green);
}

.setup-env-row.missing strong {
  color: var(--red);
}

.setup-game-card {
  max-width: 1100px;
}

.setup-game-config-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.setup-weapon-config {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  overflow: hidden;
}

.setup-weapon-config summary {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  cursor: pointer;
  font-weight: 900;
}

.setup-weapon-config summary small {
  color: var(--muted);
  font-weight: 800;
}

.setup-weapon-fields {
  display: grid;
  gap: 14px;
  padding: 0 12px 14px;
}

.setup-weapon-fields label {
  display: grid;
  gap: 5px;
  font-weight: 800;
}

.setup-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.setup-recipe-grid input,
.weapon-success-rate {
  min-width: 0;
}

.spec-table,
.spec-list {
  display: grid;
  gap: 10px;
}

.spec-table > div,
.spec-list p {
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #f8fafc;
}

.spec-table strong,
.spec-table span,
.spec-table small {
  display: block;
}

.spec-table strong {
  color: #111827;
  font-size: 18px;
}

.spec-table span,
.spec-list .zh-main {
  margin-top: 4px;
  color: #111827;
  font-size: 18px;
  font-weight: 900;
}

.spec-table small,
.spec-list .en-sub {
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.empty-state {
  background: #ffffff;
  border: 1px dashed #9bb2c8;
  border-radius: 8px;
  padding: 22px;
  color: var(--muted);
}

.hidden {
  display: none !important;
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-tabs {
    grid-template-columns: repeat(5, minmax(100px, 1fr));
    overflow-x: auto;
  }

  .topbar,
  .learn-grid {
    grid-template-columns: 1fr;
  }

  .topbar {
    display: grid;
  }
}

/* Companion world MVP */
.pokemon-summary-grid,
.pokemon-play-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr);
  gap: 1rem;
}
.word-list-panel > .panel-heading { align-items: flex-start; }
.word-list-panel > .panel-heading h3 { flex: 0 0 auto; white-space: nowrap; }
.word-list-heading-actions { display: flex; align-items: flex-start; gap: .65rem; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
.word-sort-control { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .78rem; font-weight: 700; }
.word-sort-control select { padding: .35rem .5rem; border: 1px solid var(--line); border-radius: .45rem; background: #fff; color: var(--ink); }
.word-initial-control { align-items: flex-start; flex: 1 1 auto; min-width: 0; }
.initial-picker { display: flex; flex-wrap: wrap; gap: .3rem; width: min(37rem, 100%); min-width: 0; }
.initial-button {
  min-width: 2rem;
  height: 2rem;
  padding: 0 .35rem;
  border: 1px solid var(--line);
  border-radius: .45rem;
  background: #fff;
  color: var(--ink);
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
}
.initial-button:hover,
.initial-button:focus-visible { border-color: var(--blue); color: var(--blue-dark); }
.initial-button.is-selected { border-color: var(--blue); background: var(--blue); color: #fff; }
.pokemon-map-side { display: grid; gap: 1rem; align-content: start; }
.pokemon-map-side .pokemon-inventory-panel { order: 0; }
.pokemon-map-side .pokemon-encounter-panel { order: 1; }

.pokemon-map-grid {
  --map-ink: #172b38;
  position: relative;
  isolation: isolate;
  min-height: clamp(420px, 54vw, 610px);
  margin: 1rem 0;
  overflow: hidden;
  border: 1px solid rgba(23, 65, 72, .68);
  border-radius: 1.25rem;
  background: #83c8ba;
  box-shadow: inset 0 0 0 5px rgba(255,255,255,.16), 0 18px 42px rgba(26, 54, 52, .24);
  perspective: 1000px;
  transform-style: preserve-3d;
}
.pokemon-map-grid::before,
.pokemon-map-grid.pokemon-map-exploring { animation: pokemon-map-scan 1.1s ease-in-out infinite; }
.pokemon-map-grid.pokemon-map-exploring .pokemon-map-route-highlight { animation-duration: .75s; stroke-width: 11; }
.pokemon-map-grid.pokemon-map-exploring .pokemon-terrain-beacons { animation-duration: .8s; }
.pokemon-map-grid::after {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  content: "";
}
.pokemon-map-grid::before {
  inset: 0;
  background: linear-gradient(125deg, rgba(255,255,255,.26), transparent 34%, rgba(11,47,55,.2));
  mix-blend-mode: soft-light;
}
.pokemon-map-grid::after {
  inset: 0;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: inherit;
  box-shadow: inset 0 -30px 46px rgba(16, 42, 46, .18);
}
.pokemon-map-terrain {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.pokemon-terrain-zone { opacity: .92; }
.pokemon-terrain-water { opacity: .86; }
.pokemon-terrain-river { vector-effect: non-scaling-stroke; }
.pokemon-terrain-trees,
.pokemon-terrain-mountains,
.pokemon-terrain-ruins,
.pokemon-terrain-beacons,
.pokemon-terrain-bridge { opacity: .8; }
.pokemon-terrain-beacons { animation: pokemon-beacon-pulse 2.4s ease-in-out infinite; transform-origin: center; }
.pokemon-map-route-shadow,
.pokemon-map-route,
.pokemon-map-route-highlight { vector-effect: non-scaling-stroke; }
.pokemon-map-route { filter: drop-shadow(0 2px 1px rgba(26, 54, 52, .35)); }
.pokemon-map-route-highlight { animation: pokemon-route-shimmer 2.2s linear infinite; }
.pokemon-map-nodes { position: absolute; inset: 0; z-index: 2; }
.pokemon-map-zone-tag {
  position: absolute;
  z-index: 2;
  display: grid;
  gap: .1rem;
  padding: .38rem .62rem;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: .7rem;
  background: rgba(10, 31, 39, .44);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  pointer-events: none;
  backdrop-filter: blur(5px);
}
.pokemon-map-zone-tag strong { font-size: .82rem; letter-spacing: .04em; }
.pokemon-map-zone-tag small { color: rgba(255,255,255,.78); font-size: .62rem; }
.pokemon-zone-tag-greenbloom { top: 1rem; left: 1rem; }
.pokemon-zone-tag-blueveil { top: calc(33.333% + .3rem); left: 1rem; }
.pokemon-zone-tag-redvein { top: calc(66.666% + .3rem); left: 1rem; }

.pokemon-map-node {
  position: absolute;
  left: var(--node-x);
  top: var(--node-y);
  display: grid;
  place-items: center;
  width: clamp(34px, 7.2%, 72px);
  min-height: clamp(44px, 9.4%, 64px);
  padding: .22rem .18rem .28rem;
  border: 1px solid rgba(32, 60, 66, .55);
  border-radius: .65rem .65rem .8rem .8rem;
  color: var(--map-ink);
  text-align: center;
  transform: translate(-50%, -50%) translateZ(5px) skewY(-2deg);
  transform-style: preserve-3d;
  transition: left 520ms cubic-bezier(.2,.8,.28,1), top 520ms cubic-bezier(.2,.8,.28,1), transform 220ms ease, filter 220ms ease;
  box-shadow: 0 7px 0 rgba(16, 54, 55, .26), 0 12px 15px rgba(20, 52, 56, .25), inset 0 1px 0 rgba(255,255,255,.56);
}
.pokemon-map-node::after {
  position: absolute;
  right: 3px;
  bottom: -7px;
  left: 3px;
  height: 8px;
  border-radius: 0 0 .45rem .45rem;
  background: rgba(19, 54, 58, .32);
  content: "";
  transform: skewX(-28deg);
  transform-origin: top;
  z-index: -1;
}
.pokemon-map-node:hover,
.pokemon-map-node:focus-visible { filter: brightness(1.12) saturate(1.12); transform: translate(-50%, -56%) translateZ(18px) skewY(-2deg); }
.pokemon-map-node strong,
.pokemon-map-node small,
.pokemon-node-icon { position: relative; z-index: 1; display: block; }
.pokemon-map-node strong { font-size: .72rem; line-height: 1; }
.pokemon-node-icon { min-height: 1rem; font-size: clamp(.78rem, 1.9vw, 1.12rem); line-height: 1.1; }
.pokemon-map-node small { overflow: hidden; max-width: 100%; color: rgba(23,43,56,.82); font-size: clamp(.42rem, .75vw, .6rem); font-weight: 800; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.pokemon-map-node.pokemon-region-greenbloom { background: linear-gradient(150deg, #d8f4bc, #78bf83); }
.pokemon-map-node.pokemon-region-blueveil { background: linear-gradient(150deg, #c8f3ee, #62b7d2); }
.pokemon-map-node.pokemon-region-redvein { background: linear-gradient(150deg, #ffc88d, #bb6370); }
.pokemon-map-node.pokemon-node-grass,
.pokemon-map-node.pokemon-node-rare_grass { border-color: rgba(33, 105, 72, .65); }
.pokemon-map-node.pokemon-node-minigame { border-color: rgba(36, 94, 149, .7); }
.pokemon-map-node.pokemon-node-item { border-color: rgba(151, 94, 37, .68); }
.pokemon-map-node.pokemon-node-boss_gate { border-color: #ffe17b; background: linear-gradient(150deg, #fff1a9, #db8a4f); box-shadow: 0 7px 0 rgba(79, 45, 44, .4), 0 0 0 4px rgba(255,226,117,.24), 0 14px 18px rgba(20, 52, 56, .28); }
.pokemon-map-node.visited { filter: saturate(.66) brightness(.88); opacity: .76; }
.pokemon-map-node.current { z-index: 4; border-color: #fff5b0; color: #432b27; filter: saturate(1.15) brightness(1.08); box-shadow: 0 8px 0 rgba(108, 63, 32, .35), 0 0 0 5px rgba(255,231,133,.44), 0 0 28px rgba(255,236,139,.82); transform: translate(-50%, -56%) translateZ(25px) skewY(-2deg); }
.pokemon-map-node.path-next { box-shadow: 0 7px 0 rgba(16, 54, 55, .26), 0 0 0 3px rgba(244, 231, 177, .64), 0 12px 15px rgba(20, 52, 56, .25); }
.pokemon-map-node.arrived { animation: pokemon-node-arrive 620ms cubic-bezier(.2, 1.4, .4, 1) both; }
.pokemon-map-player-layer { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.pokemon-map-player { position: absolute; left: var(--player-x, 5%); top: var(--player-y, 8.333%); width: clamp(34px, 6.2vw, 52px); height: auto; will-change: left, top; transform: translate(-50%, -72%) translateZ(38px); transition: left 620ms cubic-bezier(.2,.85,.25,1), top 620ms cubic-bezier(.2,.85,.25,1), transform 260ms ease; filter: drop-shadow(0 7px 4px rgba(10, 32, 38, .4)); }
.pokemon-map-player.moving { transition-duration: 720ms; }
.pokemon-map-player.landed .pokemon-player-avatar { animation: pokemon-player-land 420ms cubic-bezier(.2, 1.6, .4, 1) both; transform-origin: 50% 100%; }
.pokemon-map-play-grid { grid-template-columns: minmax(0, 1fr); }
.pokemon-pokedex-page { min-height: 420px; }
.pokemon-pokedex-page .pokemon-pokedex-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@keyframes pokemon-map-scan { 0%,100% { filter: saturate(1); } 50% { filter: saturate(1.2) brightness(1.06); } }
@keyframes pokemon-node-arrive { 0% { transform: translate(-50%, -50%) translateZ(5px) scale(.82); } 70% { transform: translate(-50%, -56%) translateZ(34px) scale(1.12); } 100% { transform: translate(-50%, -56%) translateZ(25px) scale(1); } }

/* Depth pass: layered light, moving water and a clearer active tile make the route readable at a glance. */
.pokemon-map-grid::before {
  background: radial-gradient(circle at 78% 10%, rgba(255,255,221,.42), transparent 22%), radial-gradient(circle at 18% 82%, rgba(8,47,52,.22), transparent 34%), repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 15px), linear-gradient(125deg, rgba(255,255,255,.28), transparent 34%, rgba(11,47,55,.23));
  opacity: .85;
}
.pokemon-map-terrain { transform: scale(1.008); transform-origin: center; filter: drop-shadow(0 10px 18px rgba(12,45,52,.16)); }
.pokemon-terrain-meadow { filter: saturate(1.08) contrast(1.03); stroke: rgba(213,247,186,.35); stroke-width: 3; }
.pokemon-terrain-water { filter: saturate(1.14) contrast(1.04); stroke: rgba(190,242,248,.34); stroke-width: 3; }
.pokemon-terrain-ember { filter: saturate(1.1) contrast(1.08); stroke: rgba(255,191,135,.3); stroke-width: 3; }
.pokemon-terrain-river { stroke-dasharray: 82 24; animation: pokemon-river-flow 5.2s linear infinite; }
.pokemon-map-route { stroke-width: 23; }
.pokemon-map-route-highlight { stroke-width: 10; opacity: .96; filter: drop-shadow(0 0 5px rgba(255,248,190,.7)); }
.pokemon-map-node.current::before {
  position: absolute;
  inset: -8px;
  z-index: 0;
  border: 2px solid rgba(255,244,166,.92);
  border-radius: .85rem;
  box-shadow: 0 0 0 4px rgba(255,222,108,.2), 0 0 26px rgba(255,225,111,.68);
  content: "";
  pointer-events: none;
  animation: pokemon-current-pulse 1.5s ease-in-out infinite;
}
.pokemon-map-node.current .pokemon-node-icon { animation: pokemon-current-icon 1.1s ease-in-out infinite alternate; }
@keyframes pokemon-river-flow { to { stroke-dashoffset: -106px; } }
@keyframes pokemon-current-pulse { 0%,100% { opacity: .62; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.05); } }
@keyframes pokemon-current-icon { from { transform: translateY(0) rotate(-3deg); } to { transform: translateY(-3px) rotate(3deg); } }

@keyframes pokemon-player-land { 0% { transform: translate(-50%, -72%) translateZ(38px) scale(1); } 45% { transform: translate(-50%, -72%) translateZ(38px) scale(1.18, .84); } 100% { transform: translate(-50%, -72%) translateZ(38px) scale(1); } }
@keyframes pokemon-route-shimmer { to { stroke-dashoffset: -50px; } }
@keyframes pokemon-beacon-pulse { 50% { opacity: .48; } }
@media (max-width: 720px) {
  .pokemon-map-grid { min-height: 430px; border-radius: 1rem; }
  .pokemon-map-node { width: clamp(28px, 8.9%, 46px); min-height: 40px; padding: .18rem .1rem .24rem; border-radius: .48rem; }
  .pokemon-map-node small { display: none; }
  .pokemon-map-node strong { font-size: .62rem; }
  .pokemon-node-icon { font-size: .88rem; }
  .pokemon-map-zone-tag { padding: .26rem .42rem; }
  .pokemon-map-zone-tag strong { font-size: .68rem; }
  .pokemon-map-zone-tag small { display: none; }
  .pokemon-map-player { width: 42px; }
}


@media (prefers-reduced-motion: reduce) {
  .pokemon-map-grid.pokemon-map-exploring, .pokemon-map-node, .pokemon-map-player, .pokemon-map-route-highlight, .pokemon-terrain-beacons { transition: none; animation: none; }
}

.pokemon-map-legend { align-items: center; gap: .5rem .85rem; }
.pokemon-map-legend span { display: inline-flex; align-items: center; gap: .32rem; color: #42606a; font-size: .76rem; font-weight: 750; }
.pokemon-map-legend .legend-meadow { color: #3d8752; }
.pokemon-map-legend .legend-challenge { color: #2872ad; }
.pokemon-map-legend .legend-supply { color: #a66b33; }
.pokemon-map-legend .legend-bridge { color: #248693; }
.pokemon-map-legend .legend-gate { color: #b57919; }

.pokemon-map-controls,
.pokemon-capture-controls,
.pokemon-boss-row,
.pokemon-history-row,
.pokemon-ball-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.pokemon-steps { font-weight: 700; color: var(--accent, #2563eb); }
.pokemon-ball-list,
.pokemon-pokedex-list,
.pokemon-history-list,
.pokemon-boss-pages,
.pokemon-minigame-list { display: grid; gap: 0.55rem; }

.pokemon-ball-row,
.pokemon-pokedex-row,
.pokemon-history-row,
.pokemon-boss-row {
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--line, #d7dce5);
  border-radius: 0.6rem;
  background: var(--surface, #fff);
}
.pokemon-inventory-panel { padding: .8rem 1rem; }
.pokemon-inventory-panel .panel-heading { margin-bottom: .55rem; }
.pokemon-inventory-panel .pokemon-ball-list { display: flex; align-items: center; gap: .9rem; }
.pokemon-inventory-panel .pokemon-ball-row { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .35rem; border: 0; background: transparent; box-shadow: none; }
.pokemon-inventory-panel .pokemon-ball-row strong { font-size: .95rem; color: var(--ink); }
.pokemon-inventory-panel .pokemon-ball-dot { width: 1.25rem; height: 1.25rem; border: 2px solid #334155; box-shadow: inset 0 .35rem rgba(255,255,255,.35); }
.pokemon-ball-row { animation: pokemon-card-enter 360ms ease both; }
.pokemon-ball-row:nth-child(2) { animation-delay: 30ms; }
.pokemon-ball-row:nth-child(3) { animation-delay: 60ms; }
.pokemon-ball-row:nth-child(4) { animation-delay: 90ms; }
.pokemon-ball-row:nth-child(5) { animation-delay: 120ms; }
.pokemon-ball-row:nth-child(6) { animation-delay: 150ms; }
.pokemon-quest-panel { margin-top: 1rem; padding: .8rem; border: 1px solid var(--line); border-radius: .75rem; background: #f8fafc; }
.pokemon-quest-list, .pokemon-activity-list { display: grid; gap: .45rem; }
.pokemon-quest-row, .pokemon-activity-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .65rem; border: 1px solid var(--line); border-radius: .55rem; background: #fff; }
.pokemon-quest-row.ready { border-color: #f59e0b; background: #fffbeb; animation: pokemon-reward-pop 360ms ease both; }
.pokemon-quest-row.claimed { opacity: .62; }
.pokemon-quest-row strong, .pokemon-quest-row small { display: block; }
.pokemon-quest-row small, .pokemon-activity-row small { color: var(--muted); font-size: .75rem; }
.pokemon-quest-action { display: flex; align-items: center; gap: .45rem; white-space: nowrap; color: var(--muted); font-weight: 800; font-size: .8rem; }
.pokemon-activity-list { margin-top: .7rem; }
.pokemon-streak-chip { display: inline-flex; margin: .45rem 0 .7rem; padding: .35rem .6rem; border-radius: 999px; background: #dbeafe; color: #1e40af; font-size: .78rem; font-weight: 900; }
.pokemon-collection-panel { margin-bottom: 1rem; }
.pokemon-collection-bars { display: grid; gap: .6rem; }
.pokemon-collection-row { display: grid; gap: .25rem; }
.pokemon-collection-row > div:first-child { display: flex; justify-content: space-between; gap: .5rem; font-size: .82rem; }
.pokemon-collection-row span { color: var(--muted); }
.pokemon-collection-track { height: 9px; overflow: hidden; border-radius: 999px; background: #e2e8f0; }
.pokemon-collection-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #2563eb, #22c55e); transition: width 360ms ease; }
.pokemon-achievement-list { display: grid; gap: .5rem; margin-top: 1rem; }
.pokemon-achievement-row { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: .55rem; background: #fff; }
.pokemon-achievement-row strong, .pokemon-achievement-row small { display: block; }
.pokemon-achievement-row small { color: var(--muted); font-size: .74rem; }
.pokemon-achievement-row.ready { border-color: #f59e0b; background: #fffbeb; animation: pokemon-reward-pop 360ms ease both; }
.pokemon-achievement-row.claimed { opacity: .6; }
.pokemon-boss-stage { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 150px; overflow: hidden; padding: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: radial-gradient(circle at 20% 40%, color-mix(in srgb, var(--boss-aura, #7c3aed) 22%, transparent), transparent 55%), #0f172a; color: #fff; isolation: isolate; }
.pokemon-boss-aura { position: absolute; inset: -35%; z-index: -1; opacity: .35; background: radial-gradient(circle, var(--boss-aura, #7c3aed), transparent 62%); filter: blur(12px); animation: pokemon-aura-breathe 3.2s ease-in-out infinite; }
.pokemon-boss-avatar { display: grid; place-items: center; z-index: 1; }
.pokemon-boss-stage-copy { display: grid; gap: .22rem; z-index: 1; }
.pokemon-boss-stage-copy strong { font-size: 1.35rem; }
.pokemon-boss-stage-copy span, .pokemon-boss-stage-copy small { color: #cbd5e1; }
.pokemon-boss-stage-attacking .pokemon-boss-avatar { animation: pokemon-boss-attack 620ms ease-in-out infinite alternate; }
.pokemon-boss-stage-hit .pokemon-boss-avatar { animation: pokemon-boss-hit 360ms ease both; }
.pokemon-boss-stage-victory .pokemon-boss-avatar { animation: pokemon-boss-victory 700ms cubic-bezier(.2,1.5,.4,1) both; }
.pokemon-boss-stage-defeat .pokemon-boss-avatar { animation: pokemon-boss-defeat 620ms ease both; filter: grayscale(.8); }
.pokemon-boss-stage-capture-ready .pokemon-boss-avatar { animation: pokemon-capture-ready 900ms ease-in-out infinite alternate; }
.pokemon-boss-stage-victory,
.pokemon-boss-stage-capture-ready { border-color: rgba(74,222,128,.75); box-shadow: 0 0 0 3px rgba(34,197,94,.16), 0 16px 36px rgba(22,101,52,.22); animation: pokemon-raid-stage-win 900ms cubic-bezier(.2,1.25,.35,1) both; }
.pokemon-boss-stage-defeat { border-color: rgba(248,113,113,.75); box-shadow: 0 0 0 3px rgba(239,68,68,.14), 0 16px 36px rgba(127,29,29,.2); animation: pokemon-raid-stage-loss 720ms ease both; }
.raid-interaction-result { display: grid; gap: .25rem; padding: .65rem .75rem; border: 1px solid; border-radius: .65rem; animation: pokemon-minigame-result-pop 420ms ease both; }
.raid-interaction-result-success { border-color: #86efac; background: #f0fdf4; color: #166534; }
.raid-interaction-result-low { border-color: #fcd34d; background: #fffbeb; color: #92400e; }
.raid-interaction-result strong { color: inherit; }
.raid-interaction-result span { color: inherit; font-size: .8rem; }
.raid-interaction-result-low { animation-name: pokemon-minigame-result-wiggle; }
.pokemon-boss-stage-victory .pokemon-boss-stage-copy strong,
.pokemon-boss-stage-capture-ready .pokemon-boss-stage-copy strong { color: #bbf7d0; }
.pokemon-boss-stage-defeat .pokemon-boss-stage-copy strong { color: #fecaca; }
.pokemon-skill-button { margin-top: .35rem; width: fit-content; font-size: .74rem; }
.pokemon-avatar-full { transform-origin: 50% 70%; overflow: visible; }
.pokemon-avatar-full.sprite-state-idle .avatar-body { animation: avatar-idle-bob 2.8s ease-in-out infinite; transform-origin: 50% 100%; }
.pokemon-avatar-full.sprite-state-encounter .avatar-head { animation: avatar-head-bob 900ms ease-in-out infinite; transform-origin: 50% 100%; }
.pokemon-avatar-full.sprite-state-attacking .avatar-body { animation: avatar-body-lunge 520ms ease-in-out both; transform-origin: 50% 80%; }
.pokemon-avatar-full.sprite-state-attacking .avatar-head { animation: avatar-head-strike 520ms ease-in-out both; transform-origin: 50% 70%; }
.pokemon-avatar-full.sprite-state-attacking .avatar-limbs { animation: avatar-limb-strike 520ms ease-in-out both; transform-origin: 50% 60%; }
.pokemon-avatar-full.sprite-state-attacking .avatar-tail { animation: avatar-tail-whip 520ms ease-in-out both; transform-origin: 70% 60%; }
.pokemon-avatar-full.sprite-state-attacking .avatar-wing { animation: avatar-wing-flap 420ms ease-in-out 2; transform-origin: 50% 60%; }
.pokemon-avatar-full.sprite-state-hit .avatar-body { animation: avatar-hit-shake 420ms ease both; }
.pokemon-avatar-full.sprite-state-victory .avatar-body { animation: avatar-victory-hop 720ms cubic-bezier(.2,1.5,.4,1) both; }
.pokemon-avatar-full.sprite-state-victory .avatar-head { animation: avatar-victory-nod 720ms ease both; transform-origin: 50% 100%; }
.pokemon-avatar-full.sprite-state-defeat { filter: grayscale(.8); }
.pokemon-avatar-full.sprite-state-defeat .avatar-body { animation: avatar-defeat-drop 650ms ease both; transform-origin: 50% 100%; }
.pokemon-avatar-full.sprite-state-capture-ready .avatar-body { animation: avatar-capture-glow 900ms ease-in-out infinite alternate; }
.pokemon-avatar-full.sprite-state-attacking .avatar-body,
.pokemon-avatar-full.sprite-state-attacking .avatar-head,
.pokemon-avatar-full.sprite-state-attacking .avatar-limbs,
.pokemon-avatar-full.sprite-state-attacking .avatar-tail,
.pokemon-avatar-full.sprite-state-attacking .avatar-wing { animation-duration: var(--special-duration, 2.2s); animation-iteration-count: 1; }
.pokemon-avatar-full.sprite-state-attacking[data-body-action="bob"] .avatar-body { animation-name: special-body-bob; }
.pokemon-avatar-full.sprite-state-attacking[data-body-action="lunge"] .avatar-body { animation-name: special-body-lunge; }
.pokemon-avatar-full.sprite-state-attacking[data-body-action="spin"] .avatar-body { animation-name: special-body-spin; }
.pokemon-avatar-full.sprite-state-attacking[data-body-action="pulse"] .avatar-body { animation-name: special-body-pulse; }
.pokemon-avatar-full.sprite-state-attacking[data-head-action="nod"] .avatar-head { animation-name: special-head-nod; }
.pokemon-avatar-full.sprite-state-attacking[data-head-action="snap"] .avatar-head { animation-name: special-head-snap; }
.pokemon-avatar-full.sprite-state-attacking[data-head-action="tilt"] .avatar-head { animation-name: special-head-tilt; }
.pokemon-avatar-full.sprite-state-attacking[data-head-action="flash"] .avatar-head { animation-name: special-head-flash; }
.pokemon-avatar-full.sprite-state-attacking[data-limbs-action="reach"] .avatar-limbs { animation-name: special-limbs-reach; }
.pokemon-avatar-full.sprite-state-attacking[data-limbs-action="strike"] .avatar-limbs { animation-name: special-limbs-strike; }
.pokemon-avatar-full.sprite-state-attacking[data-limbs-action="stomp"] .avatar-limbs { animation-name: special-limbs-stomp; }
.pokemon-avatar-full.sprite-state-attacking[data-limbs-action="gather"] .avatar-limbs { animation-name: special-limbs-gather; }
.pokemon-avatar-full.sprite-state-attacking[data-tail-action="sway"] .avatar-tail { animation-name: special-tail-sway; }
.pokemon-avatar-full.sprite-state-attacking[data-tail-action="whip"] .avatar-tail { animation-name: special-tail-whip; }
.pokemon-avatar-full.sprite-state-attacking[data-tail-action="coil"] .avatar-tail { animation-name: special-tail-coil; }
.pokemon-avatar-full.sprite-state-attacking[data-tail-action="flare"] .avatar-tail { animation-name: special-tail-flare; }
.pokemon-avatar-full.sprite-state-attacking[data-wing-action="fold"] .avatar-wing { animation-name: special-wing-fold; }
.pokemon-avatar-full.sprite-state-attacking[data-wing-action="flap"] .avatar-wing { animation-name: special-wing-flap; }
.pokemon-avatar-full.sprite-state-attacking[data-wing-action="spread"] .avatar-wing { animation-name: special-wing-spread; }
.pokemon-avatar-full.sprite-state-attacking[data-wing-action="orbit"] .avatar-wing { animation-name: special-wing-orbit; }
@keyframes special-body-bob { 30% { transform: translateY(-5px); } 70% { transform: translateY(3px); } }
@keyframes special-body-lunge { 35% { transform: translateX(9px) scale(1.05); } }
@keyframes special-body-spin { 55% { transform: rotate(270deg) scale(1.08); } }
@keyframes special-body-pulse { 45% { transform: scale(1.2); filter: brightness(1.7); } }
@keyframes special-head-nod { 40% { transform: rotate(12deg) translateY(4px); } 70% { transform: rotate(-8deg); } }
@keyframes special-head-snap { 45% { transform: translateX(8px) rotate(-12deg); } }
@keyframes special-head-tilt { 50% { transform: rotate(22deg); } }
@keyframes special-head-flash { 40% { filter: brightness(2.2); transform: scale(1.1); } }
@keyframes special-limbs-reach { 50% { transform: scale(1.2) translateY(-3px); } }
@keyframes special-limbs-strike { 35% { transform: translateX(8px) rotate(-20deg); } }
@keyframes special-limbs-stomp { 50% { transform: translateY(5px) scaleY(.8); } }
@keyframes special-limbs-gather { 45% { transform: scale(.8) rotate(12deg); } 75% { transform: scale(1.2); } }
@keyframes special-tail-sway { 35% { transform: rotate(-24deg); } 70% { transform: rotate(26deg); } }
@keyframes special-tail-whip { 45% { transform: rotate(38deg) translateX(5px); } }
@keyframes special-tail-coil { 60% { transform: rotate(300deg) scale(.8); } }
@keyframes special-tail-flare { 45% { transform: scale(1.3) rotate(-12deg); filter: brightness(1.8); } }
@keyframes special-wing-fold { 45% { transform: scaleX(.45) rotate(-12deg); } }
@keyframes special-wing-flap { 35%,70% { transform: scaleY(.55) translateY(-5px); } }
@keyframes special-wing-spread { 50% { transform: scale(1.4) rotate(8deg); } }
@keyframes special-wing-orbit { 60% { transform: rotate(300deg) scale(1.1); } }
.pokemon-avatar-full.sprite-state-attacking[data-body-action="lunge"] .avatar-body { animation: avatar-body-lunge 900ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-body-action="spin"] .avatar-body { animation: avatar-spiral 1000ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-body-action="pulse"] .avatar-body { animation: avatar-pulse 900ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-head-action="snap"] .avatar-head { animation: avatar-head-strike 700ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-head-action="tilt"] .avatar-head { animation: avatar-head-tilt 700ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-head-action="flash"] .avatar-head { animation: avatar-head-flash 700ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-limbs-action="strike"] .avatar-limbs { animation: avatar-limb-strike 800ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-limbs-action="stomp"] .avatar-limbs { animation: avatar-dig 800ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-tail-action="whip"] .avatar-tail { animation: avatar-tail-whip 800ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-tail-action="coil"] .avatar-tail { animation: avatar-tail-coil 800ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-wing-action="flap"] .avatar-wing { animation: avatar-wing-flap 700ms ease-in-out 2; }
.pokemon-avatar-full.sprite-state-attacking[data-wing-action="spread"] .avatar-wing { animation: avatar-wing-burst 800ms ease both; }
.pokemon-avatar-full.sprite-state-attacking .avatar-body,
.pokemon-avatar-full.sprite-state-attacking .avatar-head,
.pokemon-avatar-full.sprite-state-attacking .avatar-limbs,
.pokemon-avatar-full.sprite-state-attacking .avatar-tail,
.pokemon-avatar-full.sprite-state-attacking .avatar-wing { animation-duration: var(--sprite-duration, 2200ms); }
@keyframes avatar-head-tilt { 50% { transform: rotate(12deg) translateY(-2px); } }
@keyframes avatar-head-flash { 50% { transform: scale(1.16); filter: brightness(1.8); } }
@keyframes avatar-tail-coil { 50% { transform: rotate(-24deg) scale(.9); } }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="wave"] .avatar-tail { animation: avatar-tail-wave 500ms ease-in-out both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="quake"] .avatar-limbs { animation: avatar-dig 500ms ease-in-out both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="spiral"] .avatar-body { animation: avatar-spiral 650ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="pulse"] .avatar-body { animation: avatar-pulse 650ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="burst"] .avatar-wing { animation: avatar-wing-burst 650ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="vine"] .avatar-limbs { animation: avatar-limb-grab 650ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="mist"] .avatar-head { animation: avatar-mist-peek 650ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="wind"] .avatar-wing { animation: avatar-wind-flap 480ms ease-in-out 2; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="crystal"] .avatar-body { animation: avatar-crystal-shimmer 650ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="shadow"] .avatar-tail { animation: avatar-shadow-flick 650ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="bolt"] .avatar-head { animation: avatar-bolt-jolt 420ms steps(3) both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="eclipse"] .avatar-body { animation: avatar-eclipse-turn 700ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="gravity"] .avatar-limbs { animation: avatar-gravity-pull 700ms ease both; }
.pokemon-avatar-full.sprite-state-attacking[data-skill-animation="void"] .avatar-head { animation: avatar-void-peek 700ms ease both; }
@keyframes avatar-idle-bob { 50% { transform: translateY(-2px); } }
@keyframes avatar-head-bob { 50% { transform: translateY(-2px) rotate(2deg); } }
@keyframes avatar-body-lunge { 35% { transform: translateX(6px) scale(1.05); } 100% { transform: translateX(0); } }
@keyframes avatar-head-strike { 35% { transform: translateX(5px) rotate(-8deg); } 100% { transform: none; } }
@keyframes avatar-limb-strike { 35% { transform: rotate(-18deg) translate(3px,-2px); } 100% { transform: none; } }
@keyframes avatar-tail-whip { 40% { transform: rotate(24deg); } 100% { transform: none; } }
@keyframes avatar-tail-wave { 25% { transform: rotate(-18deg); } 75% { transform: rotate(22deg); } }
@keyframes avatar-wing-flap { 50% { transform: scaleY(.7) rotate(8deg); } }
@keyframes avatar-wing-burst { 45% { transform: scale(1.25) rotate(12deg); } }
@keyframes avatar-dig { 25% { transform: translateY(3px) rotate(-12deg); } 75% { transform: translateY(-3px) rotate(12deg); } }
@keyframes avatar-spiral { 60% { transform: rotate(300deg) scale(1.08); } }
@keyframes avatar-pulse { 50% { transform: scale(1.2); } }
@keyframes avatar-hit-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
@keyframes avatar-victory-hop { 50% { transform: translateY(-8px) scale(1.08); } }
@keyframes avatar-victory-nod { 50% { transform: rotate(-8deg); } }
@keyframes avatar-defeat-drop { to { transform: translateY(5px) rotate(5deg); opacity: .55; } }
@keyframes avatar-capture-glow { from { filter: drop-shadow(0 0 3px #22c55e); } to { filter: drop-shadow(0 0 14px #22c55e); } }
@keyframes avatar-limb-grab { 40% { transform: scaleX(1.18) rotate(-14deg); } 100% { transform: none; } }
@keyframes avatar-mist-peek { 35% { transform: translateX(-5px) scale(.92); opacity: .7; } 75% { transform: translateX(4px) scale(1.05); } }
@keyframes avatar-wind-flap { 50% { transform: rotateY(35deg) translateY(-4px); } }
@keyframes avatar-crystal-shimmer { 45% { transform: scale(1.12); filter: brightness(1.8) drop-shadow(0 0 10px #67e8f9); } }
@keyframes avatar-shadow-flick { 35% { transform: translateX(7px) rotate(-24deg); } 70% { transform: translateX(-5px) rotate(18deg); } }
@keyframes avatar-bolt-jolt { 30% { transform: translateX(-4px); } 60% { transform: translateX(5px); } }
@keyframes avatar-eclipse-turn { 55% { transform: rotate(180deg) scale(.88); filter: brightness(.55); } }
@keyframes avatar-gravity-pull { 45% { transform: translateY(6px) scaleY(.82); } 80% { transform: translateY(-3px) scaleY(1.05); } }
@keyframes avatar-void-peek { 35% { transform: translateX(-6px) rotate(-12deg); opacity: .5; } 70% { transform: translateX(6px) rotate(12deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .pokemon-avatar-full .avatar-body,
  .pokemon-avatar-full .avatar-head,
  .pokemon-avatar-full .avatar-limbs,
  .pokemon-avatar-full .avatar-tail,
  .pokemon-avatar-full .avatar-wing { animation: none !important; transform: none !important; }
}
.pokemon-skill-fx { position: absolute; inset: 8%; z-index: 3; pointer-events: none; fill: none; stroke: #facc15; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; animation: pokemon-skill-fx-pop 760ms ease both; }
.pokemon-pokedex-row { position: relative; }
.pokemon-pokedex-row .pokemon-skill-fx { inset: 18% 45% auto auto; width: 72px; height: 72px; }
@keyframes pokemon-skill-fx-pop { 0% { opacity: 0; transform: scale(.35) rotate(-12deg); } 35% { opacity: 1; transform: scale(1.15) rotate(8deg); } 100% { opacity: 0; transform: scale(1.45) rotate(24deg); } }
.pokemon-skill-fx-wave { stroke: #38bdf8; }
.pokemon-skill-fx-quake { stroke: #f97316; }
.pokemon-skill-fx-spiral { stroke: #a78bfa; }
.pokemon-skill-fx-pulse { stroke: #22c55e; }
.pokemon-skill-fx-burst { stroke: #facc15; }
.pokemon-battle-minigame { display: grid; gap: .55rem; margin-top: .75rem; padding: .8rem; border: 1px solid #f59e0b; border-radius: .7rem; background: #fffbeb; }
.pokemon-battle-minigame strong { color: #92400e; }
.raid-timing-track { position: relative; height: 1rem; overflow: hidden; border-radius: 999px; background: #fde68a; }
.raid-timing-track::before { content: ''; position: absolute; left: 44%; width: 12%; height: 100%; background: #16a34a; border-radius: inherit; }
.raid-timing-track i { display: block; width: 8%; height: 100%; border-radius: inherit; background: #dc2626; animation: raid-timing-slide 1.8s linear infinite alternate; }
.raid-mash-count { font-size: 1.35rem; font-weight: 900; color: #b45309; }
.pokemon-battle-minigame { display: grid; gap: .5rem; margin-top: .8rem; padding: .8rem; border: 1px solid #fcd34d; border-radius: .7rem; background: #fffbeb; }
.pokemon-battle-minigame > strong { color: #92400e; }
.raid-mode-tabs { display: flex; gap: .4rem; }
.raid-mode-button.active { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; }
.raid-mash-button { width: fit-content; min-width: 120px; }
.raid-quiz-options { display: flex; flex-wrap: wrap; gap: .45rem; }
@keyframes raid-timing-slide { from { transform: translateX(0); } to { transform: translateX(1150%); } }
@media (prefers-reduced-motion: reduce) { .raid-timing-track i { animation: none; transform: translateX(550%); } }
.pokemon-skill-active .pokemon-boss-avatar { z-index: 2; }
.pokemon-skill-arc .pokemon-boss-avatar { animation: pokemon-skill-arc 720ms ease both; }
.pokemon-skill-burst .pokemon-boss-avatar { animation: pokemon-skill-burst 720ms ease both; }
.pokemon-skill-wave .pokemon-boss-avatar { animation: pokemon-skill-wave 720ms ease both; }
.pokemon-skill-quake .pokemon-boss-avatar { animation: pokemon-skill-quake 720ms ease both; }
.pokemon-skill-spiral .pokemon-boss-avatar { animation: pokemon-skill-spiral 720ms ease both; }
.pokemon-skill-pulse .pokemon-boss-avatar { animation: pokemon-skill-pulse 720ms ease both; }
.pokemon-skill-vine .pokemon-boss-avatar { animation: pokemon-skill-arc 720ms ease both; }
.pokemon-skill-mist .pokemon-boss-avatar { animation: pokemon-skill-pulse 720ms ease both; }
.pokemon-skill-wind .pokemon-boss-avatar { animation: pokemon-skill-wave 720ms ease both; }
.pokemon-skill-crystal .pokemon-boss-avatar { animation: pokemon-skill-burst 720ms ease both; }
.pokemon-skill-flare .pokemon-boss-avatar { animation: pokemon-skill-burst 720ms ease both; }
.pokemon-skill-shadow .pokemon-boss-avatar { animation: pokemon-skill-spiral 720ms ease both; }
.pokemon-skill-bolt .pokemon-boss-avatar { animation: pokemon-skill-arc 720ms ease both; }
.pokemon-skill-eclipse .pokemon-boss-avatar { animation: pokemon-skill-pulse 720ms ease both; }
.pokemon-skill-gravity .pokemon-boss-avatar { animation: pokemon-skill-quake 720ms ease both; }
.pokemon-skill-void .pokemon-boss-avatar { animation: pokemon-skill-spiral 720ms ease both; }
@keyframes pokemon-skill-arc { 0% { transform: translateX(0) rotate(0); filter: drop-shadow(0 0 0 transparent); } 45% { transform: translateX(22px) rotate(-8deg); filter: drop-shadow(0 0 16px #facc15); } 100% { transform: translateX(0) rotate(0); } }
@keyframes pokemon-skill-burst { 0% { transform: scale(.9); filter: brightness(1); } 45% { transform: scale(1.2); filter: brightness(2) drop-shadow(0 0 18px #f97316); } 100% { transform: scale(1); } }
@keyframes pokemon-skill-wave { 0% { transform: skewX(0); } 30% { transform: skewX(-14deg) translateX(-6px); } 70% { transform: skewX(14deg) translateX(6px); } 100% { transform: skewX(0); } }
@keyframes pokemon-skill-quake { 0%,100% { transform: translateY(0); } 20% { transform: translateY(5px) rotate(-3deg); } 40% { transform: translateY(-4px) rotate(3deg); } 60% { transform: translateY(5px) rotate(-3deg); } 80% { transform: translateY(-2px) rotate(2deg); } }
@keyframes pokemon-skill-spiral { 0% { transform: rotate(0) scale(1); } 60% { transform: rotate(330deg) scale(1.08); filter: drop-shadow(0 0 13px #a78bfa); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes pokemon-skill-pulse { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 2px var(--boss-aura)); } 50% { transform: scale(1.22); filter: drop-shadow(0 0 25px var(--boss-aura)); } }
.pokemon-pokedex-row.pokemon-skill-active { animation: pokemon-card-skill 650ms ease both; }
@keyframes pokemon-card-skill { 50% { transform: translateY(-4px) scale(1.02); box-shadow: 0 0 0 3px #fde68a; } }
@keyframes pokemon-aura-breathe { 0%,100% { transform: scale(.94); opacity: .28; } 50% { transform: scale(1.05); opacity: .48; } }
@keyframes pokemon-boss-attack { from { transform: translateX(-3px) scale(.98); } to { transform: translateX(8px) scale(1.04); } }
@keyframes pokemon-boss-hit { 25% { transform: translateX(-8px); filter: brightness(2); } 75% { transform: translateX(6px); } }
@keyframes pokemon-boss-victory { 50% { transform: translateY(-10px) scale(1.12); } }
@keyframes pokemon-boss-defeat { to { transform: translateY(9px) rotate(4deg); opacity: .55; } }
@keyframes pokemon-raid-stage-win { 0% { filter: brightness(.72); transform: scale(.99); } 55% { filter: brightness(1.16); transform: scale(1.012); } 100% { filter: brightness(1); transform: scale(1); } }
@keyframes pokemon-raid-stage-loss { 0% { transform: translateX(-5px); } 35% { transform: translateX(5px); } 70% { transform: translateX(-2px); } 100% { transform: translateX(0); } }
@keyframes pokemon-capture-ready { from { filter: drop-shadow(0 0 4px var(--boss-aura)); } to { filter: drop-shadow(0 0 18px var(--boss-aura)); } }
.pokemon-boss-ability-table { margin-top: .7rem; padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; background: #fff; }
.pokemon-ability-title { font-weight: 900; margin-bottom: .4rem; }
.pokemon-ability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.pokemon-ability-grid span { padding: .45rem; border-radius: .45rem; background: #f1f5f9; color: var(--muted); text-align: center; font-size: .8rem; }
.pokemon-ability-grid b { display: block; color: var(--ink); font-size: 1rem; }
.pokemon-ability-note { display: block; margin-top: .45rem; color: var(--muted); font-size: .72rem; }
.pokemon-card-stats { display: flex; gap: .35rem; margin-top: .25rem; color: #2563eb; font-size: .72rem; font-weight: 900; }
.pokemon-pokedex-row { position: relative; transition: transform 180ms ease, box-shadow 180ms ease; }
.pokemon-pokedex-row:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(15,23,42,.08); }
.pokemon-pokedex-row.captured { border-color: #86efac; }
.pokemon-pokedex-row.defeated { border-color: #c4b5fd; }
.pokemon-pokedex-row.seen .pokemon-avatar { animation: pokemon-card-enter 360ms ease both; }
.pokemon-choice-options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.pokemon-encounter-overlay { display: grid; gap: .4rem; padding: .65rem; border: 1px solid #60a5fa; border-radius: .55rem; background: #eff6ff; animation: pokemon-card-enter 300ms ease both; }
.combo-blitz-panel { display: grid; gap: .45rem; padding: .7rem; border: 1px solid #f59e0b; border-radius: .6rem; background: #fffbeb; animation: combo-blitz-enter 260ms ease both; }
.combo-blitz-hud { display: flex; justify-content: space-between; gap: .5rem; color: #92400e; font-size: .82rem; }
.combo-blitz-hud strong { font-size: 1.15rem; }
.combo-blitz-answer.correct { border-color: #16a34a; background: #dcfce7; }
.combo-blitz-answer.wrong { border-color: #dc2626; background: #fee2e2; animation: pokemon-shake 260ms ease both; }
@keyframes combo-blitz-enter { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }
.word-card-draw-panel { display: grid; gap: .65rem; justify-items: center; padding: .7rem; }
.word-card-flip { position: relative; width: min(280px, 100%); min-height: 150px; transform-style: preserve-3d; transition: transform 620ms cubic-bezier(.2,.75,.3,1); }
.word-card-flip.revealed { transform: rotateY(180deg); }
.word-card-face { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: .4rem; padding: 1rem; border: 1px solid #93c5fd; border-radius: .8rem; backface-visibility: hidden; background: #eff6ff; color: #1e3a8a; text-align: center; }
.word-card-face strong { font-size: 1.6rem; }
.word-card-face small { color: var(--muted); }
.word-card-back { transform: rotateY(180deg); background: #f0fdf4; border-color: #86efac; color: #166534; }
.word-card-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.word-roulette-panel { display: grid; justify-items: center; gap: .55rem; padding: .7rem; border: 1px solid #c4b5fd; border-radius: .7rem; background: #f5f3ff; color: #5b21b6; animation: roulette-enter 300ms ease both; }
.word-roulette-wheel { display: grid; place-items: center; width: 104px; height: 104px; border: 8px dotted #8b5cf6; border-radius: 50%; background: #ede9fe; color: #6d28d9; font-size: 1.35rem; font-weight: 900; animation: roulette-spin 950ms cubic-bezier(.2,.85,.35,1) both; }
.word-roulette-panel.revealed .word-roulette-wheel { animation: roulette-reveal 420ms cubic-bezier(.2,1.4,.4,1) both; }
.word-roulette-option.correct { border-color: #16a34a; background: #dcfce7; }
.word-roulette-option.wrong { border-color: #dc2626; background: #fee2e2; animation: pokemon-shake 260ms ease both; }
@keyframes roulette-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes roulette-spin { from { transform: rotate(0) scale(.7); } to { transform: rotate(900deg) scale(1); } }
@keyframes roulette-reveal { 50% { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(139,92,246,.14); } }
.snake-drop-panel { display: grid; gap: .5rem; padding: .65rem; border: 1px solid #67e8f9; border-radius: .65rem; background: linear-gradient(160deg,#ecfeff,#f0fdfa); animation: snake-drop-enter 260ms ease both; }
.snake-drop-hud { display: flex; justify-content: space-between; color: #155e75; font-weight: 900; font-size: .8rem; }
.snake-drop-target { display: flex; align-items: center; justify-content: space-between; gap: .6rem; color: #164e63; }
.snake-spell-slot { display: inline-block; min-width: 1rem; margin-left: .15rem; border-bottom: 2px solid #0891b2; text-align: center; font-weight: 900; }
.snake-spell-slot.filled { color: #15803d; border-color: #16a34a; }
.snake-spell-slot.current { color: #b45309; border-color: #f59e0b; animation: snake-slot-pulse 420ms ease-in-out infinite alternate; }
.snake-drop-lane { position: relative; display: flex; justify-content: space-evenly; gap: .3rem; min-height: 3rem; overflow: hidden; padding: .35rem; border: 1px dashed #67e8f9; border-radius: .5rem; background: repeating-linear-gradient(180deg, transparent 0 16px, rgba(8,145,178,.08) 16px 18px); }
.snake-drop-letter { min-width: 2.1rem; font-size: 1.05rem; font-weight: 900; text-transform: uppercase; animation: snake-letter-fall 420ms linear infinite alternate; }
.snake-drop-letter.falling { border-color: #0891b2; background: #cffafe; box-shadow: 0 0 0 3px rgba(8,145,178,.16); }
.snake-drop-feedback { min-height: 1.1rem; color: #155e75; font-size: .78rem; }
@keyframes snake-drop-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes snake-letter-fall { from { transform: translateY(-2px); } to { transform: translateY(8px); } }
@keyframes snake-slot-pulse { to { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .snake-drop-panel, .snake-drop-letter, .snake-spell-slot.current { animation: none; } }
@media (prefers-reduced-motion: reduce) { .word-card-flip { transition: none; } }
@media (prefers-reduced-motion: reduce) { .word-roulette-wheel, .word-roulette-panel { animation: none; } }
.pokemon-random-reveal { display: grid; gap: .3rem; padding: .7rem; border: 1px dashed #f59e0b; border-radius: .6rem; background: #fffbeb; color: #92400e; animation: random-challenge-reveal 700ms cubic-bezier(.2,1.4,.4,1) both; }
.pokemon-random-reveal.revealed { border-style: solid; background: #f0fdf4; color: #166534; animation: random-challenge-revealed 420ms cubic-bezier(.2,1.4,.4,1) both; }
@keyframes random-challenge-reveal { from { opacity: 0; transform: rotate(-2deg) scale(.94); } 60% { opacity: 1; transform: rotate(2deg) scale(1.04); } to { transform: rotate(0) scale(1); } }
@keyframes random-challenge-revealed { from { opacity: 0; transform: translateY(8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
@media (prefers-reduced-motion: reduce) { .pokemon-random-reveal, .pokemon-random-reveal.revealed { animation: none; } }
.pokemon-hunt-grid { display: grid; grid-template-columns: repeat(6, minmax(36px, 1fr)); gap: .35rem; margin-top: .6rem; }
.pokemon-hunt-cell { min-height: 38px; font-weight: 900; text-transform: uppercase; }
.pokemon-hunt-cell.correct { border-color: #16a34a; background: #dcfce7; color: #166534; }
.pokemon-hunt-cell.wrong { border-color: #dc2626; background: #fee2e2; color: #991b1b; animation: pokemon-shake 260ms ease both; }
.speaking-sentence-panel { display: grid; gap: .55rem; margin-top: 1rem; padding: .8rem; border: 1px solid #bfdbfe; border-radius: .7rem; background: #eff6ff; }
.speaking-sentence-panel .primary-button { width: fit-content; }
.speaking-transcript { margin: 0; color: var(--muted); }
.speaking-errors { margin: 0; color: #b91c1c; font-weight: 800; }
.speaking-errors mark { padding: .12rem .3rem; border-radius: .25rem; color: #991b1b; background: #fecaca; }
@media (prefers-reduced-motion: reduce) {
  .pokemon-boss-aura,
  .pokemon-boss-stage-attacking .pokemon-boss-avatar,
  .pokemon-boss-stage-hit .pokemon-boss-avatar,
  .pokemon-boss-stage-victory .pokemon-boss-avatar,
  .pokemon-boss-stage-defeat .pokemon-boss-avatar,
  .pokemon-boss-stage-capture-ready .pokemon-boss-avatar,
  .pokemon-skill-arc .pokemon-boss-avatar,
  .pokemon-skill-burst .pokemon-boss-avatar,
  .pokemon-skill-wave .pokemon-boss-avatar,
  .pokemon-skill-quake .pokemon-boss-avatar,
  .pokemon-skill-spiral .pokemon-boss-avatar,
  .pokemon-skill-pulse .pokemon-boss-avatar,
  .pokemon-skill-vine .pokemon-boss-avatar,
  .pokemon-skill-mist .pokemon-boss-avatar,
  .pokemon-skill-wind .pokemon-boss-avatar,
  .pokemon-skill-crystal .pokemon-boss-avatar,
  .pokemon-skill-flare .pokemon-boss-avatar,
  .pokemon-skill-shadow .pokemon-boss-avatar,
  .pokemon-skill-bolt .pokemon-boss-avatar,
  .pokemon-skill-eclipse .pokemon-boss-avatar,
  .pokemon-skill-gravity .pokemon-boss-avatar,
  .pokemon-skill-void .pokemon-boss-avatar,
  .pokemon-pokedex-row.pokemon-skill-active,
  .pokemon-avatar-full.sprite-state-encounter .avatar-head,
  .pokemon-avatar-full.sprite-state-captured .avatar-body,
  .pokemon-avatar-full.sprite-state-capture-ready .avatar-tail,
  .pokemon-avatar-full.sprite-state-attacking .avatar-body,
  .pokemon-avatar-full.sprite-state-attacking .avatar-head,
  .pokemon-avatar-full.sprite-state-attacking .avatar-limbs,
  .pokemon-avatar-full.sprite-state-attacking .avatar-tail,
  .pokemon-avatar-full.sprite-state-attacking .avatar-wing,
  .pokemon-skill-fx,
  .pokemon-pokedex-row.seen .pokemon-avatar { animation: none; }
  .pokemon-boss-stage-victory,
  .pokemon-boss-stage-capture-ready,
  .pokemon-boss-stage-defeat,
  .raid-interaction-result { animation: none; }
  .pokemon-pokedex-row { transition: none; }
}

.pokemon-ball-dot {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: var(--ball-color, #64748b);
  vertical-align: middle;
}

.pokemon-pokedex-row { display: grid; grid-template-columns: 5rem 2.5rem minmax(5rem, 1fr) minmax(6rem, auto); align-items: center; gap: 0.65rem; }
.pokemon-pokedex-row.unknown { opacity: 0.55; }
.pokemon-avatar-silhouette-svg { filter: grayscale(1) brightness(.25); opacity: .72; }
.pokemon-pokedex-row small,
.pokemon-boss-row small,
.pokemon-minigame small { display: block; color: var(--text-muted, #64748b); font-size: 0.75rem; }
.pokemon-minigame { text-align: left; }
.pokemon-minigame:disabled,
.pokemon-battle-button:disabled { cursor: not-allowed; opacity: 0.5; }
.pokemon-boss-pages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pokemon-boss-page { padding: 0.8rem; border: 1px solid var(--line, #d7dce5); border-radius: 0.75rem; }
.pokemon-boss-page.locked { background: #f8fafc; opacity: 0.88; }
.pokemon-boss-page.unlocked { border-color: #86efac; box-shadow: 0 4px 14px rgba(22, 163, 74, 0.08); }
.pokemon-gate-condition { color: var(--muted); font-size: 0.76rem; line-height: 1.35; }
.pokemon-boss-row.defeated { border-color: #86efac; background: #f0fdf4; }
.pokemon-encounter-card { display: grid; gap: 0.2rem; padding: 0.8rem; border: 1px solid #fbbf24; border-radius: 0.75rem; background: #fffbeb; }
.pokemon-encounter-card { animation: pokemon-card-enter 360ms ease both; }
.pokemon-capture-countdown { margin-top: .45rem; padding: .45rem; border-radius: .5rem; background: #fef3c7; color: #92400e; font-size: 1.05rem; font-weight: 900; text-align: center; }
.pokemon-capture-ball { position: absolute; top: 1rem; right: 1rem; width: 58px; height: 58px; z-index: 2; }
.pokemon-capture-ball svg { width: 100%; height: 100%; fill: #94a3b8; stroke: #334155; stroke-width: 2.5; filter: drop-shadow(0 3px 2px rgba(15,23,42,.25)); }
.pokemon-capture-ball svg path { fill: none; }
.pokemon-capture-ball svg circle:last-child { fill: #f8fafc; }
.capture-ball-reinforced_ball .pokemon-capture-ball svg { fill: #2563eb; }
.capture-ball-swift_ball .pokemon-capture-ball svg { fill: #0ea5e9; }
.capture-ball-habitat_ball .pokemon-capture-ball svg { fill: #16a34a; }
.capture-ball-twilight_ball .pokemon-capture-ball svg { fill: #7c3aed; }
.capture-ball-starcore_ball .pokemon-capture-ball svg { fill: #f59e0b; }
.pokemon-encounter-card.capture-countdown .pokemon-capture-ball { animation: capture-ball-hover 700ms ease-in-out infinite alternate; }
.pokemon-encounter-card.capture-throwing .pokemon-capture-ball { animation: capture-ball-throw 3000ms cubic-bezier(.2,.8,.3,1) both; }
.pokemon-encounter-card.capture-throwing.capture-ball-swift_ball .pokemon-capture-ball { animation-name: capture-ball-swift; }
.pokemon-encounter-card.capture-throwing.capture-ball-habitat_ball .pokemon-capture-ball { animation-name: capture-ball-leaf; }
.pokemon-encounter-card.capture-throwing.capture-ball-twilight_ball .pokemon-capture-ball { animation-name: capture-ball-twilight; }
.pokemon-encounter-card.capture-throwing.capture-ball-starcore_ball .pokemon-capture-ball { animation-name: capture-ball-starcore; }
.pokemon-encounter-card.capture-success .pokemon-capture-ball { animation: capture-ball-success 1000ms cubic-bezier(.2,1.4,.4,1) both; }
.pokemon-encounter-card.capture-failure .pokemon-capture-ball { animation: capture-ball-failure 800ms ease both; }
@keyframes capture-ball-hover { from { transform: translateY(4px) rotate(-6deg); } to { transform: translateY(-5px) rotate(6deg); } }
@keyframes capture-ball-swift { 0% { transform: translate(120px, 55px) rotate(0); } 45% { transform: translate(25px, -18px) rotate(720deg); } 100% { transform: translate(0) rotate(1080deg); } }
@keyframes capture-ball-leaf { 0% { transform: translate(75px, 100px) rotate(0); } 35% { transform: translate(25px, 20px) rotate(-180deg); } 70% { transform: translate(-8px, -4px) rotate(160deg); } 100% { transform: translate(0) rotate(360deg); } }
@keyframes capture-ball-twilight { 0% { transform: translate(90px, 80px) scale(.8) rotate(0); } 50% { transform: translate(10px, -5px) scale(1.15) rotate(-360deg); } 100% { transform: translate(0) scale(1) rotate(-720deg); } }
@keyframes capture-ball-starcore { 0% { transform: translate(100px, 100px) scale(.7) rotate(0); } 45% { transform: translate(0, -15px) scale(1.35) rotate(360deg); filter: drop-shadow(0 0 18px #fbbf24); } 100% { transform: translate(0) scale(1) rotate(720deg); } }
@keyframes capture-ball-success { 35% { transform: scale(1.18) rotate(18deg); filter: drop-shadow(0 0 14px #22c55e); } 70% { transform: scale(.9) rotate(-12deg); } }
@keyframes capture-ball-failure { 25%,75% { transform: translateX(-8px) rotate(-14deg); } 50% { transform: translateX(8px) rotate(14deg); } }
.pokemon-encounter-card.capture-countdown { animation: pokemon-capture-pulse 850ms ease-in-out infinite; }
.pokemon-encounter-card.capture-throwing { animation: pokemon-capture-throw 900ms ease both; }
.pokemon-encounter-card.capture-success { border-color: #22c55e; background: #f0fdf4; animation: pokemon-capture-success 900ms cubic-bezier(.2,1.5,.4,1) both; }
.pokemon-encounter-card.capture-failure { border-color: #ef4444; background: #fef2f2; animation: pokemon-capture-failure 700ms ease both; }
@keyframes pokemon-capture-pulse { 50% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(245,158,11,.16); } }
@keyframes pokemon-capture-throw { 50% { transform: translateX(8px) rotate(2deg); } }
@keyframes pokemon-capture-success { 50% { transform: translateY(-7px) scale(1.03); box-shadow: 0 0 0 10px rgba(34,197,94,.16); } }
@keyframes pokemon-capture-failure { 25%,75% { transform: translateX(-7px); } 50% { transform: translateX(7px); } }
.pokemon-encounter-card span,
.pokemon-encounter-card small { color: var(--muted); }
.pokemon-minigame-list { margin-top: 0.75rem; }
.pokemon-minigame { width: 100%; }
.pokemon-minigame small { margin-top: 0.2rem; }
.pokemon-mini-hint { display: block; margin-left: 0.6rem; color: var(--muted); font-size: 0.8rem; }
.pokemon-sound-options { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.pokemon-route-grid { display: grid; grid-template-columns: repeat(5, minmax(36px, 1fr)); gap: 0.35rem; margin-top: 0.6rem; }
.pokemon-route-cell { min-height: 38px; border: 1px solid #86efac; border-radius: 0.45rem; background: #f0fdf4; color: #166534; font-weight: 700; }
.pokemon-route-cell:hover { background: #bbf7d0; transform: translateY(-1px); }
.pokemon-ring-timing { margin-top: 0.5rem; }
.pokemon-ring-track { position: relative; height: 52px; margin-top: .6rem; overflow: hidden; border: 1px solid #bfdbfe; border-radius: 999px; background: linear-gradient(90deg,#dbeafe,#eff6ff,#dbeafe); }
.pokemon-ring-target { position: absolute; top: 7px; left: 42%; width: 16%; height: 36px; border: 3px solid #2563eb; border-radius: 50%; }
.pokemon-ring-marker { position: absolute; top: 12px; left: 0; width: 28px; height: 28px; border-radius: 50%; background: #f59e0b; box-shadow: 0 3px 8px rgba(15,23,42,.22); animation: pokemon-ring-sweep 1.8s ease-in-out infinite alternate; }
@keyframes pokemon-ring-sweep { from { transform: translateX(8px); } to { transform: translateX(calc(100% - 36px)); } }
.pokemon-sound-options .selected { transform: translateY(-2px); }
.pokemon-sound-options .correct { border-color: #16a34a; background: #dcfce7; color: #166534; }
.pokemon-sound-options .wrong { border-color: #dc2626; background: #fee2e2; color: #991b1b; animation: pokemon-shake 260ms ease both; }
.pokemon-route-cell.correct { border-color: #16a34a; background: #bbf7d0; animation: pokemon-correct 380ms ease both; }
.pokemon-route-cell.near { border-color: #f59e0b; background: #fef3c7; animation: pokemon-near 380ms ease both; }
.pokemon-route-cell.wrong { border-color: #dc2626; background: #fee2e2; animation: pokemon-shake 260ms ease both; }
@keyframes pokemon-shake { 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes pokemon-correct { 50% { transform: scale(1.12); } }
@keyframes pokemon-near { 50% { transform: translateY(-2px); } }
@keyframes pokemon-card-enter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }

.pokemon-encounter-card:not(.empty-state) {
  border-color: rgba(245,158,11,.72);
  background: linear-gradient(140deg, rgba(255,255,255,.82), rgba(255,247,211,.94) 62%, rgba(253,230,138,.42)), #fffbeb;
  box-shadow: 0 12px 28px rgba(146,92,15,.16), inset 0 1px rgba(255,255,255,.8);
}
.pokemon-encounter-card:not(.empty-state)::after {
  position: absolute;
  inset: -55% -20% auto;
  z-index: 1;
  height: 150%;
  background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.52) 44%, transparent 62%);
  content: "";
  pointer-events: none;
  transform: translateX(-72%) rotate(9deg);
  animation: pokemon-encounter-sheen 900ms ease-out 120ms both;
}
.pokemon-encounter-card:not(.empty-state) > strong,
.pokemon-encounter-card:not(.empty-state) > span,
.pokemon-encounter-card:not(.empty-state) > small { position: relative; z-index: 2; animation: pokemon-encounter-copy-enter 420ms ease both; }
.pokemon-encounter-card:not(.empty-state) > span { animation-delay: 70ms; }
.pokemon-encounter-card:not(.empty-state) > small { animation-delay: 110ms; }
@keyframes pokemon-encounter-sheen { to { transform: translateX(72%) rotate(9deg); } }
@keyframes pokemon-encounter-copy-enter { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }


/* Capture theater: the ball launches from the explorer's hand toward the creature. */
.pokemon-encounter-card { position: relative; min-height: 148px; overflow: hidden; isolation: isolate; }
.pokemon-encounter-card > .pokemon-avatar-full { position: relative; z-index: 2; justify-self: start; filter: drop-shadow(0 6px 3px rgba(31, 62, 67, .25)); }
.pokemon-capture-ball { top: auto; right: auto; bottom: 1rem; left: 1rem; width: 52px; height: 52px; z-index: 4; transform-origin: 50% 50%; }
.pokemon-capture-ball::before { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.8), transparent 65%); opacity: .7; content: ""; }
.pokemon-capture-ball::after { position: absolute; right: 58%; bottom: 48%; width: 68px; height: 5px; border-radius: 999px; background: linear-gradient(90deg, transparent, currentColor); opacity: 0; content: ""; transform: rotate(-44deg); transform-origin: right center; }
.pokemon-capture-ball svg { position: relative; z-index: 1; filter: drop-shadow(0 5px 3px rgba(13, 40, 47, .38)); }
.pokemon-encounter-card.capture-countdown::before { position: absolute; inset: 14px; border: 1px dashed rgba(239, 168, 57, .7); border-radius: 1rem; content: ""; pointer-events: none; }
.pokemon-encounter-card.capture-throwing .pokemon-capture-ball::after { animation: capture-ball-trail 3000ms ease both; }
.pokemon-encounter-card.capture-throwing > .pokemon-avatar-full { animation: capture-target-flinch 900ms ease both; }
.pokemon-encounter-card.capture-success::before { position: absolute; inset: 0; background: radial-gradient(circle at 31% 33%, rgba(166, 255, 196, .8), transparent 30%); content: ""; pointer-events: none; animation: capture-success-glow 1000ms ease both; }
.pokemon-encounter-card.capture-failure::before { position: absolute; inset: 0; background: repeating-conic-gradient(from 0deg at 26% 70%, rgba(248, 113, 113, .18) 0 8deg, transparent 8deg 22deg); content: ""; pointer-events: none; animation: capture-failure-flare 800ms ease both; }
.pokemon-encounter-card.capture-success .pokemon-capture-ball { animation: capture-ball-success-arc 1000ms cubic-bezier(.2,1.35,.3,1) both; }
.pokemon-encounter-card.capture-failure .pokemon-capture-ball { animation: capture-ball-failure-return 800ms ease both; }
.pokemon-encounter-card.capture-throwing.capture-ball-reinforced_ball .pokemon-capture-ball { color: #2563eb; animation: capture-ball-reinforced-arc 3000ms cubic-bezier(.18,.8,.25,1) both; }
.pokemon-encounter-card.capture-throwing.capture-ball-swift_ball .pokemon-capture-ball { color: #0ea5e9; animation: capture-ball-swift-arc 3000ms cubic-bezier(.2,.9,.22,1) both; }
.pokemon-encounter-card.capture-throwing.capture-ball-habitat_ball .pokemon-capture-ball { color: #16a34a; animation: capture-ball-habitat-arc 3000ms cubic-bezier(.2,.82,.3,1) both; }
.pokemon-encounter-card.capture-throwing.capture-ball-twilight_ball .pokemon-capture-ball { color: #7c3aed; animation: capture-ball-twilight-arc 3000ms cubic-bezier(.2,.86,.3,1) both; }
.pokemon-encounter-card.capture-throwing.capture-ball-starcore_ball .pokemon-capture-ball { color: #f59e0b; animation: capture-ball-starcore-arc 3000ms cubic-bezier(.15,.9,.2,1) both; }
@keyframes capture-ball-trail { 0%,20% { opacity: .8; transform: rotate(-44deg) scaleX(.25); } 65%,100% { opacity: 0; transform: rotate(-44deg) scaleX(1); } }
@keyframes capture-target-flinch { 45% { transform: translateX(5px) rotate(3deg); } 68% { transform: translateX(-4px) rotate(-2deg); } }
@keyframes capture-success-glow { 0%,100% { opacity: 0; } 45% { opacity: 1; } }
@keyframes capture-failure-flare { 0%,100% { opacity: 0; } 35% { opacity: 1; } }

.pokemon-boss-page.unlocked { animation: pokemon-unlock 460ms ease both; }
@keyframes pokemon-unlock { from { opacity: .45; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }
.pokemon-page-tab.active { background: #dbeafe; border-color: #60a5fa; color: #1d4ed8; }
.pokemon-page-tab { transition: transform 180ms ease, background-color 180ms ease; }
.pokemon-page-tab:hover { transform: translateY(-1px); }
.pokemon-world-note { max-width: 880px; line-height: 1.7; }

.quiz-world-field .field-label { display: block; margin-bottom: 6px; }
.quiz-world-radio { display: grid; gap: 6px; }
.radio-option { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.radio-option input { width: 18px; height: 18px; accent-color: var(--blue, #2563eb); }
.radio-option span { white-space: nowrap; }

@media (max-width: 1100px) {
  .pokemon-boss-pages { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .pokemon-map-player,
  .pokemon-map-player.moving,
  .pokemon-page-tab { transition: none; }
  .pokemon-map-node.arrived,
  .pokemon-map-player.landed .pokemon-player-avatar,
  .pokemon-ball-row,
  .pokemon-encounter-card,
  .pokemon-boss-page.unlocked,
  .pokemon-ring-marker,
  .pokemon-sound-options .wrong,
  .pokemon-route-cell { animation: none; }
  .pokemon-encounter-card.capture-countdown,
  .pokemon-encounter-card.capture-throwing,
  .pokemon-encounter-card.capture-success,
  .pokemon-encounter-card.capture-failure,
  .pokemon-capture-ball { animation: none; }
  .pokemon-step-pop,
  .pokemon-card-enter,
  .pokemon-correct,
  .pokemon-near,
  .pokemon-shake,
  .pokemon-unlock { animation: none !important; }
  .pokemon-route-cell:hover,
  .pokemon-page-tab:hover { transform: none; }
}

@media (max-width: 900px) {
  .pokemon-summary-grid,
  .pokemon-play-grid { grid-template-columns: 1fr; }
  .pokemon-map-grid { grid-template-columns: repeat(6, minmax(34px, 1fr)); }
  .pokemon-pokedex-page .pokemon-pokedex-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .setup-tts-grid { grid-template-columns: 1fr; }
  .setup-tts-style-field,
  .setup-tts-clear { grid-column: auto; }
}

@media (max-width: 620px) {
  .main,
  .sidebar {
    padding: 18px;
  }

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

  .word-card h3,
  #question-prompt {
    font-size: 38px;
  }

  .meaning {
    font-size: 24px;
  }

  .choice-options,
  .result-grid,
  .review-row,
  .review-dialogue.empty,
  .score-row,
  .admin-row,
  .adventure-grid,
  .battle-layout,
  .battle-record-grid,
  .spec-grid,
  .craft-card,
  .manager-grid {
    grid-template-columns: 1fr;
  }

  .battle-panel {
    grid-column: auto;
  }

  .toolbar,
  .quiz-setup,
  .section-heading,
  .spelling-form {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .field-group,
  .search-box,
  .student-switcher,
  .voice-switcher,
  .toolbar > button,
  .quiz-setup > button,
  .section-heading > button {
    width: 100%;
  }

  .student-switcher > div {
    display: grid;
    grid-template-columns: 1fr;
  }

  .crafting-message {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }

  input,
  select,
  textarea,
  .primary-button,
  .secondary-button {
    width: 100%;
  }

  .question-card,
  .word-card,
  .result-panel {
    padding: 18px;
  }
}

.hero {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #0b1020;
  box-shadow: var(--shadow);
  margin-bottom: 18px;
}

.hero-image {
  display: block;
  width: 100%;
  height: auto;
}

.hero-overlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px 20px 18px;
  background: linear-gradient(to top, rgba(11, 16, 32, 0.9) 0%, rgba(11, 16, 32, 0.5) 60%, rgba(11, 16, 32, 0) 100%);
  color: #ffffff;
}

.hero-greeting {
  margin: 0;
  font-size: 15px;
  opacity: 0.92;
}

.hero-greeting strong {
  font-size: 20px;
  font-weight: 900;
  margin: 0 4px;
}

.hero-tagline {
  margin: 4px 0 12px;
  font-size: 13px;
  opacity: 0.82;
}

.hero-cta {
  padding: 10px 18px;
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.home-panel-wide {
  grid-column: 1 / -1;
}

.home-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  padding: 6px 2px;
}

@media (max-width: 720px) {
  .home-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Boss-score Leaderboard view */
.leaderboard-table {
  display: grid;
  gap: 14px;
}

table.leaderboard {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

table.leaderboard th,
table.leaderboard td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}

table.leaderboard th {
  background: #f1f5f9;
  font-weight: 900;
  font-size: 0.9rem;
  color: var(--muted);
}

table.leaderboard td.rank,
table.leaderboard th.rank {
  width: 56px;
  text-align: center;
  font-weight: 900;
}

table.leaderboard td.score,
table.leaderboard td.kills {
  font-weight: 900;
}

table.leaderboard td.score {
  color: var(--green);
}

table.leaderboard td.last {
  color: var(--muted);
  font-size: 0.85rem;
}

table.leaderboard tr.me td {
  background: #fff7ed;
}

.me-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 900;
}

.leaderboard-bosses {
  border-top: 1px dashed var(--line);
  padding-top: 10px;
}

.leaderboard-bosses summary {
  cursor: pointer;
  font-weight: 800;
}

.leaderboard-bosses ul {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.leaderboard-bosses li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  font-size: 0.92rem;
}

.leaderboard-boss-en {
  color: var(--muted);
}

/* Setup admin: boss score editor */
.setup-subhead {
  margin: 18px 0 4px;
  font-size: 1rem;
}

.setup-subhead-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 4px;
}

.setup-subhead-row .setup-subhead {
  margin: 0;
}

.setup-boss-config-list {
  display: grid;
  gap: 8px;
  margin-top: 8px;
}

.setup-boss-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.setup-boss-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.setup-boss-meta strong {
  font-size: 1rem;
}

.setup-boss-en {
  color: var(--muted);
}

.setup-boss-meta small {
  color: var(--muted);
  font-weight: 800;
}

.setup-boss-row label {
  display: grid;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 800;
}

.setup-boss-row input.boss-score {
  width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: right;
  font-weight: 900;
}

.setup-reward-bonus-list {
  display: grid;
  gap: 14px;
  margin-top: 8px;
}

.reward-bonus-group {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #ffffff;
  padding: 12px;
}

.reward-bonus-group header {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 8px;
}

.reward-bonus-group header strong {
  font-size: 1rem;
}

.reward-bonus-group header small {
  color: var(--muted);
  font-weight: 700;
}

.reward-bonus-rows {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.reward-bonus-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfbfd;
}

.reward-bonus-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reward-bonus-label strong {
  font-size: 0.95rem;
}

.reward-bonus-label small {
  color: var(--muted);
  font-weight: 700;
}

.reward-bonus-input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reward-bonus-value {
  width: 60px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-align: right;
  font-weight: 900;
}

.reward-bonus-suffix {
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 700;
}

/* Typing practice: clear letter targets and a matching finger guide. */
.typing-intro { margin-bottom: 24px; }
.typing-intro h3 { font-size: 30px; margin: 8px 0; }
.typing-intro p { color: var(--muted); }
.typing-intro .eyebrow { color: var(--blue); font-size: 12px; letter-spacing: 2px; }
.typing-settings { flex-wrap: wrap; }
.typing-workspace { max-width: 960px; margin: 20px auto; background: white; border: 1px solid var(--line); border-radius: 18px; padding: 28px; text-align: center; box-shadow: var(--shadow); }
.typing-stats { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.typing-stats strong { color: var(--ink); font-size: 20px; }
.typing-stats span:last-child strong { color: var(--blue); }
.typing-workspace progress { width: 100%; height: 8px; accent-color: var(--green); margin: 18px 0; }
.typing-prompt > p:first-child { font-size: 26px; font-weight: 700; margin: 12px 0 6px; }
.typing-prompt .button-row { justify-content: center; }
.typing-letters { display: flex; justify-content: center; flex-wrap: wrap; gap: 7px; margin: 28px 0 20px; }
.typing-letter { display: grid; place-items: center; min-width: 44px; height: 58px; border: 1px solid #d3dce8; border-radius: 8px; font: 30px ui-monospace, monospace; background: #f8fafc; }
.typing-letter.current { background: var(--blue); color: white; border-color: var(--blue); box-shadow: 0 4px 0 #173f9e; transform: translateY(-3px); }
.typing-letter.done { background: #e3f4e9; color: #166044; border-color: #9ecfb2; }
.typing-input-label { display: block; color: var(--muted); font-size: 13px; margin: 14px 0 8px; }
.typing-input { max-width: 360px; width: 100%; text-align: center; padding: 12px; border: 2px solid #b9c9dd; border-radius: 10px; }
.typing-input:focus { outline: 3px solid #c9dcff; border-color: var(--blue); }
.typing-feedback { min-height: 24px; color: var(--green); font-size: 14px; }
.typing-feedback.typing-error { color: var(--red); font-weight: 700; }
.typing-keyboard { max-width: 690px; padding: 12px; border-radius: 14px; background: #e7ecf3; margin: 26px auto 0; }
.typing-key-row { display: flex; justify-content: center; gap: 5px; margin: 5px 0; }
.typing-key { position: relative; display: grid; place-items: center; width: 8%; height: 43px; background: #fff; border: 1px solid #c8d1df; border-bottom-width: 3px; border-radius: 5px; font: 16px ui-monospace, monospace; }
.typing-key-row:nth-child(2) { padding-left: 12px; }
.typing-key-row:nth-child(3) { padding-left: 24px; }
.typing-key-row:nth-child(4) { padding-left: 40px; }
.typing-key.space-key { width: 52%; font-size: 12px; }
.typing-key.home-key::after { content: ''; position: absolute; bottom: 5px; width: 10px; border-bottom: 2px solid currentColor; }
.typing-key.current-key { background: var(--blue); border-color: #1a49ae; color: white; }
.typing-hands { max-width: 380px; margin: 4px auto -8px; }
.typing-hands svg { width: 100%; max-height: 150px; }
.typing-hands .current-finger { fill: #70b4ff; stroke: #2563eb; stroke-width: 3; }
.typing-finger { color: var(--blue-dark); font-weight: 700; }
.typing-note { color: var(--muted); font-size: 12px; line-height: 1.7; max-width: 560px; margin: 20px auto 0; }
.typing-reward-summary { display: grid; gap: 4px; max-width: 620px; margin: 16px auto 0; padding: 12px 14px; border: 1px solid #bfdbfe; border-radius: 10px; background: #eff6ff; color: #1e3a8a; text-align: left; }
.typing-reward-summary.is-loading { animation: pokemon-card-enter 260ms ease both; }
.typing-reward-summary.is-complete { border-color: #86efac; background: #f0fdf4; color: #166534; animation: pokemon-reward-pop 480ms cubic-bezier(.2,1.5,.4,1) both; }
.typing-reward-summary.is-error { border-color: #fca5a5; background: #fef2f2; color: #991b1b; }
@keyframes pokemon-reward-pop { 0% { opacity: 0; transform: translateY(8px) scale(.96); } 70% { opacity: 1; transform: translateY(-2px) scale(1.02); } 100% { transform: translateY(0) scale(1); } }
@media (max-width: 600px) {
  .typing-workspace { padding: 16px 10px; }
  .typing-letter { min-width: 29px; height: 43px; font-size: 23px; }
  .typing-letters { gap: 4px; }
  .typing-keyboard { padding: 5px; }
  .typing-key-row { gap: 3px; }
  .typing-key { font-size: 11px; height: 32px; }
  .typing-stats { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .typing-reward-summary.is-loading,
  .typing-reward-summary.is-complete { animation: none; }
}


@media (max-width: 600px) {
  .app-notice-layer,
  #app-notice-layer { padding: .8rem; }
  .app-notice { width: 100%; max-width: 100%; padding: .8rem .85rem 1rem; border-radius: .85rem; gap: .6rem; }
  .app-notice-title { font-size: .9rem; }
  .app-notice-message { font-size: .8rem; }
  .app-notice-dismiss { width: 2.2rem; height: 2.2rem; }
  .app-notice-progress { margin-right: -.85rem; margin-left: -.85rem; margin-bottom: -1rem; border-radius: 0 0 .85rem .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .app-notice,
  .app-notice.is-leaving,
  .app-notice[data-state="leaving"],
  .app-notice-progress::before,
  .app-notice-progress > span,
  .pokemon-terrain-river,
  .pokemon-map-node.current::before,
  .pokemon-map-node.current .pokemon-node-icon,
  .pokemon-encounter-card:not(.empty-state)::after,
  .pokemon-encounter-card:not(.empty-state) > strong,
  .pokemon-encounter-card:not(.empty-state) > span,
  .pokemon-encounter-card:not(.empty-state) > small { animation: none; }
  .pokemon-map-terrain { transform: none; }
}


@media (max-width: 600px) {
  [data-app-notice] { width: calc(100vw - 1.6rem); padding: .8rem .85rem 1rem; border-radius: .85rem; gap: .6rem; }
  [data-app-notice] [data-app-notice-message] { font-size: .8rem; }
  [data-app-notice] [data-app-notice-dismiss] { width: 2.2rem; height: 2.2rem; }
  [data-app-notice]::after { border-radius: 0 0 .85rem .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  [data-app-notice],
  [data-app-notice][data-notice-state="hidden"],
  [data-app-notice]::after { animation: none; }
}

/* Exploration outcome motion: the map explains what the three-second search found. */
.pokemon-map-grid.pokemon-map-explore-encounter,
.pokemon-map-grid.pokemon-map-explore-empty,
.pokemon-map-grid.pokemon-map-explore-error,
.pokemon-map-grid.pokemon-map-explore-insufficient { transform-origin: 50% 50%; }
.pokemon-map-grid.pokemon-map-exploring .pokemon-terrain-trees {
  animation: pokemon-grass-sway 1.35s ease-in-out infinite alternate;
  transform-box: fill-box;
  transform-origin: 50% 100%;
}
.pokemon-map-grid.pokemon-map-exploring .pokemon-node-grass .pokemon-node-icon,
.pokemon-map-grid.pokemon-map-exploring .pokemon-node-rare_grass .pokemon-node-icon {
  animation: pokemon-grass-sway 760ms ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
.pokemon-map-grid.pokemon-map-exploring .pokemon-terrain-beacons {
  animation: pokemon-beacon-search 900ms ease-in-out infinite;
}
.pokemon-map-grid.pokemon-map-exploring .pokemon-map-route-highlight {
  animation: pokemon-route-search 720ms linear infinite;
}
.pokemon-map-grid.pokemon-map-explore-encounter { animation: pokemon-map-encounter-land 780ms cubic-bezier(.18,.85,.28,1) both; }
.pokemon-map-grid.pokemon-map-explore-encounter .pokemon-map-route-highlight { animation: pokemon-route-encounter-burst 980ms ease-out both; stroke-width: 15; }
.pokemon-map-grid.pokemon-map-explore-encounter .pokemon-map-node.current { animation: pokemon-node-explore-burst 760ms cubic-bezier(.2,1.45,.35,1) both; }
.pokemon-map-grid.pokemon-map-explore-empty { animation: pokemon-map-empty-breathe 900ms ease-out both; }
.pokemon-map-grid.pokemon-map-explore-empty .pokemon-map-route-highlight { animation: pokemon-route-empty-breathe 900ms ease-in-out both; }
.pokemon-map-grid.pokemon-map-explore-error { animation: pokemon-map-result-shake 540ms ease both; }
.pokemon-map-grid.pokemon-map-explore-error .pokemon-map-route { animation: pokemon-route-error-flash 540ms ease both; }
.pokemon-map-grid.pokemon-map-explore-insufficient { animation: pokemon-map-result-shake 540ms ease both; }
.pokemon-map-grid.pokemon-map-explore-insufficient .pokemon-map-node.current { animation: pokemon-node-warning 680ms ease both; }

.pokemon-encounter-card.pokemon-encounter-from-explore { animation: pokemon-encounter-explore-enter 700ms cubic-bezier(.2,1.25,.35,1) both; }
.pokemon-encounter-card.pokemon-encounter-from-explore > .pokemon-avatar-full { animation: pokemon-encounter-creature-pop 720ms cubic-bezier(.2,1.45,.35,1) both; }
.pokemon-encounter-card.pokemon-encounter-empty-result { animation: pokemon-encounter-empty-settle 600ms ease both; }
.pokemon-encounter-card.pokemon-encounter-error-result,
.pokemon-encounter-card.pokemon-encounter-insufficient-result { animation: pokemon-encounter-result-shake 560ms ease both; }
.pokemon-encounter-card.pokemon-encounter-error-result { border-color: #fca5a5; background: linear-gradient(140deg, #fff, #fef2f2); }
.pokemon-encounter-card.pokemon-encounter-insufficient-result { border-color: #fcd34d; background: linear-gradient(140deg, #fff, #fffbeb); }

/* Re-opening the shared notice replays its entrance and timer without moving its center anchor. */
.app-notice.is-visible { animation: app-notice-enter 320ms cubic-bezier(.2,.8,.25,1) forwards; }
[data-app-notice].is-visible { animation: app-notice-enter-centered 320ms cubic-bezier(.2,.8,.25,1) forwards; }
[data-app-notice]::after { animation-name: none; }
[data-app-notice].is-visible::after { animation: app-notice-progress 4.8s linear forwards; }

@keyframes pokemon-grass-sway { from { transform: rotate(-1.6deg) translateY(0); } to { transform: rotate(1.6deg) translateY(-2px); } }
@keyframes pokemon-beacon-search { 0%,100% { opacity: .42; transform: scale(.92); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes pokemon-route-search { to { stroke-dashoffset: -66px; } }
@keyframes pokemon-map-encounter-land { 0% { filter: saturate(1) brightness(1); transform: scale(.99); } 45% { filter: saturate(1.36) brightness(1.08); transform: scale(1.012); } 100% { filter: saturate(1.08) brightness(1); transform: scale(1); } }
@keyframes pokemon-route-encounter-burst { 0% { stroke-dashoffset: 34px; opacity: .4; } 45% { stroke-dashoffset: -18px; opacity: 1; } 100% { stroke-dashoffset: -66px; opacity: .96; } }
@keyframes pokemon-node-explore-burst { 0% { transform: translate(-50%, -56%) translateZ(25px) scale(.82); } 58% { transform: translate(-50%, -62%) translateZ(42px) scale(1.2); } 100% { transform: translate(-50%, -56%) translateZ(25px) scale(1); } }
@keyframes pokemon-map-empty-breathe { 0% { filter: saturate(1.18) brightness(1.05); } 50% { filter: saturate(.92) brightness(.98); } 100% { filter: saturate(1) brightness(1); } }
@keyframes pokemon-route-empty-breathe { 0%,100% { opacity: .35; } 50% { opacity: .7; } }
@keyframes pokemon-map-result-shake { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-4px); } 36% { transform: translateX(4px); } 54% { transform: translateX(-3px); } 72% { transform: translateX(3px); } }
@keyframes pokemon-route-error-flash { 50% { stroke: #fecaca; filter: drop-shadow(0 0 8px rgba(239,68,68,.78)); } }
@keyframes pokemon-node-warning { 0%,100% { box-shadow: 0 8px 0 rgba(108,63,32,.35), 0 0 0 5px rgba(245,158,11,.34), 0 0 18px rgba(245,158,11,.38); } 50% { box-shadow: 0 8px 0 rgba(108,63,32,.35), 0 0 0 9px rgba(245,158,11,.58), 0 0 30px rgba(245,158,11,.7); } }
@keyframes pokemon-encounter-explore-enter { 0% { opacity: 0; transform: translateY(16px) scale(.94) rotateX(8deg); } 65% { opacity: 1; transform: translateY(-4px) scale(1.025) rotateX(0); } 100% { opacity: 1; transform: translateY(0) scale(1) rotateX(0); } }
@keyframes pokemon-encounter-creature-pop { 0% { opacity: 0; transform: translateY(12px) scale(.72) rotate(-7deg); } 55% { opacity: 1; transform: translateY(-4px) scale(1.1) rotate(3deg); } 100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); } }
@keyframes pokemon-encounter-empty-settle { 0% { opacity: .4; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes pokemon-encounter-result-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-5px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }

/* Runtime aliases emitted by setPokemonExploreOutcome(). */
.pokemon-map-grid.pokemon-exploration-encounter { animation: pokemon-map-encounter-land 780ms cubic-bezier(.18,.85,.28,1) both; }
.pokemon-map-grid.pokemon-exploration-encounter .pokemon-map-route-highlight { animation: pokemon-route-encounter-burst 980ms ease-out both; stroke-width: 15; }
.pokemon-map-grid.pokemon-exploration-encounter .pokemon-map-node.current { animation: pokemon-node-explore-burst 760ms cubic-bezier(.2,1.45,.35,1) both; }
.pokemon-map-grid.pokemon-exploration-no_encounter { animation: pokemon-map-empty-breathe 900ms ease-out both; }
.pokemon-map-grid.pokemon-exploration-no_encounter .pokemon-map-route-highlight { animation: pokemon-route-empty-breathe 900ms ease-in-out both; }
.pokemon-map-grid.pokemon-exploration-failure { animation: pokemon-map-result-shake 540ms ease both; }
.pokemon-map-grid.pokemon-exploration-failure .pokemon-map-route { animation: pokemon-route-error-flash 540ms ease both; }
.pokemon-map-grid.pokemon-exploration-insufficient_steps { animation: pokemon-map-result-shake 540ms ease both; }
.pokemon-map-grid.pokemon-exploration-insufficient_steps .pokemon-map-node.current { animation: pokemon-node-warning 680ms ease both; }
.pokemon-map-grid.pokemon-exploration-cancelled { animation: pokemon-map-empty-breathe 620ms ease both; }
.pokemon-encounter-card.pokemon-exploration-encounter { animation: pokemon-encounter-explore-enter 700ms cubic-bezier(.2,1.25,.35,1) both; }
.pokemon-encounter-card.pokemon-exploration-encounter > .pokemon-avatar-full { animation: pokemon-encounter-creature-pop 720ms cubic-bezier(.2,1.45,.35,1) both; }
.pokemon-encounter-card.pokemon-exploration-no_encounter,
.pokemon-encounter-card.pokemon-exploration-cancelled { animation: pokemon-encounter-empty-settle 600ms ease both; }
.pokemon-encounter-card.pokemon-exploration-failure,
.pokemon-encounter-card.pokemon-exploration-insufficient_steps { animation: pokemon-encounter-result-shake 560ms ease both; }
.pokemon-encounter-card.pokemon-exploration-failure { border-color: #fca5a5; background: linear-gradient(140deg, #fff, #fef2f2); }
.pokemon-encounter-card.pokemon-exploration-insufficient_steps { border-color: #fcd34d; background: linear-gradient(140deg, #fff, #fffbeb); }

@media (prefers-reduced-motion: reduce) {
  .pokemon-map-grid.pokemon-map-exploring .pokemon-terrain-trees,
  .pokemon-map-grid.pokemon-map-exploring .pokemon-node-grass .pokemon-node-icon,
  .pokemon-map-grid.pokemon-map-exploring .pokemon-node-rare_grass .pokemon-node-icon,
  .pokemon-map-grid.pokemon-map-exploring .pokemon-terrain-beacons,
  .pokemon-map-grid.pokemon-map-exploring .pokemon-map-route-highlight,
  .pokemon-map-grid.pokemon-map-explore-encounter,
  .pokemon-map-grid.pokemon-map-explore-empty,
  .pokemon-map-grid.pokemon-map-explore-error,
  .pokemon-map-grid.pokemon-map-explore-insufficient,
  .pokemon-map-grid.pokemon-map-explore-encounter .pokemon-map-route-highlight,
  .pokemon-map-grid.pokemon-map-explore-encounter .pokemon-map-node.current,
  .pokemon-map-grid.pokemon-map-explore-empty .pokemon-map-route-highlight,
  .pokemon-map-grid.pokemon-map-explore-error .pokemon-map-route,
  .pokemon-map-grid.pokemon-map-explore-insufficient .pokemon-map-node.current,
  .pokemon-encounter-card.pokemon-encounter-from-explore,
  .pokemon-encounter-card.pokemon-encounter-from-explore > .pokemon-avatar-full,
  .pokemon-encounter-card.pokemon-encounter-empty-result,
  .pokemon-encounter-card.pokemon-encounter-error-result,
  .pokemon-encounter-card.pokemon-encounter-insufficient-result,
  .app-notice.is-visible,
  [data-app-notice].is-visible,
  [data-app-notice].is-visible::after { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
  .pokemon-map-grid.pokemon-exploration-encounter,
  .pokemon-map-grid.pokemon-exploration-no_encounter,
  .pokemon-map-grid.pokemon-exploration-failure,
  .pokemon-map-grid.pokemon-exploration-insufficient_steps,
  .pokemon-map-grid.pokemon-exploration-cancelled,
  .pokemon-map-grid.pokemon-exploration-encounter .pokemon-map-route-highlight,
  .pokemon-map-grid.pokemon-exploration-encounter .pokemon-map-node.current,
  .pokemon-map-grid.pokemon-exploration-no_encounter .pokemon-map-route-highlight,
  .pokemon-map-grid.pokemon-exploration-failure .pokemon-map-route,
  .pokemon-map-grid.pokemon-exploration-insufficient_steps .pokemon-map-node.current,
  .pokemon-encounter-card.pokemon-exploration-encounter,
  .pokemon-encounter-card.pokemon-exploration-encounter > .pokemon-avatar-full,
  .pokemon-encounter-card.pokemon-exploration-no_encounter,
  .pokemon-encounter-card.pokemon-exploration-cancelled,
  .pokemon-encounter-card.pokemon-exploration-failure,
  .pokemon-encounter-card.pokemon-exploration-insufficient_steps { animation: none; }
}

/* Bilingual companion-world introductions. */
.pokemon-intro-card {
  --intro-accent: #2f7dcc;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .9rem 1.1rem;
  min-height: 112px;
  margin: 0 0 1rem;
  overflow: hidden;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(89,157,203,.42);
  border-radius: 1rem;
  background: linear-gradient(135deg, rgba(239,250,255,.98), rgba(222,241,255,.92) 58%, rgba(224,236,255,.9));
  box-shadow: 0 12px 28px rgba(35,91,136,.12), inset 0 1px rgba(255,255,255,.9);
  isolation: isolate;
  animation: pokemon-intro-card-enter 480ms cubic-bezier(.2,.85,.3,1) both;
}
.pokemon-intro-card::before {
  position: absolute;
  inset: -35% auto -35% -9%;
  z-index: -1;
  width: 42%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(116,210,240,.34), transparent 68%);
  content: "";
  pointer-events: none;
}
.pokemon-intro-card::after {
  position: absolute;
  right: 1.4rem;
  bottom: -.7rem;
  width: 9rem;
  height: 3rem;
  border: 1px solid rgba(79,134,198,.22);
  border-radius: 50%;
  content: "";
  opacity: .65;
  pointer-events: none;
  transform: rotate(-8deg);
}
.pokemon-intro-copy { display: grid; gap: .28rem; min-width: 0; }
.pokemon-intro-kicker,
.pokemon-intro-label { color: var(--intro-accent); font-size: .68rem; font-weight: 900; letter-spacing: .11em; line-height: 1.2; text-transform: uppercase; }
.pokemon-intro-zh { color: #153b55; font-size: clamp(1rem, 2vw, 1.25rem); font-weight: 900; line-height: 1.35; }
.pokemon-intro-en { color: #456477; font-size: .77rem; font-weight: 800; letter-spacing: .045em; line-height: 1.35; }
.pokemon-intro-note { color: #557484; font-size: .75rem; line-height: 1.45; }
.pokemon-intro-tts {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  min-width: 5.4rem;
  min-height: 2.25rem;
  padding: .5rem .75rem;
  border: 1px solid color-mix(in srgb, var(--intro-accent) 45%, #fff);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: var(--intro-accent);
  font-size: .76rem;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 4px 10px rgba(35,91,136,.1);
  transition: transform 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
button.pokemon-intro-tts:hover,
button.pokemon-intro-tts:focus-visible,
.pokemon-intro-tts.is-playing,
.pokemon-intro-tts[data-playing="true"] { background: #fff; box-shadow: 0 0 0 4px rgba(63,145,215,.18), 0 7px 16px rgba(35,91,136,.16); color: #1d5c9a; outline: none; transform: translateY(-2px); }
.pokemon-intro-tts-icon { display: inline-grid; place-items: center; font-size: 1rem; line-height: 1; }
.pokemon-intro-tts-wave { display: inline-flex; align-items: center; gap: 2px; height: 1rem; }
.pokemon-intro-tts-wave i { width: 2px; height: .48rem; border-radius: 999px; background: currentColor; }
.pokemon-intro-tts.is-playing .pokemon-intro-tts-wave i,
.pokemon-intro-tts[data-playing="true"] .pokemon-intro-tts-wave i { animation: pokemon-intro-wave 700ms ease-in-out infinite alternate; }
.pokemon-intro-tts.is-playing .pokemon-intro-tts-wave i:nth-child(2),
.pokemon-intro-tts[data-playing="true"] .pokemon-intro-tts-wave i:nth-child(2) { animation-delay: 110ms; height: .8rem; }
.pokemon-intro-tts.is-playing .pokemon-intro-tts-wave i:nth-child(3),
.pokemon-intro-tts[data-playing="true"] .pokemon-intro-tts-wave i:nth-child(3) { animation-delay: 220ms; height: .62rem; }
.pokemon-intro-card.is-muted,
.pokemon-intro-card[data-state="hidden"],
.pokemon-intro-card[hidden] { display: none; }

.pokemon-boss-intro-panel,
.pokemon-boss-intro {
  --boss-intro-aura: var(--boss-aura, #7c3aed);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  min-height: 142px;
  margin: 0 0 1rem;
  overflow: hidden;
  padding: 1.05rem 1.2rem;
  border: 1px solid color-mix(in srgb, var(--boss-intro-aura) 48%, #334155);
  border-radius: 1rem;
  background: radial-gradient(circle at 84% 30%, color-mix(in srgb, var(--boss-intro-aura) 32%, transparent), transparent 38%), linear-gradient(135deg, #121f3f, #182b4c 56%, #111827);
  color: #f8fafc;
  box-shadow: 0 16px 34px rgba(15,23,42,.24), inset 0 1px rgba(255,255,255,.12);
  isolation: isolate;
  animation: pokemon-boss-intro-enter 520ms cubic-bezier(.2,.85,.3,1) both;
}
.pokemon-boss-intro-panel::before,
.pokemon-boss-intro::before {
  position: absolute;
  inset: -55% 36% -55% -22%;
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--boss-intro-aura) 42%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 42px color-mix(in srgb, var(--boss-intro-aura) 30%, transparent);
  content: "";
  opacity: .72;
  transform: rotate(-13deg);
}
.pokemon-boss-intro-panel::after,
.pokemon-boss-intro::after {
  position: absolute;
  right: -2.5rem;
  bottom: -3.1rem;
  width: 12rem;
  height: 8rem;
  border: 2px solid color-mix(in srgb, var(--boss-intro-aura) 50%, transparent);
  border-radius: 50%;
  content: "";
  opacity: .4;
  transform: rotate(-18deg);
}
.pokemon-boss-intro-copy { position: relative; z-index: 1; display: grid; gap: .28rem; min-width: 0; }
.pokemon-boss-intro-kicker,
.pokemon-boss-intro-label { color: color-mix(in srgb, var(--boss-intro-aura) 80%, #fff); font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pokemon-boss-intro-zh { color: #fff; font-size: clamp(1.1rem, 2.5vw, 1.65rem); font-weight: 950; line-height: 1.2; text-shadow: 0 2px 12px rgba(0,0,0,.28); }
.pokemon-boss-intro-en { color: #cbd5e1; font-size: .76rem; font-weight: 800; letter-spacing: .08em; line-height: 1.35; }
.pokemon-boss-intro-note { color: #a9bad0; font-size: .76rem; line-height: 1.45; }
.pokemon-boss-intro-avatar { position: relative; z-index: 1; display: grid; place-items: center; min-width: 5.5rem; min-height: 5.5rem; filter: drop-shadow(0 8px 9px rgba(0,0,0,.35)); animation: pokemon-boss-intro-avatar 2.6s ease-in-out infinite alternate; }
.pokemon-boss-intro-avatar img,
.pokemon-boss-intro-avatar svg { max-width: 100%; height: auto; }
.pokemon-boss-intro-panel .pokemon-intro-tts,
.pokemon-boss-intro .pokemon-intro-tts { border-color: color-mix(in srgb, var(--boss-intro-aura) 58%, #fff); background: rgba(255,255,255,.1); color: #f8fafc; box-shadow: none; }
.pokemon-boss-intro-panel .pokemon-intro-tts:hover,
.pokemon-boss-intro-panel .pokemon-intro-tts:focus-visible,
.pokemon-boss-intro .pokemon-intro-tts:hover,
.pokemon-boss-intro .pokemon-intro-tts:focus-visible { background: rgba(255,255,255,.2); color: #fff; }

/* Keep a known guardian's bilingual introduction available without extending the battle stage. */
.pokemon-boss-stage-copy > .pokemon-boss-intro {
  display: block;
  min-width: 0;
  min-height: 0;
  margin: .15rem 0;
  overflow: visible;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--boss-intro-aura) 48%, #64748b);
  border-radius: .7rem;
  background: rgba(15,23,42,.55);
  box-shadow: none;
  animation: none;
}
.pokemon-boss-stage-copy > .pokemon-boss-intro::before,
.pokemon-boss-stage-copy > .pokemon-boss-intro::after { pointer-events: none; }
.pokemon-boss-intro-summary {
  display: list-item;
  min-width: 0;
  min-height: 2.55rem;
  padding: .62rem .75rem;
  color: #f8fafc;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.3;
  list-style-position: inside;
}
.pokemon-boss-intro-summary::marker { color: #93c5fd; }
.pokemon-boss-intro-summary:focus-visible { border-radius: inherit; outline: 2px solid #93c5fd; outline-offset: -3px; }
.pokemon-boss-intro-content {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .45rem;
  min-width: 0;
  padding: .1rem .75rem .7rem;
}
.pokemon-boss-intro-content > p {
  display: block;
  width: 100%;
  min-width: min(100%, 14rem);
  max-width: 100%;
  margin: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
.pokemon-boss-intro-content .pokemon-intro-zh { color: #fff; font-size: 1rem; line-height: 1.45; }
.pokemon-boss-intro-content .pokemon-intro-en { color: #dbeafe; font-size: .76rem; line-height: 1.45; }
.pokemon-boss-intro-content .pokemon-intro-tts {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  white-space: normal;
}
@media (max-width: 760px) {
  .pokemon-boss-stage { grid-template-columns: minmax(0, 1fr); gap: .45rem; }
  .pokemon-boss-avatar { justify-self: center; }
  .pokemon-boss-stage-copy { min-width: 0; }
}

@keyframes pokemon-intro-card-enter { from { opacity: 0; transform: translateY(9px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pokemon-intro-wave { from { transform: scaleY(.55); opacity: .55; } to { transform: scaleY(1.1); opacity: 1; } }
@keyframes pokemon-boss-intro-enter { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pokemon-boss-intro-avatar { from { transform: translateY(2px) rotate(-2deg); } to { transform: translateY(-4px) rotate(2deg); } }
@media (max-width: 720px) {
  .pokemon-intro-card { grid-template-columns: 1fr; align-items: start; gap: .7rem; min-height: 0; padding: .85rem .9rem; border-radius: .85rem; }
  .pokemon-intro-card::after { right: .8rem; width: 6rem; }
  .pokemon-intro-zh { font-size: 1.02rem; }
  .pokemon-intro-en { font-size: .71rem; }
  .pokemon-intro-tts { justify-self: start; min-height: 2.1rem; }
  .pokemon-boss-intro-panel,
  .pokemon-boss-intro { grid-template-columns: minmax(0, 1fr) auto; gap: .7rem; min-height: 118px; padding: .85rem .9rem; border-radius: .85rem; }
  .pokemon-boss-intro-zh { font-size: 1.08rem; }
  .pokemon-boss-intro-en { font-size: .68rem; }
  .pokemon-boss-intro-avatar { min-width: 4.2rem; min-height: 4.2rem; }
}
@media (max-width: 460px) {
  .pokemon-intro-card { grid-template-columns: 1fr; }
  .pokemon-intro-tts { width: 100%; }
  .pokemon-boss-intro-panel,
  .pokemon-boss-intro { grid-template-columns: 1fr; }
  .pokemon-boss-intro-avatar { position: absolute; right: .7rem; bottom: .35rem; min-width: 3.4rem; min-height: 3.4rem; opacity: .7; }
  .pokemon-boss-intro-panel .pokemon-intro-tts,
  .pokemon-boss-intro .pokemon-intro-tts { width: fit-content; }
}
@media (prefers-reduced-motion: reduce) {
  .pokemon-intro-card,
  .pokemon-intro-tts.is-playing .pokemon-intro-tts-wave i,
  .pokemon-intro-tts[data-playing="true"] .pokemon-intro-tts-wave i,
  .pokemon-boss-intro-panel,
  .pokemon-boss-intro,
  .pokemon-boss-intro-avatar { animation: none; }
  .pokemon-intro-tts { transition: none; }
}

/* Companion hero profile: a readable identity card with level-driven SVG states. */
.pokemon-hero-card {
  --hero-accent: #2f7dcc;
  position: relative;
  display: grid;
  grid-template-columns: minmax(170px, .6fr) minmax(0, 1.4fr);
  grid-template-areas:
    "visual identity"
    "visual scores"
    "visual trophies";
  align-items: center;
  gap: 1rem clamp(1rem, 3vw, 2rem);
  min-height: 330px;
  overflow: hidden;
  padding: clamp(1.1rem, 3vw, 1.7rem);
  border: 1px solid color-mix(in srgb, var(--hero-accent) 30%, #d8e0e7);
  border-radius: 1.25rem;
  background: linear-gradient(135deg, #f8fcff 0%, #edf6ff 58%, #f5f0ff 100%);
  box-shadow: 0 18px 42px rgba(35,79,125,.14), inset 0 1px rgba(255,255,255,.94);
  isolation: isolate;
  animation: pokemon-hero-card-enter 480ms cubic-bezier(.2,.85,.3,1) both;
}
.pokemon-hero-card::before {
  position: absolute;
  inset: -28% -10% auto auto;
  z-index: -1;
  width: 58%;
  height: 88%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--hero-accent) 24%, transparent), transparent 68%);
  content: "";
  opacity: .72;
  pointer-events: none;
}
.pokemon-hero-card::after {
  position: absolute;
  right: 1.4rem;
  bottom: .9rem;
  width: 13rem;
  height: 3.5rem;
  border: 1px solid color-mix(in srgb, var(--hero-accent) 23%, transparent);
  border-radius: 50%;
  content: "";
  opacity: .68;
  pointer-events: none;
  transform: rotate(-8deg);
}
.pokemon-hero-visual {
  grid-area: visual;
  position: relative;
  display: grid;
  place-items: center;
  min-height: 230px;
}
.pokemon-hero-avatar {
  --hero-body: #f59e0b;
  --hero-trim: #fff7ed;
  position: relative;
  display: block;
  width: clamp(160px, 20vw, 230px);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 13px 9px rgba(23,52,82,.24));
  transform-origin: 50% 78%;
  animation: pokemon-hero-avatar-float 3.5s ease-in-out infinite alternate;
}
.pokemon-hero-avatar .pokemon-hero-aura { stroke: var(--hero-trim); filter: drop-shadow(0 0 7px color-mix(in srgb, var(--hero-trim) 55%, transparent)); animation: pokemon-hero-aura-spin 8s linear infinite; transform-origin: 50% 50%; }
.pokemon-hero-avatar .pokemon-hero-cape { filter: drop-shadow(0 4px 3px rgba(23,52,82,.16)); }
.pokemon-hero-avatar .pokemon-hero-head { filter: drop-shadow(0 2px 1px rgba(0,0,0,.12)); }
.pokemon-hero-avatar .pokemon-hero-badge { filter: drop-shadow(0 0 4px color-mix(in srgb, var(--hero-trim) 65%, transparent)); }
.pokemon-hero-tier-rookie { --hero-body: #f59e0b; --hero-trim: #fff7ed; }
.pokemon-hero-tier-pathfinder { --hero-body: #16a34a; --hero-trim: #dcfce7; }
.pokemon-hero-tier-trailblazer { --hero-body: #0ea5e9; --hero-trim: #cffafe; }
.pokemon-hero-tier-ascendant { --hero-body: #8b5cf6; --hero-trim: #fef3c7; }
.pokemon-hero-tier-pathfinder .pokemon-hero-cape { filter: drop-shadow(0 0 6px rgba(22,163,74,.28)); }
.pokemon-hero-tier-trailblazer .pokemon-hero-cape { filter: drop-shadow(0 0 8px rgba(14,165,233,.34)); }
.pokemon-hero-tier-ascendant .pokemon-hero-cape { filter: drop-shadow(0 0 12px rgba(139,92,246,.42)); }
.pokemon-hero-tier-ascendant .pokemon-hero-aura { stroke-dasharray: 9 13; stroke-width: 6; }
.pokemon-hero-identity { grid-area: identity; display: grid; align-content: center; gap: .25rem; min-width: 0; }
.pokemon-hero-identity .eyebrow { color: var(--hero-accent); font-size: .68rem; font-weight: 900; letter-spacing: .14em; }
.pokemon-hero-identity h3 { margin: 0; color: #162f4a; font-size: clamp(1.5rem, 4vw, 2.35rem); font-weight: 950; line-height: 1.08; }
.pokemon-hero-identity p { margin: .18rem 0 0; color: #557289; font-size: .83rem; font-weight: 800; }
.pokemon-hero-xp-track { height: .65rem; margin-top: .55rem; overflow: hidden; border: 1px solid color-mix(in srgb, var(--hero-accent) 28%, #fff); border-radius: 999px; background: rgba(214,232,247,.78); box-shadow: inset 0 1px 3px rgba(35,79,125,.12); }
.pokemon-hero-xp-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--hero-accent), color-mix(in srgb, var(--hero-accent) 50%, #fff)); box-shadow: 0 0 13px color-mix(in srgb, var(--hero-accent) 44%, transparent); transition: width 480ms cubic-bezier(.2,.8,.3,1); }
.pokemon-hero-identity > small { color: #678397; font-size: .72rem; font-weight: 800; }
.pokemon-hero-score-grid { grid-area: scores; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.pokemon-hero-score-grid article { display: grid; gap: .18rem; min-width: 0; padding: .65rem .7rem; border: 1px solid rgba(93,139,177,.25); border-radius: .75rem; background: rgba(255,255,255,.7); box-shadow: 0 5px 12px rgba(35,79,125,.06); }
.pokemon-hero-score-grid article strong { color: #1d4664; font-size: 1.18rem; line-height: 1; }
.pokemon-hero-score-grid article span { color: #5f7c90; font-size: .68rem; font-weight: 850; line-height: 1.3; }
.pokemon-hero-score-grid article small { color: #86a0b0; font-size: .64rem; font-weight: 700; }
.pokemon-hero-trophies { grid-area: trophies; display: grid; gap: .5rem; }
.pokemon-hero-trophies .panel-heading { margin: 0; }
.pokemon-trophy-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .45rem; }
.pokemon-trophy { display: grid; place-items: center; gap: .13rem; min-height: 66px; padding: .38rem .25rem; border: 1px solid #d9e4ee; border-radius: .7rem; background: rgba(255,255,255,.6); text-align: center; }
.pokemon-trophy strong { font-size: 1.25rem; filter: grayscale(.8); opacity: .55; }
.pokemon-trophy span { overflow: hidden; max-width: 100%; color: #58758a; font-size: .63rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.pokemon-trophy small { overflow: hidden; max-width: 100%; color: #8aa0af; font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; }
.pokemon-trophy.unlocked { border-color: color-mix(in srgb, var(--hero-accent) 34%, #fff); background: color-mix(in srgb, var(--hero-accent) 8%, #fff); box-shadow: 0 5px 13px color-mix(in srgb, var(--hero-accent) 12%, transparent); }
.pokemon-trophy.unlocked strong { filter: none; opacity: 1; animation: pokemon-trophy-pop 500ms cubic-bezier(.2,1.3,.3,1) both; }
.pokemon-trophy.locked { opacity: .65; }
.pokemon-trophy[data-trophy-state="unlocked"] { border-color: color-mix(in srgb, var(--hero-accent) 34%, #fff); }
@keyframes pokemon-hero-card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pokemon-hero-avatar-float { from { transform: translateY(2px) rotate(-1deg); } to { transform: translateY(-5px) rotate(1deg); } }
@keyframes pokemon-hero-aura-spin { to { transform: rotate(360deg); } }
@keyframes pokemon-trophy-pop { 0% { transform: scale(.7) rotate(-8deg); opacity: .3; } 70% { transform: scale(1.12) rotate(3deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@media (max-width: 900px) {
  .pokemon-hero-card { grid-template-columns: minmax(145px, .46fr) minmax(0, 1fr); gap: .9rem; padding: 1rem; }
  .pokemon-hero-visual { min-height: 190px; }
  .pokemon-hero-avatar { width: clamp(145px, 24vw, 190px); }
  .pokemon-hero-score-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pokemon-trophy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .pokemon-hero-card { grid-template-columns: 1fr; grid-template-areas: "visual" "identity" "scores" "trophies"; gap: .8rem; min-height: 0; padding: .85rem; border-radius: 1rem; }
  .pokemon-hero-visual { min-height: 155px; }
  .pokemon-hero-avatar { width: 154px; }
  .pokemon-hero-identity { text-align: center; justify-items: center; }
  .pokemon-hero-xp-track { width: 100%; }
  .pokemon-hero-score-grid { gap: .4rem; }
  .pokemon-hero-score-grid article { padding: .55rem .35rem; text-align: center; }
  .pokemon-trophy-grid { gap: .35rem; }
  .pokemon-trophy { min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) {
  .pokemon-hero-card,
  .pokemon-hero-avatar,
  .pokemon-hero-avatar .pokemon-hero-aura,
  .pokemon-trophy.unlocked strong { animation: none; }
  .pokemon-hero-xp-track i { transition: none; }
}

/* Round 1: the map owns navigation; the encounter view owns capture work. */
.pokemon-map-summary { min-width: 0; }
.pokemon-map-side { min-width: 0; }
.pokemon-summary-grid { min-width: 0; }
.pokemon-map-encounter-link[hidden] { display: none !important; }
.pokemon-map-encounter-link {
  position: relative;
  overflow: hidden;
  border-color: #fbbf24;
  background: linear-gradient(145deg, #fffdf2, #fff7d6);
  box-shadow: 0 10px 24px rgba(146,92,15,.12);
}
.pokemon-map-encounter-link::after {
  position: absolute;
  right: -1rem;
  bottom: -1.4rem;
  width: 6rem;
  height: 4rem;
  border: 1px solid rgba(245,158,11,.32);
  border-radius: 50%;
  content: "";
  transform: rotate(-13deg);
}
@media (max-width: 1280px) {
  .pokemon-summary-grid { grid-template-columns: minmax(0, 1fr); }
  .pokemon-summary-grid > .pokemon-map-summary,
  .pokemon-summary-grid > .pokemon-map-side { min-width: 0; width: 100%; }
  .pokemon-map-side { grid-template-columns: minmax(0, 1fr); }
  .pokemon-map-side .pokemon-inventory-panel { padding: .65rem .85rem; }
  .pokemon-inventory-panel .pokemon-ball-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .4rem; }
  .pokemon-inventory-panel .pokemon-ball-row { justify-content: center; min-width: 0; min-height: 2.5rem; gap: .35rem; padding: .4rem .2rem; }
  .pokemon-inventory-panel .pokemon-count-row { margin-top: .25rem; font-size: .78rem; }
}
#pokemon-encounter-view { max-width: 920px; margin: 0 auto; }
#pokemon-encounter-view .pokemon-encounter-panel[data-encounter-page="true"] {
  position: relative;
  overflow: hidden;
  border-color: #fbbf24;
  background: linear-gradient(145deg, #fffefa, #fff7d8 70%, #fef3c7);
  box-shadow: 0 16px 34px rgba(146,92,15,.14);
}
#pokemon-encounter-view .pokemon-encounter-panel[data-encounter-page="true"]::before {
  position: absolute;
  inset: -40% -12% auto auto;
  width: 12rem;
  height: 10rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253,230,138,.42), transparent 68%);
  content: "";
  pointer-events: none;
}
#pokemon-encounter-view .pokemon-encounter-card,
#pokemon-encounter-view .pokemon-minigame-list,
#pokemon-encounter-view .pokemon-capture-controls,
#pokemon-encounter-view #pokemon-minigame-message { position: relative; z-index: 1; }
#pokemon-encounter-view .pokemon-capture-controls { flex-wrap: wrap; justify-content: flex-end; }
#pokemon-encounter-view .pokemon-capture-controls .field-group { min-width: 10rem; }

/* Round 3: make game outcomes readable even when the API responds immediately. */
#pokemon-minigame-message.pokemon-minigame-result-success,
#pokemon-minigame-message.pokemon-minigame-result-low_score,
#pokemon-minigame-message.pokemon-minigame-result-failure {
  display: block;
  padding: .6rem .7rem;
  border: 1px solid transparent;
  border-radius: .65rem;
  animation: pokemon-minigame-result-pop 520ms cubic-bezier(.2,1.25,.35,1) both;
}
#pokemon-minigame-message.pokemon-minigame-result-success { border-color: #86efac; background: #f0fdf4; color: #166534; }
#pokemon-minigame-message.pokemon-minigame-result-low_score { border-color: #fcd34d; background: #fffbeb; color: #92400e; animation-name: pokemon-minigame-result-wiggle; }
#pokemon-minigame-message.pokemon-minigame-result-failure { border-color: #fca5a5; background: #fef2f2; color: #991b1b; animation-name: pokemon-minigame-result-shake; }
#pokemon-minigame-message.pokemon-minigame-result-success strong,
#pokemon-minigame-message.pokemon-minigame-result-low_score strong,
#pokemon-minigame-message.pokemon-minigame-result-failure strong { color: inherit; }
@keyframes pokemon-minigame-result-pop { 0% { opacity: .45; transform: translateY(5px) scale(.97); } 65% { transform: translateY(-2px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pokemon-minigame-result-wiggle { 0% { opacity: .45; transform: translateY(5px) rotate(-1deg); } 55% { transform: translateY(-2px) rotate(1deg); } 100% { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes pokemon-minigame-result-shake { 0% { opacity: .45; transform: translateX(-5px); } 35% { transform: translateX(4px); } 70% { transform: translateX(-2px); } 100% { opacity: 1; transform: translateX(0); } }

/* Round 2: compact SVG game launcher cards. */
#pokemon-minigame-list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .55rem;
}
#pokemon-minigame-list > .form-message { grid-column: 1 / -1; }
#pokemon-minigame-list .pokemon-minigame > .sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
}
.pokemon-minigame {
  position: relative;
  display: grid;
  grid-template-columns: 2.45rem minmax(0, 1fr);
  align-items: center;
  gap: .55rem;
  min-height: 3.45rem;
  width: 100%;
  padding: .55rem .62rem;
  border: 1px solid #c9dced;
  border-radius: .72rem;
  background: linear-gradient(145deg, #fff, #f4f9ff);
  color: #1d4664;
  text-align: left;
  box-shadow: 0 4px 10px rgba(35,79,125,.06);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}
.pokemon-minigame:hover,
.pokemon-minigame:focus-visible { border-color: #60a5fa; background: #eff6ff; box-shadow: 0 8px 16px rgba(35,79,125,.13); outline: none; transform: translateY(-2px); }
.pokemon-minigame-icon-wrap { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid #bfdbfe; border-radius: .65rem; background: linear-gradient(145deg, #dbeafe, #eef7ff); color: #2563eb; }
.pokemon-minigame-icon { width: 1.42rem; height: 1.42rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.pokemon-minigame-name { display: -webkit-box; min-width: 0; overflow: hidden; color: #1e3a5f; font-size: .76rem; font-weight: 900; line-height: 1.25; text-overflow: ellipsis; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.pokemon-minigame[data-game="ring_throw"] .pokemon-minigame-icon-wrap,
.pokemon-minigame[data-game="capture_timing"] .pokemon-minigame-icon-wrap { background: #fef3c7; border-color: #fcd34d; color: #b45309; }
.pokemon-minigame[data-game="grass_route"] .pokemon-minigame-icon-wrap,
.pokemon-minigame[data-game="sound_trail"] .pokemon-minigame-icon-wrap { background: #dcfce7; border-color: #86efac; color: #15803d; }
.pokemon-minigame[data-game="combo_blitz"] .pokemon-minigame-icon-wrap { background: #ffedd5; border-color: #fdba74; color: #c2410c; }
.pokemon-minigame[data-game="word_roulette"] .pokemon-minigame-icon-wrap,
.pokemon-minigame[data-game="word_card_draw"] .pokemon-minigame-icon-wrap { background: #ede9fe; border-color: #c4b5fd; color: #6d28d9; }
.pokemon-minigame[title]::after { position: absolute; bottom: calc(100% + .45rem); left: .6rem; z-index: 8; max-width: min(18rem, 80vw); padding: .42rem .55rem; border: 1px solid #bfdbfe; border-radius: .5rem; background: #0f2743; color: #fff; content: attr(title); font-size: .68rem; font-weight: 700; line-height: 1.35; opacity: 0; pointer-events: none; transform: translateY(4px); transition: opacity 140ms ease, transform 140ms ease; }
.pokemon-minigame[title]:hover::after,
.pokemon-minigame[title]:focus-visible::after { opacity: 1; transform: translateY(0); }
.pokemon-practice-drawer { grid-column: 1 / -1; margin-top: .25rem; border: 1px dashed #bfdbfe; border-radius: .65rem; background: rgba(239,246,255,.65); }
.pokemon-practice-drawer summary { cursor: pointer; padding: .55rem .65rem; color: #1d4ed8; font-size: .78rem; font-weight: 900; }
.pokemon-practice-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: 0 .55rem .55rem; }

/* Round 3: icon-first task list with an in-panel desktop drawer and mobile sheet. */
.pokemon-quest-panel { position: relative; }
#pokemon-quest-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(4.3rem, 1fr)); gap: .5rem; }
.pokemon-quest-icon {
  position: relative;
  display: grid;
  place-items: center;
  gap: .2rem;
  min-height: 4.25rem;
  padding: .4rem .25rem;
  border: 1px solid #d8e4ef;
  border-radius: .75rem;
  background: linear-gradient(145deg, #fff, #f6f9fc);
  color: #58758a;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
}
.pokemon-quest-icon:hover,
.pokemon-quest-icon:focus-visible,
.pokemon-quest-icon[data-quest-drawer-open="true"] { border-color: #60a5fa; background: #eff6ff; box-shadow: 0 8px 16px rgba(35,79,125,.12); color: #1d4ed8; outline: none; transform: translateY(-2px); }
.pokemon-quest-icon-mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .65rem; background: #eaf2ff; font-size: 1.2rem; line-height: 1; }
.pokemon-quest-icon-status { max-width: 100%; overflow: hidden; color: inherit; font-size: .62rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; }
.pokemon-quest-icon.ready { border-color: #f59e0b; background: #fffbeb; color: #92400e; box-shadow: 0 0 0 3px rgba(245,158,11,.12); }
.pokemon-quest-icon.ready .pokemon-quest-icon-mark { background: #fef3c7; }
.pokemon-quest-icon.claimed { opacity: .58; }
.pokemon-quest-icon.in_progress .pokemon-quest-icon-mark { background: #e0f2fe; }
.pokemon-quest-drawer[hidden] { display: none !important; }
.pokemon-quest-drawer {
  position: absolute;
  inset: .75rem;
  z-index: 20;
  display: grid;
  align-content: start;
  gap: .65rem;
  max-height: calc(100% - 1.5rem);
  overflow: auto;
  padding: .85rem;
  border: 1px solid #93c5fd;
  border-radius: .9rem;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 42px rgba(15,23,42,.2);
  backdrop-filter: blur(10px);
  animation: pokemon-task-drawer-enter 220ms ease both;
}
.pokemon-quest-drawer .panel-heading { align-items: center; margin: 0; }
.pokemon-quest-drawer-content { display: grid; gap: .35rem; padding: .7rem; border: 1px solid #dbeafe; border-radius: .7rem; background: #f8fbff; color: #36556d; }
.pokemon-quest-detail { display: grid; gap: .35rem; }
.pokemon-quest-detail strong { color: #173f5f; font-size: 1rem; }
.pokemon-quest-detail small { color: #668298; font-weight: 800; }
.pokemon-quest-detail p { margin: .1rem 0; font-size: .8rem; font-weight: 700; }
.pokemon-quest-detail .pokemon-quest-claim { width: fit-content; margin-top: .25rem; }
@keyframes pokemon-task-drawer-enter { from { opacity: 0; transform: translateY(7px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (max-width: 720px) {
  #pokemon-minigame-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; }
  .pokemon-practice-list { grid-template-columns: 1fr; }
  .pokemon-minigame { grid-template-columns: 2rem minmax(0, 1fr); gap: .35rem; min-height: 3.1rem; padding: .4rem; }
  .pokemon-minigame-icon-wrap { width: 1.9rem; height: 1.9rem; }
  .pokemon-minigame-name { font-size: .68rem; }
  .pokemon-minigame[title]::after { display: none; }
  #pokemon-encounter-view .pokemon-capture-controls { align-items: stretch; justify-content: stretch; }
  #pokemon-encounter-view .pokemon-capture-controls .field-group,
  #pokemon-encounter-view .pokemon-capture-controls select,
  #pokemon-encounter-view .pokemon-capture-controls button { width: 100%; }
  #pokemon-quest-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pokemon-quest-drawer { position: fixed; inset: auto 0 0; max-height: min(78vh, 36rem); border-radius: 1rem 1rem 0 0; padding: .9rem; }
}
@media (min-width: 721px) and (max-width: 1080px) {
  #pokemon-minigame-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 440px) {
  #pokemon-quest-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pokemon-quest-icon { min-height: 3.9rem; }
  .pokemon-quest-icon-mark { width: 1.8rem; height: 1.8rem; font-size: 1.05rem; }
}
@media (prefers-reduced-motion: reduce) {
  .pokemon-minigame,
  .pokemon-minigame[title]::after,
  .pokemon-quest-icon,
  .pokemon-quest-drawer,
  .pokemon-practice-drawer,
  #pokemon-minigame-message.pokemon-minigame-result-success,
  #pokemon-minigame-message.pokemon-minigame-result-low_score,
  #pokemon-minigame-message.pokemon-minigame-result-failure { transition: none; animation: none; }
}

/* Aim at the visible companion, including narrow mobile encounter scenes. */
.pokemon-capture-ball { left: auto; right: 1rem; }
@keyframes capture-ball-throw {
  0% { transform: translate(0, 0) rotate(0); }
  55% { transform: translate(calc(var(--capture-hit-x, -160px) * .6), calc(var(--capture-hit-y, -100px) - var(--capture-arc-height, 12px))) rotate(360deg); }
  100% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) rotate(540deg) scale(.8); }
}
@keyframes capture-ball-reinforced-arc {
  0% { transform: translate(0, 0) rotate(-12deg); }
  58% { transform: translate(calc(var(--capture-hit-x, -160px) * .58), calc(var(--capture-hit-y, -100px) - var(--capture-arc-height, 12px))) rotate(280deg); }
  100% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) rotate(540deg) scale(.8); }
}
@keyframes capture-ball-swift-arc {
  0% { transform: translate(0, 0) rotate(0); }
  42% { transform: translate(calc(var(--capture-hit-x, -160px) * .72), calc(var(--capture-hit-y, -100px) * .85 - var(--capture-arc-height, 12px))) rotate(540deg) scale(1.08); }
  100% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) rotate(1080deg) scale(.72); }
}
@keyframes capture-ball-habitat-arc {
  0% { transform: translate(0, 0) rotate(0); }
  32% { transform: translate(calc(var(--capture-hit-x, -160px) * .2), calc(var(--capture-hit-y, -100px) * .4 - var(--capture-arc-height, 12px) * .6)) rotate(-150deg); }
  68% { transform: translate(calc(var(--capture-hit-x, -160px) * .85), calc(var(--capture-hit-y, -100px) * .8 - var(--capture-arc-height, 12px))) rotate(140deg); }
  100% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) rotate(360deg) scale(.8); }
}
@keyframes capture-ball-twilight-arc {
  0% { transform: translate(0, 0) rotate(0); }
  45% { transform: translate(calc(var(--capture-hit-x, -160px) * .45), calc(var(--capture-hit-y, -100px) * .6 - var(--capture-arc-height, 12px))) rotate(-540deg) scale(.76); }
  85% { transform: translate(calc(var(--capture-hit-x, -160px) * .93), calc(var(--capture-hit-y, -100px) * .8 - var(--capture-arc-height, 12px) * .3)) rotate(-880deg) scale(1.04); }
  100% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) rotate(-1080deg) scale(.78); }
}
@keyframes capture-ball-starcore-arc {
  0% { transform: translate(0, 0) rotate(0); filter: drop-shadow(0 0 0 transparent); }
  35% { transform: translate(calc(var(--capture-hit-x, -160px) * .38), calc(var(--capture-hit-y, -100px) * .8 - var(--capture-arc-height, 12px))) rotate(240deg) scale(1.25); filter: drop-shadow(0 0 18px #ffe38a); }
  70% { transform: translate(calc(var(--capture-hit-x, -160px) * .85), calc(var(--capture-hit-y, -100px) - var(--capture-arc-height, 12px))) rotate(540deg) scale(.8); filter: drop-shadow(0 0 12px #ffc14f); }
  100% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) rotate(720deg) scale(.76); filter: drop-shadow(0 0 9px #ffc14f); }
}
@keyframes capture-ball-success-arc {
  0%, 100% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) scale(.8); }
  45% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) scale(1.18) rotate(18deg); }
  75% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) scale(.86) rotate(-13deg); }
}
@keyframes capture-ball-failure-return {
  0% { transform: translate(var(--capture-hit-x, -160px), var(--capture-hit-y, -100px)) scale(.8); }
  35% { transform: translate(calc(var(--capture-hit-x, -160px) * .72), calc(var(--capture-hit-y, -100px) * .75)) rotate(180deg) scale(1.1); }
  100% { transform: translate(0, 0) rotate(720deg) scale(.8); opacity: 0; }
}

/* Keep the complete encounter scene and all launchers inside one viewport. */
#pokemon-encounter-view { width: 100%; max-width: 920px; min-width: 0; }
#pokemon-encounter-view .section-heading { align-items: center; gap: .6rem; margin-bottom: .55rem; }
#pokemon-encounter-view .section-heading h3 { font-size: 1.25rem; line-height: 1.15; }
#pokemon-encounter-view .section-heading .helper-text { margin: .18rem 0 0; font-size: .76rem; line-height: 1.25; }
#pokemon-encounter-view .section-heading > button { flex: 0 0 auto; padding: .48rem .62rem; font-size: .78rem; }
#pokemon-encounter-view .pokemon-encounter-panel[data-encounter-page="true"] { display: grid; gap: .42rem; min-width: 0; padding: .68rem; }
#pokemon-encounter-view .pokemon-encounter-panel > .panel-heading { min-height: 0; margin: 0; padding: .46rem .58rem; }
#pokemon-encounter-view .pokemon-encounter-panel > .panel-heading h3 { font-size: .96rem; }
#pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) {
  display: grid;
  grid-template-columns: 4.15rem minmax(0, 1fr);
  grid-template-rows: repeat(3, min-content);
  align-items: center;
  column-gap: .58rem;
  row-gap: .04rem;
  min-height: 5.4rem;
  padding: .4rem .62rem;
}
#pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > .pokemon-avatar-full { grid-column: 1; grid-row: 1 / span 3; justify-self: center; width: 3.9rem; height: 3.9rem; }
#pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > strong { grid-column: 2; grid-row: 1; min-width: 0; font-size: .96rem; line-height: 1.12; overflow-wrap: anywhere; }
#pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > span { grid-column: 2; grid-row: 2; min-width: 0; font-size: .78rem; line-height: 1.1; overflow-wrap: anywhere; }
#pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > small { grid-column: 2; grid-row: 3; min-width: 0; font-size: .7rem; line-height: 1.12; overflow-wrap: anywhere; }
#pokemon-encounter-view .pokemon-encounter-card .pokemon-capture-countdown { grid-column: 1 / -1; grid-row: 4; margin: .12rem 0 0; padding: .28rem .4rem; font-size: .82rem; }
#pokemon-encounter-view #pokemon-minigame-list { min-width: 0; margin-top: .08rem; gap: .38rem; }
#pokemon-encounter-view .pokemon-minigame { grid-template-columns: 1.9rem minmax(0, 1fr); gap: .36rem; min-height: 2.75rem; padding: .32rem .4rem; }
#pokemon-encounter-view .pokemon-minigame-icon-wrap { width: 1.82rem; height: 1.82rem; }
#pokemon-encounter-view .pokemon-minigame-name { font-size: .71rem; line-height: 1.16; overflow-wrap: break-word; }
#pokemon-encounter-view .pokemon-capture-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .48rem; min-width: 0; }
#pokemon-encounter-view .pokemon-capture-controls .field-group { display: block; min-width: 0; margin: 0; font-size: .78rem; white-space: nowrap; }
#pokemon-encounter-view .pokemon-capture-controls select { width: 100%; min-width: 0; padding: .42rem .5rem; }
#pokemon-encounter-view .pokemon-capture-controls button { width: auto; min-width: 0; padding: .48rem .62rem; font-size: .78rem; white-space: nowrap; }
#pokemon-encounter-view #pokemon-minigame-message:empty { display: none; }

@media (max-width: 720px) {
  #pokemon-encounter-view .pokemon-encounter-panel[data-encounter-page="true"] { gap: .3rem; padding: .48rem; }
  #pokemon-encounter-view .pokemon-encounter-panel > .panel-heading { padding: .35rem .45rem; }
  #pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) { grid-template-columns: 3.55rem minmax(0, 1fr); column-gap: .4rem; min-height: 4.7rem; padding: .3rem .45rem; }
  #pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > .pokemon-avatar-full { width: 3.35rem; height: 3.35rem; }
  #pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > strong { font-size: .86rem; }
  #pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > span { font-size: .7rem; }
  #pokemon-encounter-view .pokemon-encounter-card:not(.empty-state) > small { font-size: .64rem; }
  #pokemon-encounter-view #pokemon-minigame-list { gap: .3rem; }
  #pokemon-encounter-view .pokemon-minigame { grid-template-columns: 1.6rem minmax(0, 1fr); gap: .24rem; min-height: 44px; padding: .26rem .32rem; }
  #pokemon-encounter-view .pokemon-minigame-icon-wrap { width: 1.55rem; height: 1.55rem; border-radius: .5rem; }
  #pokemon-encounter-view .pokemon-minigame-icon { width: 1.1rem; height: 1.1rem; }
  #pokemon-encounter-view .pokemon-minigame-name { font-size: .64rem; line-height: 1.12; }
  #pokemon-encounter-view .pokemon-capture-controls { grid-template-columns: auto minmax(0, 1fr) auto; gap: .34rem; }
  #pokemon-encounter-view .pokemon-capture-controls .field-group { font-size: .68rem; }
  #pokemon-encounter-view .pokemon-capture-controls .field-group,
  #pokemon-encounter-view .pokemon-capture-controls select,
  #pokemon-encounter-view .pokemon-capture-controls button { width: auto; }
  #pokemon-encounter-view .pokemon-capture-controls select { padding: .34rem .38rem; font-size: .72rem; }
  #pokemon-encounter-view .pokemon-capture-controls button { padding: .38rem .48rem; font-size: .68rem; }
  #pokemon-encounter-view .pokemon-capture-controls button { max-width: 9.4rem; overflow: hidden; text-overflow: ellipsis; }
}

/* Shared SVG UI symbols keep the same geometry across platforms and fonts. */
.ui-icon { display: inline-block; width: 1.2em; height: 1.2em; flex-shrink: 0; vertical-align: -.2em; }
.ui-icon .ui-icon-backdrop { stroke: none; }
[data-standard-icon] { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.nav-tab { grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: .55rem; }
.nav-tab .nav-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; width: 1.35rem; height: 1.35rem; color: #64748b; }
.nav-tab .nav-label-zh, .nav-tab .nav-label-en { grid-column: 2; min-width: 0; }
.nav-tab.active .nav-icon, .nav-tab:hover .nav-icon { filter: drop-shadow(0 2px 3px rgba(37,99,235,.2)); }
.pokemon-node-icon { display: grid; place-items: center; }
.pokemon-node-icon .ui-icon { width: clamp(.9rem, 2vw, 1.4rem); height: clamp(.9rem, 2vw, 1.4rem); }
.pokemon-quest-icon-mark .ui-icon { width: 1.35rem; height: 1.35rem; color: #2563eb; }
.pokemon-quest-icon.ready .ui-icon { color: #a16207; }
.pokemon-trophy strong { display: grid; place-items: center; }
.pokemon-trophy strong .ui-icon { width: 1.7rem; height: 1.7rem; }
.pokemon-trophy.unlocked strong { color: #b77916; }
.pokemon-inventory-panel .pokemon-ball-dot, .pokemon-ball-dot { display: inline-flex; align-items: center; width: 1.4rem; height: 1.4rem; border: 0; background: none; box-shadow: none; color: var(--ball-color, #64748b); }
.pokemon-ball-dot .ui-icon { width: 100%; height: 100%; }
.snake-control .ui-icon { width: 1.25rem; height: 1.25rem; }
.snake-cell-icon { width: .85rem; height: .85rem; }
.legend-icon .ui-icon { width: 1rem; height: 1rem; }

/* Encounter arcade: physical boards, tokens and movement rather than answer lists. */
.encounter-arcade { display: grid; gap: .65rem; min-width: 0; padding: .85rem; border: 1px solid #bfdbfe; border-radius: 1rem; background: linear-gradient(145deg, #f0f9ff, #f5f3ff); color: #17334f; }
.arcade-heading, .arcade-hud, .arcade-toolbar, .arcade-word-clue { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
.arcade-heading > strong { display: inline-flex; align-items: center; gap: .35rem; }
.arcade-clock { padding: .2rem .5rem; border-radius: .4rem; background: #fff; font-variant-numeric: tabular-nums; font-weight: 800; }
.arcade-hud { font-size: .78rem; color: #475569; }
.arcade-progress { width: 100%; height: .55rem; accent-color: #7c3aed; }
.arcade-ready { display: grid; place-items: center; gap: .6rem; min-height: 160px; padding: 1rem; border: 1px dashed #a5b4fc; border-radius: .8rem; background: rgba(255,255,255,.8); text-align: center; }
.arcade-ready p { max-width: 32rem; margin: 0; font-size: .85rem; line-height: 1.6; }
.arcade-toolbar { justify-content: center; }
.arcade-action { min-height: 44px; border-color: #cbd5e1; background: #fff; }
#pokemon-encounter-view .encounter-arcade .arcade-action { width: auto; }
.arcade-action:focus-visible, .arcade-cell:focus-visible, .arcade-match-tile:focus-visible { outline: 3px solid #818cf8; outline-offset: 2px; }
.arcade-feedback { min-height: 1.6rem; margin: 0; color: #0f766e; font-size: .82rem; line-height: 1.5; }
.arcade-match-board { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; }
.arcade-match-links { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; fill: none; stroke-width: 4; stroke-dasharray: 6 4; }
.arcade-match-tile { position: relative; z-index: 1; }
.arcade-match-tile { display: grid; place-items: center; gap: .3rem; min-height: 88px; padding: .5rem; border: 2px solid #c4b5fd; border-radius: .8rem; background: #fff; color: #4c1d95; }
.arcade-match-tile small { font-size: .6rem; color: #64748b; }
.arcade-match-tile strong { overflow-wrap: anywhere; }
.arcade-match-tile.selected { border-color: #f59e0b; background: #fef3c7; transform: translateY(-3px); box-shadow: 0 5px 0 #fcd34d; }
.arcade-match-tile.matched { border-color: #34d399; background: #d1fae5; opacity: 1; }
.arcade-token-dropzone { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .35rem; min-height: 72px; padding: .65rem; border: 2px dashed #a78bfa; border-radius: .8rem; background: #ede9fe; }
.arcade-token-dropzone > span { font-size: .8rem; color: #6d28d9; }
.arcade-token-bank { display: flex; justify-content: center; flex-wrap: wrap; gap: .4rem; padding: .5rem; }
.arcade-token-bank button { min-width: 44px; max-width: 100%; overflow-wrap: anywhere; white-space: normal; border-color: #7dd3fc; box-shadow: 0 3px 0 #bae6fd; cursor: grab; }
.arcade-token-dropzone button { max-width: 100%; overflow-wrap: anywhere; white-space: normal; border-color: #c4b5fd; }
.arcade-grid { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .3rem; max-width: 380px; width: 100%; margin: 0 auto; padding: .5rem; border-radius: .8rem; background: #065f46; }
.arcade-cell { display: grid; place-items: center; min-height: 44px; aspect-ratio: 1.2; padding: .15rem; border: 1px solid #86efac; border-radius: .45rem; background: #d1fae5; color: #166534; font-weight: 900; }
.arcade-cell.player { background: #fef08a; border-color: #f59e0b; box-shadow: 0 0 12px #fbbf24; }
.arcade-cell.letter { background: #fff; color: #6d28d9; }
.arcade-cell-dot { width: 4px; height: 4px; border-radius: 50%; background: #86b59a; }
.arcade-directions { display: flex; justify-content: center; gap: .4rem; }
#pokemon-encounter-view[data-arcade-active="true"] #pokemon-minigame-list,
#pokemon-encounter-view[data-arcade-active="true"] .pokemon-capture-controls { display: none; }
.arcade-fall-field { position: relative; height: 210px; overflow: hidden; touch-action: none; border: 2px solid #a5b4fc; border-radius: 1rem; background: linear-gradient(#e0f2fe,#ede9fe 75%,#d1fae5 75%); }
.arcade-catch-band { position: absolute; top: 76%; left: 0; right: 0; bottom: 2%; border-top: 2px dashed #059669; background: rgba(52,211,153,.12); pointer-events: none; }
.arcade-drop-letter { position: absolute; z-index: 1; transform: translate(-50%,-50%); width: 44px; height: 44px; padding: 0; border: 2px solid #7c3aed; border-radius: .6rem; background: #fff; color: #5b21b6; font-size: 1.15rem; font-weight: 900; box-shadow: 0 3px 0 #c4b5fd; }
.arcade-basket { position: absolute; z-index: 2; bottom: 0; width: 50px; height: 40px; transform: translateX(-50%); border-radius: 40% 40% .3rem .3rem; background: #34d399; display: grid; place-items: center; pointer-events: none; transition: left .12s; }
.arcade-basket > svg { width: 34px; height: 34px; }
.arcade-spelling-slots, .arcade-snake-chain { display: flex; justify-content: center; flex-wrap: wrap; gap: .3rem; }
.arcade-spelling-slots > span, .arcade-snake-chain > span { display: grid; place-items: center; min-width: 24px; height: 28px; border: 1px solid #bfdbfe; border-radius: .45rem; background: #fff; font-weight: 800; }
.arcade-snake-chain > span { border-radius: 50%; }
.arcade-snake-chain > span.lit { background: #d9f99d; border-color: #65a30d; }
.arcade-settling { display: grid; place-items: center; gap: .65rem; min-height: 180px; border-radius: .8rem; background: #d1fae5; animation: arcade-pop .6s ease both; }
.arcade-settling.loss { background: #ffedd5; animation: arcade-recoil .55s ease both; }
.arcade-settling > svg { width: 3rem; height: 3rem; }
.arcade-ring-arena { position: relative; display: grid; place-items: center; height: 154px; overflow: hidden; border-radius: 1rem; background: radial-gradient(circle, #ddd6fe, #eff6ff); }
.arcade-ring-actor { position: relative; z-index: 1; }
.arcade-ring-marker { position: absolute; width: 136px; height: 136px; border: 4px solid #f59e0b; border-radius: 50%; animation: arcade-ring 1.8s ease-in-out infinite; }
.arcade-thrown-ball { position: absolute; z-index: 2; animation: arcade-throw .55s ease-out both; }
.arcade-thrown-ball > svg { width: 2rem; height: 2rem; }
.arcade-shot-scores { display: flex; justify-content: center; gap: .4rem; }
.arcade-shot-scores span { padding: .4rem; border-radius: .4rem; background: #fff; font-size: .75rem; }
.arcade-shot-scores .complete { background: #fef3c7; color: #92400e; }
.arcade-battle-scene { position: relative; display: flex; align-items: center; justify-content: space-around; height: 150px; overflow: hidden; border-radius: 1rem; background: linear-gradient(155deg, #0f172a, #312e81); }
.arcade-player-figure > svg { width: 86px; height: 96px; }
.arcade-enemy-figure { filter: drop-shadow(0 6px 12px #818cf8); }
.arcade-battle-scene.dodge .arcade-enemy-figure { animation: arcade-lunge .75s ease-in-out infinite alternate; }
.arcade-battle-scene.strike .arcade-player-figure { animation: arcade-dodge .65s ease both; }
.arcade-energy-beam { position: absolute; left: 28%; top: 45%; width: 45%; height: 12px; border-radius: 50%; background: linear-gradient(90deg,#38bdf8,#fde047); opacity: 0; }
.arcade-battle-scene.strike .arcade-energy-beam { opacity: .9; animation: arcade-beam .4s ease-in-out infinite alternate; }
.arcade-charge-form { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem; }
.arcade-charge-input { min-width: 0; min-height: 44px; padding: .5rem; border: 2px solid #a5b4fc; border-radius: .65rem; text-align: center; font-size: 1.1rem; }
.arcade-danger-clock { text-align: center; color: #be123c; }
.arcade-memory-cards { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; perspective: 700px; }
.arcade-memory-card { position: relative; min-height: 134px; padding: .5rem; border: 2px solid #a78bfa; border-radius: .8rem; background: #ede9fe; transform-style: preserve-3d; transition: transform .38s, background .3s; }
.arcade-memory-card.face-up { background: #fff; transform: rotateY(180deg); }
.arcade-memory-card.collected { border-color: #34d399; background: #d1fae5; }
.arcade-card-face, .arcade-card-back { position: absolute; inset: .3rem; display: grid; place-content: center; gap: .45rem; backface-visibility: hidden; overflow-wrap: anywhere; }
.arcade-card-face { transform: rotateY(180deg); }
.arcade-card-back > svg { width: 2.5rem; height: 2.5rem; }
.arcade-card-prompt { text-align: center; }
.arcade-wheel { position: relative; width: min(100%, 180px); margin: .3rem auto; }
.arcade-wheel > svg { display: block; width: 100%; }
.arcade-wheel-disc { transform-origin: 60px 60px; }
.arcade-wheel-pointer { position: absolute; z-index: 1; top: -.3rem; left: calc(50% - 7px); border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 16px solid #dc2626; }
@keyframes arcade-ring { 0%,100% { transform: scale(1); } 50% { transform: scale(.5); } }
@keyframes arcade-throw { from { transform: translate(140px,60px) scale(1.2) rotate(0); } to { transform: translate(0,0) scale(.55) rotate(540deg); } }
@keyframes arcade-pop { from { transform: scale(.8); opacity: .4; } to { transform: scale(1); opacity: 1; } }
@keyframes arcade-recoil { 25%,75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes arcade-lunge { to { transform: translateX(-20px) rotate(-6deg); } }
@keyframes arcade-beam { from { transform: scaleX(.3); } to { transform: scaleX(1); } }
@keyframes arcade-dodge { 35% { transform: translate(-20px,-16px) rotate(-8deg); } 100% { transform: translate(0,0) rotate(0); } }
@media (prefers-reduced-motion: reduce) {
  .arcade-settling, .arcade-ring-marker, .arcade-thrown-ball, .arcade-battle-scene.dodge .arcade-enemy-figure, .arcade-battle-scene.strike .arcade-player-figure, .arcade-energy-beam { animation: none !important; }
  .arcade-memory-card { transition: none; }
}
@media (max-width: 760px) {
  .encounter-arcade { padding: .55rem; gap: .5rem; }
  .arcade-heading { font-size: .88rem; }
  .arcade-match-board { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .arcade-match-tile { min-height: 70px; }
  .arcade-word-clue > strong { font-size: .9rem; }
  .arcade-grid { padding: .3rem; gap: .25rem; }
  .arcade-toolbar button { padding: .4rem .5rem; font-size: .76rem; }
}

/* Dictionary: a quiet reading surface alongside the learning and game views. */
.dictionary-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .5rem 0 1.5rem; }
.dictionary-header h3 { font-size: clamp(1.5rem, 3vw, 2rem); margin: .3rem 0; }
.dictionary-header .helper-text { margin: .5rem 0 0; }
.dictionary-badge { display: inline-flex; align-items: center; gap: .5rem; flex-shrink: 0; padding: .65rem 1rem; border: 1px solid #dbeafe; border-radius: 999px; color: #1d4ed8; background: #eff6ff; font-weight: 700; }
.dictionary-layout { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 1.25rem; align-items: start; }
.dictionary-main { min-width: 0; display: grid; gap: 1.25rem; }
.dictionary-search, .dictionary-result, .dictionary-library { background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; box-shadow: 0 5px 20px rgba(23,32,42,.035); }
.dictionary-search { padding: 1.5rem; }
.dictionary-search > label { display: block; margin-bottom: .75rem; font-weight: 700; }
.dictionary-search-row { display: flex; gap: .65rem; }
#dictionary-input { width: 100%; min-width: 0; padding: .95rem 1rem; border: 2px solid #d8e0e7; border-radius: .75rem; background: #fbfcfd; font-size: 1.2rem; }
#dictionary-input:focus { outline: 3px solid #dbeafe; border-color: #2563eb; }
#dictionary-submit { flex-shrink: 0; display: inline-flex; align-items: center; gap: .4rem; }
.dictionary-search-footer { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .75rem; color: var(--muted); font-size: .8rem; }
.dictionary-search-footer button { width: auto; padding: .35rem .65rem; }
.dictionary-status { min-height: 1.3em; margin: .65rem 0 0; color: #14815f; font-size: .85rem; overflow-wrap: anywhere; }
.dictionary-status.is-error { color: #c2413a; }
.dictionary-result { padding: 1.75rem; overflow-wrap: anywhere; }
.dictionary-empty { min-height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .75rem; color: var(--muted); }
.dictionary-empty > svg, .dictionary-empty > [data-standard-icon] svg { width: 3rem; height: 3rem; }
.dictionary-empty h4 { margin: .5rem 0 0; font-size: 1.3rem; color: var(--ink); }
.dictionary-empty p { margin: 0; line-height: 1.7; }
.dictionary-empty .dictionary-chips { justify-content: center; margin-top: .75rem; }
.dictionary-word-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.dictionary-word-heading h4 { font-size: clamp(2rem, 4vw, 3rem); margin: .25rem 0 0; line-height: 1.15; }
.dictionary-word-heading .eyebrow { margin: 0; font-size: .68rem; }
.dictionary-word-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
.dictionary-word-actions button { width: auto; font-size: .85rem; }
.dictionary-star[aria-pressed="true"] { color: #92400e; border-color: #fcd34d; background: #fffbeb; }
.dictionary-pronunciations { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding: 1.25rem 0; color: var(--muted); font-size: .85rem; border-bottom: 1px solid var(--line); }
.dictionary-pronunciations strong { margin-left: .3rem; color: var(--ink); font-size: 1.1rem; font-weight: 400; }
.dictionary-pronunciations button { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; font-size: .85rem; }
.dictionary-result h5 { margin: 1.5rem 0 .85rem; font-size: 1rem; }
.dictionary-definitions p { display: flex; align-items: baseline; gap: .85rem; margin: .8rem 0; line-height: 1.7; }
.dictionary-pos { flex-shrink: 0; min-width: 3rem; padding: .05rem .5rem; border-radius: .4rem; background: #eff6ff; color: #1d4ed8; font-size: .85rem; text-align: center; font-weight: 700; }
.dictionary-examples h5 span { margin-left: .5rem; color: var(--muted); font-size: .75rem; font-weight: 400; }
.dictionary-examples ol { margin: 0; padding: 0; list-style: none; counter-reset: dictionary-example; display: grid; gap: .6rem; }
.dictionary-examples li { counter-increment: dictionary-example; display: flex; align-items: start; gap: .75rem; padding: 1rem; background: #f8fafc; border-radius: .75rem; }
.dictionary-examples li::before { content: counter(dictionary-example, decimal-leading-zero); flex-shrink: 0; padding-top: .15rem; font-size: .8rem; color: #64748b; }
.dictionary-examples li > div { flex: 1; min-width: 0; }
.dictionary-examples p { margin: 0; line-height: 1.7; }
.dictionary-examples .dictionary-example-zh { color: var(--muted); font-size: .9rem; margin-top: .2rem; }
.dictionary-examples button { flex-shrink: 0; width: 44px; min-width: 44px; padding: .45rem; }
.dictionary-etymology { margin-top: 1.5rem; border-left: 3px solid #93c5fd; padding: .25rem 1rem; background: #f0f7ff; border-radius: 0 .65rem .65rem 0; }
.dictionary-etymology h5 { margin: .5rem 0; }
.dictionary-etymology p { margin: .5rem 0; font-size: .9rem; line-height: 1.8; }
.dictionary-source { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .75rem; color: var(--muted); }
.dictionary-library { padding: 1.25rem; }
.dictionary-library h4 { margin: 0; font-size: 1rem; }
.dictionary-library h4 > span { margin-left: .3rem; color: #2563eb; }
.dictionary-library section + section { border-top: 1px solid var(--line); margin-top: 1.5rem; padding-top: 1.5rem; }
.dictionary-library .helper-text { font-size: .8rem; line-height: 1.7; }
.dictionary-library-heading { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-bottom: .85rem; }
.dictionary-library-heading button { width: auto; flex-shrink: 0; padding: .3rem .45rem; font-size: .72rem; }
.dictionary-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.dictionary-chips button { padding: .45rem .7rem; border-radius: .6rem; font-size: .9rem; overflow-wrap: anywhere; max-width: 100%; }
.dictionary-storage-note { margin: 1.5rem 0 0; }
@media (max-width: 1100px) { .dictionary-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) {
  .dictionary-header { align-items: start; }
  .dictionary-badge { display: none; }
  .dictionary-search, .dictionary-result, .dictionary-library { padding: 1rem; }
  .dictionary-search-row { flex-direction: column; }
  #dictionary-submit { justify-content: center; }
  .dictionary-word-heading { align-items: start; flex-direction: column; }
  .dictionary-examples li { padding: .75rem; gap: .5rem; }
}