/* ==========================================================================
   CARTOPOLIS: Risograph design tokens + UI components
   Concept: everything looks printed on a 4-drum riso. Inks overprint
   (multiply), shading is halftone, outlines are a separate "key" plate that
   is slightly mis-registered. Shared by the identity sheet and the game.
   ========================================================================== */

/* ---------- Fonts (bundled, relative paths, no network) ---------- */
@font-face { font-family: "Anybody"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 150%;
  src: url("../fonts/anybody-latin.woff2") format("woff2-variations"); }
@font-face { font-family: "Anybody"; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 50% 150%;
  src: url("../fonts/anybody-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("../fonts/dm-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("../fonts/dm-mono-latin-500.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("../fonts/dm-mono-latin-ext-400.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("../fonts/dm-mono-latin-ext-500.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  /* ---------- Paper ---------- */
  --paper:   #F2EBDD;   /* newsprint stock: every screen starts here */
  --card:    #FBF7EE;   /* bright card stock for panels */
  --paper-2: #E6DCC8;   /* fold / trough */

  /* ---------- Inks (the only "real" colours) ---------- */
  --key:     #3D5588;   /* Federal Blue: lines, text, halftone */
  --pink:    #FF48B0;   /* Fluorescent Pink: primary action, brand */
  --teal:    #00838A;   /* Teal: money, positive, structure */
  --yellow:  #FFE800;   /* Yellow: highlight, stars, coins */

  /* ---------- Overprints (ink × ink, multiply) ---------- */
  --orange:  #FF4200;   /* pink × yellow */
  --green:   #2B8C2E;   /* teal × yellow (softened) */
  --navy:    #00255F;   /* pink × teal */
  --plum:    #3D185E;   /* key × pink */
  --olive:   #3D4D00;   /* key × yellow */

  /* ---------- Tints (ink % on white) ---------- */
  --pink-15:  #FFE4F3;  --pink-30: #FFC8E7;  --pink-60: #FF91D0;
  --teal-15:  #D9ECED;  --teal-30: #B3DADC;  --teal-60: #66B5B9;
  --yellow-30:#FFF8B3;  --yellow-60:#FFF166;
  --key-10:   #ECEEF3;  --key-20:  #D8DDE7;  --key-40: #B1BBCF;  --key-60: #8B99B8;

  /* ---------- Semantic ---------- */
  --c-text: var(--key);
  --c-text-2: #6B7BA3;
  --c-action: var(--pink);
  --c-money: var(--teal);
  --c-reward: var(--yellow);
  --c-alert: var(--orange);

  /* ---------- Misregistration (key plate offset) ---------- */
  --mis-x: 1.5px; --mis-y: -1px;

  /* ---------- Typography ---------- */
  --font-display: "Anybody", "Arial Black", system-ui, sans-serif;
  --font-mono: "DM Mono", ui-monospace, Menlo, monospace;
  --w-wide: 150%; --w-normal: 100%; --w-narrow: 62%;
  --fs-mega: 64px; --fs-h1: 40px; --fs-h2: 28px; --fs-h3: 19px;
  --fs-body: 15px; --fs-small: 13px; --fs-micro: 11px;

  /* ---------- Spacing (4pt) ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* ---------- Shape ---------- */
  --r-1: 3px; --r-2: 6px; --r-3: 10px; --r-pill: 999px;
  --plate: 5px;                 /* second-ink plate offset under buttons/cards */
  --tap-min: 44px;

  /* ---------- Motion ---------- */
  --t-tap: 90ms; --t-fast: 160ms; --t-base: 260ms; --t-slow: 460ms;
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-pop: cubic-bezier(.34,1.56,.64,1);
  --ease-print: steps(3, end);   /* "ink roller" stepped reveal */

  /* ---------- Textures (all SVG) ---------- */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .24  0 0 0 0 .33  0 0 0 0 .53  0 0 0 .55 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  --dots-key: radial-gradient(circle, var(--key) 0 1.1px, transparent 1.3px) 0 0 / 5px 5px;
  --dots-pink: radial-gradient(circle, var(--pink) 0 1.3px, transparent 1.5px) 0 0 / 5px 5px;
  --dots-teal: radial-gradient(circle, var(--teal) 0 1.3px, transparent 1.5px) 0 0 / 5px 5px;

  /* ---------- Layers ---------- */
  --z-world: 0; --z-hud: 10; --z-sheet: 20; --z-modal: 30; --z-toast: 40; --z-grain: 90;
  --hud-pad: 12px;
}

/* ==========================================================================
   Base helpers
   ========================================================================== */
.grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: var(--z-grain);
  background-image: var(--grain); mix-blend-mode: multiply; opacity: .32; }

/* Overprint title: pink plate + teal plate, multiply, mis-registered */
.print {
  position: relative; display: inline-block; color: var(--teal);
  font-family: var(--font-display); font-weight: 900; font-stretch: var(--w-wide); text-transform: uppercase; line-height: .9; letter-spacing: -.01em;
}
.print::before { content: attr(data-text); position: absolute; left: 0; top: 0; color: var(--pink);
  transform: translate(3px, 2px); mix-blend-mode: multiply; pointer-events: none; }
.print--key { color: var(--key); } .print--key::before { color: var(--yellow); transform: translate(2px, 2px); }

.label { font: 800 var(--fs-micro)/1.15 var(--font-display); font-stretch: 112%; letter-spacing: .1em; text-transform: uppercase; color: var(--c-text-2); }
.num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   Button: one ink, a second ink plate printed under it, offset.
   Pressing "registers" the plates (offset → 0).
   ========================================================================== */
.btn {
  --ink: var(--pink); --ink-2: var(--teal); --fg: var(--card);
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-min); padding: 13px 22px; border: 2.5px solid var(--key); border-radius: var(--r-2);
  background: var(--ink); color: var(--fg);
  font: 900 17px/1 var(--font-display); font-stretch: 125%; letter-spacing: .03em; text-transform: uppercase;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow: var(--plate) var(--plate) 0 var(--ink-2);
  transition: transform var(--t-tap) var(--ease-out), box-shadow var(--t-tap) var(--ease-out);
}
.btn::after { /* halftone sheen on top half */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; border-radius: inherit inherit 0 0;
  background: radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.3px) 0 0 / 4px 4px; pointer-events: none;
}
.btn:hover { filter: saturate(1.1); }
.btn:active, .btn.is-pressed { transform: translate(3px, 3px); box-shadow: calc(var(--plate) - 3px) calc(var(--plate) - 3px) 0 var(--ink-2); }
.btn:focus-visible { outline: 2px dashed var(--key); outline-offset: 6px; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--lg { font-size: 22px; padding: 18px 28px; }
.btn--sm { font-size: 13px; padding: 9px 14px; min-height: 36px; --plate: 3px; }
.btn--teal { --ink: var(--teal); --ink-2: var(--yellow); }
.btn--yellow { --ink: var(--yellow); --ink-2: var(--pink); --fg: var(--key); }
.btn--paper { --ink: var(--card); --ink-2: var(--key); --fg: var(--key); }
.btn--key { --ink: var(--key); --ink-2: var(--pink); }
.btn[disabled], .btn.is-disabled { --ink: var(--paper-2); --ink-2: var(--key-20); --fg: var(--key-60); border-color: var(--key-40); cursor: not-allowed; }
.btn[disabled]::after, .btn.is-disabled::after { display: none; }
.btn.is-shake { animation: shake 380ms var(--ease-out); }

/* Round stamp button (settings) */
.stamp-btn {
  --ink: var(--yellow); --ink-2: var(--pink);
  position: relative; isolation: isolate; width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--ink);
  display: inline-grid; place-items: center; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: 4px 4px 0 var(--ink-2); transition: transform var(--t-tap), box-shadow var(--t-tap);
}
.stamp-btn::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; border: 2px dashed var(--key); opacity: .6; }
.stamp-btn svg { width: 28px; height: 28px; }
.stamp-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink-2); }

/* ==========================================================================
   Ticket chip (money / rating): perforated stub with notches
   ========================================================================== */
.ticket {
  position: relative; display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 12px;
  background: var(--card); color: var(--key);
  -webkit-mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, transparent 7px, #000 7.5px) left / 51% 100% no-repeat,
                radial-gradient(circle at 100% 50%, transparent 7px, #000 7.5px) right / 51% 100% no-repeat;
  filter: drop-shadow(3px 3px 0 var(--teal-60));
}
.ticket b { font: 900 22px/1 var(--font-display); font-stretch: 112%; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.ticket .sep { align-self: stretch; border-left: 2px dashed var(--key-40); margin: 6px 2px; }
.ticket svg { width: 26px; height: 26px; flex: none; }

/* Plain ink chip */
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: var(--r-1);
  background: var(--key); color: var(--card); font: 800 12px/1 var(--font-display); font-stretch: 115%; letter-spacing: .06em; text-transform: uppercase; }
.chip--pink { background: var(--pink); } .chip--teal { background: var(--teal); } .chip--yellow { background: var(--yellow); color: var(--key); }
.chip svg { width: 16px; height: 16px; }

/* ==========================================================================
   Card / sheet: card stock + halftone drop "shadow" + masking tape
   ========================================================================== */
.card {
  position: relative; background: var(--card); border-radius: var(--r-1); padding: var(--sp-5);
  box-shadow: 0 0 0 1.5px var(--key);
}
.card::before { /* halftone shadow plate */
  content: ""; position: absolute; inset: 0; transform: translate(7px, 7px); z-index: -1; border-radius: inherit;
  background: var(--dots-key); opacity: .55;
}
.tape { position: absolute; width: 74px; height: 22px; background: var(--yellow); opacity: .8; mix-blend-mode: multiply; z-index: 1;
  clip-path: polygon(0 8%, 6% 0, 12% 10%, 18% 0, 82% 0, 88% 12%, 94% 0, 100% 8%, 100% 92%, 94% 100%, 88% 88%, 82% 100%, 18% 100%, 12% 90%, 6% 100%, 0 92%); }
.tape--tl { left: -18px; top: 6px; transform: rotate(-34deg); }
.tape--tr { right: -18px; top: 6px; transform: rotate(34deg); }
.tape--pink { background: var(--pink); opacity: .55; }

.perf { border: 0; border-top: 2px dashed var(--key-40); margin: var(--sp-3) 0; }

/* ==========================================================================
   Controls
   ========================================================================== */
.switch { position: relative; width: 58px; height: 30px; flex: none; }
.switch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 2; }
.switch span { position: absolute; inset: 0; border-radius: var(--r-pill); background: var(--paper-2); box-shadow: inset 0 0 0 2px var(--key); transition: background var(--t-base); }
.switch span::before { content: ""; position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--key);
  transition: transform var(--t-base) var(--ease-pop), background var(--t-base); }
.switch input:checked + span { background: var(--teal-30); }
.switch input:checked + span::before { transform: translateX(28px); background: var(--teal); box-shadow: 2px 2px 0 var(--pink); }

.meter { position: relative; height: 16px; background: var(--paper-2); border-radius: var(--r-1); overflow: hidden; box-shadow: inset 0 0 0 2px var(--key); }
.meter > i { position: absolute; inset: 0 auto 0 0; background: var(--pink);
  background-image: radial-gradient(circle, rgba(255,232,0,.95) 0 1.2px, transparent 1.4px); background-size: 5px 5px;
  animation: meter-scroll 900ms linear infinite; }

/* Floating money pop (world overlay) */
.pop-money { position: absolute; pointer-events: none; font: 900 20px/1 var(--font-display); font-stretch: 120%;
  color: var(--teal); text-shadow: 2px 1.5px 0 var(--pink); animation: float-up 1100ms var(--ease-out) forwards; }

/* ==========================================================================
   Keyframes
   ========================================================================== */
@keyframes shake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-6px)} 40%{transform:translateX(6px)} 60%{transform:translateX(-4px)} 80%{transform:translateX(3px)} }
@keyframes float-up { 0%{opacity:0; transform:translateY(8px) scale(.7)} 15%{opacity:1; transform:translateY(0) scale(1.12)} 30%{transform:scale(1)} 100%{opacity:0; transform:translateY(-48px)} }
@keyframes meter-scroll { to { background-position: 5px 0; } }
@keyframes ink-in { 0%{clip-path:inset(0 100% 0 0)} 100%{clip-path:inset(0 0 0 0)} }
@keyframes press-in { 0%{transform:translate(-6px,-6px) rotate(-2deg); opacity:0} 60%{transform:translate(1px,1px) rotate(.5deg); opacity:1} 100%{transform:none} }
@keyframes misreg { 0%,100%{transform:translate(3px,2px)} 50%{transform:translate(-1px,3px)} }
@keyframes pop-in { 0%{transform:scale(.4); opacity:0} 70%{transform:scale(1.08); opacity:1} 100%{transform:scale(1)} }
@keyframes rise-in { from{transform:translateY(30px); opacity:0} to{transform:none; opacity:1} }
@keyframes stamp-in { 0%{transform:rotate(-12deg) scale(2.2); opacity:0} 60%{transform:rotate(-12deg) scale(.94); opacity:1} 100%{transform:rotate(-12deg) scale(1)} }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes tap-ring { 0%{transform:scale(.3); opacity:.9} 100%{transform:scale(1.7); opacity:0} }

/* Character walk cycle (people SVG from Art.person) */
.walk .leg-a { animation: leg-swing 460ms ease-in-out infinite; }
.walk .leg-b { animation: leg-swing 460ms ease-in-out infinite reverse; }
.walk .torso { animation: bob 230ms ease-in-out infinite alternate; }
.leg-a, .leg-b { transform-box: fill-box; transform-origin: 50% 10%; }
@keyframes leg-swing { 0%,100%{transform:rotate(20deg)} 50%{transform:rotate(-20deg)} }
@keyframes bob { from{transform:translateY(0)} to{transform:translateY(-1.6px)} }

.is-paused, .is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}

/* ==========================================================================
   DOCKET: the one frame every panel shares (HUD bar, sheets, dialogs,
   settings, welcome, result). Card stock, 2.5px key rule, ink header
   strip, solid second-ink plate offset. Keeps the UI one printed family.
   ========================================================================== */
.docket {
  --plate-ink: var(--pink);
  position: relative; background: var(--card); color: var(--key);
  border: 2.5px solid var(--key); border-radius: var(--r-2);
  box-shadow: 6px 6px 0 var(--plate-ink);
}
.docket--teal { --plate-ink: var(--teal); } .docket--yellow { --plate-ink: var(--yellow); }
.docket-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: -2.5px -2.5px 0; padding: 9px 14px 8px; border-radius: var(--r-2) var(--r-2) 0 0;
  background: var(--key); color: var(--yellow);
  font: 900 15px/1 var(--font-display); font-stretch: 140%; letter-spacing: .04em; text-transform: uppercase;
}
.docket-head .dots { flex: 1; align-self: stretch; margin: 2px 0; background: radial-gradient(circle, var(--pink) 0 1.4px, transparent 1.7px) 0 0 / 6px 6px; opacity: .9; }
.docket-head .no { font: 500 11px/1 var(--font-mono); color: var(--card); letter-spacing: .1em; }
.docket-body { padding: 14px 16px 16px; }
.docket-title { font: 900 30px/.95 var(--font-display); font-stretch: 140%; text-transform: uppercase; color: var(--key); margin: 0; }
.docket-title.print { color: var(--teal); }
.docket .rule { border: 0; border-top: 2px dashed var(--key-40); margin: 12px 0; }
.body-text { font: 600 14px/1.45 var(--font-display); font-stretch: 100%; color: var(--key); }
.big-num { font: 900 34px/1 var(--font-display); font-stretch: 112%; color: var(--teal); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }