/* ==========================================================================
   Chronos Geopolitical Historical Atlas — Stylesheet (styles.css)
   Mobile-First Cartographic Interface, Historical Era Modes & Dossier UI
   ========================================================================== */

:root {
  --bg-obsidian: #070b14;
  --bg-panel: rgba(15, 23, 42, 0.92);
  --bg-card: rgba(30, 41, 59, 0.72);
  --border-subtle: rgba(148, 163, 184, 0.16);
  --border-gold: rgba(245, 158, 11, 0.45);
  --accent-amber: #f59e0b;
  --accent-amber-light: #fbbf24;
  --accent-emerald: #10b981;
  --accent-rose: #f43f5e;
  --accent-sky: #38bdf8;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --font-display: 'Cinzel', Georgia, serif;
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--bg-obsidian);
  color: var(--text-primary);
  font-family: var(--font-sans);
  user-select: none;
  -webkit-user-select: none;
}

.font-display { font-family: var(--font-display); }
.font-mono-code { font-family: var(--font-mono); }

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

.custom-scroll::-webkit-scrollbar { width: 5px; height: 5px; }
.custom-scroll::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.4); }
.custom-scroll::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.3); border-radius: 9999px; }
.custom-scroll::-webkit-scrollbar-thumb:hover { background: rgba(245, 158, 11, 0.6); }

.glass-panel {
  background: var(--bg-panel);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--border-subtle);
}

.glass-card {
  background: var(--bg-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(148, 163, 184, 0.14);
  transition: transform 0.18s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.glass-card:hover { border-color: rgba(245, 158, 11, 0.35); }

#app-shell {
  position: relative;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#map-wrapper {
  position: relative;
  flex: 1 1 0%;
  min-height: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #13213a 0%, #091120 62%, #050811 100%);
  transition: background 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

#map-wrapper.historical-mode-bg {
  background: radial-gradient(circle at 50% 42%, #241c14 0%, #15100b 64%, #0b0805 100%);
}

.carto-grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(148, 163, 184, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(148, 163, 184, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  z-index: 1;
}

#world-map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  z-index: 2;
}

#world-map:active { cursor: grabbing; }

.graticule-path {
  fill: none;
  stroke: rgba(148, 163, 184, 0.07);
  stroke-width: 0.5px;
  pointer-events: none;
}

#map-wrapper.historical-mode-bg .graticule-path { stroke: rgba(245, 158, 11, 0.09); }

.country-path {
  fill: #1e293b;
  stroke: #334155;
  stroke-width: 0.55px;
  vector-effect: non-scaling-stroke;
  transition: fill 0.3s ease, stroke 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.country-path:hover { fill: #334155; stroke: #94a3b8; }

.country-path.selected-modern {
  fill: rgba(245, 158, 11, 0.34);
  stroke: #fbbf24;
  stroke-width: 1.5px;
}

.country-path.historical-base {
  fill: #272018;
  stroke: rgba(217, 169, 98, 0.24);
  stroke-width: 0.45px;
  stroke-dasharray: 2, 2;
}

.country-path.historical-base.hide-ghost-borders {
  stroke: #272018;
  stroke-width: 0.4px;
  stroke-dasharray: none;
}

.hist-boundary-poly {
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill-opacity 0.25s ease, stroke-width 0.25s ease;
}

.hist-boundary-poly:hover { fill-opacity: 0.48; }

.hist-boundary-sovereign {
  fill: url(#imperial-hatch-gold);
  stroke: #fbbf24;
  stroke-width: 2.2px;
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.45));
  animation: frontierPulse 3.2s infinite ease-in-out;
}

.hist-boundary-ally {
  fill: rgba(16, 185, 129, 0.24);
  stroke: #34d399;
  stroke-width: 1.5px;
  stroke-dasharray: 5, 3;
}

.hist-boundary-enemy {
  fill: rgba(244, 63, 94, 0.24);
  stroke: #fb7185;
  stroke-width: 1.6px;
}

.hist-boundary-neutral {
  fill: rgba(148, 163, 184, 0.16);
  stroke: #94a3b8;
  stroke-width: 1.2px;
  stroke-dasharray: 3, 3;
}

@keyframes frontierPulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.65; }
}

.map-banner-group, .city-node-group { cursor: pointer; }
.scale-target { transition: transform 0.06s linear; }

.capital-pulse-ring {
  fill: none;
  stroke: #fbbf24;
  stroke-width: 1.4px;
  opacity: 0.75;
  animation: capitalRingExpand 2.4s infinite ease-out;
}

@keyframes capitalRingExpand {
  0% { r: 5px; opacity: 0.9; }
  100% { r: 17px; opacity: 0; }
}

input[type="range"].chronos-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #3b82f6 0%, #f59e0b 55%, #10b981 100%);
  outline: none;
}

input[type="range"].chronos-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fef3c7;
  border: 3px solid #f59e0b;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.85);
  cursor: pointer;
  transition: transform 0.15s ease;
}

input[type="range"].chronos-slider::-webkit-slider-thumb:active { transform: scale(1.18); }

#dossier-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  border-top-left-radius: 1.35rem;
  border-top-right-radius: 1.35rem;
  box-shadow: 0 -14px 38px rgba(0, 0, 0, 0.72);
  transition: height 0.34s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
  overflow: hidden;
}

#dossier-sheet.sheet-collapsed { height: 82px; }
#dossier-sheet.sheet-half { height: 48dvh; }
#dossier-sheet.sheet-expanded { height: 84dvh; }

@media (min-width: 1024px) {
  #dossier-sheet { max-width: 960px; margin: 0 auto; }
}

.dossier-tab-btn { white-space: nowrap; transition: all 0.2s ease; }
.dossier-tab-btn.active {
  background: rgba(245, 158, 11, 0.2);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.95; }
}

.skeleton-pulse { animation: pulseGlow 1.6s infinite ease-in-out; }

/* Additional rules for SVG icon sizing safety & interactive callouts */
svg:not(#world-map) {
  max-width: 100%;
  max-height: 100%;
}

.hist-boundary-ally {
  fill: url(#ally-hatch-emerald);
}

.hist-boundary-enemy {
  fill: url(#enemy-hatch-rose);
}

#world-map-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
  cursor: grab;
  z-index: 2;
}

#world-map-svg:active {
  cursor: grabbing;
}