:root {
  --site-pref-bg: rgba(255, 253, 247, .9);
  --site-pref-text: #385c50;
  --site-pref-border: rgba(66, 91, 79, .18);
  --site-pref-shadow: 0 6px 18px rgba(52, 71, 61, .1);
}

.site-header-actions,
[data-site-preferences-actions] {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}

.site-theme-toggle,
.site-name-open,
[data-active-rooms],
.site-watch-invite {
  min-width: 0;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid var(--site-pref-border);
  border-radius: 999px;
  background: var(--site-pref-bg);
  color: var(--site-pref-text);
  box-shadow: var(--site-pref-shadow);
  font: 800 11px/1.2 ui-rounded, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
}

.site-theme-toggle,
.site-name-open { cursor: pointer; }
.site-theme-toggle { min-width: 44px; flex: 0 0 auto; }
.site-theme-toggle:hover,
.site-name-open:hover,
.site-watch-invite:hover { filter: brightness(.98); transform: translateY(-1px); }
.site-theme-toggle:active,
.site-name-open:active,
.site-watch-invite:active { transform: translateY(1px); }
.site-theme-toggle [data-theme-icon] { width: 18px; font-size: 17px; line-height: 1; }
.site-name-open [data-site-name-display] { max-width: 9em; overflow: hidden; text-overflow: ellipsis; }
[data-active-rooms] { box-shadow: none; cursor: default; }
.site-watch-invite { border-radius: 11px; box-shadow: none; }

.site-name-dialog {
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100dvh - 36px);
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(62, 83, 72, .19);
  border-radius: 22px;
  background: #fffdf8;
  color: #253a34;
  box-shadow: 0 28px 90px rgba(34, 47, 41, .28);
}
.site-name-dialog::backdrop { background: rgba(25, 35, 31, .54); backdrop-filter: blur(3px); }
.site-name-dialog form { padding: 25px; }
.site-name-dialog .site-dialog-kicker { margin: 0 0 7px; color: #4c806d; font-size: 9px; font-weight: 900; letter-spacing: .15em; }
.site-name-dialog h2 { margin: 0; color: inherit; font-size: 24px; letter-spacing: -.035em; }
.site-name-dialog .site-dialog-copy { margin: 9px 0 17px; color: #718078; font-size: 12px; line-height: 1.75; }
.site-name-dialog label { display: grid; gap: 7px; color: #596a62; font-size: 11px; font-weight: 800; }
.site-name-dialog input {
  width: 100%;
  min-height: 48px;
  padding: 0 13px;
  border: 1px solid #d9e1da;
  border-radius: 11px;
  background: #fbfcf7;
  color: #263b34;
  outline: 0;
}
.site-name-dialog input:focus { border-color: #6ca58f; box-shadow: 0 0 0 3px rgba(108, 165, 143, .15); }
.site-name-dialog .site-name-error { min-height: 18px; margin: 7px 0 0; color: #b65345; font-size: 10px; }
.site-name-dialog .site-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 15px; }
.site-name-dialog .site-dialog-actions button { min-height: 46px; border: 1px solid #dce3db; border-radius: 11px; background: #f0f3ec; color: #506159; font-weight: 850; }
.site-name-dialog .site-dialog-actions .site-dialog-save { border-color: #397762; background: #397762; color: #fff; }

html[data-site-theme="dark"] {
  color-scheme: dark;
  --night: #151c1a;
  --cream: #151c1a;
  --paper: #202824;
  --paper-strong: #26302b;
  --surface: #202824;
  --surface-warm: #29332e;
  --panel: rgba(31, 40, 36, .96);
  --panel-solid: #202824;
  --ink: #edf4ef;
  --text: #edf4ef;
  --white: #f7faf7;
  --muted: #aab7af;
  --muted-light: #8f9d95;
  --line: rgba(213, 229, 218, .16);
  --line-dark: rgba(213, 229, 218, .3);
  --shadow: 0 22px 64px rgba(0, 0, 0, .28);
  --soft-shadow: 0 12px 30px rgba(0, 0, 0, .2);
  --site-pref-bg: rgba(37, 48, 43, .96);
  --site-pref-text: #dcebe2;
  --site-pref-border: rgba(214, 231, 220, .17);
  --site-pref-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}

html[data-site-theme="dark"],
html[data-site-theme="dark"] body {
  background: #151c1a !important;
  color: #edf4ef !important;
}
html[data-site-theme="dark"] body {
  background-image:
    radial-gradient(circle at 8% 4%, rgba(84, 139, 119, .16), transparent 30rem),
    radial-gradient(circle at 93% 20%, rgba(79, 125, 163, .13), transparent 29rem) !important;
}
html[data-site-theme="dark"] body::before { opacity: .12; }

html[data-site-theme="dark"] :where(
  .app-shell, .card, .entry-card, .waiting-card, .room-bar, .result-panel,
  .holdings, .log-panel, .arcade-hero, .phase-ribbon, .service-notice,
  .connection-note, .connection-banner, .lobby-rules, .game-card, .pack-play,
  .hero-card, .form-card, .board-card, .side-card, .panel, .player-card,
  .waiting-player, .hero, .event-card, .city-card, .result-score > div, dialog
) {
  background: #202824 !important;
  border-color: rgba(213, 229, 218, .15) !important;
  color: #edf4ef !important;
  box-shadow: 0 15px 42px rgba(0, 0, 0, .2) !important;
}

html[data-site-theme="dark"] :where(
  input, select, textarea, .game-search, .mode-group, .room-code,
  .player-row, .player, .personal-record, .arcade-stat, .pack-stat,
  .pack-best, .status-box, .pack-status, .result, .pack-result,
  .connection, .turn-chip, .turn, .top-status
) {
  background-color: #27312c !important;
  border-color: rgba(213, 229, 218, .16) !important;
  color: #e7f0ea !important;
}

html[data-site-theme="dark"] :where(input, select, textarea)::placeholder { color: #819087 !important; }
html[data-site-theme="dark"] :where(
  .hero-description, .hero-copy, .intro, .form-foot, .form-note, .rule-note,
  .arcade-note, .arcade-rules, .pack-rules, .pack-note, .pack-heading p,
  .arcade-hero p, .player-detail, .asset, footer, .footer, .section-head span,
  .leader-empty, .pack-rank-empty, .board-caption, .board-tools
) { color: #aab7af !important; }

html[data-site-theme="dark"] :where(h1, h2, h3, .cash, .city-title strong, .player-name) { color: #f1f6f2 !important; }
html[data-site-theme="dark"] :where(
  .hero-copy > p:not(.eyebrow), .hero-card .hero-copy, .form-note,
  .status-text.info, .connection-banner span, .side-card .section-label,
  .side-card .empty-note, .move-number, .move-san small
) { color: #aab7af !important; }
html[data-site-theme="dark"] .hero-card h1 span { color: #91cdb7 !important; }
html[data-site-theme="dark"] :where(.hero h1 span, .pack-heading h1 span, .hero-copy h1 span) { color: #91cdb7 !important; }
html[data-site-theme="dark"] :where(.hero-card .hero-tag, .hero-card .tag) {
  background: #2a3630 !important;
  border-color: rgba(213, 229, 218, .18) !important;
  color: #dbe8df !important;
}
html[data-site-theme="dark"] :where(.topbar) {
  border-color: rgba(213, 229, 218, .14) !important;
}
html[data-site-theme="dark"] :where(.brand b, .brand-mark) { background: #76b99e !important; color: #14231d !important; }
html[data-site-theme="dark"] :where(.icon-link, .icon-button, .connection-pill, .ghost-button, .btn, .key-hint, .tag, .hero-tag, .pack-local-label) {
  background-color: #29342e !important;
  border-color: rgba(213, 229, 218, .15) !important;
  color: #dfeae3 !important;
}
html[data-site-theme="dark"] :where(.game-card) {
  --card-fg: #edf4ef;
  --card-muted: #aab7af;
  --card-accent: #34463e;
}
html[data-site-theme="dark"] :where(.game-card p, .game-card small, .game-card .game-meta) { color: #aab7af !important; }
html[data-site-theme="dark"] :where(.captured-list, .move-list, .record-list, .status-row) {
  background: #27312c !important;
  border-color: rgba(213, 229, 218, .14) !important;
  color: #e5eee8 !important;
}
html[data-site-theme="dark"] :where(.board-scroll, .board-shell, .board-wrap, .arcade-canvas-wrap, .pack-board-shell) {
  border-color: rgba(213, 229, 218, .16) !important;
  box-shadow: 0 9px 25px rgba(0, 0, 0, .2) !important;
}
html[data-site-theme="dark"] :where(.toplinks span, .connection-pill, .connection) { background: #27322c !important; color: #dfeae3 !important; }
html[data-site-theme="dark"] :where(.confirm-dialog, .pack-confirm-dialog, .site-name-dialog) { background: #202824 !important; color: #edf4ef !important; }
html[data-site-theme="dark"] :where(.confirm-dialog p, .pack-confirm-dialog p, .site-name-dialog .site-dialog-copy, .site-name-dialog label) { color: #aab7af !important; }
html[data-site-theme="dark"] .watch-entry {
  background: #27312c !important;
  border-color: rgba(213, 229, 218, .17) !important;
  color: #edf4ef !important;
}
html[data-site-theme="dark"] .watch-entry > span:first-child { color: #8bcbb2 !important; }
html[data-site-theme="dark"] .watch-entry small { color: #aab7af !important; }

/* A few older games intentionally hard-code paper cards; give those cards a
   real night palette instead of leaving white text on a pale surface. */
html[data-site-theme="dark"] body[data-game="gomoku"] :where(.lobby-forms, .form-card, .connection-banner, .board-card, .panel, .player-card) {
  background: #202824 !important;
  border-color: rgba(213, 229, 218, .16) !important;
  color: #edf4ef !important;
}
html[data-site-theme="dark"] body[data-game="gomoku"] :where(.topbar, .lobby-hero) { background: #1b2420 !important; color: #edf4ef !important; }
html[data-site-theme="dark"] body[data-game="gomoku"] :where(.brand-name, .connection-banner strong, .form-title, .board-head h1, .room-code) { color: #edf4ef !important; }

html[data-site-theme="dark"] body[data-game="monopoly"] :where(.hero, .player-card, .city-card, .event-card, .result-score > div) {
  background: #202824 !important;
  border-color: rgba(213, 229, 218, .16) !important;
}
html[data-site-theme="dark"] body[data-game="monopoly"] :where(.hero h2, .hero-copy, .city-title strong, .event-card h3, .event-card p, .cash) { color: #edf4ef !important; }
html[data-site-theme="dark"] body[data-game="monopoly"] .city-card.set { background: #293a31 !important; }
html[data-site-theme="dark"] body[data-game="monopoly"] .player-card.active { background: #29362f !important; }

html[data-site-theme="dark"] body[data-game="undercover"] .timer-box { background: #111916 !important; color: #edf4ef !important; }
html[data-site-theme="dark"] body[data-game="undercover"] .waiting-panel { background: #263a32 !important; border-color: #426a5b !important; color: #cfe6dc !important; }
html[data-site-theme="dark"] body[data-game="undercover"] .waiting-panel :where(strong, p) { color: #dcebe3 !important; }
html[data-site-theme="dark"] body[data-game="undercover"] .candidate[aria-pressed="true"] { background: #554b2d !important; border-color: #c9a94b !important; color: #fff5c8 !important; }
html[data-site-theme="dark"] body[data-game="undercover"] .role-row span { background: #315145 !important; color: #dcebe3 !important; }
html[data-site-theme="dark"] body[data-game="undercover"] .role-row[data-role="undercover"] span { background: #573833 !important; color: #ffd9d3 !important; }
html[data-site-theme="dark"] body[data-game="minesweeper-solo"] :where(.solo-heading h1 span, .eyebrow) { color: #8fd0b6 !important; }

/* Preserve authored game boards and Canvas pixels; themes change the surrounding chrome only. */
html[data-site-theme] canvas,
html[data-site-theme] :where(.xiangqi-board, .mine-board, .tic-board, .number-cell, .soko-cell, .picture-tile, .chess-board) {
  filter: none !important;
}

html[data-site-theme="light"] body > .app-shell,
html[data-site-theme="light"] body > .shell { color-scheme: light; }

@media (max-width: 620px) {
  .site-header-actions,
  [data-site-preferences-actions] { gap: 5px; }
  .site-theme-toggle,
  .site-name-open,
  [data-active-rooms] { padding-inline: 9px; }
  .site-name-open [data-site-name-display] { max-width: 6em; }
}

@media (max-width: 390px) {
  .site-theme-toggle [data-theme-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site-theme-toggle { width: 44px; padding: 0; }
  .site-name-open [data-site-name-prefix] { display: none; }
  [data-active-rooms] { flex-basis: 100%; min-height: 32px; justify-content: flex-end; padding-block: 4px; background: transparent; border-color: transparent; box-shadow: none; }
  .site-name-dialog form { padding: 21px; }
  .site-watch-invite { min-height: 44px; white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .site-theme-toggle, .site-name-open, .site-watch-invite { transition: none !important; }
}