/* Sweeple styles.
 *
 * Look: a classic beveled game window. Unrevealed tiles and unknown keys are
 * raised cells; a submitted guess "opens" its cells flat, and ruled-out keys
 * open flat on the keyboard, the way cleared squares do.
 */

@font-face {
  font-family: "Comfortaa";
  src: url("comfortaa-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ tokens */

/* Layout: one column. A status bar (guesses left, the name, timer) sits over
   the board inside one raised frame; the keyboard below is a grid of cells. */
:root {
  --ground: #E3E8EC;       /* page */
  --chrome: #C7CED5;       /* raised cells, keys, frames */
  --chrome-hi: #FFFFFF;    /* bevel, lit edge */
  --chrome-lo: #7A8691;    /* bevel, shaded edge */
  --well: #B7C0C8;         /* opened (ruled-out) cells */
  --paper: #F3F5F7;        /* reading surface inside windows */
  --ink: #16202A;
  --ink-soft: #3F4C59;
  --rule: #B4BDC6;
  --open-line: #8B97A2;
  --hover: #D3D9DF;

  --green: #49CC6F;  --green-hi: #B3F0C4;  --green-lo: #1F8A42;  --on-green: #0B1F12;
  --yellow: #FFD63A; --yellow-hi: #FFF2B0; --yellow-lo: #B48C08; --on-yellow: #241C00;
  --cyan: #3ED3E6;   --cyan-hi: #B5F2F9;   --cyan-lo: #108D9E;   --on-cyan: #04222A;
  --miss: #66727E;   --on-miss: #FFFFFF;   --on-miss-soft: #FFFFFF;   /* -soft: the letter on a ruled-out key */
  --pink: #FF8FB5;   --pink-hi: #FFD3E2;   --pink-lo: #C44F7A;   --on-pink: #3A0A1D;

  --accent: #D42A3C; --accent-hi: #F27A86; --accent-lo: #8C1321; --on-accent: #FFFFFF;

  --num-1: #1C3FD7; --num-2: #1B7A2D; --num-3: #CF1627; --num-4: #1B1F7A; --num-5: #7A1420; --num-6: #0B7377;

  --scrim: rgba(13, 18, 23, 0.55);
  --shadow: rgba(13, 18, 23, 0.35);

  /* fixed in both themes on purpose: these are objects, not surfaces */
  --led-bg: #1A0406; --led-on: #FF3B30; --led-off: #4A110F;
  --tip-bg: #FFFBD6; --tip-ink: #14110A;
  --flag: #E0283A;
  --mine: #14181D;   --mine-glint: #FFFFFF;

  --font-display: "Comfortaa", "Trebuchet MS", "Arial Rounded MT Bold", system-ui, sans-serif;
  --font-body: Verdana, Tahoma, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --bevel: 3px;
  --gutter: 16px;
  --topbar-h: 48px;
  --key-h: 48px;
  --stack-gap: 8px;
  --tile-max: 72px;
  --keyboard-max: 500px;
  --status-h: 46px;
  --frame-w: 24px;                            /* the frame's own width around the five tiles */
  --frame-h: calc(var(--status-h) + 30px);    /* ...and its height around the six rows, status bar included */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #13171C;
    --chrome: #2E3640;
    --chrome-hi: #4F5B69;
    --chrome-lo: #0A0D10;
    --well: #1B2127;
    --paper: #1A1F25;
    --ink: #E8EDF2;
    --ink-soft: #A7B3BF;
    --rule: #2A323B;
    --open-line: #0A0D10;
    --hover: #232A32;

    --green: #3FBF64;  --green-hi: #86E3A1;  --green-lo: #1C7438;  --on-green: #06140B;
    --yellow: #EBC634; --yellow-hi: #F8E58A; --yellow-lo: #98790A; --on-yellow: #1E1700;
    --cyan: #36C2D6;   --cyan-hi: #8DE5F0;   --cyan-lo: #0F7888;   --on-cyan: #03191E;
    --miss: #4A5561;   --on-miss: #E8EDF2;   --on-miss-soft: #CCD4DC;
    --pink: #F07BA4;   --pink-hi: #F9B9CF;   --pink-lo: #A23F65;   --on-pink: #2B0614;

    --accent: #D42A3C; --accent-hi: #F27A86; --accent-lo: #7A0F1B; --on-accent: #FFFFFF;

    --num-1: #8AA2FF; --num-2: #5FCB73; --num-3: #FF6B72; --num-4: #B0B5FF; --num-5: #E89AA2; --num-6: #55C7CB;

    --scrim: rgba(0, 0, 0, 0.66);
    --shadow: rgba(0, 0, 0, 0.6);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ground: #13171C;
  --chrome: #2E3640;
  --chrome-hi: #4F5B69;
  --chrome-lo: #0A0D10;
  --well: #1B2127;
  --paper: #1A1F25;
  --ink: #E8EDF2;
  --ink-soft: #A7B3BF;
  --rule: #2A323B;
  --open-line: #0A0D10;
  --hover: #232A32;

  --green: #3FBF64;  --green-hi: #86E3A1;  --green-lo: #1C7438;  --on-green: #06140B;
  --yellow: #EBC634; --yellow-hi: #F8E58A; --yellow-lo: #98790A; --on-yellow: #1E1700;
  --cyan: #36C2D6;   --cyan-hi: #8DE5F0;   --cyan-lo: #0F7888;   --on-cyan: #03191E;
  --miss: #4A5561;   --on-miss: #E8EDF2;   --on-miss-soft: #CCD4DC;
  --pink: #F07BA4;   --pink-hi: #F9B9CF;   --pink-lo: #A23F65;   --on-pink: #2B0614;

  --accent: #D42A3C; --accent-hi: #F27A86; --accent-lo: #7A0F1B; --on-accent: #FFFFFF;

  --num-1: #8AA2FF; --num-2: #5FCB73; --num-3: #FF6B72; --num-4: #B0B5FF; --num-5: #E89AA2; --num-6: #55C7CB;

  --scrim: rgba(0, 0, 0, 0.66);
  --shadow: rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Color-blind mode: orange for "right spot", blue for "somewhere else". The same
   values work on both the light and the dark ground. Tiles also get a symbol.
   The orange is a deep one on purpose: with red-green color blindness a lighter
   orange sits too close to the yellow. */
:root[data-cb="on"] {
  --green: #E2571A; --green-hi: #F3B59B; --green-lo: #963810; --on-green: #1F0A00;
  --cyan: #6FAEF5;  --cyan-hi: #C6DFFC;  --cyan-lo: #2C68B0;  --on-cyan: #06203F;
}

/* -------------------------------------------------------------------- base */

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

/* Keep clear of notches and the home indicator (the page asks for viewport-fit=cover). */
:root {
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
}

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 14px/1.55 var(--font-body);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  touch-action: manipulation; /* no double-tap zoom while typing; pinch zoom still works */
}

[hidden] { display: none !important; }

button { font: inherit; color: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Dotted focus rectangle, the way old dialog buttons showed focus. */
:focus { outline: none; }
:focus-visible { outline: 2px dotted var(--ink); outline-offset: -6px; }

/* ------------------------------------------------------------------ layout */

.app {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.topbar {
  flex: none;
  border-bottom: 1px solid var(--rule);
}

.topbar-inner {
  max-width: 560px;
  height: var(--topbar-h);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand-mark {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--chrome);
  border: var(--bevel) solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
}

.brand-mark svg { display: block; width: 18px; height: 18px; }

.tools { display: flex; gap: 2px; }

/* Flat until hovered, then raised: the old toolbar-button behavior. */
.tool {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  background: transparent;
  border: 2px solid transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tool svg { display: block; width: 20px; height: 20px; }

@media (hover: hover) {
  .tool:hover { background: var(--chrome); border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi); }
}

.tool:active { background: var(--chrome); border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); }

.stage {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* on big screens the whole game sits together in the middle */
  gap: var(--stack-gap);
  padding-block: 8px 10px;
  padding-inline: var(--gutter);
}

/* The board area takes whatever height is left and sizes the tiles to fit. */
.field {
  flex: 1 1 0;
  width: 100%;
  min-height: calc(6 * 31px + var(--frame-h)); /* below this the page scrolls */
  max-height: calc(6 * var(--tile-max) + var(--frame-h));
  display: flex;
  align-items: center;
  justify-content: center;
  container-type: size;
}

/* ----------------------------------------------------------------- cabinet */

.cabinet {
  --tile: 52px;
  /* Size of the counters and the name. Shrinks on very small boards so the
     bar never ends up wider than the five tiles under it. */
  --plate: min(var(--status-h), (var(--tile) * 5 - 44px) / 3.9);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px;
  background: var(--chrome);
  border: var(--bevel) solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
}

/* As large as fits both the width and the height that is left. */
@supports (width: 1cqw) {
  .cabinet { --tile: clamp(31px, min((100cqw - var(--frame-w)) / 5, (100cqh - var(--frame-h)) / 6), var(--tile-max)); }
}

.status {
  height: var(--status-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding-inline: 5px;
  border: var(--bevel) solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}

.led {
  flex: none;
  display: flex;
  gap: 1px;
  padding: 2px 3px;
  background: var(--led-bg);
  border: 1px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}

.led svg { display: block; width: calc(var(--plate) * 0.33); height: calc(var(--plate) * 0.59); }
.led polygon { fill: var(--led-off); }
.led polygon.on { fill: var(--led-on); }

/* The name sits between the two counters. */
.nameplate {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
  padding-top: 0.14em;
  font: 700 calc(var(--plate) * 0.44) / 1 var(--font-display);
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
}

/* ------------------------------------------------------------------- board */

.board {
  align-self: center;
  display: grid;
  grid-template-rows: repeat(6, var(--tile));
  border: var(--bevel) solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}

.row {
  display: grid;
  grid-template-columns: repeat(5, var(--tile));
}

.tile {
  position: relative;
  display: grid;
  place-items: center;
  padding-top: 0.1em; /* Comfortaa sits a little high */
  font: 700 calc(var(--tile) * 0.5) / 1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--chrome);
  border: var(--bevel) solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* A rejected word: "highlighted in pink". */
.row.invalid .tile {
  background: var(--pink);
  color: var(--on-pink);
  border-color: var(--pink-hi) var(--pink-lo) var(--pink-lo) var(--pink-hi);
}

/* Opened cells are flat, with a thin grid line. */
.tile[data-state="green"],
.tile[data-state="yellow"],
.tile[data-state="cyan"],
.tile[data-state="gray"] {
  border: 1px solid var(--open-line);
  cursor: help;
}

.tile[data-state="green"] { background: var(--green); color: var(--on-green); }
.tile[data-state="yellow"] { background: var(--yellow); color: var(--on-yellow); }
.tile[data-state="cyan"] { background: var(--cyan); color: var(--on-cyan); }
.tile[data-state="gray"] { background: var(--miss); color: var(--on-miss); }

.tile.chip { cursor: default; }

.tile.inspected { outline: 2px dashed var(--ink); outline-offset: -5px; }
.tile[data-state="green"].inspected { outline-color: var(--on-green); }
.tile[data-state="yellow"].inspected { outline-color: var(--on-yellow); }
.tile[data-state="cyan"].inspected { outline-color: var(--on-cyan); }
.tile[data-state="gray"].inspected { outline-color: var(--on-miss); }

.tile.pop { animation: pop 110ms ease-out; }
.tile.reveal { animation: press 300ms ease-in-out; }
.tile.hop { animation: hop 520ms cubic-bezier(0.3, 0.6, 0.4, 1); }
.row.shake { animation: shake 420ms ease-in-out; }

@keyframes pop {
  0% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

@keyframes press {
  0% { transform: scale(1); }
  42% { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes hop {
  0%, 100% { transform: translateY(0); }
  35% { transform: translateY(-26%); }
  65% { transform: translateY(4%); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%, 55% { transform: translateX(-6px); }
  35%, 75% { transform: translateX(6px); }
}

/* Color-blind symbols: dot = right spot, plus = a neighbor belongs here, ring = somewhere else. */
:root[data-cb="on"] :is(.tile, .swatch, .key):is([data-state="green"], [data-state="yellow"], [data-state="cyan"])::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 0.36em;
  height: 0.36em;
  min-width: 6px;
  min-height: 6px;
  background: currentColor;
}

:root[data-cb="on"] :is(.tile, .swatch, .key)[data-state="green"]::after { border-radius: 50%; }

:root[data-cb="on"] :is(.tile, .swatch, .key)[data-state="yellow"]::after {
  clip-path: polygon(36% 0, 64% 0, 64% 36%, 100% 36%, 100% 64%, 64% 64%, 64% 100%, 36% 100%, 36% 64%, 0 64%, 0 36%, 36% 36%);
}

:root[data-cb="on"] :is(.tile, .swatch, .key)[data-state="cyan"]::after {
  background: transparent;
  border: 2px solid currentColor;
  border-radius: 50%;
}

/* ------------------------------------------------------------ mode switch */

.segmented {
  flex: none;
  display: inline-flex;
  padding: 2px;
  background: var(--well);
  border: 2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}

.segmented button {
  min-height: 28px;
  padding: 0.3em 14px 0.1em;
  background: transparent;
  border: 2px solid transparent;
  font: 700 13px/1 var(--font-display);
  color: var(--ink-soft);
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}

.segmented button[aria-pressed="true"] {
  background: var(--chrome);
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  color: var(--ink);
}

.segmented button:focus-visible { outline-offset: -4px; }

/* ------------------------------------------------------------------ legend */

.legend {
  display: none;
  flex: none;
  width: min(100%, var(--keyboard-max));
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: 1fr 1fr;
  gap: 3px 16px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink-soft);
}

.legend li { display: flex; align-items: center; gap: 7px; min-width: 0; }

.swatch {
  position: relative;
  flex: none;
  width: 14px;
  height: 14px;
  font-size: 14px;
  border: 1px solid var(--open-line);
}

.swatch[data-state="green"] { background: var(--green); color: var(--on-green); }
.swatch[data-state="yellow"] { background: var(--yellow); color: var(--on-yellow); }
.swatch[data-state="cyan"] { background: var(--cyan); color: var(--on-cyan); }
.swatch[data-state="gray"] { background: var(--miss); color: var(--on-miss); }


/* ---------------------------------------------------------------- keyboard */

/* A strict 10-column grid, cells touching, exactly the layout the rules use
   for "neighbors". Wider than the page gutter on phones so keys stay tappable. */
.keyboard {
  flex: none;
  width: min(100% + 20px, var(--keyboard-max));
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  background: var(--well);
  border: var(--bevel) solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}

.key {
  position: relative;
  height: var(--key-h);
  min-width: 0;
  margin: 0;
  padding: 0.14em 0 0;
  display: grid;
  place-items: center;
  font: 700 18px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink);
  background: var(--chrome);
  border: var(--bevel) solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  border-radius: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}

.key svg { display: block; width: 22px; height: 22px; margin-top: -0.14em; }

.key[data-state="cyan"] { background: var(--cyan); color: var(--on-cyan); border-color: var(--cyan-hi) var(--cyan-lo) var(--cyan-lo) var(--cyan-hi); }
.key[data-state="yellow"] { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow-hi) var(--yellow-lo) var(--yellow-lo) var(--yellow-hi); }
.key[data-state="green"] { background: var(--green); color: var(--on-green); border-color: var(--green-hi) var(--green-lo) var(--green-lo) var(--green-hi); }

/* Ruled out: the cell is opened and takes the gray of a gray tile, so "gray"
   looks the same on the board and on the keyboard. Still tappable. */
.key[data-state="gray"] {
  background: var(--miss);
  color: var(--on-miss-soft);
  border: 1px solid var(--open-line);
}

.key:active,
.key.pressed {
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  padding-top: calc(0.14em + 2px);
  padding-left: 2px;
}

.key[data-state="cyan"]:active, .key[data-state="cyan"].pressed { border-color: var(--cyan-lo) var(--cyan-hi) var(--cyan-hi) var(--cyan-lo); }
.key[data-state="yellow"]:active, .key[data-state="yellow"].pressed { border-color: var(--yellow-lo) var(--yellow-hi) var(--yellow-hi) var(--yellow-lo); }
.key[data-state="green"]:active, .key[data-state="green"].pressed { border-color: var(--green-lo) var(--green-hi) var(--green-hi) var(--green-lo); }
.key[data-state="gray"]:active, .key[data-state="gray"].pressed { border-color: var(--open-line); filter: brightness(0.9); }

/* The keys a tapped tile's clue covers. */
.key.zone { outline: 2px dashed var(--ink); outline-offset: -5px; }
.key.zone-self { outline-style: solid; }
.key[data-state="cyan"].zone { outline-color: var(--on-cyan); }
.key[data-state="yellow"].zone { outline-color: var(--on-yellow); }
.key[data-state="green"].zone { outline-color: var(--on-green); }
.key[data-state="gray"].zone { outline-color: var(--on-miss); }

.key-enter {
  grid-column: span 3;
  font-size: 13px;
  letter-spacing: 0.05em;
}

.key-enter.again {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-hi) var(--accent-lo) var(--accent-lo) var(--accent-hi);
}

.key-enter.again:active { border-color: var(--accent-lo) var(--accent-hi) var(--accent-hi) var(--accent-lo); }
.key-enter.again:focus-visible { outline-color: var(--on-accent); }

/* ------------------------------------------------------------------ toasts */

/* Messages float just above the board's frame, so they never cover the
   guesses. */
.toasts {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  width: max-content;
  max-width: min(340px, 100vw - 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}

/* Styled after the classic pale-yellow tooltip. */
.toast {
  padding: 7px 12px;
  background: var(--tip-bg);
  color: var(--tip-ink);
  border: 1px solid var(--tip-ink);
  box-shadow: 3px 3px 0 var(--shadow);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-wrap: balance;
  animation: toast-in 140ms ease-out;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- windows */

dialog.window {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(460px, 100vw - 24px);
  height: fit-content;
  max-height: min(680px, 100% - 24px);
  padding: 0;
  color: var(--ink);
  background: var(--chrome);
  border: var(--bevel) solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  box-shadow: 0 16px 48px var(--shadow);
  overflow: hidden;
}

dialog.window[open] { display: flex; flex-direction: column; }

dialog.window:not([open]) { display: none; }

dialog.window:focus-visible { outline: none; }

dialog.window::backdrop { background: var(--scrim); }

dialog.window.narrow { width: min(380px, 100vw - 24px); }

.titlebar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 6px 6px 12px;
}

.titlebar h2 {
  margin: 0;
  padding-top: 0.14em;
  font: 700 17px/1.2 var(--font-display);
}

.close {
  flex: none;
  width: 30px;
  height: 28px;
  display: grid;
  place-items: center;
  padding: 0;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  cursor: pointer;
}

.close svg { display: block; width: 12px; height: 12px; }
.close:active { border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo); }
.close:focus-visible { outline-offset: -4px; }

.window-body {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 6px 6px;
  padding: 16px 16px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  border: 2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
}

.window-body > :first-child { margin-top: 0; }
.window-body > :last-child { margin-bottom: 0; }

.window-body p { margin: 0 0 12px; }

.window-body h3 {
  margin: 20px 0 8px;
  padding-top: 0.14em;
  font: 700 12px/1.2 var(--font-display);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.fine { font-size: 12px; color: var(--ink-soft); }

.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.btn {
  min-height: 38px;
  padding: 0.3em 18px 0.1em;
  font: 700 14px/1 var(--font-display);
  color: var(--ink);
  background: var(--chrome);
  border: var(--bevel) solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
  border-radius: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  padding: calc(0.3em + 2px) 16px 0.1em 20px;
}

.btn.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-hi) var(--accent-lo) var(--accent-lo) var(--accent-hi);
}

.btn.primary:active { border-color: var(--accent-lo) var(--accent-hi) var(--accent-hi) var(--accent-lo); }
.btn.primary:focus-visible { outline-color: var(--on-accent); }

/* ---------------------------------------------------------- how to play */

.rules {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.rules li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.chip {
  --tile: 34px;
  width: 34px;
  height: 34px;
}

.example {
  display: flex;
  margin: 0 0 12px;
}

.example .chip { --tile: 40px; width: 40px; height: 40px; }

.steps {
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 6px;
}

.steps li {
  display: grid;
  grid-template-columns: 1.3em minmax(0, 1fr);
  gap: 8px;
}

.steps b { font-family: var(--font-display); padding-top: 0.1em; }

.mini-kbd {
  width: min(100%, 300px);
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  border: 2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  background: var(--well);
}

.mini-key {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding-top: 0.14em;
  font: 700 12px/1 var(--font-display);
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
}

.mini-key.is-self { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.mini-key.is-neighbor { background: var(--yellow); color: var(--on-yellow); border-color: var(--yellow-hi) var(--yellow-lo) var(--yellow-lo) var(--yellow-hi); }
.mini-key.is-blank { visibility: hidden; }

/* ------------------------------------------------------------------- stats */

.result {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
  padding: 10px 12px;
  background: var(--chrome);
  border: 2px solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
}

.result-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
}

/* Solved: a flag planted on an unopened cell. Lost: the mine, on the classic red cell. */
.result-icon.is-win {
  background: var(--chrome);
  border: var(--bevel) solid;
  border-color: var(--chrome-hi) var(--chrome-lo) var(--chrome-lo) var(--chrome-hi);
}

.result-icon.is-loss {
  background: var(--flag);
  border: 1px solid var(--open-line);
}

.result-icon svg { display: block; width: 26px; height: 26px; }
.result p { margin: 0; }
.result-head { font: 700 17px/1.25 var(--font-display); padding-top: 0.14em; }
.result-sub { font-size: 13px; color: var(--ink-soft); }
.result-sub b { color: var(--ink); letter-spacing: 0.06em; }

/* The worldwide line sits directly under the result. */
.window-body .world {
  margin: -8px 0 16px;
  padding: 8px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-soft);
  background: var(--paper);
  border: 2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  text-wrap: balance;
}

.world b { color: var(--ink); font-variant-numeric: tabular-nums; }
.world-detail { display: block; font-size: 12px; }

.stats-tabs { display: flex; justify-content: center; margin: 0 0 14px; }

.numbers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  text-align: center;
}

.numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; min-width: 0; }

.numbers dd {
  margin: 0;
  font: 700 28px/1.1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.numbers dt {
  font-size: 11px;
  line-height: 1.25;
  color: var(--ink-soft);
}

.dist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 4px;
}

.dist li {
  display: grid;
  grid-template-columns: 1.1em minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

/* Each guess count gets its own digit color. */
.dist-n { font: 700 15px/1 var(--font-display); padding-top: 0.14em; text-align: center; }
.dist li:nth-child(1) .dist-n { color: var(--num-1); }
.dist li:nth-child(2) .dist-n { color: var(--num-2); }
.dist li:nth-child(3) .dist-n { color: var(--num-3); }
.dist li:nth-child(4) .dist-n { color: var(--num-4); }
.dist li:nth-child(5) .dist-n { color: var(--num-5); }
.dist li:nth-child(6) .dist-n { color: var(--num-6); }

.dist-track { min-width: 0; }

.dist-bar {
  min-width: 26px;
  height: 22px;
  padding: 0.14em 7px 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  background: var(--miss);
  color: var(--on-miss);
  border: 1px solid var(--open-line);
  font: 700 13px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}

.dist-bar.latest { background: var(--green); color: var(--on-green); }

.empty-note { margin: 10px 0 0 !important; font-size: 12px; color: var(--ink-soft); }

.after {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.after .actions { margin-top: 0; flex-wrap: nowrap; }
.window-body .next { margin: 0 auto 0 0; font-size: 12px; color: var(--ink-soft); }
.next b { display: block; font: 700 18px/1.2 var(--font-display); font-variant-numeric: tabular-nums; color: var(--ink); padding-top: 0.14em; }

.share-fallback {
  flex: 1 1 100%;
  width: 100%;
  height: 150px;
  padding: 8px;
  font: 13px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  border-radius: 0;
  resize: none;
}

/* ---------------------------------------------------------------- settings */

.setting { margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }

.setting-label {
  display: block;
  margin: 0 0 8px;
  padding: 0;
  font: 700 14px/1.3 var(--font-display);
}

.check {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  cursor: pointer;
}

.check input {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid;
  border-color: var(--chrome-lo) var(--chrome-hi) var(--chrome-hi) var(--chrome-lo);
  border-radius: 0;
  cursor: pointer;
}

.check input::after {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--ink);
  clip-path: polygon(8% 52%, 22% 38%, 40% 58%, 80% 12%, 94% 26%, 40% 90%);
  transform: scale(0);
}

.check input:checked::after { transform: scale(1); }
.check input:focus-visible { outline-offset: 2px; }

.check strong { display: block; font: 700 14px/1.3 var(--font-display); padding-top: 0.14em; }
.check small { display: block; margin-top: 3px; font-size: 12px; color: var(--ink-soft); }

/* -------------------------------------------------------------- responsive */

@media (min-width: 440px) {
  .key { font-size: 19px; }
  .key-enter { font-size: 14px; }
}

/* Room to spare: show the color key between the board and the keyboard. */
@media (min-height: 800px) {
  :root { --key-h: 52px; --stack-gap: 10px; }
  .legend { display: grid; }
  .stage { padding-block: 12px 16px; }
}

/* Big screens: everything a size up. */
@media (min-height: 960px) and (min-width: 700px) {
  :root { --key-h: 58px; --tile-max: 84px; --keyboard-max: 580px; --stack-gap: 14px; --status-h: 58px; }
  .key { font-size: 21px; }
  .key-enter { font-size: 15px; }
  .legend { font-size: 13px; }
  .segmented button { min-height: 32px; font-size: 14px; }
}

/* Short phones. */
@media (max-height: 640px) {
  :root { --topbar-h: 42px; --key-h: 42px; --stack-gap: 6px; }
  .stage { padding-block: 6px 6px; }
  .brand-mark { width: 26px; height: 26px; }
  .tool { width: 34px; height: 34px; }
  .segmented button { min-height: 24px; }
}

/* Phone on its side: board on the left, keyboard on the right. */
@media (max-height: 480px) and (min-width: 620px) {
  .stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr);
    column-gap: 16px;
    align-items: center;
    justify-items: center;
  }
  .field { grid-column: 1; grid-row: 1 / -1; height: 100%; }
  .modes { grid-column: 2; grid-row: 2; }
  .keyboard { grid-column: 2; grid-row: 3; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .tile.pop, .tile.reveal, .tile.hop, .row.shake, .toast { animation: none; }
}