@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

.fgc-game-shell {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 38px;
}

.fgc-game-shell .user-name {
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--dim, #a0a0a0);
  text-transform: uppercase;
}

.fgc-game-shell .user-name span {
  color: var(--gold, var(--accent, #7b61ff));
}

.fgc-game-shell .toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.fgc-game-shell .toolbar-btn,
.fgc-game-shell .signout-btn {
  appearance: none;
  border: 1px solid var(--bdr, var(--border, #3f3f3f));
  border-radius: 8px;
  color: var(--dim2, var(--text-dim, #b0b0b0));
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 9px;
  font-family: inherit;
  background: transparent;
  padding: 7px 10px;
  line-height: 1;
  cursor: pointer;
}

.fgc-game-shell .toolbar-btn:hover,
.fgc-game-shell .signout-btn:hover {
  border-color: var(--bdr2, var(--gold, var(--accent, #7b61ff)));
  color: var(--text, var(--gold, var(--accent, #7b61ff)));
}

.fgc-game-shell .toolbar-theme-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--bdr, var(--border, #3f3f3f));
  border-radius: 8px;
}

.fgc-game-shell .toolbar-theme-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--dim, #9a9a9a);
  text-transform: uppercase;
}

.fgc-game-shell .toolbar-theme {
  border: none;
  background: transparent;
  color: var(--text, #ffffff);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 0;
}

.fgc-game-shell .toolbar-theme:focus {
  outline: none;
}

.fgc-game-shell .toolbar-room-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--bdr, var(--border, #3f3f3f));
  border-radius: 8px;
}

.fgc-game-shell .toolbar-room-label {
  font-size: 9px;
  letter-spacing: 0.16em;
  color: var(--dim, #9a9a9a);
  text-transform: uppercase;
}

.fgc-game-shell .toolbar-room-code {
  border: none;
  background: transparent;
  color: var(--text, #ffffff);
  font-family: inherit;
  font-size: 11px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
}

html[data-page="sudoku"] #gameShell,
html[data-page="cribbage"] #gameShell {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 10px 14px 4px;
}

html[data-page="wordy"] .fgc-game-shell {
  width: 100%;
}

@media (max-width: 720px) {
  .fgc-game-shell {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .fgc-game-shell .toolbar-group {
    justify-content: flex-start;
  }
}

html[data-theme="kinetic-light"] {
  --theme-primary: #6236ff;
  --theme-primary-soft: rgba(98,54,255,0.12);
  --theme-primary-line: rgba(98,54,255,0.26);
  --theme-secondary: #008191;
  --theme-secondary-soft: rgba(0,129,145,0.12);
  --theme-tertiary: #c0004d;
  --theme-tertiary-soft: rgba(192,0,77,0.12);
  --theme-bg: #fdf8ff;
  --theme-surface: #ffffff;
  --theme-surface-2: #f4f0f8;
  --theme-border: #e7e0eb;
  --theme-border-strong: #cfc6da;
  --theme-text: #1d1a22;
  --theme-dim: #7a757f;
  --theme-dim-2: #49454e;
  --theme-ok: #008191;
  --theme-error: #ba1a1a;
  --theme-shadow: 0 24px 48px -24px rgba(98,54,255,0.28);
}

html[data-theme="kinetic-dark"] {
  --theme-primary: #b6a0ff;
  --theme-primary-soft: rgba(182,160,255,0.14);
  --theme-primary-line: rgba(182,160,255,0.30);
  --theme-secondary: #00e3fd;
  --theme-secondary-soft: rgba(0,227,253,0.12);
  --theme-tertiary: #ff6c95;
  --theme-tertiary-soft: rgba(255,108,149,0.12);
  --theme-bg: #16052a;
  --theme-surface: #240e3b;
  --theme-surface-2: #2b1345;
  --theme-border: #32194e;
  --theme-border-strong: #524067;
  --theme-text: #f1dfff;
  --theme-dim: #826d98;
  --theme-dim-2: #b9a2d0;
  --theme-ok: #00e3fd;
  --theme-error: #ff6e84;
  --theme-shadow: 0 28px 64px -28px rgba(0,227,253,0.22);
}

html[data-theme^="kinetic"][data-page="hub"],
html[data-theme^="kinetic"][data-page="login"],
html[data-theme^="kinetic"][data-page="profile"] {
  --bg: var(--theme-bg);
  --surf: var(--theme-surface);
  --surf2: var(--theme-surface-2);
  --bdr: var(--theme-border);
  --bdr2: var(--theme-border-strong);
  --gold: var(--theme-primary);
  --gold-lo: var(--theme-primary-soft);
  --gold-md: rgba(98,54,255,0.18);
  --gold-soft: var(--theme-primary-soft);
  --gold-line: var(--theme-primary-line);
  --text: var(--theme-text);
  --dim: var(--theme-dim);
  --dim2: var(--theme-dim-2);
  --ok: var(--theme-ok);
  --err: var(--theme-error);
}

html[data-theme="kinetic-dark"][data-page="hub"],
html[data-theme="kinetic-dark"][data-page="login"],
html[data-theme="kinetic-dark"][data-page="profile"] {
  --gold-md: rgba(182,160,255,0.22);
}

html[data-theme^="kinetic"][data-page="hub"] body,
html[data-theme^="kinetic"][data-page="login"] body,
html[data-theme^="kinetic"][data-page="profile"] body {
  font-family: 'Manrope', sans-serif;
}

html[data-theme^="kinetic"][data-page="hub"] h1,
html[data-theme^="kinetic"][data-page="hub"] .card-title,
html[data-theme^="kinetic"][data-page="login"] h1,
html[data-theme^="kinetic"][data-page="profile"] h1,
html[data-theme^="kinetic"][data-page="profile"] .aside-value,
html[data-theme^="kinetic"][data-page="profile"] .panel-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  letter-spacing: -0.03em;
}

html[data-theme^="kinetic"][data-page="hub"] .eyebrow,
html[data-theme^="kinetic"][data-page="hub"] .card-label,
html[data-theme^="kinetic"][data-page="hub"] .tagline,
html[data-theme^="kinetic"][data-page="login"] .eyebrow,
html[data-theme^="kinetic"][data-page="login"] .tagline,
html[data-theme^="kinetic"][data-page="profile"] .eyebrow,
html[data-theme^="kinetic"][data-page="profile"] .panel-title,
html[data-theme^="kinetic"][data-page="profile"] .meta-key {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

html[data-theme^="kinetic"][data-page="hub"] header,
html[data-theme^="kinetic"][data-page="profile"] .hero,
html[data-theme^="kinetic"][data-page="login"] .card,
html[data-theme^="kinetic"][data-page="profile"] .panel,
html[data-theme^="kinetic"][data-page="hub"] .game-card {
  box-shadow: var(--theme-shadow);
}

html[data-theme^="kinetic"][data-page="hub"] .card-sudoku {
  --card-glow: rgba(0,129,145,0.10);
}

html[data-theme^="kinetic"][data-page="hub"] .card-wordy {
  --card-glow: rgba(192,0,77,0.10);
}

html[data-theme^="kinetic"][data-page="hub"] .card-cribbage {
  --card-glow: rgba(98,54,255,0.10);
}

html[data-theme^="kinetic"][data-page="hub"] .card-sudoku .card-label {
  color: var(--theme-secondary);
}

html[data-theme^="kinetic"][data-page="hub"] .card-wordy .card-label {
  color: var(--theme-tertiary);
}

html[data-theme^="kinetic"][data-page="hub"] .card-cribbage .card-label {
  color: var(--theme-primary);
}

html[data-theme^="kinetic"][data-page="hub"] .card-poker {
  --card-glow: rgba(192,0,77,0.13);
}

html[data-theme^="kinetic"][data-page="hub"] .card-poker .card-label {
  color: var(--theme-tertiary);
}

html[data-theme^="kinetic"][data-page="hub"] .card-kingscrib {
  --card-glow: rgba(0,129,145,0.12);
}

html[data-theme^="kinetic"][data-page="hub"] .card-kingscrib .card-label {
  color: var(--theme-secondary);
}

html[data-theme^="kinetic"][data-page="hub"] .card-scrabble {
  --card-glow: rgba(98,54,255,0.10);
}

html[data-theme^="kinetic"][data-page="hub"] .card-scrabble .card-label {
  color: var(--theme-primary);
}

html[data-theme^="kinetic"][data-page="hub"] .toolbar-btn.active,
html[data-theme^="kinetic"][data-page="profile"] .toolbar-btn.active,
html[data-theme^="kinetic"][data-page="profile"] .save-btn,
html[data-theme^="kinetic"][data-page="login"] .signin-btn,
html[data-theme^="kinetic"][data-page="hub"] .game-card:hover .card-arrow,
html[data-theme^="kinetic"][data-page="profile"] .user-name span,
html[data-theme^="kinetic"][data-page="hub"] .user-name span,
html[data-theme^="kinetic"][data-page="login"] h1 em,
html[data-theme^="kinetic"][data-page="hub"] h1 em,
html[data-theme^="kinetic"][data-page="profile"] h1 em {
  color: var(--theme-secondary);
}

html[data-theme="kinetic-light"][data-page="login"] .signin-btn,
html[data-theme="kinetic-light"][data-page="profile"] .save-btn {
  color: #ffffff;
}

html[data-theme="kinetic-dark"][data-page="login"] .signin-btn,
html[data-theme="kinetic-dark"][data-page="profile"] .save-btn {
  color: #16052a;
}

html[data-theme^="kinetic"][data-page="sudoku"] {
  --bg: var(--theme-bg);
  --surf: var(--theme-surface);
  --surf2: var(--theme-surface-2);
  --bdr: var(--theme-border);
  --bdr2: var(--theme-border-strong);
  --gold: var(--theme-primary);
  --gold-lo: var(--theme-primary-soft);
  --gold-md: rgba(98,54,255,0.18);
  --text: var(--theme-text);
  --dim: var(--theme-dim);
  --given: var(--theme-text);
  --err: var(--theme-error);
  --err-bg: rgba(186,26,26,0.12);
  --rel: rgba(98,54,255,0.06);
  --same: rgba(98,54,255,0.12);
  --sel: rgba(98,54,255,0.20);
  --green: var(--theme-secondary);
  --green-lo: var(--theme-secondary-soft);
  --blue: var(--theme-secondary);
  --blue-lo: var(--theme-secondary-soft);
  --blue-md: rgba(0,129,145,0.28);
}

html[data-theme="kinetic-dark"][data-page="sudoku"] {
  --gold-md: rgba(182,160,255,0.24);
  --rel: rgba(182,160,255,0.08);
  --same: rgba(182,160,255,0.10);
  --sel: rgba(182,160,255,0.18);
  --err-bg: rgba(255,110,132,0.16);
  --blue-md: rgba(0,227,253,0.25);
}

html[data-theme^="kinetic"][data-page="sudoku"] body {
  font-family: 'Manrope', sans-serif;
}

html[data-theme^="kinetic"][data-page="sudoku"] .title,
html[data-theme^="kinetic"][data-page="sudoku"] .card-title,
html[data-theme^="kinetic"][data-page="sudoku"] .pause-veil-label,
html[data-theme^="kinetic"][data-page="sudoku"] .cell,
html[data-theme^="kinetic"][data-page="sudoku"] .num-btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

html[data-theme^="kinetic"][data-page="sudoku"] .grid-wrap,
html[data-theme^="kinetic"][data-page="sudoku"] .ctrl-btn,
html[data-theme^="kinetic"][data-page="sudoku"] .num-btn,
html[data-theme^="kinetic"][data-page="sudoku"] .card {
  box-shadow: var(--theme-shadow);
}

html[data-theme^="kinetic"][data-page="cribbage"] {
  --felt: #2b1345;
  --felt-light: #32194e;
  --felt-dark: #16052a;
  --gold: var(--theme-primary);
  --gold-light: var(--theme-secondary);
  --cream: var(--theme-text);
  --card-bg: var(--theme-surface);
  --red: var(--theme-tertiary);
  --black: #12071f;
  --muted: rgba(185,162,208,0.72);
  --border: var(--theme-primary-line);
  --shadow: var(--theme-shadow);
}

html[data-theme="kinetic-dark"][data-page="cribbage"] {
  --card-bg: #f8f3ff;
  --black: #1d1a22;
}

html[data-theme="kinetic-light"][data-page="cribbage"] {
  --felt: #f4f0f8;
  --felt-light: #ffffff;
  --felt-dark: #e8ddff;
  --gold: var(--theme-primary);
  --gold-light: var(--theme-secondary);
  --cream: var(--theme-text);
  --card-bg: #ffffff;
  --red: var(--theme-tertiary);
  --black: #1d1a22;
  --muted: rgba(73,69,78,0.72);
  --border: rgba(98,54,255,0.18);
}

html[data-theme^="kinetic"][data-page="cribbage"] body {
  font-family: 'Manrope', sans-serif;
  background:
    radial-gradient(circle at top left, rgba(98,54,255,0.18), transparent 28%),
    radial-gradient(circle at bottom right, rgba(0,129,145,0.16), transparent 30%),
    var(--felt-dark);
}

html[data-theme^="kinetic"][data-page="cribbage"] .page-header h1,
html[data-theme^="kinetic"][data-page="cribbage"] .btn,
html[data-theme^="kinetic"][data-page="cribbage"] .score-num,
html[data-theme^="kinetic"][data-page="cribbage"] .slot-name,
html[data-theme^="kinetic"][data-page="cribbage"] .count-card {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

html[data-theme^="kinetic"][data-page="cribbage"] .card-panel,
html[data-theme^="kinetic"][data-page="cribbage"] .score-chip,
html[data-theme^="kinetic"][data-page="cribbage"] .events-log {
  box-shadow: var(--theme-shadow);
}

html[data-theme^="kinetic"][data-page="cribbage"] .card {
  border-color: #d9cfea;
}

html[data-theme^="kinetic"][data-page="cribbage"] .card.black .card-rank,
html[data-theme^="kinetic"][data-page="cribbage"] .card.black .card-rank-br,
html[data-theme^="kinetic"][data-page="cribbage"] .card.black .card-suit {
  text-shadow: 0 1px 0 rgba(255,255,255,0.32);
}

html[data-theme^="kinetic"][data-page="wordy"] {
  --bg: var(--theme-bg);
  --surface: var(--theme-surface);
  --border: var(--theme-border);
  --text: var(--theme-text);
  --text-dim: var(--theme-dim-2);
  --accent: var(--theme-primary);
  --accent-dim: var(--theme-primary-soft);
  --correct: var(--theme-secondary);
  --present: #8b5cf6;
  --absent: var(--theme-surface-2);
  --key-bg: var(--theme-surface-2);
  --font: 'Plus Jakarta Sans', 'Manrope', sans-serif;
}

html[data-theme="kinetic-dark"][data-page="wordy"] {
  --present: #ff6c95;
}

html[data-theme^="kinetic"][data-page="wordy"] body.spicy {
  --accent: var(--theme-tertiary);
  --accent-dim: var(--theme-tertiary-soft);
  --correct: #ff8fa9;
  --present: #ffb454;
  --absent: rgba(255,255,255,0.08);
  --key-bg: rgba(255,255,255,0.08);
}

html[data-theme^="kinetic"][data-page="wordy"] .tile,
html[data-theme^="kinetic"][data-page="wordy"] .key,
html[data-theme^="kinetic"][data-page="wordy"] .card,
html[data-theme^="kinetic"][data-page="wordy"] .btn {
  box-shadow: var(--theme-shadow);
}

html[data-theme^="kinetic"][data-page="wordy"] header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(16px);
}

html[data-theme="kinetic-dark"][data-page="wordy"] header {
  background: rgba(22,5,42,0.68);
}

html[data-theme^="kinetic"][data-page="poker"] {
  --bg: var(--theme-bg);
  --surf: var(--theme-surface);
  --surf2: var(--theme-surface-2);
  --bdr: var(--theme-border);
  --bdr2: var(--theme-border-strong);
  --gold: var(--theme-primary);
  --gold-lo: var(--theme-primary-soft);
  --text: var(--theme-text);
  --dim: var(--theme-dim-2);
  --ok: var(--theme-secondary);
  --err: var(--theme-error);
}

html[data-theme^="kinetic"][data-page="poker"] body {
  font-family: 'Manrope', sans-serif;
}

html[data-theme^="kinetic"][data-page="poker"] .head h1,
html[data-theme^="kinetic"][data-page="poker"] .table-title,
html[data-theme^="kinetic"][data-page="poker"] .btn {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

html[data-theme^="kinetic"][data-page="poker"] .app,
html[data-theme^="kinetic"][data-page="poker"] .card,
html[data-theme^="kinetic"][data-page="poker"] .table,
html[data-theme^="kinetic"][data-page="poker"] .player,
html[data-theme^="kinetic"][data-page="poker"] .log {
  box-shadow: var(--theme-shadow);
}

html[data-theme="kinetic-dark"][data-page="poker"] .c {
  background: #f8f3ff;
  color: #1d1a22;
}

html[data-theme^="kinetic"][data-page="kingscribbage"] {
  --bg: var(--theme-bg);
  --panel: var(--theme-surface);
  --panel-2: var(--theme-surface-2);
  --line: var(--theme-border);
  --line-strong: var(--theme-border-strong);
  --text: var(--theme-text);
  --muted: var(--theme-dim);
  --accent: var(--theme-primary);
  --accent-2: var(--theme-secondary);
  --good: var(--theme-ok);
  --bad: var(--theme-error);
}

html[data-theme^="kinetic"][data-page="scrabble"] {
  --bg: var(--theme-bg);
  --panel: var(--theme-surface);
  --panel-2: var(--theme-surface-2);
  --line: var(--theme-border);
  --line-strong: var(--theme-border-strong);
  --text: var(--theme-text);
  --muted: var(--theme-dim);
  --accent: var(--theme-primary);
  --accent-2: var(--theme-secondary);
  --good: var(--theme-ok);
  --bad: var(--theme-error);
}