:root{
  --bg-900:#0b2136; /* unified navy tint (use lighter tone everywhere) */
  --bg-800:#0b2136; /* unified navy tint (use lighter tone everywhere) */
  --panel:#0f1720;
  --muted:#9aa5a1;
  --gold:#caa55a;
  --accent:#98b97b;
  --stone:#2b2f33;
  --shadow: 0 12px 40px rgba(2,6,10,0.6);
  --glass: rgba(255,255,255,0.06);
  --radius:14px;
  --transition: 280ms cubic-bezier(.2,.9,.2,1);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(180deg,var(--bg-900), var(--bg-800));color:#e6efe6;line-height:1.45}

/* serif headings */
h1,h2,h3,h4{font-family:'Cinzel', serif;color:#f6f6e9}
.muted{color:var(--muted);}

/* Top navigation (glass) */
.nav-wrap{position:sticky;top:14px;z-index:60;padding:12px 20px}
.nav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:10px 18px;border-radius:12px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));backdrop-filter: blur(6px);box-shadow:var(--shadow);border:1px solid rgba(255,255,255,0.03)}
.logo{display:flex;align-items:center;gap:12px}
.logo-mark{background:linear-gradient(120deg,var(--gold), #ffd88a);color:#1b1b10;padding:6px 10px;border-radius:8px;font-weight:700}
.logo-text{font-weight:600;color:var(--muted)}
.main-nav{display:flex;gap:12px}
.nav-item{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;transition:var(--transition)}
.nav-item:hover{color:var(--gold);background:rgba(255,255,255,0.02)}
.nav-item.cta{background:rgba(0,0,0,0.18);color:var(--muted);padding:8px 12px;border:none}
.map-placeholder{color:var(--muted);background:rgba(255,255,255,0.02);padding:18px;border-radius:10px}
#map-thumb{padding:0;border-radius:0;overflow:hidden;width:100%;height:100%;display:block}

/* Hero */
.hero{position:relative;min-height:76vh;display:flex;align-items:center;justify-content:center;overflow:hidden}
.hero-bg{position:absolute;inset:0;background-image:radial-gradient(ellipse at 10% 20%, rgba(32,64,140,0.14) 0%, rgba(2,8,20,0.55) 40%), url('https://images.unsplash.com/photo-1501785888041-af3ef285b470?auto=format&fit=crop&w=1600&q=60');background-size:cover;background-position:center;transform:translateZ(0);will-change:transform;transition:transform 400ms ease}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg, rgba(3,6,3,0.25), rgba(3,6,3,0.6));mix-blend-mode:multiply}
.hero-content{position:relative;z-index:4;text-align:center;max-width:980px;padding:40px 20px}
.eyebrow{font-size:16px;letter-spacing:2px;color:var(--gold);margin:0 0 10px}
.headline{font-size:48px;margin:0 0 12px;line-height:1}
.subhead{color:var(--muted);margin:0 0 18px}
.hero-ctas{display:flex;gap:14px;justify-content:center}
.btn{display:inline-block;padding:12px 20px;border-radius:12px;text-decoration:none;transition:var(--transition);font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--gold), #f5e9b0);color:#111;border:2px solid rgba(255,255,255,0.06);box-shadow:0 8px 30px rgba(0,0,0,0.6)}
.btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted)}
.btn-map{position:absolute;right:22px;bottom:18px}

.ember-layer{position:absolute;inset:0;pointer-events:none;z-index:2;background-image:radial-gradient(rgba(255,160,64,0.03) 1px, transparent 1px);background-size:40px 40px;mix-blend-mode:screen;opacity:0.9}
.fog-layer{position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.2));z-index:3;pointer-events:none}

/* Sections */
.section{padding:72px 20px}
.container{max-width:1100px;margin:0 auto}
.section-title{margin:0 0 6px;font-size:28px}
.section-lead{color:var(--muted);margin:0 0 18px}

.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.feature-card{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,0.6);transition:transform var(--transition), box-shadow var(--transition)}
.feature-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(0,0,0,0.7)}
.feature-icon{font-size:28px;margin-bottom:8px}

/* Improve heading readability for feature cards and showcases */
.feature-card h4{color:#f6f6e9;font-size:18px;margin:6px 0 8px 0;line-height:1.15;font-weight:700;text-shadow:0 2px 6px rgba(0,0,0,0.6)}
.showcase-card h4{color:#f6f6e9;margin:0 0 8px 0;font-size:16px}
.slide-caption{margin-top:10px;color:#dfe7de;font-weight:600}


.split{display:flex;gap:18px;align-items:flex-start}
.map-card{flex:1}
.map-image{background:linear-gradient(180deg, rgba(12,18,14,0.4), rgba(0,0,0,0.6));min-height:260px;border-radius:12px;position:relative;padding:0;display:flex;align-items:stretch;justify-content:stretch;overflow:hidden}
.map-placeholder{color:var(--muted);background:rgba(255,255,255,0.02);padding:18px;border-radius:10px;height:100%;width:100%;display:flex;align-items:center;justify-content:center}
.showcase-card{width:320px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px}
.nations-list{list-style:none;padding:0;margin:8px 0 0 0;color:var(--muted)}

/* Map controls (season selector) */
.map-controls{display:flex;gap:8px;align-items:center;justify-content:flex-end}
.map-controls select{background:transparent;border:1px solid rgba(255,255,255,0.06);color:var(--muted);padding:8px 10px;border-radius:8px}
.map-controls label{font-size:14px}

/* Wiki tabs */
.tabs{display:flex;gap:8px;align-items:center;margin:8px 0 18px}
.tab-button{background:transparent;border:none;color:var(--muted);padding:8px 12px;border-radius:6px;cursor:pointer;transition:color 160ms ease;border-bottom:2px solid transparent;font-weight:600}
.tab-button:hover{color:var(--gold)}
.tab-button[aria-selected="true"]{color:var(--gold);border-bottom-color:var(--gold)}
.tab-panel{display:none}
.tab-panel.active{display:block}
.doc-section h1{margin-top:6px}

/* Carousel */
.carousel{position:relative;margin-top:18px}
.carousel-track{display:flex;gap:14px;overflow:hidden}
.slide{min-width:260px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:18px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,10,0.5);text-align:center}
.slide-visual{height:140px;border-radius:8px;background:linear-gradient(180deg,#24312a,#16211a);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:600}
.slide-caption{margin-top:10px;color:var(--muted)}
.nation-cards{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;justify-content:flex-start;padding:12px}
.nation-card{
  flex:1 1 220px;
  min-width:180px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding:18px;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,0.6);
  transition:transform var(--transition), box-shadow var(--transition);
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.nation-card:hover{transform:translateY(-6px);box-shadow:0 18px 48px rgba(0,0,0,0.7)}
.nation-card .slide-visual{height:120px;border-radius:8px;background:linear-gradient(90deg,#24312a,#16211a);display:flex;align-items:center;justify-content:center;color:var(--muted);font-weight:700;font-size:18px}
.nation-card .slide-caption{margin-top:10px;color:var(--muted);text-align:left}
.nation-card strong{color:#f6f6e9;font-size:16px;display:block;margin-bottom:6px}
.carousel-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,0.35);border:none;color:#fff;padding:8px 12px;border-radius:8px;cursor:pointer}
.carousel-btn.prev{left:-10px}
.carousel-btn.next{right:-10px}

.final-cta{background:linear-gradient(180deg, rgba(4,20,40,0.06), rgba(11,33,54,0.08));text-align:center}
.final-title{font-size:36px;margin:0 0 8px}
.cta-row{display:flex;gap:12px;justify-content:center;margin-top:16px}
.btn-giant{padding:14px 24px;border-radius:14px}
.btn-giant.outline{background:transparent;border:1px solid rgba(255,255,255,0.06)}

.footer-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
.footer-links{list-style:none;padding:0;margin:8px 0 0 0}
.footer-links a{color:var(--muted);text-decoration:none}

/* Map SVG rules preserved (existing) */
.svg-container svg{max-width:100%;height:auto;display:block}
.map-path{
  fill:#e6eefc;
  stroke:rgba(255,255,255,0.06);
  stroke-width:1;
  transition:fill .12s ease, transform .12s ease, filter .12s ease, fill-opacity .12s ease, stroke-width .12s ease;
  cursor:pointer;
  fill-opacity:0.55; /* transparent so background remains visible; colors will be applied later */
  pointer-events: all;
  stroke-linejoin:round;
  stroke-linecap:round;
}
.map-path:hover{
  filter:drop-shadow(0 6px 14px rgba(37,99,235,0.06));
  transform:translateY(-1px);
  fill-opacity:0.72;
  stroke-width:1.4;
}
.map-path:focus{outline: none;}
.map-path.selected{
  /* Strong visible border only for the clicked/selected province */
  stroke:var(--gold);
  stroke-width:2.8;
  filter:drop-shadow(0 18px 40px rgba(202,165,90,0.12));
  fill-opacity:0.98; /* nearly solid when selected so color shows clearly */
}

g.map-path > * {pointer-events: all}

/* Responsive */
@media (max-width:1100px){
  .split{flex-direction:column}
  .showcase-card{width:100%}
}
@media (max-width:720px){
  .headline{font-size:28px}
  .nav{padding:8px}
  .main-nav{display:none}
  .carousel-track{gap:10px}
}

/* simple focus states */
.btn:focus{outline:2px solid rgba(255,255,255,0.06);outline-offset:4px}

/* Modal styles */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:120;visibility:hidden;opacity:0;transition:opacity 200ms ease, visibility 200ms ease}
.modal[aria-hidden="false"]{visibility:visible;opacity:1}
.modal.open{visibility:visible;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.7));backdrop-filter:blur(4px)}
.modal-content{position:relative;z-index:10;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));padding:20px;border-radius:12px;min-width:320px;max-width:620px;box-shadow:0 18px 60px rgba(0,0,0,0.7)}
.modal-close{position:absolute;right:12px;top:10px;background:transparent;border:none;color:var(--muted);font-size:20px;cursor:pointer}
.server-block{display:flex;gap:8px;align-items:center;margin-top:12px}
.server-block code{background:rgba(255,255,255,0.02);padding:8px 10px;border-radius:8px;color:#f6f6e9}
.server-block .btn{padding:8px 10px;border-radius:8px}