/* Fonts are loaded via <link> tags in views/layout.ejs (preconnect + stylesheet)
   instead of @import — @import blocks the browser from discovering and fetching
   fonts until after this whole stylesheet downloads; a <link> lets it start
   immediately in parallel. */

:root {
  /* ===== Legacy variable names — kept because hundreds of lines of
     page-specific CSS below (casino, alliance, forums, mailbox, explore,
     combat, settings, etc.) reference these by name by name. Values are
     updated to fit the new dark palette so everything using them inherits
     the new look with zero changes to those rules. ===== */
  --bg-page:        #050505;
  --bg-panel:       #0f0f0f;
  --bg-sidebar:     #0f0f0f;
  --bg-topbar:      #0f0f0f;
  --accent-red:     #cc0000;
  --accent-blue:    #0066cc;
  --accent-green:   #00aa44;
  --accent-yellow:  #e8a800;
  --accent-city:    #e8c840;
  --text-primary:   #f0f0f0;
  --text-secondary: #b0b0b0;
  --text-muted:     #7a746c;
  --border:         #000000;
  --border-light:   #2a2a2a;
  --font-display:   'Bebas Neue', sans-serif;
  --font-body:      'Rajdhani', sans-serif;

  /* ===== New dark-theme system (Phase 1A) — used by the redesigned shell:
     header, sidebar, panel base, buttons, forms, tables, typography. ===== */
  --bg-void:        #050505;
  --bg-panel-alt:   #141414;
  --bg-card:        #1a1a1a;
  --bg-input:       #111111;

  --border-heavy:   #000000;
  --border-mid:     #2a2a2a;
  --border-accent:  #cc0000;

  --text-dim:       #707070;

  --red:            #cc0000;
  --red-bright:     #ff1a1a;
  --red-dim:        #660000;
  --yellow:         #e8a800;
  --yellow-bright:  #ffd000;
  --blue:           #0066cc;
  --blue-bright:    #0088ff;
  --green:          #00aa44;
  --green-bright:   #00cc55;
  --purple:         #6600cc;
  --orange:         #cc6600;
  --orange-bright:  #ff9500;

  --bg-panel-solid: #0d0d0d;
  --border-red:     #cc0000;
  --red-glow:       rgba(204, 0, 0, 0.4);
  --yellow-glow:    rgba(232, 168, 0, 0.4);
  --blue-glow:      rgba(0, 136, 255, 0.4);
  --green-glow:     rgba(0, 170, 68, 0.4);
  --purple-bright:  #8833ff;

  --shadow-panel:   4px 4px 0 #000000;
  --shadow-heavy:   6px 6px 0 #000000;
  --shadow-red:     4px 4px 0 var(--red);
  --shadow-yellow:  4px 4px 0 var(--yellow);

  --font-mono:      'Courier New', monospace;
  --transition:     all 0.15s ease;
}

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

html, body {
  background: #050505;
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
  min-height: 100vh;
  overflow-x: hidden;
}

body {
  background-image: url('/images/ui/bg-city.jpeg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

/* Dark overlay so the city photo doesn't overpower the UI */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: none;
  z-index: 0;
}

/* Halftone dot texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, #ffffff06 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
  z-index: 0;
}

/* City skyline silhouette at the bottom of the page (real element, see layout.ejs) */
.city-skyline-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: url('/images/ui/city-skyline.png') bottom center / cover no-repeat;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}

/* All real content sits above the texture */
.header-bar, .app-layout, .auth-container, .bottom-dock {
  position: relative;
  z-index: 1;
}

* {
  scrollbar-width: thin;
  scrollbar-color: var(--red) transparent;
}
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--red); border-radius: 0; }

a { color: var(--accent-red); text-decoration: none; font-weight: 700; }
a:hover { text-decoration: underline; }

/* ============================================
   AUTH PAGES
   ============================================ */
body.auth-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-page);
  background-image: radial-gradient(circle, #00000012 1px, transparent 1px);
  background-size: 6px 6px;
}

.auth-container {
  width: 100%;
  max-width: 430px;
  padding: 1rem;
}

.auth-panel {
  background: #ffffff;
  border: 3px solid #000;
  border-radius: 0;
  padding: 2.5rem;
  position: relative;
  box-shadow: 6px 6px 0 #000;
}

.auth-panel::before,
.auth-panel::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border-color: var(--accent-red);
  border-style: solid;
}
.auth-panel::before { top: 4px; left: 4px; border-width: 2px 0 0 2px; }
.auth-panel::after { bottom: 4px; right: 4px; border-width: 0 2px 2px 0; }

.logo { text-align: center; margin-bottom: 2rem; }
.logo h1 {
  font-family: var(--font-display);
  font-size: 58px;
  letter-spacing: 6px;
  line-height: 1;
  color: #000;
  text-shadow: 4px 4px 0 var(--accent-yellow);
}
.logo h1 span {
  color: var(--accent-red);
  text-shadow: 4px 4px 0 #000;
}
.logo .tagline {
  font-size: 10px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 8px;
  font-weight: 700;
}
.site-footer {
  background: var(--bg-void);
  border-top: 3px solid var(--border-heavy);
  padding: 1.25rem 2rem;
  position: relative;
  z-index: 20;
  width: 100%;
  display: block;
  clear: both;
  margin-left: 0;
}


.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.footer-logo {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
  color: var(--text-primary);
}

.footer-logo span {
  color: var(--red);
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.footer-links a {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-decoration: none;
  transition: var(--transition);
}

.footer-links a:hover {
  color: var(--red-bright);
  text-decoration: none;
}

.footer-copy {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.subtitle { font-size: 13px; color: var(--text-secondary); text-align: center; margin-bottom: 1.5rem; }

.btn {
  width: 100%;
  padding: 13px;
  border: 3px solid #000;
  border-radius: 0;
  font-family: var(--font-display);
  font-size: 24px;
  letter-spacing: 4px;
  cursor: pointer;
  transition: all 0.15s;
  margin-top: 0.5rem;
  text-transform: uppercase;
}
.btn-villain {
  background: var(--accent-red);
  color: #fff;
  box-shadow: 4px 4px 0 #000;
}
.btn-villain:hover {
  box-shadow: 2px 2px 0 #000;
  transform: translate(2px, 2px);
}

.auth-footer { text-align: center; margin-top: 1.5rem; font-size: 13px; color: var(--text-muted); }
.auth-footer a { color: var(--accent-red); font-weight: 700; }

.message { padding: 10px 14px; border-radius: 0; font-size: 13px; margin-bottom: 1rem; display: none; border-left: 4px solid; font-weight: 600; }
.message.success { background: #e8f5e9; border-color: var(--accent-green); color: var(--accent-green); }
.message.error { background: #ffebee; border-color: var(--accent-red); color: var(--accent-red); }

.alignment-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 1.2rem; }
.alignment-btn {
  padding: 16px 12px;
  border: 2px solid #ccc;
  background: #f5f5f5;
  color: #999;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.alignment-btn.selected-hero {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
  background: #e8f4ff;
  box-shadow: 3px 3px 0 var(--accent-blue);
}
.alignment-btn.selected-villain {
  border-color: var(--accent-red);
  color: var(--accent-red);
  background: #fff0f0;
  box-shadow: 3px 3px 0 var(--accent-red);
}

/* ============================================
   GAME LAYOUT
   ============================================ */
.game-body {
  min-height: 100vh;
}

/* ===== HEADER BAR (merged single-bar layout) ===== */
.header-bar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 5, 5, 0.97);
  border-bottom: 2px solid var(--border-heavy);
  box-shadow: 0 4px 30px rgba(0,0,0,0.9), 0 1px 0 var(--red);
  backdrop-filter: blur(10px);
}

.header-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 16px;
  height: 76px;
}

.header-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.header-logo:hover { text-decoration: none; }

.header-logo-img {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(204,0,0,0.5))
          drop-shadow(2px 2px 0 rgba(0,0,0,0.8));
  transition: filter 0.2s ease;
}

.header-logo:hover .header-logo-img {
  filter: drop-shadow(0 0 16px rgba(204,0,0,0.8))
          drop-shadow(2px 2px 0 rgba(0,0,0,0.8));
}

.hamburger-btn {
  display: none;
  background: var(--red);
  border: none;
  color: #fff;
  padding: 8px 12px;
  font-size: 18px;
  cursor: pointer;
  margin-left: auto;
}
.hamburger-btn:hover { background: var(--red-bright); }

.header-vitals {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.vital-group {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 110px;
  max-width: 160px;
  flex: 1;
}

.vital-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.vital-icon { font-size: 12px; flex-shrink: 0; }

.vital-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-secondary);
  flex: 1;
}

.vital-value {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: 700;
  white-space: nowrap;
}

.health-color { color: #ff3333; }
.energy-color { color: #33aaff; }
.exp-color    { color: var(--yellow-bright); }

.vital-bar {
  height: 11px;
  display: flex;
  gap: 2px;
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 2px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
  padding: 2px;
}

.vital-segment {
  flex: 1;
  height: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 1px;
  transition: background 0.3s ease;
}

.vital-segment.filled.health {
  background: #cc0000;
  border-color: #ff3333;
  box-shadow: 0 0 6px rgba(204,0,0,0.6), 0 0 10px rgba(204,0,0,0.3);
}

.vital-segment.filled.energy {
  background: #0066cc;
  border-color: #00aaff;
  box-shadow: 0 0 6px rgba(0,136,255,0.6), 0 0 10px rgba(0,136,255,0.3);
}

.vital-segment.filled.exp {
  background: #e8a800;
  border-color: #ffd000;
  box-shadow: 0 0 6px rgba(232,168,0,0.6), 0 0 10px rgba(232,168,0,0.3);
}

/* Currency pills — merged inline, icon + value only (no stacked label) */
.header-currencies {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.header-currencies::-webkit-scrollbar { display: none; }

.currency-pill {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: rgba(10,10,10,0.9);
  border: 1px solid;
  white-space: nowrap;
  flex-shrink: 0;
  transition: var(--transition);
  position: relative;
}

.currency-pill::before {
  content: '';
  position: absolute;
  left: -1px; top: -1px; bottom: -1px;
  width: 3px;
  background: currentColor;
  opacity: 0.6;
}

.currency-pill:hover { transform: translateY(-1px); }

.currency-pill.cash    { border-color: rgba(0,200,80,0.4); color: var(--green-bright); }
.currency-pill.bank    { border-color: rgba(0,136,255,0.4); color: var(--blue-bright); }
.currency-pill.gold    { border-color: rgba(232,168,0,0.4); color: var(--yellow-bright); }
.currency-pill.points  { border-color: rgba(136,51,255,0.4); color: var(--purple-bright); }
.currency-pill.scraps  { border-color: rgba(255,140,0,0.4); color: #ff8c00; }
.currency-pill.premium { border-color: rgba(255,208,0,0.4); color: var(--yellow-bright); }

.currency-pill.cash:hover    { box-shadow: 0 0 10px rgba(0,200,80,0.3); }
.currency-pill.bank:hover    { box-shadow: 0 0 10px rgba(0,136,255,0.3); }
.currency-pill.gold:hover    { box-shadow: 0 0 10px rgba(232,168,0,0.3); }
.currency-pill.points:hover  { box-shadow: 0 0 10px rgba(136,51,255,0.3); }
.currency-pill.scraps:hover  { box-shadow: 0 0 10px rgba(255,140,0,0.3); }
.currency-pill.premium:hover { box-shadow: 0 0 10px rgba(255,208,0,0.3); }

.currency-icon { font-size: 14px; flex-shrink: 0; }

.currency-amount {
  font-family: var(--font-display);
  font-size: 13px;
  color: inherit;
  line-height: 1;
  letter-spacing: 0.5px;
}

/* Identity: bell + mail icons, avatar dropdown trigger */
.header-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.header-icon-btn {
  position: relative;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 18px;
  padding: 2px 4px;
  transition: var(--transition);
  display: inline-block;
  line-height: 1;
}
.header-icon-btn:hover { color: var(--text-primary); text-decoration: none; }

.header-badge-count {
  position: absolute;
  top: -6px;
  right: -8px;
  background: var(--red-bright);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 5px;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
  border-radius: 9px;
  border: 1px solid #000;
  box-shadow: 0 0 6px var(--red-glow);
}

.header-avatar-menu { position: relative; flex-shrink: 0; }

.avatar-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px 4px 4px;
  border: 1px solid var(--border-mid);
  background: rgba(0,0,0,0.4);
  transition: var(--transition);
  user-select: none;
}
.avatar-trigger:hover { border-color: var(--red); background: rgba(0,0,0,0.7); }

.header-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.header-avatar,
.header-avatar-fallback {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border: 1px solid rgba(204,0,0,0.4);
  display: block;
}

.header-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 18px;
  color: #fff;
}

.header-player-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 80px;
}

.header-username {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text-primary);
  line-height: 1;
}

.header-level {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-secondary);
}

.header-role-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 8px 1px 6px;
  clip-path: polygon(6px 0%, 100% 0%, calc(100% - 6px) 100%, 0% 100%);
  margin-top: 2px;
  width: fit-content;
}

.header-role-badge.villain { background: var(--red); color: #fff; box-shadow: 0 0 8px var(--red-glow); }
.header-role-badge.hero { background: var(--blue); color: #fff; box-shadow: 0 0 8px var(--blue-glow); }

.avatar-caret {
  font-size: 10px;
  color: var(--text-dim);
  margin-left: 2px;
}

.avatar-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 160px;
  background: var(--bg-void);
  border: 1px solid var(--border-mid);
  box-shadow: 0 8px 32px rgba(0,0,0,0.8);
  z-index: 200;
}
.avatar-dropdown.open { display: block; }

.avatar-drop-item {
  display: block;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  transition: var(--transition);
  border-bottom: 1px solid var(--border-light);
}
.avatar-drop-item:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
}

.avatar-drop-divider {
  height: 1px;
  background: var(--border-mid);
  margin: 4px 0;
}

.avatar-drop-exit { color: var(--red) !important; }
.avatar-drop-exit:hover { background: rgba(204,0,0,0.1) !important; }

.header-vitals-mobile { display: none; }
.header-currencies-mobile { display: none; }

@media (max-width: 1000px) {
  .header-currencies { display: none; }
  .header-currencies-mobile {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .header-currencies-mobile::-webkit-scrollbar { display: none; }
  .hcm-pill {
    flex-shrink: 0;
    white-space: nowrap;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    background: rgba(10,10,10,0.9);
    border: 1px solid var(--border-mid);
  }
  .hcm-pill.cash    { color: var(--green-bright); }
  .hcm-pill.bank    { color: var(--blue-bright); }
  .hcm-pill.gold    { color: var(--yellow-bright); }
  .hcm-pill.points  { color: var(--purple-bright); }
  .hcm-pill.scraps  { color: #ff8c00; }
  .hcm-pill.premium { color: var(--yellow-bright); }
}

@media (max-width: 900px) {
  .header-vitals { display: none; }
  .header-vitals-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 5px 12px;
    background: rgba(0,0,0,0.5);
    border-top: 1px solid var(--border-light);
    font-family: var(--font-display);
    font-size: 13px;
    letter-spacing: 1px;
  }
  .hvm-stat { white-space: nowrap; }
  .hamburger-btn { display: flex; align-items: center; justify-content: center; }
  .header-top { height: 56px; padding: 6px 12px; }
  .header-logo-img { height: 36px; }
  .header-username { font-size: 14px; }
  .header-player-info { display: none; }
  .avatar-caret { display: none; }
}

@media (max-width: 480px) {
  .header-top { padding: 6px 10px; }
  .header-avatar, .header-avatar-fallback { width: 32px; height: 32px; }
}

/* ===== APP LAYOUT (Phase 8 — three column grid) ===== */
.app-layout {
  display: grid;
  grid-template-columns: 220px 1fr 280px;
  min-height: calc(100vh - 76px);
  position: relative;
  z-index: 1;
  padding-bottom: 60px;
}

.page-content {
  min-width: 0;
  overflow-x: hidden;
  background: transparent;
}

.page-content-inner {
  padding: 1.25rem;
  max-width: 100%;
}

@media (max-width: 1200px) {
  .app-layout { grid-template-columns: 220px 1fr; }
  .right-sidebar { display: none; }
}

@media (max-width: 900px) {
  .app-layout { grid-template-columns: 1fr; }
  .page-content-inner { padding: 0.75rem; padding-bottom: 70px; }
  .panel { margin-bottom: 0.75rem; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media (max-width: 480px) {
  .page-content-inner { padding: 0.5rem; padding-bottom: 70px; }
}

/* ===== SIDEBAR NAV (Phase 3) ===== */
.sidebar {
  width: 220px;
  min-width: 220px;
  background: rgba(3, 3, 3, 0.95);
  border-right: 1px solid var(--red);
  box-shadow: inset -1px 0 20px rgba(204,0,0,0.08),
              2px 0 20px rgba(0,0,0,0.8);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  z-index: 50;
  backdrop-filter: blur(12px);
}
.sidebar::-webkit-scrollbar { display: none; }

.sidebar-inner { flex: 1; padding: 8px 0; }

.sidebar-nav-group {
  margin-bottom: 2px;
}

.sidebar-group-label {
  font-family: var(--font-display);
  font-size: 10px;
  letter-spacing: 4px;
  color: var(--red);
  padding: 10px 16px 4px;
  display: flex;
  align-items: center;
  gap: 8px;
  text-shadow: 0 0 8px var(--red-glow);
}
.sidebar-group-label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--red);
  box-shadow: 0 0 6px var(--red-glow);
  flex-shrink: 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 16px 9px 20px;
  color: var(--text-secondary);
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  transition: var(--transition);
  position: relative;
  border-left: 2px solid transparent;
  white-space: nowrap;
}

.nav-item:hover {
  color: var(--text-primary);
  background: rgba(204,0,0,0.06);
  border-left-color: var(--red);
  text-decoration: none;
}

.nav-item.active {
  color: #ffffff;
  background: linear-gradient(90deg, rgba(204,0,0,0.25) 0%, transparent 100%);
  border-left: 3px solid var(--red);
  font-style: italic;
  font-size: 15px;
  text-shadow: 0 0 10px rgba(255,255,255,0.3);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  right: 0; top: 0;
  width: 50%;
  height: 100%;
  background: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 3px,
    rgba(204,0,0,0.08) 3px,
    rgba(204,0,0,0.08) 5px
  );
  pointer-events: none;
}

.nav-item-icon {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  filter: grayscale(1) brightness(0.7);
  transition: var(--transition);
}

.nav-item:hover .nav-item-icon { filter: none; }
.nav-item.active .nav-item-icon { filter: none; }

.nav-dot {
  margin-left: auto;
  width: 4px;
  height: 4px;
  background: var(--border-mid);
  border-radius: 50%;
  flex-shrink: 0;
  transition: var(--transition);
}
.nav-item:hover .nav-dot { background: var(--red); }
.nav-item.active .nav-dot { background: var(--red); box-shadow: 0 0 6px var(--red-glow); }

.nav-badge {
  margin-left: auto;
  background: var(--red-bright);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  padding: 2px 7px;
  min-width: 18px;
  text-align: center;
  border-radius: 9px;
  box-shadow: 0 0 6px var(--red-glow);
}

/* Active event banner at bottom of sidebar */
.sidebar-event-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: linear-gradient(90deg, rgba(102,0,204,0.25) 0%, rgba(232,168,0,0.15) 100%);
  border-top: 1px solid rgba(102,0,204,0.3);
  border-bottom: 1px solid rgba(102,0,204,0.3);
  box-shadow: inset 0 0 20px rgba(102,0,204,0.1);
}
.event-icon { font-size: 16px; flex-shrink: 0; }
.event-info { flex: 1; min-width: 0; }
.event-name {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--yellow-bright);
  text-shadow: 0 0 8px var(--yellow-glow);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.event-sub {
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--purple-bright);
}

/* Server status footer */
.sidebar-footer {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-light);
}
.server-online {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 2px;
  color: var(--green-bright);
  text-shadow: 0 0 8px var(--green-glow);
}
.sidebar-signal { display: flex; gap: 2px; align-items: flex-end; }
.sidebar-signal span { display: block; width: 3px; background: var(--green-bright); border-radius: 1px; }
.sidebar-signal span:nth-child(1) { height: 4px; }
.sidebar-signal span:nth-child(2) { height: 6px; }
.sidebar-signal span:nth-child(3) { height: 8px; }
.sidebar-signal span:nth-child(4) { height: 10px; }

@media (max-width: 900px) {
  .header-bar { z-index: 301; }
  /* .app-layout's own position:relative + z-index:1 creates a stacking
     context that traps its fixed-position .sidebar child at that same
     ceiling — so .sidebar-overlay (a body-level sibling of .app-layout,
     z-index:299) was painting ABOVE the entire app-layout subtree,
     including the drawer nested inside it, blocking every tap on it.
     Drop app-layout out of its own stacking context on mobile so the
     drawer can compete on its own declared z-index as intended. */
  .app-layout { position: static; z-index: auto; }
  .sidebar {
    position: fixed;
    left: -240px;
    top: 0;
    height: 100vh;
    width: 240px;
    z-index: 300;
    background: #0a0a0a;
    backdrop-filter: none;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 4px 0 30px rgba(0,0,0,0.95);
  }
  .sidebar.open { left: 0; }
  .sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: none;
    z-index: 299;
    backdrop-filter: blur(2px);
  }
  .sidebar-overlay.visible { display: block; }
}

/* ===== RIGHT SIDEBAR (Phase 7) ===== */
.right-sidebar {
  width: 280px;
  min-width: 280px;
  background: rgba(3,3,3,0.95);
  border-left: 1px solid rgba(204,0,0,0.2);
  box-shadow: inset 1px 0 20px rgba(0,0,0,0.5);
  position: sticky;
  top: 76px;
  height: calc(100vh - 76px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
  backdrop-filter: blur(12px);
}
.right-sidebar::-webkit-scrollbar { display: none; }

.rs-section { border-bottom: 1px solid var(--border-light); }

.rs-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--border-light);
}

.rs-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--yellow);
  text-shadow: 0 0 8px var(--yellow-glow);
}

.rs-section-header.alerts .rs-section-title { color: var(--red); text-shadow: 0 0 8px var(--red-glow); }

.rs-view-all {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-dim);
  text-decoration: none;
  transition: var(--transition);
}
.rs-view-all:hover { color: var(--red); text-decoration: none; }

.rs-alert-badge {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--red);
  text-shadow: 0 0 6px var(--red-glow);
}

.rs-live-dot {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--text-secondary);
}
.live-pulse {
  color: var(--red);
  animation: rsPulse 1.5s ease-in-out infinite;
  text-shadow: 0 0 6px var(--red-glow);
}
@keyframes rsPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.rs-section-body { padding: 4px 0; }

/* Mission items */
.rs-mission-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  transition: var(--transition);
}
.rs-mission-item:hover { background: rgba(255,255,255,0.02); }
.rs-mission-icon {
  width: 26px;
  height: 26px;
  object-fit: contain;
  flex-shrink: 0;
}
.rs-mission-info { flex: 1; }
.rs-mission-name { font-size: 12px; font-weight: 900; letter-spacing: 0.5px; line-height: 1.2; }
.rs-mission-sub { font-size: 10px; color: var(--text-secondary); font-weight: 700; }
.rs-mission-reward { font-family: var(--font-display); font-size: 13px; color: var(--yellow); flex-shrink: 0; white-space: nowrap; }

/* Alert items */
.rs-alert-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  transition: var(--transition);
}
.rs-alert-item:hover { background: rgba(255,255,255,0.02); }
.rs-alert-icon {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
  border: 1px solid;
}
.rs-alert-icon.danger {
  color: var(--red);
  border-color: var(--red);
  background: rgba(204,0,0,0.1);
  box-shadow: 0 0 8px rgba(204,0,0,0.2);
}
.rs-alert-icon.warning {
  color: var(--yellow);
  border-color: var(--yellow);
  background: rgba(232,168,0,0.1);
  box-shadow: 0 0 8px rgba(232,168,0,0.2);
}
.rs-alert-icon.info {
  color: var(--blue-bright);
  border-color: var(--blue);
  background: rgba(0,102,204,0.1);
  box-shadow: 0 0 8px rgba(0,102,204,0.2);
}
.rs-alert-icon.event {
  color: var(--purple-bright);
  border-color: var(--purple);
  background: rgba(119,0,204,0.1);
  box-shadow: 0 0 8px rgba(119,0,204,0.2);
}
.rs-alert-info { flex: 1; }
.rs-alert-name { font-family: var(--font-display); font-size: 12px; letter-spacing: 1px; color: var(--red); }
.rs-alert-sub { font-size: 10px; color: var(--text-secondary); font-weight: 700; }
.rs-alert-timer {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--yellow);
  flex-shrink: 0;
  white-space: nowrap;
  text-align: right;
}

/* Feed items */
/* Right rail headers should be quieter than main content headers */
.right-sidebar .rs-section-title,
.right-sidebar .panel-title {
  font-size: 10px !important;
  letter-spacing: 2px;
  color: var(--text-dim) !important;
  text-shadow: none !important;
  opacity: 0.8;
}

/* World Feed — fixed height, internal scroll so it never pushes page height */
.rs-feed-body {
  padding: 2px 0;
  max-height: 320px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-mid) transparent;
}
.rs-feed-body::-webkit-scrollbar { width: 4px; }
.rs-feed-body::-webkit-scrollbar-track { background: transparent; }
.rs-feed-body::-webkit-scrollbar-thumb { background: var(--border-mid); }
.rs-feed-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 14px;
  border-bottom: 1px solid var(--border-light);
  transition: var(--transition);
}
.rs-feed-item:hover { background: rgba(255,255,255,0.02); }
.rs-feed-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  flex-shrink: 0;
  margin-top: 1px;
}
.rs-feed-icon.combat   { filter: drop-shadow(0 0 3px rgba(204,0,0,0.6)); }
.rs-feed-icon.levelup  { filter: drop-shadow(0 0 3px rgba(232,168,0,0.6)); }
.rs-feed-icon.money    { filter: drop-shadow(0 0 3px rgba(0,170,68,0.6)); }
.rs-feed-icon.alliance { filter: drop-shadow(0 0 3px rgba(119,0,204,0.6)); }
.rs-feed-icon.energy   { filter: drop-shadow(0 0 3px rgba(0,102,204,0.6)); }
.rs-feed-text { flex: 1; font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.rs-feed-winner { color: var(--red-bright); font-weight: 900; text-decoration: none; }
.rs-feed-winner:hover { color: var(--yellow); text-decoration: none; }
.rs-feed-action { color: var(--text-dim); }
.rs-feed-loser { color: var(--text-secondary); font-weight: 700; text-decoration: none; }
.rs-feed-loser:hover { color: var(--text-primary); text-decoration: none; }
.rs-feed-time { font-size: 9px; color: var(--text-dim); font-family: var(--font-mono); flex-shrink: 0; white-space: nowrap; margin-top: 2px; }
.rs-feed-tagline {
  padding: 8px 14px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--red);
  text-align: center;
  font-style: italic;
  text-shadow: 0 0 8px var(--red-glow);
}
.rs-feed-empty { padding: 16px 14px; font-size: 12px; color: var(--text-dim); font-weight: 700; text-align: center; }

/* Alliance card — honest data, dramatic treatment */
.alliance-power-bar {
  height: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  margin-top: 6px;
  overflow: hidden;
}
.alliance-power-fill { height: 100%; background: linear-gradient(90deg, var(--yellow), var(--yellow-bright)); }

.alliance-card {
  background: linear-gradient(135deg, rgba(102,0,204,0.3), rgba(204,0,0,0.15));
  border: 1px solid rgba(136,51,255,0.4);
  box-shadow: 0 0 20px rgba(102,0,204,0.25);
}
.alliance-card .rs-section-title {
  color: var(--purple-bright);
  text-shadow: 0 0 12px rgba(136,51,255,0.6);
  letter-spacing: 3px;
}
.alliance-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.alliance-card-emblem {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border: 1px solid rgba(136,51,255,0.5);
  box-shadow: 0 0 10px rgba(102,0,204,0.4);
  border-radius: 4px;
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
}
.alliance-card-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.alliance-card-level {
  font-size: 10px;
  color: var(--yellow);
  font-weight: 700;
  letter-spacing: 1px;
}
.alliance-card-members {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 700;
}
.alliance-card-power {
  font-size: 10px;
  color: var(--text-dim);
  margin-top: 3px;
}

/* ===== BOTTOM DOCK (Phase 8) ===== */
.bottom-dock {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 56px;
  background: rgba(3,3,3,0.98);
  border-top: 2px solid var(--border-heavy);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.8), 0 -1px 0 var(--red);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  z-index: 150;
  backdrop-filter: blur(10px);
}

.bottom-dock-left { flex: 1; display: flex; align-items: center; }
.bottom-quote {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.4;
  max-width: 200px;
}
.bottom-quote::before {
  content: '"';
  color: var(--red);
  font-style: normal;
  font-size: 16px;
  line-height: 0;
  vertical-align: -4px;
  margin-right: 3px;
}

.bottom-dock-center { display: flex; align-items: center; gap: 4px; }

.dock-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 4px 14px;
  text-decoration: none;
  color: var(--text-secondary);
  transition: var(--transition);
  position: relative;
  border-top: 2px solid transparent;
}
.dock-item:hover { color: var(--text-primary); border-top-color: var(--red); text-decoration: none; }
.dock-item.active { color: var(--red); border-top-color: var(--red); }
.dock-icon { font-size: 18px; line-height: 1; }
.dock-label { font-size: 8px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase; }
.dock-badge {
  position: absolute;
  top: 0;
  right: 8px;
  background: var(--red);
  color: #fff;
  font-size: 8px;
  font-weight: 900;
  padding: 1px 4px;
  min-width: 14px;
  text-align: center;
}

.bottom-dock-right { flex: 1; display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

.dock-server-time {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-dim);
  letter-spacing: 1px;
  white-space: nowrap;
}

.dock-divider {
  width: 1px;
  height: 28px;
  background: var(--border-mid);
  flex-shrink: 0;
}

.dock-season { text-align: center; }
.dock-season-label { font-family: var(--font-display); font-size: 13px; letter-spacing: 2px; color: var(--yellow); }
.dock-season-sub { font-size: 9px; color: var(--text-dim); font-weight: 700; letter-spacing: 1px; }
.dock-stat { text-align: center; }
.dock-stat-label { font-size: 8px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--text-dim); }
.dock-stat-val { font-family: var(--font-display); font-size: 14px; letter-spacing: 1px; color: var(--text-primary); }
.dock-stat-val.red { color: var(--red); }
.dock-stat-val.yellow { color: var(--yellow); }
.dock-stat-val.energy-color { color: #33aaff; }
.dock-skull { font-size: 20px; opacity: 0.4; }

@media (max-width: 900px) {
  .bottom-dock { padding: 0 8px; height: 60px; }
  .bottom-dock-left { display: none; }
  .bottom-dock-right { display: none; }
  .bottom-dock-center { gap: 0; width: 100%; justify-content: space-around; }
  .dock-item { padding: 4px 8px; }
  .dock-label { display: none; }
  .dock-icon { font-size: 22px; }
}

/* ===== CONTENT BACKING — solid backdrop so content never floats bare over the city photo ===== */
.content-backing {
  background: rgba(5, 5, 5, 0.82);
  border: 1px solid var(--border-mid);
  box-shadow:
    0 0 40px rgba(0,0,0,0.8),
    inset 0 0 60px rgba(0,0,0,0.4);
  min-height: calc(100vh - 76px);
  position: relative;
  backdrop-filter: blur(2px);
}

/* ===== CONTENT FRAME — red corner brackets, all four corners (Phase 10) ===== */
.content-frame {
  position: relative;
  padding: 1.25rem;
  min-height: 100%;
}
.content-frame::before,
.content-frame::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  border-color: var(--red);
  border-style: solid;
  pointer-events: none;
  z-index: 10;
}
.content-frame::before { top: 0; left: 0; border-width: 2px 0 0 2px; box-shadow: -2px -2px 8px var(--red-glow); }
.content-frame::after { top: 0; right: 0; border-width: 2px 2px 0 0; box-shadow: 2px -2px 8px var(--red-glow); }

.corner-brackets { position: relative; }
.corner-brackets::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 20px; height: 20px;
  border: 2px solid var(--red);
  border-top: none; border-right: none;
  box-shadow: -2px 2px 8px var(--red-glow);
  pointer-events: none;
  z-index: 10;
}
.corner-brackets::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0;
  width: 20px; height: 20px;
  border: 2px solid var(--red);
  border-top: none; border-left: none;
  box-shadow: 2px 2px 8px var(--red-glow);
  pointer-events: none;
  z-index: 10;
}

/* CONTENT */
.content-area {
  padding: 1.5rem;
  min-width: 0;
  background-color: transparent;
  position: relative;
}


.welcome-panel {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid #000;
}
.welcome-panel h2 {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 3px;
  line-height: 1;
  color: var(--text-primary);
}
.welcome-panel .subtitle {
  color: var(--text-secondary);
  font-size: 12px;
  margin-top: 6px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.red { color: var(--accent-red) !important; }
.blue { color: var(--accent-blue) !important; }
.green { color: var(--accent-green) !important; }
.yellow { color: var(--accent-yellow) !important; }
.muted-text { color: var(--text-muted) !important; }

/* PANELS */
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.panel {
  background: rgba(10, 10, 10, 0.90);
  border: 1px solid rgba(204,0,0,0.25);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    0 4px 20px rgba(0,0,0,0.6),
    inset 0 1px 0 rgba(255,255,255,0.03);
  margin-bottom: 1rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(4px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.panel:hover {
  border-color: rgba(204,0,0,0.4);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    0 4px 20px rgba(0,0,0,0.6),
    0 0 15px rgba(204,0,0,0.1),
    inset 0 1px 0 rgba(255,255,255,0.03);
}

.panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 2px; height: 100%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red-glow), 0 0 16px rgba(204,0,0,0.2);
}

.panel-title {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 2px;
  color: var(--text-primary);
  padding: 10px 14px 10px 18px;
  background: rgba(15,15,15,0.95);
  border-bottom: 1px solid rgba(204,0,0,0.2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.panel-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 18px;
  width: 30px; height: 1px;
  background: var(--red);
  box-shadow: 0 0 6px var(--red-glow);
}

.panel-body { padding: 1rem 1rem 1rem 1.1rem; }

.panel-accent {
  border-color: rgba(204,0,0,0.5);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    0 0 20px rgba(204,0,0,0.2),
    inset 0 1px 0 rgba(255,255,255,0.03);
}
.panel-accent::before { width: 4px; background: var(--red-bright); }

.panel-gold { border-color: rgba(232,168,0,0.4); }
.panel-gold::before { background: var(--yellow); box-shadow: 0 0 8px var(--yellow-glow); }

.card {
  background: var(--bg-card);
  border: 2px solid var(--border-mid);
  padding: 12px;
}

.stat-card {
  background: var(--bg-card);
  border: 2px solid var(--border-mid);
  padding: 12px 8px;
  text-align: center;
}
.stat-card .stat-val {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--text-primary);
  display: block;
  line-height: 1;
}
.stat-card .stat-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
  display: block;
}

.stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
.stat-row:last-child { border-bottom: none; }
.stat-val { color: var(--text-primary); font-weight: 700; font-size: 15px; }

.rep-display { text-align: center; padding: 1.2rem 14px; }
.rep-score {
  font-family: var(--font-display);
  font-size: 52px;
  color: var(--accent-green);
  letter-spacing: 2px;
}
.rep-tier {
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: 4px;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
}

.action-btn {
  display: block;
  padding: 11px 14px;
  font-family: var(--font-display);
  font-size: 16px;
  text-decoration: none;
  margin-bottom: 6px;
  text-align: center;
  transition: all 0.15s;
  letter-spacing: 2px;
  border: 2px solid #000;
  text-transform: uppercase;
  box-shadow: 3px 3px 0 #000;
}
.action-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
  text-decoration: none;
}
.action-btn.red { background: var(--accent-red); color: #fff; }
.action-btn.blue { background: var(--accent-blue); color: #fff; }
.action-btn.green { background: var(--accent-green); color: #fff; }
.action-btn.yellow { background: var(--accent-yellow); color: #000; }

/* ALERTS */
.alert {
  padding: 12px 16px 12px 20px;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 1rem;
  letter-spacing: 0.5px;
  border: 2px solid;
  box-shadow: 3px 3px 0 #000;
  position: relative;
}
.alert::before {
  content: '';
  position: absolute;
  left: 0; top: 0;
  width: 4px; height: 100%;
}
.alert-error { background: rgba(204,0,0,0.1); border-color: var(--accent-red); color: #ff6666; }
.alert-error::before { background: var(--accent-red); box-shadow: 0 0 8px var(--red-glow); }
.alert-success { background: rgba(0,170,68,0.1); border-color: var(--accent-green); color: var(--green-bright); }
.alert-success::before { background: var(--accent-green); box-shadow: 0 0 8px var(--green-glow); }
.alert-info { background: rgba(0,102,204,0.1); border-color: var(--accent-blue); color: var(--blue-bright); }
.alert-info::before { background: var(--accent-blue); box-shadow: 0 0 8px var(--blue-glow); }
.alert-warning { background: rgba(232,168,0,0.1); border-color: var(--accent-yellow); color: var(--yellow-bright); }
.alert-warning::before { background: var(--accent-yellow); box-shadow: 0 0 8px var(--yellow-glow); }

/* ===== PAGE HEADER — COMPRESSED ===== */
.page-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 1rem;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}
.page-header h2 {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 3px;
  margin: 0;
  line-height: 1;
  flex-shrink: 0;
  color: var(--text-primary);
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8);
}
.page-header h2 .red {
  text-shadow: 2px 2px 0 rgba(0,0,0,0.8), 0 0 20px rgba(204,0,0,0.3);
}
.page-header .subtitle {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.page-header + hr { display: none; }

/* INFO BAR */
.info-bar {
  display: flex;
  gap: 0;
  border: 2px solid var(--border-heavy);
  overflow: hidden;
  margin-bottom: 1rem;
  box-shadow: 3px 3px 0 #000;
}
.info-item {
  flex: 1;
  background: var(--bg-card);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  border-right: 1px solid var(--border-light);
}
.info-item:last-child { border-right: none; }
.info-label {
  font-size: 9px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 700;
}
.info-val { font-size: 15px; font-weight: 700; color: var(--text-primary); }

/* MOMENTUM */
.momentum-bar {
  background: var(--bg-card);
  border: 2px solid var(--border-heavy);
  box-shadow: 3px 3px 0 #000;
  padding: 14px 16px;
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.momentum-left { display: flex; flex-direction: column; gap: 4px; }
.momentum-label {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--text-primary);
}
.momentum-desc { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.momentum-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; }
.momentum-stat { font-size: 15px; font-weight: 700; color: var(--accent-red); }
.momentum-streak { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.momentum-none { font-size: 13px; color: var(--text-muted); }

/* TRAIN GRID */
.train-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.train-panel { display: flex; flex-direction: column; }
.train-card {
  background: var(--bg-card);
  border: 2px solid var(--border-heavy);
  box-shadow: 4px 4px 0 #000;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.15s;
}
.train-card:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 #000; }
.train-card.active-momentum {
  border-color: var(--accent-yellow);
  box-shadow: 4px 4px 0 var(--accent-yellow);
  background: rgba(232,168,0,0.08);
}
.train-card-header { display: flex; align-items: center; gap: 12px; }
.train-icon { font-size: 28px; }
.train-name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.train-current { font-size: 13px; color: var(--text-secondary); margin-top: 2px; font-weight: 700; }
.streak-badge {
  margin-left: auto;
  background: var(--accent-yellow);
  color: #000;
  border: 2px solid #000;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  box-shadow: 2px 2px 0 #000;
}
.train-details { border-top: 2px solid var(--border-light); border-bottom: 2px solid var(--border-light); padding: 10px 0; }
.train-gain {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 1px;
  color: var(--accent-green);
  display: flex;
  align-items: center;
  gap: 8px;
}
.bonus-pct {
  font-size: 12px;
  background: var(--accent-green);
  color: #fff;
  padding: 2px 8px;
  font-family: var(--font-body);
  font-weight: 700;
  border: 1px solid #000;
}
.train-cost { font-size: 12px; color: var(--text-secondary); margin-top: 6px; font-weight: 700; }
.train-btn {
  display: block;
  text-align: center;
  padding: 12px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  text-decoration: none;
  transition: all 0.15s;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  text-transform: uppercase;
  /* Default so a bare .train-btn (no color modifier class) doesn't fall
     back to the browser's white button — color modifiers below override this. */
  background: var(--bg-card);
  color: var(--text-primary);
}
.train-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000, 0 0 12px rgba(204,0,0,0.2);
  text-decoration: none;
}
.train-btn-blue { background: var(--accent-blue); color: #fff; }
.train-btn-red { background: var(--accent-red); color: #fff; }
.train-btn-green { background: var(--accent-green); color: #fff; }

.train-btn-red:hover   { box-shadow: 1px 1px 0 #000, 0 0 16px rgba(204,0,0,0.4); }
.train-btn-blue:hover  { box-shadow: 1px 1px 0 #000, 0 0 16px rgba(0,136,255,0.4); }
.train-btn-green:hover { box-shadow: 1px 1px 0 #000, 0 0 16px rgba(0,170,68,0.4); }

.btn-sm { padding: 6px 10px; font-size: 12px; letter-spacing: 1px; }
.btn-lg { padding: 16px; font-size: 22px; letter-spacing: 3px; }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-heavy); box-shadow: none; }
.btn-ghost:hover { background: var(--bg-card); }
.btn-red { background: var(--red); color: #fff; }
.btn-red:hover { box-shadow: 1px 1px 0 #000, 0 0 16px rgba(204,0,0,0.4); }
.btn-blue { background: var(--blue); color: #fff; }
.btn-blue:hover { box-shadow: 1px 1px 0 #000, 0 0 16px rgba(0,136,255,0.4); }
.btn-green { background: var(--green); color: #fff; }
.btn-green:hover { box-shadow: 1px 1px 0 #000, 0 0 16px rgba(0,170,68,0.4); }
.btn-yellow { background: var(--yellow); color: #000; }
.btn-yellow:hover { box-shadow: 1px 1px 0 #000, 0 0 16px rgba(232,168,0,0.4); }

.intel-bonus-tag {
  font-size: 11px;
  color: var(--accent-green);
  font-weight: 700;
  margin-top: -4px;
}

.intel-cap-text {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 600;
}

.train-card.intel-card {
  border-color: var(--accent-yellow);
}

.train-btn-yellow {
  background: var(--accent-yellow);
  color: #000;
}

.train-card.intel-capped {
  background: rgba(0,170,68,0.08);
  border-color: var(--accent-green);
}

.intel-maxed-text {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  padding: 8px 0;
}

.train-btn-all {
  display: block;
  text-align: center;
  padding: 8px;
  margin-top: 6px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-decoration: none;
  border: 2px dashed var(--border-mid);
  color: var(--text-secondary);
  background: var(--bg-card);
  transition: all 0.15s;
}

.train-btn-all:hover {
  background: var(--accent-yellow);
  color: #000;
  text-decoration: none;
}
/* BANK */
.bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.history-link { float: right; font-size: 11px; color: #fff; text-decoration: none; font-weight: 700; opacity: 0.7; }
.history-link:hover { opacity: 1; text-decoration: none; }
.form-note { font-size: 11px; color: var(--text-muted); margin-top: 5px; font-weight: 600; }

.game-table { width: 100%; border-collapse: collapse; font-size: 13px; background: transparent; }
.game-table th {
  text-align: left;
  padding: 8px 12px;
  color: var(--text-secondary);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  background: rgba(15,15,15,0.95);
  font-weight: 900;
  border-bottom: 1px solid rgba(204,0,0,0.2);
}
.game-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-light); color: var(--text-primary); font-weight: 600; background: transparent; }
.game-table tr:last-child td { border-bottom: none; }
.game-table tr:hover td { background: rgba(255,255,255,0.02); }

/* PROFILE */
.profile-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem; }
.profile-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 1.5rem; }
.profile-actions .pa-form { margin: 0; }

/* Compact action tags — deliberately lighter-weight than .train-btn's
   heavy comic-shadow style so a dozen of these don't dominate the page. */
.pa-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.3;
  border-radius: 4px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.pa-link:hover { filter: brightness(1.15); text-decoration: none; }

.pa-red    { background: var(--red);    color: #fff; }
.pa-blue   { background: var(--blue);   color: #fff; }
.pa-green  { background: var(--green);  color: #fff; }
.pa-purple { background: var(--purple); color: #fff; }
.pa-yellow { background: var(--yellow); color: #000; }

.pa-outline-red   { background: transparent; color: var(--red-bright);   border-color: var(--red); }
.pa-outline-green { background: transparent; color: var(--green-bright); border-color: var(--green); }
.pa-outline-red:hover   { background: rgba(204,0,0,0.1); filter: none; }
.pa-outline-green:hover { background: rgba(0,170,68,0.1); filter: none; }

.pa-muted { background: var(--bg-card); color: var(--text-secondary); opacity: 0.7; cursor: default; }
.pa-muted:hover { filter: none; }

@media (max-width: 600px) {
  .profile-actions { gap: 5px; }
  .pa-link { font-size: 11px; padding: 5px 10px; }
}

.profile-grid { display: grid; grid-template-columns: 340px 1fr; gap: 1rem; }
.profile-hero { display: flex; gap: 12px; align-items: center; padding: 14px; border-bottom: 1px solid var(--border-light); }
.player-avatar {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 4px;
  flex-shrink: 0;
}

.player-avatar-fallback {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 32px;
  color: #fff;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  border-radius: 4px;
  flex-shrink: 0;
}

.player-avatar-sm {
  width: 40px;
  height: 40px;
  font-size: 18px;
}

.player-avatar-lg {
  width: 120px;
  height: 120px;
  font-size: 48px;
}
.profile-name { font-family: var(--font-display); font-size: 20px; letter-spacing: 1px; color: var(--text-primary); }
.profile-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.ppill {
  font-size: 11px;
  padding: 3px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
  font-weight: 700;
  letter-spacing: 0.5px;
}
/* Named ppill-* (not the bare .red/.blue utility classes) on purpose —
   those utility classes carry !important on `color`, which was silently
   overriding these pills' white text with red-on-red / blue-on-blue,
   making the alignment pill's text invisible. */
.ppill-red { background: var(--accent-red); color: #fff; border-color: #000; }
.ppill-blue { background: var(--accent-blue); color: #fff; border-color: #000; }
.ppill-male { background: var(--blue); color: #fff; border-color: #000; }
.ppill-female { background: #e0559a; color: #fff; border-color: #000; }

.rank-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 3px 10px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
  cursor: help;
}

.online-badge {
  font-size: 11px;
  padding: 3px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  float: right;
  font-weight: 700;
  border: 1px solid #000;
  letter-spacing: 0.5px;
}
.online-badge.online { background: var(--accent-green); color: #fff; }
.online-badge.offline { background: var(--bg-card); color: var(--text-dim); }
.online-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.kv-list { display: flex; flex-direction: column; border-top: 1px solid var(--border-light); }
.kv {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-light);
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}
.kv:last-child { border-bottom: none; }
.kv span:last-child { color: var(--text-primary); font-weight: 700; text-align: right; }
.muted-text { color: #bbb; }

.friends-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 14px; }
.friend-slot {
  border: 2px solid var(--border-light);
  padding: 10px;
  text-align: center;
  background: var(--bg-card);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
}
.friend-avatar {
  width: 40px; height: 40px;
  background: var(--bg-input);
  border: 1px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-dim); font-size: 16px;
}

/* FORMS */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.form-group input, .form-group select, .form-group textarea, .form-input {
  width: 100%;
  padding: 10px 12px;
  background: var(--bg-input);
  border: 2px solid var(--border-heavy);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  outline: none;
  transition: all 0.2s;
}
.form-group input:focus, .form-group select:focus {
  border-color: var(--accent-red);
  box-shadow: 3px 3px 0 var(--accent-red);
}
/* ============================================
   EXPLORE — full redesign
   ============================================ */

.explore-page-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 768px) {
  .explore-page-grid { grid-template-columns: 1fr; }
}

/* ── Minimap ── */
.minimap-container {
  position: relative;
  background: #1a1a1a;
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  border-radius: 4px;
  padding: 8px;
  display: inline-block;
  margin: 0 auto;
}

.minimap-center-wrap { display: flex; justify-content: center; padding: 1rem; }

.minimap-grid {
  display: grid;
  gap: 2px;
}

.minimap-cell {
  width: 28px;
  height: 28px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: all 0.2s;
  position: relative;
}

.minimap-cell.wall { background: #111; border: 1px solid #333; }
.minimap-cell.fog  { background: #2a2a2a; }
.minimap-cell.seen { background: #3d5a3e; }
.minimap-cell.current { background: var(--accent-yellow); border: 2px solid #000; z-index: 2; }

.minimap-cell.seen.slums      { background: #5a3d3d; }
.minimap-cell.seen.downtown   { background: #3d4d5a; }
.minimap-cell.seen.industrial { background: #5a4d3d; }
.minimap-cell.seen.heights    { background: #3d5a45; }
.minimap-cell.seen.mid-city   { background: #3d3d5a; }

.minimap-cell.landmark { font-size: 12px; }

@keyframes currentPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,168,0,0.7); }
  50%      { box-shadow: 0 0 0 6px rgba(232,168,0,0); }
}
.minimap-cell.current { animation: currentPulse 1.5s ease-in-out infinite; }

@keyframes tileReveal {
  from { opacity: 0; transform: scale(0.5); }
  to   { opacity: 1; transform: scale(1); }
}
.minimap-cell.newly-seen { animation: tileReveal 0.3s ease-out forwards; }

@media (max-width: 768px) {
  /* 40px min touch target for the Alignment War claim flow — bumped up
     from the old 22px display-only size now that cells are tappable. */
  .minimap-cell { width: 40px; height: 40px; font-size: 16px; }
}

/* ── Fresh Legs banner ── */
@keyframes bannerSlide {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.fresh-legs-banner { animation: bannerSlide 0.3s ease-out; }

/* ── Move result banner ── */
.explore-result-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  margin-bottom: 1rem;
  animation: bannerSlide 0.3s ease-out;
}

.explore-result-scraps   { background: var(--bg-card); border-color: var(--accent-green); }
.explore-result-cash     { background: var(--bg-card); border-color: var(--accent-yellow); }
.explore-result-npc_win  { background: var(--bg-card); border-color: var(--accent-blue); }
.explore-result-npc_loss { background: var(--bg-card); border-color: var(--accent-red); }
.explore-result-special  { background: var(--bg-card); border-color: #9c27b0; }
.explore-result-nothing  { background: var(--bg-card); border-color: var(--border-mid); }
.explore-result-wall     { background: var(--bg-void); border-color: #000; color: var(--text-primary); }

.result-icon { font-size: 32px; flex-shrink: 0; }
.result-flavor { font-size: 13px; font-weight: 700; color: var(--text-secondary); line-height: 1.4; }
.explore-result-wall .result-flavor { color: var(--text-primary); }
.result-reward {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--accent-green);
  margin-top: 2px;
}

/* ── Controls panel ── */
.explore-location { text-align: center; margin-bottom: 1rem; }
.location-district { font-family: var(--font-display); font-size: 20px; letter-spacing: 2px; color: #000; }
.location-coords { font-size: 12px; color: #999; font-weight: 700; }

.turns-display { text-align: center; margin-bottom: 1rem; }
.turns-number { font-family: var(--font-display); font-size: 48px; letter-spacing: 2px; line-height: 1; }
.turns-label { font-size: 11px; color: #999; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; }
.turns-bar { height: 6px; background: #eee; border: 1px solid #000; border-radius: 3px; margin: 8px 0; overflow: hidden; }
.turns-bar-fill { height: 100%; background: var(--accent-green); transition: width 0.3s ease; }

.streak-display {
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--accent-red);
  margin-bottom: 1rem;
}

.compass-wrap { display: flex; justify-content: center; margin-bottom: 1rem; }
.compass { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.compass-row { display: flex; gap: 4px; align-items: center; }

@keyframes exCompassShake {
  0%,100% { transform: translateX(0);   }
  15%     { transform: translateX(-7px); }
  30%     { transform: translateX(7px);  }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px);  }
  75%     { transform: translateX(-3px); }
  90%     { transform: translateX(3px);  }
}
.compass.compass-shake { animation: exCompassShake 0.35s ease-out; }

.mvbtn {
  width: 56px;
  height: 56px;
  font-size: 22px;
  font-weight: 900;
  font-family: var(--font-display);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: all 0.1s;
  border-radius: 4px;
}
.mvbtn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 #000; }
.mvbtn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 #000; }

.compass-center {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: #f5f5f5;
  border: 2px solid #ddd;
  border-radius: 50%;
}

@media (max-width: 768px) {
  /* A full-width docked bar reserves a whole horizontal band of the viewport —
     on short phones that band is taller than the space left for the minimap, so
     the map gets sliced no matter how the rest of the page is padded. A compact
     corner D-pad (like real mobile games use) only ever covers a small square in
     one corner, so it can't cut across the map's full width. */
  .mvbtn { width: 46px; height: 46px; font-size: 18px; }
  .compass-center { width: 46px; height: 46px; font-size: 20px; }
  .compass { gap: 3px; }
  .compass-row { gap: 3px; }

  /* The compass no longer needs a large flow-reserved hole — it's a small fixed
     corner overlay now, not a full-width bar, so a tiny gap is enough. */
  .compass-dock {
    height: 12px;
  }

  .compass-wrap {
    position: fixed;
    left: 14px;
    bottom: 14px;
    right: auto;
    z-index: 120;
    margin: 0;
    padding: 8px;
    background: rgba(255,255,255,0.95);
    border: 3px solid #000;
    border-radius: 16px;
    box-shadow: 4px 4px 0 #000;
  }

  /* A little breathing room at the very bottom of the page so the last haul
     item isn't flush against the screen edge behind the floating D-pad corner. */
  .explore-page-wrap {
    padding-bottom: 90px;
  }
}

.points-exchange { border-top: 2px solid #eee; padding-top: 1rem; font-size: 12px; font-weight: 700; color: #555; }
.exchange-info { text-align: center; margin-bottom: 4px; }

/* ── Today's Haul ── */
.haul-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 8px;
  padding: 1rem;
}

@media (max-width: 600px) {
  .haul-grid { grid-template-columns: repeat(3, 1fr); }
}

.haul-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 4px;
  background: var(--bg-card);
  border: 2px solid var(--border-mid);
  border-radius: 4px;
  text-align: center;
}

.haul-icon { font-size: 22px; }
.haul-val { font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; color: var(--text-primary); }
.haul-label { font-size: 10px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; }

/* LAIR / INDEX PAGE */

/* Tab switcher */
.lair-tabs {
  display: flex;
  border-bottom: 3px solid #000;
  margin-bottom: 0;
}

.lair-tab {
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  border: 2px solid #000;
  border-bottom: none;
  margin-right: 4px;
  color: var(--text-secondary);
  background: var(--bg-card);
  transition: all 0.15s;
}

.lair-tab:hover {
  background: rgba(204,0,0,0.15);
  color: var(--text-primary);
  text-decoration: none;
}

.lair-tab.active {
  background: var(--accent-red);
  color: #fff;
  border-color: #000;
}

/* Backpack tab navigates away instead of switching content in place —
   styled visually distinct (dashed underline, muted) so it doesn't read
   as a togglable tab like Main/Lunchbox/Fridge. */
.lair-tab-external {
  border-style: dashed;
  border-bottom: 2px dashed var(--border-mid);
  background: transparent;
  color: var(--text-dim);
}
.lair-tab-external:hover {
  color: var(--text-secondary);
  background: rgba(255,255,255,0.03);
}

/* Lair top-of-page notifications — energy refill / donator pack */
.lair-notify {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  padding: 10px 16px;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

a.lair-notify,
button.lair-notify {
  color: var(--text-secondary);
  transition: border-color 0.15s, color 0.15s;
}
a.lair-notify:hover,
button.lair-notify:hover {
  color: var(--text-primary);
}

button.lair-notify {
  width: 100%;
  background: var(--bg-card);
  font-family: var(--font-body);
  cursor: pointer;
  text-align: left;
}

form:has(> button.lair-notify) {
  margin: 0;
}

.lair-notify-energy {
  border-left: 3px solid var(--yellow);
}
.lair-notify-energy:hover {
  border-left-color: var(--yellow-bright);
}

.lair-notify-dp {
  border-left: 3px solid var(--orange);
  color: var(--text-secondary);
}

.lair-notify-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}
.lair-notify-actions a,
.lair-notify-link-btn {
  color: var(--orange-bright);
  font-weight: 700;
  font-size: 12px;
  text-decoration: none;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-body);
}
.lair-notify-actions a:hover,
.lair-notify-link-btn:hover {
  text-decoration: underline;
}

/* Lair 2-column grid */
.lair-main-grid {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: 1rem;
  margin-bottom: 1rem;
}

/* Food item rows in lunchbox/fridge tabs */
.food-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-bottom: 1px solid #eee;
}

.food-row:last-child { border-bottom: none; }

.food-row img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.food-row-name {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.5px;
}

.food-row-effect {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 600;
}

.food-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

/* Equipment slots in right panel */
.equip-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border-mid);
}

.equip-row:last-child { border-bottom: none; }

.equip-row img {
  width: 80px;
  height: 80px;
  object-fit: contain;
  flex-shrink: 0;
}

.equip-row-info {
  flex: 1;
}

.equip-row-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.equip-row-name {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.5px;
  color: var(--text-primary);
}

.equip-row-stat {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-green);
}

.exp-progress-wrap {
  position: relative;
  height: 24px;
  background: var(--bg-card);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  margin-top: 1rem;
  overflow: hidden;
}

.exp-progress-bar {
  height: 100%;
  background: var(--accent-yellow);
  transition: width 0.5s ease;
}

.exp-progress-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 0 0 3px rgba(0,0,0,0.9), 0 0 2px rgba(0,0,0,0.9), 0 1px 1px rgba(0,0,0,0.9);
}

.gear-bonuses {
  padding: 8px 14px;
  font-size: 12px;
  color: #777;
  font-weight: 700;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
  align-items: center;
}

.quick-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(64px, 1fr));
  gap: 6px;
  padding: 12px 8px;
  background: var(--bg-card);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  margin-top: 1rem;
}

.quick-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  text-decoration: none;
  transition: transform 0.15s;
  min-width: 0;
}

.quick-icon-item:hover { transform: scale(1.1); text-decoration: none; }

.quick-icon-emoji { font-size: 22px; line-height: 1; }

.quick-icon-label {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.invite-panel { border-color: var(--accent-yellow) !important; }

@media (max-width: 900px) {
  .lair-main-grid { grid-template-columns: 1fr; }
}

/* DP banner action links — 44px min tap target on touch screens */
@media (max-width: 600px) {
  .lair-notify-actions {
    width: 100%;
    justify-content: space-between;
  }
  .lair-notify-actions a,
  .lair-notify-link-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 12px;
    flex: 1;
  }
}

/* Food rows (Lunchbox/Fridge) — stack name and actions instead of
   squeezing everything onto one horizontal line on narrow screens. */
@media (max-width: 480px) {
  .food-row {
    flex-wrap: wrap;
  }
  .food-row-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 6px;
  }
}

/* MOBILE */
@media (max-width: 900px) {
  .news-feed { display: none; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .profile-grid { grid-template-columns: 1fr; }
  .bank-grid { grid-template-columns: 1fr; }
  .info-bar { flex-wrap: wrap; }
  .info-item { flex: 1 1 40%; }
}

@media (max-width: 768px) {
  .train-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .train-grid { grid-template-columns: 1fr; }
}

/* PAGINATION */
.pagination {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
  justify-content: center;
}

.page-btn {
  padding: 8px 16px;
  border: 2px solid #000;
  background: var(--bg-card);
  color: var(--text-primary);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  text-decoration: none;
  box-shadow: 3px 3px 0 #000;
  transition: all 0.15s;
}

.page-btn:hover {
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 #000;
  text-decoration: none;
}

.page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
}

.page-info {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.reward-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-card);
  border: 1px solid var(--yellow, var(--accent-yellow));
  border-left: 3px solid var(--yellow, var(--accent-yellow));
  border-radius: 6px;
  box-shadow: 0 0 12px rgba(232, 168, 0, 0.15);
  padding: 10px 16px;
  margin-bottom: 1rem;
}

.reward-icon {
  font-size: 24px;
  flex-shrink: 0;
}

.reward-title {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 1px;
  color: var(--yellow-bright, var(--accent-yellow));
}

.reward-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
}

/* ── GYM: ANIMATIONS ────────────────────────────────────────────────────── */

/* P1 + P3: Card punch scale on single / bulk train */
@keyframes gymCardPunch {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.04); }
  65%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}
@keyframes gymCardPunchBulk {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.08); }
  60%  { transform: scale(0.96); }
  100% { transform: scale(1); }
}
/* Glow reads --gym-glow-color set by JS before adding .gym-hit */
@keyframes gymCardGlow {
  0%,100% { filter: none; }
  30%     { filter: drop-shadow(0 0 12px var(--gym-glow-color, transparent)); }
}

.train-card { --gym-glow-color: transparent; }

.train-card.gym-hit {
  animation: gymCardPunch 0.22s cubic-bezier(0.3,0,0.5,1),
             gymCardGlow  0.38s ease-out;
}
.train-card.gym-hit.gym-bulk {
  animation: gymCardPunchBulk 0.38s cubic-bezier(0.3,0,0.5,1),
             gymCardGlow      0.58s ease-out;
}

/* P2: Streak badge intensity — class added in EJS based on momentum_count */
@keyframes gymStreakPulse {
  0%,100% { box-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,80,0,0.6); }
  50%     { box-shadow: 2px 2px 0 #000, 0 0 20px rgba(255,130,0,0.95); }
}
.streak-badge.streak-i2 {
  transform: scale(1.07);
  box-shadow: 2px 2px 0 #000, 0 0 8px rgba(255,100,0,0.55);
}
.streak-badge.streak-i3 {
  transform: scale(1.15);
  box-shadow: 2px 2px 0 #000, 0 0 12px rgba(255,80,0,0.7);
  animation: gymStreakPulse 0.75s ease-in-out infinite;
}

/* P2: Momentum bar shake on streak break (class added by JS) */
@keyframes gymStreakBreak {
  0%,100% { transform: translateX(0); }
  15%     { transform: translateX(-7px); }
  30%     { transform: translateX(7px); }
  45%     { transform: translateX(-5px); }
  60%     { transform: translateX(5px); }
  75%     { transform: translateX(-3px); }
  90%     { transform: translateX(3px); }
}
.momentum-bar.gym-streak-break { animation: gymStreakBreak 0.35s ease-out; }

/* P4: Intel bonus tag persistent shimmer loop */
@keyframes gymIntelShimmer {
  0%,100% { opacity: 1;    text-shadow: none; }
  50%     { opacity: 0.78; text-shadow: 0 0 8px rgba(0,119,34,0.65); }
}
.intel-bonus-tag { animation: gymIntelShimmer 2.5s ease-in-out infinite; }

/* P5: Intel maxed — bounce the whole capped card */
@keyframes gymMaxedBounce {
  0%   { transform: scale(1); }
  22%  { transform: scale(1.06); }
  50%  { transform: scale(0.97); }
  75%  { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.train-card.intel-capped.gym-maxed-celebrate {
  animation: gymMaxedBounce 0.65s cubic-bezier(0.3,0,0.6,1);
}

/* P5: Confetti pieces (created + positioned by JS) */
@keyframes gymConfetti {
  0%   { transform: translate(0,0) scale(1) rotate(0deg);   opacity: 1; }
  100% { transform: translate(var(--cx),var(--cy)) scale(0.2) rotate(200deg); opacity: 0; }
}
.gym-confetti-piece {
  position: fixed;
  width: 7px;
  height: 7px;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 9999;
  animation: gymConfetti 0.72s ease-out forwards;
}

/* ── STREETS: result text ────────────────────────────────────────────── */
/* Plain static lines, not a boxed table — renders instantly and is easy
   to select/copy-paste as a block. */
.st-result-text {
  font-size: 13px;
  line-height: 1.7;
}
.st-result-text .st-trophy { display: inline-block; }

/* P5: Upgrade progress bar — static fill, no animate-in. Streets is a
   timed activity (users get attacked for cash if they're slow), so
   nothing here should delay rendering. */
.st-progress-wrap {
  height: 8px;
  background: #e0e0e0;
  border: 1px solid #000;
  margin-top: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 0 #000;
}
.st-progress-fill {
  height: 100%;
  width: 0;
  background: var(--accent-green);
}
.st-fill-hero    { background: var(--accent-blue); }
.st-fill-villain { background: var(--accent-red); }

/* ── BANK: REDESIGN ──────────────────────────────────────────────────── */

/* Two-column layout: DW panel | Transfer panel */
.bk-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 1rem;
  align-items: start;
}

/* P1: Tab bar */
.bk-tabs {
  display: flex;
  border-bottom: 2px solid #000;
}
.bk-tab {
  flex: 1;
  padding: 9px 12px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: none;
  border-right: 2px solid #000;
  background: var(--bg-card);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.bk-tab:last-child { border-right: none; }
.bk-tab.bk-tab-active { background: #000; color: #fff; }
.bk-tab:hover:not(.bk-tab-active) { background: var(--bg-void); color: var(--text-primary); }

/* No-JS: section labels and form divider */
.bk-section-label {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-mid);
}
.bk-form-divider {
  height: 1px;
  background: var(--border-mid);
  margin: 1.25rem 0;
}

/* P2: Quick-fill percent buttons */
.bk-quick-btns {
  display: flex;
  gap: 4px;
  margin-top: 6px;
}
.bk-qbtn {
  flex: 1;
  padding: 5px 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.5px;
  font-family: var(--font-body);
  background: var(--bg-card);
  color: var(--text-primary);
  border: 1.5px solid var(--border-mid);
  box-shadow: 1px 1px 0 var(--border-mid);
  cursor: pointer;
  transition: all 0.1s;
}
.bk-qbtn:hover {
  background: #000;
  color: #fff;
  border-color: #000;
  box-shadow: none;
  transform: translate(1px, 1px);
}

/* Panel footer with history links */
.bk-panel-footer {
  display: flex;
  gap: 14px;
  padding: 8px 14px;
  border-top: 2px solid #eee;
}
.bk-hist-link {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #888;
  text-decoration: none;
}
.bk-hist-link:hover { color: var(--accent-red); text-decoration: none; }

/* P3: Balance pulse on change */
@keyframes bkPulseUp {
  0%   { background: transparent; }
  25%  { background: rgba(0,119,34,0.14); }
  100% { background: transparent; }
}
@keyframes bkPulseDown {
  0%   { background: transparent; }
  25%  { background: rgba(204,0,32,0.1); }
  100% { background: transparent; }
}
.info-item.bk-pulse-up   { animation: bkPulseUp   0.6s ease-out; }
.info-item.bk-pulse-down { animation: bkPulseDown 0.6s ease-out; }

/* P4: Alert entrance animation */
@keyframes bkAlertIn {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.bk-alert { animation: bkAlertIn 0.25s cubic-bezier(0.3,0,0.4,1) both; }

/* P5: History table row stagger */
@keyframes bkRowIn {
  from { transform: translateX(-8px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.bk-row-in {
  animation: bkRowIn 0.2s ease-out both;
  animation-delay: var(--bk-delay, 0ms);
}

/* P6: Submit button press */
@keyframes bkBtnPress {
  0%   { transform: translate(0,0)     scale(1);    box-shadow: 3px 3px 0 #000; }
  45%  { transform: translate(3px,3px) scale(0.97); box-shadow: 0   0   0 #000; }
  100% { transform: translate(0,0)     scale(1);    box-shadow: 3px 3px 0 #000; }
}
.bk-submit.bk-pressing { animation: bkBtnPress 0.18s ease-out forwards; }

/* P6: Input focus enhancement */
.bk-form .form-group input:focus,
.bk-form .form-group select:focus {
  border-color: var(--accent-red);
  box-shadow: 3px 3px 0 var(--accent-red), 0 0 0 3px rgba(204,0,32,0.07);
  outline: none;
}

@media (max-width: 900px) {
  .bk-grid { grid-template-columns: 1fr; }
}

/* Recipient ID live preview */
.bk-recipient-preview {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  min-height: 14px;
}

@media (max-width: 480px) {
  .bk-tabs { flex-wrap: wrap; }
  .bk-tab { flex: 1 1 45%; }
  .bk-qbtn { min-height: 36px; }
  .bk-quick-btns { gap: 6px; }
  .bk-form .form-group input[type="number"],
  .bk-form .form-group input[type="text"],
  .bk-form .form-group select,
  #bk-recipient-id {
    width: 100%;
  }
  .bk-submit { width: 100%; }
}

/* ── DAILY SPIN ──────────────────────────────────────────────────────── */

/* Physical spinning wheel — segments are a single conic-gradient sized
   directly from each reward's real weight (set inline per-page since the
   angles are data-driven), so the wheel is an honest picture of the odds:
   the common cash slice is huge, the legendary slice is a sliver. */
.wheel-wrap {
  position: relative;
  width: 280px;
  height: 280px;
  margin: 0 auto 1.5rem;
}
@media (max-width: 480px) {
  .wheel-wrap { width: 220px; height: 220px; }
}

.wheel-pointer {
  position: absolute;
  top: -4px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 32px;
  color: var(--accent-yellow);
  text-shadow: 2px 2px 0 #000;
  z-index: 4;
  line-height: 1;
}

.wheel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 6px solid #000;
  box-shadow: 0 0 0 4px var(--accent-yellow), 8px 8px 0 #000;
  overflow: hidden;
  transform: rotate(0deg);
}

.wheel-segment-label {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}
.wheel-segment-icon {
  position: absolute;
  left: -14px;
  top: -14px;
  display: inline-block;
  font-size: 26px;
  filter: drop-shadow(1px 1px 0 rgba(0,0,0,0.5));
}
@media (max-width: 480px) {
  .wheel-segment-icon { font-size: 20px; left: -11px; top: -11px; }
}

.wheel-hub {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(160deg, #2a2a2a 0%, #111 100%);
  border: 4px solid var(--accent-yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  z-index: 3;
  box-shadow: 2px 2px 0 #000;
}

/* Idle — gentle invite-to-spin pulse (not an actual rotation, just a glow) */
@keyframes wheelIdlePulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-yellow), 8px 8px 0 #000; }
  50%      { box-shadow: 0 0 16px 6px rgba(232,168,0,0.6), 8px 8px 0 #000; }
}
.wheel.wheel-idle { animation: wheelIdlePulse 1.8s ease-in-out infinite; }

.wheel-wrap.wheel-locked .wheel {
  filter: grayscale(0.85) brightness(0.55);
}
.wheel-wrap.wheel-locked .wheel-pointer {
  opacity: 0.5;
}

@keyframes dsCaseFlash {
  0%   { transform: scale(0.3); opacity: 0.9; }
  100% { transform: scale(2.6); opacity: 0; }
}
.ds-case-flash {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.9) 0%, rgba(232,168,0,0.5) 40%, rgba(232,168,0,0) 70%);
  pointer-events: none;
  z-index: 3;
  animation: dsCaseFlash 0.5s ease-out forwards;
}

/* Win result reveal card */
@keyframes dsResultIn {
  0%   { transform: scale(0.55) rotate(-4deg); opacity: 0; }
  65%  { transform: scale(1.04) rotate(0.5deg); opacity: 1; }
  82%  { transform: scale(0.97); }
  100% { transform: scale(1);    opacity: 1; }
}
.spin-result {
  position: relative;
  margin: 0 auto 1.5rem;
  max-width: 300px;
  padding: 1.4rem 1.5rem 1.2rem;
  border: 3px solid #000;
  box-shadow: 5px 5px 0 #000;
  background: var(--accent-yellow);
  text-align: center;
  overflow: hidden;
  animation: dsResultIn 0.55s cubic-bezier(0.3, 0, 0.4, 1) 0.9s both;
}
.spin-result::before {
  content: '';
  position: absolute;
  inset: -30%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 65%);
  pointer-events: none;
}
.spin-result-icon   { font-size: 48px; line-height: 1; margin-bottom: 0.3rem; display: block; }
.spin-result-label  {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 3px;
  color: #000;
  margin-bottom: 0.25rem;
}
.spin-result-amount {
  font-family: var(--font-display);
  font-size: 40px;
  letter-spacing: 2px;
  color: #000;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.15);
  line-height: 1.1;
}
.spin-result-amount-unit { font-size: 22px; }

/* Points jackpot / legendary tier — dramatic variant */
.spin-result.ds-jackpot, .spin-result.tier-legendary {
  background: #000;
  border-color: var(--accent-yellow);
  box-shadow: 5px 5px 0 var(--accent-yellow), 0 0 0 3px #000;
}
.spin-result.ds-jackpot .spin-result-label, .spin-result.tier-legendary .spin-result-label { color: var(--accent-yellow); font-size: 26px; letter-spacing: 5px; }
.spin-result.ds-jackpot .spin-result-amount, .spin-result.tier-legendary .spin-result-amount { color: var(--accent-yellow); font-size: 52px; }
.spin-result.ds-jackpot .spin-result-icon, .spin-result.tier-legendary .spin-result-icon { font-size: 58px; }
@keyframes dsJackpotGlow {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(232,168,0,0.8)); }
  50%       { filter: drop-shadow(0 0 24px rgba(232,168,0,1)); }
}
.spin-result.ds-jackpot .spin-result-icon, .spin-result.tier-legendary .spin-result-icon {
  animation: dsJackpotGlow 0.75s ease-in-out infinite 0.65s;
}

/* Uncommon/Rare/Epic tiers — escalating accent, common tier uses the base look above */
.spin-result.tier-uncommon {
  border-color: var(--green-bright);
  box-shadow: 5px 5px 0 var(--green-bright), 0 0 0 3px #000;
}
.spin-result.tier-rare {
  border-color: var(--blue-bright);
  box-shadow: 5px 5px 0 var(--blue-bright), 0 0 0 3px #000;
}
.spin-result.tier-rare .spin-result-icon { font-size: 52px; }
.spin-result.tier-epic {
  background: #1a0033;
  border-color: var(--purple-bright);
  box-shadow: 5px 5px 0 var(--purple-bright), 0 0 0 3px #000;
}
.spin-result.tier-epic .spin-result-label,
.spin-result.tier-epic .spin-result-amount { color: #fff; }
.spin-result.tier-epic .spin-result-icon { font-size: 55px; }
@keyframes dsEpicGlow {
  0%, 100% { filter: drop-shadow(0 0 6px rgba(136,51,255,0.8)); }
  50%      { filter: drop-shadow(0 0 20px rgba(136,51,255,1)); }
}
.spin-result.tier-epic .spin-result-icon {
  animation: dsEpicGlow 0.7s ease-in-out infinite 0.65s;
}

/* Already-spun countdown state */
.ds-done-wrap {
  padding: 1.2rem 1rem 0.8rem;
}
.ds-done-clock { font-size: 36px; margin-bottom: 0.4rem; }
.ds-done-title {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 3px;
  color: #555;
  margin-bottom: 0.5rem;
}
.ds-done-sub {
  font-size: 11px;
  color: #aaa;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

/* Streak badge */
.ds-streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 auto 1.1rem;
  padding: 8px 16px;
  background: var(--bg-card);
  border: 2px solid var(--border-mid);
  color: var(--text-muted);
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
}
.ds-streak-badge.lit {
  background: rgba(232,168,0,0.1);
  border-color: var(--accent-yellow);
  color: var(--yellow-bright);
  box-shadow: 3px 3px 0 #000;
}
.ds-streak-badge.lit span:first-of-type {
  animation: dsStreakFlicker 1.4s ease-in-out infinite;
  display: inline-block;
}
@keyframes dsStreakFlicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25%      { transform: scale(1.08) rotate(-3deg); }
  50%      { transform: scale(0.96) rotate(2deg); }
  75%      { transform: scale(1.05) rotate(-1deg); }
}

/* Milestone bonus banner */
@keyframes dsMilestoneIn {
  0%   { transform: translateY(-8px) scale(0.9); opacity: 0; }
  100% { transform: translateY(0)    scale(1);   opacity: 1; }
}
.ds-milestone-banner {
  max-width: 300px;
  margin: 0 auto 1rem;
  padding: 10px 14px;
  background: var(--purple-bright);
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  text-align: center;
  animation: dsMilestoneIn 0.4s cubic-bezier(0.3,0,0.4,1) 0.9s both;
}

/* Confetti burst — Epic/Legendary reveal only */
@keyframes dsConfetti {
  0%   { transform: translate(0,0) scale(1) rotate(0deg); opacity: 1; }
  100% { transform: translate(var(--cx),var(--cy)) scale(0.2) rotate(220deg); opacity: 0; }
}
.ds-confetti-piece {
  position: fixed;
  width: 8px; height: 8px;
  border: 1px solid #000;
  pointer-events: none;
  z-index: 9999;
  animation: dsConfetti 0.85s ease-out forwards;
}

/* Screen shake — Epic/Legendary reveal impact */
@keyframes dsScreenShake {
  0%, 100% { transform: translate(0,0); }
  15%      { transform: translate(-6px, 2px); }
  30%      { transform: translate(6px, -2px); }
  45%      { transform: translate(-4px, 1px); }
  60%      { transform: translate(4px, -1px); }
  75%      { transform: translate(-2px, 1px); }
  90%      { transform: translate(2px, 0); }
}
.ds-shake { animation: dsScreenShake 0.42s ease-out; }

/* CASINO */
.casino-cashier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.casino-game-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.casino-game-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
  background: var(--bg-card);
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  padding: 18px 12px;
  text-decoration: none;
  color: var(--text-primary);
  transition: transform 0.15s, box-shadow 0.15s;
}
.casino-game-card:hover {
  transform: translate(-2px, -2px);
  box-shadow: 5px 5px 0 var(--accent-yellow);
  text-decoration: none;
}
.casino-game-card:hover .casino-game-icon { transform: scale(1.15); }
.casino-game-icon { font-size: 40px; transition: transform 0.15s; }
.casino-game-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  color: var(--text-primary);
}
.casino-game-desc { font-size: 12px; color: var(--text-secondary); font-weight: 600; }
.casino-game-range {
  font-size: 11px;
  color: var(--text-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.casino-game-jackpot { font-size: 12px; color: var(--accent-yellow); font-weight: 700; }

/* Hi-Lo playing card display */
.hilo-card {
  width: 110px;
  height: 150px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 1px;
  margin: 0 auto 1rem;
}

/* Dice display */
.dice-pair { display: flex; gap: 16px; justify-content: center; margin-bottom: 1rem; }
.die-face {
  width: 64px;
  height: 64px;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 30px;
}

@media (max-width: 900px) {
  .casino-cashier-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .casino-game-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
  .lair-tabs { flex-wrap: wrap; }
  .lair-tab { flex: 1 1 auto; text-align: center; padding: 10px 8px; font-size: 14px; }
}

@media (max-width: 600px) {
  .momentum-bar { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .momentum-right { align-items: flex-start; }
}

@media (max-width: 480px) {
  .friends-grid { grid-template-columns: repeat(2, 1fr); }
}

.ds-countdown {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 4px;
  color: var(--accent-red);
  text-shadow: 2px 2px 0 #000;
}

/* CASINO — Session 2 */

/* VIDEO POKER — real card images (replaces the old CSS-drawn .pc-card) */
.vp-hand {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 16px 0;
}

.casino-card-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.casino-card-img {
  width: 80px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  transition: transform 0.15s ease;
}

.casino-card-img:hover {
  transform: translateY(-4px);
}

.vp-hold-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--yellow);
  cursor: pointer;
  user-select: none;
}

.vp-hold-label input[type="checkbox"] {
  accent-color: var(--yellow);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

@media (max-width: 480px) {
  .casino-card-img { width: 58px; }
  .vp-hand { gap: 6px; }
}

/* Lotto countdown */
.lotto-countdown {
  font-family: var(--font-display);
  font-size: 34px;
  letter-spacing: 3px;
  color: var(--accent-red);
  text-shadow: 2px 2px 0 #000;
}

/* ============================================
   SLOT MACHINES — Session 3
   ============================================ */

/* Bet controls */
.bet-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 1rem;
}
.quick-bets { display: flex; gap: 6px; }
.bet-quick {
  padding: 7px 12px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  border: 2px solid #000;
  background: var(--bg-card);
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
}
.bet-quick:hover { background: var(--accent-yellow); color: #000; }
.bet-controls input[type="number"] {
  width: 120px;
  padding: 8px 10px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid #000;
  font-family: var(--font-body);
  font-weight: 700;
  text-align: center;
}
.spin-btn {
  padding: 11px 30px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  background: var(--accent-red);
  color: #fff;
  border: 2px solid #000;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: all 0.15s;
}
.spin-btn:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #000; }

/* ============================================
   BLACKJACK — playing card visuals + table layout
   ============================================ */

/* Blackjack card images — real PNGs from /images/casino/cards/, same
   convention as the poker table. */
.bj-card {
  width: 70px;
  height: 100px;
  object-fit: contain;
  background: transparent;
  border: 2px solid #1a3a1a;
  border-radius: 6px;
  box-shadow: 3px 3px 0 rgba(0,0,0,0.6);
  flex-shrink: 0;
}

.card-hand {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.75rem 0;
}

/* Scope every dark-theme fix below to the blackjack page only — .panel,
   .bet-quick etc are shared globally with other casino games. */
.bj-page .bj-table-section { padding: 1rem; background: linear-gradient(180deg, #0d1a0d, #081408); }
.bj-page .bj-table-section.bj-dealer { border-bottom: 2px solid #1a3a1a; }
.bj-page #tableBet, .bj-page #tableActive, .bj-page #actionBar, .bj-page #resultBanner {
  background: linear-gradient(180deg, #0d1a0d, #081408);
  border: 1px solid #1a3a1a;
}
.bj-page #resultBanner { background: rgba(0,0,0,0.4); }
.bj-page .bet-quick { background: #0a120a; border: 2px solid #2a5a2a; color: var(--text-primary); }
.bj-page .bet-quick:hover { background: #0a120a; border-color: var(--accent-yellow); color: var(--accent-yellow); }
.bj-page .bet-quick.active { background: #0a120a; border-color: var(--accent-yellow); color: var(--accent-yellow); }
.bj-page .bet-controls input[type="number"] { background: #0a120a; border: 2px solid #2a5a2a; color: var(--text-primary); }

.bj-section-label {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

.bj-hand-total {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: 1px;
}
.bj-hand-total.green { color: var(--accent-green); }
.bj-hand-total.red { color: var(--accent-red); }
.bj-hand-total.yellow { color: var(--accent-yellow); }
.bj-hand-total.muted { color: var(--text-muted); }

.bj-hand-meta {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}

.bj-dealer-npc {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 1rem;
  border-left: 3px solid var(--accent-yellow, #f1c40f);
}
.bj-dealer-npc-avatar {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  background: var(--bg-void, #111);
  border: 2px solid var(--accent-yellow, #f1c40f);
}
.bj-dealer-npc-name {
  font-family: var(--font-display);
  color: var(--accent-yellow, #f1c40f);
  letter-spacing: 2px;
  font-size: 12px;
  margin-bottom: 2px;
}
.bj-dealer-npc-line {
  font-style: italic;
  font-size: 13px;
  color: var(--text-secondary);
  transition: opacity 0.15s ease;
}

@keyframes bjDealIn {
  from { opacity: 0; transform: translateY(-16px) scale(0.9); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.bj-deal-in {
  animation: bjDealIn 0.28s ease both;
}

/* ============================================
   ROULETTE — visual betting table + wheel reveal
   ============================================ */

.roulette-table-wrap { overflow-x: auto; }

.roulette-table {
  background: #076324;
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  border-radius: 8px;
  padding: 12px;
  max-width: 700px;
  min-width: 560px;
  margin: 0 auto;
  user-select: none;
}

.roulette-zero {
  background: #076324;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.4);
  text-align: center;
  padding: 12px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  cursor: pointer;
  margin-bottom: 4px;
  border-radius: 4px;
  transition: all 0.15s;
}

.roulette-numbers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  /* DOM order is column-major (top-to-bottom per column, then next column) —
     grid-auto-flow:column places items to match that instead of the grid default row-major fill */
  grid-auto-flow: column;
  gap: 3px;
  margin-bottom: 4px;
}

.roulette-number {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  transition: all 0.15s;
}

.red-num { background: #cc0020; }
.black-num { background: #111; }

.roulette-number:hover,
.roulette-zero:hover,
.outside-bet:hover {
  transform: scale(1.05);
  box-shadow: 0 0 8px rgba(255,255,255,0.6);
  z-index: 2;
  position: relative;
}

.bet-cell.selected {
  box-shadow: 0 0 0 3px var(--accent-yellow), 0 0 12px var(--accent-yellow);
  transform: scale(1.05);
  z-index: 3;
  position: relative;
}

.roulette-outside {
  display: grid;
  gap: 3px;
  margin-top: 3px;
}

.roulette-outside:first-of-type { grid-template-columns: repeat(3, 1fr); }
.roulette-outside:last-of-type { grid-template-columns: repeat(6, 1fr); }

.outside-bet {
  padding: 10px 4px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 3px;
  cursor: pointer;
  background: #076324;
  transition: all 0.15s;
}

.red-cell { background: #cc0020; }
.black-cell { background: #111; }

/* Bet amount chip buttons */
.chip-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  background: var(--accent-yellow);
  color: #000;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.chip-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}

.chip-max {
  background: var(--accent-red);
  color: #fff;
}

/* Spinning wheel reveal */
.wheel-reveal {
  text-align: center;
  margin: 1rem auto;
  padding: 1.5rem;
  background: #111;
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  border-radius: 8px;
  max-width: 280px;
}

.wheel-display {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 6px solid var(--accent-yellow);
  box-shadow: 0 0 20px var(--accent-yellow), 6px 6px 0 #000;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: background 0.3s;
}

.wheel-number {
  font-family: var(--font-display);
  font-size: 48px;
  letter-spacing: 2px;
  line-height: 1;
  transition: color 0.1s;
}

.wheel-label {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: #fff;
  margin-top: 0.5rem;
}

/* Reuses the .reel-cell winPulse keyframe already defined for slot wins */
.winning-number {
  animation: winPulse 0.5s ease-in-out 4;
  box-shadow: 0 0 0 3px var(--accent-yellow), 0 0 16px var(--accent-yellow) !important;
}

@media (max-width: 600px) {
  .roulette-table { min-width: 540px; }
}

/* ============================================
   SHARED CASINO BET CONTROLS — coin flip + hi-lo
   (.chip-btn / .chip-max already defined above for roulette; reused here as-is)
   ============================================ */

.casino-bet-controls { margin-top: 1.5rem; }

.chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 0.75rem;
}

.bet-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.bet-input-row input {
  width: 160px;
  text-align: center;
  padding: 10px;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-display);
  background: var(--bg-input);
  color: var(--text-primary);
  border: 3px solid var(--border-mid);
  box-shadow: 3px 3px 0 rgba(0,0,0,0.6);
  letter-spacing: 1px;
}

.bet-balance {
  font-size: 13px;
  color: var(--text-dim);
  font-weight: 700;
}

/* ============================================
   COIN FLIP — real coin images, clean centered layout
   ============================================ */

.cf-game {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  max-width: 420px;
  margin: 0 auto;
}

.cf-coin-area {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 180px;
}

.cf-coin-img {
  width: 160px;
  height: 160px;
  object-fit: contain;
  filter: drop-shadow(0 4px 16px rgba(241,196,15,0.3));
  transition: transform 0.1s ease;
}

.coin-spinning {
  animation: coinSpin 0.6s ease;
}

@keyframes coinSpin {
  0%   { transform: scaleX(1); }
  25%  { transform: scaleX(0); }
  50%  { transform: scaleX(1); }
  75%  { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

.coin-settled {
  animation: coinSettle 0.3s ease;
}

@keyframes coinSettle {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.cf-call-buttons {
  display: flex;
  gap: 12px;
  width: 100%;
  max-width: 300px;
}

.cf-call-btn {
  flex: 1;
  padding: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 6px;
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 2px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.cf-call-btn:hover {
  border-color: var(--yellow);
  color: var(--yellow);
}

.cf-call-btn.selected {
  background: rgba(241,196,15,0.1);
  border-color: var(--yellow);
  color: var(--yellow);
  box-shadow: 0 0 8px rgba(241,196,15,0.2);
}

.cf-flip-btn {
  width: 100%;
  max-width: 300px;
  padding: 12px;
  background: linear-gradient(180deg, #2d7a2d, #1a5a1a);
  border: 1px solid #3a9a3a;
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s ease;
}

.cf-flip-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.cf-flip-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #359a35, #1a6a1a);
}

.cf-result-inline {
  width: 100%;
  max-width: 300px;
  text-align: center;
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  animation: cfResultShow 0.3s ease;
}

@keyframes cfResultShow {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.cf-result-text {
  font-size: 22px;
  font-weight: 900;
  margin-bottom: 6px;
}

.cf-result-sub {
  font-size: 12px;
  font-weight: 700;
}

@media (max-width: 480px) {
  .cf-coin-img { width: 120px; height: 120px; }
  .cf-call-btn { font-size: 12px; padding: 10px; }
}

/* ============================================
   HI-LO
   ============================================ */

.hilo-table {
  background: #076324;
  border: 4px solid #000;
  box-shadow: 6px 6px 0 #000;
  border-radius: 12px;
  padding: 2rem;
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

.hilo-card-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.hilo-history {
  display: flex;
  align-items: center;
}

.hilo-arrow {
  font-size: 40px;
  color: rgba(255,255,255,0.3);
  font-family: var(--font-display);
}

.hilo-arrow.higher { color: var(--accent-green); }
.hilo-arrow.lower { color: var(--accent-red); }

.multiplier-display {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 2px;
  color: var(--accent-yellow);
  text-shadow: 2px 2px 0 #000;
  margin: 0.5rem 0;
}

.mult-done { color: var(--accent-green); }
.mult-current {
  color: var(--accent-yellow);
  font-size: 28px;
  text-shadow: 2px 2px 0 #000;
}
.mult-future { color: rgba(255,255,255,0.35); }
.mult-arrow { color: rgba(255,255,255,0.3); margin: 0 6px; }

.hilo-hint {
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 1rem;
}

.hilo-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 1rem;
  flex-wrap: wrap;
}

@keyframes cashoutPulse {
  0%, 100% { box-shadow: 3px 3px 0 #000; }
  50% { box-shadow: 3px 3px 0 #000, 0 0 12px var(--accent-yellow); }
}

.cashout-btn {
  animation: cashoutPulse 1.5s ease-in-out infinite;
}

/* HI-LO cards — real card images */
.hilo-card-img {
  width: 80px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

.hilo-card-img.hilo-current {
  width: 100px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.7);
}

.hilo-card-img.hilo-history {
  width: 60px;
  opacity: 0.7;
  margin-left: -30px;
}

.hilo-card-img.hilo-history:first-child {
  margin-left: 0;
}

.hilo-guess-btn {
  flex: 1;
  max-width: 220px;
  padding: 18px 24px;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  font-weight: 700;
  border: 3px solid #000;
  box-shadow: 3px 3px 0 #000;
  color: #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.hilo-guess-btn:hover {
  transform: translate(-1px, -1px);
  box-shadow: 4px 4px 0 #000;
}
.hilo-guess-lower { background: var(--accent-red); }
.hilo-guess-higher { background: var(--accent-green); }

/* Result panel — constrained and centered to match .hilo-table above it
   instead of stretching full-width across the whole page content area. */
.hilo-result {
  max-width: 380px;
  margin: 1rem auto 0;
  padding: 1rem;
  text-align: center;
  background: rgba(10, 10, 10, 0.90);
  border: 1px solid rgba(204,0,0,0.25);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6);
}
.hilo-result-win  { border-color: var(--accent-green); box-shadow: 3px 3px 0 var(--accent-green); }
.hilo-result-lose { border-color: var(--accent-red);   box-shadow: 3px 3px 0 var(--accent-red); }

.hilo-result-title {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  margin-bottom: 0.4rem;
}
.hilo-result-sub {
  font-size: 12px;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}
.hilo-result-cards {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  align-items: center;
  margin-bottom: 0.75rem;
}
.hilo-result-arrow {
  font-size: 16px;
  color: var(--text-dim);
}
.hilo-result-balance {
  font-size: 11px;
  color: var(--text-dim);
  margin-bottom: 0.75rem;
}
.hilo-result-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.hilo-result-actions .train-btn {
  padding: 8px 18px;
  font-size: 13px;
}
.hilo-result-lobby-link {
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
}

@media (max-width: 480px) {
  .hilo-result { max-width: 100%; padding: 0.85rem; }
  .hilo-result-title { font-size: 16px; }
  .hilo-card-img { width: 60px; }
  .hilo-card-img.hilo-current { width: 75px; }
  .hilo-card-img.hilo-history { width: 45px; margin-left: -22px; }
}

@media (max-width: 600px) {
  .hilo-table { padding: 1.25rem; max-width: 100%; }
  .hilo-card-display { gap: 0.75rem; }
}

/* ===== SHARED BBCODE EDITOR / RENDER STYLES =====
   Used by mailbox, settings (signature), and forums — promoted here since
   forums needs them across three templates rather than duplicating a
   scoped <style> block in each one. */
.bbcode-toolbar {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-bottom: 6px;
  padding: 6px 8px;
  background: #f5f5f5;
  border: 2px solid #000;
  border-bottom: none;
}

.bb-btn {
  padding: 4px 10px;
  border: 2px solid #000;
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-body);
  transition: all 0.1s;
}

.bb-btn:hover {
  background: var(--accent-yellow);
}

.mail-textarea {
  width: 100%;
  min-height: 160px;
  padding: 10px;
  background: var(--bg-input);
  color: var(--text-primary);
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  font-family: var(--font-body);
  font-size: 14px;
  resize: vertical;
  box-sizing: border-box;
}

.mail-textarea:focus {
  outline: none;
  border-color: var(--accent-blue);
  box-shadow: 2px 2px 0 var(--accent-blue);
}

.bbcode-quote {
  margin: 8px 0;
  padding: 10px 14px;
  border-left: 4px solid var(--accent-blue);
  background: #e3f2fd;
  font-style: italic;
  font-size: 13px;
}

.bbcode-quote-author {
  font-style: normal;
  font-size: 12px;
  color: #555;
  margin-bottom: 4px;
}

.bbcode-code {
  margin: 8px 0;
  padding: 10px 14px;
  background: #f5f5f5;
  border: 2px solid #ddd;
  font-family: monospace;
  font-size: 12px;
  overflow-x: auto;
  white-space: pre;
}

/* ===== FORUMS ===== */
.emoticon {
  width: 20px;
  height: 20px;
  vertical-align: text-bottom;
  image-rendering: auto;
}
.forum-cat-panel { transition: all 0.15s; }
.forum-cat-panel:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 #000; }

.forum-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  flex-wrap: wrap;
}

.forum-cat-info { flex: 1; }

.forum-cat-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  color: var(--text-primary);
  text-decoration: none;
  display: block;
  margin-bottom: 4px;
}

.forum-cat-name:hover { color: var(--accent-red); text-decoration: none; }

.forum-cat-desc { font-size: 13px; color: var(--text-secondary); font-weight: 600; }

.forum-cat-stats {
  text-align: right;
  font-size: 12px;
  color: var(--text-dim);
  font-weight: 700;
  flex-shrink: 0;
}

.forum-stat-num {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--text-primary);
}

.forum-last-post { margin-top: 4px; font-size: 11px; }

.forum-unread-badge {
  display: inline-block;
  background: var(--accent-red);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  padding: 1px 8px;
  margin-left: 6px;
  border-radius: 999px;
}

/* Forum post layout */
.forum-post-wrap {
  display: flex;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  margin-bottom: 1rem;
  background: var(--bg-panel);
}

.forum-post-user {
  width: 160px;
  min-width: 160px;
  padding: 1rem;
  background: var(--bg-card);
  border-right: 3px solid #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.forum-post-userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.forum-post-username {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.5px;
  word-break: break-word;
  color: var(--text-primary);
}

.forum-post-meta {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 700;
  line-height: 1.8;
}

.forum-post-content {
  flex: 1;
  padding: 1rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
}

.forum-post-body {
  font-size: 14px;
  line-height: 1.7;
  flex: 1;
  word-break: break-word;
  overflow-wrap: break-word;
}

.forum-post-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-light);
  flex-wrap: wrap;
  gap: 8px;
}

.forum-post-actions {
  display: flex;
  gap: 12px;
  font-size: 13px;
  font-weight: 700;
}

.forum-post-actions a { color: var(--accent-blue); }

.forum-quote-btn {
  background: none;
  border: 0;
  color: var(--accent-blue);
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  padding: 0;
}
.forum-quote-btn:hover { text-decoration: underline; }

.forum-post-sig {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--border-mid);
  font-size: 12px;
  color: var(--text-secondary);
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
}

.forum-post-sig img {
  max-width: 100% !important;
  max-height: 100px !important;
}

/* Pager */
.forum-pager {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.75rem 0;
  font-size: 13px;
  font-weight: 700;
}

.forum-pager a {
  padding: 4px 10px;
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  background: var(--bg-card);
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.1s;
}

.forum-pager a:hover {
  background: var(--accent-yellow);
  color: #000;
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 #000;
}

.forum-pager-current {
  padding: 4px 10px;
  border: 2px solid #000;
  background: #000;
  color: #fff;
  font-weight: 900;
}

@media (max-width: 600px) {
  .forum-post-wrap { flex-direction: column; }
  .forum-post-user {
    width: 100%;
    min-width: 0;
    flex-direction: row;
    border-right: none;
    border-bottom: 3px solid #000;
    justify-content: flex-start;
    text-align: left;
  }
  /* Metadata used to be display:none here — kept but moved inline instead
     of hidden, so Level/Posts/Age are still visible on phones, just
     compact and muted below the username. */
  .forum-post-userinfo {
    align-items: flex-start;
    gap: 2px;
  }
  .forum-post-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    line-height: 1.4;
  }
  .forum-post-meta div { white-space: nowrap; }

  /* Category index stats — keep the header from overflowing once thread/
     post counts and "last post by" are added next to the name+description. */
  .forum-cat-header { flex-direction: column; align-items: flex-start; }
  .forum-cat-stats { text-align: left; }

  /* Search box was capped at max-width:300px inline — that's narrower
     than the viewport itself is wasted, not actually an overflow risk,
     but it reads as broken on a phone where everything else goes full
     width. */
  .forum-search-input { max-width: none !important; flex: 1 1 100%; }

  /* Quote sits among tiny plain-text-style action links (Edit/Delete) by
     design, but still needs a real touch target on phones. */
  .forum-quote-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* ===== ALLIANCE PAGES ===== */
.alliance-page-grid {
  display: grid;
  grid-template-columns: 1fr 180px;
  gap: 1.5rem;
  align-items: start;
}

@media (max-width: 768px) {
  .alliance-page-grid {
    grid-template-columns: 1fr;
  }
  .alliance-nav {
    order: -1;
  }
  .title-perm-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 480px) {
  .title-perm-grid {
    grid-template-columns: 1fr !important;
  }
  .title-perm-grid label {
    width: 100%;
    padding: 8px 0;
  }
  .transfer-form-grid {
    grid-template-columns: 1fr !important;
  }
  .transfer-form-grid button {
    width: 100%;
  }
}

.alliance-content { min-width: 0; }

.alliance-nav {
  position: sticky;
  top: 1rem;
}

.alliance-nav-section {
  background: var(--bg-panel);
  border: 3px solid #000;
  box-shadow: 4px 4px 0 #000;
  overflow: hidden;
}

.alliance-nav-title {
  background: #000;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  padding: 6px 10px;
}

.alliance-nav-link {
  display: block;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  border-bottom: 1px solid var(--border-light);
  transition: all 0.1s;
}

.alliance-nav-link:hover {
  background: var(--bg-card);
  color: var(--text-primary);
  padding-left: 14px;
  text-decoration: none;
}

.alliance-nav-link.active {
  background: var(--accent-red);
  color: #fff;
  padding-left: 14px;
}

.alliance-nav-link.active:hover {
  background: var(--accent-red);
  color: #fff;
}

.alliance-nav-locked {
  font-size: 10px;
  opacity: 0.6;
  margin-left: 4px;
}

/* Alliance news colors */
.alliance-news-good { color: var(--accent-green); }
.alliance-news-bad  { color: var(--accent-red); }
.alliance-news-neutral { color: var(--text-dim); }

/* Quick stats bar */
.alliance-stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 1rem;
}

@media (max-width: 600px) {
  .alliance-stats-bar { grid-template-columns: repeat(2, 1fr); }
}

.alliance-stat-card {
  padding: 10px;
  background: var(--bg-card);
  border: 2px solid var(--border-mid);
  border-radius: 4px;
  text-align: center;
}

.alliance-stat-card .stat-val {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 1px;
  color: var(--text-primary);
  display: block;
}

.alliance-stat-card .stat-label {
  font-size: 10px;
  color: var(--text-dim);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* ===== COMIC-BOOK SPECIAL EFFECTS ===== */

.speech-bubble {
  position: relative;
  background: #fff;
  color: #000;
  border: 3px solid #000;
  border-radius: 16px;
  padding: 14px 18px;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.5px;
}
.speech-bubble::after {
  content: '';
  position: absolute;
  bottom: -16px;
  left: 32px;
  border: 10px solid transparent;
  border-top-color: #fff;
  filter: drop-shadow(0 2px 0 #000);
}

@keyframes flashIn {
  0% { opacity: 0; transform: scale(0.9); }
  60% { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}
.event-flash {
  animation: flashIn 0.35s ease-out;
  border: 3px solid var(--border-heavy);
  box-shadow: var(--shadow-heavy);
}

.wanted-card {
  position: relative;
  background: var(--bg-card);
  border: 3px solid var(--border-heavy);
  box-shadow: var(--shadow-panel);
  padding: 1rem;
  padding-top: 2.2rem;
}
.wanted-card::before {
  content: 'WANTED';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--red);
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  text-align: center;
  padding: 4px 0;
  border-bottom: 2px solid var(--border-heavy);
}

@keyframes damageFloat {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-40px); }
}
.damage-number {
  position: absolute;
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--red-bright);
  text-shadow: 2px 2px 0 #000;
  animation: damageFloat 0.9s ease-out forwards;
  pointer-events: none;
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 1px solid var(--border-heavy);
}
.rank-badge.hero { background: var(--blue); color: #fff; }
.rank-badge.villain { background: var(--red); color: #fff; }

.progress-bar {
  position: relative;
  width: 100%;
  height: 10px;
  background: var(--bg-input);
  border: 2px solid var(--border-heavy);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  background: var(--green);
  position: relative;
}
.progress-bar-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.15) 0 6px,
    transparent 6px 12px
  );
}

/* ===== ALIGNMENT WAR — status bar, tile tints, city map ===== */
.war-bar {
  display: flex;
  width: 100%;
  height: 14px;
  background: var(--bg-input);
  border: 2px solid var(--border-heavy);
  overflow: hidden;
}
.war-bar-hero { height: 100%; background: linear-gradient(90deg, var(--blue), var(--blue-bright)); }
.war-bar-villain { height: 100%; background: linear-gradient(90deg, var(--red-bright), var(--red)); }
.war-bar-labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-top: 6px;
}
.war-bar-label-hero { color: var(--blue-bright); }
.war-bar-label-villain { color: var(--red-bright); }
.war-wp-totals {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 10px;
  flex-wrap: wrap;
  font-size: 13px;
}
.war-wp-total { color: var(--text-secondary); }
.war-wp-hero { color: var(--blue-bright); }
.war-wp-villain { color: var(--red-bright); }

.minimap-cell.tile-hero { box-shadow: inset 0 0 0 2px var(--blue-bright); }
.minimap-cell.tile-villain { box-shadow: inset 0 0 0 2px var(--red-bright); }
.minimap-cell.claimable {
  animation: claimablePulse 1.4s ease-in-out infinite;
}
@keyframes claimablePulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--yellow); }
  50% { box-shadow: inset 0 0 0 2px var(--yellow-bright); }
}

.claim-btn-wrap { margin-top: 10px; }
.claim-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 12px;
  font-family: var(--font-display);
  letter-spacing: 1px;
}

.warmap-toggle-wrap { margin-top: 10px; }
.warmap-canvas-wrap {
  display: none;
  margin-top: 10px;
  text-align: center;
}
.warmap-canvas-wrap.open { display: block; }
#warmapCanvas {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  border: 2px solid var(--border-heavy);
  background: var(--bg-input);
}

.auto-claim-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 13px;
}

@media (max-width: 768px) {
  .war-bar-labels { font-size: 10px; }
  .war-wp-totals { font-size: 12px; }
}

/* ===== EXPLORE PHASE 3 ===== */

.explore-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}

/* Sprite — actual sprite art now shipped in public/images/sprites/,
   .explore-sprite-placeholder (emoji) is only the onerror fallback. */
.explore-sprite {
  width: 80px;
  height: 150px;
  border-radius: 8px;
  object-fit: contain;
  image-rendering: pixelated;
}

/* Corner minimap */
.explore-minimap-corner {
  border: 1px solid var(--border-mid);
  image-rendering: pixelated;
  display: block;
}

@media (max-width: 600px) {
  .explore-minimap-corner { width: 175px; height: 175px; }
}

/* ===== WATCHTOWER PHASE 4 ===== */

.watchtower-toplists {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .watchtower-toplists {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .watchtower-enlist-form { width: 100%; }
  .watchtower-enlist-btn { width: 100%; }
}

/* ============================================
   HITLIST
   ============================================ */

.hitlist-action-btn { min-height: 36px; display: inline-flex; align-items: center; }

/* ============================================
   ARENA
   ============================================ */

.arena-fight-btn { min-height: 36px; display: inline-flex; align-items: center; }

@media (max-width: 480px) {
  .arena-report-actions { flex-direction: column; align-items: stretch; }
  .arena-report-action-form,
  .arena-report-action-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .hitlist-add-fields { flex-direction: column; align-items: stretch; }
  .hitlist-add-fields .form-group,
  .hitlist-add-fields input,
  .hitlist-add-submit {
    width: 100%;
  }
  .hitlist-panel-title { flex-direction: column; align-items: stretch; }
  .hitlist-remove-dead-btn,
  .hitlist-notes-toggle-btn {
    width: 100%;
  }
}

/* ===== EXPLORE — HoboWars-style layout pass ===== */

.explore-hw-intro {
  padding: 1rem 1rem 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  line-height: 1.6;
}

.explore-city-btn {
  display: block;
  width: calc(100% - 2rem);
  margin: 1rem auto 0;
  text-align: center;
  padding: 16px;
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  color: #fff;
  background: linear-gradient(180deg, var(--red-bright), var(--accent-red));
  border: 3px solid #000;
  border-radius: 10px;
  box-shadow: 3px 3px 0 #000;
  cursor: pointer;
  transition: var(--transition);
}
.explore-city-btn:hover { transform: translateY(-1px); box-shadow: 4px 4px 0 #000, 0 0 16px rgba(204,0,0,0.4); }

.explore-city-btn-sm {
  width: 100%;
  padding: 8px;
  font-size: 13px;
  letter-spacing: 1px;
  border-radius: 6px;
  margin-top: 8px;
}

.explore-hw-divider {
  margin: 1.25rem 1rem 0.5rem;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--border-mid);
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--text-primary);
  text-decoration: underline;
}

.explore-hw-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  padding: 0.5rem 1rem 1rem;
}

.explore-hw-stats > div {
  padding: 3px 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
}
.explore-hw-stats b { color: var(--text-primary); font-weight: 700; }
.hw-yellow { color: var(--yellow-bright); font-weight: 700; }
.hw-green  { color: var(--green-bright); font-weight: 700; }

.explore-hw-swap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.explore-hw-note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

.explore-hw-map-col { display: flex; flex-direction: column; align-items: center; }
.explore-hw-map {
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  image-rendering: pixelated;
  border: 2px solid var(--border-heavy);
  background: var(--bg-input);
}
.explore-hw-territory {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
}

.explore-hw-links {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 1rem 1rem;
  font-size: 13px;
  font-weight: 700;
}
.explore-hw-links a { color: var(--text-secondary); }
.explore-hw-links a:hover { color: var(--text-primary); }

/* ── Movement view ── */
/* True 3-column grid: found-stats (top-left) | sprite+controls (centered) |
   corner minimap (right) — each column gets its own alignment instead of
   fighting a single flex align-items value. */
.explore-move-topstats {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
}
.explore-move-found {
  align-self: start;
  justify-self: start;
  font-size: 12px;
  font-weight:700;
  color: var(--text-secondary);
  line-height: 1.6;
}
.hw-turns { font-family: var(--font-display); font-size: 16px; color: var(--yellow-bright); }
.explore-move-localmap { justify-self: end; align-self: center; }

.explore-move-center-col {
  justify-self: center;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.explore-move-coords { font-size: 12px; font-weight: 700; color: var(--text-secondary); }

.explore-move-subinfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
}
.explore-hw-checkbox { display: flex; align-items: center; gap: 6px; cursor: pointer; }

.explore-sprite-stage {
  display: grid;
  grid-template-columns: 40px 88px 40px;
  grid-template-rows: 40px 88px 40px;
  gap: 2px;
  width: fit-content;
  margin: 0;
}
.explore-sprite-stage .btn-up    { grid-column: 2; grid-row: 1; }
.explore-sprite-stage .btn-left  { grid-column: 1; grid-row: 2; }
.explore-sprite-stage .btn-right { grid-column: 3; grid-row: 2; }
.explore-sprite-stage .btn-down  { grid-column: 2; grid-row: 3; }

.explore-sprite-wrap {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}
.explore-sprite-placeholder {
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* CSS-drawn triangles instead of the ▲▼◀▶ glyphs — font triangle
   characters aren't visually centered the same way across a typeface
   (different ascent/descent per glyph), which made the pad look lopsided
   even though the button grid itself was symmetric. A border-triangle is
   pixel-exact regardless of font. */
.explore-tri {
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: var(--transition);
}
.explore-tri::before {
  content: '';
  width: 0;
  height: 0;
  transition: var(--transition);
}
.explore-tri-up::before    { border-left: 11px solid transparent; border-right: 11px solid transparent; border-bottom: 16px solid var(--red); }
.explore-tri-down::before  { border-left: 11px solid transparent; border-right: 11px solid transparent; border-top: 16px solid var(--red); }
.explore-tri-left::before  { border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-right: 16px solid var(--red); }
.explore-tri-right::before { border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 16px solid var(--red); }
.explore-tri:hover::before { filter: brightness(1.3); transform: scale(1.1); }

.explore-hw-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.explore-move-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-bottom: 1rem;
}
.explore-retreat-form { margin: 0; }
.explore-hw-link-btn {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}
.explore-hw-link-btn:hover { color: var(--text-secondary); }
.explore-hw-link-btn:disabled { opacity: 0.4; cursor: not-allowed; text-decoration: none; }

.explore-sprite-stage.compass-shake { animation: exCompassShake 0.35s ease-out; }

@media (max-width: 768px) {
  .explore-hw-grid { grid-template-columns: 1fr; }
  .explore-move-topstats { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .explore-move-found { justify-self: center; align-self: center; text-align: center; }
}

.divider-label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 1rem 0;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--text-dim);
  text-transform: uppercase;
}
.divider-label::before, .divider-label::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--border-mid);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.3); }
}
.notif-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--red-bright);
  animation: pulse 1.6s ease-in-out infinite;
}

.glow-red { box-shadow: 0 0 12px var(--shadow-red); }
.glow-blue { box-shadow: 0 0 12px rgba(30,111,199,0.5); }
.glow-gold { box-shadow: 0 0 12px var(--shadow-yellow); }

/* ===== BLACK MARKET ===== */
.bm-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-mid);
  text-decoration: none;
  transition: var(--transition);
  gap: 6px;
  text-align: center;
}

.bm-tile:hover {
  border-color: var(--red);
  background: var(--bg-card);
  box-shadow: 0 0 16px rgba(204,0,0,0.15);
  text-decoration: none;
}

.bm-tile-locked {
  opacity: 0.4;
  cursor: default;
  pointer-events: none;
}

.bm-tile-icon { font-size: 28px; }

.bm-tile-name {
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--text-primary);
}

.bm-tile-desc {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 700;
}

@media (max-width: 600px) {
  .bm-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ===== AUTH PAGES (Phase 2 — login/register redesign) ===== */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  position: relative;
  z-index: 1;
  background-color: #050505;
  background-image: url('/images/ui/bg-city.jpeg');
  background-size: cover;
  background-position: center top;
  background-attachment: fixed;
}

.auth-page::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  pointer-events: none;
  z-index: 0;
}

.auth-card {
  background: rgba(8, 8, 8, 0.95);
  border: 1px solid rgba(204,0,0,0.3);
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.8),
    0 20px 60px rgba(0,0,0,0.9),
    0 0 40px rgba(204,0,0,0.08);
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 460px;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(12px);
}

/* Red corner brackets on auth card */
.auth-card::before {
  content: '';
  position: absolute;
  top: -1px; left: -1px;
  width: 20px; height: 20px;
  border-top: 2px solid var(--red);
  border-left: 2px solid var(--red);
  box-shadow: -2px -2px 8px rgba(204,0,0,0.3);
}

.auth-card::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 20px; height: 20px;
  border-bottom: 2px solid var(--red);
  border-right: 2px solid var(--red);
  box-shadow: 2px 2px 8px rgba(204,0,0,0.3);
}

.auth-logo {
  text-align: center;
  margin-bottom: 2rem;
}

.auth-logo img {
  height: 150px;
  width: auto;
  object-fit: contain;
  filter: drop-shadow(0 0 12px rgba(204,0,0,0.5));
}

.auth-title {
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--text-secondary);
  text-align: center;
  margin-top: 8px;
  margin-bottom: 0;
}

.auth-divider {
  width: 40px;
  height: 1px;
  background: var(--red);
  margin: 1.5rem auto;
  box-shadow: 0 0 8px rgba(204,0,0,0.4);
}

.auth-form .form-group {
  margin-bottom: 1rem;
}

.auth-form label {
  display: block;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 6px;
}

.auth-form .form-input {
  width: 100%;
  padding: 12px 14px;
  background: rgba(0,0,0,0.6);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  outline: none;
  transition: var(--transition);
  border-radius: 0;
}

.auth-form .form-input:focus {
  border-color: var(--red);
  box-shadow: 0 0 0 2px rgba(204,0,0,0.15), 0 0 12px rgba(204,0,0,0.1);
  background: rgba(0,0,0,0.8);
}

.auth-form .form-input::placeholder {
  color: var(--text-dim);
}

.auth-submit {
  width: 100%;
  padding: 14px;
  background: var(--red);
  border: none;
  color: #fff;
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 3px;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 0.5rem;
  position: relative;
  overflow: hidden;
}

.auth-submit::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: rgba(255,255,255,0.08);
  transition: left 0.2s ease;
}

.auth-submit:hover::before { left: 0; }

.auth-submit:hover {
  background: var(--red-bright);
  box-shadow: 0 0 20px rgba(204,0,0,0.4);
}

.auth-submit:active {
  transform: translateY(1px);
}

.auth-page .auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
}

.auth-page .auth-footer a {
  color: var(--red);
  font-weight: 700;
  text-decoration: none;
  transition: var(--transition);
}

.auth-page .auth-footer a:hover {
  color: var(--red-bright);
  text-decoration: none;
}

.auth-error {
  background: rgba(204,0,0,0.1);
  border: 1px solid rgba(204,0,0,0.3);
  border-left: 3px solid var(--red);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: #ff6666;
  margin-bottom: 1.5rem;
}

.auth-success {
  background: rgba(0,170,68,0.1);
  border: 1px solid rgba(0,170,68,0.3);
  border-left: 3px solid var(--green);
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--green-bright);
  margin-bottom: 1.5rem;
}

/* Alignment choice cards */
.auth-page .alignment-choice {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 1rem;
}

.alignment-card {
  border: 2px solid var(--border-mid);
  padding: 16px 12px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  background: rgba(0,0,0,0.4);
  user-select: none;
}

.alignment-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.alignment-card:hover {
  border-color: rgba(255,255,255,0.3);
}

.alignment-card.selected-hero {
  border-color: var(--blue);
  background: rgba(0,102,204,0.15);
  box-shadow: 0 0 16px rgba(0,102,204,0.2);
}

.alignment-card.selected-villain {
  border-color: var(--red);
  background: rgba(204,0,0,0.15);
  box-shadow: 0 0 16px rgba(204,0,0,0.2);
}

.alignment-icon {
  font-size: 32px;
  display: block;
  margin-bottom: 8px;
  line-height: 1;
}

.alignment-card .alignment-name {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 2px;
  color: var(--text-primary);
  display: block;
  margin-bottom: 6px;
}

.alignment-desc {
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.5;
}

.alignment-card.selected-hero .alignment-name { color: var(--blue-bright); }
.alignment-card.selected-villain .alignment-name { color: var(--red-bright); }

.alignment-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 8px;
}

@media (max-width: 480px) {
  .auth-card { padding: 2rem 1.25rem; }
  .auth-logo img { height: 60px; }
  .alignment-card { padding: 12px 8px; }
  .alignment-icon { font-size: 24px; }
  .alignment-card .alignment-name { font-size: 15px; }
}

/* ============================================
   CITY MAP — COMIC BOOK DISTRICT LAYOUT
   ============================================ */

.city-map {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 3px;
  background: #000;
  border: 3px solid #000;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 1rem;
}

/* District panel assignments — 5 districts, Slums spans both rows */
.district-slums      { grid-column: 1; grid-row: 1 / 3; }
.district-downtown   { grid-column: 2; grid-row: 1; }
.district-industrial { grid-column: 3; grid-row: 1; }
.district-midcity    { grid-column: 2; grid-row: 2; }
.district-heights    { grid-column: 3; grid-row: 2; }

/* Base panel */
.district-panel {
  background: var(--bg-card);
  display: flex;
  flex-direction: column;
  min-height: 200px;
  position: relative;
  overflow: hidden;
}

/* Left accent stripe per district */
.district-slums::before      { background: #8B4513; }
.district-downtown::before   { background: #1a6b8a; }
.district-industrial::before { background: #4a4a4a; }
.district-midcity::before    { background: #5a3a7a; }
.district-heights::before    { background: #2a5a2a; }

.district-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
}

/* Caption box — comic book style */
.district-caption {
  padding: 10px 12px 6px 16px;
  border-bottom: 1px solid var(--border-light);
}

.district-name {
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--text-secondary);
  font-weight: 700;
}

.district-flavor {
  font-size: 10px;
  color: var(--text-dim);
  font-style: italic;
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.4;
}

/* War control bar */
.district-war {
  padding: 6px 12px 4px 16px;
  border-bottom: 1px solid var(--border-light);
}

.war-bar {
  height: 3px;
  background: #e74c3c;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 3px;
}

.war-hero-fill {
  height: 100%;
  background: #3498db;
  border-radius: 2px;
  transition: width 0.5s ease;
}

.war-labels {
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
}

.war-hero-label  { color: #3498db; }
.war-villain-label { color: #e74c3c; }

.district-controlled-by {
  font-size: 9px;
  font-weight: 700;
  color: var(--text-dim);
  margin-top: 2px;
  text-align: center;
}

/* Location links */
.district-links {
  padding: 6px 0;
  flex: 1;
}

.district-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  position: relative;
}

.district-link:hover {
  background: rgba(255,255,255,0.04);
  color: var(--text-primary);
}

.dl-icon {
  font-size: 14px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.dl-label { flex: 1; }

/* Badges */
.dl-badge {
  font-size: 9px;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 99px;
  background: var(--red);
  color: #fff;
  flex-shrink: 0;
}

.dl-badge-green  { background: var(--green); color: #000; }
.dl-badge-yellow { background: var(--yellow); color: #000; }
.dl-badge-red    { background: var(--red); }

/* ============================================
   COMING SOON STRIP
   ============================================ */

.city-coming-soon {
  padding: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.city-coming-soon-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
}

.coming-soon-chip {
  padding: 3px 10px;
  border: 1px solid var(--border-mid);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  opacity: 0.5;
}

/* ============================================
   CITY MAP — MOBILE
   ============================================ */

@media (max-width: 768px) {
  .city-map {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 3px;
  }

  .district-slums,
  .district-downtown,
  .district-industrial,
  .district-midcity,
  .district-heights {
    grid-column: 1;
    grid-row: auto;
  }

  .district-panel {
    min-height: unset;
  }
}

/* ===== HALL OF FAME ===== */

.lb-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 1.5rem;
}

.lb-tab-group-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom: 6px;
  padding-left: 2px;
}

.lb-tab-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lb-tab {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
  text-decoration: none;
  border: 1px solid var(--border-mid);
  background: var(--bg-panel);
  transition: var(--transition);
  white-space: nowrap;
}

.lb-tab:hover {
  color: var(--text-primary);
  border-color: var(--red);
  background: var(--bg-card);
  text-decoration: none;
}

.lb-tab.active {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 10px var(--red-glow);
}

/* My rank card */
.lb-my-rank {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 12px 16px;
  background: rgba(232,168,0,0.08);
  border: 1px solid rgba(232,168,0,0.25);
  border-left: 3px solid var(--yellow);
  margin-bottom: 1rem;
}

.lb-my-rank-label {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--text-dim);
}

.lb-my-rank-pos {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--yellow-bright);
  line-height: 1;
}

.lb-my-rank-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

/* Highlighted row for current user */
.lb-my-row td {
  background: rgba(232,168,0,0.05) !important;
  border-bottom-color: rgba(232,168,0,0.15) !important;
}

@media (max-width: 768px) {
  .lb-tab { padding: 5px 10px; font-size: 11px; }
  .lb-my-rank { flex-wrap: wrap; gap: 8px; }
}

.lb-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  vertical-align: middle;
  margin-left: 6px;
}
.lb-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-green);
  flex-shrink: 0;
}

.lb-align-filter {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border-light);
}
.lb-align-btn {
  padding: 5px 14px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
  cursor: pointer;
  transition: var(--transition);
}
.lb-align-btn:hover { color: var(--text-primary); border-color: var(--border-light); }
.lb-align-btn.active { background: var(--red); color: #fff; border-color: var(--red); }

@media (max-width: 480px) {
  .lb-align-filter { flex-wrap: wrap; }
  .lb-align-btn { flex: 1; text-align: center; }
}

/* Hitlist note inline edit */
.hitlist-note input.form-input {
  height: auto;
  min-height: unset;
}

/* Item images (arsenal, inventory, lair equip preview, alliance armory) —
   strips a flat white/light background baked into the item art so it
   doesn't show as a box around the icon. */
.item-img {
  background: transparent;
}

/* ===== CAPTCHA ===== */
.captcha-grid button:hover {
  border-color: var(--red) !important;
  background: var(--bg-void) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(204,0,0,0.2);
}

.captcha-grid button:active {
  transform: translateY(0);
}

/* ===== FORUM REACTIONS ===== */
.forum-reactions {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: flex-end;
  margin-bottom: 10px;
}

.react-btn {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  padding: 4px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: var(--transition);
  color: var(--text-secondary);
}

.react-btn:hover {
  border-color: var(--text-secondary);
  background: var(--bg-void);
}

.react-btn.active-up {
  border-color: var(--green);
  background: rgba(0,170,68,0.1);
}

.react-btn.active-down {
  border-color: var(--red);
  background: rgba(204,0,0,0.1);
}

.react-score {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 1px;
  min-width: 32px;
  text-align: center;
  cursor: default;
}
/* ===== SIDEBAR CUSTOMIZATION ===== */
.sb-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  margin-bottom: 6px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  cursor: grab;
  user-select: none;
  transition: var(--transition);
}

.sb-item:hover { border-color: var(--red-bright); }

.sb-item.dragging {
  opacity: 0.4;
  border-color: var(--red);
}

.sb-item.sb-locked {
  cursor: default;
  background: rgba(204,0,0,0.05);
  border-color: rgba(204,0,0,0.25);
}

.sb-item.sb-available { cursor: default; }

.sb-handle {
  color: var(--text-dim);
  font-size: 14px;
  flex-shrink: 0;
}

.sb-icon { font-size: 15px; flex-shrink: 0; }

.sb-label {
  flex: 1;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 1.5px;
  color: var(--text-secondary);
}

.sb-remove, .sb-add {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: var(--transition);
  flex-shrink: 0;
}

.sb-remove:hover { border-color: var(--red); color: var(--red); }
.sb-add:hover { border-color: var(--green); color: var(--green-bright); }

/* Stack columns on narrow screens */
@media (max-width: 800px) {
  .settings-sidebar-grid { grid-template-columns: 1fr !important; }
}

/* ===== LAIR CHARACTER SHEET (compact stats) ===== */
.charsheet-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 700px) {
  .charsheet-grid { grid-template-columns: 1fr; }
}
.charsheet-col:first-child { border-right: 1px solid var(--border-light); }
@media (max-width: 700px) {
  .charsheet-col:first-child { border-right: none; border-bottom: 1px solid var(--border-light); }
}
.charsheet-section-title {
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 1px;
  color: var(--text-secondary);
  padding: 14px 12px 6px;
  margin-top: 8px;
  border-top: 1px solid var(--border-mid);
  text-transform: uppercase;
}
.charsheet-col > .charsheet-section-title:first-child {
  margin-top: 0;
  border-top: none;
}
/* Deliberately NOT flex/grid — flex-item boundaries force a line break
   when the browser copies selected text, which split "Label" and "Value"
   onto separate lines on copy-paste even though they render side by side.
   Plain inline text in one block keeps label+value on one visual line
   AND one line when copied. */
.charsheet-kv {
  padding: 2px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
  font-weight: 600;
}
.charsheet-kv .cs-label {
  color: var(--text-secondary);
  font-weight: 800;
}
.charsheet-kv .cs-val {
  color: var(--text-primary);
  font-weight: 700;
}
/* ============================================
   EXPLORE — live 7x7 grid + Socket.io war layer
   ============================================ */

.explore-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 1rem;
  align-items: start;
}

@media (max-width: 768px) {
  .explore-layout { grid-template-columns: 1fr; }
  .explore-map-col { display: none; }
  #mapToggle { display: inline-block !important; }
}

.explore-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--bg-void);
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--border-mid);
  width: fit-content;
  margin: 0 auto;
}

.explore-grid .grid-row { display: flex; gap: 2px; }

.explore-grid .grid-cell {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  user-select: none;
  background: #2a2a2a;
}

@media (max-width: 480px) {
  .explore-grid .grid-cell { width: 40px; height: 40px; }
}

.explore-grid .grid-cell.district-slums      { background: #4a3728; }
.explore-grid .grid-cell.district-downtown   { background: #1a2a4a; }
.explore-grid .grid-cell.district-industrial { background: #2a2a2a; }
.explore-grid .grid-cell.district-heights    { background: #2a3a2a; }
.explore-grid .grid-cell.district-mid-city   { background: #3a2a4a; }

.explore-grid .grid-cell.faction-hero    { background: #1a3a6a; }
.explore-grid .grid-cell.faction-villain { background: #6a1a1a; }

.explore-grid .grid-cell.is-center {
  background: #1a1a2e;
  border: 2px solid var(--accent-yellow, var(--yellow-bright));
  animation: currentPulse 1.5s ease-in-out infinite;
}

.explore-grid .grid-cell.out-of-bounds {
  background: #0a0a0f !important;
  opacity: 0.3;
}

.explore-grid .grid-cell.clickable {
  cursor: pointer;
  box-shadow: inset 0 0 0 2px var(--accent-yellow, var(--yellow-bright));
  animation: clickableTilePulse 1.8s ease-in-out infinite;
}
.explore-grid .grid-cell.clickable:hover {
  box-shadow: inset 0 0 0 3px var(--accent-yellow, var(--yellow-bright));
  transform: scale(1.08);
  z-index: 2;
  animation: none;
}
.explore-grid .grid-cell.clickable.disabled {
  opacity: 0.5;
  pointer-events: none;
  animation: none;
}

@keyframes clickableTilePulse {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(232, 168, 0, 0.55); }
  50%      { box-shadow: inset 0 0 0 2px rgba(232, 168, 0, 1); }
}

.explore-grid .tile-flag {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 12px;
}

/* Subtle landmark indicator — a small dot, not a full emoji (hover title
   attribute on the element itself still carries the landmark's name). */
.explore-grid .tile-landmark {
  position: absolute;
  bottom: 3px;
  left: 3px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow-bright, gold);
  box-shadow: 0 0 3px rgba(255, 215, 0, 0.8);
  pointer-events: auto;
}

.legend-landmark-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--yellow-bright, gold);
  box-shadow: 0 0 3px rgba(255, 215, 0, 0.8);
  vertical-align: middle;
}

.explore-grid .player-dot {
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.5);
}
.explore-grid .dot-hero    { background: #3498db; }
.explore-grid .dot-villain { background: #e74c3c; }

@keyframes explorePulseDot {
  0%   { box-shadow: 0 0 0 0 rgba(241,196,15,0.7); }
  70%  { box-shadow: 0 0 0 6px rgba(241,196,15,0); }
  100% { box-shadow: 0 0 0 0 rgba(241,196,15,0); }
}
.explore-grid .dot-flag-carrier { animation: explorePulseDot 1s infinite; }

@keyframes exploreTileFlash {
  0%   { opacity: 1; }
  50%  { opacity: 0.3; }
  100% { opacity: 1; }
}
.explore-grid .grid-cell.tile-flash { animation: exploreTileFlash 0.5s ease; }

.explore-legend {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

/* Live watchtower/overview indicator badge */
.explore-live-badge {
  font-size: 9px;
  color: var(--green-bright, var(--accent-green));
  font-weight: 700;
  letter-spacing: 1px;
}
.explore-live-badge.offline {
  color: var(--text-dim);
}

/* Toast notifications (proximity alerts, district flips, flag captures) */
.explore-toast {
  position: fixed;
  bottom: 70px;
  right: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong, var(--border-mid));
  border-left: 3px solid var(--text-secondary);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  max-width: 300px;
  z-index: 9999;
  animation: exploreToastSlide 0.2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.explore-toast.toast-warning { border-left-color: var(--yellow-bright, var(--accent-yellow)); }
.explore-toast.toast-danger,
.explore-toast.toast-error   { border-left-color: var(--red, var(--accent-red)); }
.explore-toast.toast-success { border-left-color: var(--green-bright, var(--accent-green)); }

@keyframes exploreToastSlide {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Move-result panel, anchored directly below the minimap canvas (not a
   floating toast) — one result at a time, replaced on the next move,
   fades out after 4s via the .visible toggle. */
.explore-minimap-result {
  margin-top: 8px;
  padding: 0 10px;
  border-radius: 6px;
  border: 1px solid var(--border-mid);
  background: var(--bg-card);
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.5;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 0.3s ease, max-height 0.3s ease, padding 0.3s ease;
}
.explore-minimap-result.visible {
  opacity: 1;
  max-height: 160px;
  padding: 8px 10px;
}
.explore-minimap-result .mm-result-emoji { font-size: 18px; display: block; }
.explore-minimap-result .mm-result-reward {
  margin-top: 4px;
  font-style: normal;
  color: var(--green-bright);
  font-family: var(--font-display);
  font-size: 14px;
}
.explore-minimap-result.compass-shake { animation: exCompassShake 0.35s ease-out; }

/* ============================================
   LIVE UPDATES — QoL patch (header vitals/currencies, badges, world
   feed, level-up) driven by the /notifications Socket.io namespace.
   ============================================ */

/* Low-resource pulse — applied to the whole .vital-bar (health <=20%,
   energy <=10%) by the live-update JS in views/layout.ejs. */
.bar-pulse {
  animation: barPulse 1.5s ease infinite;
}
@keyframes barPulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* Level-up modal */
@keyframes levelUpAnim {
  from { transform: translate(-50%,-50%) scale(0.8); opacity: 0; }
  to   { transform: translate(-50%,-50%) scale(1);   opacity: 1; }
}

/* Notification toast (addEvent live push) */
.live-notification {
  position: fixed;
  bottom: 60px;
  right: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-strong, var(--border-mid));
  border-left: 3px solid var(--red);
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-primary);
  max-width: 320px;
  z-index: 9999;
  animation: slideIn 0.2s ease;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
  transition: opacity 0.3s ease;
}
@keyframes slideIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* Badge bounce — mail/events badges on a live increment */
.badge-bounce {
  animation: badgeBounce 0.4s ease;
}
@keyframes badgeBounce {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* World feed — highlight the newest item when a worldEvent socket push
   triggers an instant refresh (not on the routine 30s poll). */
.rs-feed-item-new {
  background: rgba(255,255,255,0.05);
  animation: rsFeedItemSlideIn 0.3s ease;
}
@keyframes rsFeedItemSlideIn {
  from { transform: translateY(-8px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* ===== pets =====
   Every current usage overrides width/height inline per-image, so this is
   purely a defensive fallback for any future <img class="pet"> that
   forgets to — the old default (10px wide, 100px tall) was a landmine,
   not an intentional size for anything. */
.pet {
  width: auto;
  height: auto;
  max-width: 100%;
  vertical-align: text-bottom;
  image-rendering: auto;
}

/* ============================================
   SLOT MACHINE CABINET
   ============================================ */

.slots-page {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 1rem 0;
  min-height: 80vh;
}

.slot-cabinet {
  width: 100%;
  max-width: 680px;
  background: linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%);
  border: 2px solid #333;
  border-radius: 20px;
  box-shadow:
    0 0 0 1px #444,
    0 0 40px rgba(0,0,0,0.8),
    inset 0 1px 0 rgba(255,255,255,0.05);
  overflow: hidden;
  position: relative;
}

.cabinet-top {
  padding: 16px 20px 12px;
  text-align: center;
  background: linear-gradient(180deg, #111 0%, #1a1a1a 100%);
  border-bottom: 1px solid #333;
  position: relative;
}

.cabinet-brand { position: relative; z-index: 1; }

.volume-control {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0,0,0,0.4);
  border: 1px solid #333;
  border-radius: 20px;
  padding: 4px 10px;
}
.volume-icon { font-size: 13px; line-height: 1; }
.volume-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 60px;
  height: 4px;
  border-radius: 2px;
  background: #333;
  outline: none;
  cursor: pointer;
}
.volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
}
.volume-slider::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--yellow);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(0,0,0,0.6);
}

@media (max-width: 480px) {
  .volume-control { top: 8px; right: 8px; padding: 3px 8px; }
  .volume-slider { width: 44px; }
}

.cabinet-neon {
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%, var(--red) 20%, var(--yellow) 50%, var(--red) 80%, transparent 100%);
  animation: neonPulse 2s ease infinite;
}
@keyframes neonPulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}

.jackpot-display {
  padding: 10px 20px;
  text-align: center;
  background: #0a0a0a;
  border-bottom: 1px solid #222;
}

.jackpot-amount {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: 2px;
  color: var(--yellow);
  text-shadow: 0 0 20px rgba(241,196,15,0.5);
  animation: jackpotGlow 3s ease infinite;
}
@keyframes jackpotGlow {
  0%, 100% { text-shadow: 0 0 20px rgba(241,196,15,0.5); }
  50%       { text-shadow: 0 0 40px rgba(241,196,15,0.9); }
}

.reels-screen {
  background: #050505;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 2px solid #222;
  border-bottom: 2px solid #222;
  position: relative;
}

.payline-indicators { display: flex; flex-direction: column; gap: 4px; width: 16px; }
.payline-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #333;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.payline-dot.active { background: var(--yellow); box-shadow: 0 0 6px var(--yellow); }

.reels-container { flex: 1; display: flex; gap: 4px; }

.reel {
  flex: 1;
  background: #0d0d0d;
  border: 1px solid #222;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.reel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent);
  pointer-events: none;
  z-index: 2;
}

.reel-strip { display: flex; flex-direction: column; transition: transform 0.1s ease; }
.reel-strip.spinning { animation: reelSpin 0.12s linear infinite; filter: blur(1.5px); }
.reel-strip.stopping { animation: reelBounce 0.2s ease forwards; filter: none; }

@keyframes reelSpin {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0); }
}
@keyframes reelBounce {
  0%   { transform: translateY(-6px); }
  60%  { transform: translateY(3px); }
  100% { transform: translateY(0); }
}

.reel-cell {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #111;
  position: relative;
  transition: background 0.2s ease;
  background: #0d0d0d; /* explicit dark — no more implicit cascade from elsewhere */
}
@media (max-width: 480px) { .reel-cell { height: 60px; } }

.reel-symbol-wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reel-symbol-img {
  width: 52px;
  height: 52px;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

@media (max-width: 480px) {
  .reel-symbol-img { width: 38px; height: 38px; }
}

.reel-cell.winning-cell {
  background: rgba(241,196,15,0.15);
  border: 1px solid rgba(241,196,15,0.4);
  animation: winCellPulse 0.5s ease 3;
}
@keyframes winCellPulse {
  0%, 100% { background: rgba(241,196,15,0.15); }
  50%       { background: rgba(241,196,15,0.35); }
}

.win-display {
  padding: 10px 20px;
  text-align: center;
  min-height: 44px;
  background: #080808;
  border-bottom: 1px solid #1a1a1a;
  font-family: var(--font-display);
  letter-spacing: 2px;
}
.win-amount-text { font-size: 22px; font-weight: 900; color: var(--yellow); margin: 0 8px; }

.free-spins-display {
  padding: 8px 20px;
  text-align: center;
  background: rgba(241,196,15,0.1);
  border-bottom: 1px solid rgba(241,196,15,0.2);
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
}

.cabinet-controls {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(180deg, #111 0%, #0d0d0d 100%);
  align-items: center;
}

.control-group { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.control-group.center { align-items: center; }
.control-label {
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--text-dim);
  text-transform: uppercase;
}

.bet-buttons { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.bet-btn {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 700;
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: var(--font-display);
}
.bet-btn:hover { border-color: var(--yellow); color: var(--yellow); }
.bet-btn.active {
  background: rgba(241,196,15,0.15);
  border-color: var(--yellow);
  color: var(--yellow);
}

.spin-button {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #e74c3c, #c0392b);
  border: 3px solid #e74c3c;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 2px;
  font-weight: 700;
  cursor: pointer;
  box-shadow:
    0 6px 0 #922b21,
    0 8px 15px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
  position: relative;
}
.spin-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow:
    0 8px 0 #922b21,
    0 10px 20px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.2);
}
.spin-button:active:not(:disabled) {
  transform: translateY(4px);
  box-shadow:
    0 2px 0 #922b21,
    0 4px 8px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.1);
}
.spin-button:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.bonus-buy-btn {
  padding: 10px 14px;
  background: rgba(241,196,15,0.1);
  border: 1px solid rgba(241,196,15,0.3);
  border-radius: 6px;
  color: var(--yellow);
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  width: 100%;
}
.bonus-buy-btn:hover:not(:disabled) { background: rgba(241,196,15,0.2); border-color: var(--yellow); }
.bonus-buy-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.cabinet-bottom-strip { padding: 0; }

/* ============================================
   SLOTS — PAYTABLE
   ============================================ */

.paytable-grid {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.paytable-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  transition: background 0.15s ease;
}
.paytable-row:hover { background: rgba(255,255,255,0.03); }

.paytable-symbol { font-size: 22px; text-align: center; }

.paytable-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
}

.paytable-mult {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  font-family: var(--font-display);
}

.paytable-amount {
  font-size: 13px;
  font-weight: 900;
  color: var(--yellow);
  font-family: var(--font-display);
  min-width: 80px;
  text-align: right;
}

@media (max-width: 480px) {
  .paytable-row { grid-template-columns: 26px 1fr auto; }
  .paytable-mult { display: none; }
}

/* ============================================
   SLOTS — WIN OVERLAYS
   ============================================ */

.big-win-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
.big-win-content { text-align: center; animation: bigWinPop 0.4s ease; }
.big-win-title {
  font-family: var(--font-display);
  font-size: 42px;
  letter-spacing: 4px;
  color: var(--yellow);
  text-shadow: 0 0 40px rgba(241,196,15,0.8);
  margin-bottom: 10px;
}
.big-win-amount { font-size: 56px; font-weight: 900; color: #fff; text-shadow: 0 0 20px rgba(255,255,255,0.5); }

@keyframes bigWinPop {
  0%   { transform: scale(0.5); opacity: 0; }
  70%  { transform: scale(1.1); }
  100% { transform: scale(1);   opacity: 1; }
}

.jackpot-overlay {
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(241,196,15,0.2) 0%, rgba(0,0,0,0.95) 70%);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}
.jackpot-content { text-align: center; position: relative; animation: bigWinPop 0.5s ease; }
.jackpot-win-title {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: 6px;
  color: var(--yellow);
  text-shadow: 0 0 40px rgba(241,196,15,1), 0 0 80px rgba(241,196,15,0.5);
  animation: jackpotTextPulse 0.5s ease infinite alternate;
}
.jackpot-win-amount { font-size: 64px; font-weight: 900; color: #fff; margin: 10px 0; }

@keyframes jackpotTextPulse {
  from { text-shadow: 0 0 40px rgba(241,196,15,1); }
  to   { text-shadow: 0 0 80px rgba(241,196,15,1), 0 0 120px rgba(241,196,15,0.5); }
}
@keyframes confettiFall {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(300px) rotate(720deg); opacity: 0; }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes slideDown {
  from { transform: translateX(-50%) translateY(-20px); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0); opacity: 1; }
}

@media (max-width: 480px) {
  .cabinet-controls { grid-template-columns: 1fr; gap: 10px; }
  .control-group { width: 100%; }
  .spin-button { width: 70px; height: 70px; font-size: 12px; }
  .jackpot-win-title { font-size: 36px; }
  .jackpot-win-amount { font-size: 44px; }
  .big-win-title { font-size: 28px; }
  .big-win-amount { font-size: 40px; }
}

/* ============================================
   HOSPITAL
   ============================================ */

.hospital-heal-btn { min-height: 48px; }

@media (max-width: 480px) {
  .hospital-heal-form { width: 100%; }
  .hospital-heal-btn { width: 100%; }
}

/* ============================================
   THE MIRAGE
   ============================================ */

@media (max-width: 640px) {
  .mirage-exchange-grid { grid-template-columns: 1fr; }
}

/* ============================================
   STREETS
   ============================================ */

@media (max-width: 480px) {
  .st-act-form { width: 100%; }
  .st-act-btn { width: 100%; }
}

/* ============================================
   INVENTORY
   ============================================ */
.inv-equipped-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-top: 2px solid var(--border-mid);
}
.inv-slot {
  padding: 12px 14px;
  border-right: 1px solid var(--border-mid);
  text-align: center;
}
.inv-slot:last-child { border-right: none; }
.inv-slot-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.inv-slot-img {
  width: 110px; height: 110px;
  background: var(--bg-input);
  border: 2px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 6px;
  font-size: 28px;
}
.inv-slot-img img { width: 100px; height: 100px; object-fit: contain; }
.inv-slot-name { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.5px; margin-bottom: 3px; color: var(--text-primary); }
.inv-slot-stat { font-size: 11px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
.inv-slot-empty { color: var(--text-dim); font-size: 12px; font-weight: 600; margin: 10px 0; }

.inv-section { margin-top: 1.25rem; }
.inv-section-title { font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; background: var(--bg-panel); color: var(--text-primary); padding: 6px 14px; margin-bottom: 0; border: 1px solid var(--border-mid); border-bottom: none; }

.inv-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 8px 14px;
  border-bottom: 1px solid var(--border-mid);
  background: var(--bg-card);
  border-left: 2px solid var(--border-heavy);
  border-right: 2px solid var(--border-heavy);
}
.inv-row:last-child { border-bottom: 2px solid var(--border-heavy); }
.inv-row-img {
  width: 38px; height: 38px;
  background: var(--bg-input);
  border: 1px solid var(--border-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.inv-row-img img { width: 32px; height: 32px; object-fit: contain; }
.inv-row-info { flex: 1; min-width: 0; }
.inv-row-name { font-family: var(--font-display); font-size: 12px; letter-spacing: 0.5px; color: var(--text-primary); }
.inv-row-stat { font-size: 11px; font-weight: 700; }
.inv-row-stat.atk { color: var(--accent-red); }
.inv-row-stat.def { color: var(--accent-blue); }
.inv-row-stat.relic { color: var(--accent-yellow); }
.inv-row-sell { font-size: 11px; color: var(--text-secondary); font-weight: 700; white-space: nowrap; }
.branded-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--yellow-bright);
  background: rgba(232,168,0,0.12);
  border: 1px solid var(--yellow);
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
  white-space: nowrap;
}
.inv-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.inv-row-actions form { margin: 0; }
.inv-row-actions button { padding: 4px 10px; font-size: 11px; white-space: nowrap; min-height: 36px; }
.inv-empty { padding: 1rem 14px; font-size: 13px; color: var(--text-dim); font-weight: 600; background: var(--bg-card); border: 2px solid var(--border-heavy); border-top: none; }

@media (max-width: 480px) {
  .inv-equipped-grid { grid-template-columns: 1fr; border-top: none; }
  .inv-slot { border-right: none; border-bottom: 1px solid var(--border-mid); }
  .inv-slot:last-child { border-bottom: none; }

  .inv-row { flex-wrap: wrap; }
  .inv-row-sell { white-space: normal; flex-basis: 100%; order: 3; }
  .inv-row-actions { flex-basis: 100%; order: 4; justify-content: flex-end; }
}

/* ============================================
   JUNKYARD
   ============================================ */
.junkyard-rummage-btn { min-height: 36px; }

@media (max-width: 480px) {
  .junkyard-sell-input { width: 100%; }
  .junkyard-sell-actions { flex-direction: column; align-items: stretch; }
  .junkyard-sell-btn { width: 100%; }
  .junkyard-rummage-form { width: 100%; }
  .junkyard-rummage-btn { width: 100%; }
}

/* ============================================
   PROFILE
   ============================================ */
@media (max-width: 480px) {
  .profile-comment-form textarea { width: 100%; }
  .profile-comment-form button[type="submit"] { width: 100%; }
}

/* ============================================
   DAILY SPIN
   ============================================ */
.spin-result-breakdown {
  margin-top: 0.6rem;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.ds-odds-wrap { margin-top: 1.25rem; }
.ds-odds-toggle {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-secondary);
  font-weight: 800;
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 8px;
  cursor: pointer;
}
.ds-odds-toggle:hover { border-color: var(--border-light); color: var(--text-primary); }
.ds-odds-panel {
  margin: 10px auto 0;
  max-width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: left;
}
.ds-odds-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 4px 0;
  border-bottom: 1px solid var(--border-light);
}
.ds-odds-row:last-child { border-bottom: none; }

@media (max-width: 480px) {
  #spinBtn { width: 100%; }
  .ds-odds-panel { max-width: 100%; }
  .ds-countdown { text-align: center; }
}

/* ============================================
   MISSIONS
   ============================================ */
@media (max-width: 480px) {
  .missions-balance-row { flex-direction: column; align-items: stretch; text-align: center; }
  .missions-shop-btn { width: 100%; text-align: center; }
  .mission-desc { word-break: break-word; overflow-wrap: break-word; }
  .mission-tag { white-space: normal; word-break: break-word; }
  .mission-progress-bar { width: 100%; }
}

/* ============================================
   BODEGA
   ============================================ */
@media (max-width: 480px) {
  .food-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 360px) {
  .food-grid { grid-template-columns: 1fr; }
}

/* ============================================
   LUNCHBOX / FRIDGE
   Both pages reuse the same .food-grid/.food-card/.food-card-actions
   markup as Bodega (the grid breakpoints above already apply here) —
   this section only adds what's unique to these two pages: stacking
   the 2-3 action buttons per card and enforcing a tappable min-height.
   ============================================ */
@media (max-width: 480px) {
  .food-card-actions { flex-direction: column; }
}
.food-card-actions button { min-height: 36px; }

/* ============================================
   FRIENDS
   ============================================ */
.friends-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  object-fit: cover; flex-shrink: 0;
}
.friends-avatar-fallback {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 12px; color: #fff;
  flex-shrink: 0;
}
.friends-dot { font-size: 10px; }
.friends-dot.online { color: var(--accent-green); }
.friends-dot.offline { color: var(--text-dim); }
.friends-action-btn { min-height: 36px; }

@media (max-width: 600px) {
  .friends-col-since { display: none; }
}
@media (max-width: 480px) {
  .friends-col-align { display: none; }
  .friends-pending-actions { width: 100%; }
  .friends-pending-actions form { flex: 1; }
  .friends-pending-actions button { width: 100%; }
}
@media (max-width: 360px) {
  .friends-avatar, .friends-avatar-fallback { width: 20px; height: 20px; font-size: 10px; }
}

/* ============================================
   BLACK MARKET
   ============================================ */
@media (max-width: 600px) {
  .bm-col-listed { display: none; }
}
@media (max-width: 480px) {
  .bm-listing-form .form-input { width: 100% !important; }
  .bm-listing-form .form-group { width: 100%; }
}

/* ============================================
   SETTINGS
   ============================================ */
.sb-move-btns {
  display: flex;
  gap: 2px;
  flex-shrink: 0;
}
.sb-move-up, .sb-move-down {
  background: transparent;
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 10px;
  line-height: 1;
  transition: var(--transition);
}
.sb-move-up:hover, .sb-move-down:hover { border-color: var(--border-light); color: var(--text-secondary); }

@media (max-width: 480px) {
  .settings-redeem-form > div { flex-direction: column; align-items: stretch; }
  .settings-redeem-btn { width: 100%; }
  .settings-avatar-btn { width: 100%; }
  .sb-move-up, .sb-move-down, .sb-remove, .sb-add { min-width: 32px; min-height: 32px; }
}

/* ============================================
   BOUNTY BOARD
   ============================================ */
@media (max-width: 600px) {
  .bounty-place-grid { grid-template-columns: 1fr; }
  .bounty-place-btn { width: 100%; }
}

/* ============================================
   ACHIEVEMENTS
   ============================================ */
.achievement-tile-maxed {
  border: 1px solid var(--yellow) !important;
  box-shadow: inset 0 0 8px rgba(241,196,15,0.3);
  opacity: 1 !important;
}

.achievements-cat-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.achievements-cat-fraction {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--text-dim);
}

.achievement-tile-name,
.achievement-tile-desc {
  word-break: break-word;
  overflow-wrap: break-word;
}

@media (max-width: 480px) {
  .achievement-tile-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .achievements-header-subtitle { word-break: break-word; }
}
@media (max-width: 360px) {
  .achievement-tile-grid { grid-template-columns: 1fr !important; }
}

/* ============================================
   MCC CHAMPIONSHIP
   ============================================ */
@media (max-width: 600px) {
  /* Title / Stats / Rules columns — force single column even though
     auto-fit would already partially collapse this on its own, so the
     three blocks never end up awkwardly 2-up on a mid-width phone. */
  .mcc-header-grid { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
  /* Rep/Level are secondary info already summarized elsewhere in the
     Fighter cell (wins, penalty) — drop them to keep Fighter/Bets/Wager
     readable on a phone instead of squeezing all 5 columns. */
  .mcc-col-rep, .mcc-col-level { display: none; }

  .mcc-bet-controls { flex-direction: column; align-items: stretch; }
  .mcc-bet-amount-group { max-width: none; }
  .mcc-bet-amount { max-width: none !important; width: 100%; }
  .mcc-place-bets-btn { width: 100%; }
}

/* ============================================
   BACKPACK
   ============================================ */
@media (max-width: 480px) {
  /* Icon + name/status stay on the first line; the action button drops
     to its own full-width line below instead of squeezing into a sliver
     next to the text. */
  .bp-row { flex-wrap: wrap; }
  .bp-row-actions { flex: 1 0 100%; margin-top: 8px; }
  .bp-action-btn { width: 100%; }

  .bp-prize-panel { padding: 12px; }
  .bp-prize-item { word-break: break-word; }
}

/* ============================================
   QUICK STOP
   ============================================ */
@media (max-width: 480px) {
  .qs-redeem-btn { width: 100%; }
}

/* ============================================
   EVENTS LOG — full datetime on desktop, short
   relative time ('5m ago') on narrow screens
   ============================================ */
.event-time-relative { display: none; }
@media (max-width: 480px) {
  .event-time-full { display: none; }
  .event-time-relative { display: inline; }
}

/* ============================================
   ROULETTE (multiplayer)
   ============================================ */

.rl-page {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 780px;
  margin: 0 auto;
}

.rl-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: var(--bg-card);
  border: 0.5px solid var(--border-mid);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
}
.rl-status-chips  { color: var(--yellow); }
.rl-status-center { color: var(--text-secondary); }
.rl-countdown {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--green);
  min-width: 28px;
  text-align: right;
  display: inline-block;
}

.rl-slider-wrap {
  position: relative;
  background: var(--bg-card);
  border: 0.5px solid var(--border-mid);
  border-radius: 8px;
  overflow: hidden;
  padding: 12px 0 8px;
}

.rl-slider-pointer {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: var(--yellow);
  z-index: 10;
  pointer-events: none;
  line-height: 1;
}

.rl-slider-viewport {
  overflow: hidden;
  width: 100%;
  position: relative;
}

.rl-slider-viewport::before,
.rl-slider-viewport::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 5;
  pointer-events: none;
}
.rl-slider-viewport::before {
  left: 0;
  background: linear-gradient(to right, var(--bg-card), transparent);
}
.rl-slider-viewport::after {
  right: 0;
  background: linear-gradient(to left, var(--bg-card), transparent);
}

.rl-slider-track {
  display: flex;
  gap: 4px;
  padding: 4px 0;
  will-change: transform;
}

.rl-slider-cell {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.1);
}

.rl-slider-winner {
  box-shadow: 0 0 16px rgba(241,196,15,0.8);
  border-color: var(--yellow) !important;
  animation: sliderWin 0.4s ease;
}

@keyframes sliderWin {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.rl-sc-red,   .rl-red   { background: #8B1a1a; color:#fff; }
.rl-sc-black, .rl-black { background: #111; color:#fff; }
.rl-sc-green, .rl-green { background: #0a5a0a; color:#fff; }

.rl-history-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow: hidden;
}
.rl-history-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  flex-shrink: 0;
}
.rl-history-strip {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  flex: 1;
  scrollbar-width: none;
}
.rl-history-strip::-webkit-scrollbar { display: none; }
.rl-hist-cell {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
}
.rl-hist-enter {
  animation: histPush 0.3s ease;
}
@keyframes histPush {
  from { transform: translateX(36px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

.rl-table-wrap { overflow-x: auto; }

.rl-cell {
  padding: 4px 2px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 2px;
  cursor: pointer;
  user-select: none;
  transition: filter 0.1s, outline 0.1s;
  min-height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-wrap: break-word;
  line-height: 1.15;
}
.rl-cell:hover { filter: brightness(1.35); }
.rl-cell.rl-selected {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
  filter: brightness(1.5);
}
.rl-cell.rl-has-bet::after {
  content: '\25CF';
  position: absolute;
  top: 2px; right: 3px;
  font-size: 7px;
  color: var(--yellow);
}
.rl-outside { background: #152515; color: var(--text-secondary); font-size: 10px; }

/* Classic real-table layout — 0 on the left spanning three rows, 1-36 in
   twelve columns of three, a "2-1" column-bet strip on the right, dozens
   and outside bets below spanning the same width as the numbers. This is
   inherently wider than a phone screen (same trade-off every real online
   roulette table makes) — .rl-table-wrap's overflow-x:auto lets it scroll
   horizontally on narrow viewports instead of squishing numbers unreadably. */
.rl-felt-classic {
  background: #0a2a0a;
  border: 2px solid #1a5a1a;
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 620px;
}

.rl-classic-top {
  display: flex;
  gap: 2px;
}

.rl-zero-classic {
  flex-shrink: 0;
  width: 30px;
  align-self: stretch;
  font-size: 15px;
  clip-path: polygon(0 0, 70% 0, 100% 50%, 70% 100%, 0 100%);
}

.rl-classic-numbers {
  flex: 1;
  display: flex;
  gap: 2px;
  min-width: 0;
}

.rl-num-grid-classic {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 2px;
  min-width: 0;
}

.rl-colbet-strip {
  flex-shrink: 0;
  width: 36px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rl-colbet-strip .rl-cell { flex: 1; min-height: 0; }

.rl-classic-row {
  display: flex;
  gap: 2px;
}

.rl-classic-spacer {
  flex-shrink: 0;
  width: 30px;
}

.rl-dozens-row,
.rl-outside-row {
  flex: 1;
  display: grid;
  gap: 2px;
}
.rl-dozens-row  { grid-template-columns: repeat(3,1fr); }
.rl-outside-row { grid-template-columns: repeat(6,1fr); }

.rl-color-bets {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
}

.rl-color-panel {
  background: var(--bg-card);
  border: 0.5px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px;
}
.rl-color-panel.rl-color-red    { border-top: 2px solid #8B1a1a; }
.rl-color-panel.rl-color-black  { border-top: 2px solid #444; }
.rl-color-panel.rl-color-other  { border-top: 2px solid var(--yellow); }

.rl-color-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.rl-color-list {
  min-height: 48px;
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 6px;
}

.rl-no-bets {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  padding: 4px 0;
}

.rl-color-bet-row {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 0;
  border-bottom: 1px solid var(--border-light);
}
.rl-bet-user   { color: var(--text-secondary); flex: 1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration: none; }
.rl-bet-user:hover { color: var(--yellow); text-decoration: underline; }
.rl-bet-detail { color: var(--text-dim); font-size: 10px; }
.rl-bet-amt    { color: var(--yellow); flex-shrink:0; }

.rl-color-total {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-dim);
  text-align: right;
}

.rl-my-bets {
  background: var(--bg-card);
  border: 0.5px solid var(--border-mid);
  border-radius: 8px;
  padding: 10px 14px;
}
.rl-section-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.rl-my-bet-list { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-my-bet-row {
  display: flex;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-void);
  border: 0.5px solid var(--border-mid);
  border-radius: 4px;
  padding: 4px 8px;
  color: var(--text-secondary);
}

.rl-controls {
  background: var(--bg-card);
  border: 0.5px solid var(--border-mid);
  border-radius: 8px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.rl-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.rl-chip {
  flex: 1;
  min-width: 48px;
  padding: 8px 4px;
  font-size: 12px;
  font-weight: 700;
  background: var(--bg-void);
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-display);
  transition: all 0.1s ease;
}
.rl-chip:hover  { border-color: var(--yellow); color: var(--yellow); }
.rl-chip.active {
  background: rgba(241,196,15,0.1);
  border-color: var(--yellow);
  color: var(--yellow);
}

.rl-bet-preview {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 6px 10px;
  background: rgba(241,196,15,0.05);
  border: 1px solid rgba(241,196,15,0.2);
  border-radius: 4px;
}

.rl-place-btn {
  padding: 12px;
  background: linear-gradient(180deg, #2d7a2d, #1a5a1a);
  border: 1px solid #3a9a3a;
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 3px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s ease;
  box-shadow: 0 3px 0 #0d3a0d;
}
.rl-place-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  box-shadow: none;
}
.rl-place-btn:not(:disabled):hover {
  background: linear-gradient(180deg, #359a35, #1a6a1a);
  transform: translateY(-1px);
}
.rl-place-btn:not(:disabled):active {
  transform: translateY(2px);
  box-shadow: none;
}

.rl-lobby-link {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
  text-decoration: none;
}
.rl-lobby-link:hover { color: var(--text-secondary); }

.rl-toast {
  position: fixed;
  top: 70px;
  right: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-top: 3px solid var(--yellow);
  border-radius: 8px;
  padding: 14px 18px;
  min-width: 220px;
  max-width: 300px;
  z-index: 9999;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.rl-toast-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  color: var(--yellow);
  margin-bottom: 8px;
}
.rl-toast-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 3px 0;
  border-bottom: 1px solid var(--border-light);
}
.rl-toast-show { animation: toastIn 0.3s ease; }
@keyframes toastIn {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

@media (max-width: 768px) {
  .rl-color-bets {
    grid-template-columns: repeat(3,1fr);
    gap: 6px;
  }
  .rl-color-bet-row { flex-wrap: wrap; }
  .rl-slider-cell   { width: 44px; height: 44px; font-size: 13px; }
  .rl-hist-cell     { width: 28px; height: 28px; font-size: 10px; }
}

@media (max-width: 480px) {
  .rl-color-bets    { grid-template-columns: 1fr; }
  .rl-chip          { min-width: 40px; font-size: 11px; }
  .rl-slider-cell   { width: 38px; height: 38px; font-size: 12px; }
  .rl-toast         { left: 16px; right: 16px; min-width: unset; }
}