/* How I Survived the Zombies — shared styles: tokens, header, buttons, dialogs, cards. */
@font-face {
  font-family: 'Anton';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/anton-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Atkinson Hyperlegible';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/atkinson-hyperlegible-700.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Permanent Marker';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/permanent-marker-400.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  --ink: #161412; --ink-2: #221f1c; --ink-3: #2e2a26; --line: #4a443d;
  --bone: #F2EDE4; --bone-2: #E4DED3; --muted: #b9b0a3; --muted-dark: #6f675d;
  --survivor: #1E6FD9; --zombie: #3F7A1F; --slime: #79C043; --loot: #D9A21B; --loot-deep: #A87106; --loot-text: #8a6409;
  --struggle: #C8322B; --noise: #E8742A; --danger: #C8322B; --danger-bright: #E5483D; --ok: #3FA34D;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Anton', Impact, 'Arial Narrow Bold', sans-serif;
  --hand: 'Permanent Marker', 'Comic Sans MS', cursive;
  --radius: 14px; --tap: 44px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--bone); font: 400 17px/1.45 var(--body); }
img { max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--loot); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 1em; height: 1em; flex: none; }

/* ---- wordmark (text version, used until/alongside the logo image) ---- */
.wordmark { display: inline-flex; flex-direction: column; line-height: .9; text-decoration: none; color: var(--bone); }
.wordmark .how { font-family: var(--hand); color: var(--danger-bright); font-size: .42em; transform: rotate(-4deg); transform-origin: left bottom; margin: 0 0 .06em .04em; }
.wordmark .zed { font-family: var(--display); font-size: 1em; letter-spacing: .01em; }
.wordmark .tag { font-family: var(--body); font-weight: 700; font-size: .2em; letter-spacing: .04em; color: var(--muted); margin-top: .5em; }

/* ---- buttons ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 0 20px;
  border-radius: 999px; border: 2px solid transparent; font-weight: 700; font-size: 17px; cursor: pointer; text-decoration: none; transition: transform .08s, background .15s, opacity .15s; }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--danger); color: #fff; }
.btn.primary:not([disabled]):hover { background: var(--danger-bright); }
.btn.go { background: var(--survivor); color: #fff; }
.btn.go:not([disabled]):hover { background: #2f80ea; }
.btn.zed { background: var(--zombie); color: #fff; }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--bone); }
.btn.ghost:hover { border-color: var(--muted); }
.btn.light { background: var(--bone); color: var(--ink); }
.btn .ic { width: 20px; height: 20px; }
.iconbtn { position: relative; width: var(--tap); height: var(--tap); border-radius: 50%; border: 2px solid var(--line); background: var(--ink-2);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.iconbtn:hover { border-color: var(--muted); }
.iconbtn .ic { width: 21px; height: 21px; }
.iconbtn[aria-pressed="false"] { color: var(--muted); }
.badge { position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--danger); color: #fff;
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* ---- header ---- */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 12px; padding: 8px clamp(10px, 2.4vw, 24px);
  background: rgba(22,20,18,.94); backdrop-filter: blur(6px); border-bottom: 1px solid var(--line); }
.bar .brand { display: flex; align-items: center; gap: 14px; text-decoration: none; min-width: 0; }
.bar .brand img { height: 46px; width: auto; display: block; }
.bar .brand .wordmark { font-size: 27px; }
.bar .controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.newbtn { display: inline-flex; align-items: center; gap: 8px; height: var(--tap); padding: 0 16px 0 12px; border-radius: 999px; border: 2px solid var(--line);
  background: var(--ink-2); cursor: pointer; font-weight: 700; position: relative; }
.newbtn:hover { border-color: var(--muted); }
.newbtn .ic { width: 21px; height: 21px; }
@media (max-width: 560px) { .newbtn .long { display: none; } .bar .brand .wordmark { font-size: 21px; } .bar .brand img { height: 40px; } }
@media (max-width: 420px) { .bar { gap: 6px; } .bar .controls { gap: 4px; } .newbtn { padding: 0 9px 0 8px; } .iconbtn, .newbtn { width: 40px; height: 40px; } .newbtn { width: auto; } .bar .brand img { height: 36px; } }
@media (max-width: 340px) { .iconbtn, .newbtn { width: 37px; height: 37px; } .newbtn { width: auto; } .bar .brand img { height: 32px; } }

/* menu */
.menu { position: relative; display: flex; }   /* flex, so the empty button before its icon arrives has no text line around it (it made the header jump) */
.menu > summary { list-style: none; }
.menu > summary::-webkit-details-marker { display: none; }
.menu .panel { position: absolute; right: 0; top: calc(100% + 8px); min-width: 220px; max-width: calc(100vw - 20px); background: var(--ink-2); border: 1px solid var(--line);
  border-radius: 12px; padding: 6px; box-shadow: 0 12px 30px rgba(0,0,0,.45); display: flex; flex-direction: column; z-index: 30; }
.menu .panel button, .menu .panel a { text-align: left; background: none; border: 0; padding: 11px 12px; border-radius: 8px; cursor: pointer; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.menu .panel button:hover, .menu .panel a:hover { background: var(--ink-3); }
.menu .panel hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; width: auto; }
.switch { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; font-weight: 700; cursor: pointer; }
.switch input { appearance: none; width: 42px; height: 24px; border-radius: 12px; background: var(--line); position: relative; cursor: pointer; flex: none; margin: 0; }
.switch input::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--bone); transition: left .15s; }
.switch input:checked { background: var(--survivor); }
.switch input:checked::after { left: 21px; }

/* ---- dialogs ---- */
dialog { border: 0; padding: 0; background: var(--bone); color: var(--ink); border-radius: 18px; width: min(640px, calc(100vw - 24px)); max-height: calc(100dvh - 32px);
  box-shadow: 0 30px 80px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(10,9,8,.72); }
dialog .d-head { position: sticky; top: 0; display: flex; align-items: center; gap: 12px; padding: 18px 20px 12px; background: var(--bone); z-index: 1; }
dialog h2 { font-family: var(--display); font-weight: 400; font-size: 30px; letter-spacing: .02em; text-transform: uppercase; margin: 0; line-height: 1.1; }
dialog .d-head .iconbtn { margin-left: auto; background: transparent; border-color: #cfc6b8; color: var(--ink); }
dialog .d-body { padding: 0 20px 22px; font-size: 17px; }
dialog .d-body h3 { font-size: 18px; margin: 20px 0 6px; }
dialog .d-body p, dialog .d-body li { margin: 0 0 8px; }
dialog .d-body ol, dialog .d-body ul { padding-left: 22px; margin: 0 0 8px; }
dialog .d-foot { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; padding: 0 20px 20px; }
dialog .btn.ghost { color: var(--ink); border-color: #cfc6b8; }

/* ---- cards ----
   Each card is a container, so everything inside scales with the card's width (cqw). */
.card { --deck: var(--survivor); --on: #fff; --type: var(--survivor);
  container-type: inline-size; position: relative; width: var(--cw, 150px); aspect-ratio: 63 / 88; flex: none; text-align: left;   /* never inherit a page's centred text */
  background: var(--bone); color: var(--ink); border: 2px solid var(--ink); border-radius: 7% / 5%;
  box-shadow: 0 1px 0 rgba(0,0,0,.3), 0 6px 14px rgba(0,0,0,.28); user-select: none; -webkit-user-select: none; }
.card.zombie { --deck: var(--zombie); --type: var(--zombie); }
.card.loot { --deck: var(--loot); --on: #fff; --type: var(--loot); }   /* the type label matches the corner box (user, 2026-10-24) */
.card.struggle { --deck: var(--struggle); --type: var(--struggle); }
.card.burden { --deck: var(--noise); --type: var(--noise); }   /* burdens are always played: their corner is noise orange, not survivor blue */
.c-in { position: absolute; inset: 0; padding: 5cqw; display: flex; flex-direction: column; gap: 3.6cqw; }
.c-top { display: flex; gap: 3.8cqw; align-items: stretch; }
.c-index { width: 28cqw; height: 31cqw; flex: none; background: var(--deck); color: var(--on); border-radius: 3.6cqw;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; }
.c-index .ic { width: 7.4cqw; height: 7.4cqw; }
.c-index:has(b:not(:empty)) { padding-bottom: .45cqw; }   /* even space above the icon and below the word */
.c-index b { font-size: 15.5cqw; font-weight: 700; margin-top: .6cqw; }
.c-index i { font-style: normal; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 3.8cqw; margin-top: 1cqw; }
.c-title { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.c-type { font-family: var(--display); text-transform: uppercase; letter-spacing: .05em; color: var(--type); font-size: 4.7cqw; }
.c-name { font-weight: 700; font-size: 8.4cqw; line-height: 1.04; overflow-wrap: anywhere; }
.c-art { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.c-art img { width: 100%; height: 100%; object-fit: contain; display: block; }
.c-text { font-size: 5.3cqw; line-height: 1.22; text-align: center; }
.c-foot { display: flex; align-items: center; gap: 3cqw; height: 12.5cqw; }   /* the same height on every card, even when empty */
.pill { display: inline-flex; align-items: center; gap: 1.8cqw; border-radius: 999px; padding: 1.4cqw 3.8cqw; font-size: 7.4cqw; line-height: 1; }
.pill b { font-weight: 700; }
.pill .ic { width: 1em; height: 1em; transform: translateY(-.015em); }
.pill b { display: inline-block; transform: translateY(.03em); }   /* the speaker and the number both on the pill's centre line */
.pill.loud { background: var(--noise); color: #fff; }
.stars { display: flex; gap: 1cqw; color: var(--loot); font-size: 8.6cqw; }
.pips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; width: 12cqw; height: 12cqw; }
.pips i { border-radius: 50%; background: var(--deck); }
.pips i.o { background: transparent; }
.card.compact .pips { width: 18cqw; height: 18cqw; }
/* tiny cards (the fight's flips): just the number */
.card.tiny { aspect-ratio: 63 / 70; }
.card.tiny .c-in { padding: 6cqw; }
.card.tiny .c-top { flex: 1; }
.card.tiny .c-index { width: 100%; height: 100%; }
.card.tiny .c-index .ic, .card.tiny .c-index i, .card.tiny .c-title, .card.tiny .c-art, .card.tiny .c-foot { display: none; }
.card.tiny .c-index b { font-size: 52cqw; margin: 0; }
/* character cards: the portrait runs to the bottom edge */
.card.character .c-index .ic { width: 15cqw; height: 15cqw; }
.card.character .c-name { font-size: 11cqw; }
.card.character .c-art { margin: 0 -5cqw -5cqw; align-items: flex-end; }
.card.character .c-art img { object-position: bottom; }
/* backs */
.card.back { background: var(--deck); }
.card.back .b-in { align-items: center; justify-content: center; text-align: center; gap: 4cqw; color: var(--bone); }

.b-logo { width: 66%; height: auto; display: block; }
.b-deck { margin-top: 3cqw; font-family: var(--display); text-transform: uppercase; letter-spacing: .12em; font-size: 7cqw; color: #fff; }

/* compact cards (phones, small table slots): bigger numbers, no art */
.card.compact { aspect-ratio: 63 / 78; }
.card.compact .c-in { gap: 4cqw; padding: 6cqw; }
.card.compact .c-top { flex-direction: column; gap: 4cqw; }
.card.compact .c-index { width: 100%; height: 44cqw; flex-direction: row; gap: 5cqw; }
.card.compact .c-index .ic { width: 15cqw; height: 15cqw; }
.card.compact .c-index b { font-size: 30cqw; margin: 0; }
.card.compact .c-index i { display: none; }
.card.compact .c-type { display: none; }
.card.compact .c-name { font-size: 14cqw; line-height: 1.05; }
.card.compact .c-art, .card.compact .c-text { display: none; }
.card.compact .c-foot { margin-top: auto; min-height: 0; height: auto; }
.card.compact .pill { font-size: 13cqw; padding: 2cqw 6cqw; }
.card.compact .stars { font-size: 15cqw; }
.card.compact.back .b-logo { width: 80%; } .card.compact.back .b-deck { display: none; }

/* mini cards (the table: other players' plays, the horde, fights, loot): the real card,
   picture and all, with the small print left off */
.card.mini .c-in { padding: 6cqw; gap: 3.5cqw; }
.card.mini .c-top { flex-direction: column; gap: 3cqw; }
.card.mini .c-index { width: 100%; height: 30cqw; flex-direction: row; gap: 5cqw; border-radius: 6cqw; }
.card.mini .c-index .ic { width: 14cqw; height: 14cqw; }
.card.mini .c-index b { font-size: 25cqw; margin: 0; }
.card.mini .c-index i, .card.mini .c-type, .card.mini .c-text, .card.mini .pips { display: none; }
.card.mini .c-name { font-size: 11.5cqw; line-height: 1.08; text-align: center; overflow-wrap: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card.mini .c-foot { min-height: 0; height: auto; }
.card.mini .pill { font-size: 12cqw; padding: 1.5cqw 5cqw; }
.card.mini .stars { font-size: 13cqw; }
.card.mini.struggle .c-title { display: none; }
.card.mini.back .b-logo { width: 80%; } .card.mini.back .b-deck { display: none; }
/* too narrow for a readable name: the number box takes the top row */
@container (max-width: 62px) {
  .mini .c-title { display: none; }
  .mini .c-index { height: 36cqw; }
  .mini .c-index b { font-size: 30cqw; }
}

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