:root {
  --bg: #070809;
  --bg-2: #0e1012;
  --panel: #141618;
  --panel-2: #1b1e22;
  --line: rgba(232, 214, 170, .12);
  --text: #f2efe6;
  --muted: #9a9588;
  --red: #c73a32;
  --red-dim: #7a221e;
  --green: #3db87a;
  --amber: #e8a020;
  --blue: #6a8fad;
  --sodium: #e8a020;
  --sodium-dim: #a87412;
  --bone: #f2efe6;
  --asphalt: #0c0d0f;
  --steel: #1a1d21;
  --font: "Outfit", "Segoe UI", system-ui, sans-serif;
  --display: "Syne", "Arial Black", sans-serif;
  --radius: 6px;
  --shadow: 0 16px 40px rgba(0, 0, 0, .45);
  --glow-red: 0 10px 24px rgba(199, 58, 50, .22);
  --glow-sodium: 0 10px 28px rgba(232, 160, 32, .18);
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font);
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(232, 160, 32, .16), transparent 55%),
    radial-gradient(720px 480px at 100% 0%, rgba(106, 143, 173, .08), transparent 50%),
    radial-gradient(800px 500px at 50% 120%, rgba(199, 58, 50, .08), transparent 55%),
    linear-gradient(180deg, #121416 0%, var(--bg) 40%, #050607 100%);
  color: var(--text);
  min-height: 100vh;
  letter-spacing: .01em;
  font-weight: 450;
}
body.is-game::before {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(180deg, transparent 0%, rgba(0,0,0,.18) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  opacity: .7;
  z-index: 0;
}
body.is-game::after {
  content: "";
  pointer-events: none;
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(232,160,32,.07), transparent 55%),
    linear-gradient(90deg, rgba(0,0,0,.35), transparent 18%, transparent 82%, rgba(0,0,0,.35));
  z-index: 0;
}
body.is-game > *:not(.cs-dialog):not(.chat-dock) { position: relative; z-index: 1; }
body.is-game > .cs-dialog { position: fixed; z-index: 10000; }
body.is-game > .chat-dock { position: fixed; z-index: 9000; }
a { color: #f0d48a; text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; display: block; }

.logo {
  font-family: var(--display);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--bone);
  white-space: nowrap;
  text-transform: uppercase;
}
.logo span { color: var(--sodium); }

.btn, button.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  border: 1px solid rgba(0,0,0,.35);
  background: linear-gradient(180deg, #efb03a, var(--sodium) 45%, var(--sodium-dim));
  color: #1a1205;
  font-weight: 700;
  padding: .7rem 1.05rem;
  border-radius: var(--radius);
  cursor: pointer;
  font-family: inherit;
  box-shadow: var(--glow-sodium);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}
.btn:hover, button.btn:hover { filter: brightness(1.06); color: #120c02; transform: translateY(-1px); }
.btn:active, button.btn:active { transform: translateY(1px); }
.btn:disabled, button.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-ghost,
a.btn-ghost,
button.btn.btn-ghost {
  background: transparent;
  border: 1px solid rgba(232, 214, 170, .22);
  color: var(--text);
  box-shadow: none;
}
.btn-ghost:hover,
a.btn-ghost:hover,
button.btn.btn-ghost:hover { border-color: var(--sodium); color: #fff; filter: none; }
.btn-sm { padding: .45rem .75rem; font-size: .9rem; box-shadow: none; }
.btn-green {
  background: linear-gradient(180deg, #4eca8c, #2f9a64);
  color: #06150e;
  border-color: rgba(0,0,0,.3);
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: .75rem 1.1rem;
  background: linear-gradient(180deg, rgba(16, 17, 19, .97), rgba(8, 9, 10, .94));
  border-bottom: 1px solid rgba(232, 160, 32, .14);
  backdrop-filter: blur(16px);
  box-shadow: 0 12px 32px rgba(0,0,0,.35);
}
.topbar-brand { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.topbar-suggest {
  margin-left: .15rem;
  padding: .35rem .7rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: rgba(56, 139, 253, .06);
  border: 1px solid rgba(56, 139, 253, .55);
  color: #c8ddff;
  box-shadow: 0 0 0 0 rgba(56, 139, 253, .35);
  animation: suggestPulse 2.2s ease-in-out infinite;
}
.topbar-suggest:hover,
.topbar-suggest.is-active {
  animation: none;
  border-color: #58a6ff;
  color: #fff;
  background: rgba(56, 139, 253, .18);
  box-shadow: 0 0 14px rgba(56, 139, 253, .35);
}
.topbar-discord {
  padding: .35rem .7rem;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-color: rgba(88, 101, 242, .55);
  color: #c5c9ff;
  background: rgba(88, 101, 242, .1);
}
.topbar-discord:hover {
  border-color: #7289da;
  color: #fff;
  background: rgba(88, 101, 242, .22);
}
@keyframes suggestPulse {
  0%, 100% {
    border-color: rgba(56, 139, 253, .4);
    box-shadow: 0 0 0 0 rgba(56, 139, 253, .0);
    color: #b6d0f5;
  }
  50% {
    border-color: #58a6ff;
    box-shadow: 0 0 12px 2px rgba(56, 139, 253, .45);
    color: #eaf2ff;
  }
}
@media (prefers-reduced-motion: reduce) {
  .topbar-suggest { animation: none; }
}
.nav-toggle {
  display: none;
  background: var(--panel);
  border: 1px solid var(--line);
  color: #fff;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 6px;
}
.topbar-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  align-items: center;
  justify-content: flex-end;
}
.meta-block { display: flex; flex-direction: column; line-height: 1.1; }
.meta-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.meta-block strong { font-size: .95rem; }
.money.dirty strong { color: #f0b4a8; }
.money.clean strong { color: var(--green); }
.heat { color: var(--sodium); }
.bell, .profile {
  background: var(--steel);
  border: 1px solid var(--line);
  padding: .4rem .65rem;
  border-radius: var(--radius);
  color: #fff;
  position: relative;
}
.bell i {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--red);
  color: #fff;
  font-style: normal;
  font-size: .7rem;
  min-width: 1rem;
  height: 1rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.topbar-bars {
  display: flex;
  gap: .65rem;
  flex: 1;
  min-width: 0;
  max-width: 340px;
}
.res-bar {
  flex: 1;
  min-width: 0;
  background: var(--asphalt);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: .28rem .45rem .35rem;
}
.res-bar span {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: #ddd6c6;
  margin-bottom: .2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.res-bar i {
  display: block;
  height: 5px;
  border-radius: 2px;
  background: #22252a;
  overflow: hidden;
}
.res-bar i b {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #a87412, var(--sodium));
  border-radius: inherit;
  transition: width .45s ease;
}
.res-bar.nerve i b { background: linear-gradient(90deg, #4a6f88, #6a8fad); }

.shell {
  display: grid;
  grid-template-columns: 248px minmax(0, 1fr);
  min-height: calc(100vh - 64px);
  width: 100%;
}
.sidebar {
  background:
    linear-gradient(180deg, rgba(18, 19, 21, .99), rgba(8, 9, 10, .99)),
    radial-gradient(260px 160px at 0% 0%, rgba(232,160,32,.08), transparent 70%);
  border-right: 1px solid rgba(232, 214, 170, .08);
  padding: .85rem .65rem 1.25rem;
  overflow: auto;
  max-height: calc(100vh - 64px);
  position: sticky;
  top: 64px;
}
.side-nav { display: flex; flex-direction: column; gap: .35rem; }
.nav-group {
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
}
.nav-group[open] {
  background: rgba(255,255,255,.02);
  border-color: rgba(255,255,255,.04);
}
.nav-group summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  color: #7a7568;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .45rem .55rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-group summary::-webkit-details-marker { display: none; }
.nav-group summary::after {
  content: "+";
  font-size: .85rem;
  color: #5a564c;
}
.nav-group[open] summary::after { content: "–"; }
.nav-links { display: flex; flex-direction: column; gap: .12rem; padding: 0 .25rem .4rem; }
.sidebar a {
  color: var(--muted);
  padding: .42rem .55rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: .9rem;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.nav-ico {
  width: 1.15rem;
  text-align: center;
  opacity: .85;
  font-size: .92rem;
}
.sidebar a:hover, .sidebar a.is-active {
  background: linear-gradient(90deg, rgba(232,160,32,.16), rgba(232,160,32,.03));
  color: #fff;
}
.sidebar a.nav-donator {
  margin-top: .45rem;
  color: #f0d78c;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .62rem .55rem;
  border-radius: 10px;
  border: 1px solid rgba(240, 180, 41, .55);
  background: rgba(240, 180, 41, .1);
  justify-content: space-between;
}
.sidebar a.nav-donator::after { content: "£"; color: #f0d78c; letter-spacing: 0; }
.sidebar a.nav-donator:hover,
.sidebar a.nav-donator.is-active {
  color: #ffe7a3;
  background: rgba(240, 180, 41, .2);
  border-color: #f0d78c;
}
.sidebar a.is-active { box-shadow: inset 3px 0 0 var(--sodium); }
.nav-legal {
  margin-top: .55rem;
  padding-top: .35rem;
  border-top: 1px solid rgba(255,255,255,.06);
}
.sidebar .logout { margin-top: .45rem; color: #e89a92; padding: .55rem; }
.legal-page { max-width: 1100px; }
.legal-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 1rem;
}
.legal-tab {
  display: inline-flex;
  align-items: center;
  padding: .45rem .7rem;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  background: #14161a;
  color: #b8b3a8;
  font-size: .82rem;
  font-weight: 700;
}
.legal-tab.is-active,
.legal-tab:hover {
  color: #fff;
  border-color: rgba(232,160,32,.45);
  background: linear-gradient(180deg, rgba(232,160,32,.16), rgba(20,22,26,.95));
}
.legal-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.legal-toc {
  position: sticky;
  top: 76px;
  padding: .75rem .7rem;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  background: #121418;
}
.legal-toc strong {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8a8478;
  margin-bottom: .45rem;
}
.legal-toc ul { list-style: none; margin: 0; padding: 0; }
.legal-toc li { margin: 0; }
.legal-toc a {
  display: block;
  padding: .28rem 0;
  color: #9ec0e0;
  font-size: .82rem;
}
.legal-toc a:hover { color: #fff; }
.legal-co { margin: .75rem 0 0; font-size: .72rem; }
.legal-body { padding: 1rem 1.15rem 1.35rem; line-height: 1.55; }
.legal-body h3 {
  color: #9ec0e0;
  margin: 1.15rem 0 .4rem;
  font-size: 1rem;
}
.legal-body ul { margin: .35rem 0 .85rem 1.1rem; color: #d5d0c6; }
.legal-body p { color: #d5d0c6; margin: .35rem 0 .65rem; }
.legal-banner {
  background: rgba(232,160,32,.14);
  border: 1px solid rgba(232,160,32,.35);
  color: #ffe7a8;
  padding: .65rem .8rem;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0 0 1rem;
}
.legal-hero-bar {
  background: linear-gradient(90deg, rgba(232,160,32,.55), rgba(232,160,32,.22));
  color: #fff;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  padding: .7rem .85rem;
  border-radius: 8px;
  margin: 1.1rem 0 .85rem;
}
.legal-rule {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: .75rem;
  padding: .85rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.legal-rule:last-child { border-bottom: 0; }
.legal-ico {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: rgba(232,160,32,.12);
  color: #e8a020;
  font-weight: 800;
  font-size: 1rem;
}
.legal-rule h3 {
  margin: 0 0 .25rem;
  color: #e8a020;
  font-size: .95rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.legal-lead { color: #a8a297; margin: 0 0 .5rem; }
.legal-foot { margin-top: 1.25rem; color: #8a8478; font-size: .85rem; }
.public-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  justify-content: center;
  margin: .35rem 0 0;
}
.public-legal-links a { color: #9ec0e0; font-size: .82rem; }
@media (max-width: 860px) {
  .legal-shell { grid-template-columns: 1fr; }
  .legal-toc { position: static; }
}
.content {
  padding: clamp(1rem, 1.6vw, 1.5rem) clamp(1rem, 2vw, 1.85rem) 2.4rem;
  animation: fadeUp .35s ease;
  width: 100%;
  max-width: none;
  min-width: 0;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

.flash {
  margin-bottom: .8rem;
  padding: .75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.flash-success { background: #123a1c; color: #b6ffc8; }
.flash-error, .flash-danger { background: #3a1216; color: #ffb4b4; }
.flash-info { background: #152033; color: #cfe0ff; }
.banner.jail {
  background: linear-gradient(90deg, #3a1216, #2a1a10);
  border: 1px solid #6a2a2a;
  padding: .8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}

.hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  min-height: 220px;
  display: grid;
  align-items: end;
  padding: 1.5rem;
  margin-bottom: 1rem;
  background:
    linear-gradient(180deg, rgba(8,10,14,.15), rgba(8,10,14,.88)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='400' viewBox='0 0 1200 400'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop stop-color='%23141a24'/%3E%3Cstop offset='1' stop-color='%230b0d10'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1200' height='400' fill='url(%23g)'/%3E%3Cg fill='%23222a38'%3E%3Crect x='40' y='180' width='70' height='220'/%3E%3Crect x='130' y='120' width='90' height='280'/%3E%3Crect x='240' y='160' width='60' height='240'/%3E%3Crect x='320' y='90' width='110' height='310'/%3E%3Crect x='450' y='140' width='80' height='260'/%3E%3Crect x='550' y='70' width='100' height='330'/%3E%3Crect x='670' y='150' width='70' height='250'/%3E%3Crect x='760' y='110' width='120' height='290'/%3E%3Crect x='900' y='160' width='80' height='240'/%3E%3Crect x='1000' y='100' width='110' height='300'/%3E%3Crect x='1120' y='180' width='60' height='220'/%3E%3C/g%3E%3C/svg%3E") center/cover;
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
}
.hero h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 3.4rem);
  margin: 0;
  letter-spacing: .04em;
  line-height: .95;
  max-width: 14ch;
}
.hero p { margin: .5rem 0 0; color: #d7dde5; max-width: 42ch; }

.grid-4, .grid-2, .grid-3 {
  display: grid;
  gap: .9rem;
  margin-bottom: 1rem;
}
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.stat, .panel {
  background:
    linear-gradient(160deg, rgba(232,214,170,.04), transparent 40%),
    linear-gradient(180deg, #1a1c1f 0%, var(--panel) 50%, #101214 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.05rem 1.1rem;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
}
.stat::before, .panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232,160,32,.28), transparent);
  pointer-events: none;
}
.banner.crisis {
  background: linear-gradient(90deg, #12301a, #1a2a1a);
  border: 1px solid #2f5a3a;
  padding: .8rem 1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
}
.stat h3, .panel h2, .panel h3 {
  margin: 0 0 .35rem;
  font-family: var(--display);
  letter-spacing: .04em;
  font-weight: 400;
}
.stat .value { font-size: 1.6rem; font-weight: 700; }
.stat .sub { color: var(--muted); font-size: .9rem; }
.stat a { font-size: .85rem; font-weight: 700; color: var(--sodium); }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin: .4rem 0 .8rem;
}
.section-head h2 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: .03em;
  font-size: 1.55rem;
  font-weight: 700;
}
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.tabs a, .tabs span {
  padding: .4rem .7rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-weight: 600;
  font-size: .9rem;
}
.tabs a.is-active, .tabs span.is-active {
  background: var(--sodium);
  border-color: var(--sodium);
  color: #1a1205;
}

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}
@media (max-width: 640px) {
  table { min-width: 0; }
  .table-wrap table { min-width: 0; }
  th, td { padding: .55rem .4rem; font-size: .88rem; }
  .inv-table th:nth-child(2),
  .inv-table td:nth-child(2),
  .inv-table th:nth-child(4),
  .inv-table td:nth-child(4) {
    display: none; /* Slot + Durability — free width on phones */
  }
  .inv-table td:last-child .actions,
  .inv-table td:last-child form {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
  }
}
th, td {
  text-align: left;
  padding: .75rem .6rem;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
th { color: var(--muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; }
.bar {
  height: 8px;
  background: #10141b;
  border-radius: 999px;
  overflow: hidden;
  min-width: 90px;
}
.bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1f8f4e, var(--green));
}
.badge {
  display: inline-block;
  padding: .2rem .5rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 700;
  background: #243041;
  color: #dce6f3;
}
.badge.ok { background: #163524; color: #9dffc0; }
.badge.warn { background: #3a2c10; color: #ffd789; }
.badge.bad { background: #3a1216; color: #ffb0b0; }
.badge.busy { background: #1c2d4a; color: #9ec1ff; }

.list-row {
  display: grid;
  grid-template-columns: 1.4fr .9fr .7fr .8fr auto;
  gap: .7rem;
  align-items: center;
  padding: .85rem 0;
  border-bottom: 1px solid var(--line);
}
.list-row:last-child { border-bottom: 0; }
.muted { color: var(--muted); }
.profit { color: var(--green); font-weight: 700; }

.map-layout {
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  gap: 1rem;
}
#city-map {
  height: min(70vh, 560px);
  border-radius: 14px;
  border: 1px solid rgba(80,100,130,.35);
  position: relative;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(40,60,90,.25), transparent 55%),
    #05070b;
  overflow: hidden;
  box-shadow:
    inset 0 0 100px rgba(0,0,0,.65),
    0 12px 40px rgba(0,0,0,.35);
}
#city-map::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 30%, transparent 70%, rgba(0,0,0,.45));
  background-size: 180px 180px, auto;
  opacity: .5;
  mix-blend-mode: overlay;
}
.map-water-shimmer { animation: mapWaterPulse 5.5s ease-in-out infinite; }
@keyframes mapWaterPulse {
  0%, 100% { opacity: .28; }
  50% { opacity: .42; }
}
.uk-landmass {
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .45));
}
.uk-coast-glow { pointer-events: none; }
.uk-ireland { pointer-events: none; }
.uk-route-arc { animation: ukRouteDrift 7s linear infinite; }
@keyframes ukRouteDrift {
  to { stroke-dashoffset: -48; }
}
.district-badge.is-selected circle {
  stroke-width: 3.2;
  animation: mapPinPulse 1.8s ease-in-out infinite;
}
.district-badge.is-here .you-are-here-ring {
  animation: youAreHerePulse 2.2s ease-in-out infinite;
}
.district-poly.is-here {
  stroke: #f0b429 !important;
  stroke-width: 2.4 !important;
  fill-opacity: .34 !important;
}
.district-label.is-here { fill: #f0b429; }
@keyframes mapPinPulse {
  0%, 100% { filter: drop-shadow(0 0 0 transparent); }
  50% { filter: drop-shadow(0 0 8px rgba(240, 180, 41, .55)); }
}
@keyframes youAreHerePulse {
  0%, 100% { opacity: .45; transform: scale(0.92); transform-origin: center; }
  50% { opacity: 1; transform: scale(1.08); transform-origin: center; }
}
#city-map svg, .city-svg { width: 100%; height: 100%; display: block; }
.city-river-label {
  fill: #8ebfd8;
  font-size: 10px;
  letter-spacing: .22em;
  font-weight: 700;
  opacity: .55;
  pointer-events: none;
}
.district-poly {
  cursor: pointer;
  stroke-linejoin: round;
  transition: fill-opacity .2s ease, stroke-width .2s ease;
}
.district-poly:hover { fill-opacity: .38 !important; }
.district-poly.is-selected {
  stroke: #fff !important;
  stroke-width: 3 !important;
  fill-opacity: .42 !important;
}
.district-poly.is-war { stroke-dasharray: 8 5; animation: warPulse 1.4s ease-in-out infinite; }
.district-poly.is-locked { stroke-dasharray: 3 4; opacity: .75; }
@keyframes warPulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: .4; }
}
.district-badge circle {
  transition: stroke .2s ease, r .2s ease;
}
.district-badge:hover circle { stroke-width: 3; }
.district-badge.is-selected circle { stroke: #fff; stroke-width: 3; }
.district-label {
  fill: #f4efe4;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(8,6,4,.92);
  stroke-width: 3px;
}
.district-you {
  fill: #f0d78c;
  font-family: var(--font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(8,6,4,.92);
  stroke-width: 3px;
}
.district-owner {
  fill: #d7dde5;
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(5,7,11,.92);
  stroke-width: 3px;
}
.shelf-card { display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: start; }
.shelf-shot {
  min-height: 148px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(232, 160, 32, .22);
}
.district-card {
  background: linear-gradient(180deg, #121820, #0c1016);
  border: 1px solid rgba(80,100,130,.3);
}
.district-card h3 {
  font-family: var(--display);
  letter-spacing: .06em;
  font-size: 1.6rem;
  margin: 0 0 .35rem;
}
.war-banner {
  color: #ffb4b4;
  background: rgba(180,30,40,.18);
  border: 1px solid rgba(199,58,50,.4);
  padding: .4rem .55rem;
  border-radius: 8px;
  font-weight: 700;
  font-size: .85rem;
}
.crime-stage-panel { margin-bottom: 1rem; border-color: rgba(199,58,50,.35); }
.crime-stages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin: .75rem 0;
}
.crime-stage {
  text-align: center;
  padding: .55rem .4rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: .85rem;
  font-weight: 700;
}
.crime-stage.is-active {
  border-color: #c73a32;
  color: #fff;
  background: rgba(199,58,50,.2);
  box-shadow: 0 0 16px rgba(199,58,50,.25);
}
.crime-stage.is-done { border-color: #2ea043; color: #9dffc0; }
.transit-scene,
.taxi-ride {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid var(--line);
  margin-bottom: 1.1rem;
  min-height: 340px;
  background: #07090e;
}
.transit-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.transit-hud,
.taxi-hud {
  position: relative;
  z-index: 3;
  padding: 1.15rem 1.25rem 1.25rem;
  max-width: 34rem;
  background: linear-gradient(90deg, rgba(7,9,14,.88) 0%, rgba(7,9,14,.55) 70%, transparent 100%);
}
.transit-badge {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #f5d98a;
  border: 1px solid rgba(240,180,41,.35);
  background: rgba(240,180,41,.1);
  border-radius: 999px;
  padding: .2rem .55rem;
  margin-bottom: .45rem;
}
.taxi-timer {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.2rem);
  letter-spacing: .05em;
  line-height: 1;
  margin: .35rem 0 .55rem;
  text-transform: uppercase;
}
.transit-progress {
  height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin: 0 0 .75rem;
  max-width: 18rem;
}
.transit-progress i {
  display: block;
  height: 100%;
  width: 8%;
  background: linear-gradient(90deg, #f0b429, #c73a32);
  border-radius: 999px;
  transition: width .9s linear;
}
.transit-vehicle {
  position: absolute;
  z-index: 2;
  transition: left 1s linear, bottom 1s linear;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.55));
}
/* ── Taxi scene ── */
.transit-scene.is-taxi { background: linear-gradient(180deg, #121826 0%, #0b1018 48%, #14110c 48%, #0a0908 100%); }
.taxi-night-sky {
  position: absolute; inset: 0 0 42% 0;
  background:
    radial-gradient(circle at 78% 28%, rgba(240,180,41,.18), transparent 28%),
    linear-gradient(180deg, #1a2438 0%, #0d121c 100%);
}
.taxi-moon {
  position: absolute; top: 14%; right: 16%;
  width: 42px; height: 42px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff6d2, #d8c48a 70%);
  box-shadow: 0 0 40px rgba(255,230,160,.25);
}
.taxi-stars {
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff, transparent),
    radial-gradient(1px 1px at 30% 40%, #fff, transparent),
    radial-gradient(1px 1px at 55% 18%, #fff, transparent),
    radial-gradient(1px 1px at 70% 35%, #fff, transparent),
    radial-gradient(1px 1px at 88% 22%, #fff, transparent);
  opacity: .55;
}
.taxi-skyline {
  position: absolute; left: 0; right: 0; bottom: 42%; height: 28%;
  background:
    linear-gradient(90deg,
      transparent 0 4%, #1c2433 4% 8%, transparent 8% 12%,
      #222b3c 12% 18%, transparent 18% 22%, #1a2230 22% 30%,
      transparent 30% 36%, #263044 36% 44%, transparent 44% 52%,
      #1d2636 52% 58%, transparent 58% 66%, #243047 66% 74%,
      transparent 74% 80%, #1b2332 80% 88%, transparent 88% 100%);
  opacity: .9;
  mask-image: linear-gradient(180deg, transparent, #000 30%);
}
.taxi-street {
  position: absolute; left: 0; right: 0; bottom: 0; height: 42%;
  background: linear-gradient(180deg, #2a241c 0%, #161310 40%, #0d0c0a 100%);
}
.taxi-asphalt {
  position: absolute; left: 0; right: 0; top: 18%; height: 54%;
  background: linear-gradient(180deg, #2c2c2c, #1a1a1a 55%, #111);
  border-top: 3px solid #3a3a3a;
  box-shadow: inset 0 12px 24px rgba(0,0,0,.35);
}
.taxi-lane {
  position: absolute; left: 0; right: 0; top: 48%;
  height: 4px;
  background: repeating-linear-gradient(90deg, #f0b429 0 28px, transparent 28px 52px);
  animation: laneMove .45s linear infinite;
}
.taxi-kerb {
  position: absolute; left: 0; right: 0; top: 10%; height: 8px;
  background: repeating-linear-gradient(90deg, #ddd 0 16px, #222 16px 32px);
  opacity: .35;
}
.taxi-lights span {
  position: absolute; bottom: 44%; width: 6px; height: 48px;
  background: linear-gradient(180deg, #f0b429, #5a4510);
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(240,180,41,.35);
}
.taxi-lights span:nth-child(1) { left: 12%; }
.taxi-lights span:nth-child(2) { left: 34%; }
.taxi-lights span:nth-child(3) { left: 58%; }
.taxi-lights span:nth-child(4) { left: 82%; }
.taxi-cab { bottom: 14%; left: 6%; }
@keyframes laneMove {
  from { background-position: 0 0; }
  to { background-position: -52px 0; }
}
/* ── Cinematic transit (flight / taxi / drive — photo + vehicle card) ── */
.transit-scene.is-flight,
.transit-scene.is-road,
.transit-scene.is-cinematic {
  background: #0a0c10;
  min-height: 380px;
}
.flight-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center 40%;
  transform: scale(1.05);
  animation: flightDrift 28s ease-in-out infinite alternate;
}
.transit-scene.is-road .flight-photo {
  background-position: center 55%;
}
.flight-photo-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(6, 8, 12, .88) 0%, rgba(6, 8, 12, .45) 42%, rgba(6, 8, 12, .2) 100%),
    linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .55) 100%);
  z-index: 1;
}
@keyframes flightDrift {
  from { transform: scale(1.05) translateX(0); }
  to { transform: scale(1.1) translateX(-2%); }
}
.flight-plane-card {
  top: 26%;
  left: 8%;
  width: min(44%, 360px);
  height: 150px;
  border-radius: 10px;
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(240, 180, 41, .22);
  box-shadow:
    0 18px 50px rgba(0, 0, 0, .65),
    0 0 0 1px rgba(255, 255, 255, .04);
  z-index: 2;
  filter: drop-shadow(0 12px 28px rgba(0, 0, 0, .75));
}
.transit-scene.is-flight .transit-hud,
.transit-scene.is-road .transit-hud,
.transit-scene.is-cinematic .transit-hud {
  z-index: 3;
}
.flight-contrail {
  position: absolute;
  top: 42%;
  left: 0;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(240, 180, 41, .35), transparent);
  z-index: 1;
}
.plane-thumb {
  width: 110px;
  min-height: 72px;
  background-color: #0d1118;
  box-shadow: inset 0 0 0 1px rgba(240, 180, 41, .12);
}
.vehicle-thumb {
  width: 110px;
  min-height: 68px;
  border-radius: 10px;
  background-color: #0d1118;
  background-size: cover;
  background-position: center;
  box-shadow: inset 0 0 0 1px rgba(240, 180, 41, .12);
}
.vehicle-thumb-sm {
  width: 88px;
  min-height: 56px;
}
.vehicle-sale-row + .vehicle-sale-row,
.vehicle-fleet-row + .vehicle-fleet-row {
  margin-top: .55rem;
}
.badge.warn {
  background: rgba(210, 90, 60, .18);
  color: #e8a090;
  border: 1px solid rgba(210, 90, 60, .35);
}
.property-card.is-remote { opacity: .72; }
.property-card.is-remote .property-media { filter: grayscale(.35); }

/* ── Education ── */
.edu-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .75rem;
}
.edu-card {
  background: #12161e;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .85rem .9rem 1rem;
  min-height: 210px;
  display: flex;
  flex-direction: column;
}
.edu-card.is-active { border-color: rgba(240,180,41,.45); }
.edu-card.is-done { border-color: rgba(46,160,67,.4); opacity: .85; }
.edu-art {
  font-size: 1.8rem;
  filter: grayscale(.35);
  margin-bottom: .35rem;
}
.edu-card h3 {
  font-family: var(--display);
  letter-spacing: .04em;
  font-size: 1.25rem;
  margin: 0 0 .3rem;
}
.edu-meta {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: .85rem;
  margin: .4rem 0;
}
.edu-bar { margin-top: auto; }
@media (max-width: 960px) {
  .edu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .edu-grid { grid-template-columns: 1fr; }
}

/* ── Laptop UI ── */
.laptop-shell {
  max-width: 980px;
  margin: 0 auto 1.5rem;
  padding: .5rem 0 1rem;
}
.laptop-bezel {
  background: linear-gradient(180deg, #2a2e36, #1a1d24);
  border-radius: 18px 18px 8px 8px;
  padding: 14px 14px 10px;
  border: 1px solid #3a404c;
  box-shadow: 0 30px 60px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
}
.laptop-cam {
  width: 8px; height: 8px; border-radius: 50%;
  background: #0b0d10;
  margin: 0 auto 10px;
  box-shadow: inset 0 0 0 2px #3a4250, 0 0 0 1px #111;
}
.laptop-screen {
  background: #0b0f16;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #050608;
  min-height: 420px;
  display: flex;
  flex-direction: column;
}
.laptop-menubar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .45rem .75rem;
  background: rgba(255,255,255,.04);
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .85rem;
  color: #c5ccd6;
}
.laptop-menubar strong { color: #fff; letter-spacing: .04em; }
.laptop-wallpaper {
  flex: 1;
  padding: 1rem;
  background:
    radial-gradient(700px 280px at 80% 0%, rgba(199,58,50,.18), transparent 55%),
    radial-gradient(500px 260px at 10% 100%, rgba(56,139,253,.12), transparent 50%),
    linear-gradient(160deg, #101722, #0a0e14 60%, #080b10);
}
.laptop-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
}
.laptop-app {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: .15rem;
  padding: .7rem .65rem .75rem;
  border-radius: 12px;
  background: rgba(20,26,36,.82);
  border: 1px solid rgba(255,255,255,.07);
  color: #e8edf4;
  transition: transform .15s ease, border-color .15s ease, background .15s ease;
  min-height: 96px;
}
.laptop-app:hover {
  transform: translateY(-2px);
  border-color: rgba(199,58,50,.45);
  background: rgba(28,36,50,.95);
  color: #fff;
}
.laptop-app-icon { font-size: 1.35rem; line-height: 1; }
.laptop-app-label { font-weight: 700; font-size: .95rem; }
.laptop-app-desc { color: #8b949e; font-size: .78rem; }
.laptop-dock {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  padding: .55rem .7rem;
  background: rgba(0,0,0,.35);
  border-top: 1px solid rgba(255,255,255,.06);
}
.laptop-dock a {
  padding: .3rem .55rem;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
  color: #d7dde5;
  font-size: .82rem;
  font-weight: 600;
}
.laptop-dock a:hover { background: rgba(199,58,50,.25); color: #fff; }
.laptop-base { margin-top: 2px; }
.laptop-hinge {
  height: 10px;
  margin: 0 8%;
  background: linear-gradient(180deg, #3a3f4a, #22262e);
  border-radius: 0 0 4px 4px;
}
.laptop-deck {
  background: linear-gradient(180deg, #2b303a, #1c2028);
  border-radius: 0 0 18px 18px;
  padding: 12px 10% 18px;
  border: 1px solid #3a404c;
  border-top: 0;
  box-shadow: 0 18px 40px rgba(0,0,0,.4);
}
.laptop-keys {
  height: 54px;
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, #3a404c 0 14px, #2a2f38 14px 16px),
    repeating-linear-gradient(180deg, #3a404c 0 12px, #2a2f38 12px 14px);
  opacity: .55;
  margin-bottom: 10px;
}
.laptop-track {
  width: 90px; height: 48px;
  margin: 0 auto;
  border-radius: 8px;
  background: #151820;
  border: 1px solid #3a404c;
}
.laptop-hint { text-align: center; margin-top: .85rem; }
.biz-row {
  border-bottom: 1px solid var(--line);
  padding: .9rem 0;
}
.biz-row.is-remote { opacity: .92; }
.biz-row.is-locked { opacity: .65; }
.biz-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .85rem;
  margin-top: .65rem;
}
a.biz-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  transition: border-color .15s ease, transform .15s ease;
}
a.biz-card:hover {
  border-color: var(--red);
  transform: translateY(-2px);
}
a.biz-card.is-remote { opacity: .92; }
a.biz-card.is-locked { opacity: .65; }
.biz-card-thumb {
  min-height: 110px;
  background-size: cover;
  background-position: center;
  background-color: #151820;
  border-bottom: 1px solid var(--line);
}
.biz-card-thumb-sm {
  min-height: 56px;
  width: 72px;
  flex-shrink: 0;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.biz-card-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem .8rem .85rem;
}
.biz-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.biz-card-cta {
  margin-top: .25rem;
  font-size: .82rem;
  color: var(--red);
  letter-spacing: .02em;
}
.biz-type-thumbs {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.biz-type-thumb {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: .65rem;
  align-items: start;
}
.biz-market-row {
  grid-template-columns: 72px 1.4fr .7fr auto;
  align-items: center;
  gap: .65rem;
}
.biz-detail-hero {
  min-height: 200px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 1rem;
}
.biz-detail-shade {
  min-height: 200px;
  padding: 1.25rem 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(8,10,14,.15), rgba(8,10,14,.88));
}
.biz-detail-shade h2 {
  margin: .35rem 0 0;
  font-size: 1.55rem;
}
.biz-detail-shade p { margin: .25rem 0 0; color: var(--muted); }
.biz-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 1rem;
}
@media (max-width: 860px) {
  .biz-detail-grid { grid-template-columns: 1fr; }
  .biz-market-row { grid-template-columns: 56px 1fr; }
  .biz-market-row > :nth-child(3),
  .biz-market-row > :nth-child(4) { grid-column: 2; }
}

/* Shared trade look (Motors / Docks / Freight) — matches Businesses cards */
.trade-hero {
  min-height: 160px;
  border-radius: 12px;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-bottom: 1rem;
}
.trade-hero-shade {
  min-height: 160px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: linear-gradient(180deg, rgba(8,10,14,.2), rgba(8,10,14,.9));
}
.trade-hero-shade h3 {
  margin: .2rem 0 0;
  font-size: 1.25rem;
  text-transform: none;
  letter-spacing: 0;
}
.trade-hero-shade p { margin: .2rem 0 0; color: var(--muted); }
.trade-card-grid,
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .85rem;
  margin-top: .65rem;
  width: 100%;
  min-width: 0;
}
.fleet-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .55rem;
}
.fleet-row {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(165deg, #171a20 0%, #121418 100%);
}
.fleet-shot {
  min-height: 100%;
  min-height: 118px;
  background: #151820 center/cover no-repeat;
  border-right: 1px solid rgba(255,255,255,.04);
}
.fleet-row-body { padding: .65rem .75rem .7rem; min-width: 0; display: flex; flex-direction: column; gap: .28rem; }
.fleet-row-body strong { font-size: 1rem; letter-spacing: .01em; }
.fleet-row-meta { font-size: .78rem; color: var(--muted, #9aa3ad); }
.fleet-row-body .trade-card-actions { margin-top: .2rem; flex-wrap: wrap; gap: .35rem; }
.fleet-id { opacity: .55; font-weight: 500; font-size: .78rem; }
@media (max-width: 900px) {
  .fleet-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .fleet-row { grid-template-columns: 88px minmax(0, 1fr); }
  .fleet-shot { min-height: 96px; }
}
.fleet-yard h3 { margin: 0 0 .15rem; }
.parts-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: linear-gradient(160deg, #151820, #0c0e12) center/cover no-repeat;
  border: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .parts-row { grid-template-columns: 56px 1fr !important; }
  .parts-row > :nth-child(3) { display: none; }
}
@media (max-width: 1100px) {
  .trade-card-grid, .fleet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .trade-card-grid, .fleet-grid { grid-template-columns: 1fr; }
}
.fleet-jumps { display: flex; flex-wrap: wrap; gap: .45rem; margin: -.2rem 0 .9rem; }
.trade-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  transition: border-color .15s ease, transform .15s ease;
}
.mooring-card {
  overflow: visible;
}
.mooring-cog {
  position: absolute;
  top: 0.55rem;
  right: 0.55rem;
  z-index: 3;
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 8px;
  background: rgba(12, 16, 22, .88);
  color: rgba(232, 210, 140, .92);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.mooring-cog:hover {
  border-color: rgba(224, 185, 58, .55);
  color: #f0d78a;
}
.mooring-card .trade-card-body > strong {
  padding-right: 2.4rem;
}
.mooring-settings-dialog .cs-dialog-actions {
  justify-content: flex-end;
}
.trade-card:hover { border-color: rgba(199,58,50,.55); }
a.trade-card {
  text-decoration: none;
  color: inherit;
}
a.trade-card:hover { transform: translateY(-2px); border-color: var(--red); }
a.trade-card.is-remote { opacity: .78; }
a.trade-card.is-remote .trade-card-thumb { filter: grayscale(.35); }
.trade-card-thumb {
  min-height: 108px;
  background-size: cover;
  background-position: center;
  background-color: #151820;
  border-bottom: 1px solid var(--line);
}
.trade-card-body {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .75rem .8rem .85rem;
  flex: 1;
}
.trade-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.trade-card-cta {
  margin-top: auto;
  padding-top: .35rem;
  font-size: .82rem;
  color: var(--red);
}
.trade-card-actions {
  margin-top: .45rem;
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.wiki-toc { margin-bottom: 1rem; }
.wiki-stack {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.wiki-bullets {
  margin: .35rem 0 0;
  padding-left: 1.15rem;
  color: var(--muted);
  line-height: 1.45;
}
.wiki-bullets li { margin: .28rem 0; }
.wiki-section:target {
  border-color: rgba(199,58,50,.55);
  box-shadow: 0 0 0 1px rgba(199,58,50,.2);
}
.showroom-ledger {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin-top: .55rem;
}
.showroom-ledger-item {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: rgba(255,255,255,.02);
  overflow: hidden;
}
.showroom-ledger-item[open] {
  border-color: rgba(199,58,50,.45);
}
.showroom-ledger-item > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: .65rem;
  align-items: center;
  padding: .45rem .55rem;
}
.showroom-ledger-item > summary::-webkit-details-marker { display: none; }
.showroom-ledger-item > summary::after {
  content: "+";
  color: #5c6674;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 .15rem;
}
.showroom-ledger-item[open] > summary::after { content: "–"; }
.showroom-ledger-thumb {
  width: 64px;
  height: 44px;
  border-radius: 6px;
  background-size: cover;
  background-position: center;
  background-color: #151820;
  border: 1px solid var(--line);
}
.showroom-ledger-summary-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.showroom-ledger-summary-text strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.showroom-ledger-body {
  padding: .15rem .75rem .85rem;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
@media (max-width: 560px) {
  .showroom-ledger-item > summary {
    grid-template-columns: 52px 1fr auto;
  }
  .showroom-ledger-thumb {
    width: 52px;
    height: 38px;
  }
}
.trade-market-row {
  display: grid;
  grid-template-columns: 72px 1.4fr .7fr auto;
  gap: .65rem;
  align-items: center;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
}
.trade-market-row:last-child { border-bottom: 0; }
.trade-catalog-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.trade-catalog-item {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: .65rem;
  align-items: start;
}
@media (max-width: 720px) {
  .trade-market-row { grid-template-columns: 56px 1fr; }
  .trade-market-row > :nth-child(3),
  .trade-market-row > :nth-child(4) { grid-column: 2; }
}

.ticket-thread {
  display: flex;
  flex-direction: column;
  gap: .65rem;
}
.ticket-msg {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .75rem .85rem;
  background: rgba(255,255,255,.02);
}
.ticket-msg.is-staff {
  border-color: rgba(199,58,50,.35);
  background: rgba(199,58,50,.06);
}
.ticket-msg.is-player {
  border-color: rgba(255,255,255,.08);
}
@media (max-width: 800px) {
  .laptop-apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .laptop-screen { min-height: 360px; }
}
@media (max-width: 720px) {
  .transit-scene, .taxi-ride { min-height: 300px; }
  .taxi-timer { font-size: 2rem; }
}
.escape-game { margin: 1rem 0; }
.escape-track {
  position: relative;
  height: 28px;
  border-radius: 999px;
  background: #1a1a1a;
  border: 1px solid #333;
  overflow: hidden;
  margin-bottom: .6rem;
}
.escape-zone {
  position: absolute;
  left: 40%;
  width: 20%;
  top: 0; bottom: 0;
  background: rgba(46,160,67,.45);
  box-shadow: inset 0 0 12px rgba(46,160,67,.5);
}
.escape-needle {
  position: absolute;
  top: 2px; bottom: 2px;
  width: 4px;
  margin-left: -2px;
  left: 0;
  background: #f0b429;
  border-radius: 2px;
  box-shadow: 0 0 8px #f0b429;
}
.home-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 860px) {
  .home-goals, .crime-stages { grid-template-columns: 1fr; }
}
.attack-log {
  margin: .75rem 0 1rem;
  padding: .7rem .85rem;
  border: 1px solid rgba(199,58,50,.35);
  border-radius: 10px;
  background: rgba(199,58,50,.08);
}
.attack-log ol {
  margin: .4rem 0 0 1.1rem;
  padding: 0;
}
.attack-log li { margin: .2rem 0; font-size: .92rem; }
.feed-line.is-war {
  border-left: 3px solid #c73a32;
  padding-left: .55rem;
  animation: feedWarIn .55s ease;
}
.feed-war-tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  color: #ffb4b4;
  background: rgba(199,58,50,.25);
  border: 1px solid rgba(199,58,50,.45);
  border-radius: 4px;
  padding: .1rem .35rem;
  margin-right: .25rem;
  vertical-align: middle;
}
@keyframes feedWarIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.banner.travel {
  background: rgba(240,180,41,.12);
  border: 1px solid rgba(240,180,41,.35);
  color: #f5d98a;
}
.district-poly.is-war {
  stroke: #c73a32 !important;
  filter: drop-shadow(0 0 8px rgba(199,58,50,.55));
}
.home-hero {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1.4rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background:
    linear-gradient(135deg, rgba(199,58,50,.18), transparent 42%),
    linear-gradient(180deg, #141820, #0b0e14);
  position: relative;
  overflow: hidden;
}
.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent, transparent 48px, rgba(255,255,255,.02) 48px, rgba(255,255,255,.02) 49px);
  pointer-events: none;
}
.home-kicker {
  margin: 0 0 .35rem;
  color: var(--gold, #f0b429);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
}
.home-hero h1 {
  margin: 0 0 .4rem;
  font-family: var(--display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  letter-spacing: .04em;
  line-height: .95;
}
.home-hero-copy { position: relative; z-index: 1; }
.home-cta { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.home-hero-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  align-content: start;
}
.home-metric {
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  padding: .55rem .7rem;
}
.home-metric span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.home-metric strong { font-size: 1.15rem; }
.home-sheet {
  display: grid;
  grid-template-columns: minmax(16rem, 22rem) 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid rgba(240, 180, 41, .28);
  border-radius: 14px;
  background: #101318;
}
.home-sheet-who {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border-radius: 10px;
  padding: 1rem 1rem .9rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(5,6,8,.1) 0%, rgba(5,6,8,.35) 35%, rgba(5,6,8,.92) 100%),
    url("../img/landing/hero.jpg") center 40% / cover no-repeat;
}
.home-sheet-who h1,
.home-sheet-who p,
.home-sheet-who .sheet-bars,
.home-sheet-who .home-cta { position: relative; }
.home-sheet-who h1 { margin: .15rem 0 .25rem; font-size: 1.8rem; text-shadow: 0 6px 18px rgba(0,0,0,.7); }
.sheet-bars { display: grid; gap: .45rem; margin: .75rem 0; }
.sheet-bars span { display: block; color: var(--muted); font-size: .75rem; margin-bottom: .2rem; }
.sheet-bar { height: 8px; border-radius: 99px; background: #232830; overflow: hidden; }
.sheet-bar i { display: block; height: 100%; }
.sheet-bar.life i { background: #6fbf73; }
.sheet-bar.heat i { background: #c45a4a; }
.home-sheet-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; align-content: start; }
.home-sheet-grid article {
  padding: .7rem .75rem;
  border-radius: 10px;
  background: #181c22;
}
.home-sheet-grid article.span-2 { grid-column: span 2; }
.home-sheet-grid span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.home-sheet-grid strong { display: block; margin: .2rem 0; }
.home-sheet-grid em { display: block; color: var(--muted); font-style: normal; font-size: .82rem; }

.city-skyline {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  margin-bottom: .9rem;
  padding: 1.4rem 1.4rem 1.35rem;
  border-radius: 12px;
  border: 1px solid rgba(232, 160, 32, .22);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background:
    linear-gradient(180deg, rgba(5,6,8,.05) 0%, rgba(5,6,8,.2) 40%, rgba(5,6,8,.88) 100%),
    url("../img/landing/hero.jpg") center 42% / cover no-repeat;
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.city-skyline h2 {
  font-family: var(--display);
  font-size: clamp(2.8rem, 7vw, 5rem);
  line-height: .88;
  margin: .1rem 0 .4rem;
  letter-spacing: .02em;
  text-shadow: 0 8px 28px rgba(0,0,0,.65);
}
.city-skyline .home-kicker { color: #f0d78c; text-shadow: 0 2px 8px rgba(0,0,0,.8); }
.city-skyline.is-shot {
  background:
    linear-gradient(180deg, rgba(5,6,8,.12) 0%, rgba(5,6,8,.28) 42%, rgba(5,6,8,.9) 100%),
    var(--shot) center 42% / cover no-repeat;
}
.city-doors.is-row {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 1rem;
}
.city-doors.is-row.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.city-skyline p:last-child { margin: 0; color: #d7dde5; }
.city-districts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.city-district {
  background: #101318;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: .8rem .75rem .55rem;
  min-width: 0;
}
.city-district.is-wide { grid-column: 1 / -1; }
.city-district.is-half { grid-column: span 2; }
.city-district h3 {
  margin: 0 .35rem .45rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sodium);
}
.city-doors { display: grid; gap: .2rem; }
.city-district.is-wide .city-doors { grid-template-columns: 1fr 1fr; }
.city-door {
  display: flex;
  gap: .7rem;
  align-items: center;
  text-decoration: none;
  color: inherit;
  padding: .5rem .55rem;
  border-radius: 8px;
  border: 1px solid transparent;
}
.city-door:hover {
  border-color: rgba(232, 160, 32, .45);
  background: rgba(232, 160, 32, .07);
}
.city-door i {
  width: 2.15rem;
  height: 2.15rem;
  display: grid;
  place-items: center;
  flex: none;
  border-radius: 8px;
  background: #1b2028;
  color: var(--sodium);
  font-style: normal;
  font-size: .95rem;
}
.city-door strong { display: block; font-size: .95rem; }
.city-door em { display: block; color: var(--muted); font-style: normal; font-size: .8rem; }
.city-door.is-here-board {
  border-color: rgba(240, 180, 41, .55);
  background: rgba(240, 180, 41, .08);
}
@media (max-width: 1100px) {
  .city-districts { grid-template-columns: 1fr 1fr; }
  .city-district.is-half { grid-column: auto; }
}
@media (max-width: 860px) {
  .city-districts, .city-district.is-wide .city-doors, .city-doors.is-row, .city-doors.is-row.is-five, .crime-mosaic, .shelf-card { grid-template-columns: 1fr; }
  .city-district.is-wide, .city-district.is-half { grid-column: auto; }
  .crime-mosaic { grid-template-columns: 1fr; }
  .city-skyline { padding-bottom: .85rem; }
  .city-skyline h2 { font-size: 1.55rem; margin-bottom: .25rem; }
  .city-district { margin-bottom: .55rem; }
  .city-district h3 { font-size: .78rem; margin-bottom: .35rem; letter-spacing: .04em; }
  .city-door {
    min-height: 3.1rem;
    padding: .55rem .65rem;
    gap: .55rem;
  }
  .city-door strong { font-size: 1rem; }
  .city-door em { font-size: .78rem; }
  .work-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: .35rem 0 .45rem;
    margin: 0 0 .75rem;
    background: linear-gradient(180deg, rgba(12,14,18,.98), rgba(12,14,18,.92));
    gap: .4rem;
  }
  .work-tab {
    min-height: 2.6rem;
    padding: .55rem .85rem;
    font-size: .92rem;
    flex: 1 1 auto;
    justify-content: center;
  }
  .season-beat { font-size: .78rem; }
}
.crime-mosaic {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
.crime-tile {
  position: relative;
  min-height: 210px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(232, 160, 32, .18);
  background: #0c0e12 center/cover no-repeat;
  display: flex;
  align-items: flex-end;
  color: inherit;
}
.crime-tile-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,6,8,.05) 20%, rgba(5,6,8,.88) 100%);
}
.crime-tile.is-locked .crime-tile-shade { background: linear-gradient(180deg, rgba(5,6,8,.35), rgba(5,6,8,.92)); }
.crime-tile-body { position: relative; padding: .85rem .9rem .8rem; width: 100%; }
.crime-tile h4 { margin: 0 0 .15rem; font-size: 1.05rem; }
.crime-tile p { margin: 0; color: #c9c3b4; font-size: .82rem; }
.crime-nerve {
  position: absolute;
  top: .65rem;
  right: .65rem;
  z-index: 1;
  background: rgba(8,9,12,.72);
  border: 1px solid rgba(232, 160, 32, .45);
  color: #f0d78c;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .75rem;
}
.crime-lock {
  position: absolute;
  top: .65rem;
  left: .65rem;
  z-index: 1;
  background: rgba(8,9,12,.78);
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .75rem;
}
.crime-tile form { margin-top: .55rem; }
.crime-tile .btn { width: 100%; }
.home-statline {
  grid-column: 1 / -1;
  font-size: .78rem;
  color: var(--muted);
  padding: .35rem .1rem;
}
.home-quick {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .55rem;
  margin-bottom: 1rem;
}
.home-tile {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  padding: .75rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #151a22, #0e1218);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease;
}
.home-tile:hover { border-color: rgba(199,58,50,.55); transform: translateY(-2px); }
.home-tile i {
  font-style: normal;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .04em;
  color: var(--red, #c73a32);
}
.home-tile strong { font-size: .95rem; }
.home-tile span { color: var(--muted); font-size: .75rem; }
.feed-panel .feed-line {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  font-size: .92rem;
}
.feed-panel .feed-line:last-child { border-bottom: 0; }
.home-map-block { margin: 0 0 1rem; }
.home-map #city-map { height: min(58vh, 480px); }
.home-map-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--line);
}
.home-map-stats div {
  background: rgba(0,0,0,.25);
  border-radius: 8px;
  padding: .45rem .55rem;
}
.home-map-stats span {
  display: block;
  color: var(--muted);
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.home-map-stats strong { font-size: .95rem; }
.district-card h3 { margin-top: 0; }
.chip-row,
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: .65rem 0 .55rem;
  align-items: center;
}
.tag-row .tag,
.chip-row .tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(232, 214, 170, .16);
  background: rgba(232, 160, 32, .08);
  padding: .35rem .7rem;
  border-radius: 4px;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.25;
  color: #ddd6c6;
  white-space: nowrap;
  max-width: 100%;
}
.quote-card {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 1rem;
  align-items: center;
  background: #10141b;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.quote-card .art {
  height: 100%;
  min-height: 110px;
  background:
    linear-gradient(135deg, rgba(0,0,0,.2), rgba(0,0,0,.65)),
    radial-gradient(circle at 30% 30%, #4a5568, #111);
}
.quote-card blockquote {
  margin: 0;
  font-family: var(--display);
  font-size: 1.5rem;
  letter-spacing: .03em;
  padding-right: 1rem;
}

.form-grid { display: grid; gap: .7rem; }
label { display: block; color: var(--muted); font-size: .85rem; margin-bottom: .25rem; }
input, select, textarea {
  width: 100%;
  background: #0c1118;
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  border-radius: 8px;
  padding: .65rem .75rem;
  font: inherit;
  color-scheme: dark;
}
select {
  background-color: #121a24;
  color: #f3f6fa;
}
select option,
select optgroup {
  background-color: #121a24;
  color: #f3f6fa;
}
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .8rem; }

.public-header, .public-footer {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.public-main { max-width: 1100px; margin: 0 auto; padding: 1rem; }
body.is-landing {
  background: #050608;
}
body.is-landing .public-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 30;
  max-width: none;
  padding: 1rem clamp(1rem, 4vw, 2.5rem);
  background: linear-gradient(180deg, rgba(0,0,0,.78), transparent);
}
body.is-landing .public-main {
  max-width: none;
  padding: 0;
}
body.is-landing .public-footer {
  max-width: none;
  padding: 1.4rem clamp(1rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  color: var(--muted);
  background: #050608;
}
.land-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2rem);
}

/* ── Hero: real full-bleed photo ── */
.land-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  align-items: end;
  overflow: hidden;
}
.land-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: #0a0c10;
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
}
.land-hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
  display: block;
  transform: scale(1.08);
  animation: landKen 28s ease-in-out infinite alternate;
  filter: saturate(1.05) contrast(1.08);
}
.land-hero-photo[hidden],
.land-hero-photo.is-broken {
  display: none !important;
}
@keyframes landKen {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to { transform: scale(1.14) translate3d(-1.5%, -1%, 0); }
}
.land-hero-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,6,8,.78) 0%, rgba(5,6,8,.35) 42%, rgba(5,6,8,.2) 70%, rgba(5,6,8,.55) 100%),
    linear-gradient(180deg, rgba(5,6,8,.45) 0%, rgba(5,6,8,.15) 35%, rgba(5,6,8,.55) 70%, rgba(5,6,8,.96) 100%),
    radial-gradient(700px 320px at 75% 30%, rgba(199,58,50,.22), transparent 60%);
  pointer-events: none;
}
.land-rain {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    105deg,
    transparent 0 11px,
    rgba(200,220,255,.04) 11px 12px
  );
  animation: landRain .55s linear infinite;
  opacity: .55;
  mix-blend-mode: screen;
  pointer-events: none;
}
@keyframes landRain {
  from { background-position: 0 0; }
  to { background-position: 18px 40px; }
}
.land-stamp {
  position: absolute;
  top: clamp(4.6rem, 10vh, 5.8rem);
  left: clamp(0.85rem, 3vw, 2rem);
  z-index: 3;
  margin: 0;
  padding: 0.35rem 0.7rem;
  border: 2px solid rgba(224, 185, 58, 0.78);
  color: rgba(224, 185, 58, 0.88);
  font-family: var(--display);
  font-size: clamp(0.72rem, 1.6vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 0.28em;
  line-height: 1;
  text-indent: 0.28em;
  text-transform: uppercase;
  transform: rotate(-14deg);
  transform-origin: left center;
  background: rgba(8, 10, 14, 0.28);
  box-shadow: inset 0 0 0 1px rgba(224, 185, 58, 0.18);
  pointer-events: none;
  user-select: none;
  opacity: 0.92;
}
.game-stamp {
  display: inline-flex;
  align-items: center;
  margin-left: 0.45rem;
  padding: 0.18rem 0.42rem;
  border: 1px solid rgba(224, 185, 58, 0.55);
  color: rgba(224, 185, 58, 0.9);
  font-family: var(--display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1;
  text-indent: 0.12em;
  text-transform: uppercase;
  background: rgba(8, 10, 14, 0.45);
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
}
.game-stamp--soon {
  margin-left: 0.55rem;
  border-color: rgba(196, 54, 54, 0.85);
  color: #f07171;
  background: rgba(70, 12, 12, 0.55);
  box-shadow: inset 0 0 0 1px rgba(240, 113, 113, 0.18);
  transform: rotate(-8deg);
  letter-spacing: 0.14em;
  font-size: 0.68rem;
  padding: 0.28rem 0.5rem;
}
.casino-desk-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.55rem;
}
.btn.is-disabled,
a.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
  box-shadow: none;
  transform: none;
  filter: grayscale(0.35);
}
@media (max-width: 720px) {
  .game-stamp:not(.game-stamp--soon) {
    display: none;
  }
}
.land-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 8rem clamp(1rem, 4vw, 2rem) 5.5rem;
  animation: landHeroIn .9s ease-out both;
}
@keyframes landHeroIn {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.land-kicker {
  margin: 0 0 .55rem;
  color: #e0b93a;
  font-size: .8rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  text-shadow: 0 2px 12px rgba(0,0,0,.65);
}
.land-brand {
  font-family: var(--display);
  font-size: clamp(4.2rem, 14vw, 8.5rem);
  line-height: .84;
  letter-spacing: .03em;
  margin: 0 0 .9rem;
  max-width: 11ch;
  text-shadow: 0 12px 48px rgba(0,0,0,.7);
}
.land-brand span { color: var(--sodium); }
.land-lead {
  margin: 0;
  max-width: 36ch;
  color: #e8edf3;
  font-size: clamp(1.1rem, 2.3vw, 1.35rem);
  line-height: 1.45;
  text-shadow: 0 4px 20px rgba(0,0,0,.55);
}
.land-cta {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem;
  margin-top: 1.5rem;
}
.land-btn-primary {
  box-shadow: 0 0 0 1px rgba(232,160,32,.45), 0 10px 32px rgba(232,160,32,.28);
  animation: landCtaGlow 3.2s ease-in-out infinite;
}
@keyframes landCtaGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(232,160,32,.4), 0 10px 28px rgba(232,160,32,.22); }
  50% { box-shadow: 0 0 0 1px rgba(232,160,32,.65), 0 14px 40px rgba(232,160,32,.4); }
}
.land-live {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 1.15rem 0 0;
  color: #b7c0cb;
  font-size: .95rem;
}
.land-live i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2ecc71;
  box-shadow: 0 0 0 0 rgba(46,204,113,.55);
  animation: landLive 1.8s ease-out infinite;
}
@keyframes landLive {
  0% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
  70% { box-shadow: 0 0 0 10px rgba(46,204,113,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
.land-scroll {
  position: absolute;
  left: 50%;
  bottom: 1.2rem;
  z-index: 3;
  transform: translateX(-50%);
  color: #c9d2dc;
  text-decoration: none;
  font-size: 1.4rem;
  opacity: .7;
  animation: landBounce 2s ease-in-out infinite;
}
@keyframes landBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: .45; }
  50% { transform: translateX(-50%) translateY(6px); opacity: .9; }
}

/* ── Full-bleed story bands ── */
.land-band {
  position: relative;
  min-height: min(72vh, 620px);
  display: grid;
  align-items: end;
  overflow: hidden;
  background: #0a0c10 var(--band-img) center / cover no-repeat;
  isolation: isolate;
}
.land-band-shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(5,6,8,.88) 0%, rgba(5,6,8,.55) 48%, rgba(5,6,8,.2) 100%),
    linear-gradient(180deg, rgba(5,6,8,.2), rgba(5,6,8,.75));
  pointer-events: none;
}
.land-band-right .land-band-shade {
  background:
    linear-gradient(270deg, rgba(5,6,8,.88) 0%, rgba(5,6,8,.55) 48%, rgba(5,6,8,.2) 100%),
    linear-gradient(180deg, rgba(5,6,8,.2), rgba(5,6,8,.75));
}
.land-band-right .land-band-inner {
  margin-left: auto;
  text-align: right;
}
.land-band-right .land-sub { margin-left: auto; }
.land-band-right .land-band-cta { margin-left: auto; }
.land-band-inner {
  position: relative;
  z-index: 1;
  padding: 4.5rem 0 3.5rem;
  max-width: 34rem;
}
.land-band h2 {
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  letter-spacing: .04em;
  line-height: .95;
  margin: 0 0 .55rem;
  text-shadow: 0 8px 28px rgba(0,0,0,.55);
}
.land-sub {
  max-width: 42ch;
  color: #c5ced8;
  margin: 0 0 1.2rem;
  font-size: 1.08rem;
  line-height: 1.5;
}
.land-band-cta { display: inline-flex; }

/* ── Streetlife strip ── */
.land-streetlife {
  padding: 3.5rem 0 2.5rem;
  background:
    radial-gradient(700px 240px at 10% 0%, rgba(56,100,160,.12), transparent 60%),
    linear-gradient(180deg, #0a0e14, #070a10);
  border-top: 1px solid rgba(80,100,130,.2);
  border-bottom: 1px solid rgba(80,100,130,.15);
}
.land-streetlife-title {
  font-family: var(--display);
  font-size: clamp(2rem, 4.5vw, 3rem);
  letter-spacing: .04em;
  margin: 0 0 1.4rem;
  max-width: 14ch;
}
.land-streetlife-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
}
.land-streetlife-grid blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.land-streetlife-grid blockquote p {
  margin: 0 0 .55rem;
  color: #c5ced8;
  font-size: 1.05rem;
  line-height: 1.45;
  max-width: 32ch;
}
.land-streetlife-grid cite {
  font-style: normal;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── Property gallery ── */
.land-gallery { padding: 0; }
.land-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}
.land-gallery-shot {
  position: relative;
  margin: 0;
  min-height: min(38vh, 280px);
  background-size: cover;
  background-position: center;
  overflow: hidden;
  filter: saturate(.9) contrast(1.05);
  transition: filter .35s ease, transform .45s ease;
}
.land-gallery-shot:hover {
  filter: saturate(1.05) contrast(1.08);
  transform: scale(1.02);
  z-index: 1;
}
.land-gallery-shot::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.82));
}
.land-gallery-shot figcaption {
  position: absolute;
  left: 1rem; right: 1rem; bottom: .9rem;
  z-index: 1;
  font-family: var(--display);
  letter-spacing: .06em;
  font-size: 1.35rem;
}

/* ── Close ── */
.land-close {
  position: relative;
  overflow: hidden;
  padding: 5rem 0 4.5rem;
}
.land-close-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  filter: saturate(.7) brightness(.35);
  transform: scale(1.05);
}
.land-close-bg::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 280px at 20% 40%, rgba(199,58,50,.28), transparent 65%),
    linear-gradient(180deg, rgba(5,6,8,.7), rgba(5,6,8,.92));
}
.land-close-inner { position: relative; z-index: 1; }
.land-close h2 {
  font-family: var(--display);
  font-size: clamp(2.2rem, 5.5vw, 3.4rem);
  letter-spacing: .04em;
  margin: 0 0 .55rem;
  max-width: 16ch;
}
.land-close .land-cta { justify-content: flex-start; }

@media (max-width: 900px) {
  .land-streetlife-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .land-gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .land-band { min-height: 58vh; }
  .land-band-right .land-band-inner { text-align: left; margin-left: 0; }
  .land-band-right .land-sub,
  .land-band-right .land-band-cta { margin-left: 0; }
  .land-band-shade,
  .land-band-right .land-band-shade {
    background:
      linear-gradient(180deg, rgba(5,6,8,.25), rgba(5,6,8,.88)),
      linear-gradient(90deg, rgba(5,6,8,.7), rgba(5,6,8,.35));
  }
}
@media (max-width: 560px) {
  .land-hero-inner { padding-bottom: 4.5rem; }
  .land-gallery-shot { min-height: 160px; }
}

/* Full-bleed city backdrop behind login / register / onboarding */
body.is-public:has(.auth-shell) {
  background: #050608;
}
body.is-public:has(.auth-shell) .public-main {
  max-width: none;
  padding: 0;
}
body.is-public:has(.auth-shell) .public-header {
  position: relative;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0,0,0,.72), transparent);
}
body.is-public:has(.auth-shell) .public-footer {
  position: relative;
  z-index: 2;
  background: rgba(5, 6, 8, .92);
  border-top: 1px solid var(--line);
}
.auth-shell {
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 5.5rem);
  display: grid;
  place-items: center;
  padding: 2.25rem 1rem 3rem;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(5,6,8,.55) 0%, rgba(5,6,8,.78) 45%, rgba(5,6,8,.92) 100%),
    radial-gradient(ellipse 80% 55% at 50% 18%, rgba(232,160,32,.2), transparent 62%),
    url("../img/landing/hero.jpg") center 38% / cover no-repeat;
}
.auth-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 22%, transparent 78%, rgba(0,0,0,.45)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.045'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 0;
}
.auth-shell > * { position: relative; z-index: 1; }
.auth-card {
  position: relative;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  padding: 1.75rem 1.45rem 1.5rem;
  overflow: hidden;
  background:
    linear-gradient(165deg, rgba(232,160,32,.12), transparent 40%),
    linear-gradient(180deg, rgba(28,31,36,.96) 0%, rgba(14,16,18,.98) 100%);
  border: 1px solid rgba(232, 160, 32, .32);
  border-radius: 10px;
  box-shadow: var(--shadow), var(--glow-sodium);
  animation: bandRise .45s ease both;
  backdrop-filter: blur(6px);
}
.logo.auth-brand,
.auth-brand {
  margin: 0 0 .9rem;
  font-size: clamp(1.15rem, 5.5vw, 1.4rem);
  line-height: 1.1;
  text-align: center;
  letter-spacing: .05em;
  white-space: normal !important;
  max-width: 100%;
}
.logo.auth-brand::after {
  left: 20%;
  right: 20%;
}
.auth-eyebrow {
  margin: 0 0 .35rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sodium);
}
.auth-title {
  margin: 0 0 .55rem;
  font-family: var(--display);
  font-size: clamp(1.55rem, 4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: .02em;
}
.auth-lead {
  margin: 0 0 1.15rem;
  line-height: 1.45;
}
.auth-links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .55rem;
  align-items: center;
  margin: .95rem 0 0;
}
.auth-age {
  margin-left: auto;
  opacity: .75;
  font-size: .85rem;
}
.auth-secondary-form { margin-top: .95rem; }
.auth-cancel { margin-top: .85rem; }
.auth-confirm {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(232, 214, 170, .12);
}
.auth-confirm summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .92rem;
  font-weight: 600;
  list-style: none;
}
.auth-confirm summary::-webkit-details-marker { display: none; }
.auth-confirm summary::before {
  content: "+";
  display: inline-block;
  width: 1.1rem;
  color: var(--sodium);
  font-weight: 800;
}
.auth-confirm[open] summary::before { content: "–"; }
.auth-confirm summary:hover { color: var(--bone); }
.auth-confirm-body {
  margin-top: .85rem;
  padding: .85rem .9rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, .22);
  border: 1px solid rgba(255, 255, 255, .05);
}
.auth-card .btn { width: 100%; }
.auth-card .btn-sm { width: auto; }
.auth-card .form-grid { gap: .85rem; }

.map-noir .leaflet-tile-pane {
  filter: grayscale(1) contrast(1.15) brightness(0.55) saturate(0.2);
}
.map-noir .leaflet-container { background: #07090c; }
.war-banner {
  background: linear-gradient(90deg, #4a1515, #3a2a10);
  border: 1px solid #8a3a2a;
  color: #ffd0a8;
  padding: .55rem .75rem;
  border-radius: 8px;
  font-weight: 700;
}
.mayor-tag {
  display: inline-block;
  margin-left: .35rem;
  padding: .1rem .4rem;
  border-radius: 4px;
  background: #6a1b9a;
  color: #fff;
  font-size: .7rem;
  letter-spacing: .06em;
  vertical-align: middle;
}
.city-feed-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--line);
  animation: feedIn .45s ease both;
}
@keyframes feedIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  right: auto;
  bottom: auto;
  z-index: 120;
  min-width: min(360px, calc(100vw - 2rem));
  max-width: min(480px, calc(100vw - 2rem));
  padding: .9rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #12161e;
  box-shadow: var(--shadow);
  transform: translate(-50%, calc(-50% + 12px));
  opacity: 0;
  transition: .3s ease;
  text-align: center;
}
.toast.is-in { transform: translate(-50%, -50%); opacity: 1; }
.cs-tutorial-card {
  width: min(680px, calc(100vw - 2rem)) !important;
  max-width: min(680px, calc(100vw - 2rem));
  padding: 1.65rem 1.75rem 1.35rem !important;
  border: 1px solid rgba(199,58,50, .35) !important;
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(199,58,50, .18), transparent 55%),
    linear-gradient(180deg, #1c2430 0%, #121820 100%) !important;
}
.cs-tutorial-card .cs-dialog-title {
  font-family: var(--display);
  font-size: 1.85rem;
  letter-spacing: .04em;
  color: #fff !important;
  margin: 0 0 .35rem;
  line-height: 1.1;
}
.cs-tutorial-card .cs-dialog-body {
  min-height: 7.5rem;
  color: #d5dbe3;
}
.cs-tutorial-progress {
  height: 4px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
  margin: 0 0 .75rem;
}
.cs-tutorial-progress > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #e0554c, #c73a32);
  border-radius: 99px;
}
.cs-tutorial-step {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ff8a93;
  margin-bottom: .55rem;
}
.cs-tutorial-copy {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.55;
  color: #f3f4f6 !important;
  font-family: var(--font);
  font-style: normal;
}
.cs-tutorial-check {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 1.15rem 0 0;
  padding: .65rem .75rem;
  border-radius: 10px;
  background: rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.08);
  font-size: .9rem;
  color: #b7c0ca;
  cursor: pointer;
}
.cs-tutorial-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--red);
  flex-shrink: 0;
}
.cs-dialog.cs-tutorial-open .cs-dialog-actions {
  margin-top: .35rem;
  gap: .65rem;
}
.cs-dialog.cs-tutorial-open .cs-dialog-actions .btn {
  min-width: 6rem;
  padding: .65rem 1.2rem;
  font-size: .95rem;
}
.cs-dialog.cs-tutorial-open .cs-dialog-actions .btn-ghost {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  color: #e8edf3 !important;
  box-shadow: none !important;
}

/* Street fight arena (Torn-style) */
.fight-arena {
  margin-top: .65rem;
  padding: 1rem .95rem .9rem;
  border-radius: 14px;
  border: 1px solid rgba(199,58,50,.38);
  background:
    radial-gradient(460px 180px at 50% -10%, rgba(199,58,50,.2), transparent 58%),
    radial-gradient(280px 140px at 80% 100%, rgba(59,130,246,.08), transparent 50%),
    linear-gradient(180deg, #1a212c, #0e131a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 16px 40px rgba(0,0,0,.28);
}
.fight-top {
  display: grid;
  grid-template-columns: 1fr minmax(140px, 180px) 1fr;
  gap: .75rem;
  align-items: start;
}
.fight-fighter { text-align: center; }
.fight-name { font-weight: 800; font-size: .95rem; margin-bottom: .35rem; }
.fight-hp-bar {
  height: 12px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.fight-hp-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #2bb866, #1f8f4e);
  transition: width .25s ease;
}
.fight-fighter.is-them .fight-hp-bar > span {
  background: linear-gradient(90deg, #e0554c, #7a221e);
}
.fight-hp-label { margin-top: .3rem; font-size: .8rem; color: var(--muted); font-weight: 700; }
.fight-body-wrap { text-align: center; }
.fight-person {
  position: relative;
  width: 100%;
  max-width: 150px;
  margin: 0 auto;
}
.fight-person-svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.45));
}
.fight-body {
  position: relative;
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  aspect-ratio: 3 / 5;
}
.fight-zone {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  font-size: .55rem;
  font-weight: 800;
  color: #fff;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.fight-zone.is-hit {
  background: rgba(199,58,50, .55);
  border-color: #ff6b75;
  box-shadow: 0 0 10px rgba(199,58,50,.55);
}
.fight-zone.is-last {
  background: #c73a32;
  transform: translate(-50%, -50%) scale(1.25);
  animation: fightPulse .7s ease;
}
@keyframes fightPulse {
  from { transform: translate(-50%, -50%) scale(1.6); opacity: .4; }
  to { transform: translate(-50%, -50%) scale(1.25); opacity: 1; }
}
.fight-last-hit {
  margin-top: .45rem;
  font-size: .78rem;
  color: #ffd0d4;
}
.fight-status { text-align: center; margin: .85rem 0 .55rem; font-size: .95rem; }
.ok-text { color: #9dffc0; }
.bad-text { color: #ffb0b0; }
.fight-weapons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .45rem;
  margin-bottom: .55rem;
}
.fight-weapon-form { margin: 0; }
.fight-weapon {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: .15rem;
  text-align: left;
  padding: .65rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, #243041, #171d27);
  color: #fff;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s ease, transform .15s ease;
}
.fight-weapon:hover { border-color: rgba(199,58,50,.7); transform: translateY(-1px); }
.fight-weapon.is-equipped { border-color: rgba(240,180,41,.55); }
.fight-weapon.is-gun { box-shadow: inset 0 0 0 1px rgba(122,162,247,.18); }
.fight-weapon-name { font-weight: 800; font-size: .9rem; }
.fight-weapon-meta { font-size: .72rem; color: #9aa3ad; }
.fight-moves, .fight-finish {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: center;
  margin-top: .45rem;
}
.fight-move { min-width: 4.8rem; }
.fight-finish-block {
  margin-top: .9rem;
  padding: .85rem;
  border-radius: 12px;
  border: 1px solid rgba(46, 204, 113, .35);
  background:
    radial-gradient(320px 120px at 50% 0%, rgba(46,204,113,.14), transparent 60%),
    linear-gradient(180deg, rgba(20,36,28,.9), rgba(14,20,18,.95));
  animation: fightWinPulse .9s ease;
}
@keyframes fightWinPulse {
  from { box-shadow: 0 0 0 0 rgba(46,204,113,.35); }
  to { box-shadow: 0 0 0 10px transparent; }
}
.fight-win-banner {
  text-align: center;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .04em;
  color: #9dffc0;
  margin: 0 0 .65rem;
}
.fight-finish-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.fight-finish-grid form:last-child {
  grid-column: 1 / -1;
}
.fight-outcome {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .15rem;
  text-align: left;
  padding: .7rem .8rem;
  min-height: 3.5rem;
}
.fight-outcome span {
  font-size: .75rem;
  font-weight: 500;
  opacity: .85;
  line-height: 1.25;
}
.fight-panel {
  border-color: rgba(199,58,50, .22);
}
.fight-start-main { margin: 0; }
.fight-start-btn {
  width: 100%;
  padding: .85rem 1rem;
  font-size: 1.05rem;
}
.fight-outcome-help {
  margin: 0 0 .75rem;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .86rem;
  line-height: 1.45;
}
.fight-outcome-help li { margin: .2rem 0; }
.fight-outcome-help strong { color: #f3f4f6; }
.fight-log-panel {
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.08);
}
.fight-log {
  margin: .4rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted);
  font-size: .84rem;
  line-height: 1.45;
  max-height: 11rem;
  overflow: auto;
}
.fight-log li.hit { color: #e8edf3; }
.fight-log li.is-crit { color: #ffb347; font-weight: 700; }
.fight-log li.is-miss, .fight-log li.miss { color: #8b949e; font-style: italic; }
.fight-log li.heal { color: #9dffc0; }
.fight-start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin: .55rem 0 .75rem;
}
.fight-modes {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  align-items: center;
}
.btn.is-active-mode {
  border-color: rgba(199,58,50,.7) !important;
  color: #fff !important;
}
@media (max-width: 720px) {
  .fight-top { grid-template-columns: 1fr 1fr; }
  .fight-body-wrap { grid-column: 1 / -1; order: -1; }
}
.trade-item-rows { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .35rem; }
.trade-item-row {
  display: grid;
  grid-template-columns: 1fr 4.5rem;
  gap: .35rem;
}
.veh-thumb { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; background:#0e1218; }
.veh-thumb-wrap { position:relative; overflow:hidden; border-radius:8px; }
.flash { display:none !important; }
.toast-ok { border-color: #1f8f4e; }
.toast-bad { border-color: var(--red); }
.story {
  color: #c5ccd6;
  font-style: italic;
  margin: .35rem 0 0;
  font-size: .92rem;
}
.rare-tag {
  color: #f0b429;
  font-weight: 800;
  letter-spacing: .04em;
  font-size: .75rem;
}
/* legacy landing-hero kept harmless for old caches */
.landing-hero { display: none; }
.energy-pill {
  display: inline-flex;
  gap: .35rem;
  align-items: center;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: #1a2433;
  border: 1px solid var(--line);
  font-size: .8rem;
  color: #9ec1ff;
}
.season-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.2rem;
  align-items: center;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  border-radius: 10px;
  border: 1px solid #3a2a10;
  background: linear-gradient(90deg, rgba(240,180,41,.08), rgba(18,21,27,.9));
}

.property-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
}
.property-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg, #171b22, #10141b);
  box-shadow: var(--shadow);
}
.property-media {
  min-height: 180px;
  background-size: cover;
  background-position: center;
  position: relative;
}
.property-media-shade {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1rem;
  background: linear-gradient(180deg, transparent 20%, rgba(5,7,10,.92));
}
.property-media-shade h3 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: .04em;
  font-size: 1.7rem;
}
.property-media-shade p { margin: .25rem 0 0; color: #c9d1d9; }
.property-body { padding: 1rem; }
.property-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .55rem; }
.estate-card .property-media { min-height: 220px; }
.estate-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .45rem; }
.estate-tag {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .2rem .45rem;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.45);
  color: #e8edf4;
}
.estate-tag.is-ok { border-color: rgba(46,160,67,.5); color: #9dffc0; }
.estate-tag.is-warn { border-color: rgba(199,58,50,.45); color: #ffb4b4; }
.estate-body { display: grid; gap: .75rem; }
.estate-panel {
  border: 1px solid var(--line);
  background: rgba(255,255,255,.02);
  padding: .75rem .8rem;
}
.estate-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .5rem;
  margin-bottom: .5rem;
}
.estate-safe-bar { margin: .35rem 0 .45rem; }
.estate-safe-split { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .45rem; font-size: .85rem; }
.estate-safe-forms { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.estate-upgrade-row { align-items: stretch; }
.estate-upgrade-row select { flex: 1; min-width: 0; }
@media (max-width: 720px) {
  .estate-safe-forms { grid-template-columns: 1fr; }
}
.buy-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: .5rem;
  margin-top: 1rem;
}
.buy-thumb {
  min-height: 72px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
}
.buy-thumb span {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .35rem .4rem;
  font-size: .72rem;
  font-weight: 700;
  background: rgba(0,0,0,.7);
}


.donate-thanks {
  position: relative;
  overflow: hidden;
  margin-bottom: 1rem;
  padding: 1.25rem 1.35rem;
  border-radius: 16px;
  border: 1px solid rgba(240, 180, 41, .28);
  background:
    radial-gradient(ellipse at 12% 20%, rgba(240, 180, 41, .16), transparent 45%),
    linear-gradient(135deg, #171d28 0%, #10151d 55%, #151b24 100%);
}
.donate-thanks-kicker {
  margin: 0 0 .25rem;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: #f0b429;
}
.donate-thanks h3 {
  margin: 0 0 .45rem;
  font-family: var(--display);
  letter-spacing: .04em;
  font-size: 1.55rem;
}
.donate-thanks p { margin: 0; color: var(--muted); max-width: 46rem; line-height: 1.5; }
.donate-intro { border-color: rgba(255,255,255,.08); }
.donate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.donate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 1.15rem;
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(184,134,11,.16), transparent 55%),
    linear-gradient(180deg, #1a1f28, #10141b);
  box-shadow: var(--shadow);
  transition: transform .15s ease, border-color .15s ease;
}
.donate-card:hover { transform: translateY(-2px); border-color: rgba(240,180,41,.35); }
.donate-card.tier-2 {
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(199,58,50,.16), transparent 55%),
    linear-gradient(180deg, #1c202a, #10141b);
}
.donate-time-saved {
  margin: -.15rem 0 .55rem;
  font-size: .82rem;
  color: #9aa6b5;
}
.nameplate-donator {
  display: inline-block;
  background: linear-gradient(180deg, rgba(240, 180, 41, .28), rgba(240, 180, 41, .08));
  border-bottom: 2px solid rgba(255, 210, 90, .9);
  padding: .05rem .28rem .08rem;
  border-radius: 3px;
  color: #ffe7a0;
  text-shadow:
    0 0 6px rgba(255, 200, 80, .75),
    0 0 14px rgba(240, 180, 41, .45),
    0 1px 0 rgba(0, 0, 0, .55);
  letter-spacing: .02em;
}
.nameplate-donator.plate-gold,
.nameplate-donator:not([class*="plate-"]) {
  color: #ffe7a0;
}
.nameplate-donator.plate-brass {
  border-bottom-color: #c4a574;
  background: linear-gradient(180deg, rgba(196,165,116,.3), transparent);
  color: #f0d9b0;
  text-shadow: 0 0 6px rgba(196,165,116,.7), 0 0 12px rgba(160,120,60,.35), 0 1px 0 rgba(0,0,0,.5);
}
.nameplate-donator.plate-onyx {
  border-bottom-color: #d0d4dc;
  background: linear-gradient(180deg, rgba(200,200,210,.2), transparent);
  color: #f2f4f8;
  text-shadow: 0 0 8px rgba(220,230,255,.55), 0 0 14px rgba(160,180,220,.3), 0 1px 0 rgba(0,0,0,.6);
}
.nameplate-donator.plate-ivory {
  border-bottom-color: #f0e6d2;
  background: linear-gradient(180deg, rgba(240,230,210,.32), transparent);
  color: #fff6e8;
  text-shadow: 0 0 6px rgba(255,240,210,.65), 0 0 12px rgba(220,190,140,.35), 0 1px 0 rgba(0,0,0,.45);
}
.nameplate-tag {
  background: #b8860b !important;
  letter-spacing: .04em;
  box-shadow: 0 0 8px rgba(240, 180, 41, .35);
}
.nameplate-tag.plate-brass { background: #8a6a3a !important; box-shadow: 0 0 8px rgba(196,165,116,.3); }
.nameplate-tag.plate-onyx { background: #2a2e36 !important; color: #e8ecf2; box-shadow: 0 0 8px rgba(180,190,210,.25); }
.nameplate-tag.plate-ivory { background: #d9c9a8 !important; color: #1a1a1a; box-shadow: 0 0 8px rgba(240,230,210,.35); }
.profile-name .nameplate-donator,
.home-sheet-who h1 .nameplate-donator {
  font-weight: 700;
}
.season-beat {
  display: block;
  margin-top: .25rem;
  font-size: .82rem;
  color: #d7c39a;
  max-width: 42rem;
  line-height: 1.35;
}
.donate-card.is-best { outline: 1px solid rgba(240, 180, 41, .65); }
.donate-best {
  display: inline-block;
  margin-bottom: .35rem;
  padding: .15rem .45rem;
  border-radius: 4px;
  background: #e8a020;
  color: #1a1204;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.donate-card.tier-3 {
  background:
    radial-gradient(420px 160px at 100% 0%, rgba(122,162,247,.18), transparent 55%),
    linear-gradient(180deg, #1a2130, #10141b);
}
.donate-card.tier-4 {
  border-color: rgba(240,180,41,.35);
  background:
    radial-gradient(480px 180px at 100% 0%, rgba(240,180,41,.22), transparent 55%),
    linear-gradient(180deg, #221c18, #121014);
}
.donate-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.donate-card h3 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: .04em;
  font-size: 1.55rem;
}
.donate-tagline { margin: 0; color: var(--muted); font-size: .92rem; }
.donate-price {
  font-family: var(--display);
  color: #f0b429;
  font-size: 1.8rem;
  letter-spacing: .03em;
  line-height: 1;
}
.donate-rewards {
  margin: 0;
  padding-left: 1.1rem;
  color: #c9d1d9;
  flex: 1;
}
.donate-rewards li { margin: .25rem 0; }
.donate-card .btn { width: 100%; margin-top: .25rem; }

.motors-filters {
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .65rem;
}
.motors-filters label { font-size: .78rem; color: var(--muted); }
.mf-card[hidden] { display: none !important; }

/* ── Casino mini-games ───────────────────────────────────────────── */
.casino-stage {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 1rem;
  align-items: stretch;
}
.game-stage {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid #3a2a18;
  background:
    radial-gradient(500px 220px at 50% 0%, rgba(240,180,41,.18), transparent 55%),
    linear-gradient(180deg, #1a1410, #0d0b0a);
  padding: 1.1rem;
  min-height: 280px;
}
.game-stage-split {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: .7rem;
  padding: .9rem;
  min-height: min(92vh, 920px);
  height: 100%;
}
.casino-half {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
}
.casino-half + .casino-half {
  border-top: 1px solid rgba(240,180,41,.18);
  padding-top: .7rem;
}
.casino-half > form {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.game-stage h3 {
  margin: 0 0 .15rem;
  font-family: var(--display);
  letter-spacing: .06em;
  font-size: 1.45rem;
}
.casino-half .muted { margin: 0 0 .3rem; font-size: .84rem; }
.casino-compact { gap: .45rem !important; flex: 1; }
.casino-bet-row {
  display: grid;
  grid-template-columns: auto minmax(5rem, 1fr) auto;
  gap: .5rem;
  align-items: end;
  margin-top: auto;
}
.casino-bet-row label {
  font-size: .8rem;
  color: var(--muted, #9a9080);
}
.casino-bet-row input[type="number"] {
  min-width: 0;
  width: 100%;
}
.slots-cabinet {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  flex: 1;
  min-height: 0;
  padding: .65rem .7rem .75rem;
  border-radius: 18px;
  border: 3px solid #8a7350;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 210, 120, .18), transparent 50%),
    linear-gradient(180deg, #3a2a18 0%, #1a120c 40%, #0c0907 100%);
  box-shadow:
    inset 0 0 0 2px #c4a56a,
    inset 0 -18px 40px rgba(0,0,0,.45),
    0 12px 28px rgba(0,0,0,.4);
}
.slots-cabinet-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
}
.slots-badge {
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #1a1208;
  background: linear-gradient(180deg, #f0d078, #c9962e);
  border-radius: 999px;
  padding: .18rem .45rem;
  font-weight: 800;
  white-space: nowrap;
}
.slots-marquee {
  font-family: var(--display);
  color: #ffe7a8;
  letter-spacing: .08em;
  font-size: 1rem;
  text-shadow: 0 0 12px rgba(240,180,41,.45);
}
.slots-cabinet-glass {
  position: relative;
  flex: 1;
  min-height: 140px;
  border-radius: 14px;
  border: 2px solid #2a1f14;
  background:
    linear-gradient(180deg, rgba(80,140,200,.12), transparent 35%),
    radial-gradient(ellipse at 50% 120%, rgba(40,90,160,.25), transparent 55%),
    linear-gradient(180deg, #142033 0%, #0a1520 55%, #071018 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.55);
  display: grid;
  grid-template-columns: minmax(6.6rem, 7.8rem) 1fr;
  align-items: stretch;
  gap: .35rem;
  padding: .45rem .55rem .45rem .4rem;
  overflow: hidden;
}
.slots-paytable {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .22rem;
  padding: .35rem .3rem;
  border-radius: 10px;
  border: 1px solid rgba(240,180,41,.22);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(10,14,20,.55));
  z-index: 3;
}
.slots-paytable-title {
  font-size: .62rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c4a86a;
  text-align: center;
  margin-bottom: .1rem;
}
.slots-pay-row {
  display: grid;
  grid-template-columns: 1.15rem auto 1fr;
  align-items: center;
  gap: .28rem;
  font-size: .68rem;
  color: #d7c39a;
  line-height: 1;
}
.slots-pay-row.is-jackpot {
  color: #78d4ff;
  font-weight: 800;
}
.slots-pay-ico {
  width: 1.05rem !important;
  height: 1.05rem !important;
  filter: none !important;
}
.slots-pay-label {
  opacity: .75;
  font-size: .62rem;
}
.slots-pay-mult {
  justify-self: end;
  font-variant-numeric: tabular-nums;
  color: #f0b429;
  font-size: .72rem;
}
.slots-pay-row.is-jackpot .slots-pay-mult {
  color: #9ae6ff;
}
.slots-machine {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: .55rem;
  margin: .2rem 0;
  perspective: 600px;
  min-height: 120px;
  width: 100%;
  z-index: 1;
}
.slots-payline-arrow {
  position: absolute;
  left: calc(7.8rem + .6rem);
  right: 8%;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: linear-gradient(90deg, transparent, rgba(255,80,80,.85), transparent);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 0 8px rgba(255,80,80,.55);
}
@media (max-width: 640px) {
  .slots-cabinet-glass {
    grid-template-columns: minmax(5.8rem, 6.6rem) 1fr;
    padding: .35rem;
  }
  .slots-payline-arrow { left: calc(6.6rem + .35rem); }
  .slots-pay-row { font-size: .6rem; gap: .18rem; }
  .slots-pay-mult { font-size: .64rem; }
}
.slots-bet-tray {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
}
.slot-bet-btn {
  min-width: 3.1rem;
  padding: .38rem .45rem;
  border-radius: 8px;
  border: 1px solid #6a5430;
  background: linear-gradient(180deg, #3a3020, #1a140e);
  color: #f3e6c8;
  font-weight: 800;
  font-size: .78rem;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 0 #0a0806;
}
.slot-bet-btn.is-selected,
.slot-bet-btn:hover {
  border-color: #f0b429;
  color: #1a1208;
  background: linear-gradient(180deg, #f0d078, #c9962e);
}
.slot-spin-btn {
  width: 100%;
  margin-top: .15rem;
  padding: .7rem 1rem;
  border: 0;
  border-radius: 12px;
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .08em;
  font-weight: 800;
  color: #1a1208;
  cursor: pointer;
  background: linear-gradient(180deg, #ffe08a, #f0b429 45%, #c4841a);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 4px 0 #6a3f0c, 0 8px 18px rgba(0,0,0,.35);
}
.slot-spin-btn:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 0 #6a3f0c; }
.slot-spin-btn:disabled { opacity: .55; cursor: wait; }
.slots-half .slot-reel {
  width: clamp(72px, 22%, 110px);
  height: auto;
  aspect-ratio: 4 / 5;
  max-height: 160px;
  border-radius: 12px;
  align-self: center;
}
.slots-half .slot-ico {
  width: 68%;
  height: 68%;
}
.slot-reel {
  width: 88px;
  height: 110px;
  border-radius: 12px;
  border: 2px solid #5a4525;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  box-shadow: inset 0 0 24px rgba(0,0,0,.8), 0 0 0 3px #2a1f12;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.slot-reel::before, .slot-reel::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 22px;
  z-index: 2;
  pointer-events: none;
}
.slot-reel::before { top: 0; background: linear-gradient(#000, transparent); }
.slot-reel::after { bottom: 0; background: linear-gradient(transparent, #000); }
.slot-ico {
  display: block;
  width: 64px;
  height: 64px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 0 8px rgba(240,180,41,.35));
}
.lottery-half {
  justify-content: flex-start;
  overflow: hidden;
}
.lottery-jackpot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-height: 0;
  margin: .25rem 0 .4rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(240,180,41,.35);
  background:
    radial-gradient(420px 120px at 50% 0%, rgba(240,180,41,.22), transparent 60%),
    linear-gradient(180deg, #20180e, #0c0a08);
  text-align: center;
}
.lottery-jackpot-label {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #c4a86a;
}
.lottery-jackpot-value {
  font-family: var(--display);
  font-size: clamp(1.8rem, 4.5vw, 2.6rem);
  line-height: 1.1;
  color: #f0b429;
  margin: .15rem 0;
}
.lottery-meta { font-size: .78rem; }
.lottery-last { text-align: center; font-size: .8rem; margin: 0 0 .35rem; }
.lottery-my-tickets {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  justify-content: center;
  align-content: flex-start;
  margin: 0 0 .45rem;
  max-height: 7rem;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: .15rem;
  scrollbar-gutter: stable;
}
.lottery-ticket-chip {
  display: inline-flex;
  align-items: center;
  padding: .28rem .55rem;
  border-radius: 8px;
  border: 1px solid #5a4525;
  background: #14100c;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  color: #f3e6c8;
  font-size: .9rem;
}
.slot-ico[data-sym="7"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='48' text-anchor='middle' font-family='Arial Black,Arial,sans-serif' font-size='48' font-weight='900' fill='%23ff3b4a'%3E7%3C/text%3E%3C/svg%3E");
}
.slot-ico[data-sym="BAR"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect x='6' y='22' width='52' height='22' rx='4' fill='%23f0b429'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial Black,Arial,sans-serif' font-size='14' font-weight='900' fill='%23110e08'%3EBAR%3C/text%3E%3C/svg%3E");
}
.slot-ico[data-sym="CHERRY"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8c4 10 2 16-2 20' stroke='%233a7a32' stroke-width='3' fill='none'/%3E%3Ccircle cx='24' cy='42' r='12' fill='%23d4142c'/%3E%3Ccircle cx='40' cy='38' r='11' fill='%23ef2d45'/%3E%3Cpath d='M28 18c6-2 12 0 16 6' stroke='%234a9a3a' stroke-width='3' fill='none'/%3E%3C/svg%3E");
}
.slot-ico[data-sym="LEMON"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='34' rx='20' ry='16' fill='%23f5d547'/%3E%3Cpath d='M48 22c4-6 8-6 10-4' stroke='%2370a030' stroke-width='3' fill='none'/%3E%3Cellipse cx='32' cy='34' rx='14' ry='10' fill='%23ffe978' opacity='.5'/%3E%3C/svg%3E");
}
.slot-ico[data-sym="BELL"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M20 28c0-10 5-16 12-16s12 6 12 16c0 10 4 14 4 14H16s4-4 4-14z' fill='%23f0b429'/%3E%3Crect x='28' y='10' width='8' height='6' rx='2' fill='%23d4a017'/%3E%3Crect x='18' y='42' width='28' height='6' rx='2' fill='%23f5d78a'/%3E%3Ccircle cx='32' cy='52' r='4' fill='%23e11d2e'/%3E%3C/svg%3E");
}
.slot-ico[data-sym="DIAMOND"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 6L10 26l22 32 22-32L32 6z' fill='%2378d4ff'/%3E%3Cpath d='M32 6l-8 20h16L32 6z' fill='%23b9ecff'/%3E%3Cpath d='M10 26h44L32 58 10 26z' fill='%2340b8f0'/%3E%3C/svg%3E");
}
.slot-ico[data-sym="CROWN"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M10 44L16 20l10 12 6-16 6 16 10-12 6 24H10z' fill='%23f0b429'/%3E%3Crect x='12' y='44' width='40' height='8' rx='2' fill='%23d4a017'/%3E%3Ccircle cx='16' cy='20' r='3' fill='%23ffe7a8'/%3E%3Ccircle cx='32' cy='14' r='3' fill='%23ffe7a8'/%3E%3Ccircle cx='48' cy='20' r='3' fill='%23ffe7a8'/%3E%3C/svg%3E");
}
.slot-ico[data-sym="STAR"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 8l6 16h17l-14 10 5 17-14-10-14 10 5-17L9 24h17z' fill='%23ffe27a'/%3E%3C/svg%3E");
}
.slot-ico[data-sym="?"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ctext x='32' y='46' text-anchor='middle' font-family='Arial Black,Arial,sans-serif' font-size='40' font-weight='900' fill='%236a5a40'%3E%3F%3C/text%3E%3C/svg%3E");
}
.slot-reel.is-spinning .slot-ico {
  animation: slotBlur .12s linear infinite;
}
@keyframes slotBlur {
  0% { transform: translateY(-18px); opacity: .4; filter: blur(2px); }
  100% { transform: translateY(18px); opacity: .4; filter: blur(2px); }
}
.slot-payline { text-align: center; font-size: .76rem; margin: 0 0 .15rem; }
.slots-half .slot-reel::before, .slots-half .slot-reel::after { height: 16px; }
.casino-half .casino-result { min-height: 1.25em; font-size: .88rem; }
@media (max-width: 900px) {
  .game-stage-split { min-height: 0; }
  .slots-half .slot-reel { max-height: 120px; }
  .bingo-card { width: min(100%, 240px); min-height: 120px; }
}
.roulette-wrap {
  display: grid;
  place-items: center;
  margin: .2rem 0 .6rem;
}
.rw-stage {
  position: relative;
  width: min(100%, 260px);
  aspect-ratio: 1;
}
.rw-pointer {
  position: absolute;
  top: -2px;
  left: 50%;
  z-index: 5;
  width: 0; height: 0;
  margin-left: -9px;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-top: 16px solid #f0b429;
  filter: drop-shadow(0 2px 2px #000);
}
.rw-bowl {
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 56%, #1a1410 57%, #3a2a1a 68%, #1a1410 78%),
    #0d0b09;
  box-shadow:
    0 0 0 3px #5a4525,
    0 0 0 7px #2a1f12,
    inset 0 0 40px rgba(0,0,0,.65);
  overflow: hidden;
}
.rw-wheel {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  will-change: transform;
}
.rw-wheel svg { width: 100%; height: 100%; display: block; }
.rw-hub {
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4a3f32, #15110e 70%);
  box-shadow: inset 0 0 16px #000, 0 0 0 2px #6a5430;
  z-index: 2;
  pointer-events: none;
}
.rw-ball-arm {
  position: absolute;
  inset: 0;
  z-index: 4;
  will-change: transform;
  pointer-events: none;
}
.rw-ball {
  position: absolute;
  top: 10px;
  left: 50%;
  width: 11px;
  height: 11px;
  margin-left: -5.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c8c8c8 55%, #8a8a8a);
  box-shadow: 0 0 6px rgba(255,255,255,.7), 0 2px 4px rgba(0,0,0,.5);
  transition: top .8s ease;
}
.rw-ball.is-drop { top: 22%; }
.roulette-layout {
  display: grid;
  grid-template-columns: .9fr 1.2fr;
  gap: .85rem;
  align-items: start;
  margin: .5rem 0 .8rem;
}
.roulette-last { text-align: center; margin-top: .45rem; font-size: .8rem; }
.roulette-felt {
  background: linear-gradient(160deg, #0d3d28, #0a2a1c 60%, #082016);
  border: 1px solid #1a5a3a;
  border-radius: 12px;
  padding: .65rem;
  box-shadow: inset 0 0 30px rgba(0,0,0,.35);
}
.chip-tray {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  margin-bottom: .55rem;
}
.chip-tray .chip {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px dashed rgba(255,255,255,.55);
  color: #fff;
  font-weight: 800;
  font-size: .72rem;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(0,0,0,.35), inset 0 0 8px rgba(0,0,0,.25);
  position: relative;
  display: inline-grid;
  place-items: center;
  padding: 0;
  white-space: nowrap;
  background: #333;
}
.chip-tray .chip span { position: relative; z-index: 1; }
.chip-tray .chip-100 { background: radial-gradient(circle at 35% 30%, #5aa0ff, #1a4a9a); }
.chip-tray .chip-500 { background: radial-gradient(circle at 35% 30%, #7dff9a, #1a7a3a); }
.chip-tray .chip-1000 { background: radial-gradient(circle at 35% 30%, #ff7a7a, #9a1a1a); }
.chip-tray .chip-5000 { background: radial-gradient(circle at 35% 30%, #ffe07a, #9a7a1a); color: #1a1408; border-color: rgba(0,0,0,.35); }
.chip-tray .chip.is-selected {
  outline: 2px solid var(--sodium);
  outline-offset: 2px;
  transform: translateY(-2px);
}
.roulette-table { display: grid; gap: .35rem; }
.r-spot {
  position: relative;
  border: 1px solid rgba(255,255,255,.14);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  min-height: 36px;
  border-radius: 6px;
  overflow: visible;
  transition: box-shadow .15s ease, transform .12s ease;
}
.r-spot:hover { transform: translateY(-1px); }
.r-spot.has-chip { box-shadow: 0 0 0 2px #f0b429; }
.r-label { display: block; padding: .35rem 0; pointer-events: none; }
.r-zero { width: 100%; background: #0d5c32; border-color: #1a6b3a; }
.r-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.r-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr) 40px;
  gap: 3px;
}
/* Keep 1–36 in the first three columns (real table layout) */
.r-board .r-num:nth-child(3n+1) { grid-column: 1; }
.r-board .r-num:nth-child(3n+2) { grid-column: 2; }
.r-board .r-num:nth-child(3n+3) { grid-column: 3; }
.r-board .r-col.c1 { grid-column: 4; grid-row: 1 / span 4; }
.r-board .r-col.c2 { grid-column: 4; grid-row: 5 / span 4; }
.r-board .r-col.c3 { grid-column: 4; grid-row: 9 / span 4; }
.r-num { font-size: .78rem; padding: 0; }
.r-num.is-red, .r-color.is-red { background: #b01020; }
.r-num.is-black, .r-color.is-black { background: #121212; }
.r-dozens, .r-outside {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
}
.r-outside { grid-template-columns: repeat(6, 1fr); }
.r-dozen .r-label, .r-outside .r-label, .r-col .r-label { padding: .5rem 0; font-size: .72rem; }
.r-dozen, .r-col { background: #0e3d2a; border-color: #1f6b48; }
.r-col { align-self: stretch; }
.r-outside .r-spot:not(.is-red):not(.is-black) { background: #0c2a1c; }
.r-odds-legend {
  margin-top: .45rem;
  font-size: .72rem;
  line-height: 1.35;
}
.r-odds-legend strong { color: #f0b429; font-weight: 700; }
.wallet-flash { animation: walletPulse .55s ease; }
@keyframes walletPulse {
  0% { color: #f0b429; transform: scale(1.08); }
  100% { color: inherit; transform: none; }
}
.chip-stack {
  position: absolute;
  right: 4px;
  bottom: 3px;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 0;
  pointer-events: none;
  min-height: 0;
}
.chip-stack .mini-chip {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 1.5px dashed rgba(255,255,255,.5);
  margin-top: -6px;
  box-shadow: 0 1px 2px rgba(0,0,0,.45);
}
.chip-stack .mini-chip.c100 { background: #2a6fd4; }
.chip-stack .mini-chip.c500 { background: #1f8a45; }
.chip-stack .mini-chip.c1000 { background: #c02828; }
.chip-stack .mini-chip.c5000 { background: #d4b02a; }
.roulette-wager { margin-top: .45rem; font-size: .82rem; }
.casino-result {
  min-height: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-top: .5rem;
}
.casino-result.win { color: #9dffc0; animation: popIn .35s ease; }
.casino-result.lose { color: #ffb0b0; }
@keyframes popIn {
  from { transform: scale(.85); opacity: 0; }
  to { transform: none; opacity: 1; }
}
.stock-board .list-row {
  grid-template-columns: 1.2fr .5fr auto;
  transition: background .2s ease;
}
.stock-board .list-row:hover { background: rgba(255,255,255,.03); }

/* ── Shooting range ──────────────────────────────────────────────── */
.range-lede { margin: -.2rem 0 1rem; max-width: 46rem; }
.range-controls { margin-top: 1rem; }
.range-arena {
  position: relative;
  min-height: 340px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #0a0b0d;
  isolation: isolate;
}
.range-lane {
  position: absolute;
  inset: 0 0 28%;
  perspective: 900px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(6,7,9,.15) 0%, rgba(6,7,9,.55) 70%, rgba(6,7,9,.92) 100%),
    repeating-linear-gradient(90deg, #1c1612 0 22px, #14110e 22px 44px);
}
.range-ceiling {
  position: absolute;
  inset: 0 0 auto;
  height: 18%;
  background:
    linear-gradient(180deg, #08090b, transparent),
    repeating-linear-gradient(90deg, transparent 0 48px, rgba(232,214,170,.05) 48px 49px);
}
.range-wall-l,
.range-wall-r {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 18%;
  background: linear-gradient(90deg, rgba(0,0,0,.55), transparent);
  pointer-events: none;
}
.range-wall-l { left: 0; }
.range-wall-r { right: 0; background: linear-gradient(270deg, rgba(0,0,0,.55), transparent); }
.range-floor {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 0;
  height: 42%;
  background:
    linear-gradient(180deg, transparent, rgba(0,0,0,.55)),
    repeating-linear-gradient(0deg, rgba(232,214,170,.07) 0 1px, transparent 1px 28px),
    linear-gradient(180deg, #2a221c, #121014);
  transform: perspective(700px) rotateX(58deg);
  transform-origin: bottom center;
  border-top: 1px solid rgba(232,214,170,.12);
}
.range-rail {
  position: absolute;
  left: 50%;
  top: 10%;
  width: 2px;
  height: 58%;
  transform: translateX(-50%);
  background: linear-gradient(180deg, #6a6558, #2a271f);
  z-index: 2;
}
.range-hanger {
  position: absolute;
  left: 50%;
  top: 0;
  width: 18px;
  height: 10px;
  transform: translateX(-50%);
  background: #8a8474;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(0,0,0,.4);
}
.range-target-card {
  position: absolute;
  left: 50%;
  top: 14%;
  width: min(150px, 38vw);
  height: min(210px, 52vw);
  transform: translateX(-50%);
  background:
    linear-gradient(180deg, #d8d2c4 0%, #c4bbaa 100%);
  border: 1px solid #8d8574;
  box-shadow:
    0 18px 36px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.25);
  transition: transform .14s ease;
  overflow: hidden;
}
.range-target-card.is-hit { animation: targetHit .38s ease; }
.range-silhouette {
  position: absolute;
  inset: 12% 22% 8%;
  background:
    radial-gradient(ellipse 55% 28% at 50% 14%, #2a2a2a 0 70%, transparent 72%),
    radial-gradient(ellipse 70% 55% at 50% 58%, #2a2a2a 0 68%, transparent 70%);
  opacity: .55;
}
.range-rings {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 72%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background:
    radial-gradient(circle,
      #c91828 0 7%,
      #f4f0e6 7% 16%,
      #c91828 16% 26%,
      #f4f0e6 26% 38%,
      #c91828 38% 50%,
      transparent 50% 100%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.12);
  opacity: .92;
}
.range-impacts {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.range-hole {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: -3.5px 0 0 -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #3a3a3a 0 35%, #0a0a0a 55%, transparent 70%);
  box-shadow: 0 0 0 1px rgba(0,0,0,.55), inset 0 0 2px #000;
  opacity: 0;
  animation: holePunch .2s ease forwards;
}
.range-hole.is-laser {
  width: 6px;
  height: 6px;
  background: radial-gradient(circle, #f0b429 0 40%, transparent 70%);
  box-shadow: 0 0 8px rgba(240,180,41,.55);
}
@keyframes holePunch {
  from { opacity: 0; transform: scale(.4); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes targetHit {
  0% { transform: translateX(-50%) scale(1); }
  35% { transform: translateX(-50%) scale(.97) rotate(-1.4deg); }
  100% { transform: translateX(-50%) scale(1); }
}
.range-distance {
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 6%;
  display: flex;
  justify-content: space-between;
  color: rgba(232,214,170,.35);
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 1;
  pointer-events: none;
}
.range-booth {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 34%;
  background:
    linear-gradient(180deg, transparent, rgba(8,9,11,.55) 18%, #101214 55%),
    linear-gradient(90deg, #16181c, #121418 40%, #181a1e);
  border-top: 1px solid rgba(232,214,170,.1);
  z-index: 3;
}
.range-bench {
  position: absolute;
  left: 6%;
  right: 28%;
  bottom: 18%;
  height: 14px;
  background: linear-gradient(180deg, #3a3228, #1c1814);
  border-radius: 2px;
  box-shadow: 0 8px 0 #0c0d0f;
}
.range-gun {
  position: absolute;
  left: 10%;
  bottom: 22%;
  width: 148px;
  height: 54px;
  z-index: 4;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.55));
  transform-origin: 30% 70%;
}
.range-arena.is-firing .range-gun { animation: gunRecoil .22s ease; }
@keyframes gunRecoil {
  0% { transform: translate(0,0) rotate(0); }
  35% { transform: translate(-6px, -2px) rotate(-3deg); }
  100% { transform: translate(0,0) rotate(0); }
}
.range-slide {
  position: absolute;
  left: 18px;
  top: 8px;
  width: 92px;
  height: 22px;
  background: linear-gradient(180deg, #5a616c, #2a2e36 55%, #171a20);
  border-radius: 4px 10px 6px 3px;
  border: 1px solid #0d0f12;
}
.range-barrel {
  position: absolute;
  left: 108px;
  top: 14px;
  width: 38px;
  height: 10px;
  background: linear-gradient(180deg, #3a404a, #15181e);
  border-radius: 2px 4px 4px 2px;
}
.range-grip {
  position: absolute;
  left: 28px;
  top: 26px;
  width: 28px;
  height: 28px;
  background: linear-gradient(160deg, #4a3428, #1c120e);
  border-radius: 3px 3px 6px 8px;
  border: 1px solid #0d0a08;
  transform: rotate(18deg);
}
.range-trigger {
  position: absolute;
  left: 48px;
  top: 28px;
  width: 10px;
  height: 12px;
  border: 2px solid #8a909a;
  border-top: 0;
  border-radius: 0 0 8px 8px;
}
.muzzle-flash {
  position: absolute;
  left: calc(10% + 138px);
  bottom: 38%;
  width: 56px;
  height: 34px;
  background:
    radial-gradient(circle at 20% 50%, #fff 0%, #f0b429 28%, transparent 68%),
    conic-gradient(from 200deg, transparent, rgba(255,220,120,.7), transparent 40%);
  opacity: 0;
  pointer-events: none;
  filter: blur(.4px);
  z-index: 5;
}
.muzzle-flash.is-on { animation: flash .16s ease-out; }
.muzzle-flash.is-laser {
  background: radial-gradient(circle at 20% 50%, rgba(255,80,80,.95) 0%, rgba(255,40,40,.35) 40%, transparent 70%);
}
@keyframes flash {
  0% { opacity: 1; transform: scale(.55); }
  100% { opacity: 0; transform: scale(1.55); }
}
.range-smoke {
  position: absolute;
  left: calc(10% + 120px);
  bottom: 42%;
  width: 70px;
  height: 40px;
  background: radial-gradient(circle, rgba(200,200,200,.28), transparent 70%);
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.range-smoke.is-on { animation: rangeSmoke .7s ease-out; }
@keyframes rangeSmoke {
  0% { opacity: .55; transform: translate(0,0) scale(.7); }
  100% { opacity: 0; transform: translate(18px, -22px) scale(1.5); }
}
.range-brass {
  position: absolute;
  left: calc(10% + 70px);
  bottom: 48%;
  width: 8px;
  height: 4px;
  background: linear-gradient(90deg, #d4a84b, #8a6a28);
  border-radius: 1px;
  opacity: 0;
  z-index: 5;
  pointer-events: none;
}
.range-brass.is-on { animation: brassEject .45s ease-out; }
@keyframes brassEject {
  0% { opacity: 1; transform: translate(0,0) rotate(0); }
  100% { opacity: 0; transform: translate(42px, -36px) rotate(220deg); }
}
.range-hud {
  position: absolute;
  left: .75rem;
  right: .75rem;
  top: .65rem;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(232,214,170,.72);
  pointer-events: none;
}
.range-hud span {
  padding: .25rem .55rem;
  border: 1px solid rgba(232,214,170,.14);
  background: rgba(8,9,11,.55);
  border-radius: 4px;
}
@media (max-width: 700px) {
  .range-arena { min-height: 300px; }
  .range-gun { transform: scale(.88); transform-origin: left bottom; }
  .range-bench { right: 18%; }
}

@media (max-width: 1100px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-layout, .grid-3, .feature-list, .home-hero, .home-sheet, .home-sheet-grid, .casino-stage, .roulette-layout { grid-template-columns: 1fr; }
  .home-sheet-grid article.span-2 { grid-column: auto; }
  .home-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .nav-toggle { display: inline-grid; place-items: center; }
  .shell { grid-template-columns: 1fr; }
  .sidebar {
    display: none;
    position: fixed;
    inset: 64px 0 auto 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    max-height: calc(100vh - 64px);
    overflow: auto;
  }
  .sidebar.is-open { display: block; }
  .topbar-meta .meta-block:nth-child(n+5) { display: none; }
  .list-row { grid-template-columns: 1fr; }
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .home-quick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #city-map { height: 420px; }
  .topbar { padding: .65rem .75rem; }
  .content { padding: .85rem; }
  .btn, button.btn { min-height: 44px; }
}

/* -- Admin console ----------------------------------------- */
.admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0 0 1rem;
}
.admin-tab {
  display: inline-flex;
  align-items: center;
  padding: .45rem .9rem;
  border-radius: 8px;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  background: rgba(255,255,255,.03);
  font-size: .92rem;
}
.admin-tab:hover { color: var(--text); border-color: rgba(255,255,255,.18); }
.admin-tab.is-active {
  color: var(--text);
  background: rgba(198,40,40,.22);
  border-color: rgba(198,40,40,.55);
}
.admin-layout {
  display: grid;
  grid-template-columns: minmax(220px, 280px) 1fr;
  gap: 1rem;
  align-items: start;
}
.admin-player-rail h3 { margin-top: 0; }
.admin-player-rail input[type="search"] { margin-bottom: .65rem; }
.admin-player-list {
  max-height: min(70vh, 640px);
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.admin-player-row {
  display: block;
  padding: .55rem .65rem;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  border: 1px solid transparent;
}
.admin-player-row:hover { background: rgba(255,255,255,.04); }
.admin-player-row.is-active {
  background: rgba(198,40,40,.16);
  border-color: rgba(198,40,40,.4);
}
.admin-ops-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: 0 0 1rem;
}
.admin-ops-strip > div {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .7rem .85rem;
  display: grid;
  gap: .15rem;
}
.admin-ops-strip span {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}
.admin-ops-strip strong { font-size: 1.25rem; }
.admin-ops-strip em { font-style: normal; font-size: .78rem; color: var(--muted); }
@media (max-width: 860px) {
  .admin-ops-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.admin-hero {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .85rem;
  align-items: flex-start;
  margin-bottom: .75rem;
}
.admin-stat-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.admin-stat-pills span {
  font-size: .82rem;
  padding: .3rem .55rem;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--line);
  color: var(--muted);
}
.admin-quick {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-bottom: .85rem;
}
.admin-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .85rem;
}
.admin-cards h4 { margin: 0 0 .65rem; }
.admin-span-2 { grid-column: 1 / -1; }
.admin-test-bar {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px dashed rgba(255,255,255,.12);
}
@media (max-width: 900px) {
  .admin-layout { grid-template-columns: 1fr; }
  .admin-cards { grid-template-columns: 1fr; }
  .admin-player-list { max-height: 220px; }
}

/* Custom dialog — must stay viewport-fixed (never trapped by layout position:relative) */
body.cs-dialog-open { overflow: hidden; }
html > .cs-dialog,
body > .cs-dialog,
.cs-dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: grid !important;
  place-items: center !important;
  padding: 1.25rem !important;
  margin: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  pointer-events: auto;
}
.cs-dialog[hidden] { display: none !important; }
.cs-dialog-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 6, 10, .78);
  backdrop-filter: blur(3px);
}
.cs-dialog-card {
  position: relative;
  z-index: 1;
  width: min(460px, 100%);
  background:
    radial-gradient(420px 180px at 10% 0%, rgba(199,58,50,.16), transparent 55%),
    linear-gradient(180deg, #1c2430 0%, #121820 100%);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 16px;
  padding: 1.35rem 1.35rem 1.15rem;
  box-shadow: 0 28px 70px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.08);
  animation: csDialogIn .22s ease;
}
@keyframes csDialogIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to { opacity: 1; transform: none; }
}
.cs-dialog-title {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: 1.65rem;
  letter-spacing: .04em;
  font-weight: 400;
  color: #fff;
}
.cs-dialog-body {
  margin: 0 0 1.15rem;
  color: #c5ccd6;
  line-height: 1.5;
  font-size: 1.02rem;
  font-family: var(--font);
}
.cs-dialog.cs-dialog-wide .cs-dialog-card { width: min(680px, 100%); }
.papers-kicker {
  margin: 0 0 .6rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .75rem;
  color: var(--sodium, #e8a020);
}
.papers-block { margin: 0 0 .85rem; }
.papers-block h4 { margin: 0 0 .3rem; font-size: .95rem; }
.papers-line { margin: 0 0 .45rem; }
.papers-flag { margin: 0; color: #e7b15a; }
.papers-clean { margin: 0; color: #7dcea0; }
.papers-rule {
  border: 0;
  border-top: 1px solid rgba(232, 160, 32, .22);
  margin: 1rem 0 1.1rem;
}
.flash-why {
  margin-top: .55rem;
  padding-top: .45rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: #b8c0cc;
  font-size: .92rem;
  line-height: 1.35;
}
.first-hour-panel { border-color: rgba(240,180,41,.35); }
.first-hour-triad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .55rem;
  margin-top: .55rem;
}
.first-hour-triad div {
  padding: .55rem .6rem;
  border: 1px solid rgba(232, 160, 32, .18);
  background: rgba(232, 160, 32, .05);
  border-radius: 8px;
}
.first-hour-triad em {
  display: block;
  font-style: normal;
  font-weight: 700;
  color: #f0d090;
  margin-bottom: .2rem;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.first-hour-triad span { color: var(--muted); font-size: .86rem; line-height: 1.3; }
.city-edge {
  margin: .55rem 0 0;
  max-width: 36rem;
  color: #d5dde8;
  font-size: .95rem;
}
.city-edge-line {
  margin: .25rem 0 .15rem;
  color: #d7c39a;
  font-size: .9rem;
  line-height: 1.35;
}
.home-next {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-top: .85rem;
  padding: .7rem .8rem;
  border: 1px solid rgba(240, 180, 41, .35);
  background: rgba(240, 180, 41, .08);
  border-radius: 10px;
}
.home-next strong { display: block; margin-bottom: .15rem; }
.home-next .muted { font-size: .88rem; }
.work-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 1rem;
}
.work-tab {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .7rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #c8d0dc;
  text-decoration: none;
  font-size: .86rem;
}
.work-tab.is-active {
  border-color: rgba(240, 180, 41, .55);
  background: rgba(240, 180, 41, .1);
  color: #fff;
}
.work-tab.is-locked {
  opacity: .45;
  cursor: not-allowed;
}
.work-tab em {
  font-style: normal;
  font-size: .72rem;
  color: var(--muted);
}
.freight-wizard { border-color: rgba(240, 180, 41, .3); }
@media (max-width: 720px) {
  .first-hour-triad { grid-template-columns: 1fr; }
  .home-next { flex-direction: column; align-items: stretch; }
}
.logbook {
  display: grid;
  grid-template-columns: minmax(220px, 340px) minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.logbook-shot {
  min-height: 200px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #151820 center/cover no-repeat;
}
.logbook-doc {
  background: #14161a;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 1rem 1.1rem 1.15rem;
  overflow: visible;
}
.logbook-doc .actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .35rem; }
@media (max-width: 800px) {
  .logbook { grid-template-columns: 1fr; }
}
.cs-dialog-body .papers-line strong { color: #fff; }
.cs-dialog-card .btn[data-cs-dialog-ok] {
  background: linear-gradient(180deg, #e0554c, var(--red) 55%, #7a221e);
  border: 0;
  color: #fff;
  min-width: 5rem;
  box-shadow: var(--glow-red);
  font-family: var(--font);
}
.cs-dialog-backdrop { cursor: pointer; }

.rarity-tag {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .12rem .4rem;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,.12);
}
.rarity-common { color: #9aa4b2; }
.rarity-uncommon { color: #6bcb8b; border-color: rgba(107,203,139,.35); }
.rarity-rare { color: #7aa2f7; border-color: rgba(122,162,247,.4); }
.rarity-epic { color: #c792ea; border-color: rgba(199,146,234,.4); }
.rarity-legendary { color: #f0b429; border-color: rgba(240,180,41,.45); }
.rarity-unique { color: #f07178; border-color: rgba(240,113,120,.45); }

/* Profile */
.profile-hero {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  min-height: 220px;
  margin-bottom: 1rem;
  background:
    radial-gradient(ellipse at 20% 20%, rgba(199,58,50,.28), transparent 45%),
    linear-gradient(135deg, #141a24 0%, #0b0f16 55%, #121820 100%);
  border: 1px solid rgba(255,255,255,.08);
}
.profile-hero.city-london { background-image: linear-gradient(120deg, rgba(8,12,20,.55), rgba(8,12,20,.85)), url('../img/cities/london.jpg'); background-size: cover; background-position: center; }
.profile-hero.city-marbella { background-image: linear-gradient(120deg, rgba(8,12,20,.5), rgba(8,12,20,.82)), url('../img/cities/marbella.jpg'); background-size: cover; background-position: center; }
.profile-hero.city-kingston { background-image: linear-gradient(120deg, rgba(8,12,20,.5), rgba(8,12,20,.82)), url('../img/cities/kingston.jpg'); background-size: cover; background-position: center; }
.profile-hero.city-cayman { background-image: linear-gradient(120deg, rgba(8,12,20,.5), rgba(8,12,20,.82)), url('../img/cities/cayman.jpg'); background-size: cover; background-position: center; }
.profile-hero-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,8,12,.88) 0%, rgba(6,8,12,.35) 70%, rgba(6,8,12,.55) 100%); }
.profile-hero-inner { position: relative; z-index: 1; display: flex; gap: 1rem; align-items: flex-end; padding: 1.35rem 1.4rem 1.25rem; }
.profile-avatar {
  width: 72px; height: 72px; border-radius: 18px; flex: 0 0 auto;
  display: grid; place-items: center;
  font-family: var(--display); font-size: 2rem; letter-spacing: .04em;
  background: linear-gradient(160deg, #2a3344, #151b24);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.profile-eyebrow { margin: 0; text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--muted); }
.profile-name { margin: .15rem 0; font-family: var(--display); font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: .03em; line-height: 1; }
.profile-status { margin: .2rem 0 .45rem; color: #f2f5fa; font-size: 1.05rem; }
.profile-meta { margin: 0; color: var(--muted); font-size: .9rem; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.profile-actions .inline-form { display: inline; margin: 0; }
.profile-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .75fr); gap: 1rem; align-items: start; }
.profile-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-bottom: 0;
}
.profile-tools .profile-panel { margin: 0; }
.profile-side { display: grid; gap: 1rem; align-content: start; }
.profile-panel h3 { margin-top: 0; }
.totp-qr { display: inline-block; padding: .65rem; margin: .35rem 0 .15rem; background: #fff; border-radius: 8px; line-height: 0; }
.totp-qr img, .totp-qr canvas, .totp-qr table { display: block; max-width: 180px; height: auto; }
.profile-bio { margin-top: 0; white-space: pre-wrap; }
.profile-stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-top: 1rem; }
.profile-stat-row div { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 10px; padding: .55rem .6rem; }
.profile-stat-row span { display: block; color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.profile-stat-row strong { font-size: 1.05rem; }
.profile-status-form { display: grid; gap: .55rem; margin-bottom: .85rem; }
.status-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.status-feed li { padding: .7rem .8rem; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); }
.status-feed p { margin: 0 0 .35rem; }
.status-feed time { color: var(--muted); font-size: .78rem; }
.friend-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.friend-list li { display: flex; justify-content: space-between; gap: .5rem; align-items: center; padding: .45rem 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.friend-list a { display: grid; gap: .1rem; color: inherit; text-decoration: none; }
.friend-req-row { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .55rem; }
.friend-requests { margin-bottom: .75rem; padding-bottom: .65rem; border-bottom: 1px dashed rgba(255,255,255,.12); }
@media (max-width: 900px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-tools { grid-template-columns: 1fr; }
  .profile-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-hero-inner { flex-direction: column; align-items: flex-start; }
}

/* Seasonal event FX */
.season-fx { pointer-events: none; position: fixed; inset: 0; z-index: 40; overflow: hidden; }
.season-fx-snow::before,
.season-fx-snow::after {
  content: '';
  position: absolute; inset: -20% 0 0;
  background-image: radial-gradient(2px 2px at 20px 30px, #fff, transparent),
    radial-gradient(2px 2px at 80px 120px, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 160px 60px, #fff, transparent),
    radial-gradient(2px 2px at 240px 180px, rgba(255,255,255,.7), transparent),
    radial-gradient(1px 1px at 300px 90px, #fff, transparent);
  background-size: 320px 220px;
  animation: cs-snow 14s linear infinite;
  opacity: .55;
}
.season-fx-snow::after { animation-duration: 22s; opacity: .35; transform: translateX(40px); }
@keyframes cs-snow { from { transform: translateY(-10%); } to { transform: translateY(40%); } }
.season-fx-fog { background: radial-gradient(ellipse at 50% 120%, rgba(180,200,220,.18), transparent 55%); }
.season-fx-petals::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 10% 20%, rgba(255,170,190,.35) 0 3px, transparent 4px),
    radial-gradient(circle at 70% 40%, rgba(255,200,210,.3) 0 2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,160,180,.28) 0 3px, transparent 4px);
  animation: cs-snow 18s linear infinite;
}
.season-fx-sparks::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle at 20% 30%, rgba(245,215,110,.55) 0 1.5px, transparent 2px),
    radial-gradient(circle at 80% 60%, rgba(255,255,255,.4) 0 1px, transparent 2px),
    radial-gradient(circle at 55% 20%, rgba(199,58,50,.45) 0 1.5px, transparent 2px);
  animation: cs-snow 10s linear infinite;
}
.banner.event-theme { border-color: rgba(199,58,50,.35); background: linear-gradient(90deg, rgba(199,58,50,.16), rgba(20,24,32,.9)); }
.event-live-banner { border-color: rgba(199,58,50,.4); background: linear-gradient(135deg, rgba(199,58,50,.14), rgba(18,24,32,.95)); }
body.theme-christmas { --red: #c41e3a; }
body.theme-halloween { --red: #ff7a00; }
body.theme-easter { --red: #5aa9d6; }
body.theme-newyear { --red: #f0b429; }

/* Seasonal event — city paper clipping */
.event-paper {
  margin: 0 0 1rem;
  padding: 1rem 1.1rem 1.05rem;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 42%),
    linear-gradient(135deg, rgba(199,58,50,.12), rgba(14,18,26,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.event-paper.theme-halloween {
  background:
    linear-gradient(180deg, rgba(255,122,0,.08), transparent 40%),
    linear-gradient(135deg, rgba(255,122,0,.14), rgba(14,18,26,.96));
  border-color: rgba(255,122,0,.28);
}
.event-paper.theme-christmas {
  background:
    linear-gradient(180deg, rgba(196,30,58,.08), transparent 40%),
    linear-gradient(135deg, rgba(196,30,58,.14), rgba(14,18,26,.96));
  border-color: rgba(196,30,58,.28);
}
.event-paper.theme-easter {
  background:
    linear-gradient(180deg, rgba(126,200,227,.08), transparent 40%),
    linear-gradient(135deg, rgba(90,169,214,.14), rgba(14,18,26,.96));
}
.event-paper.theme-newyear {
  background:
    linear-gradient(180deg, rgba(245,215,110,.08), transparent 40%),
    linear-gradient(135deg, rgba(240,180,41,.14), rgba(14,18,26,.96));
}
.event-paper-mast {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35rem .85rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid rgba(255,255,255,.16);
  margin-bottom: .7rem;
}
.event-paper-title {
  font-family: "Playfair Display", "Times New Roman", Georgia, serif;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: .95rem;
}
.event-paper-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .75rem;
  font-size: .75rem;
  color: var(--muted, #9aa3b2);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.event-paper-headline {
  margin: 0 0 .55rem;
  font-family: "Playfair Display", "Times New Roman", Georgia, serif;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  line-height: 1.15;
  letter-spacing: -.01em;
}
.event-paper-lede {
  margin: 0 0 .85rem;
  font-size: 1.02rem;
  line-height: 1.45;
  color: #e8eaef;
  font-weight: 600;
}
.event-paper-columns {
  column-count: 2;
  column-gap: 1.25rem;
  margin-bottom: .85rem;
}
.event-paper-columns p {
  margin: 0 0 .7rem;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--muted, #b7bec9);
  break-inside: avoid;
}
.event-paper-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  align-items: center;
  padding-top: .65rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-size: .78rem;
  color: var(--muted, #9aa3b2);
  font-style: italic;
}
@media (max-width: 720px) {
  .event-paper-columns { column-count: 1; }
}

.cs-dialog-card .btn[data-cs-dialog-cancel][hidden] { display: none !important; }

/* Wiki */
.wiki-toc-links {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
}
.wiki-toc-link {
  display: inline-flex;
  align-items: center;
  padding: .4rem .75rem;
  border-radius: 8px;
  background: rgba(199,58,50, .12);
  border: 1px solid rgba(199,58,50, .35);
  color: #ffd0d4;
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
}
.wiki-toc-link:hover {
  background: rgba(199,58,50, .22);
  color: #fff;
  border-color: rgba(199,58,50, .6);
}
.wiki-links {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .75rem;
}
.wiki-links .btn {
  background: linear-gradient(180deg, #e0554c, var(--red) 55%, #7a221e);
  border: 0;
  color: #fff;
  box-shadow: 0 6px 14px rgba(199,58,50, .22);
}
.wiki-links .btn:hover { color: #fff; filter: brightness(1.08); }
.wiki-section h3 {
  font-family: var(--display);
  letter-spacing: .04em;
  font-size: 1.45rem;
}

/* Poker felt */
.casino-floor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 1000px) {
  .casino-floor-grid { grid-template-columns: 1fr; }
}
.floor-game { min-height: 0; }
.floor-game--bj,
.floor-game--hilow {
  min-height: 340px;
}
.floor-game [hidden],
.casino-floor [hidden] { display: none !important; }
.keno-grid {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: .2rem;
  margin: .35rem 0;
  overflow: visible;
}
.keno-num {
  position: relative;
  cursor: pointer;
  min-width: 0;
}
.keno-num input { position: absolute; opacity: 0; pointer-events: none; }
.keno-num span {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid #3a2a18;
  background: #120e0a;
  font-size: clamp(.58rem, 1.1vw, .72rem);
  font-weight: 700;
  color: #c9b89a;
}
.keno-num input:checked + span {
  border-color: #f0b429;
  background: #3a2a10;
  color: #f0b429;
}
.keno-num.is-drawn span {
  border-color: #6a8cff;
  background: #152038;
  color: #a8c0ff;
}
.keno-num.is-hit span {
  border-color: #9dffc0;
  background: #143224;
  color: #9dffc0;
  box-shadow: 0 0 0 1px rgba(157,255,192,.35);
}
.bj-hands {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: .55rem 0 .35rem;
  min-height: 160px;
}
.bj-side {
  display: grid;
  gap: .45rem;
  padding: .75rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(240,180,41,.22);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(40, 90, 60, .18), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
  min-height: 150px;
}
.bj-side .muted { font-size: .82rem; letter-spacing: .04em; }
.bj-board {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: flex-start;
  margin-top: .15rem;
  min-height: 5.2rem;
  align-items: center;
}
.floor-game--bj .playing-card,
.floor-game--hilow .playing-card {
  width: 3.55rem;
  height: 5rem;
  border-radius: 8px;
  font-size: 1.15rem;
  font-weight: 800;
  box-shadow: 0 4px 12px rgba(0,0,0,.4);
}
.floor-game--bj .playing-card i,
.floor-game--hilow .playing-card i {
  font-size: 1.4rem;
  margin-top: .2rem;
}
.floor-game--bj .playing-card.is-back,
.floor-game--hilow .playing-card.is-back {
  background:
    repeating-linear-gradient(45deg, #1a3a6e 0 5px, #244a82 5px 10px);
}
@media (max-width: 700px) {
  .bj-hands { grid-template-columns: 1fr; }
  .floor-game--bj .playing-card,
  .floor-game--hilow .playing-card {
    width: 2.9rem;
    height: 4.1rem;
    font-size: .95rem;
  }
}
.scratch-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .55rem;
  margin: .45rem 0 .35rem;
  padding: .65rem;
  border-radius: 12px;
  border: 1px solid #4a3820;
  background:
    linear-gradient(145deg, rgba(240,180,41,.12), transparent 55%),
    linear-gradient(180deg, #1a140e, #0e0b08);
}
.scratch-panel {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 100px;
  border-radius: 10px;
  border: 1px solid rgba(240,180,41,.35);
  background: rgba(0,0,0,.45);
  overflow: hidden;
}
.scratch-panel .slot-ico {
  width: 52px;
  height: 52px;
  opacity: 0;
  transform: scale(.85);
  transition: opacity .25s ease, transform .4s ease;
  z-index: 1;
}
.scratch-panel.is-revealed .slot-ico {
  opacity: 1;
  transform: scale(1);
}
.scratch-foil {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  pointer-events: none;
  background:
    repeating-linear-gradient(-28deg, rgba(255,255,255,.14) 0 2px, transparent 2px 7px),
    linear-gradient(145deg, #9a9a9a, #5a5a5a 40%, #8a8a8a 70%, #4a4a4a);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
canvas.scratch-foil {
  background: transparent;
  box-shadow: none;
}
.scratch-panel.is-revealed .scratch-foil {
  display: none;
}
.scratch-panel.is-pop .slot-ico {
  animation: popIn .35s ease;
}
.scratch-dust {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8c8c8;
  pointer-events: none;
  z-index: 3;
  animation: scratchDust .55s ease forwards;
}
@keyframes scratchDust {
  0% { opacity: .9; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--dx, 12px), var(--dy, 18px)) scale(.3); }
}
.hilow-stage {
  display: grid;
  gap: .85rem;
  margin: .45rem 0 .25rem;
}
.hilow-pot {
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  border-radius: 14px;
  border: 1px solid rgba(240,180,41,.35);
  background:
    radial-gradient(420px 120px at 50% 0%, rgba(240,180,41,.2), transparent 60%),
    linear-gradient(180deg, #20180e, #0c0a08);
  text-align: center;
}
.hilow-pot strong {
  font-family: var(--display);
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  color: #f0b429;
  line-height: 1.1;
}
.hilow-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.hilow-cards > div {
  padding: .75rem .85rem;
  border-radius: 14px;
  border: 1px solid rgba(240,180,41,.2);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28));
  min-height: 150px;
}
.hilow-cards .poker-board {
  min-height: 5.2rem;
  align-items: center;
  margin-top: .45rem !important;
}
.hilow-actions { flex-wrap: wrap; gap: .5rem; }
.hilow-actions .btn { min-width: 7rem; }
.poker-seat.is-turn .poker-avatar {
  box-shadow: 0 0 0 2px #f0b429, 0 0 12px rgba(240,180,41,.45);
}
.poker-seat.is-folded { opacity: .45; }
.poker-actions {
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid rgba(240,180,41,.15);
}
.poker-lounge { overflow: hidden; }
.poker-table-wrap {
  margin-top: 1rem;
  padding: .85rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.15));
}
.poker-table-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem;
  align-items: center;
  margin-bottom: .75rem;
}
.poker-felt {
  --poker-seats: 6;
  position: relative;
  min-height: 340px;
  margin: .5rem auto 0;
  max-width: 720px;
  border-radius: 50% / 42%;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(60, 140, 90, .35), transparent 55%),
    linear-gradient(160deg, #1a6b42 0%, #0d3d28 55%, #082418 100%);
  border: 10px solid #3a2414;
  box-shadow:
    inset 0 0 0 3px #6b4423,
    inset 0 0 40px rgba(0,0,0,.35),
    0 18px 40px rgba(0,0,0,.45);
}
.poker-center {
  position: absolute;
  left: 50%;
  top: 48%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 2;
  width: min(78%, 360px);
}
.poker-pot {
  display: inline-block;
  padding: .2rem .65rem;
  border-radius: 999px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(255,215,120,.35);
  color: #ffe7a8;
  font-size: .78rem;
  font-weight: 700;
  margin-bottom: .45rem;
}
.poker-board {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .3rem;
  min-height: 3.4rem;
  align-items: center;
}
.poker-seat {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 7.2rem;
  text-align: center;
  z-index: 3;
  left: 50%;
  top: 50%;
}
.poker-felt .poker-seat:nth-child(1) { left: 50%; top: 8%; }
.poker-felt .poker-seat:nth-child(2) { left: 86%; top: 28%; }
.poker-felt .poker-seat:nth-child(3) { left: 86%; top: 72%; }
.poker-felt .poker-seat:nth-child(4) { left: 50%; top: 90%; }
.poker-felt .poker-seat:nth-child(5) { left: 14%; top: 72%; }
.poker-felt .poker-seat:nth-child(6) { left: 14%; top: 28%; }
.poker-avatar {
  width: 2.1rem;
  height: 2.1rem;
  margin: 0 auto .2rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #1a222e;
  border: 2px solid rgba(255,255,255,.2);
  color: #fff;
  font-size: .9rem;
}
.poker-seat.is-filled .poker-avatar {
  border-color: rgba(240, 180, 41, .7);
  background: linear-gradient(160deg, #2a3548, #121820);
}
.poker-seat.is-mine .poker-avatar {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(199,58,50,.35);
}
.poker-seat-name {
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.poker-stack {
  font-size: .7rem;
  color: #b6ffc8;
  font-weight: 700;
}
.poker-hole {
  display: flex;
  justify-content: center;
  gap: .15rem;
  margin-top: .25rem;
}
.playing-card {
  position: relative;
  width: 2.05rem;
  height: 2.85rem;
  border-radius: 4px;
  background: linear-gradient(180deg, #fff, #f0f0f0);
  border: 1px solid #c8c8c8;
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
  color: #111;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  font-weight: 800;
  font-size: .72rem;
}
.playing-card em { font-style: normal; }
.playing-card i { font-style: normal; font-size: .85rem; margin-top: .1rem; }
.playing-card.red { color: #c41212; }
.playing-card.black { color: #121212; }
.playing-card.is-back {
  background:
    repeating-linear-gradient(45deg, #1a3a6e 0 4px, #244a82 4px 8px);
  border-color: #0d2244;
}
@media (max-width: 640px) {
  .poker-felt { min-height: 280px; border-width: 7px; }
  .poker-seat { width: 5.6rem; }
  .playing-card { width: 1.7rem; height: 2.4rem; font-size: .62rem; }
}

/* ── City Stocks terminal ── */
.stocks-terminal { max-width: 1100px; margin: 0 auto 1.5rem; }
.stocks-terminal-chrome {
  background: linear-gradient(180deg, #1c222c, #12161e);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.06);
}
.stocks-terminal-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .55rem .9rem;
  background: rgba(0,0,0,.35);
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-size: .88rem;
}
.stocks-terminal-bar strong {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .04em;
  font-weight: 400;
}
.stocks-terminal-dots { display: flex; gap: .35rem; }
.stocks-terminal-dots span {
  width: .55rem; height: .55rem; border-radius: 50%;
  background: #3a4250;
}
.stocks-terminal-dots span:nth-child(1) { background: #c73a32; }
.stocks-terminal-dots span:nth-child(2) { background: #f0b429; }
.stocks-terminal-dots span:nth-child(3) { background: #2ecc71; }
.stocks-back {
  margin-left: auto;
  color: #c5ccd6;
  font-weight: 700;
  font-size: .82rem;
}
.stocks-back:hover { color: #fff; }
.stocks-hero {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-end;
  padding: 1.15rem 1.15rem .85rem;
  background:
    radial-gradient(480px 160px at 0% 0%, rgba(46,204,113,.12), transparent 55%),
    radial-gradient(420px 140px at 100% 0%, rgba(199,58,50,.12), transparent 50%);
}
.stocks-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--muted);
}
.stocks-hero h2 {
  margin: .15rem 0 .35rem;
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  letter-spacing: .03em;
  font-weight: 400;
  line-height: 1;
}
.stocks-hero p { margin: 0; max-width: 52ch; }
.stocks-cash {
  text-align: right;
  padding: .65rem .85rem;
  border-radius: 12px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(46,204,113,.25);
}
.stocks-cash span { display: block; font-size: .72rem; margin-bottom: .15rem; }
.stocks-cash strong { color: var(--green); font-size: 1.25rem; }
.stocks-tape {
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: #0a0d12;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.stocks-tape-track {
  display: flex;
  gap: 1.5rem;
  width: max-content;
  padding: .45rem 0;
  animation: stocksTape 42s linear infinite;
}
.stocks-tape-item {
  white-space: nowrap;
  font-size: .8rem;
  color: #9aa3ad;
}
.stocks-tape-item.is-up { color: #7dffa8; }
.stocks-tape-item.is-down { color: #ff9aa3; }
@keyframes stocksTape {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.stocks-grid {
  display: grid;
  grid-template-columns: 1.15fr .95fr;
  gap: 0;
}
.stocks-card {
  padding: 1rem 1.1rem 1.15rem;
  border-right: 1px solid rgba(255,255,255,.06);
}
.stocks-card:last-child { border-right: 0; }
.stocks-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
  margin-bottom: .75rem;
}
.stocks-card-head h3 {
  margin: 0;
  font-family: var(--display);
  letter-spacing: .04em;
  font-weight: 400;
  font-size: 1.35rem;
}
.stocks-pnl { font-weight: 800; font-size: .92rem; }
.stocks-pnl.is-up, .stocks-change.is-up { color: #7dffa8; }
.stocks-pnl.is-down, .stocks-change.is-down { color: #ff9aa3; }
.stocks-change.is-flat { color: var(--muted); }
.stocks-summary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .55rem;
  margin-bottom: .85rem;
}
.stocks-summary > div {
  padding: .55rem .65rem;
  border-radius: 10px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.06);
}
.stocks-summary span { display: block; font-size: .72rem; margin-bottom: .15rem; }
.stocks-empty { margin: .35rem 0 0; }
.stocks-table { display: flex; flex-direction: column; gap: .15rem; }
.stocks-row {
  display: grid;
  grid-template-columns: 1.4fr .7fr .85fr auto;
  gap: .55rem;
  align-items: center;
  padding: .7rem .55rem;
  border-radius: 10px;
  border: 1px solid transparent;
}
.stocks-row:not(.stocks-row-head):hover {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.05);
}
.stocks-row-head {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  font-weight: 800;
  padding-bottom: .35rem;
}
.stocks-hold-head, .stocks-hold-row {
  grid-template-columns: 1.2fr .7fr .7fr .75fr auto;
}
.stocks-co { display: flex; flex-direction: column; gap: .12rem; min-width: 0; }
.stocks-co strong { font-size: .95rem; }
.stocks-co .muted, .stocks-bought .muted, .stocks-price .muted {
  font-size: .75rem;
  line-height: 1.3;
}
.stocks-price, .stocks-bought { font-weight: 700; }
.stocks-bought, .stocks-price > strong { display: block; }
.stocks-change { font-weight: 800; font-size: .88rem; }
.stocks-change small { display: block; font-weight: 600; opacity: .85; font-size: .72rem; }
.stocks-trade {
  display: flex;
  gap: .35rem;
  align-items: center;
  margin: 0;
}
.stocks-trade input {
  width: 3.6rem;
  padding: .4rem .45rem;
  text-align: center;
}
@media (max-width: 960px) {
  .stocks-grid { grid-template-columns: 1fr; }
  .stocks-card { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06); }
  .stocks-hero { flex-direction: column; align-items: stretch; }
  .stocks-cash { text-align: left; }
}
@media (max-width: 720px) {
  .stocks-row, .stocks-hold-head, .stocks-hold-row {
    grid-template-columns: 1fr 1fr;
  }
  .stocks-row-head { display: none; }
  .stocks-trade { grid-column: 1 / -1; }
}

/* ── Global UI upgrade (epic32) ── */
.sidebar a {
  transition: background .15s ease, color .15s ease, transform .15s ease;
}
.sidebar a:hover { transform: translateX(2px); }
.sidebar a.is-active {
  background: linear-gradient(90deg, rgba(199,58,50,.28), rgba(199,58,50,.06));
}
input, select, textarea {
  background: linear-gradient(180deg, #141c27, #0c1118);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px;
  color: #f3f6fa;
  transition: border-color .15s ease, box-shadow .15s ease;
  color-scheme: dark;
}
select option, select optgroup {
  background: #121a24;
  color: #f3f6fa;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(199,58,50,.55);
  box-shadow: 0 0 0 3px rgba(199,58,50,.15);
}
.trade-item-rows { display: grid; gap: .4rem; margin-bottom: .4rem; }
.trade-item-row {
  display: grid;
  grid-template-columns: 1fr 4.5rem;
  gap: .4rem;
  align-items: center;
}
.job-need {
  font-size: .78rem;
  font-weight: 700;
  color: #ffc978;
  letter-spacing: .02em;
}
.cs-toast-host {
  position: fixed;
  top: 4.75rem;
  right: 1rem;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(400px, calc(100vw - 1.5rem));
  pointer-events: none;
}
.cs-toast {
  pointer-events: auto;
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: linear-gradient(180deg, #222b38, #141a24);
  color: #e8edf4;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  font-size: .95rem;
  line-height: 1.4;
}
.cs-toast-title {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .04em;
  font-weight: 400;
  color: #fff;
}
.cs-toast-body { font-weight: 600; }
.cs-toast.is-in { opacity: 1; transform: none; }
.cs-toast-success { border-color: rgba(61,220,132,.4); box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(61,220,132,.14); }
.cs-toast-error, .cs-toast-danger { border-color: rgba(199,58,50,.5); color: #ffd0d4; }
.cs-toast-info { border-color: rgba(79,140,255,.4); }
.list-row {
  padding: .9rem .35rem;
  border-radius: 8px;
  border-bottom-color: rgba(255,255,255,.06);
  transition: background .15s ease;
}
.list-row:hover { background: rgba(255,255,255,.025); }
.btn, button.btn { letter-spacing: .01em; }
.section-head h2, .panel h2, .panel h3, .stat h3 {
  text-shadow: 0 1px 0 rgba(0,0,0,.35);
}
.stat .value {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  letter-spacing: .03em;
  font-weight: 400;
  line-height: 1;
}
.stat-accent {
  border-color: rgba(199,58,50,.32);
  background:
    radial-gradient(280px 120px at 0% 0%, rgba(199,58,50,.16), transparent 60%),
    linear-gradient(180deg, #1a212c, #10151c);
}
.dash-strip { margin-bottom: 1.15rem; }
.panel-flush { padding: 0; overflow: hidden; }
.panel-flush > .panel-head {
  padding: 1rem 1.15rem .65rem;
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .75rem;
}
.panel-head h3 { margin: 0; }

.page-band {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.15rem;
  padding: 1.15rem 1.25rem 1.1rem;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(199,58,50,.2), transparent 55%),
    radial-gradient(420px 160px at 100% 0%, rgba(59,130,246,.1), transparent 50%),
    linear-gradient(135deg, #171d27 0%, #0e131a 100%);
  box-shadow: var(--shadow);
}
.page-band-crime {
  background:
    radial-gradient(520px 180px at 8% 0%, rgba(199,58,50,.28), transparent 55%),
    radial-gradient(360px 140px at 90% 100%, rgba(240,180,41,.08), transparent 50%),
    linear-gradient(135deg, #1a1518 0%, #0e131a 100%);
  border-color: rgba(199,58,50,.28);
}
.page-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: .72rem;
  color: var(--muted);
  font-weight: 700;
}
.page-band h2 {
  margin: .2rem 0 .35rem;
  font-family: var(--display);
  font-size: clamp(2rem, 3.5vw, 2.85rem);
  letter-spacing: .04em;
  font-weight: 400;
  line-height: .95;
}
.page-band-copy p.muted { margin: 0; max-width: 52ch; }
.page-band-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  justify-content: flex-end;
}

.job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: .75rem;
  padding: 0 1.1rem 1.15rem;
}
.job-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .95rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    linear-gradient(160deg, rgba(255,255,255,.04), transparent 40%),
    linear-gradient(180deg, #1a222e, #121820);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transition: transform .15s ease, border-color .15s ease;
}
.job-card:hover {
  transform: translateY(-2px);
  border-color: rgba(199,58,50,.4);
}
.job-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .5rem;
}
.job-card h4 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .03em;
  font-weight: 400;
  line-height: 1.05;
}
.job-card-desc {
  margin: 0;
  font-size: .86rem;
  line-height: 1.4;
  flex: 1;
}
.job-card-meta {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  font-size: .84rem;
  font-weight: 700;
  color: #d7dde5;
}
.job-card form { margin-top: .25rem; }
.job-card .btn { width: 100%; }

.merit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: .65rem;
}
.merit-card {
  padding: .8rem .85rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.merit-card.is-owned {
  border-color: rgba(46,204,113,.28);
  background: rgba(46,204,113,.06);
}
.merit-card p { margin: 0; font-size: .84rem; }
.merit-card-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
}

.laptop-app { box-shadow: 0 8px 20px rgba(0,0,0,.18); }
.laptop-app-icon { filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); }

.bar {
  height: 8px;
  border-radius: 99px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c91828, #e0554c 55%, #f0b429);
}

@media (max-width: 1100px) {
  .shell { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .page-band { align-items: stretch; }
  .page-band-meta { justify-content: flex-start; }
}

/* -- Visual overhaul epic40 � Sodium Docklands -- */
@keyframes sodiumPulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
@keyframes railIn {
  from { transform: scaleY(.4); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes bandRise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.logo {
  position: relative;
}
.logo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 35%;
  bottom: -3px;
  height: 2px;
  background: linear-gradient(90deg, var(--sodium), transparent);
  animation: sodiumPulse 3.2s ease-in-out infinite;
}

.sidebar a {
  transition: background .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.sidebar a:hover { transform: translateX(3px); }
.sidebar a.is-active {
  background: linear-gradient(90deg, rgba(232,160,32,.22), rgba(232,160,32,.04));
  box-shadow: inset 3px 0 0 var(--sodium);
}
.sidebar a.is-active::before {
  content: "";
  position: absolute;
  /* fallback if absolute not relative */
}

input, select, textarea {
  background: linear-gradient(180deg, #16181b, #0c0d0f);
  border: 1px solid rgba(232, 214, 170, .14);
  border-radius: 4px;
  color: var(--bone);
  transition: border-color .15s ease, box-shadow .15s ease;
  color-scheme: dark;
}
select option, select optgroup {
  background: #141618;
  color: var(--bone);
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: rgba(232, 160, 32, .55);
  box-shadow: 0 0 0 3px rgba(232, 160, 32, .14);
}

.cs-toast-host {
  position: fixed;
  top: 4.75rem;
  right: 1rem;
  z-index: 12000;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  width: min(400px, calc(100vw - 1.5rem));
  pointer-events: none;
}
.cs-toast {
  pointer-events: auto;
  display: grid;
  gap: .2rem;
  padding: .85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(232, 214, 170, .16);
  background: linear-gradient(180deg, #222426, #141618);
  color: #ebe6da;
  box-shadow: 0 18px 44px rgba(0,0,0,.5);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .2s ease;
  font-size: .95rem;
  line-height: 1.4;
}
.cs-toast-title {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: .03em;
  font-weight: 700;
  color: #fff;
}
.cs-toast-body { font-weight: 600; }
.cs-toast.is-in { opacity: 1; transform: none; }
.cs-toast-success { border-color: rgba(61,184,122,.4); }
.cs-toast-error, .cs-toast-danger { border-color: rgba(199,58,50,.5); color: #ffd0d4; }
.cs-toast-info { border-color: rgba(106,143,173,.45); }
.cs-toast-reward { border-color: rgba(232,160,32,.55); box-shadow: 0 18px 44px rgba(0,0,0,.5), inset 0 0 0 1px rgba(232,160,32,.12); }

.cs-dialog-card {
  border-radius: var(--radius) !important;
  border: 1px solid rgba(232, 160, 32, .28) !important;
  background:
    radial-gradient(480px 160px at 0% 0%, rgba(232,160,32,.14), transparent 55%),
    linear-gradient(180deg, #1c1e21 0%, #121416 100%) !important;
  box-shadow: 0 28px 70px rgba(0,0,0,.55) !important;
}
.cs-dialog-title {
  font-family: var(--display) !important;
  font-weight: 800 !important;
  letter-spacing: .03em !important;
}
.cs-dialog-card .btn[data-cs-dialog-ok] {
  background: linear-gradient(180deg, #efb03a, var(--sodium) 45%, var(--sodium-dim)) !important;
  color: #1a1205 !important;
  border: 1px solid rgba(0,0,0,.35) !important;
}

.cs-tutorial-card {
  border: 1px solid rgba(232, 160, 32, .35) !important;
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(232, 160, 32, .16), transparent 55%),
    linear-gradient(180deg, #1c1e21 0%, #121416 100%) !important;
}
.cs-tutorial-progress > span {
  background: linear-gradient(90deg, var(--sodium-dim), var(--sodium)) !important;
}

.page-band {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.15rem;
  padding: 1.15rem 1.25rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid rgba(232, 160, 32, .18);
  background:
    radial-gradient(520px 180px at 0% 0%, rgba(232,160,32,.18), transparent 55%),
    radial-gradient(420px 160px at 100% 0%, rgba(106,143,173,.08), transparent 50%),
    linear-gradient(135deg, #1a1c1f 0%, #0e1012 100%);
  box-shadow: var(--shadow);
  animation: bandRise .4s ease both;
}
.page-band-crime {
  background:
    radial-gradient(520px 180px at 8% 0%, rgba(199,58,50,.22), transparent 55%),
    radial-gradient(360px 140px at 90% 100%, rgba(232,160,32,.1), transparent 50%),
    linear-gradient(135deg, #1a1514 0%, #0e1012 100%);
  border-color: rgba(199, 58, 50, .28);
}
.page-kicker {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: .7rem;
  color: var(--sodium);
  font-weight: 700;
}
.page-band h2 {
  margin: .2rem 0 .35rem;
  font-family: var(--display);
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  letter-spacing: .02em;
  font-weight: 800;
  line-height: .95;
}

.stat-accent {
  border-color: rgba(232,160,32,.35);
  background:
    radial-gradient(280px 120px at 0% 0%, rgba(232,160,32,.14), transparent 60%),
    linear-gradient(180deg, #1c1e21, #101214);
}
.stat .value {
  font-family: var(--display);
  font-size: clamp(1.7rem, 2.4vw, 2.15rem);
  letter-spacing: .02em;
  font-weight: 800;
  line-height: 1;
}

.job-card {
  border-radius: var(--radius);
  border: 1px solid rgba(232, 214, 170, .1);
  background:
    linear-gradient(160deg, rgba(232,214,170,.04), transparent 40%),
    linear-gradient(180deg, #1a1c1f, #121416);
  box-shadow: 0 12px 28px rgba(0,0,0,.22);
  transition: transform .18s ease, border-color .18s ease;
}
.job-card:hover {
  transform: translateY(-2px);
  border-color: rgba(232,160,32,.4);
}
.job-card h4 {
  font-family: var(--display);
  font-weight: 800;
}

.merit-card {
  border-radius: var(--radius);
  border: 1px solid rgba(232, 214, 170, .1);
}
.merit-card.is-owned {
  border-color: rgba(61,184,122,.28);
  background: rgba(61,184,122,.06);
}

.bar {
  height: 6px;
  border-radius: 2px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.bar > i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--sodium-dim), var(--sodium));
}

.hero {
  border-radius: var(--radius);
  border: 1px solid rgba(232, 160, 32, .16);
  background:
    linear-gradient(180deg, rgba(8,9,10,.2), rgba(8,9,10,.9)),
    radial-gradient(ellipse at 20% 30%, rgba(232,160,32,.12), transparent 50%),
    linear-gradient(135deg, #1a1c1f, #0a0b0c);
}
.hero h1 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .02em;
}

.crime-stage-panel { border-color: rgba(232,160,32,.3); }
.crime-stage.is-active {
  border-color: var(--sodium);
  color: #ffe7a8;
  background: rgba(232,160,32,.1);
}

.stocks-row:not(.stocks-row-head):hover {
  background: rgba(232,160,32,.04);
  border-color: rgba(232,160,32,.12);
}

.flash-success { background: #0f2a1c; color: #b6ffc8; border-color: rgba(61,184,122,.25); }
.flash-error, .flash-danger { background: #2a1214; color: #ffb4b4; border-color: rgba(199,58,50,.3); }
.flash-info { background: #152028; color: #cfe0ff; border-color: rgba(106,143,173,.25); }
.flash-reward { background: #2a2210; color: #ffe7a8; border-color: rgba(232,160,32,.35); }

.mayor-tag {
  background: #8a6418;
  border-radius: 3px;
}

body.is-landing {
  background:
    radial-gradient(900px 500px at 20% 0%, rgba(232,160,32,.12), transparent 50%),
    #050607;
}
.land-btn-primary {
  background: linear-gradient(180deg, #efb03a, var(--sodium) 45%, var(--sodium-dim));
  color: #1a1205;
  border: 1px solid rgba(0,0,0,.35);
  box-shadow: var(--glow-sodium);
}
.land-kicker { color: var(--sodium); letter-spacing: .16em; }
.land-brand {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .03em;
}
.land-live i {
  background: var(--sodium);
  box-shadow: 0 0 10px rgba(232,160,32,.6);
  animation: sodiumPulse 2s ease-in-out infinite;
}
.public-header .logo span,
.land-brand span { color: var(--sodium); }

.btn-danger, .btn-attack, button.btn-danger {
  background: linear-gradient(180deg, #e0554c, var(--red) 50%, var(--red-dim));
  color: #fff;
  box-shadow: var(--glow-red);
  border: 1px solid rgba(0,0,0,.35);
}
.btn-danger:hover, button.btn-danger:hover { color: #fff; }

.admin-danger-panel {
  border-color: rgba(199, 58, 50, .35);
  background:
    radial-gradient(420px 140px at 0% 0%, rgba(199,58,50,.12), transparent 55%),
    linear-gradient(180deg, #1a1514, #121416);
}
.admin-danger-panel h4 { color: #ffb4b4; }

.admin-db-layout { align-items: start; }
.admin-db-input {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .86rem;
  line-height: 1.45;
  min-height: 8rem;
}
.admin-db-sql {
  margin: 0 0 .65rem;
  padding: .65rem .75rem;
  border-radius: 6px;
  background: rgba(0,0,0,.28);
  border: 1px solid rgba(255,255,255,.06);
  color: #c9d2dc;
  font-size: .78rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.admin-db-scroll {
  overflow: auto;
  max-height: min(70vh, 640px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
}
.admin-db-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .78rem;
  white-space: nowrap;
}
.admin-db-table th,
.admin-db-table td {
  padding: .4rem .55rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  vertical-align: top;
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-db-table th {
  position: sticky;
  top: 0;
  background: #161a1f;
  color: var(--sodium);
  font-weight: 700;
  z-index: 1;
}
.admin-db-table tr:hover td { background: rgba(232,160,32,.06); }

.content { animation: bandRise .35s ease; }

.pill, .tag, .tag-row .tag {
  border-radius: 4px !important;
}
.chip-tray .chip { border-radius: 50% !important; }
.tabs a, .tabs span { border-radius: 4px; }

.district-card,
[data-map-detail] {
  min-width: 0;
}
[data-map-detail] h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: .02em;
  margin: 0 0 .35rem;
}
[data-map-detail] .tag-row {
  margin-top: .45rem;
}

/* Never let casino roulette chips style estate/map tags */
.tag-row .chip,
.biz-detail .chip:not(.chip-tray .chip) {
  all: unset;
  display: inline-flex !important;
  align-items: center;
  border: 1px solid rgba(232, 214, 170, .16) !important;
  background: rgba(232, 160, 32, .08) !important;
  padding: .35rem .7rem !important;
  border-radius: 4px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
  color: #ddd6c6 !important;
  white-space: nowrap !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  cursor: default !important;
}

.list-row:hover { background: rgba(232,160,32,.04); }

.panel h2, .panel h3, .stat h3, .section-head h2 {
  font-weight: 800;
  text-shadow: none;
}

.fuel-board {
  margin: 0 0 1rem;
  padding: .9rem 1rem 1rem;
  border: 1px solid rgba(232, 160, 32, .35);
  border-radius: 12px;
  background: rgba(232, 160, 32, .06);
}
.fuel-board-head h4 {
  margin: 0 0 .25rem;
}
.fuel-board-head p,
.fuel-board-foot {
  margin: .35rem 0 0;
  color: var(--muted);
  font-size: .88rem;
}
.fuel-list {
  margin: .75rem 0 .35rem;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.fuel-stop {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0;
  padding: .65rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  color: var(--text);
  font-size: .92rem;
  cursor: pointer;
}
.fuel-stop input[type="checkbox"] {
  width: 1.05rem;
  height: 1.05rem;
  flex: 0 0 auto;
  margin: 0;
  accent-color: #e8a020;
}
.fuel-stop-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}
.fuel-stop-copy strong {
  color: var(--text);
  font-weight: 700;
}
.fuel-stop .tag {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(232, 214, 170, .28);
  background: rgba(232, 160, 32, .16);
  color: #f0d7a2;
  border-radius: 4px;
  padding: .2rem .5rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.fuel-depart .btn {
  margin-top: .15rem;
}
@media (max-width: 800px) {
  .fuel-stop { align-items: flex-start; flex-wrap: wrap; }
  .fuel-stop .tag { margin-left: 1.8rem; }
}

@media (max-width: 900px) {
  .page-band { align-items: stretch; }
  .page-band-meta { justify-content: flex-start; }
}

/* Dealership orders desk */
.dealer-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: 0 0 .85rem;
  padding: .2rem 0 .55rem;
  border-bottom: 1px solid var(--line);
}
.dealer-tab {
  display: inline-flex;
  align-items: center;
  padding: .42rem .7rem;
  border-radius: 8px;
  border: 1px solid transparent;
  color: var(--muted);
  text-decoration: none;
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.dealer-tab:hover {
  color: var(--text);
  background: rgba(255,255,255,.04);
}
.dealer-tab.is-active {
  color: #f5e6b8;
  background: rgba(212, 168, 45, .12);
  border-color: rgba(212, 168, 45, .45);
}
.dealer-desk { min-height: 8rem; }
.dealer-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  margin: 0 0 .65rem;
  flex-wrap: wrap;
}
.dealer-panel-head h4 { margin: 0 0 .2rem; font-size: .95rem; }
.dealer-panel-head .muted { margin: 0; font-size: .82rem; }
.dealer-form {
  display: grid;
  grid-template-columns: minmax(10rem, 1.6fr) minmax(4.5rem, .55fr) minmax(7rem, .9fr) auto;
  gap: .55rem .65rem;
  align-items: end;
  margin: 0 0 .35rem;
}
.dealer-form label {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.dealer-form select,
.dealer-form input { width: 100%; min-height: 2.35rem; }
.dealer-form .btn { justify-self: start; min-height: 2.35rem; }
.dealer-locked {
  padding: 1rem 1.05rem;
  border: 1px dashed rgba(212, 168, 45, .35);
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(212,168,45,.07), rgba(255,255,255,.02));
}
.dealer-locked h4 { margin: 0 0 .35rem; font-size: .95rem; }
.facility-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
  gap: .65rem;
}
.facility-card {
  padding: .8rem .85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.facility-card strong { font-size: .92rem; }
.facility-card .muted { margin: 0; font-size: .8rem; line-height: 1.4; }
.facility-card.is-key {
  border-color: rgba(212, 168, 45, .42);
  background: linear-gradient(160deg, rgba(212,168,45,.1), rgba(255,255,255,.02));
}
.facility-card.is-owned { border-color: rgba(107, 203, 139, .35); }
@media (max-width: 720px) {
  .dealer-form { grid-template-columns: 1fr 1fr; }
  .dealer-form .btn { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .dealer-form { grid-template-columns: 1fr; }
  .dealer-tabs { gap: .25rem; }
  .dealer-tab {
    flex: 1 1 auto;
    justify-content: center;
    font-size: .8rem;
    padding: .4rem .5rem;
  }
}

.dealer-form-ie {
  grid-template-columns: minmax(10rem, 1.5fr) minmax(4.5rem, .5fr) minmax(7rem, .85fr) minmax(8rem, 1fr) auto;
}
.dealer-form-parts {
  grid-template-columns: minmax(18rem, 2.4fr) minmax(7.5rem, .85fr) minmax(4rem, .45fr) auto;
}
.dealer-form-parts select {
  min-width: 0;
  width: 100%;
}
.wholesale-dest-select {
  min-width: 18rem;
  width: 18rem;
  max-width: min(24rem, 100%);
}
@media (max-width: 720px) {
  .dealer-form-ie { grid-template-columns: 1fr 1fr; }
  .dealer-form-parts { grid-template-columns: 1fr 1fr; }
  .wholesale-dest-select { min-width: 12rem; width: 100%; max-width: 100%; }
}

/* -- Merits / loadout / criminal record --------------------------- */
.topbar-merit-link {
  color: inherit;
  text-decoration: none;
}
.topbar-merit-link:hover { color: #f0b429; }
.merit-tips {
  margin: .35rem 0 0;
  padding-left: 1.1rem;
  color: var(--muted, #9a9080);
  line-height: 1.55;
}
.merit-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
  margin-top: .65rem;
}
@media (max-width: 960px) {
  .merit-grid { grid-template-columns: 1fr; }
}
.merit-tile {
  display: grid;
  grid-template-columns: 3rem 1fr;
  gap: .65rem;
  align-items: start;
  padding: .75rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--line, #2a2a2a);
  background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18));
}
.merit-tile.is-owned { border-color: rgba(240,180,41,.35); }
.merit-tile.is-max { border-color: rgba(157,255,192,.35); }
.merit-ico {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #1a222e;
  border: 2px solid rgba(255,255,255,.12);
  font-size: 1.1rem;
}
.merit-title {
  display: flex;
  justify-content: space-between;
  gap: .5rem;
  align-items: baseline;
}
.merit-body p { margin: .25rem 0 .45rem; font-size: .86rem; }
.home-extra-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 1rem;
}
@media (max-width: 900px) {
  .home-extra-grid { grid-template-columns: 1fr; }
}
.loadout-panel {
  overflow: hidden;
  background:
    radial-gradient(520px 180px at 18% 10%, rgba(240,180,41,.1), transparent 55%),
    linear-gradient(180deg, #161b24, #0e1118);
}
.loadout-rack { margin-top: .35rem; }
.loadout-rack-stage {
  display: grid;
  grid-template-columns: minmax(12.5rem, 15rem) minmax(7rem, 8.25rem) minmax(0, 1fr);
  gap: .75rem;
  align-items: stretch;
}
.loadout-rack.is-compact .loadout-rack-stage {
  grid-template-columns: minmax(10rem, 12rem) minmax(6.25rem, 7.25rem) minmax(0, 1fr);
  gap: .55rem;
}
.loadout-figure {
  position: relative;
  border-radius: 16px;
  border: 1px solid rgba(140,150,165,.18);
  background:
    radial-gradient(120% 70% at 50% 18%, rgba(90,100,115,.35), transparent 55%),
    linear-gradient(180deg, #2a3038 0%, #12161c 55%, #0a0c10 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0 0 .5rem;
  overflow: hidden;
  min-height: 17.5rem;
}
.loadout-figure-glow {
  position: absolute;
  inset: 6% 8% auto 8%;
  height: 38%;
  background: radial-gradient(ellipse at center, rgba(180,190,205,.16), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.loadout-silhouette {
  position: absolute;
  left: 0;
  right: 0;
  top: .2rem;
  bottom: 2.35rem;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.65)) saturate(.9) contrast(1.06);
  z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 86%, transparent 100%);
}
.loadout-rack.is-compact .loadout-figure { min-height: 14rem; }
.loadout-rack.is-compact .loadout-silhouette { bottom: 2.1rem; }
.loadout-figure-meta {
  position: relative;
  z-index: 2;
  text-align: center;
  margin-top: 0;
  padding: 0 .35rem;
}
.loadout-figure-meta strong {
  display: block;
  font-family: var(--display);
  color: #f0b429;
  letter-spacing: .04em;
}
.loadout-figure-meta span {
  font-size: .72rem;
  color: var(--muted, #9a9080);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.loadout-featured {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 0;
  max-width: 8.25rem;
}
.loadout-featured-label {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c4a86a;
}
.loadout-featured-frame {
  flex: 1;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(90,120,160,.12), transparent 55%),
    linear-gradient(180deg, #141a24, #0a0d12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  padding: .7rem .45rem;
  text-align: center;
}
.loadout-featured-frame.is-filled {
  border-color: rgba(240,180,41,.45);
  box-shadow:
    inset 0 0 0 1px rgba(240,180,41,.15),
    0 0 24px rgba(240,180,41,.08);
}
.loadout-featured-frame .loadout-glyph {
  width: 2.4rem;
  height: 2.4rem;
  opacity: .9;
  margin-bottom: .1rem;
}
.loadout-featured-frame .loadout-item-img-lg {
  width: 3.15rem;
  height: 3.15rem;
}
.loadout-featured-frame strong {
  font-size: .9rem;
  line-height: 1.2;
}
.loadout-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .45rem;
}
.loadout-slot {
  position: relative;
  min-height: 5.1rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 45%),
    #12171f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .18rem;
  padding: .55rem .4rem .45rem;
  text-align: center;
  transition: border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.loadout-slot:hover {
  border-color: rgba(240,180,41,.35);
  transform: translateY(-1px);
}
.loadout-slot.is-filled {
  border-color: rgba(240,180,41,.5);
  background:
    linear-gradient(160deg, rgba(240,180,41,.1), transparent 50%),
    linear-gradient(180deg, #1c2430, #10151c);
  box-shadow: inset 0 0 0 1px rgba(240,180,41,.12);
}
.loadout-slot-label {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #8e8578;
}
.loadout-slot.is-filled .loadout-slot-label { color: #c4a86a; }
.loadout-empty {
  font-size: .72rem;
  color: rgba(154,144,128,.55);
}
.loadout-name {
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 0 .15rem;
}
.loadout-dur {
  display: block;
  width: 72%;
  height: 3px;
  margin-top: .2rem;
  border-radius: 99px;
  background: rgba(255,255,255,.1);
  overflow: hidden;
}
.loadout-dur i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #c4841a, #f0b429);
}
.loadout-dur-txt {
  font-size: .65rem;
  color: #c4a86a;
}
.loadout-glyph {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  margin-bottom: .15rem;
  background: center / contain no-repeat;
  opacity: .55;
  filter: drop-shadow(0 0 6px rgba(240,180,41,.15));
}
.loadout-slot.is-filled .loadout-glyph,
.loadout-featured-frame.is-filled .loadout-glyph { opacity: .95; }
.loadout-glyph-primary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f0b429' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 36h34l10-6v12l-10-2H8z'/%3E%3Cpath d='M42 30l12-8M14 36v8'/%3E%3C/svg%3E");
}
.loadout-glyph-secondary {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d7c39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 40h22l8-4v10l-8-2H18z'/%3E%3Cpath d='M40 36l8-6M22 40v6'/%3E%3C/svg%3E");
}
.loadout-glyph-melee {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d7c39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 50L40 24l6 6L20 56z'/%3E%3Cpath d='M40 24l8-8 6 6-8 8'/%3E%3C/svg%3E");
}
.loadout-glyph-temp {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d7c39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='36' r='14'/%3E%3Cpath d='M32 22v-6M26 18h12'/%3E%3C/svg%3E");
}
.loadout-glyph-armour {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f0b429' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M32 10l18 6v14c0 14-10 24-18 28-8-4-18-14-18-28V16z'/%3E%3C/svg%3E");
}
.loadout-glyph-clothing {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d7c39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 14l10 6 10-6 8 8-8 4v24H22V26l-8-4z'/%3E%3C/svg%3E");
}
.loadout-glyph-legs {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d7c39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 12h20l4 40H36L32 28 28 52H18z'/%3E%3C/svg%3E");
}
.loadout-glyph-feet {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d7c39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 28h16l4 8h14v8H18c-4 0-6-2-6-6z'/%3E%3C/svg%3E");
}
.loadout-glyph-hands {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23d7c39a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M28 18v14M34 16v16M40 18v14M22 28v10c0 8 6 14 14 14s12-4 12-10V30'/%3E%3C/svg%3E");
}
.loadout-glyph-bag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23f0b429' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 26h24l3 28H17z'/%3E%3Cpath d='M24 26V20c0-4 3-8 8-8s8 4 8 8v6'/%3E%3Cpath d='M20 34h24'/%3E%3C/svg%3E");
}
.loadout-carry-meta {
  display: block;
  margin-top: .15rem;
  font-size: .72rem;
  color: #c4a86a;
  letter-spacing: .02em;
}
.loadout-item-img {
  width: 2.55rem;
  height: 2.55rem;
  border-radius: .4rem;
  object-fit: cover;
  object-position: center;
  display: block;
  margin: 0 auto .28rem;
  background: #0c0e12;
  box-shadow: 0 0 0 1px rgba(196,168,106,.28), inset 0 0 0 1px rgba(0,0,0,.35);
}
.loadout-item-img-lg {
  width: 4.1rem;
  height: 4.1rem;
  border-radius: .5rem;
  margin-bottom: .45rem;
}
.inv-item-cell {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}
.inv-item-img {
  width: 3.35rem;
  height: 3.35rem;
  border-radius: .5rem;
  object-fit: cover;
  object-position: center;
  flex: 0 0 auto;
  background: linear-gradient(160deg, #151820, #0c0e12);
  border: 1px solid rgba(255,255,255,.1);
}
.inv-cat-tag {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .15rem;
}
@media (max-width: 900px) {
  .loadout-rack-stage,
  .loadout-rack.is-compact .loadout-rack-stage {
    grid-template-columns: minmax(10rem, 12rem) minmax(6.25rem, 7rem) minmax(0, 1fr);
  }
  .loadout-figure { min-height: 15.5rem; }
  .loadout-silhouette { bottom: 2.2rem; }
  .loadout-featured { max-width: 7rem; min-height: 0; }
}
@media (max-width: 640px) {
  .loadout-rack-stage,
  .loadout-rack.is-compact .loadout-rack-stage {
    grid-template-columns: 1fr 6.5rem;
    grid-template-areas:
      "figure featured"
      "slots slots";
  }
  .loadout-figure { grid-area: figure; min-height: 16rem; }
  .loadout-featured { grid-area: featured; max-width: none; }
  .loadout-slots { grid-area: slots; }
}
.record-summary { margin: 0 0 .55rem; font-size: .86rem; }
.record-table { display: grid; gap: .2rem; }
.record-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
  font-size: .9rem;
}
.home-merit-teaser {
  margin-top: .85rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(255,255,255,.08);
  display: grid;
  gap: .35rem;
}

/* Item Market (Torn-style grid) */
.market-tabs { flex-wrap: wrap; gap: .35rem; }
.market-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  margin: 0 0 .85rem;
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .65rem;
}
.market-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: .35rem;
  padding: .65rem .45rem .7rem;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #171c24, #0e1218);
  color: inherit;
  text-decoration: none;
  min-height: 8.5rem;
  transition: border-color .15s ease, transform .15s ease;
}
.market-card:hover {
  border-color: rgba(240,180,41,.4);
  transform: translateY(-1px);
}
.market-card img {
  width: 4.2rem;
  height: 4.2rem;
  object-fit: cover;
  border-radius: .4rem;
  background: #0a0c10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.06);
}
.market-card strong {
  font-size: .82rem;
  line-height: 1.2;
  font-weight: 600;
}
.market-card span {
  font-size: .78rem;
  color: #c8c2b4;
}
.market-card span em {
  font-style: normal;
  color: var(--muted, #8a8378);
}
.market-card.is-mine { cursor: default; }
.market-detail-hero {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
}
.market-detail-img {
  width: 7.5rem;
  height: 7.5rem;
  object-fit: cover;
  border-radius: .55rem;
  background: #0a0c10;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08);
}
.market-effect {
  color: #7dcc9a;
  font-size: .9rem;
  margin: .35rem 0 0;
}
@media (max-width: 1100px) {
  .market-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .market-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .market-detail-hero { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .market-detail-img { width: 5.5rem; height: 5.5rem; }
}
@media (max-width: 520px) {
  .market-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Hospital ward table */
.hospital-table { width: 100%; border-collapse: collapse; }
.hospital-table th,
.hospital-table td {
  text-align: left;
  padding: .55rem .4rem;
  border-bottom: 1px solid rgba(255,255,255,.07);
  vertical-align: top;
  font-size: .9rem;
}
.hospital-table th {
  color: var(--muted, #9a9080);
  font-weight: 600;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}

/* City bank vault feel */
.bank-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  margin: .85rem 0 1rem;
}
.bank-ledger-card {
  border-radius: 12px;
  border: 1px solid rgba(196,168,106,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 55%),
    linear-gradient(160deg, #171c24, #0d1016);
  padding: .85rem .9rem;
  display: grid;
  gap: .2rem;
}
.bank-ledger-card.is-vault {
  border-color: rgba(240,180,41,.4);
  box-shadow: inset 0 0 0 1px rgba(240,180,41,.08);
}
.bank-ledger-label {
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #c4a86a;
}
.bank-ledger-card strong {
  font-size: 1.25rem;
  font-family: var(--display, Georgia, serif);
}
.bank-ledger-card em {
  font-style: normal;
  font-size: .78rem;
  color: var(--muted, #9a9080);
}
.bank-counter {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .85rem;
}
.bank-invest-form {
  display: grid;
  grid-template-columns: 1.3fr 1fr auto;
  gap: .65rem;
  align-items: end;
  margin: .75rem 0 1rem;
}
.bank-invest-chart {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: .45rem;
  min-height: 7rem;
  align-items: end;
  padding: .5rem 0 .2rem;
}
.bank-invest-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .2rem;
  min-height: 6.5rem;
}
.bank-invest-bar i {
  display: block;
  width: 70%;
  max-width: 2.4rem;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #e8c86a, #b45309);
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}
.bank-invest-bar span {
  font-size: .72rem;
  font-weight: 700;
  color: #e8dfd0;
}
.bank-invest-bar em {
  font-style: normal;
  font-size: .65rem;
  color: var(--muted, #9a9080);
}
.donate-buy {
  display: grid;
  gap: .45rem;
  margin-top: .55rem;
}
.donate-qty {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--muted, #9a9080);
}
.donate-qty input {
  width: 4rem;
}
.buy-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
}
.buy-qty-row {
  display: inline-flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .4rem;
  flex: 0 0 auto;
}
.buy-qty-row input[type="number"],
.buy-qty-row select {
  flex: 0 0 auto;
}
.buy-qty-row .btn {
  flex: 0 0 auto;
  white-space: nowrap;
}
@media (max-width: 640px) {
  .buy-form {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }
  .buy-form .pay-method {
    margin: 0 0 .15rem !important;
  }
  .buy-qty-row {
    display: flex;
    width: 100%;
  }
  .buy-qty-row input[type="number"] {
    width: 4.25rem !important;
    flex: 0 0 4.25rem;
  }
  .buy-qty-row select {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none !important;
  }
  .buy-qty-row .btn {
    flex: 1 1 auto;
  }
  .list-row .buy-form,
  .parts-row .buy-form,
  .trade-card-actions .buy-form {
    margin-top: .35rem;
  }
}
@media (max-width: 900px) {
  .bank-ledger { grid-template-columns: 1fr 1fr; }
  .bank-counter, .bank-invest-form { grid-template-columns: 1fr; }
}

/* -- Mail actions -------------------------------------------------- */
.list-row.is-unread {
  background: rgba(198, 40, 40, .16);
  border-color: rgba(198, 40, 40, .35);
  box-shadow: inset 3px 0 0 rgba(220, 70, 70, .75);
}
.list-row.is-unread strong { color: #f3d0a8; }
.tonight-job-panel {
  border-color: rgba(232, 214, 170, .28);
}
.hospital-recovery-line { margin: 0; line-height: 1.45; }
.mail-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .45rem;
}
.mail-delete-form { display: inline; margin: 0; }

/* -- Live chat dock ------------------------------------------------ */
.chat-dock {
  position: fixed;
  right: .85rem;
  bottom: .85rem;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .45rem;
  font-family: var(--sans, Outfit, system-ui, sans-serif);
  pointer-events: none;
}
.chat-dock[hidden] { display: none !important; }
.chat-dock > * { pointer-events: auto; }
.chat-rail {
  display: flex;
  gap: .4rem;
  justify-content: flex-end;
}
.chat-fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 2.75rem;
  height: 2.55rem;
  padding: 0 .75rem 0 .65rem;
  border-radius: .65rem;
  border: 1px solid #7CDE3A;
  background: linear-gradient(160deg, #B8F55A, #7CDE3A 55%, #5FBF28);
  color: #102008;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 1px rgba(124,222,58,.25);
}
.chat-fab-ico { font-size: .95rem; line-height: 1; }
.chat-fab-label { line-height: 1; }
.chat-fab:hover {
  border-color: #d4ff8a;
  filter: brightness(1.06);
  color: #0a1605;
}
.chat-dock.is-open .chat-fab {
  border-color: #e8ffb0;
  box-shadow: 0 10px 28px rgba(0,0,0,.45), 0 0 0 2px rgba(184,245,90,.35);
}
.chat-badge {
  position: absolute;
  top: -.4rem;
  right: -.4rem;
  min-width: 1.2rem;
  height: 1.2rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: #e11d48;
  color: #fff;
  border: 2px solid #0b0f14;
  font-size: .68rem;
  font-style: normal;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  line-height: 1;
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
  z-index: 2;
}
.chat-badge[hidden] { display: none !important; }
.chat-panel {
  width: min(22.5rem, calc(100vw - 1.4rem));
  height: min(26rem, calc(100vh - 6.5rem));
  display: flex;
  flex-direction: column;
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(180deg, #12181f 0%, #0b0f14 100%);
  box-shadow: 0 18px 48px rgba(0,0,0,.55);
}
.chat-panel[hidden],
.chat-dock:not(.is-open) .chat-panel {
  display: none !important;
}
.chat-panel-head {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .55rem;
  background: linear-gradient(90deg, #1a3a2a, #123024 55%, #0f1c18);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.chat-channel-wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  flex: 1;
  min-width: 0;
  margin: 0;
}
.chat-channel-ico { color: #8fd9a8; flex: 0 0 auto; }
.chat-channel-wrap select {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 0;
  color: #f2f5f3;
  font-weight: 700;
  font-size: .92rem;
  padding: .15rem 0;
}
.chat-min-btn {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: .35rem;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.25);
  color: #c9d2cc;
  cursor: pointer;
  line-height: 1;
}
.chat-unread-banner {
  display: flex;
  justify-content: center;
  padding: .35rem .5rem 0;
}
.chat-unread-banner[hidden] { display: none !important; }
.chat-unread-banner button {
  border: 0;
  border-radius: 999px;
  background: #2b6cb0;
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: .28rem .7rem;
  cursor: pointer;
}
.chat-log {
  flex: 1;
  overflow: auto;
  padding: .55rem .65rem;
  display: flex;
  flex-direction: column;
  gap: .55rem;
}
.chat-msg {
  display: grid;
  grid-template-columns: 1.7rem minmax(0, 1fr);
  gap: .45rem;
  align-items: start;
}
.chat-avatar {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #243041;
  color: #f0b429;
  font-size: .72rem;
  font-weight: 800;
}
.chat-msg-head {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-bottom: .12rem;
}
.chat-msg-body strong {
  display: block;
  font-size: .78rem;
  color: #f4f1ea;
  font-weight: 700;
}
.chat-msg-body .chat-name { color: #f4f1ea; font-weight: 700; }
.chat-msg-body .chat-name-owner { color: #ff2d2d; font-weight: 800; }
.chat-msg-body .chat-name-admin { color: #f0c429; font-weight: 800; }
.chat-msg-body .chat-name-moderator { color: #3dce6a; font-weight: 800; }
.chat-del {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: #8a939c;
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  padding: .05rem .25rem;
}
.chat-del:hover { color: #ff8a8a; }
.chat-bubble {
  display: inline-block;
  max-width: 100%;
  padding: .35rem .55rem;
  border-radius: .55rem;
  background: rgba(255,255,255,.06);
  color: #c8d0d8;
  font-size: .84rem;
  line-height: 1.35;
  word-break: break-word;
}
.chat-msg.is-mine .chat-bubble {
  background: rgba(240,180,41,.14);
  color: #f3e7c8;
}
.chat-compose {
  display: flex;
  gap: .35rem;
  padding: .5rem .55rem .6rem;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(0,0,0,.22);
}
.chat-compose input {
  flex: 1;
  min-width: 0;
  border-radius: .45rem;
  border: 1px solid rgba(255,255,255,.1);
  background: #0c1016;
  color: #eef2f6;
  padding: .45rem .55rem;
  font-size: .86rem;
}
.chat-send {
  width: 2.2rem;
  border-radius: .45rem;
  border: 0;
  background: #c9a227;
  color: #1a1408;
  font-weight: 800;
  cursor: pointer;
}
.chat-err {
  margin: 0;
  padding: 0 .65rem .45rem;
  font-size: .75rem;
  color: #e8a090;
}
.chat-err[hidden] { display: none !important; }
@media (max-width: 640px) {
  .chat-dock { right: .5rem; bottom: .5rem; }
  .chat-panel {
    width: min(100vw - 1rem, 22rem);
    height: min(55vh, 24rem);
  }
}

/* -- Crew house desk ------------------------------------------------- */
.crew-page { display: grid; gap: 1.1rem; }
.crew-skyline.city-skyline {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(232,214,170,.14);
  box-shadow: var(--shadow);
  animation: crewFadeUp .55s ease both;
}
.crew-skyline .crew-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: .85rem;
}
.crew-pill {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .4rem .7rem;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(8px);
  font-size: .82rem;
  color: #e8e4d8;
}
.crew-pill strong {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--bone);
  font-size: 1rem;
}
.crew-pill.is-dirty strong { color: #f0b429; }
.crew-pill.is-clean strong { color: #7dcaa0; }
.crew-doors.city-doors.is-row {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: .45rem;
  animation: crewFadeUp .55s ease .08s both;
}
.crew-doors .city-door {
  border-radius: 12px;
  border: 1px solid rgba(232,214,170,.1);
  background:
    linear-gradient(180deg, rgba(255,255,255,.04), transparent 55%),
    rgba(14,16,18,.85);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.crew-doors .city-door:hover {
  transform: translateY(-2px);
  border-color: rgba(232,160,32,.45);
  background:
    linear-gradient(180deg, rgba(232,160,32,.1), transparent 60%),
    rgba(18,20,24,.95);
}
.crew-ledger {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .65rem;
  animation: crewFadeUp .55s ease .12s both;
}
.crew-meter {
  position: relative;
  overflow: hidden;
  padding: 1rem 1.05rem .95rem;
  border-radius: 14px;
  border: 1px solid rgba(232,214,170,.12);
  background:
    radial-gradient(220px 100px at 0% 0%, rgba(232,160,32,.14), transparent 60%),
    linear-gradient(165deg, #171a1e 0%, #0d0f12 100%);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
}
.crew-meter.is-clean {
  background:
    radial-gradient(220px 100px at 0% 0%, rgba(61,184,122,.16), transparent 60%),
    linear-gradient(165deg, #141c19 0%, #0d1012 100%);
}
.crew-meter.is-rank {
  background:
    radial-gradient(220px 100px at 100% 0%, rgba(199,58,50,.18), transparent 55%),
    linear-gradient(165deg, #1a1518 0%, #0e1012 100%);
}
.crew-meter h3 {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.crew-meter .value {
  margin: .35rem 0 .2rem;
  font-family: var(--display);
  font-size: clamp(1.35rem, 2vw, 1.85rem);
  font-weight: 500;
  letter-spacing: .03em;
  line-height: 1;
}
.crew-meter .sub { margin: 0; color: var(--muted); font-size: .82rem; }
.crew-desk {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: .85rem;
  align-items: start;
}
.crew-block {
  border-radius: 16px;
  border: 1px solid rgba(232,214,170,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 40%),
    linear-gradient(165deg, #15181c, #0d0f12);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.crew-block-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: .75rem;
  flex-wrap: wrap;
  padding: 1rem 1.15rem .75rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
  background: linear-gradient(90deg, rgba(232,160,32,.08), transparent 55%);
}
.crew-block-head h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.35rem;
  letter-spacing: .04em;
  font-weight: 500;
}
.crew-block-head p {
  margin: .2rem 0 0;
  color: var(--muted);
  font-size: .85rem;
}
.crew-block-body { padding: 1rem 1.15rem 1.15rem; }
.crew-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin-bottom: 1rem;
}
.crew-till {
  padding: .85rem .9rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(0,0,0,.22);
}
.crew-till span {
  display: block;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}
.crew-till strong {
  display: block;
  margin-top: .25rem;
  font-family: var(--display);
  font-size: 1.35rem;
  font-weight: 500;
  letter-spacing: .03em;
}
.crew-till.is-dirty strong { color: #f0b429; }
.crew-till.is-clean strong { color: #7dcaa0; }
.crew-forms { display: grid; gap: .85rem; }
.crew-forms .form-grid { margin: 0; }
.crew-roster { display: grid; gap: .45rem; }
.crew-member {
  display: grid;
  grid-template-columns: 1.2fr .7fr auto;
  gap: .55rem;
  align-items: center;
  padding: .7rem .75rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.02);
  transition: border-color .15s ease, background .15s ease;
}
.crew-member:hover {
  border-color: rgba(232,160,32,.28);
  background: rgba(232,160,32,.05);
}
.crew-member .name { font-weight: 700; }
.crew-member .meta { color: var(--muted); font-size: .82rem; }
.crew-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .65rem;
}
.crew-upgrade {
  position: relative;
  padding: 1rem .95rem;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(180px 90px at 100% 0%, rgba(232,160,32,.1), transparent 60%),
    rgba(0,0,0,.28);
  transition: transform .18s ease, border-color .18s ease;
}
.crew-upgrade:hover {
  transform: translateY(-1px);
  border-color: rgba(232,160,32,.35);
}
.crew-upgrade.is-owned {
  border-color: rgba(61,184,122,.35);
  background:
    radial-gradient(180px 90px at 0% 0%, rgba(61,184,122,.12), transparent 60%),
    rgba(0,0,0,.28);
}
.crew-upgrade .ico {
  font-size: 1.4rem;
  line-height: 1;
  margin-bottom: .35rem;
}
.crew-upgrade h4 {
  margin: 0 0 .3rem;
  font-size: 1.05rem;
  font-family: var(--display);
  letter-spacing: .03em;
  font-weight: 500;
}
.crew-upgrade p { margin: 0 0 .45rem; color: var(--muted); font-size: .86rem; }
.crew-upgrade .meta { font-size: .8rem; color: #cfc8b6; margin-bottom: .55rem; }
.crew-stash {
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px dashed rgba(232,214,170,.18);
  background: rgba(0,0,0,.2);
}
.crew-stash-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .65rem;
  margin: .65rem 0 .85rem;
}
.crew-bar-label {
  display: flex;
  justify-content: space-between;
  font-size: .78rem;
  color: var(--muted);
  margin-bottom: .25rem;
}
.crew-front {
  margin-top: .85rem;
  padding: 1rem;
  border-radius: 14px;
  border: 1px solid rgba(232,160,32,.2);
  background:
    radial-gradient(280px 120px at 0% 0%, rgba(232,160,32,.12), transparent 55%),
    rgba(0,0,0,.25);
}
.crew-front-top {
  display: grid;
  grid-template-columns: 1.4fr .7fr .7fr;
  gap: .5rem;
  margin-bottom: .85rem;
}
.crew-pick-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .65rem;
}
.crew-pick {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  padding: .9rem;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
  text-align: left;
}
.crew-join {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: .85rem;
  animation: crewFadeUp .5s ease both;
}
.crew-join .crew-block { min-height: 100%; }
@keyframes crewFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}
@media (max-width: 980px) {
  .crew-doors.city-doors.is-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .crew-ledger, .crew-desk, .crew-join, .crew-upgrade-grid, .crew-stash-bars, .crew-front-top, .crew-pick-grid, .crew-split {
    grid-template-columns: 1fr;
  }
  .crew-member { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .crew-doors.city-doors.is-row { grid-template-columns: 1fr 1fr; }
}