/* Clackwork: everything in the game is a split-flap board. The board is always dark; the wall behind it follows the theme. */
:root {
  /* default skin: black board, amber accent */
  --wall-l: #D7D5CC; --wall-ink-l: #191917; --wall-muted-l: #5C5A52;      /* the wall behind the board, light mode */
  --wall-d: #070706; --wall-ink-d: #EAE7DD; --wall-muted-d: #9A988E;      /* and dark mode */
  --board: #111110; --frame: transparent; --frame-w: 0px;
  --flap: #262624; --flap-hi: #262624; --flap-low: #1E1E1C; --empty: #171716;
  --seam: #0A0A09; --seam-soft: rgba(10, 10, 9, 0.45);
  --ink: #F3F0E6; --year: var(--ink); --dim: #8F8D83; --rule: #3A3935;
  --amber: #F6B60B;                                                       /* accent text: labels, spans */
  --fill: #F6B60B; --fill-low: #DCA208; --fill-dim: #6E5411; --on-fill: #111110;   /* bars, solid tiles, buttons */
  --late: #4C4A43; --ok: #55C980; --ok-low: #47B26F; --bad: #F2645F;

  --wall: var(--wall-l); --wall-ink: var(--wall-ink-l); --wall-muted: var(--wall-muted-l);
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --wall: var(--wall-d); --wall-ink: var(--wall-ink-d); --wall-muted: var(--wall-muted-d); }
}
:root[data-theme="dark"] { --wall: var(--wall-d); --wall-ink: var(--wall-ink-d); --wall-muted: var(--wall-muted-d); }

/* ---------- skins: set data-skin on <html> ---------- */
:root[data-skin="signal"] {            /* signal yellow: a real airport board */
  --wall-l: #C9C9C4; --wall-ink-l: #111111; --wall-muted-l: #55554F;
  --wall-d: #000000; --wall-ink-d: #EDEDED; --wall-muted-d: #9A9A94;
  --board: #000000; --frame: #2A2A2A; --frame-w: 2px;
  --flap: #1C1C1C; --flap-hi: #262626; --flap-low: #141414; --empty: #0B0B0B;
  --seam: #000000; --seam-soft: rgba(0, 0, 0, 0.5);
  --ink: #FFD400; --year: #FFFFFF; --dim: #8F8455; --rule: #2A2A2A;
  --amber: #FF9A1F;
  --fill: #FFD400; --fill-low: #E0BA00; --fill-dim: #6B5A00; --on-fill: #000000;
  --late: #3D3D3D; --ok: #4ADE80; --ok-low: #3CC46E; --bad: #FF5A52;
}
:root[data-skin^="analog"] {           /* analog: warm charcoal plastic, off-white paint, a metal housing */
  --wall-l: #CFCBBE; --wall-ink-l: #1B1A17; --wall-muted-l: #5E5A50;
  --wall-d: #0B0A09; --wall-ink-d: #E6E0CF; --wall-muted-d: #9A9486;
  --board: #151412; --frame: transparent; --frame-w: 0px;
  --flap: #25231F; --flap-hi: #322F2A; --flap-low: #1C1A17; --empty: #191816;
  --seam: #070706; --seam-soft: rgba(0, 0, 0, 0.55);
  --ink: #EAE3D0; --dim: #8C8676; --rule: #35322C;
  --amber: #E3A81A;
  --fill: #E3A81A; --fill-low: #C48F12; --fill-dim: #66501A; --on-fill: #16130A;
  --late: #46433C; --ok: #6CC586; --ok-low: #57AC71; --bad: #E0604F;
}
:root[data-skin="analog-yellow"] {     /* the same housing with signal-yellow lettering; the year stays off-white */
  --ink: #E9BC1E; --year: #EDE6D3; --dim: #8C7E45;
  --amber: #D98A2B;
  --fill: #E9BC1E; --fill-low: #C99F12; --fill-dim: #6A5612;
}

*, *::before, *::after { box-sizing: inherit; }
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
body {
  margin: 0; background: var(--wall); color: var(--wall-ink);
  font-family: "Barlow", "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.45;
}
main { max-width: 39rem; margin: 0 auto; padding: 0.5rem 0.35rem 3rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

/* ---------- one flap tile ---------- */
.flap {
  position: relative; display: inline-block; flex: none; width: 0.76em; height: 1.24em; margin: 0 0.035em; vertical-align: top;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 600; color: var(--ink);
  border-radius: 0.07em; contain: strict;
}
.flap .h { position: absolute; left: 0; right: 0; height: 50%; overflow: hidden; backface-visibility: hidden; }
.flap .h i { display: block; height: 1.24em; line-height: 1.24em; text-align: center; font-style: normal; }
.flap .top, .flap .ftop { top: 0; background: linear-gradient(var(--flap-hi), var(--flap)); border-radius: 0.07em 0.07em 0 0; }
.flap .bot, .flap .fbot { bottom: 0; background: var(--flap-low); border-radius: 0 0 0.07em 0.07em; }
.flap .bot i, .flap .fbot i { margin-top: -0.62em; }
.flap .ftop { transform-origin: bottom; z-index: 2; visibility: hidden; }
.flap .fbot { transform-origin: top; z-index: 2; visibility: hidden; }
.flap::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.5px); height: 1px; background: var(--seam); z-index: 3; }
.flap.empty .h { background: var(--empty); }
.grid .flap::after, .hist .flap::after { background: var(--seam-soft); }
.grid .flap.empty::after { background: transparent; }
.flap.c-amber { color: var(--amber); }
.flap.c-span { color: var(--amber); }      /* a clue's span of years */
.flap.c-dim { color: var(--dim); }
.flap.c-ok { color: var(--ok); }
.flap.c-bad { color: var(--bad); }
/* solid tiles: the bars in the stats chart, and the green wave on a correct answer */
.flap .top[data-fill="on"], .flap .ftop[data-fill="on"] { background: var(--fill); }
.flap .bot[data-fill="on"], .flap .fbot[data-fill="on"] { background: var(--fill-low); }
.flap .top[data-fill="ok"], .flap .ftop[data-fill="ok"] { background: var(--ok); }
.flap .bot[data-fill="ok"], .flap .fbot[data-fill="ok"] { background: var(--ok-low); }
.fgroup { display: inline-flex; white-space: nowrap; }

/* a grid of tiles: every row is exactly as wide as the board */
.grid { font-size: calc(var(--pitch, 15px) / 0.832); line-height: 1; }
.grow { display: flex; flex-wrap: nowrap; overflow: hidden; margin-bottom: 0.16em; contain: layout paint; }

/* ---------- board ---------- */
.board { background: var(--board); color: var(--ink); border: var(--frame-w) solid var(--frame); border-radius: 0.75rem; padding: 0.75rem 0.6rem 1rem; }
#measure { height: 0; }
.bhead { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; padding-bottom: 0.5rem; }
.title { margin: 0; font-size: 1.25rem; line-height: 1; }
.hright { display: flex; align-items: center; gap: 0.5rem; }
.pnum { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 600; font-size: 1.15rem; color: var(--amber); letter-spacing: 0.04em; white-space: nowrap; }
.mini { font: inherit; font-size: 0.8rem; color: var(--dim); background: transparent; border: 1px solid var(--rule); border-radius: 0.25rem; padding: 0.15rem 0.45rem; cursor: pointer; white-space: nowrap; }
.mini[aria-pressed="true"] { color: var(--amber); border-color: var(--amber); }
.mini.round { width: 1.6rem; height: 1.6rem; padding: 0; border-radius: 50%; font-weight: 600; color: var(--ink); border-color: var(--dim); }

.readout { display: flex; justify-content: center; align-items: center; margin: 1rem 0 0.2rem; font-size: clamp(1.8rem, calc((100vw - 2.6rem) / 7.6), 4.6rem); line-height: 1; min-height: 1.24em; }
.rdash { width: 0.42em; height: 0.09em; background: var(--dim); margin: 0 0.12em; border-radius: 1px; }
.readout.single .rdash, .readout.single #hi { display: none; }
.readout .flap { color: var(--year); }
.readout.locked .flap { color: var(--ok); }
.readout.missed .flap { color: var(--bad); }
.readout.pop { animation: pop 0.7s ease; }
@keyframes pop { 0% { transform: scale(1); } 35% { transform: scale(1.09); } 100% { transform: scale(1); } }

#endgrid { margin-top: 0.75rem; }

.err { margin: 0.5rem 0 0; color: var(--bad); }
.err:empty { display: none; }

/* guesses so far: small tile groups, underlined by how each one did */
#guesses { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; font-size: 1.1rem; }
#guesses:empty { display: none; }
.hist { padding-bottom: 4px; border-bottom: 4px solid var(--late); }
.hist.fit { border-bottom-color: var(--fill); }
.hist.hit { border-bottom-color: var(--ok); }
.hist.hit .flap { color: var(--ok); }

/* the current clue, then the earlier ones, then the timeline they share */
.clues { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 1rem; }
.block { margin-top: 1.1rem; }
.track { position: relative; height: 0.55rem; margin-top: 0.3rem; }
.track[hidden] { display: none; }
.bar, .barin, .winbar { position: absolute; top: 0; bottom: 0; border-radius: 2px; transition: left 0.7s ease, width 0.7s ease; }
.bar { background: var(--fill-dim); min-width: 4px; }
.barin { background: var(--fill); min-width: 4px; }
.block.late .bar { background: var(--late); }
#axis { position: relative; height: 2.1rem; margin-top: 1rem; border-top: 1px solid var(--dim); }
.winbar { top: -4px; bottom: auto; height: 7px; background: var(--ink); min-width: 4px; }
#axis.locked .winbar { background: var(--ok); }
#axis.missed .winbar { background: var(--bad); }
.tick { position: absolute; top: 0.55rem; transform: translateX(-50%); font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 500; font-size: 0.95rem; color: var(--dim); }
.mark { position: absolute; top: 5px; width: 0; height: 0; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid var(--bad); }
.mark.hit { border-bottom-color: var(--ok); }

form { display: flex; gap: 0.5rem; margin-top: 0.9rem; }
form[hidden] { display: none; }
#guess {
  flex: 1 1 auto; min-width: 0; padding: 0.45rem 0.8rem; border-radius: 0.3rem;
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 600; font-size: 1.5rem; letter-spacing: 0.18em;
  color: var(--ink); background: var(--flap-low); border: 1.5px solid var(--dim);
}
#guess::placeholder { color: var(--dim); letter-spacing: 0.04em; }
#guess:focus { border-color: var(--amber); outline: none; }
.go {
  font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 1.2rem; letter-spacing: 0.04em;
  padding: 0.45rem 1.1rem; border-radius: 0.3rem; cursor: pointer; white-space: nowrap;
  background: var(--fill); color: var(--on-fill); border: 1.5px solid var(--fill);
}
.go:disabled { opacity: 0.5; cursor: default; }

.end { margin-top: 1rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; }
.end[hidden] { display: none; }
.scoreline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; font-size: 2.4rem; line-height: 1; }
#outof { font-size: 1rem; padding-bottom: 0.1rem; }
#tally { font-size: 1.8rem; margin-left: auto; }   /* guesses used, e.g. 4/6 */
.fact { margin: 0.9rem 0; padding-left: 0.8rem; border-left: 3px solid var(--amber); }
.fact a { color: inherit; font-weight: 600; }
.share { font-family: inherit; white-space: pre-wrap; overflow-wrap: anywhere; background: var(--flap-low); border-radius: 0.3rem; padding: 0.7rem 0.85rem; margin: 0 0 0.75rem; font-weight: 500; }
#stats { margin-top: 1.1rem; border-top: 1px solid var(--rule); padding-top: 0.9rem; }

@media (prefers-reduced-motion: reduce) { .bar, .barin, .winbar { transition: none; } .readout.pop { animation: none; } }

/* ---------- on the wall ---------- */
.preview { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 1rem; color: var(--wall-muted); }
.preview[hidden] { display: none; }
.preview button { font: inherit; font-weight: 600; min-width: 2.2rem; height: 2.2rem; padding: 0 0.6rem; border-radius: 0.3rem; cursor: pointer; background: transparent; color: var(--wall-ink); border: 1.5px solid var(--wall-ink); }
.preview button[aria-current="true"], .preview button[aria-pressed="true"] { background: var(--wall-ink); color: var(--wall); }
.preview .row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; width: 100%; }
/* the rules, opened from the "?" button */
dialog#help { width: min(32rem, calc(100vw - 1.5rem)); max-height: calc(100vh - 2rem); overflow: auto; padding: 1.2rem 1.2rem 1.3rem;
  background: var(--board); color: var(--ink); border: 1px solid var(--rule); border-radius: 0.75rem; }
dialog#help::backdrop { background: rgba(0, 0, 0, 0.65); }
dialog#help h2 { font-family: "Barlow Condensed", "Arial Narrow", Arial, sans-serif; font-weight: 700; font-size: 1.5rem; letter-spacing: 0.03em; margin: 0 0 0.6rem; color: var(--amber); }
dialog#help ul { margin: 0 0 1.1rem; padding-left: 1.15rem; }
dialog#help li { margin-bottom: 0.45rem; }

/* ---------- analog skins: make it look built, not rendered ---------- */
:root[data-skin^="analog"] .board { position: relative; }
/* light from above and a little grain over everything */
:root[data-skin^="analog"] .board::after {
  content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
  background:
    radial-gradient(130% 55% at 50% 0%, rgba(255, 236, 190, 0.07), transparent 70%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5; mix-blend-mode: overlay;
}
/* each flap: a lit top edge, the top half's shadow on the bottom half, and a notch at each end of the hinge */
:root[data-skin^="analog"] .flap:not(.empty) .top, :root[data-skin^="analog"] .flap .ftop { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); }
:root[data-skin^="analog"] .flap:not(.empty) .bot, :root[data-skin^="analog"] .flap .fbot { box-shadow: inset 0 0.2em 0.14em -0.1em rgba(0, 0, 0, 0.8); }
/* on the small tiles the shadow is lighter, so it does not eat into the letters */
:root[data-skin^="analog"] .grid .flap:not(.empty) .bot, :root[data-skin^="analog"] .grid .flap .fbot, :root[data-skin^="analog"] .title .flap .bot { box-shadow: inset 0 0.13em 0.1em -0.08em rgba(0, 0, 0, 0.55); }
:root[data-skin^="analog"] .flap:not(.empty)::before {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.08em); height: 0.16em; z-index: 3;
  background: linear-gradient(90deg, var(--seam) 0 0.07em, transparent 0.07em calc(100% - 0.07em), var(--seam) calc(100% - 0.07em));
}
/* controls: a slot to type in and a key to press */
:root[data-skin^="analog"] #guess { background: #0D0C0B; border-color: #3A372F; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.95), 0 1px 0 rgba(255, 255, 255, 0.06); }
:root[data-skin^="analog"] .go {
  background: linear-gradient(color-mix(in srgb, var(--fill) 78%, #FFF), var(--fill) 48%, var(--fill-low));
  border: 1px solid #5E4708; border-bottom-width: 4px; box-shadow: 0 2px 0 #000, inset 0 1px 0 rgba(255, 255, 255, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
}
:root[data-skin^="analog"] .go:active { transform: translateY(2px); border-bottom-width: 2px; }
/* the timeline: enamel strips sliding in grooves, over an engraved rule */
:root[data-skin^="analog"] .track { height: 0.7rem; background: #0A0908; border-radius: 3px; box-shadow: inset 0 1px 3px #000, 0 1px 0 rgba(255, 255, 255, 0.05); }
:root[data-skin^="analog"] .track .bar, :root[data-skin^="analog"] .track .barin {
  top: 2px; bottom: 2px; background-image: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.28));
}
:root[data-skin^="analog"] #axis { border-top: 2px solid #5A574E; }
:root[data-skin^="analog"] .tick::before { content: ""; position: absolute; left: 50%; top: -0.55rem; width: 1px; height: 0.38rem; background: var(--dim); }

/* ---------- backgrounds behind the board: set data-bg on <html> ---------- */
body { min-height: 100vh; }
/* a dim concourse: the board glows in a dark hall */
:root[data-bg="concourse"] { --wall: #050504; --wall-ink: #E6E0CF; --wall-muted: #9A9486; }
:root[data-bg="concourse"] body {
  background:
    radial-gradient(46rem 34rem at 50% 16rem, rgba(233, 188, 30, 0.13), rgba(233, 188, 30, 0.04) 45%, transparent 72%),
    radial-gradient(90rem 60rem at 50% 0%, #17150F, #050504 70%);
  background-attachment: fixed;
}
/* a station wall: glazed tiles in a brick bond, darker toward the edges, with the board hung on it.
   Each tile is drawn in a small inline SVG: its face, a highlight under the top grout line, and the grout. */
:root[data-bg="tile-cream"] { --wall: #DDD7C6; --wall-ink: #1B1A17; --wall-muted: #4F4B41; }
:root[data-bg="tile-cream"] body {
  background: radial-gradient(ellipse 75% 85% at 50% 30%, transparent 35%, rgba(40, 30, 10, 0.5) 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='120' height='120' fill='%23DDD7C6'/><path d='M0 3H120M0 63H120' stroke='%23EFEADB' stroke-width='2'/><path d='M0 1H120M0 61H120' stroke='%23A9A28F' stroke-width='2'/><path d='M1 0V60M61 60V120' stroke='%23A9A28F' stroke-width='2'/></svg>");
  background-attachment: fixed, scroll;
}
:root[data-bg="tile-green"] { --wall: #12332A; --wall-ink: #E9E1CC; --wall-muted: #A3B3A6; }
:root[data-bg="tile-green"] body {
  background: radial-gradient(ellipse 75% 85% at 50% 30%, transparent 30%, rgba(0, 0, 0, 0.6) 100%), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><rect width='120' height='120' fill='%2312332A'/><path d='M0 3H120M0 63H120' stroke='%231C4A3D' stroke-width='2'/><path d='M0 1H120M0 61H120' stroke='%23081A14' stroke-width='2'/><path d='M1 0V60M61 60V120' stroke='%23081A14' stroke-width='2'/></svg>");
  background-attachment: fixed, scroll;
}
:root[data-bg^="tile"] .board { box-shadow: 0 2px 0 rgba(255, 255, 255, 0.06), 0 22px 44px rgba(0, 0, 0, 0.55); }
:root[data-bg^="tile"] .preview { background: var(--wall); padding: 0.6rem 0.7rem; border-radius: 0.4rem; }