/* Fix & Flank — a paper map on a dark table, under one lamp.
 *
 * There is deliberately no light mode and no dark mode. The game is a physical
 * object: a buff survey sheet on old oak, marked up in chinagraph. It looks the
 * same at every hour because the lamp does.
 */

:root {
  --table: #191510;
  --table-2: #0c0a07;
  --paper: #d5c7a4;
  --paper-2: #e6dcc1;
  --card: #e3d8bd;
  --card-2: #cfc2a2;
  --ink: #241f17;
  --ink-2: #574d3c;
  --ink-3: #877b62;
  --rule: #b5a684;
  --us: #1d3d52;
  --us-2: #4d7690;
  --them: #8d221a;
  --them-2: #c4674e;
  --flag: #b8860f;
  --stamp: #a32b1e;
  --good: #4c6b32;

  --pad-w: 360px;
  --strip-h: 56px;

  --serif: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --stencil: "Big Shoulders Display", "Archivo Narrow", Impact, sans-serif;
  --type: "Special Elite", "Courier New", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  color: var(--paper-2);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  /* One table, not a tiled one — a visible seam every 900px reads as
     wallpaper, and the whole point is that this is a physical object. */
  background: var(--table-2) url("/art/tex/table.webp") center / cover no-repeat fixed;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
  overflow-x: hidden;
}
/* The lamp. Everything falls off into the dark at the edges of the table. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 42% 26%, rgba(255, 228, 168, 0.16), transparent 62%),
    radial-gradient(140% 120% at 50% 45%, transparent 38%, rgba(0, 0, 0, 0.72) 100%);
}

h1, h2, h3 { margin: 0; font-family: var(--stencil); font-weight: 800; line-height: 0.94; letter-spacing: 0.01em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--flag); outline-offset: 2px; }
a { color: inherit; }
.type { font-family: var(--type); }
.hide { display: none !important; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ================================================================== *
 * The strip along the top of the table — a stencilled title, a date,
 * and one brass tab. Not a navigation bar.
 * ================================================================== */

.strip {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px 6px;
  min-height: var(--strip-h);
}
.mark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 27px;
  text-transform: uppercase;
  letter-spacing: -0.012em;
  color: var(--paper);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.55);
  white-space: nowrap;
}
.mark em { font-style: normal; color: var(--them-2); }
/* The helmet inks itself from .mark's colour. It carries no text-shadow of its
   own -- a drop shadow on a silhouette this small only muddies its edge. */
.mark .helmet { flex: none; display: block; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55)); }
.dateline {
  font-family: var(--type);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9c8c6d;
  line-height: 1.35;
  border-left: 1px solid #4a4030;
  padding-left: 12px;
}
.strip .spacer { flex: 1; }
.hud { display: none; }
.tab {
  font-family: var(--stencil);
  font-size: 15px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d8c79c;
  padding: 7px 13px 6px;
  background: linear-gradient(#3a3122, #241d13);
  border: 1px solid #5c4f36;
  border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 226, 160, 0.16), 0 2px 5px rgba(0, 0, 0, 0.5);
}
.tab:hover { filter: brightness(1.2); }
.tab.on { background: linear-gradient(#6e5a2a, #4a3b18); color: #ffeec2; }
#doctrine { display: inline-flex; align-items: center; gap: 7px; }
#doctrine .flag { margin: 0; }

/* ================================================================== *
 * The table top
 * ================================================================== */

.table {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pad-w);
  gap: 18px;
  align-items: start;
  padding: 0 16px 20px;
  max-width: 1500px;
  margin: 0 auto;
}

/* ---- the map sheet ---- */

.mapwrap { position: relative; min-width: 0; }
/* Whole map: the sheet lies on the table, tape and pencil spilling over the
   edges of the window the way they would in life, and nothing scrolls.
   Close up: the same box becomes a window onto a sheet bigger than itself, and
   the map is scrolled INSIDE it rather than off the side of the page, so no
   part of it can end up somewhere you cannot reach. */
.viewport { position: relative; }
.viewport.close {
  overflow: auto;
  max-height: calc(100dvh - var(--strip-h) - 96px);
  overscroll-behavior: contain;
}
.sheet { margin: 0 auto; }

.sheet {
  position: relative;
  transform: rotate(-0.35deg);
  filter: drop-shadow(0 18px 26px rgba(0, 0, 0, 0.62));
  touch-action: none;
}
.sheet::after {
  /* the sheet has been folded and unfolded a great many times */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 33.2%, rgba(0, 0, 0, 0.09) 33.4%, transparent 33.7%),
    linear-gradient(90deg, transparent 66.4%, rgba(0, 0, 0, 0.07) 66.6%, transparent 66.9%),
    linear-gradient(0deg, transparent 49.7%, rgba(0, 0, 0, 0.1) 50%, transparent 50.3%);
  mix-blend-mode: multiply;
}
#board { display: block; width: 100%; height: auto; touch-action: none; }

/* the sheet is taped down at two corners, because one corner always lifts */
.tape {
  position: absolute;
  width: 118px;
  height: 34px;
  background: url("/art/prop/tape-a.webp") center / contain no-repeat;
  opacity: 0.86;
  pointer-events: none;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.45));
}
.tape.tl { top: -13px; left: -30px; transform: rotate(-38deg); }
.tape.br { bottom: -14px; right: -32px; transform: rotate(-38deg); background-image: url("/art/prop/tape-b.webp"); }

.prop { position: absolute; pointer-events: none; z-index: 2; }
.prop.pencil {
  width: 190px; height: 60px; right: -46px; bottom: -30px;
  background: url("/art/prop/pencil.webp") center / contain no-repeat;
  transform: rotate(-14deg);
  filter: drop-shadow(0 6px 7px rgba(0, 0, 0, 0.6));
}
.prop.clipprop {
  width: 74px; height: 74px; left: -26px; top: 46%;
  background: url("/art/prop/clip.webp") center / contain no-repeat;
  transform: rotate(-72deg);
  filter: drop-shadow(0 5px 6px rgba(0, 0, 0, 0.55));
}

/* ---- the strip of controls under the map ---- */

.mapbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.track { display: flex; gap: 5px; align-items: center; }
.track i {
  display: block; width: 21px; height: 12px;
  border: 1.6px solid #6b5e44; border-radius: 1px;
  background: rgba(0, 0, 0, 0.25);
}
.track i.done { background: var(--them); border-color: var(--them); }
.track i.now { background: var(--flag); border-color: #e0b64c; box-shadow: 0 0 8px rgba(216, 166, 60, 0.55); }
.tinylab {
  font-family: var(--type); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: #97886a;
}

/* ================================================================== *
 * The board itself. Everything here is either printed on the sheet or
 * pencilled onto it afterwards — there are no UI widgets on the map.
 * ================================================================== */

#board text { font-family: var(--type); fill: var(--ink-2); }

/* printed marginalia */
.reflab {
  font-size: 13px; letter-spacing: 0.1em; fill: #6d6047;
  text-anchor: middle; dominant-baseline: middle;
}
.sheetname { font-size: 10px; letter-spacing: 0.22em; }
.sheetname { fill: #7d6d47; text-anchor: start; }
.scalebar path { stroke: #6d6047; stroke-width: 1.4; fill: none; }
.scalebar text { font-size: 8.5px; letter-spacing: 0.16em; fill: #85764f; text-anchor: middle; }
.northmark path { fill: #6d6047; }
.dump rect { fill: none; stroke: #6b7a3f; stroke-width: 1.6; }
.dump text { font-size: 8px; letter-spacing: 0.16em; fill: #6b7a3f; text-anchor: middle; }
.northmark text { font-size: 11px; letter-spacing: 0.1em; fill: #6d6047; text-anchor: middle; }

/* the grid, ruled in pencil by somebody in a hurry */
#grid polygon { fill: none; stroke: #7d6f52; stroke-width: 0.9; opacity: 0.5; }

/* ground printed under everything else */
.water polygon { fill: #7c9099; stroke: #5d7079; stroke-width: 1.5; opacity: 0.92; }
.ground .road { fill: #b9a172; opacity: 0.5; stroke: none; }
.ground .rough { fill: #a99878; opacity: 0.3; stroke: none; }
.contour path { fill: none; stroke: #97794a; stroke-width: 1.1; opacity: 0.5; }

/* ---- the pieces ---- */
.piece { pointer-events: none; transition: transform 0.24s cubic-bezier(0.3, 0.9, 0.4, 1); }
.piece.gone { display: none; }
.namelab {
  font-size: 10px; letter-spacing: 0.09em; text-anchor: middle;
  fill: var(--ink); paint-order: stroke; stroke: rgba(238, 230, 208, 0.8); stroke-width: 3px;
}
.pinlab, .cutlab, .exitlab, .dmglab {
  font-size: 9px; letter-spacing: 0.14em; text-anchor: middle; font-weight: 700;
  paint-order: stroke; stroke: rgba(238, 230, 208, 0.75); stroke-width: 3px;
}
.pinlab { fill: var(--stamp); }
.cutlab { fill: #8a5a09; }
.exitlab { fill: #1d3d52; font-size: 8.5px; }
.dmglab { fill: var(--stamp); font-size: 12px; }
.dmglab.kill { fill: #7a1c15; font-size: 11px; letter-spacing: 0.1em; }
#topmarks { pointer-events: none; }
.arc.mine .arcbar { stroke: #1d3d52; stroke-linecap: round; }
.arc.theirs .arcbar { stroke: #8d221a; stroke-linecap: round; }
.piece.sel .namelab { fill: #7a4a06; }

/* ---- chinagraph: what they will do ---- */
.firezone { fill: url(#hatchRed); stroke: #8d221a; stroke-width: 1.6; opacity: 0.85; }
.firezone.next { fill: none; stroke-dasharray: 5 5; opacity: 0.5; stroke-width: 1.3; }
.walkto { fill: none; stroke: #8d221a; stroke-width: 2; stroke-dasharray: 6 5; opacity: 0.8; }
.moveThem { fill: none; stroke: #8d221a; stroke-width: 2.6; stroke-dasharray: 7 5; marker-end: url(#headThem); opacity: 0.85; }
.shotThem { fill: none; stroke: #8d221a; stroke-width: 2; marker-end: url(#headThem); opacity: 0.6; }

/* ---- chinagraph: what you have ordered ---- */
.moveUs { fill: none; stroke: #1d3d52; stroke-width: 3; marker-end: url(#headUs); }
.shotUs { fill: none; stroke: #1d3d52; stroke-width: 2.4; stroke-dasharray: 3 4; marker-end: url(#headUs); }
.ghost { fill: url(#hatchBlue); stroke: #1d3d52; stroke-width: 1.6; opacity: 0.7; }
.barrage { fill: none; stroke: var(--flag); stroke-width: 3; stroke-dasharray: 8 4; }
.barrage.pending { stroke-dasharray: 3 5; opacity: 0.8; }

/* ---- chinagraph: the choices in front of you ---- */
.movering { fill: none; stroke: #1d3d52; stroke-width: 2; opacity: 0.55; }
.shootring { fill: none; stroke: #a8321f; stroke-width: 2.6; }
.shootring.nil { stroke: #8a7c60; stroke-width: 1.6; stroke-dasharray: 4 4; }
.objring { fill: none; stroke: var(--flag); stroke-width: 3.4; opacity: 0.9; }
.supply { fill: none; stroke: #6b7a3f; stroke-width: 2; stroke-dasharray: 1.5 6; stroke-linecap: round; opacity: 0.75; }
.stopline { fill: none; stroke: #8d221a; stroke-width: 3.5; stroke-dasharray: 12 7; opacity: 0.65; }
.exitzone { fill: #1d3d52; opacity: 0.12; stroke: #1d3d52; stroke-width: 1.4; stroke-dasharray: 5 5; }
.cursor { fill: none; stroke: var(--flag); stroke-width: 3.4; }
#board:focus-visible { outline: none; }
#board:focus-visible .cursor { stroke: #ffd97a; stroke-width: 4.5; filter: drop-shadow(0 0 6px rgba(255, 217, 122, 0.8)); }

/* ---- the invisible layer that actually takes taps ---- */
.tap { fill: transparent; stroke: none; cursor: pointer; }
.tap:hover { fill: rgba(255, 240, 190, 0.16); }

/* ================================================================== *
 * The orders pad — a card clipped to a board, typed on a machine that
 * needs a new ribbon.
 * ================================================================== */

.pad {
  position: relative;
  background: var(--card) url("/art/tex/card.webp") center / cover;
  color: var(--ink);
  border-radius: 2px 2px 3px 3px;
  padding: 26px 18px 18px;
  box-shadow: 0 16px 26px rgba(0, 0, 0, 0.55), inset 0 0 40px rgba(120, 96, 54, 0.18);
  clip-path: polygon(0.5% 0, 99.4% 0.6%, 100% 99.3%, 0.4% 100%);
  min-height: 420px;
}
.pad::before {
  content: "";
  position: absolute; left: 50%; top: -16px; width: 96px; height: 34px;
  transform: translateX(-50%);
  background: url("/art/prop/clip.webp") center / contain no-repeat;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, 0.6));
}
.pad .ring {
  position: absolute; right: -18px; bottom: -22px; width: 132px; height: 132px;
  background: url("/art/prop/ring.webp") center / contain no-repeat;
  opacity: 0.4; pointer-events: none; mix-blend-mode: multiply;
}
.pad > * { position: relative; }

.eyebrow {
  font-family: var(--type); font-size: 10px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #8a7c60;
  border-bottom: 1px solid rgba(90, 76, 48, 0.3);
  padding-bottom: 6px; margin-bottom: 10px;
}
.who { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.who h3 { font-size: 25px; text-transform: uppercase; letter-spacing: 0.01em; }
.who h3 .flag { vertical-align: -0.02em; }
.chip {
  font-family: var(--type); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 3px 7px 2px; border: 1px solid rgba(80, 66, 40, 0.45); border-radius: 1px; color: #5d5340;
}
.chip.good { color: #3f5c26; border-color: rgba(63, 92, 38, 0.5); }
.chip.bad { color: var(--stamp); border-color: rgba(163, 43, 30, 0.5); }
.chip.arm { color: #2c4a5f; border-color: rgba(44, 74, 95, 0.45); }

.say {
  font-family: var(--type); font-size: 13.5px; line-height: 1.55; color: #3f382c;
  border-left: 3px solid rgba(120, 100, 60, 0.4);
  padding: 2px 0 2px 10px; margin: 10px 0 14px;
}
.say.warn { border-left-color: var(--stamp); color: #6d2a1e; }
.say b { color: var(--ink); }

.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 12px 0; }
.stats div {
  border: 1px solid rgba(90, 76, 48, 0.28); padding: 5px 7px; border-radius: 1px;
  background: rgba(255, 250, 235, 0.28);
}
.stats .k { display: block; font-family: var(--type); font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; color: #8a7c60; }
.stats .v { display: block; font-family: var(--stencil); font-size: 20px; line-height: 1.05; }

.acts { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; margin: 12px 0; }
.pill {
  font-family: var(--stencil); font-weight: 700; font-size: 15.5px; letter-spacing: 0.06em;
  text-transform: uppercase; padding: 7px 11px 5px; color: var(--ink);
  border: 1.8px solid var(--ink); border-radius: 1px; background: rgba(255, 252, 240, 0.35);
}
.pill:hover { background: rgba(255, 252, 240, 0.75); }
.pill.on { background: var(--ink); color: var(--card); }
.pill[disabled] { opacity: 0.32; cursor: not-allowed; }
.pill.warn { border-color: var(--stamp); color: var(--stamp); }
.pill.warn.on { background: var(--stamp); color: #fff; }

.rose { display: flex; align-items: center; gap: 5px; margin-right: 2px; }
.rose span { font-family: var(--type); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #8a7c60; }
.chev { fill: rgba(70, 58, 36, 0.3); cursor: pointer; }
.chev:hover { fill: rgba(70, 58, 36, 0.62); }
.chev.on { fill: var(--us); }

/* the big one */
.go {
  display: block; width: 100%;
  font-family: var(--stencil); font-weight: 800; font-size: 25px;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 13px 16px 10px;
  background: linear-gradient(#33291a, #1c1610);
  color: #f0e2bd; border: 1px solid #6a5a3a; border-radius: 2px;
  box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.2), 0 4px 0 #120e09, 0 8px 14px rgba(0, 0, 0, 0.5);
  transition: transform 0.08s, filter 0.15s;
}
.go:hover { filter: brightness(1.18); }
.go:active { transform: translateY(3px); box-shadow: inset 0 1px 0 rgba(255, 230, 170, 0.2), 0 1px 0 #120e09; }
.go[disabled] { opacity: 0.4; cursor: not-allowed; }
.go.red { background: linear-gradient(#7d2317, #4d150d); border-color: #a4432f; }

.logbox { margin-top: 14px; border-top: 1px solid rgba(90, 76, 48, 0.3); padding-top: 10px; max-height: 210px; overflow-y: auto; }
.logbox p {
  margin: 0 0 5px; font-family: var(--type); font-size: 12.5px; line-height: 1.45; color: #4a4234;
  animation: typein 0.26s both;
}
.logbox p.break { color: var(--stamp); font-weight: 700; }
.logbox p.good { color: #3f5c26; }
.logbox p.nil { color: #8a7c60; }
@keyframes typein { from { opacity: 0; transform: translateX(-5px); } }

/* ---- national flags ---- */

/* A flag is an identifier, not decoration: it sits on the baseline of whatever
   names an army, at the size of the type beside it. */
.flag, .flagwrap {
  display: inline-block;
  vertical-align: -0.14em;
  margin-right: 7px;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(20, 16, 10, 0.4);
}
.flagwrap { line-height: 0; }
.flagwrap .flag { margin-right: 0; box-shadow: none; }
.sidecell { white-space: nowrap; }

/* ================================================================== *
 * Papers laid on top of the table — briefing, side choice, result
 * ================================================================== */

.curtain {
  position: fixed; inset: 0; z-index: 20;
  display: grid; place-items: center;
  padding: 18px;
  background: rgba(8, 6, 4, 0.72);
  backdrop-filter: blur(2px);
  overflow-y: auto;
}
.paper {
  position: relative;
  width: min(620px, 100%);
  margin: auto;
  background: var(--paper-2) url("/art/tex/card.webp") center / cover;
  color: var(--ink);
  padding: 26px 24px 24px;
  border-radius: 2px;
  clip-path: polygon(0.4% 0, 99.4% 0.7%, 100% 99.2%, 0.5% 100%);
  box-shadow: 0 26px 50px rgba(0, 0, 0, 0.7);
  animation: slap 0.34s cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
@keyframes slap { from { transform: scale(1.09) rotate(1.6deg); opacity: 0; } }
/* The corner of a sheet that can be lifted. It is only ever drawn on a sheet
   that really does close, so it never promises a way out that is not there. */
.paper .shut {
  position: absolute; top: 6px; right: 8px; z-index: 2;
  width: 38px; height: 38px; line-height: 1;
  font-family: var(--stencil); font-size: 30px; color: #7d7057;
  border: 1px solid transparent; border-radius: 2px;
}
.paper .shut:hover { color: var(--ink); border-color: rgba(80, 66, 40, 0.4); background: rgba(255, 252, 240, 0.6); }
.paper:has(.shut) .where { padding-right: 40px; }
.paper h2 { font-size: 40px; text-transform: uppercase; margin-bottom: 4px; }
.paper h3 { font-size: 22px; text-transform: uppercase; margin: 18px 0 6px; }
.paper p { margin: 0 0 11px; }
.paper .where {
  font-family: var(--type); font-size: 11px; letter-spacing: 0.15em;
  text-transform: uppercase; color: #7d7057; margin-bottom: 14px;
}
.rules { display: grid; gap: 8px; margin: 14px 0 18px; }
.rules div {
  display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: baseline;
  border-top: 1px solid rgba(90, 76, 48, 0.26); padding-top: 8px;
}
.rules b { font-family: var(--stencil); font-size: 19px; text-transform: uppercase; letter-spacing: 0.02em; }
.rules span { font-size: 14px; color: #443c2e; }

/* side choice */
.sides { display: grid; gap: 10px; margin: 6px 0 16px; }
.side {
  display: grid; grid-template-columns: 74px 1fr; gap: 14px; align-items: center; text-align: left;
  padding: 12px 14px; border: 2px solid rgba(80, 66, 40, 0.3); border-radius: 2px;
  background: rgba(255, 252, 240, 0.3);
}
.side .badge { display: grid; justify-items: center; gap: 4px; }
.side .badge .flag { margin: 0; }
.side:hover { background: rgba(255, 252, 240, 0.72); }
.side.on { border-color: var(--ink); background: rgba(255, 252, 240, 0.85); box-shadow: inset 0 0 0 1px var(--ink); }
.side.played { opacity: 0.82; }
.side .done {
  display: block; margin-top: 6px; font-family: var(--type); font-size: 11px;
  letter-spacing: 0.04em; color: #7a4a06;
}
.side .doc { display: block; font-family: var(--stencil); font-size: 24px; text-transform: uppercase; line-height: 1; }
.side .nm { display: block; font-family: var(--type); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: #7d7057; margin: 3px 0 6px; }
.side .ln { display: block; font-size: 13.5px; color: #443c2e; margin-bottom: 7px; }
.tt {
  display: inline-block; font-family: var(--type); font-size: 10px; letter-spacing: 0.06em;
  padding: 2px 6px 1px; margin: 0 4px 4px 0; border: 1px solid;
}
.tt.up { color: #3f5c26; border-color: rgba(63, 92, 38, 0.45); }
.tt.down { color: var(--stamp); border-color: rgba(163, 43, 30, 0.4); }

/* the stamp */
.stamp {
  display: inline-block;
  font-family: var(--stencil); font-weight: 800; font-size: 44px;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--stamp); border: 5px solid var(--stamp);
  padding: 6px 18px 2px; border-radius: 3px;
  transform: rotate(-6deg);
  opacity: 0.86;
  mix-blend-mode: multiply;
  animation: thump 0.34s cubic-bezier(0.2, 1.6, 0.4, 1) both;
}
.stamp.win { color: var(--good); border-color: var(--good); }
@keyframes thump { from { transform: rotate(-16deg) scale(2.2); opacity: 0; } }

.tapegrid { font-size: 19px; letter-spacing: 2px; line-height: 1.25; margin: 10px 0; }
.share {
  font-family: var(--type); font-size: 12px; white-space: pre-wrap;
  background: rgba(255, 252, 240, 0.5); border: 1px dashed rgba(90, 76, 48, 0.45);
  padding: 10px; margin: 10px 0;
}
.src { font-family: var(--type); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #8a7c60; margin-top: 14px; }
.row { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 14px; }
.row .go { width: auto; flex: 1 1 160px; }

.board-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.board-list th {
  font-family: var(--type); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: #8a7c60; text-align: left; padding: 4px 6px; border-bottom: 1px solid rgba(90, 76, 48, 0.35);
}
.board-list td { padding: 5px 6px; border-bottom: 1px solid rgba(90, 76, 48, 0.16); }
.board-list td.n { font-family: var(--stencil); font-size: 17px; width: 30px; color: #7d7057; }
.board-list tr.me td { background: rgba(184, 134, 15, 0.16); font-weight: 600; }
.board-list .rewound { color: #8a7c60; }

.field {
  width: 100%; font-family: var(--type); font-size: 15px; padding: 10px;
  border: 1.6px solid rgba(80, 66, 40, 0.45); background: rgba(255, 252, 240, 0.6);
  color: var(--ink); border-radius: 1px;
}
.note { font-size: 13px; color: #5d5340; }
.err { color: var(--stamp); font-family: var(--type); font-size: 13px; }
.solution {
  margin: 14px 0; padding: 10px 12px;
  border: 1px solid rgba(90, 76, 48, 0.35); background: rgba(255, 252, 240, 0.34);
}
.solution summary { cursor: pointer; font-family: var(--stencil); font-size: 20px; text-transform: uppercase; }
.solution ol { margin: 8px 0 0; padding-left: 24px; }
.solution li { margin: 4px 0; }
.tomorrow { text-align: center; margin: 16px 0 4px; }
.tomorrow .clock { display: block; font-family: var(--stencil); font-size: 28px; color: var(--good); }
.archive-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 18px; }
.archive-day {
  display: grid; gap: 2px; padding: 12px; color: var(--ink); text-decoration: none;
  border: 1px solid rgba(90, 76, 48, 0.35); background: rgba(255, 252, 240, 0.3);
}
.archive-day:hover { background: rgba(255, 252, 240, 0.68); }
.archive-day strong { font-family: var(--stencil); font-size: 22px; text-transform: uppercase; }
.archive-day > span:last-child { color: var(--ink-2); font-size: 12px; }
.archive-date { font-family: var(--type); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* ================================================================== *
 * Phone. The pad becomes a drawer along the bottom edge.
 * ================================================================== */

@media (max-width: 900px) {
  :root { --strip-h: 46px; }
  .table {
    grid-template-columns: 1fr;
    padding: 0 8px 0;
    gap: 8px;
  }
  .strip { padding: 6px 10px 2px; gap: 8px; flex-wrap: nowrap; }
  .mark { font-size: 20px; gap: 7px; }
  .mark .helmet { width: 23px; height: auto; }
  .strip .tab { white-space: nowrap; font-size: 12px; padding: 5px 8px 4px; }
  .strip #doctrine { display: none; }
  .strip form { display: none; }
  .dateline { font-size: 9px; padding-left: 8px; letter-spacing: 0.08em; }
  @media (max-width: 470px) { .dateline { display: none; } }
  .sheet { transform: none; }
  .tape, .prop { display: none; }
  .mapwrap { padding-bottom: 4px; }

  /* The board is a window onto a sheet bigger than the phone, and you slide
     it about the way you would slide a real one. The controls sit outside that
     window, or they slide away with the map. */
  /* On a phone it is always a window: the map is bigger than the screen even
     fitted, and the drawer needs the rest of the height. */
  .viewport, .viewport.close {
    height: calc(100dvh - var(--strip-h) - var(--pad-h, 240px) - 58px);
    max-height: none;
    min-height: 210px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 2px;
  }
  .mapbar { position: relative; z-index: 13; margin: 5px 0 0; height: 34px; gap: 6px; }
  .mapbar .turnlab, .mapbar #objline, .mapbar #sheetdate { display: none; }
  .mapbar #soundbtn { display: none; }
  .hud {
    display: block; font-family: var(--type); font-size: 9.5px; letter-spacing: 0.1em;
    text-transform: uppercase; color: #a3936f; line-height: 1.3; max-width: 96px;
  }
  .hud b { color: var(--flag); }
  .pad {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 12;
    min-height: 0; border-radius: 0;
    clip-path: none;
    padding: 10px 13px calc(10px + env(safe-area-inset-bottom));
    overflow-y: auto;
    box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.62);
    border-top: 3px solid #6a5c3e;
  }
  .pad::before, .pad .ring { display: none; }
  .pad .eyebrow { display: none; }
  .who h3 { font-size: 21px; }
  .say { font-size: 13px; margin: 7px 0 9px; }
  .stats { margin: 8px 0; }
  .acts { margin: 8px 0; gap: 6px; }
  .logbox { max-height: 108px; margin-top: 9px; }
  .go { font-size: 21px; padding: 11px 14px 8px; }
  .paper { padding: 20px 16px 18px; }
  .paper h2 { font-size: 30px; }
  .rules div { grid-template-columns: 96px 1fr; }
  .side { grid-template-columns: 56px 1fr; gap: 10px; padding: 10px; }
  .curtain { padding: 10px; }
  .archive-grid { grid-template-columns: 1fr; }
}

/* The drawer never covers the board: the map gets whatever height is left. */
@media (max-width: 900px) {
  .pad { max-height: 46dvh; }
  .logbox { max-height: 74px; }
  .mapbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px; }
  .mapbar .tab { flex: 0 0 auto; font-size: 13px; padding: 5px 9px 4px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}