:root {
  color-scheme: light dark;
  --board: #274a3b;
  --board-line: #1c3a2d;
  --tile: #f4e8cf;
  --tile-shadow: #c9b891;
  --ink: #2b2118;
  --ink-soft: #6b5c48;
  --accent: #b3472b;
  --accent-ink: #fff8ec;
  --page-bg: #1b3329;
  --font-scale: 1;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  min-height: 100%;
}

html {
  /* Driven by the on-page text-size toggle (assets/a11y.js) so everything sized
     in rem — including tile boxes — scales together with the text, instead of
     the OS/browser boosting glyph size independently of box size. */
  font-size: calc(100% * var(--font-scale));
}

body {
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  background: radial-gradient(circle at 50% 0%, var(--board) 0%, var(--page-bg) 70%);
  color: var(--tile);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 1rem 3rem;
}

.wrap {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

/* The 15x15 board needs more room than this site's usual narrow single-column
   pages -- at 640px it fell a few px short of fitting inside main.panel's own
   padding, clipping the last column and forcing an unwanted scroll on desktop. */
.wrap.wrap-wide {
  max-width: 720px;
}

header.site {
  text-align: center;
  margin-bottom: 2rem;
}

header.site a {
  text-decoration: none;
  color: inherit;
}

.logo {
  display: inline-flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  justify-content: center;
}

.logo .tile {
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.3rem;
}

.tile {
  background: linear-gradient(160deg, var(--tile), #e8d9b5);
  color: var(--ink);
  border-radius: 6px;
  box-shadow: 0 3px 0 var(--tile-shadow), 0 4px 8px rgba(0,0,0,0.35);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: Georgia, "Times New Roman", serif;
  position: relative;
  text-transform: uppercase;
}

.tile .pts {
  position: absolute;
  bottom: 0.12em;
  right: 0.2em;
  font-size: 0.55em;
  font-weight: 600;
  font-family: system-ui, sans-serif;
}

/* Two-digit scores (only 10, on Q/Z) are twice as wide as a single digit and bleed
   into the letter at the larger text sizes -- shrink them so "10" occupies about the
   same width a single digit does. Applied wherever a 10-point tile is rendered. */
.tile .pts.pts-wide {
  font-size: 0.4em;
}

.tagline {
  color: var(--tile);
  opacity: 0.85;
  font-size: 0.95rem;
  margin-top: 0.75rem;
}

.text-size-btn {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.4rem 0.9rem;
  min-height: 2.25rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: var(--tile);
  cursor: pointer;
}

.text-size-btn:hover,
.text-size-btn:focus-visible {
  background: rgba(255,255,255,0.14);
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 480px) {
  .card-grid { grid-template-columns: 1fr; }
}

html[data-text-size="large"] .card-grid,
html[data-text-size="xlarge"] .card-grid {
  grid-template-columns: 1fr;
}

.card {
  background: linear-gradient(160deg, var(--tile), #e8d9b5);
  color: var(--ink);
  border-radius: 12px;
  box-shadow: 0 4px 0 var(--tile-shadow), 0 6px 14px rgba(0,0,0,0.35);
  padding: 1.25rem;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: transform 0.12s ease;
}

a.card:hover, a.card:focus-visible {
  transform: translateY(-2px);
}

.card .letter-tile {
  width: 2.75rem;
  height: 2.75rem;
  font-size: 1.4rem;
  align-self: flex-start;
}

.card h2 {
  margin: 0;
  font-size: 1.15rem;
}

.card p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.35;
}

.card.disabled {
  opacity: 0.62;
  cursor: default;
  filter: grayscale(0.35);
}

.badge {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  background: var(--board);
  color: var(--tile);
}

.badge.soon {
  background: var(--ink-soft);
}

main.panel {
  background: rgba(0,0,0,0.18);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.5rem;
}

.back-link {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  margin-bottom: 1.25rem;
  color: var(--tile);
  opacity: 0.9;
  text-decoration: none;
  font-size: 0.9rem;
}

.back-link:hover { opacity: 1; }

.lookup-form {
  display: flex;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
}

.lookup-form[hidden] {
  /* Same [hidden]-vs-author-display bug as .bw-actions[hidden] above --
     without this, #type-form still rendered in Place mode. */
  display: none;
}

.lookup-form input[type="text"] {
  flex: 1;
  font-size: 1.3rem;
  padding: 0.6rem 0.75rem;
  min-height: 2.75rem;
  border-radius: 8px;
  border: none;
  font-family: Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  min-width: 0;
}

.lookup-form button {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  min-height: 2.75rem;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.lookup-form button:disabled {
  opacity: 0.6;
  cursor: default;
}

.result {
  margin-top: 1.5rem;
  min-height: 3rem;
}

.result-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.result-tiles .tile {
  width: 2.4rem;
  height: 2.4rem;
  font-size: 1.15rem;
}

.verdict {
  font-weight: 700;
  font-size: 1.05rem;
  padding: 0.6rem 0.9rem;
  border-radius: 10px;
  display: inline-block;
}

.verdict.valid {
  background: #1f6b45;
  color: #eafff2;
}

.verdict.invalid {
  background: #7a2020;
  color: #ffecec;
}

.verdict.error {
  background: #6b5c1f;
  color: #fff9e0;
}

.hint {
  opacity: 0.85;
  font-size: 0.85rem;
  margin-top: 0.75rem;
}

.definition {
  margin-top: 0.85rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--tile);
  background: rgba(255, 255, 255, 0.06);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
}

.definition strong {
  letter-spacing: 0.02em;
}

.definition.loading,
.definition.none {
  font-style: italic;
  opacity: 0.7;
  border-left-color: var(--ink-soft);
}

/* A root word pulled from a cross-reference definition ("plural of erbium" -> erbium),
   shown indented just beneath the word that referenced it. */
.definition.root {
  margin-top: 0.35rem;
  margin-left: 1.1rem;
  font-size: 0.86rem;
  border-left-color: var(--ink-soft);
}

.attribution {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  opacity: 0.85;
}

.attribution a {
  color: inherit;
}

.mode-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.mode-btn {
  flex: 1;
  min-width: 140px;
  min-height: 2.75rem;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.55rem 0.8rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.15);
  background: transparent;
  color: var(--tile);
  cursor: pointer;
  opacity: 0.85;
}

.mode-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  opacity: 1;
}

.mode-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.mode-btn.active:disabled {
  opacity: 0.7;
}

.rack {
  display: grid;
  /* auto-fill (not auto-fit) + a real minmax floor (not 0) means tiles shrink
     to fit 7 across on a normal-size narrow phone, but if text is scaled way
     up (our toggle, or an OS/browser text-size boost we can't detect), columns
     stop shrinking below a legible minimum and extra tiles wrap to another row
     instead of clipping or overlapping. auto-fill specifically (rather than
     auto-fit) matters once tiles start getting played off the rack in Best
     Play: auto-fit collapses now-empty tracks and lets the remaining tiles
     grow to fill the freed space; auto-fill keeps the empty tracks around so
     the remaining tiles stay the same size and the rack just gets shorter. */
  grid-template-columns: repeat(auto-fill, minmax(2.3rem, 1fr));
  gap: 0.5rem;
  max-width: 24rem;
  min-height: 2rem;
  margin: 1.5rem auto;
  justify-content: center;
}

.rack .tile {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  font-size: clamp(0.8rem, 6vw, 1.35rem);
}

.tile.blank {
  background: linear-gradient(160deg, #efe6d0, #d9cba0);
  color: var(--ink-soft);
}

.bw-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.bw-actions[hidden] {
  /* [hidden] is normally display:none via the UA stylesheet, but the plain
     .bw-actions rule above has equal specificity and comes from author CSS,
     so it was winning and rendering this row (e.g. Done/Clear in Type mode)
     even while hidden. Need higher specificity to actually hide it. */
  display: none;
}

.bw-actions button {
  flex: 1;
  min-width: 120px;
  min-height: 2.75rem;
  font-size: 1rem;
  font-weight: 700;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
}

.bw-actions button:disabled {
  opacity: 0.6;
  cursor: default;
}

.verdict .badge {
  margin-left: 0.4rem;
  vertical-align: middle;
}

footer.site {
  margin-top: 2.5rem;
  text-align: center;
  font-size: 0.78rem;
  opacity: 0.7;
}

@media (prefers-contrast: more) {
  .tagline, .hint, .back-link, footer.site { opacity: 1; }
  .card.disabled { opacity: 0.8; }
  main.panel { border-color: rgba(255,255,255,0.3); }
}

/* In the larger text modes, letters and point values should take up a bigger
   share of each tile, not just scale up at the same ratio as the tile box.
   The box has to grow along with the font (not stay fixed) or the letter and
   the point-value badge collide/overflow the rounded corners. */
html[data-text-size="large"] .logo .tile { width: 2.85rem; height: 2.85rem; font-size: 1.6rem; }
html[data-text-size="xlarge"] .logo .tile { width: 3.3rem; height: 3.3rem; font-size: 2rem; }

html[data-text-size="large"] .card .letter-tile { width: 3.15rem; height: 3.15rem; font-size: 1.75rem; }
html[data-text-size="xlarge"] .card .letter-tile { width: 3.6rem; height: 3.6rem; font-size: 2.15rem; }

html[data-text-size="large"] .result-tiles .tile { width: 2.75rem; height: 2.75rem; font-size: 1.55rem; }
html[data-text-size="xlarge"] .result-tiles .tile { width: 3.15rem; height: 3.15rem; font-size: 1.9rem; }

html[data-text-size="large"] .rack .tile { font-size: clamp(1.05rem, 8vw, 1.85rem); }
html[data-text-size="xlarge"] .rack .tile { font-size: clamp(1.25rem, 9.5vw, 2.3rem); }

html[data-text-size="large"] .rack { grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr)); }
html[data-text-size="xlarge"] .rack { grid-template-columns: repeat(auto-fit, minmax(3.6rem, 1fr)); }

html[data-text-size="large"] .pts { font-size: 0.58em; }
html[data-text-size="xlarge"] .pts { font-size: 0.62em; }
html[data-text-size="large"] .pts.pts-wide { font-size: 0.42em; }
html[data-text-size="xlarge"] .pts.pts-wide { font-size: 0.45em; }

.board-wrap {
  overflow-x: auto;
  margin: 1rem 0;
  /* A 15x15 board won't fit a narrow phone at a legible size -- horizontal
     scroll here is an accepted, deliberate tradeoff, not a bug to chase away. */
}

.board {
  display: grid;
  /* Fixed-size tracks, not minmax(...,1fr) -- 1fr tracks can't actually grow
     under width:max-content (no free space to distribute), so with variable
     content (2-letter premium labels vs empty cells) columns ended up wildly
     uneven widths instead of a uniform grid. */
  grid-template-columns: repeat(15, 2.4rem);
  grid-template-rows: repeat(15, 2.4rem);
  gap: 2px;
  margin: 0 auto;
  background: var(--board-line);
  padding: 2px;
  border-radius: 8px;
}

.cell {
  all: unset;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--board);
  color: var(--tile);
  cursor: pointer;
  border-radius: 2px;
}

.cell:disabled {
  cursor: default;
}

.premium-label {
  font-size: 0.62rem;
  font-weight: 700;
  opacity: 0.85;
  font-family: system-ui, sans-serif;
}

.cell.dl { background: #2f6fae; }
.cell.tl { background: #1f4f7a; }
.cell.dw { background: #b3472b; }
.cell.tw { background: #7a2020; }
.cell.star { background: #b3472b; }
.cell.star .premium-label { font-size: 1rem; }

.cell .tile {
  width: 100%;
  height: 100%;
  font-size: 1.15rem;
  border-radius: 2px;
}

@media (max-width: 640px) {
  .board {
    grid-template-columns: repeat(15, 1.9rem);
    grid-template-rows: repeat(15, 1.9rem);
  }
  .cell .tile { font-size: 0.9rem; }
  .premium-label { font-size: 0.5rem; }
  .cell.star .premium-label { font-size: 0.8rem; }
}

.cell.selected {
  outline: 3px solid var(--accent-ink);
  outline-offset: -3px;
}

.cell.pending .tile {
  /* var(--accent-ink) is a pale cream, almost the same tone as the tile itself
     -- barely visible. Use the site's accent red-orange instead, which
     actually contrasts against a cream tile. */
  box-shadow: 0 0 0 2px var(--accent) inset;
  opacity: 0.85;
}

/* Marks whichever tiles were placed by the most recent play -- a manual
   submit or Show Best -- distinct from .pending's in-progress look since
   these are already committed to the board. A warm gold barely showed up
   against the tile's own cream background -- needs a color that actually
   contrasts with it. */
.cell.just-played .tile {
  box-shadow: 0 0 0 2px #29b6d8 inset, 0 0 0 2px #29b6d8, 0 0 8px 2px rgba(41, 182, 216, 0.65);
}

button.tile {
  /* Strip native button chrome but leave background alone -- .tile's gradient
     rule (lower specificity) still needs to apply here. */
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

button.tile:disabled {
  /* Rack tiles are "disabled" (non-tappable) any time tapping isn't the current
     input method -- e.g. all of Type mode -- which is most of the time. They
     still need to read clearly then, so no opacity fade here; only a tile
     that's actually been placed this turn (.used) should look muted. */
  cursor: default;
}

button.tile.used {
  opacity: 0.35;
}

.blank-picker {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: rgba(0,0,0,0.18);
  border-radius: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}

.blank-letter-btn {
  min-width: 2.25rem;
  min-height: 2.25rem;
  font-weight: 700;
  border-radius: 6px;
  border: none;
  background: var(--tile);
  color: var(--ink);
  cursor: pointer;
}

html[data-text-size="large"] .board {
  grid-template-columns: repeat(15, 2.8rem);
  grid-template-rows: repeat(15, 2.8rem);
}
html[data-text-size="large"] .cell .tile { font-size: 1.35rem; }
html[data-text-size="xlarge"] .board {
  grid-template-columns: repeat(15, 3.2rem);
  grid-template-rows: repeat(15, 3.2rem);
}
html[data-text-size="xlarge"] .cell .tile { font-size: 1.55rem; }

@media (prefers-contrast: more) {
  .cell.selected { outline-width: 4px; }
  .cell.dl, .cell.tl, .cell.dw, .cell.tw, .cell.star { border: 1px solid rgba(255,255,255,0.5); }
}

/* Quizzes: setup dropdowns + question prompt */
.quiz-setup {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  max-width: 22rem;
}

/* Author display:flex above beats the UA [hidden] rule (equal specificity), so the
   setup form kept showing during the quiz -- same gotcha as .bw-actions[hidden]. */
.quiz-setup[hidden] {
  display: none;
}

.quiz-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-weight: 700;
  color: var(--tile);
}

.quiz-field select {
  font-size: 1.05rem;
  padding: 0.6rem 0.75rem;
  min-height: 2.75rem;
  border-radius: 8px;
  border: none;
  background: var(--tile);
  color: var(--ink);
  font-family: inherit;
  cursor: pointer;
}

.quiz-setup button {
  font-size: 1rem;
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  min-height: 2.75rem;
  border-radius: 8px;
  border: none;
  background: var(--accent);
  color: var(--accent-ink);
  cursor: pointer;
  margin-top: 0.3rem;
}

.quiz-setup button:disabled { opacity: 0.6; cursor: default; }

.quiz-prompt {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--tile);
  margin: 0.5rem 0 1rem;
}

#question-tiles { margin-bottom: 0.4rem; }