/* Pfandheld — dark street-hustler aesthetic, inspired by the original Pennergame. */
:root {
  --bg:        #0c0a08;
  --bg-elev:   #161210;
  --bg-panel:  #1c1814;
  --bg-row:    #231e18;
  --bg-input:  #0f0c09;
  --line:      #302820;
  --line-gold: rgba(180, 130, 40, 0.35);
  --ink:       #d4c9b0;
  /* Bumped from #7a6e5a / #4a4438 — the originals were illegible against the
     panel backgrounds (~1.6 contrast). Every "muted/dim" label inherits the fix. */
  --ink-dim:   #b8ad94;
  --ink-muted: #a89a82;
  --gold:      #d4a030;   /* amber/gold — primary accent */
  --gold-dim:  #8c6818;
  --teal:      #3aada5;   /* harbor teal — energy / active */
  --danger:    #c04040;
  --ok:        #4e8c4e;
  --radius:    4px;
  --maxw:      1100px;
}

* { box-sizing: border-box; }

/* Make everything that can be tapped feel right on touch:
   - kill the grey Mobile Safari / Chrome tap flash
   - text selection only where it makes sense */
* { -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.55 "Segoe UI", system-ui, -apple-system, sans-serif;
  min-height: 100vh;
  /* Use dynamic viewport height where supported so the chrome-collapsing
     mobile browsers (iOS Safari, Chrome Android) don't leave a gap. */
  min-height: 100dvh;
  /* Prevent rubber-band white flash on iOS by anchoring to the dark bg. */
  overscroll-behavior-y: none;
  /* Block accidental horizontal scroll from any rogue overflow. */
  overflow-x: hidden;
  /* Crisper text on retina-class phones. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Pad the safe-area-inset sides so content clears the notch in landscape. */
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Buttons + links shouldn't be selectable on long-press (looks like a bug). */
.btn, .og-menu-btn, .tab-btn, .rb-cell, .og-turf-card,
.map-marker, .map-popup-btn, .nav-links a, .brand,
.notif-open, .notif-close, .chat-tab {
  -webkit-user-select: none;
  user-select: none;
}

/* subtle dark vignette on the body background */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 120% 60% at 50% 0%, rgba(40, 28, 10, 0.6) 0%, transparent 70%),
    radial-gradient(ellipse 80% 80% at 100% 100%, rgba(10, 8, 5, 0.8) 0%, transparent 60%),
    radial-gradient(ellipse 80% 80% at 0% 100%, rgba(10, 8, 5, 0.7) 0%, transparent 60%);
}

a { color: var(--gold); text-decoration: none; }
a:hover { text-decoration: underline; color: #e8b840; }

/* ---- Site header & nav ------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--line-gold);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.7);
}

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 18px; max-width: var(--maxw); margin: 0 auto;
}

.brand {
  font-size: 1.3rem; font-weight: 900; letter-spacing: 3px;
  text-transform: uppercase; color: var(--gold);
  text-shadow: 0 0 18px rgba(212, 160, 48, 0.5);
}

.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-links a { color: var(--ink-dim); font-size: 0.9rem; letter-spacing: 0.5px; transition: color 0.15s; }
.nav-links a:hover { color: var(--gold); text-decoration: none; }

.inline { display: inline; margin: 0; }
.link-btn {
  background: none; border: none; color: var(--ink-dim); cursor: pointer;
  font: inherit; font-size: 0.9rem; padding: 0;
  transition: color 0.15s;
}
.link-btn:hover { color: var(--danger); }

/* ---- Status strip (below nav on game pages) ---------------------- */
.status-strip {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 5px 18px; max-width: var(--maxw); margin: 0 auto;
  border-top: 1px solid var(--line);
  background: rgba(10, 8, 5, 0.6);
  min-height: 34px;
}

.status-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: 3px; padding: 2px 8px; font-size: 0.78rem;
  color: var(--ink-dim);
}
.status-pill.cash  { border-color: var(--gold-dim); color: var(--gold); }
.status-pill.energy { border-color: #254a48; color: var(--teal); }
.status-pill.level { border-color: #3a2a10; color: #c0902a; }
.status-pill.rank  { border-color: var(--line); color: var(--ink-dim); }
.status-pill.hungry { border-color: #5c2020; color: var(--danger); }
.status-icon { opacity: 0.8; }

/* ---- Layout ------------------------------------------------------ */
.main { max-width: var(--maxw); margin: 0 auto; padding: 14px 18px; }

.card {
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03), 0 4px 20px rgba(0,0,0,0.5);
}
.card.center { text-align: center; }

h1 { font-size: 1.5rem; font-weight: 700; margin: 0 0 14px; color: var(--gold); letter-spacing: 1px; }
h2 { font-size: 1rem; font-weight: 600; margin: 16px 0 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid var(--line-gold); padding-bottom: 6px; }
h2:first-child, h3:first-child { margin-top: 0; }
h3 { font-size: 0.85rem; font-weight: 600; margin: 14px 0 8px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: 1px; }

.section-title {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--gold-dim); padding: 8px 0 6px;
  border-bottom: 1px solid var(--line); margin: 0 0 10px;
}

.muted { color: var(--ink-dim); }
.hint { color: var(--ink-muted); font-size: 0.85rem; }
p { margin: 8px 0; }

/* ---- Game shell & tabs ------------------------------------------- */
.game-shell {
  max-width: var(--maxw); margin: 0 auto;
}

.tab-bar {
  display: flex; gap: 0; overflow-x: auto;
  background: var(--bg-elev);
  border: 1px solid var(--line-gold); border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  scrollbar-width: none;
}
.tab-bar::-webkit-scrollbar { display: none; }

.tab-btn {
  background: transparent; border: none; border-right: 1px solid var(--line);
  color: var(--ink-dim); cursor: pointer; font: inherit; font-size: 0.8rem;
  letter-spacing: 0.8px; text-transform: uppercase; font-weight: 600;
  padding: 10px 16px; white-space: nowrap;
  transition: color 0.15s, background 0.15s;
  border-bottom: 2px solid transparent;
}
.tab-btn:last-child { border-right: none; }
.tab-btn:hover { color: var(--gold); background: rgba(180, 130, 40, 0.06); }
.tab-btn.active {
  color: var(--gold); background: var(--bg-panel);
  border-bottom: 2px solid var(--gold);
}

.tab-panel {
  background: var(--bg-panel);
  border: 1px solid var(--line-gold); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}
.tab-panel.hidden { display: none; }

.panel-body { padding: 16px; }
.panel-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }

/* ---- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  background: var(--bg-row); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 9px 14px; font: inherit; font-size: 0.88rem; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  letter-spacing: 0.3px;
}
.btn:hover:not(:disabled) { border-color: var(--gold-dim); background: #2a2218; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: 0.35; cursor: not-allowed; }
.btn.small { padding: 5px 10px; font-size: 0.8rem; }
.btn.ghost { background: transparent; }

.btn-gold {
  background: #2a2008; color: var(--gold); border-color: var(--gold-dim); font-weight: 700;
}
.btn-gold:hover:not(:disabled) { background: #352810; border-color: var(--gold); }

.btn-primary { background: var(--gold); color: #1a1000; border-color: var(--gold); font-weight: 800; }
.btn-primary:hover:not(:disabled) { filter: brightness(1.1); }

.btn-danger { background: #2a0a0a; color: #e06060; border-color: #5a2020; font-weight: 700; }
.btn-danger:hover:not(:disabled) { background: #380e0e; border-color: var(--danger); }

/* automation toggle */
.btn-auto {
  background: var(--bg-row); color: var(--ink-dim); border-color: var(--line); font-size: 0.78rem;
}
.btn-auto.on {
  background: #0d2818; color: #5cd488; border-color: #1e5030;
}

/* ---- Rows / list items ------------------------------------------- */
.list { display: flex; flex-direction: column; gap: 6px; }
.row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 8px 10px;
  transition: border-color 0.2s;
}
.row.me { border-color: var(--gold-dim); background: rgba(212, 160, 48, 0.05); }
.row.casting { flex-wrap: wrap; border-color: var(--teal); background: rgba(58, 173, 165, 0.06); }
.row .btn { flex: 0 0 auto; }
.row-meta { color: var(--ink-dim); font-size: 0.82rem; white-space: nowrap; }
.row-actions { display: flex; gap: 5px; align-items: center; }
.row-name { font-size: 0.92rem; flex: 1; }
.row-icon { font-size: 1rem; opacity: 0.75; flex-shrink: 0; }

/* Action item: a head line (icon, name, meta, buttons) plus a description. */
.action-item {
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 9px 11px;
}
.action-item.locked { opacity: 0.55; }
.action-head { display: flex; align-items: center; gap: 8px; }
.row-desc {
  margin: 6px 0 0; padding-top: 6px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim); font-size: 0.8rem; line-height: 1.4;
}

/* Skill (training) item: head line + current effect + description. */
.skill-item {
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 10px 12px;
}
.skill-head { display: flex; align-items: center; gap: 10px; }
.skill-name { font-size: 0.92rem; font-weight: 600; color: var(--ink); flex: 1; }
.skill-val {
  font-size: 0.95rem; font-weight: 800; color: var(--gold);
  min-width: 26px; text-align: right;
}
.skill-effect { color: var(--teal); font-size: 0.82rem; margin-top: 6px; font-weight: 600; }
.skill-desc {
  margin: 5px 0 0; color: var(--ink-dim); font-size: 0.8rem; line-height: 1.45;
}

/* active-action highlighted row */
.active-action-card {
  background: rgba(58, 173, 165, 0.08); border: 1px solid var(--teal);
  border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px;
}
.active-action-title {
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--teal); font-weight: 700; margin-bottom: 8px;
}
.active-action-name { font-size: 0.95rem; color: var(--ink); margin-bottom: 8px; }
.active-action-timer { font-size: 0.8rem; color: var(--ink-dim); margin-bottom: 6px; }

/* ---- Player stats (overview tab) --------------------------------- */
.player-stats { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.pb-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pb-name { font-size: 1.2rem; font-weight: 800; color: var(--gold); letter-spacing: 1px; }
.pill {
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: 2px; padding: 2px 9px; font-size: 0.8rem; color: var(--ink-dim);
}
.pill.level { border-color: #3a2a10; color: #c0902a; }
.pill.cash  { border-color: var(--gold-dim); color: var(--gold); }

.stat-line { display: grid; grid-template-columns: 80px 1fr 56px; align-items: center; gap: 8px; }
.stat-label { color: var(--ink-dim); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
.stat-num   { color: var(--ink-dim); font-size: 0.78rem; text-align: right; white-space: nowrap; }

/* ---- Bars -------------------------------------------------------- */
.bar {
  height: 9px; background: #0c0a08;
  border: 1px solid var(--line); border-radius: 2px; overflow: hidden;
}
.bar-fill { display: block; height: 100%; border-radius: 2px; }
.bar.xp    .bar-fill { background: linear-gradient(90deg, #8c6000, var(--gold)); }
.bar.energy .bar-fill { background: linear-gradient(90deg, #1a6060, var(--teal)); }
.bar.hunger .bar-fill { background: linear-gradient(90deg, #6c2020, var(--danger)); }

/* cast bar — full-width under the running action, drains to empty */
.bar.cast {
  flex-basis: 100%; height: 7px; margin-top: 4px;
  border-color: rgba(58, 173, 165, 0.3);
}
.bar.cast .bar-fill {
  background: linear-gradient(90deg, var(--teal), #70d8c8);
  animation: cast-pulse 1.8s ease-in-out infinite;
}
@keyframes cast-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.65; }
}

/* ---- Forms ------------------------------------------------------- */
.form { display: flex; flex-direction: column; gap: 14px; }
.form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.88rem; color: var(--ink-dim); }
input, select {
  background: var(--bg-input); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 9px 12px; font: inherit;
}
input:focus, select:focus { outline: 1px solid var(--gold-dim); border-color: var(--gold-dim); }
.inline-form { display: flex; gap: 8px; }
.inline-form input { flex: 1; min-width: 0; }
.auth-card { max-width: 420px; margin: 24px auto; }

.error {
  background: rgba(180, 40, 40, 0.1); border: 1px solid rgba(180, 40, 40, 0.4);
  color: #e08888; border-radius: var(--radius); padding: 10px 12px;
}

/* ---- Landing ----------------------------------------------------- */
.hero { text-align: center; padding: 40px 12px; }
.hero h1 { font-size: 2.2rem; color: var(--gold); text-shadow: 0 0 30px rgba(212, 160, 48, 0.4); }
.lead { color: var(--ink-dim); max-width: 560px; margin: 10px auto 22px; }
.how { max-width: 600px; margin: 0 auto; }
.how-list { color: var(--ink-dim); line-height: 2; padding-left: 20px; }

/* ---- Ladder ------------------------------------------------------ */
.ladder { width: 100%; border-collapse: collapse; }
.ladder th, .ladder td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--line); font-size: 0.88rem; }
.ladder th { color: var(--ink-dim); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.5px; }
.ladder tr.me td { background: rgba(212, 160, 48, 0.07); color: var(--gold); }

/* district info */
#district-info strong { display: block; color: var(--gold); font-size: 0.95rem; margin-bottom: 4px; }
#district-info p { color: var(--ink-dim); font-size: 0.88rem; margin: 0; }

/* ---- Toast ------------------------------------------------------- */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%);
  background: var(--bg-panel); border: 1px solid var(--gold-dim);
  color: var(--ink); padding: 9px 18px; border-radius: 3px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.7); z-index: 100;
  max-width: 92vw; text-align: center; font-size: 0.9rem;
}

/* ================================================================
   STRASSENREICH — OGame-style 3-column layout
   Appended to the existing stylesheet; no existing rules removed.
   ================================================================ */

/* ---- OGame outer wrapper ----------------------------------------- */
/* .og wraps the entire game UI below the site header. */
.og {
  max-width: var(--maxw);
  margin: 0 auto;
}

/* ---- Resource bar (top, full-width) ------------------------------ */
/* A horizontal strip of resource cells that spans the full width.
   Sticky so it stays pinned to the top of the viewport while the page
   scrolls. z-index must sit ABOVE the Leaflet map (its panes/controls use
   z-index 200–1000); otherwise the map paints over the bar on the map view. */
.resource-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #0f0d0a;
  border-bottom: 1px solid var(--line-gold);
  border-top: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;  /* Firefox */
  position: sticky;
  top: 0;
  z-index: 1200;
}
.resource-bar::-webkit-scrollbar { display: none; }

/* One cell per resource (Pfand, Scrap, Tokens, Crew, Standing). */
.rb-cell {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-right: 1px solid var(--line);
  flex: 1 1 0;
  min-width: 110px;
  cursor: default;
  transition: background 0.15s;
}
.rb-cell:last-child { border-right: none; }
.rb-cell:hover { background: rgba(255,255,255,0.025); }

.rb-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
  opacity: 0.85;
}

.rb-vals {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

/* The large current-amount number — updated every rAF by the tick loop. */
.rb-amount {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  line-height: 1.2;
}

/* Smaller secondary line: capacity + rate, or efficiency%. */
.rb-secondary {
  font-size: 0.7rem;
  color: var(--ink-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Storage-full indicator: turn the amount red so the player notices. */
.rb-cell.rb-full .rb-amount { color: var(--danger); }
.rb-cell.rb-full { border-bottom: 2px solid var(--danger); }

/* Crew below 100% efficiency. */
.rb-cell.rb-warn .rb-amount  { color: #e08840; }
.rb-cell.rb-warn { border-bottom: 2px solid #8c4820; }

/* Standing cell — gold accent. */
.rb-cell.rb-standing .rb-amount { color: var(--gold); }

/* Per-resource amount colours. */
.rb-amount.rb-pfand  { color: var(--gold); }
.rb-amount.rb-scrap  { color: #7acc66; }
.rb-amount.rb-tokens { color: var(--teal); }

/* ---- OGame 3-column body ----------------------------------------- */
.og-body {
  display: flex;
  align-items: flex-start;
  gap: 0;
  min-height: calc(100vh - 90px);  /* fill below header + resource bar */
}

/* ---- Left vertical menu ------------------------------------------ */
.og-menu {
  width: 152px;
  flex-shrink: 0;
  background: #0f0d0a;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 0;
  position: sticky;
  top: 46px;   /* height of resource bar */
  max-height: calc(100vh - 46px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

/* Each menu item is a full-width button. */
.og-menu-btn {
  display: block;
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--line);
  border-left: 3px solid transparent;
  color: var(--ink-dim);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.4px;
  padding: 11px 12px 11px 13px;
  text-align: left;
  transition: color 0.12s, background 0.12s, border-left-color 0.12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.og-menu-btn:last-child { border-bottom: none; }
.og-menu-btn:hover { color: var(--ink); background: rgba(255,255,255,0.04); }

/* Active section: gold left-border + lighter background — matches OGame screenshot. */
.og-menu-btn.active {
  border-left-color: var(--gold);
  background: rgba(212, 160, 48, 0.09);
  color: var(--gold);
  font-weight: 700;
  cursor: default;
}

/* Soon-but-unbuilt sections: dimmed text, still clickable. */
.og-menu-btn.soon { opacity: 0.42; }
.og-menu-btn.soon:hover { opacity: 0.65; }

/* ---- Center content panel ---------------------------------------- */
.og-content {
  flex: 1 1 0;
  min-width: 0;
  padding: 18px 20px;
  border-right: 1px solid var(--line);
  min-height: calc(100vh - 90px);
}

/* Section headings inside the content panel. */
.og-section-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-gold);
}

.og-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 1px;
  margin: 0;
  text-transform: uppercase;
}
/* When used as h2 inside a section (supply, facilities, …) */
h2.og-section-title {
  margin: 0 0 16px;
  font-size: 1rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line-gold);
}

/* ---- Overview info box ------------------------------------------- */
.og-info-box {
  padding: 12px 16px;
  margin-bottom: 16px;
}

.og-info-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.85rem;
}
.og-info-row:last-child { border-bottom: none; }

.og-info-label {
  color: var(--ink-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  width: 100px;
  flex-shrink: 0;
}

.og-info-value {
  color: var(--ink);
  flex: 1;
  font-variant-numeric: tabular-nums;
}

/* ---- Summary cards (overview bottom row) ------------------------- */
/* Mimic OGame's "Gebäude / Forschung" boxes. */
.og-summary-cards {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.og-summary-card {
  flex: 1 1 220px;
  padding: 12px 14px;
  min-width: 0;
}

.og-summary-card-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--ink-muted);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

/* Production lines inside the prod summary card. */
.og-prod-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0;
  font-size: 0.82rem;
}

.og-prod-label { color: var(--ink-dim); }
.og-prod-val   { color: var(--teal); font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---- Placeholder card (coming-soon sections) --------------------- */
.og-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  text-align: center;
  margin-top: 20px;
}

.og-placeholder-icon {
  font-size: 2.5rem;
  opacity: 0.45;
}

/* ---- Right turf ("planet") list ---------------------------------- */
.og-turfs {
  width: 162px;
  flex-shrink: 0;
  background: #0f0d0a;
  border-left: 1px solid var(--line);
  padding: 0;
  position: sticky;
  top: 46px;
  max-height: calc(100vh - 46px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
}

.og-turfs-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 10px 12px 8px;
  border-bottom: 1px solid var(--line-gold);
}

.og-turfs-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--ink-muted);
}

.og-turfs-count {
  font-size: 0.78rem;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

/* Each turf in the right panel — like OGame's planet cards. */
.og-turf-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  transition: background 0.12s;
  text-decoration: none;
}
.og-turf-card:hover { background: rgba(255,255,255,0.04); }

/* Active (selected) turf — gold border + tint. */
.og-turf-card.og-turf-card-active {
  background: rgba(212, 160, 48, 0.07);
  border-left: 2px solid var(--gold);
  cursor: default;
}
.og-turf-card.og-turf-card-active:hover { background: rgba(212, 160, 48, 0.07); }

/* Round marker — a small circle icon to the left of the turf name. */
.og-turf-marker {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1c1814;
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* Home turf marker gets a green tint. */
.og-turf-marker.og-turf-marker-home {
  background: #0d1f0a;
  border-color: #2c4418;
}

.og-turf-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.og-turf-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.og-turf-sub {
  font-size: 0.68rem;
  padding: 0 5px;
  line-height: 1.6;
}

/* ---- Generic badges ---------------------------------------------- */
.badge {
  display: inline-flex; align-items: center;
  padding: 1px 7px; border-radius: 2px;
  font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.6px;
  white-space: nowrap;
}

.badge-home    { background: #1a2a0a; border: 1px solid #2c4418; color: #7acc66; }
.badge-level   { background: var(--bg-row); border: 1px solid var(--line); color: var(--gold); }
.badge-mine    { background: #2a2008; border: 1px solid var(--gold-dim); color: var(--gold); }
.badge-claimed { background: var(--bg-row); border: 1px solid var(--line); color: var(--ink-dim); }

/* ---- Build queue (used in Overview card) ------------------------- */
.queue-idle { color: var(--ink-muted); font-size: 0.78rem; min-height: 0; margin: 0; }

.queue-row {
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; margin-bottom: 8px;
}

.queue-label { font-size: 0.72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 1px; }
.queue-name  { font-size: 0.9rem; font-weight: 700; color: var(--ink); flex: 1; }
.queue-level { font-size: 0.82rem; color: var(--gold); font-weight: 600; }
.queue-timer {
  font-size: 0.8rem; color: var(--teal);
  min-width: 48px; text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Progress bar for the build queue — grows left-to-right. */
.bar.queue-bar {
  height: 8px;
  border-color: rgba(212, 160, 48, 0.25);
}
.queue-bar-fill {
  background: linear-gradient(90deg, var(--gold-dim), var(--gold));
  transition: width 0.4s linear;
}

/* ---- Buildings list (supply + facilities sections) --------------- */
/* When used inside .bld-grid the card is flex-column; the padding is
   applied only to the body content (below the art) via inner selectors.
   margin-bottom is still kept for any legacy flat-list usage. */
.building-row {
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 8px;
  display: flex; flex-direction: column;
  overflow: hidden;            /* clips art corners to border-radius */
  transition: border-color 0.15s;
}

/* Pad the content below the art image — one consistent gutter for every row. */
.bld-grid .building-row .bld-header,
.bld-grid .building-row .bld-desc,
.bld-grid .building-row .bld-output,
.bld-grid .building-row .bld-crew-warn,
.bld-grid .building-row .unit-stats,
.bld-grid .building-row .bld-footer,
.bld-grid .building-row .bld-cost {
  padding-left: 12px;
  padding-right: 12px;
}
.bld-grid .building-row .bld-header { padding-top: 10px; }
.bld-grid .building-row .bld-cost   { padding-bottom: 12px; }

/* Non-grid (legacy flat list) keeps the old uniform padding. */
:not(.bld-grid) > .building-row { padding: 10px 12px; }

.building-row:hover { border-color: var(--line-gold); }

/* Dimmed when the building is not yet available in this phase. */
.bld-unusable { opacity: 0.5; }

.bld-header {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 4px;
}

.bld-name {
  font-size: 0.92rem; font-weight: 700; color: var(--ink);
  flex: 1;
}

.bld-desc {
  color: var(--ink-dim); font-size: 0.8rem; line-height: 1.4;
  margin: 0 0 6px;
}

.bld-output {
  font-size: 0.8rem; color: var(--teal);
  margin-bottom: 8px; font-weight: 600;
}

/* Action row: build/upgrade controls, right-aligned. The reason note (if any)
   floats to the left so the button always sits at the right edge. */
.bld-footer {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  justify-content: flex-end;
  margin: 6px 0 8px;
}
.bld-footer .bld-reason { margin-right: auto; }

/* Cost row: pinned to the very bottom of the card, full width, with a divider. */
.bld-cost {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.bld-cost-label { font-size: 0.72rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.8px; }

.bld-cost-item {
  font-size: 0.8rem; color: var(--ink-dim);
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 2px; padding: 1px 6px;
}

/* Affordability: green when the player has it, red when they don't. */
.bld-cost-item.affordable   { color: #6cce6c; border-color: #2a4a2a; }
.bld-cost-item.unaffordable { color: var(--danger); border-color: #5c2020; }

/* Build-time chip: clock emoji + mm:ss. Dim like the cost label, with a faint
   border so it reads as a chip next to the resource cost chips. */
.bld-cost-time {
  font-size: 0.78rem; color: var(--ink-muted);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px; border: 1px solid var(--line); border-radius: 12px;
}

.bld-reason { font-size: 0.78rem; font-weight: 600; }
.bld-reason.warn { color: #c07a30; }

/* Upgrade button: compact, sits at the end of the footer. */
.btn-build { padding: 5px 12px; font-size: 0.82rem; white-space: nowrap; }

/* ---- Empire section rows ----------------------------------------- */
.empire-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.empire-row-active {
  border-color: var(--gold-dim);
  background: rgba(212, 160, 48, 0.06);
}

/* ---- Map — districts chip row ------------------------------------ */
.map-districts {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
}

.district-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: 3px; padding: 4px 10px;
}

.district-chip-name  { font-size: 0.82rem; color: var(--ink); font-weight: 600; }
.district-chip-count { font-size: 0.78rem; color: var(--gold); font-weight: 700; }

/* District sub-header in the street list */
.map-district-label { margin-top: 12px; }
.map-district-label:first-child { margin-top: 0; }

/* ---- Map — street rows ------------------------------------------- */
/* Free streets get a subtle gold tint to draw attention. */
.street-row.street-free {
  border-color: rgba(180, 130, 40, 0.25);
  background: rgba(180, 130, 40, 0.04);
}

/* Rows owned by the player. */
.street-row.mine { border-color: var(--gold-dim); background: rgba(212, 160, 48, 0.06); }

.street-info {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-width: 0;
}

.street-name { font-size: 0.9rem; color: var(--ink); }
.street-meta { font-size: 0.78rem; color: var(--ink-dim); }

.street-owner { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.street-owner-name { font-size: 0.78rem; color: var(--ink-dim); }

/* ---- Responsive adjustments -------------------------------------- */
/* ≥720px: full 3-column layout as described above (default). */
/* <720px: stack — resource bar stays on top (horizontal scroll),
   menu becomes a horizontal scroll row, turf list drops below content. */

@media (max-width: 719px) {
  .og-body {
    flex-direction: column;
  }

  /* Left menu becomes a horizontal scrolling row across the top. */
  .og-menu {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    position: static;
    max-height: none;
    border-right: none;
    border-bottom: 1px solid var(--line-gold);
    scrollbar-width: none;
  }
  .og-menu::-webkit-scrollbar { display: none; }

  .og-menu-btn {
    border-bottom: none;
    border-right: 1px solid var(--line);
    border-left: none;
    border-bottom: 3px solid transparent;
    padding: 9px 14px;
    white-space: nowrap;
    flex-shrink: 0;
  }
  .og-menu-btn:last-child { border-right: none; }
  .og-menu-btn.active {
    border-left-color: transparent;
    border-bottom-color: var(--gold);
  }

  /* Content panel: full width, no right border. */
  .og-content {
    border-right: none;
    padding: 14px 14px;
    min-height: unset;
  }

  /* Turf list: horizontal scroller below content. */
  .og-turfs {
    width: 100%;
    position: static;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--line-gold);
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .og-turfs::-webkit-scrollbar { display: none; }

  .og-turfs-header {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 12px;
    border-bottom: none;
    border-right: 1px solid var(--line);
    flex-shrink: 0;
  }

  .og-turf-card {
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    border-bottom: none;
    border-right: 1px solid var(--line);
    flex-shrink: 0;
    min-width: 80px;
  }
  .og-turf-card.og-turf-card-active {
    border-left: none;
    border-bottom: 2px solid var(--gold);
  }

  .og-turf-info { align-items: center; }
  .og-turf-name { font-size: 0.72rem; text-align: center; }
}

/* Building footer on very narrow screens — stack vertically. */
@media (max-width: 480px) {
  .bld-footer { flex-direction: column; align-items: flex-start; }
  .btn-build  { width: 100%; }
  .bld-cost   { width: 100%; }

  /* Resource bar: shrink cells on very small screens. */
  .rb-cell { min-width: 80px; padding: 6px 8px; gap: 5px; }
  .rb-icon  { font-size: 0.95rem; }
  .rb-amount { font-size: 0.82rem; }
  .rb-secondary { display: none; }   /* hide rate/cap on tiny screens */
}

/* ================================================================
   INTERACTIVE CITY MAP — SVG markers + popup overlay
   All classes match the renderMap() / openStreetPopup() in app.js.
   ================================================================ */

/* ---- Map section header (title + legend on the same row) --------- */
.map-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-gold);
}

.map-title {
  /* Inherits .og-section-title; no additional rules needed. */
  margin-bottom: 0;
  border-bottom: none;
  padding-bottom: 0;
}

/* ---- Legend ------------------------------------------------------ */
.map-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.map-legend-swatch {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0,0,0,0.3);
}

/* Swatch fill colours match SVG marker fills below. */
.map-legend-swatch.leg-mine     { background: #3aa84a; }
.map-legend-swatch.leg-incoming { background: #8a3ad0; }
.map-legend-swatch.leg-attack   { background: #e02020; }
.map-legend-swatch.leg-enemy    { background: #c47a1e; }
.map-legend-swatch.leg-free     { background: var(--teal); }
.map-legend-swatch.leg-locked   { background: #3a3530; border-color: #4a453e; }

.map-legend-label {
  font-size: 0.74rem;
  color: var(--ink-dim);
  white-space: nowrap;
}

/* ---- District filter chips row ----------------------------------- */
.map-filter-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.map-filter-chip {
  display: inline-flex;
  align-items: center;
  background: var(--bg-row);
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--ink-dim);
  cursor: pointer;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 9px;
  transition: border-color 0.12s, color 0.12s, background 0.12s;
  white-space: nowrap;
}
.map-filter-chip:hover { color: var(--ink); border-color: var(--gold-dim); }
.map-filter-chip.active {
  background: rgba(212, 160, 48, 0.1);
  border-color: var(--gold-dim);
  color: var(--gold);
}

/* ---- SVG map wrapper (responsive) -------------------------------- */
.map-wrap {
  width: 100%;
  margin-bottom: 10px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0a0806;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6), inset 0 0 40px rgba(0,0,0,0.4);
}

svg.city-map {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 10 / 7;
}

/* ---- SVG internals ----------------------------------------------- */
/* Dark background rect */
.map-bg {
  fill: #0a0906;
}

/* Subtle grid lines */
.map-grid line {
  stroke: rgba(48, 40, 32, 0.6);
  stroke-width: 1;
}

/* Marker group container — no visual styles, just a namespace anchor. */
.map-markers { /* intentionally empty */ }

/* ---- Markers ----------------------------------------------------- */
/* Base marker style — all circles share these. */
.map-marker {
  stroke-width: 1.5;
  cursor: pointer;
  transition: r 0.15s, opacity 0.15s;
}
.map-marker:hover,
.map-marker:focus {
  /* Grow + glow; r is animated via filter since SVG r attr can't be CSS-transitioned
     cleanly cross-browser; we use a drop-shadow filter instead. */
  filter: drop-shadow(0 0 5px currentColor);
  outline: none;
}
.map-marker:focus-visible {
  filter: drop-shadow(0 0 7px white);
}

/* Yours — gold/green */
.m-mine {
  fill: var(--gold);
  stroke: #e8c060;
  opacity: 0.92;
}
.m-mine:hover, .m-mine:focus { fill: #f0c844; opacity: 1; }

/* Enemy — red */
.m-enemy {
  fill: var(--danger);
  stroke: #e06060;
  opacity: 0.85;
}
.m-enemy:hover, .m-enemy:focus { fill: #e05050; opacity: 1; }

/* Free / claimable — teal */
.m-free {
  fill: var(--teal);
  stroke: #60d0c8;
  opacity: 0.9;
}
.m-free:hover, .m-free:focus { fill: #50c8c0; opacity: 1; }

/* Locked (free but not claimable) — dim grey */
.m-locked {
  fill: #3a3530;
  stroke: #5a5248;
  opacity: 0.65;
}
.m-locked:hover, .m-locked:focus { fill: #4a4540; opacity: 0.85; }

/* ---- Street outlines (SVG fallback) ----------------------------- */
/* The real road, painted in the ownership colour. A very light overlay by
   default; hovering the street intensifies it. (Placed after .m-* so the
   fill:none and stroke rules win for polylines.) */
.map-street {
  fill: none;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: 0.28;
  opacity: 1;
  cursor: pointer;
  transition: stroke-opacity 0.15s, stroke-width 0.15s;
}
.map-street:hover { stroke-opacity: 0.95; stroke-width: 5; }
.map-street.m-mine        { stroke: #d4a030; stroke-opacity: 0.55; stroke-width: 4; }
.map-street.m-mine:hover  { stroke-opacity: 1; stroke-width: 6; }
.map-street.m-enemy       { stroke: #c04040; }
.map-street.m-free        { stroke: #3aada5; }
.map-street.m-locked      { stroke: #3a3530; }

/* ---- Streets meta line (below the map) --------------------------- */
.map-streets-meta {
  font-size: 0.76rem;
  margin-bottom: 6px;
}

/* ================================================================
   MAP POPUP OVERLAY
   Centered modal with translucent backdrop — appended to <body>.
   ================================================================ */

/* Full-screen backdrop */
.map-popup-backdrop {
  position: fixed;
  inset: 0;
  /* Above Leaflet panes/controls (which go up to ~1000) so the action popup
     always sits in front of the map. */
  z-index: 10000;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  /* Fade in */
  animation: popup-backdrop-in 0.15s ease;
}

@keyframes popup-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Popup panel */
.map-popup {
  position: relative;
  background: var(--bg-panel);
  border: 1px solid var(--gold-dim);
  border-radius: var(--radius);
  box-shadow:
    0 0 0 1px rgba(212, 160, 48, 0.1),
    0 12px 48px rgba(0, 0, 0, 0.85),
    inset 0 1px 0 rgba(255,255,255,0.04);
  width: 100%;
  max-width: 340px;
  padding: 20px 18px 16px;
  /* Slide in */
  animation: popup-panel-in 0.18s cubic-bezier(0.2, 0.8, 0.4, 1);
  outline: none;
}

@keyframes popup-panel-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

/* ✕ close button in the top-right corner */
.map-popup-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: transparent;
  border: none;
  color: var(--ink-muted);
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 5px;
  border-radius: 2px;
  transition: color 0.12s;
}
.map-popup-close:hover { color: var(--ink); }

/* Title (street name) */
.map-popup-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: 0.5px;
  margin-bottom: 2px;
  padding-right: 24px; /* clear the ✕ button */
}

/* Subtitle (district name) */
.map-popup-sub {
  font-size: 0.78rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.8px;
  margin-bottom: 12px;
}

/* Info rows */
.map-popup-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.map-popup-info-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 0.82rem;
}

.map-popup-info-label {
  color: var(--ink-muted);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  width: 56px;
  flex-shrink: 0;
}

.map-popup-info-val {
  color: var(--ink);
  flex: 1;
}

/* Status value colourisations */
.map-status-mine  { color: var(--gold); font-weight: 700; }
.map-status-enemy { color: var(--danger); }
.map-status-free  { color: var(--teal); }

/* Claim cost line */
.map-cost {
  font-size: 0.76rem;
  color: var(--ink-muted);
  margin-bottom: 10px;
  padding: 5px 8px;
  background: var(--bg-row);
  border: 1px solid var(--line);
  border-radius: 2px;
}

/* ---- Action buttons inside the popup ----------------------------- */
.map-popup-actions {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

/* Base popup button — full width */
.map-popup-btn {
  width: 100%;
  justify-content: center;
  padding: 9px 12px;
  font-size: 0.88rem;
  font-weight: 700;
}

/* Disabled/coming-soon state */
.map-btn-disabled,
.map-btn-coming-soon {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Coming-soon note below a disabled button */
.map-coming-soon {
  font-size: 0.74rem;
  color: var(--ink-muted);
  text-align: center;
  margin-top: -2px;
}

/* ================================================================
   RESPONSIVE TWEAKS FOR THE MAP
   ================================================================ */

@media (max-width: 719px) {
  .map-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .map-legend {
    gap: 8px;
  }

  svg.city-map {
    aspect-ratio: 4 / 3;
  }
}

@media (max-width: 480px) {
  .map-popup {
    max-width: 90vw;
    padding: 16px 14px 12px;
  }

  .map-filter-chip {
    font-size: 0.7rem;
    padding: 3px 7px;
  }
}

/* ================================================================
   LEAFLET MAP ENGINE
   Container for the real OSM tile map (window.L available).
   Leaflet's own CSS is loaded from CDN before app.js; we only
   set the container size and lightly theme the overlay controls.
   ================================================================ */

/* The div Leaflet mounts into — must have an explicit height. */
.leaflet-map-container {
  height: 70vh;
  min-height: 520px;
  width: 100%;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 10px;
  /* Leaflet tiles are light; the border and rounded corners integrate it
     into the dark-panel layout without force-darkening the tile layer. */
}

/* Game-styled tooltip bound to each circleMarker via .bindTooltip(). */
.leaflet-sr-tooltip {
  background: var(--bg-panel);
  border: 1px solid var(--gold-dim);
  border-radius: 3px;
  color: var(--ink);
  font: 0.78rem/1.4 "Segoe UI", system-ui, -apple-system, sans-serif;
  padding: 3px 8px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0,0,0,0.6);
}
/* Leaflet adds a ::before arrow on tooltips; hide it for our dark style. */
.leaflet-sr-tooltip::before { display: none; }

/* Leaflet zoom-control buttons — make them legible on the light tile backdrop. */
.leaflet-control-zoom a {
  color: #333 !important;
  background: rgba(255,255,255,0.9) !important;
  border-color: rgba(0,0,0,0.25) !important;
}
.leaflet-control-zoom a:hover {
  background: #fff !important;
  color: #000 !important;
}

/* Attribution — keep it readable but less intrusive. */
.leaflet-control-attribution {
  background: rgba(255,255,255,0.75) !important;
  font-size: 0.68rem;
}

/* ================================================================
   SVG FALLBACK ENGINE — enlarged, zoom/pan capable
   .svg-map-wrap overrides the base .map-wrap height so the SVG
   fallback matches the Leaflet container dimensions.
   ================================================================ */

/* Tall wrapper matching the Leaflet container. */
.svg-map-wrap {
  height: 70vh;
  min-height: 520px;
  /* Override the base .map-wrap aspect-ratio-driven height; the SVG
     fills the wrapper via height:100% below. */
  aspect-ratio: unset;
}

/* SVG fills the wrapper fully when inside .svg-map-wrap. */
.svg-map-wrap svg.city-map {
  width: 100%;
  height: 100%;
  /* Override the global aspect-ratio rule so the SVG tracks the
     wrapper height rather than computing its own. */
  aspect-ratio: unset;
  cursor: grab;
}
.svg-map-wrap svg.city-map.dragging {
  cursor: grabbing;
}

/* Small note beneath the SVG fallback. */
.map-offline-note {
  font-size: 0.72rem;
  color: var(--ink-muted);
  text-align: right;
  margin: 0 0 6px;
  font-style: italic;
}

/* ================================================================
   RESPONSIVE — MAP ENGINES
   ================================================================ */

@media (max-width: 719px) {
  .leaflet-map-container {
    height: 60vh;
    min-height: 380px;
  }

  .svg-map-wrap {
    height: 60vh;
    min-height: 380px;
  }
}

@media (max-width: 480px) {
  .leaflet-map-container {
    height: 55vh;
    min-height: 300px;
  }

  .svg-map-wrap {
    height: 55vh;
    min-height: 300px;
  }
}

/* ================================================================
   BUILDING CARD GRID — OGame-style 2-column layout
   Applies to the Versorgung (supply) and Anlagen (facilities) tabs.
   Each card is a .building-row; the art is a .bld-art element
   prepended as the first child, followed by the existing info/controls.
   All SVG art is inline data-URI — zero external requests.
   ================================================================ */

/* ---- 2-column grid container ------------------------------------- */
.bld-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 4px;
}

/* Collapse to single column on narrow panels (≤560px viewport width,
   or inside the og-content panel which is narrowed by menu+turf cols). */
@media (max-width: 720px) {
  .bld-grid { grid-template-columns: 1fr; }
}

/* ---- Art image header (2 : 1 aspect ratio) ----------------------- */
/* A CSS-background div prepended as the first child of each card.
   The per-building class (e.g. .bld-art--bottle_depot) sets
   background-image to an inline SVG data-URI. */
.bld-art {
  aspect-ratio: 2 / 1;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-color: rgb(12, 10, 8);  /* fallback while SVG loads */
  position: relative;
  border-bottom: 1px solid rgb(60, 52, 42);
  flex-shrink: 0;
  /* Subtle bottom gradient so an overlaid badge stays legible. */
  box-shadow: inset 0 -28px 24px -8px rgba(12, 10, 8, 0.72);
}

/* Level badge positioned top-right inside the art. */
.bld-art .badge-level {
  position: absolute;
  top: 7px;
  right: 8px;
  z-index: 2;
  background: rgba(12, 10, 8, 0.78);
  border-color: rgba(212, 160, 48, 0.55);
  color: rgb(212, 160, 48);
  font-size: 0.7rem;
  letter-spacing: 0.4px;
  backdrop-filter: blur(2px);
}

/* ---- Per-building inline SVG art --------------------------------- */
/* Palette (all rgb()/rgba() — never hex inside url() data-URIs):
     bg dark:   rgb(28,24,20) → rgb(12,10,8)
     gold:      rgb(212,160,48)
     gold-dim:  rgb(140,104,24)
     teal:      rgb(58,173,165)
     teal-dim:  rgb(36,108,104)
     danger:    rgb(192,64,64)
     line:      rgb(60,52,42)
     light:     rgb(225,215,200)
   SVG viewBox: 0 0 240 120.  All attributes use single quotes.
   url() wrapper uses double quotes.  No real newlines inside url().
   Each SVG has:
     1. A vertical gradient background fill rect.
     2. A faint horizon / texture line.
     3. An iconic motif in gold/teal strokes and fills.
*/

/* Per-building cover photos. The actual JPEGs are downloaded by
   `bin/strassenreich download-images` into public/img/buildings/. Apply a
   gritty filter so any real photo lands in the game's dark/sepia palette and
   the cards stay visually cohesive. A dark overlay (linear-gradient) helps the
   overlaid level badge and the build-progress overlay stay legible. */
.bld-art {
  filter: contrast(1.08) saturate(0.85) sepia(0.15);
  background-image:
    linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)),
    radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12));
}
.bld-art--bottle_depot  { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/bottle_depot.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--scrap_yard    { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/scrap_yard.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--token_corner  { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/token_corner.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--camp          { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/camp.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--pfand_lockup  { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/pfand_lockup.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--scrap_stash   { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/scrap_stash.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--token_box     { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/token_box.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--workshop      { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/workshop.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--cart_workshop { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/cart_workshop.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--library       { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/library.webp"), radial-gradient(ellipse at 50% 35%, rgb(74,60,38), rgb(20,16,12)); }
.bld-art--neubaugebiet  { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/neubaugebiet.webp"), radial-gradient(ellipse at 50% 35%, rgb(50,70,50), rgb(14,22,14)); }
/* Day-Labor Yard: warm dawn gradient (people lining up at first light). */
.bld-art--day_labor     { background-image: linear-gradient(180deg, rgba(12,10,8,0.18), rgba(12,10,8,0.55)), url("/img/buildings/day_labor.webp"), radial-gradient(ellipse at 50% 35%, rgb(96,70,38), rgb(28,18,12)); }
/* Research cards have no photo — a distinct teal/ink "blueprint" gradient. */
.bld-art--research      { background-image: radial-gradient(ellipse at 50% 30%, rgb(36,58,66), rgb(12,16,18)); }
/* Unit (Fuhrpark) cards — a steel/asphalt gradient. */
.bld-art--unit          { background-image: radial-gradient(ellipse at 50% 30%, rgb(60,56,50), rgb(16,14,12)); }
/* Defense (Verteidigung) cards — a rust/warning gradient. */
.bld-art--defense       { background-image: radial-gradient(ellipse at 50% 30%, rgb(74,46,30), rgb(18,12,10)); }

/* Unit stat chips row. */
.unit-stats {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 2px 0 8px;
}
.unit-stat {
  font-size: 0.76rem;
  color: var(--ink-dim);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}
/* Quantity input + build button group. */
.unit-build { display: flex; gap: 6px; align-items: stretch; }
.unit-qty {
  width: 64px;
  background: #0c0a08;
  color: #f0e6c8;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.85rem;
}

/* ---- Card spacing adjustments within grid ------------------------ */
/* Remove the bottom margin from cards in the grid — gap handles it. */
.bld-grid .building-row { margin-bottom: 0; }

/* ---- Responsive: single-column below 560px content width --------- */
/* The og-content panel shrinks further on medium viewports when
   flanked by both menu and turf columns; collapse earlier. */
@media (max-width: 900px) {
  .bld-grid { grid-template-columns: 1fr; }
}

/* ---- Build progress overlay (building under construction) ------------------ */
.building-row--active { box-shadow: inset 0 0 0 1px rgba(212,160,48,0.55); }
.bld-art .badge-level { z-index: 3; }            /* keep level badge above the overlay */
.bld-build-overlay {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; text-align: center;
  background: rgba(8,6,4,0.66);
}
.bld-build-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 1.5px;
  color: var(--gold); opacity: 0.92;
}
.bld-build-timer {
  font-size: 1.7rem; font-weight: 700; line-height: 1;
  color: #f0d488; text-shadow: 0 1px 4px #000;
  font-variant-numeric: tabular-nums;
}
.bld-build-bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  background: rgba(255,255,255,0.12);
}
.bld-build-fill {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, rgb(212,160,48), rgb(58,173,165));
}

/* ---- Build-progress bar colour by completion % ---------------------------- *
 * driveProgress() sets --p (0–100, % complete) on every .js-progress, so any
 * .js-progress-fill (overview filling up, card overlay running down) shows the
 * SAME meaning: red (just started) → yellow → green (almost done).
 * HSL hue 0=red, 60=yellow, 120=green. */
.js-progress { --p: 0; }
.js-progress-fill {
  background: linear-gradient(
    180deg,
    hsl(calc(var(--p) * 1.2), 75%, 52%),
    hsl(calc(var(--p) * 1.2), 70%, 38%)
  );
  transition: background 0.25s linear;
}

/* ---- Crew-starving warning under a mine's production line ----------------
 * Shown when a built mine's net < gross (crew supply can't cover demand).
 * Makes the OGame energy mechanic obvious: orange tone + the action verb. */
.bld-crew-warn {
  font-size: 0.78rem;
  color: rgb(232, 168, 80);
  background: rgba(120, 70, 20, 0.12);
  border: 1px solid rgba(232, 168, 80, 0.35);
  border-radius: 3px;
  padding: 4px 8px;
  margin: 4px 0 8px;
  line-height: 1.35;
}

/* ---- City mask: blur+desaturate the world outside the boundary -----------
 * The donut polygon dims the outside; a CSS backdrop-filter on the same path
 * also blurs the tiles below it (where browsers support it). The combination
 * focuses attention on Prüm and visually amputates the surrounding area. */
.sr-city-mask {
  backdrop-filter: blur(3px) saturate(0.4) brightness(0.6);
  -webkit-backdrop-filter: blur(3px) saturate(0.4) brightness(0.6);
}

/* ---- Admin UI: resource cells click-to-edit -------------------------------- */
.rb-admin-editable {
  cursor: pointer;
  position: relative;
}
.rb-admin-editable:hover {
  outline: 1px dashed rgba(255, 200, 80, 0.6);
  border-radius: 4px;
}
.admin-res-popup {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 200;
  background: #1c1814;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 6px 8px;
  display: flex;
  gap: 6px;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
  white-space: nowrap;
}
.admin-res-input {
  width: 80px;
  background: #0c0a08;
  color: #f0e6c8;
  border: 1px solid #666;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 0.9rem;
}
.btn-admin-res {
  padding: 2px 7px;
  font-size: 0.85rem;
}

/* ---- Admin: downgrade building button -------------------------------------- */
.btn-admin-down {
  padding: 4px 10px;
  font-size: 0.82rem;
  background: rgba(80, 50, 20, 0.5);
  color: #f0a860;
  border: 1px solid rgba(240, 168, 96, 0.4);
  border-radius: 4px;
  cursor: pointer;
}
.btn-admin-down:hover {
  background: rgba(120, 70, 20, 0.7);
}

/* ---- Chat (Straßenfunk) floating widget ---------------------------------- */
/* The panel floats top-right, just under the sticky resource bar; it's opened by
   the 💬 bubble in the header (.rb-chat). */
.chat-widget {
  position: fixed; right: 14px; top: 56px; z-index: 1300;
}

/* Header chat bubble (resource bar, right of Standing). */
.rb-cell.rb-chat {
  position: relative;
  cursor: pointer;
  justify-content: center;
  min-width: 56px;
}
.rb-cell.rb-chat:hover { background: rgba(255,255,255,0.05); }
.rb-cell.rb-chat .rb-icon { font-size: 1.25rem; }
.rb-chat-badge {
  position: absolute; top: 5px; right: 8px;
  background: var(--danger); color: #fff;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; font-size: 0.62rem; line-height: 16px;
  text-align: center; font-weight: 700;
}
.chat-panel {
  width: 320px; height: 420px;
  min-width: 260px; min-height: 240px;
  max-width: 90vw; max-height: 85vh;
  background: #12100d; border: 1px solid var(--line-gold);
  border-radius: 6px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 8px 30px rgba(0,0,0,0.6);
  resize: both;            /* drag the bottom-right corner to resize */
}
/* The explicit display above beats the [hidden] UA rule, so without this the
   close/toggle couldn't actually hide the panel. */
.chat-panel[hidden] { display: none; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; background: #0f0d0a; border-bottom: 1px solid var(--line);
  cursor: move; user-select: none;   /* header is the drag handle */
  touch-action: none;
}
.chat-head-title { color: var(--gold); font-weight: 700; letter-spacing: 0.5px; }
.chat-head-close {
  background: none; border: none; color: var(--ink-dim);
  font-size: 1rem; cursor: pointer; padding: 2px 6px;
}
.chat-head-close:hover { color: var(--ink); }
/* Channel tabs (server / street / guild / dm). */
.chat-tabs {
  display: flex; background: #0f0d0a; border-bottom: 1px solid var(--line);
}
.chat-tab {
  flex: 1; padding: 7px 4px; background: none; border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-dim); font-size: 0.76rem; cursor: pointer;
  white-space: nowrap;
}
.chat-tab:hover { color: var(--ink); background: rgba(255,255,255,0.03); }
.chat-tab.active { color: var(--gold); border-bottom-color: var(--gold); }

.chat-log {
  flex: 1; overflow-y: auto; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.chat-empty { color: var(--ink-dim); font-style: italic; text-align: center; margin: auto; }
.chat-msg { font-size: 0.82rem; line-height: 1.4; word-break: break-word; }
.chat-msg-time { color: var(--ink-muted); font-size: 0.7rem; margin-right: 5px; font-variant-numeric: tabular-nums; }
.chat-msg-name { color: var(--teal); font-weight: 600; margin-right: 5px; }
.chat-msg-self .chat-msg-name { color: var(--gold); }
.chat-msg-body { color: var(--ink); }
.chat-input-row {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px;
  background: #0f0d0a; border-top: 1px solid var(--line);
}
.chat-to {
  width: 100%;
  background: #0c0a08; color: var(--gold);
  border: 1px solid #555; border-radius: 3px;
  padding: 4px 8px; font-size: 0.8rem;
}
.chat-input {
  flex: 1; min-width: 0;
  background: #0c0a08; color: #f0e6c8;
  border: 1px solid #555; border-radius: 3px;
  padding: 5px 8px; font-size: 0.85rem;
}
.chat-send { padding: 5px 12px; font-size: 0.82rem; flex-shrink: 0; }
@media (max-width: 480px) {
  .chat-panel { width: calc(100vw - 28px); height: 60vh; }
}

/* ---- POI "incentive" chips (street popup) --------------------------------- */
.poi-row { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.poi-row-label {
  display: block; font-size: 0.7rem; color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 5px;
}
.poi-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.poi-chip {
  font-size: 0.78rem; color: var(--ink-dim);
  background: var(--bg-panel); border: 1px solid var(--line);
  border-radius: 12px; padding: 2px 8px;
  font-variant-numeric: tabular-nums; cursor: default;
}

/* ---- Turf overview: static street mini-map + POI list --------------------- */
.turf-minimap-wrap {
  margin-bottom: 14px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0c1014;
}
.turf-minimap { display: block; width: 100%; height: auto; }
.turf-minimap-bg { fill: #0e1216; }
.turf-minimap-street { fill: none; stroke: #4a4f55; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.turf-minimap-street.active { stroke: #5fcf6a; stroke-width: 3.5; }
.turf-minimap-dot { fill: #4a4f55; }
.turf-minimap-dot.active { fill: #5fcf6a; }
.turf-minimap-marker { fill: #5fcf6a; stroke: #0c1014; stroke-width: 1.5; }

.turf-poi-card { margin-bottom: 14px; }
.turf-poi-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line);
}
.turf-poi-row:last-child { border-bottom: none; }
.turf-poi-name { color: var(--ink); font-size: 0.86rem; }
.turf-poi-effect { font-size: 0.76rem; text-align: right; }
.turf-poi-effect.warn { color: rgb(232, 168, 80); }
.turf-poi-effect.good { color: #5fcf6a; }
.turf-poi-effect.muted { color: var(--ink-muted); font-style: italic; }

/* ---- Overview: real (tiled) mini Leaflet map ------------------------------ */
.overview-map-container {
  width: 100%; height: 260px;
  margin-bottom: 14px;
  border: 1px solid var(--line-gold);
  border-radius: var(--radius);
  overflow: hidden;
  background: #0e1216;
}

/* ---- Empire (Imperium) turf management ------------------------------------ */
.empire-toolbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.empire-filter {
  flex: 1; min-width: 140px;
  background: #0c0a08; color: #f0e6c8;
  border: 1px solid #555; border-radius: 3px; padding: 6px 9px; font-size: 0.85rem;
}
.empire-sort {
  background: #0c0a08; color: #f0e6c8;
  border: 1px solid #555; border-radius: 3px; padding: 6px 9px; font-size: 0.82rem;
}
.empire-rows { display: flex; flex-direction: column; gap: 8px; }
.empire-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 8px; }
.empire-meta-item { font-size: 0.78rem; color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.empire-actions { display: flex; flex-wrap: wrap; gap: 6px; }

/* ---- Notification bar (under the resource bar) ---------------------------- */
.notif-bar {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 10px 0;
  background: transparent;
}
.notif-bar[hidden] { display: none; }
.notif {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-left-width: 4px;
  border-radius: 3px;
  background: #1a1612;
  font-size: 0.85rem;
}
.notif-attack   { border-left-color: #e02020; background: rgba(120, 30, 30, 0.18); }
.notif-incoming { border-left-color: #8a3ad0; background: rgba(80, 40, 110, 0.18); }
.notif-warn     { border-left-color: #e08840; background: rgba(120, 80, 30, 0.16); }
.notif-info     { border-left-color: #3aada5; background: rgba(40, 80, 90, 0.16); }
.notif-icon { font-size: 1rem; }
.notif-msg  { flex: 1; color: var(--ink); }
.notif-open {
  background: transparent; border: none;
  color: var(--gold); cursor: pointer;
  font-size: 0.82rem; text-decoration: underline;
}
.notif-close {
  background: none; border: none; cursor: pointer;
  color: var(--ink-dim); font-size: 0.9rem; padding: 2px 6px;
}
.notif-close:hover { color: var(--ink); }

/* ---- Right column: filter + status colours -------------------------------- */
.og-turfs-filter {
  width: calc(100% - 18px); margin: 8px 9px 6px;
  background: #0c0a08; color: #f0e6c8;
  border: 1px solid #555; border-radius: 3px;
  padding: 5px 8px; font-size: 0.8rem;
  box-sizing: border-box;
}
.og-turfs-rows { display: flex; flex-direction: column; }
.og-turfs-empty { padding: 8px 9px; }
/* Status border-left mirrors the map marker palette. */
.og-turf-status-mine     { background: rgba(58, 168, 74, 0.16); color: #5fcf6a; }
.og-turf-status-home     { background: rgba(212, 160, 48, 0.16); color: var(--gold); }
.og-turf-status-incoming { background: rgba(138, 58, 208, 0.22); color: #b56cff; }
.og-turf-status-attack   { background: rgba(224, 32, 32, 0.20); color: #ff5555; }
.og-turf-card .og-turf-marker { width: 28px; min-width: 28px; height: 28px; border-radius: 3px;
  display: flex; align-items: center; justify-content: center; }

/* ---- Diamond cell in resource bar (clickable → shop) ---------------------- */
.rb-cell.rb-diamonds { cursor: pointer; }
.rb-cell.rb-diamonds:hover { background: rgba(255,255,255,0.05); }
.rb-diamond-amount { color: #6cc1f0; }

/* ---- Quest banner (overview tab) ----------------------------------------- */
.quest-banner {
  background: linear-gradient(180deg, rgba(60,40,15,0.25), rgba(20,15,10,0.5));
  border: 1px solid var(--line-gold);
  border-left: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 14px;
}
.quest-banner-head { display: flex; align-items: center; gap: 8px; }
.quest-banner-icon { font-size: 1.1rem; }
.quest-banner-title { color: var(--gold); font-weight: 700; flex: 1; }
.quest-banner-progress { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.quest-banner-desc { color: var(--ink); font-size: 0.86rem; margin: 6px 0; }
.quest-banner-reward { display: flex; gap: 8px; align-items: center; font-size: 0.82rem; }
.quest-banner-reward-bits { color: #5fcf6a; font-variant-numeric: tabular-nums; }

/* ---- Shop section -------------------------------------------------------- */
.shop-balance {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 18px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: rgba(20,30,45,0.25);
}
.shop-balance .rb-amount { color: #6cc1f0; }
.shop-section-title {
  color: var(--gold); font-size: 0.96rem; font-weight: 700;
  margin: 14px 0 8px; padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.shop-grid {
  display: grid; gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.shop-card {
  background: var(--bg-row); border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px;
  display: flex; flex-direction: column; gap: 6px;
}
.shop-card-title { font-weight: 700; color: var(--ink); }
.shop-card-amount { color: #6cc1f0; font-size: 1.05rem; }
.shop-card-price  { color: var(--gold); font-variant-numeric: tabular-nums; }
.shop-buy { margin-top: 4px; }

/* ===== Gamification juice ================================================== */
/* Floating "+amount" gain popups. */
.float-gain {
  position: fixed; z-index: 1400; transform: translateX(-50%);
  font-weight: 800; font-size: 1rem; color: #5fcf6a;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none;
  animation: floatUp 1.5s ease-out forwards;
}
.float-gain.gain-diamond { color: #6cc1f0; }
@keyframes floatUp {
  0%   { opacity: 0; transform: translate(-50%, 0) scale(0.8); }
  15%  { opacity: 1; transform: translate(-50%, -6px) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1); }
}

/* Pulse highlight. */
.fx-pulse { animation: fxPulse 0.9s ease-out; }
@keyframes fxPulse {
  0%   { box-shadow: 0 0 0 0 rgba(95,207,106,0.0); }
  20%  { box-shadow: 0 0 0 3px rgba(95,207,106,0.65); }
  100% { box-shadow: 0 0 0 0 rgba(95,207,106,0.0); }
}

/* Quest-complete celebration. */
.celebrate-backdrop {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,4,0.55); animation: fadeIn 0.2s ease-out;
}
.celebrate-card {
  position: relative; overflow: visible;
  background: linear-gradient(180deg, #221a10, #14100a);
  border: 1px solid var(--line-gold); border-radius: 10px;
  padding: 22px 30px; text-align: center; max-width: 90vw;
  box-shadow: 0 12px 50px rgba(0,0,0,0.7);
  animation: popIn 0.35s cubic-bezier(0.18,1.2,0.4,1);
}
.celebrate-badge   { font-size: 2.4rem; }
.celebrate-kicker  { color: var(--gold); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: 0.85rem; margin-top: 4px; }
.celebrate-title   { color: var(--ink); font-size: 1.1rem; font-weight: 700; margin: 6px 0; }
.celebrate-reward  { color: #5fcf6a; font-variant-numeric: tabular-nums; font-size: 1rem; }
.celebrate-burst   { position: absolute; inset: 0; overflow: visible; pointer-events: none; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes popIn  { 0% { opacity: 0; transform: scale(0.7); } 100% { opacity: 1; transform: scale(1); } }

/* Confetti pieces — fall + spin from the top of the burst container. */
.confetti {
  position: absolute; top: -10px; width: 8px; height: 12px; border-radius: 1px;
  animation: confettiFall 1.6s ease-in forwards;
}
.confetti.c0 { background: #e8c060; }
.confetti.c1 { background: #5fcf6a; }
.confetti.c2 { background: #6cc1f0; }
.confetti.c3 { background: #e06060; }
.confetti.c4 { background: #b56cff; }
@keyframes confettiFall {
  0%   { opacity: 1; transform: translateY(0) rotate(0deg); }
  100% { opacity: 0; transform: translateY(180px) rotate(420deg); }
}

/* ===== Tutorial =========================================================== */
.tut-backdrop {
  position: fixed; inset: 0; z-index: 1450;
  display: flex; align-items: flex-end; justify-content: center;
  background: rgba(8,6,4,0.45); animation: fadeIn 0.2s ease-out;
  padding: 0 14px 80px;
}
.tut-card {
  width: 420px; max-width: 92vw;
  background: linear-gradient(180deg, #1c1814, #12100a);
  border: 1px solid var(--line-gold); border-radius: 10px;
  padding: 16px 18px; box-shadow: 0 12px 50px rgba(0,0,0,0.7);
  animation: popIn 0.3s ease-out;
}
.tut-head { display: flex; align-items: center; justify-content: space-between; }
.tut-step { color: var(--ink-dim); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.tut-skip { background: none; border: none; color: var(--ink-dim); cursor: pointer; font-size: 0.82rem; text-decoration: underline; }
.tut-skip:hover { color: var(--ink); }
.tut-title { color: var(--gold); margin: 8px 0 4px; font-size: 1.05rem; }
.tut-body  { color: var(--ink); font-size: 0.9rem; line-height: 1.5; margin: 0 0 12px; }
.tut-dots  { display: flex; gap: 5px; justify-content: center; margin-bottom: 12px; }
.tut-dot   { width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.tut-dot.active { background: var(--gold); }
.tut-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tut-btn { min-width: 84px; }
/* Ring-highlight on the targeted element. */
.tut-highlight {
  position: relative; z-index: 1460;
  outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 4px;
  animation: fxPulse 1.2s ease-out infinite;
}
/* Floating help button. */
.tut-help {
  position: fixed; left: 14px; bottom: 14px; z-index: 1300;
  width: 40px; height: 40px; border-radius: 50%;
  background: #1c1814; color: var(--gold); border: 1px solid var(--line-gold);
  font-size: 1.2rem; font-weight: 800; cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}
.tut-help:hover { background: #261f18; }

/* ===== Universal click juice =============================================== */
/* Ripple inside .btn — positioned by JS, animated by CSS. */
.ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,220,140,0.55), rgba(255,220,140,0) 70%);
  transform: scale(0); opacity: 0.9;
  animation: ripple 0.65s ease-out forwards;
}
.btn-danger .ripple { background: radial-gradient(circle, rgba(255,120,120,0.55), rgba(255,120,120,0) 70%); }
.btn-gold   .ripple { background: radial-gradient(circle, rgba(255,220,140,0.7), rgba(255,220,140,0) 70%); }
@keyframes ripple {
  0%   { transform: scale(0);   opacity: 0.9; }
  100% { transform: scale(2.5); opacity: 0;   }
}

/* Floating action burst (icon flies up + fades from the click point). */
.action-burst {
  position: fixed; z-index: 1400; pointer-events: none;
  font-size: 1.6rem; transform: translate(-50%, -50%);
  animation: actionBurst 1.1s cubic-bezier(0.22,1,0.36,1) forwards;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.55));
  text-shadow: 0 0 6px rgba(255,255,255,0.18);
}
@keyframes actionBurst {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(-8deg); }
  12%  { opacity: 1; transform: translate(-50%, -65%) scale(1.45) rotate(6deg); }
  40%  { opacity: 1; transform: translate(-50%, -110%) scale(1.05) rotate(-4deg); }
  100% { opacity: 0; transform: translate(-50%, -180%) scale(0.8) rotate(8deg); }
}

/* Tactile button press: tighten the existing translateY(1px) with a faint scale
   so the click *feels* in the finger. */
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.985); }

/* Subtle hover lift on the cards the player interacts with most. */
.building-row, .shop-card, .og-turf-card, .empire-row {
  transition: transform 0.12s ease-out, box-shadow 0.12s ease-out, border-color 0.15s;
}
.building-row:hover, .shop-card:hover, .empire-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.45);
}
.og-turf-card:hover { transform: translateX(2px); }

/* prefers-reduced-motion: kill all the juice animations + transitions. */
@media (prefers-reduced-motion: reduce) {
  .action-burst, .ripple, .float-gain, .fx-pulse, .celebrate-card,
  .celebrate-backdrop, .confetti, .tut-card, .tut-backdrop {
    animation: none !important;
  }
  .building-row, .shop-card, .og-turf-card, .empire-row { transition: none; }
  .building-row:hover, .shop-card:hover, .empire-row:hover,
  .og-turf-card:hover { transform: none; box-shadow: none; }
}

/* ===== Stripe Embedded Checkout modal ===================================== */
/* Game-styled chrome (dark, gold-line, drop shadow) around Stripe's iframe.
   Stripe controls the form pixels inside #stripe-mount — we only style the
   frame, the header, and the close button. */
.stripe-backdrop {
  position: fixed; inset: 0; z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8,6,4,0.78);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  animation: fadeIn 0.2s ease-out;
  padding: 14px;
}
.stripe-modal {
  width: 500px; max-width: 100%;
  max-height: 92vh;
  background: linear-gradient(180deg, #1c1814, #12100a);
  border: 1px solid var(--line-gold);
  border-radius: 8px;
  box-shadow: 0 16px 60px rgba(0,0,0,0.75), 0 0 0 1px rgba(212,160,48,0.12) inset;
  display: flex; flex-direction: column; overflow: hidden;
  animation: popIn 0.3s cubic-bezier(0.18,1.2,0.4,1);
}
.stripe-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: #0f0d0a;
  border-bottom: 1px solid var(--line-gold);
}
.stripe-modal-title {
  color: var(--gold);
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 0.92rem;
}
.stripe-modal-close {
  background: none; border: none; color: var(--ink-dim);
  font-size: 1.15rem; cursor: pointer; padding: 4px 10px;
  border-radius: 3px;
  transition: color 0.15s, background 0.15s;
}
.stripe-modal-close:hover { color: var(--ink); background: rgba(255,255,255,0.05); }
.stripe-modal-mount {
  flex: 1; overflow-y: auto;
  background: #0f0d0a;
  padding: 6px 8px;
}
/* Stripe injects its own iframe — give it room to breathe. */
.stripe-modal-mount > div { min-height: 460px; }

/* ================================================================
   MOBILE OPTIMIZATION
   Final pass that tightens the existing 720px / 480px breakpoints
   for real phones: safe-area-insets for notched devices, edge-to-edge
   game shell, iOS form-zoom prevention, proper touch target sizes,
   and dvh-aware heights. Additive — does not unwind anything above.
   ================================================================ */

/* ---- Sticky bars respect the iOS notch ---------------------------- */
/* In landscape, env(safe-area-inset-top) is 0 — the body padding-left/right
   on .html/body covers the side cutouts. In portrait, the notch is at the
   top: the resource bar, its menu/turfs siblings, and the site-header all
   need their inner padding bumped so content doesn't tuck under the notch. */
.site-header { padding-top: env(safe-area-inset-top); }

/* iOS will zoom the page when an input below 16px gets focus. Force the
   actual edit fields to 16px on touch-class viewports — the smaller fonts
   above are fine on desktop, where this rule doesn't fire. */
@media (max-width: 719px) {
  input, select, textarea,
  .empire-filter, .empire-sort, .og-turfs-filter,
  .admin-res-input, .unit-qty, .chat-input, .chat-to {
    font-size: 16px;
  }

  /* Game shell goes edge-to-edge on phones — recover the lost width.
     The outer <main class="main"> normally inserts 14px 18px around the
     OGame layout; on phones we drop it so the resource bar reaches the
     viewport edge. Non-game pages keep the original padding. */
  body.game > .main { padding: 0; }

  /* Site header tightens up — brand stays prominent, links stay tappable. */
  .nav { padding: 8px 12px; gap: 8px; }
  .brand { font-size: 1.05rem; letter-spacing: 2px; }
  .nav-links { gap: 12px; }
  .nav-links a, .link-btn { font-size: 0.85rem; }

  /* Cards take less of the (already small) viewport on phones. */
  .card { padding: 14px; margin-bottom: 10px; }

  /* The center content panel of the game already collapses; tighten more. */
  .og-content { padding: 12px 12px; }

  /* Building cards: the 2:1 art is half the screen tall on phone — drop to
     a flatter 5:2 so the card body stays the focus. */
  .bld-grid .building-row .bld-art { aspect-ratio: 5 / 2; }

  /* Build progress timer was 1.7rem inside a smaller box — scale down. */
  .bld-build-timer { font-size: 1.35rem; }

  /* Map popups should never exceed the viewport, and need to scroll inside
     when they do (landscape phone, lots of content). */
  .map-popup {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Tab bar (legacy cards) — give the buttons more thumb area. */
  .tab-btn { padding: 12px 14px; font-size: 0.82rem; }
}

/* ---- Touch target sizing ----------------------------------------- */
/* Apple HIG / Material both recommend ~44dp. Apply on any pointer that
   reports as coarse (i.e. finger), so this lands on phones AND tablets
   regardless of viewport width. Desktop mice (fine pointer) keep the
   compact desktop sizing above. */
@media (pointer: coarse) {
  .btn { min-height: 40px; padding: 10px 14px; }
  .btn.small { min-height: 32px; padding: 6px 10px; }
  .btn-build { min-height: 36px; padding: 8px 14px; }

  .og-menu-btn { padding: 14px 14px; min-height: 44px; }

  /* Chips / pills retain their compact look — they aren't primary actions. */
  .map-filter-chip { padding: 6px 10px; }

  /* Resource bar cells double as taps (admin / diamond shop) — bump. */
  .rb-cell { min-height: 44px; }

  /* Close buttons are notoriously hard to hit. */
  .map-popup-close, .chat-head-close, .stripe-modal-close, .notif-close {
    min-width: 36px; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
  }
}

/* ---- Chat widget on phones --------------------------------------- */
/* The widget anchors to top-right with a fixed offset; in landscape with
   a notch this collides with the cutout. Pad to the safe area. */
.chat-widget {
  top: calc(56px + env(safe-area-inset-top));
  right: calc(14px + env(safe-area-inset-right));
}

/* On the very small breakpoint the chat panel already takes the whole
   width. Make it bottom-anchored and respect the home-indicator inset. */
@media (max-width: 480px) {
  .chat-widget {
    top: auto;
    right: calc(8px + env(safe-area-inset-right));
    left: calc(8px + env(safe-area-inset-left));
    bottom: calc(8px + env(safe-area-inset-bottom));
  }
  .chat-panel {
    width: auto;
    height: 65dvh;
    resize: none;          /* corner-resize is unusable on phones */
  }

  /* Tutorial backdrop sits above content with bottom-aligned card; bump
     its inner offset off the home indicator. */
  .tut-backdrop { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }

  /* Floating help button: clear the home indicator. */
  .tut-help {
    left: calc(12px + env(safe-area-inset-left));
    bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* Stripe modal: full-bleed on tiny screens, but still leave the notch room. */
  .stripe-backdrop {
    padding:
      calc(8px + env(safe-area-inset-top))
      calc(8px + env(safe-area-inset-right))
      calc(8px + env(safe-area-inset-bottom))
      calc(8px + env(safe-area-inset-left));
  }
  .stripe-modal { max-height: calc(100dvh - 16px); }

  /* Toast stays above the home indicator. */
  .toast { bottom: calc(16px + env(safe-area-inset-bottom)); }
}

/* ---- Real viewport heights (dvh) for tall containers -------------- */
/* The 100vh-based heights set above don't account for the iOS Safari
   address bar collapsing. Replace with dvh where supported. */
@supports (height: 100dvh) {
  .og-body    { min-height: calc(100dvh - 90px); }
  .og-menu,
  .og-turfs   { max-height: calc(100dvh - 46px); }
  .og-content { min-height: calc(100dvh - 90px); }

  @media (max-width: 719px) {
    .leaflet-map-container,
    .svg-map-wrap { height: 60dvh; }
  }
  @media (max-width: 480px) {
    .leaflet-map-container,
    .svg-map-wrap { height: 55dvh; }
  }
}

/* ---- Smooth momentum scrolling on iOS in any horizontal scroller --- */
.resource-bar, .og-menu, .og-turfs, .tab-bar, .map-filter-row {
  -webkit-overflow-scrolling: touch;
}

/* ================================================================
   MOBILE — DRAWERS + WRAPPING RESOURCE BAR
   The 720px breakpoint above made og-menu and og-turfs into horizontal
   scroll rows, which on a phone are invisible (no scroll affordance) and
   chaotic. Replace that with:
     • Hamburger ☰ button in the nav opens og-menu as a left drawer.
     • ▤ button in the nav opens og-turfs as a right drawer.
     • Resource bar wraps into a grid (no horizontal scroll).
     • Backdrop catches taps to close.
   Toggles are wired by app.js via body.menu-open / body.turfs-open.
   ================================================================ */

/* ---- Nav mobile toggle buttons ----------------------------------- */
/* Hidden on desktop; shown only on phones via the breakpoint below.
   Order in nav: [☰ menu] [brand] [nav-links] [▤ turfs]. */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--line-gold);
  border-radius: 4px;
  font-size: 1.15rem;
  font-weight: 700;
  min-width: 38px;
  min-height: 38px;
  padding: 0 10px;
  cursor: pointer;
  line-height: 1;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
}
.nav-mobile-toggle:hover { background: rgba(212, 160, 48, 0.08); }
.nav-mobile-toggle:active { background: rgba(212, 160, 48, 0.18); }
.nav-mobile-toggle[aria-expanded="true"] {
  background: rgba(212, 160, 48, 0.16);
  border-color: var(--gold);
}

/* ---- Drawer backdrop (shared by menu + turfs) -------------------- */
/* Below the drawers (z 1500), above everything else. Tap to close. */
.mobile-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: rgba(8, 6, 4, 0.55);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
body.menu-open .mobile-drawer-backdrop,
body.turfs-open .mobile-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}

/* Lock body scroll while a drawer is open so the page underneath
   doesn't slide around under the user's thumb. */
body.menu-open,
body.turfs-open {
  overflow: hidden;
}

/* ---- Mobile drawer + grid resource bar (≤ 719px) ---------------- */
@media (max-width: 719px) {
  /* Show the nav toggles only on mobile. */
  .nav-mobile-toggle { display: inline-flex; }

  /* Trim the brand so the toggles + brand + auth links share a single row. */
  .brand { font-size: 0.95rem; letter-spacing: 1.5px; }

  /* The username chip eats horizontal space; the user knows who they are. */
  .nav-links .topbar-user { display: none; }

  /* Tighten the auth links so they don't crowd the turfs toggle. */
  .nav-links { gap: 10px; }
  .nav-links a, .link-btn { font-size: 0.8rem; }

  /* ---- og-menu → fixed left drawer ----------------------------- */
  /* Overrides the horizontal-scroll-row rules earlier in the file. */
  .og-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 78vw;
    max-width: 320px;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1500;
    background: #0f0d0a;
    border-right: 1px solid var(--line-gold);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.55);
  }
  body.menu-open .og-menu { transform: translateX(0); }

  /* Menu items inside the drawer go back to the vertical list look. */
  .og-menu .og-menu-btn {
    border-right: none;
    border-bottom: 1px solid var(--line);
    border-left: 3px solid transparent;
    padding: 14px 16px;
    min-height: 48px;
    white-space: nowrap;
    flex-shrink: 0;
    text-align: left;
    font-size: 0.88rem;
  }
  .og-menu .og-menu-btn:last-child { border-bottom: none; }
  .og-menu .og-menu-btn.active {
    border-left-color: var(--gold);
    border-bottom-color: var(--line);
    background: rgba(212, 160, 48, 0.09);
  }

  /* ---- og-turfs → fixed right drawer --------------------------- */
  .og-turfs {
    position: fixed;
    top: 0;
    right: 0;
    width: 82vw;
    max-width: 360px;
    height: 100vh;
    height: 100dvh;
    max-height: 100dvh;
    z-index: 1500;
    background: #0f0d0a;
    border-left: 1px solid var(--line-gold);
    border-top: none;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.22s ease-out;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    padding-right: env(safe-area-inset-right);
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.55);
  }
  body.turfs-open .og-turfs { transform: translateX(0); }

  /* Turf list rows go back to the vertical layout (override the
     horizontal-scroller column-flex rules from earlier). */
  .og-turfs .og-turfs-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--line-gold);
    border-right: none;
    flex-shrink: 0;
  }

  .og-turfs .og-turf-card {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    border-right: none;
    flex-shrink: 0;
    min-width: 0;
    width: 100%;
  }
  .og-turfs .og-turf-card.og-turf-card-active {
    border-bottom-color: var(--line);
    border-left: 2px solid var(--gold);
  }

  .og-turfs .og-turf-info { align-items: flex-start; min-width: 0; flex: 1; }
  .og-turfs .og-turf-name {
    text-align: left;
    font-size: 0.86rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
  }

  /* The dropdown filter sits at the top, full-width inside the drawer. */
  .og-turfs .og-turfs-filter { width: calc(100% - 24px); margin: 10px 12px 6px; }
  .og-turfs .og-turfs-rows   { flex-direction: column; }

  /* ---- Resource bar → wrapping grid ---------------------------- */
  /* No more horizontal scroll; every resource is visible at once.
     auto-fill keeps cell width comfortable while filling the row. */
  .resource-bar {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(105px, 1fr));
    overflow: visible;
    position: sticky;
    top: 0;
  }
  .rb-cell {
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    min-width: 0;
    flex: unset;       /* grid handles sizing now */
    padding: 8px 10px;
    gap: 6px;
  }
  /* Drop dangling borders on the last column/row of the grid. */
  .rb-cell:last-child { border-right: 1px solid var(--line); }

  .rb-icon  { font-size: 1rem; }
  .rb-amount { font-size: 0.85rem; }

  /* Body of the og-body now only contains the content; collapse the
     flex stack we no longer need (drawers are fixed/out of flow). */
  .og-body { flex-direction: column; }
}

/* Below 380px the grid still fits 3 columns at 105px-min; tighten further
   so cards don't get crushed. */
@media (max-width: 380px) {
  .resource-bar { grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
  .rb-amount { font-size: 0.8rem; }
  .rb-cell { padding: 7px 8px; gap: 4px; }
  .nav-mobile-toggle { min-width: 36px; min-height: 36px; padding: 0 8px; }
  .brand { letter-spacing: 1px; font-size: 0.9rem; }
}