/* Shared look for every bondia.sh site, in the style of shadcn/ui (zinc, Geist, 1px borders).
   Loaded after each site's own style.css, so it re-skins the shared components in one place.
   Dark is the default; [data-theme='light'] is the light variant. */

:root,
:root[data-theme='dark'] {
  --background: #09090b;
  --foreground: #fafafa;
  --card-bg: #0c0c0f;
  --muted-bg: #18181b;
  --muted-fg: #a1a1aa;
  --subtle-fg: #d4d4d8;
  --border-c: #27272a;
  --ring: #52525b;
  --primary-bg: #fafafa;
  --primary-fg: #18181b;
  --danger: #ef4444;
  --success: #22c55e;

  /* the sites' own tokens, pointed at the palette above */
  --paper: var(--background);
  --paper-2: var(--muted-bg);
  --card: var(--card-bg);
  --surface: var(--background);
  --ink: var(--foreground);
  --ink-2: var(--subtle-fg);
  --muted: var(--muted-fg);
  --on-bright: #09090b;
  --bar: var(--background);
  --dot: transparent;
  --border: var(--border-c);
  --border-strong: #3f3f46;
  --line: 1px solid var(--border-c);
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.6);
  --r: 12px;
  --accent: var(--danger);
  --blue: #3b82f6;
  --green: var(--success);
  --yellow: #eab308;
  --lime: #a3e635;
  --pink: #ec4899;
  --gold: #eab308;
  --silver: #a1a1aa;
  --bronze: #c2703d;
  --tint-blue: var(--muted-bg);
  --tint-red: rgba(239, 68, 68, 0.12);
  --tint-win: rgba(34, 197, 94, 0.12);
  --tint-me: var(--muted-bg);
  --tint-gold: var(--muted-bg);
  --a0: #dc2626;
  --a1: #2563eb;
  --a2: #d97706;
  --a3: #16a34a;
  --display: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  color-scheme: dark;
}

:root[data-theme='light'] {
  --background: #ffffff;
  --foreground: #09090b;
  --card-bg: #ffffff;
  --muted-bg: #f4f4f5;
  --muted-fg: #71717a;
  --subtle-fg: #3f3f46;
  --border-c: #e4e4e7;
  --ring: #a1a1aa;
  --primary-bg: #18181b;
  --primary-fg: #fafafa;
  --danger: #dc2626;
  --success: #16a34a;
  --border-strong: #d4d4d8;
  --shadow-lg: 0 16px 40px -12px rgba(0, 0, 0, 0.18);
  color-scheme: light;
}

/* ---------- base ---------- */
body {
  background: var(--background);
  background-image: none;
  color: var(--foreground);
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: -0.005em;
}
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; }
h2 { font-size: 1.05rem; }
.muted { color: var(--muted-fg); }
.eyebrow { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.04em; color: var(--muted-fg); }
::selection { background: color-mix(in srgb, var(--foreground) 20%, transparent); }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }

/* ---------- card ---------- */
.card {
  background: var(--card-bg);
  border: 1px solid var(--border-c);
  border-radius: 12px;
  box-shadow: none;
}

/* ---------- buttons (default = outline) ---------- */
.btn {
  height: 38px; padding: 0 16px; gap: 8px;
  border: 1px solid var(--border-c); border-radius: 8px;
  background: transparent; color: var(--foreground);
  font-weight: 500; font-size: 0.875rem; letter-spacing: 0;
  box-shadow: none; transition: background 0.15s, opacity 0.15s, border-color 0.15s;
}
.btn:hover:not(:disabled) { background: var(--muted-bg); filter: none; }
.btn:active:not(:disabled) { filter: none; opacity: 0.85; }
.btn:disabled { opacity: 0.5; }
.btn.primary { background: var(--primary-bg); color: var(--primary-fg); border-color: transparent; }
.btn.primary:hover:not(:disabled) { background: var(--primary-bg); opacity: 0.9; }
.btn.blue { background: var(--muted-bg); color: var(--foreground); border-color: transparent; }
.btn.blue:hover:not(:disabled) { background: color-mix(in srgb, var(--foreground) 12%, var(--muted-bg)); }
.btn.danger { background: transparent; color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, var(--border-c)); }
.btn.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 10%, transparent); }
.btn.ghost { background: transparent; border-color: transparent; border-style: solid; }
.btn.ghost:hover:not(:disabled) { background: var(--muted-bg); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 0.8125rem; border-radius: 7px; }
.btn.xs { height: 28px; padding: 0 10px; font-size: 0.75rem; border-radius: 6px; box-shadow: none; }
.btn.huge { height: 44px; padding: 0 22px; font-size: 0.95rem; border-radius: 10px; box-shadow: none; }
.btn .i { width: 16px; height: 16px; }
.icon-btn { width: 34px; height: 34px; border-radius: 8px; color: var(--muted-fg); }
.icon-btn:hover { background: var(--muted-bg); color: var(--foreground); }
.icon-btn .i { width: 17px; height: 17px; }
.xbtn { color: var(--muted-fg); }
.xbtn .i { width: 15px; height: 15px; }

/* ---------- inputs ---------- */
.field { gap: 8px; }
.field > span, .setting-label {
  font-size: 0.8125rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--foreground);
}
.setting-label em { color: var(--muted-fg); font-weight: 400; }
.field input, .picker input, select.input, textarea.input, input.input {
  height: 40px; padding: 0 12px; border: 1px solid var(--border-c); border-radius: 8px;
  background: transparent; color: var(--foreground); font: 400 0.95rem var(--display); box-shadow: none;
}
textarea.input { height: auto; min-height: 180px; padding: 10px 12px; font-family: var(--mono); font-size: 0.82rem; }
.field input:focus, .picker input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ring) 35%, transparent); }
.field input::placeholder, textarea.input::placeholder { color: color-mix(in srgb, var(--muted-fg) 70%, transparent); }
.code-input { font-family: var(--mono) !important; font-weight: 500 !important; letter-spacing: 0.35em; font-size: 1.15rem !important; }

/* ---------- tabs (segmented controls) ---------- */
.seg { background: var(--muted-bg); border: none; border-radius: 9px; padding: 3px; gap: 2px; overflow: visible; }
.seg button {
  border: none; border-left: none; border-radius: 6px; padding: 6px 10px; font-size: 0.8125rem; font-weight: 500;
  color: var(--muted-fg); background: transparent;
}
.seg button:hover { background: transparent; color: var(--foreground); }
.seg button.on { background: var(--background); color: var(--foreground); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
:root[data-theme='light'] .seg button.on { box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }

/* ---------- switches ---------- */
.toggle { border: 1px solid var(--border-c); background: transparent; border-radius: 8px; padding: 6px 12px 6px 8px; font-weight: 500; font-size: 0.8125rem; gap: 10px; }
.toggle .knob { width: 34px; height: 20px; border: none; background: var(--muted-bg); border-radius: 999px; }
:root[data-theme='light'] .toggle .knob { background: #e4e4e7; }
.toggle .knob::after { top: 2px; left: 2px; width: 16px; height: 16px; background: var(--background); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); }
.toggle.on .knob { background: var(--primary-bg); }
.toggle.on .knob::after { transform: translateX(14px); }

/* ---------- badges ---------- */
.tag, .pill, .code-chip, .slot-label, .count, .q-count, .round-pill {
  border: 1px solid var(--border-c); background: transparent; color: var(--foreground); border-radius: 6px;
  font-weight: 500; font-size: 0.75rem; box-shadow: none;
}
.count, .q-count { background: var(--muted-bg); border-color: transparent; }
.code-chip { font-family: var(--mono); letter-spacing: 0.12em; padding: 3px 9px; }
.code-chip small { font-family: var(--display); letter-spacing: 0; color: var(--muted-fg); }
.pill.easy, .pill.medium, .pill.hard { background: transparent; color: var(--foreground); }
.pill.x2 { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); border-color: transparent; }
.slot-label.target { background: var(--primary-bg); color: var(--primary-fg); border-color: transparent; }
.lvl-tag { background: transparent !important; color: var(--foreground) !important; border: 1px solid var(--border-c) !important; border-radius: 6px !important; }
.plan-chip { background: var(--muted-bg) !important; color: var(--foreground) !important; border: 1px solid var(--border-c) !important; box-shadow: none !important; }
.plan-chip.next { outline: 2px solid var(--ring); }

/* ---------- avatars ---------- */
.av { border: none; }
.avatar-btn { background: var(--muted-bg); border: 1px solid var(--border-c); box-shadow: none; }
.avatar-btn:hover { transform: none; }
.av-opt { background: transparent; border: 1px solid transparent; border-radius: 8px; }
.av-opt:hover { background: var(--muted-bg); border-color: transparent; transform: none; }
.av-opt.on { background: var(--muted-bg); border-color: var(--ring); box-shadow: none; transform: none; }
.av-edit i { background: var(--primary-bg); color: var(--primary-fg); border-color: var(--background); }

/* ---------- home screens ---------- */
.home-inner { max-width: 760px; padding-top: 72px; gap: 20px; }
.hero { gap: 10px; }
.logo { gap: 14px; transform: none; }
.logo-w, .logo-q, .logo-g, .logo-tile, .logo-mark {
  font-size: 1.7rem !important; width: 48px !important; height: 48px !important; border-radius: 12px !important;
  background: var(--muted-bg) !important; color: var(--foreground) !important; border: 1px solid var(--border-c) !important;
  box-shadow: none !important; padding: 0 !important; display: grid; place-items: center; font-family: var(--mono);
}
.logo-g > span, .logo-tile > span { width: 26px !important; height: 26px !important; }
.logo-text { font-size: 1.9rem; font-weight: 600; letter-spacing: -0.03em; text-transform: none; line-height: 1.1; }
.logo-text br { display: none; }
.logo-text small { display: inline; font-size: 1em; color: var(--muted-fg); font-weight: 500; margin-right: 0.25em; }
.tagline { font-size: 0.95rem; color: var(--muted-fg); max-width: 440px; }
.tagline em { background: none; color: var(--foreground); padding: 0; }
.host-card { background: var(--card-bg); }
.how { display: none; }
.hub-link { background: transparent; border: 1px solid var(--border-c); box-shadow: none; font-weight: 500; font-size: 0.8125rem; color: var(--muted-fg); }
.hub-link:hover { color: var(--foreground); background: var(--muted-bg); }
.site-foot a, .site-foot button { text-decoration: none; }
.site-foot a:hover, .site-foot button:hover { text-decoration: underline; }

/* ---------- game bar + lobby ---------- */
.gamebar { background: color-mix(in srgb, var(--background) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border-c); }
.mini-logo { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; }
.mini-logo span, .mini-logo #mini-icon { background: var(--muted-bg) !important; color: var(--foreground) !important; border: 1px solid var(--border-c) !important; border-radius: 7px !important; }
.mini-logo em { color: var(--muted-fg); }
.conn.ok { background: var(--success); border: none; }
.conn.bad { background: var(--danger); border: none; }
.code-card { background: var(--card-bg) !important; color: var(--foreground) !important; border-top: 1px solid var(--border-c) !important; }
.big-code span { background: var(--muted-bg) !important; border: 1px solid var(--border-c); box-shadow: none; border-radius: 8px; font-family: var(--mono); font-weight: 500; color: var(--foreground); }
.player.is-me { background: var(--muted-bg); }
.player.ghost .av { border: 1px dashed var(--border-c); }
.host-mark { color: var(--yellow); }
.rules { background: var(--muted-bg); font-weight: 400; color: var(--subtle-fg); }
.spinner-globe .i { color: var(--muted-fg); }
.team-box { background: var(--card-bg); border: 1px solid var(--border-c); border-left: 3px solid var(--tc); }
.team-member { background: var(--muted-bg); }
.page-card { background: var(--card-bg); border: 1px solid var(--border-c); }
.swap { background: var(--background); border: 1px solid var(--border-c); box-shadow: none; color: var(--foreground); }
.waiting h2 { font-size: 1.25rem; }

/* ---------- play ---------- */
.q-card, .prompt { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: none; border-radius: 14px; }
.ans { border: none; box-shadow: none; border-radius: 12px; font-weight: 600; }
.ans:hover:not(:disabled) { transform: none; box-shadow: none; filter: brightness(1.08); }
.ans:active:not(:disabled) { transform: scale(0.99); box-shadow: none; }
.ans.picked { outline: 2px solid var(--foreground); outline-offset: 2px; }
.answers.revealed .ans.correct::after { border: 2px solid var(--background); }
.timer-bar { border: none; background: var(--muted-bg); height: 6px; }
.timer-bar span { background: var(--foreground); }
.timer-bar span.low { background: var(--danger); }
.timer-num { font-weight: 500; }
.verdict { border: 1px solid transparent; box-shadow: none; font-weight: 600; font-size: 1.05rem; border-radius: 12px; }
.verdict.good { background: color-mix(in srgb, var(--success) 12%, transparent); color: var(--success); border-color: color-mix(in srgb, var(--success) 30%, transparent); }
.verdict.bad { background: color-mix(in srgb, var(--danger) 12%, transparent); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.verdict.meh { background: var(--muted-bg); color: var(--foreground); }
.verdict .gain { background: transparent; border: 1px solid currentColor; }
.mb-row { background: var(--card-bg); border: 1px solid var(--border-c); border-left: 3px solid var(--c); }
.mb-row.is-me { background: var(--muted-bg); }
.host-bar { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: none; }
.vcard, .stmt, .tile, .numpick { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: none; }
.vcard:hover:not(:disabled), .stmt:hover:not(:disabled), .tile:hover:not(:disabled) { border-color: var(--ring); transform: none; }
.vcard.picked, .stmt.picked, .tile.picked { outline: 2px solid var(--foreground); }
.numpick .step { background: transparent; border: 1px solid var(--border-c); }
.numpick input[type=range] { accent-color: var(--foreground); }
.stmt .num { background: var(--muted-bg); }
.timeline-strip { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: none; }
.outline-svg path { fill: var(--foreground); fill-opacity: 0.08; stroke: var(--foreground); }
.world-svg path.hit { fill: var(--foreground); }

/* ---------- results ---------- */
.podium { border-bottom: 1px solid var(--border-c); }
.pod-av { border: none; box-shadow: none; }
.pod-block { border: 1px solid var(--border-c); border-bottom: none; box-shadow: none; background: var(--muted-bg) !important; color: var(--foreground) !important; }
.p1 .pod-block { background: color-mix(in srgb, var(--foreground) 14%, var(--muted-bg)) !important; }
.pod-block span { font-weight: 500; }
.crown .i { color: var(--yellow); }
.award { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: none; }
.award-icon { background: var(--muted-bg) !important; border: none; color: var(--foreground) !important; }
.final-table th { border-bottom: 1px solid var(--border-c); font-weight: 500; letter-spacing: 0.02em; text-transform: none; font-size: 0.75rem; color: var(--muted-fg); }
.final-table td { border-bottom: 1px solid var(--border-c); }
.final-table tr:first-child td { background: transparent; }
.res-actions.sticky { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: var(--shadow-lg); }
.rank-row { border-bottom: 1px solid var(--border-c); }
.rank-row.head { border-bottom: 1px solid var(--border-c); }
.stand-bar { background: var(--muted-bg); }
.pts, .bonus { background: var(--muted-bg); border: 1px solid var(--border-c); color: var(--foreground); }
.chip { border: 1px solid var(--border-c); background: transparent; color: var(--foreground); }
.chip.start { background: var(--muted-bg); color: var(--foreground); }
.chip.goal { background: var(--primary-bg); color: var(--primary-fg); }

/* ---------- overlays ---------- */
.reactions { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: var(--shadow-lg); }
.reactions button:hover { background: var(--muted-bg); transform: scale(1.12); }
.toast { background: var(--card-bg); color: var(--foreground); border: 1px solid var(--border-c); box-shadow: var(--shadow-lg); font-weight: 500; font-size: 0.875rem; }
.toast.finish { border-color: color-mix(in srgb, var(--success) 45%, var(--border-c)); }
.toast.bad, .toast.giveup { border-color: color-mix(in srgb, var(--danger) 45%, var(--border-c)); color: var(--foreground); }
.toast.join { border-color: var(--border-c); }
.picker { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: var(--shadow-lg); border-radius: 14px; }
.picker::backdrop { background: rgba(0, 0, 0, 0.6); }
.pick-row:hover { background: var(--muted-bg); border-color: transparent; }
.countdown { background: rgba(9, 9, 11, 0.92); }
.cd-page { border: 1px solid var(--border-c); }
.floater small { border: none; }

/* ---------- WikiRace race screen ---------- */
.race-top { background: var(--background); color: var(--foreground); border-bottom: 1px solid var(--border-c); }
.race-top .btn { color: var(--foreground); box-shadow: none; border-color: var(--border-c); }
.race-top .btn.ghost { color: var(--foreground); border-color: transparent; }
.goal-chip { background: var(--muted-bg); color: var(--foreground); border: 1px solid var(--border-c); }
.stat-box { background: var(--muted-bg); }
.board { background: var(--background); }
.brow { background: var(--card-bg); border: 1px solid var(--border-c); border-left: 3px solid var(--c); }
.brow.is-me { box-shadow: none; background: var(--muted-bg); }
.race-banner { background: var(--muted-bg); color: var(--foreground); border-bottom: 1px solid var(--border-c); animation: none; }
:root[data-theme='dark'] .article-wrap, :root:not([data-theme='light']) .article-wrap { border-right-color: var(--border-c); }

/* Elements the sites colour with bright fills: keep them readable on the zinc palette. */
.slot-label { background: var(--card-bg) !important; color: var(--foreground) !important; }
.slot-label.target { background: var(--primary-bg) !important; color: var(--primary-fg) !important; }
.my-line b { background: var(--muted-bg); color: var(--foreground); }

/* Sketch It's own accent tokens, folded into the zinc palette. */
:root, :root[data-theme='dark'], :root[data-theme='light'] {
  --brand: var(--foreground);
  --tint-brand: var(--muted-bg);
  --tint-good: color-mix(in srgb, var(--success) 12%, transparent);
  --tint-close: color-mix(in srgb, var(--yellow) 14%, transparent);
}
.theme-opt { background: var(--card-bg); border: 1px solid var(--border-c); box-shadow: none; }
.theme-opt.on { border-color: var(--ring); background: var(--muted-bg); box-shadow: none; }
html .theme-opt.on .theme-ic { background: var(--primary-bg); color: var(--primary-fg) !important; }
.theme-ic { background: var(--muted-bg); color: var(--subtle-fg); }