/* modern-v42 — Material 3 preview. Light surfaces only. No walnut, felt, or parchment. */

@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial"), local("Liberation Sans");
  size-adjust: 100.06%;
  ascent-override: 92.77%;
  descent-override: 24.41%;
  line-gap-override: 0%;
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/roboto-400.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/roboto-700.woff2") format("woff2");
}

:root,
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-elevated: #ffffff;
  --bg-inset: #f8f9fa;
  --fg: #202124;
  --fg-muted: #5f6368;
  --fg-subtle: #5f6368;
  --border: #dadce0;
  --border-strong: #dadce0;
  --felt: #1a73e8;
  --felt-deep: #1765cc;
  --felt-fg: #ffffff;
  --tile: #ffffff;
  --tile-edge: #dadce0;
  --tile-ink: #1a73e8;
  --accent: #1a73e8;
  --accent-fg: #ffffff;
  --score: #1a73e8;
  --focus: #1a73e8;
  --bingo: #a142f4;
  --danger: #d93025;
  --stage-ink: #202124;
  --stage-muted: #5f6368;
  --font-display: "Roboto", "Roboto Fallback", Arial, sans-serif;
  --font-body: "Roboto", "Roboto Fallback", Arial, sans-serif;
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --shadow: 0 1px 2px rgba(60, 64, 67, 0.12), 0 1px 3px 1px rgba(60, 64, 67, 0.08);
  --shadow-2: 0 1px 2px rgba(60, 64, 67, 0.1), 0 8px 24px rgba(60, 64, 67, 0.12);
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --wrap: min(1120px, calc(100% - 32px));
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #202124;
  --bg-elevated: #292a2d;
  --bg-inset: #303134;
  --fg: #e8eaed;
  --fg-muted: #9aa0a6;
  --fg-subtle: #9aa0a6;
  --border: #3c4043;
  --border-strong: #3c4043;
  --felt: #8ab4f8;
  --felt-deep: #aecbfa;
  --felt-fg: #202124;
  --tile: #303134;
  --tile-edge: #3c4043;
  --tile-ink: #8ab4f8;
  --accent: #8ab4f8;
  --accent-fg: #202124;
  --score: #8ab4f8;
  --focus: #8ab4f8;
  --bingo: #d7aefb;
  --danger: #f28b82;
  --stage-ink: #e8eaed;
  --stage-muted: #9aa0a6;
}

html, body {
  background: #ffffff !important;
  color: #202124 !important;
  font-family: "Roboto", "Roboto Fallback", Arial, sans-serif !important;
}
body::before { display: none !important; content: none !important; }
::selection { background: #d2e3fc; color: #202124; }

h1, h2, h3, .split-title, .hero h1, .best-word, .word b {
  font-family: "Roboto", "Roboto Fallback", Arial, sans-serif !important;
  text-wrap: balance;
}
h1, h2, h3, .split-title, .hero h1 {
  font-weight: 500 !important;
  letter-spacing: -0.03em;
  color: #202124 !important;
}
p, .lede, .prose p { text-wrap: pretty; }
.prose p { hanging-punctuation: first; }
.pts, .best-meta, #resultMeta, .group-title span {
  font-variant-numeric: tabular-nums;
}

a { color: #1a73e8; }
.help-ask {
  margin: 28px 0 8px;
  padding: 16px;
  border: 1px solid #dadce0;
  border-radius: 16px;
  background: #fff;
  color: #202124;
}
.help-ask p { margin: 0 0 10px; }
.help-ask div { display: flex; gap: 8px; }
.help-ask button {
  min-height: 40px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #1a73e8;
  font-weight: 500;
}
.help-ask button[data-help="yes"] {
  background: #1a73e8;
  border-color: #1a73e8;
  color: #fff;
}
.help-ask button:disabled { opacity: 0.7; }
.help-thanks { color: #5f6368; font-size: 0.875rem; }
a.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  background: var(--felt) !important;
  color: var(--felt-fg) !important;
}
:focus-visible {
  outline: 2px solid #1a73e8 !important;
  outline-offset: 2px !important;
}

button.theme-btn {
  display: inline-grid !important;
  place-items: center;
  flex: none !important;
  width: 44px !important;
  min-width: 44px !important;
  height: 44px !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 22px !important;
  border: 1px solid #dadce0 !important;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6368' d='M21 14.5A8.5 8.5 0 0 1 9.5 3a7 7 0 1 0 11.5 11.5z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 20px 20px !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  overflow: hidden;
  box-shadow: none !important;
}
html[data-theme="dark"] button.theme-btn {
  border-color: #3c4043 !important;
  background-color: #303134 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='4' fill='%23e8eaed'/%3E%3Cpath d='M12 2.8v2.2M12 19v2.2M4.6 4.6l1.6 1.6M17.8 17.8l1.6 1.6M2.8 12h2.2M19 12h2.2M4.6 19.4l1.6-1.6M17.8 6.2l1.6-1.6' stroke='%23e8eaed' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}

.site-header {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid #dadce0 !important;
  box-shadow: none !important;
  backdrop-filter: blur(16px);
}
.brand, .brand-name, .brand-name span { color: #202124 !important; }
.brand-name span { color: #5f6368 !important; font-weight: 400 !important; }
.mark {
  width: 36px !important;
  height: 36px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: linear-gradient(145deg, #1a73e8 0%, #1a73e8 58%, #7b4dff 145%) !important;
  color: #ffffff !important;
  font-family: "Roboto", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 1.2rem !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(26, 115, 232, 0.45) !important;
}
.mark small { display: none !important; }
.menu-btn {
  border-radius: 20px !important;
  border: 1px solid #dadce0 !important;
  background: #ffffff !important;
  color: #1a73e8 !important;
  font-weight: 500 !important;
}
.nav,
html[data-theme="light"] .nav,
html[data-theme="dark"] .nav,
html[data-theme="light"] .cinematic .nav,
html[data-theme="dark"] .cinematic .nav {
  background: #ffffff !important;
  color: #202124 !important;
  border-color: #dadce0 !important;
}
.nav a,
html[data-theme="light"] .nav a,
html[data-theme="dark"] .nav a,
html[data-theme="light"] .cinematic .nav a,
html[data-theme="dark"] .cinematic .nav a {
  color: #202124 !important;
  font-weight: 500 !important;
  text-decoration: none;
}
.nav a[aria-current="page"] {
  color: #1a73e8 !important;
  border-bottom-color: #1a73e8 !important;
}

.stage, html[data-theme="light"] .stage, html[data-theme="dark"] .stage {
  background: #ffffff !important;
  color: #202124 !important;
  min-height: 0 !important;
  overflow: visible !important;
}
.stage-bg, .orbit, .story-rack, .story-cap, .scroll-cue { display: none !important; }

.home-hero { padding: 8px 0 16px !important; }
.home-layout {
  width: min(1120px, calc(100% - 32px)) !important;
  margin-inline: auto;
}
.home-copy .kicker {
  margin: 0 0 8px;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #1a73e8;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .home-copy .kicker {
    background: linear-gradient(90deg, #1a73e8, #a142f4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
.split-title {
  margin: 0 0 8px !important;
  font-size: 2.35rem !important;
  line-height: 1.08 !important;
  font-style: normal !important;
  color: #202124 !important;
}
.split-title .ital { font-style: normal !important; color: #202124 !important; }
.home-copy .lede, .cinematic .stage .lede, .hero .lede {
  color: #5f6368 !important;
  font-size: 1rem !important;
  max-width: 36rem;
  margin: 0;
}
.hero-art { display: none; margin: 0; }
.hero-art img {
  width: 100%;
  height: auto;
  aspect-ratio: 1100 / 332;
  object-fit: contain;
  object-position: center;
}

.stage-tool, .home-layout .stage-tool { width: auto !important; }
.panel,
.stage-tool .panel,
html[data-theme="light"] .stage-tool .panel,
html[data-theme="dark"] .stage-tool .panel {
  background: #ffffff !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 28px !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 12px 28px rgba(60, 64, 67, 0.08) !important;
  backdrop-filter: none !important;
}
.field-label, .stage-tool .field-label { color: #202124 !important; font-weight: 500 !important; }
.coach, .stage-tool .coach, .hint, .mini, .try-label, .stage-tool .try-label, .stage-tool .mini {
  color: #5f6368 !important;
}
#coach { min-height: 2.6em; }
.input-row input[type="text"],
.stage-tool .input-row input[type="text"],
.filters input,
.wordle-row input,
.stage-tool .wordle-row input,
.stage-tool .filters input {
  background: #ffffff !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  caret-color: #1a73e8 !important;
  font-family: "Roboto", Arial, sans-serif !important;
}
.input-row input[type="text"]::placeholder,
.stage-tool .input-row input[type="text"]::placeholder { color: #80868b !important; }
.input-row input:focus,
.filters input:focus,
.wordle-row input:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2) !important;
  outline: none;
}
.primary,
.stage-tool .primary,
html[data-theme="light"] .stage-tool .primary {
  background: #1a73e8 !important;
  color: #ffffff !important;
  border: 0 !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;
}
.primary:hover, .stage-tool .primary:hover { background: #1765cc !important; }
.primary:active, .stage-tool .primary:active { background: #185abc !important; }

.modes { border-bottom: 1px solid #dadce0 !important; }
.modes .mode,
.stage-tool .modes .mode,
.panel .modes .mode {
  color: #5f6368 !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  font-weight: 500 !important;
}
.modes .mode[aria-pressed="true"],
.modes .mode[aria-selected="true"],
.stage-tool .modes .mode[aria-pressed="true"],
.stage-tool .modes .mode[aria-selected="true"],
.panel .modes .mode[aria-pressed="true"],
.panel .modes .mode[aria-selected="true"] {
  color: #1a73e8 !important;
  background: transparent !important;
  border-bottom-color: #1a73e8 !important;
}
.chip,
.examples .chip,
.len,
.len-jumps .chip,
.stage-tool .chip,
.stage-tool .len,
.next-play .chip {
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  border: 0 !important;
  border-radius: 16px !important;
  font-weight: 500 !important;
}
.len[aria-pressed="true"],
.chip[aria-pressed="true"],
.stage-tool .len[aria-pressed="true"] {
  background: #1a73e8 !important;
  color: #ffffff !important;
  border-color: #1a73e8 !important;
}
.refine-btn {
  color: #1a73e8 !important;
  background: #ffffff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}
.refine-btn[aria-pressed="true"] {
  color: #174ea6 !important;
  background: #e8f0fe !important;
  border-color: #d2e3fc !important;
}
.ghost, .stage-tool .ghost { color: #1a73e8 !important; font-weight: 500 !important; }
.key, .stage-tool .key {
  background: #ffffff !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 1px rgba(60, 64, 67, 0.08) !important;
  font-weight: 500 !important;
}

#resultsHeading,
.stage-tool .status,
.stage-tool .status h2 {
  color: #202124 !important;
  background: transparent !important;
  text-shadow: none !important;
}
#results.empty {
  color: #5f6368 !important;
  background: #f8f9fa !important;
  border: 1px dashed #dadce0 !important;
  border-radius: 16px !important;
}
.grid {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.word {
  width: auto !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid #dadce0 !important;
  color: #202124 !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06);
  padding: 0 12px !important;
}
.word b {
  font-weight: 500 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.word .pts {
  color: #5f6368 !important;
  background: #f8f9fa;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 500 !important;
}
.word.bingo {
  border-color: #e1c6fb !important;
  background: linear-gradient(180deg, #ffffff, #fbf7ff) !important;
}
.word.is-on, .word:hover {
  border-color: #1a73e8 !important;
}
.best-play {
  background: #ffffff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 8px 24px rgba(26, 115, 232, 0.08) !important;
}
.best-word {
  color: #1a73e8 !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  text-transform: uppercase !important;
}
.group-title { color: #5f6368 !important; letter-spacing: 0.08em !important; }

.daily,
.stage-tool .daily,
html[data-theme="light"] .stage-tool .daily {
  background: #f8f9fa !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.daily .daily-word, .stage-tool .daily .daily-word { color: #202124 !important; letter-spacing: 0.12em; }
.daily-actions { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.daily-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 8px 0 0;
  min-height: 44px;
}
.daily-stats dt {
  margin: 0;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5f6368;
  font-weight: 500;
}
.daily-stats dd {
  margin: 0;
  min-height: 1.25em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: #202124;
}
.daily-countdown {
  min-height: 1.4em;
  margin: 8px 0 0;
  font-variant-numeric: tabular-nums;
}
.reviewed {
  margin: 0 0 16px;
  color: #5f6368;
  font-size: 0.875rem;
}
.ladder-row { display: flex; flex-wrap: wrap; gap: 12px; }
.ladder-row label { display: block; font-weight: 500; margin-bottom: 8px; }
.ladder-row input[type="text"],
.ladder-row input[type="number"] {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  color: #202124;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ladder-row input[type="number"] { letter-spacing: 0; text-transform: none; }
.ladder-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 48px; }
.ladder-step {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 12px;
  border: 1px solid #dadce0;
  background: #fff;
  color: #202124;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ladder-arrow { color: #5f6368; }
.ladder-empty {
  margin: 0;
  padding: 16px;
  border: 1px dashed #dadce0;
  border-radius: 16px;
  background: #f8f9fa;
  color: #5f6368;
}
.ladder-row select {
  width: 100%;
  min-height: 48px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  padding: 0 14px;
  background: #fff;
  color: #202124;
}
.score-tiles, .boggle-grid {
  display: grid;
  gap: 8px;
  margin-top: 16px;
}
.score-tiles { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }
.score-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 96px;
  padding: 10px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  background: #fff;
  color: #202124;
}
.score-tile strong { letter-spacing: 0.06em; font-weight: 500; }
.score-tile label, .score-bingo { color: #5f6368; font-size: 0.875rem; }
.score-tile select { min-height: 36px; }
.score-break {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.score-break li, .boggle-words li {
  margin: 0;
  padding: 8px 12px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  background: #fff;
  color: #202124;
}
.score-total { font-weight: 500; color: #202124; }
.boggle-grid { grid-template-columns: repeat(4, minmax(0, 72px)); width: max-content; max-width: 100%; }
.boggle-grid input {
  width: 100%;
  min-height: 56px;
  border: 1px solid #dadce0;
  border-radius: 12px;
  background: #fff;
  color: #202124;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 1.125rem;
}
.boggle-words {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.daily-archive {
  display: grid;
  gap: 8px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}
.daily-archive li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 4px 16px;
  padding: 12px 16px;
  border: 1px solid #dadce0;
  border-radius: 16px;
  background: #fff;
  color: #202124;
}
.daily-archive .when { color: #5f6368; font-size: 0.8rem; }
.daily-archive .rack { font-weight: 500; letter-spacing: 0.08em; }
.daily-archive .answer { color: #5f6368; }
@media (max-width: 599px) {
  .daily-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tool-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 8px 0 24px;
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 96px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid #dadce0;
  border-radius: 16px;
  text-decoration: none;
  color: #202124;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08);
}
.tool-card em {
  font-style: normal;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #1a73e8;
}
.tool-card strong {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.tool-card span { color: #5f6368; font-size: 0.875rem; }

.story-beats li, .bento-card, .card, .related .card {
  background: #ffffff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.06) !important;
  color: #202124 !important;
}
.story-beats h3, .bento-card h3, .card h3 { color: #202124 !important; font-weight: 500 !important; }
.story-beats p, .bento-card p, .card p { color: #5f6368 !important; }
.story-beats a, .prose a, .faq a { color: #1a73e8 !important; }
.bento:hover .bento-card { transform: none !important; opacity: 1 !important; }

.hero { padding: 24px 0 8px !important; }
.hero h1 { font-size: clamp(2rem, 1.2rem + 2.4vw, 3rem) !important; margin: 0 0 8px; }
.crumbs { color: #5f6368; font-size: 0.8rem; }
.crumbs a { color: #1a73e8; text-decoration: none; }
.prose h2, .page h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }

.faq details {
  background: #ffffff;
  border: 1px solid #dadce0 !important;
  border-radius: 16px;
  padding: 12px 16px !important;
  margin: 8px 0;
}
.faq summary { font-weight: 500; color: #202124; }
.faq details p { color: #5f6368; }

.site-footer,
.cinematic .site-footer {
  background: #f8f9fa !important;
  color: #5f6368 !important;
  border-top: 1px solid #dadce0 !important;
}
.site-footer a,
.cinematic .site-footer a,
html[data-theme="light"] .cinematic .site-footer a {
  color: #5f6368 !important;
  text-decoration: none;
}
.site-footer a:hover,
.cinematic .site-footer a:hover { color: #1a73e8 !important; }
.footer-head,
.cinematic .footer-grid .footer-head,
.cinematic .footer-grid h2,
html[data-theme="light"] .cinematic .footer-grid .footer-head {
  color: #202124 !important;
  font-weight: 500 !important;
}
.legal-line, .cinematic .legal-line { color: #5f6368 !important; border-top-color: #dadce0 !important; }

.consent {
  background: #ffffff !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-2) !important;
}
.consent a { color: #1a73e8 !important; }
.consent button { background: #1a73e8 !important; color: #ffffff !important; border-radius: 20px !important; border: 0 !important; }
.consent button.ghost {
  background: #ffffff !important;
  color: #1a73e8 !important;
  border: 1px solid #dadce0 !important;
}

.ad-label { color: #5f6368 !important; letter-spacing: 0.08em; font-size: 0.75rem; }
html.preview .ad-region,
html.preview body:not(.has-results) .ad-region,
html.preview .ad-region[hidden] {
  display: block !important;
}
html.preview .ad-box,
html.preview .ad-ph {
  display: block !important;
  background: #e8eaed !important;
  border: 1px dashed #dadce0 !important;
  border-radius: 12px !important;
  min-height: 90px !important;
}
html.preview .ad-ph { min-height: 90px; }

.after-stage::before { display: none !important; }

@media (min-width: 600px) {
  .split-title { font-size: clamp(2rem, 4vw, 2.6rem) !important; }
  .tool-row { grid-template-columns: 1fr 1fr; }
  .cinematic .stage .lede, .home-copy .lede { display: block !important; }
}
@media (min-width: 960px) {
  .home-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    grid-template-areas:
      "copy art"
      "tool tool";
    column-gap: 32px;
    row-gap: 8px;
    align-items: center;
    padding-top: 16px;
  }
  .home-layout .stage-copy,
  .home-layout .hero-art,
  .home-layout .stage-tool {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .home-copy { grid-area: copy; }
  .hero-art {
    grid-area: art;
    display: block;
  }
  .home-layout .stage-tool { grid-area: tool; margin-top: 8px !important; }
  .split-title { font-size: clamp(2.75rem, 3.4vw, 3.75rem) !important; }
  .tool-row { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: no-preference) {
  .tool-card, .card, .bento-card, .word, .primary, .menu-btn {
    transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), box-shadow 180ms cubic-bezier(0.2, 0, 0, 1), background-color 180ms cubic-bezier(0.2, 0, 0, 1);
  }
  .tool-card:hover, .card:hover, .bento-card:hover, .word:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(60, 64, 67, 0.12);
  }
  .primary:active, .word:active, .tool-card:active {
    transform: translateY(1px) scale(0.98);
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .tool-card:hover, .card:hover, .bento-card:hover, .word:hover, .primary:active {
    transform: none !important;
  }
}

/* Beat older light-theme !important rules on the home cascade. */
html[data-theme="light"] .word,
html[data-theme="dark"] .word {
  background: #ffffff !important;
  color: #202124 !important;
  border-color: #dadce0 !important;
}
html[data-theme="light"] .word .pts,
html[data-theme="dark"] .word .pts {
  color: #5f6368 !important;
  background: #f8f9fa !important;
}
html[data-theme="light"] .word.bingo,
html[data-theme="dark"] .word.bingo {
  background: linear-gradient(180deg, #ffffff, #fbf7ff) !important;
  border-color: #e1c6fb !important;
}
html[data-theme="light"] .input-row input[type="text"],
html[data-theme="light"] .filters input,
html[data-theme="light"] .stage-tool .input-row input[type="text"],
html[data-theme="dark"] .input-row input[type="text"],
html[data-theme="dark"] .filters input,
html[data-theme="dark"] .stage-tool .input-row input[type="text"] {
  background: #ffffff !important;
  color: #202124 !important;
  border-color: #dadce0 !important;
  box-shadow: none !important;
}
html[data-theme="light"] .stage-tool .input-row input[type="text"]:focus,
html[data-theme="dark"] .stage-tool .input-row input[type="text"]:focus,
html[data-theme="light"] .input-row input[type="text"]:focus {
  border-color: #1a73e8 !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.2) !important;
}
html[data-theme="light"] .stage-tool .input-row input[type="text"]::placeholder,
html[data-theme="dark"] .stage-tool .input-row input[type="text"]::placeholder {
  color: #80868b !important;
}
.stage-tool .toolbar .ghost,
.stage-tool .status .ghost,
html[data-theme="light"] .stage-tool .toolbar .ghost,
html[data-theme="light"] .stage-tool .status .ghost,
html[data-theme="light"] .ghost:not(.stage-tool .ghost):not(.status .ghost) {
  color: #1a73e8 !important;
  background: #ffffff !important;
  border: 1px solid #dadce0 !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
}
.best-play,
html[data-theme="dark"] .best-play {
  background: #ffffff !important;
  color: #202124 !important;
  border: 1px solid #dadce0 !important;
  border-radius: 20px !important;
  box-shadow: 0 1px 2px rgba(60, 64, 67, 0.08), 0 8px 24px rgba(26, 115, 232, 0.08) !important;
}
.best-play .best-word,
.best-play .best-word button,
button.best-word,
html[data-theme="dark"] .best-play .best-word,
html[data-theme="dark"] button.best-word {
  color: #1a73e8 !important;
}
.best-play .try-label,
.best-play .best-meta,
.best-play .best-def,
html[data-theme="dark"] .best-play .try-label,
html[data-theme="dark"] .best-play .best-meta,
html[data-theme="dark"] .best-play .best-def {
  color: #5f6368 !important;
}
html[data-theme="light"] .stage-tool .field-label,
html[data-theme="dark"] .stage-tool .field-label,
.stage-tool .field-label,
.stage-tool .coach,
html[data-theme="dark"] .stage-tool .coach {
  color: #5f6368 !important;
}
html[data-theme="light"] .stage-tool .field-label,
html[data-theme="dark"] .stage-tool .field-label,
.stage-tool .field-label { color: #202124 !important; }
html[data-theme="light"] :focus-visible,
html[data-theme="dark"] :focus-visible { outline-color: #1a73e8 !important; }
html[data-theme="light"] .chip:not(.len-jumps .chip),
html[data-theme="dark"] .chip:not(.len-jumps .chip),
html[data-theme="light"] .examples .chip,
.stage-tool .len-jumps .chip,
.len-jumps .chip {
  color: #1a73e8 !important;
  background: #e8f0fe !important;
  border-color: transparent !important;
}
.stage-tool .primary,
html[data-theme="light"] .stage-tool .primary,
html[data-theme="dark"] .stage-tool .primary {
  background: #1a73e8 !important;
  color: #ffffff !important;
}
.stage-tool .primary:hover { background: #1765cc !important; }

/* .status keeps top: 52px from the base sheet. Older rules switch it to
   position: relative, which slides the heading over the empty state. */
.stage-tool .status,
.status {
  position: static !important;
  top: auto !important;
  z-index: auto !important;
  background: transparent !important;
  backdrop-filter: none !important;
}
.stage-tool #results.empty,
#results.empty {
  margin-top: 8px !important;
}
#results.empty p {
  margin: 0 0 8px !important;
  color: #5f6368 !important;
}

/* Material dark. These follow the light !important rules so they win. */
html[data-theme="dark"],
html[data-theme="dark"] body {
  background: #202124 !important;
  color: #e8eaed !important;
}
html[data-theme="dark"] ::selection { background: #3c4043; color: #e8eaed; }
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] .split-title,
html[data-theme="dark"] .hero h1,
html[data-theme="dark"] .split-title .ital {
  color: #e8eaed !important;
}
html[data-theme="dark"] a { color: #8ab4f8; }
html[data-theme="dark"] .help-ask {
  background: #292a2d !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .help-ask button {
  background: #303134 !important;
  color: #8ab4f8 !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .help-ask button[data-help="yes"] {
  background: #8ab4f8 !important;
  color: #202124 !important;
  border-color: #8ab4f8 !important;
}
html[data-theme="dark"] .help-thanks { color: #9aa0a6 !important; }
html[data-theme="dark"] :focus-visible { outline-color: #8ab4f8 !important; }

html[data-theme="dark"] .site-header {
  background: rgba(32, 33, 36, 0.92) !important;
  border-bottom-color: #3c4043 !important;
}
html[data-theme="dark"] .brand,
html[data-theme="dark"] .brand-name { color: #e8eaed !important; }
html[data-theme="dark"] .brand-name span { color: #9aa0a6 !important; }
html[data-theme="dark"] .mark {
  background: #8ab4f8 !important;
  color: #202124 !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .menu-btn {
  background: #303134 !important;
  color: #8ab4f8 !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .nav,
html[data-theme="dark"] .cinematic .nav {
  background: #292a2d !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .nav a,
html[data-theme="dark"] .cinematic .nav a { color: #e8eaed !important; }
html[data-theme="dark"] .nav a[aria-current="page"] {
  color: #8ab4f8 !important;
  border-bottom-color: #8ab4f8 !important;
}

html[data-theme="dark"] .stage { background: #202124 !important; color: #e8eaed !important; }
html[data-theme="dark"] .home-copy .lede,
html[data-theme="dark"] .cinematic .stage .lede,
html[data-theme="dark"] .hero .lede,
html[data-theme="dark"] .crumbs { color: #9aa0a6 !important; }
html[data-theme="dark"] .crumbs a { color: #8ab4f8; }
html[data-theme="dark"] .hero-art { position: relative; }
html[data-theme="dark"] .hero-art::before {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  top: 58%;
  bottom: 6%;
  background: radial-gradient(ellipse at center, rgba(138, 180, 248, 0.45), rgba(167, 66, 244, 0.28) 42%, transparent 72%);
  filter: blur(16px);
  pointer-events: none;
  z-index: 0;
}
html[data-theme="dark"] .hero-art img {
  position: relative;
  z-index: 1;
  -webkit-mask-image: none;
  mask-image: none;
}

html[data-theme="dark"] .panel,
html[data-theme="dark"] .stage-tool .panel {
  background: #292a2d !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.28) !important;
}
html[data-theme="dark"] .field-label,
html[data-theme="dark"] .stage-tool .field-label { color: #e8eaed !important; }
html[data-theme="dark"] .coach,
html[data-theme="dark"] .stage-tool .coach,
html[data-theme="dark"] .hint,
html[data-theme="dark"] .mini,
html[data-theme="dark"] .try-label,
html[data-theme="dark"] .stage-tool .try-label { color: #9aa0a6 !important; }
html[data-theme="dark"] .input-row input[type="text"],
html[data-theme="dark"] .filters input,
html[data-theme="dark"] .stage-tool .input-row input[type="text"],
html[data-theme="dark"] .wordle-row input,
html[data-theme="dark"] .stage-tool .wordle-row input,
html[data-theme="dark"] .stage-tool .filters input,
html[data-theme="dark"] .search-again,
html[data-theme="dark"] .search-again .input-row input[type="text"] {
  background: #303134 !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
  box-shadow: none !important;
}
html[data-theme="dark"] .input-row input[type="text"]::placeholder,
html[data-theme="dark"] .stage-tool .input-row input[type="text"]::placeholder { color: #9aa0a6 !important; }
html[data-theme="dark"] .input-row input:focus,
html[data-theme="dark"] .stage-tool .input-row input[type="text"]:focus,
html[data-theme="dark"] .filters input:focus,
html[data-theme="dark"] .wordle-row input:focus {
  border-color: #8ab4f8 !important;
  box-shadow: 0 0 0 3px rgba(138, 180, 248, 0.28) !important;
}
html[data-theme="dark"] .primary,
html[data-theme="dark"] .stage-tool .primary {
  background: #8ab4f8 !important;
  color: #202124 !important;
}
html[data-theme="dark"] .primary:hover,
html[data-theme="dark"] .stage-tool .primary:hover { background: #aecbfa !important; }
html[data-theme="dark"] .primary:active,
html[data-theme="dark"] .stage-tool .primary:active { background: #d2e3fc !important; }

html[data-theme="dark"] .modes { border-bottom-color: #3c4043 !important; }
html[data-theme="dark"] .modes .mode,
html[data-theme="dark"] .stage-tool .modes .mode,
html[data-theme="dark"] .panel .modes .mode {
  color: #9aa0a6 !important;
  background: transparent !important;
  border-bottom-color: transparent !important;
}
html[data-theme="dark"] .modes .mode[aria-pressed="true"],
html[data-theme="dark"] .modes .mode[aria-selected="true"],
html[data-theme="dark"] .stage-tool .modes .mode[aria-pressed="true"],
html[data-theme="dark"] .stage-tool .modes .mode[aria-selected="true"],
html[data-theme="dark"] .panel .modes .mode[aria-pressed="true"],
html[data-theme="dark"] .panel .modes .mode[aria-selected="true"] {
  color: #8ab4f8 !important;
  border-bottom-color: #8ab4f8 !important;
  background: transparent !important;
}
html[data-theme="dark"] .chip,
html[data-theme="dark"] .examples .chip,
html[data-theme="dark"] .len,
html[data-theme="dark"] .len-jumps .chip,
html[data-theme="dark"] .stage-tool .chip,
html[data-theme="dark"] .stage-tool .len,
html[data-theme="dark"] .next-play .chip,
html[data-theme="dark"] .chip:not(.len-jumps .chip) {
  color: #8ab4f8 !important;
  background: #394457 !important;
  border-color: transparent !important;
}
html[data-theme="dark"] .len[aria-pressed="true"],
html[data-theme="dark"] .chip[aria-pressed="true"],
html[data-theme="dark"] .stage-tool .len[aria-pressed="true"] {
  background: #8ab4f8 !important;
  color: #202124 !important;
}
html[data-theme="dark"] .refine-btn {
  color: #8ab4f8 !important;
  background: #303134 !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .refine-btn[aria-pressed="true"] {
  background: #394457 !important;
  color: #8ab4f8 !important;
}
html[data-theme="dark"] .ghost,
html[data-theme="dark"] .stage-tool .ghost,
html[data-theme="dark"] .stage-tool .toolbar .ghost,
html[data-theme="dark"] .stage-tool .status .ghost {
  color: #8ab4f8 !important;
  background: #303134 !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .key,
html[data-theme="dark"] .stage-tool .key {
  background: #303134 !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35) !important;
}

html[data-theme="dark"] #resultsHeading,
html[data-theme="dark"] .stage-tool .status,
html[data-theme="dark"] .stage-tool .status h2 { color: #e8eaed !important; background: transparent !important; }
html[data-theme="dark"] #results.empty {
  color: #9aa0a6 !important;
  background: #202124 !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] #results.empty p { color: #9aa0a6 !important; }
html[data-theme="dark"] .word {
  background: #303134 !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .word .pts {
  color: #9aa0a6 !important;
  background: #292a2d !important;
}
html[data-theme="dark"] .word.bingo {
  background: linear-gradient(180deg, #303134, #352840) !important;
  border-color: #6b4c8a !important;
}
html[data-theme="dark"] .word.is-on,
html[data-theme="dark"] .word:hover { border-color: #8ab4f8 !important; }
html[data-theme="dark"] .best-play {
  background: #292a2d !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}
html[data-theme="dark"] .best-word,
html[data-theme="dark"] .best-play .best-word,
html[data-theme="dark"] button.best-word { color: #8ab4f8 !important; }
html[data-theme="dark"] .best-play .try-label,
html[data-theme="dark"] .best-play .best-meta,
html[data-theme="dark"] .best-play .best-def,
html[data-theme="dark"] .group-title { color: #9aa0a6 !important; }
html[data-theme="dark"] .daily,
html[data-theme="dark"] .stage-tool .daily {
  background: #303134 !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .daily .daily-word,
html[data-theme="dark"] .stage-tool .daily .daily-word { color: #e8eaed !important; }
html[data-theme="dark"] .reviewed { color: #9aa0a6 !important; }
html[data-theme="dark"] .daily-stats dt,
html[data-theme="dark"] .daily-countdown,
html[data-theme="dark"] .ladder-arrow,
html[data-theme="dark"] .ladder-empty { color: #9aa0a6 !important; }
html[data-theme="dark"] .daily-stats dd { color: #e8eaed !important; }
html[data-theme="dark"] .ladder-row input[type="text"],
html[data-theme="dark"] .ladder-row input[type="number"],
html[data-theme="dark"] .ladder-row select,
html[data-theme="dark"] .ladder-step,
html[data-theme="dark"] .score-tile,
html[data-theme="dark"] .score-tile select,
html[data-theme="dark"] .score-break li,
html[data-theme="dark"] .boggle-words li,
html[data-theme="dark"] .boggle-grid input {
  background: #303134 !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .score-tile label,
html[data-theme="dark"] .score-bingo { color: #9aa0a6 !important; }
html[data-theme="dark"] .score-total { color: #e8eaed !important; }
html[data-theme="dark"] .daily-archive li {
  background: #292a2d !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .daily-archive .when,
html[data-theme="dark"] .daily-archive .answer { color: #9aa0a6 !important; }
html[data-theme="dark"] .daily-archive .rack { color: #e8eaed !important; }
html[data-theme="dark"] .ladder-empty {
  background: #202124 !important;
  border-color: #3c4043 !important;
}

html[data-theme="dark"] .tool-card,
html[data-theme="dark"] .story-beats li,
html[data-theme="dark"] .bento-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .related .card,
html[data-theme="dark"] .faq details {
  background: #292a2d !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .tool-card strong,
html[data-theme="dark"] .story-beats h3,
html[data-theme="dark"] .bento-card h3,
html[data-theme="dark"] .card h3 { color: #e8eaed !important; }
html[data-theme="dark"] .tool-card span,
html[data-theme="dark"] .story-beats p,
html[data-theme="dark"] .bento-card p,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .prose p,
html[data-theme="dark"] .prose li { color: #9aa0a6 !important; }
html[data-theme="dark"] .story-beats a,
html[data-theme="dark"] .prose a,
html[data-theme="dark"] .faq a { color: #8ab4f8 !important; }
html[data-theme="dark"] .faq summary { color: #e8eaed; }

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .cinematic .site-footer {
  background: #292a2d !important;
  color: #9aa0a6 !important;
  border-top-color: #3c4043 !important;
}
html[data-theme="dark"] .site-footer a,
html[data-theme="dark"] .cinematic .site-footer a { color: #9aa0a6 !important; }
html[data-theme="dark"] .site-footer a:hover,
html[data-theme="dark"] .cinematic .site-footer a:hover { color: #8ab4f8 !important; }
html[data-theme="dark"] .footer-head,
html[data-theme="dark"] .cinematic .footer-grid .footer-head { color: #e8eaed !important; }
html[data-theme="dark"] .legal-line,
html[data-theme="dark"] .cinematic .legal-line { color: #9aa0a6 !important; border-top-color: #3c4043 !important; }

html[data-theme="dark"] .consent {
  background: #292a2d !important;
  color: #e8eaed !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .consent a { color: #8ab4f8 !important; }
html[data-theme="dark"] .consent button { background: #8ab4f8 !important; color: #202124 !important; }
html[data-theme="dark"] .consent button.ghost {
  background: #303134 !important;
  color: #8ab4f8 !important;
  border-color: #3c4043 !important;
}
html[data-theme="dark"] .ad-label { color: #9aa0a6 !important; }
html[data-theme="dark"] .ad-box,
html[data-theme="dark"] .ad-ph,
html.preview[data-theme="dark"] .ad-box,
html.preview[data-theme="dark"] .ad-ph {
  background: #303134 !important;
  border-color: #5f6368 !important;
}