:root {
  --cuppa: #6b4226;
  --cuppa-deep: #432819;
  --gold: #d4a84b;
  --gold-deep: #805000;
  --cream: #f6f1e9;
  --paper: #fffdf9;
  --ink: #302923;
  --muted: #746a61;
  --line: #dfd4c5;
  --board-edge: #55483d;
  --block: #55483d;
  --active-run: #fff5d6;
  --selected: #ffd36a;
  --same-code: #d29b2e;
  --starter: #e5e0d8;
  --green: #347a4c;
  --green-soft: #dff0e3;
  --red: #b94337;
  --red-soft: #fde7e3;
  --shadow: 0 12px 32px rgba(75, 50, 30, 0.1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

*, *::before, *::after { box-sizing: border-box; }

html {
  min-width: 0;
  min-height: 100%;
  background: var(--cream);
}

body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  padding: 0 0 calc(24px + var(--safe-bottom));
  overflow-x: hidden;
  background:
    radial-gradient(circle at 8% 5%, rgba(212, 168, 75, 0.13), transparent 27rem),
    linear-gradient(175deg, #fbf8f2 0%, var(--cream) 55%, #eee6dc 100%);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

button { font: inherit; }
button, a { touch-action: manipulation; }
[hidden] { display: none !important; }

.cuppa-header {
  position: sticky;
  top: 0;
  box-shadow: 0 2px 12px rgba(69, 45, 27, 0.08);
}

.page-shell {
  width: min(100%, 1040px);
  margin: 0 auto;
  padding:
    max(14px, var(--safe-top))
    max(clamp(8px, 2.5vw, 24px), var(--safe-right))
    24px
    max(clamp(8px, 2.5vw, 24px), var(--safe-left));
}

.loading-card {
  width: min(100%, 560px);
  min-height: 180px;
  margin: clamp(40px, 12vh, 120px) auto 0;
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  border: 1px solid rgba(107, 66, 38, 0.16);
  border-radius: 18px;
  background: rgba(255, 253, 249, 0.92);
  box-shadow: var(--shadow);
}

.loading-card strong { color: var(--cuppa); font-size: 18px; }
.loading-card p { margin: 5px 0 0; color: var(--muted); line-height: 1.4; }

.spinner {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 4px solid #eadfce;
  border-top-color: var(--cuppa);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.error-mark {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--red-soft);
  color: var(--red);
  font-size: 24px;
  font-weight: 900;
}

@keyframes spin { to { transform: rotate(360deg); } }

.edition-card {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 4px 12px;
}

.edition-copy h1 {
  margin: 2px 0 1px;
  color: var(--cuppa-deep);
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: clamp(27px, 4vw, 38px);
  line-height: 1.05;
}

.edition-copy p { margin: 4px 0 0; color: var(--muted); font-size: 14px; font-weight: 650; }
.eyebrow, .dialog-kicker {
  color: var(--gold-deep);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.date-nav { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.date-button {
  min-height: 44px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: rgba(255, 253, 249, 0.78);
  color: var(--cuppa);
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.date-button:hover:not(:disabled) { border-color: var(--gold); background: #fff9ec; }
.date-button:disabled { opacity: 0.38; cursor: default; }
.today-button { border-color: #cba45a; background: #fff4d9; }

.practice-banner {
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid #e2c885;
  border-radius: 10px;
  background: #fff6dc;
  color: #74531d;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.game-toolbar {
  display: grid;
  grid-template-columns: auto minmax(145px, 1fr) auto;
  align-items: stretch;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(107, 66, 38, 0.16);
  border-radius: 14px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: 0 4px 15px rgba(74, 49, 30, 0.07);
}

.timer-block, .progress-block {
  min-height: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3px 9px;
  border-right: 1px solid var(--line);
}
.timer-heading { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.timer-toggle {
  min-width: 38px;
  min-height: 28px;
  padding: 2px 5px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--cuppa);
  font-size: 9px;
  font-weight: 800;
  cursor: pointer;
}
.timer-toggle:hover { background: #f4eadc; }
.timer-toggle:focus-visible { outline: 3px solid #2b6fbb; outline-offset: 1px; }
.timer-block.timer-hidden .timer { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.timer-block.timer-hidden::after { content: "Timer hidden"; margin-top: 3px; color: var(--muted); font-size: 11px; font-weight: 700; }

.toolbar-label { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.timer { margin-top: 1px; color: var(--cuppa); font-size: 20px; font-weight: 850; font-variant-numeric: tabular-nums; }
.progress-block { gap: 6px; }
.progress-copy { display: flex; justify-content: space-between; gap: 8px; color: var(--cuppa); font-size: 12px; }
.progress-copy strong { font-size: 13px; white-space: nowrap; }
.progress-track { height: 5px; overflow: hidden; border-radius: 99px; background: #ece3d7; }
.progress-track > span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--cuppa), var(--gold)); transition: width 0.2s ease; }

.toolbar-actions { display: grid; grid-template-columns: repeat(4, minmax(64px, auto)); gap: 7px; }
.tool-button, .button, .clear-button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.tool-button { padding: 6px 10px; font-size: 13px; white-space: nowrap; }
.tool-button span { display: inline-grid; width: 18px; height: 18px; place-items: center; color: var(--gold-deep); font-weight: 900; }
.tool-button b, .mobile-action-button b { font: inherit; }
.tool-button:hover:not(:disabled), .button:hover:not(:disabled), .clear-button:hover:not(:disabled) { border-color: var(--gold); background: #fff9ec; }
.tool-button:active:not(:disabled), .button:active:not(:disabled), .clear-button:active:not(:disabled) { transform: scale(0.97); }
.tool-button:disabled, .clear-button:disabled { opacity: 0.4; cursor: default; }
.tool-button.primary, .button.primary { border-color: var(--cuppa); background: var(--cuppa); color: #fff; }
.tool-button.primary span { color: #fff0c7; }
.tool-button.primary:hover:not(:disabled), .button.primary:hover:not(:disabled) { border-color: var(--cuppa-deep); background: var(--cuppa-deep); }
.button.secondary { background: #fff; color: var(--cuppa); }
.button.compact { min-height: 40px; margin-top: 12px; padding: 8px 18px; }
.button.full { width: 100%; margin-top: 16px; padding: 11px 18px; }

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 272px;
  align-items: start;
  gap: clamp(12px, 2vw, 20px);
  margin-top: 12px;
}

.board-panel, .alphabet-panel {
  border: 1px solid rgba(107, 66, 38, 0.16);
  border-radius: 15px;
  background: rgba(255, 253, 249, 0.94);
  box-shadow: var(--shadow);
}

.board-panel { min-width: 0; padding: clamp(7px, 1.6vw, 13px); }
.selection-bar {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 3px 9px;
}
.selection-bar > div { min-width: 0; }
.selection-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.selection-code { display: block; color: var(--cuppa); font-size: 15px; font-weight: 850; }
.selection-detail { display: block; margin-top: 2px; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.word-nav { display: inline-flex; align-items: center; gap: 2px; }
.word-nav-button, .direction-pill, .zoom-button {
  min-height: 44px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--cuppa);
  font-weight: 800;
  cursor: pointer;
}
.word-nav-button {
  min-width: 40px;
  padding: 4px 8px;
  border-radius: 9px;
  font-size: 20px;
  line-height: 1;
}
.direction-pill {
  flex: 0 0 auto;
  min-width: 66px;
  padding: 5px 9px;
  border-radius: 99px;
  background: #f1e6d7;
  font-size: 11px;
}
.zoom-button { padding: 5px 9px; border-radius: 9px; font-size: 11px; white-space: nowrap; }
.word-nav-button:hover:not(:disabled), .direction-pill:hover:not(:disabled), .zoom-button:hover { border-color: var(--gold); background: #fff8e8; }
.word-nav-button:disabled, .direction-pill:disabled { opacity: 0.42; cursor: default; }
.word-nav-button:focus-visible, .direction-pill:focus-visible, .zoom-button:focus-visible { outline: 3px solid #2b6fbb; outline-offset: 1px; }
.mobile-jump-button {
  min-height: 44px;
  display: none;
  padding: 6px 9px;
  border: 1px solid #c9a967;
  border-radius: 9px;
  background: #fff4d9;
  color: var(--cuppa);
  font-size: 11px;
  font-weight: 850;
  cursor: pointer;
}
.mobile-jump-button:disabled { opacity: 0.4; cursor: default; }
.mobile-jump-button:focus-visible { outline: 3px solid #2b6fbb; outline-offset: 1px; }

.board-viewport {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 5px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.board-viewport.zoomed {
  max-height: min(72vh, 640px);
  overflow: auto;
  border: 1px solid rgba(107, 66, 38, 0.24);
}
.codeword-grid {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 1;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  grid-template-rows: repeat(13, minmax(0, 1fr));
  gap: 1px;
  padding: 2px;
  overflow: hidden;
  border: 1px solid var(--board-edge);
  border-radius: 5px;
  background: var(--board-edge);
  box-shadow: 0 4px 15px rgba(52, 38, 28, 0.18);
  touch-action: manipulation;
}
.codeword-grid.zoomed {
  width: 145%;
  max-width: none;
  margin: 0;
  touch-action: pan-x pan-y pinch-zoom;
}

.code-row { display: contents; }

.code-cell, .code-block {
  min-width: 0;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
}
.code-block { background: var(--block); }
.code-cell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  overflow: hidden;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}
.code-cell:hover { background: #fffaf0; }
.cell-code {
  position: absolute;
  top: max(1px, 5%);
  left: max(2px, 7%);
  color: #756a61;
  font-size: clamp(7px, 1.8vw, 10px);
  font-weight: 750;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.cell-letter {
  display: block;
  padding-top: 12%;
  font-size: clamp(11px, 3.9vw, 23px);
  font-weight: 850;
  line-height: 1;
  text-transform: uppercase;
  pointer-events: none;
}
.code-cell.run { background: var(--active-run); }
.code-cell.matching { box-shadow: inset 0 0 0 2px var(--same-code); z-index: 1; }
.code-cell.locked { background: var(--starter); color: var(--cuppa-deep); }
.code-cell.locked.run { background: #e8ddca; }
.code-cell.revealed::after {
  content: "\2726";
  position: absolute;
  right: 2px;
  bottom: 1px;
  color: var(--gold-deep);
  font-size: clamp(6px, 1.2vw, 9px);
  line-height: 1;
}
.code-cell.checked-correct:not(.selected) { background: var(--green-soft); }
.code-cell.wrong:not(.selected) { background: var(--red-soft); color: #8e2e28; animation: cell-shake 0.25s ease; }
.code-cell.wrong { outline: 2px dashed var(--red); outline-offset: -3px; }
.code-cell.wrong::before {
  content: "!";
  position: absolute;
  top: 1px;
  right: 2px;
  z-index: 4;
  color: var(--red);
  font-size: clamp(7px, 1.6vw, 11px);
  font-weight: 950;
  line-height: 1;
}
.code-cell.selected {
  z-index: 3;
  background: var(--selected);
  color: var(--cuppa-deep);
  box-shadow: inset 0 0 0 2px var(--cuppa-deep), 0 0 0 1px #fff;
}
.code-cell:focus-visible { z-index: 4; outline: 3px solid #2b6fbb; outline-offset: -3px; }

@keyframes cell-shake {
  0%, 100% { transform: translateX(0); }
  35% { transform: translateX(-1px); }
  70% { transform: translateX(1px); }
}

.board-caption { margin: 8px 2px 0; color: var(--muted); font-size: 11px; line-height: 1.35; text-align: center; }

.alphabet-panel {
  position: sticky;
  top: 58px;
  padding: 14px;
}
.mobile-tray-toggle { display: none; }
.mobile-tray-content { min-width: 0; }
.alphabet-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alphabet-heading h2 { margin: 2px 0 0; color: var(--cuppa-deep); font-family: Georgia, "Iowan Old Style", serif; font-size: 20px; }
.clear-button { min-height: 44px; padding: 6px 10px; color: var(--cuppa); font-size: 12px; }
.mapping-prompt {
  min-height: 38px;
  margin: 10px 0;
  padding: 8px 10px;
  border-radius: 9px;
  background: #f4ecdf;
  color: var(--cuppa);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
}
.reassignment-panel {
  margin: 9px 0;
  padding: 10px;
  border: 1px solid #deb066;
  border-radius: 10px;
  background: #fff5dc;
  color: var(--cuppa);
}
.reassignment-panel > strong { display: block; font-size: 13px; }
.reassignment-panel > p { margin: 4px 0 9px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.reassignment-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
.reassignment-actions .button { min-width: 0; min-height: 40px; padding: 5px; font-size: 11px; }
.mobile-run-panel, .mobile-quick-actions { display: none; }
.mobile-run-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.mobile-run-heading > div:first-child { display: grid; gap: 2px; }
.mobile-run-heading strong { color: var(--cuppa); font-size: 12px; }
.mobile-word-nav { display: inline-flex; align-items: center; gap: 2px; }
.mobile-word-nav .word-nav-button { min-width: 38px; }
.mobile-run-strip {
  display: flex;
  gap: 5px;
  padding: 2px 1px 6px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.mobile-run-cell {
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 50px;
  scroll-snap-align: center;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #cfc2b2;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.mobile-run-code { position: absolute; top: 3px; left: 4px; color: var(--muted); font-size: 9px; font-weight: 800; line-height: 1; }
.mobile-run-letter { padding-top: 8px; font-size: 22px; font-weight: 900; line-height: 1; }
.mobile-run-cell.locked { background: var(--starter); }
.mobile-run-cell.checked-correct:not(.selected) { background: var(--green-soft); }
.mobile-run-cell.wrong:not(.selected) { border-color: #d67b73; background: var(--red-soft); color: #8e2e28; }
.mobile-run-cell.wrong { border-style: dashed; border-width: 2px; }
.mobile-run-cell.wrong::before { content: "!"; position: absolute; top: 2px; right: 3px; color: var(--red); font-size: 11px; font-weight: 950; }
.mobile-run-cell.selected { border-color: var(--cuppa-deep); background: var(--selected); box-shadow: inset 0 0 0 1px var(--cuppa-deep); }
.mobile-run-cell.revealed::after { content: "\2726"; position: absolute; right: 3px; bottom: 2px; color: var(--gold-deep); font-size: 9px; }
.mobile-run-cell:focus-visible { outline: 3px solid #2b6fbb; outline-offset: 1px; }
.mobile-quick-actions { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 8px 0; }
.mobile-action-button {
  min-width: 0;
  min-height: 44px;
  padding: 5px 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  color: var(--cuppa);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.mobile-action-button span { display: block; height: 15px; color: var(--gold-deep); font-size: 15px; line-height: 1; }
.mobile-action-button.primary { border-color: var(--cuppa); background: var(--cuppa); color: #fff; }
.mobile-action-button.primary span { color: #fff0c7; }
.mobile-action-button:disabled { opacity: 0.4; cursor: default; }
.mobile-action-button:focus-visible { outline: 3px solid #2b6fbb; outline-offset: 1px; }
.mobile-landscape-action { display: none; }
.alphabet-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.letter-key {
  position: relative;
  min-width: 0;
  min-height: 42px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 3px 1px;
  border: 1px solid #d9cdbd;
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.letter-key:hover { border-color: var(--gold); background: #fff8e8; }
.letter-key:active { transform: scale(0.95); }
.letter-key:focus-visible { outline: 3px solid #2b6fbb; outline-offset: 1px; }
.key-letter { font-size: 16px; font-weight: 850; line-height: 1.05; }
.key-code { min-height: 10px; color: var(--muted); font-size: 9px; font-weight: 750; line-height: 1; }
.letter-key.assigned { background: #f2e9dc; color: var(--cuppa); }
.letter-key.locked { border-color: #b7ab9c; background: var(--starter); }
.letter-key.current { border-color: var(--cuppa); background: var(--selected); box-shadow: inset 0 0 0 1px var(--cuppa); }
.letter-key.wrong { border: 2px dashed var(--red); background: var(--red-soft); }
.letter-key.wrong::after { content: "!"; position: absolute; top: 2px; right: 4px; color: var(--red); font-size: 10px; font-weight: 950; }
.letter-key.pending { border-color: var(--gold-deep); box-shadow: 0 0 0 2px rgba(212, 168, 75, 0.32); }

.legend { display: grid; grid-template-columns: 1fr; gap: 5px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.legend span { display: flex; align-items: center; gap: 6px; }
.legend-swatch { width: 15px; height: 15px; flex: 0 0 auto; border: 1px solid #b8aa9b; background: #fff; }
.legend-swatch.starter { background: var(--starter); }
.legend-swatch.same { box-shadow: inset 0 0 0 2px var(--same-code); }
.legend-swatch.run { background: var(--active-run); }
.keyboard-tip { margin: 11px 0 0; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 10px; line-height: 1.4; }

.status-line {
  min-height: 38px;
  margin: 10px 0;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 9px;
  background: #f7f2ea;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  text-align: left;
}
.status-line.positive { border-color: #b8d9c1; background: var(--green-soft); color: var(--green); font-weight: 750; }
.status-line.warning { border-color: #e3aaa4; background: var(--red-soft); color: var(--red); font-weight: 750; }

.cuppa-dialog {
  width: min(calc(100% - 28px), 490px);
  max-height: min(88vh, 720px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  box-shadow: 0 24px 80px rgba(29, 20, 14, 0.42);
}
.cuppa-dialog::backdrop { background: rgba(42, 32, 24, 0.67); backdrop-filter: blur(2px); }
.dialog-card {
  position: relative;
  max-height: min(88vh, 720px);
  padding: 27px;
  overflow-y: auto;
  border: 2px solid rgba(212, 168, 75, 0.44);
  border-radius: 18px;
  background: linear-gradient(145deg, #fffefa, #faf1e5);
}
.dialog-close {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  font-size: 29px;
  line-height: 1;
  cursor: pointer;
}
.dialog-close:hover { background: #eee2d2; color: var(--cuppa); }
.dialog-card h2 { margin: 5px 44px 9px 0; color: var(--cuppa-deep); font-family: Georgia, "Iowan Old Style", serif; font-size: 28px; line-height: 1.1; }
.dialog-card > p { color: var(--muted); line-height: 1.5; }
.help-steps { margin: 18px 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.help-steps li { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; color: var(--muted); font-size: 14px; line-height: 1.4; }
.help-steps li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--cuppa); color: #fff; font-weight: 850; }
.help-steps strong { color: var(--ink); }
.starter-note { display: flex; align-items: center; gap: 12px; padding: 11px; border-radius: 11px; background: #eae3d9; }
.starter-note p { margin: 0; color: #655b52; font-size: 13px; line-height: 1.4; }
.mini-cell { position: relative; width: 42px; height: 42px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #8c8073; background: var(--starter); color: var(--cuppa); font-size: 22px; font-weight: 850; }
.mini-cell small { position: absolute; top: 2px; left: 3px; color: var(--muted); font-size: 8px; }
.compact-dialog { padding: 25px; }
.compact-dialog p { margin: 8px 0 20px; }
.dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }

.result-card { text-align: center; }
.result-card h2 { margin: 4px 36px 6px; }
.result-cup { width: 58px; height: 58px; margin: -2px auto 11px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient(145deg, #ffe6a5, #d4a84b); box-shadow: 0 7px 20px rgba(148, 97, 21, 0.22); font-size: 29px; }
.result-card > p { margin: 7px 0; }
.result-stats { margin: 18px 0 10px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.result-stats > div { padding: 10px 4px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255, 255, 255, 0.7); }
.result-stats span { display: block; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.result-stats strong { display: block; margin-top: 3px; color: var(--cuppa); font-size: 19px; font-variant-numeric: tabular-nums; }
.coin-reward { display: inline-block; padding: 7px 13px; border-radius: 99px; background: #fff0c4; color: #76520e !important; font-size: 13px; font-weight: 850; }
.result-calendar { margin-top: 13px; padding: 11px; border-radius: 11px; background: rgba(255, 255, 255, 0.68); }
.result-calendar h3 { margin: 0 0 8px; color: var(--cuppa); font-size: 14px; }
.calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-day {
  min-width: 0;
  min-height: 54px;
  display: grid;
  place-items: center;
  gap: 0;
  padding: 3px 1px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font: inherit;
}
button.calendar-day { cursor: pointer; }
.calendar-day small { font-size: 9px; text-transform: uppercase; }
.calendar-day strong { color: var(--ink); font-size: 14px; }
.calendar-day > span { color: #a89c8e; font-size: 11px; }
.calendar-day.done { border-color: #8cbd9a; background: var(--green-soft); color: var(--green); }
.calendar-day.done > span { color: var(--green); font-weight: 900; }
.calendar-day.current { box-shadow: inset 0 0 0 2px var(--gold-deep); }
.calendar-day.unavailable { opacity: 0.38; }
.calendar-day:focus-visible { outline: 3px solid #2b6fbb; outline-offset: 1px; }
.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 11px; }
.result-actions .button { min-height: 46px; padding: 8px; }
.share-status { min-height: 18px; margin: 8px 0 0 !important; color: var(--green) !important; font-size: 12px; font-weight: 750; }
.result-ranking { margin-top: 14px; padding: 13px; border-radius: 11px; background: rgba(255, 255, 255, 0.68); text-align: left; }
.result-ranking h3 { margin: 0 0 4px; color: var(--cuppa); font-size: 15px; text-align: center; }
.result-ranking p { margin: 0 0 8px; color: var(--muted); font-size: 13px; text-align: center; }
.result-ranking ol { margin: 0; padding: 0; display: grid; gap: 4px; list-style: none; }
.result-ranking li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 7px; padding: 6px 7px; border-radius: 7px; background: #f4eee6; color: var(--ink); font-size: 12px; }
.result-ranking li.me { background: #fff0c8; font-weight: 800; }
.result-ranking li span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

body.cuppa-dark {
  --paper: #211c2e;
  --ink: #f0e8df;
  --muted: #b8ab9e;
  --line: rgba(232, 213, 183, 0.24);
  --board-edge: #080914;
  --block: #080914;
  --active-run: #34301d;
  --selected: #b9822d;
  --same-code: #e2b65a;
  --starter: #37333c;
  --green-soft: #183b27;
  --red-soft: #4b2426;
  background: radial-gradient(circle at 8% 5%, rgba(196, 149, 106, 0.12), transparent 28rem), #1a1a2e !important;
}
body.cuppa-dark .edition-copy h1,
body.cuppa-dark .alphabet-heading h2,
body.cuppa-dark .dialog-card h2 { color: #f0e8df; }
body.cuppa-dark .eyebrow,
body.cuppa-dark .dialog-kicker { color: #f0c76e; }
body.cuppa-dark .loading-card,
body.cuppa-dark .game-toolbar,
body.cuppa-dark .board-panel,
body.cuppa-dark .alphabet-panel { background: rgba(22, 33, 62, 0.96); border-color: rgba(232, 213, 183, 0.16); color: #f0e8df; }
body.cuppa-dark .timer-block,
body.cuppa-dark .progress-block { border-color: rgba(232, 213, 183, 0.2); }
body.cuppa-dark .progress-track { background: rgba(232, 213, 183, 0.17); }
body.cuppa-dark .date-button,
body.cuppa-dark .tool-button,
body.cuppa-dark .clear-button,
body.cuppa-dark .word-nav-button,
body.cuppa-dark .direction-pill,
body.cuppa-dark .zoom-button,
body.cuppa-dark .mobile-jump-button,
body.cuppa-dark .mobile-action-button,
body.cuppa-dark .mobile-run-cell,
body.cuppa-dark .letter-key,
body.cuppa-dark .button.secondary { background: #211c28; border-color: rgba(232, 213, 183, 0.27); color: #eee5dc; }
body.cuppa-dark .tool-button.primary,
body.cuppa-dark .mobile-action-button.primary,
body.cuppa-dark .button.primary { background: #a36f48; border-color: #c4956a; color: #fff; }
body.cuppa-dark .practice-banner { background: #39301d; border-color: #7f6936; color: #f2d894; }
body.cuppa-dark .code-cell { background: #211c28; color: #eee5dc; }
body.cuppa-dark .code-cell:hover { background: #2c2530; }
body.cuppa-dark .code-cell.run { background: var(--active-run); }
body.cuppa-dark .code-cell.locked { background: var(--starter); color: #f0e8df; }
body.cuppa-dark .code-cell.locked.run { background: #494333; }
body.cuppa-dark .code-cell.selected { background: var(--selected); color: #fff; }
body.cuppa-dark .code-cell.wrong:not(.selected) { color: #ffb8b1; }
body.cuppa-dark .cell-code { color: #b9ada2; }
body.cuppa-dark .mapping-prompt { background: #2a2430; color: #dcb78f; }
body.cuppa-dark .timer-toggle:hover { background: rgba(232, 213, 183, 0.1); }
body.cuppa-dark .board-viewport.zoomed { border-color: rgba(232, 213, 183, 0.25); }
body.cuppa-dark .reassignment-panel { border-color: #856f3e; background: #39301d; color: #f2d894; }
body.cuppa-dark .mobile-run-heading strong { color: #f0c76e; }
body.cuppa-dark .mobile-run-cell.locked { background: var(--starter); }
body.cuppa-dark .mobile-run-cell.selected { background: var(--selected); color: #fff; }
body.cuppa-dark .mobile-run-cell.wrong:not(.selected) { color: #ffb8b1; }
body.cuppa-dark .letter-key.assigned { background: #302937; color: #e2c5a6; }
body.cuppa-dark .letter-key.locked { background: #403a43; }
body.cuppa-dark .letter-key.current { background: #9d7132; color: #fff; }
body.cuppa-dark .legend-swatch { border-color: #81766b; background-color: #211c28; }
body.cuppa-dark .legend-swatch.starter { background: var(--starter); }
body.cuppa-dark .legend-swatch.run { background: var(--active-run); }
body.cuppa-dark .dialog-card { background: linear-gradient(145deg, #211c2e, #171b30) !important; color: #f0e8df; }
body.cuppa-dark .starter-note,
body.cuppa-dark .result-ranking,
body.cuppa-dark .result-calendar,
body.cuppa-dark .result-stats > div { background: rgba(232, 213, 183, 0.08); }
body.cuppa-dark .starter-note p { color: #c7bbae; }
body.cuppa-dark .mini-cell { background: var(--starter); }
body.cuppa-dark .result-ranking li { background: rgba(232, 213, 183, 0.08); color: #f0e8df; }
body.cuppa-dark .result-ranking li.me { background: #57472d; }
body.cuppa-dark .calendar-day { border-color: rgba(232, 213, 183, 0.24); background: #211c28; color: #b8ab9e; }
body.cuppa-dark .calendar-day strong { color: #f0e8df; }
body.cuppa-dark .calendar-day.done { background: var(--green-soft); }
body.cuppa-dark .status-line.positive { color: #8fdda8; }
body.cuppa-dark .status-line.warning { color: #ffaaa1; }
body.cuppa-dark .status-line { background: #26212a; }
body.cuppa-dark .status-line.positive { border-color: #47775a; background: #20352a; }
body.cuppa-dark .status-line.warning { border-color: #8b514d; background: #3a2729; }
body.cuppa-dark .mobile-tray-toggle { border-color: rgba(232, 213, 183, 0.2); background: #2a2430; color: #f0c76e; }

@media (max-width: 820px) {
  .game-toolbar { grid-template-columns: auto 1fr; }
  .progress-block { border-right: 0; }
  .toolbar-actions { grid-column: 1 / -1; }
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .board-panel, .alphabet-panel { scroll-margin-top: calc(58px + var(--safe-top)); }
  .alphabet-panel { position: static; }
  .alphabet-panel.tray-pinned { position: sticky; top: auto; bottom: max(0px, var(--safe-bottom)); z-index: 12; }
  .alphabet-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); }
  .letter-key { min-height: 44px; }
  .legend { grid-template-columns: repeat(3, 1fr); }
  .mobile-jump-button { display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
  .mobile-run-panel { display: block; }
  .mobile-quick-actions { display: grid; }
}

@media (max-width: 520px) {
  .page-shell {
    padding-top: max(7px, var(--safe-top));
    padding-right: max(6px, var(--safe-right));
    padding-left: max(6px, var(--safe-left));
  }
  .edition-card { align-items: center; padding: 2px 2px 9px; }
  .edition-copy h1, .edition-copy > .eyebrow {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .edition-copy p { margin: 0; font-size: 12px; }
  .date-nav { gap: 4px; }
  .date-button { min-height: 44px; padding: 6px 8px; font-size: 11px; }
  .game-toolbar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; padding: 6px; }
  .timer-block, .progress-block { min-height: 41px; padding: 2px 7px; }
  .timer { font-size: 18px; }
  .toolbar-actions { grid-column: auto; grid-template-columns: repeat(2, 44px); gap: 4px; }
  #checkButton, #hintButton { display: none; }
  #resetButton, #helpButton { width: 44px; min-width: 44px; padding: 5px; font-size: 0; }
  #resetButton span, #helpButton span { width: 100%; height: auto; font-size: 17px; }
  .game-layout { margin-top: 9px; gap: 9px; }
  .board-panel { padding: 4px; border-radius: 11px; }
  .selection-bar { min-height: 48px; padding: 1px 2px 5px; gap: 5px; }
  .selection-actions { gap: 3px; }
  .selection-actions .word-nav { gap: 0; }
  .selection-actions .word-nav-button { display: none; }
  .selection-code { font-size: 13px; }
  .selection-detail { max-width: 34vw; font-size: 10px; }
  .direction-pill { min-width: 60px; padding: 4px 6px; font-size: 9px; }
  .zoom-button { min-width: 48px; padding: 4px 6px; font-size: 9px; }
  .board-viewport.zoomed { max-height: min(68dvh, 520px); }
  .codeword-grid.zoomed { width: 150%; }
  .codeword-grid { gap: 1px; padding: 1px; border-width: 1px; }
  .alphabet-panel {
    padding: 0;
    overflow: hidden;
    border-radius: 15px 15px 0 0;
    box-shadow: 0 -10px 30px rgba(62, 41, 25, 0.18);
  }
  .mobile-tray-toggle {
    width: 100%;
    min-height: 44px;
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    padding: 4px 8px;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: #f8f1e7;
    color: var(--cuppa);
    font-size: 11px;
    font-weight: 850;
    cursor: pointer;
  }
  .mobile-tray-toggle:focus-visible { outline: 3px solid #2b6fbb; outline-offset: -3px; }
  .tray-grip { width: 30px; height: 4px; justify-self: start; border-radius: 99px; background: #b6a795; }
  .tray-chevron { justify-self: end; font-size: 14px; transition: transform 0.16s ease; }
  .tray-collapsed .tray-chevron { transform: rotate(180deg); }
  .tray-collapsed .mobile-tray-content { display: none; }
  .mobile-tray-content { position: relative; padding: 7px 9px calc(9px + var(--safe-bottom)); }
  .alphabet-heading { position: absolute; top: 7px; right: 9px; z-index: 2; }
  .alphabet-heading > div { display: none; }
  .clear-button { min-height: 34px; padding: 3px 8px; }
  .alphabet-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
  .letter-key { min-height: 44px; }
  .mapping-prompt { min-height: 34px; margin: 0 0 5px; padding: 7px 68px 6px 8px; }
  .mobile-run-heading { min-height: 44px; margin-bottom: 3px; }
  .mobile-run-heading .eyebrow { font-size: 9px; }
  .mobile-run-strip { gap: 4px; padding-bottom: 3px; }
  .mobile-run-cell { width: 42px; min-width: 42px; height: 44px; }
  .mobile-run-letter { font-size: 19px; }
  .mobile-word-nav .word-nav-button { min-width: 38px; min-height: 40px; }
  .mobile-word-nav .direction-pill { min-height: 40px; }
  .mobile-quick-actions { margin: 5px 0; }
  .legend, .keyboard-tip, .board-caption { display: none; }
  .status-line { min-height: 32px; margin: 5px 0; padding: 6px 8px; font-size: 10px; }
  .reassignment-panel { margin: 5px 0; padding: 8px; }
  .result-stats { grid-template-columns: repeat(2, 1fr); }
  .dialog-card { padding: 21px 18px; }
}

@media (min-width: 370px) and (max-width: 520px) {
  .alphabet-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
  .page-shell { padding-right: max(4px, var(--safe-right)); padding-left: max(4px, var(--safe-left)); }
  .edition-card { align-items: stretch; flex-direction: column; gap: 4px; }
  .date-nav { width: 100%; justify-content: stretch; }
  .date-button { min-width: 0; flex: 1 1 0; padding-inline: 6px; }
  .today-button { position: static; margin: 0; }
  .timer-block, .progress-block { padding-inline: 5px; }
  .selection-detail { max-width: 34vw; }
  .selection-detail { display: none; }
  .zoom-button { width: 44px; min-width: 44px; font-size: 0; }
  .zoom-button span { font-size: 15px; }
  .mapping-prompt { font-size: 10px; }
  .cell-code { top: 1px; left: 1px; font-size: 7px; }
  .cell-letter { position: absolute; right: 0; bottom: 1px; left: 0; padding: 0; font-size: 12px; text-align: center; }
  .mobile-action-button { font-size: 10px; }
  .alphabet-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

@media (max-height: 500px) and (min-width: 560px) {
  body { padding-bottom: var(--safe-bottom); }
  .page-shell {
    width: 100%;
    max-width: none;
    padding:
      max(3px, var(--safe-top))
      max(6px, var(--safe-right))
      3px
      max(6px, var(--safe-left));
  }
  .edition-card, .practice-banner, .game-toolbar, .board-caption, .legend, .keyboard-tip { display: none; }
  .game-layout {
    grid-template-columns: min(46vw, calc(100dvh - 88px)) minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    margin-top: 0;
  }
  .board-panel { padding: 4px; border-radius: 10px; }
  .selection-bar { min-height: 36px; padding: 0 2px 4px; }
  .selection-code { font-size: 12px; }
  .selection-detail, .mobile-jump-button { display: none; }
  .direction-pill { padding: 4px 6px; font-size: 9px; }
  .codeword-grid { gap: 1px; padding: 1px; }
  .cell-code { top: 1px; left: 1px; font-size: 7px; }
  .cell-letter { position: absolute; right: 0; bottom: 1px; left: 0; padding: 0; font-size: 12px; text-align: center; }
  .code-cell.revealed::after { right: 1px; bottom: 1px; font-size: 6px; }
  .alphabet-panel {
    position: static;
    max-height: calc(100dvh - 58px);
    padding: 6px;
    overflow-y: auto;
    border-radius: 10px;
  }
  .alphabet-heading .eyebrow, .mapping-prompt { display: none; }
  .alphabet-heading h2 { margin: 0; font-size: 16px; }
  .mobile-run-panel { display: block; }
  .mobile-run-heading { min-height: 42px; margin: 2px 0; }
  .mobile-run-heading > div:first-child .eyebrow { display: none; }
  .mobile-run-strip { display: none; }
  .mobile-quick-actions { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 4px 0; }
  .mobile-action-button { min-height: 44px; }
  .mobile-landscape-action { display: block; }
  #mobileBoardButton { display: none; }
  .status-line {
    position: static;
    width: auto;
    height: auto;
    min-height: 24px;
    display: block;
    margin: 3px 1px 5px;
    padding: 4px 6px;
    overflow: hidden;
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .alphabet-grid { grid-template-columns: repeat(auto-fit, minmax(44px, 1fr)); gap: 3px; }
  .letter-key { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}