:root {
  color-scheme: dark;
  --ink: #edf4f7;
  --muted: #8fa3ad;
  --navy: #07111f;
  --navy-2: #0a1827;
  --panel: rgba(10, 24, 39, .92);
  --line: rgba(174, 210, 219, .14);
  --gold: #f1c75b;
  --gold-2: #fff0a8;
  --cyan: #65d8df;
  --danger: #ff715b;
  font-family: Inter, "Segoe UI", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--navy); color: var(--ink); }
button, select { font: inherit; }
button { color: inherit; }
button:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

.app-shell { min-height: 100vh; overflow: hidden; background: var(--navy); }
.topbar {
  height: 76px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto minmax(220px, 1fr);
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: rgba(6, 16, 28, .96);
  position: relative;
  z-index: 20;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .24);
}

.brand { color: var(--ink); text-decoration: none; display: inline-flex; align-items: center; gap: 11px; width: max-content; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  font: 700 23px/1 "Oswald", sans-serif; color: var(--navy);
  background: var(--gold); clip-path: polygon(50% 0, 93% 24%, 93% 74%, 50% 100%, 7% 74%, 7% 24%);
  filter: drop-shadow(0 0 12px rgba(241, 199, 91, .24));
}
.brand strong { display: block; font: 700 18px/.95 "Oswald", sans-serif; letter-spacing: .08em; }
.brand small { color: var(--gold); font: 600 8px/1 "DM Sans", sans-serif; letter-spacing: .28em; }

.world-status { display: flex; align-items: center; gap: 10px; min-width: 175px; }
.world-status strong, .world-status small { display: block; }
.world-status strong { font: 600 10px/1.2 "Oswald", sans-serif; letter-spacing: .15em; }
.world-status small { color: var(--muted); font-size: 10px; margin-top: 4px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #55dc92; box-shadow: 0 0 0 5px rgba(85, 220, 146, .1), 0 0 12px #55dc92; animation: pulse 2.2s infinite; }

.primary-nav { height: 100%; display: flex; align-items: center; gap: 4px; }
.nav-button {
  width: 54px; height: 100%; border: 0; border-bottom: 2px solid transparent;
  background: transparent; color: #6f8793; cursor: pointer; position: relative;
}
.nav-button svg { width: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-button:hover, .nav-button.active { color: var(--gold); border-bottom-color: var(--gold); background: linear-gradient(0deg, rgba(241,199,91,.08), transparent 55%); }

.player-chip { justify-self: end; border: 0; background: transparent; display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: left; padding: 6px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 600 11px "Oswald"; border: 1px solid rgba(241,199,91,.45); background: #172737; color: var(--gold); }
.player-chip strong, .player-chip small { display: block; }
.player-chip strong { font-size: 11px; }
.player-chip small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.language-control { display: grid; gap: 3px; min-width: 92px; }
.language-control span { color: #637b87; font: 600 7px "Arial Narrow",sans-serif; letter-spacing: .16em; }
.language-control select { border: 0; border-bottom: 1px solid var(--line); background: transparent; color: #c8d5da; padding: 3px 18px 4px 0; font-size: 9px; cursor: pointer; }
.language-control option { background: #0a1827; }

.battlefield { min-height: calc(100vh - 76px); }
.map-stage { min-height: calc(100vh - 76px); position: relative; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 56% 48%, #142c3d 0, #0b1b2b 40%, #07111f 78%); }
.world-map { position: absolute; inset: 0; z-index: 0; background: #06121d; }
.world-map .maplibregl-canvas { outline: none; }
.owner-art-canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.map-vignette { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg,rgba(5,14,24,.75) 0,transparent 28%,transparent 72%,rgba(5,14,24,.28) 100%),linear-gradient(0deg,rgba(5,14,24,.78),transparent 20%,transparent 82%,rgba(5,14,24,.34)); }
.map-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 12; display: flex; align-items: center; gap: 10px; color: #a9bbc2; font-size: 10px; letter-spacing: .08em; background: rgba(6,17,28,.88); border: 1px solid var(--line); padding: 12px 16px; transition: opacity .25s; }
.map-loading.hidden { opacity: 0; pointer-events: none; }.map-loading span { width: 13px; height: 13px; border: 2px solid #415b67; border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
.map-loading.fallback-note { top:auto; bottom:78px; opacity:1; color:#9fb1b9; }.map-loading.fallback-note span { display:none; }
.fallback-world { width:100%; height:100%; display:block; background:#06131f; }.fallback-world path { stroke:#57707c; stroke-width:.45; vector-effect:non-scaling-stroke; opacity:.9; transition:filter .15s,opacity .15s; cursor:pointer; }.fallback-world path:hover { opacity:1; filter:brightness(1.35); stroke:#f1c75b; stroke-width:1.2; }
.map-atmosphere {
  position: absolute; inset: 0; z-index: -3; opacity: .42;
  background-image: linear-gradient(rgba(112, 167, 178, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(112, 167, 178, .06) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(circle at 55% 50%, #000, transparent 75%);
}
.map-atmosphere::after { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(ellipse at center, transparent 0 84px, rgba(113,177,189,.06) 85px 86px); }
.world-silhouette { position: absolute; width: 100%; height: 100%; inset: 0; z-index: -2; opacity: .38; filter: drop-shadow(0 12px 20px rgba(0,0,0,.3)); }
.world-silhouette path { fill: #19384b; stroke: #3c6874; stroke-width: 1; }

.map-title { position: absolute; left: 3.6vw; top: 6.5vh; z-index: 4; max-width: 330px; pointer-events: none; }
.eyebrow { color: var(--gold); font: 600 10px/1.2 "Oswald", sans-serif; letter-spacing: .19em; }
.map-title h1 { margin: 10px 0 8px; font: 600 clamp(32px, 3.1vw, 54px)/1.02 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: -.025em; text-shadow: 0 3px 14px rgba(0,0,0,.45); }
.map-title h1 em { color: var(--gold); font-style: normal; }
.map-title p { color: #a5b6bd; font-size: 12px; }
.map-mode-switch { position: absolute; left: 50%; top: 24px; transform: translateX(-50%); z-index: 7; display: flex; padding: 3px; border: 1px solid var(--line); background: rgba(7,17,31,.76); backdrop-filter: blur(12px); }
.map-mode-switch button { border: 0; padding: 8px 14px; background: transparent; color: #7f949e; font: 600 8px "Arial Narrow",sans-serif; letter-spacing: .12em; cursor: pointer; }
.map-mode-switch button.active { background: rgba(241,199,91,.12); color: var(--gold); }
.front-control { display:flex; align-items:center; gap:7px; margin-left:4px; padding:0 9px; border-left:1px solid rgba(128,153,166,.22); color:#7f949e; font:600 7px "Arial Narrow",sans-serif; letter-spacing:.11em; white-space:nowrap; }
.front-control select { min-width:132px; max-width:190px; border:0; outline:0; background:transparent; color:#e5edf1; font:600 9px "Arial Narrow",sans-serif; cursor:pointer; }
.front-control option { background:#0a1724; color:#e5edf1; }
.battle-action { position: absolute; left: 50%; top: auto; bottom: 145px; transform: translateX(-50%); z-index: 7; width: 104px; height: 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; border: 1px solid rgba(241,199,91,.6); border-radius: 50%; background: radial-gradient(circle at 50% 36%,#273441 0,#101d27 48%,#07111b 75%); color: var(--gold); box-shadow: 0 18px 45px rgba(0,0,0,.48),inset 0 0 0 4px rgba(241,199,91,.055); cursor: pointer; transition: transform .2s ease,box-shadow .2s ease,opacity .2s ease,background .2s ease; }
.battle-action-cart { display:none; }.battle-action[data-state="purchase"] { background:radial-gradient(circle at 50% 36%,#f6d76e 0,#d49a1c 65%,#9b670d 100%); color:#101a21; }.battle-action[data-state="purchase"] .battle-action-swords { display:none; }.battle-action[data-state="purchase"] .battle-action-cart { display:block; }.economy-nav { color:var(--gold); }
.battle-action-ring { position: absolute; inset: -8px; border: 1px solid rgba(241,199,91,.18); border-radius: 50%; pointer-events: none; }.battle-action-ring::before,.battle-action-ring::after { content:""; position:absolute; background:var(--gold); opacity:.45; }.battle-action-ring::before { left:50%; top:-4px; width:1px; height:8px; }.battle-action-ring::after { top:50%; right:-4px; width:8px; height:1px; }
.battle-action svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 7px rgba(241,199,91,.3)); }
.battle-action strong,.battle-action small { display:block; position:relative; }.battle-action strong { margin-top:2px; font:700 13px "Oswald"; letter-spacing:.12em; }.battle-action small { color:#99abb2; font:600 7px "Arial Narrow",sans-serif; letter-spacing:.12em; }
.battle-action:hover:not(:disabled) { transform:translateX(-50%) scale(1.07); box-shadow:0 20px 54px rgba(0,0,0,.55),0 0 26px rgba(241,199,91,.22),inset 0 0 0 4px rgba(241,199,91,.08); }
.battle-action[data-state="idle"] { opacity:.82; }.battle-action[data-state="idle"] svg { color:#a9bbc2; }.battle-action[data-state="ready"] { color:#171a13; border-color:#ffe28b; background:radial-gradient(circle at 50% 32%,#ffe58f 0,#f1c75b 55%,#a66f0b 100%); box-shadow:0 20px 55px rgba(0,0,0,.52),0 0 32px rgba(241,199,91,.35); animation:action-ready 1.8s ease-in-out infinite; }.battle-action[data-state="ready"] small { color:#4d3a0d; }.battle-action:disabled { opacity:.38; cursor:not-allowed; filter:saturate(.4); }
.target-locator { width:68px; height:84px; position:relative; pointer-events:auto; cursor:pointer; display:grid; place-items:center; transform:translateY(-8px); filter:drop-shadow(0 5px 12px rgba(0,0,0,.55)); }
.target-locator-halo { position:absolute; width:60px; height:60px; bottom:0; border:2px solid #ffe28b; border-radius:50%; background:radial-gradient(circle,rgba(241,199,91,.24),rgba(241,199,91,0) 66%); box-shadow:0 0 0 7px rgba(241,199,91,.09),0 0 25px rgba(241,199,91,.5); animation:target-halo 1.6s ease-in-out infinite; }
.target-locator svg { position:relative; width:40px; height:52px; fill:#101f2b; stroke:#ffe28b; stroke-width:2; z-index:1; }.target-locator svg path:last-child { fill:none; stroke:#ffe28b; stroke-width:3; }.target-locator strong { position:absolute; top:0; z-index:2; color:#fff2bb; font:700 8px "Oswald",sans-serif; letter-spacing:.14em; text-shadow:0 2px 4px #06131f; }
.target-locator[data-state="suggested"] { opacity:.72; }.target-locator[data-state="suggested"] .target-locator-halo { border-style:dashed; animation-duration:2.3s; }.target-locator[data-state="suggested"] svg { stroke:#f1c75b; }.target-locator[data-state="selected"] .target-locator-halo { border-color:#fff; box-shadow:0 0 0 7px rgba(255,255,255,.12),0 0 30px rgba(255,226,139,.75); }
.owner-profile-card { display: grid; grid-template-columns: 72px 1fr; gap: 14px; align-items: start; margin-bottom: 18px; padding: 16px; border: 1px solid rgba(241,199,91,.35); background: linear-gradient(135deg,rgba(241,199,91,.1),transparent); }.owner-profile-card > img,.owner-profile-fallback { width: 68px; height: 68px; object-fit: cover; border: 1px solid rgba(241,199,91,.55); border-radius: 10px; }.owner-profile-fallback { display: grid; place-items: center; color: #101a21; background: var(--gold); font: 800 32px "Oswald"; }.owner-profile-card h3 { margin: 5px 0; font: 600 24px "Oswald"; }.owner-profile-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }.owner-profile-card .owner-profile-link { display: inline-block; width: auto; padding: 0 12px; line-height: 34px; text-decoration: none; }

.map-hud { position: absolute; right: 3.2vw; top: 4vh; display: flex; gap: 10px; z-index: 6; }
.country-control, .credits-card { border: 1px solid var(--line); background: rgba(7,17,31,.78); backdrop-filter: blur(12px); box-shadow: 0 12px 35px rgba(0,0,0,.2); }
.country-control { padding: 8px 12px; min-width: 152px; }
.country-control span { display: block; color: var(--muted); font: 600 8px "Oswald"; letter-spacing: .16em; }
.country-control select { width: 100%; margin-top: 3px; border: 0; background: transparent; color: var(--ink); font-weight: 700; cursor: pointer; }
.country-control option { background: #0b1b2b; }
.credits-card { display: flex; align-items: center; gap: 10px; padding: 7px 9px 7px 13px; }
.credit-symbol { color: var(--gold); font-size: 18px; text-shadow: 0 0 15px rgba(241,199,91,.5); }
.credits-card small, .credits-card strong { display: block; }
.credits-card small { color: var(--muted); font: 600 8px "Oswald"; letter-spacing: .1em; }
.credits-card strong { font: 600 18px "Oswald"; }
.credits-card button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); background: transparent; cursor: pointer; }

.war-zone { --zoom: 1; position: absolute; left: 52%; top: 50%; width: 566px; height: 405px; transform: translate(-50%, -50%) scale(var(--zoom)); transform-origin: center; z-index: 3; transition: transform .25s ease; }
.war-zone::before { content: ""; position: absolute; inset: -50px; background: radial-gradient(ellipse, rgba(18,55,68,.35), transparent 68%); z-index: -1; }
.hex-grid { position: absolute; inset: 38px 0 0; }
.hex {
  position: absolute; width: 55px; height: 62px; border: 0; padding: 0; cursor: pointer;
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
  opacity: .62; filter: saturate(.82) brightness(.73); transition: filter .18s ease, opacity .18s ease, transform .18s ease;
}
.hex::before { content: ""; position: absolute; inset: 2px; clip-path: inherit; background: inherit; opacity: .9; }
.hex::after { content: ""; position: absolute; inset: 0; clip-path: inherit; background: linear-gradient(135deg, rgba(255,255,255,.22), transparent 38%, rgba(0,0,0,.22)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.hex.es { background: linear-gradient(90deg,#aa151b 0 25%,#f1bf00 25% 75%,#aa151b 75%); }
.hex.fr { background: linear-gradient(90deg,#0055a4 0 33.33%,#fff 33.33% 66.66%,#ef4135 66.66%); }
.hex.de { background: linear-gradient(180deg,#111 0 33.33%,#dd0000 33.33% 66.66%,#ffce00 66.66%); }
.hex.it { background: linear-gradient(90deg,#009246 0 33.33%,#fff 33.33% 66.66%,#ce2b37 66.66%); }
.hex.neutral { background: linear-gradient(135deg, #273b47, #142630); }
.hex.owned { opacity: .86; filter: saturate(.92) brightness(.8); }
.hex.enemy { opacity: .35; filter: saturate(.5) brightness(.6); }
.hex.attackable, .hex.contested { opacity: 1; filter: saturate(1.08) brightness(1.06) drop-shadow(0 0 7px rgba(241,199,91,.55)); z-index: 2; }
.hex.attackable::after { box-shadow: inset 0 0 0 2px var(--gold), inset 0 0 14px rgba(241,199,91,.25); }
.hex.contested { animation: contested 1.4s ease-in-out infinite alternate; }
.hex.contested::after { box-shadow: inset 0 0 0 2px var(--danger), inset 0 0 18px rgba(255,113,91,.45); }
.hex:hover, .hex.selected { opacity: 1; filter: brightness(1.15) drop-shadow(0 0 11px rgba(255,255,255,.42)); transform: scale(1.1); z-index: 4; }
.hex.selected::after { box-shadow: inset 0 0 0 3px #fff; }

.zone-label { position: absolute; top: 2px; color: rgba(226,238,241,.45); font: 600 9px "Oswald"; letter-spacing: .18em; }
.zone-label::after { content: ""; display: block; width: 75px; height: 1px; margin-top: 5px; background: linear-gradient(90deg, currentColor, transparent); }
.zone-label-es { left: 15px; }.zone-label-fr { left: 145px; }.zone-label-de { left: 282px; }.zone-label-it { left: 424px; }

.map-tools { position: absolute; left: 3.2vw; top: 44%; display: grid; border: 1px solid var(--line); background: rgba(7,17,31,.7); z-index: 5; }
.map-tools button { width: 34px; height: 34px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; font-size: 18px; }
.map-tools button:last-child { border: 0; }.map-tools button:hover { color: var(--gold); background: rgba(241,199,91,.06); }
.map-legend { position: absolute; left: 3.5vw; bottom: 4vh; display: flex; gap: 18px; color: var(--muted); font-size: 9px; z-index: 4; }
.map-legend span { display: flex; align-items: center; gap: 6px; }
.map-legend i { width: 10px; height: 10px; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background: #567481; }
.map-legend b { font-weight: 500; }
.map-legend .legend-front { background: var(--gold); box-shadow: 0 0 8px var(--gold); }.map-legend .legend-contested { background: var(--danger); }

.pulse-card { position: absolute; right: 3.2vw; bottom: 4vh; width: min(300px, 24vw); z-index: 5; background: rgba(7,17,31,.78); border: 1px solid var(--line); backdrop-filter: blur(12px); }
.pulse-card header { height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--line); }
.pulse-card header span { color: var(--gold); font: 600 9px "Oswald"; letter-spacing: .16em; }
.pulse-card header button { border: 0; background: none; color: var(--muted); font-size: 9px; cursor: pointer; }
.pulse-feed { padding: 5px 12px; }
.pulse-event { display: grid; grid-template-columns: 22px 1fr auto; gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(174,210,219,.08); }
.pulse-event:last-child { border: 0; }.pulse-event .event-flag { font-size: 14px; }
.pulse-event p { margin: 0; font-size: 9px; line-height: 1.35; color: #c2d0d5; }.pulse-event time { color: #667e89; font-size: 8px; }
.event-share { align-self: center; width: 24px; height: 24px; border: 1px solid var(--line); background: rgba(255,255,255,.02); color: var(--muted); cursor: pointer; }.event-share:hover { color: var(--gold); border-color: rgba(241,199,91,.45); }

.intel-stack { position: absolute; right: 3.2vw; top: 125px; bottom: 74px; width: min(300px,24vw); z-index: 6; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.intel-stack > * { pointer-events: auto; }
.nation-card { border: 1px solid var(--line); background: rgba(7,17,31,.86); backdrop-filter: blur(13px); box-shadow: 0 18px 45px rgba(0,0,0,.24); }
.nation-card > header { display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 9px; padding: 12px; border-bottom: 1px solid var(--line); }
.nation-card > header > span { font-size: 22px; }.nation-card header small,.nation-card header strong { display: block; }.nation-card header small { color: #6f8792; font: 600 7px "Arial Narrow",sans-serif; letter-spacing: .14em; }.nation-card header strong { margin-top: 3px; font: 600 15px "Arial Narrow",sans-serif; text-transform: uppercase; }.nation-card header b { color: var(--gold); font: 600 15px "Arial Narrow",sans-serif; }
.nation-stats { display: grid; grid-template-columns: 1fr 1fr; }.nation-stats span { padding: 11px 12px; border-right: 1px solid var(--line); }.nation-stats span:last-child { border: 0; }.nation-stats small,.nation-stats strong { display: block; }.nation-stats small { color: #708691; font: 600 7px "Arial Narrow",sans-serif; letter-spacing: .1em; }.nation-stats strong { margin-top: 5px; font: 600 18px "Arial Narrow",sans-serif; }
.king-mini { display: flex; align-items: center; gap: 10px; margin: 0 12px; padding: 10px 0; border-top: 1px solid var(--line); }.king-mini > span { color: var(--gold); font-size: 22px; }.king-mini small,.king-mini strong,.king-mini em { display:block; }.king-mini small { color: var(--gold); font: 600 7px "Arial Narrow",sans-serif; letter-spacing: .1em; }.king-mini strong { margin-top: 2px; font-size: 11px; }.king-mini em { margin-top: 3px; color: var(--muted); font-size: 8px; font-style: normal; }
.owner-avatar-image { width: 28px; height: 28px; margin-left: -5px; object-fit: cover; border: 1px solid rgba(241,199,91,.45); border-radius: 50%; }
.owner-link { display: block; margin: -4px 12px 9px 44px; color: var(--gold); font: 600 8px "Arial Narrow",sans-serif; letter-spacing: .1em; text-decoration: none; }.owner-link:hover { text-decoration: underline; }
.owner-promo { margin: 0 12px 10px; padding: 11px; border: 1px solid rgba(241,199,91,.38); background: linear-gradient(110deg,rgba(241,199,91,.12),rgba(24,55,71,.18)); box-shadow: inset 3px 0 var(--gold); }.owner-promo [hidden],.owner-avatar-image[hidden] { display: none !important; }.owner-promo > small { display: block; color: var(--gold); font: 600 7px "Arial Narrow",sans-serif; letter-spacing: .16em; }.owner-promo-brand { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 10px; align-items: center; margin-top: 8px; }.owner-promo-brand img,.owner-promo-fallback { width: 42px; height: 42px; border: 1px solid rgba(241,199,91,.55); border-radius: 7px; object-fit: cover; }.owner-promo-fallback { display: grid; place-items: center; background: var(--gold); color: #101a21; font: 800 18px "Oswald"; }.owner-promo strong,.owner-promo em { display: block; }.owner-promo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px "Arial Narrow",sans-serif; color: #eef5f6; }.owner-promo em { display: -webkit-box; overflow: hidden; margin-top: 3px; color: #a9bdc5; font-size: 8px; font-style: normal; line-height: 1.35; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }.owner-promo a { display: block; margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(241,199,91,.22); color: var(--gold); font: 600 8px "Arial Narrow",sans-serif; letter-spacing: .12em; text-decoration: none; }.owner-promo a:hover { color: #fff1b2; }
.front-button,.share-front-button { width: calc(100% - 24px); height: 34px; margin: 0 12px 8px; border: 1px solid rgba(241,199,91,.48); color: var(--gold); background: rgba(241,199,91,.08); font: 600 8px "Arial Narrow",sans-serif; letter-spacing: .12em; cursor: pointer; }.front-button:hover,.share-front-button:hover { background: var(--gold); color: #151812; }.share-front-button { margin-bottom: 12px; border-color: var(--line); color: #a9bdc5; background: transparent; }
.intel-stack .pulse-card { position: static; width: 100%; flex: 1; min-height: 126px; overflow: hidden; }
.world-metrics { position: absolute; left: 3.2vw; right: calc(3.2vw + min(300px,24vw)); bottom: 18px; min-height: 48px; z-index: 5; display: flex; align-items: stretch; border: 1px solid var(--line); background: rgba(7,17,31,.82); backdrop-filter: blur(12px); }
.world-metrics span { min-width: 120px; padding: 8px 15px; border-right: 1px solid var(--line); }.world-metrics small,.world-metrics strong { display: block; }.world-metrics small { color: #6e8590; font: 600 7px "Arial Narrow",sans-serif; letter-spacing: .12em; }.world-metrics strong { margin-top: 3px; font: 600 14px "Arial Narrow",sans-serif; color: #dbe6e9; }.world-metrics a { margin-left: auto; align-self: end; padding: 0 10px 7px; color: #607985; font-size: 7px; text-decoration: none; }

.maplibregl-popup-content { color: #dbe6e9; background: rgba(7,17,31,.96); border: 1px solid var(--line); border-radius: 0; box-shadow: 0 14px 36px rgba(0,0,0,.4); padding: 10px 12px; font-size: 10px; }.maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: rgba(7,17,31,.96); }.maplibregl-popup-close-button { color: #91a5ae; padding: 3px 7px; }

.cell-inspector { position: absolute; left: 50%; bottom: 3.6vh; transform: translate(-50%, calc(100% + 40px)); width: min(560px, 72vw); min-height: 86px; z-index: 8; display: grid; grid-template-columns: 60px 1fr 110px; align-items: center; gap: 16px; padding: 12px 14px; background: rgba(7,17,31,.94); border: 1px solid rgba(241,199,91,.24); box-shadow: 0 18px 50px rgba(0,0,0,.42); backdrop-filter: blur(15px); opacity: 0; transition: .25s ease; }
.cell-inspector.visible { transform: translate(-50%, 0); opacity: 1; }
.inspector-close { position: absolute; right: 5px; top: 3px; border: 0; background: none; color: var(--muted); cursor: pointer; }
.cell-badge { width: 52px; height: 58px; display: grid; place-items: center; clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); background: #223b49; color: var(--gold); font: 600 9px "Oswald"; }
.cell-copy h2 { margin: 3px 0; font: 600 18px "Oswald"; text-transform: uppercase; }.cell-copy p { margin: 0; color: var(--muted); font-size: 10px; }
.defense-meter { border-left: 1px solid var(--line); padding-left: 13px; }.defense-meter span { color: var(--muted); font: 600 8px "Oswald"; }.defense-meter strong { float: right; font: 600 12px "Oswald"; }.defense-meter i { display: block; clear: both; height: 3px; background: #253746; margin-top: 7px; }.defense-meter b { display: block; height: 100%; background: var(--danger); }

.toast { position: absolute; left: 50%; top: 20px; transform: translate(-50%,-30px); opacity: 0; z-index: 30; padding: 10px 16px; border: 1px solid var(--line); background: #102433; box-shadow: 0 12px 35px rgba(0,0,0,.35); font-size: 11px; transition: .2s; pointer-events: none; }.toast.show { opacity: 1; transform: translate(-50%,0); }.toast.error { border-color: rgba(255,113,91,.55); }

.drawer-backdrop { position: fixed; inset: 76px 0 0; z-index: 30; background: rgba(1,7,13,.54); opacity: 0; pointer-events: none; transition: .25s; backdrop-filter: blur(2px); }
.drawer-backdrop.visible { opacity: 1; pointer-events: auto; }
.context-drawer { position: fixed; right: 0; top: 76px; bottom: 0; width: min(430px, 92vw); z-index: 31; background: #0a1827; border-left: 1px solid var(--line); box-shadow: -18px 0 60px rgba(0,0,0,.42); transform: translateX(100%); transition: .28s ease; overflow: auto; }
.context-drawer.visible { transform: translateX(0); }
.drawer-header { height: 92px; display: flex; justify-content: space-between; align-items: center; padding: 0 24px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: rgba(10,24,39,.97); z-index: 2; }
.drawer-header h2 { margin: 4px 0 0; font: 600 27px "Oswald"; text-transform: uppercase; }.drawer-header button { border: 0; background: none; color: var(--muted); font-size: 26px; cursor: pointer; }
.drawer-content { padding: 22px 24px 40px; }
.metric-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 22px; }.metric { border: 1px solid var(--line); padding: 14px; background: rgba(255,255,255,.018); }.metric small,.metric strong { display: block; }.metric small { color: var(--muted); font: 600 9px "Oswald"; letter-spacing: .1em; }.metric strong { margin-top: 6px; font: 600 24px "Oswald"; color: var(--gold); }
.section-title { margin: 24px 0 10px; font: 600 11px "Oswald"; letter-spacing: .15em; color: var(--muted); }
.ranking-row { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 9px; padding: 11px 0; border-bottom: 1px solid var(--line); }.ranking-row .rank { color: var(--muted); font: 600 13px "Oswald"; }.ranking-row strong { font-size: 12px; }.ranking-row small { display: block; color: var(--muted); font-size: 9px; }.ranking-row .score { color: var(--gold); font: 600 14px "Oswald"; }
.king-card { padding: 18px; border: 1px solid rgba(241,199,91,.28); background: linear-gradient(135deg,rgba(241,199,91,.08),transparent); }.king-card .crown { font-size: 28px; }.king-card h3 { margin: 6px 0 2px; font: 600 22px "Oswald"; }.king-card p { margin: 0; color: var(--muted); font-size: 10px; }
.profile-form { display: grid; gap: 11px; }.profile-form label { display: grid; gap: 6px; color: var(--muted); font: 600 9px "Oswald"; letter-spacing: .1em; }.profile-form input,.profile-form textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--ink); padding: 10px; font: 12px Arial,sans-serif; }.profile-form textarea { min-height: 78px; resize: vertical; }.profile-form button { height: 42px; border: 1px solid rgba(241,199,91,.5); background: rgba(241,199,91,.1); color: var(--gold); font: 600 10px "Oswald"; letter-spacing: .12em; cursor: pointer; }.profile-form button:hover { background: var(--gold); color: #151812; }.profile-preview { margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.018); }.profile-preview img { width: 42px; height: 42px; object-fit: cover; float: right; border: 1px solid var(--line); }.profile-preview strong,.profile-preview small { display: block; }.profile-preview small { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.full-feed .pulse-event { grid-template-columns: 28px 1fr auto; padding: 12px 0; }.full-feed .pulse-event p { font-size: 11px; }
.roadmap-phase { display: grid; grid-template-columns: 42px 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }.phase-code { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--line); font: 600 11px "Oswald"; }.roadmap-phase strong { font-size: 11px; }.roadmap-phase p { margin: 3px 0 0; color: var(--muted); font-size: 9px; line-height: 1.45; }.phase-status { font-size: 8px; padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); }.phase-status.live { color: #69dda1; border-color: rgba(105,221,161,.3); }.phase-status.demo { color: var(--gold); border-color: rgba(241,199,91,.3); }.phase-status.locked { color: #81949d; }
.notice { padding: 13px; border-left: 2px solid var(--gold); background: rgba(241,199,91,.06); color: #bbc9ce; font-size: 10px; line-height: 1.55; }.notice.danger { border-color: var(--danger); background: rgba(255,113,91,.06); }
.button-secondary { width: 100%; height: 42px; border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; margin-top: 10px; }.button-secondary:hover { border-color: var(--gold); color: var(--gold); }
.account-card { padding: 18px; border: 1px solid rgba(241,199,91,.45); background: linear-gradient(145deg,rgba(241,199,91,.1),rgba(18,39,55,.32)); }.account-card header { display:flex; gap:12px; align-items:center; }.account-card header small,.account-stat-grid small,.achievement-row small { display:block; color:var(--muted); font:600 9px "Oswald"; letter-spacing:.12em; }.account-mark { display:grid; place-items:center; width:34px; height:34px; border:1px solid var(--gold); color:var(--gold); }.account-card h3 { margin:2px 0; font:600 23px "Oswald"; }.account-card p { margin:0; color:var(--muted); font-size:10px; overflow-wrap:anywhere; }.account-stat-grid { display:grid; grid-template-columns:1.35fr 1fr 1fr; margin-top:16px; border:1px solid var(--line); }.account-stat-grid>div { min-width:0; padding:11px 10px; border-right:1px solid var(--line); }.account-stat-grid>div:last-child { border-right:0; }.account-stat-grid strong { display:block; margin-top:5px; color:var(--ink); font:600 15px "Oswald"; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }.account-stat-grid .account-credit strong { color:var(--gold); font-size:21px; }.account-stat-grid em { color:var(--muted); font:600 8px "Oswald"; letter-spacing:.08em; font-style:normal; }.achievement-row { display:flex; align-items:center; gap:8px; margin-top:12px; }.achievement { display:grid; place-items:center; width:27px; height:27px; border:1px solid var(--line); color:#546b76; font-size:14px; }.achievement.active { color:var(--gold); border-color:rgba(241,199,91,.65); background:rgba(241,199,91,.1); }.achievement-row small { margin-left:3px; letter-spacing:.07em; }
.account-country-action { display:flex; align-items:center; justify-content:space-between; gap:5px; width:100%; margin-top:5px; padding:0; border:0; background:transparent; color:var(--ink); font:600 15px "Oswald"; text-align:left; cursor:pointer; white-space:nowrap; overflow:hidden; }.account-country-action:hover { color:var(--gold); }.account-country-action span { color:var(--gold); font-size:15px; }.account-country-action:disabled { cursor:default; color:var(--ink); }.account-country-action:disabled span { display:none; }
.account-country-action.is-empty { padding:5px 7px; border:1px solid rgba(241,199,91,.55); background:rgba(241,199,91,.08); color:var(--gold); }.account-country-action.is-empty:hover { background:var(--gold); color:#151812; }.account-country-action.is-empty:hover span { color:#151812; }
.onboarding-mission { margin-top:12px; padding:12px; border-left:2px solid var(--gold); background:rgba(241,199,91,.07); }.onboarding-mission small,.onboarding-mission strong { display:block; }.onboarding-mission small { color:var(--gold); font:600 9px "Oswald"; letter-spacing:.12em; }.onboarding-mission strong { margin-top:4px; font:600 18px "Oswald"; }.onboarding-mission p { margin:4px 0 0; line-height:1.45; }.onboarding-mission .button-secondary { margin-top:10px; color:var(--gold); border-color:rgba(241,199,91,.52); }.onboarding-mission.sealed { border-color:#69dda1; background:rgba(105,221,161,.06); }.onboarding-mission.sealed small { color:#69dda1; }
.profile-bonus { margin:14px 0; padding:13px; border:1px solid rgba(241,199,91,.42); background:linear-gradient(135deg,rgba(241,199,91,.09),rgba(255,255,255,.012)); }.profile-bonus small,.profile-bonus strong { display:block; }.profile-bonus small { color:var(--gold); font:600 9px "Oswald"; letter-spacing:.13em; }.profile-bonus strong { margin-top:5px; font:600 16px "Oswald"; }.profile-bonus p { margin:10px 0 0; color:var(--muted); font-size:9px; line-height:1.5; }.profile-bonus-progress { height:5px; margin-top:10px; background:rgba(255,255,255,.08); }.profile-bonus-progress span { display:block; height:100%; background:var(--gold); transition:width .2s ease; }.profile-bonus-steps { display:grid; gap:5px; margin-top:10px; }.profile-bonus-step { color:var(--muted); font-size:9px; }.profile-bonus-step.done { color:#86e4ac; }
.achievement-row .achievement:not(.active) { opacity:.48; }.achievement-row .achievement.active { box-shadow:0 0 12px rgba(241,199,91,.16); }
.hall-list { margin-top:10px; border:1px solid var(--line); }.hall-row { display:grid; grid-template-columns:28px 32px 1fr auto; align-items:center; gap:9px; padding:10px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.015); }.hall-row:last-child { border-bottom:0; }.hall-row img,.hall-avatar-fallback { width:30px; height:30px; object-fit:cover; border:1px solid rgba(241,199,91,.38); }.hall-avatar-fallback { display:grid; place-items:center; color:var(--gold); font:600 14px "Oswald"; }.hall-row strong,.hall-row small { display:block; }.hall-row strong { font-size:11px; }.hall-row small { margin-top:3px; color:var(--muted); font-size:8px; line-height:1.35; }.hall-row:first-child { background:linear-gradient(90deg,rgba(241,199,91,.13),rgba(255,255,255,.015)); }.hall-row:first-child .rank { color:var(--gold); }
.share-event-list { display: grid; gap: 8px; }.share-event-list > button { width: 100%; display: grid; grid-template-columns: 30px 1fr auto; gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); background: rgba(255,255,255,.018); text-align: left; cursor: pointer; }.share-event-list > button:hover { border-color: rgba(241,199,91,.45); background: rgba(241,199,91,.045); }.share-event-list > button > span:first-child { font-size: 20px; }.share-event-list strong,.share-event-list small { display: block; }.share-event-list strong { font-size: 10px; line-height: 1.35; }.share-event-list small { margin-top: 4px; color: var(--muted); font-size: 8px; }.share-event-list b { color: var(--gold); font-size: 16px; }.empty-state { color: var(--muted); font-size: 10px; line-height: 1.6; }
.social-card-preview { border: 1px solid rgba(241,199,91,.25); background: rgba(255,255,255,.018); padding: 12px; }.social-card-preview img { width: 100%; display: block; margin-bottom: 14px; border: 1px solid var(--line); background: #06131f; }.social-card-preview h3 { margin: 6px 0; font: 600 21px "Oswald"; text-transform: uppercase; }.social-card-preview p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.social-card-preview .share-owner { display: flex; align-items: center; gap: 9px; margin-top: 12px; }.social-card-preview .share-owner-avatar { width: 30px; height: 30px; margin: 0; object-fit: cover; border-radius: 50%; border-color: rgba(241,199,91,.45); }.social-card-preview .share-owner p { flex: 1; }
.share-provider-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 14px 0 8px; }.share-provider-grid a { display: grid; grid-template-columns: 24px 1fr auto; gap:9px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); color: var(--ink); text-decoration: none; font-size: 10px; transition:border-color .18s ease,background .18s ease,transform .18s ease; }.share-provider-grid a:hover { border-color: rgba(241,199,91,.45); background:rgba(255,255,255,.025); transform:translateY(-1px); }.share-provider-grid strong { font-size:10px; font-weight:600; }.share-provider-icon { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,255,.045); }.share-provider-icon svg { width:15px; height:15px; fill:currentColor; }.share-provider-arrow { color:var(--gold); }.share-x .share-provider-icon { color:#edf4f7; }.share-bluesky .share-provider-icon { color:#1685f8; }.share-facebook .share-provider-icon { color:#4389f5; }.share-linkedin .share-provider-icon { color:#3a9bd5; }.share-whatsapp .share-provider-icon { color:#39d87a; }.share-telegram .share-provider-icon { color:#42b9e8; }
.share-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }.share-actions button { height: 40px; border: 1px solid rgba(241,199,91,.48); background: rgba(241,199,91,.08); color: var(--gold); font: 600 9px "Oswald"; letter-spacing: .1em; cursor: pointer; }.share-actions button:hover { background: var(--gold); color: #151812; }.share-actions button:disabled { opacity: .35; cursor: not-allowed; }
.economy-pack { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding: 14px; border: 1px solid rgba(241,199,91,.3); background: linear-gradient(120deg,rgba(241,199,91,.09),rgba(255,255,255,.015)); }.economy-pack small,.economy-pack strong,.economy-pack span { display: block; }.economy-pack small { color: var(--gold); font: 600 8px "Oswald"; letter-spacing: .12em; }.economy-pack strong { margin-top: 4px; font: 600 20px "Oswald"; }.economy-pack span { margin-top: 3px; color: var(--muted); font-size: 9px; }.economy-pack button { min-width: 96px; height: 36px; border: 1px solid var(--line); background: transparent; color: #8fa2aa; font: 600 8px "Oswald"; letter-spacing: .08em; cursor: not-allowed; }
.economy-pack-grid { display:grid; gap:9px; }.economy-pack-grid .economy-pack { margin:0; }.economy-pack.featured { border-color:rgba(241,199,91,.72); background:linear-gradient(120deg,rgba(241,199,91,.17),rgba(255,255,255,.02)); }.referral-card { display:grid; gap:7px; margin:18px 0; padding:14px; border:1px solid rgba(91,188,218,.35); background:rgba(48,114,145,.1); }.referral-card small { color:#8dd5ed; font:600 8px "Oswald"; letter-spacing:.12em; }.referral-card strong { font:600 17px "Oswald"; }.referral-card p { margin:0; color:var(--muted); font-size:10px; line-height:1.45; }.referral-card button { justify-self:start; padding:9px 12px; border:1px solid var(--line); background:transparent; color:#8fa2aa; font:600 8px "Oswald"; letter-spacing:.08em; cursor:not-allowed; }

@keyframes pulse { 50% { opacity: .45; box-shadow: 0 0 0 8px rgba(85,220,146,0), 0 0 6px #55dc92; } }
@keyframes contested { to { filter: saturate(1.18) brightness(1.14) drop-shadow(0 0 12px rgba(255,113,91,.7)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes action-ready { 50% { box-shadow:0 20px 55px rgba(0,0,0,.52),0 0 46px rgba(241,199,91,.52); } }
@keyframes target-halo { 50% { transform:scale(1.13); opacity:.62; } }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 1fr auto auto auto; padding: 0 16px; gap: 10px; }.world-status { display: none; }.player-chip span:last-child { display: none; }.primary-nav { order: 2; }.language-control { order:3; }.player-chip { order: 4; }
  .map-title { top: 4vh; }.map-title p { display: none; }.intel-stack { width: 230px; }.intel-stack .pulse-card { display: none; }.map-legend { display: none; }.world-metrics { right: 270px; }.world-metrics span:nth-child(2),.world-metrics span:nth-child(3){display:none;}
}

@media (max-width: 680px) {
  .topbar { height: 64px; grid-template-columns: 1fr auto auto; }.brand strong { font-size: 15px; }.brand small { font-size: 7px; }.brand-mark { width: 32px; height: 32px; }.player-chip,.language-control span { display: none; }.language-control { min-width: 48px; }.language-control select { width: 48px; }.primary-nav { height: 64px; }.nav-button { width: 36px; }
  .battlefield,.map-stage { min-height: calc(100vh - 64px); }.drawer-backdrop { inset-top: 64px; }.context-drawer { top: 64px; }
  .map-title { left: 18px; top: 18px; }.map-title h1 { font-size: 24px; }.map-title .eyebrow { font-size: 8px; }.map-mode-switch { top: auto; bottom: 78px; }.front-control span { display:none; }.front-control select { min-width:108px; max-width:128px; }
  .map-hud { right: 12px; top: 88px; flex-direction: column; align-items: stretch; }.country-control { min-width: 145px; }.credits-card { justify-content: space-between; }
  .map-tools { left: 12px; top: 44%; }.intel-stack { right: 10px; top: 165px; bottom: auto; width: 190px; }.nation-card .king-mini,.nation-card .nation-stats { display: none; }.world-metrics { left: 10px; right: 10px; bottom: 10px; }.world-metrics span { min-width: 0; flex:1; padding:8px; }.world-metrics span:nth-child(2),.world-metrics span:nth-child(3),.world-metrics a { display:none; }
  .battle-action { width:90px;height:90px;top:auto;bottom:82px;transform:translateX(-50%); }.battle-action:hover:not(:disabled) { transform:translateX(-50%) scale(1.04); }.battle-action svg { width:30px;height:30px; }.battle-action strong { font-size:11px; }.cell-inspector { width: calc(100vw - 20px); bottom: 10px; grid-template-columns: 46px 1fr; gap: 10px; padding: 10px; }.cell-badge { width: 42px; height: 48px; }.defense-meter { display: none; }.cell-copy h2 { font-size: 14px; }.cell-copy p { font-size: 9px; }
}

@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }