/* ═══════════════════════════════════════════════════════════════════════════
   The Life of Kevin — main.css
   Global styles, index page, auth card, shared components
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Reset & base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg-deep:      #07070d;
  --bg-base:      #0d0d18;
  --bg-panel:     #12121e;
  --bg-elevated:  #1a1a2e;
  --bg-hover:     #20203a;

  --accent:       #e8a045;
  --accent-dim:   #c07a28;
  --accent-glow:  rgba(232, 160, 69, 0.18);
  --accent-text:  #f5c070;

  --text-primary: #e8e8f0;
  --text-second:  #9898b8;
  --text-muted:   #5a5a7a;
  --text-dim:     #3a3a55;

  --border:       rgba(255,255,255,0.07);
  --border-hover: rgba(232,160,69,0.4);

  --danger:       #e05555;
  --success:      #55c080;
  --info:         #5590e0;

  --radius-sm:  6px;
  --radius-md:  12px;
  --radius-lg:  20px;

  --font-ui:    'Rajdhani', system-ui, sans-serif;
  --font-story: 'Crimson Pro', Georgia, serif;
  --font-mono:  'Courier New', monospace;
  --font-title: 'Cinzel', Georgia, serif;

  --shadow-sm:  0 2px 8px rgba(0,0,0,0.5);
  --shadow-md:  0 8px 32px rgba(0,0,0,0.7);
  --shadow-lg:  0 20px 60px rgba(0,0,0,0.85);
  --shadow-accent: 0 0 30px rgba(232,160,69,0.15);
}

html, body {
  height: 100%;
}

/* Game page needs overflow:hidden to prevent the layout from scrolling */
body.game-page {
  overflow: hidden;
}

body {
  font-family: var(--font-ui);
  background: var(--bg-deep);
  color: var(--text-primary);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

body.index-page,
body.chars-page {
  overflow: auto;
}

/* ── Utility ─────────────────────────────────────────────────────────────── */
.hidden { display: none !important; }

.btn-primary {
  display: inline-block;
  padding: 12px 28px;
  background: var(--accent);
  color: #0a0808;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  text-decoration: none;
}
.btn-primary:hover  { background: #f5b454; transform: translateY(-1px); box-shadow: var(--shadow-accent); }
.btn-primary:active { transform: translateY(0); }

.btn-link {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.88rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}
.btn-link:hover { color: var(--accent); }

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-second);
  text-decoration: none;
  font-size: 0.9rem;
  font-family: var(--font-ui);
  transition: color .2s;
}
.btn-back:hover { color: var(--accent); }

.admin-badge {
  background: var(--accent);
  color: #0a0808;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 20px;
}

.spinner {
  width: 40px; height: 40px;
  border: 3px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: 0 auto 16px;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════════════════════════════════════
   INDEX PAGE
   ═══════════════════════════════════════════════════════════════════════════ */

.index-page {
  background:
    radial-gradient(ellipse at 50% 100%,
      rgba(26,14,0,0.94) 0%,
      rgba(13,10,24,0.86) 40%,
      rgba(7,7,13,0.68) 100%),
    var(--index-wallpaper, url('/assets/loadingscreens/bed7ab9f-6881-4114-b39f-c1ab69cf190f.png')) center/cover no-repeat fixed;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Wallpaper set dynamically via --index-wallpaper CSS variable in auth.js */

/* ── Scene photo wall (GTST-style) ───────────────────────────────────────── */
#sceneWall {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* Dark radial vignette keeps the centre readable */
#sceneWall::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 52% 65% at 50% 48%,
    rgba(7,7,13,.88) 0%,
    rgba(7,7,13,.55) 55%,
    rgba(7,7,13,.08) 100%);
  z-index: 2;
  pointer-events: none;
}

.scene-frame {
  position: absolute;
  overflow: hidden;
  border: 2px solid rgba(232,160,69,.45);
  box-shadow:
    0 12px 48px rgba(0,0,0,.8),
    0 0 0 1px rgba(232,160,69,.12),
    inset 0 0 20px rgba(0,0,0,.4);
  opacity: 0;
  transition: opacity 2.4s ease-in-out;
  z-index: 1;
  max-height: 50vh;   /* cap tall portrait images */
  /* aspect-ratio set dynamically in JS from image natural dimensions */
}
/* Corner film-notch decorations */
.scene-frame::before,
.scene-frame::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(232,160,69,.7);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
}
.scene-frame::before { top: 5px; left: 5px; border-width: 2px 0 0 2px; }
.scene-frame::after  { bottom: 5px; right: 5px; border-width: 0 2px 2px 0; }

.scene-frame-inner {
  position: relative;
  width: 100%; height: 100%;
}
/* Images and videos inside frames — fill frame, no letterbox */
.scene-frame-inner img,
.scene-frame-inner video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.72) saturate(.8);
  transition: opacity 2.2s ease-in-out;
}
.scene-frame-inner img.back,
.scene-frame-inner video.back  { opacity: 1; z-index: 0; }
.scene-frame-inner img.front { opacity: 0; z-index: 1; }
.scene-frame-inner img.front.visible { opacity: 1; }
/* Transparent overlay on top of the frame — blocks hover events reaching the
   video element so the browser never shows its native control bubble. */
.scene-frame-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: transparent;
  pointer-events: all;
}

/* Hide on very narrow screens (portrait phone) */
@media (max-width: 700px) { #sceneWall { display: none; } }

/* Particles */
.bg-particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.particle {
  position: absolute;
  width: 2px; height: 2px;
  background: var(--accent);
  border-radius: 50%;
  opacity: 0;
  animation: floatUp var(--dur) ease-in infinite;
  animation-delay: var(--delay);
}
@keyframes floatUp {
  0%   { opacity: 0; transform: translateY(0) scale(1); }
  10%  { opacity: .6; }
  90%  { opacity: .2; }
  100% { opacity: 0; transform: translateY(-80vh) scale(.3); }
}

/* Amsterdam skyline silhouette */
.skyline-silhouette {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 200px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 200'%3E%3Cpath fill='%230d0d18' d='M0 200 L0 140 L20 140 L20 100 L40 100 L40 80 L60 80 L60 100 L80 100 L80 130 L100 130 L100 90 L110 85 L120 90 L120 130 L140 130 L140 110 L160 110 L160 70 L165 60 L170 70 L170 110 L200 110 L200 130 L220 130 L220 100 L230 95 L240 100 L240 120 L260 120 L260 80 L270 75 L280 80 L280 130 L300 130 L300 110 L320 110 L320 100 L340 100 L340 130 L360 130 L360 90 L370 80 L380 90 L380 130 L400 130 L400 120 L420 120 L420 90 L430 75 L440 90 L440 120 L460 120 L460 130 L480 130 L480 100 L500 100 L500 80 L510 70 L520 80 L520 100 L540 100 L540 120 L560 120 L560 90 L580 90 L580 120 L600 120 L600 100 L620 100 L620 110 L640 110 L640 80 L650 65 L660 80 L660 110 L680 110 L680 130 L700 130 L700 100 L720 100 L720 130 L740 130 L740 120 L760 120 L760 90 L770 80 L780 90 L780 120 L800 120 L800 130 L820 130 L820 100 L840 100 L840 80 L850 70 L860 80 L860 130 L880 130 L880 110 L900 110 L900 130 L920 130 L920 100 L940 100 L940 120 L960 120 L960 90 L970 80 L980 90 L980 120 L1000 120 L1000 130 L1020 130 L1020 100 L1040 100 L1040 80 L1060 80 L1060 100 L1080 100 L1080 130 L1100 130 L1100 110 L1120 110 L1120 90 L1130 75 L1140 90 L1140 110 L1160 110 L1160 130 L1180 130 L1180 100 L1200 100 L1200 120 L1220 120 L1220 80 L1240 80 L1240 120 L1260 120 L1260 130 L1280 130 L1280 100 L1300 100 L1300 120 L1320 120 L1320 90 L1340 90 L1340 130 L1360 130 L1360 110 L1380 110 L1380 140 L1440 140 L1440 200 Z'/%3E%3C/svg%3E") bottom center / cover no-repeat;
  z-index: 0;
}

.index-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  padding: 40px 24px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

/* ── Index outer: flex row holding side panels + center column ─────────────── */
.index-outer {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1020px;
  margin: 0 auto;
  padding: 40px 16px 12px;   /* extra vertical room for the tilted panels */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  overflow: visible;    /* allow tilted panels to bleed outside */
}

/* ── Side image panels flanking the auth card (tilted like promo frames) ───── */
.side-panel {
  flex: 0 0 185px;
  width: 185px;
  height: 300px;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(232,160,69,.45);
  border-radius: 4px;
  box-shadow: 0 16px 56px rgba(0,0,0,.85), 0 0 0 1px rgba(232,160,69,.1);
  opacity: 0;
  transition: opacity 2.4s ease-in-out, height .5s ease;
  background: #0a0a14;
}
#sidePanelLeft  { transform: rotate(-4deg); transform-origin: center center; }
#sidePanelRight { transform: rotate( 4deg); transform-origin: center center; }
/* corner bracket decorations */
.side-panel::before,
.side-panel::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border-color: rgba(232,160,69,.75);
  border-style: solid;
  z-index: 3;
  pointer-events: none;
}
.side-panel::before { top: 7px;    left: 7px;   border-width: 2px 0 0 2px; }
.side-panel::after  { bottom: 7px; right: 7px;  border-width: 0 2px 2px 0; }
@media (max-width: 900px) { .side-panel { display: none; } }



/* Logo */
.index-header { text-align: center; }

.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.logo-pre {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 300;
  letter-spacing: .6em;
  color: var(--accent);
  text-transform: uppercase;
}

.logo-title {
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  animation: title-rainbow 20s ease-in-out infinite;
}

@keyframes title-rainbow {
  0%   { color: #e8b06a; text-shadow: 0 2px 40px rgba(232,176,106,.4); }
  20%  { color: #e87090; text-shadow: 0 2px 40px rgba(232,112,144,.35); }
  40%  { color: #a070e8; text-shadow: 0 2px 40px rgba(160,112,232,.35); }
  60%  { color: #70a8e8; text-shadow: 0 2px 40px rgba(112,168,232,.35); }
  80%  { color: #70e8b8; text-shadow: 0 2px 40px rgba(112,232,184,.35); }
  100% { color: #e8b06a; text-shadow: 0 2px 40px rgba(232,176,106,.4); }
}

.logo-sub {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 300;
  letter-spacing: .3em;
  color: var(--text-second);
  text-transform: uppercase;
  margin-top: 4px;
}

.version-badge {
  margin-top: 16px;
  display: inline-block;
  padding: 4px 14px;
  background: rgba(232,160,69,0.1);
  border: 1px solid rgba(232,160,69,0.25);
  border-radius: 20px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .1em;
  font-family: var(--font-mono);
}

/* Auth card */
.auth-card {
  width: 100%;
  background: rgba(18, 18, 30, 0.92);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(12px);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.auth-tab {
  padding: 10px 6px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: var(--font-ui);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .2s, background .2s;
}
.auth-tab:hover  { color: var(--text-second); }
.auth-tab.active {
  color: var(--accent);
  background: rgba(232,160,69,0.06);
  border-bottom: 2px solid var(--accent);
}

.auth-form {
  padding: 28px 28px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-group label {
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-second);
}
.form-group .hint {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-muted);
}
.form-group input {
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 1rem;
  transition: border-color .2s, background .2s;
  outline: none;
}
.form-group input:focus {
  border-color: var(--accent-dim);
  background: rgba(255,255,255,0.06);
}
.form-group input::placeholder { color: var(--text-dim); }

.form-error {
  color: var(--danger);
  font-size: 0.88rem;
  min-height: 20px;
  padding: 4px 0;
}

.form-note {
  background: rgba(232,160,69,0.1);
  border: 1px solid rgba(232,160,69,0.25);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  color: var(--accent-text);
  font-size: 0.88rem;
}

.auth-form .btn-primary { width: 100%; text-align: center; padding: 14px; }

.index-footer {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  color: var(--text-dim);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  line-height: 1.6;
  opacity: 0.7;
  padding: 0 16px 8px;
}
.index-footer span { font-family: inherit; font-size: inherit; }

/* ═══════════════════════════════════════════════════════════════════════════
   CHARACTERS PAGE
   ═══════════════════════════════════════════════════════════════════════════ */
/* (see characters.css for card styles, here just the shell) */

.chars-page { background: var(--bg-deep); overflow-y: auto; }

.chars-header {
  position: sticky;
  top: 0;
  background: rgba(7,7,13,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 100;
  padding: 0 32px;
}
.chars-header-inner {
  max-width: 1300px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 64px;
}
.chars-title { flex: 1; }
.chars-title h1 {
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}
.chars-subtitle {
  font-size: 0.78rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.chars-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}
.chars-username { color: var(--text-second); font-size: 0.9rem; }

.chars-loading, .chars-error {
  text-align: center;
  padding: 80px 24px;
  color: var(--text-second);
}
.chars-error { color: var(--danger); }

/* ── OAuth login buttons ─────────────────────────────────────────────────── */
.oauth-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 14px;
  color: var(--text-muted);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.oauth-divider::before,
.oauth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.08);
}
.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 14px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: .03em;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.1);
  background: rgba(255,255,255,.04);
  color: #e0e0e8;
  transition: background .2s, border-color .2s, transform .1s;
  cursor: pointer;
}
.oauth-btn:hover {
  background: rgba(255,255,255,.09);
  border-color: rgba(255,255,255,.2);
  transform: translateY(-1px);
}
.oauth-btn:active { transform: translateY(0); }

/* ── Stats panel ───────────────────────────────────────────────────────────── */
.stats-panel { }
.stats-grid  { display: flex; flex-direction: column; gap: 0; }
.stats-loading { text-align: center; color: var(--text-muted); padding: 12px 0; font-size: 0.88rem; }
.stats-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  gap: 12px;
}
.stats-row:last-child { border-bottom: none; }
.stats-label {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--text-second);
  font-weight: 500;
}
.stats-val {
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .03em;
  text-align: right;
  white-space: nowrap;
}
.stats-fullpage-btn {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 10px 16px;
  background: rgba(232,160,69,.1);
  border: 1px solid rgba(232,160,69,.3);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--font-ui);
  font-size: 0.85rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.stats-fullpage-btn:hover { background: rgba(232,160,69,.18); border-color: rgba(232,160,69,.55); }

/* ── Meet the crew link ── */
.meet-crew-link {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--text-second, #6868a0);
  text-decoration: none;
  letter-spacing: .04em;
  opacity: .7;
  transition: color .2s, opacity .2s;
}
.meet-crew-link:hover {
  color: var(--accent);
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   INDEX PAGE — MOBILE
   ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  /* Remove excessive top dead-space above the logo */
  .index-outer {
    padding-top: 8px;
    padding-bottom: 4px;
    align-items: flex-start;   /* don't centre vertically — allow scroll from top */
    min-height: 100dvh;
    justify-content: center;
  }
  .index-container {
    padding-top: 16px;
    padding-bottom: 12px;
    gap: 16px;
  }

  /* Footer: allow wrapping so it doesn't get clipped on narrow screens */
  .index-footer {
    white-space: normal;
    text-align: center;
    padding-bottom: 20px;
    line-height: 1.8;
  }
  /* Each pipe-separated item can soft-wrap */
  .index-footer span { display: inline; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERVIEW PANEL (shown on index.html when logged in)
   ═══════════════════════════════════════════════════════════════════════════ */

.overview-avatar-wrap {
  position: relative;
  width: 88px;
  height: 88px;
  margin: 0 auto 12px;
}
.overview-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: rgba(232,160,69,.15);
  border: 2px solid rgba(232,160,69,.35);
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-t);
  font-size: 2rem;
  color: var(--accent);
}
.overview-avatar-change {
  position: absolute;
  bottom: 0; right: 0;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #07070d;
  font-size: 0.75rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.overview-avatar-change:hover { opacity: .85; }
.overview-name {
  font-family: var(--font-t);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary, #f0ede6);
  text-align: center;
  margin-bottom: 4px;
}
.overview-sub {
  font-family: var(--font-u);
  font-size: 0.82rem;
  color: rgba(240,237,230,.45);
  text-align: center;
  letter-spacing: .05em;
  margin-bottom: 22px;
}
.overview-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.overview-play-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  padding: 13px;
  font-family: var(--font-u);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: var(--accent);
  color: #07070d;
  border-radius: 8px;
  transition: opacity .18s;
}
.overview-play-btn:hover { opacity: .85; }
.overview-logout-btn {
  background: transparent;
  border: 1px solid rgba(240,237,230,.18);
  border-radius: 8px;
  color: rgba(240,237,230,.55);
  font-family: var(--font-u);
  font-size: 0.85rem;
  padding: 10px;
  cursor: pointer;
  transition: border-color .18s, color .18s;
}
.overview-logout-btn:hover { border-color: rgba(240,237,230,.4); color: rgba(240,237,230,.8); }

/* Day badge */
.overview-day-badge {
  text-align: center;
  font-family: var(--font-u);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--accent);
  background: rgba(232,160,69,.1);
  border: 1px solid rgba(232,160,69,.25);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: -4px;
}

/* Load Game button */
.overview-load-btn {
  background: transparent;
  border: 1px solid rgba(232,160,69,.3);
  border-radius: 8px;
  color: var(--accent);
  font-family: var(--font-u);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 10px;
  cursor: pointer;
  transition: border-color .18s, background .18s;
}
.overview-load-btn:hover { border-color: rgba(232,160,69,.6); background: rgba(232,160,69,.08); }

/* Saves modal */
.overview-saves-card {
  background: #0e0e18;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.overview-saves-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  font-family: var(--font-u);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: rgba(240,237,230,.85);
}
.overview-saves-header button {
  background: transparent;
  border: none;
  color: rgba(240,237,230,.45);
  font-size: 1.3rem;
  cursor: pointer;
  line-height: 1;
}
.overview-saves-header button:hover { color: rgba(240,237,230,.9); }
.overview-saves-body {
  overflow-y: auto;
  padding: 10px 0;
}
.ov-save-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border-bottom: 1px solid rgba(255,255,255,.05);
  gap: 12px;
}
.ov-save-row:last-child { border-bottom: none; }
.ov-save-info { flex: 1; min-width: 0; }
.ov-save-label {
  font-family: var(--font-u);
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(240,237,230,.85);
  letter-spacing: .04em;
}
.ov-save-meta {
  font-size: 0.75rem;
  color: rgba(240,237,230,.38);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ov-save-load-btn {
  display: inline-block;
  padding: 7px 18px;
  background: rgba(232,160,69,.12);
  border: 1px solid rgba(232,160,69,.35);
  border-radius: 6px;
  color: var(--accent);
  font-family: var(--font-u);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s;
}
.ov-save-load-btn:hover { background: rgba(232,160,69,.22); }
.ov-saves-empty {
  padding: 24px;
  text-align: center;
  color: rgba(240,237,230,.35);
  font-size: 0.85rem;
}