/* takemeback.world — a shoebox of memories.
   The page is the inside of a cardboard box; every memory is a piece of paper somebody dropped in. */

:root {
  --kraft: #c9a877;
  --kraft-dark: #a9864f;
  --kraft-deep: #7d5f35;
  --ink: #2b221b;
  --ink-soft: #5b4b3d;
  --paper: #fffdf6;
  --cream: #f4ead3;
  --burgundy: #8c2f39;
  --red-ink: #b23a33;
  --green: #2f5d50;
  --blue-rule: #b8cde2;
  --margin-red: #e8a3a0;
  --sticky: #f5e27e;
  --lcd-bg: #1d2a1f;
  --lcd: #9dfc8b;

  --f-type: "Special Elite", "Courier New", monospace;
  --f-mono: "Courier Prime", "Courier New", monospace;
  --f-hand: "Caveat", "Segoe Print", "Comic Sans MS", cursive;
  --f-lcd: "VT323", "Consolas", monospace;
  --f-serif: "Libre Baskerville", Georgia, "Times New Roman", serif;

  --shadow-paper: 0 1px 1px rgba(40, 25, 10, .18), 0 10px 22px -10px rgba(60, 35, 10, .55);
}

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

html { color-scheme: light; }

body {
  margin: 0;
  padding-inline: 16px;
  min-height: 100vh;
  color: var(--ink);
  font: 16px/1.55 var(--f-mono);
  background-color: var(--kraft);
  /* cardboard fibres */
  background-image:
    repeating-linear-gradient(93deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(-2deg, rgba(90, 60, 20, .06) 0 1px, transparent 1px 5px),
    radial-gradient(ellipse at 50% 0%, rgba(255, 240, 210, .35), transparent 60%),
    radial-gradient(ellipse at 50% 120%, rgba(60, 40, 10, .35), transparent 60%);
  background-attachment: fixed;
}

a { color: var(--burgundy); }
a:hover { color: var(--red-ink); }
:focus-visible { outline: 3px dashed var(--burgundy); outline-offset: 3px; }

.wrap { max-width: 1180px; margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

button { font: inherit; color: inherit; }
.linkish { background: none; border: 0; padding: 0; color: var(--burgundy); text-decoration: underline; cursor: pointer; }

/* ───────── ticker ───────── */
.ticker {
  margin-inline: -16px;
  overflow: hidden;
  background: var(--ink);
  color: var(--sticky);
  font: 17px/1 var(--f-lcd);
  letter-spacing: .06em;
  padding-block: 6px;
  white-space: nowrap;
}
.ticker-track { display: inline-block; padding-left: 100%; animation: ticker 48s linear infinite; }
@keyframes ticker { to { transform: translateX(-100%); } }

/* ───────── nav + the lid label ───────── */
.topnav {
  display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; justify-content: space-between;
  padding-block: 12px;
  font: 15px var(--f-type);
}
.topnav a { color: var(--ink); text-decoration: none; border-bottom: 1px dashed var(--ink-soft); }
.topnav a:hover { color: var(--burgundy); border-color: var(--burgundy); }
.topnav .links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.whoami { color: var(--ink-soft); }
.whoami b { color: var(--ink); }
.whoami form { display: inline; }

.lid {
  position: relative;
  margin: 18px auto 8px;
  max-width: 640px;
  padding: 26px 24px 22px;
  text-align: center;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  transform: rotate(-.6deg);
}
/* masking tape holding the label on */
.lid::before, .lid::after {
  content: ""; position: absolute; top: -12px; width: 92px; height: 26px;
  background: rgba(240, 228, 190, .78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.lid::before { left: 18px; transform: rotate(-8deg); }
.lid::after { right: 18px; transform: rotate(6deg); }
.lid-kicker { margin: 0; font: 15px var(--f-type); letter-spacing: .08em; color: var(--ink-soft); text-transform: lowercase; }
.lid h1 {
  margin: 4px 0 2px;
  font: clamp(2.4rem, 9vw, 4.6rem)/1 var(--f-type);
  letter-spacing: .04em;
  color: var(--ink);
  text-shadow: 1px 1px 0 rgba(140, 47, 57, .25);
}
.lid h1 a { color: inherit; text-decoration: none; }
.tagline { margin: 6px 0 0; font: 1.6rem/1.2 var(--f-hand); color: var(--burgundy); }
.lid .lid-kicker { font-size: clamp(1rem, 2.8vw, 1.3rem); color: var(--ink); letter-spacing: .06em; }
.lid-intro {
  max-width: 560px; margin: 22px auto 0; text-align: center;
  font: 1.05rem/1.6 var(--f-mono); color: var(--ink);
}
.my-note {
  max-width: 560px; margin: 16px auto 0; padding: 10px 16px;
  background: var(--sticky); box-shadow: var(--shadow-paper); transform: rotate(-.6deg);
  font: 1.3rem/1.3 var(--f-hand); text-align: center;
}

/* ───────── the time machine ───────── */
.machine {
  margin: 30px auto 10px;
  max-width: 760px;
  padding: 18px 18px 16px;
  background: linear-gradient(#4b3a2c, #33271d);
  border: 3px solid #1f1812;
  border-radius: 14px;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .12), 0 12px 24px -12px rgba(0, 0, 0, .6);
  color: var(--cream);
}
.machine-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; }
.machine-label { font: 1.25rem var(--f-type); letter-spacing: .12em; }

.odometer {
  display: flex; gap: 4px; padding: 6px;
  background: #140f0b;
  border-radius: 6px;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, .8);
}
.digit {
  position: relative; width: 44px; height: 64px; overflow: hidden;
  background: linear-gradient(#eee6d2 0%, #fffaf0 45%, #fffaf0 55%, #d9cfb8 100%);
  border-radius: 3px;
  font: 3.2rem/64px var(--f-lcd);
  color: var(--ink);
  text-align: center;
}
.digit::after { /* the drum's curvature */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(rgba(0, 0, 0, .35), transparent 30%, transparent 70%, rgba(0, 0, 0, .35));
}
.digit .strip { display: flex; flex-direction: column; transition: transform .9s cubic-bezier(.2, .8, .2, 1.05); }
.digit .strip span { height: 64px; }

.nudge { display: flex; flex-direction: column; gap: 4px; }
.nudge button, .chip, .lever {
  cursor: pointer;
  border: 2px solid #1f1812;
  border-radius: 4px;
  background: linear-gradient(#f3e8cf, #d4c39d);
  color: var(--ink);
  box-shadow: 0 3px 0 #1f1812;
}
.nudge button { width: 38px; height: 28px; font-size: 12px; line-height: 1; }
.nudge button:active, .chip:active, .lever:active { transform: translateY(3px); box-shadow: 0 0 0 #1f1812; }

.lever {
  min-width: 84px; height: 64px;
  font: 1.6rem var(--f-type);
  background: linear-gradient(#c8473f, #8c2f39);
  color: #fff4e0;
  border-radius: 8px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .4);
}

.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.chip { padding: 4px 10px; font: 1.05rem var(--f-lcd); letter-spacing: .05em; }
.chip[aria-pressed="true"] { background: linear-gradient(#9dfc8b, #6cc95c); }
.chip-surprise { background: linear-gradient(#f7e79a, #e2c95b); font-family: var(--f-type); font-size: .9rem; }
.chip-games { background: linear-gradient(#f3c6c1, #d98b83); font-family: var(--f-type); font-size: .9rem; }
.chip-games[aria-pressed="true"] { background: linear-gradient(#9dfc8b, #6cc95c); }
.arcade-lid h1 { font-size: clamp(2.2rem, 8vw, 4rem); }
.machine select {
  width: auto;
  font: 1.05rem var(--f-lcd); padding: 4px 6px; border: 2px solid #1f1812; border-radius: 4px;
  background: var(--cream); color: var(--ink);
}

.shelf-caption { text-align: center; margin: 24px 0 18px; font: 1.7rem/1.2 var(--f-hand); color: var(--ink); }

/* static flash when traveling */
.static {
  position: fixed; inset: 0; z-index: 50; pointer-events: none; opacity: 0;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .25) 0 1px, transparent 1px 3px),
    repeating-radial-gradient(circle at 17% 32%, #fff 0 1px, #222 1px 2px, #888 2px 3px);
  mix-blend-mode: multiply;
}
.static.on { animation: static .6s steps(6) 1; }
@keyframes static {
  0% { opacity: 0; } 20% { opacity: .75; background-position: 0 0, 10px 3px; }
  60% { opacity: .5; background-position: 0 2px, -7px 11px; } 100% { opacity: 0; }
}

/* ───────── the desk of memories ───────── */
.desk { columns: 300px; column-gap: 34px; padding-block: 8px 20px; }
.empty {
  column-span: all; max-width: 520px; margin: 10px auto; padding: 28px; text-align: center;
  background: var(--paper); box-shadow: var(--shadow-paper); transform: rotate(.8deg);
}
.empty p { font: 1.5rem/1.3 var(--f-hand); margin: 0 0 12px; }

.card {
  --tilt: 0deg;
  position: relative;
  display: block;
  break-inside: avoid;
  margin: 8px 0 34px;
  padding: 22px 22px 16px;
  color: var(--ink);
  text-decoration: none;
  background: var(--paper);
  box-shadow: var(--shadow-paper);
  transform: rotate(var(--tilt));
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover, .card:focus-visible {
  color: var(--ink);
  transform: rotate(0deg) translateY(-4px) scale(1.015);
  box-shadow: 0 2px 2px rgba(40, 25, 10, .2), 0 22px 30px -14px rgba(60, 35, 10, .6);
  z-index: 2;
}
.card-title { margin: 0 0 10px; font: 1.25rem/1.25 var(--f-type); }
.card-then { margin: 0 0 10px; white-space: pre-line; }
.card-now { margin: 0 0 12px; white-space: pre-line; color: var(--green); }
.card-now span { font-family: var(--f-type); text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; }
.card-meta {
  display: flex; flex-wrap: wrap; gap: 2px 12px;
  padding-top: 8px; border-top: 1px dashed rgba(43, 34, 27, .35);
  font-size: .8rem; color: var(--ink-soft);
}
.card-author { color: var(--ink); font-weight: 700; }

.card-year {
  float: right;
  margin: -6px -6px 8px 12px;
  padding: 2px 8px;
  border: 2px solid currentColor;
  border-radius: 3px;
  color: var(--red-ink);
  font: 1.35rem/1.1 var(--f-type);
  transform: rotate(-7deg);
  opacity: .85;
  mix-blend-mode: multiply;
}

/* index card */
.card--index {
  padding-top: 16px;
  line-height: 28px;
  background:
    linear-gradient(var(--margin-red), var(--margin-red)) 0 50px / 100% 2px no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 27px, var(--blue-rule) 27px 28px) 0 52px / 100% calc(100% - 52px) no-repeat,
    var(--paper);
}
.card--index .card-title { min-height: 34px; margin-bottom: 8px; }

/* postcard */
.card--postcard { background: var(--cream); padding-right: 96px; min-height: 180px; }
.card--postcard::after { /* the address divider */
  content: ""; position: absolute; top: 96px; bottom: 22px; right: 80px; border-left: 1px solid rgba(43, 34, 27, .25);
}
.pc-stamp {
  position: absolute; top: 14px; right: 14px; width: 56px; height: 66px;
  display: grid; place-items: center; text-align: center;
  font: .8rem/1.1 var(--f-type); color: #fff4e0;
  background: var(--green);
  outline: 4px dotted var(--cream); outline-offset: -2px;
  border: 4px solid var(--cream);
}
.card--postcard .card-year {
  position: absolute; top: 44px; right: 40px; float: none; margin: 0;
  width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center;
  font-size: 1.05rem; color: rgba(40, 40, 60, .65); border-width: 2px;
  transform: rotate(-16deg);
}

/* notebook page with punched holes */
.card--notebook {
  padding-left: 54px;
  line-height: 30px;
  background:
    radial-gradient(circle at 20px 40px, var(--kraft) 0 7px, rgba(0, 0, 0, .15) 7.5px, transparent 8.5px) 0 0 / 100% 90px repeat-y,
    linear-gradient(var(--margin-red), var(--margin-red)) 40px 0 / 2px 100% no-repeat,
    repeating-linear-gradient(to bottom, transparent 0 29px, var(--blue-rule) 29px 30px),
    #fdfcf6;
}
.card--notebook .card-then, .card--notebook .card-now { font: 1.4rem/30px var(--f-hand); }
.card--notebook .card-year { font-family: var(--f-hand); font-size: 1.6rem; border: 0; color: var(--burgundy); }

/* till receipt */
.card--receipt {
  width: 90%; margin-inline: auto;
  padding-bottom: 26px;
  background: #fbfbf4;
  font-size: .9rem;
  text-transform: none;
}
.card--receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 10px;
  background:
    linear-gradient(135deg, #fbfbf4 50%, transparent 50%) 0 0 / 14px 10px repeat-x,
    linear-gradient(-135deg, #fbfbf4 50%, transparent 50%) 0 0 / 14px 10px repeat-x;
}
.rcpt-head, .rcpt-foot { text-align: center; font-size: .8rem; letter-spacing: .05em; }
.rcpt-head { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 2px dashed rgba(43, 34, 27, .4); }
.rcpt-foot { padding-top: 12px; margin-top: 10px; border-top: 2px dashed rgba(43, 34, 27, .4); }
.card--receipt .card-title { font-family: var(--f-mono); font-weight: 700; text-transform: uppercase; font-size: 1rem; }
.card--receipt .card-meta { border-top: 0; }

/* sticky note */
.card--sticky {
  background: linear-gradient(170deg, #fbee9e, var(--sticky) 60%, #eed565);
  box-shadow: 0 1px 1px rgba(40, 25, 10, .15), 6px 14px 16px -12px rgba(60, 35, 10, .6);
}
.card--sticky::before {
  content: ""; position: absolute; top: -13px; left: calc(50% - 50px); width: 100px; height: 28px;
  background: rgba(235, 240, 245, .6); transform: rotate(-3deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}
.card--sticky .card-title { font: 1.7rem/1.1 var(--f-hand); font-weight: 700; }
.card--sticky .card-then, .card--sticky .card-now { font: 1.35rem/1.3 var(--f-hand); }
.card--sticky .card-year { font-family: var(--f-hand); font-size: 1.6rem; }

/* an old desktop text file */
.card--window { padding: 0; background: #e8e2d4; border: 2px solid var(--ink); box-shadow: 4px 4px 0 rgba(43, 34, 27, .55); }
.card--window:hover, .card--window:focus-visible { box-shadow: 8px 10px 0 rgba(43, 34, 27, .45); }
.win-bar {
  display: flex; align-items: center; gap: 8px; padding: 4px 8px;
  border-bottom: 2px solid var(--ink);
  background: repeating-linear-gradient(to bottom, var(--ink) 0 1px, #e8e2d4 1px 3px);
  font: .85rem var(--f-mono);
}
.win-close { width: 14px; height: 14px; border: 2px solid var(--ink); background: #e8e2d4; flex: none; }
.win-name { background: #e8e2d4; padding: 0 8px; margin-inline: auto; font-weight: 700; }
.win-body { margin: 6px; padding: 14px 16px 10px; background: #fff; border: 1px solid rgba(43, 34, 27, .5); font-size: .95rem; }
.card--window .card-year { color: var(--ink); font-family: var(--f-lcd); font-size: 1.5rem; transform: none; border-radius: 0; }

.more { display: block; margin: 0 auto 40px; }

/* ───────── buttons that look like things ───────── */
.stamp-btn {
  display: inline-block;
  padding: 10px 18px;
  font: 1.15rem var(--f-type);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--burgundy);
  background: rgba(255, 253, 246, .9);
  border: 3px double var(--burgundy);
  border-radius: 6px;
  transform: rotate(-2deg);
  cursor: pointer;
  transition: transform .15s;
}
.stamp-btn:hover { transform: rotate(0) scale(1.04); color: var(--red-ink); }
.stamp-btn:active { transform: scale(.97); }
.stamp-btn[disabled] { opacity: .55; cursor: wait; }
.stamp-btn.is-on { background: var(--burgundy); color: #fff4e0; }

.float-cta { position: fixed; right: 18px; bottom: 18px; z-index: 20; box-shadow: var(--shadow-paper); }

/* ───────── sheets (single memory, forms, rules) ───────── */
.sheet {
  position: relative;
  max-width: 720px;
  margin: 26px auto 40px;
  padding: 34px clamp(18px, 5vw, 56px) 30px;
  background:
    linear-gradient(var(--margin-red), var(--margin-red)) clamp(10px, 3vw, 40px) 0 / 2px 100% no-repeat,
    var(--paper);
  box-shadow: var(--shadow-paper);
}
.sheet h1, .sheet h2 { font-family: var(--f-type); font-weight: normal; line-height: 1.2; }
.sheet h1 { font-size: clamp(1.7rem, 5vw, 2.4rem); margin: 0 0 8px; }
.sheet h2 { font-size: 1.25rem; margin: 28px 0 8px; }
.hand { font-family: var(--f-hand); font-size: 1.45rem; line-height: 1.3; }

.memory-then-label, .memory-now-label {
  display: inline-block; margin: 24px 0 6px; padding: 2px 10px;
  font: .95rem var(--f-type); letter-spacing: .12em; text-transform: uppercase;
  border: 2px solid currentColor; transform: rotate(-2deg);
}
.memory-then-label { color: var(--red-ink); }
.memory-now-label { color: var(--green); }
.memory-body { font: 1.08rem/1.8 var(--f-serif); white-space: pre-line; margin: 0; }
.memory-year-big { font: clamp(3.4rem, 14vw, 6rem)/1 var(--f-lcd); color: var(--burgundy); margin: 0; }
.memory-byline { color: var(--ink-soft); margin: 4px 0 0; }
.memory-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 30px; }
.typed-stamp {
  display: inline-block; margin-top: 26px; padding: 6px 12px;
  font: .9rem var(--f-type); color: var(--green);
  border: 2px dashed var(--green); border-radius: 4px; transform: rotate(1.5deg);
}
.memory-actions--secondary { margin-top: 14px; }

/* ───────── resident puzzles and reactions ───────── */

.puzzle-board {
  margin: 20px 0; padding: 16px 18px; overflow-x: auto;
  font: 1rem/1.5 var(--f-mono); white-space: pre-wrap; color: var(--ink);
  background: var(--paper); border: 2px dashed var(--ink-soft); border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(43, 34, 27, .12);
}
.puzzle-answer { margin: 12px 0 0; font-family: var(--f-type); }
.puzzle-answer summary { cursor: pointer; color: var(--burgundy); }
.puzzle-answer .hint { margin: 0; }
.puzzle-answer pre { margin: 6px 0 0; font: 1rem/1.5 var(--f-mono); white-space: pre; overflow-x: auto; }
.card-puzzle { margin: 6px 0 0; font: .9rem var(--f-type); color: var(--burgundy); }

.game-badge {
  display: inline-block; margin: 14px 0 4px; padding: 4px 10px;
  font: .95rem var(--f-type); letter-spacing: .04em; text-transform: uppercase; color: var(--paper);
  background: var(--burgundy); border-radius: 3px; transform: rotate(-1deg);
}
.play { margin: 8px 0 6px; padding: 14px 16px; background: var(--cream); border-left: 4px solid var(--burgundy); }
.play-stats { margin: 0 0 10px; font: .95rem var(--f-type); color: var(--ink-soft); }
.play-result { margin: 0; font: 1rem var(--f-type); }
.play-result.is-win { color: var(--green); }
.play-line { margin: 10px 0 0; font: 1.35rem/1.3 var(--f-hand); color: var(--burgundy); }
.play-line:empty { display: none; }
.solve label { display: block; font: .95rem var(--f-type); margin-bottom: 6px; }
.solve-row { display: flex; flex-wrap: wrap; gap: 8px; }
.solve-row input {
  flex: 1 1 200px; min-width: 0; padding: 8px 10px; font: 1.1rem var(--f-mono); text-transform: uppercase;
  background: var(--paper); border: 2px solid var(--ink-soft); border-radius: 3px;
}
.solve .hint { margin: 8px 0 0; }
.solve textarea {
  display: block; width: 100%; margin-bottom: 8px; padding: 8px 10px; font: 1rem var(--f-mono);
  background: var(--paper); border: 2px solid var(--ink-soft); border-radius: 3px;
}

/* Name Place Animal Thing, played on the page: the board with blanks you type into. */
.npat {
  margin: 0 0 4px; padding: 14px 16px; font-family: var(--f-mono);
  background: var(--paper); border: 2px dashed var(--ink-soft); border-radius: 4px;
}
.npat-head { margin: 0 0 10px; font-size: .95rem; letter-spacing: .03em; }
.npat-head b { font: 1.6rem/1 var(--f-lcd); color: var(--burgundy); vertical-align: -2px; }
.npat-row { display: flex; align-items: baseline; gap: 8px; margin: 4px 0; }
.npat-label { white-space: pre; font-weight: 700; }
.npat-input, .npat-filled {
  flex: 1; min-width: 0; padding: 2px 4px; font: 1.1rem var(--f-mono); text-transform: uppercase;
  background: transparent; border: 0; border-bottom: 2px dashed var(--ink);
}
.npat-input:focus { outline: none; border-bottom-style: solid; border-bottom-color: var(--burgundy); }
.npat .stamp-btn { margin-top: 12px; }
/* Mini sudoku */
.sudoku {
  display: grid; grid-template-columns: repeat(6, minmax(0, 46px)); width: fit-content; max-width: 100%;
  margin: 4px 0 12px; border: 3px solid var(--ink); background: var(--paper);
}
.sudoku-cell {
  display: flex; align-items: center; justify-content: center; aspect-ratio: 1; min-width: 0; width: 100%;
  font: 1.35rem var(--f-mono); text-align: center; color: var(--burgundy);
  border: 1px solid rgba(43, 34, 27, .35); border-radius: 0; background: transparent; padding: 0;
}
.sudoku-cell.is-given { color: var(--ink); font-weight: 700; background: var(--cream); }
.sudoku-cell.box-right { border-right: 3px solid var(--ink); }
.sudoku-cell.box-bottom { border-bottom: 3px solid var(--ink); }
input.sudoku-cell:focus { outline: 3px solid var(--burgundy); outline-offset: -3px; }

/* Link the boxes */
.link {
  display: grid; grid-template-columns: repeat(var(--size), minmax(0, 52px)); width: fit-content; max-width: 100%;
  margin: 4px 0 8px; border: 3px solid var(--ink); background: var(--paper); touch-action: none; user-select: none;
}
.link-cell {
  aspect-ratio: 1; min-width: 0; width: 100%; padding: 0; cursor: pointer;
  font: 700 1.3rem var(--f-mono); color: var(--ink);
  border: 1px solid rgba(43, 34, 27, .25); border-radius: 0; background: transparent;
  transition: background-color .08s;
}
.link-cell[data-number] { border-radius: 50%; box-shadow: inset 0 0 0 3px var(--ink); }
.link-cell.is-path { color: #fff; opacity: .78; }
.link-cell.is-path[data-number] { opacity: 1; }
.link-cell.is-done { opacity: 1; }

/* Book cricket */
.scoreboard {
  display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 8px 12px; margin-bottom: 12px;
  font: 1.6rem/1 var(--f-lcd); color: var(--lcd); background: var(--lcd-bg); border-radius: 6px;
}
.scoreboard small { display: block; font: .7rem var(--f-type); color: var(--cream); letter-spacing: .08em; }
.book { display: flex; max-width: 360px; margin: 0 0 10px; perspective: 900px; }
.book-page {
  flex: 1; min-height: 130px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--paper); border: 2px solid var(--ink-soft); box-shadow: var(--shadow-paper); font-family: var(--f-type);
}
.book-left { border-radius: 6px 0 0 6px; border-right-width: 1px; }
.book-right { border-radius: 0 6px 6px 0; border-left-width: 1px; transform-origin: left center; }
.book-page b { font: 3rem/1 var(--f-lcd); color: var(--ink); }
.book-page small { color: var(--ink-soft); }
.book-out { color: var(--red-ink) !important; }
.book.is-flipping .book-right { animation: page-flip .45s ease-in-out; }
@keyframes page-flip { 50% { transform: rotateY(-90deg); } }
.book.is-closed { opacity: .75; }
.flip-log { margin: 0 0 10px; font: .9rem var(--f-mono); color: var(--ink-soft); word-spacing: 4px; }
.flip-log .is-out { color: var(--red-ink); font-weight: 700; }

/* Hand cricket */
.hands { display: flex; align-items: center; gap: 14px; margin: 4px 0 10px; }
.hand-throw { display: flex; flex-direction: column; align-items: center; min-width: 72px; padding: 6px 10px; font-size: 2.2rem; background: var(--paper); border: 2px solid var(--ink-soft); border-radius: 8px; }
.hand-throw small { font: .75rem var(--f-type); color: var(--ink-soft); }
.hand-throw b { font: 1.4rem var(--f-lcd); }
.hand-vs { font: 1.2rem var(--f-type); color: var(--ink-soft); }
.finger-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0; }
.finger {
  display: flex; flex-direction: column; align-items: center; min-width: 54px; padding: 6px 8px; cursor: pointer;
  font-size: 1.8rem; background: var(--paper); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 0 3px 0 var(--ink);
}
.finger b { font: 1.1rem var(--f-lcd); }
.finger:active, .finger.is-pressed { transform: translateY(3px); box-shadow: none; }
.finger:disabled { opacity: .6; cursor: wait; }

/* Dots and boxes */
.dots {
  display: grid; grid-template-columns: repeat(3, 14px 1fr) 14px; grid-template-rows: repeat(3, 14px 1fr) 14px;
  width: min(100%, 320px); aspect-ratio: 1; margin: 6px 0 10px; padding: 8px; background: var(--paper);
  border: 2px dashed var(--ink-soft); border-radius: 4px;
}
.dot { width: 14px; height: 14px; border-radius: 50%; background: var(--ink); }
.dline { display: block; border: 0; padding: 0; margin: 0; background: transparent; }
button.dline { cursor: pointer; }
button.dline:hover, button.dline:focus-visible { background: rgba(140, 47, 57, .35); }
.dline-h { height: 14px; }
.dline-v { width: 14px; }
.dline.is-you { background: var(--burgundy); }
.dline.is-agent { background: var(--green); }
.dline-h.is-you, .dline-h.is-agent { height: 8px; margin-top: 3px; border-radius: 4px; }
.dline-v.is-you, .dline-v.is-agent { width: 8px; margin-left: 3px; border-radius: 4px; }
.dbox { display: flex; align-items: center; justify-content: center; font: .8rem var(--f-type); color: #fff; }
.dbox.is-you { background: rgba(140, 47, 57, .75); }
.dbox.is-agent { background: rgba(47, 93, 80, .75); }

.play-answers { margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(43, 34, 27, .35); }
.play-answers-title { margin: 0 0 6px; font: .9rem var(--f-type); text-transform: uppercase; color: var(--ink-soft); }
.play-answer { margin: 4px 0; font: .95rem/1.5 var(--f-mono); }
.play-answer-by { font-weight: 700; color: var(--burgundy); margin-right: 6px; }
.npat-chip { display: inline-block; margin-right: 8px; }
.npat-chip b { color: var(--ink-soft); }

/* The one thing in the cardboard margin. It only floats (and follows the scroll) when the margin beside the full
   1180px page is wide enough to hold it without covering posts; otherwise it sits still above the feed. */
.leaderboard {
  max-width: 420px; margin: 26px auto 0; padding: 14px 16px;
  background: var(--paper); border: 2px dashed var(--ink-soft); border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(43, 34, 27, .15); transform: rotate(.6deg);
}
.lb-title { margin: 0; font: 1.05rem var(--f-type); text-transform: uppercase; letter-spacing: .03em; }
.lb-sub { margin: 2px 0 8px; font: 1.1rem var(--f-hand); color: var(--ink-soft); }
.leaderboard ol { list-style: none; margin: 0; padding: 0; }
.leaderboard li { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-top: 1px dotted rgba(43, 34, 27, .3); font-family: var(--f-mono); }
.leaderboard li.is-me { color: var(--burgundy); font-weight: 700; }
.lb-rank { width: 1.6em; text-align: center; }
.lb-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-family: var(--f-lcd); font-size: 1.3rem; }
.lb-empty, .lb-me { margin: 6px 0 0; font: 1.1rem var(--f-hand); }
@media (min-width: 1680px) {
  .leaderboard:not(.leaderboard--inline) {
    position: fixed; top: 150px; right: max(12px, calc((100vw - 1180px) / 2 - 236px));
    width: 220px; margin: 0; z-index: 5;
  }
}

.reactions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 26px; }
.reactions-label { font: .95rem var(--f-type); color: var(--ink-soft); margin-right: 4px; }
.reaction {
  display: inline-flex; align-items: center; gap: 4px; min-width: 52px; justify-content: center;
  padding: 6px 10px; font: 1.1rem var(--f-type); color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink-soft); border-radius: 999px; cursor: pointer;
}
.reaction:hover { transform: translateY(-1px); }
.reaction.is-on { border-color: var(--burgundy); background: var(--cream); }
.reaction--static { cursor: default; }
.reaction-count { font-size: .9rem; min-width: 1ch; }
.stamp-btn--green { color: var(--green); border-color: var(--green); }
.stamp-btn--green:hover { color: #1f4a3f; }
.stamp-btn--plain { color: var(--ink); border-color: var(--ink-soft); transform: rotate(1.5deg); }
.in-reply { margin: 0 0 14px; padding: 6px 12px; background: var(--cream); border-left: 3px solid var(--green); font-size: .9rem; }
.versions { margin-top: 34px; padding-top: 18px; border-top: 2px dashed rgba(43, 34, 27, .35); }
.versions h2 { margin-top: 0; }
.version {
  display: grid; gap: 2px; margin: 0 0 12px; padding: 12px 14px;
  color: var(--ink); text-decoration: none;
  background: #fdfaf0; border: 1px solid rgba(43, 34, 27, .18);
  box-shadow: 2px 3px 0 rgba(43, 34, 27, .12);
  transition: transform .15s;
}
.version:hover { color: var(--ink); transform: translateX(4px); }
.version-year { font: 1.2rem/1 var(--f-lcd); color: var(--burgundy); }
.version-by, .version-meta { font-size: .82rem; color: var(--ink-soft); }
.version-text { font: .98rem/1.6 var(--f-serif); }
.card-thread { font-size: .8rem; color: var(--green); margin: -4px 0 8px; }
.notice { padding: 12px 16px; margin-bottom: 18px; background: var(--sticky); font-family: var(--f-type); box-shadow: var(--shadow-paper); }
.report { margin-top: 30px; font-size: .9rem; color: var(--ink-soft); }
.report summary { cursor: pointer; }
.report form { display: grid; gap: 10px; margin-top: 10px; max-width: 420px; }

/* forms, typewriter style */
.field { display: grid; gap: 4px; margin-bottom: 20px; }
.field label, .field .label { font: .95rem var(--f-type); letter-spacing: .05em; text-transform: uppercase; }
.field .hint { font-size: .85rem; color: var(--ink-soft); }
.field-row { display: flex; flex-wrap: wrap; gap: 0 22px; }
.field-row .field { flex: 1 1 180px; }
input[type="text"], input[type="number"], select, textarea {
  width: 100%;
  font: 1.05rem/1.6 var(--f-mono);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid rgba(43, 34, 27, .55);
  border-radius: 0;
  padding: 6px 2px;
}
textarea {
  resize: vertical;
  line-height: 32px;
  padding-top: 0;
  border: 1px solid rgba(43, 34, 27, .3);
  padding-inline: 8px;
  background: repeating-linear-gradient(to bottom, transparent 0 31px, var(--blue-rule) 31px 32px) 0 0 / 100% 32px local;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--burgundy); background-color: rgba(245, 226, 126, .12); }
.count { justify-self: end; font-size: .8rem; color: var(--ink-soft); }
.checkbox { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; }
.checkbox input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--burgundy); flex: none; }

.lcd-panel {
  display: flex; flex-wrap: wrap; gap: 6px 22px; justify-content: space-between; align-items: center;
  margin: 0 0 24px; padding: 10px 14px;
  background: var(--lcd-bg); color: var(--lcd);
  font: 1.3rem/1.1 var(--f-lcd); letter-spacing: .06em;
  border-radius: 4px; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .7);
  text-shadow: 0 0 6px rgba(157, 252, 139, .5);
}
.lcd-panel small { color: #6fae63; font-size: 1rem; }

.ritual { margin: 0 0 24px; padding: 14px 18px; background: var(--cream); border-left: 4px solid var(--green); font-size: .92rem; }
.ritual p { margin: 0 0 6px; }
.ritual p:last-child { margin: 0; }

.form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; margin-top: 10px; }
.error { color: var(--red-ink); font-weight: 700; margin: 0; }

.shake { animation: shake .35s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 60;
  max-width: min(92vw, 460px);
  padding: 12px 18px;
  background: var(--sticky); color: var(--ink);
  font: 1.35rem/1.25 var(--f-hand);
  box-shadow: var(--shadow-paper);
  transform: translate(-50%, 140%) rotate(-1deg);
  transition: transform .3s ease;
}
.toast.show { transform: translate(-50%, 0) rotate(-1deg); }

/* ───────── old-web footer ───────── */
.site-footer {
  margin: 30px auto 0;
  padding-block: 26px 90px;
  max-width: 760px;
  text-align: center;
  font-size: .9rem;
  color: var(--ink);
  border-top: 2px dashed rgba(43, 34, 27, .35);
}
.site-footer p { margin: 8px 0; }
.about-blurb { max-width: 600px; margin: 0 auto 18px !important; font-size: .88rem; line-height: 1.6; color: var(--ink-soft); }
.counter-box { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-type); }
.lcd {
  display: inline-block; padding: 2px 8px; letter-spacing: .15em;
  background: #000; color: #ff4f3a; font: 1.5rem/1 var(--f-lcd);
  border: 2px inset #777; text-shadow: 0 0 6px rgba(255, 79, 58, .6);
}
.badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 14px 0; }
.badge88 {
  width: 88px; height: 31px;
  display: grid; place-items: center;
  font: 11px/1 var(--f-lcd); letter-spacing: .04em; text-align: center; text-transform: uppercase;
  border: 2px outset #ddd;
  image-rendering: pixelated;
  overflow: hidden;
}
.b-hand { background: linear-gradient(#a8434d, var(--burgundy)); color: #fff4e0; }
.b-noai { background: repeating-linear-gradient(45deg, #111 0 4px, #333 4px 8px); color: var(--lcd); }
.b-18 { background: linear-gradient(#2f5d50, #173a31); color: var(--sticky); }
.b-eyes { background: linear-gradient(#c0c0c0, #8a8a8a); color: #000080; }
.b-cf { background: linear-gradient(#f6a13a, #d06b10); color: #fff; }
.webring { font-family: var(--f-type); }

/* ───────── why this exists ───────── */
.why-sheet p, .why-sheet li { font: 1.02rem/1.8 var(--f-serif); }
.why-sheet .hand { font: 1.55rem/1.3 var(--f-hand); }
.polaroid {
  position: relative;
  float: right;
  width: min(220px, 42%);
  margin: -6px -8px 16px 22px;
  padding: 10px 10px 34px;
  background: #fff;
  box-shadow: var(--shadow-paper);
  transform: rotate(3deg);
}
.polaroid::before { /* tape */
  content: ""; position: absolute; top: -12px; left: calc(50% - 40px); width: 80px; height: 24px;
  background: rgba(240, 228, 190, .8); transform: rotate(-4deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
}
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; background: #f4f1ea; }
.polaroid figcaption {
  position: absolute; left: 0; right: 0; bottom: 6px;
  text-align: center; font: 1.3rem/1 var(--f-hand); color: var(--ink);
}
.why-links { clear: both; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 26px; }
.badge-link {
  width: 88px; height: 31px; display: grid; place-items: center; text-align: center;
  font: 11px/1 var(--f-lcd); letter-spacing: .04em; text-transform: uppercase; text-decoration: none;
  color: #fff; background: linear-gradient(#2a74b5, #0a4a86); border: 2px outset #ddd;
}
.badge-link:hover { color: #fff; filter: brightness(1.15); }
.badge-link--home { background: linear-gradient(#f3e8cf, #c9b68b); color: var(--ink); }
.badge-link--home:hover { color: var(--ink); }
@media (max-width: 560px) {
  .polaroid { float: none; width: 200px; margin: 0 auto 22px; }
}

/* ───────── resident time travellers ───────── */
.resident-profile { padding: 22px 0 10px; border-top: 2px dashed rgba(43, 34, 27, .3); }
.resident-profile h2 { margin: 2px 0 6px; font-size: 1.5rem; }
.resident-badge {
  display: inline-block; margin: 0; padding: 1px 8px;
  font: .8rem var(--f-lcd); letter-spacing: .12em; color: var(--green);
  border: 1px solid currentColor; transform: rotate(-1.5deg);
}
.resident-bio { font: 1.4rem/1.3 var(--f-hand); margin: 0 0 4px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 18px; align-items: end; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.admin-table th, .admin-table td { padding: 6px 8px; border-bottom: 1px dashed rgba(43, 34, 27, .25); text-align: left; vertical-align: top; }
.admin-table input[type="number"] { width: 5.5em; }
.preview-card { margin: 14px 0; padding: 16px; background: var(--cream); border-left: 4px solid var(--green); }
.run-published { color: var(--green); font-weight: 700; }
.run-failed, .run-rejected { color: var(--red-ink); }

/* ───────── back office ───────── */
.admin-sheet { max-width: 900px; }
.admin-item { padding: 18px 0 22px; border-bottom: 2px dashed rgba(43, 34, 27, .3); }
.admin-item header { font-size: .85rem; color: var(--ink-soft); }
.admin-item h3 { font: 1.2rem var(--f-type); margin: 10px 0 6px; }
.admin-item .memory-body { font-size: .98rem; line-height: 1.65; }
.admin-now { color: var(--green); margin-top: 8px; }
.admin-status { display: inline-block; padding: 0 6px; margin-right: 6px; font-family: var(--f-type); border: 1px solid currentColor; }
.admin-pending { color: #8a6d00; }
.admin-held, .admin-published { color: var(--red-ink); }
.flag { display: inline-block; padding: 1px 8px; background: var(--sticky); font-size: .85rem; }
.flag-red { background: #f3c1bd; }
.admin-actions { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 14px; }
.admin-actions .stamp-btn { font-size: .95rem; padding: 6px 12px; }
.admin-danger { color: var(--red-ink); border-color: var(--red-ink); }
.admin-note { flex: 1 1 220px; font-size: .9rem !important; }
.admin-user-actions { font-size: .85rem; color: var(--ink-soft); }
.admin-log { font-size: .85rem; padding-left: 20px; }
.admin-letter.is-new { background: linear-gradient(90deg, rgba(245, 226, 126, .25), transparent 60%); }
.prompt-list { margin: 6px 0 0; padding-left: 20px; }
.contact-line { margin-top: 28px; padding-top: 14px; border-top: 1px dashed rgba(43, 34, 27, .35); font-size: .92rem; }
.admin-when { color: var(--ink-soft); }

/* ───────── small screens + reduced motion ───────── */
@media (max-width: 560px) {
  .digit { width: 36px; height: 54px; font-size: 2.6rem; line-height: 54px; }
  .digit .strip span { height: 54px; }
  .lever { min-width: 64px; height: 54px; font-size: 1.3rem; }
  .card--postcard { padding-right: 22px; padding-top: 96px; }
  .card--postcard::after { display: none; }
  .card--postcard .card-year { top: 20px; right: auto; left: 18px; }
  .float-cta { right: 12px; bottom: 12px; font-size: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker-track { padding-left: 0; }
  .card, .card:hover { transform: none; }
}