/* ==========================================================================
   EPOCH · 03-BOARDGAME · ITERATION 04 · PUNCH OUT
   Common stylesheet for every page in this iteration.

   The whole site is one boxed game: pulp cardboard, die-cut pieces, ink on
   card stock. Anything used by more than one page lives here. Anything that
   exists on exactly one page (the punch sheet, the lock mat, the roster
   cards) stays in that page's own <style> block.
   ========================================================================== */

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

:root {
  --gold:#b98a3f; --teal:#5f8a7d; --ember:#e23b2e; --slate:#3c4a4e;
  --autumn:#c96b3a; --winter:#7fb6d6;
  --pulp:#d9cbb0; --card:#fbf6ec; --edge:#bfae8e; --ink:#22201c; --soft:#6b6459;
  --hole:#9b8c72;
  --display:"Fraunces", Georgia, serif;
  --text:"Karla", system-ui, sans-serif;
  --type:"Courier Prime", ui-monospace, monospace;
}

/* overflow-x lives on html, and is `clip` rather than `hidden`, for one reason:
   `hidden` turns the element into a scroll container. With it on <body>, the
   sticky .lid was sticking to the body's scrollport instead of the viewport,
   which iOS Safari renders as a header that drifts while the whole page pans
   sideways. `clip` refuses the overflow without creating a scroll container,
   so the lid sticks to the viewport again. The `hidden` line before it is the
   fallback for anything too old to know `clip`. */
html {
  scroll-behavior:smooth;
  overflow-x:hidden;
  overflow-x:clip;
}
body {
  font-family:var(--text); color:var(--ink); font-size:17px; line-height:1.65;
  background:#e2d5bd;   /* the base the viewport canvas takes; the paper is below */
  min-height:100vh; overflow-x:clip;
}
/* The paper. This was background-attachment:fixed on the body, which iOS
   Safari does not really implement: it repaints the whole gradient on every
   scroll frame and the page wobbles. A fixed layer behind the content looks
   identical and costs nothing to scroll. */
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    repeating-linear-gradient(45deg, rgba(0,0,0,0.014) 0 3px, transparent 3px 6px),
    radial-gradient(circle at 50% -8%, #efe4cf, #ddd0b8 62%);
}
.table { max-width:1080px; margin:0 auto; padding:0 22px 90px; }
.mono { font-family:var(--type); }
.frost { color:var(--soft); }

/* ---------- lid · the sticky nav across the top of the box ---------- */
.lid {
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:18px 22px; background:var(--card); border-bottom:2px solid var(--edge);
  position:sticky; top:0; z-index:70;
}
.lid .mark { display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.lid .mark svg { width:34px; height:34px; }
.lid .mark:hover svg { animation:wobble 1s ease; }
.lid .mark b { font-family:var(--display); font-weight:900; font-size:20px; letter-spacing:1px; }
.lid nav { display:flex; gap:8px; flex-wrap:wrap; }
.lid nav a {
  font-family:var(--type); font-size:12px; text-decoration:none; color:var(--soft);
  padding:8px 12px; border:2px solid var(--edge); border-radius:999px; background:#fff;
  transition:border-color .2s, color .2s, transform .18s;
}
.lid nav a:hover { border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }
.lid nav a.turn { background:var(--ember); border-color:var(--ember); color:#fff; font-weight:700; }
.lid nav a.here { border-color:var(--ink); color:var(--ink); background:var(--pulp); }
/* the current-season pill stays ember even when it is also the current page */
.lid nav a.turn.here { background:var(--ember); border-color:var(--ink); color:#fff; }

@keyframes wobble {
  0%,100% { transform:rotate(0); }
  20% { transform:rotate(-11deg); } 45% { transform:rotate(8deg); }
  70% { transform:rotate(-4deg); } 88% { transform:rotate(2deg); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes up { to { opacity:1; transform:none; } }
@keyframes idle { 0%,100% { transform:rotate(-1.5deg); } 50% { transform:rotate(1.5deg); } }

/* ---------- box art · the page header ---------- */
.boxart {
  margin-top:34px; background:var(--card); border:2px solid var(--edge); border-radius:18px;
  padding:clamp(28px,5vw,58px); position:relative; overflow:hidden;
  box-shadow:0 18px 0 -8px rgba(60,74,78,0.13);
}
.boxart::after {
  content:""; position:absolute; right:-70px; top:-70px; width:250px; height:250px; border-radius:50%;
  background:repeating-radial-gradient(circle, rgba(226,59,46,0.1) 0 10px, transparent 10px 20px);
  animation:spin 40s linear infinite;
}
.boxart.teal::after { background:repeating-radial-gradient(circle, rgba(95,138,125,0.13) 0 10px, transparent 10px 20px); }
.boxart.gold::after { background:repeating-radial-gradient(circle, rgba(185,138,63,0.14) 0 10px, transparent 10px 20px); }
.boxart > * { position:relative; }
.up { opacity:0; transform:translateY(22px); animation:up .8s cubic-bezier(.2,.8,.25,1) forwards; }
.boxart .ages {
  display:inline-block; font-family:var(--type); font-size:11px; letter-spacing:1.5px;
  text-transform:uppercase; background:var(--slate); color:var(--card); padding:6px 12px; border-radius:4px;
}
.boxart .ages.hot { background:var(--ember); }
.boxart h1 {
  font-family:var(--display); font-weight:900; font-size:clamp(2.3rem,7vw,4.6rem); line-height:1.02;
  letter-spacing:-0.02em; margin:20px 0 18px; max-width:16ch;
}
.boxart h1 span { color:var(--ember); }
.boxart .blurb { font-size:1.2rem; max-width:60ch; color:#3d3a34; }
.boxart .blurb b { font-weight:700; }
.boxart .bill { margin-top:16px; font-size:1.02rem; color:var(--soft); max-width:60ch; }
.boxart .bill b { color:var(--ink); font-weight:700; }
.boxart .bill i { color:var(--ember); font-style:normal; font-weight:700; }
.specs { display:flex; gap:26px; flex-wrap:wrap; margin-top:28px; }
.specs div { font-family:var(--type); font-size:12px; color:var(--soft); }
.specs div b { display:block; font-family:var(--display); font-weight:900; font-size:1.8rem; color:var(--ink); line-height:1.1; }
.plays { margin-top:28px; display:flex; gap:12px; flex-wrap:wrap; }
.plays a {
  font-family:var(--text); font-weight:700; font-size:15px; text-decoration:none;
  padding:14px 24px; border-radius:999px; border:2px solid var(--ink); background:var(--ink); color:var(--card);
  transition:transform .16s cubic-bezier(.34,1.5,.5,1), box-shadow .16s;
}
.plays a.alt { background:none; color:var(--ink); }
.plays a:hover { transform:translateY(-3px); box-shadow:0 8px 0 -3px rgba(60,74,78,0.25); }

/* ---------- blocks ---------- */
.block { margin-top:70px; }
.block > h2 { font-family:var(--display); font-weight:900; font-size:clamp(1.6rem,3.6vw,2.4rem); letter-spacing:-0.01em; }
.block > .sub { color:var(--soft); max-width:62ch; margin-top:10px; }
.block > .sub b { color:var(--ink); font-weight:700; }
.block > .sub a { color:var(--ember); font-weight:700; }

/* ---------- the week track · where you are in the five weeks ---------- */
.track { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin-top:26px; }
/* .seal is a week whose page does not exist yet: same piece, not clickable */
.track a, .track .seal {
  flex:1 1 110px; text-decoration:none; text-align:center; padding:14px 6px 13px;
  border:2px solid var(--edge); border-right-width:0; background:var(--card); color:var(--soft);
  transition:transform .18s, background .2s, color .2s;
}
.track > *:first-child { border-radius:12px 0 0 12px; }
.track > *:last-child { border-right-width:2px; border-radius:0 12px 12px 0; }
.track a:hover { transform:translateY(-3px); color:var(--ink); }
.track .seal { color:var(--soft); background:linear-gradient(170deg, var(--pulp), #cbbb9d); cursor:default; }
.track a.on { background:var(--ember); border-color:var(--ember); color:#fff; }
.track a.done { background:linear-gradient(170deg, var(--pulp), #cbbb9d); }
.track .wk { display:block; font-family:var(--type); font-size:10px; letter-spacing:1.5px; text-transform:uppercase; opacity:.8; }
.track .nm { display:block; font-family:var(--display); font-weight:900; font-size:1.1rem; margin-top:3px; }

/* ---------- pulp · the die-cut sheet stock, used as a panel ---------- */
.sheet {
  margin-top:24px; background:
    repeating-linear-gradient(90deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 5px),
    linear-gradient(170deg, var(--pulp), #cbbb9d);
  border:3px solid var(--edge); border-radius:12px; padding:30px 24px 26px; position:relative;
  box-shadow:inset 0 2px 0 rgba(255,255,255,0.35), 0 14px 0 -7px rgba(60,74,78,0.18);
}
.sheet .stamp {
  position:absolute; right:18px; top:14px; font-family:var(--type); font-size:10px;
  letter-spacing:2px; text-transform:uppercase; color:#8d7f66; border:2px solid #8d7f66;
  border-radius:4px; padding:4px 9px; transform:rotate(4deg); opacity:0.7;
}

/* ---------- card · the general purpose piece of card stock ---------- */
.cardgrid { margin-top:24px; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr)); gap:20px; }
.card {
  background:var(--card); border:2px solid var(--edge); border-radius:14px; padding:24px;
  color:inherit; text-decoration:none; display:block;
  transition:transform .3s, box-shadow .3s;
}
.card:hover { transform:translateY(-4px); box-shadow:0 12px 0 -5px rgba(60,74,78,0.16); }
.card.flat:hover { transform:none; box-shadow:none; }
.card .step, .card > h3.step {
  font-family:var(--type); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--teal);
}
.card .step.hot { color:var(--ember); }
.card h3 { font-family:var(--display); font-weight:900; font-size:1.35rem; margin:8px 0 10px; }
.card p { font-size:0.97rem; color:#3d3a34; }
.card p + p { margin-top:11px; }
.card p em { color:var(--soft); font-style:italic; }
.card a { color:var(--ember); font-weight:700; }
.card .go { display:inline-block; margin-top:14px; font-weight:700; font-size:13.5px; color:var(--ember); border-bottom:3px solid currentColor; }
.card ol, .card ul { padding-left:22px; margin-top:4px; }
.card li { margin-bottom:12px; font-size:0.99rem; color:#3d3a34; }
.card li:last-child { margin-bottom:0; }
.card li::marker { font-family:var(--display); font-weight:900; color:var(--soft); }
.card li b { font-weight:700; color:var(--ink); }
.card.top { border-top-width:9px; }

/* ---------- token card · the dark slate insert ---------- */
.tokencard { background:var(--slate); color:var(--card); border-radius:14px; padding:26px; }
.tokencard h3 { font-family:var(--display); font-weight:900; font-size:1.3rem; margin-bottom:16px; }
.tokencard p { font-size:0.95rem; color:rgba(251,246,236,0.78); }
.tokencard .line {
  display:flex; justify-content:space-between; gap:12px; padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.14); font-family:var(--type); font-size:13.5px;
}
.tokencard .line:last-of-type { border-bottom:0; }
.tokencard .line span:first-child { opacity:0.7; }
.tokencard .addr { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.tokencard .addr button, .tokencard .addr a {
  font-family:var(--type); font-size:11px; cursor:pointer; text-decoration:none;
  background:rgba(255,255,255,0.12); color:var(--card); border:1px solid rgba(255,255,255,0.3);
  padding:8px 12px; border-radius:6px; transition:background .2s, transform .16s;
}
.tokencard .addr button:hover, .tokencard .addr a:hover { background:var(--gold); border-color:var(--gold); color:var(--ink); transform:translateY(-2px); }

/* ---------- buttons ---------- */
.pbtn {
  font-family:var(--text); font-weight:700; font-size:14px; cursor:pointer;
  padding:12px 20px; border-radius:999px; border:2px solid var(--ink); background:none; color:var(--ink);
  transition:background .2s, color .2s, transform .16s, opacity .2s;
}
.pbtn:hover { background:var(--ink); color:var(--card); transform:translateY(-2px); }
.pbtn.solid { background:var(--ember); border-color:var(--ember); color:#fff; }
.pbtn.solid:hover { background:var(--ink); border-color:var(--ink); }
.pbtn[disabled] { opacity:.42; cursor:not-allowed; }
.pbtn[disabled]:hover { background:none; color:var(--ink); transform:none; }

/* ---------- address rows, shared by the roster and the token panels ---------- */
.crow { display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 0; border-top:1px dashed rgba(90,80,62,0.35); }
.crow .rl { font-family:var(--type); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--soft); min-width:118px; }
.crow .caddr { display:flex; align-items:center; gap:6px; margin-left:auto; }
.crow code { font-family:var(--type); font-size:12.5px; color:var(--ink); }
.cbtn {
  font-family:var(--type); font-size:12px; line-height:1; cursor:pointer; text-decoration:none;
  border:2px solid var(--edge); background:var(--card); color:var(--soft);
  padding:6px 8px; border-radius:6px; transition:border-color .2s, color .2s, transform .16s;
}
.cbtn:hover { border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }

/* ---------- forms ---------- */
.field { margin-bottom:22px; }
.field label { display:block; font-family:var(--type); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--soft); margin-bottom:8px; }
.field label .opt { color:var(--edge); letter-spacing:1px; }
.field input, .field textarea {
  width:100%; font-family:var(--type); font-size:15px; color:var(--ink);
  background:var(--card); border:2px solid var(--edge); border-radius:10px; padding:13px 15px;
  transition:border-color .2s, box-shadow .2s;
}
.field input:focus, .field textarea:focus { outline:none; border-color:var(--ink); box-shadow:0 4px 0 -1px rgba(60,74,78,0.16); }
.field input[aria-invalid="true"] { border-color:var(--ember); }
.field .help { margin-top:8px; font-size:0.84rem; color:var(--soft); line-height:1.55; }
.field .err { margin-top:7px; font-family:var(--type); font-size:0.8rem; color:var(--ember); display:none; }
.field .err.show { display:block; }

/* ---------- credits · the footer ---------- */
.credits { margin-top:70px; border-top:2px solid var(--edge); padding-top:24px; }
.credits p { font-family:var(--type); font-size:13px; color:var(--soft); max-width:70ch; }
.credits .row { margin-top:18px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
.credits .row a { font-weight:700; font-size:14px; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--ember); }
.credits .row svg { width:28px; height:28px; }

/* ---------- pager ---------- */
.pager { margin-top:60px; display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.pager a { font-family:var(--type); font-size:13px; text-decoration:none; color:var(--soft); border-bottom:2px solid var(--edge); padding-bottom:3px; transition:color .2s, border-color .2s; }
.pager a:hover { color:var(--ink); border-color:var(--ink); }
.pager a.nxt { color:var(--ember); border-color:var(--ember); font-weight:700; }

/* ---------- flash · the little status pill ---------- */
.flash {
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(10px);
  background:var(--ink); color:var(--card); font-family:var(--type); font-size:13px;
  padding:12px 20px; border-radius:999px; opacity:0; pointer-events:none;
  transition:opacity .22s, transform .22s; z-index:300; max-width:calc(100vw - 40px); text-align:center;
}
.flash.on { opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- scroll reveal ---------- */
.obs { opacity:0; transform:translateY(26px); transition:opacity .7s, transform .7s cubic-bezier(.2,.8,.25,1); }
.obs.in { opacity:1; transform:none; }

@media (max-width:600px){
  .track a, .track .seal { flex-basis:calc(50% - 1px); border-right-width:2px; border-radius:10px !important; margin:0 2px 4px 0; }
  .crow .caddr { margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .obs, .up { opacity:1; transform:none; }
}
