/* SPDX-License-Identifier: GPL-3.0 */
/* Public game screens use the shared Loopyti surfaces and type scale. */
.playground-body.site-ui .playground-main { max-width: 792px; padding: 36px 28px 24px; }
.playground-body.site-ui .playground-topline { align-items: center; margin-bottom: 24px; }
.playground-body.site-ui .playground-topline h1 { font-size: 28px; font-weight: 600; line-height: 1.3; letter-spacing: -.025em; }
.playground-body.site-ui :is(.utility-button, .game-tab, .dialog-close) { min-height: 44px; }
.playground-body.site-ui .utility-button { color: var(--site-muted); font-size: var(--type-label); }
.playground-body.site-ui .utility-button:hover { color: var(--site-ink); background: var(--site-soft); }
.playground-body.site-ui .utility-button > span { font-size: 16px; }
.playground-body.site-ui .utility-button:last-child > span { width: 18px; height: 18px; font-size: 12px; }
.playground-body.site-ui .game-tabs { padding: 4px; gap: 4px; background: var(--site-soft); border-radius: 12px; margin-bottom: 20px; }
.playground-body.site-ui .game-tab { padding: 10px 8px; font-size: var(--type-label); font-weight: 500; color: var(--site-muted); border-radius: 8px; white-space: normal; }
.playground-body.site-ui .game-tab.active { color: var(--site-ink); background: white; box-shadow: 0 1px 4px #1d1d1f12; font-weight: 600; }
.playground-body.site-ui .completion-mark { font-size: 12px; color: #297154; }
.playground-body.site-ui .game-panel { padding: 28px 32px; border: 1px solid var(--site-line); border-radius: 22px; box-shadow: none; background: white; }
.playground-body.site-ui .game-panel h2 { font-size: 30px; font-weight: 600; letter-spacing: -.025em; }
.playground-body.site-ui :is(.game-label, .puzzle-date, .puzzle-number, .form-note, .word-session, .word-reference, .word-reference strong, .word-best-top, .word-best-values small, .latest-label, #word-latest-rank, .guess-tag, .word-bottom-actions .text-button, #word-hint-count, .game-storage-note, .word-next-puzzle, .result-label, .daily-note) { font-size: var(--type-caption); color: var(--site-muted); }
.playground-body.site-ui :is(.game-lead, .word-feedback, .word-result > div > p, .word-error-box p, .word-load-state, .word-history-empty p) { font-size: var(--type-body); line-height: 1.65; color: var(--site-muted); }
.playground-body.site-ui :is(.word-reference strong, .word-session strong, .word-session time) { color: var(--site-ink); }
.playground-body.site-ui .word-input-row input { border-color: #a0a0a8; color: var(--site-ink); font-size: 16px; }
.playground-body.site-ui .word-input-row input::placeholder { color: var(--site-muted); font-size: var(--type-body); }
.playground-body.site-ui .word-input-row input:focus { border-color: var(--site-accent); }
.playground-body.site-ui .word-submit { background: var(--site-accent); color: white; font-size: var(--type-body); }
.playground-body.site-ui .word-submit:disabled { background: #e8e8ed; color: #64646a; }
.playground-body.site-ui .word-feedback.error { color: #a32823; }
.playground-body.site-ui .word-feedback.success { color: #297154; }
.playground-body.site-ui .word-feedback.new-best { color: #0066cc; background: #eef5ff; font-weight: 500; }
.playground-body.site-ui .loading-dot { background: var(--site-accent); }
.playground-body.site-ui :is(.word-load-state, .word-best-card) { background: var(--site-soft); border-color: var(--site-line); border-radius: 12px; }
.playground-body.site-ui .word-error-box { border-color: #f0d3d0; background: #fff4f2; border-radius: 12px; }
.playground-body.site-ui .word-error-box strong { font-size: var(--type-body); font-weight: 600; }
.playground-body.site-ui .word-best-top > span:first-child { font-weight: 500; color: var(--site-ink); }
.playground-body.site-ui .word-best-values > strong { color: var(--site-ink); font-weight: 600; }
.playground-body.site-ui .word-best-values > span > strong { color: var(--site-ink); font-weight: 500; }
.playground-body.site-ui .word-best-card.new-best { background: #eef5ff; border-color: #c3dbf6; }
.playground-body.site-ui .word-latest-card { color: var(--site-ink); background: #f5f8fc; border-color: var(--site-accent); border-radius: 8px; font-size: var(--type-label); }
.playground-body.site-ui :is(.word-latest-card > strong, .word-latest-card > #word-latest-score) { color: var(--site-ink); font-weight: 500; }
.playground-body.site-ui .guess-history-heading h3 { font-size: var(--type-label); color: var(--site-ink); font-weight: 500; }
.playground-body.site-ui .guess-history-heading select { font-size: 16px; min-height: 44px; max-width: 165px; color: var(--site-muted); padding: 8px; }
.playground-body.site-ui .word-table { font-size: var(--type-label); }
.playground-body.site-ui .word-table th { font-size: var(--type-caption); color: var(--site-muted); }
.playground-body.site-ui .word-table td:first-child, .playground-body.site-ui .word-table td:last-child { font-size: var(--type-caption); color: var(--site-muted); }
.playground-body.site-ui .word-table td:nth-child(2) { color: var(--site-ink); font-weight: 500; }
.playground-body.site-ui .guess-tag { background: var(--site-soft); padding: 2px 5px; }
.playground-body.site-ui .guess-tag.hint { color: #0066cc; background: #eef5ff; }
.playground-body.site-ui .word-result { border-radius: 12px; }
.playground-body.site-ui .word-result strong { font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.playground-body.site-ui .word-result > .button { min-height: 44px; font-size: var(--type-label); }
.playground-body.site-ui .daily-note { padding-top: 20px; line-height: 1.65; }
.playground-body.site-ui .daily-note time { color: var(--site-ink); }
.playground-body.site-ui .playground-footer { font-size: var(--type-caption); color: var(--site-muted); border-color: var(--site-line); gap: 4px 16px; }
.playground-body.site-ui :is(.playground-footer > a, .visitor-details > summary) { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--type-caption); color: var(--site-muted); }
.playground-body.site-ui .playground-footer > span { font-size: var(--type-caption); color: var(--site-muted); letter-spacing: 0; }
.playground-body.site-ui .visitor-details > .visitor-counter { border-color: var(--site-line); box-shadow: none; color: var(--site-muted); }
.playground-body.site-ui .visitor-counter :is(h2, dt, .visitor-hint) { font-size: var(--type-caption); color: var(--site-muted); font-weight: 400; }
.playground-body.site-ui .visitor-stats dd { font-size: 20px; font-weight: 600; color: var(--site-ink); }
.playground-body.site-ui .playground-dialog { padding: 28px; border-color: var(--site-line); border-radius: 20px; background: white; max-height: calc(100dvh - 32px); overflow: auto; }
.playground-body.site-ui .playground-dialog h2 { font-size: 22px; font-weight: 600; color: var(--site-ink); letter-spacing: -.02em; }
.playground-body.site-ui .dialog-close { width: 44px; min-width: 44px; color: var(--site-muted); }
.playground-body.site-ui :is(.how-to-panel > p, .how-to-panel ol, .record-panel #record-detail, #word-giveup-dialog > p) { color: var(--site-muted); font-size: var(--type-body); line-height: 1.65; }
.playground-body.site-ui :is(.how-to-panel .how-to-extra, .record-local-note, .record-values p, .record-values strong > span, .week-dot, .hangul-help-examples p) { font-size: var(--type-caption); color: var(--site-muted); }
.playground-body.site-ui .record-values strong { font-weight: 600; color: var(--site-ink); }
.playground-body.site-ui .week-dot.completed i { background: #e7f3eb; color: #297154; }
.playground-body.site-ui .week-dot i { color: var(--site-muted); background: var(--site-soft); }
.playground-body.site-ui .skip-link { background: var(--site-accent); color: white; }
/* Game colors retain their scoring meaning; other controls share the site palette. */
.playground-body.site-ui .pg-game { color: var(--site-ink); }
.playground-body.site-ui :is(.pg-day, .pg-timer, .pg-footer, .pg-stats dt, .pg-stats dd small, .pg-word-preview, .pg-turn-label, .pg-legend, .pg-explanation summary, .pg-explanation p, .pg-board-hint, .pg-sudoku-progress, .pg-memo-toggle small, .pg-number small, .pg-word-input > summary, .hangul-size) { font-size: var(--type-caption); color: var(--site-muted); }
.playground-body.site-ui :is(.pg-instructions, .pg-message, .pg-finish p, .pg-restart-confirm) { font-size: var(--type-body); line-height: 1.65; color: var(--site-muted); }
.playground-body.site-ui :is(.pg-button, .pg-hangul-form .pg-button) { min-height: 44px; font-size: var(--type-label); font-weight: 500; border-radius: 8px; }
.playground-body.site-ui .pg-dark { background: var(--site-accent); color: white; }
.playground-body.site-ui .pg-secondary { background: var(--site-soft); color: var(--site-ink); }
.playground-body.site-ui .pg-quiet { background: transparent; color: var(--site-muted); border-color: var(--site-line); }
.playground-body.site-ui :is(.pg-explanation summary, .pg-word-input > summary) { min-height: 44px; cursor: pointer; }
.playground-body.site-ui .pg-hangul-form input { font-size: 16px; height: 44px; min-height: 44px; border-color: #a0a0a8; }
.playground-body.site-ui .pg-turn-label, .playground-body.site-ui .pg-word-preview .pg-built-word { font-weight: 500; }
.playground-body.site-ui .pg-jamo-key { font-weight: 500; min-height: 44px; border-radius: 6px; }
.playground-body.site-ui .pg-jamo-key.pg-key-action { font-size: var(--type-caption); }
.playground-body.site-ui .pg-stats dd { font-weight: 600; color: var(--site-ink); }
.playground-body.site-ui .pg-finish { background: var(--site-soft); border-color: var(--site-line); border-radius: 12px; }
.playground-body.site-ui .pg-finish strong { font-weight: 600; }
.playground-body.site-ui .pg-number { color: var(--site-ink); background: var(--site-soft); border-color: var(--site-line); font-weight: 500; }
.playground-body.site-ui .pg-number:not(:disabled):hover { background: #eef5ff; border-color: #b6d4f5; }
.playground-body.site-ui .pg-number.pg-number-complete { background: #e7f3eb; color: #297154; }
.playground-body.site-ui .pg-memo-toggle { font-size: var(--type-label); color: var(--site-muted); }
.playground-body.site-ui .pg-memo-toggle input { accent-color: var(--site-accent); }
.playground-body.site-ui .pg-sudoku-cell.pg-given { font-weight: 600; }
.playground-body.site-ui .pg-restart-confirm { background: #fff4f2; border-color: #f0d3d0; }
@media (max-width: 600px) {
  .playground-body.site-ui .playground-main { padding: 24px 16px 20px; }
  .playground-body.site-ui .playground-topline { flex-wrap: wrap; gap: 8px 16px; margin-bottom: 20px; }
  .playground-body.site-ui .playground-topline h1 { font-size: 26px; }
  .playground-body.site-ui .playground-utilities { margin-left: auto; }
  .playground-body.site-ui .game-panel { padding: 24px 20px; border-radius: 18px; }
  .playground-body.site-ui #game-panel-kordle { padding: 20px 14px; }
  .playground-body.site-ui #game-panel-kordle h2 { font-size: 26px; }
  .playground-body.site-ui .game-lead { font-size: var(--type-body); }
  .playground-body.site-ui .word-best-values { grid-template-columns: minmax(0,1fr) 68px 80px; gap: 12px; }
  .playground-body.site-ui .word-best-values > strong { font-size: 22px; }
  .playground-body.site-ui .word-best-values > span > strong { font-size: 18px; }
  .playground-body.site-ui .word-latest-card { grid-template-columns: 32px minmax(0,1fr) 52px 76px; gap: 8px; }
  .playground-body.site-ui .word-table th:first-child { width: 28px; }
  .playground-body.site-ui .word-table th:nth-child(2) { width: 30%; }
  .playground-body.site-ui .word-table th:nth-child(3) { width: 64px; }
  .playground-body.site-ui .playground-dialog { padding: 24px; }
  .playground-body.site-ui #playground-help-dialog[data-game="kordle"] { padding: 24px 16px; }
}
@media (max-width: 360px) {
  .playground-body.site-ui .playground-main { padding-inline: 12px; }
  .playground-body.site-ui .game-panel { padding: 22px 16px; }
  .playground-body.site-ui .game-panel h2 { font-size: 26px; }
  .playground-body.site-ui .word-input-row { flex-wrap: wrap; }
  .playground-body.site-ui .word-input-row input { flex-basis: 100%; }
  .playground-body.site-ui .word-submit { width: 100%; }
  .playground-body.site-ui .word-best-values { grid-template-columns: minmax(0,1fr) 64px 76px; gap: 8px; }
  .playground-body.site-ui .word-latest-card { grid-template-columns: 28px minmax(0,1fr) 48px 72px; gap: 6px; padding-inline: 8px; }
  .playground-body.site-ui .guess-history-heading { flex-wrap: wrap; gap: 0; }
  .playground-body.site-ui .guess-history-heading select { margin-left: auto; }
}

.playground-body.site-ui :is(.pg-tile, .hangul-help-row > span) { font-weight: 600; }
.playground-body.site-ui .pg-hangul-board:focus-visible { outline: 2px solid var(--site-accent); outline-offset: 4px; }

/* Match the older game-ID rules without shrinking mobile metadata. */
.playground-body.site-ui #game-panel-kordle h2 { font-size: 30px; }
.playground-body.site-ui #game-panel-kordle .hangul-size,
.playground-body.site-ui #kordle-game .pg-timer,
.playground-body.site-ui #kordle-game .pg-word-preview { font-size: var(--type-caption); color: var(--site-muted); }
.playground-body.site-ui #kordle-game .pg-word-preview .pg-built-word { font-size: var(--type-body); color: var(--site-ink); }
.playground-body.site-ui #kordle-game .pg-instructions { font-size: var(--type-body); }
@media (max-width: 600px) {
  .playground-body.site-ui #game-panel-kordle h2 { font-size: 26px; }
}