/* =========================================================================
   TINY EPIC ZOMBIES — board-game skin
   ========================================================================= */
:root {
  --bg: #0a0908;
  --panel: #141210;
  --panel2: #1b1815;
  --card: #1a1714;
  --line: #382f26;
  --line-hi: #57493a;
  --ink: #ece3d0;
  --dim: #a2967e;
  --muted: #6f6554;
  --blood: #b9332a;
  --blood-hi: #ee5b45;
  --acid: #a9d05b;
  --gold: #e2b45e;
  --display: "Arial Narrow", "Franklin Gothic Medium", "Haettenschweiler", Impact, sans-serif;
  --body: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: #080706;
  color: var(--ink);
  font-family: var(--body);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: inherit; color: inherit; }
.ic { width: 1em; height: 1em; display: inline-block; vertical-align: -0.12em; fill: currentColor; }

/* scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #0d0b0a; }
::-webkit-scrollbar-thumb { background: #3a3128; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #57493a; }

/* ============================== SETUP ================================== */
.screen { position: relative; width: 100%; min-height: 100%; }
.setup {
  overflow-y: auto;
  background:
    radial-gradient(1000px 620px at 50% -10%, #3a1410 0%, transparent 62%),
    radial-gradient(700px 500px at 90% 100%, #1c2a12 0%, transparent 60%),
    linear-gradient(#0b0a09, #070606);
  display: flex; align-items: flex-start; justify-content: center;
}
.setup-noise {
  position: fixed; inset: 0; pointer-events: none; opacity: .55;
  background-image:
    repeating-linear-gradient(0deg, #ffffff03 0 1px, transparent 1px 3px),
    radial-gradient(circle at 20% 30%, #ffffff08 0 1px, transparent 2px);
  background-size: auto, 7px 7px;
  mix-blend-mode: screen;
}
.setup-inner { width: min(1080px, 94vw); padding: 48px 0 40px; position: relative; z-index: 1; }

.hero { text-align: center; margin-bottom: 30px; }
.hero-kicker { font-size: 11px; letter-spacing: .42em; color: var(--blood-hi); text-transform: uppercase; margin-bottom: 12px; }
.hero h1 {
  font-family: var(--display);
  font-size: clamp(54px, 8.4vw, 104px);
  line-height: .82;
  letter-spacing: .02em;
  margin: 0;
  color: #e9dfc8;
  text-shadow: 0 2px 0 #000, 0 0 42px #b9332a55, 0 8px 30px #000;
  transform: skewY(-2deg);
}
.hero h1 span { color: var(--blood-hi); text-shadow: 0 2px 0 #000, 0 0 30px #c0342b88; }
.hero-sub { color: var(--dim); font-size: 14px; max-width: 560px; margin: 18px auto 0; line-height: 1.5; }

.setup-panel {
  display: grid;
  grid-template-columns: 260px 260px 1fr;
  gap: 18px 22px;
  padding: 22px;
  background: linear-gradient(165deg, #191612, #100e0c);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 30px 70px #000a, inset 0 1px 0 #ffffff08;
}
.setup-block.wide { grid-column: 3 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; min-height: 0; }
.setup-label { display: block; font-family: var(--display); font-size: 12px; letter-spacing: .3em; color: var(--dim); margin-bottom: 9px; text-transform: uppercase; }
.pick-count { color: var(--gold); letter-spacing: .1em; }
.setup-note { font-size: 11px; color: var(--muted); line-height: 1.45; margin: 9px 0 0; min-height: 30px; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; background: #0e0c0a; }
.seg-btn {
  flex: 1; padding: 10px 6px; background: transparent; border: 0; cursor: pointer;
  font-family: var(--display); font-size: 13px; letter-spacing: .12em; color: var(--muted);
  border-right: 1px solid #241f19; transition: .15s;
}
.seg-btn:last-child { border-right: 0; }
.seg-btn:hover { color: var(--ink); background: #ffffff06; }
.seg-btn.on { background: linear-gradient(#3a1512, #260d0b); color: #ffd9cf; box-shadow: inset 0 -2px 0 var(--blood); }

.chars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: max-content;
  align-content: start;
  gap: 7px;
  overflow-y: auto;
  padding-right: 4px;
  max-height: 340px;
}
.char-chip {
  position: relative; text-align: left; cursor: pointer;
  background: linear-gradient(170deg, #201c17, #141210);
  border: 1px solid #342d25; border-radius: 4px;
  padding: 8px 9px 9px; display: flex; flex-direction: column; gap: 2px;
  transition: .15s; min-height: 78px; height: auto;
}
.char-chip:hover { border-color: #6a5843; transform: translateY(-1px); background: #241f19; }
.char-chip.on { border-color: var(--blood); box-shadow: 0 0 0 1px #b9332a55, inset 0 0 26px #b9332a22; }
.char-chip-role { font-size: 8px; letter-spacing: .22em; color: var(--blood-hi); text-transform: uppercase; }
.char-chip-name { font-family: var(--display); font-size: 15px; letter-spacing: .03em; line-height: 1.05; }
.char-chip-ability { font-size: 9px; color: var(--gold); letter-spacing: .04em; }
.char-chip-text { font-size: 9px; color: var(--muted); line-height: 1.3; }
.char-check { position: absolute; top: 6px; right: 8px; color: var(--blood-hi); font-size: 13px; }

.setup-actions { grid-column: 1 / 3; display: flex; gap: 10px; align-items: flex-end; }
.credit { text-align: center; color: #544c40; font-size: 10px; letter-spacing: .08em; margin-top: 18px; }
.credit em { color: #6d6455; font-style: normal; }

/* ============================== BUTTONS ============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; user-select: none;
  font-family: var(--display); text-transform: uppercase; letter-spacing: .13em;
  font-size: 12px; padding: 10px 16px;
  background: linear-gradient(#2a2520, #1a1613);
  border: 1px solid #4a3e32; border-radius: 3px;
  box-shadow: 0 2px 0 #000, inset 0 1px 0 #ffffff12;
  transition: .12s;
}
.btn:hover { background: linear-gradient(#332c25, #211c17); border-color: #6b5a48; }
.btn:active { transform: translateY(2px); box-shadow: 0 0 0 #000, inset 0 1px 0 #ffffff10; }
.btn:disabled { opacity: .35; cursor: not-allowed; transform: none; }
.btn-blood {
  background: linear-gradient(#8f2a22, #5d1712);
  border-color: #c44a3b; color: #ffe9e2;
  box-shadow: 0 3px 0 #2a0806, 0 0 24px #b9332a33, inset 0 1px 0 #ff8d7355;
  text-shadow: 0 1px 2px #000a;
}
.btn-blood:hover { background: linear-gradient(#a83328, #6e1c15); }
.btn-lg { padding: 15px 26px; font-size: 15px; letter-spacing: .18em; }
.btn-ghost { background: #00000030; border-color: #3a3129; color: var(--dim); box-shadow: none; }
.btn-ghost:hover { color: var(--ink); border-color: #63523f; }
.btn-sm { padding: 7px 11px; font-size: 10px; }
.btn-act {
  background: linear-gradient(#2d3a1e, #1b2412); border-color: #648040; color: #dfefc2;
  box-shadow: 0 2px 0 #070b03, inset 0 1px 0 #c9ff8b22;
}
.btn-act:hover { background: linear-gradient(#374823, #222d16); border-color: #8ab35c; }
.btn-tiny { padding: 5px 8px; font-size: 9px; letter-spacing: .1em; margin-top: 6px; }

/* ============================== GAME ================================== */
.game {
  height: 100vh; display: grid; grid-template-rows: 52px minmax(0, 1fr) 86px;
  background:
    radial-gradient(1100px 520px at 50% -20%, #2a110e 0%, transparent 60%),
    radial-gradient(900px 500px at 100% 110%, #14200d 0%, transparent 60%),
    linear-gradient(#0a0908, #060505);
}
.topbar {
  display: flex; align-items: center; gap: 18px; padding: 0 14px;
  border-bottom: 1px solid #2a241d;
  background: linear-gradient(#17130f, #0d0b09);
  box-shadow: 0 4px 18px #0008;
  z-index: 5;
}
.brand { display: flex; align-items: baseline; gap: 9px; min-width: 150px; }
.brand-mark {
  font-family: var(--display); font-size: 19px; letter-spacing: .1em; color: var(--blood-hi);
  border: 1px solid #6d211b; padding: 1px 6px; border-radius: 2px; background: #240d0a;
}
.brand-name { font-family: var(--display); font-size: 11px; letter-spacing: .3em; color: var(--muted); }

.meters { display: flex; align-items: center; gap: 16px; flex: 1; }
.meter { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--dim); }
.meter.danger { color: var(--blood-hi); animation: blink 1.4s infinite; }
.meter .ic { font-size: 17px; color: #8d7a5f; }
.meter-num { font-family: var(--display); font-size: 18px; color: var(--ink); letter-spacing: .05em; }
.barricade-pips { display: flex; gap: 2px; }
.pip {
  width: 13px; height: 16px; display: grid; place-items: center;
  font-size: 7px; color: #4a4237; background: #100e0c; border: 1px solid #2c261f;
  border-radius: 2px;
}
.pip.on { background: linear-gradient(#6b4a2a, #3b2614); color: #e8c08a; border-color: #7a5733; }
.pip.cur { box-shadow: 0 0 0 1px var(--blood-hi), 0 0 12px #b9332a88; }
.deck-meter { position: relative; }
.deck-stack { position: relative; width: 20px; height: 22px; display: inline-block; }
.deck-stack i {
  position: absolute; inset: 4px 0 0 4px; width: 14px; height: 18px;
  background: repeating-linear-gradient(45deg, #2a241d 0 3px, #201b16 3px 6px);
  border: 1px solid #4b3d2f; border-radius: 2px;
}
.zombie-card {
  cursor: pointer; display: flex; flex-direction: column; line-height: 1;
  border-left: 1px solid #2a241d; padding-left: 16px;
}
.zc-label { font-size: 7px; letter-spacing: .3em; color: var(--blood-hi); }
.zc-name { font-family: var(--display); font-size: 13px; letter-spacing: .08em; color: #cbbfa8; }
.zombie-card:hover .zc-name { color: #fff; }

.top-actions { display: flex; gap: 6px; }
.icon-btn {
  width: 30px; height: 30px; border-radius: 3px; cursor: pointer;
  background: #17130f; border: 1px solid #342d25; color: var(--dim);
  font-family: var(--display); font-size: 14px; transition: .12s;
}
.icon-btn:hover { color: #fff; border-color: #6d5841; background: #201a15; }
.icon-btn.muted { color: var(--blood-hi); }

.layout {
  display: grid; grid-template-columns: 244px minmax(0, 1fr) 292px;
  gap: 12px; padding: 10px 12px; min-height: 0;
}
.side {
  min-height: 0; display: flex; flex-direction: column;
  background: linear-gradient(170deg, #14110e, #0d0b09);
  border: 1px solid #29231c; border-radius: 4px;
  box-shadow: inset 0 1px 0 #ffffff06;
  overflow: hidden;
}
.side-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 10px; border-bottom: 1px solid #2a241d;
  font-family: var(--display); font-size: 10px; letter-spacing: .28em; color: var(--muted);
}
.side-meta { color: var(--gold); letter-spacing: .08em; }
.side-foot { padding: 8px 10px; border-top: 1px solid #241f19; font-size: 9px; letter-spacing: .16em; }
.warn { color: var(--blood-hi); animation: blink 1.6s infinite; }
.objectives { display: flex; flex-direction: column; gap: 7px; padding: 8px; overflow-y: auto; }
.obj-card {
  position: relative; padding: 8px 9px 9px; cursor: pointer;
  background: linear-gradient(165deg, #211c16, #14110e);
  border: 1px solid #373028; border-radius: 4px;
  box-shadow: 0 2px 0 #00000055;
  transition: .14s;
}
.obj-card:hover { border-color: #6b5741; transform: translateX(1px); background: #251f19; }
.obj-card.done { border-color: #5f7a3a; box-shadow: 0 0 0 1px #7ba34a33, inset 0 0 30px #6f943c1c; }
.obj-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 3px; }
.obj-tag { font-size: 7px; letter-spacing: .24em; color: var(--blood-hi); }
.obj-count { font-family: var(--display); font-size: 11px; color: var(--gold); }
.obj-name { font-family: var(--display); font-size: 14px; letter-spacing: .05em; line-height: 1.05; color: #e3d9c4; }
.obj-brief { font-size: 9.5px; color: var(--muted); line-height: 1.32; margin: 3px 0 7px; }
.mini-track { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.mini-label { font-size: 7px; letter-spacing: .14em; color: #776c5a; min-width: 44px; }
.pips { display: flex; gap: 3px; flex-wrap: wrap; }
.pips i {
  width: 8px; height: 8px; border-radius: 50%; background: #2a241d;
  border: 1px solid #3d342a; box-shadow: inset 0 1px 1px #0008;
}
.pips i.on { background: linear-gradient(#e6bc62, #9a7128); border-color: #f0d290; box-shadow: 0 0 8px #e2b45e66; }
.pips.small i { width: 6px; height: 6px; }
.stamp {
  position: absolute; right: 6px; bottom: 6px;
  font-family: var(--display); font-size: 8px; letter-spacing: .14em;
  color: #b9d98a; border: 1px solid #6b8b40; padding: 1px 4px; transform: rotate(-6deg);
  opacity: .9;
}
.found { font-size: 9px; color: var(--gold); }
.found.dim { color: var(--muted); }

/* board */
.board-area { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.board-frame { position: relative; flex: 1; min-height: 0; display: flex; justify-content: center; align-items: center; }
#board {
  --bh: min(calc(100vh - 214px), 730px);
  height: var(--bh); width: calc(var(--bh) * 1.05); max-width: 100%;
  display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 7px;
  filter: drop-shadow(0 22px 38px #000a);
}
.tokens { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.link-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 15; overflow: visible; }
.link-path {
  fill: none; stroke: #e2b45e; stroke-width: 1.6; stroke-dasharray: 4 4;
  opacity: .85; filter: drop-shadow(0 0 4px #e2b45e88);
  animation: linkFlow .55s linear infinite;
}
.link-end { fill: #e2b45e; stroke: #0b0a08; stroke-width: 1; }
.link-origin { fill: #a9d05b; stroke: #0b0a08; stroke-width: 1; }
.room.linked, .courtyard.linked {
  border-color: #e2b45e !important;
  box-shadow: 0 0 0 1px #e2b45eaa, inset 0 0 18px #e2b45e22 !important;
}
@keyframes linkFlow { to { stroke-dashoffset: -8; } }
/* Tokens sit above the board, so they must not swallow movement clicks.
   Only tokens that are genuine targets opt back into hit-testing. */
.tokens > * { pointer-events: none; }
.tokens > .tok-zombie.targetable { pointer-events: auto; }
.board-fx { position: absolute; inset: 0; pointer-events: none; z-index: 25; overflow: hidden; }
.board-caption {
  height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 10.5px; letter-spacing: .06em; color: var(--dim); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.board-caption b { color: #e8dcc2; font-weight: normal; }
.board-caption b.bad { color: var(--blood-hi); }

.store-card {
  position: relative; display: flex; flex-direction: column; gap: 3px;
  padding: 4px 5px 5px; min-height: 0; overflow: hidden;
  background:
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px),
    linear-gradient(160deg, #23201a, #15130f 58%, #1b1813);
  border: 1px solid #3a332a; border-radius: 5px;
  box-shadow: inset 0 0 0 1px #ffffff05, inset 0 -14px 24px #00000033, 0 2px 0 #080706;
  transition: box-shadow .3s, border-color .3s;
}
.store-card::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 15% 8%, #ffffff0a, transparent 42%);
}
.store-card.clear { border-color: #45522f; box-shadow: inset 0 0 26px #85b3551c, 0 2px 0 #080706; }
.store-card.hot { border-color: #6b2c24; box-shadow: inset 0 0 30px #b9332a22, 0 2px 0 #080706; }
.store-head {
  display: flex; align-items: center; justify-content: space-between; gap: 4px;
  padding-bottom: 2px; border-bottom: 1px solid #ffffff0a; flex: 0 0 auto;
}
.store-name {
  font-family: var(--display); font-size: clamp(8px, .78vw, 11px);
  letter-spacing: .06em; line-height: 1.05; color: #cdbfa6; text-transform: uppercase;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.store-tiny { display: none; }
.sym {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 17px; height: 17px; border-radius: 50%;
  font-size: 10px; line-height: 1;
  border: 1px solid currentColor; background: #0e0c0a;
  box-shadow: inset 0 0 8px currentColor, 0 0 8px #0008;
}
.sym.sm { width: 15px; height: 15px; font-size: 9px; }
.sym-red { color: #e86a5b; }
.sym-blue { color: #6fa8e8; }
.sym-yellow { color: #e7c05e; }
.sym-purple { color: #c08ae8; }
.sym-edge-n::after { content: ''; position: absolute; top: 0; left: 22%; right: 22%; height: 2px; background: linear-gradient(90deg, transparent, var(--blood-hi), transparent); opacity: .5; }

.rooms { display: flex; flex-direction: column; gap: 0; flex: 1; min-height: 0; }
.store-bottom .rooms { flex-direction: column-reverse; }
.room {
  position: relative; flex: 1; min-height: 0; display: flex; align-items: center; gap: 5px;
  padding: 0 4px; border-radius: 3px; cursor: help;
  background: linear-gradient(180deg, #ffffff05, #00000020);
  border: 1px solid #302a22;
  transition: background .15s, box-shadow .18s, border-color .18s, transform .1s;
  overflow: visible;
}
.room-link {
  position: relative; flex: 0 0 7px; display: flex; align-items: center; justify-content: center;
  pointer-events: none; z-index: 1;
}
.room-link::before {
  content: ''; width: 1px; height: 100%;
  background: linear-gradient(180deg, #3a3128, #80694b 48%, #3a3128);
  box-shadow: 0 0 4px #0008;
}
.room-link i {
  position: absolute; width: 3px; height: 3px; background: #9b8059;
  transform: rotate(45deg); box-shadow: 0 0 5px #e2b45e55;
}
.room:hover { background: #ffffff0a; }
.room-num {
  flex: 0 0 auto; width: 12px; height: 12px; border-radius: 2px;
  display: grid; place-items: center; font-size: 7px; color: #6d6150;
  background: #0e0c0a; border: 1px solid #2f281f;
}
.room-label {
  font-size: clamp(6px, .58vw, 8px); letter-spacing: .045em; color: #8d816c;
  text-transform: uppercase; line-height: 1.05; overflow: hidden;
  white-space: nowrap; text-overflow: ellipsis;
}
.room.here { border-color: #6f5d45; background: linear-gradient(180deg, #ffffff0d, #00000022); box-shadow: inset 0 0 0 1px #e2b45e33; }
.room.legal {
  cursor: pointer; border-color: #8bb45a;
  background: linear-gradient(180deg, #a9d05b18, #00000022);
  box-shadow: 0 0 0 1px #a9d05b55, inset 0 0 16px #a9d05b1c;
  animation: pulse 1.7s ease-in-out infinite;
}
.room.legal:hover { background: linear-gradient(180deg, #a9d05b30, #0c1207); transform: scale(1.012); }
.room.danger { border-color: #5e2a24; }
.room.ready .room-label { color: #cfe6a3; }
.room.ready::after {
  content: ''; position: absolute; left: 2px; top: 2px; width: 3px; height: 3px;
  border-radius: 50%; background: var(--acid); box-shadow: 0 0 7px var(--acid);
}
.room-anchor { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.room-side { display: flex; align-items: center; gap: 2px; margin-left: auto; flex: 0 0 auto; min-width: 0; }
.room-tags { display: flex; align-items: center; gap: 1px; flex: 0 0 auto; }
.rtag {
  display: inline-flex; align-items: center; justify-content: center; min-width: 11px; height: 11px; padding: 0 2px;
  border-radius: 2px; font-family: var(--body); font-size: 7px; line-height: 1;
  border: 1px solid #3d342a; background: #0e0c0a; color: #8d816c;
  white-space: nowrap; overflow: hidden;
}
.rtag b { font-weight: normal; }
.rtag em { display: none; font-style: normal; margin-left: 2px; }
@media (min-width: 901px) { .rtag em { display: inline; } }
.rtag.ring { color: #8fc4a0; border-color: #3f5c48; background: #0d1711; }
.rtag.court { color: #e2b45e; border-color: #6d5733; background: #1a140b; }
.rtag.secret { color: #c08ae8; border-color: #543b66; background: #150e1a; }
.room-extras { display: flex; align-items: center; gap: 2px; flex: 0 0 auto; }
.tok {
  width: 15px; height: 15px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 7px; font-weight: bold; border: 1px solid #66513a; color: #e7d8b8;
  background: radial-gradient(circle at 35% 30%, #4a3b28, #221a12);
  padding: 0; cursor: default; line-height: 1;
}
.tok .ic { font-size: 9px; }
.tok.live { cursor: pointer; box-shadow: 0 0 0 1px #ffd86b88, 0 0 10px #ffd86b55; animation: pulse 1.6s infinite; }
.tok.part { background: radial-gradient(circle at 35% 30%, #7f6a44, #3a2c16); border-color: #c9a25b; }
.tok.supply { border-radius: 2px; background: radial-gradient(circle at 35% 30%, #8a6a3c, #402b12); border-color: #d2a565; position: relative; }
.tok.supply b { position: absolute; right: -1px; bottom: -3px; font-size: 6px; color: #ffdca7; }
.tok.trap { border-radius: 2px; color: #e07a63; border-color: #7d3327; background: #2a100c; }
.tok.squad { border-radius: 3px; color: #cfe0ff; border-color: #53688f; background: #131c2c; }
.tok.squad.live { box-shadow: 0 0 0 1px #8fb4ff99, 0 0 10px #8fb4ff55; }

.loot-row {
  flex: 0 0 auto; display: flex; align-items: flex-end; gap: 3px; min-height: 19px;
}
.loot {
  position: relative; display: flex; align-items: center; gap: 2px;
  max-width: 50%; padding: 2px 3px; border-radius: 2px; cursor: default;
  background: linear-gradient(#2a241c, #17130f); border: 1px solid #453a2d;
  font-size: 6.5px; letter-spacing: .02em; color: #b7a98f; overflow: hidden;
  transition: .12s;
}
.loot.live { cursor: pointer; border-color: #7d6847; }
.loot.live:hover { transform: translateY(-2px); border-color: var(--gold); color: #fff; box-shadow: 0 4px 10px #0008; }
.loot-ic { display: inline-grid; place-items: center; width: 11px; height: 11px; font-size: 9px; color: #d9c39a; flex: 0 0 auto; }
.loot-ic.melee { color: #e08a72; }
.loot-ic.ranged { color: #e8c26b; }
.loot-ic.backpack { color: #8fc4a0; }
.loot-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.loot-empty {
  font-size: 6.5px; letter-spacing: .16em; color: #4e463a; padding: 2px;
}
.loot:hover::after, .wpn[data-tip]:hover::after, .pack-item[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 0; bottom: calc(100% + 6px); z-index: 60;
  width: 170px; padding: 6px 7px; border-radius: 3px;
  background: #0b0a08; border: 1px solid #4a3d2d; color: #cbbda4;
  font-size: 9px; line-height: 1.35; letter-spacing: 0; text-transform: none;
  box-shadow: 0 8px 20px #000b; pointer-events: none;
}

/* courtyard */
.courtyard {
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding: 7px 8px; gap: 3px; border-radius: 5px;
  background:
    radial-gradient(circle at 50% 25%, #4a2b16 0%, #221610 46%, #120e0b 100%);
  border: 1px solid #5a432c; overflow: visible;
  box-shadow: inset 0 0 40px #ff9d3c14, inset 0 0 0 1px #ffffff08, 0 0 0 1px #0006;
}
.courtyard::before {
  content: ''; position: absolute; inset: 6px; border: 1px dashed #ffffff12; border-radius: 3px; pointer-events: none;
}
.courtyard.legal { cursor: pointer; border-color: #a9d05b; box-shadow: 0 0 0 1px #a9d05b55, inset 0 0 34px #a9d05b18; animation: pulse 1.7s infinite; }
.court-title { font-family: var(--display); font-size: clamp(8px, .8vw, 11px); letter-spacing: .22em; color: #e5c48d; }
.court-sub { font-size: 6.5px; letter-spacing: .24em; color: #866a4c; margin-top: -1px; }
.court-anchor-wrap { position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.barricade-mini { display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.bm-label { font-size: 6.5px; letter-spacing: .12em; color: #a8875f; display: flex; align-items: center; gap: 2px; }
.bm-track { display: flex; gap: 2px; }
.bm-track i { width: 9px; height: 7px; background: #2b2119; border: 1px solid #463625; border-radius: 1px; }
.bm-track i.on { background: linear-gradient(#8d6334, #533315); box-shadow: 0 0 6px #e2b45e33; }
.pool-row { display: flex; align-items: center; gap: 5px; }
.pool-label { font-size: 6px; letter-spacing: .14em; color: #8a7154; }
.pool-tokens { display: flex; gap: 2px; }
.pool-token { color: #9fc4e8; font-size: 10px; opacity: .8; }
.pool-empty { font-size: 7px; color: var(--blood-hi); }
.court-extras { display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; margin-top: 1px; }
.court-item {
  display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  background: #241a12; border: 1px solid #5c4530; border-radius: 2px;
  color: #d6bb92; font-size: 6.5px; letter-spacing: .06em; padding: 2px 4px;
}
.court-item.live:hover { border-color: var(--gold); color: #fff; }
.court-hint { font-size: 6px; color: #6d5842; text-align: center; line-height: 1.2; }

/* moving tokens */
.tok-zombie, .tok-survivor {
  position: absolute; left: 0; top: 0; will-change: transform;
  transition: transform .19s cubic-bezier(.2, .8, .3, 1.15);
  display: grid; place-items: center; user-select: none;
}
.tok-zombie {
  width: 24px; height: 24px; border-radius: 50%; color: #cfe0a0;
  background: radial-gradient(circle at 34% 28%, #86b151, #4a6f27 62%, #2a3f12);
  border: 1.5px solid #1a2a0c;
  box-shadow: 0 3px 6px #000b, inset 0 1px 2px #ffffff40, 0 0 0 1px #ffffff12;
  cursor: pointer;
}
.tok-zombie .ic { font-size: 16px; }
.tok-zombie:hover { filter: brightness(1.2); }
.tok-zombie.targetable {
  box-shadow: 0 0 0 2px #ffd86b, 0 0 16px #ffb03a, 0 3px 6px #000b;
  animation: pulse .9s infinite;
}
.tok-survivor {
  width: 25px; height: 25px; color: var(--pc, #e05252);
  filter: drop-shadow(0 3px 3px #000c);
}
.tok-survivor .ic { font-size: 23px; }
.tok-survivor.active { filter: drop-shadow(0 0 8px var(--pc)) drop-shadow(0 3px 3px #000c); }
.tok-survivor.hurt { animation: hurtPulse 1.4s infinite; }
.tok-survivor.spawn { animation: popIn .3s ease-out; }
.tok-zombie.spawn { animation: popIn .3s ease-out; }
.tok-zombie.dying, .tok-survivor.dying { animation: dieOut .3s forwards; pointer-events: none; }
.splat {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: radial-gradient(circle, #c0342bdd 0%, #8d1f18aa 40%, transparent 70%);
  animation: splat .65s ease-out forwards; mix-blend-mode: screen;
}

/* player pane */
.player-pane { padding: 9px; overflow-y: auto; }
.char-card {
  position: relative; padding: 10px; border-radius: 4px;
  background:
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px),
    linear-gradient(160deg, color-mix(in srgb, var(--pcd) 22%, #191510), #12100d 70%);
  border: 1px solid color-mix(in srgb, var(--pc) 45%, #3a3229);
  box-shadow: inset 0 0 30px #00000055;
}
.char-card.danger { border-color: #a83a2d; box-shadow: inset 0 0 34px #b9332a22, 0 0 0 1px #b9332a44; }
.char-role { font-size: 7.5px; letter-spacing: .26em; color: var(--pc); text-transform: uppercase; }
.char-name { font-family: var(--display); font-size: 24px; line-height: .95; letter-spacing: .02em; margin-top: 1px; color: #f1e7d2; text-shadow: 0 2px 4px #000; }
.char-color { display: flex; align-items: center; gap: 4px; font-size: 8px; color: var(--muted); letter-spacing: .12em; margin-top: 2px; text-transform: uppercase; }
.char-color .ic { color: var(--pc); font-size: 10px; }
.char-ability { font-size: 9.5px; line-height: 1.35; color: #b4a68c; margin: 7px 0 8px; padding: 6px 7px; background: #00000033; border-left: 2px solid var(--pc); border-radius: 0 3px 3px 0; }
.char-ability b { color: #e7d9bd; font-weight: normal; }

.track-label { display: flex; justify-content: space-between; font-size: 6.5px; letter-spacing: .2em; color: #8b7c64; margin-bottom: 3px; }
.track { display: grid; grid-template-columns: repeat(10, 1fr); gap: 1px; }
.cell {
  position: relative; height: 20px; background: #0f0d0b; border: 1px solid #2b251e;
  display: grid; place-items: center;
}
.cell:first-child { border-radius: 3px 0 0 3px; }
.cell:last-child { border-radius: 0 3px 3px 0; }
.cell em { font-size: 6px; color: #4c4438; font-style: normal; z-index: 1; }
.cell.past { background: #1d0e0c; }
.cell.spent { background: #171207; }
.cell.has-w { background: #3a1210; }
.cell.has-a { background: #3a2c0e; }
.mk { position: absolute; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 1px 3px #000b; }
.mk.wound { left: 2px; background: radial-gradient(circle at 35% 30%, #f0776a, #a5251c); border: 1px solid #ff9b8c66; }
.mk.ammo { right: 2px; background: radial-gradient(circle at 35% 30%, #ffe08a, #b8862a); border: 1px solid #ffe9b466; }
.track-hint { font-size: 7.5px; color: #6d6152; line-height: 1.3; margin: 5px 0 6px; }
.char-card.danger .track-hint { color: #c9705f; }

.weapons { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
.wpn {
  position: relative; display: flex; flex-direction: column; gap: 1px;
  padding: 5px 6px; border-radius: 3px; background: linear-gradient(#241e18, #15110e);
  border: 1px solid #40362a; min-height: 52px;
}
.wpn.melee { border-left: 2px solid #a5513c; }
.wpn.ranged { border-left: 2px solid #c19a45; }
.wpn-slot { font-size: 5.8px; letter-spacing: .2em; color: #7d705c; }
.wpn-ic { position: absolute; right: 5px; top: 4px; font-size: 14px; color: #b9a98b; opacity: .8; }
.wpn-name { font-family: var(--display); font-size: 11px; letter-spacing: .04em; color: #ddd0b8; line-height: 1.05; margin-top: auto; }

.pack { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pack-item {
  position: relative; display: inline-flex; align-items: center; gap: 3px; cursor: pointer;
  background: #1b2417; border: 1px solid #40522f; border-radius: 2px; padding: 3px 5px;
  font-size: 8px; color: #b6c99b;
}
.pack-item:hover { border-color: #89ab5d; color: #e4f5c7; }
.pack-empty { font-size: 8px; color: #5a5144; letter-spacing: .08em; }
.carrying { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.carry { display: inline-flex; align-items: center; gap: 3px; font-size: 8px; color: #e0c48e; background: #2a2012; border: 1px solid #5c4728; border-radius: 2px; padding: 2px 5px; }
.char-foot { display: flex; justify-content: flex-end; }

.party-pane { border-top: 1px solid #241f19; padding: 7px 9px; }
.party-title { font-size: 6.5px; letter-spacing: .24em; color: #6f6554; margin-bottom: 5px; }
.party-row { display: flex; align-items: center; gap: 5px; padding: 3px 0; }
.party-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 6px var(--pc); }
.party-name { font-size: 9px; color: #b3a68e; width: 96px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.party-stats { font-family: var(--display); font-size: 10px; color: #cbbfa8; }
.party-stats i { color: #5a5144; font-style: normal; }
.party-bar { flex: 1; height: 3px; background: #241f19; border-radius: 2px; overflow: hidden; }
.party-bar i { display: block; height: 100%; background: linear-gradient(90deg, #7a9a45, #b9332a); }

/* action bar */
.actionbar {
  display: grid; grid-template-columns: 210px minmax(0, 1fr) 360px; gap: 12px;
  align-items: center; padding: 0 14px;
  background: linear-gradient(#15120f, #0b0a08);
  border-top: 1px solid #2c251d;
  box-shadow: 0 -6px 22px #0008;
}
.action-left { display: flex; flex-direction: column; gap: 5px; }
.move-pips { display: flex; gap: 5px; }
.mv {
  width: 26px; height: 26px; border-radius: 50%;
  background: #100e0c; border: 1px solid #3a3128;
  box-shadow: inset 0 2px 4px #000a;
  position: relative;
}
.mv.on { background: radial-gradient(circle at 35% 30%, #d8b465, #8b6220); border-color: #f0d290; box-shadow: 0 0 14px #e2b45e33, inset 0 1px 2px #fff6; }
.mv.free { width: 20px; height: 20px; margin-top: 3px; background: radial-gradient(circle at 35% 30%, #b7e07a, #5b7f2a); border-color: #d4f7a1; }
.phase-label { font-family: var(--display); font-size: 9px; letter-spacing: .28em; color: var(--muted); }
.action-mid { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; justify-content: center; }
.action-mid .btn { padding: 9px 13px; }
.action-right { overflow: hidden; }
.log { display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.log-line { font-size: 9px; line-height: 1.3; color: #8c806b; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.log-line.good { color: #a8c77a; }
.log-line.bad { color: #d2765f; }
.log-line.objective { color: #e2b45e; }
.log-line.story { color: #b9a68a; font-style: italic; }
.log-full .log-line { padding: 4px 0; border-bottom: 1px solid #221d17; white-space: normal; font-size: 11px; }

/* dice */
.dice-overlay {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 50%, #00000088, #000000d0);
  backdrop-filter: blur(2px);
}
.dice-stage { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.die {
  width: 104px; height: 104px; border-radius: 16px;
  background: linear-gradient(150deg, #f3ead6, #cdbfa2 70%, #a99b7f);
  border: 3px solid #e8ddc4;
  box-shadow: 0 22px 40px #000b, inset 0 -8px 16px #7d6d4f66, inset 0 4px 10px #fff;
  display: grid; place-items: center; color: #2a2118;
}
.die.rolling { animation: tumble .56s ease-in-out; }
.die.landed { animation: land .3s cubic-bezier(.2,1.6,.4,1); }
.die-face { display: grid; place-items: center; }
.die-face .ic { font-size: 56px; }
.die-face.f-overkill { color: #3f7327; filter: drop-shadow(0 0 8px #7fd14b88); }
.die-face.f-nothing { color: #6f6754; }
.die-face.f-wound1 { color: #a5302a; }
.die-face.f-wound2 { color: #7d1c17; }
.dice-result { font-family: var(--display); font-size: 30px; letter-spacing: .16em; }
.f-overkill-txt { color: #a9d05b; text-shadow: 0 0 20px #a9d05b66; }
.f-nothing-txt { color: #cfc4ae; }
.f-wound1-txt, .f-wound2-txt { color: #ef6a54; text-shadow: 0 0 20px #b9332a66; }
.dice-sub { font-size: 11px; color: var(--dim); text-align: center; max-width: 320px; }
@keyframes tumble {
  0% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-24deg) translateY(-16px) scale(1.06); }
  50% { transform: rotate(18deg) translateY(4px) scale(.96); }
  75% { transform: rotate(-10deg) translateY(-6px) scale(1.02); }
  100% { transform: rotate(0) scale(1); }
}
@keyframes land { 0% { transform: scale(1.28); } 100% { transform: scale(1); } }

/* card reveal */
.card-reveal-overlay {
  position: fixed; inset: 0; z-index: 210; display: grid; place-items: center;
  background: #000000b0; backdrop-filter: blur(2px);
  animation: fadeIn .18s;
}
.card-reveal-overlay.out { animation: fadeOut .26s forwards; }
.cr-inner {
  position: relative; width: 224px; padding: 16px 14px 14px; text-align: center;
  border-radius: 6px; color: #2a2118;
  background:
    repeating-linear-gradient(0deg, #00000006 0 2px, transparent 2px 4px),
    linear-gradient(165deg, #f0e7d3, #d6c8ad);
  border: 1px solid #f7f0df;
  box-shadow: 0 30px 60px #000c, inset 0 0 30px #8a77563a;
  animation: cardIn .34s cubic-bezier(.2,1.4,.4,1);
}
.cr-sym { position: absolute; top: 8px; right: 8px; }
.cr-kind { font-size: 7.5px; letter-spacing: .26em; color: #7c6a4c; }
.cr-name { font-family: var(--display); font-size: 25px; line-height: 1; letter-spacing: .02em; margin: 4px 0 8px; }
.cr-icon { color: #4b3a26; }
.cr-icon .ic { font-size: 40px; }
.cr-text { font-size: 10px; line-height: 1.35; color: #4a3d2b; margin-top: 8px; }
.cr-where { margin-top: 10px; padding-top: 8px; border-top: 1px solid #00000018; font-size: 8px; letter-spacing: .12em; color: #7b6344; }
@keyframes cardIn { 0% { transform: rotateY(90deg) scale(.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

/* modal */
.modal {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center;
  background: #000000c4; backdrop-filter: blur(3px); padding: 20px;
  animation: fadeIn .15s;
}
.modal-card {
  width: min(620px, 94vw); max-height: 86vh; display: flex; flex-direction: column;
  background:
    repeating-linear-gradient(0deg, #ffffff02 0 1px, transparent 1px 3px),
    linear-gradient(165deg, #1c1813, #0f0d0b);
  border: 1px solid #4a3d2d; border-radius: 6px;
  box-shadow: 0 40px 90px #000d, inset 0 1px 0 #ffffff0a;
  animation: modalIn .2s ease-out;
}
@keyframes modalIn { from { transform: translateY(10px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-head {
  padding: 9px 14px; border-bottom: 1px solid #322a21;
  font-family: var(--display); font-size: 10px; letter-spacing: .3em; color: var(--blood-hi);
  background: #00000033;
}
.modal-body { padding: 16px 18px; overflow-y: auto; }
.modal-title { font-family: var(--display); font-size: 30px; line-height: .95; letter-spacing: .02em; margin: 0 0 10px; color: #efe4cd; }
.modal-strong { font-size: 13px; color: #e2b45e; line-height: 1.45; margin: 0 0 10px; }
.modal-text { font-size: 12px; line-height: 1.55; color: #b3a68e; margin: 0 0 10px; }
.modal-text b { color: #e6d9c0; font-weight: normal; }
.modal-text.dim { color: #6f6554; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 14px; border-top: 1px solid #2a241d; background: #00000033; }
.modal-body h3 { font-family: var(--display); font-size: 14px; letter-spacing: .16em; color: var(--gold); margin: 16px 0 6px; }
.rules-list { margin: 0 0 10px; padding-left: 18px; color: #b3a68e; font-size: 12px; line-height: 1.5; }
.rules-list li { margin-bottom: 6px; }
.rules-list b { color: #e6d9c0; font-weight: normal; }
.pick-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.pick-grid.wide { grid-template-columns: repeat(3, 1fr); max-height: 46vh; overflow-y: auto; }
.pick-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; cursor: pointer; text-align: left;
  background: #1c1813; border: 1px solid #3a3128; border-radius: 3px; padding: 8px; color: #cbbfa8;
}
.pick-card:hover { border-color: var(--gold); background: #241f18; }
.pick-card b { font-family: var(--display); font-size: 14px; font-weight: normal; color: #eee2ca; }
.pick-card small { font-size: 8px; letter-spacing: .12em; color: #7d705c; }
.pick-card em { font-size: 9px; font-style: normal; line-height: 1.3; color: #948875; }
.pick-card .loot-ic { font-size: 16px; margin-bottom: 2px; }
.pick-room {
  cursor: pointer; text-align: left; padding: 8px 9px; font-size: 10px;
  background: #1a1712; border: 1px solid #3a3128; border-radius: 3px; color: #b9ac94;
}
.pick-room:hover { border-color: var(--gold); color: #fff; }
.obj-track-big { margin: 12px 0; }
.obj-track-big .pips i { width: 12px; height: 12px; }
.reveal-card {
  position: relative; display: flex; flex-direction: column; gap: 4px; align-items: center;
  padding: 14px; border-radius: 4px; color: #2a2118;
  background: linear-gradient(165deg, #f0e7d3, #d6c8ad);
}
.reveal-card b { font-family: var(--display); font-size: 20px; font-weight: normal; }
.reveal-card em { font-size: 10px; font-style: normal; color: #4a3d2b; text-align: center; line-height: 1.4; }
.reveal-card .loot-ic { font-size: 30px; color: #4b3a26; }
.sym-mini { position: absolute; top: 8px; right: 8px; }
.end .end-mark { font-family: var(--display); font-size: 52px; line-height: .9; letter-spacing: .06em; margin-bottom: 12px; }
.end-mark.win { color: #a9d05b; text-shadow: 0 0 34px #a9d05b44; }
.end-mark.lose { color: var(--blood-hi); text-shadow: 0 0 34px #b9332a55; }
.end-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 16px; }
.end-stats div { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px; background: #00000033; border: 1px solid #2f2820; border-radius: 3px; }
.end-stats b { font-family: var(--display); font-size: 22px; font-weight: normal; color: #e8dcc4; }
.end-stats span { font-size: 7.5px; letter-spacing: .14em; color: #7d705c; }
.log-full { max-height: 50vh; overflow-y: auto; }

/* toasts */
.toasts { position: fixed; left: 50%; bottom: 100px; transform: translateX(-50%); z-index: 250; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast {
  padding: 8px 14px; border-radius: 3px; font-size: 10.5px; letter-spacing: .05em;
  background: #14110df2; border: 1px solid #4a3d2d; color: #d6c9b2;
  box-shadow: 0 12px 30px #000a; animation: toastIn .22s ease-out;
  max-width: min(70vw, 640px); text-align: center;
}
.toast.good { border-color: #5c7d38; color: #cbe3a4; }
.toast.bad { border-color: #7d3327; color: #f0a08d; }
.toast.story { border-color: #6d5a3f; color: #e2cfa8; font-style: italic; }
.toast.info { }
.toast.out { animation: toastOut .35s forwards; }

/* room hover card */
.room-tip {
  position: fixed; z-index: 280; width: 262px; max-width: calc(100vw - 16px);
  padding: 10px 11px 11px; border-radius: 5px;
  background: linear-gradient(165deg, #211c16, #0b0a08 78%);
  border: 1px solid #6d5841;
  box-shadow: 0 18px 44px #000e, inset 0 1px 0 #ffffff0b, 0 0 0 1px #0008;
  pointer-events: none; opacity: 0; transform: translateY(4px);
  transition: opacity .1s ease-out, transform .1s ease-out;
}
.room-tip.show { opacity: 1; transform: translateY(0); }
.rt-head {
  font-family: var(--display); font-size: 14px; letter-spacing: .07em; line-height: 1.1;
  color: #ecd9b3;
}
.rt-sub { font-size: 7px; letter-spacing: .16em; color: #8a7c67; margin-top: 3px; padding-bottom: 6px; border-bottom: 1px solid #352d24; }
.rt-tags { display: flex; flex-wrap: wrap; gap: 3px; margin: 6px 0 5px; }
.rt-tags .rtag { height: 13px; font-size: 6.5px; letter-spacing: .08em; padding: 0 4px; }
.rtag.hub { color: #a9d05b; border-color: #526b34; background: #11180a; }
.rtag.here { color: #e2b45e; border-color: #6d5733; background: #1a140b; }
.rtag.move { color: #cfe6a3; border-color: #6f8d45; background: #12190b; }
.rt-perk { font-size: 10.5px; line-height: 1.4; color: #c8bca5; }
.rt-links-label {
  margin-top: 8px; padding-top: 7px; border-top: 1px solid #2c251e;
  font-size: 6.5px; letter-spacing: .2em; color: #8a7c67;
}
.rt-links { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.rt-links li { position: relative; padding-left: 10px; font-size: 9.5px; color: #b8aa93; line-height: 1.3; }
.rt-links li::before { content: ''; position: absolute; left: 1px; top: 5px; width: 3px; height: 3px; border-radius: 50%; background: #e2b45e; }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px); } }

/* fx */
.hurt-flash {
  position: fixed; inset: 0; z-index: 240; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, transparent 40%, #a5181077 100%);
}
.hurt-flash.go { animation: hurtFlash .55s ease-out; }
@keyframes hurtFlash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 1px #a9d05b55, inset 0 0 16px #a9d05b18; } 50% { box-shadow: 0 0 0 2px #a9d05b99, inset 0 0 22px #a9d05b2e; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes popIn { 0% { opacity: 0; scale: .4; } 70% { scale: 1.12; } 100% { opacity: 1; scale: 1; } }
@keyframes dieOut { to { opacity: 0; scale: .5; filter: brightness(2); } }
@keyframes hurtPulse { 0%, 100% { filter: drop-shadow(0 0 5px #b9332a); } 50% { filter: drop-shadow(0 0 14px #ff5c42); } }
@keyframes splat { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.5); } }

/* responsive */
@media (max-width: 1180px) {
  .layout { grid-template-columns: 210px minmax(0, 1fr) 250px; gap: 8px; padding: 8px; }
  .actionbar { grid-template-columns: 170px minmax(0, 1fr) 260px; }
  .chars { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 900px) {
  body { overflow: auto; }
  .game { height: auto; min-height: 100vh; grid-template-rows: auto auto auto; }
  .topbar { flex-wrap: wrap; height: auto; padding: 8px 10px; row-gap: 8px; }
  .brand { min-width: 0; flex: 1; }
  .brand-name { white-space: nowrap; }
  .meters { order: 3; flex-basis: 100%; flex-wrap: nowrap; gap: 12px; overflow-x: auto; padding-bottom: 2px; }
  .zombie-card { margin-left: auto; }
  .top-actions { margin-left: auto; }
  .layout { grid-template-columns: 1fr; }
  .side { max-height: none; }
  .objectives { flex-direction: row; overflow-x: auto; }
  .obj-card { min-width: 180px; }
  .right-side { order: 0; }
  .left-side { order: 2; }
  .board-area { order: -1; min-height: 74vh; }
  .actionbar { grid-template-columns: 1fr; gap: 8px; padding: 10px; position: sticky; bottom: 0; z-index: 40; }
  .action-right { display: none; }
  .action-mid { justify-content: flex-start; }
  .setup-panel { grid-template-columns: 1fr; }
  .setup-block.wide { grid-column: 1; grid-row: auto; }
  .setup-actions { grid-column: 1; }
  .chars { grid-template-columns: repeat(2, minmax(0,1fr)); max-height: 300px; }
}
@media (max-width: 430px) {
  .topbar { gap: 6px 8px; }
  .brand-name { font-size: 9px; letter-spacing: .2em; }
  .meter { gap: 4px; }
  .barricade-pips .pip { width: 11px; height: 15px; }
  .zc-name { font-size: 11px; }
  .store-name { font-size: 7px; letter-spacing: .02em; }
  .store-full { display: none; }
  .store-tiny { display: inline; }
  .room-label { font-size: 6.5px; letter-spacing: .01em; }
}