/* 趣味页面 UI 基础层。
   这一层只负责语义颜色、排版和可读性；游戏规则与事件逻辑留在各自模块。 */

:root {
  --color-text-primary: #f7f8ff;
  --color-text-secondary: #d4dcf8;
  --color-text-muted: #aeb9e9;
  --color-text-disabled: #7f8aae;
  --color-bg-page: #090d24;
  --color-bg-surface: #151b3d;
  --color-bg-elevated: #202956;
  --color-bg-input: #0e1431;
  --color-border: rgba(184, 198, 244, 0.3);
  --color-divider: rgba(184, 198, 244, 0.18);
  --color-button-primary-bg: #35d7ff;
  --color-button-primary-text: #061426;
  --color-button-secondary-bg: #252d5a;
  --color-button-secondary-text: #f7f8ff;
  --color-success: #63d99a;
  --color-warning: #ffc857;
  --color-error: #ff7e9a;
  --color-info: #75cfff;
  --color-focus: #78e3ff;
  --color-hover: rgba(117, 207, 255, 0.16);
  --color-active: rgba(157, 108, 255, 0.3);
  --font-size-page-title: clamp(1.35rem, 2.3vw, 2rem);
  --font-size-section-title: clamp(1rem, 1.5vw, 1.25rem);
  --font-size-body: 0.9375rem;
  --font-size-secondary: 0.8125rem;
  --font-size-caption: 0.75rem;
  --font-size-button: 0.8125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 0.75rem;
  --space-lg: 1rem;
  --space-xl: 1.5rem;
  --spacing-xs: var(--space-xs);
  --spacing-sm: var(--space-sm);
  --spacing-md: var(--space-md);
  --spacing-lg: var(--space-lg);
  --spacing-xl: var(--space-xl);
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
}

html[data-theme="sakura"] {
  --color-text-primary: #3a202b;
  --color-text-secondary: #684652;
  --color-text-muted: #80636e;
  --color-text-disabled: #a48993;
  --color-bg-page: #fff7f5;
  --color-bg-surface: #fffdfc;
  --color-bg-elevated: #fff;
  --color-bg-input: #fff;
  --color-border: rgba(174, 79, 112, 0.32);
  --color-divider: rgba(174, 79, 112, 0.18);
  --color-button-primary-bg: #c43e6c;
  --color-button-primary-text: #fff;
  --color-button-secondary-bg: #fff0f4;
  --color-button-secondary-text: #4d2936;
  --color-success: #2e8b61;
  --color-warning: #9b6412;
  --color-error: #bd3f61;
  --color-info: #3d83a8;
  --color-focus: #b23a63;
  --color-hover: rgba(217, 79, 126, 0.12);
  --color-active: rgba(217, 79, 126, 0.18);
}

/* Existing game styles use these short aliases. Keep them scoped to the game
   stage so the rest of the application keeps its established visual system. */
.game-page {
  --text: var(--color-text-primary);
  --muted: var(--color-text-secondary);
  --border: var(--color-border);
  --border-bright: var(--color-focus);
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--color-focus) 32%, transparent), 0 0 0 1px var(--color-focus);
  color: var(--color-text-primary);
  font-size: var(--font-size-body);
}

.game-page :where(h1, h2, h3, h4, strong) {
  color: var(--color-text-primary);
}

.game-page :where(p, li, label, .fun-help, .game-list-record, small) {
  color: var(--color-text-secondary);
}

.game-page :where(input, textarea, select) {
  color: var(--color-text-primary);
  background-color: var(--color-bg-input);
  border-color: var(--color-border);
}

.game-page :where(input, textarea, select)::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

.game-page :where(button, input, textarea, select):focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

.game-page :where(button, .schulte-btn, .fun-action, .fun-segment) {
  color: var(--color-button-secondary-text);
  border-color: var(--color-border);
}

.game-page :where(button, .schulte-btn, .fun-action, .fun-segment):hover:not(:disabled),
.game-page :where(button, .schulte-btn, .fun-action, .fun-segment).active {
  color: var(--color-text-primary);
  border-color: var(--color-focus);
  background-color: var(--color-hover);
}

.game-page :where(button, .schulte-btn, .fun-action, .fun-segment):disabled {
  color: var(--color-text-disabled);
}

.game-page .fun-result,
.game-page .memory-complete,
.game-page .schulte-complete {
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-success) 46%, var(--color-border));
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-bg-surface));
}

.game-page .fun-result.error {
  border-color: color-mix(in srgb, var(--color-error) 60%, var(--color-border));
  background: color-mix(in srgb, var(--color-error) 13%, var(--color-bg-surface));
}

.game-page .game-leaderboard-panel,
.game-page .modal-card,
.game-page .game-card {
  color: var(--color-text-primary);
}

@supports not (color: color-mix(in srgb, black, white)) {
  .game-page .fun-result,
  .game-page .memory-complete,
  .game-page .schulte-complete { background: var(--color-bg-surface); }
  .game-page .fun-result.error { background: var(--color-bg-surface); }
}

@media (prefers-reduced-motion: reduce) {
  .game-page :where(button, .schulte-btn, .fun-action, .fun-segment) {
    transition-duration: 0.01ms;
  }
}

/* Phase 2 · shared play-surface layout.  Keep every game inside the same
   responsive contract; individual game sheets remain responsible for their
   board geometry and interaction states. */
.game-page {
  box-sizing: border-box;
  width: min(100%, 1480px);
  min-width: 0;
  margin-inline: auto;
  padding: clamp(12px, 2.2vw, 28px);
  overflow: visible;
  overflow-x: clip;
}

.game-page *,
.game-page *::before,
.game-page *::after {
  box-sizing: border-box;
}

.game-page > *,
.game-page .fun-game-shell,
.game-page .game-card,
.game-page .game-page-tools {
  min-width: 0;
}

.game-page .game-card,
.game-page .fun-game-shell > .glass,
.game-page .fun-game-shell > .game-card {
  border-radius: var(--radius-lg);
}

.game-page .game-card {
  width: 100%;
  max-width: none;
}

.game-page .fun-game-shell {
  width: 100%;
  max-width: none;
  gap: clamp(10px, 1.35vw, 18px);
}

.game-page .fun-toolbar,
.game-page .game-page-tools,
.game-page .game-action-row {
  max-width: 100%;
}

.game-page .fun-toolbar,
.game-page .game-page-tools {
  position: relative;
  z-index: 2;
}

.game-page .fun-toolbar {
  align-items: center;
}

.game-page .fun-toolbar > *,
.game-page .fun-toolbar-actions > * {
  min-width: 0;
}

.game-page .fun-toolbar .fun-segments {
  overflow-x: auto;
  scrollbar-width: thin;
}

.game-page .sudoku-layout,
.game-page .wheel-layout,
.game-page .gomoku-live-layout,
.game-page .avalon-layout,
.game-page .go-main,
.game-page .junqi-layout,
.game-page .checkers-layout,
.game-page .three-piece-layout {
  min-width: 0;
}

.game-page .sudoku-layout {
  grid-template-columns: minmax(420px, 760px) minmax(260px, 360px);
  justify-content: center;
  align-items: start;
  gap: clamp(18px, 2.4vw, 32px);
}

.game-page .sudoku-board {
  width: min(100%, 740px);
}

.game-page .wheel-layout {
  grid-template-columns: minmax(0, .95fr) minmax(280px, 1.05fr);
  align-items: start;
  gap: clamp(18px, 3vw, 42px);
}

.game-page .wheel-stage {
  width: min(100%, 520px);
  justify-self: center;
  margin-inline: auto;
}

.game-page .aim-trainer-arena {
  min-height: clamp(520px, calc(100dvh - 156px), 820px);
  padding: clamp(8px, 1vw, 14px);
  overflow: visible;
}

.game-page .aim-hud {
  flex-wrap: wrap;
}

.game-page .aim-duration-control,
.game-page .aim-hud-actions {
  min-width: 0;
}

.game-page .aim-play-layout,
.game-page .aim-canvas-card {
  min-width: 0;
}

.game-page .aim-canvas-card {
  min-height: clamp(360px, 58vh, 680px);
}

.game-page .aim-canvas {
  min-height: clamp(360px, 58vh, 680px);
}

.game-page .memory-sequence-stage,
.game-page .memory-panel,
.game-page .schulte-panel,
.game-page .tarot-page,
.game-page .liuyao-page,
.game-page .birthday-page {
  min-width: 0;
  width: 100%;
}

.game-page .memory-sequence-grid,
.game-page .memory-grid,
.game-page .schulte-grid {
  max-width: 100%;
}

.game-page .mine-board-scroll {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overscroll-behavior-inline: contain;
}

.game-page .gomoku-live-layout,
.game-page .go-main,
.game-page .avalon-layout {
  align-items: start;
}

.game-page .gomoku-live-layout > main,
.game-page .gomoku-live-layout > aside,
.game-page .go-main > main,
.game-page .go-main > aside,
.game-page .avalon-layout > main,
.game-page .avalon-layout > aside {
  min-width: 0;
}

.game-page .gomoku-board-shell,
.game-page .go-board-wrap,
.game-page .junqi-board-wrap,
.game-page .checkers-board-wrap,
.game-page .three-piece-board-wrap {
  max-width: 100%;
}

.game-page .gomoku-board,
.game-page .go-board,
.game-page .junqi-board,
.game-page .checkers-board,
.game-page .three-piece-board {
  max-width: 100%;
}

.game-page .gomoku-social-panel,
.game-page .go-main aside,
.game-page .avalon-layout aside {
  min-width: 0;
}

.game-page .game-leaderboard-panel {
  max-width: min(360px, calc(100vw - 32px));
}

@media (max-width: 1180px) {
  .game-page {
    padding: clamp(10px, 1.8vw, 20px);
  }

  .game-page .sudoku-layout,
  .game-page .wheel-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-page .sudoku-layout > *,
  .game-page .wheel-layout > * {
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .game-page .wheel-stage {
    width: min(76vw, 480px);
  }

  .game-page .aim-stat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1023px) {
  .game-page {
    padding: 10px clamp(8px, 2vw, 18px) 18px;
  }

  .game-page .game-card,
  .game-page .fun-game-shell > .glass {
    border-radius: var(--radius-md);
  }

  .game-page .fun-toolbar {
    align-items: stretch;
  }

  .game-page .fun-toolbar,
  .game-page .fun-toolbar-actions,
  .game-page .wheel-actions,
  .game-page .game-action-row {
    flex-wrap: wrap;
  }

  .game-page .fun-segments {
    flex: 1 1 100%;
  }

  .game-page .fun-toolbar-actions {
    width: 100%;
    justify-content: flex-start;
  }

  .game-page .wheel-stage {
    width: min(82vw, 430px);
  }

  .game-page .aim-trainer-arena {
    min-height: calc(100dvh - 132px);
  }

  .game-page .aim-play-layout {
    min-height: 0;
  }

  .game-page .aim-canvas-card,
  .game-page .aim-canvas {
    min-height: clamp(300px, 52vh, 560px);
  }

  .game-page .gomoku-live-layout,
  .game-page .go-main,
  .game-page .avalon-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .game-page .gomoku-social-panel,
  .game-page .go-main aside,
  .game-page .avalon-layout aside {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .game-page .gomoku-social-panel > *,
  .game-page .go-main aside > *,
  .game-page .avalon-layout aside > * {
    min-width: 0;
  }

  .game-page .gomoku-social-panel .gomoku-chat,
  .game-page .go-main aside .go-chat,
  .game-page .avalon-layout aside .avalon-leave {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .game-page {
    padding: 8px 6px 14px;
  }

  .game-page .game-card,
  .game-page .fun-game-shell > .glass {
    border-radius: var(--radius-sm);
  }

  .game-page .fun-toolbar,
  .game-page .fun-toolbar-actions,
  .game-page .wheel-actions,
  .game-page .game-action-row,
  .game-page .gomoku-social-panel,
  .game-page .go-main aside,
  .game-page .avalon-layout aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .game-page .fun-toolbar > *,
  .game-page .fun-toolbar-actions > *,
  .game-page .wheel-actions > *,
  .game-page .game-action-row > *,
  .game-page .gomoku-social-panel > *,
  .game-page .go-main aside > *,
  .game-page .avalon-layout aside > * {
    width: 100%;
    max-width: none;
  }

  .game-page .fun-segments {
    display: grid;
    width: 100%;
    min-width: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
  }

  .game-page .fun-segments > .fun-segment {
    min-width: 0;
    width: auto;
    padding-inline: 8px;
  }

  .game-page .fun-segment,
  .game-page .fun-action,
  .game-page .schulte-btn,
  .game-page .game-leaderboard-button {
    min-height: 40px;
  }

  .game-page .wheel-stage {
    width: min(92vw, 390px);
  }

  .game-page .aim-stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .game-page .aim-canvas-card,
  .game-page .aim-canvas {
    min-height: min(62vh, 460px);
  }

  .game-page .game-leaderboard-panel {
    position: fixed;
    inset: 64px 8px auto;
    width: auto;
    max-width: none;
  }

  .game-page .tarot-toolbar {
    align-items: stretch;
    flex-wrap: wrap;
  }

  .game-page .tarot-toolbar-selectors,
  .game-page .tarot-toolbar-actions {
    width: 100%;
    min-width: 0;
  }

  .game-page .tarot-toolbar-actions {
    justify-content: flex-end;
  }
}

/* Sudoku action rail: keep difficulty and primary actions on one compact,
   horizontally reachable line instead of consuming a second vertical row. */
.game-page .sudoku-page > .fun-toolbar {
  width: 100%;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  gap: 8px;
}

.game-page .sudoku-page > .fun-toolbar::-webkit-scrollbar {
  display: none;
}

.game-page .sudoku-page > .fun-toolbar > .fun-segments,
.game-page .sudoku-page > .fun-toolbar > .fun-action {
  flex: 0 0 auto;
  width: auto;
}

.game-page .sudoku-page > .fun-toolbar > .fun-segments {
  padding: 2px;
  gap: 2px;
}

.game-page .sudoku-page > .fun-toolbar > .fun-segments > .fun-segment,
.game-page .sudoku-page > .fun-toolbar > .fun-action {
  min-height: 28px;
  height: 28px;
  padding-block: 0;
  padding-inline: 11px;
  font-size: 12px;
  line-height: 1;
}