/* Shared navigation and outer surfaces; never recolor a game's canvas. */
.practice-workspace {
  --practice-ink: #173653;
  --practice-muted: #536b80;
  --practice-blue: #0969ad;
  --practice-line: #dfe7ef;
  font-family: "Avenir Next", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.practice-topbar {
  display: flex;
  align-items: center;
  gap: 12px 20px;
  width: min(1320px, calc(100% - 40px));
  min-height: 64px;
  margin: 0 auto 20px;
  padding: 8px 0;
  border-bottom: 1px solid var(--practice-line);
  color: var(--practice-ink);
  font: 600 13px/1.4 "Avenir Next", "PingFang SC", sans-serif;
}
.practice-topbar a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--practice-muted);
  text-decoration: none;
}
.practice-topbar a:hover { background: #eaf4ff; color: var(--practice-blue); }
.practice-topbar .practice-brand { padding-left: 0; }
.practice-topbar img { display: block; width: 112px; height: 36px; object-fit: contain; }
.practice-topbar [aria-current] { color: var(--practice-blue); }
.practice-topbar .practice-topbar-note { margin-left: auto; font-size: 12px; font-weight: 500; }
.practice-workspace :is(a, button, select, input, summary):focus-visible { outline: 3px solid #1976d2; outline-offset: 3px; }
.practice-keyboard {
  margin: 0;
  padding-top: 0;
  color: var(--practice-ink);
  background: #f6f8fc;
  overflow-x: visible;
}
.practice-keyboard :is(.app-shell, .falling-shell, .study-shell, .memory-shell) {
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 32px;
}
.practice-keyboard :is(.lesson-area, .side-panel, .study-planner, .study-workspace, .memory-hero, .welcome-card, .task-card, .falling-game-panel) {
  border-color: var(--practice-line);
  border-radius: 16px;
  box-shadow: none;
}
.practice-keyboard :is(.hero, .falling-hero, .memory-hero) { background: #eaf7f1; border-color: var(--practice-line); }
.practice-keyboard :is(.hero h1, .memory-hero h1) { font-size: clamp(28px, 3vw, 38px); line-height: 1.3; letter-spacing: -.02em; }
.practice-keyboard :is(.hero__copy, .hero-summary) { color: var(--practice-muted); font-size: 15px; line-height: 1.7; }
.practice-keyboard :is(.study-header, .study-planner, .study-workspace, .memory-aside, .task-card, .welcome-card) { background: #fff; }
.practice-keyboard :is(.study-header, .study-planner) { border-color: var(--practice-line); }
.practice-keyboard :is(.study-home-link, .memory-nav a, .hero-back-link) { min-height: 44px; display: inline-flex; align-items: center; }
.practice-keyboard :is(.mode-tab, .game-control, .study-button, .study-sound-button, .primary-button, .secondary-button, .text-button, select) { min-height: 44px; }
.practice-keyboard :is(.study-button--primary, .primary-button) { background: var(--practice-blue); border-color: var(--practice-blue); color: #fff; box-shadow: none; }
.practice-keyboard :is(.study-button--quiet, .mode-tab) { color: var(--practice-ink); background: #fff; border: 1px solid var(--practice-line); }
.practice-keyboard .mode-tab.is-active { color: #fff; background: var(--practice-blue); border-color: var(--practice-blue); }
.practice-keyboard :is(.keyboard-panel, .falling-keyboard-panel) { overflow-x: auto; overscroll-behavior-inline: contain; }
.practice-keyboard .keyboard { width: max-content; min-width: 100%; }
.practice-keyboard .keyboard button,
.practice-keyboard .falling-keyboard-panel .keyboard button { min-width: 44px; min-height: 44px; }
.practice-keyboard .study-planner select { font-size: 14px; }
.practice-keyboard .study-card__heading h1 { font-size: clamp(28px, 3vw, 42px); }
.practice-keyboard .study-button { font-size: 14px; font-weight: 650; }
.practice-keyboard .study-card { border-color: var(--practice-line); }
.practice-keyboard .study-meaning { color: var(--practice-ink); }
.practice-keyboard .practice-device-hint { color: var(--practice-muted); font-size: 13px; line-height: 1.65; }

/* Dark action games share a readable outer rail without touching combat art. */
.practice-dark .practice-topbar { border-color: #38483f; color: #edf5ef; }
.practice-dark .practice-topbar a { color: #d0ddd5; }
.practice-dark .practice-topbar a:hover { background: #243d32; color: #fff; }
.practice-dark .practice-topbar [aria-current] { color: #e5c57b; }
.practice-dark .practice-topbar img { padding: 3px 7px; background: #fff; border-radius: 6px; }
.practice-tower .shell { padding-top: 0; }
.practice-tower .side-panel { border-radius: 12px; }
.practice-tower .side-panel button { min-height: 44px; }
.practice-fullscreen .practice-topbar { width: calc(100% - 32px); height: 64px; margin-bottom: 0; flex-wrap: nowrap; }
.practice-fullscreen .prototype-shell { min-height: 0; }
.practice-fullscreen #phaser-root { height: calc(100dvh - 64px); }
.practice-fullscreen #phaser-root canvas { max-height: 100%; }
.practice-fullscreen .practice-topbar-note { display: none; }
.practice-workspace .game-exit-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 12px; border: 1px solid #62776d; border-radius: 8px; color: #e9f2ee; text-decoration: none; font-size: 13px; }
.practice-workspace .game-exit-link:hover { background: #23382f; }
/* Feijian navigation lives in title/pause/result screens, never over the HUD. */
.practice-sword .practice-home-link { position: static; z-index: auto; margin-bottom: 16px; box-shadow: none; transform: none; }
.practice-sword .practice-home-link span { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; color: #e5c57b; }
.practice-sword .practice-home-link img { width: 100px; height: 30px; padding: 4px 6px; }
.practice-sword .title-actions { flex-wrap: wrap; }
.practice-sword .title-screen { overflow-y: auto; padding-block: max(20px, env(safe-area-inset-top)); }
.practice-sword .title-copy { max-height: 100%; }
.practice-sword :is(.title-actions > button, .run-config select) { min-height: 44px; }
.practice-sword .modal-panel .game-exit-link { margin-top: 12px; }
.practice-sword .compact-overlay .modal-panel { max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .practice-topbar { flex-wrap: wrap; gap: 4px 8px; width: calc(100% - 24px); margin-bottom: 16px; }
  .practice-topbar img { width: 92px; height: 32px; }
  .practice-topbar a { padding-inline: 8px; }
  .practice-topbar .practice-topbar-note { flex: 1 0 100%; margin: 0; padding: 0 8px 4px; }
  .practice-topbar [aria-current] { font-size: 12px; }
  .practice-keyboard :is(.app-shell, .falling-shell, .study-shell, .memory-shell) { width: calc(100% - 24px); }
  .practice-keyboard .study-planner select { font-size: 16px; }
  .practice-keyboard .falling-toolbar { align-items: stretch; }
  .practice-keyboard :is(.mode-tabs, .falling-actions) { display: flex; flex-wrap: wrap; gap: 8px; }
  .practice-keyboard .mode-tab { flex: 1; padding-inline: 10px; }
  .practice-fullscreen .practice-topbar { gap: 4px; }
  .practice-fullscreen .practice-topbar .practice-brand { margin-right: auto; }
  .practice-fullscreen .practice-topbar [aria-current] { display: none; }
  .practice-sword .practice-home-link { margin-bottom: 8px; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .practice-topbar a, .game-exit-link { transition: none; }
}