/* Blueprint: white linework on blueprint blue, IBM Plex Mono, square corners. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/plex-mono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/plex-mono-500.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/plex-mono-700.woff2") format("woff2"); }
:root {
  --blue: #1552B0;
  --blue-deep: #11479A;
  --blue-ink: #0F3F87;
  --white: #FFFFFF;
  --miss-text: #C9D9F2;
  --miss-line: #9DB9E6;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  background-color: var(--blue);
  background-image:
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px);
  background-size: 20px 20px;
  color: var(--white);
  font: 400 15px/1.45 var(--mono);
}
.screen {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  padding: 18px 12px 40px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 2px; }
button { font-family: var(--mono); color: inherit; }

/* Header */
.head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; }
.logo { margin: 0; font-size: 25px; font-weight: 700; line-height: 1; letter-spacing: .16em; white-space: nowrap; }
.dim { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: .08em; }
.dim i { display: block; background: var(--white); }
.dim .tick { width: 1px; height: 9px; }
.dim .line { width: 132px; height: 1px; }
.help {
  width: 44px; height: 44px; flex: none; border-radius: 999px; background: var(--blue);
  border: 1.5px solid var(--white); font-size: 18px; font-weight: 700; cursor: pointer;
}

.head-btns { display: flex; gap: 8px; flex: none; }
.square { width: 44px; height: 44px; padding: 0; border-radius: 2px; background: var(--blue); border: 1.5px solid var(--white); cursor: pointer; display: grid; place-items: center; }
.square svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* The line above the board, and the rule once it is revealed */
.top p { margin: 0; }
.top .kicker, .panel .kicker { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.top h2 { margin: 4px 0 8px; font-size: 22px; font-weight: 700; line-height: 1.25; text-wrap: balance; }
.top .why b { font-weight: 700; }
.top.revealed { background: var(--blue); border: 1.5px solid var(--white); border-radius: 2px; padding: 14px 16px 16px; }

/* Board */
.board { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tile {
  height: 70px; padding: 0 1px; min-width: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  border-radius: 2px; cursor: pointer;
  background: var(--blue); color: var(--white); border: 1.5px solid var(--white);
  transition: background-color .28s ease, color .28s ease, transform .1s ease;
  transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms;
  -webkit-tap-highlight-color: transparent;
}
.tile svg { width: 28px; height: 28px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tile span { max-width: 100%; font-size: 12px; font-weight: 500; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.tile:active:not([aria-disabled="true"]) { transform: scale(.94); }
.tile[aria-disabled="true"] { cursor: default; }
.tile.fit { background: var(--white); color: var(--blue-ink); }
.tile.fit span { font-weight: 700; }
.tile.miss { background: var(--blue-deep); color: var(--miss-text); border: 1px dashed var(--miss-line); }
.tile.miss span { font-weight: 400; text-decoration: line-through; }
.tile.pick { outline: 2px dashed currentColor; outline-offset: -6px; }

svg.solid { fill: currentColor !important; stroke: none !important; }
svg.todo { stroke-dasharray: 2 2.5; opacity: .55; }

/* Control panel */
.panel { background: var(--blue); border: 1.5px solid var(--white); border-radius: 2px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 12px; }
.panel h2 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.2; text-transform: uppercase; letter-spacing: .04em; }
.panel p { margin: 0; }
.stats { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.count { display: flex; align-items: baseline; gap: 10px; flex: none; }
.count b { font-size: 44px; font-weight: 700; line-height: .9; font-variant-numeric: tabular-nums; }
.count span { font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: .1em; }
.log { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.log i { width: 14px; height: 14px; border: 1.5px solid var(--white); border-radius: 999px; position: relative; }
.log i.fit { background: var(--white); }
.log i.fail::before, .log i.fail::after { content: ""; position: absolute; left: 50%; top: 50%; width: 9px; height: 1.5px; background: var(--white); }
.log i.fail::before { transform: translate(-50%, -50%) rotate(45deg); }
.log i.fail::after { transform: translate(-50%, -50%) rotate(-45deg); }
.msg { min-height: 1.45em; overflow-wrap: anywhere; }
.msg strong { font-weight: 700; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  min-height: 52px; padding: 0 14px; border-radius: 2px; text-transform: uppercase; letter-spacing: .06em; cursor: pointer;
  background: var(--blue); color: var(--white); border: 1.5px dashed var(--white); font-size: 14px; font-weight: 700;
  transition: transform .1s ease;
}
.btn:active:not(:disabled) { transform: scale(.97); }
.btn.primary { flex: 1 1 auto; background: var(--white); color: var(--blue-ink); border-style: solid; font-size: 15px; }
.actions.stack .btn { flex: 1 1 auto; }
.actions.stack .btn.primary { flex: 1 1 100%; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Typed guess */
.field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.field label { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.field input {
  width: 100%; height: 52px; padding: 0 12px; border-radius: 2px;
  background: var(--blue-deep); color: var(--white); border: 1.5px solid var(--white);
  font: 500 17px/1.2 var(--mono);
}

/* Proof round */
.proof { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.proof li { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 1px dashed var(--miss-line); border-radius: 2px; padding: 6px 6px 6px 10px; }
.proof .thing { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; font-weight: 700; text-transform: uppercase; }
.proof .thing svg { width: 26px; height: 26px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.seg { display: flex; gap: 6px; flex: none; }
.seg button {
  min-height: 44px; padding: 0 10px; border-radius: 2px; cursor: pointer;
  background: var(--blue); border: 1.5px solid var(--white); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
}
.seg button[aria-pressed="true"][data-a="1"] { background: var(--white); color: var(--blue-ink); }
.seg button[aria-pressed="true"][data-a="0"] { background: var(--blue-deep); color: var(--miss-text); border: 1.5px dashed var(--miss-line); text-decoration: line-through; }

/* Result */
.rank { font-size: 17px; }
.rank b { font-weight: 700; }
.link { padding: 0; background: none; border: 0; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.yours b { font-weight: 700; overflow-wrap: anywhere; }
.share {
  margin: 0; padding: 12px 14px; border: 1px dashed var(--miss-line); border-radius: 2px; background: var(--blue-deep);
  display: flex; flex-direction: column; gap: 4px; font-size: 15px;
}
.share .marks { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.mark { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Streak and countdown */
.streak b, .next b { font-weight: 700; }
.next b { font-variant-numeric: tabular-nums; }

/* Ad slot: takes no space unless ads are switched on */
.ad { min-height: 124px; border: 1px dashed var(--miss-line); border-radius: 2px; padding: 4px; }
.ad[hidden] { display: none; }
.ad-label { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--miss-text); margin-bottom: 4px; }

/* Footer */
.foot { max-width: 440px; margin: 0 auto; padding: 0 12px 32px; display: flex; gap: 8px; font-size: 14px; }
.foot a { display: inline-block; padding: 12px 10px 12px 0; }
.foot a, .page a { color: var(--white); }

/* Stats */
.stat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-bottom: 16px; }
.stat { border: 1.5px solid var(--white); border-radius: 2px; padding: 8px 2px 6px; text-align: center; display: flex; flex-direction: column; gap: 4px; }
.stat b { font-size: 24px; font-weight: 700; line-height: 1; }
.stat span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.2; }
.chart { height: 90px; display: flex; align-items: flex-end; gap: 4px; padding: 6px; margin: 6px 0 8px; border: 1px dashed var(--miss-line); border-radius: 2px; }
.chart i { flex: 1; max-width: 22px; background: var(--white); border: 1.5px solid var(--white); border-radius: 1px; }
.chart i.lost { background: transparent; border-style: dashed; }
.sheet .kicker { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; margin: 0; }
.sheet .small { font-size: 14px; color: var(--miss-text); margin: 0 0 14px; }
.sheet p { margin: 0 0 10px; }
.legend { display: flex; gap: 6px; margin-top: 6px; }
.tile.demo { height: 40px; flex: 1; cursor: default; font-family: var(--mono); }

/* Privacy and terms */
.page { max-width: 640px; margin: 0 auto; padding: 18px 16px 48px; }
.page h1 { font-size: 26px; text-transform: uppercase; letter-spacing: .06em; margin: 18px 0 6px; }
.page h2 { font-size: 16px; text-transform: uppercase; letter-spacing: .06em; margin: 26px 0 6px; }
.page p, .page li { margin: 0 0 10px; }
.page ul { padding-left: 20px; }
.page .back { display: inline-block; margin-bottom: 8px; }

/* How to play */
.sheet {
  width: min(400px, calc(100vw - 24px)); padding: 18px 18px 20px; border-radius: 2px;
  background: var(--blue); color: var(--white); border: 1.5px solid var(--white); font: 400 15px/1.45 var(--mono);
}
.sheet::backdrop { background: rgba(8, 32, 74, .7); }
.sheet h2 { margin: 0 0 10px; font-size: 20px; text-transform: uppercase; letter-spacing: .04em; }
.sheet ol { margin: 0 0 16px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; }
.sheet form { display: flex; }

/* Testing tools, this computer only */
.dev { border: 1px dashed var(--miss-line); border-radius: 2px; padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; color: var(--miss-text); font-size: 13px; }
.dev p { margin: 0; }
.dev .actions { gap: 6px; }
.dev form { align-items: center; }
.dev input { width: 72px; height: 40px; padding: 0 8px; border-radius: 2px; background: var(--blue-deep); color: var(--white); border: 1px solid var(--miss-line); font: 500 15px var(--mono); }
.dev .btn { flex: 0 1 auto; min-height: 40px; padding: 0 10px; font-size: 12px; border-width: 1px; }

.noscript { max-width: 440px; margin: 20px auto; padding: 0 12px; }

@media (prefers-reduced-motion: reduce) {
  .tile, .btn { transition: none; }
  .tile:active:not([aria-disabled="true"]), .btn:active:not(:disabled) { transform: none; }
}

/* ---------- One screen, no scrolling ----------
   The board stretches or shrinks to fill whatever height is left, so the header,
   board and controls always fit together. Very small screens can still scroll. */
.screen { min-height: 100dvh; padding: 10px 12px 12px; gap: 10px; }
.head, .top, .panel, .ad { flex: none; }
.top:empty { display: none; }
.board { flex: 1 1 auto; min-height: 0; max-height: 498px; grid-template-rows: repeat(6, minmax(40px, 1fr)); }
.tile { height: auto; min-height: 0; gap: clamp(1px, .5vh, 5px); }
.tile svg { width: clamp(20px, 3.7vh, 28px); height: clamp(20px, 3.7vh, 28px); }
.tile.dim { opacity: .32; }
.tile.pick { outline: 2.5px dashed var(--white); outline-offset: 2px; cursor: pointer; }
.tile.pick.fit { outline-color: var(--white); }
.panel { padding: 12px 14px 14px; gap: 10px; }
.top.revealed { padding: 10px 14px 12px; }
.top h2 { margin: 2px 0 0; font-size: 20px; }
.top .why { margin-top: 6px; }

.guess-row { display: flex; gap: 8px; margin: 0; }
.guess-row input {
  flex: 1; min-width: 0; height: 52px; padding: 0 12px; border-radius: 2px;
  background: var(--blue-deep); color: var(--white); border: 1.5px solid var(--white); font: 500 17px/1.2 var(--mono);
}
.guess-row input::placeholder { color: var(--miss-text); }
.guess-row .btn { flex: none; min-width: 84px; }
.actions.slim .btn { flex: 1 1 auto; min-height: 44px; }

.log .mark { width: 16px; height: 16px; }
.sheet .links { display: flex; gap: 18px; margin: 14px 0 0; font-size: 14px; }
.sheet .links a { color: var(--white); padding: 6px 0; }

/* Testing tools float in a corner so they never add to the page height. */
.dev { position: fixed; left: 8px; bottom: 8px; z-index: 5; max-width: min(340px, calc(100vw - 16px)); background: var(--blue-deep); padding: 6px 10px; }
.dev summary { cursor: pointer; font-size: 12px; }
.dev details[open] summary { margin-bottom: 8px; }
.dev details p { margin: 0 0 8px; }
.dev details .actions { margin-bottom: 6px; }

/* Computers and wide tablets: board on the left, everything else beside it. */
@media (min-width: 900px) {
  .screen {
    max-width: 1010px; height: 100dvh; padding: 20px; display: grid; column-gap: 28px; row-gap: 14px;
    grid-template-columns: minmax(0, 1fr) 390px; grid-template-rows: auto auto auto 1fr;
  }
  .board { grid-column: 1; grid-row: 1 / -1; max-height: min(100%, 720px); gap: 8px; align-self: start; height: 100%; }
  .head { grid-column: 2; grid-row: 1; }
  .top { grid-column: 2; grid-row: 2; }
  .panel { grid-column: 2; grid-row: 3; }
  .ad { grid-column: 2; grid-row: 4; align-self: start; }
  .tile span { font-size: 13px; }
  .tile svg { width: clamp(24px, 4.2vh, 36px); height: clamp(24px, 4.2vh, 36px); }
}

/* Leave a strip at the bottom for the testing tools, on this computer only. */
.has-dev .screen { padding-bottom: 44px; }

.yours { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stats .count span { letter-spacing: .06em; }

/* Narrow phones: a little less edge padding so eight-letter names still fit. */
@media (max-width: 380px) {
  .screen { padding-left: 9px; padding-right: 9px; }
  .board { gap: 5px; }
}

/* ---------- The reveal ----------
   Only when a round has just ended: the rule writes itself in, the things that
   fit ripple across the board, and the score follows. */
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes ink { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes pop { 0% { transform: scale(1); } 45% { transform: scale(1.09); } 100% { transform: scale(1); } }
.screen[data-fresh] .top.revealed { animation: rise .35s ease both; }
.screen[data-fresh] .top h2 { animation: ink .75s .2s cubic-bezier(.3, .1, .3, 1) both; }
.screen[data-fresh] .top .why { animation: rise .4s 1.6s ease both; }
.screen[data-fresh] .tile.fit { animation: pop .38s var(--d, 0ms) ease both; }
.screen[data-fresh] .panel { animation: rise .45s 1.9s ease both; }
@media (prefers-reduced-motion: reduce) {
  .screen[data-fresh] .top.revealed, .screen[data-fresh] .top h2, .screen[data-fresh] .top .why,
  .screen[data-fresh] .tile.fit, .screen[data-fresh] .panel { animation: none; }
}

/* ---------- Nothing changes size ----------
   The board is one fixed size for the whole visit, and the panel below it keeps a
   fixed height, so moving between testing, guessing, proving and the result never
   resizes or shifts anything. "svh" is the screen height with the browser's bars
   showing, so the board does not resize when those bars slide away either. */
:root { --panel-h: 252px; --chrome: 108px; }
.has-dev { --chrome: 140px; }
.screen { min-height: 100svh; }
.board { flex: none; height: clamp(264px, calc(100svh - var(--panel-h) - var(--chrome)), 498px); max-height: none; }
.panel { min-height: var(--panel-h); }
.panel .actions { margin-top: auto; }
.panel .next { margin-top: -2px; }
.panel h2.rule { font-size: 19px; line-height: 1.25; text-transform: none; letter-spacing: 0; text-wrap: balance; }
.panel .why { font-size: 15px; }
.panel .facts b, .panel .next b { font-weight: 700; }
.screen[data-fresh] .panel h2.rule { animation: ink .75s .15s cubic-bezier(.3, .1, .3, 1) both; }
.screen[data-fresh] .panel > :not(h2) { animation: rise .4s 1.7s ease both; }
.screen[data-fresh] .panel { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .screen[data-fresh] .panel h2.rule, .screen[data-fresh] .panel > :not(h2) { animation: none; }
}
@media (min-width: 900px) {
  .board { height: min(calc(100svh - 40px), 720px); }
  .panel { min-height: 300px; }
}

/* Icons scale with their tile, so a short tile never clips its name. */
.tile svg { height: 46%; width: auto; aspect-ratio: 1; min-height: 18px; max-height: 30px; }
.tile { gap: 3px; padding-top: 2px; }
.panel { gap: 8px; }
@media (min-width: 900px) { .tile svg { max-height: 38px; } .tile { gap: 6px; } }

/* A thing named in a counterexample is outlined for a few seconds. No size change. */
@keyframes flag { 0%, 100% { outline-color: transparent; } 20%, 80% { outline-color: var(--white); } }
.tile.flag { outline: 3px solid transparent; outline-offset: 2px; animation: flag 4s ease both; }
@media (prefers-reduced-motion: reduce) { .tile.flag { animation: none; outline-color: var(--white); } }

/* The puzzle number, weekday and level share one line under the name. */
.head > div:first-child { flex: 1; min-width: 0; }
.dim { letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; }
.dim .line { width: auto; flex: 1 1 8px; min-width: 6px; max-width: 132px; }