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

/* ── MAP BASE LAYER ─────────────────────────────────────────────────
   Leaflet map fills the full viewport behind all OllieBoard UI.
   z-index: 0 — everything else stacks on top.
──────────────────────────────────────────────────────────────────── */
#map-base {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
}

/* CartoDB Dark Matter tile — minimal adjustment to match OllieBoard palette */
.leaflet-tile {
  filter: hue-rotate(195deg) saturate(0.85) brightness(0.9) !important;
}
/* Keep Leaflet controls readable */
.leaflet-control-attribution {
  background: rgba(8,6,4,0.7) !important;
  color: #7A6E50 !important;
  font-size: 0.5rem !important;
}
.leaflet-control-zoom a {
  background: #111008 !important;
  color: #C9A84C !important;
  border-color: #6A5420 !important;
}

/* ── Leaflet popup — result detail card ────────────────────────────
   Appears when user selects a geocoder result.
──────────────────────────────────────────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: #1C1E22 !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7) !important;
  color: #E8D9A0 !important;
  font-family: 'Roboto', 'Inter', sans-serif !important;
  font-size: 0.82rem !important;
  padding: 0 !important;
}
.leaflet-popup-content {
  color: #E8D9A0 !important;
  margin: 12px 16px !important;
  font-family: 'Roboto', 'Inter', sans-serif !important;
  line-height: 1.5 !important;
}
.leaflet-popup-tip {
  background: #1C1E22 !important;
}
.leaflet-popup-close-button {
  color: #7A6E50 !important;
  font-size: 18px !important;
  padding: 6px 8px !important;
}
.leaflet-popup-close-button:hover {
  color: #C9A84C !important;
  background: transparent !important;
}

/* ── Geocoder result detail popup (the box with Road/City/etc) ──── */
.leaflet-control-geocoder-alternatives .leaflet-control-geocoder-address-popup,
.leaflet-geocoder-result-details {
  background: #1C1E22 !important;
  color: #E8D9A0 !important;
  border: 1px solid rgba(201,168,76,0.3) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 0.8rem !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7) !important;
}

/* ── "Nothing found" message ────────────────────────────────────── */
.leaflet-control-geocoder-form-no-error {
  display: none !important;
}
.leaflet-control-geocoder-form-no-error:not(:empty) {
  display: block !important;
  color: #7A6E50 !important;
  font-family: 'Roboto', 'Inter', sans-serif !important;
  font-size: 0.78rem !important;
  padding: 8px 14px 10px !important;
  background: #1C1E22 !important;
  border-top: 1px solid rgba(201,168,76,0.1) !important;
  border-radius: 0 0 16px 16px !important;
  margin: 0 !important;
}

/* ── BOARD OVERLAY PIN ──────────────────────────────────────────────
   The board card sits inside a Leaflet pane, pinned to the
   ThunderPies address. It's a floating panel, not full-screen.
──────────────────────────────────────────────────────────────────── */
#board-overlay-pin {
  /* Leaflet will position this; we just style the card */
  position: absolute;
  width: min(420px, 92vw);
  /* Height is set by JS after layout */
  background: transparent;
  /* Offset so the pin point is bottom-center of the card */
  transform: translate(-50%, -100%);
  pointer-events: auto;
  filter: drop-shadow(0 20px 60px rgba(0,0,0,0.85));
}

/* Pin stem below the board */
#board-overlay-pin::after {
  content: '';
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 18px solid #C9A84C;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.6));
}

/* Address chip that appears below the board card */
#map-address-chip {
  position: fixed;
  bottom: 14px; left: 50%;
  transform: translateX(-50%);
  z-index: 500;
  background: rgba(8,6,4,0.82);
  border: 1px solid #6A5420;
  border-radius: 20px;
  padding: 7px 16px;
  display: flex; align-items: center; gap: 8px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  pointer-events: none;
}
#map-address-chip .chip-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #C9A84C;
  box-shadow: 0 0 6px rgba(201,168,76,0.8);
  flex-shrink: 0;
  animation: chipPulse 2s ease-in-out infinite;
}
@keyframes chipPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
#map-address-chip .chip-text {
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #7A6E50;
  font-family: 'Inter', sans-serif;
}
#map-address-chip .chip-name {
  color: #C9A84C;
}

:root {
  --gold:       #C9A84C;
  --gold-light: #F0D080;
  --gold-dim:   #6A5420;
  --gold-glow:  rgba(201,168,76,0.25);
  --surface:    #393B41;
  --surface2:   #252B2E;
  --surface3:   #2E3135;
  --text:       #E8D9A0;
  --text-dim:   #7A6E50;
  --pass:       #4CAF50;
  --pending-c:  #FF9800;
  --panel-w:    360px;

  --c-brown:  #896653; --c-lblue: #c6f4ea; --c-pink:   #a42c74;
  --c-orange: #e09252; --c-red:   #ed1518; --c-yellow: #fcf81d;
  --c-green:  #3a9e58; --c-dblue: #0a18a3;
}

/* ── PAGE LAYOUT ───────────────────────────────────────────────────
   The entire page is a fixed viewport — no body scrolling.
   The board always fits on screen.
──────────────────────────────────────────────────────────────────── */
html, body {
  height: 100%; overflow: hidden;
  background: transparent;   /* map shows through */
  font-family: 'Inter', sans-serif;
}

body {
  display: flex; flex-direction: column;
  align-items: stretch;
  padding: 8px;
  background: transparent;
}

/* ── BOARD COLUMN — centered column that contains all board UI ──────
   This is the centering wrapper. Body stays stretch so flex:1 works.
   The column itself centers horizontally via margin:auto.
──────────────────────────────────────────────────────────────────── */
.board-column {
  display: flex; flex-direction: column;
  align-items: center;
  flex: 1; min-height: 0; width: 100%;
  position: relative; z-index: 10;
  max-height: 100%;
}

.board-width-match {
  width: min(100%, calc(100vh - 80px));
  flex-shrink: 0;
}

/* Board wrapper specifically needs to stretch vertically AND center board horizontally */
.board-wrap.board-width-match {
  flex: 1;
  min-height: 0;
  align-self: auto; /* don't override - let parent center handle it */
}

/* Score bar — width controlled by .board-width-match class */
.score-bar {
  flex-shrink: 0; display: flex; gap: 8px; margin-top: 4px;
}
.score-pill { flex:1; background:var(--surface2); border:1px solid var(--gold-dim); border-radius:6px; padding:8px 12px; display:flex; flex-direction:column; gap:4px; }
.score-label { font-size:0.72rem; letter-spacing:0.12em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.score-value { font-size:clamp(1.3rem,2.5vw,1.9rem); color:var(--gold); line-height:1; font-weight:800; }
.score-value span { font-size:0.55em; color:var(--text-dim); font-weight:600; }
.progress-track { height:3px; background:#1e1e1e; border-radius:2px; overflow:hidden; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--gold-dim),var(--gold-light)); border-radius:2px; transition:width 0.8s ease; }

/* ── BOARD WRAP — simple flex container, no CSS 3D ── */
.board-wrap {
  flex: 1;
  min-height: 0;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  overflow: visible;   /* panels slide out without clipping */
  cursor: pointer;
}

/* ── board-3d-scene no longer exists in DOM — stub kept for safety ── */
.board-3d-scene { display: none; }

/* ── BOARD ─────────────────────────────────────────────────────────
   11×11 CSS grid. CSS tiles handle all perimeter rendering.
   Three.js only lives inside .center for the people tracker.
──────────────────────────────────────────────────────────────────── */
.board {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows:    repeat(11, 1fr);
  width:  min(100%, calc(100vh - 80px));
  height: min(100%, calc(100vh - 80px));
  aspect-ratio: 1 / 1;
  border: 4px solid #2A2C30;
  border-radius: 16px;
  overflow: visible;
  box-shadow:
    0 0 30px rgba(0,0,0,0.9),
    0 50px 100px rgba(0,0,0,0.90),
    inset 0 0 40px rgba(0,0,0,0.4);
  background: #252B2E;
  transform-style: preserve-3d;
  position: relative;
}

/* ── OLD EXTRUSION DIVS — hidden ── */
.board-extrude-south, .board-extrude-east, .board-extrude-bottom { display: none; }

/* ── GROUND GLOW ──────────────────────────────────────────────── */
.board-ground-glow {
  position: absolute; pointer-events: none;
  width: 160%; height: 160%; left: -30%; top: 5%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(201,168,76,0.14) 0%,
    rgba(201,168,76,0.04) 40%,
    transparent 65%
  );
  transform: translateZ(-60px);
  filter: blur(20px);
}

/* Center cell */
.center {
  grid-column: 2/11; grid-row: 2/11;
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; overflow: hidden;
  /* Thick gold border separating inner grid from outer spaces */
  box-shadow: inset 0 0 0 2px #393B41;
}
.center-grid {
  position: absolute; inset: 0;
  background: #252B2E;
  background-image: linear-gradient(rgba(201,168,76,0.75) 15px, transparent 15px),
                    linear-gradient(90deg, rgba(201,168,76,0.75) 15px, transparent 15px);
  background-size: calc(100%/9) calc(100%/9); pointer-events: none;
  z-index: 1;
}

/* Floor plan image — cleared; Three.js canvas is the center surface */
.center-floor {
  position: absolute; inset: 0;
  background: none;
  opacity: 0;
  z-index: 0;
  pointer-events: none;
}

/* Center grid cells — persistent gold glow on hover/touch */
.center-cell {
  border: 1px solid rgba(201,168,76,0.15);
  cursor: crosshair;
  transition: background 0.15s, box-shadow 0.15s;
  outline: none;
}
.center-cell:hover,
.center-cell.glow {
  background: rgba(201,168,76,0.13);
  box-shadow: inset 0 0 28px rgba(201,168,76,0.28),
              0 0 12px rgba(201,168,76,0.15);
  border-color: rgba(201,168,76,0.55);
  z-index: 2;
}
/* Corner pieces */
.ob-corner {
  border: 1px solid #2A2C30;
  background: #393B41;
  cursor: pointer;
  overflow: hidden; transition: background 0.2s, transform 0.18s ease;
  width: 100%; height: 100%;
  transform: translateZ(0px);
  transform-style: preserve-3d;
}
.ob-corner:hover {
  background: #454850;
}
/* Corners are blank — no overlay, no icons */

/* Space base */
.space {
  position:relative; overflow:hidden;
  background:#393B41;
  border:1px solid #2A2C30;
  cursor:pointer;
  transition: background 0.2s, box-shadow 0.2s, transform 0.18s ease;
  container-type: size;
  transform-style: preserve-3d;
}
.space:hover {
  background: #454850;
  box-shadow:
    inset 0 0 0 1px rgba(201,168,76,0.3),
    0 12px 24px rgba(0,0,0,0.9);
  z-index: 2;
  transform: translateZ(10px);
}
/* All face content hidden — clean blank tiles */
.space .inner, .space .prop-band, .space .prop-band-unreleased,
.space .prop-name, .space .prop-pts, .space .plain-name,
.space .plain-pts, .space .mayor-row, .space .prop-stars,
.space .c-icon, .space .c-label, .space .band-dots {
  display: none !important;
}
.space:active { transform:translateZ(0px) scale(0.97); }
.space.completed    { background:rgba(201,168,76,0.07); }
.space.completed:hover { background:#1a1700; transform: translateZ(10px); }
.space.active-sel {
  background: rgba(201,168,76,0.12) !important;
  box-shadow: inset 0 0 28px rgba(201,168,76,0.22),
              0 0 12px rgba(201,168,76,0.12) !important;
  border-color: rgba(201,168,76,0.55) !important;
  z-index: 5;
}

/* Inner rotation wrapper */
.inner {
  position:absolute; display:flex; flex-direction:column;
  align-items:stretch; overflow:visible; transform-origin:center center;
}

/* Property space */
.prop-band {
  flex-shrink:0;
  height: clamp(14px, 18cqh, 22px);
  position:relative;
  display:flex; align-items:center; justify-content:center;
  border-bottom: 1px solid #2A2C30;
  background: #2E3135 !important;
}
.prop-subtitle {
  font-size: clamp(0.28rem, 0.65cqw, 0.52rem);
  font-weight: 600; color: var(--text-dim);
  letter-spacing: 0.08em; text-align: center;
  margin-top: 1px;
}

  flex:1;
  display:flex; align-items:flex-start; justify-content:center;
  text-align:center; font-weight:900; color:var(--text);
  text-transform:uppercase; line-height:1.25;
  word-break:break-word; hyphens:auto; white-space:normal;
  padding:6px 4px 2px;
  font-size: clamp(0.65rem, 1.7cqw, 1.05rem);
  overflow: hidden;
}
.prop-pts {
  flex-shrink:0; text-align:center; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:0.06em;
  padding:2px 0 3px;
  font-size: clamp(0.55rem, 1.3cqw, 0.85rem);
  line-height:1;
}
/* (star-badge removed — stars now live in footer .prop-stars row) */
@keyframes starPop {
  from { transform:scale(0) rotate(-30deg) translate(-50%,-50%); opacity:0; }
  to   { transform:scale(1) rotate(0) translate(-50%,-50%);       opacity:1; }
}

/* Plain space — no header, text top-aligned with dynamic size */
.plain-name {
  flex:1;
  display:flex; align-items:flex-start; justify-content:center;
  text-align:center; font-weight:700; color:var(--text);
  line-height:1.25; word-break:break-word; hyphens:auto;
  white-space:normal; text-transform:uppercase;
  padding:6px 4px 2px;
  font-size: clamp(0.65rem, 1.7cqw, 1.05rem);
  overflow:hidden;
}
.plain-pts {
  flex-shrink:0; text-align:center; font-weight:800; color:var(--gold);
  text-transform:uppercase; letter-spacing:0.06em;
  padding:2px 0 3px;
  font-size: clamp(0.55rem, 1.3cqw, 0.85rem);
  line-height:1; min-height:8px;
}

/* ── US-04: UNRELEASED SPACE ────────────────────────────────────────
   Property spaces not yet active show:
   - Desaturated/dimmed color band (no dots)
   - Name in muted color
   - Release date on second line
   - No stars, no xp
──────────────────────────────────────────────────────────────────── */
.space.unreleased { cursor: pointer; }
.space.unreleased:hover { background: #161010; }

.prop-band-unreleased {
  flex-shrink: 0;
  height: clamp(14px, 18cqh, 22px);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid #2A2C30;
  background: #2E3135 !important;
  opacity: 0.6;
}

.prop-name-unreleased {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-start;
  padding: 6px 4px 2px;
  overflow: hidden;
}
.prop-name-unreleased .pnu-label {
  font-size: clamp(0.65rem, 1.7cqw, 1.05rem);
  font-weight: 900; color: var(--text-dim);
  text-transform: uppercase; line-height: 1.25;
  word-break: break-word; hyphens: auto;
  width: 100%; text-align: center;
}
.prop-name-unreleased .pnu-date {
  font-size: clamp(0.42rem, 1cqw, 0.62rem);
  font-weight: 600; color: var(--gold-dim);
  text-transform: uppercase; letter-spacing: 0.08em;
  width: 100%; text-align: center;
  margin-top: 3px;
}

/* Side column fix for unreleased text */
.ob-side .prop-name-unreleased .pnu-label,
.ob-side .prop-name-unreleased .pnu-date { writing-mode: horizontal-tb; }

/* ── US-06: MAYOR TILE (team view, active spaces) ───────────────────
   Replaces the stars row with:
   - Mayor avatar (circle with initials fallback)
   - "MAYOR" label
   XP row becomes "X XP EARNED" (total team points)
──────────────────────────────────────────────────────────────────── */
.mayor-row {
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; overflow: hidden;
  padding: 2px;
}
.mayor-avatar {
  width: clamp(18px, 3.5cqw, 32px);
  height: clamp(18px, 3.5cqw, 32px);
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  background: var(--surface3);
  display: flex; align-items: center; justify-content: center;
  font-size: clamp(0.5rem, 1.2cqw, 0.72rem);
  font-weight: 800; color: var(--gold);
  overflow: hidden; flex-shrink: 0;
  object-fit: cover;
}
.mayor-label {
  font-size: clamp(0.38rem, 0.9cqw, 0.56rem);
  font-weight: 800; color: var(--gold);
  text-transform: uppercase; letter-spacing: 0.08em;
  line-height: 1; text-align: center;
}
.ob-side .mayor-row { writing-mode: horizontal-tb; }
.ob-side .mayor-avatar { writing-mode: horizontal-tb; }
.ob-side .mayor-label  { writing-mode: horizontal-tb; }

/* Side column text fix — all rotated text elements */
.ob-side .prop-name, .ob-side .plain-name,
.ob-side .prop-subtitle,
.ob-side .prop-pts,  .ob-side .plain-pts { writing-mode: horizontal-tb; }

/* ── BAND DOTS ─────────────────────────────────────────────────────
   Always 4 dots inside the color band.
   Filled dots = completions so far (capped at 4 for display).
   Empty dots = remaining toward next star threshold marker.
   Dots are larger than before — clearly readable in the band.
──────────────────────────────────────────────────────────────────── */
.band-dots {
  display: flex; align-items: center; justify-content: center;
  gap: clamp(3px, 0.7cqw, 7px);
  width: 100%; height: 100%;
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
}
.band-dot {
  width:  clamp(6px, 1.4cqw, 12px);
  height: clamp(6px, 1.4cqw, 12px);
  border-radius: 50%; flex-shrink: 0;
  transition: background 0.2s;
}
.band-dot.filled {
  background: rgba(255,255,255,0.92);
  box-shadow: 0 0 4px rgba(255,255,255,0.6);
}
.band-dot.empty {
  background: rgba(0,0,0,0.25);
  border: 1.5px solid rgba(255,255,255,0.45);
}
/* Side columns inherit horizontal-tb so dots stay circular */
.ob-side .band-dots { writing-mode: horizontal-tb; }

/* ── FOOTER STARS ──────────────────────────────────────────────────
   Gold stars earned, shown above the XP row.
   One ★ per star threshold crossed (completionCount >= starThreshold).
   Empty star (☆) shown if threshold set but not yet earned.
──────────────────────────────────────────────────────────────────── */
.prop-stars {
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; gap: 1px;
  padding: 1px 2px;
  line-height: 1;
}
.prop-star-earned {
  color: var(--gold);
  text-shadow: 0 0 6px var(--gold);
  font-size: clamp(0.55rem, 1.3cqw, 0.88rem);
}
.prop-star-empty {
  color: var(--gold-dim);
  font-size: clamp(0.55rem, 1.3cqw, 0.88rem);
}
.ob-side .prop-stars { writing-mode: horizontal-tb; }

/* ── OVERLAY PANEL ─────────────────────────────────────────────────
   Default (narrow screens): slides over the board (position:absolute).
   Wide screens: slides out to the RIGHT of the board, leaving it fully
   visible. Breakpoint = board-size + panel-width + some breathing room.
   Board ≈ 100vh, panel = 360px → trigger at ~100vh + 360px + 32px.
──────────────────────────────────────────────────────────────────── */
.side-panel {
  position: absolute;
  top: 0; right: 0;
  width: var(--panel-w);
  height: 100%;
  background: #0e0e0e;
  border: 1px solid var(--gold-dim);
  border-radius: 10px 0 0 10px;
  display: flex; flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translateX(100%);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 100;
  box-shadow: -8px 0 40px rgba(0,0,0,0.7);
}
.side-panel.open {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

/* Wide viewport: panel sits beside the board, not over it */
@media (min-width: calc(100vh + 360px + 40px)) {
  .side-panel {
    position: fixed;
    top: 50%;
    /* Align left edge to right edge of centered board */
    left: calc(50% + min(50vw, (100vh - 80px) / 2) + 8px);
    right: auto;
    height: min(100vh - 80px, 90vh);
    transform: translate(calc(-1 * var(--panel-w) + var(--panel-w)), -50%);
    border-radius: 10px;
    /* Start off-screen to the right */
    transform: translateX(20px) translateY(-50%);
    opacity: 0;
  }
  .side-panel.open {
    transform: translateX(0) translateY(-50%);
    opacity: 1;
  }
}

/* Panel body swap animation — fires when content changes on an already-open panel */
@keyframes panelSwapIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.panel-body.swapping {
  animation: panelSwapIn 0.22s cubic-bezier(0.34,1.2,0.64,1) both;
}

/* Panel header */
.panel-header {
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--gold-dim);
  position: relative;
  display: flex; flex-direction: row;
  align-items: flex-start; gap: 8px;
  flex-shrink: 0;
}
.panel-header-text {
  flex: 1; display: flex; flex-direction: column; gap: 5px;
  min-width: 0;
}
.panel-color-bar { position:absolute; top:0; left:0; right:0; height:5px; }
.panel-close {
  flex-shrink: 0;
  background: none; border: 1px solid var(--gold-dim);
  border-radius: 6px; color: var(--text-dim);
  font-size: 1rem; width: 28px; height: 28px;
  cursor: pointer; transition: all 0.2s; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  margin-top: 6px;
}
.panel-close:hover { color: var(--gold); border-color: var(--gold); }
.panel-title { font-size:1rem; font-weight:800; color:var(--gold); line-height:1.2; margin-top:6px; }
.panel-type  { font-size:0.5rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }

.status-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:20px; font-size:0.6rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; width:fit-content; margin-top:2px; }
.status-badge.passing    { background:rgba(76,175,80,0.15);  color:var(--pass);     border:1px solid rgba(76,175,80,0.4); }
.status-badge.pending    { background:rgba(255,152,0,0.15);  color:var(--pending-c);border:1px solid rgba(255,152,0,0.4); }
.status-badge.incomplete { background:rgba(100,100,100,0.1); color:var(--text-dim); border:1px solid rgba(100,100,100,0.25); }
.status-dot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.passing  .status-dot { background:var(--pass);     box-shadow:0 0 6px var(--pass); }
.pending  .status-dot { background:var(--pending-c);box-shadow:0 0 6px var(--pending-c);animation:pulse 1.4s ease infinite; }
.incomplete .status-dot { background:var(--text-dim); }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* Panel body */
.panel-body {
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto; flex: 1;
}
.panel-body::-webkit-scrollbar { width:4px; }
.panel-body::-webkit-scrollbar-track { background:#0e0e0e; }
.panel-body::-webkit-scrollbar-thumb { background:var(--gold-dim); border-radius:2px; }

.detail-row { display:flex; flex-direction:column; gap:4px; }
.detail-label { font-size:0.48rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--text-dim); font-weight:600; }
.detail-value { font-size:0.82rem; color:var(--text); line-height:1.5; }

.points-display {
  display:flex; align-items:center; gap:10px;
  background:var(--surface3); border:1px solid var(--gold-dim);
  border-radius:6px; padding:10px 14px;
}
.points-icon { font-size:1.4rem; }
.points-num  { font-size:1.6rem; color:var(--gold); line-height:1; font-weight:800; }
.points-num span { font-size:0.55em; color:var(--text-dim); font-weight:600; }
.points-label { font-size:0.48rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--text-dim); font-weight:600; margin-top:2px; }

.divider { height:1px; background:var(--gold-dim); opacity:0.25; }
.category-tag { display:inline-flex; align-items:center; gap:5px; padding:3px 10px; border-radius:4px; font-size:0.48rem; letter-spacing:0.14em; text-transform:uppercase; border:1px solid; width:fit-content; font-weight:700; }
.category-dot { width:8px; height:8px; border-radius:2px; flex-shrink:0; }
.entity-chip { display:inline-flex; align-items:center; gap:6px; background:var(--surface3); border:1px solid var(--gold-dim); border-radius:4px; padding:4px 8px; font-size:0.56rem; font-family:monospace; color:var(--text-dim); word-break:break-all; }
.entity-dot { width:6px; height:6px; border-radius:50%; background:var(--gold-dim); flex-shrink:0; }
.entity-dot.live { background:var(--pass); box-shadow:0 0 4px var(--pass); }

/* ── HISTORY CARDS — ops-dashboard CompletedItem style ──────────────
   Matching the green card from the screenshot exactly:
   border-left colored accent, icon+label row, task text, job title,
   employee name with checkmark, full date+time.
   NO delete/X button.
──────────────────────────────────────────────────────────────────── */
.history-section { display:flex; flex-direction:column; gap:6px; }
.history-title {
  font-size:0.58rem; font-weight:800; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--text-dim); margin-bottom:2px;
}

/* The card itself — mirrors CompletedItem from ops dashboard */
.hist-card {
  display: flex; flex-direction: column; gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid;
  cursor: default;
  transition: box-shadow 0.15s;
}
.hist-card.passing  {
  background: rgba(76,175,80,0.08);
  border-color: rgba(76,175,80,0.35);
}
.hist-card.pending  {
  background: rgba(255,152,0,0.08);
  border-color: rgba(255,152,0,0.35);
}
.hist-card.incomplete {
  background: rgba(100,100,100,0.06);
  border-color: rgba(100,100,100,0.2);
}

/* Top row: status icon + label */
.hist-top {
  display: flex; align-items: center; gap: 6px; margin-bottom: 1px;
}
.hist-check {
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; flex-shrink: 0;
}
.hist-check.passing  { background: var(--pass);     color: #fff; }
.hist-check.pending  { background: var(--pending-c); color: #fff; }
.hist-check.incomplete { background: #555; color: #fff; }
.hist-status-label {
  font-size: 0.54rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
}
.hist-status-label.passing   { color: var(--pass); }
.hist-status-label.pending   { color: var(--pending-c); }
.hist-status-label.incomplete{ color: var(--text-dim); }

/* Task text */
.hist-task-text {
  font-size: 0.78rem; font-weight: 700; color: var(--text);
  line-height: 1.3;
}
/* Subtitle (job title equivalent) */
.hist-subtitle {
  font-size: 0.6rem; font-weight: 600; color: var(--text-dim);
}
/* Employee line */
.hist-employee {
  font-size: 0.62rem; font-weight: 700; color: var(--pass);
}
/* Full date + time */
.hist-datetime {
  font-size: 0.58rem; color: var(--text-dim); font-weight: 500;
}
/* Points badge on the right */
.hist-pts {
  font-size: 0.82rem; font-weight: 800; color: var(--gold);
  align-self: flex-start; margin-left: auto; padding-left: 8px;
  flex-shrink: 0;
}

/* ── US-09: VIEW TOGGLE BAR ─────────────────────────────────────────
   Sits between board and score bar.
   Team button on the left, employee pills on the right.
   Active pill highlights gold; team button highlights gold when active.
──────────────────────────────────────────────────────────────────── */
.view-toggle-bar {
  flex-shrink: 0;
  margin-top: 6px; margin-bottom: 2px;
}
.view-toggle-track {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface2);
  border: 1.5px solid var(--gold-dim);
  border-radius: 8px;
  padding: 5px 10px;
  overflow-x: auto;
}
.view-toggle-track::-webkit-scrollbar { height: 0; }

.view-toggle-btn {
  flex-shrink: 0;
  background: none; border: 1.5px solid var(--gold-dim);
  border-radius: 6px; padding: 4px 12px;
  color: var(--text-dim); font-family: inherit;
  font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 0.18s;
  white-space: nowrap;
}
.view-toggle-btn:hover { border-color: var(--gold); color: var(--gold); }
.view-toggle-btn.active {
  background: var(--gold); border-color: var(--gold);
  color: #000; font-weight: 800;
}

.view-toggle-divider {
  flex-shrink: 0; width: 1px; height: 18px;
  background: var(--gold-dim); opacity: 0.5;
}
.view-toggle-label {
  flex-shrink: 0;
  font-size: 0.58rem; font-weight: 600;
  color: var(--text-dim); letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}

/* Employee pills */
.emp-pills {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap;
}
.emp-pill {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 5px;
  background: var(--surface3);
  border: 1.5px solid var(--gold-dim);
  border-radius: 20px;
  padding: 3px 10px 3px 4px;
  cursor: pointer; transition: all 0.18s;
  white-space: nowrap;
}
.emp-pill:hover { border-color: var(--gold); }
.emp-pill.active {
  border-color: var(--gold);
  background: rgba(201,168,76,0.15);
}
.emp-pill-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--surface2);
  border: 1.5px solid var(--gold-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.5rem; font-weight: 800; color: var(--gold);
  overflow: hidden; flex-shrink: 0;
}
.emp-pill-avatar img {
  width: 100%; height: 100%; border-radius: 50%; object-fit: cover;
}
.emp-pill-name {
  font-size: 0.58rem; font-weight: 700;
  color: var(--text-dim); letter-spacing: 0.04em;
}
.emp-pill.active .emp-pill-name { color: var(--gold); }

.hist-empty {
  font-size: 0.76rem; color: var(--text-dim);
  text-align: center; padding: 14px 0; font-style: italic;
}

/* ── PANEL TABS ─────────────────────────────────────────────────────
   Tab strip inside panel body.
   Active tab: gold underline + bright text.
──────────────────────────────────────────────────────────────────── */
.panel-tabs {
  display: flex; gap: 0;
  border-bottom: 2px solid var(--gold-dim);
  margin-bottom: 12px; flex-shrink: 0;
}
.panel-tab {
  flex: 1; padding: 7px 4px;
  background: none; border: none;
  font-family: inherit; font-size: 0.58rem;
  font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; cursor: pointer;
  color: var(--text-dim);
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.panel-tab:hover { color: var(--text); }
.panel-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Tab content panes — only the active one is shown */
.tab-pane { display: none; flex-direction: column; gap: 12px; }
.tab-pane.active { display: flex; }

/* ── PAGINATION ─────────────────────────────────────────────────────
   Sits below a paginated list.
──────────────────────────────────────────────────────────────────── */
.pagination {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; padding-top: 4px; flex-shrink: 0;
}
.pg-btn {
  background: none; border: 1.5px solid var(--gold-dim);
  border-radius: 5px; color: var(--text-dim);
  font-family: inherit; font-size: 0.6rem; font-weight: 700;
  padding: 4px 10px; cursor: pointer;
  transition: all 0.15s;
}
.pg-btn:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.pg-btn:disabled { opacity: 0.3; cursor: default; }
.pg-info {
  font-size: 0.56rem; color: var(--text-dim);
  font-weight: 600; letter-spacing: 0.06em;
  white-space: nowrap;
}

/* ── US-10: LEADERBOARD (team view panel) ───────────────────────────
   Ranked list of employees by completion count.
   Medal colors: 🥇 gold, 🥈 silver, 🥉 bronze, rest muted.
──────────────────────────────────────────────────────────────────── */
.leaderboard { display:flex; flex-direction:column; gap:5px; }
.lb-row {
  display:flex; align-items:center; gap:8px;
  padding:7px 10px; border-radius:6px;
  background:var(--surface3); border:1px solid var(--gold-dim);
  transition: background 0.15s;
}
.lb-row.lb-1 { border-color:rgba(201,168,76,0.6); background:rgba(201,168,76,0.1); }
.lb-row.lb-2 { border-color:rgba(180,180,180,0.4); background:rgba(180,180,180,0.06); }
.lb-row.lb-3 { border-color:rgba(180,110,50,0.4);  background:rgba(180,110,50,0.06); }
.lb-rank {
  font-size:0.72rem; font-weight:900; width:20px; text-align:center; flex-shrink:0;
}
.lb-1 .lb-rank { color:var(--gold); }
.lb-2 .lb-rank { color:#b0b0b0; }
.lb-3 .lb-rank { color:#b46e32; }
.lb-avatar {
  width:24px; height:24px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--gold-dim);
  background:var(--surface2);
  display:flex; align-items:center; justify-content:center;
  font-size:0.52rem; font-weight:800; color:var(--gold);
  overflow:hidden;
}
.lb-avatar img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.lb-name {
  flex:1; font-size:0.72rem; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.lb-mayor-badge {
  font-size:0.48rem; font-weight:800; letter-spacing:0.1em;
  color:var(--gold); text-transform:uppercase;
  background:rgba(201,168,76,0.15); border:1px solid rgba(201,168,76,0.35);
  border-radius:4px; padding:1px 5px; flex-shrink:0;
}
.lb-stars { font-size:0.65rem; color:var(--gold); flex-shrink:0; letter-spacing:1px; }
.lb-count {
  font-size:0.7rem; font-weight:800; color:var(--gold);
  flex-shrink:0; min-width:28px; text-align:right;
}
.lb-count-label {
  font-size:0.44rem; color:var(--text-dim); font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase;
  display:block; text-align:right;
}

/* ══════════════════════════════════════════════════════════════════
   PHYSICAL 3D BOARD — full volumetric rendering system
   ══════════════════════════════════════════════════════════════════

   Architecture:
   • The .board element is the top face of the slab
   • ::before  = south-facing thick edge of the slab
   • ::after   = east-facing thick edge of the slab
   • Board thickness = 28px in Z-space
   • Buildings are true CSS cubes with 5 visible faces
   • A global spotlight gradient sits above everything (pointer-events:none)
   ══════════════════════════════════════════════════════════════════ */

/* ── 1. BOARD SLAB THICKNESS ──────────────────────────────────────
   The board top face is already rendered. We add the two visible
   thickness edges using ::before (south/bottom edge) and ::after
   (east/right edge). Both fold outward 90° from the board edges.
   --slab: controls thickness in px — change one var to rescale.
─────────────────────────────────────────────────────────────────── */
.board {
  --slab: 28px;
}

/* South edge — hidden: slab walls misalign at this camera angle */
.board::before { display: none; }

/* East edge — hidden: slab walls misalign at this camera angle */
.board::after  { display: none; }

/* ── 2. BUILDING CSS CUBE SYSTEM ─────────────────────────────────
   Each .iso-building is a transform-style:preserve-3d container
   positioned absolutely within .center.
   Children: .b-top .b-front .b-back .b-left .b-right .b-shadow

   The building wrapper itself has NO transform — it just sizes the
   footprint. Each face is positioned using CSS 3D transforms from
   that origin box.

   HEIGHT is driven by the CSS var --bh set inline by JS.
   WIDTH  is driven by --bw (square footprint).

   Face geometry (W = --bw, H = --bh):
     top    : W×W plane, translateZ(H)            ← roof
     front  : W×H plane, translateY(W/2) rotateX(-90deg)  ← south side
     back   : W×H plane, translateY(-W/2) rotateX(90deg)  ← north side
     right  : W×H plane, translateX(W/2) rotateY(90deg)   ← east side
     left   : W×H plane, translateX(-W/2) rotateY(-90deg) ← west side
─────────────────────────────────────────────────────────────────── */
.iso-building {
  position: absolute;
  transform-style: preserve-3d;
  pointer-events: none;
  /* Width & height are the footprint (square). Height (Z) via --bh. */
}

.iso-building .b-face {
  position: absolute;
  /* Faces are sized and positioned by inline styles from JS */
  backface-visibility: hidden;
}

/* Top face — lightest (facing the spotlight) */
.iso-building .b-top {
  /* Subtle inner highlight from top-left per spotlight direction */
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.18) 0%,
      rgba(255,255,255,0.06) 40%,
      rgba(0,0,0,0.10) 100%
    );
}

/* South/front face — medium brightness (facing viewer-left) */
.iso-building .b-front {
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.05) 0%,
      rgba(0,0,0,0.30) 100%
    );
}

/* East/right face — darkest (shadow side, away from spotlight) */
.iso-building .b-right {
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.25) 0%,
      rgba(0,0,0,0.55) 100%
    );
}

/* North/back and west/left faces — not usually visible in iso */
.iso-building .b-back,
.iso-building .b-left {
  background: rgba(0,0,0,0.6);
}

/* ── 4. CAST SHADOW ───────────────────────────────────────────────
   A flat ellipse sitting at Z=0 (board surface).
   Its width/offset scale with building height so taller buildings
   cast a longer shadow toward the bottom-right (away from spotlight).
─────────────────────────────────────────────────────────────────── */
.iso-building .b-shadow {
  position: absolute;
  background: radial-gradient(ellipse, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 70%);
  border-radius: 50%;
  pointer-events: none;
  /* Sits on the board surface */
  transform: translateZ(1px);
}

/* ── 5. SPOTLIGHT OVERLAY ────────────────────────────────────────
   A fixed gradient div layered over the entire board-3d-scene.
   It stays in screen space (not 3D-transformed) so it acts like
   a light hitting the tilted board from the top-left.
   pointer-events:none so clicks pass through.
─────────────────────────────────────────────────────────────────── */
.board-spotlight {
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 500;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 25% 20%,
    rgba(255,248,220,0.10) 0%,
    rgba(255,240,180,0.04) 30%,
    transparent 65%
  );
  /* This lives outside the 3D scene so it's not distorted */
}

/* ── PRESERVE-3D PASSTHROUGH ──────────────────────────────────── */
.center, .center-grid {
  transform-style: preserve-3d;
  overflow: visible;
}
ollie-cell {
  transform-style: preserve-3d;
}

/* ── SCENE BACKGROUND ─────────────────────────────────────────── */
html, body {
  background:
    radial-gradient(ellipse at 50% 55%, rgba(201,168,76,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 15% 85%, rgba(100,70,10,0.08) 0%, transparent 50%),
    #010101;
}

/* ── PANEL / OVERLAY ISOLATION ────────────────────────────────── */
.side-panel { transform-style: flat; z-index: 9999; }

/* ── Map Layer Toggle — XCOM-style vertical HUD panel ── */
.mlt-btn {
  background: transparent;
  border: none;
  color: rgba(201,168,76,0.45);
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 9px 14px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
}
/* Active indicator bar on left edge */
.mlt-btn::before {
  content: '';
  position: absolute;
  left: 0; top: 20%; bottom: 20%;
  width: 2px;
  border-radius: 1px;
  background: var(--gold);
  opacity: 0;
  transition: opacity 0.15s;
}
.mlt-btn.active::before { opacity: 1; }
.mlt-btn:last-child { border-right: none; }
.mlt-btn:hover { background: rgba(201,168,76,0.08); color: rgba(201,168,76,0.75); }
.mlt-btn.active { background: rgba(201,168,76,0.12); color: rgba(201,168,76,1.0); }
#introScreen, #rulesOverlay { transform: none !important; }

/* ════════════════════════════════════════════════════════════════
   MOBILE TOUR OVERLAY
   Hidden on desktop (≥768px), shown on mobile (<768px).
   Sits above the existing board; the Three.js canvas is shared.
════════════════════════════════════════════════════════════════ */
#mob-tour {
  display: none;
  position: fixed; inset: 0; z-index: 800;
  flex-direction: column;
  background: #080604;
  font-family: 'Inter', sans-serif;
}

/* On true mobile show the tour, hide the desktop chrome */
@media (max-width: 767px) {
  #mob-tour { display: flex !important; }
  .board-column, #introScreen { display: none !important; }
  #map-address-chip { display: none !important; }
}

/* ── Shared board canvas viewport ── */
#mob-viewport {
  position: relative;
  flex: 1; min-height: 0;
  overflow: hidden;
  background: #050503;
}
/* The existing #three-canvas gets teleported here on mobile via JS */
#mob-canvas-slot {
  position: absolute; inset: 0;
}


/* ── Map-pin address label (Leaflet tooltip, permanent) ── */
.map-pin-tooltip {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.map-pin-tooltip::before { display: none !important; }
.map-pin-label {
  background: rgba(8,6,4,0.88);
  border: 1px solid #6A5420;
  border-radius: 20px;
  padding: 8px 18px 8px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  pointer-events: auto;
  box-shadow: 0 2px 20px rgba(0,0,0,0.7), 0 0 0 1px rgba(0,0,0,0.4);
  transition: border-color 0.2s, box-shadow 0.2s;
  cursor: pointer;
}
.map-pin-label:hover {
  border-color: #C9A84C;
  box-shadow: 0 2px 28px rgba(0,0,0,0.8), 0 0 16px rgba(201,168,76,0.12);
}
/* Gold store dot — hidden; Server Online green dot takes this role */
.map-pin-label-dot {
  display: none;
}
/* Text block: two rows, centered */
.map-pin-label-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.map-pin-label-text {
  font-size: 0.66rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: #7A6E50;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  text-align: center;
}
.map-pin-label-name {
  color: #C9A84C;
}
/* Subtext row: green dot + "Server Online" — centered */
.map-pin-label-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.map-pin-server-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 5px rgba(74,222,128,0.9);
  flex-shrink: 0;
  animation: serverPulse 2.5s ease-in-out infinite;
}
@keyframes serverPulse {
  0%,100% { opacity: 1; box-shadow: 0 0 5px rgba(74,222,128,0.9); }
  50%      { opacity: 0.5; box-shadow: 0 0 2px rgba(74,222,128,0.4); }
}
.map-pin-server-text {
  font-size: 0.48rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: #4ade80;
  font-family: 'Inter', sans-serif;
  line-height: 1;
  opacity: 0.85;
}
/* Right chevron — hints at clickability */
.map-pin-label-arrow {
  font-size: 0.55rem;
  color: rgba(201,168,76,0.4);
  margin-left: 4px;
  transition: color 0.2s, transform 0.2s;
  flex-shrink: 0;
}
.map-pin-label:hover .map-pin-label-arrow {
  color: rgba(201,168,76,0.85);
  transform: translateX(2px);
}

/* HUD pills */
#mob-counter {
  position: absolute; top: 14px; left: 14px; z-index: 10;
  display: flex; align-items: center; gap: 8px;
  background: rgba(8,6,4,0.78); border: 1px solid #6A5420;
  border-radius: 20px; padding: 6px 14px;
  backdrop-filter: blur(8px);
}
#mob-num  { font-size: 1.1rem; font-weight: 800; color: #C9A84C; letter-spacing: 0.06em; line-height: 1; }
#mob-tot  { font-size: 0.62rem; color: #7A6E50; font-weight: 600; }
#mob-badge {
  position: absolute; top: 14px; right: 14px; z-index: 10;
  background: rgba(201,168,76,0.1); border: 1px solid #6A5420;
  border-radius: 20px; padding: 5px 12px;
  font-size: 0.56rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: #6A5420;
  backdrop-filter: blur(8px);
}
#mob-flash {
  position: absolute; inset: 0; z-index: 20;
  background: #C9A84C; opacity: 0; pointer-events: none;
  transition: opacity 0.08s ease;
}
#mob-swipe-hint {
  position: absolute; bottom: 14px; left: 50%;
  transform: translateX(-50%);
  font-size: 0.52rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(201,168,76,0.3); font-weight: 600;
  pointer-events: none; white-space: nowrap;
  transition: opacity 1.2s;
}

/* ── Nav panel ── */
#mob-nav {
  flex-shrink: 0;
  background: linear-gradient(180deg, #111008 0%, #080604 100%);
  border-top: 2px solid #6A5420;
  display: flex; flex-direction: column;
}
#mob-progress { height: 2px; background: #1a1608; flex-shrink: 0; }
#mob-progress-fill { height: 100%; background: linear-gradient(90deg,#6A5420,#C9A84C); transition: width 0.4s cubic-bezier(0.4,0,0.2,1); }

/* Card */
#mob-card {
  display: flex; align-items: stretch; gap: 0;
  padding: 12px 16px 6px; overflow: hidden;
}
#mob-band { width: 5px; flex-shrink: 0; border-radius: 3px; margin-right: 12px; align-self: stretch; transition: background 0.4s; }
#mob-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#mob-type { font-size: 0.52rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #7A6E50; }
#mob-name { font-size: 1.5rem; font-weight: 900; color: #E8D9A0; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.3s; }
#mob-desc { font-size: 0.70rem; color: #7A6E50; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#mob-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.mob-chip { display: inline-flex; align-items: center; gap: 4px; background: #1a1608; border: 1px solid #6A5420; border-radius: 12px; padding: 2px 8px; font-size: 0.56rem; font-weight: 600; color: #7A6E50; }
.mob-chip.live { border-color: #4CAF50; color: #4CAF50; }
.mob-chip.xp   { border-color: #C9A84C; color: #C9A84C; }
.mob-dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; }

/* Mayor */
#mob-mayor { padding: 0 16px 6px; font-size: 0.68rem; font-weight: 700; color: #C9A84C; min-height: 18px; }

/* Controls */
#mob-controls {
  display: flex; align-items: center;
  border-top: 1px solid rgba(201,168,76,0.1);
  height: 52px; flex-shrink: 0;
}
.mob-btn {
  height: 100%; padding: 0 22px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: #7A6E50;
  font-size: 1.4rem; cursor: pointer; flex-shrink: 0;
  transition: color 0.15s, background 0.15s;
}
.mob-btn:active { background: rgba(201,168,76,0.08); color: #C9A84C; }
#mob-scrubber {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; gap: 4px; overflow: hidden; height: 100%;
}
.m-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; background: #6A5420; transition: all 0.25s; cursor: pointer; }
.m-dot.active { background: #C9A84C; transform: scale(1.9); }
.m-dot.near   { background: rgba(201,168,76,0.45); transform: scale(1.3); }

/* ── BOARD MODAL ────────────────────────────────────────────────────
   The board modal fills the viewport below the pill "title bar".
   The pill sits at the bottom-center of the map view (~bottom:14px).
   When opening, the modal snaps UP from behind the pill, making the
   pill feel like it morphs into the modal's title bar.
   The modal's top is set to leave room for the pills action bar (top:10px + ~36px height + gap).
────────────────────────────────────────────────────────────────── */
.board-modal {
  position: fixed;
  top: 54px;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0 8px 8px 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(32px) scale(0.985);
  transform-origin: center bottom;
  transition: opacity 0.38s cubic-bezier(0.4,0,0.2,1),
              transform 0.38s cubic-bezier(0.34,1.15,0.64,1);
}
.board-modal.open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.top-action-btn {
  background: var(--surface2);
  border: 1.5px solid var(--gold-dim);
  border-radius: 8px; padding: 7px 16px;
  color: var(--gold); font-family: inherit;
  font-size: 0.65rem; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: all 0.2s;
  white-space: nowrap; text-align: center;
}
.top-action-btn:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.15);
}

/* ── Persistent action bar — fixed top, always visible when modal open ── */
/* Pills — always visible, floating top-left, no background */
.board-action-pills-float {
  position: fixed;
  top: 10px;
  left: 12px;
  z-index: 350;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  pointer-events: all;
}
/* Geocoder sitting inside the pills bar */
/* ── Modal header strip — flex row at the top of the modal flex column ── */
.board-modal-header {
  width: 100%;
  max-width: min(100%, calc(100vh - 80px));
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 12px;
  z-index: 400;
  pointer-events: all;
  position: relative;
}
/* Pill inside header — tighter padding than standalone map pin */
.board-header-pill {
  padding: 5px 12px 5px 10px !important;
}

/* OllieBoard wordmark */
.board-modal-logo {
  font-family: 'Inter', sans-serif;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  text-shadow: 0 0 20px rgba(201,168,76,0.4);
  user-select: none;
}

/* Right-side actions: OA Bonus + Close */
.board-modal-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* OA Bonus button */
.board-oa-btn {
  z-index: 350;
  background: var(--surface2);
  border: 1.5px solid var(--gold-dim);
  border-radius: 8px;
  padding: 7px 14px;
  color: var(--gold);
  font-family: inherit;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.board-oa-btn:hover {
  border-color: var(--gold);
  background: rgba(201,168,76,0.15);
}

/* Close circle */
.board-modal-close {
  z-index: 350;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold);
  border: 3px solid rgba(0,0,0,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, box-shadow 0.15s, transform 0.12s;
  box-shadow: 0 0 12px rgba(201,168,76,0.5), 0 2px 8px rgba(0,0,0,0.6);
  flex-shrink: 0;
}
.board-modal-close::before,
.board-modal-close::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 2.5px;
  background: #000;
  border-radius: 2px;
}
.board-modal-close::before { transform: rotate(45deg); }
.board-modal-close::after  { transform: rotate(-45deg); }
.board-modal-close:hover {
  background: var(--gold-light);
  box-shadow: 0 0 20px rgba(201,168,76,0.75);
  transform: scale(1.08);
}
.board-modal-close:active { transform: scale(0.93); }

/* Map click hint — shown when modal is closed */
#mapClickHint {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 150;
  background: rgba(8,6,4,0.82);
  border: 1px solid var(--gold-dim);
  border-radius: 20px;
  padding: 8px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  backdrop-filter: blur(10px);
  white-space: nowrap;
  pointer-events: none;
  animation: hintPulse 3s ease-in-out infinite;
}
@keyframes hintPulse {
  0%,100% { opacity: 0.7; }
  50%      { opacity: 1; }
}
#mapClickHint .hint-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px rgba(201,168,76,0.8);
  flex-shrink: 0;
}
#mapClickHint .hint-text {
  font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); font-family: 'Inter', sans-serif;
}
#mapClickHint .hint-name { color: var(--gold); }

/* Make the pin cursor a pointer on the map */
.leaflet-marker-icon { cursor: pointer !important; }
</style>