:root {
  --l1: #f7f1e6; --l1d: #efe4d2;
  --l2: #d5e0e8; --l2d: #c5d3de;
  --l3: #e7d7a8; --l3d: #dcc98a;
  --empty: #e7dfd2;
  --good: #2f6f4e;
  --ink: #2a241c;
  --muted: #7a7064;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: #f4efe6; color: var(--ink); }
body { font: 17px/1.4 "Iowan Old Style", Palatino, Georgia, serif; }
main { max-width: 640px; margin: 0 auto; padding: 28px 20px 40px; display: flex; flex-direction: column; gap: 14px; }
.brand { margin: 0; letter-spacing: .14em; text-transform: uppercase; font: 12px/1 system-ui, sans-serif; color: var(--muted); }
.scoreline { margin: 0; font-variant-numeric: tabular-nums; font-size: 28px; }
.today h1 { margin: 0; font-weight: 500; font-size: 40px; letter-spacing: .08em; }
.kicker, .found { margin: 0; font: 12px/1 system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
#def { margin: 4px 0 0; color: #4e463c; }
.found { color: var(--good); }
.queues { display: flex; flex-direction: column; gap: 6px; min-height: 52px; }
.queues div { display: flex; gap: 4px; }
.queues i { font-style: normal; width: 22px; text-align: center; font: 15px/22px system-ui, sans-serif; border-radius: 4px; }
.queues .m { background: var(--l2); }
.queues .d { background: var(--l3); }
.line { min-height: 1.4em; margin: 0; color: var(--muted); font-size: 16px; }
.board { background: #ebe3d6; }
.bgcell::before { background: var(--empty); }
.tile.l1 .face { background: var(--l1); color: var(--ink); }
.tile.l2 .face { background: var(--l2); color: var(--ink); }
.tile.l3 .face { background: var(--l3); color: var(--ink); }
.tile.hint .face { box-shadow: inset 0 0 0 2px #8a7355; }
.tile .face, .tile.hint .face { animation: none; }
.trail .ribbon, .trail .edge { stroke: #2f6f4e; }
footer { display: flex; gap: 10px; }
button {
  font: 15px/1 system-ui, sans-serif; background: transparent; color: var(--ink);
  border: 1px solid #cfc4b4; border-radius: 999px; padding: 12px 18px; cursor: pointer;
}
button:disabled { opacity: .4; }
.end {
  position: fixed; inset: 0; background: #f4efe6; display: flex; flex-direction: column;
  justify-content: center; gap: 8px; padding: 32px; max-width: 640px; margin: 0 auto;
}
.end[hidden] { display: none; }
.end h2 { font-weight: 500; margin: 0; }