/* Gang Wars - stylesheet */

:root {
  --ink: #0B0B0D;
  --panel: #17171A;
  --panel-2: #1D1D21;
  --line: #2A2A2E;
  --text: #EDEBE6;
  --muted: #9B9B9E;
  --crimson: #C1272D;
  --crimson-dark: #8F1D22;
  --brass: #C9A227;
  --green: #3FBF62;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ink);
  color: var(--text);
  font-family: 'Barlow', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

h1, h2, h3, .display {
  font-family: 'Anton', Impact, sans-serif;
  font-weight: 400;
  letter-spacing: -0.5px;
  margin: 0;
}

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

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }

.wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Header */
.site-header {
  background: repeating-linear-gradient(135deg, var(--panel) 0px, var(--panel) 18px, var(--panel-2) 18px, var(--panel-2) 19px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding-top: 20px;
  padding-bottom: 20px;
}
.logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Anton', Impact, sans-serif;
  font-size: 30px;
  line-height: 1;
  color: var(--text);
}
.logo span.accent { color: var(--crimson); }
.tagline {
  display: block;
  font-family: 'Barlow', sans-serif;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 2px;
}
nav.primary-nav {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
nav.primary-nav a {
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
}
nav.primary-nav a.active,
nav.primary-nav a:hover { color: var(--text); text-decoration: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 700;
  font-family: 'Barlow', sans-serif;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--crimson); color: #fff; }
.btn-primary:hover { background: var(--crimson-dark); color: #fff; }
.btn-outline { border-color: var(--line); color: var(--text); background: transparent; }
.btn-outline:hover { border-color: var(--brass); color: var(--text); }
.btn-block { width: 100%; }

/* Layout grid */
.page-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr) 300px;
  gap: 28px;
  padding: 40px 0;
}
.page-grid.no-right { grid-template-columns: 240px minmax(0, 1fr); }
.page-grid.center-only { grid-template-columns: minmax(0, 1fr); max-width: 720px; margin: 0 auto; }

.col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 20px;
}
.panel h2 {
  font-size: 15px;
  letter-spacing: 0.5px;
  color: var(--muted);
  margin-bottom: 14px;
}
.panel h2.title { font-size: 18px; color: var(--text); }

.link-list { display: flex; flex-direction: column; gap: 10px; }
.link-list a { font-size: 14px; font-weight: 500; color: var(--text); }
.link-list a:hover { color: var(--brass); }

.faction-list { display: flex; flex-direction: column; gap: 12px; }
.faction-list a { display: flex; align-items: center; gap: 10px; color: var(--text); }
.faction-list a:hover { text-decoration: none; }
.faction-list a:hover .faction-name { color: var(--brass); }
.faction-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.faction-name { font-size: 14px; font-weight: 600; display: block; }
.faction-count { font-size: 12px; color: var(--muted); display: block; }

/* Hero */
.hero { display: flex; flex-direction: column; gap: 16px; }
.hero h1 { font-size: 44px; line-height: 1.05; }
.hero p { font-size: 16px; line-height: 1.6; color: var(--muted); margin: 0; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 4px; }

/* Dispatch feed */
.dispatch { border-top: 1px solid var(--line); padding-top: 24px; }
.dispatch h2 { font-size: 18px; color: var(--text); margin-bottom: 12px; }
.dispatch-item { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.dispatch-item:last-child { border-bottom: none; }
.dispatch-date { flex: none; width: 78px; font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.dispatch-body { display: flex; flex-direction: column; gap: 4px; }
.dispatch-title { font-size: 15px; font-weight: 700; color: var(--text); }
.dispatch-blurb { font-size: 14px; line-height: 1.5; color: var(--muted); }

/* Stats */
.stat-row { display: flex; align-items: baseline; justify-content: space-between; }
.stat-row + .stat-row { margin-top: 14px; }
.stat-label { font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.stat-value { font-family: 'Anton', Impact, sans-serif; font-size: 22px; color: var(--text); }
.stat-value.big { font-size: 26px; }
.pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--green);
  display: inline-block; animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Forms */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 600; color: var(--muted); }
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field select {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 10px 12px;
  color: var(--text);
  font-size: 14px;
  font-family: 'Barlow', sans-serif;
  width: 100%;
}
.field-hint { font-size: 12px; color: var(--muted); margin-top: 4px; }
.form-foot { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; color: var(--muted); }

/* Join page faction picker: characters above a radio button for each faction */
.faction-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.faction-option {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 8px 12px; cursor: pointer;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px;
}
.faction-option:hover { border-color: var(--faction); }
.faction-option:has(input:checked) { border-color: var(--faction); box-shadow: 0 0 0 1px var(--faction) inset; }
.faction-option-choice { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.faction-option-choice input { accent-color: var(--faction); width: 16px; height: 16px; margin: 0; cursor: pointer; }

/* Pairs of pixel-art characters */
.faction-figures { display: flex; justify-content: center; gap: 6px; }
.faction-figures img { width: 50px; height: 150px; image-rendering: pixelated; display: block; }

.alert {
  border-radius: 3px;
  padding: 12px 14px;
  font-size: 14px;
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.alert-error { background: rgba(193, 39, 45, 0.12); border-color: var(--crimson); color: #F3B4B6; }
.alert-success { background: rgba(63, 191, 98, 0.12); border-color: var(--green); color: #B8EFC5; }

/* Dashboard */
.char-card { display: flex; align-items: center; gap: 14px; }
.char-badge {
  width: 48px; height: 48px; border-radius: 4px; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Anton', sans-serif; font-size: 20px; color: #fff;
}
.meter { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; height: 10px; overflow: hidden; margin-top: 6px; }
.meter-fill { height: 100%; }
.meter-fill.health { background: var(--crimson); }
.meter-fill.energy { background: var(--brass); }
.action-row { display: flex; gap: 12px; flex-wrap: wrap; }

table.leaderboard { width: 100%; border-collapse: collapse; }
table.leaderboard th, table.leaderboard td {
  text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: 14px;
}
table.leaderboard th { color: var(--muted); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
table.leaderboard tr:last-child td { border-bottom: none; }

.screenshot-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.screenshot-placeholder {
  background: var(--panel-2); border: 1px dashed var(--line); border-radius: 4px;
  aspect-ratio: 16 / 10; display: flex; align-items: center; justify-content: center;
  color: var(--muted); font-size: 13px; text-align: center; padding: 16px;
}

.prose { font-size: 15px; line-height: 1.7; color: var(--text); }
.prose p { margin: 0 0 16px 0; }
.prose h3 { font-size: 17px; margin: 24px 0 10px 0; }
.prose ul { padding-left: 20px; margin: 0 0 16px 0; }
.prose li { margin-bottom: 6px; }

/* Footer */
.site-footer {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding: 24px 0;
}
.site-footer .wrap {
  display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap;
}
.site-footer a, .site-footer span { font-size: 13px; color: var(--muted); }

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1 0 auto; width: 100%; }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
}

@media (max-width: 900px) {
  .page-grid, .page-grid.no-right { grid-template-columns: 1fr; }
  .hero h1 { font-size: 34px; }
  .screenshot-grid { grid-template-columns: 1fr; }
}

/* Page title banner: small pixel-art image with the title centred under it */
.page-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 4px 0 2px 0;
}
.page-banner-img {
  height: 72px;
  width: auto;
  image-rendering: pixelated;
}
.page-banner h1 {
  font-size: 30px;
  line-height: 1.1;
  color: var(--text);
}

/* Intro line at the top of a panel */
.panel-intro { font-size: 13px; color: var(--muted); margin: 0 0 16px 0; }

/* Navigation: current page + divider between game and site pages */
.link-list a.active { color: var(--brass); }
.link-list hr { border: 0; border-top: 1px solid var(--line); margin: 4px 0; width: 100%; }

/* News panel (right column) and News page */
.news-item { display: flex; flex-direction: column; gap: 2px; }
.news-item + .news-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.news-date { font-size: 12px; font-weight: 600; color: var(--muted); }
.news-title { font-size: 14px; font-weight: 600; color: var(--text); }
.news-title:hover { color: var(--brass); }
.news-more { display: inline-block; margin-top: 14px; font-size: 13px; font-weight: 600; }
.news-empty { font-size: 13px; color: var(--muted); margin: 0; }
.news-entry + .news-entry { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.news-entry h2.title { margin: 4px 0 8px 0; }
.news-entry p { margin: 0; font-size: 15px; line-height: 1.7; }
.col > .alert { margin-bottom: 0; }

/* Logged-in player menu: badge in the header, pop-over card on click */
.player-menu { position: relative; }
.player-menu > summary { list-style: none; cursor: pointer; width: 40px; height: 40px; font-size: 18px; user-select: none; }
.player-menu > summary::-webkit-details-marker { display: none; }
.player-menu > summary:hover, .player-menu[open] > summary { box-shadow: 0 0 0 2px var(--brass); }
.player-menu > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.player-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 50;
  width: 240px; max-width: calc(100vw - 32px); padding: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
.player-pop-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.player-pop-name { display: block; font-size: 16px; font-weight: 700; color: var(--text); }
.player-pop-faction { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
nav.primary-nav .player-pop a.btn { color: #fff; font-size: 14px; }

/* Disabled buttons, e.g. Rest while its timer runs */
.btn:disabled, .btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn-primary:disabled:hover { background: var(--crimson); }
.btn-timer { font-variant-numeric: tabular-nums; min-width: 130px; }

/* Crime list */
.crime-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.crime-info h2.title { margin: 0 0 4px 0; }
.crime-info p { margin: 0 0 8px 0; font-size: 13px; color: var(--muted); }
.crime-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; font-weight: 600; color: var(--brass); }
.crime-row form { flex: none; }
@media (max-width: 600px) {
  .crime-row { flex-direction: column; align-items: stretch; }
  .crime-row .btn { width: 100%; }
}

/* Death */
.dead-notice { border-color: var(--crimson); background: rgba(193, 39, 45, 0.08); }
.dead-notice h2.title { color: #F3B4B6; margin-bottom: 8px; }
.dead-notice p { margin: 0 0 16px 0; font-size: 14px; color: var(--text); }
.dead-flag {
  display: block; margin: -4px 0 16px 0; padding: 8px 10px; border-radius: 3px;
  background: var(--crimson); color: #fff; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: 0.5px;
}
.dead-flag:hover { background: var(--crimson-dark); color: #fff; text-decoration: none; }
.player-menu > summary.is-dead { filter: grayscale(1); opacity: 0.6; }
.player-pop-dead { display: inline-block; margin: 2px 0; padding: 1px 6px; border-radius: 3px; background: var(--crimson); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; }

/* Homepage: full-width call to action + faction boxes */
.btn-hero { padding: 14px 18px; font-size: 16px; }
.faction-pick { border-top: 1px solid var(--line); padding-top: 24px; }
.faction-pick h2 { font-size: 22px; color: var(--text); margin-bottom: 16px; text-align: center; }
.faction-boxes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.faction-box {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px;
  padding: 18px 12px; color: var(--text);
  background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--faction); border-radius: 4px;
}
.faction-box:hover { text-decoration: none; color: var(--text); border-color: var(--faction); }
.faction-box .faction-figures { margin-bottom: 6px; }
.faction-box-name { font-family: 'Anton', Impact, sans-serif; font-size: 20px; color: var(--faction); }
.faction-box-blurb { font-size: 13px; line-height: 1.5; color: var(--muted); }
@media (max-width: 600px) {
  .faction-boxes { grid-template-columns: 1fr; }
  .faction-picker { grid-template-columns: 1fr; }
}

/* Header: red Register button keeps white text (beats the muted nav-link colour) */
nav.primary-nav a.btn-primary, nav.primary-nav a.btn-primary:hover { color: #fff; }

/* Sidebar login box glow (header "Login" link, failed login) */
.login-box { transition: border-color 0.3s; }
.login-box.login-glow {
  border-color: var(--brass);
  animation: login-glow 2.4s ease-out 1;
}
@keyframes login-glow {
  0%   { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  15%  { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.9), 0 0 24px 6px rgba(201, 162, 39, 0.45); }
  60%  { box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.6), 0 0 16px 3px rgba(201, 162, 39, 0.25); }
  100% { box-shadow: 0 0 0 1px rgba(201, 162, 39, 0.5), 0 0 0 0 rgba(201, 162, 39, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .login-box.login-glow { animation: none; box-shadow: 0 0 0 2px var(--brass); }
}

/* Footer: "T&S | Contact | © 2026 Gang Wars", centred on one line */
.site-footer .wrap { gap: 12px; }
.site-footer .footer-sep { color: var(--line); }
.site-footer a:hover { color: var(--text); text-decoration: none; }

/* Register: male/female choice (filters the faction pictures below) */
.gender-picker { display: flex; gap: 10px; }
.gender-option {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; cursor: pointer; font-size: 14px; font-weight: 700; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px;
}
.gender-option:hover { border-color: var(--brass); }
.gender-option:has(input:checked) { border-color: var(--brass); box-shadow: 0 0 0 1px var(--brass) inset; }
.gender-option input { accent-color: var(--brass); width: 16px; height: 16px; margin: 0; cursor: pointer; }
form:has(input[name="gender"][value="m"]:checked) .faction-option img[data-gender="f"],
form:has(input[name="gender"][value="f"]:checked) .faction-option img[data-gender="m"] { display: none; }

/* Player panel: your character on the left of the health/energy meters */
.condition-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.condition-meters { flex: 1; min-width: 0; }
.condition-meters > div:last-child { margin-bottom: 0 !important; }
.player-figure { width: 50px; height: 150px; flex: none; image-rendering: pixelated; }
.player-figure.is-dead { filter: grayscale(1); opacity: 0.5; }

/* Player panel: Cash | Respect | Inventory in three columns with icons */
.player-stats {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px;
  border-top: 1px solid var(--line); padding-top: 14px;
}
.player-stat {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 4px; border-radius: 4px; text-align: center; color: var(--text);
}
.player-stat img { width: 24px; height: 24px; image-rendering: pixelated; }
.player-stat-icon { font-size: 22px; line-height: 24px; height: 24px; }
.player-stat-icon.icon-cash { color: var(--green); }
.player-stat-icon.icon-respect { color: #E3B521; }
.player-stat-icon.icon-bag { color: #9A6436; }
.player-stat-value { font-family: 'Anton', Impact, sans-serif; font-size: 18px; line-height: 1.1; color: var(--text); overflow-wrap: anywhere; }
.player-stat-label { margin-top: auto; padding-top: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.player-stat-link { border: 1px solid var(--line); }
.player-stat-link:hover { border-color: var(--brass); text-decoration: none; color: var(--text); }

/* Live stats: three counts on one row, then who's online */
.live-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; text-align: center; }
.live-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.live-stat-value { font-family: 'Anton', Impact, sans-serif; font-size: 22px; line-height: 1.1; color: var(--text); }
.live-stat-label { display: flex; align-items: center; gap: 5px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.faction-stats { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.faction-stats .live-stat { color: var(--text); border-radius: 3px; padding: 2px 0; }
.faction-stats .live-stat:hover { text-decoration: none; background: var(--panel-2); }
.faction-stats .live-stat-value { color: var(--faction); }
.faction-stats .faction-dot { width: 8px; height: 8px; background: var(--faction); }
.online-list { border-top: 1px solid var(--line); margin-top: 14px; padding-top: 12px; }
.online-list h3 { font-family: 'Barlow', sans-serif; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin: 0 0 8px 0; }
.online-list ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.online-list li a, .online-list li span {
  display: inline-block; padding: 3px 8px; border-radius: 3px; font-size: 13px; font-weight: 600; color: var(--text);
  background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--faction);
}
.online-list li a:hover { border-color: var(--faction); text-decoration: none; }
.online-list li span { cursor: default; }
table.leaderboard td a { color: var(--text); font-weight: 600; }
table.leaderboard td a:hover { color: var(--brass); }
.online-empty, .online-more { margin: 0; font-size: 13px; color: var(--muted); }
.online-more { margin-top: 8px; }

/* Player profile */
.profile-figure { width: 50px; height: 150px; image-rendering: pixelated; }
.profile-figure.is-dead { filter: grayscale(1); opacity: 0.5; }
.profile-rows .stat-row { padding: 4px 0; }
.profile-value { display: flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 700; color: var(--text); }
.profile-dead { color: #F3B4B6; }

/* Mobile burger menu (<= 900px): folds the left Navigation panel away.
   Burger sits to the left of the logo; hidden on desktop. */
.header-brand { display: flex; align-items: center; gap: 14px; }
.nav-toggle {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; flex: none;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; cursor: pointer;
}
.nav-toggle:hover { border-color: var(--brass); }
.nav-toggle-bar { display: block; height: 2px; width: 100%; background: var(--text); border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
body.nav-open .nav-toggle { border-color: var(--brass); }
body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .js .nav-panel { display: none; }
  .js body.nav-open .nav-panel { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-bar { transition: none; }
}
@media (max-width: 600px) {
  .wrap { padding: 0 16px; }
  .site-header .wrap { gap: 12px; padding-top: 14px; padding-bottom: 14px; flex-wrap: nowrap; }
  .header-brand { gap: 10px; min-width: 0; }
  .nav-toggle { width: 38px; height: 38px; padding: 0 9px; }
  body.nav-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .logo { font-size: 24px; gap: 7px; }
  .tagline { font-size: 9px; letter-spacing: 0.5px; }
  nav.primary-nav { gap: 12px; flex-wrap: nowrap; }
  nav.primary-nav a.btn { padding: 8px 12px; }
}

/* Phones (guests): no header Login link (the login box is on the page) and Register shortens to "Reg" */
.header-register .label-short { display: none; }
@media (max-width: 900px) {
  .header-login { display: none; }
  .header-register .label-full { display: none; }
  .header-register .label-short { display: inline; }
}

/* Phones: logged-in players' Live stats sits in the left column; once the
   columns stack, show it after the page content instead of above it. */
@media (max-width: 900px) {
  .page-grid { row-gap: 24px; }
  .page-grid > .col:first-child { display: contents; }
  .page-grid > .col:first-child > * { order: 0; }
  .page-grid > .col:nth-child(2) { order: 1; }
  .page-grid > .col:first-child > .live-stats-panel { order: 2; }
  .page-grid > .col:nth-child(3) { order: 3; }
}

/* Player panel meters (Health / Energy / XP), compact so all three sit
   beside the 150px-tall character */
.condition-meters { display: flex; flex-direction: column; gap: 12px; }
.cmeter-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.cmeter-label { font-size: 12px; color: var(--muted); }
.cmeter-level { margin-left: 4px; padding: 1px 5px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 11px; font-weight: 700; }
.cmeter-value { font-family: 'Anton', Impact, sans-serif; font-size: 15px; line-height: 1.2; color: var(--text); }
.condition-meters .meter { height: 8px; margin-top: 4px; }
.meter-fill.xp { background: var(--green); }

/* Player panel: "name | Faction LvN" on the heading line, right-aligned, in the faction colour */
.player-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.player-head h2 { margin-bottom: 0; flex: none; }
.player-ident .level-tag { margin: 0 2px 0 4px; }
.player-ident { min-width: 0; text-align: right; font-size: 14px; font-weight: 700; letter-spacing: 0.3px; overflow-wrap: anywhere; }

/* Header player menu: level next to the faction */
.player-pop-level { margin-left: 6px; padding: 1px 6px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); color: var(--text); font-size: 11px; font-weight: 700; }

/* Header player menu: Settings link above the Log out button */
.player-pop-link {
  display: block;
  margin: 0 -8px 10px -8px;
  padding: 8px;
  border-radius: 3px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
}
nav.primary-nav .player-pop a.player-pop-link { color: var(--text); }
nav.primary-nav .player-pop a.player-pop-link:hover {
  color: var(--brass);
  background: var(--panel-2);
  text-decoration: none;
}

/* Crimes above the player's level: greyed out with "Unlocks at level N" */
.crime-locked .crime-info { opacity: 0.55; }

/* City map: top-down street grid (city-map.php) */
.city-map-panel { padding: 16px; }
.city-map-panel .panel-intro { margin-bottom: 12px; }
.city-map { display: block; width: 100%; height: auto; border-radius: 3px; background: #232327; }
.city-map .map-road { fill: #232327; }
.city-map .map-line-ave { stroke: var(--brass); stroke-width: 1.5; stroke-dasharray: 10 8; opacity: 0.7; }
.city-map .map-line-st { stroke: #cfcfcf; stroke-width: 1.5; stroke-dasharray: 10 8; opacity: 0.45; }
.city-map .map-sidewalk { fill: #45454B; }
.city-map .map-street-name { font: 600 9px 'Barlow', sans-serif; fill: #8f8f94; letter-spacing: 0.5px; text-transform: uppercase; paint-order: stroke; stroke: #232327; stroke-width: 4px; }
.city-map .map-scenery-name { font: 700 11px 'Barlow', sans-serif; fill: #e6e4de; letter-spacing: 1px; text-transform: uppercase; paint-order: stroke; stroke: #1d3f26; stroke-width: 4px; }
.city-map .map-place { cursor: pointer; }
.city-map .map-place-frame { fill: none; stroke: transparent; stroke-width: 3; }
.city-map .map-sign { fill: rgba(11, 11, 13, 0.85); stroke: var(--line); stroke-width: 1; }
.city-map .map-sign-text { font: 700 13px 'Barlow', sans-serif; fill: var(--text); }
.city-map .map-place:hover .map-place-frame,
.city-map .map-place:focus-visible .map-place-frame { stroke: var(--brass); }
.city-map .map-place:hover .map-sign,
.city-map .map-place:focus-visible .map-sign { stroke: var(--brass); }
.city-map .map-place:hover .map-sign-text,
.city-map .map-place:focus-visible .map-sign-text { fill: var(--brass); }
.city-map .map-place:focus { outline: none; }

/* City map: list of places under the map */
.map-places { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.map-places a { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); color: var(--text); }
.map-places a:hover { border-color: var(--brass); text-decoration: none; }
.map-places img { width: 40px; height: 40px; flex: none; border-radius: 2px; }
.map-places-name { display: block; font-size: 14px; font-weight: 700; }
.map-places-blurb { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.map-places a:hover .map-places-name { color: var(--brass); }

/* "Back to the city map" link on building pages */
.back-to-map { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); align-self: flex-start; }
.back-to-map:hover { color: var(--brass); text-decoration: none; }

/* Turf Wars: crime-scene tape "Coming soon" */
.tape-scene {
  position: relative; overflow: hidden; height: 300px; padding: 0;
  background:
    radial-gradient(ellipse at 50% 55%, rgba(201, 162, 39, 0.08), transparent 60%),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(255, 255, 255, 0.03) 39px 40px),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(255, 255, 255, 0.03) 39px 40px),
    var(--panel);
}
.tape {
  position: absolute; left: -25%; width: 150%; height: 44px;
  display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap;
  background: #F2C200; color: #111;
  border-top: 4px solid #111; border-bottom: 4px solid #111;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  font-family: 'Anton', Impact, sans-serif; font-size: 20px; letter-spacing: 2px;
}
.tape > span { display: inline-block; flex: none; }
.tape span span { padding: 0 10px; font-size: 12px; vertical-align: middle; }
.tape-back { top: 70px; transform: rotate(9deg); background: #DDB000; }
.tape-front { top: 150px; transform: rotate(-7deg); z-index: 1; }
.tape-scene-sign {
  position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 2; margin: 0;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 3px; background: rgba(11, 11, 13, 0.85);
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.tape-scene-sign span { color: var(--brass); margin-right: 6px; }
@media (max-width: 600px) {
  .tape-scene { height: 240px; }
  .tape { height: 36px; font-size: 16px; }
  .tape-back { top: 55px; }
  .tape-front { top: 115px; }
}
.city-map .map-sign-text.map-sign-small { font-size: 11px; }
.map-places img { object-fit: cover; }

/* Bell menu (notifications) - header on desktop, bottom bar on phones */
.notif-menu { position: relative; }
.notif-menu > summary { list-style: none; cursor: pointer; user-select: none; }
.notif-menu > summary::-webkit-details-marker { display: none; }
.notif-menu--header { margin-right: -10px; }
.notif-menu--header > .notif-toggle {
  position: relative; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2);
}
.notif-menu--header > .notif-toggle:hover, .notif-menu--header[open] > .notif-toggle { border-color: var(--brass); }
.notif-menu > summary:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.notif-toggle img { width: 22px; height: 22px; }
.notif-count {
  position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: var(--crimson); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
  border: 2px solid var(--panel);
}
.notif-pop {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  width: 300px; max-width: calc(100vw - 32px); max-height: 380px; overflow-y: auto; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}
.notif-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 6px; }
.notif-empty { margin: 6px 0 2px; font-size: 13px; color: var(--muted); }
.notif-list { list-style: none; margin: 0; padding: 0; }
.notif-item + .notif-item { border-top: 1px solid var(--line); }
.notif-body { display: flex; gap: 10px; padding: 10px 6px; margin: 0 -6px; border-radius: 3px; color: var(--text); }
nav.primary-nav .notif-pop a.notif-body, .bottom-bar .notif-pop a.notif-body { color: var(--text); font-size: 13px; font-weight: 500; }
a.notif-body:hover { background: var(--panel-2); text-decoration: none; }
.notif-dot { flex: none; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%; background: var(--muted); }
.notif-level .notif-dot { background: var(--brass); }
.notif-death .notif-dot { background: var(--crimson); }
.notif-welcome .notif-dot { background: var(--green); }
.notif-msg { display: block; font-size: 13px; line-height: 1.4; }
.notif-time { display: block; margin-top: 2px; font-size: 11px; color: var(--muted); }
.notif-item.is-unread .notif-msg { font-weight: 700; }
.notif-item.is-unread .notif-body { background: rgba(201, 162, 39, 0.07); }

/* Phones: bottom menu bar (logged in) - Home, Crime, City, Alerts */
.bottom-bar { display: none; }
@media (max-width: 900px) {
  .notif-menu--header { display: none; }
  body.has-bottom-bar { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .bottom-bar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    height: calc(60px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
    background: var(--panel); border-top: 1px solid var(--line); box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.4);
  }
  .bottom-bar > a, .bottom-bar > .notif-menu > summary {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    height: 60px; color: var(--muted); position: relative;
  }
  .bottom-bar > .notif-menu { flex: 1; display: flex; }
  .bottom-bar > a:hover { text-decoration: none; color: var(--text); }
  .bottom-bar > a.active, .bottom-bar > .notif-menu[open] > summary { color: var(--brass); box-shadow: inset 0 2px 0 var(--brass); }
  .bottom-bar img { width: 22px; height: 22px; }
  .bottom-bar-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
  .bottom-bar .notif-count { top: 6px; right: calc(50% - 22px); }
  .bottom-bar .notif-pop {
    position: fixed; left: 12px; right: 12px; top: auto; bottom: calc(68px + env(safe-area-inset-bottom));
    width: auto; max-width: none; max-height: 60vh;
  }
}

/* Dashboard: character header, next unlock, Ready now */
.dash-hero { display: flex; gap: 22px; align-items: center; }
.dash-figure { width: 60px; height: 180px; flex: none; image-rendering: pixelated; }
.dash-figure.is-dead { filter: grayscale(1); opacity: 0.5; }
.dash-hero-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.dash-name { font-size: 26px; margin: 0; }
.dash-meta { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: -6px; }
.dash-meter { height: 12px; margin-top: 6px; }
.dash-xp-next { margin-top: 6px; font-size: 12px; color: var(--muted); }
.dash-unlock { padding: 10px 12px; border: 1px dashed var(--line); border-radius: 3px; font-size: 13px; color: var(--text); }
.dash-unlock-tag { display: inline-block; margin-right: 8px; padding: 1px 6px; border-radius: 3px; background: var(--brass); color: #111; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.ready-list { list-style: none; margin: 0; padding: 0; }
.ready-list li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 0; font-size: 14px; }
.ready-list li + li { border-top: 1px solid var(--line); }
.ready-list li > span:first-child { font-weight: 600; }
.ready-yes, .ready-wait.is-ready { color: var(--green); font-weight: 700; }
a.ready-yes:hover { text-decoration: underline; }
.ready-wait { color: var(--muted); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.ready-no { color: #F3B4B6; font-size: 13px; font-weight: 600; text-align: right; }
@media (max-width: 600px) {
  .dash-hero { gap: 16px; align-items: flex-start; }
  .dash-figure { width: 44px; height: 132px; }
  .dash-name { font-size: 22px; }
  .ready-list li { flex-direction: column; gap: 2px; }
  .ready-wait, .ready-no { text-align: left; }
}
.city-map .map-sign-text.map-sign-tiny { font-size: 10px; }

/* Items: shop, equipment slots, bag */
.item-icon { image-rendering: pixelated; flex: none; }
.btn-small { padding: 6px 10px; font-size: 12px; }
.item-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; vertical-align: middle; }
.item-tag-weapon { background: rgba(193, 39, 45, 0.18); color: #F3B4B6; }
.item-tag-armour { background: rgba(62, 122, 168, 0.22); color: #A9CBE6; }
.item-tag-consumable { background: rgba(31, 138, 112, 0.22); color: #9FE0CC; }

.shop-summary { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.shop-summary strong { color: var(--text); }
.shop-list { list-style: none; margin: 0; padding: 0; }
.shop-item { display: flex; align-items: center; gap: 14px; padding: 14px 0; }
.shop-item + .shop-item { border-top: 1px solid var(--line); }
.shop-item .item-icon { width: 48px; height: 48px; padding: 4px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; box-sizing: content-box; }
.shop-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.shop-item-name { font-size: 15px; font-weight: 700; }
.shop-item-desc { font-size: 13px; color: var(--muted); }
.shop-buy { display: flex; align-items: center; gap: 12px; flex: none; }
.shop-price { font-family: 'Anton', Impact, sans-serif; font-size: 18px; }
@media (max-width: 600px) {
  .shop-item { flex-wrap: wrap; }
  .shop-buy { width: 100%; justify-content: space-between; padding-left: 62px; }
}

.gear-board { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; }
.gear-col { display: flex; flex-direction: column; gap: 10px; }
.gear-figure { display: flex; justify-content: center; padding: 0 6px; }
.gear-figure-img { width: 70px; height: 210px; image-rendering: pixelated; }
.gear-figure-img.is-dead { filter: grayscale(1); opacity: 0.5; }
.gear-slot {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto auto; column-gap: 10px; align-items: center;
  min-height: 58px; padding: 8px 10px; border: 1px dashed var(--line); border-radius: 3px; background: var(--panel-2);
}
.gear-slot.is-filled { border-style: solid; }
.gear-slot-label { grid-column: 1 / -1; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 4px; }
.gear-slot .item-icon { grid-row: span 2; width: 40px; height: 40px; }
.gear-slot-name { font-size: 13px; font-weight: 700; }
.gear-slot-stat { font-size: 12px; color: var(--brass); font-weight: 600; }
.gear-slot form { grid-column: 1 / -1; margin-top: 6px; }
.gear-slot form .btn { width: 100%; }
.gear-slot-empty { grid-column: 1 / -1; font-size: 12px; color: var(--muted); }
.gear-totals { display: flex; justify-content: center; gap: 28px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
.gear-totals strong { font-family: 'Anton', Impact, sans-serif; font-size: 22px; color: var(--text); margin-right: 4px; letter-spacing: 0; }
.gear-note { margin: 10px 0 0; font-size: 12px; color: var(--muted); text-align: center; }

.bag-head { display: flex; align-items: baseline; justify-content: space-between; }
.bag-head h2 { margin-bottom: 14px; }
.bag-count { font-size: 13px; font-weight: 700; color: var(--muted); }
.bag-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.bag-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 96px; padding: 8px 6px;
  border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2); text-align: center;
}
.bag-cell.is-empty { border-style: dashed; background: transparent; }
.bag-name { font-size: 12px; font-weight: 700; line-height: 1.2; }
.bag-stat { font-size: 11px; color: var(--brass); font-weight: 600; }
.bag-actions { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.bag-actions .btn { width: 100%; padding: 5px 4px; font-size: 11px; }
@media (max-width: 1100px) { .bag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .gear-board { grid-template-columns: 1fr 1fr; }
  .gear-figure { grid-column: 1 / -1; order: -1; }
  .gear-figure-img { width: 50px; height: 150px; }
}
.notif-purchase .notif-dot { background: #3E7AA8; }

/* Small rounded level tag after a player's name (leaderboard) */
.level-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); color: var(--brass); font-size: 11px; font-weight: 700; line-height: 1.5; vertical-align: middle; }

/* Screenshots page */
.screenshot { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.screenshot a { display: block; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.screenshot a:hover { border-color: var(--brass); }
.screenshot img { display: block; width: 100%; height: auto; }
.screenshot figcaption strong { display: block; font-size: 14px; color: var(--text); }
.screenshot figcaption span { display: block; font-size: 12px; color: var(--muted); line-height: 1.4; margin-top: 2px; }

/* The Alley: scene with your character (left) and whoever you run into (right) */
.alley-panel { padding: 16px; }
.alley-hud { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.alley-hud-side { flex: 0 1 45%; display: flex; flex-direction: column; gap: 4px; }
.alley-hud-enemy { text-align: right; }
.alley-hud-name { font-size: 14px; font-weight: 700; }
.alley-hud-stat { font-size: 12px; color: var(--muted); }
.alley-hud .meter { height: 8px; margin-top: 0; }
.alley-hud-enemy .meter { transform: scaleX(-1); }
.alley-scene { position: relative; aspect-ratio: 2 / 1; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); background: #10131C; }
.alley-bg { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.alley-figure { position: absolute; bottom: 4%; height: 62%; width: auto; image-rendering: pixelated; }
.alley-player { left: 8%; }
.alley-player.is-dead { filter: grayscale(1); opacity: 0.6; transform-origin: bottom left; transform: translateY(-34%) rotate(90deg); bottom: 2%; }   /* knocked flat on the ground, head to the right */
.alley-enemy { right: 8%; }
.alley-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.alley-actions form { margin: 0; }
.alley-note { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.alley-note strong { color: var(--text); }
@media (max-width: 600px) {
  .alley-actions > * { flex: 1; }
  .alley-actions .btn { width: 100%; }
}

/* ---------- Admin ---------- */
.admin-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.admin-head h1 { margin: 0; }
.admin-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-tabs a { padding: 6px 14px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); text-decoration: none; font-size: 14px; }
.admin-tabs a:hover { color: var(--text); border-color: var(--muted); }
.admin-tabs a.active { background: var(--crimson); border-color: var(--crimson); color: #fff; }
.admin-muted { color: var(--muted); }
.admin-nowrap { white-space: nowrap; }
.admin-help { font-size: 13px; }
.admin-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.admin-stat { background: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.admin-stat-value { font-size: 22px; font-weight: 700; color: var(--brass); }
.admin-stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); padding: 6px 8px; white-space: nowrap; }
.admin-table td { border-bottom: 1px solid var(--line); padding: 6px 8px; vertical-align: middle; }
.admin-table tr:last-child td { border-bottom: 0; }
.admin-table a { color: var(--text); }
.admin-table form { margin: 0; }
.admin-new { animation: admin-flash 2.5s ease-out; }
@keyframes admin-flash { from { background: rgba(201, 162, 39, .25); } to { background: transparent; } }
.log-type { display: inline-block; white-space: nowrap; font-size: 11px; padding: 1px 6px; border-radius: 3px; background: var(--line); color: var(--text); text-transform: uppercase; letter-spacing: .04em; }
.log-login, .log-register { background: rgba(63, 191, 98, .2); color: var(--green); }
.log-login-failed, .log-lockout, .log-death { background: rgba(193, 39, 45, .25); color: #ff8a8f; }
.log-admin { background: rgba(201, 162, 39, .25); color: var(--brass); }
.admin-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.admin-filter label { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 14px; }
.admin-filter input[type=search] { flex: 1 1 200px; }
.admin-clear { font-size: 14px; color: var(--muted); }
.admin-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--green); }
.admin-live.is-paused { color: var(--muted); }
.admin-live.is-paused .pulse-dot { animation: none; opacity: .4; }
.admin-badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 3px; margin-left: 4px; text-transform: uppercase; letter-spacing: .04em; vertical-align: middle; }
.admin-badge-admin { background: rgba(201, 162, 39, .25); color: var(--brass); }
.admin-badge-ban { background: var(--crimson); color: #fff; }
.admin-badge-dead { background: var(--line); color: var(--muted); }
.admin-player-head { display: flex; gap: 16px; align-items: center; }
.admin-figure { width: 64px; height: auto; image-rendering: pixelated; flex: none; }
.admin-ban-note { margin: 8px 0 0; color: #ff8a8f; font-size: 14px; }
.admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.admin-form { margin: 0 0 12px; }
.admin-inline { display: flex; gap: 8px; flex-wrap: wrap; }
.admin-inline input, .admin-inline select { flex: 1 1 160px; min-width: 0; }
.admin-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.admin-fields label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); }
.admin-items { list-style: none; margin: 0 0 12px; padding: 0; }
.admin-items li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.admin-items li span { flex: 1; }
.admin-pager { display: flex; gap: 16px; justify-content: center; margin-top: 12px; }
.footer-admin { color: var(--brass); }
.admin input[type=text], .admin input[type=number], .admin input[type=search], .admin select {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px;
  color: var(--text); font-size: 14px; font-family: 'Barlow', sans-serif; width: 100%;
}
.admin-filter select, .admin-filter input[type=search] { width: auto; }

/* ---------- News / chat tabs (right sidebar, logged in) ---------- */
.chat-tabs { display: none; gap: 4px; margin: -4px 0 14px; border-bottom: 1px solid var(--line); }
.js .chat-tabs { display: flex; }
.chat-tab { position: relative; flex: 1; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 4px; color: var(--muted); font: 600 13px 'Barlow', sans-serif; letter-spacing: .3px; cursor: pointer; }
.chat-tab:hover { color: var(--text); }
.chat-tab.active { color: var(--brass); border-bottom-color: var(--brass); }
.chat-dot { display: none; position: absolute; top: 6px; margin-left: 3px; width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); }
.chat-tab.has-new .chat-dot { display: inline-block; }
.js .chat-pane { display: none; }
.js .chat-pane.active { display: block; }
.chat-pane + .chat-pane { margin-top: 18px; }
.js .chat-pane + .chat-pane { margin-top: 0; }
.js .chat-pane-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.chat-note { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.chat-log { list-style: none; margin: 0; padding: 0 2px 0 0; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.chat-line { position: relative; font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; padding-left: 8px; border-left: 2px solid var(--faction, var(--line)); padding-right: 18px; }
.chat-time { font-size: 11px; color: var(--muted); }
.chat-name { font-weight: 700; color: var(--faction, var(--text)); }
a.chat-name:hover { text-decoration: underline; }
.chat-text { color: var(--text); }
.chat-del { position: absolute; top: 0; right: 0; margin: 0; }
.chat-del button { background: none; border: 0; padding: 0 2px; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; }
.chat-del button:hover { color: var(--crimson); }
.chat-empty { font-size: 13px; color: var(--muted); margin: 0; }
.chat-form { display: flex; gap: 6px; margin-top: 10px; }
.chat-form input[type=text] { flex: 1; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; color: var(--text); font: 14px 'Barlow', sans-serif; }
.chat-form button { flex: none; min-width: 62px; }
.chat-error { font-size: 12px; color: #ff8a8f; margin: 6px 0 0; }
.admin-words { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.admin-words li { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border: 1px solid var(--line); border-radius: 999px; font-size: 13px; background: var(--ink); }
.admin-words form { margin: 0; }
.admin-words button { background: none; border: 0; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 4px; }
.admin-words button:hover { color: var(--crimson); }
.log-chat { background: rgba(62, 122, 168, .22); color: #A9CBE6; }

/* ---------- Turf Wars map ---------- */
.turf-map { display: block; width: 100%; height: auto; border-radius: 4px; border: 1px solid var(--line); background: #1d3a4f; }
.turf-district { cursor: pointer; }
.turf-fill { fill-opacity: .62; transition: fill-opacity .15s; }
.turf-tex { pointer-events: none; }
.turf-edge { stroke: #0B0B0D; stroke-width: 2; stroke-linejoin: round; pointer-events: none; }
.turf-district:hover .turf-fill, .turf-district:focus .turf-fill { fill-opacity: .85; }
.turf-district.is-hq .turf-fill { fill-opacity: .85; }
.turf-outline { pointer-events: none; stroke-linejoin: round; }
.turf-outline.is-hq { stroke-width: 3.5; }
.turf-outline.is-centre { stroke: var(--brass); stroke-width: 3; stroke-dasharray: 7 4; }
.turf-outline.is-selected { stroke: #fff !important; stroke-width: 3.5; stroke-dasharray: none; }
.turf-district:focus { outline: none; }
.turf-district:focus-visible .turf-edge { stroke: #fff; stroke-width: 3; }
.turf-river { fill: none; stroke: #2D5F86; stroke-width: 11; stroke-linejoin: round; stroke-linecap: round; pointer-events: none; }
.turf-river-shine { fill: none; stroke: #3E7AA8; stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 10 14; pointer-events: none; }
.turf-labels { pointer-events: none; }
.turf-label { font: 600 11px 'Barlow', sans-serif; fill: #fff; text-anchor: middle; paint-order: stroke; stroke: #0B0B0D; stroke-width: 3px; stroke-linejoin: round; letter-spacing: .2px; }
.turf-label-big { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.turf-hq-star { fill: #fff; stroke: #0B0B0D; stroke-width: 1.5; }
.turf-crown { fill: var(--brass); stroke: #0B0B0D; stroke-width: 1.5; stroke-linejoin: round; }
.turf-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--muted); }
.turf-legend li { display: inline-flex; align-items: center; gap: 6px; }
.turf-legend strong { color: var(--text); }
.turf-legend li.is-mine { color: var(--text); }
.turf-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid #0B0B0D; }
.turf-key-star { color: #fff; }
.turf-owner { font-size: 15px; margin: 0 0 10px; }
.turf-owner span { font-weight: 700; }
.turf-soon { margin: 12px 0 0; font-size: 12px; font-weight: 600; color: var(--brass); text-transform: uppercase; letter-spacing: .6px; }
@media (max-width: 600px) { .turf-label { font-size: 13px; } .turf-label-big { font-size: 14px; } }

/* Quantities: Convenience store picker, bag stack counts */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.shop-price small { font-size: 11px; font-weight: 600; color: var(--muted); }
.shop-qty input { width: 58px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 8px 6px; color: var(--text); font: 600 14px 'Barlow', sans-serif; text-align: center; }
.shop-qty input:disabled { opacity: .5; }
.bag-cell { position: relative; }
.bag-qty { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 999px; background: var(--ink); border: 1px solid var(--line); color: var(--brass); font-size: 12px; font-weight: 700; line-height: 1.4; }
.shop-stack { color: var(--brass); font-weight: 700; }

/* Hiding (Safehouse) */
.hide-panel.is-hiding { border-color: #3E7AA8; background: rgba(62, 122, 168, 0.07); }
.hide-status { margin: 0 0 10px; font-size: 15px; }
.hide-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #6FA8D6; margin-right: 4px; vertical-align: middle; }
.hide-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hide-actions form { margin: 0; }
.hide-flag { display: block; margin: -4px 0 16px 0; padding: 8px 10px; border-radius: 3px; background: #2D5F86; color: #fff; font-size: 13px; font-weight: 700; text-align: center; letter-spacing: 0.5px; }
.hide-flag:hover { background: #3E7AA8; color: #fff; text-decoration: none; }
.profile-hiding { display: inline-block; padding: 1px 8px; border-radius: 3px; background: #2D5F86; color: #fff; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Crown Tower pop-up (City Map) ---------- */
.tower-modal { display: none; position: fixed; inset: 0; z-index: 200; align-items: center; justify-content: center; padding: 16px; }
html:not(.js) .tower-modal:target, .tower-modal.is-open { display: flex; }
.tower-backdrop { position: absolute; inset: 0; background: rgba(5, 5, 7, .78); cursor: default; }
.tower-box { position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px 20px; box-shadow: 0 20px 60px rgba(0,0,0,.6); }
.tower-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tower-head h2 { margin: 0; }
.tower-close { font-size: 26px; line-height: 1; color: var(--muted); text-decoration: none; padding: 0 4px; }
.tower-close:hover { color: var(--text); text-decoration: none; }
body.tower-lock { overflow: hidden; }
.tower { margin: 6px auto 0; max-width: 340px; }
.tower-roof { position: relative; height: 34px; margin: 0 14px; background: #2A2A2E; border: 2px solid #0B0B0D; border-bottom: 0; }
.tower-helipad { position: absolute; left: 50%; top: 5px; transform: translateX(-50%); width: 46px; height: 22px; border-radius: 50%; border: 2px solid var(--brass); color: var(--brass); font: 700 13px/18px 'Barlow', sans-serif; text-align: center; background: #1D1D21; }
.tower-mast { position: absolute; right: 18px; bottom: 34px; width: 3px; height: 22px; background: #6E6E74; }
.tower-mast::after { content: ''; position: absolute; top: -4px; left: -2px; width: 7px; height: 7px; border-radius: 50%; background: var(--crimson); box-shadow: 0 0 8px var(--crimson); animation: pulse 1.6s infinite; }
.tower-floors { list-style: none; margin: 0; padding: 0; border: 2px solid #0B0B0D; background: #3B4A5A; }
.tower-floor { display: flex; align-items: stretch; height: 38px; border-top: 2px solid #22262E; color: var(--muted); text-decoration: none; }
.tower-floors li:first-child .tower-floor { border-top: 0; }
.tower-floor.is-cont { border-top-color: transparent; }
.tower-level { flex: none; width: 34px; display: flex; align-items: center; justify-content: center; background: #2A2E36; font: 700 12px 'Barlow', sans-serif; color: var(--muted); border-right: 2px solid #22262E; }
.tower-windows { flex: 1; background:
  repeating-linear-gradient(90deg, transparent 0 6px, #22262E 6px 8px),
  linear-gradient(180deg, #4F6377 0 40%, #3B4A5A 40% 100%); }
.tower-floor.is-place .tower-windows { background:
  repeating-linear-gradient(90deg, transparent 0 6px, #22262E 6px 8px),
  linear-gradient(180deg, #E8C96A 0 40%, #B8952E 40% 100%); }
.tower-plate { flex: none; width: 52%; display: flex; flex-direction: column; justify-content: center; padding: 0 10px; background: #1D1D21; border-left: 2px solid #22262E; }
.tower-name { font: 600 13px 'Barlow', sans-serif; color: var(--muted); }
.tower-note { font-size: 11px; color: #6E6E74; }
.tower-floor.is-place .tower-name { color: var(--brass); font-weight: 700; }
.tower-floor.is-place .tower-note { color: var(--muted); }
.tower-floor.is-place:hover .tower-plate, .tower-floor.is-place:focus-visible .tower-plate { background: #2A2410; }
.tower-floor.is-place:hover .tower-name { color: #F2D46B; }
.tower-floor.is-place:hover { text-decoration: none; }
.tower-plate-cont { background: #1D1D21; }
.tower-floor.is-lobby .tower-windows { background: repeating-linear-gradient(90deg, #6F8FA8 0 22px, #22262E 22px 25px); }
.tower-street { height: 10px; margin: 0 -14px; background: #55555B; border-top: 2px solid #0B0B0D; }

/* Bank */
.bank-balances { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bank-balance { display: flex; flex-direction: column; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--ink); }
.bank-balance.is-safe { border-color: rgba(201, 162, 39, .5); }
.bank-label { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.bank-value { font-size: 24px; font-weight: 700; color: var(--text); }
.bank-balance.is-safe .bank-value { color: var(--brass); }
.bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bank-form { display: flex; flex-direction: column; gap: 10px; }
.bank-input { display: flex; align-items: center; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 0 10px; }
.bank-input span { color: var(--muted); font-weight: 700; }
.bank-input input { flex: 1; min-width: 0; background: none; border: 0; padding: 10px 6px; color: var(--text); font: 600 16px 'Barlow', sans-serif; outline: none; }
.bank-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) { .bank-grid { grid-template-columns: 1fr; } .bank-value { font-size: 20px; } }

/* ---------- Casino: blackjack ---------- */
.bj-table { background: radial-gradient(ellipse at 50% 0%, #1F6B3A 0%, #164D2A 55%, #10361F 100%); border-color: #2B8A4C; }
.bj-table .panel-intro, .bj-table h2 { color: #E6E4DE; }
.bj-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.bj-head h2 { margin: 0; }
.bj-cash { font-size: 13px; color: #CFE8D6; }
.bj-cash strong { color: var(--brass); }
.bj-hand { margin: 12px 0 16px; }
.bj-label { display: flex; align-items: center; gap: 8px; font: 700 13px 'Barlow', sans-serif; color: #CFE8D6; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 8px; }
.bj-total { display: inline-block; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; text-align: center; }
.bj-bet { margin-left: auto; color: var(--brass); text-transform: none; letter-spacing: 0; }
.bj-cards { display: flex; gap: 8px; flex-wrap: wrap; min-height: 92px; }
.card { position: relative; width: 62px; height: 88px; border-radius: 6px; background: #FBFAF6; border: 1px solid #CFCBBF; box-shadow: 0 3px 8px rgba(0,0,0,.35); color: #141416; font-family: 'Barlow', sans-serif; }
.card-red { color: #C1272D; }
.card-rank { position: absolute; top: 4px; left: 6px; font-size: 18px; font-weight: 700; line-height: 1; }
.card-suit { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 30px; padding-top: 10px; }
.card-back { background: repeating-linear-gradient(45deg, #8F1D22 0 6px, #C1272D 6px 12px); border: 3px solid #FBFAF6; }
.bj-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.bj-result { margin: 4px 0 14px; padding: 10px 12px; border-radius: 4px; font-weight: 700; font-size: 16px; display: flex; justify-content: space-between; gap: 10px; background: rgba(0,0,0,.35); }
.bj-result.bj-win { color: #9BE3B0; border: 1px solid #3FBF62; }
.bj-result.bj-lose { color: #F3B4B6; border: 1px solid var(--crimson); }
.bj-result.bj-push { color: #E6E4DE; border: 1px solid #6E6E74; }
.bj-bet-form label { display: block; font-size: 12px; font-weight: 700; color: #CFE8D6; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.bj-bet-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bj-bet-row .bank-input { flex: 1 1 140px; max-width: 220px; }
.bj-limits { font-size: 12px; color: #CFE8D6; margin: 8px 0 0; }
@media (max-width: 600px) { .card { width: 52px; height: 74px; } .card-rank { font-size: 15px; } .card-suit { font-size: 24px; } }

/* ---------- Mercer Mall pop-up (City Map) ---------- */
.mall-box { max-width: 820px; }
.mall { overflow-x: auto; padding-bottom: 4px; }
.mall-roof { min-width: 640px; height: 26px; background: #2A2A2E; border: 2px solid #0B0B0D; border-bottom: 0; display: flex; align-items: center; justify-content: center; }
.mall-roof span { font: 700 12px 'Barlow', sans-serif; letter-spacing: 3px; color: var(--brass); }
.mall-units { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(104px, 1fr)); min-width: 640px; border: 2px solid #0B0B0D; border-top: 0; background: #4A4A50; }
.mall-units li { display: flex; border-left: 2px solid #0B0B0D; }
.mall-units li:first-child { border-left: 0; }
.mall-unit { flex: 1; display: flex; flex-direction: column; text-decoration: none; color: var(--muted); background: #5C5C64; }
a.mall-unit:hover { text-decoration: none; }
.mall-sign { display: block; margin: 8px 6px 0; padding: 4px 2px; text-align: center; font: 700 11px 'Barlow', sans-serif; text-transform: uppercase; letter-spacing: .5px; color: #fff; background: var(--shop, #3A3A40); border: 2px solid #0B0B0D; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mall-awning { display: block; height: 12px; margin-top: 6px; background: repeating-linear-gradient(90deg, var(--shop, #6E6E74) 0 10px, #E6E4DE 10px 20px); border-bottom: 2px solid #0B0B0D; }
.mall-front { display: flex; gap: 6px; padding: 8px 8px 0; height: 84px; }
.mall-window { flex: 1; display: flex; align-items: center; justify-content: center; background: #3B4A5A; border: 2px solid #22262E; }
.mall-window img { width: 34px; height: 34px; image-rendering: pixelated; opacity: .9; }
.mall-door { flex: none; width: 24px; background: #26364a; border: 2px solid #22262E; border-bottom: 0; }
.mall-unit.is-shop .mall-door { background: linear-gradient(180deg, #F5E7A1 0 70%, #C9A227 70% 100%); }
.mall-label { margin-top: auto; display: flex; flex-direction: column; gap: 1px; padding: 8px 8px 10px; background: #1D1D21; border-top: 2px solid #0B0B0D; min-height: 52px; }
.mall-name { font: 700 13px 'Barlow', sans-serif; color: var(--muted); }
.mall-note { font-size: 11px; color: #6E6E74; }
.mall-unit.is-shop .mall-name, .mall-unit.is-alley .mall-name { color: var(--brass); }
.mall-unit.is-shop .mall-note, .mall-unit.is-alley .mall-note { color: var(--muted); }
a.mall-unit:hover .mall-label, a.mall-unit:focus-visible .mall-label { background: #2A2410; }
a.mall-unit:hover .mall-name { color: #F2D46B; }
a.mall-unit:hover .mall-window { background: #4F6377; }
.mall-unit.is-empty { background: #4A4A50; }
.mall-unit.is-empty .mall-window { background: repeating-linear-gradient(-30deg, #7A5230 0 8px, #5A3A20 8px 10px); }
.mall-unit.is-empty .mall-sign { background: #3A3A40; color: #9B9B9E; }
.mall-unit.is-alley { background: #1C1C20; }
.mall-alley-art { position: relative; display: block; flex: 1; min-height: 120px; background: linear-gradient(180deg, #141418 0 40%, #1C1C20 40% 100%); }
.mall-alley-art::before { content: ''; position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: 10px; height: 6px; background: #F2D46B; box-shadow: 0 6px 18px rgba(242, 212, 107, .45); }
.mall-dumpster { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); width: 46px; height: 26px; background: #2F5E3A; border: 2px solid #0B0B0D; border-top: 6px solid #3E7A4C; }
a.mall-unit.is-alley:hover .mall-alley-art { background: linear-gradient(180deg, #1A1A20 0 40%, #24242A 40% 100%); }
.mall-pavement { min-width: 640px; height: 10px; background: #55555B; border: 2px solid #0B0B0D; border-top: 0; }

.mall-swipe { display: none; margin: 8px 0 0; font-size: 12px; color: var(--muted); text-align: right; }
@media (max-width: 700px) { .mall-swipe { display: block; } }

/* Bank balance: hidden until you hover (or tab to) the Cash box */
.player-stat-link[href="/bank.php"], .player-stat-link[href="/agency.php"] { position: relative; }
.player-stat-bank {
  position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); z-index: 5;
  padding: 4px 8px; border: 1px solid var(--line); border-radius: 3px; background: var(--panel-2);
  font-size: 12px; font-weight: 700; color: var(--brass); line-height: 1.2; white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s;
}
.player-stat-link:hover .player-stat-bank, .player-stat-link:focus-visible .player-stat-bank { opacity: 1; visibility: visible; }

/* Settings: email + referrals */
.field-optional { font-weight: 400; color: #6E6E74; }
.field input[readonly] { color: var(--muted); cursor: default; }
.field input:disabled { opacity: .75; }
.ref-by { font-size: 14px; color: var(--text); margin-top: 2px; }
.ref-by a, .ref-by span { color: var(--brass); font-weight: 700; }
.ref-share { margin-top: 6px; padding: 14px; border: 1px dashed rgba(201, 162, 39, .5); border-radius: 4px; background: rgba(201, 162, 39, .05); }
.ref-share-title { margin: 0 0 10px; font-weight: 700; color: var(--brass); }
.ref-code-row { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.ref-code-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.ref-code { font-family: 'Anton', Impact, sans-serif; font-size: 28px; line-height: 1; color: var(--text); letter-spacing: 1px; }
.ref-link-row { display: flex; gap: 8px; }
.ref-link-row input { flex: 1; min-width: 0; }

/* Broadcast notifications: site news (gold) and faction messages (faction colour) */
.notif-tag { display: inline-block; margin-bottom: 3px; padding: 1px 6px; border-radius: 3px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; }
.notif-broadcast .notif-body { background: rgba(63, 191, 98, 0.13); border-left: 3px solid var(--green); }
.notif-broadcast .notif-dot { background: var(--green); }
.notif-broadcast .notif-tag { background: var(--green); color: #0B0B0D; }
.notif-broadcast .notif-msg { color: #CDEFD7; }
.notif-faction-bloodz .notif-body { background: rgba(193, 39, 45, 0.16); border-left: 3px solid #C1272D; }
.notif-faction-bloodz .notif-dot, .notif-faction-bloodz .notif-tag { background: #C1272D; }
.notif-faction-bloodz .notif-msg { color: #F6C6C8; }
.notif-faction-crips .notif-body { background: rgba(52, 87, 166, 0.20); border-left: 3px solid #3457A6; }
.notif-faction-crips .notif-dot, .notif-faction-crips .notif-tag { background: #3457A6; }
.notif-faction-crips .notif-msg { color: #C7D4F2; }
.notif-faction-mafia .notif-body { background: rgba(201, 162, 39, 0.13); border-left: 3px solid #C9A227; }
.notif-faction-mafia .notif-dot, .notif-faction-mafia .notif-tag { background: #C9A227; }
.notif-faction-mafia .notif-msg { color: #E8D9A8; }
.notif-faction-bloodz .notif-tag, .notif-faction-crips .notif-tag { color: #fff; }
.notif-faction-mafia .notif-tag { color: #0B0B0D; }
.notif-item.is-unread.notif-broadcast .notif-body, .notif-item.is-unread[class*="notif-faction-"] .notif-body { box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
/* Admin broadcast form */
.bc-audience { border: 0; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.bc-audience legend { font-size: 13px; margin-bottom: 6px; }
.bc-option { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 4px; cursor: pointer; font-size: 14px; }
.bc-option:has(input:checked) { border-color: var(--green); background: rgba(63, 191, 98, .10); }
.bc-faction-bloodz:has(input:checked) { border-color: #C1272D; background: rgba(193, 39, 45, .12); }
.bc-faction-crips:has(input:checked) { border-color: #3457A6; background: rgba(52, 87, 166, .15); }
.bc-faction-mafia:has(input:checked) { border-color: #C9A227; background: rgba(201, 162, 39, .12); }
.bc-label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); margin-bottom: 12px; }
.bc-label textarea { background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; color: var(--text); font: 14px 'Barlow', sans-serif; resize: vertical; }
.bc-preview-wrap { margin: 4px 0 14px; max-width: 340px; font-size: 13px; }
.bc-preview { list-style: none; margin-top: 6px; }
.bc-preview .notif-body { margin: 0; }

/* ---------- Turf Wars battles ---------- */
.turf-outline.is-battle { stroke-width: 3.5; stroke-dasharray: 6 4; animation: turf-march 1s linear infinite; }
@keyframes turf-march { to { stroke-dashoffset: -20; } }
.turf-swords { font-size: 17px; text-anchor: middle; fill: #fff; paint-order: stroke; stroke: #0B0B0D; stroke-width: 3px; }
.turf-key-swords { color: #fff; }
.turf-fights h2 { margin-top: 0; }
.turf-fight-list { list-style: none; margin: 0; padding: 0; }
.turf-fight-list li { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 8px 0; border-top: 1px solid var(--line); font-size: 14px; }
.turf-fight-list li:first-child { border-top: 0; }
.turf-fight-list a { font-weight: 700; color: var(--text); }
.turf-fight-list span span { font-weight: 700; }
.turf-fight-time { margin-left: auto; font-size: 12px; color: var(--brass); font-weight: 700; }
.turf-battle { margin-top: 12px; padding: 14px; border: 1px solid rgba(193, 39, 45, .5); border-radius: 4px; background: rgba(193, 39, 45, .06); }
.turf-battle-head { margin: 0 0 12px; font-weight: 700; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; }
.turf-battle-time { margin-left: auto; font-size: 13px; color: var(--brass); }
.turf-sides { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.turf-side { padding: 10px 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--ink); }
.turf-side h3 { margin: 0 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.turf-side-attack h3 { color: #F3B4B6; }
.turf-side-defend h3 { color: #A9CBE6; }
.turf-side p { margin: 0; font-size: 13px; }
.turf-side ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.turf-side li { padding: 2px 8px; border-left: 3px solid var(--faction); background: var(--panel-2); font-size: 13px; font-weight: 700; }
.turf-join { display: flex; gap: 10px; flex-wrap: wrap; }
.turf-warning { margin: 8px 0 0; font-size: 12px; color: #F3B4B6; }
.turf-you { margin: 0; font-weight: 700; color: var(--brass); }
.turf-admin-end { margin-top: 12px; }
.turf-attack-box { margin-top: 12px; padding: 14px; border: 1px dashed rgba(201, 162, 39, .5); border-radius: 4px; }
.turf-attack-box p { margin: 0 0 10px; font-size: 14px; }
.notif-turf-win .notif-dot { background: var(--green); }
.notif-turf-loss .notif-dot { background: var(--crimson); }
@media (max-width: 600px) { .turf-sides { grid-template-columns: 1fr; } }

/* ---------- Turf war won banner, every page (includes/turf_win_banner.php) ---------- */
.turf-win {
  position: relative; height: 250px; overflow: hidden; margin-bottom: 20px;
  border: 1px solid var(--line); border-top: 3px solid var(--tw-color); border-radius: 4px;
  background: #101216 url('/images/pixel/turf/street.svg') repeat-x left bottom / auto 100%;
  image-rendering: pixelated;
}
.turf-win-art { position: absolute; inset: 0; opacity: 0.62; }
.turf-win-art img { position: absolute; image-rendering: pixelated; display: block; }
.turf-win::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 50% 38% at 50% 38%, rgba(11, 11, 13, 0.6), rgba(11, 11, 13, 0) 80%),
    linear-gradient(to bottom, rgba(11, 11, 13, 0.35), rgba(11, 11, 13, 0.1) 55%, rgba(11, 11, 13, 0.45));
}
/* ground: pavement top sits ~60px up, kerb ~40px up */
.tw-block { right: 0; bottom: 60px; height: 190px; }
.tw-crew { position: absolute; left: 3%; bottom: 44px; width: 120px; height: 110px; }
.tw-crew .tw-fig { width: 37px; height: 110px; bottom: 0; left: calc(var(--i) * 34px); position: absolute; }
.tw-crew .tw-fig:nth-child(2) { bottom: -4px; z-index: 1; }
.tw-cars { position: absolute; left: 42%; bottom: 14px; width: 240px; height: 80px; transform: translateX(-50%); }
.tw-car { height: 68px; bottom: 0; }
.tw-car-a { left: 0; z-index: 1; }
.tw-car-b { right: 0; bottom: 12px; transform: rotate(-5deg); }
.tw-down { position: absolute; right: 2%; bottom: 40px; width: 190px; height: 40px; }
.tw-body { position: absolute; bottom: calc(var(--i) * 4px - 4px); right: calc(var(--i) * 76px); width: 110px; height: 37px; }
.tw-body img { width: 37px; height: 110px; left: 36.5px; top: -36.5px; transform: rotate(90deg); filter: brightness(0.8); }
.tw-body:nth-child(2) img { transform: rotate(-90deg); }

.turf-win-text { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 20px 40px; text-align: center; }
.turf-win-kicker { display: inline-block; padding: 2px 8px; border-radius: 3px; background: var(--tw-color); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }
.turf-win-title { margin-top: 10px; font-size: 36px; line-height: 1.1; color: var(--text); text-shadow: 0 2px 0 #000, 0 0 18px rgba(0, 0, 0, 0.8); }
.turf-win-title .tw-faction { color: var(--tw-color); }
.turf-win-title .tw-place { color: var(--brass); }
.turf-win-sub { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--text); text-shadow: 0 1px 0 #000; }

@media (max-width: 560px) {
  .turf-win-title { font-size: 26px; }
  .tw-hide-sm { display: none !important; }
  .tw-block { height: 150px; }
  .tw-crew { left: 2%; width: 70px; }
  .tw-cars { left: 36%; width: 150px; }
  .tw-car { height: 56px; }
  .tw-down { right: 2%; width: 160px; }
  .tw-body { right: calc(var(--i) * 50px); }
}

/* ---------- Gun shop (gun-shop.php) ---------- */
.item-tag-throwable { background: rgba(201, 162, 39, 0.2); color: #EBD58C; }
.shop-tabs { margin: 4px 0 14px; }
.shop-item.is-locked .item-icon, .shop-item.is-locked .shop-item-info { opacity: 0.5; }
.level-tag-locked { color: var(--muted); }
/* Alley: throwable buttons */
.alley-throw .btn small { margin-left: 4px; font-weight: 600; opacity: 0.8; }

/* ---------- Turf attack alerts above page titles (turf_attack_alerts_html) ---------- */
.turf-alerts { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 14px; }
.turf-alert {
  display: inline-block; max-width: 100%;
  padding: 6px 12px; border-radius: 4px; border: 1px solid var(--ta-color);
  background: var(--ta-color); color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.turf-alert:hover { color: #fff; text-decoration: none; filter: brightness(1.12); }
.turf-alert strong { font-weight: 800; }
.turf-alert-cta { margin-left: 4px; text-decoration: underline; text-underline-offset: 2px; font-weight: 800; white-space: nowrap; }
.turf-alert-mafia, .turf-alert-mafia:hover { color: #111; }
.turf-alert-more { --ta-color: var(--line); background: var(--panel-2); color: var(--text); }
.turf-alert-more:hover { color: var(--text); }
.hide-fight-warning { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--crimson); border-radius: 4px; background: rgba(193, 39, 45, 0.12); font-size: 14px; color: var(--text); }

/* ---------- Contact form + Admin Mail tab ---------- */
.field textarea {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 10px 12px;
  color: var(--text); font-size: 14px; font-family: 'Barlow', sans-serif; width: 100%; resize: vertical; min-height: 140px; line-height: 1.5;
}
.field textarea:focus { outline: none; border-color: var(--brass); }
.contact-from { margin: 0 0 14px; font-size: 14px; color: var(--muted); }
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.admin-tab-count { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 999px; background: var(--brass); color: #111; font-size: 11px; font-weight: 800; line-height: 18px; text-align: center; }
.mail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 8px; }
.mail-head h2 { margin: 0; }
.mail-head form { margin: 0 0 0 auto; }
.mail-filter { display: flex; gap: 6px; }
.mail-filter a { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 13px; }
.mail-filter a.active { border-color: var(--brass); color: var(--brass); }
.mail-filter a:hover { text-decoration: none; color: var(--text); }
.mail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.mail-item { padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.mail-item.is-unread { border-left: 3px solid var(--brass); }
.mail-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.mail-new { padding: 1px 6px; border-radius: 3px; background: var(--brass); color: #111; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; }
.mail-topic { font-weight: 700; color: var(--text); }
.mail-email { overflow-wrap: anywhere; }
.mail-time { margin-left: auto; }
.mail-body { margin: 8px 0 10px; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.55; color: var(--text); }
.mail-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.mail-actions form { margin: 0; }

/* ---------- 404 page (404.php) ---------- */
.nf-panel { text-align: center; }
.nf-title { margin: 0 0 6px; font-size: 30px; }
.nf-panel .panel-intro { margin: 0 auto 16px; max-width: 460px; }
.bank-allowance { margin: -4px 0 12px; font-size: 13px; color: var(--muted); }
.bank-allowance strong { color: var(--brass); }
.bank-allowance.is-used { color: #F3B4B6; }

/* ---------- The Agency (agency.php) ---------- */
.agency-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; margin-bottom: 12px; }
.agency-head h2 { margin: 0; }
.agency-rate { font-size: 13px; color: var(--muted); }
.agency-rate strong { color: var(--green); font-weight: 700; }
.agency-stash-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.agency-stash-amount { display: flex; align-items: baseline; gap: 8px; }
.agency-stash-value { font-family: 'Anton', Impact, sans-serif; font-size: 34px; line-height: 1; color: var(--green); }
.agency-stash-cap { font-size: 13px; color: var(--muted); }
.agency-meter { height: 10px; margin-top: 14px; }
.agency-fill { background: var(--green); }
.agency-stash.is-full { border-color: var(--brass); }
.agency-stash.is-full .agency-fill { background: var(--brass); }
.agency-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.agency-stash.is-full .agency-note strong { color: var(--brass); }
.agency-hire { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); }
.agency-hire > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 220px; }
.agency-hire form { margin: 0; }
.agency-sub { font-size: 12px; color: var(--muted); line-height: 1.4; }
.agency-jobs { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.agency-job { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px 14px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 4px; }
.agency-job-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agency-job-name { font-weight: 700; }
.agency-pay { margin-left: 6px; font-size: 11px; font-weight: 700; color: var(--green); }
.agency-count { font-family: 'Anton', Impact, sans-serif; font-size: 24px; min-width: 2ch; text-align: right; }
.agency-job-actions { display: flex; gap: 6px; }
.agency-job-actions form { margin: 0; }
.agency-job-actions .btn-small { min-width: 34px; }
@media (max-width: 560px) {
  .agency-job { grid-template-columns: 1fr auto; }
  .agency-job-actions { grid-column: 1 / -1; justify-content: flex-end; }
}

/* Agency: crew table (28 Oct) */
.agency-head .agency-hire-form { margin: 0 0 0 auto; }
.agency-head { align-items: center; }
.agency-head .agency-rate { margin-left: auto; }
.agency-head .agency-rate + .agency-hire-form { margin-left: 8px; }
.agency-full { color: var(--brass); }
.agency-muted { color: var(--muted); }
.agency-table-wrap { overflow-x: auto; }
.agency-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.agency-table th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
.agency-table td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.agency-table .num { text-align: right; white-space: nowrap; }
.agency-table .agency-count { font-family: 'Anton', Impact, sans-serif; font-size: 18px; }
.agency-table td.agency-pay { font-size: 12px; font-weight: 700; color: var(--green); white-space: nowrap; }
.agency-table td.agency-boost { font-weight: 800; color: var(--brass); }
.agency-table .agency-idle td { color: var(--muted); }
.agency-table .agency-idle td.agency-count { color: var(--text); }
.agency-table tfoot td { border-bottom: 0; font-weight: 700; padding-top: 10px; }
.agency-table tfoot strong { color: var(--green); }
.agency-actions { white-space: nowrap; text-align: right; }
.agency-actions form { display: inline-block; margin: 0 0 0 4px; }
.agency-actions .btn-small { min-width: 32px; }
@media (max-width: 560px) {
  .agency-table { font-size: 13px; }
  .agency-table th, .agency-table td { padding: 6px 4px; }
  .agency-table th:nth-child(2), .agency-table td:nth-child(2) { display: none; }
}
.turf-leave { margin: 8px 0 0; }
.turf-alert-time { margin-left: 2px; font-variant-numeric: tabular-nums; white-space: nowrap; opacity: 0.9; }
.agency-office-row td { border-top: 2px solid var(--line); }
.agency-owned { font-size: 12px; font-weight: 700; color: var(--green); }
/* Leaderboard on phones: drop the Cash column so the table fits */
@media (max-width: 600px) {
  table.leaderboard th:nth-child(5), table.leaderboard td:nth-child(5) { display: none; }
}

/* Admin: page view counter */
.views-chart { display: flex; align-items: flex-end; gap: 4px; height: 140px; margin: 16px 0 6px; padding-top: 16px; }
.views-day { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.views-bar { width: 100%; max-width: 28px; min-height: 2px; background: var(--crimson); border-radius: 2px 2px 0 0; }
.views-num { font-size: 10px; color: var(--muted); margin-bottom: 2px; white-space: nowrap; }
.views-label { font-size: 10px; color: var(--muted); margin-top: 4px; }
.views-top-h { margin: 18px 0 6px; font-size: 14px; }
.admin-table td.num { text-align: right; width: 1%; white-space: nowrap; }
.agency-unlock h2 { margin: 0 0 8px; }
.agency-perks { margin: 4px 0 18px; padding-left: 20px; display: grid; gap: 6px; max-width: 70ch; }
.agency-perks li::marker { color: var(--crimson); }
.agency-unlock form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; }
.agency-need { font-size: 13px; }
.agency-tabs { margin: 0 0 4px; }
.agency-glance { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.agency-glance-item { display: flex; flex-direction: column; gap: 2px; padding: 12px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); color: var(--text); }
.agency-glance-item:hover { border-color: var(--brass); text-decoration: none; color: var(--text); }
.agency-glance-value { font-family: 'Anton', Impact, sans-serif; font-size: 22px; line-height: 1.1; }
.agency-glance-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); }
@media (max-width: 560px) { .agency-glance { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Attack (attack.php): park fight + who's about */
.alley-figure.attack-foe:not(.is-dead) { transform: scaleX(-1); }
.alley-figure.attack-foe.is-dead { transform-origin: bottom right; transform: translateY(-34%) rotate(-90deg); }
.attack-targets-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.attack-targets-head h2 { margin: 0; }
.attack-search { display: flex; gap: 8px; margin: 0; }
.attack-search input { width: 160px; min-width: 0; background: var(--panel-2); border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; color: var(--text); font: 14px 'Barlow', sans-serif; }
.attack-search input:focus { outline: none; border-color: var(--brass); }
.attack-table td.attack-go { text-align: right; }
.attack-table td:nth-child(2) { white-space: nowrap; }
.attack-table td.attack-go form { margin: 0; }
.attack-empty { font-size: 14px; color: var(--muted); }
@media (max-width: 600px) {
  .attack-search { width: 100%; }
  .attack-search input { flex: 1; width: auto; }
}
.tab-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--brass); vertical-align: middle; }

/* Turf-win banner: Hide (full) / X (bar) */
.turf-win-wrap.is-full .turf-win-bar, .turf-win-wrap.is-bar .turf-win { display: none; }
.tw-pref { margin: 0; }
.tw-pref button { cursor: pointer; font: 600 12px 'Barlow', sans-serif; color: var(--text); }
.tw-hide { position: absolute; top: 8px; right: 8px; z-index: 2; }
.tw-hide button { padding: 3px 10px; background: rgba(11, 11, 13, 0.7); border: 1px solid var(--line); border-radius: 3px; }
.tw-hide button:hover { border-color: var(--muted); }
.turf-win-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 8px 8px 8px 12px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--tw-color); border-radius: 4px; font-size: 14px; }
.turf-win-bar-text { flex: 1; min-width: 0; font-weight: 600; color: var(--text); text-decoration: none; }
.turf-win-bar .tw-faction { color: var(--tw-color); }
.turf-win-bar .tw-place { color: var(--brass); }
.turf-win-bar-link { font-size: 13px; white-space: nowrap; }
.tw-close button { width: 26px; height: 26px; padding: 0; font-size: 18px; line-height: 1; background: none; border: 1px solid transparent; border-radius: 3px; color: var(--muted); }
.tw-close button:hover { color: var(--text); border-color: var(--line); }
@media (max-width: 560px) {
  .turf-win-bar .turf-win-kicker, .turf-win-bar-link { display: none; }
}

/* ---------- Heat bar (Union Park, Petty Crime tab) ---------- */
.heat-panel { padding-bottom: 14px; }
.heat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.heat-head h2 { margin: 0; }
.heat-value { font-family: 'Anton', Impact, sans-serif; font-size: 20px; color: var(--text); }
.heat-panel.is-hot .heat-value { color: var(--crimson); }
.heat-bar { position: relative; height: 14px; border-radius: 3px; border: 1px solid var(--line); overflow: hidden; background: linear-gradient(90deg, #3FBF62 0%, #C9A227 50%, #E0662B 75%, #C1272D 100%); }
.heat-cover { position: absolute; top: 0; right: 0; bottom: 0; background: var(--panel-2); }   /* hides the part of the bar above your heat */
.heat-line { position: absolute; top: -1px; bottom: -1px; width: 2px; margin-left: -1px; background: var(--text); opacity: .55; }
.heat-scale { position: relative; height: 16px; margin-top: 4px; font-size: 11px; color: var(--muted); }
.heat-scale span { position: absolute; transform: translateX(-50%); }
.heat-scale span:first-child { transform: none; }
.heat-scale span:last-child { transform: translateX(-100%); }
.heat-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.heat-panel.is-hot .heat-note { color: var(--text); }
.jail-panel h2 { margin-top: 0; }
.notif-jail .notif-dot { background: #3A6FE0; }

/* ---------- Dashboard: at-a-glance tiles, quick moves, recent ---------- */
.dash-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.dash-tile { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 104px; padding: 12px 8px; text-align: center; text-decoration: none; color: var(--text); background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; transition: border-color .15s, transform .15s; }
.dash-tile:hover { border-color: var(--brass); transform: translateY(-1px); }
.dash-tile i { font-size: 20px; color: var(--brass); margin-bottom: 4px; }
.dash-tile-value { font-family: 'Anton', Impact, sans-serif; font-size: 22px; line-height: 1.1; }
.dash-tile-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; line-height: 1.3; }
.dash-tile-sub { font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; }
.dash-tile.is-good { border-color: rgba(63, 191, 98, .5); }
.dash-tile.is-good i { color: var(--green); }
.dash-tile.is-alert { border-color: rgba(193, 39, 45, .7); }
.dash-tile.is-alert i { color: var(--crimson); }
.dash-tile.is-locked { opacity: .55; }
.dash-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
.dash-quick a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 6px; border: 1px solid var(--line); border-radius: 4px; color: var(--text); text-decoration: none; font-size: 13px; font-weight: 600; }
.dash-quick a:hover { border-color: var(--crimson); background: rgba(193, 39, 45, .12); }
.dash-quick a.is-locked { opacity: .45; }
.dash-quick i { color: var(--crimson); }
.dash-recent { list-style: none; margin: 0; padding: 0; }
.dash-recent li { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; font-size: 13px; }
.dash-recent li + li { border-top: 1px solid var(--line); }
.dash-recent i { width: 16px; flex: none; text-align: center; color: var(--muted); }
.dash-recent a, .dash-recent span { flex: 1; min-width: 0; color: var(--text); text-decoration: none; }
.dash-recent a:hover { color: var(--brass); }
.dash-recent time { flex: none; color: var(--muted); font-size: 12px; white-space: nowrap; }
.dash-recent .notif-death i, .dash-recent .notif-jail i, .dash-recent .notif-attack i, .dash-recent .notif-turf-loss i { color: var(--crimson); }
.dash-recent .notif-turf-win i, .dash-recent .notif-level i { color: var(--green); }
@media (max-width: 600px) {
  .dash-tiles { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash-tile:last-child:nth-child(odd) { grid-column: span 2; }
  .dash-tile { min-height: 92px; padding: 10px 4px; }
  .dash-tile-value { font-size: 19px; }
  .dash-quick { grid-template-columns: repeat(2, 1fr); }
}
/* Register: a faction too far ahead of the others can't be joined */
.faction-option { position: relative; }
.faction-option.is-closed { opacity: .45; cursor: not-allowed; }
.faction-option.is-closed:hover { border-color: var(--line); }
.faction-option.is-closed img { filter: grayscale(1); }
.faction-full { position: absolute; top: 6px; right: 6px; padding: 1px 6px; border-radius: 3px; background: var(--panel-2); border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* ---------- Car dealership + Safehouse garage ---------- */
.car-list { list-style: none; margin: 0; padding: 0; }
.car-item { display: grid; grid-template-columns: 200px 1fr auto; align-items: center; gap: 16px; padding: 16px 0; }
.car-item + .car-item { border-top: 1px solid var(--line); }
.car-item.is-mine .car-pic { border-color: var(--brass); }
.car-pic { background: linear-gradient(180deg, #1D1E24 0 70%, #26272E 70% 100%); border: 1px solid var(--line); border-radius: 4px; padding: 10px 6px 4px; }
.car-pic img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.car-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.garage-bay { position: relative; display: flex; align-items: flex-end; justify-content: center; min-height: 170px; padding: 24px 24px 10px; border: 1px solid var(--line); border-radius: 4px;
  background: repeating-linear-gradient(90deg, #202128 0 38px, #1C1D23 38px 40px) top / 100% 70% no-repeat, linear-gradient(180deg, #2A2B33, #22232A) bottom / 100% 30% no-repeat; }
.garage-bay::after { content: ''; position: absolute; left: 50%; bottom: 8%; width: 64%; height: 6px; transform: translateX(-50%); border-left: 3px solid #C9A227; border-right: 3px solid #C9A227; }
.garage-car { width: min(100%, 448px); height: auto; image-rendering: pixelated; position: relative; z-index: 1; }
.garage-bay.is-empty span { align-self: center; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: 1px; }
.garage-name { margin: 14px 0 6px; }
.garage-meta { margin-bottom: 8px; }
@media (max-width: 600px) {
  .car-item { grid-template-columns: 1fr; gap: 10px; }
  .car-buy { justify-content: space-between; }
}

/* Police HQ: new identity (change faction) */
.identity-cost { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.identity-cost li { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel-2); font-size: 13px; }
.identity-cost li strong { margin-left: auto; font-family: 'Anton', Impact, sans-serif; font-weight: 400; font-size: 16px; }
.identity-cost li.is-lost i { color: var(--crimson); }
.identity-cost li.is-lost strong { color: #F3B4B6; text-decoration: line-through; }
.identity-cost li.is-kept i { color: var(--green); }
.identity-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.identity-choice { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--line); border-left: 3px solid var(--faction); border-radius: 4px; font-weight: 700; color: var(--faction); cursor: pointer; }
.identity-choice input { accent-color: var(--faction); margin: 0; }
.identity-choice:has(input:checked) { background: var(--panel-2); border-color: var(--faction); }
.identity-confirm { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
@media (max-width: 600px) { .identity-cost { grid-template-columns: 1fr; } }

/* ---------- Station Parade (parade.php) ---------- */
.parade .mall-roof, .parade .mall-units, .parade .mall-pavement { min-width: 0; }
.parade-units { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.launder-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.launder-head img { image-rendering: pixelated; padding: 4px; background: var(--panel-2); border: 1px solid var(--line); border-left: 3px solid var(--shop); border-radius: 3px; }
.launder-head h2 { margin: 0 0 4px; }
.launder-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.launder-form .bank-input { flex: 0 1 180px; }
.launder-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.launder-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.launder-row strong { color: var(--green); }
.launder-progress .meter { margin: 6px 0; }
.launder-fill { background: var(--shop); }
.launder-ready { font-weight: 700; color: var(--green); }
@media (max-width: 600px) { .parade-units .mall-front { height: 60px; } .parade-units .mall-sign { font-size: 9px; } }