:root {
  color-scheme: dark;
  --ink: #eaf2ec;
  --muted: #91a4a1;
  --faint: #607471;
  --night: #081318;
  --panel: rgba(10, 24, 29, .94);
  --panel-2: rgba(16, 35, 40, .96);
  --line: rgba(219, 200, 135, .16);
  --line-cool: rgba(163, 205, 203, .13);
  --gold: #d9bd72;
  --gold-bright: #f0d78a;
  --teal: #6fb2b2;
  --teal-deep: #376f76;
  --danger: #c87869;
  --shadow: 0 24px 70px rgba(0, 0, 0, .38);
}
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--night); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.app-shell { position: relative; width: 100%; height: 100%; background: #102229; isolation: isolate; }

.topbar { height: 72px; position: absolute; inset: 0 0 auto 0; z-index: 40; display: grid; grid-template-columns: minmax(190px, 1fr) minmax(320px, 560px) minmax(250px, 1fr); align-items: center; gap: 24px; padding: 0 22px; background: linear-gradient(180deg, rgba(7,17,21,.98), rgba(7,17,21,.91)); border-bottom: 1px solid var(--line); box-shadow: 0 8px 28px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.brand { width: max-content; display: flex; align-items: center; gap: 11px; padding: 4px; border: 0; background: transparent; cursor: pointer; }
.brand img { width: 47px; height: 47px; object-fit: contain; filter: drop-shadow(0 4px 9px rgba(0,0,0,.38)); }
.brand span { display: grid; text-align: left; line-height: 1; letter-spacing: .16em; }
.brand b { font-family: Georgia, serif; font-size: 15px; color: var(--gold-bright); font-weight: 500; }
.brand small { margin-top: 5px; color: var(--muted); font-size: 9px; letter-spacing: .42em; }
.search-wrap { position: relative; width: 100%; height: 42px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border: 1px solid var(--line-cool); border-radius: 10px; background: rgba(17,37,42,.68); box-shadow: inset 0 1px rgba(255,255,255,.025); }
.search-wrap:focus-within { border-color: rgba(217,189,114,.48); box-shadow: 0 0 0 3px rgba(217,189,114,.08); }
.search-wrap svg { width: 17px; color: var(--muted); }
.search-wrap input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 13px; }
.search-wrap input::placeholder { color: #748784; }
.search-wrap kbd { min-width: 21px; padding: 2px 6px; border: 1px solid rgba(255,255,255,.1); border-radius: 5px; background: rgba(255,255,255,.045); color: var(--faint); font: 11px ui-monospace, monospace; text-align: center; }
.search-results { position: absolute; top: calc(100% + 8px); inset-inline: 0; padding: 8px; background: rgba(9,23,28,.98); border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.search-results button { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 7px; background: transparent; padding: 9px 10px; color: var(--ink); cursor: pointer; text-align: left; }
.search-results button:hover { background: rgba(111,178,178,.1); }
.search-results small { color: var(--gold); text-transform: uppercase; letter-spacing: .12em; font-size: 9px; }
.top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.world-button { height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 11px; border: 1px solid var(--line-cool); border-radius: 8px; background: rgba(20,39,44,.7); font-size: 12px; cursor: pointer; }
.world-button svg { width: 13px; }
.world-orb { width: 9px; height: 9px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 3px rgba(111,178,178,.1), 0 0 12px rgba(111,178,178,.55); }
.online { height: 39px; display: flex; align-items: center; gap: 5px; padding: 0 4px 0 9px; color: var(--muted); }
.online > span { width: 6px; height: 6px; background: #7ecb8f; border-radius: 50%; box-shadow: 0 0 9px rgba(126,203,143,.8); }
.online b { font-size: 12px; color: var(--ink); }
.online em { font-style: normal; font-size: 11px; }
.icon-button { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-cool); border-radius: 8px; background: rgba(17,35,40,.7); cursor: pointer; }
.panel-toggle { display: none; }

.map-stage { position: absolute; inset: 72px 390px 0 0; overflow: hidden; background: #13282c; }
.map-viewport { position:absolute; inset:0; overflow:hidden; outline:none; cursor:grab; touch-action:none; overscroll-behavior:contain; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.map-viewport.dragging { cursor:grabbing; }
.tile-pane,.land-pane,.capture-zone-pane,.grid-pane,.player-pane { position:absolute; inset:0; }
.tile-pane,.land-pane,.capture-zone-pane,.grid-pane,.player-pane { pointer-events:none; }
.tile-pane { overflow:hidden; background:#10242a; }
.map-tile { position:absolute; display:block; max-width:none; max-height:none; pointer-events:none; user-select:none; -webkit-user-drag:none; transform-origin:0 0; image-rendering:pixelated; image-rendering:crisp-edges; }
.map-tile.loading { opacity:0; }
.map-tile.ready { opacity:1; }
.map-tile.missing { display:none; }
.land-pane,.capture-zone-pane,.grid-pane { width:100%; height:100%; overflow:visible; }
.capture-zone-pane{z-index:2}.capture-zone-fill{transition:fill .28s ease,fill-opacity .2s ease}.capture-zone-fill.selected{fill-opacity:.52}.capture-zone-border{stroke-linejoin:round;vector-effect:non-scaling-stroke;opacity:.9}.capture-zone-border.capturing{stroke-dasharray:10 7;animation:captureMarch 1.25s linear infinite}.capture-zone-border.contested{stroke-dasharray:5 4;animation:capturePulse 1.3s ease-in-out infinite}.capture-icon{color:#e2bd72;background:rgba(226,189,114,.10)}@keyframes captureMarch{to{stroke-dashoffset:-34}}@keyframes capturePulse{50%{opacity:.45}}
.land-shape { vector-effect:non-scaling-stroke; transition:fill-opacity .12s,stroke-opacity .12s; }
.land-fill.selected { fill-opacity:.40!important; }
.land-border.selected { stroke:#050708!important; stroke-width:2.4px!important; stroke-opacity:1!important; }
.nation-border.selected { stroke:#f0d78a!important; stroke-width:3px!important; }
.grid-line { vector-effect:non-scaling-stroke; stroke:rgba(226,235,230,.15); stroke-width:1px; }
.player-pane { overflow:hidden; }
.player-marker { position:absolute; z-index:5; display:flex; flex-direction:column; align-items:center; gap:3px; transform:translate(-50%,-50%); border:0; padding:0; background:transparent; color:#eef5f0; cursor:pointer; pointer-events:auto; filter:drop-shadow(0 3px 5px rgba(0,0,0,.5)); }
.player-marker img,.player-marker .marker-fallback { width:32px; height:32px; display:grid; place-items:center; border-radius:0; background:#203a40; image-rendering:pixelated; box-shadow:0 0 0 1px rgba(236,216,151,.45),0 3px 7px rgba(0,0,0,.4); }
.player-marker .marker-fallback { color:var(--gold); font:15px Georgia,serif; }
.player-marker .direction { width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:8px solid var(--gold-bright); transform-origin:50% 18px; position:absolute; top:-8px; left:50%; margin-left:-4px; pointer-events:none; }
.player-marker b { max-width:130px; padding:2px 5px; border-radius:4px; background:rgba(7,20,24,.82); font-size:9px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.player-marker:hover img { box-shadow:0 0 0 2px var(--gold-bright),0 3px 9px rgba(0,0,0,.5); }
.map-vignette { position: absolute; z-index:10; inset: 0; pointer-events: none; background: radial-gradient(circle at 46% 45%, transparent 42%, rgba(3,12,15,.22) 100%), linear-gradient(180deg, rgba(4,13,16,.08), transparent 14%, transparent 80%, rgba(4,13,16,.2)); }
.map-tools { position: absolute; z-index:20; left: 18px; top: 18px; display: grid; width: 39px; padding: 3px; background: rgba(7,20,24,.88); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.25); backdrop-filter: blur(10px); }
.map-tools button { width: 31px; height: 31px; border: 0; border-radius: 7px; background: transparent; font: 20px Georgia,serif; cursor: pointer; }
.map-tools button:hover { background: rgba(217,189,114,.12); color: var(--gold-bright); }
.map-tools span { height: 1px; margin: 2px 5px; background: var(--line-cool); }
.map-tools svg { width: 17px; }
.coordinates { position: absolute; z-index:20; bottom: 19px; left: 19px; height: 38px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line-cool); border-radius: 8px; background: rgba(7,20,24,.85); backdrop-filter: blur(10px); box-shadow: 0 9px 24px rgba(0,0,0,.22); }
.coordinates .crosshair { color: var(--gold); font-size: 16px; }
.coordinates b { color: var(--ink); font: 11px ui-monospace, monospace; font-weight: 500; }
.coordinates small { padding-left: 8px; border-left: 1px solid var(--line-cool); color: var(--muted); font-size: 10px; }
.scale { position: absolute; z-index:20; bottom: 22px; right: 20px; display: flex; align-items: flex-end; gap: 8px; color: rgba(235,242,236,.74); font-size: 9px; text-shadow: 0 1px 2px #000; }
.scale span { width: 82px; height: 7px; border: 1px solid currentColor; border-top: 0; }
.scale b { font-weight: 400; }
.render-status { position: absolute; z-index:22; left: 50%; bottom: 20px; transform: translateX(-50%); align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line); border-radius: 9px; background: rgba(7,20,24,.9); box-shadow: var(--shadow); }
.render-status > span { width: 18px; height: 18px; border: 2px solid rgba(217,189,114,.2); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
.render-status p { display: grid; margin: 0; }
.render-status b { font-size: 11px; font-weight: 500; }.render-status small { color: var(--muted); font-size: 9px; }
.location-card { position: absolute; z-index:24; left: 50%; top: 50%; width: 220px; padding: 15px; transform: translate(-50%,-50%); border: 1px solid var(--line); border-radius: 10px; background: var(--panel); box-shadow: var(--shadow); }
.location-card .location-close { position:absolute; right:6px; top:5px; width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:6px; background:transparent; color:var(--muted); cursor:pointer; font-size:18px; line-height:1; z-index:2; }.location-card .location-close:hover { background:rgba(255,255,255,.07); color:var(--ink); }
.location-card small { display:block; color:var(--gold); font-size:8px; letter-spacing:.16em; }.location-card b { display:block; margin-top:7px; font:18px Georgia,serif; }.location-card span { display:block; margin-top:5px; color:var(--muted); font-size:11px; }.location-card .copy-coordinates { position:static; width:100%; margin-top:12px; padding:8px 10px; border:1px solid var(--line); border-radius:6px; background:rgba(217,189,114,.08); color:var(--gold-bright); cursor:pointer; font-size:10px; }.location-card .copy-coordinates:hover { background:rgba(217,189,114,.15); }
.hover-card { position:absolute; z-index:18; min-width:170px; max-width:260px; padding:10px 12px; border:1px solid rgba(219,200,135,.22); border-radius:9px; background:rgba(7,20,24,.94); box-shadow:0 12px 32px rgba(0,0,0,.34); backdrop-filter:blur(10px); pointer-events:none; }
.hover-card > small,.hover-player small { display:block; color:var(--gold); font-size:7px; letter-spacing:.16em; }
.hover-card > b,.hover-player b { display:block; margin-top:4px; color:var(--ink); font:500 14px Georgia,serif; }
.hover-card > em,.hover-player em { display:block; margin-top:4px; color:var(--muted); font-style:normal; font-size:9px; }
.hover-player { display:flex; align-items:center; gap:9px; }.hover-player img { width:38px; height:38px; border-radius:0; image-rendering:pixelated; }.hover-player span { min-width:0; }
.detail-link { width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 12px; border:1px solid var(--line-cool); border-radius:9px; background:rgba(111,178,178,.04); color:var(--ink); text-align:left; cursor:pointer; }.detail-link:hover { border-color:rgba(217,189,114,.34); background:rgba(217,189,114,.06); }.detail-link span { display:grid; gap:4px; }.detail-link b { font-size:11px; font-weight:500; }.detail-link small { color:var(--muted); font-size:9px; }.detail-link em { color:var(--gold); font-style:normal; font-size:17px; }.player-face { width:72px!important; height:72px!important; border-radius:0!important; image-rendering:pixelated; }

.sidebar { position: absolute; z-index: 30; inset: 72px 0 0 auto; width: 390px; background: linear-gradient(155deg, rgba(14,31,36,.98), rgba(7,19,23,.98)); border-left: 1px solid var(--line); box-shadow: -18px 0 48px rgba(0,0,0,.2); }
.panel-view { height: 100%; display: flex; flex-direction: column; }
.panel-heading { min-height: 92px; display: flex; align-items: center; justify-content: space-between; padding: 18px 21px 14px; }
.eyebrow { margin: 0 0 7px; color: var(--gold); font-size: 8px; font-weight: 500; letter-spacing: .24em; }
.panel-heading h2, .layer-content h2 { margin: 0; font: 500 21px Georgia, serif; letter-spacing: .015em; }
.close-panel { display: none; }
.tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); min-height: 43px; padding: 0 17px; border-bottom: 1px solid var(--line-cool); }
.tabs button { position: relative; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.tabs button::after { content:""; position: absolute; left: 17px; right: 17px; bottom: -1px; height: 2px; background: transparent; }
.tabs button.active { color: var(--gold-bright); }.tabs button.active::after { background: var(--gold); box-shadow: 0 0 10px rgba(217,189,114,.36); }
.tabs button span { display: inline-grid; place-items: center; min-width: 18px; height: 16px; margin-left: 3px; padding: 0 4px; border-radius: 8px; background: rgba(111,178,178,.14); color: var(--teal); font-size: 9px; }
.panel-scroll { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(217,189,114,.2) transparent; }
.entity-list { padding: 10px 11px 18px; }
.entity-row { width: 100%; display: grid; grid-template-columns: 41px 1fr auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid transparent; border-radius: 9px; background: transparent; text-align: left; cursor: pointer; }
.entity-row:hover { border-color: var(--line-cool); background: rgba(111,178,178,.055); }
.entity-row img, .avatar-fallback { width: 41px; height: 41px; object-fit: cover; border-radius: 0; background: #213b40; image-rendering: pixelated; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.avatar-fallback { display: grid; place-items: center; font: 18px Georgia,serif; color: var(--gold); }
.entity-row > span { min-width: 0; display: grid; gap: 4px; }.entity-row b { overflow: hidden; text-overflow: ellipsis; color: #e5eee9; font-size: 12px; font-weight: 500; }.entity-row small { overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 9px; white-space: nowrap; }
.entity-row em { align-self: center; color: var(--faint); font-style: normal; font-size: 9px; }.entity-row em.online-dot { width: 7px; height: 7px; border-radius: 50%; background: #79c78c; box-shadow: 0 0 8px rgba(121,199,140,.5); }
.entity-row .crest { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--entity-color) 45%, transparent); border-radius: 7px; background: color-mix(in srgb, var(--entity-color) 16%, #0c2025); color: var(--entity-color); font: 18px Georgia,serif; }
.entity-row .entity-flag { width:39px; height:39px; padding:2px; object-fit:contain; border:1px solid color-mix(in srgb, var(--entity-color) 45%, transparent); border-radius:7px; background:#09191d; image-rendering:auto; box-shadow:inset 0 0 0 1px rgba(255,255,255,.04); }
.empty-list { margin: 30px 14px; color: var(--muted); font-size: 11px; text-align: center; }
.layer-footer { padding: 11px 13px 14px; border-top: 1px solid var(--line-cool); }
.layer-footer button { width: 100%; display: grid; grid-template-columns: 32px 1fr auto; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--line-cool); border-radius: 9px; background: rgba(111,178,178,.045); text-align: left; cursor: pointer; }
.layer-footer svg { color: var(--gold); }.layer-footer span { display: grid; gap: 2px; }.layer-footer b { font-size: 11px; font-weight: 500; }.layer-footer small { color: var(--muted); font-size: 9px; }.layer-footer em { color: var(--teal); font-style: normal; font-size: 9px; }

.detail-top { min-height: 54px; display: grid; grid-template-columns: 38px 1fr 38px; align-items: center; padding: 7px 11px; border-bottom: 1px solid var(--line-cool); }
.detail-top button { width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 7px; background: transparent; color: var(--muted); cursor: pointer; font-size: 20px; }
.detail-top button:hover { background: rgba(255,255,255,.045); color: var(--ink); }.detail-top span { text-align: center; color: var(--gold); font-size: 8px; letter-spacing: .22em; }
.detail-hero { position: relative; min-height: 194px; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; overflow: hidden; border-bottom: 1px solid var(--line); background: radial-gradient(circle at 85% 12%, color-mix(in srgb, var(--hero-color) 30%, transparent), transparent 48%), linear-gradient(155deg, color-mix(in srgb, var(--hero-color) 17%, #122a2f), #091a1e 78%); }
.detail-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background-image: linear-gradient(30deg, transparent 48%, rgba(255,255,255,.025) 49%, rgba(255,255,255,.025) 51%, transparent 52%); background-size: 24px 42px; opacity:.7; }
.detail-hero > * { position: relative; z-index: 1; }.detail-hero .flag { position: absolute; top: 20px; right: 21px; width: 96px; height: 58px; object-fit: cover; border: 1px solid rgba(236,216,151,.35); border-radius: 5px; background: rgba(0,0,0,.25); box-shadow: 0 10px 25px rgba(0,0,0,.28); }
.detail-hero .no-flag { position: absolute; top: 20px; right: 21px; width: 96px; height: 58px; display: grid; place-items:center; border: 1px dashed rgba(236,216,151,.25); border-radius: 5px; color: var(--muted); font-size: 9px; }
.detail-hero small { margin-bottom: 8px; color: var(--gold); font-size: 8px; letter-spacing: .2em; }.detail-hero h2 { max-width: 235px; margin: 0; font: 500 28px Georgia,serif; letter-spacing: .015em; }.detail-hero p { margin: 7px 0 0; color: #9fb2ae; font-size: 11px; }
.detail-body { padding: 18px 20px 30px; }
.detail-section { margin-bottom: 22px; }.detail-section > h3 { margin: 0 0 10px; color: var(--gold); font-size: 8px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.leader { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid var(--line-cool); border-radius: 9px; background: rgba(255,255,255,.025); }.leader img { width: 46px; height: 46px; border-radius: 0; image-rendering: pixelated; }.leader > span { display:grid; gap:4px; }.leader b { font-size: 12px; font-weight:500; }.leader small { color:var(--muted); font-size:9px; }
.stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); border: 1px solid var(--line-cool); border-radius: 9px; overflow: hidden; }.stat-grid div { min-width: 0; padding: 12px; text-align: center; background: rgba(255,255,255,.018); }.stat-grid div + div { border-left: 1px solid var(--line-cool); }.stat-grid b { display:block; font: 18px Georgia,serif; color:var(--ink); }.stat-grid small { display:block; margin-top:4px; color:var(--muted); font-size:8px; text-transform:uppercase; letter-spacing:.1em; }
.identity-list { border-top: 1px solid var(--line-cool); }.identity-row { display:flex; justify-content:space-between; gap:16px; padding:10px 1px; border-bottom:1px solid var(--line-cool); font-size:10px; }.identity-row span { color:var(--muted); }.identity-row b { font-weight:500; color:var(--ink); }
.relation-row { display:flex; flex-wrap:wrap; gap:6px; }.relation { display:inline-flex; align-items:center; gap:6px; padding:6px 9px; border-radius:6px; background:rgba(111,178,178,.09); color:#b8d6d2; font-size:9px; }.relation::before { content:""; width:5px; height:5px; border-radius:50%; background:var(--teal); }.relation.enemy { background:rgba(200,120,105,.1); color:#d9aaa1; }.relation.enemy::before { background:var(--danger); }.relation.empty { background:transparent; padding-left:0; color:var(--muted); }.relation.empty::before { display:none; }
.member-list { display:grid; grid-template-columns:1fr 1fr; gap:6px; }.member-chip { display:flex; align-items:center; gap:7px; min-width:0; padding:6px; border-radius:6px; background:rgba(255,255,255,.025); color:#cbd8d4; font-size:9px; }.member-chip img { width:24px; height:24px; border-radius:0; image-rendering:pixelated; }.member-chip span { overflow:hidden; text-overflow:ellipsis; }
.layer-content { padding: 25px 21px; overflow:auto; }.layer-content > p { margin:7px 0 24px; color:var(--muted); font-size:11px; }.layer-row { display:grid; grid-template-columns:38px 1fr 37px; align-items:center; gap:10px; padding:13px 2px; border-bottom:1px solid var(--line-cool); cursor:pointer; }.layer-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:rgba(111,178,178,.09); color:var(--teal); font:15px Georgia,serif; }.layer-row > span:nth-child(2) { display:grid; gap:4px; }.layer-row b { font-size:11px; font-weight:500; }.layer-row small { color:var(--muted); font-size:9px; }.layer-row input { position:absolute; opacity:0; }.layer-row i { position:relative; width:34px; height:19px; border-radius:10px; background:#304248; transition:.2s; }.layer-row i::after { content:""; position:absolute; top:3px; left:3px; width:13px; height:13px; border-radius:50%; background:#80918e; transition:.2s; }.layer-row input:checked + i { background:rgba(217,189,114,.38); }.layer-row input:checked + i::after { left:18px; background:var(--gold-bright); }
.toast { position:absolute; z-index:80; left:50%; bottom:24px; max-width:min(420px,calc(100% - 30px)); padding:10px 15px; transform:translate(-50%,20px); border:1px solid var(--line); border-radius:8px; background:rgba(8,21,25,.96); color:var(--ink); box-shadow:var(--shadow); font-size:11px; opacity:0; pointer-events:none; transition:.22s; }.toast.show { transform:translate(-50%,0); opacity:1; }

.intro { position:absolute; z-index:100; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; background:radial-gradient(circle at 50% 44%, rgba(43,87,91,.46), transparent 29%), linear-gradient(145deg,#071317,#0d2429 52%,#07161a); transition:opacity .7s ease, visibility .7s; }.intro::before { content:""; position:absolute; inset:0; opacity:.18; background-image:linear-gradient(30deg,transparent 48%,rgba(217,189,114,.12) 49%,rgba(217,189,114,.12) 50%,transparent 51%); background-size:42px 72px; mask-image:radial-gradient(circle at center,#000,transparent 70%); }.intro.hidden { opacity:0; visibility:hidden; pointer-events:none; }.intro-glow { position:absolute; width:360px; height:360px; border:1px solid rgba(217,189,114,.12); border-radius:50%; box-shadow:0 0 90px rgba(111,178,178,.08),inset 0 0 60px rgba(217,189,114,.045); }.intro-logo { position:relative; width:170px; height:170px; object-fit:contain; filter:drop-shadow(0 18px 22px rgba(0,0,0,.42)); animation:introFloat 5s ease-in-out infinite; }.intro .eyebrow { position:relative; margin:24px 0 12px; }.intro h1 { position:relative; margin:0; color:#f0e5c2; font:500 clamp(38px,6vw,58px) Georgia,serif; letter-spacing:.05em; text-shadow:0 6px 24px rgba(0,0,0,.4); }.intro-copy { position:relative; max-width:430px; margin:14px 20px 23px; color:#a1b2ad; font:14px Georgia,serif; text-align:center; }.primary-action { position:relative; display:flex; align-items:center; gap:18px; padding:11px 18px; border:1px solid rgba(217,189,114,.44); border-radius:7px; background:linear-gradient(180deg,rgba(217,189,114,.16),rgba(217,189,114,.08)); color:var(--gold-bright); font-size:11px; letter-spacing:.08em; cursor:pointer; box-shadow:0 10px 28px rgba(0,0,0,.2); }.primary-action:hover { background:rgba(217,189,114,.2); }.intro-status { position:absolute; bottom:30px; display:flex; align-items:center; gap:8px; color:var(--muted); }.intro-status span { width:6px;height:6px;border-radius:50%;background:#79c78c;box-shadow:0 0 9px rgba(121,199,140,.7); }.intro-status b { font-size:9px;font-weight:400;letter-spacing:.12em;text-transform:uppercase; }
@keyframes introFloat { 50% { transform:translateY(-6px); } } @keyframes spin { to { transform:rotate(360deg); } }

@media (max-width: 900px) {
  .topbar { grid-template-columns:auto 1fr auto; gap:12px; padding:0 13px; }.brand span { display:none; }.brand img { width:43px;height:43px; }.online,.world-button { display:none; }.panel-toggle { display:grid; }.map-stage { right:0; }.sidebar { width:min(390px,100%); transform:translateX(100%); transition:transform .25s ease; }.sidebar.open { transform:translateX(0); }.close-panel { display:grid; }.scale { right:16px; }
}
@media (max-width: 560px) {
  .topbar { height:62px; }.map-stage,.sidebar { top:62px; }.search-wrap { height:39px; }.search-wrap kbd { display:none; }.map-tools { top:14px;left:13px; }.coordinates { left:12px;bottom:13px; }.coordinates small { display:none; }.scale { bottom:17px; }.intro-logo { width:135px;height:135px; }.intro-glow { width:280px;height:280px; }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }

/* Anti-flicker movement: overlays remain visible while dragging. Promoting every map tile
   to its own GPU layer can cause Chromium black-frame flashes, so only tiny player markers
   retain will-change. */
.player-marker { will-change:transform; }

/* Mobile interaction: UI controls use native tap semantics while the map surface owns
   only map pan/pinch gestures. Sidebar contents retain vertical touch scrolling. */
.topbar button,.topbar input,.sidebar button,.sidebar input,.sidebar label,.map-tools button,.player-marker,.port-marker,.warcamp-marker { touch-action:manipulation; }
.sidebar,.panel-scroll,.layer-content { touch-action:pan-y; overscroll-behavior:contain; }

/* Aeterna integrated war-zone layer */
.warzone-icon{color:#f28c18!important}.war-zone-cell{vector-effect:non-scaling-stroke;pointer-events:none}

/* One thin black stroke per country boundary; no coastline or stacked edge strokes. */
.real-border-pane{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:hidden}
.real-border-pane .country-border{pointer-events:none;vector-effect:non-scaling-stroke;stroke:#000;stroke-width:var(--rb-width,1px);stroke-opacity:.95}
.real-border-pane .country-border-disputed{stroke-dasharray:3 2}

/* Plain map background outside the clipped Earth rectangle. */
.map-viewport{background:#10242a}

/* Mobile smooth tiles: isolate terrain paint as one pane; never promote every tile separately. */
@media (pointer: coarse) { .tile-pane { contain: paint; } }