/* Signed-in club pages: light club identity (matches the public site) and the sidebar app shell.
   Loaded after app.css, refinement.css and board.css so it overrides the old dark surfaces. */

body:not(.public-page) {
  color-scheme: light;
  --bg: #f7f6f0;
  --bg-soft: #efeee6;
  --panel: #fffef9;
  --panel-2: #f3f2ea;
  --panel-3: #e8eadf;
  --ink: #1f3a2f;
  --ink-soft: #3d5046;
  --muted: #5f6d61;
  --subtle: #6d7a6e;
  --accent: #245740;
  --accent-light: #2f6e51;
  --accent-ink: #fffef6;
  --accent-glow: rgba(36, 87, 64, 0.14);
  --line: #e2e4d8;
  --line-strong: #c3ccbd;
  --line-focus: #245740;
  --glass: #f7f6f0;
  --glass-card: #fffef9;
  --gold: #9a6614;
  --gold-glow: rgba(154, 102, 20, 0.16);
  --good: #24683f;
  --good-glow: rgba(36, 104, 63, 0.16);
  --bad: #a43030;
  --bad-glow: rgba(164, 48, 48, 0.14);
  --shadow-sm: 0 1px 2px rgba(35, 59, 40, 0.06);
  --shadow: 0 1px 3px rgba(35, 59, 40, 0.06), 0 6px 18px rgba(35, 59, 40, 0.05);
  --shadow-lg: 0 18px 48px rgba(35, 59, 40, 0.1);
  --sidebar: #173f32;
  --sidebar-ink: #eef1dd;
  --sidebar-muted: #a9bfa9;
  background: var(--bg);
  color: var(--ink);
}
html:has(body:not(.public-page)) { color-scheme: light; }

/* ── Shared components, light versions ─────────────────────────────── */
body:not(.public-page) a:hover,
body:not(.public-page) .btn:hover,
body:not(.public-page) .tab.is-active,
body:not(.public-page) .crumbs .crumb:hover,
body:not(.public-page) .crumbs .crumb.here,
body:not(.public-page) .moves .mv-ply:hover { color: var(--ink); }
body:not(.public-page) .card,
body:not(.public-page) .card-glass { background: var(--panel); border-color: var(--line); box-shadow: var(--shadow); backdrop-filter: none; -webkit-backdrop-filter: none; }
body:not(.public-page) .card:hover { border-color: var(--line); }
body:not(.public-page) .card.highlight { border-color: var(--line-strong); box-shadow: var(--shadow); }
body:not(.public-page) .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
body:not(.public-page) .btn.primary:hover { background: var(--accent-light); border-color: var(--accent-light); color: var(--accent-ink); filter: none; }
body:not(.public-page) .btn.ghost { background: var(--panel); border-color: var(--line-strong); color: var(--ink); }
body:not(.public-page) .btn.ghost:hover { background: var(--panel-2); }
body:not(.public-page) .btn.gold { background: #e8c889; border-color: #d9b36a; color: #3c2a06; }
body:not(.public-page) .btn.danger { background: #fbeeee; border-color: #e7c1c1; color: var(--bad); }
body:not(.public-page) .btn.danger:hover { background: #f6dede; color: var(--bad); }
body:not(.public-page) .tag { background: var(--panel-2); border-color: var(--line); color: var(--muted); }
body:not(.public-page) .tag.good { background: #e8f2e9; border-color: #c7dfcb; color: var(--good); }
body:not(.public-page) .tag.warn { background: #f8efdc; border-color: #ead5aa; color: var(--gold); }
body:not(.public-page) .tag.bad { background: #fbeeee; border-color: #edcccc; color: var(--bad); }
body:not(.public-page) .tag.accent { background: #e7efe8; border-color: #cadbcd; color: var(--accent); }
body:not(.public-page) .notice.err { background: #fbeeee; border-color: #edcccc; color: var(--bad); }
body:not(.public-page) .notice.ok { background: #e8f2e9; border-color: #c7dfcb; color: var(--good); }
body:not(.public-page) .rank { background: #173f32; color: #eef1dd; box-shadow: none; }
body:not(.public-page) .xp-bar { background: var(--panel-3); border-color: transparent; }
body:not(.public-page) .xp-fill { background: linear-gradient(90deg, #3f7a58, #6e9272); box-shadow: none; }
body:not(.public-page) .badge.earned { border-color: #ead5aa; background: #fbf5e7; box-shadow: none; }
body:not(.public-page) .badge.earned .badge-prog { color: var(--gold); }
body:not(.public-page) .badge.locked { opacity: 0.55; }
body:not(.public-page) .lead-rank { background: var(--panel-3); color: var(--muted); border: 1px solid transparent; }
body:not(.public-page) .lead-rank.top-1 { background: #f8efdc; color: var(--gold); border-color: #ead5aa; }
body:not(.public-page) .lead-rank.top-2 { background: #eef0ec; color: #55625a; border-color: #d6dbd4; }
body:not(.public-page) .lead-rank.top-3 { background: #f6e9df; color: #8a4f22; border-color: #e5cdb9; }
body:not(.public-page) .lead-top { border-color: var(--line-strong) !important; background: #f1f5ef !important; }
body:not(.public-page) .elo-big { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; }
body:not(.public-page) .elo-pill { font-family: var(--font); background: var(--panel-2); border-color: var(--line); color: var(--ink); }
body:not(.public-page) .elo-delta.up { color: var(--good); }
body:not(.public-page) .elo-delta.down { color: var(--bad); }
body:not(.public-page) .tab-count,
body:not(.public-page) .cal-pill,
body:not(.public-page) .cal-pill.going { color: var(--accent-ink); }
body:not(.public-page) .cal-pill.maybe { color: var(--ink); }
body:not(.public-page) .cal-day { background: var(--panel); }
body:not(.public-page) .cal-day.today { background: #eef4ee; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
body:not(.public-page) .cal-day.today .cal-daynum { color: var(--accent); }
body:not(.public-page) .btn:not(.primary):not(.ghost):not(.danger):not(.gold):not(.cream) { background: var(--panel); border-color: var(--line-strong); color: var(--ink); }
body:not(.public-page) [data-prev],
body:not(.public-page) [data-next] { min-width: 40px; font-size: 20px; line-height: 1; }
body:not(.public-page) .solve-card .sc-moves { color: var(--accent); }
body:not(.public-page) .bm-row.win { color: var(--ink); background: #e8f2e9; }
body:not(.public-page) .champion,
body:not(.public-page) .reward { background: #fbf5e7; border-color: #ead5aa; }
body:not(.public-page) .reward-xp { color: var(--gold); }
body:not(.public-page) .my-match { background: #eef4ee; border-color: #cadbcd; }
body:not(.public-page) .announce { background: #173f32; color: #eef1dd; }
body:not(.public-page) .stepper-step.is-active { color: var(--ink); background: #e7efe8; }
body:not(.public-page) .stepper-step.is-active .stepper-num { color: var(--accent-ink); }
body:not(.public-page) .stepper-step.is-done { color: var(--good); border-color: #c7dfcb; }
body:not(.public-page) .stepper-step.is-done .stepper-num { color: var(--accent-ink); }
body:not(.public-page) .list li { background: var(--panel); border-color: var(--line); }
body:not(.public-page) input,
body:not(.public-page) select,
body:not(.public-page) textarea { background: var(--panel); color: var(--ink); border-color: var(--line-strong); }

/* ── Board: same cream/green as the homepage ───────────────────────── */
body:not(.public-page) .board-wrap { background: var(--panel); }
/* Size pieces from the board (cqi), not the window (vw), and keep all 64 squares equal. */
body:not(.public-page) .board {
  container-type: inline-size;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  grid-template-rows: repeat(8, minmax(0, 1fr));
}
body:not(.public-page) .sq { min-width: 0; min-height: 0; overflow: hidden; }
body:not(.public-page) .sq .piece { font-size: 10cqi; }
body:not(.public-page) .sq .coord { font-size: clamp(8px, 1.6cqi, 11px); }
body:not(.public-page) .sq.occupied .dot { border-width: clamp(2px, 0.6cqi, 4px); }
/* Game screen: one column until there is room beside the sidebar; never taller than the window. */
body:not(.public-page) .game .board-wrap > * { max-width: max(280px, calc(100dvh - 300px)); margin-inline: auto; }
body.has-shell .game { grid-template-columns: minmax(0, 1fr) 320px; }
@media (max-width: 1180px) {
  body.has-shell .game { grid-template-columns: minmax(0, 1fr); }
}
body:not(.public-page) .board { border: 4px solid #b6c8a0; box-shadow: 0 3px 15px rgba(6, 25, 15, 0.12); }
body:not(.public-page) .sq.light,
body:not(.public-page) .mini-board .ms.light { background: #e6e9c9; }
body:not(.public-page) .sq.dark,
body:not(.public-page) .mini-board .ms.dark { background: #7c9d7f; }
body:not(.public-page) .sq .piece.w,
body:not(.public-page) .mini-board .mp.w,
body:not(.public-page) .pal.w { color: #fffcf0; filter: none; text-shadow: 0 1px 0 #193d31, 1px 0 0 #193d31, -1px 0 0 #193d31, 0 -1px 0 #193d31, 0 3px 4px rgba(25, 61, 49, 0.35); }
body:not(.public-page) .sq .piece.b,
body:not(.public-page) .mini-board .mp.b,
body:not(.public-page) .pal.b { color: #16302a; filter: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35), 0 3px 4px rgba(25, 61, 49, 0.25); }
body:not(.public-page) .sq.last { box-shadow: inset 0 0 0 1000px rgba(236, 205, 92, 0.42); }
body:not(.public-page) .sq.sel { box-shadow: inset 0 0 0 3px #245740; background-color: rgba(236, 205, 92, 0.55) !important; }
body:not(.public-page) .sq.check { box-shadow: inset 0 0 0 1000px rgba(196, 64, 64, 0.5); }
body:not(.public-page) .sq.light .dot,
body:not(.public-page) .sq.dark .dot { background: rgba(23, 63, 50, 0.28); }
body:not(.public-page) .sq.light.occupied .dot,
body:not(.public-page) .sq.dark.occupied .dot { background: transparent; border-color: rgba(23, 63, 50, 0.35); }
body:not(.public-page) .sq.light .coord { color: #6e8a70; }
body:not(.public-page) .sq.dark .coord { color: #eef0d6; }
body:not(.public-page) .pal.sel { background: #e7efe8; }
body:not(.public-page) .pcard.turn { background: #eef4ee; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
body:not(.public-page) .moves .mv-ply.now { background: var(--accent); color: var(--accent-ink); box-shadow: none; }
body:not(.public-page) .chat-msg.mine { background: #e7efe8; }
body:not(.public-page) .chat-msg.staff { background: #fbf5e7; }
body:not(.public-page) .chat-badge { color: #3c2a06; }
body:not(.public-page) .overlay { background: rgba(23, 63, 50, 0.55); }
body:not(.public-page) textarea.pgn-drop.drop-hover { background: #e7efe8; }

/* ── App shell: sidebar on desktop, bottom tab bar on phones ───────── */
body.has-shell { padding-left: 248px; }
body.has-shell > header[data-nav] {
  position: fixed;
  inset: 0 auto 0 0;
  width: 248px;
  min-height: 0;
  background: var(--sidebar);
  border: 0;
  box-shadow: none;
  backdrop-filter: none;
  z-index: 40;
}
.shell-inner { display: flex; flex-direction: column; height: 100%; padding: 22px 16px 16px; gap: 28px; }
.has-shell .brand { color: var(--sidebar-ink); padding: 0 6px; }
.has-shell .brand:hover { color: var(--sidebar-ink); text-decoration: none; }
.has-shell .brand-mark { background: var(--sidebar-ink); color: var(--sidebar); width: 40px; height: 40px; font-size: 32px; border-radius: 10px; }
.has-shell .brand-label strong { font-size: 16px; color: var(--sidebar-ink); }
.has-shell .brand-label small { color: var(--sidebar-muted); font-size: 8px; }
.shell-nav { display: flex; flex-direction: column; gap: 4px; }
.shell-link {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  color: var(--sidebar-muted);
  font-weight: 600;
  font-size: 15px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
body.has-shell .shell-link:hover { color: var(--sidebar-ink); background: rgba(238, 241, 221, 0.08); text-decoration: none; }
body.has-shell .shell-link.is-active { color: var(--sidebar); background: var(--sidebar-ink); }
.shell-icon { width: 20px; height: 20px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.shell-user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 10px;
  border-radius: 12px;
  background: rgba(238, 241, 221, 0.07);
}
.shell-avatar { width: 36px; height: 36px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: #e8c889; color: #3c2a06; font-weight: 800; }
.shell-who { display: grid; min-width: 0; line-height: 1.3; }
.shell-who strong { color: var(--sidebar-ink); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shell-who small { color: var(--sidebar-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.shell-logout {
  margin-left: auto;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--sidebar-muted);
  cursor: pointer;
}
.shell-logout:hover { color: var(--sidebar-ink); background: rgba(238, 241, 221, 0.1); }
.shell-logout:focus-visible,
.shell-link:focus-visible,
.has-shell .brand:focus-visible { outline: 2px solid #e8c889; outline-offset: 2px; }

body.has-shell .app-footer { margin-top: 24px; border-top: 1px solid var(--line); background: transparent; }

@media (max-width: 900px) {
  body.has-shell { padding-left: 0; padding-bottom: 76px; }
  body.has-shell > header[data-nav] { position: sticky; inset: 0 0 auto 0; width: auto; }
  .shell-inner { flex-direction: row; align-items: center; height: 64px; padding: 0 16px; gap: 12px; }
  .has-shell .brand-mark { width: 36px; height: 36px; font-size: 28px; }
  .has-shell .brand-label small { display: none; }
  .shell-user { margin: 0 0 0 auto; padding: 0; background: none; }
  .shell-who { display: none; }
  .shell-avatar { width: 32px; height: 32px; }
  .shell-nav {
    position: fixed;
    inset: auto 0 0 0;
    flex-direction: row;
    justify-content: space-around;
    gap: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--panel);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 18px rgba(35, 59, 40, 0.06);
  }
  .shell-link { flex: 1; flex-direction: column; gap: 3px; min-height: 52px; padding: 6px 4px; font-size: 11px; color: var(--muted); justify-content: center; text-align: center; }
  body.has-shell .shell-link:hover { color: var(--ink); background: transparent; }
  body.has-shell .shell-link.is-active { color: var(--accent); background: #e7efe8; }
  body.has-shell > main { padding-left: 16px; padding-right: 16px; }
}

/* ── Dashboard layout ──────────────────────────────────────────────── */
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.dash-head h1 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.03em; margin: 0 0 4px; }
.dash-head p { margin: 0; color: var(--muted); }
.next-step {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 28px 32px;
  border-radius: 16px;
  background: #173f32;
  color: #eef1dd;
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
}
.next-step::after { content: "♞"; position: absolute; right: 180px; bottom: -40px; font: 180px/1 Georgia, serif; color: rgba(238, 241, 221, 0.06); pointer-events: none; }
.next-step .eyebrow { color: #bccdab; margin: 0 0 8px; }
.next-step h2 { color: #fffef6; font-size: clamp(22px, 2.6vw, 28px); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 6px; }
.next-step p { color: #c9d6b9; margin: 0; max-width: 520px; }
.next-step .btn { flex-shrink: 0; position: relative; z-index: 1; }
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin-bottom: 20px; }
.stat { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); min-width: 0; }
.stat-label { font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat-note { font-size: 12px; color: var(--muted); margin-top: 2px; }
.stat .xp-bar { height: 8px; margin-top: 10px; }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-bottom: 20px; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.panel-head h2 { font-size: 19px; margin: 0; }
.panel-head a { font-size: 13px; font-weight: 600; color: var(--accent); }
.task-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
.task-item:first-child { border-top: 0; padding-top: 0; }
.task-glyph { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 10px; background: #e7efe8; color: var(--accent); font: 24px/1 Georgia, serif; }
.task-item.done .task-glyph { background: var(--panel-2); color: var(--muted); }
.task-body { flex: 1; min-width: 0; }
.task-body strong { display: block; font-size: 15px; }
.task-meta { font-size: 12px; color: var(--muted); }
.empty-note { padding: 22px; border-radius: 12px; background: var(--panel-2); color: var(--muted); font-size: 14px; text-align: center; }
.empty-note strong { display: block; color: var(--ink); font-size: 15px; margin-bottom: 4px; }
.group-item { padding: 16px 0; border-top: 1px solid var(--line); }
.group-item:first-child { border-top: 0; padding-top: 0; }
.group-info { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--panel-2); font-size: 13px; }
.group-info .label { display: block; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
body:not(.public-page) .badge-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
body:not(.public-page) .badge { padding: 14px 6px; border-radius: 12px; }
body:not(.public-page) .badge-icon { font-size: 26px; }

@media (max-width: 1100px) {
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .next-step { flex-direction: column; align-items: flex-start; padding: 22px; }
  .next-step .btn { width: 100%; justify-content: center; }
  .stat-row { gap: 10px; }
  .stat { padding: 14px; }
  .stat-value { font-size: 22px; }
}

/* ── Play page: player bars sit above and below the board ──────────── */
.board-wrap > .pcard { margin-block: 0 10px; box-shadow: none; }
.board-wrap > [data-pcard-bottom] { margin-block: 12px 0; }
.play-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.play-actions:empty { display: none; }
.play-actions .btn { flex: 1; justify-content: center; }
.lobby-mark { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 14px; background: #173f32; color: #eef1dd; font: 42px/1 Georgia, serif; }