/* Amazing Table is styled as one printed poster: cream paper, thick grey ink lines,
   a few pastel fills and condensed numerals. The look is the same in light and dark
   system themes on purpose, like a physical board game. */
:root {
  --page: #efe5c8;
  --paper: #fbf5df;
  --pink: #f6bcb5;
  --mint: #bfe2d3;
  --apricot: #f5c68f;
  --ink: #4b5058;
  --ink-soft: #7c7f84;
  --ink-red: #c9303a;
  --timer: #ec5f57;
  --good: #9fdcb4;
  --bad: #f28b8b;
  --line: 3px;
  --radius: 14px;
  --display: "Oswald", "Arial Narrow", "Roboto Condensed", sans-serif;
  --text: "PT Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

body {
  background: var(--page);
  color: var(--ink);
  font: 16px/1.45 var(--text);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

#app {
  max-width: 600px;
  margin: 0 auto;
  min-height: 100%;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  transition: max-width .2s;
}
body.wide #app { max-width: 1500px; }
body.in-game #app { padding-bottom: max(8px, env(safe-area-inset-bottom)); }

.screen { display: none; flex-direction: column; gap: 12px; animation: fade .2s ease; }
.screen.active { display: flex; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h1, h2, h3 { margin: 0; line-height: 1.1; font-family: var(--display); font-weight: 600; text-wrap: balance; }

/* ---------- Icons: ink strokes with rounded ends, sized by the text around them ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon {
  width: 1.1em; height: 1.1em; flex: none; vertical-align: -.16em;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  --fill: var(--paper);
}

/* ---------- Mosaic: ink shows through the gaps between tiles ---------- */
.mosaic {
  display: flex; flex-direction: column; gap: var(--line);
  background: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius);
  overflow: hidden;
}
.col { display: flex; flex-direction: column; gap: var(--line); background: var(--ink); min-width: 0; }
.tiles, .choices { display: flex; gap: var(--line); background: var(--ink); }
.choices { flex-wrap: wrap; }
.tile {
  background: var(--paper); color: var(--ink);
  padding: 12px 14px; min-width: 0;
}
.tile.f1, .chip.f1 { background: var(--pink); }
.tile.f2, .chip.f2 { background: var(--mint); }
.tile.f3, .chip.f3 { background: var(--apricot); }

button.tile, .chip {
  appearance: none; border: 0; border-radius: 0; margin: 0; cursor: pointer;
  font: 500 1rem/1.15 var(--display); text-transform: uppercase; letter-spacing: .04em;
  transition: filter .12s;
}
button.tile:hover, .chip:hover { filter: brightness(.97); }
button.tile:active, .chip:active { filter: brightness(.9); }
button.tile:focus-visible, .chip:focus-visible, .timer:focus-visible, .paused:focus-visible {
  outline: 3px solid var(--ink-red); outline-offset: -6px;
}
.tiles > .btn { flex: 1; padding: 14px 6px; font-size: .95rem; }
.tiles > .btn .icon { display: block; width: 1.7em; height: 1.7em; margin: 0 auto 6px; }
.quit .icon, .back .icon { width: 1.5em; height: 1.5em; vertical-align: middle; }
.play .icon { width: .8em; height: .8em; vertical-align: -.02em; }

/* Thin label strips, like the "18" band at the top of the board */
.strip {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px;
  padding: 6px 14px; font-size: .88rem; color: var(--ink-soft);
}
.strip b {
  font: 600 .95rem/1.2 var(--display); color: var(--ink); text-transform: uppercase; letter-spacing: .08em;
}
.strip b + span:empty { display: none; }
#best-line b { color: var(--ink); font: 600 1rem var(--display); letter-spacing: 0; text-transform: none; }

/* ---------- Menu ---------- */
.home { align-items: center; color: var(--ink); text-decoration: none; padding-block: 8px; }
.home:hover { filter: brightness(.97); }
.home:focus-visible { outline: 3px solid var(--ink-red); outline-offset: -6px; }
.brand { min-height: 120px; }
.logo { flex: 0 0 120px; display: grid; place-items: center; padding: 10px; }
.logo svg { width: 96px; height: 96px; }
.logo-ring { fill: var(--paper); stroke: var(--ink); stroke-width: 4; }
.logo-line { stroke: var(--ink); stroke-width: 4; }
.logo-num { font: 600 50px var(--display); fill: var(--ink); text-anchor: middle; }
.logo-num.red { fill: var(--ink-red); }
.title-tile { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 12px 18px; }
.title-tile h1 {
  font-size: clamp(2.1rem, 9vw, 3.3rem); font-weight: 700; text-transform: uppercase;
  letter-spacing: .01em; line-height: .95;
}
.tagline {
  margin: 8px 0 0; font: 500 .9rem var(--display); letter-spacing: .35em; text-transform: uppercase; color: var(--ink-red);
}

.chip {
  flex: 1 1 var(--basis, 40%);
  background: var(--paper); color: var(--ink);
  padding: 12px 8px; text-align: center; font-weight: 500;
}
.chip[aria-checked="true"] { background: var(--mint); font-weight: 700; }
.chip .ico { display: block; font: 600 1.45rem/1.1 var(--display); letter-spacing: .06em; margin-bottom: 3px; }
.chip .ico .r { color: var(--ink-red); }
#layout-list .chip { --basis: 40%; }
.modes .chip { --basis: 40%; }
.levels .chip { --basis: 20%; }
@media (min-width: 540px) {
  .modes .chip { --basis: 20%; }
}

.play {
  padding: 20px; font-size: 1.7rem !important; font-weight: 700 !important; letter-spacing: .12em !important;
  display: flex; align-items: center; justify-content: center; gap: 14px;
}

/* ---------- HUD ---------- */
.hud { align-items: stretch; }
.hud-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 8px; }
.hud-label {
  display: block; font: 500 .72rem/1.2 var(--display); color: var(--ink-soft);
  text-transform: uppercase; letter-spacing: .1em;
}
.hud-value, .hud-target {
  display: block; font: 600 1.6rem/1.1 var(--display); font-variant-numeric: tabular-nums;
}
.hud-target.red { color: var(--ink-red); }
.hud-target.hidden { visibility: hidden; }
.target-tile { background: var(--apricot); flex: 1.2; }
.hud > .quit { flex: 0 0 56px; font-size: 1.3rem !important; padding: 0 !important; }
.timer-tile { flex: 1.8; padding: 8px 10px; }
.timer {
  appearance: none; border: var(--line) solid var(--ink); cursor: pointer; width: 100%;
  display: flex; align-items: center; gap: 6px; padding: 6px 10px;
  background: var(--timer); color: #fff; border-radius: 999px;
  font: 600 1.45rem/1 var(--display); font-variant-numeric: tabular-nums;
}
.timer-icon { width: 1.1rem; height: 1.1rem; stroke: none; fill: currentColor; }
.timer-time { flex: 1; text-align: center; }
/* Minute challenge: a wrong tap costs two seconds, the last ten seconds pulse. */
.timer.penalty { animation: penalty .45s ease; }
.timer.hurry { animation: hurry 1s ease-in-out infinite; }
.timer.hurry.penalty { animation: penalty .45s ease; }
@keyframes penalty { 20% { transform: translateX(-5px); background: var(--ink-red); } 60% { transform: translateX(5px); } }
@keyframes hurry { 50% { transform: scale(1.06); background: var(--ink-red); } }
.board-wrap.refill .chaos, .board-wrap.refill .board { animation: refill .35s ease; }
@keyframes refill { from { opacity: .2; transform: scale(.98); } }

.progress { padding: 0; height: 10px; }
.progress-bar { height: 100%; width: 0; background: var(--mint); transition: width .15s ease; }

/* ---------- Board ---------- */
.board-wrap {
  --ar: 1;
  --chrome: 150px; /* HUD, hint and paddings: the rest of the height goes to the board */
  --side: 0px; /* width taken by the HUD column on landscape phones */
  position: relative;
  aspect-ratio: var(--ar);
  width: min(100%, calc((100vh - var(--chrome)) * var(--ar)));
  width: min(100%, calc((100dvh - var(--chrome)) * var(--ar)));
  max-width: 100%;
  margin-inline: auto;
}

/* Classic grid drawn with the same ink lines */
.board {
  --n: 5;
  display: grid; width: 100%; height: 100%;
  grid-template-columns: repeat(var(--n), 1fr);
  grid-template-rows: repeat(var(--n), 1fr);
  gap: var(--line); background: var(--ink);
  border: var(--line) solid var(--ink); border-radius: var(--radius); overflow: hidden;
  user-select: none; touch-action: manipulation;
}
.cell {
  appearance: none; border: 0; border-radius: 0; padding: 0; cursor: pointer;
  display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  font: 600 calc(min(88vw, 540px) / var(--n) * .5) / 1 var(--display);
  font-variant-numeric: tabular-nums;
}
.cell.f1 { background: var(--pink); }
.cell.f2 { background: var(--mint); }
.cell.f3 { background: var(--apricot); }
.cell.red { color: var(--ink-red); }
.cell.found { color: color-mix(in srgb, var(--ink) 20%, transparent); }
.cell.red.found { color: color-mix(in srgb, var(--ink-red) 20%, transparent); }
.cell:focus-visible { outline: 3px solid var(--ink-red); outline-offset: -5px; }
.cell.hit { animation: cell-hit .3s ease; }
.cell.miss { animation: cell-miss .35s ease; }
@keyframes cell-hit { 40% { background: var(--good); } }
@keyframes cell-miss { 30% { background: var(--bad); } }

.board[hidden], .chaos[hidden] { display: none; }
.board-wrap.locked .board,
.board-wrap.locked .chaos { pointer-events: none; filter: blur(8px); }

/* Chaotic board */
.chaos {
  display: block; width: 100%; height: 100%;
  background: var(--ink); border: var(--line) solid var(--ink); border-radius: var(--radius);
  user-select: none; touch-action: manipulation; -webkit-user-select: none;
}
.zone { cursor: pointer; outline: none; }
.zone path { stroke: var(--ink); stroke-width: 3.5; stroke-linejoin: round; }
.zone.f0 path { fill: var(--paper); }
.zone.f1 path { fill: var(--pink); }
.zone.f2 path { fill: var(--mint); }
.zone.f3 path { fill: var(--apricot); }
.zone .label { pointer-events: none; }
.zone text { fill: var(--ink); font: 600 100px var(--display); pointer-events: none; }
.zone .label rect { fill: var(--ink); }
.zone.red text, .zone.red .label rect { fill: var(--ink-red); }
.zone.found .label { opacity: .2; }
.zone:focus-visible path { stroke: var(--ink-red); stroke-width: 7; }
.zone.hit path { animation: zone-hit .3s ease; }
.zone.miss path { animation: zone-miss .35s ease; }
@keyframes zone-hit { 40% { fill: var(--good); } }
@keyframes zone-miss { 30% { fill: var(--bad); } }

.paused {
  position: absolute; inset: 0; z-index: 2; cursor: pointer;
  border: var(--line) solid var(--ink); border-radius: var(--radius);
  display: grid; place-content: center; gap: 8px; text-align: center;
  background: var(--paper); color: var(--ink);
}
.paused[hidden] { display: none; }
.paused b {
  font: 700 3rem/1 var(--display); text-transform: uppercase; letter-spacing: .08em;
  background: var(--timer); color: #fff; padding: 10px 34px; border-radius: 999px; border: var(--line) solid var(--ink);
}
.paused small { font: 1rem var(--text); color: var(--ink-soft); }

.focus-dot {
  z-index: 1; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px;
  border-radius: 50%; background: var(--timer); border: 3px solid var(--ink);
  pointer-events: none; display: none;
}
.focus-dot.on { display: block; }

.countdown {
  z-index: 1; position: absolute; inset: 0; display: none; place-items: center; pointer-events: none;
}
.countdown.on { display: grid; }
.countdown span {
  display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%;
  background: var(--pink); border: var(--line) solid var(--ink);
  font: 700 5.5rem/1 var(--display); color: var(--ink);
  animation: pop .7s ease both;
}
@keyframes pop { from { transform: scale(1.6); opacity: 0; } 30% { transform: scale(1); opacity: 1; } }

.game-hint {
  margin: 0; text-align: center; color: var(--ink-soft);
  font: 500 .85rem var(--display); text-transform: uppercase; letter-spacing: .08em;
}

/* ---------- Result ---------- */
.badge { display: none; justify-content: center; }
.badge.on { display: flex; }
.badge b { color: var(--ink-red); letter-spacing: .15em; }
.result-time-tile { flex: 1.6; display: flex; flex-direction: column; justify-content: center; padding: 16px 18px; }
.result-time {
  margin: 0; font: 700 clamp(2.6rem, 13vw, 4.4rem)/1 var(--display); font-variant-numeric: tabular-nums;
}
.result-time small { font-size: .38em; font-weight: 500; letter-spacing: .02em; }
.stars-tile { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.stars { display: flex; justify-content: center; gap: 1px; }
.star {
  width: clamp(20px, 6vw, 30px); height: clamp(20px, 6vw, 30px);
  stroke: var(--ink); stroke-width: 1.8; stroke-linejoin: round; --fill: var(--paper);
}
.star.on { --fill: var(--apricot); }
.result-sub { margin: 4px 0 0; font: 500 .9rem/1.2 var(--display); text-transform: uppercase; letter-spacing: .04em; }
.stat { flex: 1; text-align: center; padding: 10px 4px; }
.stat b { display: block; font: 600 1.35rem var(--display); font-variant-numeric: tabular-nums; }

/* ---------- Sub-screens ---------- */
.topbar .back { flex: 0 0 56px; font-size: 1.4rem !important; padding: 0 !important; }
.title-cell { flex: 1; font-size: 1.6rem; text-transform: uppercase; letter-spacing: .04em; padding: 12px 16px; }

.totals .tile { flex: 1; text-align: center; padding: 12px 4px; }
.totals .tile:nth-child(2) { background: var(--mint); }
.totals .tile:nth-child(3) { background: var(--apricot); }
.totals b { display: block; font: 700 1.8rem/1.1 var(--display); }
.totals span { font: 500 .72rem var(--display); color: var(--ink-soft); text-transform: uppercase; letter-spacing: .1em; }

.records-wrap { display: flex; flex-direction: column; gap: 14px; }
.table-scroll { overflow-x: auto; border: 2px solid var(--ink); border-radius: 8px; }
.records { width: 100%; border-collapse: collapse; font: 500 .9rem var(--display); font-variant-numeric: tabular-nums; }
.records th, .records td { padding: 6px 8px; text-align: center; border: 1.5px solid var(--ink); white-space: nowrap; }
.records tr:first-child th { border-top: 0; }
.records tr:last-child td { border-bottom: 0; }
.records th:first-child, .records td:first-child { text-align: left; border-left: 0; }
.records th:last-child, .records td:last-child { border-right: 0; }
.records th { background: var(--mint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.records td.empty { color: color-mix(in srgb, var(--ink) 30%, transparent); }

.history { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.history li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.history li:last-child { border-bottom: 0; }
.history .meta { color: var(--ink-soft); }
.history .t { white-space: nowrap; font: 600 1.05rem var(--display); font-variant-numeric: tabular-nums; }
.empty-note { color: var(--ink-soft); justify-content: center !important; }

.toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer;
  font: 500 1.05rem var(--display); text-transform: uppercase; letter-spacing: .03em;
}
.toggle small { display: block; font: .85rem/1.3 var(--text); text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle i {
  flex: none; width: 54px; height: 32px; border-radius: 16px; position: relative;
  background: var(--paper); border: var(--line) solid var(--ink); transition: background .2s;
}
.toggle i::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ink); transition: transform .2s;
}
.toggle input:checked + i { background: var(--mint); }
.toggle input:checked + i::after { transform: translateX(22px); }
.toggle input:focus-visible + i { outline: 3px solid var(--ink-red); outline-offset: 2px; }

.prose { max-width: none; }
.prose p { margin: 0 0 10px; max-width: 65ch; }
.prose p:last-child { margin-bottom: 0; }
.prose ul { margin: 0; padding-left: 20px; max-width: 65ch; }
.prose li { margin-bottom: 6px; }
.prose li:last-child { margin-bottom: 0; }

/* ---------- Landscape phones ----------
   The HUD becomes a column on the left so the board gets the full height,
   and the menu and results lay out their tiles in two columns. */
@media (orientation: landscape) and (max-height: 560px) {
  #app { max-width: 980px; padding: max(8px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); }
  body.wide #app, body.in-game #app { max-width: none; }
  .screen { gap: 8px; }

  .mosaic.split { flex-direction: row; }
  .mosaic.split > .col { flex: 1; }
  .col > .grow { flex-grow: 1; }
  .choices.grow { align-content: stretch; }
  .brand { min-height: 0; }
  .logo { flex-basis: 84px; padding: 6px; }
  .logo svg { width: 66px; height: 66px; }
  .title-tile { padding: 8px 14px; }
  .title-tile h1 { font-size: 1.9rem; }
  .tagline { margin-top: 4px; font-size: .75rem; }
  .strip { padding: 4px 12px; font-size: .8rem; }
  .chip { padding: 7px 6px; font-size: .88rem; }
  .chip .ico { font-size: 1.15rem; margin-bottom: 1px; }
  .levels .chip { --basis: 40%; }
  .modes .chip { --basis: 40%; }
  .play { padding: 12px; font-size: 1.5rem !important; }
  .tiles > .btn { padding: 8px 4px; font-size: .85rem; }
  .tiles > .btn .icon { width: 1.4em; height: 1.4em; margin-bottom: 3px; }
  .result-time { font-size: 3rem; }

  #screen-game {
    display: none; grid-template-columns: 118px minmax(0, 1fr); gap: 10px; align-items: start;
  }
  #screen-game.active { display: grid; }
  .hud-mosaic { grid-row: 1; }
  .hud { flex-direction: column; }
  .hud > .quit { flex: 0 0 44px; }
  .hud-item { padding: 6px 6px; }
  .hud-value, .hud-target { font-size: 1.5rem; }
  .timer-tile { padding: 8px 6px; }
  .timer { flex-direction: column; gap: 2px; padding: 6px 4px; border-radius: 22px; font-size: 1.25rem; }
  .timer-icon { width: .9rem; height: .9rem; }
  .progress { height: 8px; }
  .board-wrap { --chrome: 20px; --side: 128px; grid-column: 2; }
  .game-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}