/* 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; }
}