* { margin: 0; padding: 0; box-sizing: border-box; }
    :root {
      --bg: #cfc2a8; --paper: #e3d7bd; --paper-2: #d5c6a8; --panel: rgba(53,43,31,.96); --panel-2: rgba(74,60,43,.96);
      --panel-3: rgba(96,78,56,.92); --border: #8a734d; --gold: #c6a265; --gold-2: #e3c58c; --ink: #1d160f; --text: #2f261c;
      --light: #f4ead3; --danger: #8b2e22; --success: #526a2e; --shadow: 0 12px 28px rgba(0,0,0,.25); --neutral:#8c6f4f;
      --player-fill:#526a2e; --player-stroke:#394a1f; --player-capital-fill:#6d893f; --player-capital-stroke:#30411a;
    }
    body { font-family:'Roboto Condensed',sans-serif; color:var(--text); min-height:100vh; background:linear-gradient(rgba(208,195,168,.90), rgba(208,195,168,.90)), url('https://images.unsplash.com/photo-1517817748493-49ec54a32465?auto=format&fit=crop&w=1600&q=80') center/cover fixed; overflow-x:hidden; }
    body::before { content:""; position:fixed; inset:0; pointer-events:none; background:radial-gradient(circle at center, transparent 0%, rgba(30,20,10,.08) 70%, rgba(20,10,0,.26) 100%), repeating-linear-gradient(0deg, rgba(60,45,25,.03) 0, rgba(60,45,25,.03) 1px, transparent 1px, transparent 4px); mix-blend-mode:multiply; }
    .screen { display:none; min-height:100vh; }
    .screen.active { display:block; }
    .auth-wrap { min-height:100vh; display:grid; place-items:center; padding:30px; }
    .auth-card { width:min(980px,100%); display:grid; grid-template-columns: 1.1fr .9fr; background:linear-gradient(180deg, rgba(53,43,31,.98), rgba(39,30,21,.97)); border:2px solid var(--border); border-radius:18px; overflow:hidden; box-shadow:var(--shadow); }
    .hero { padding:38px; color:var(--light); background:linear-gradient(rgba(29,22,15,.58), rgba(29,22,15,.75)), url('https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=1600&q=80') center/cover; }
    .hero h1 { font-family:'Cinzel',serif; font-size:3rem; line-height:1; letter-spacing:2px; margin-bottom:14px; }
    .hero p { color:#ead8b4; max-width:520px; line-height:1.6; }
    .flow { margin-top:24px; display:grid; gap:12px; }
    .flow div { padding:14px; border:1px solid rgba(255,255,255,.1); border-radius:10px; background:rgba(255,255,255,.05); }
    .flow strong { display:block; color:#fff0cd; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
    .auth-panel { padding:34px; background:linear-gradient(180deg, rgba(126,101,64,.18), rgba(0,0,0,.08)); }
    .panel-title { font-family:'Cinzel',serif; font-size:1.4rem; color:var(--light); margin-bottom:16px; text-transform:uppercase; }
    .subtle { color:#dccaa7; font-size:.95rem; margin-bottom:18px; }
    .field { margin-bottom:14px; }
    .field label { display:block; color:var(--gold-2); text-transform:uppercase; letter-spacing:1px; font-size:.8rem; margin-bottom:6px; }
    .field input, .field select { width:100%; padding:13px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(244,234,211,.08); color:var(--light); font-size:1rem; }
    .field input::placeholder { color:#ccb894; }
    .btn, button { cursor:pointer; border:none; text-decoration:none; }
    .btn-primary, .btn-secondary, .btn-danger { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:10px 12px; border-radius:10px; text-transform:uppercase; font-weight:700; letter-spacing:.8px; font-size:.76rem; white-space:nowrap; }
    .btn-primary { background:linear-gradient(180deg, #8b7047, #5f4c30); color:var(--light); border:1px solid #b49363; }
    .btn-secondary { background:rgba(255,255,255,.05); color:var(--light); border:1px solid rgba(214,182,122,.35); }
    .btn-danger { background:linear-gradient(180deg, #7a3228, #5f2018); color:var(--light); border:1px solid #b96f62; }
    .auth-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:10px; }
    .tiny { font-size:.85rem; color:#d8c7a6; margin-top:14px; line-height:1.5; }
    .topbar { display:grid; grid-template-columns:210px minmax(0,1fr) auto; align-items:center; gap:8px; padding:8px; width:min(1440px, calc(100% - 8px)); margin:0 auto; background:linear-gradient(180deg, rgba(49,39,28,.98), rgba(38,30,22,.98)); border-bottom:3px solid var(--gold); box-shadow:var(--shadow); position:sticky; top:0; z-index:50; }
    .brand h1 { font-family:'Cinzel',serif; font-size:1.7rem; letter-spacing:2px; color:var(--light); text-transform:uppercase; line-height:1; }
    .brand span { color:var(--gold-2); font-size:.85rem; letter-spacing:2px; text-transform:uppercase; }
    .resource-bar { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; }
    .resource { display:flex; align-items:center; justify-content:space-between; gap:10px; background:linear-gradient(180deg, rgba(102,81,55,.95), rgba(66,52,36,.98)); border:1px solid var(--border); border-radius:8px; padding:8px 10px; color:var(--light); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); min-height:58px; }
    .resource-content { min-width:0; flex:1; }
    .resource small, .tiny-label { display:block; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; color:#e9d8b2; margin-bottom:4px; }
    .resource strong { display:block; font-size:1.1rem; } .resource em { font-style:normal; font-size:.78rem; color:#d8c8a4; }
    .resource-icon-wrap { width:56px; min-width:56px; display:flex; justify-content:center; align-items:center; }
    .resource-icon { width:32px; height:32px; object-fit:contain; display:block; filter:drop-shadow(0 0 3px rgba(255,215,96,.18)); }

.resource { position:relative; overflow:hidden; animation:resourcePulse 4.6s ease-in-out infinite; }
.resource::after { content:""; position:absolute; inset:-20% auto -20% -35%; width:38%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transform:skewX(-18deg); animation:resourceShine 5.2s linear infinite; pointer-events:none; }
.resource-icon { animation:resourceFloat 2.8s ease-in-out infinite; }
.resource:nth-child(2) .resource-icon { animation-delay:.18s; }
.resource:nth-child(3) .resource-icon { animation-delay:.34s; }
.resource:nth-child(4) .resource-icon { animation-delay:.52s; }
.resource:nth-child(5) .resource-icon { animation-delay:.68s; }
.resource:nth-child(6) .resource-icon { animation-delay:.82s; }
.top-actions > .btn-secondary, .top-actions > .btn-primary, .top-actions > .btn-danger, .tab { position:relative; overflow:hidden; }
.top-actions > .btn-secondary::after, .top-actions > .btn-primary::after, .top-actions > .btn-danger::after, .tab::after { content:""; position:absolute; inset:0 auto 0 -130%; width:46%; background:linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent); transform:skewX(-20deg); transition:transform .55s ease; pointer-events:none; }
.top-actions > .btn-secondary:hover::after, .top-actions > .btn-primary:hover::after, .top-actions > .btn-danger:hover::after, .tab:hover::after, .tab.active::after { transform:translateX(310%) skewX(-20deg); }
.top-actions > .btn-secondary:hover, .top-actions > .btn-primary:hover, .top-actions > .btn-danger:hover, .tab:hover { transform:translateY(-1px) scale(1.01); box-shadow:0 10px 24px rgba(0,0,0,.2), 0 0 0 1px rgba(255,225,164,.14) inset; }
.menu-item { transition:transform .18s ease, border-color .18s ease, background .18s ease; }
.menu-item:hover { transform:translateX(4px); border-color:rgba(214,182,122,.38); background:linear-gradient(180deg, rgba(123,93,58,.26), rgba(0,0,0,.18)); }
@keyframes resourceFloat { 0%,100% { transform:translateY(0px) scale(1); } 50% { transform:translateY(-3px) scale(1.04); } }
@keyframes resourcePulse { 0%,100% { box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 rgba(255,213,105,0); } 50% { box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 18px rgba(255,213,105,.08); } }
@keyframes resourceShine { 0% { transform:translateX(0) skewX(-18deg); opacity:0; } 10% { opacity:.25; } 50% { opacity:.15; } 100% { transform:translateX(360%) skewX(-18deg); opacity:0; } }
.transport-panel { margin-top:14px; padding:14px; border-radius:16px; border:1px solid rgba(214,182,122,.26); background:linear-gradient(180deg, rgba(44,30,17,.9), rgba(28,20,13,.94)); box-shadow:0 18px 42px rgba(0,0,0,.22); }
.transport-panel.hidden { display:none; }
.transport-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.transport-header h3 { margin:0; font-size:1.16rem; letter-spacing:.04em; }
.transport-header p { margin:4px 0 0; color:#d8c8a4; font-size:.92rem; }
.transport-grid { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:10px; }
.transport-field { display:grid; gap:6px; }
.transport-field label { font-size:.76rem; text-transform:uppercase; letter-spacing:1px; color:#ecd9b0; }
.transport-field select, .transport-field input { width:100%; padding:11px 12px; border-radius:10px; border:1px solid rgba(214,182,122,.26); background:rgba(255,255,255,.06); color:var(--light); }
.transport-meta { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; margin-top:12px; }
.transport-box { padding:10px 12px; border-radius:12px; background:linear-gradient(180deg, rgba(113,84,46,.2), rgba(0,0,0,.16)); border:1px solid rgba(214,182,122,.18); }
.transport-box small { display:block; font-size:.7rem; color:#ecd9b0; text-transform:uppercase; letter-spacing:1px; margin-bottom:4px; }
.transport-box strong { font-size:1rem; }
.transport-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:14px; flex-wrap:wrap; }
.transport-active-list { display:grid; gap:10px; margin-top:14px; }
.transport-active-card { padding:12px 14px; border-radius:14px; border:1px solid rgba(214,182,122,.18); background:linear-gradient(180deg, rgba(66,49,28,.72), rgba(28,20,13,.88)); }
.transport-active-card strong { display:block; margin-bottom:4px; }
.transport-active-card .route { color:#f3ddb5; font-size:.92rem; }
.transport-active-card .meta { color:#d2c19a; font-size:.84rem; margin-top:4px; }
.transport-units-grid { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; margin-top:12px; }
.transport-unit-card { padding:12px; border-radius:14px; border:1px solid rgba(214,182,122,.18); background:linear-gradient(180deg, rgba(86,64,35,.38), rgba(26,18,10,.82)); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); }
.transport-unit-card.disabled { opacity:.48; filter:saturate(.7); }
.transport-unit-head { display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
.transport-unit-head strong { display:block; font-size:.92rem; }
.transport-unit-head small { color:#d2c19a; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; text-align:right; }
.transport-unit-available { margin-top:6px; color:#e7d3a8; font-size:.82rem; }
.transport-unit-card input { width:100%; margin-top:8px; padding:10px 12px; border-radius:10px; border:1px solid rgba(214,182,122,.26); background:rgba(255,255,255,.06); color:var(--light); }
.transport-empty { color:#cdb891; font-size:.9rem; padding:10px 0 2px; }
@media (max-width: 1180px) { .transport-grid, .transport-meta, .transport-units-grid { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width: 700px) { .transport-grid, .transport-meta, .transport-units-grid { grid-template-columns:1fr; } .transport-actions { justify-content:stretch; } .transport-actions > * { width:100%; } }

    .top-actions { grid-column:1 / -1; display:grid; grid-template-columns:repeat(10, minmax(0, 1fr)); gap:6px; align-items:center; width:100%; }
    .topbar-logout { grid-column:3; grid-row:1; align-self:start; justify-self:end; min-width:96px; }
    #myCountryBtn { background:linear-gradient(180deg, #d5a93f, #9c7420); color:#fff4cf; border:1px solid #f2d27a; box-shadow:0 0 0 1px rgba(255,223,130,.14), inset 0 1px 0 rgba(255,255,255,.16); }
    #myCountryBtn:hover { filter:brightness(1.05); }
    .top-actions > .btn-primary, .top-actions > .btn-secondary, .top-actions > .btn-danger { width:100%; min-width:0; }
    .layout { display:grid; grid-template-columns:220px minmax(0,1fr) 270px; gap:8px; padding:8px; width:min(1440px, calc(100% - 8px)); margin:0 auto; min-height:calc(100vh - 74px); align-items:stretch; }
    .panel { background:linear-gradient(180deg, rgba(64,51,36,.96), rgba(43,35,26,.97)); border:2px solid var(--border); border-radius:12px; box-shadow:var(--shadow); overflow:hidden; }
    .panel-header { background:linear-gradient(180deg, rgba(126,101,64,.95), rgba(91,72,47,.95)); color:var(--light); padding:12px 14px; font-family:'Cinzel',serif; font-size:1rem; text-transform:uppercase; letter-spacing:1px; border-bottom:1px solid rgba(255,255,255,.08); }
    .panel-body { padding:10px; }
    .menu-list, .news-list, .build-list, .queue-list, .country-list { display:grid; gap:10px; }
    .menu-item, .news-item, .build-item, .queue-item, .country-item { padding:11px 12px; border-radius:8px; background:linear-gradient(180deg, rgba(103,83,58,.2), rgba(0,0,0,.12)); border:1px solid rgba(201,171,118,.25); color:var(--light); }
    .menu-item { display:flex; justify-content:space-between; align-items:center; font-weight:700; text-transform:uppercase; cursor:pointer; }
    .menu-item span:last-child { color:var(--gold-2); font-size:.82rem; }
    .map-stage { position:relative; display:flex; flex-direction:column; gap:8px; border-radius:14px; overflow:hidden; user-select:none; border:3px solid var(--border); min-height:calc(100vh + 260px); background:linear-gradient(rgba(100,80,48,.24), rgba(100,80,48,.24)), url('https://images.unsplash.com/photo-1521295121783-8a321d551ad2?auto=format&fit=crop&w=1600&q=80') center/cover; box-shadow:var(--shadow); padding:8px; min-width:0; }
    .map-overlay { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent 20%, rgba(0,0,0,.08) 100%), repeating-linear-gradient(90deg, rgba(60,50,30,.08) 0, rgba(60,50,30,.08) 1px, transparent 1px, transparent 110px), repeating-linear-gradient(0deg, rgba(60,50,30,.08) 0, rgba(60,50,30,.08) 1px, transparent 1px, transparent 110px); }
    .map-topnav { position:relative; display:grid; grid-template-columns:minmax(0,1fr); gap:8px; z-index:3; }
    #tabsBar { display:none !important; }
    .tabs, .map-tools { display:flex; gap:6px; flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; scrollbar-width:thin; padding-bottom:2px; }
    .tab, .tool { background:rgba(52,41,29,.88); color:var(--light); border:1px solid rgba(214,182,122,.5); padding:8px 10px; border-radius:8px; text-transform:uppercase; font-weight:700; letter-spacing:.8px; font-size:.73rem; backdrop-filter: blur(4px); white-space:nowrap; flex:0 0 auto; }
    .tab.active { background:rgba(114,89,53,.94); color:#fff2d4; }
    .board-view { position:relative; inset:auto; z-index:2; display:grid; gap:14px; overflow:auto; align-content:start; min-height:220px; }
    .world-intro { display:grid; grid-template-columns: 1.1fr .9fr; gap:14px; }
    .world-card { background:rgba(42,33,24,.92); border:1px solid rgba(222,193,137,.4); border-radius:14px; padding:18px; color:var(--light); }
    .world-card h3 { font-family:'Cinzel',serif; text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
    .continent-filters { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
    .continent-btn { padding:10px 12px; border-radius:999px; border:1px solid rgba(214,182,122,.35); background:rgba(255,255,255,.04); color:var(--light); font-weight:700; }
    .continent-btn.active { background:rgba(114,89,53,.94); }
    .global-svg-wrap { margin-top:14px; background:rgba(22,16,11,.55); border:1px solid rgba(214,182,122,.25); border-radius:14px; padding:12px; min-height:250px; }
    .global-svg-wrap.visual-world-map { position:relative; padding:6px; min-height:clamp(520px, 78vh, 980px); display:flex; align-items:center; justify-content:center; overflow:hidden; background:transparent; border:1px solid rgba(214,182,122,.28); touch-action:none; }
    .global-svg-wrap svg { width:100%; height:auto; display:block; }
    .global-svg-wrap.visual-world-map svg.world-visual-map { width:100%; height:100%; max-height:none; max-width:none; display:block; shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; cursor:grab; }
    .global-svg-wrap.visual-world-map.is-panning, .global-svg-wrap.visual-world-map.is-panning svg.world-visual-map { cursor:grabbing; }
    .world-country-node { cursor:pointer; }
    .world-country-node text { pointer-events:none; font-size:11px; font-weight:700; fill:#f7e7c5; }
    .world-country-node rect { stroke:rgba(255,255,255,.16); stroke-width:1.2; rx:10; ry:10; }
    .world-country-node.locked { cursor:not-allowed; opacity:.56; }
    .world-country-node.status-target rect { filter:drop-shadow(0 0 10px rgba(255,172,71,.28)); }
    .world-country-node.status-dominated rect { filter:drop-shadow(0 0 10px rgba(82,106,46,.24)); }
    .tab.locked, .btn-secondary[disabled] { opacity:.45; cursor:not-allowed; }
    .search { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:var(--light); }
    .country-list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); max-height:420px; overflow:auto; padding-right:4px; }
    .country-item { cursor:pointer; transition:.18s transform, .18s border-color, opacity .18s ease; }
    .country-item:hover, .country-item.active { transform:translateY(-2px); border-color:rgba(227,197,140,.75); }
    .country-item.locked { cursor:not-allowed; opacity:.58; }
    .country-item.locked:hover { transform:none; border-color:rgba(201,171,118,.18); }
    .country-item.status-target { box-shadow:0 0 0 1px rgba(255,180,84,.35), 0 10px 22px rgba(0,0,0,.22); }
    .country-item.status-dominated { box-shadow:0 0 0 1px rgba(82,106,46,.24), 0 10px 22px rgba(0,0,0,.18); }
    .country-item strong { display:block; color:#f5e3bf; margin-bottom:4px; text-transform:uppercase; letter-spacing:.7px; }
    .country-item small { color:#dac8a6; }
    #svgViewport { position:relative; inset:auto; z-index:2; background:rgba(18,13,9,.18); border:1px solid rgba(214,182,122,.28); border-radius:14px; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:6px; min-height:clamp(760px, 96vh, 1180px); flex:1 1 auto; min-width:0; }
    #svgViewport svg { width:100%; height:100%; max-width:none; max-height:none; display:block; margin:auto; shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; }
    #svgViewport .placeholder { color:var(--light); text-align:center; max-width:640px; line-height:1.6; }
    .province-path { cursor:pointer; transition:fill .15s ease, opacity .15s ease; shape-rendering:geometricPrecision; vector-effect:non-scaling-stroke; }
    .province-units-layer { pointer-events:none; }
    .province-unit { pointer-events:none; image-rendering:auto; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); }
    .province-path:hover { opacity:1 !important; }
    .province-neutral { fill:#8c6f4f !important; stroke:#5c4631 !important; stroke-width:.75 !important; }
    .province-neutral:hover { fill:#d8c59f !important; stroke:#8c6f4f !important; }
    .province-npc { fill:#7a4c30 !important; stroke:#c48a59 !important; stroke-width:.95 !important; }
    .province-npc:hover { fill:#8a5838 !important; stroke:#deb37d !important; }
    .province-capital { fill:var(--player-capital-fill) !important; stroke:var(--player-capital-stroke) !important; stroke-width:1 !important; }
    .province-owned { fill:var(--player-fill) !important; stroke:var(--player-stroke) !important; stroke-width:.9 !important; }
    .province-origin { stroke:#f4ead3 !important; stroke-width:2.6 !important; filter:drop-shadow(0 0 4px rgba(244,234,211,.45)); }
    .province-target { fill:#8b2e22 !important; stroke:#f0d7a2 !important; stroke-width:1.3 !important; }
    .campaign-progress-panel { position:absolute; right:14px; bottom:14px; width:min(320px, calc(100% - 28px)); z-index:4; display:grid; gap:10px; padding:14px; border-radius:14px; background:linear-gradient(180deg, rgba(49,39,28,.92), rgba(35,28,20,.95)); border:1px solid rgba(214,182,122,.35); box-shadow:0 16px 36px rgba(0,0,0,.32); color:var(--light); }
    .campaign-progress-panel.hidden { display:none !important; }
    .campaign-progress-header { display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .campaign-progress-header strong { font-family:'Cinzel',serif; font-size:.92rem; text-transform:uppercase; letter-spacing:1px; }
    .campaign-progress-header span { color:var(--gold-2); font-size:.76rem; text-transform:uppercase; letter-spacing:1px; }
    .campaign-progress-grid { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
    .campaign-progress-box { background:rgba(255,255,255,.04); border:1px solid rgba(214,182,122,.18); border-radius:10px; padding:10px; }
    .campaign-progress-box small { display:block; color:#d8c7a6; text-transform:uppercase; letter-spacing:1px; font-size:.68rem; margin-bottom:4px; }
    .campaign-progress-box strong { display:block; font-size:1.02rem; color:#fff2d4; }
    .campaign-progress-bar { height:14px; border-radius:999px; background:rgba(0,0,0,.34); border:1px solid rgba(255,255,255,.08); overflow:hidden; }
    .campaign-progress-fill { height:100%; width:0%; background:linear-gradient(90deg, #8f744a, #d9b36b); transition:width .35s ease; }
    .campaign-progress-status { display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:.84rem; color:#eadcbe; }
    .campaign-progress-status .status-pill { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:6px 12px; border-radius:999px; border:1px solid rgba(214,182,122,.35); background:rgba(255,255,255,.05); text-transform:uppercase; letter-spacing:1px; font-weight:700; }
    #leftPanel, #rightPanel { max-height:calc(100vh - 86px); overflow:auto; }
    .province-selected { filter:brightness(1.06); }
    .bottom-console { display:none !important; }
    .console-box { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:8px; padding:10px; }
    .console-box small { display:block; text-transform:uppercase; letter-spacing:1px; font-size:.72rem; color:#d8c7a6; margin-bottom:6px; }
    .console-box strong { display:block; font-size:1rem; margin-bottom:4px; }
    .mini-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
    .stat-box { background:linear-gradient(180deg, rgba(116,92,62,.18), rgba(0,0,0,.12)); border:1px solid rgba(214,182,122,.18); border-radius:8px; padding:10px; color:var(--light); }
    .stat-box small { display:block; text-transform:uppercase; font-size:.72rem; letter-spacing:1px; color:#d9c6a0; margin-bottom:5px; }
    .stat-box strong { font-size:1rem; }
    .btn-row { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:10px; }
    .action-btn { text-align:center; padding:9px 8px; border-radius:8px; text-transform:uppercase; font-weight:700; letter-spacing:.7px; font-size:.73rem; color:var(--light); background:linear-gradient(180deg, #7a6240, #5f4c31); border:1px solid #b49363; white-space:nowrap; }
    .stack-select { width:100%; margin-top:10px; background:rgba(0,0,0,.18); border:1px solid rgba(214,182,122,.28); color:var(--light); border-radius:8px; padding:10px; }
    .stack-help { margin-top:8px; font-size:.78rem; color:#d8c7a6; line-height:1.4; }
    .build-item strong, .news-item strong, .queue-item strong { display:block; text-transform:uppercase; letter-spacing:.8px; margin-bottom:4px; color:#f4e6c4; font-size:.9rem; }
    .build-item span, .news-item span, .queue-item span { display:block; font-size:.82rem; color:#d9c9a7; line-height:1.45; }
    .tag { display:inline-flex; margin-top:8px; padding:4px 8px; border-radius:999px; font-size:.72rem; text-transform:uppercase; letter-spacing:.8px; background:rgba(255,255,255,.06); border:1px solid rgba(214,182,122,.24); }
    .hidden { display:none !important; }
    .notice { color:#ffe8c1; background:rgba(139,46,34,.15); border:1px solid rgba(185,111,98,.3); border-radius:10px; padding:10px 12px; margin-bottom:12px; }

    .tour-overlay { position:fixed; inset:0; z-index:99990; isolation:isolate; }
    .tour-overlay.hidden { display:none; }
    .tour-backdrop { position:absolute; inset:0; background:rgba(15,12,8,.72); z-index:0; }
    .tour-highlight { position:fixed; z-index:99991; border:2px solid var(--gold-2); border-radius:14px; box-shadow:0 0 0 9999px rgba(0,0,0,.32), 0 0 0 6px rgba(227,197,140,.12); pointer-events:none; transition:all .2s ease; }
    .tour-popover { position:fixed; z-index:99999; width:min(360px, calc(100vw - 24px)); background:linear-gradient(180deg, rgba(64,51,36,.98), rgba(43,35,26,.98)); border:2px solid var(--gold); border-radius:14px; box-shadow:var(--shadow); color:var(--light); padding:16px; }
    .tour-kicker { color:var(--gold-2); text-transform:uppercase; letter-spacing:1px; font-size:.72rem; margin-bottom:6px; }
    .tour-popover h3 { font-family:'Cinzel', serif; font-size:1.05rem; margin-bottom:8px; }
    .tour-popover p { line-height:1.5; color:#eadcbe; font-size:.95rem; }
    .tour-progress { margin-top:10px; color:#d8c8a4; font-size:.8rem; }
    .tour-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:14px; flex-wrap:wrap; }
    .tour-targeted { position:relative; z-index:99992 !important; }
    .settings-overlay { position:fixed; inset:0; z-index:99980; background:rgba(15,12,8,.72); display:grid; place-items:center; padding:24px; }
    .settings-modal { width:min(680px, calc(100vw - 32px)); background:linear-gradient(180deg, rgba(54,43,31,.98), rgba(35,28,21,.98)); border:2px solid var(--gold); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.45); color:var(--light); }
    .settings-modal-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); }
    .settings-modal-body { padding:18px; display:grid; gap:16px; }
    .settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
    .settings-field label { display:block; color:var(--gold-2); text-transform:uppercase; letter-spacing:1px; font-size:.78rem; margin-bottom:8px; }
    .settings-field input, .settings-field select { width:100%; padding:12px 14px; border-radius:10px; border:1px solid var(--border); background:rgba(244,234,211,.08); color:var(--light); font-size:1rem; }
    .color-preset-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
    .color-preset { min-height:46px; border-radius:10px; border:2px solid rgba(255,255,255,.18); }
    .color-preview-card { min-height:90px; border-radius:12px; border:1px solid rgba(214,182,122,.28); background:rgba(255,255,255,.04); padding:14px; display:grid; align-content:center; gap:8px; }
    .color-preview-swatch { width:100%; height:36px; border-radius:10px; border:1px solid rgba(255,255,255,.18); }
    .settings-actions { display:flex; justify-content:flex-end; gap:10px; flex-wrap:wrap; }
    .topbar, .layout, .panel, .panel-header, .panel-body { position:relative; z-index:1; }
    .map-stage { z-index:1; }


    
    .battle-hud { position:absolute; top:62px; left:12px; z-index:5; width:min(270px, calc(100% - 24px)); display:grid; grid-template-columns:1fr; gap:8px; align-items:start; background:rgba(37,28,20,.18); border:1px solid rgba(214,182,122,.22); border-radius:12px; padding:10px; color:var(--light); backdrop-filter:blur(3px); box-shadow:0 10px 28px rgba(0,0,0,.18); }
    .hud-side { background:rgba(25,18,12,.18); border:1px solid rgba(255,255,255,.05); border-radius:10px; padding:10px; }
    .hud-side h3 { font-family:'Cinzel',serif; font-size:.82rem; margin-bottom:8px; text-transform:uppercase; line-height:1.2; }
    .stat { margin-bottom:8px; }
    .stat:last-child { margin-bottom:0; }
    .stat label { display:block; font-size:.64rem; letter-spacing:1px; text-transform:uppercase; color:#e9d8b2; margin-bottom:3px; }
    .bar { width:100%; height:10px; background:rgba(0,0,0,.35); border-radius:999px; overflow:hidden; border:1px solid rgba(255,255,255,.08); }
    .fill { height:100%; width:0%; transition:width .35s ease; }
    .fill.hp { background:linear-gradient(90deg,#0f7f1b,#2ecc71); }
    .fill.shield { background:linear-gradient(90deg,#0b4f8a,#3498db); }
    .fill.dmg { background:linear-gradient(90deg,#8b1c12,#e74c3c); }
    .fill.power { background:linear-gradient(90deg,#9c6b00,#f1c40f); }
    .vs-center, #enemyHudSide { display:none !important; }
    .battle-hud-notes { display:flex; gap:6px; flex-wrap:wrap; }
    .hud-note { padding:4px 8px; border-radius:999px; background:rgba(255,255,255,.05); border:1px solid rgba(214,182,122,.18); font-size:.67rem; color:#eadcbe; }
    @media (max-width: 900px) { .battle-hud { position:relative; top:auto; left:auto; width:100%; margin-top:8px; background:rgba(37,28,20,.72); } }

    .infra-overlay { position:fixed; inset:0; background:rgba(12,9,6,.62); backdrop-filter: blur(4px); z-index:99970; display:flex; align-items:center; justify-content:center; padding:24px; }
    .infra-modal { width:min(980px, calc(100vw - 40px)); max-height:min(82vh, 860px); overflow:auto; background:linear-gradient(180deg, rgba(54,43,31,.97), rgba(35,28,21,.98)); border:2px solid var(--gold); border-radius:16px; box-shadow:0 24px 70px rgba(0,0,0,.45); color:var(--light); }
    .infra-modal-header { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px; border-bottom:1px solid rgba(255,255,255,.08); background:linear-gradient(180deg, rgba(126,101,64,.95), rgba(91,72,47,.95)); position:sticky; top:0; z-index:2; }
    .infra-modal-header h3 { margin:0; font-family:'Cinzel', serif; font-size:1.15rem; letter-spacing:1px; text-transform:uppercase; }
    .infra-modal-close { background:linear-gradient(180deg,#7e6640,#5f4c30); border:1px solid #a98a57; color:var(--light); border-radius:10px; padding:10px 14px; text-transform:uppercase; font-weight:700; letter-spacing:1px; cursor:pointer; }
    .infra-modal-body { padding:16px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; }
    .infra-card { background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:12px; padding:14px; min-height:118px; }
    .infra-card small { display:block; text-transform:uppercase; letter-spacing:1px; font-size:.72rem; color:#d8c7a6; margin-bottom:8px; }
    .infra-card strong { display:block; font-size:1.08rem; margin-bottom:6px; }
    .infra-note { padding:0 16px 18px; color:#d8c7a6; font-size:.9rem; }

    .era-toolbar { display:flex; gap:8px; flex-wrap:wrap; }
    .era-trigger { min-width:120px; }
    .era-window-overlay { position:fixed; inset:0; z-index:99974; background:rgba(12,9,6,.42); display:flex; align-items:center; justify-content:center; padding:20px; }
    .era-window { width:min(980px, calc(100vw - 36px)); max-height:min(80vh, 860px); display:flex; flex-direction:column; border:2px solid var(--gold); border-radius:16px; overflow:hidden; background:linear-gradient(180deg, rgba(54,43,31,.98), rgba(35,28,21,.98)); box-shadow:0 24px 70px rgba(0,0,0,.45); }
    .era-window.minimized .era-window-body { display:none; }
    .era-window-header { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; background:linear-gradient(180deg, rgba(126,101,64,.95), rgba(91,72,47,.95)); cursor:move; }
    .era-window-title { font-family:'Cinzel',serif; font-size:1.05rem; letter-spacing:1px; text-transform:uppercase; }
    .era-window-actions { display:flex; gap:8px; }
    .era-window-btn { min-width:40px; padding:8px 10px; border-radius:10px; border:1px solid #a98a57; background:linear-gradient(180deg,#7e6640,#5f4c30); color:var(--light); font-weight:700; cursor:pointer; }
    .era-window-body { padding:16px; overflow:auto; display:grid; gap:14px; }
    .era-window-intro { color:#e6d4b1; font-size:.95rem; }
    .era-country-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px; }
    .era-country-card { padding:13px; border-radius:12px; border:1px solid rgba(201,171,118,.25); background:linear-gradient(180deg, rgba(103,83,58,.2), rgba(0,0,0,.12)); cursor:pointer; }
    .era-country-card.locked { opacity:.55; cursor:not-allowed; }
    .era-country-card strong { display:block; color:#f5e3bf; margin-bottom:6px; text-transform:uppercase; }
    .era-country-card small { color:#dac8a6; display:block; margin-bottom:6px; }
    .era-country-card .tag { display:inline-flex; }
    .tab.disabled, .btn-secondary.disabled { opacity:.45; pointer-events:none; filter:grayscale(.15); }
    .era-country-group { margin-bottom:18px; }
    .era-country-group h4 { margin:0 0 10px; color:#f0d8aa; letter-spacing:.8px; font-size:.92rem; text-transform:uppercase; }
    .world-card.compact-world { display:grid; gap:10px; background:transparent; border-color:rgba(214,182,122,.16); }
    .world-card.compact-world .search, .world-card.compact-world .continent-filters, .country-list, .world-intro { display:none !important; }

    @media (max-width: 1400px) { .topbar { grid-template-columns:1fr; width:calc(100% - 8px); } .topbar-logout { grid-column:auto; grid-row:auto; justify-self:end; } .layout { grid-template-columns:210px minmax(0,1fr) 250px; width:calc(100% - 8px); } .campaign-progress-panel { position:relative; right:auto; bottom:auto; width:100%; margin-top:8px; } .top-actions { grid-template-columns:repeat(6, minmax(0, 1fr)); } }
    @media (max-width: 980px) { .auth-card, .world-intro, .settings-grid { grid-template-columns:1fr; } .resource-bar { grid-template-columns:repeat(3,1fr); } .layout { grid-template-columns:1fr; } .map-stage { min-height:980px; } #svgViewport { min-height:640px; } #leftPanel, #rightPanel { max-height:none; overflow:visible; } .top-actions { grid-template-columns:repeat(4, minmax(0, 1fr)); } }
    @media (max-width: 640px) { .resource-bar { grid-template-columns:repeat(2,1fr); } .top-actions { grid-template-columns:repeat(2, minmax(0, 1fr)); } .infra-modal-body { grid-template-columns:1fr; } }