.cell {
  width: 96px;
  height: 114px;
  border: 1px solid #9e8a66;
  border-radius: var(--radius-lg);
  position: relative;
  background: #f0ead8;
  padding: 0;
  font-size: 0.67rem;
  overflow: visible;
  display: flex;
  flex-direction: column;
}

.cell > div:first-child,
.cell > .small {
  padding: 0.15rem 0.2rem 0;
}

.cell > div:first-child {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.cell > div:first-child strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.cell.empty {
  background: rgba(0, 0, 0, 0.03);
  border-style: dashed;
}

.cell.place-option {
  border-style: solid;
  border-width: 2px;
  border-color: #c24a3e;
  background:
    linear-gradient(135deg, rgba(194, 74, 62, 0.18), rgba(194, 74, 62, 0.06)),
    #f8efe9;
  cursor: pointer;
}

.cell.place-option:hover {
  filter: brightness(0.97);
}

.cell.companion-preview {
  border-style: solid;
  border-width: 2px;
  border-color: #5a7fbf;
  background:
    linear-gradient(135deg, rgba(90, 127, 191, 0.18), rgba(90, 127, 191, 0.06)),
    #eef2fb;
  opacity: 0.82;
  pointer-events: none;
}

.tile-town {
  background: linear-gradient(135deg, #f7c88f 0%, #ebb36e 100%);
}

.tile-road {
  background: var(--road);
}

.tile-building {
  background: var(--building);
}

.tile-named {
  background: var(--named);
  color: #fff;
}

.tile-woods {
  background: linear-gradient(135deg, #2d6a2d 0%, #1a4a1a 100%);
  color: #d4f5c0;
}

.tile-helipad {
  background: var(--helipad);
  color: #fff;
}

.tile-helipad .micro-cell {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.35);
  box-shadow: none;
  position: relative;
  z-index: 1;
}

.tile-helipad .micro-grid {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.tile-helipad .micro-grid::after {
  content: "H";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 88%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.9);
  color: #fff;
  font-size: 10rem;
  font-weight: 900;
  line-height: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.tile-grass {
  background: var(--subtile-grass);
  border: 2px solid var(--subtile-grass-border);
  box-shadow: 0 2px 8px 0 rgba(60, 120, 60, 0.10);
}


.badges {
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 4px;
  display: flex;
  justify-content: space-between;
}

.badge {
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
  font-size: 0.63rem;
  color: #fff;
}

.badge.z {
  background: var(--zombie);
}

.badge.p {
  background: var(--player);
}

.micro-grid {
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 0;
  border: none;
  border-top: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 0 0 7px 7px;
  overflow: visible;
  width: 100%;
  flex: 1;
}

.micro-cell {
  min-height: 0;
  text-align: left;
  font-size: 0.56rem;
  border: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.35);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
  background: rgba(255, 255, 255, 0.45);
  padding: 1px;
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  align-items: flex-start;
  align-content: flex-start;
  position: relative;
}

.micro-cell.road-subtile {
  background: var(--subtile-road);
}

.micro-cell.blocked-subtile {
  background: var(--subtile-blocked);
}

.micro-cell.building-subtile {
  background: var(--building);
}

.micro-cell.parking-subtile {
  background: var(--subtile-parking);
}

.micro-cell.parking-subtile::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid rgba(255, 255, 255, 0.75);
  pointer-events: none;
  z-index: 0;
}

.micro-cell.grass-subtile {
  background: var(--subtile-grass);
  box-shadow: 0 0 0 2px var(--subtile-grass-border) inset, 0 2px 8px 0 rgba(60, 120, 60, 0.08);
  position: relative;
}

.micro-cell.mall-hallway-subtile {
  background: #b0b8c1;
}

.micro-cell.mall-store-subtile {
  background: #d4b896;
}

.micro-cell.escalator-subtile {
  background: #7eafc9;
}

.micro-cell.grass-subtile::after {
  content: "✿";
  color: #388e3c;
  font-size: 0.9em;
  position: absolute;
  bottom: 2px;
  right: 4px;
  opacity: 0.7;
  pointer-events: none;
}

.micro-cell.water-subtile {
  background: var(--subtile-water) !important;
  box-shadow: 0 0 0 2px var(--subtile-water-border) inset !important;
  position: relative;
}

.micro-cell.water-subtile::after {
  content: "〜";
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.85em;
  position: absolute;
  bottom: 1px;
  right: 3px;
  opacity: 0.8;
  pointer-events: none;
}

.micro-cell.wooded-subtile {
  background: var(--subtile-wooded);
  box-shadow: 0 0 0 2px var(--subtile-wooded-border) inset;
  position: relative;
}

.micro-cell.wooded-subtile::after {
  content: "🌲";
  font-size: 0.75em;
  position: absolute;
  bottom: 1px;
  right: 2px;
  opacity: 0.85;
  pointer-events: none;
}

.micro-cell.road-subtile .lane {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.micro-cell.road-subtile .lane-n,
.micro-cell.road-subtile .lane-s {
  width: 2px;
  left: calc(50% - 1px);
  background: repeating-linear-gradient(to bottom, rgba(246, 212, 75, 0.95) 0 4px, transparent 4px 8px);
}

.micro-cell.road-subtile .lane-n {
  top: 0;
  height: 50%;
}

.micro-cell.road-subtile .lane-s {
  top: 50%;
  height: 50%;
}

.micro-cell.road-subtile .lane-e,
.micro-cell.road-subtile .lane-w {
  height: 2px;
  top: calc(50% - 1px);
  background: repeating-linear-gradient(to right, rgba(246, 212, 75, 0.95) 0 4px, transparent 4px 8px);
}

.micro-cell.road-subtile .lane-w {
  left: 0;
  width: 50%;
}

.micro-cell.road-subtile .lane-e {
  left: 50%;
  width: 50%;
}

/* Extend outer-edge road lanes to bridge the gap between adjacent road tiles */
.micro-cell.road-subtile .lane-s.lane-connector { height: calc(50% + 4px); }
.micro-cell.road-subtile .lane-e.lane-connector { width: calc(50% + 4px); }
.micro-cell.road-subtile .lane-w.lane-connector { left: -4px; width: calc(50% + 4px); }

/* N connector: cell-level bridge — micro-grid sits below the header so we
   can't extend the lane through it; instead draw from the cell top edge */
.cell.connects-n::before {
  content: "";
  position: absolute;
  top: -4px;
  left: calc(50% - 1px);
  width: 2px;
  height: 4px;
  background: repeating-linear-gradient(to bottom, rgba(246, 212, 75, 0.95) 0 4px, transparent 4px 8px);
  z-index: 10;
  pointer-events: none;
}

.micro-cell .wall {
  position: absolute;
  background: rgba(20, 20, 20, 0.92);
  z-index: 1;
  pointer-events: none;
}

.micro-cell .wall-n {
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.micro-cell .wall-s {
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
}

.micro-cell .wall-w {
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.micro-cell .wall-e {
  right: 0;
  top: 0;
  bottom: 0;
  width: 3px;
}

.micro-cell .side-label {
  position: absolute;
  font-size: 0.44rem;
  font-weight: bold;
  line-height: 1;
  pointer-events: none;
  z-index: 3;
}

.micro-cell .side-label-n {
  top: 1px;
  left: 30%;
  transform: translateX(-50%);
}

.micro-cell .side-label-n.duct-side {
  left: 70%;
}

.micro-cell .side-label-s {
  bottom: 1px;
  left: 30%;
  transform: translateX(-50%);
}

.micro-cell .side-label-s.duct-side {
  left: 70%;
}

.micro-cell .side-label-w {
  left: 1px;
  top: 30%;
  transform: translateY(-50%);
}

.micro-cell .side-label-w.duct-side {
  top: 70%;
}

.micro-cell .side-label-e {
  right: 1px;
  top: 30%;
  transform: translateY(-50%);
}

.micro-cell .side-label-e.duct-side {
  top: 70%;
}

.micro-cell .door-side {
  color: #e6c74a;
  text-shadow: 0 0 2px rgba(0,0,0,0.8);
}

.micro-cell .duct-side {
  color: #5bc8d4;
  line-height: 0;
}

.micro-cell .duct-wave {
  display: block;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.7));
}

.micro-cell:nth-child(3n) {
  border-right: 0;
}

.micro-cell:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.mark {
  display: inline-block;
  border-radius: 3px;
  padding: 0 2px;
  line-height: 1.2;
  color: #fff;
  position: relative;
  z-index: 2;
}

.mark.player {
  background: #2d6a9f;
}

@keyframes player-pulse {
  0%, 100% { background: #2d6a9f; }
  50%       { background: #74b8f0; }
}

.mark.player.active {
  animation: player-pulse 1.2s ease-in-out infinite;
}

@keyframes trail-pulse-stroke {
  0%, 100% { stroke: #c0392b; }
  50%       { stroke: #e67e22; }
}

@keyframes trail-pulse-fill {
  0%, 100% { fill: #c0392b; }
  50%       { fill: #e67e22; }
}

.player-trail-line {
  fill: none;
  animation: trail-pulse-stroke 1.2s ease-in-out infinite;
}

.player-trail-mark {
  stroke: none;
  animation: trail-pulse-fill 1.2s ease-in-out infinite;
}


.mark.zombie {
  background: #395b2f;
}

.mark.zombie.zombie-enhanced {
  background: #4a1a6e;
  outline: 1px solid #c084fc;
}

.mark.zombie.zombie-dog {
  background: #7a4a1e;
  outline: 1px solid #f59e0b;
}

.mark.token {
  background: #8f6b40;
}

.mark.exit {
  background: #4d4d4d;
}

.mark.blocked {
  background: #c92a2a;
}

.player-card,
.hand-card {
  border: 1px solid #c5b08a;
  border-radius: 6px;
  padding: 0.45rem;
  margin-bottom: 0.4rem;
  background: #fffdf8;
}

.hand-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent) inset;
}

.hand-card.playable {
  border-color: #4a7c59;
  background: #eef7f1;
}

.hand-card.blocked {
  border-color: #a33;
  background: #fff5f5;
  opacity: 0.75;
}

.hand-item {
  border-color: #4a7c59;
  background: #eef7f1;
}

.dim {
  opacity: 0.55;
}

.hand-items-divider {
  font-size: 0.75rem;
  font-weight: 600;
  color: #4a7c59;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.5rem 0 0.25rem;
}

/* Shared base for all action panels */
.zombie-replace,
.event-choice,
.combat-decision {
  margin: 0.35rem 0;
  border-radius: var(--radius-lg);
  padding: 0.45rem;
}

.zombie-replace.hidden,
.event-choice.hidden,
.combat-decision.hidden {
  display: none;
}

.zombie-replace {
  border: 1px solid var(--panel-zombie-border);
  background: var(--panel-zombie-bg);
}

.micro-cell.zombie-selectable {
  outline: 2px solid #c0392b;
  cursor: pointer;
  background: rgba(192, 57, 43, 0.15);
}

.micro-cell.zombie-selected {
  outline: 2px solid #e74c3c;
  background: rgba(231, 76, 60, 0.3);
}

.micro-cell.zombie-target {
  outline: 2px dashed #27ae60;
  cursor: pointer;
  background: rgba(39, 174, 96, 0.15);
}

@keyframes zombie-kill-burst {
  0%   { background: rgba(255, 120, 20, 0.75); outline: 2px solid rgba(255, 160, 40, 0.9); }
  40%  { background: rgba(255, 200, 60, 0.55); }
  100% { background: transparent; outline-color: transparent; }
}

.micro-cell.zombie-kill-flash {
  animation: zombie-kill-burst 0.7s ease-out forwards;
}

@keyframes zombie-moved-pulse {
  0%, 100% { outline: 2px solid rgba(220, 50, 50, 0.85); }
  50%       { outline: 2px solid rgba(220, 50, 50, 0.2);  }
}

.micro-cell.zombie-moved {
  animation: zombie-moved-pulse 1.2s ease-in-out infinite;
}

.event-choice {
  border: 1px solid var(--panel-event-border);
  background: var(--panel-event-bg);
}

.combat-decision {
  border: 1px solid var(--panel-combat-border);
  background: var(--panel-combat-bg);
}

.combat-decision-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.coll-counts {
  display: block;
  font-size: 0.7rem;
  color: #888;
  font-weight: 400;
}

.coll-tag {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.05rem 0.3rem;
  border-radius: 3px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.coll-tag-base {
  background: #4a7c59;
  color: #fff;
}

.coll-tag-expansion {
  background: #7a5c1a;
  color: #fff;
}

.coll-short-code {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  background: #6b6b6b;
  color: #f0f0f0;
  border-radius: 3px;
  padding: 1px 4px;
  vertical-align: middle;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

.game-over-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.82);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-over-overlay.hidden {
  display: none;
}

.game-over-box {
  background: #1a0a00;
  border: 3px solid #c24a3e;
  border-radius: 12px;
  padding: 2.5rem 3rem;
  text-align: center;
  color: #f0ead8;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 0 60px rgba(194, 74, 62, 0.5);
}

.game-over-overlay--victory .game-over-box {
  background: #0a1a06;
  border-color: #c8a227;
  box-shadow: 0 0 60px rgba(200, 162, 39, 0.45);
}

.game-over-title {
  font-size: 3rem;
  font-weight: 900;
  color: #c24a3e;
  letter-spacing: 0.12em;
  text-shadow: 0 0 20px rgba(194, 74, 62, 0.8);
  margin-bottom: 1rem;
}

.game-over-overlay--victory .game-over-title {
  color: #e8c132;
  text-shadow: 0 0 24px rgba(232, 193, 50, 0.75);
}

.game-over-message {
  font-size: 1.15rem;
  line-height: 1.5;
  margin-bottom: 1.75rem;
  color: #e8dcc8;
}

.game-over-winner {
  font-size: 1.6rem;
  font-weight: 800;
  color: #e8c132;
  margin-bottom: 0.3rem;
}

.game-over-how {
  font-size: 1rem;
  color: #a8d98a;
  margin-bottom: 1rem;
  font-style: italic;
}

.game-over-stats {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.95rem;
  color: #c8dbb8;
  border-top: 1px solid rgba(200, 162, 39, 0.3);
  padding-top: 0.75rem;
}

.game-over-btn {
  font-size: 1rem;
  padding: 0.6rem 1.6rem;
  background: #c24a3e;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.game-over-overlay--victory .game-over-btn {
  background: #5a8c2a;
}

.game-over-btn:hover {
  background: #a33;
}

.game-over-overlay--victory .game-over-btn:hover {
  background: #436e1e;
}

.combat-resources {
  font-size: var(--font-ui);
  color: var(--tone-warm);
  margin: 0.3rem 0 0.1rem;
}

.combat-decision-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.35rem;
  align-items: flex-start;
}

.combat-action-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.combat-decision-actions button {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
}

.combat-hint {
  font-size: 0.68rem;
  line-height: 1;
  padding-left: 2px;
}

.combat-hint.good  { color: #2e7d32; font-weight: 600; }
.combat-hint.warn  { color: #e65100; font-weight: 600; }
.combat-hint.muted { color: var(--tone-muted); }

.combat-roll-total {
  font-size: 1.2em;
  font-weight: 700;
  color: var(--panel-combat-border);
  background: #fdf3e7;
  border: 1px solid #e0b888;
  border-radius: var(--radius-sm);
  padding: 0 0.35em;
  margin-left: 0.1em;
}

.bullet-icon {
  color: #b8972a;
  font-size: 0.7em;
  vertical-align: middle;
}

/* Save / Load collapsible */
.save-load-details {
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #d8c7a0;
  padding-bottom: 0.4rem;
}

.save-load-details summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--tone-muted);
  user-select: none;
  margin-bottom: 0.3rem;
}

/* Save / Load panel */
.save-slot-row {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0;
  border-bottom: 1px solid #ecdfc4;
  font-size: 0.78rem;
}
.save-slot-row:last-child { border-bottom: none; }

.save-slot-num {
  font-weight: 700;
  min-width: 3.2rem;
  color: var(--tone-muted);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.save-slot-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #5a4a2a;
}

.save-slot-actions {
  display: flex;
  gap: 0.2rem;
  flex-shrink: 0;
}

.save-slot-btn {
  font-size: 0.7rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  cursor: pointer;
}

.save-slot-del {
  color: #a03030;
  border-color: #c08080;
  background: #fff0f0;
}
.save-slot-del:hover:not(:disabled) { background: #ffe0e0; }

/* ---------------------------------------------------------------------------
   Multiplayer UI
   --------------------------------------------------------------------------- */

.mp-turn-banner {
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 0.9rem;
  margin-bottom: 6px;
  text-align: center;
}
.mp-turn-banner.hidden { display: none; }
.mp-your-turn  { background: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.mp-waiting    { background: #fff3cd; color: #856404; border: 1px solid #ffeeba; }

.mp-share-code {
  font-size: 0.85rem;
  margin-bottom: 6px;
  word-break: break-all;
}
.mp-copy-btn {
  font-size: 0.75rem;
  padding: 1px 6px;
}
.mp-player-list {
  font-size: 0.85rem;
  margin: 4px 0;
}
.mp-player-entry {
  padding: 2px 4px;
  border-bottom: 1px solid var(--border);
}
.mp-lobby-status {
  font-size: 0.8rem;
  margin-top: 4px;
  min-height: 1.2em;
  color: #555;
}
.mp-lobby-error { color: #a03030; }
/* ---------------------------------------------------------------------------
   Bug Report
   --------------------------------------------------------------------------- */

.br-trigger {
  font-size: 0.75rem;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  color: inherit;
  border-radius: 4px;
  cursor: pointer;
  margin-left: auto;
  white-space: nowrap;
}
.br-trigger:hover { background: rgba(255,255,255,0.1); }

.br-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.br-overlay.hidden { display: none; }

.br-box {
  background: var(--bg, #fff);
  border: 1px solid var(--border, #ccc);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  width: min(480px, 92vw);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.br-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 1rem;
  margin-bottom: 4px;
}
.br-close {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  padding: 2px 6px;
}

.br-label { font-size: 0.85rem; font-weight: 600; margin-top: 4px; }
.br-required { color: #c00; }
.br-optional { font-weight: normal; color: #888; }
.br-input, .br-textarea {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.85rem;
  padding: 6px 8px;
  border: 1px solid var(--border, #ccc);
  border-radius: 4px;
}
.br-textarea { resize: vertical; }
.br-note { font-size: 0.78rem; color: #666; margin: 2px 0; }

.br-status { font-size: 0.82rem; min-height: 1.2em; }
.br-error { color: #a03030; }

.br-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 4px; }
.br-submit { font-weight: 600; }

.br-success { font-weight: bold; color: #1a7a1a; margin: 0; }
.br-issue-link { font-size: 0.8rem; word-break: break-all; }

.mp-invite-note {
  font-size: 0.85rem;
  background: #e8f4fd;
  border: 1px solid #b8d9f0;
  border-radius: 4px;
  padding: 6px 8px;
  margin-bottom: 6px;
  color: #1a5276;
}
.hidden { display: none; }