html[data-theme-base="light"] {
  --bw-bg: #f4f6fa;
  --bw-bg-elevated: #ffffff;
  --bw-panel: #ffffff;
  --bw-panel-2: #e8eef5;
  --bw-border: #cfdae5;
  --bw-border-strong: #a1b3c5;
  --bw-text: #172d40;
  --bw-text-muted: #506579;
  --bw-orange: #ad4008;
  --bw-orange-2: #995000;
  --bw-green: #187638;
  --bw-cyan: #006b9b;
  --bw-danger: #b82438;
  --bw-accent: #006b9b;
  --bw-accent-2: #00577f;
  --bw-on-accent: #ffffff;
  --bw-shadow: 0 12px 32px #233d5214;
}
html[data-theme="custom"] { --bw-accent: var(--bw-custom-accent); --bw-accent-2: var(--bw-custom-accent); }
html[data-theme="custom"] body { --bw-accent: var(--bw-custom-accent); --bw-accent-2: var(--bw-custom-accent); }
html[data-theme="custom"][data-theme-base="dark"] { --bw-on-accent: #07131d; }
html[data-theme="custom"] .bw-top { --bw-accent: var(--bw-custom-accent); }
html[data-theme-base="light"] body { --bw-accent: #006b9b; --bw-accent-2: #00577f; --bw-on-accent: #fff; }
html[data-theme="custom"][data-theme-base="light"] body { --bw-accent: var(--bw-custom-accent); --bw-accent-2: var(--bw-custom-accent); }
html[data-theme-base="light"] .bw-top { background: var(--bw-bg-elevated); }
html[data-theme-base="light"] body.bw-game-page.bw-polished { --play-accent: var(--bw-accent); }
html[data-theme-base="light"] body.bw-game-page.bw-polished :is(.bw-game-stats :is(#stats,#remaining,#timer,#players,#wins,.counters), .bw-game-table #message, #roomInfo) { background: var(--bw-panel-2); color: var(--bw-text); border-color: var(--bw-border-strong); }
html[data-theme-base="light"] body.bw-game-page.bw-polished #roomCode { color: var(--bw-text); }
html[data-theme-base="light"] .bw-color-error { color: var(--bw-danger); }
html[data-theme-base="light"] :is(.reading-copy p,.reading-copy li,.reading-card p,.reading-section > p) { color: var(--bw-text-muted); }
html[data-theme-base="light"] .reading-card :is(.bw-btn--primary,.reading-kicker) { --bw-accent: #006b9b; --bw-accent-2: #00577f; --bw-on-accent: #fff; }
html[data-theme-base="light"] .game h2 { color: color-mix(in srgb, var(--accent) 55%, #142d40); }
html[data-theme-base="light"] .game .go { color: #102331; }
html[data-theme-base="light"] .game.shortFuse .go { color: #fff; }
html[data-theme-base="light"] body.bw-game-page.bw-polished .game-rules { background: var(--bw-panel); border-color: var(--bw-border); }
html[data-theme-base="light"] body.bw-game-page.bw-polished :is(#keypad button,#directions button,.four-columns button,#tokens button,#wordList span) { background: var(--bw-panel-2); color: var(--bw-text); border-color: var(--bw-border-strong); box-shadow: none; }
html[data-theme-base="light"] .puzzle-shell button:where(:not(.bw-btn, [data-ai-level]))[aria-pressed=true] { color: var(--bw-on-accent); }
html[data-theme-base="light"] .lesson-pile h4 { color: #f3f7fb; }

body .bw-theme-trigger { flex: 0 0 auto; min-height: 44px; padding: .5rem .7rem; border: 1px solid var(--bw-border-strong); border-radius: 9px; background: var(--bw-panel); color: var(--bw-text); font: .78rem/1.3 Verdana,sans-serif; cursor: pointer; }
body .bw-theme-trigger:hover { border-color: var(--bw-accent); }
body .bw-appearance { box-sizing: border-box; width: min(440px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: clamp(16px,4vw,24px); border: 1px solid var(--bw-border-strong); border-radius: 18px; background: var(--bw-bg-elevated); color: var(--bw-text); box-shadow: var(--bw-shadow); }
.bw-appearance::backdrop { background: #030b16a8; backdrop-filter: blur(4px); }
.bw-appearance .bw-appearance-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.bw-appearance h2 { margin: 0; color: var(--bw-text); font: bold 1.25rem/1.4 Verdana,sans-serif; letter-spacing: -.03em; text-transform: none; }
.bw-appearance h3 { color: var(--bw-text); font: bold .82rem/1.5 Verdana,sans-serif; margin: 1rem 0 .5rem; }
.bw-appearance p { color: var(--bw-text-muted); font: .78rem/1.6 Verdana,sans-serif; margin: .5rem 0 1rem; }
.bw-appearance .bw-theme-close { min-width: 44px; min-height: 44px; padding: 0; border: 1px solid var(--bw-border); border-radius: 50%; background: var(--bw-panel); color: var(--bw-text); font: 1.5rem/1 Verdana,sans-serif; cursor: pointer; }
.bw-theme-options { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .5rem; }
.bw-appearance .bw-theme-options button { display: flex; flex-direction: column; gap: .6rem; min-width: 0; padding: .6rem; border: 2px solid var(--bw-border); border-radius: 12px; background: var(--bw-panel); color: var(--bw-text); font: bold .8rem/1.4 Verdana,sans-serif; cursor: pointer; }
.bw-appearance .bw-theme-options button[aria-pressed="true"] { border-color: var(--bw-accent); box-shadow: 0 0 0 1px var(--bw-accent); }
.bw-theme-preview { display: block; width: 100%; height: 52px; border: 1px solid #71839070; border-radius: 6px; }
.bw-theme-preview-light { background: linear-gradient(90deg,#e1e8f0 28%,transparent 28%),linear-gradient(#fff 35%,#f4f6fa 35%); }
.bw-theme-preview-dark { background: linear-gradient(90deg,#122738 28%,transparent 28%),linear-gradient(#213c50 35%,#07131d 35%); }
.bw-theme-preview-custom { background: linear-gradient(130deg,#ff9d67,#a18aff 52%,#66d4cf); }
.bw-theme-custom { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--bw-border); }
.bw-theme-custom[hidden] { display: none; }
.bw-appearance .bw-theme-base { display: flex; align-items: center; justify-content: space-between; color: var(--bw-text); font: .82rem/1.5 Verdana,sans-serif; }
.bw-appearance select { min-height: 44px; padding: .5rem .8rem; background: var(--bw-panel-2); border: 1px solid var(--bw-border-strong); border-radius: 8px; color: var(--bw-text); font: inherit; }
.bw-appearance .bw-color-picker .bw-color-swatch { flex-basis: 44px; width: 44px; height: 44px; min-height: 44px; }
.bw-appearance .bw-color-picker .bw-color-swatch[data-chosen="1"] { outline-color: var(--bw-text); }
@media (max-width: 760px) { .bw-top { flex-wrap: wrap; gap: .6rem; } .bw-top .bw-nav { order: 3; flex-basis: 100%; justify-content: center; } }
@media (max-width: 360px) { .bw-top { padding-inline: .65rem; } .bw-top .bw-brand { font-size: .85rem; } body .bw-theme-trigger { padding-inline: .5rem; } .bw-top .bw-nav { gap: .8rem; } }