@import url('/assets/fonts/gray-doom/fonts.css');
:root { --ink:#e7eef3; --muted:#93a8b6; --surface:#101923; --line:#294052; --cyan:#63d8e6; --navy:#14253d; --amber:#e3a34b; --red:#df5963; } *{box-sizing:border-box} body{margin:0;background:radial-gradient(circle at 72% 12%,#173548 0,#0a1119 40%,#070b10 100%);color:var(--ink);font:16px var(--font-ui);min-height:100vh}.shell{width:min(1180px,92vw);margin:auto;padding:8vh 0}.login-panel{max-width:540px;border:1px solid var(--line);padding:48px;background:#0f1822cc;box-shadow:0 24px 80px #0007}h1,h2{font-family:var(--font-display);letter-spacing:.02em;margin:.1em 0 .35em;text-transform:uppercase}h1{font-size:clamp(2.5rem,7vw,5rem)}h2{font-size:clamp(1.8rem,4vw,3rem)}p{line-height:1.65;color:var(--muted)}.eyebrow{font:600 .75rem var(--font-ui);letter-spacing:.2em;color:var(--cyan);margin:0;text-transform:uppercase}form{display:grid;gap:16px;margin:28px 0}label{display:grid;gap:7px;color:var(--muted);font-size:.85rem;text-transform:uppercase;letter-spacing:.1em}input{background:#081018;border:1px solid var(--line);color:var(--ink);padding:13px;font:inherit}button{border:1px solid var(--cyan);background:var(--cyan);color:#08202a;font:600 .9rem var(--font-ui);padding:13px 16px;cursor:pointer;text-transform:uppercase;letter-spacing:.08em}.ghost{background:transparent;color:var(--cyan)}button:focus-visible,input:focus-visible{outline:3px solid var(--amber);outline-offset:3px}#login-error{color:#ff8995;min-height:1.2em;margin:0}header,.section-heading,.status{display:flex;justify-content:space-between;align-items:center;gap:16px}.status{border-block:1px solid var(--line);padding:13px 0;margin:24px 0;color:var(--cyan);font-size:.75rem;letter-spacing:.14em}.hero{display:grid;grid-template-columns:1fr 220px;gap:26px;border:1px solid var(--line);background:linear-gradient(115deg,#112334,#101720);padding:34px;margin:28px 0}.upgrade{border-left:1px solid var(--line);padding-left:24px;display:grid;align-content:center;gap:10px}.upgrade strong{font:700 2.5rem var(--font-display);color:var(--cyan)}.upgrade span{color:var(--muted)}.sector-console{border:1px solid var(--line);background:linear-gradient(135deg,#101e2b,#0d141d);padding:28px;margin:28px 0}.map-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}.site{min-height:132px;text-align:left;display:grid;align-content:center;gap:5px;background:linear-gradient(145deg,#142c39,#0d1720);color:var(--ink);border-color:#376177}.site span{color:var(--cyan);font:700 1.4rem var(--font-display)}.site small{color:var(--muted)}.site--objective{border-color:var(--amber)}.site--warning{border-color:var(--red)}.site.is-selected{box-shadow:inset 0 0 0 2px var(--cyan);background:#183647}.operation-actions{display:flex;gap:12px;justify-content:flex-end}.concept{width:100%;border:1px solid var(--line);background:#05090d;display:block}.runtime-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.runtime-grid figure{margin:0;border:1px solid var(--line);background:linear-gradient(145deg,#101c27,#080d13);padding:8px}.runtime-grid img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.runtime-grid figcaption{color:var(--muted);font-size:.72rem;text-align:center;text-transform:uppercase;letter-spacing:.08em;padding:7px 2px 2px}@media(max-width:800px){.runtime-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:650px){.hero{grid-template-columns:1fr}.upgrade{border-left:0;border-top:1px solid var(--line);padding:18px 0 0}.shell{padding:5vh 0}.login-panel{padding:28px}.status{flex-wrap:wrap}.map-grid{grid-template-columns:1fr 1fr}.operation-actions{justify-content:stretch}.operation-actions button{flex:1}.runtime-grid{grid-template-columns:repeat(2,1fr)}}
.resource-bar{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.resource{border:1px solid var(--line);background:#0d1720;padding:14px;display:grid;gap:4px}.resource span,.building-meta,.costs,.order-list{color:var(--muted);font-size:.78rem}.resource strong{font:700 1.5rem var(--font-display);color:var(--cyan)}.settlement{border:1px solid var(--line);background:linear-gradient(135deg,#101e2b,#0d141d);padding:28px;margin:28px 0}.building-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.building{border:1px solid var(--line);background:#0b141d;padding:16px;display:grid;grid-template-columns:var(--building-art-size,96px) minmax(0,1fr);gap:12px}.building img{width:var(--building-art-size,96px);height:var(--building-art-size,96px);object-fit:contain;background:#071018}.building h3{font:700 1.1rem var(--font-display);text-transform:uppercase;margin:0}.building button{grid-column:1/-1}.building button:disabled,.operation-actions button:disabled,#upgrade:disabled{cursor:not-allowed;opacity:.45}.costs{display:flex;flex-wrap:wrap;gap:8px;margin-top:7px}.costs .short,.error-text{color:#ff8995}.order-list{margin-top:14px;display:grid;gap:5px}.site--hostile{border-color:var(--red)}@media(max-width:900px){.building-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:650px){.resource-bar,.building-grid{grid-template-columns:1fr 1fr}.settlement{padding:22px}}@media(max-width:430px){.resource-bar,.building-grid,.map-grid{grid-template-columns:1fr}}
@media (min-width:431px) and (max-width:650px){.building{--building-art-size:72px}}
.resource__identity{display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:.08em}.resource__identity img{width:30px;height:30px;object-fit:contain}.costs span{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}.building .costs img{width:17px;height:17px;object-fit:contain;background:none}
.resource--capacity-warning{border-color:#b88c52;background:linear-gradient(135deg,#201c18,#0d1720)}.resource--capacity-warning strong,.resource .resource__capacity-status{color:#f0c68b}.resource .resource__capacity-status{display:inline-flex;align-items:center;gap:6px;font-weight:700;letter-spacing:.04em}.resource__capacity-status img{width:17px;height:17px;object-fit:contain;flex:none}
.site.is-arrival-confirmed::after,.sector-vista__site.is-arrival-confirmed::after{content:"";position:absolute;z-index:3;inset:18%;background:#9fe1d8;mask:url('/assets/vfx/ui/command-pulse.png') center/contain no-repeat;pointer-events:none;animation:site-arrival-pulse 760ms ease-out both}@keyframes site-arrival-pulse{0%{opacity:0;transform:scale(.5)}40%{opacity:.7;transform:scale(.9)}100%{opacity:0;transform:scale(1.15)}}@media(prefers-reduced-motion:reduce){.site.is-arrival-confirmed::after,.sector-vista__site.is-arrival-confirmed::after{display:none;animation:none}}
.site.is-departure-confirmed::after,.sector-vista__site.is-departure-confirmed::after{content:"";position:absolute;z-index:3;inset:18%;background:#e3a34b;mask:url('/assets/vfx/ui/command-pulse.png') center/contain no-repeat;pointer-events:none;animation:site-departure-pulse 760ms ease-out both}@keyframes site-departure-pulse{0%{opacity:0;transform:scale(.45)}40%{opacity:.68;transform:scale(.85)}100%{opacity:0;transform:scale(1.2)}}@media(prefers-reduced-motion:reduce){.site.is-departure-confirmed::after,.sector-vista__site.is-departure-confirmed::after{display:none;animation:none}}
.map-operations button{display:inline-flex;align-items:center;justify-content:center;gap:8px}.map-operations button img{width:26px;height:26px;object-fit:contain;flex:none}.order-with-icon{display:flex;align-items:center;gap:7px}.order-with-icon img{width:48px;height:48px;object-fit:contain;flex:none}.order-with-icon span{color:var(--ink);font-size:.86rem}@media(max-width:650px){.map-operations{display:grid;grid-template-columns:1fr}.map-operations button{width:100%}}
.map-operations button:not(.ghost) img{filter:brightness(0);opacity:.78}
.map-operations button{position:relative;padding-right:43px}
.map-operations button.is-command-confirmed::after{content:"";position:absolute;right:1px;top:50%;width:48px;height:48px;background:var(--command-fx,#d4fbff);mask:url('/assets/vfx/ui/command-pulse.png') center/contain no-repeat;pointer-events:none;filter:drop-shadow(0 0 4px #06202d);animation:command-pulse 760ms ease-out both}
#game-panel[data-faction="atlantic-coalition"]{--command-fx:#d4fbff}
#game-panel[data-faction="northern-federation"]{--command-fx:#ffe2bb}
#game-panel[data-faction="eastern-directorate"]{--command-fx:#c9f5df}
#game-panel[data-faction="gray-zone"]{--command-fx:#ffdfaa}
@keyframes command-pulse{0%{opacity:0;transform:translateY(-50%) scale(.35)}35%{opacity:1;transform:translateY(-50%) scale(1.1)}100%{opacity:0;transform:translateY(-50%) scale(1.4)}}
@media(prefers-reduced-motion:reduce){.map-operations button.is-command-confirmed::after{display:none;animation:none}}
.unit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.unit-card{border:1px solid var(--line);background:#0b141d;padding:16px;display:grid;gap:10px}.unit-card h3{font:700 1.1rem var(--font-display);text-transform:uppercase;margin:0}.unit-counts{display:flex;justify-content:space-between;color:var(--muted);font-size:.8rem}.unit-actions{display:grid;grid-template-columns:64px 1fr 1fr;gap:6px}.unit-actions input{min-width:0}.danger{background:var(--red);border-color:var(--red);color:#26070a}@media(max-width:900px){.unit-grid{grid-template-columns:1fr}}
.unit-card.is-recovery-queued{animation:recovery-queued-pulse 760ms ease-out both}@keyframes recovery-queued-pulse{0%{box-shadow:inset 0 0 0 2px var(--cyan),0 0 0 0 #63d8e680}100%{box-shadow:inset 0 0 0 0 transparent,0 0 0 9px transparent}}@media(prefers-reduced-motion:reduce){.unit-card.is-recovery-queued{animation:none}}
.unit-card.is-training-queued .unit-portrait{animation:training-portrait-pulse 760ms ease-out both}.unit-card.is-training-complete .unit-portrait{animation:training-portrait-complete 760ms ease-out both}@keyframes training-portrait-pulse{0%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}35%{filter:drop-shadow(0 0 10px var(--cyan));transform:scale(1.035)}100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}}@keyframes training-portrait-complete{0%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}35%{filter:drop-shadow(0 0 13px var(--amber));transform:scale(1.045)}100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}}@media(prefers-reduced-motion:reduce){.unit-card.is-training-queued .unit-portrait,.unit-card.is-training-complete .unit-portrait{animation:none}}
.unit-card.is-recovery-complete .unit-portrait{animation:recovery-portrait-complete 760ms ease-out both}@keyframes recovery-portrait-complete{0%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}35%{filter:drop-shadow(0 0 12px #8fd5b1);transform:scale(1.035)}100%{filter:drop-shadow(0 0 0 transparent);transform:scale(1)}}@media(prefers-reduced-motion:reduce){.unit-card.is-recovery-complete .unit-portrait{animation:none}}
.state-art-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px;margin-top:20px}.state-art-grid figure{margin:0;text-align:center;color:var(--muted);font-size:.72rem;text-transform:uppercase}.unit-composite{position:relative;aspect-ratio:1;background:#071018;border:1px solid var(--line)}.unit-composite img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.unit-composite .state-overlay{pointer-events:none}@media(max-width:900px){.state-art-grid{grid-template-columns:repeat(4,1fr)}}@media(max-width:500px){.state-art-grid{grid-template-columns:repeat(2,1fr)}}
.building-state-grid{grid-template-columns:repeat(6,1fr)}.building-state-grid .unit-composite{background:radial-gradient(circle at 50% 65%,#17303d,#071018 70%)}@media(max-width:900px){.building-state-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:500px){.building-state-grid{grid-template-columns:repeat(2,1fr)}}
.building-tier-grid{grid-template-columns:repeat(4,1fr)}.building-tier-grid .unit-composite{background:radial-gradient(circle at 50% 65%,#17303d,#071018 70%)}@media(max-width:700px){.building-tier-grid{grid-template-columns:repeat(2,1fr)}}
.resource-field-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:20px}.resource-field-grid figure{margin:0;border:1px solid var(--line);background:radial-gradient(circle at 50% 60%,#17303d,#071018 72%);text-align:center}.resource-field-grid img{display:block;width:100%;aspect-ratio:1;object-fit:contain}.resource-field-grid figcaption{padding:8px;color:var(--muted);font-size:.72rem;text-transform:uppercase}@media(max-width:700px){.resource-field-grid{grid-template-columns:repeat(2,1fr)}}
.art-scope-label{display:block;padding:7px 8px;background:#402c24;color:#ffd8ac;font-size:.68rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.art-scope-conditional{background:#213e46;color:#b9f0e7}
.social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.social-card{border:1px solid var(--line);background:#0b141d;padding:16px;display:grid;align-content:start;gap:10px;margin:0}.social-card h3{font:700 1.1rem var(--font-display);text-transform:uppercase;margin:0}.social-card select{background:#081018;border:1px solid var(--line);color:var(--ink);padding:10px}.offer{border-bottom:1px solid var(--line);padding:8px 0;display:grid;gap:6px}.offer__exchange{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}.offer__resource{display:inline-flex;align-items:center;gap:5px;min-width:0}.offer__resource img{width:26px;height:26px;object-fit:contain;flex:none}@media(max-width:900px){.social-grid{grid-template-columns:1fr}}
.alliance-identity { display: flex; align-items: center; gap: 12px; }
.alliance-banner { --banner:#63d8e6; width: 70px; height: 84px; display: inline-grid; place-items: center; flex: 0 0 auto; background: linear-gradient(145deg,color-mix(in srgb,var(--banner) 38%,#101923),#081018 72%); border: 2px solid var(--banner); clip-path: polygon(8% 0,92% 0,92% 78%,50% 100%,8% 78%); box-shadow: inset 0 0 0 4px #071018,0 8px 18px #0008; }
.alliance-banner img { width: 66%; height: 66%; filter: drop-shadow(0 0 5px var(--banner)); }
.alliance-banner--ember{--banner:#df5963}.alliance-banner--jade{--banner:#55c797}.alliance-banner--sun{--banner:#e3a34b}.alliance-banner--void{--banner:#a991e8}
.alliance-banner--compact { width: 34px; height: 41px; border-width: 1px; box-shadow: inset 0 0 0 2px #071018; }
.alliance-offer { grid-template-columns: 34px minmax(0, 1fr); align-items: center; }
.alliance-offer > span { min-width: 0; overflow-wrap: anywhere; }
.alliance-offer > button { grid-column: 1 / -1; }
.alliance-creator { display: grid; gap: 10px; }
.alliance-profile,.alliance-profile-rights,.alliance-profile-news{display:grid;gap:9px;border-top:1px solid var(--line);padding-top:12px;margin-top:12px}.alliance-profile h4,.alliance-profile-rights h4,.alliance-profile-news h4{margin:0;font:700 .9rem var(--font-display);text-transform:uppercase}.alliance-profile p{white-space:pre-wrap;overflow-wrap:anywhere;margin:0}.alliance-profile textarea{width:100%;resize:vertical;background:#081018;border:1px solid var(--line);color:var(--ink);padding:10px;font:inherit}.alliance-profile textarea:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.alliance-member-right{display:flex;align-items:center;justify-content:space-between;gap:8px;overflow-wrap:anywhere}.alliance-member-right button{padding:7px 9px;font-size:.7rem}
.reinforcement-return{display:grid;gap:8px;border:1px solid var(--line);padding:10px;min-width:0}.reinforcement-return label{display:grid;gap:4px}.reinforcement-return input{width:100%;min-width:0}
.reinforcement-send{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px;min-width:0}.reinforcement-send h4{margin:0;font:700 .9rem var(--font-display);text-transform:uppercase}.reinforcement-send label{display:grid;gap:4px;min-width:0}.reinforcement-send select,.reinforcement-send input{width:100%;min-width:0}
.reinforcement-return__status{display:flex;align-items:center;gap:8px;min-width:0;overflow-wrap:anywhere}.reinforcement-return__status img{width:34px;height:34px;object-fit:contain;flex:none}.reinforcement-return button{display:inline-flex;justify-content:center;align-items:center;gap:8px}.reinforcement-return button img{width:30px;height:30px;object-fit:contain;flex:none}
.reinforcement-return.is-return-accepted{animation:reinforcement-return-ack 700ms ease-out}@keyframes reinforcement-return-ack{0%{border-color:var(--line);background:transparent}35%{border-color:var(--cyan);background:#10313a}100%{border-color:var(--line);background:transparent}}@media(prefers-reduced-motion:reduce){.reinforcement-return.is-return-accepted{animation:none}}
.diplomacy-list{display:grid;gap:10px;border-top:1px solid var(--line);padding-top:12px}.diplomacy-list h4{margin:0;font:700 .9rem var(--font-display);text-transform:uppercase}.diplomacy-relation{display:grid;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:10px;border:1px solid var(--line);padding:10px;background:#0e1b25}.diplomacy-relation strong{overflow-wrap:anywhere}.diplomacy-relation__state{display:flex;align-items:center;gap:7px;margin-top:5px;color:var(--muted);font-size:.8rem}.diplomacy-relation__state img{width:27px;height:27px;object-fit:contain}.diplomacy-actions{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:5px}.diplomacy-actions button{padding:7px 9px;font-size:.68rem}.diplomacy-actions button[aria-pressed="true"]{background:var(--cyan);color:#08202a}.diplomacy-relation small{grid-column:1/-1;color:var(--muted)}
.social-art{margin-top:18px;padding:15px;border:1px solid var(--line);background:#08131dcc}.social-art summary{cursor:pointer;color:var(--cyan);font:700 .9rem var(--font-ui);text-transform:uppercase;letter-spacing:.08em}.social-art summary:focus-visible{outline:3px solid var(--amber);outline-offset:3px}.social-art__body{display:grid;gap:20px}.social-art__body section{border-top:1px solid var(--line);padding-top:14px}.social-art__body h4,.social-art__body h5{margin:0 0 7px;font:700 .9rem var(--font-display);text-transform:uppercase}.social-art__body h5{margin-top:13px;font-size:.75rem;color:var(--cyan)}.social-art__body p{margin:0 0 12px;font-size:.8rem}.social-art__grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}.social-art__card{min-width:0;margin:0;padding:8px;border:1px solid var(--line);background:#0b1a25;text-align:center}.social-art__card img{display:block;width:100%;height:72px;object-fit:contain}.social-art__card figcaption{display:grid;gap:3px;margin-top:5px;font-size:.7rem;text-transform:capitalize;overflow-wrap:anywhere}.social-art__card small{font-size:.62rem;color:var(--muted);text-transform:none}@media(max-width:900px){.social-art__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:520px){.social-art__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.endgame{border:1px solid var(--amber);background:linear-gradient(135deg,#211b16,#10161c);padding:28px;margin:28px 0}.season-summary{display:flex;gap:20px;flex-wrap:wrap;color:var(--amber);margin:16px 0}.objective-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.objective{border:1px solid #5d4930;background:#151719;padding:16px;display:grid;gap:8px}.objective h3{margin:0;font:700 1.1rem var(--font-display);text-transform:uppercase}@media(max-width:700px){.objective-grid{grid-template-columns:1fr}.endgame{padding:22px}}
.complex-visual{position:relative;isolation:isolate;overflow:hidden;height:260px;margin:18px 0 12px;border:1px solid #5d4930;background:#080f15 url('/assets/runtime/functional-background/gray-zone-fullbleed-v2.png') center/cover}.complex-visual__structure{position:absolute;z-index:-1;right:5%;bottom:-23%;height:120%;max-width:66%;object-fit:contain;filter:drop-shadow(0 18px 24px #000)}.complex-visual::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#071018e8 0%,#07101888 50%,#07101822 100%);pointer-events:none}.complex-visual__status{position:absolute;z-index:1;left:20px;bottom:18px;display:flex;align-items:center;gap:12px;color:var(--ink)}.complex-visual__status img{width:54px;height:54px;object-fit:contain}.complex-visual__status small{display:block;color:var(--cyan);font-size:.72rem;letter-spacing:.13em;text-transform:uppercase}.complex-visual__status strong{display:block;font:700 1.65rem var(--font-display);text-transform:uppercase}.objective__heading{display:flex;align-items:center;gap:10px}.objective__heading img{width:34px;height:34px;object-fit:contain;flex:none}.objective__state{font-size:.78rem;color:var(--cyan);text-transform:uppercase;letter-spacing:.08em}.objective button:disabled{opacity:.55;cursor:not-allowed}@media(max-width:700px){.complex-visual{height:220px}.complex-visual__structure{right:-20%;max-width:100%;opacity:.7}.complex-visual__status{left:14px;bottom:12px}.complex-visual__status strong{font-size:1.35rem}}
.season-feed{margin-top:18px;border-top:1px solid #5d4930;padding-top:14px}.season-feed h3{margin:0 0 10px;font:700 1rem var(--font-display);text-transform:uppercase}.season-feed ol{list-style:none;margin:0;padding:0;display:grid;gap:8px}.season-feed li{display:flex;align-items:center;gap:10px;min-width:0;padding:8px 10px;border:1px solid #45372a;background:#121a1d}.season-feed li img,.season-feed__marker{width:38px;height:38px;flex:none;object-fit:contain}.season-feed__marker{display:block;border:1px solid var(--amber);background:radial-gradient(circle,var(--amber) 0 3px,transparent 4px)}.season-feed li div{min-width:0;display:grid;gap:3px}.season-feed li strong{font-size:.83rem;overflow-wrap:anywhere}.season-feed li small{font-size:.72rem;color:var(--muted)}
.objective__heading .objective__role{width:40px;height:40px}.objective__heading .objective__status-art{width:25px;height:25px}.objective__heading h3{min-width:0;overflow-wrap:anywhere}
.objective:focus{outline:3px solid var(--amber);outline-offset:3px}

/* Keep faction panoramas legible behind the settlement controls. */
.hero { position: relative; isolation: isolate; overflow: hidden; background: #101720; }
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8,17,26,.94), rgba(8,17,26,.65)); pointer-events: none; }
.hero-landscape { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.hero-landscape__frame { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transition: opacity .4s ease-in-out, background-position 1.15s cubic-bezier(.22,.61,.36,1); }
.hero-landscape__frame.is-route-panorama { background-size: 160% auto; background-repeat: no-repeat; }
.hero-landscape__frame.is-route-panorama[data-context="inside"] { background-position: 0% 48%; }
.hero-landscape__frame.is-route-panorama[data-context="city-gate"] { background-position: 50% 48%; }
.hero-landscape__frame.is-route-panorama[data-context="outside"] { background-position: 100% 48%; }
.hero-landscape__frame.is-active { opacity: 1; }
@media (max-width: 650px) {
  .hero-landscape__frame.is-route-panorama { background-size: auto 100%; }
  .hero-landscape__frame.is-route-panorama[data-context="inside"] { background-position: 15% center; }
  .hero-landscape__frame.is-route-panorama[data-context="city-gate"] { background-position: 50% center; }
  .hero-landscape__frame.is-route-panorama[data-context="outside"] { background-position: 85% center; }
}
@media (prefers-reduced-motion: reduce) { .hero-landscape__frame { transition: none; } }
.hero-actions { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; }
.landscape-switcher { display: inline-flex; border: 1px solid var(--line); background: #081018cc; }
.landscape-switcher button { border: 0; border-left: 1px solid var(--line); }
.landscape-switcher button:first-child { border-left: 0; }
.landscape-switcher button[aria-pressed="true"] { background: var(--cyan); color: #08202a; }
.functional-landscape > .section-heading { position: relative; isolation: isolate; overflow: hidden; min-height: 132px; padding: 20px; margin: -28px -28px 22px; border-bottom: 1px solid var(--line); }
.functional-landscape > .section-heading::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: var(--functional-landscape, none); background-size: 125% auto; background-position: center; }
.functional-landscape > .section-heading::after { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, #071018ed, #071018a8 70%, #0710188c); }
.functional-landscape > .section-heading > * { position: relative; z-index: 1; }
.functional-landscape--infrastructure > .section-heading::before { background-image: var(--landscape-inside, none); background-position: 20% 48%; }
.functional-landscape--resources > .section-heading::before { background-image: var(--landscape-outside, none); background-position: 28% 55%; }
.functional-landscape--forces > .section-heading::before { background-image: var(--landscape-gate, none); background-position: 75% 42%; }
.functional-landscape--reports > .section-heading::before { background-position: 62% 48%; }
.functional-landscape--sector > .section-heading::before { background-image: var(--landscape-outside, none); background-position: 50% 52%; }
.functional-landscape--social > .section-heading::before { background-position: 35% 56%; }
.functional-landscape > .section-heading > p { color: var(--ink); background: #071018e8; border: 1px solid var(--line); padding: 6px 10px; }
@media (max-width: 650px) { .functional-landscape > .section-heading { flex-wrap: wrap; min-height: 150px; margin: -22px -22px 22px; } }
.functional-landscape--infrastructure,
.functional-landscape--resources,
.functional-landscape--forces {
  border: 0;
  background-image: linear-gradient(180deg, #07101829 0px, #07101840 250px, #071018a8 630px, #071018 880px), var(--landscape-inside, none);
  background-position: center top;
  background-size: 100% 100%, auto 880px;
  background-repeat: no-repeat;
}
.functional-landscape--resources { background-image: linear-gradient(180deg, #07101829 0px, #07101840 250px, #071018a8 630px, #071018 880px), var(--landscape-outside, none); }
.functional-landscape--forces { background-image: linear-gradient(180deg, #07101829 0px, #07101840 250px, #071018a8 630px, #071018 880px), var(--forces-landscape, none); }
/* Keep the approved Atlantic sea-left road plate readable on narrow Game screens. */
@media (max-width: 650px) {
  #game-panel[data-faction="atlantic-coalition"] .functional-landscape--forces {
    background-size: 100% 100%, 100% auto;
    background-position: center top;
  }
}
.functional-landscape--forces > .section-heading { text-shadow: 0 2px 12px #071018, 0 1px 3px #071018; }
.functional-landscape--forces #unit-state { color: #eff8f9; display: inline-flex; align-items: center; gap: 6px; }
.functional-landscape--forces #unit-state img { width: 20px; height: 20px; flex: none; object-fit: contain; }
.functional-landscape--forces .unit-proxy-note { display: inline-block; max-width: 100%; padding: 8px 12px; border-radius: 6px; background: #071018de; color: #eff8f9; }
@media (min-width: 651px) { #game-panel #forces-title { scroll-margin-top: 150px; } }
.map-coordinate-jump { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; scroll-margin-top: 140px; }
.map-coordinate-jump label { width: 88px; }
.map-coordinate-jump input { width: 100%; }
.map-coordinate-jump button { min-height: 48px; }
.map-coordinate-jump [role="status"] { flex-basis: 100%; min-height: 1.3em; color: var(--ink); font-size: .82rem; }
.functional-landscape--infrastructure > .section-heading::before,
.functional-landscape--resources > .section-heading::before,
.functional-landscape--forces > .section-heading::before { background-image: none; }
.functional-landscape--infrastructure > .section-heading,
.functional-landscape--resources > .section-heading,
.functional-landscape--forces > .section-heading {
  border-bottom: 0;
  min-height: clamp(210px, 25vw, 320px);
  align-items: flex-end;
  padding-bottom: 32px;
}
.functional-landscape--infrastructure > .section-heading::after,
.functional-landscape--resources > .section-heading::after,
.functional-landscape--forces > .section-heading::after {
  background: linear-gradient(180deg, #0710186b, #0710180a 35%, #07101861);
}
.functional-landscape--infrastructure .building,
.functional-landscape--resources .building,
.functional-landscape--forces .unit-card {
  border: 0;
  background: linear-gradient(90deg, #07101836, #071018bd 55%, #071018cf);
  box-shadow: inset 0 -1px #a9d7da3b;
  backdrop-filter: blur(2px);
}
.functional-landscape--infrastructure .building img,
.functional-landscape--resources .building img,
.functional-landscape--forces .unit-portrait { background: transparent; }
@media (min-width: 901px) {
  .functional-landscape--infrastructure .building-grid,
  .functional-landscape--resources .building-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; }
  .functional-landscape--infrastructure .building,
  .functional-landscape--resources .building { --building-art-size: 144px; column-gap: 18px; padding-inline: 8px; }
}
@media (min-width: 651px) and (max-width: 900px) {
  .functional-landscape--infrastructure .building,
  .functional-landscape--resources .building { --building-art-size: 112px; }
}
@media (max-width: 650px) {
  .functional-landscape--infrastructure,
  .functional-landscape--resources,
  .functional-landscape--forces {
    background-size: 100% 100%, auto 760px;
    background-position: center top, 50% top;
  }
  .functional-landscape--infrastructure > .section-heading,
  .functional-landscape--resources > .section-heading,
  .functional-landscape--forces > .section-heading { min-height: 220px; }
}
.faction-heading { display: flex; align-items: center; gap: 10px; min-height: 54px; }
.faction-emblem { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 5px 12px #000b); flex: 0 0 auto; }
.faction-emblem[hidden] { display: none; }
@media(max-width:650px){.hero-actions,.landscape-switcher{display:grid;grid-template-columns:1fr 1fr}.hero-actions>#upgrade,.hero-actions>.landscape-switcher{grid-column:1/-1}.landscape-switcher{width:100%;box-sizing:border-box}.landscape-switcher button:last-child{grid-column:1/-1}}

.building-art { position: relative; width: var(--building-art-size,96px); height: var(--building-art-size,96px); }
.building-grid { container-type: inline-size; }
@container (min-width: 1050px) {
  .building { --building-art-size: 112px; }
  .functional-landscape--infrastructure .building,
  .functional-landscape--resources .building { --building-art-size: 160px; }
}
.building-art.is-queue-started::before{content:"";position:absolute;z-index:1;left:3px;right:3px;bottom:-2px;height:37px;background:var(--construction-particle,#b8c2c1);mask:url('/assets/vfx/ui/construction-dust.png') center/contain no-repeat;pointer-events:none;transform-origin:50% 100%;animation:building-queue-dust 760ms ease-out both}@keyframes building-queue-dust{0%{opacity:0;transform:translateY(7px) scale(.45)}28%{opacity:.42;transform:translateY(0) scale(.8)}100%{opacity:0;transform:translateY(-12px) scale(1.12)}}
#game-panel[data-faction="atlantic-coalition"]{--construction-particle:#aec3c8}#game-panel[data-faction="northern-federation"]{--construction-particle:#c8c6c0}#game-panel[data-faction="eastern-directorate"]{--construction-particle:#aebfae}#game-panel[data-faction="gray-zone"]{--construction-particle:#d9bc8e}
@media(prefers-reduced-motion:reduce){.building-art.is-queue-started::before{display:none;animation:none}}
.building-art.is-queue-started::after{content:"";position:absolute;z-index:1;inset:5px;background:#f2bf78;mask:url('/assets/vfx/ui/command-pulse.png') center/contain no-repeat;pointer-events:none;animation:building-queue-pulse 760ms ease-out both}@keyframes building-queue-pulse{0%{opacity:0;transform:scale(.45)}40%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.building-art.is-queue-started::after{display:none;animation:none}}
.building-art.is-completed::after{content:"";position:absolute;z-index:1;inset:5px;background:#9fe1d8;mask:url('/assets/vfx/ui/command-pulse.png') center/contain no-repeat;pointer-events:none;animation:building-complete-pulse 760ms ease-out both}@keyframes building-complete-pulse{0%{opacity:0;transform:scale(.55)}35%{opacity:.6;transform:scale(.9)}100%{opacity:0;transform:scale(1.08)}}@media(prefers-reduced-motion:reduce){.building-art.is-completed::after{display:none;animation:none}}
.building-art .building-overlay { position: absolute; inset: auto 0 0 auto; width: 36px; height: 36px; padding: 3px; border: 1px solid #8caab9; border-radius: 5px; background: #08131fee; box-shadow: 0 2px 7px #000a; pointer-events: none; }
.building-state-label { color: var(--cyan); font-size: .78rem; margin-block: 4px; }

.building-atlas { margin-top: 24px; border-top: 1px solid var(--line); padding-top: 16px; }
.building-atlas summary { cursor: pointer; color: var(--cyan); font: 700 1.1rem var(--font-display); letter-spacing: .04em; text-transform: uppercase; }
.building-atlas summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 4px; }
.building-atlas summary span { color: var(--muted); font: 500 .75rem var(--font-ui); letter-spacing: 0; }
.building-atlas__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.building-atlas__card { min-width: 0; margin: 0; border: 1px solid var(--line); background: #08121b; }
.building-atlas__card img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #050a0f; }
.building-atlas__card figcaption { display: grid; gap: 4px; padding: 10px; }
.building-atlas__card span { color: var(--cyan); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; }
.building-atlas__card strong { font: 700 1.05rem var(--font-display); text-transform: uppercase; }
.building-atlas__card small { color: var(--muted); line-height: 1.4; }
.building-atlas__card em { color: var(--amber); font-size: .7rem; font-style: normal; text-transform: uppercase; }
@media(max-width:800px){.building-atlas__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:500px){.building-atlas__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.unit-identity { display: flex; align-items: center; gap: 12px; min-width: 0; }
.unit-card { min-width: 0; }
.unit-card > label input { width: 100%; min-width: 0; }
.unit-card .unit-actions { grid-template-columns: 64px repeat(2, minmax(0, 1fr)); }
@media (max-width: 360px) { .unit-card .unit-actions button { min-width: 0; padding-inline: 4px; font-size: .75rem; } }
.unit-identity h3 { min-width: 0; overflow-wrap: anywhere; }
.unit-portrait { width: 136px; height: 136px; flex: none; object-fit: contain; background: #071018; }
.unit-grid { container-type: inline-size; }
@container (min-width: 1050px) { .unit-portrait { width: 152px; height: 152px; } }
@media (max-width: 360px) { .unit-portrait { width: 112px; height: 112px; } }
.unit-counts { flex-wrap: wrap; gap: 8px; }
.unit-counts span { display: inline-flex; align-items: center; gap: 3px; }
.unit-counts img { width: 24px; height: 24px; object-fit: contain; }
.unit-queue-cues { display: flex; flex-wrap: wrap; gap: 6px; }
.unit-queue-cues span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 8px; border: 1px solid #64848f; border-radius: 5px; background: #142a32; color: #eff8f9; font-size: .82rem; }
.unit-queue-cues img { width: 18px; height: 18px; flex: none; object-fit: contain; }
.unit-actions button:disabled { opacity: .45; cursor: not-allowed; }
.functional-landscape--forces #unit-grid .unit-card { align-content: start; padding: 12px 14px 16px; }
.functional-landscape--forces #unit-grid .unit-identity { display: grid; justify-items: center; gap: 2px; }
.functional-landscape--forces #unit-grid .unit-portrait-frame { position: relative; display: block; width: min(100%, 220px); height: 220px; }
.functional-landscape--forces #unit-grid .unit-portrait { width: 100%; height: 100%; filter: drop-shadow(0 14px 14px #03080bc2); }
.functional-landscape--forces #unit-grid .unit-selection-overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.functional-landscape--forces #unit-grid .unit-selection-overlay[hidden] { display: none; }
.functional-landscape--forces #unit-grid .unit-identity h3 { justify-self: start; }
@media (max-width: 900px) {
  .functional-landscape--forces #unit-grid .unit-portrait-frame { width: min(100%, 210px); height: 210px; }
}

.art-roster-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 20px; margin-top: 18px; }
.art-roster-card { min-width: 0; margin: 0; border: 0; background: radial-gradient(ellipse at 50% 54%, #071018d9 0%, #071018b8 48%, #07101852 78%), linear-gradient(180deg, #07101854, #071018e8); }
.art-roster-card img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: transparent; }
.art-roster-card figcaption { display: grid; gap: 4px; padding: 8px 4px 12px; text-shadow: 0 2px 8px #071018; }
.art-roster-card span,.art-roster-commander span { color: var(--cyan); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; }
.art-roster-card strong,.art-roster-commander strong { font: 700 1.05rem var(--font-display); text-transform: uppercase; }
.art-roster-card small,.art-roster-commander small { color: var(--muted); line-height: 1.4; }
.art-roster-commander { display: flex; align-items: center; gap: 16px; margin-top: 12px; border: 0; padding: 8px 4px; background: linear-gradient(90deg, #07101880, #07101818); }
.art-roster-commander img { width: clamp(112px, 15vw, 176px); height: clamp(112px, 15vw, 176px); object-fit: contain; flex: none; }
.art-roster-commander div { display: grid; gap: 4px; }
.commander-art { margin-top: 16px; border: 1px solid var(--line); background: #09131d; padding: 14px; }
.commander-art summary { cursor: pointer; color: var(--cyan); font: 700 .9rem var(--font-ui); text-transform: uppercase; letter-spacing: .08em; }
.commander-art summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.campaign-art { margin-top: 16px; border: 1px solid var(--line); background: #09131d; padding: 14px; }
.campaign-art summary { cursor: pointer; color: var(--cyan); font: 700 .9rem var(--font-ui); text-transform: uppercase; letter-spacing: .08em; }
.campaign-art summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.campaign-art__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; list-style: none; margin: 0; padding: 0; }
.campaign-art__chapter { display: flex; align-items: flex-start; gap: 12px; min-width: 0; border: 1px solid var(--line); background: #0b1822; padding: 12px; }
.campaign-art__chapter img { width: 58px; height: 58px; object-fit: contain; flex: none; }
.campaign-art__chapter div { min-width: 0; }
.campaign-art__chapter span { color: var(--cyan); font-size: .69rem; letter-spacing: .1em; text-transform: uppercase; }
.campaign-art__chapter h4 { margin: 3px 0 5px; font: 700 1.1rem var(--font-display); text-transform: uppercase; }
.campaign-art__chapter p { margin: 0 0 8px; color: var(--ink); font-size: .82rem; line-height: 1.4; }
.campaign-art__chapter small { color: var(--muted); font-size: .72rem; }
@media(max-width:700px){.campaign-art__grid{grid-template-columns:1fr}.campaign-art__chapter img{width:46px;height:46px}}
.commander-art__body { display: grid; gap: 20px; }
.commander-art__loadout { display: grid; grid-template-columns: minmax(120px, 1fr) minmax(180px, 250px) minmax(120px, 1fr); gap: 12px; align-items: stretch; }
.commander-art__loadout-heading { grid-column: 1 / -1; }
.commander-art__loadout-heading h4 { margin: 0; font: 700 .83rem var(--font-ui); letter-spacing: .08em; text-transform: uppercase; }
.commander-art__loadout-heading p { margin: 4px 0 0; font-size: .76rem; }
.commander-art__slots { display: grid; grid-template-rows: repeat(4, minmax(54px, 1fr)); gap: 7px; }
.commander-art__slot { min-width: 0; margin: 0; padding: 6px; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #0b1822; }
.commander-art__slot img { width: 42px; height: 42px; object-fit: contain; flex: none; }
.commander-art__slot figcaption { overflow-wrap: anywhere; color: var(--ink); font-size: .77rem; text-transform: capitalize; }
.commander-art__figure { width: min(100%, 250px); margin: 0; border: 1px solid var(--line); background: #050a0f; align-self: start; justify-self: center; }
.commander-art__figure img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }
.commander-art__figure figcaption { padding: 10px; color: var(--muted); font-size: .78rem; }
.commander-art__groups { min-width: 0; display: grid; gap: 15px; }
.commander-art__groups h4 { margin: 0 0 8px; color: var(--ink); font: 700 .83rem var(--font-ui); text-transform: uppercase; letter-spacing: .08em; }
.commander-art__icons { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 7px; }
.commander-art__icons figure { min-width: 0; margin: 0; border: 1px solid var(--line); background: #0b1822; padding: 5px; text-align: center; }
.commander-art__icons img { display: block; width: 100%; height: 42px; object-fit: contain; }
.commander-art__icons figcaption { color: var(--muted); font-size: .68rem; line-height: 1.25; overflow-wrap: anywhere; text-transform: capitalize; }
@media(max-width:700px){.commander-art__loadout{grid-template-columns:repeat(2,minmax(0,1fr))}.commander-art__figure{grid-column:1/-1;grid-row:2}.commander-art__slot{gap:4px;padding:4px}.commander-art__slot img{width:28px;height:28px}.commander-art__icons{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.art-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:500px){.art-roster-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.report-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.report-card { min-width: 0; padding: 18px; border: 1px solid var(--line); background: #0b1720; }
.report-card--unread { border-left: 3px solid var(--cyan); background: #10212b; }
#report-inbox { display: grid; gap: 12px; }
.report-heading h3 { flex: 1 1 200px; margin: 0; font-size: 1rem; line-height: 1.35; }
.report-heading img { width: 32px; height: 32px; padding: 5px; border: 1px solid #345467; border-radius: 5px; background: #132b39; }
.report-heading img:nth-of-type(2) { background: #0d1a23; }
.report-heading img[src*="/report-state-icon/"] { padding: 2px; }
.report-card > p { margin: 7px 0 12px; font-size: .78rem; line-height: 1.35; }
.report-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.report-actions button { min-height: 38px; padding: 8px 12px; font-size: .74rem; }
.report-actions button + button { background: #142735; border-color: #3c6678; color: var(--cyan); }
.report-heading img { object-fit: contain; flex-shrink: 0; }
.report-outcomes { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0; }
.report-outcomes > span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #0b1822; color: var(--ink); padding: 4px 8px; font-size: .76rem; text-transform: capitalize; }
.report-outcomes img { width: 28px; height: 28px; object-fit: contain; }
.report-facts { display: grid; grid-template-columns: minmax(100px, 180px) minmax(0, 1fr); gap: 7px 14px; max-width: 650px; margin: 12px 0; font-size: .87rem; }
.report-facts dt { color: var(--muted); }
.report-facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.report-technical { margin: 12px 0; }
.report-technical summary { cursor: pointer; width: fit-content; color: var(--cyan); font-size: .78rem; }
.report-technical summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
@media(max-width:500px){.report-facts{grid-template-columns:1fr;gap:2px}.report-facts dd{margin-bottom:8px}}
#report-inbox pre { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; }
#report-folder, #report-order { min-width: 180px; padding: 10px 12px; margin: 8px 0 16px; border: 1px solid var(--line); background: #081018; color: var(--ink); font: inherit; }
#report-folder:focus-visible, #report-order:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.report-pager { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; font-size: .8rem; }
.report-pager[hidden] { display: none; }
/* Real-Time Community Command Chat */
.chat-status-wrapper { display: flex; align-items: center; gap: 8px; }
.chat-status { font-size: 0.8rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; text-transform: uppercase; }
.chat-status.status--live { background: rgba(16, 185, 129, 0.2); color: #10b981; border: 1px solid #10b981; }
.chat-status.status--connecting { background: rgba(245, 158, 11, 0.2); color: #f59e0b; border: 1px solid #f59e0b; }
.chat-status.status--offline { background: rgba(239, 68, 68, 0.2); color: #ef4444; border: 1px solid #ef4444; }

.chat-channels-nav { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chat-tab { background: #0c1822; border: 1px solid var(--line); color: var(--muted); padding: 8px 14px; font-size: 0.85rem; font-weight: 600; cursor: pointer; border-radius: 4px; transition: all 0.15s; }
.chat-tab:hover { color: var(--ink); border-color: var(--cyan); }
.chat-tab[aria-selected="true"] { background: #132a38; color: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 10px rgba(0, 255, 204, 0.2); }

.chat-panel { display: flex; flex-direction: column; border: 1px solid var(--line); background: #08121a; border-radius: 6px; overflow: hidden; }
.chat-log { height: 320px; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 0.88rem; scrollbar-color: var(--cyan) #08121a; }
.chat-empty { color: var(--muted); font-style: italic; text-align: center; margin: auto; }

.chat-msg { padding: 6px 10px; border-radius: 4px; background: rgba(255, 255, 255, 0.02); display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; line-height: 1.4; border-left: 2px solid transparent; }
.chat-msg:hover { background: rgba(255, 255, 255, 0.05); }
.chat-msg--broadcast { background: rgba(255, 170, 0, 0.12) !important; border-left: 3px solid var(--amber) !important; box-shadow: 0 0 12px rgba(255, 170, 0, 0.15); }

.chat-time { color: #526375; font-size: 0.75rem; min-width: 55px; }
.chat-sender { color: #38bdf8; font-weight: 700; margin-right: 4px; }
.chat-badge { font-size: 0.7rem; font-weight: 800; padding: 1px 6px; border-radius: 3px; letter-spacing: 0.05em; text-transform: uppercase; }
.chat-badge.broadcast { background: #ffaa00; color: #000; }
.chat-badge.gm { background: #818cf8; color: #fff; }

.chat-content { color: var(--ink); word-break: break-word; }

.rich-card-btn { background: #152635; border: 1px solid var(--cyan); color: var(--cyan); font-size: 0.78rem; font-weight: 600; padding: 2px 7px; border-radius: 4px; cursor: pointer; transition: background 0.15s; vertical-align: middle; margin: 0 2px; }
.rich-card-btn:hover { background: var(--cyan); color: #000; }
.rich-card-btn.report-tag { border-color: #a78bfa; color: #c4b5fd; background: #1e1b4b; }
.rich-card-btn.report-tag:hover { background: #8b5cf6; color: #fff; }

.rich-card-tag { font-size: 0.78rem; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.rich-card-tag.alliance-tag { background: rgba(56, 189, 248, 0.15); color: #38bdf8; border: 1px solid #0284c7; }
.rich-card-tag.trade-tag { background: rgba(234, 179, 8, 0.15); color: #eab308; border: 1px solid #ca8a04; }

.chat-form { border-top: 1px solid var(--line); padding: 10px; background: #0b1720; }
.chat-inputs-bar { display: flex; gap: 8px; align-items: center; }
.chat-target-input { width: 140px; padding: 8px 10px; border: 1px solid var(--line); background: #060d13; color: var(--ink); font: inherit; font-size: 0.85rem; border-radius: 4px; }
.chat-text-input { flex: 1; padding: 8px 12px; border: 1px solid var(--line); background: #060d13; color: var(--ink); font: inherit; font-size: 0.88rem; border-radius: 4px; }
.chat-text-input:focus, .chat-target-input:focus { border-color: var(--cyan); outline: none; box-shadow: 0 0 6px rgba(0, 255, 204, 0.3); }
.chat-send-btn { background: var(--cyan); color: #031410; font-weight: 700; border: none; padding: 8px 18px; border-radius: 4px; cursor: pointer; font-size: 0.88rem; transition: background 0.15s; }
.chat-send-btn:hover { background: #00cca3; }

.chat-shortcuts { display: flex; gap: 8px; margin-top: 8px; }
.shortcut-btn { font-size: 0.75rem; padding: 4px 8px; border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer; border-radius: 3px; }
.shortcut-btn:hover { color: var(--ink); border-color: var(--cyan); }

.message-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; padding: 16px; border: 1px solid var(--line); background: #0b1720; }
.message-form h3, .message-form label:nth-of-type(3) { grid-column: 1 / -1; }
.message-form h3 { margin: 0; }
.message-form label { display: grid; gap: 5px; min-width: 0; }
.message-form input, .message-form textarea, .message-controls select { width: 100%; padding: 10px; border: 1px solid var(--line); background: #081018; color: var(--ink); font: inherit; }
.message-form textarea { resize: vertical; min-height: 90px; }
.message-form button { justify-self: start; }
.message-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; }
.message-controls select { width: auto; min-width: 150px; }
.message-list { display: grid; gap: 10px; }
.message-card { min-width: 0; padding: 14px; border: 1px solid var(--line); background: #0b1720; }
.message-card--unread { border-left: 3px solid var(--cyan); background: #10212b; }
.message-card h3 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; }
.message-card__state-icon { width: 24px; height: 24px; margin-right: 8px; vertical-align: middle; object-fit: contain; }
.message-card p { margin: 6px 0; color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.message-card pre { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font: inherit; }
.message-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.message-card-actions button { min-height: 38px; padding: 8px 12px; font-size: .75rem; }
@media(max-width:600px) { .message-form { grid-template-columns: 1fr; } }

.site .site-identity { display: flex; align-items: center; gap: 10px; }
.site-identity img { width: 48px; height: 48px; object-fit: contain; }
.sector-vista { overflow-x: auto; overflow-y: hidden; border: 1px solid var(--line); background: #0a1720; scrollbar-color: var(--cyan) #09131d; }
.sector-vista__plane { position: relative; min-width: 760px; height: 440px; overflow: hidden; background: radial-gradient(ellipse at 38% 48%, #254352 0%, #142934 53%, #0b1c26 100%); }
.sector-vista__climate { position: absolute; inset: 0; pointer-events: none; background-size: 256px 256px; background-repeat: repeat; mix-blend-mode: soft-light; }
.sector-vista__climate--atlantic { background-image: url('/assets/runtime/world-map-terrain-tile/atlantic-coalition-periodic-v1.png'); opacity: .34; }
.sector-vista__climate--northern { background-image: url('/assets/runtime/world-map-terrain-tile/northern-federation-periodic-v1.png'); opacity: .56; mask-image: radial-gradient(ellipse 42% 42% at 27% 14%, #000 25%, transparent 100%); }
.sector-vista__climate--eastern { background-image: url('/assets/runtime/world-map-terrain-tile/eastern-directorate-periodic-v1.png'); opacity: .54; mask-image: radial-gradient(ellipse 36% 45% at 80% 79%, #000 24%, transparent 100%); }
.sector-vista__climate--sunward { background-image: url('/assets/runtime/world-map-terrain-tile/gray-zone-periodic-v1.png'); opacity: .52; mask-image: radial-gradient(ellipse 37% 38% at 82% 17%, #000 25%, transparent 100%), radial-gradient(ellipse 27% 33% at 8% 72%, #000 25%, transparent 100%); }
.sector-vista__plane::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 75px #050e19; }
.sector-vista__routes { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sector-vista__routes line { stroke: #86bdc67d; stroke-width: .2; stroke-dasharray: .6 .6; }
.sector-vista__travel-markers { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; }
.sector-vista__travel-marker rect { fill:#09222d; stroke:#93d9d8; stroke-width:.2; }
.sector-vista__route-head { position:absolute; inset:0; z-index:1; width:100%; height:100%; pointer-events:none; animation:sector-route-head 760ms ease-out both; }
.sector-vista__route-head ellipse { fill:#e3a34b; stroke:#e8c68c; stroke-width:.12; }
@keyframes sector-route-head { 0% { opacity:0; } 15% { opacity:.9; } 80% { opacity:.9; } 100% { opacity:0; } }
@media (prefers-reduced-motion:reduce) { .sector-vista__route-head { display:none; animation:none; } }
.sector-vista__home { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%); width: 92px; aspect-ratio: 1; border: 2px solid var(--cyan); border-radius: 50%; display: grid; place-content: center; text-align: center; background: #071923eb; box-shadow: 0 0 0 7px #63d8e61c, 0 0 25px #63d8e655; }
.sector-vista__home span { font-size: .55rem; letter-spacing: .08em; color: var(--cyan); }
.sector-vista__home strong { font: 700 1rem var(--font-display); }
.sector-vista__site { position: absolute; z-index: 2; transform: translate(-50%, -50%); width: 142px; min-height: 140px; display: grid; place-items: center; align-content: end; gap: 0; padding: 0 5px 5px; border: 1px solid transparent; background: transparent; color: var(--ink); text-transform: none; letter-spacing: normal; }
.sector-vista__site[data-x="-3"] { left: 12.5%; }.sector-vista__site[data-x="-2"] { left: 25%; }.sector-vista__site[data-x="-1"] { left: 37.5%; }.sector-vista__site[data-x="0"] { left: 50%; }.sector-vista__site[data-x="1"] { left: 62.5%; }.sector-vista__site[data-x="2"] { left: 75%; }.sector-vista__site[data-x="3"] { left: 87.5%; }
.sector-vista__site[data-y="-3"] { top: 80%; }.sector-vista__site[data-y="-2"] { top: 70%; }.sector-vista__site[data-y="-1"] { top: 60%; }.sector-vista__site[data-y="0"] { top: 50%; }.sector-vista__site[data-y="1"] { top: 40%; }.sector-vista__site[data-y="2"] { top: 30%; }.sector-vista__site[data-y="3"] { top: 20%; }
.sector-vista__site:hover { transform: translate(-50%, -50%) scale(1.04); background: #07192377; }
.sector-vista__site.is-selected { border-color: var(--cyan); background: #07192399; box-shadow: 0 0 16px #63d8e655; }
.sector-vista__site:not(.is-selected):focus-visible::before { content: ''; position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); width: 120px; height: 120px; background: url('/assets/runtime/world-map-state-overlay/hover.svg') center / contain no-repeat; pointer-events: none; }
@media (hover:hover) { .sector-vista__site:not(.is-selected):hover::before { content: ''; position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); width: 120px; height: 120px; background: url('/assets/runtime/world-map-state-overlay/hover.svg') center / contain no-repeat; pointer-events: none; } }
.sector-vista__terrain { width: 118px; height: 112px; object-fit: contain; }
.sector-vista__selection { position: absolute; top: 0; left: 50%; z-index: 1; transform: translateX(-50%); width: 120px; height: 120px; object-fit: contain; pointer-events: none; }
.sector-vista__marker { position: absolute; top: 13px; right: 6px; z-index: 2; width: 34px; height: 34px; object-fit: contain; filter: drop-shadow(0 2px 5px #000); }
.sector-vista__site strong { position: relative; z-index: 2; width: 100%; padding: 5px; background: #071923df; font: 700 .72rem var(--font-display); text-transform: uppercase; line-height: 1.1; }
.sector-vista__hint { margin: 8px 0 0; font-size: .78rem; }
.site{position:relative;isolation:isolate;overflow:hidden;min-height:168px;padding:15px;align-content:end}.site::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#07131eea 0%,#07131eb8 55%,#07131e66 100%);pointer-events:none}.site-backdrop{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;filter:saturate(.78)}.site-terrain{position:absolute;top:-10px;right:-10px;width:142px;height:142px;object-fit:contain;opacity:.82;pointer-events:none}.site--unknown .site-backdrop{filter:grayscale(.8) brightness(.5)}.site--unknown .site-terrain{opacity:.32}.site-identity,.site strong,.site small{position:relative;z-index:1}.site strong,.site small{max-width:75%}@media(max-width:650px){.site{min-height:154px}.site-terrain{width:116px;height:116px}}
.site-selection{position:absolute;top:-2px;right:-2px;width:134px;height:134px;object-fit:contain;pointer-events:none}.site--unknown .site-selection{opacity:.85}
.site:not(.is-selected):focus-visible::after{content:'';position:absolute;top:-2px;right:-2px;width:134px;height:134px;background:url('/assets/runtime/world-map-state-overlay/hover.svg') center / contain no-repeat;pointer-events:none}
@media(hover:hover){.site:not(.is-selected):hover::after{content:'';position:absolute;top:-2px;right:-2px;width:134px;height:134px;background:url('/assets/runtime/world-map-state-overlay/hover.svg') center / contain no-repeat;pointer-events:none}}

.game-navigation { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-block: 24px; }
#game-panel > header { flex-wrap: wrap; }
.header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.header-actions button { white-space: nowrap; }
.game-navigation{position:sticky;top:0;z-index:30;gap:6px;padding:8px 12px;border:1px solid #1f3747;border-radius:8px;background:linear-gradient(180deg,#0c1924f2,#071017f8);backdrop-filter:blur(12px);box-shadow:0 8px 24px #000a,inset 0 1px 0 #ffffff14}
.game-navigation a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:6px 12px;color:#94a3b8;text-decoration:none;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border-radius:6px;border:1px solid transparent;transition:all 180ms ease}
.game-navigation a:hover,.game-navigation a:focus-visible{color:var(--cyan);background:#18384780;border-color:#183847}
.game-navigation a[aria-current="location"]{color:#04151e;background:linear-gradient(180deg,#00ffcc,#00d2a8);border-color:#00ffcc;box-shadow:0 0 16px #00ffcc4d,inset 0 1px #fff6}
#resource-fields-title,#settlement-title,#sector-title,#forces-title,#reports-title,#social-title,#endgame-title{scroll-margin-top:84px}
.game-navigation img{width:28px;height:28px;padding:4px;border:1px solid #345467;border-radius:5px;background:#132b39;box-shadow:inset 0 1px #ffffff12;object-fit:contain;flex:none}
.game-navigation a:hover img,.game-navigation a:focus-visible img{border-color:var(--cyan);background:#1a4251}
.game-navigation a[aria-current="location"] img{border-color:#005e4c;background:#004033;filter:brightness(0.15)}
.game-icon-credit{margin:28px 0 16px;color:#556a7b;font-size:.65rem;line-height:1.45;text-align:center;border-top:1px solid #1b2d3b;padding-top:12px}
.game-icon-credit a{color:var(--cyan)}

/* Authentic MMO Web Game View Switcher via :has() */
#game-panel:has(.game-navigation a[aria-current="location"]) > .hero,
#game-panel:has(.game-navigation a[aria-current="location"]) > .functional-landscape,
#game-panel:has(.game-navigation a[aria-current="location"]) > #chat-container,
#game-panel:has(.game-navigation a[aria-current="location"]) > .endgame,
#game-panel:not(:has(.game-navigation a[aria-current="location"])) > .functional-landscape:not(.functional-landscape--resources),
#game-panel:not(:has(.game-navigation a[aria-current="location"])) > #chat-container,
#game-panel:not(:has(.game-navigation a[aria-current="location"])) > .endgame {
  display: none;
}

#game-panel:has(.game-navigation a[href="#resource-fields-title"][aria-current="location"]) > .hero,
#game-panel:has(.game-navigation a[href="#resource-fields-title"][aria-current="location"]) > .functional-landscape--resources,
#game-panel:not(:has(.game-navigation a[aria-current="location"])) > .hero,
#game-panel:not(:has(.game-navigation a[aria-current="location"])) > .functional-landscape--resources {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#game-panel:has(.game-navigation a[href="#settlement-title"][aria-current="location"]) > .hero,
#game-panel:has(.game-navigation a[href="#settlement-title"][aria-current="location"]) > .functional-landscape--infrastructure {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#game-panel:has(.game-navigation a[href="#sector-title"][aria-current="location"]) > .functional-landscape--sector {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#game-panel:has(.game-navigation a[href="#forces-title"][aria-current="location"]) > .functional-landscape--forces {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#game-panel:has(.game-navigation a[href="#reports-title"][aria-current="location"]) > .functional-landscape--reports:not(#chat-container) {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#game-panel:has(.game-navigation a[href="#chat-title"][aria-current="location"]) > #chat-container {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#game-panel:has(.game-navigation a[href="#social-title"][aria-current="location"]) > .functional-landscape--social {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

#game-panel:has(.game-navigation a[href="#endgame-title"][aria-current="location"]) > .endgame {
  display: block;
  animation: gameViewIn 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

.game-navigation:not(:has(a[aria-current="location"])) a[href="#resource-fields-title"] {
  color: #04151e;
  background: linear-gradient(180deg, #00ffcc, #00d2a8);
  border-color: #00ffcc;
  box-shadow: 0 0 16px #00ffcc4d, inset 0 1px #fff6;
}
.game-navigation:not(:has(a[aria-current="location"])) a[href="#resource-fields-title"] img {
  border-color: #005e4c;
  background: #004033;
  filter: brightness(0.15);
}

@keyframes gameViewIn {
  from { opacity: 0.2; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.workspace-note{margin:0 0 14px;font-size:.85rem}
.workspace-subtitle{margin:24px 0 8px;font:700 1.25rem var(--font-display);text-transform:uppercase}
.field-atlas{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:12px;margin:18px 0 28px}
.field-atlas__grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;padding:12px;border:1px solid var(--line);background:linear-gradient(#06131bc9,#06131bd9),var(--landscape-outside,none) center/cover,#0a1820}
.field-atlas__slot{position:relative;min-width:0;min-height:104px;display:grid;place-items:center;padding:7px;background:#0b1b27cf;color:var(--ink);border:1px solid #3b5769}
.field-atlas__slot:hover,.field-atlas__slot.is-selected{border-color:var(--cyan);background:#163643e8;box-shadow:inset 0 0 0 1px var(--cyan)}
.field-atlas__slot img{width:min(76px,100%);height:76px;object-fit:contain;filter:drop-shadow(0 5px 8px #000a)}
.field-atlas__slot span{position:absolute;top:4px;left:5px;color:var(--cyan);font:.65rem var(--font-ui)}
.field-atlas__detail{border:1px solid var(--line);background:#0a1720;padding:17px;display:grid;align-content:start;gap:12px}
.field-atlas__detail strong{font:700 1.28rem var(--font-display);text-transform:uppercase}
.field-atlas__detail span{color:var(--muted);font-size:.82rem;line-height:1.6}
.field-atlas__detail .field-atlas__resource{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.08em}
.field-atlas__resource img{width:32px;height:32px;object-fit:contain;flex:none}
@media(max-width:900px){.field-atlas{grid-template-columns:1fr}.field-atlas__detail{min-height:0}}
@media(max-width:650px){.field-atlas__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.field-atlas__slot{min-height:96px}}
#resource-fields-title,#settlement-title,#forces-title,#sector-title,#reports-title,#social-title{scroll-margin-top:88px}
@media(max-width:650px){#resource-fields-title,#settlement-title,#forces-title,#sector-title,#reports-title,#social-title{scroll-margin-top:128px}}
@media(max-width:650px){.game-navigation{flex-wrap:nowrap;overflow-x:auto;scrollbar-color:var(--cyan) #09131d}.game-navigation a{white-space:nowrap;flex:none}}
a { color: var(--cyan); }
a:focus-visible, summary:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
.art-index { padding: 20px; border: 1px solid var(--line); margin-block: 24px; }
.art-index summary { cursor: pointer; }
.art-index ol { columns: 3 240px; padding-left: 24px; }
.art-index li { break-inside: avoid; margin-bottom: 10px; }
.art-collection section { scroll-margin-top: 24px; margin-block: 32px; }
@media(max-width:500px){.art-collection :is(#art-section-4,#art-section-5,#art-section-6,#art-section-7,#art-section-8,#art-section-9,#art-section-10,#art-section-11,#art-section-12)>.section-heading{display:block}}

.art-search { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-block: 24px; }
.art-search input { flex: 1 1 260px; min-width: 0; }
.art-search p { flex-basis: 100%; margin: 0; }
.terrain-repeat-review__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.terrain-repeat-review__grid figure { min-width: 0; margin: 0; border: 1px solid var(--line); background: #08121a; }
.terrain-repeat-review__tile { width: 100%; aspect-ratio: 1; background-size: 50% 50%; background-repeat: repeat; }
.terrain-repeat-review__tile--atlantic { background-image: url('/assets/runtime/world-map-terrain-tile/atlantic-coalition-periodic-v1.png'); }
.terrain-repeat-review__tile--northern { background-image: url('/assets/runtime/world-map-terrain-tile/northern-federation-periodic-v1.png'); }
.terrain-repeat-review__tile--eastern { background-image: url('/assets/runtime/world-map-terrain-tile/eastern-directorate-periodic-v1.png'); }
.terrain-repeat-review__tile--sunward { background-image: url('/assets/runtime/world-map-terrain-tile/gray-zone-periodic-v1.png'); }
.terrain-repeat-review__grid figcaption { padding: 9px; color: var(--ink); font-size: .8rem; }
@media(max-width:800px){.terrain-repeat-review__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art-collection [hidden] { display: none !important; }

.landscape-review figure { margin: 24px 0; }
.landscape-review img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #071018; }
.landscape-review figcaption { color: var(--muted); margin-top: 8px; }

.landscape-contact__controls { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.landscape-routes__controls{margin:18px 0}.landscape-routes__controls label{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.landscape-routes__controls input{accent-color:var(--cyan)}
.landscape-routes__row{margin-top:26px;--route-image:none}.landscape-routes__row--atlantic-coalition{--route-image:url('/assets/runtime/settlement-scene/atlantic-coalition-route-panorama-v1.png')}.landscape-routes__row--northern-federation{--route-image:url('/assets/runtime/settlement-scene/northern-federation-route-panorama-v1.png')}.landscape-routes__row--eastern-directorate{--route-image:url('/assets/runtime/settlement-scene/eastern-directorate-route-panorama-v1.png')}.landscape-routes__row--gray-zone{--route-image:url('/assets/runtime/settlement-scene/gray-zone-route-panorama-v1.png')}
.landscape-routes__row h3{margin:0;font:700 1.35rem var(--font-display);text-transform:uppercase}.landscape-routes__row>p{margin:5px 0 12px}.landscape-routes__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.landscape-routes__grid figure{min-width:0;margin:0;border:1px solid var(--line);background:#071018}.landscape-routes__view{width:100%;aspect-ratio:1178/251;background-image:var(--route-image);background-size:160% auto;background-repeat:no-repeat}.landscape-routes__view[data-context="inside"]{background-position:0% 48%}.landscape-routes__view[data-context="city-gate"]{background-position:50% 48%}.landscape-routes__view[data-context="outside"]{background-position:100% 48%}.landscape-routes__grid figcaption{padding:8px 10px;color:var(--muted);font-size:.78rem}.landscape-routes__master{font-size:.8rem}.landscape-routes__master a{color:var(--cyan)}
.landscape-routes:has(#landscape-routes-mobile:checked) .landscape-routes__view{aspect-ratio:359/489;background-size:auto 100%}.landscape-routes:has(#landscape-routes-mobile:checked) .landscape-routes__view[data-context="inside"]{background-position:15% center}.landscape-routes:has(#landscape-routes-mobile:checked) .landscape-routes__view[data-context="city-gate"]{background-position:50% center}.landscape-routes:has(#landscape-routes-mobile:checked) .landscape-routes__view[data-context="outside"]{background-position:85% center}
@media(max-width:650px){.landscape-routes__grid{grid-template-columns:1fr}.landscape-routes .section-heading{display:block}}
.landscape-contact__controls label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.landscape-contact__controls input { accent-color: var(--cyan); }
.landscape-contact__row { margin-top: 24px; }
.landscape-contact__row h3 { font: 700 1.35rem var(--font-display); text-transform: uppercase; margin: 0 0 10px; }
.landscape-contact__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.landscape-contact__grid figure { min-width: 0; margin: 0; border: 1px solid var(--line); background: #071018; }
.landscape-contact__grid img { display: block; width: 100%; aspect-ratio: 1178 / 251; object-fit: cover; }
.landscape-contact__grid figcaption { padding: 8px 10px; color: var(--muted); font-size: .78rem; }
.landscape-contact:has(#landscape-mobile-crop:checked) .landscape-contact__grid img { aspect-ratio: 359 / 489; }
@media (max-width: 650px) { .landscape-contact .section-heading { display: block; } .landscape-contact__grid { grid-template-columns: 1fr; } }

.brand-lockup{display:block;width:min(390px,100%);height:auto;margin:0 0 18px;border:1px solid var(--line);background:#061017}.login-panel>.eyebrow{margin-bottom:8px}

/* Gray Doom typography specimen */
.typography-specimen h1{font-size:clamp(3.5rem,10vw,8rem);line-height:.86}.type-display-sample{font:600 clamp(1.1rem,3vw,2rem)/1.2 var(--font-display);letter-spacing:.08em;color:var(--ink)}.type-data-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.type-data-grid strong{font:700 1.15rem var(--font-ui);font-variant-numeric:tabular-nums;border:1px solid var(--line);padding:14px;color:var(--cyan)}.type-usage{display:grid;grid-template-columns:1fr 1fr;gap:18px}.type-usage h3{font:700 1.5rem var(--font-display);text-transform:uppercase;margin:0}@media(max-width:650px){.type-data-grid,.type-usage{grid-template-columns:1fr 1fr}}
.header-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap;max-width:100%}.art-collection>header{flex-wrap:wrap;align-items:flex-start}.art-collection>header>div{min-width:0}

/* Canonical login/session loading identity. */
.loading-screen{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(circle at 50% 38%,#173548 0,#081018 48%,#030609 100%)}.loading-screen[hidden]{display:none}.loading-screen::before{content:'';position:absolute;inset:0;background:linear-gradient(#63d8e608 1px,transparent 1px),linear-gradient(90deg,#63d8e608 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(circle,#000 0,transparent 72%)}.loading-screen__core{position:relative;width:min(420px,84vw);display:grid;justify-items:center;text-align:center;gap:10px}.loading-screen__core img{width:min(210px,54vw);aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 18px 35px #000c)}.loading-screen__core strong{font:700 clamp(2rem,7vw,3.4rem)/1 var(--font-display);text-transform:uppercase;letter-spacing:.04em}.loading-screen__core span{color:var(--muted);font-size:.82rem}.loading-screen__core i{display:block;width:100%;height:3px;margin-top:14px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);transform-origin:left;animation:network-scan 1.25s ease-in-out infinite}@keyframes network-scan{0%{transform:scaleX(.08);opacity:.35}50%{transform:scaleX(1);opacity:1}100%{transform:scaleX(.08);opacity:.35}}@media(prefers-reduced-motion:reduce){.loading-screen__core i{animation:none;transform:scaleX(1)}}

/* Public entry and registration preview use original Gray Doom art and explicit demo states. */
.public-site{background:#080f16}.public-header,.public-footer{width:min(1180px,92vw);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}.public-header{min-height:92px;border-bottom:1px solid var(--line)}.public-brand img{display:block;width:200px;max-width:42vw;height:auto}.public-header nav,.public-footer{display:flex;flex-wrap:wrap;gap:18px;font-size:.83rem;text-transform:uppercase;letter-spacing:.08em}.public-header nav a,.public-footer a{color:var(--ink);text-decoration:none}.public-header nav a:hover,.public-footer a:hover{text-decoration:underline}.public-hero{min-height:540px;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(250px,.7fr);align-items:center;gap:30px;padding:max(50px,6vw) max(4vw,calc((100vw - 1180px)/2));background:linear-gradient(90deg,#071018f2,#071018cf 54%,#07101880),url('/assets/runtime/functional-background/gray-zone-fullbleed-v2.png') center/cover}.public-hero h1{max-width:780px;font-size:clamp(2.8rem,6vw,5.8rem)}.public-hero__copy>p:not(.eyebrow){max-width:660px}.public-hero__emblem{display:grid;place-items:center}.public-hero__emblem img{width:min(360px,100%);filter:drop-shadow(0 25px 30px #000a)}.public-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 10px}.public-button{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 18px;background:var(--cyan);border:1px solid var(--cyan);color:#08202a;text-decoration:none;font:700 .86rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase}.public-button--ghost{background:#07131bd9;color:var(--cyan)}.public-button:hover{filter:brightness(1.12)}.public-note{font-size:.8rem;color:#afbdc6}.public-section{width:min(1180px,92vw);margin:68px auto}.public-section__heading{max-width:760px}.public-world{display:flex;align-items:center;justify-content:space-between;gap:24px;border:1px solid var(--line);padding:28px;background:#101923}.public-world strong{font:700 1.45rem var(--font-display);text-transform:uppercase}.public-world p{margin-bottom:0}.public-status{flex:none;color:var(--amber);border:1px solid var(--amber);padding:9px 12px;font:.75rem var(--font-ui);letter-spacing:.1em}.public-factions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0}.public-faction{min-height:330px;display:flex;flex-direction:column;justify-content:space-between;border:1px solid var(--line);padding:24px;background:linear-gradient(0deg,#071018f2,#07101855),var(--faction-scene) center/cover}.public-faction--atlantic{--faction-scene:url('/assets/runtime/settlement-scene/atlantic-coalition-outside-fullbleed-v2.png')}.public-faction--northern{--faction-scene:url('/assets/runtime/settlement-scene/northern-federation-outside-fullbleed-v2.png')}.public-faction--eastern{--faction-scene:url('/assets/runtime/settlement-scene/eastern-directorate-outside-fullbleed-v2.png')}.public-faction img{width:78px;height:78px;object-fit:contain}.public-faction h3{font:700 1.4rem var(--font-display);text-transform:uppercase;margin:0}.public-faction p{color:var(--ink);margin:6px 0 0}.public-footer{border-top:1px solid var(--line);padding:30px 0;margin-top:70px;color:var(--muted)}
.join-layout{width:min(920px,92vw);margin:60px auto}.join-intro{max-width:720px}.join-intro h1{font-size:clamp(2.8rem,6vw,5rem)}.join-progress{display:flex;gap:8px;list-style:none;padding:0;margin:38px 0 18px}.join-progress li{flex:1;padding:12px;border-bottom:2px solid var(--line);font:.78rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.join-progress li[aria-current="step"]{color:var(--cyan);border-color:var(--cyan)}.join-step{border:1px solid var(--line);background:#101923;padding:30px;min-height:310px}.join-step[hidden],.join-controls [hidden]{display:none}.join-step h2{font-size:clamp(1.8rem,4vw,2.8rem)}.join-step h2:focus{outline:none}.join-choice{width:100%;display:grid;gap:7px;text-align:left;color:var(--ink);background:#0b1720;border:1px solid #385268;letter-spacing:normal;text-transform:none}.join-choice strong{font:700 1.15rem var(--font-display);text-transform:uppercase}.join-choice span{color:var(--muted);font-weight:400}.join-choice.is-selected{border-color:var(--cyan);box-shadow:inset 0 0 0 1px var(--cyan);background:#15303b}.join-worlds{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:20px 0}.join-factions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.join-choice--faction{min-height:200px}.join-choice--faction img{width:70px;height:70px;object-fit:contain}.join-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:24px 0}.join-field{display:grid;gap:6px}.join-field label{font:700 .82rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--cyan)}.join-field input,.join-field select{width:100%;padding:10px 14px;background:#081018;border:1px solid var(--line);color:var(--ink);font:inherit;font-size:.95rem;box-sizing:border-box}.join-field input:focus,.join-field select:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 8px rgba(0,255,204,0.25)}.join-field small{color:var(--muted);font-size:.76rem}.join-review{display:grid;gap:10px;margin:20px 0}.join-review div{display:grid;grid-template-columns:140px 1fr;border-bottom:1px solid var(--line);padding:9px 0}.join-review dt{color:var(--muted)}.join-review dd{margin:0}.join-success-banner{padding:14px;background:#0e2a22;border:1px solid #1f6b54;color:#6ee7b7;margin:18px 0;line-height:1.5}.join-success-banner strong{color:#a7f3d0}.join-message{color:var(--amber);min-height:1.5em;margin:8px 0}.join-controls{display:flex;justify-content:space-between;gap:12px}.join-controls button:last-child{margin-left:auto}
@media(max-width:750px){.public-header{align-items:flex-start;flex-direction:column;padding:18px 0}.public-header nav{gap:10px 16px}.public-hero{grid-template-columns:1fr;padding:45px 4vw}.public-hero__emblem{grid-row:1;justify-content:start}.public-hero__emblem img{width:130px}.public-factions,.join-factions,.join-worlds{grid-template-columns:1fr}.public-faction{min-height:270px}.join-choice--faction{min-height:130px}.join-fields{grid-template-columns:1fr}.public-world{align-items:flex-start;flex-direction:column}.join-step{padding:22px}.join-progress li{font-size:.68rem;padding:8px}}

/* Region-specific ornament stays legible when scenic backgrounds crop on narrow screens. */
.public-faction{position:relative;isolation:isolate;--motif:none}
.public-faction::before{content:"";position:absolute;inset:0;z-index:0;background:var(--motif) right top/128px repeat;opacity:.28;pointer-events:none}
.public-faction>*{position:relative;z-index:1}
.public-faction--atlantic,.join-choice--faction[data-faction="atlantic-coalition"]{--motif:url('/assets/runtime/faction-motif/atlantic-coalition.svg')}
.public-faction--northern,.join-choice--faction[data-faction="northern-federation"]{--motif:url('/assets/runtime/faction-motif/northern-federation.svg')}
.public-faction--eastern,.join-choice--faction[data-faction="eastern-directorate"]{--motif:url('/assets/runtime/faction-motif/eastern-directorate.svg')}
.public-world{position:relative;isolation:isolate;overflow:hidden}
.public-world::before{content:"";position:absolute;inset:0;z-index:0;background:url('/assets/runtime/faction-motif/gray-zone.svg') right top/128px repeat;opacity:.35;pointer-events:none}
.public-world>*{position:relative;z-index:1}
.public-atlas{position:relative;margin:24px 0 12px;overflow:hidden;background:#101923}.public-atlas img{display:block;width:100%;height:auto}.public-atlas figcaption{position:absolute;inset:auto 0 0;display:flex;justify-content:space-between;align-items:end;gap:12px;padding:30px 24px 20px;background:linear-gradient(transparent,#071018e8);font:700 .85rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 5px #000}.public-atlas figcaption strong{font:700 clamp(1.15rem,2vw,1.7rem) var(--font-display)}@media(max-width:600px){.public-atlas figcaption{position:static;padding:14px;flex-wrap:wrap;background:#101923}.public-atlas figcaption strong{font-size:1.1rem}}
.join-choice--faction{background-image:linear-gradient(120deg,#0b1720f2,#0b1720a8),var(--motif);background-size:cover,128px;background-repeat:no-repeat,repeat}

.event-art{margin-top:18px;border:1px solid #5d4930;background:#0d171d;padding:14px}.event-art summary{cursor:pointer;color:var(--amber);font:700 .9rem var(--font-ui);letter-spacing:.08em;text-transform:uppercase}.event-art__grid{list-style:none;padding:0;margin:14px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.event-art__card{min-width:0;display:flex;gap:12px;padding:13px;border:1px solid #453d31;background:#121c22}.event-art__card img{width:56px;height:56px;flex:none;object-fit:contain}.event-art__card div{min-width:0}.event-art__card h4{margin:0 0 5px;font:700 1.05rem var(--font-display);text-transform:uppercase}.event-art__card p{margin:0 0 7px;color:var(--ink);font-size:.82rem;line-height:1.4}.event-art__card small,.event-art__card span{display:block;color:var(--muted);font-size:.75rem;line-height:1.45}.event-art__card small{color:var(--cyan);margin-bottom:6px}@media(max-width:700px){.event-art__grid{grid-template-columns:1fr}.event-art__card img{width:46px;height:46px}}
/* Strategic Complex construction confirmation, using the pinned Kenney particle texture. */
.complex-visual.is-activating::before{content:'';position:absolute;z-index:0;right:12%;top:12%;width:min(220px,52%);aspect-ratio:1;background:#ffe0a0;mask:url('/assets/vfx/ui/command-pulse.png') center/contain no-repeat;pointer-events:none;animation:complex-activation-pulse 950ms ease-out both}
@keyframes complex-activation-pulse{0%{opacity:0;transform:scale(.45)}35%{opacity:.8;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@media(prefers-reduced-motion:reduce){.complex-visual.is-activating::before{display:none;animation:none}}
/* Confirmed objective claim; the server-owned state remains visible without motion. */
.objective{position:relative;isolation:isolate;overflow:hidden}.objective.is-claim-confirmed::after{content:"";position:absolute;z-index:1;left:6px;top:4px;width:58px;height:58px;background:#98e8d0;mask:url('/assets/vfx/ui/command-pulse.png') center/contain no-repeat;pointer-events:none;animation:claim-confirmed-pulse 760ms ease-out both}@keyframes claim-confirmed-pulse{0%{opacity:0;transform:scale(.45)}35%{opacity:.75;transform:scale(.9)}100%{opacity:0;transform:scale(1.25)}}@media(prefers-reduced-motion:reduce){.objective.is-claim-confirmed::after{display:none;animation:none}}

.diplomacy-relation>.alliance-profile,.alliance-offer>.alliance-profile{grid-column:1/-1}.alliance-profile summary{cursor:pointer;color:var(--cyan)}

/* ==========================================================================
   TRAVIAN: LEGENDS MMORPG STAGE ARCHITECTURE (SINGLE-SCREEN TABBED VIEWPORT)
   ========================================================================== */

.game-hud-sticky {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(8, 16, 24, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 2px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  padding: 8px 16px 14px;
  margin: -8vh auto 20px;
  width: 100%;
}

.game-hud-sticky header {
  padding-bottom: 6px;
}

.game-hud-sticky .status {
  margin: 8px 0;
  padding: 6px 0;
}

.game-navigation {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 6px;
  background: rgba(13, 23, 32, 0.85);
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid var(--line);
}

.game-navigation a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  color: var(--muted);
  text-decoration: none;
  font: 700 0.82rem var(--font-ui);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s ease;
  background: rgba(16, 28, 40, 0.6);
}

.game-navigation a img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0.8);
  transition: filter 0.2s ease;
}

.game-navigation a:hover {
  color: var(--ink);
  background: rgba(20, 37, 51, 0.95);
  border-color: rgba(99, 216, 230, 0.4);
}

.game-navigation a:hover img {
  filter: brightness(1.1);
}

.game-navigation a.is-active-tab,
.game-navigation a[aria-current="location"] {
  color: var(--cyan);
  background: linear-gradient(135deg, rgba(99, 216, 230, 0.2), rgba(16, 32, 45, 0.95));
  border-color: var(--cyan);
  box-shadow: inset 0 0 10px rgba(99, 216, 230, 0.25), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.game-navigation a.is-active-tab img,
.game-navigation a[aria-current="location"] img {
  filter: brightness(1.2) drop-shadow(0 0 4px var(--cyan));
}

/* Tab Stage Switching */
#game-panel .game-stage {
  display: none !important;
  animation: stageFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes stageFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Active Stage Rules */
#game-panel:not([data-active-stage]) .game-stage[data-stage~="resource-fields-title"],
#game-panel[data-active-stage="resource-fields-title"] .game-stage[data-stage~="resource-fields-title"],
#game-panel[data-active-stage="settlement-title"] .game-stage[data-stage~="settlement-title"],
#game-panel[data-active-stage="sector-title"] .game-stage[data-stage~="sector-title"],
#game-panel[data-active-stage="forces-title"] .game-stage[data-stage~="forces-title"],
#game-panel[data-active-stage="reports-title"] .game-stage[data-stage~="reports-title"],
#game-panel[data-active-stage="chat-title"] .game-stage[data-stage~="chat-title"],
#game-panel[data-active-stage="social-title"] .game-stage[data-stage~="social-title"],
#game-panel[data-active-stage="endgame-title"] .game-stage[data-stage~="endgame-title"] {
  display: block !important;
}

/* Hero stage display */
#game-panel[data-active-stage="resource-fields-title"] .hero.game-stage,
#game-panel[data-active-stage="settlement-title"] .hero.game-stage {
  display: grid !important;
}

/* ==========================================================================
   AUTHENTIC SETTLEMENT LAYOUT: NATURAL DORF1 & FORTIFIED DORF2
   ========================================================================== */

.settlement-stage-switcher {
  display: flex;
  gap: 12px;
  margin: 18px 0 22px;
  flex-wrap: wrap;
}

.stage-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: #09151f;
  border: 1px solid var(--line);
  color: var(--muted);
  text-decoration: none;
  font: 700 0.92rem var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.stage-tab img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  opacity: 0.7;
}

.stage-tab__key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #102433;
  border: 1px solid #3b5769;
  border-radius: 4px;
  color: var(--cyan);
  font-size: 0.75rem;
  font-weight: 700;
}

.stage-tab:hover,
.stage-tab.is-active,
#game-panel[data-active-stage="resource-fields-title"] #tab-dorf1,
#game-panel[data-active-stage="settlement-title"] #tab-dorf2,
#game-panel[data-active-stage="sector-title"] #tab-dorf3,
#game-panel[data-active-stage="forces-title"] #tab-dorf4 {
  background: linear-gradient(135deg, #102738, #0c1c28);
  border-color: var(--cyan);
  color: var(--ink);
  box-shadow: 0 0 16px rgba(0, 242, 254, 0.2);
}

.stage-tab.is-active img,
#game-panel[data-active-stage="resource-fields-title"] #tab-dorf1 img,
#game-panel[data-active-stage="settlement-title"] #tab-dorf2 img {
  opacity: 1;
  filter: drop-shadow(0 0 4px var(--cyan));
}

/* Natural Landscape Stages */
.dorf1-natural-stage,
.dorf2-city-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: 16px;
  margin: 16px 0 28px;
}

.dorf1-canvas,
.dorf2-canvas {
  position: relative;
  aspect-ratio: 1536 / 1024;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background: #06131c;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.6);
}

.dorf1-background,
.dorf2-background {
  position: absolute;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: brightness(0.92) contrast(1.05);
  pointer-events: none;
  transition: background-image 0.4s ease;
}

.dorf1-background {
  background-image: var(--dorf1-bg, url('/assets/runtime/settlement-scene/gray-zone-outside-fullbleed-v2.png'));
}

.dorf2-background {
  background-image: var(--dorf2-bg, url('/assets/runtime/settlement-scene/gray-zone-inside-fullbleed-v2.png'));
}

.dorf1-canvas::after,
.dorf2-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(10, 24, 34, 0.1) 45%, rgba(6, 17, 25, 0.65) 100%);
  pointer-events: none;
}

/* Layers */
.dorf1-fields-layer,
.dorf2-plots-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Dorf1: 2.5D Isometric Field Plot Nodes */
.dorf-field-node {
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 0;
  border: none;
  background: transparent;
  transform: translate(-50%, -50%) scale(var(--plot-scale, 1));
  transform-origin: 50% 82%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  isolation: isolate;
  pointer-events: auto;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dorf-field-node:hover {
  transform: translate(-50%, -52%) scale(calc(var(--plot-scale, 1) * 1.06));
  z-index: 50 !important;
}

/* Isometric Foundation Pad (Canonical 1.8:1 Diamond) with Ground Contact Shadow */
.dorf-field-node::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 74px;
  height: 42px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(24, 52, 74, 0.95), rgba(7, 18, 28, 0.98)),
    linear-gradient(180deg, rgba(34, 211, 238, 0.25) 0%, transparent 40%);
  box-shadow: inset 0 0 0 1.5px rgba(56, 189, 248, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.15);
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  z-index: 0;
  pointer-events: none;
  transition: filter 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.dorf-field-node:hover::after {
  background: radial-gradient(ellipse at 50% 40%, rgba(32, 68, 96, 0.98), rgba(10, 24, 36, 0.98));
  box-shadow: inset 0 0 0 1.5px rgba(99, 216, 230, 0.8), inset 0 2px 6px rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.65)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.95));
}

.dorf-field-node.is-selected::after {
  background: radial-gradient(ellipse at 50% 40%, rgba(42, 85, 118, 0.98), rgba(12, 30, 46, 0.98));
  box-shadow: inset 0 0 0 2px #ffd166, inset 0 2px 6px rgba(255, 255, 255, 0.3);
  filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.8)) drop-shadow(0 10px 18px rgba(0, 0, 0, 0.95));
}

.dorf-field-node img {
  position: relative;
  z-index: 1;
  width: 68px;
  height: 68px;
  object-fit: contain;
  margin-bottom: 4px;
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.dorf-field-node:hover img {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 8px rgba(34, 211, 238, 0.4));
}

.dorf-field-node.is-upgrading::before {
  content: "";
  position: absolute;
  inset: -4px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: 2px dashed var(--amber);
  animation: dorfPadPulse 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes dorfPadPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.06); }
}

@keyframes dorfRingSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Badges: Rule 29 Borderless Canvas */
.dorf-level-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: rgba(6, 18, 28, 0.6);
  color: var(--cyan);
  border: none;
  border-bottom: 1.5px solid var(--cyan);
  font: 700 0.7rem var(--font-ui);
  text-shadow: 0 1px 4px #000, 0 0 8px rgba(0, 242, 254, 0.6);
  padding: 0 4px 1px 4px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  pointer-events: none;
  z-index: 2;
}

.dorf-slot-number {
  position: absolute;
  bottom: 2px;
  left: 2px;
  background: rgba(8, 20, 29, 0.6);
  color: var(--muted);
  border: none;
  border-bottom: 1px solid rgba(80, 130, 160, 0.4);
  font: 600 0.62rem var(--font-mono, monospace);
  padding: 0 3px;
  border-radius: 2px;
  pointer-events: none;
  z-index: 2;
}

/* Center Village Core (dorf1 -> dorf2 Portal) */
.dorf1-village-core {
  position: absolute;
  left: 50.0%;
  top: 48.0%;
  transform: translate(-50%, -50%);
  z-index: 28;
  width: min(120px, 18vw);
  height: min(100px, 15vw);
  min-width: 90px;
  min-height: 74px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.dorf1-village-core::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 52px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background: radial-gradient(ellipse at center, rgba(36, 70, 94, 0.95), rgba(12, 26, 37, 0.98));
  box-shadow: inset 0 0 0 2px var(--amber), 0 8px 24px rgba(0, 0, 0, 0.9);
  z-index: 0;
  transition: all 0.22s ease;
}

.dorf1-village-core:hover {
  transform: translate(-50%, -50%) scale(1.1);
  z-index: 60;
}

.dorf1-village-core:hover::after {
  box-shadow: inset 0 0 0 2px #ffd166, 0 0 28px rgba(245, 158, 11, 0.6), 0 8px 24px rgba(0, 0, 0, 0.9);
}

.dorf1-village-core__graphic {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 6px;
}

.dorf1-village-core img {
  width: 64px;
  height: 64px;
  object-fit: contain;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.85));
}

.dorf1-village-core__badge {
  position: absolute;
  bottom: -8px;
  background: #0f1c24;
  color: var(--amber);
  border: 1px solid var(--amber);
  font: 700 0.65rem var(--font-display);
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.9);
}

/* Dorf2: 2.5D City Center Building Plots */
.dorf-building-node {
  position: absolute;
  width: 82px;
  height: 82px;
  background: transparent;
  border: none;
  border-radius: 0;
  transform: translate(-50%, -50%) scale(var(--plot-scale, 1));
  transform-origin: 50% 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  isolation: isolate;
  pointer-events: auto;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.dorf-building-node:hover {
  transform: translate(-50%, -52%) scale(calc(var(--plot-scale, 1) * 1.06));
  z-index: 50 !important;
}

/* Isometric Ground Foundation Pad (Canonical 1.8:1 Diamond) with Ground Contact Shadow */
.dorf-building-node::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 46px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(26, 48, 68, 0.95), rgba(8, 18, 28, 0.98)),
    linear-gradient(180deg, rgba(94, 234, 212, 0.25) 0%, transparent 40%);
  box-shadow: inset 0 0 0 1.5px rgba(94, 234, 212, 0.45), inset 0 2px 4px rgba(255, 255, 255, 0.15);
  filter: drop-shadow(0 12px 20px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
  z-index: 0;
  pointer-events: none;
  transition: filter 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.dorf-building-node:hover::after {
  background: radial-gradient(ellipse at 50% 40%, rgba(35, 65, 90, 0.98), rgba(12, 26, 38, 0.98));
  box-shadow: inset 0 0 0 1.5px rgba(34, 211, 238, 0.8), inset 0 2px 6px rgba(255, 255, 255, 0.25);
  filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.65)) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.95));
}

.dorf-building-node.is-selected::after {
  background: radial-gradient(ellipse at 50% 40%, rgba(45, 80, 110, 0.98), rgba(15, 32, 48, 0.98));
  box-shadow: inset 0 0 0 2px #ffd166, inset 0 2px 6px rgba(255, 255, 255, 0.3);
  filter: drop-shadow(0 0 20px rgba(245, 158, 11, 0.8)) drop-shadow(0 12px 20px rgba(0, 0, 0, 0.95));
}

.dorf-building-node img {
  position: relative;
  z-index: 1;
  width: 74px;
  height: 74px;
  object-fit: contain;
  margin-bottom: 4px;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.7));
  pointer-events: none;
  transition: transform 0.18s ease, filter 0.18s ease;
}

.dorf-building-node:hover img {
  transform: translateY(-2px) scale(1.04);
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.95)) drop-shadow(0 0 10px rgba(34, 211, 238, 0.4));
}

/* Empty Plot: Authentic Earthen/Cobblestone Foundation Plate Flush with Ground */
.dorf-building-node.is-empty {
  height: 82px;
}

.dorf-building-node.is-empty::after {
  height: 46px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.03) 0px, rgba(255, 255, 255, 0.03) 2px, transparent 2px, transparent 8px),
    radial-gradient(ellipse at 50% 45%, rgba(20, 36, 50, 0.95), rgba(7, 15, 22, 0.98));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.95), inset 0 0 0 1.5px rgba(94, 234, 212, 0.45);
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.85));
}

.dorf-building-node.is-empty:hover::after {
  background:
    repeating-linear-gradient(45deg, rgba(34, 211, 238, 0.05) 0px, rgba(34, 211, 238, 0.05) 2px, transparent 2px, transparent 8px),
    radial-gradient(ellipse at 50% 45%, rgba(28, 50, 68, 0.98), rgba(10, 22, 32, 0.98));
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.8), inset 0 0 0 1.5px rgba(34, 211, 238, 0.85);
  filter: drop-shadow(0 0 12px rgba(34, 211, 238, 0.5));
}

/* Empty Foundation Label with Tactical Stencil Styling */
.dorf-empty-foundation {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.dorf-empty-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cyan);
  opacity: 0.9;
  text-shadow: 0 1px 4px #000, 0 0 8px rgba(0, 242, 254, 0.5);
  background: rgba(6, 16, 24, 0.75);
  border: 1px solid rgba(34, 211, 238, 0.35);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}

.dorf-building-node.is-upgrading::before {
  content: "";
  position: absolute;
  inset: -4px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: 2px dashed var(--amber);
  animation: dorfPadPulse 2.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 3;
}

/* Wall Perimeter (Slot 40) */
.dorf2-wall-perimeter {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  pointer-events: none;
  z-index: 4;
}

.dorf2-wall-svg {
  width: 100%;
  height: 100%;
  pointer-events: none;
  filter: drop-shadow(0 0 12px rgba(94, 234, 212, 0.25));
}

.dorf2-wall-polygon {
  stroke: rgba(94, 234, 212, 0.65);
  stroke-width: 3.5;
  stroke-dasharray: none;
  fill: rgba(94, 234, 212, 0.03);
  transition: stroke 0.2s ease, filter 0.2s ease, fill 0.2s ease;
  pointer-events: stroke;
  cursor: pointer;
}

.dorf2-wall-perimeter:hover .dorf2-wall-polygon,
.dorf2-wall-polygon:hover {
  stroke: var(--cyan);
  stroke-width: 4.5;
  fill: rgba(34, 211, 238, 0.08);
  filter: drop-shadow(0 0 14px rgba(0, 242, 254, 0.7));
}

.dorf2-bastion-node {
  fill: var(--cyan);
  stroke: #0a1824;
  stroke-width: 2;
  filter: drop-shadow(0 0 6px rgba(0, 242, 254, 0.8));
}

.dorf2-wall-badge {
  position: absolute;
  bottom: 8px;
  right: 18px;
  background: rgba(11, 26, 36, 0.85);
  color: #a7f3d0;
  border: 1px solid #34d399;
  font: 700 0.72rem var(--font-ui);
  padding: 3px 8px;
  border-radius: 4px;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  cursor: pointer;
}

/* Sidebars & Telemetry Cards */
.dorf1-sidebar,
.dorf2-sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dorf-telemetry-card {
  background: #0a1720;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.telemetry-title {
  margin: 0;
  font: 700 0.82rem var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.production-telemetry-list {
  display: grid;
  gap: 6px;
}

.production-telemetry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 8px;
  background: #061118;
  border: 1px solid #1f3442;
  border-radius: 4px;
  font-size: 0.82rem;
}

.production-telemetry-row img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  margin-right: 6px;
  vertical-align: middle;
}

.production-telemetry-row strong {
  color: var(--cyan);
  font-family: var(--font-display);
  font-size: 0.95rem;
}

.inspector-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--ink);
}

.inspector-hint {
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.5;
  margin: 0;
}

.inspector-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.inspector-head img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  background: #07121a;
  padding: 4px;
  border-radius: 6px;
  border: 1px solid #203544;
}

.inspector-costs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.inspector-costs span {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: #061118;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.76rem;
  color: var(--muted);
}

.inspector-costs span.short {
  color: #ff8995;
  border: 1px solid #ff8995;
}

.inspector-btn {
  background: linear-gradient(135deg, #0284c7, #0369a1);
  color: #fff;
  border: 1px solid #38bdf8;
  padding: 8px 12px;
  border-radius: 6px;
  font: 700 0.88rem var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: all 0.15s ease;
}

.inspector-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  box-shadow: 0 0 12px rgba(14, 165, 233, 0.4);
}

.inspector-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.telemetry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  padding: 4px 0;
}

.telemetry-row strong {
  color: var(--ink);
}

@media (max-width: 960px) {
  .dorf1-natural-stage,
  .dorf2-city-stage {
    grid-template-columns: 1fr;
  }
}

.game-footer-credits {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.75rem;
}
.game-footer-credits p {
  font-size: 0.75rem;
  margin: 6px 0;
}

/* Live Node Countdown Badges */
.dorf-countdown-badge {
  position: absolute;
  bottom: -6px;
  right: -6px;
  background: #140b08;
  color: var(--amber, #f59e0b);
  border: 1px solid var(--amber, #f59e0b);
  font: 700 0.65rem var(--font-ui, monospace);
  padding: 1px 5px;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.4), 0 2px 6px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 5;
  animation: dorfPulse 2s infinite ease-in-out;
}

@keyframes dorfPulse {
  0%, 100% { opacity: 0.9; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.text-positive {
  color: #34d399 !important;
}

/* Rally Point Multi-Wave Builder */
.rally-wave-builder-panel {
  background: #08151f;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  margin-bottom: 20px;
}

.wave-builder-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: #040c12;
  border: 1px solid #1e3544;
  border-radius: 4px;
  font-size: 0.85rem;
}

.wave-builder-card.is-cleaner {
  border-color: var(--cyan);
}

.wave-badge {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.72rem;
  padding: 2px 6px;
  border-radius: 4px;
  background: #182e3c;
  color: var(--cyan);
}

.wave-badge.cleaner {
  background: rgba(45, 212, 191, 0.15);
  color: var(--cyan);
  border: 1px solid var(--cyan);
}

.wave-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wave-inputs label {
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 4px;
}

.wave-inputs input,
.wave-inputs select {
  background: #061118;
  border: 1px solid #233c4c;
  color: #e2e8f0;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 0.8rem;
}

/* ==========================================================================
   Toroidal 7x7 World Map Engine (Dorf3)
   ========================================================================== */

.toroidal-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  background: #0a1720;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 18px;
  margin-bottom: 16px;
}

.toroidal-nav-pad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.nav-btn-row {
  display: flex;
  align-items: center;
  gap: 3px;
}

.nav-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  background: #0e1e2b;
  color: var(--cyan);
  border-radius: 4px;
  font-size: 0.72rem;
  cursor: pointer;
  transition: all 0.15s ease;
}

.nav-btn:hover {
  background: rgba(34, 211, 238, 0.15);
  border-color: var(--cyan);
  box-shadow: 0 0 8px rgba(34, 211, 238, 0.3);
}

.nav-btn--home {
  font-weight: 700;
  color: var(--amber);
  border-color: rgba(245, 158, 11, 0.4);
}

.nav-btn--home:hover {
  background: rgba(245, 158, 11, 0.15);
  border-color: var(--amber);
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.3);
}

.toroidal-focal-badge {
  display: flex;
  flex-direction: column;
  padding: 0 16px;
  border-inline: 1px solid var(--line);
}

.focal-badge__label {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}

.focal-badge__coords {
  font-family: var(--font-mono, monospace);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0, 242, 254, 0.4);
}

.focal-badge__sub {
  font-size: 0.65rem;
  color: #64748b;
}

.toroidal-jump-form {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

.toroidal-jump-form label {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--muted);
}

.toroidal-jump-form input {
  width: 64px;
  padding: 4px 6px;
  background: #07121a;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--font-mono, monospace);
  font-size: 0.8rem;
  border-radius: 4px;
}

.toroidal-jump-form button {
  padding: 5px 12px;
  font-size: 0.75rem;
}

/* Map Stage & Grid Layout */
.toroidal-map-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px;
  align-items: start;
}

@media (max-width: 960px) {
  .toroidal-map-stage {
    grid-template-columns: 1fr;
  }
}

.toroidal-grid-wrapper {
  background:
    radial-gradient(ellipse at center, #0a1b28 0%, #03080e 100%),
    repeating-linear-gradient(0deg, rgba(34, 211, 238, 0.035) 0px, rgba(34, 211, 238, 0.035) 1px, transparent 1px, transparent 38px),
    repeating-linear-gradient(90deg, rgba(34, 211, 238, 0.035) 0px, rgba(34, 211, 238, 0.035) 1px, transparent 1px, transparent 38px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  overflow-x: auto;
  box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.85);
}

.toroidal-grid-7x7 {
  display: flex;
  flex-direction: column;
  width: max-content;
  margin: 14px auto;
  padding: 14px;
}

.toroidal-row {
  display: flex;
  margin-top: -18px;
  position: relative;
}

.toroidal-row:first-child {
  margin-top: 0;
}

/* Staggered isometric offset for odd rows */
.toroidal-row:nth-child(even) {
  margin-left: 40px;
}

/* Individual Map Tile */
.toroidal-tile {
  width: 80px;
  height: 50px;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  position: relative;
  background: radial-gradient(ellipse at center, #122c40, #081520);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  overflow: hidden;
  transition: transform 0.16s ease, filter 0.16s ease, z-index 0.16s ease;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.75));
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.toroidal-tile:hover {
  transform: translateY(-5px) scale(1.12);
  z-index: 40 !important;
  filter: drop-shadow(0 0 16px rgba(34, 211, 238, 0.75)) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.95));
}

.toroidal-tile.is-center {
  filter: drop-shadow(0 0 12px rgba(245, 158, 11, 0.85)) drop-shadow(0 6px 10px rgba(0, 0, 0, 0.8));
}

.toroidal-tile.is-center::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: 2px solid var(--amber);
  pointer-events: none;
  animation: centerPulse 2.4s ease-in-out infinite;
}

@keyframes centerPulse {
  0%, 100% { opacity: 0.75; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

.toroidal-tile.is-selected {
  transform: translateY(-3px) scale(1.1);
  filter: drop-shadow(0 0 18px rgba(245, 158, 11, 0.9)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.95));
  z-index: 35 !important;
}

.toroidal-tile.is-selected::after {
  content: "";
  position: absolute;
  inset: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border: 2px solid #ffd166;
  pointer-events: none;
}

.toroidal-tile__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.88;
  pointer-events: none;
}

.toroidal-tile__sprite {
  position: relative;
  z-index: 2;
  width: 60%;
  height: 60%;
  object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.9));
  pointer-events: none;
}

/* Tile Coordinate & Badges */
.toroidal-tile__coords {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: var(--font-mono, monospace);
  font-size: 0.52rem;
  font-weight: 700;
  background: rgba(5, 13, 20, 0.85);
  color: #94a3b8;
  padding: 0 4px;
  border-radius: 2px;
  pointer-events: none;
  line-height: 1.2;
  white-space: nowrap;
}

.toroidal-tile__badge {
  position: absolute;
  top: 4px;
  right: 14px;
  z-index: 3;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0 3px;
  border-radius: 2px;
  letter-spacing: 0.04em;
  pointer-events: none;
  line-height: 1.2;
}

.toroidal-tile__badge--cap {
  background: #dc2626;
  color: #fff;
  box-shadow: 0 0 6px rgba(220, 38, 38, 0.6);
}

.toroidal-tile__badge--oasis {
  background: #059669;
  color: #fff;
  box-shadow: 0 0 6px rgba(5, 150, 105, 0.6);
}

.toroidal-tile__tier {
  position: absolute;
  top: 4px;
  left: 14px;
  z-index: 3;
  font-size: 0.5rem;
  font-weight: 700;
  padding: 0 3px;
  background: rgba(5, 13, 20, 0.85);
  color: var(--cyan);
  border-radius: 2px;
  pointer-events: none;
  line-height: 1.2;
}

/* Quick-March Contextual Tactical Card */
.quick-march-card {
  background: #0d1a25;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

.quick-march-header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.quick-march-identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.quick-march-avatar {
  width: 50px;
  height: 50px;
  object-fit: contain;
  background: #061118;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 4px;
}

.quick-march-header h4 {
  margin: 0 0 2px 0;
  font-family: var(--font-display, inherit);
  font-size: 1.05rem;
  text-transform: uppercase;
  color: var(--ink);
}

.quick-march-coords {
  font-family: var(--font-mono, monospace);
  font-size: 0.78rem;
  color: var(--cyan);
}

.quick-march-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.quick-march-stat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
}

.quick-march-stat span {
  color: var(--muted);
}

.quick-march-stat strong {
  color: var(--ink);
  font-family: var(--font-ui);
}

.quick-march-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.quick-march-actions button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 0.82rem;
}

.quick-march-actions button img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

/* ==========================================================================
   Slot 39 Rally Point Tactical War Room (Dorf4)
   ========================================================================== */

.rally-war-room-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.war-room-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #091722;
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--muted);
  padding: 8px 16px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: all 0.15s ease;
}

.war-room-tab img {
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.war-room-tab:hover {
  background: rgba(34, 211, 238, 0.1);
  border-color: var(--cyan);
  color: var(--ink);
}

.war-room-tab.is-active {
  background: rgba(34, 211, 238, 0.18);
  border-color: var(--cyan);
  color: var(--cyan);
  box-shadow: 0 0 12px rgba(34, 211, 238, 0.25);
}

.war-room-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(8, 18, 27, 0.85);
  backdrop-filter: blur(10px);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.75), inset 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Operations Radar & Crimson Alert */
.radar-crimson-alert {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, rgba(220, 38, 38, 0.25), rgba(127, 29, 29, 0.4));
  border: 1.5px solid #ef4444;
  border-radius: 6px;
  padding: 12px 18px;
  animation: crimsonAlertPulse 1.6s ease-in-out infinite;
}

@keyframes crimsonAlertPulse {
  0%, 100% { box-shadow: 0 0 8px rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 22px rgba(239, 68, 68, 0.85); }
}

.crimson-alert-icon {
  font-size: 2rem;
}

.crimson-alert-content strong {
  display: block;
  color: #fca5a5;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.crimson-alert-content span {
  color: #f87171;
  font-family: var(--font-mono, monospace);
  font-size: 0.85rem;
}

.radar-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .radar-columns {
    grid-template-columns: 1fr;
  }
}

.radar-col {
  background: #0a1720;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 16px;
}

.radar-col-title {
  margin: 0 0 12px 0;
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid rgba(80, 130, 160, 0.3);
  padding-bottom: 6px;
}

.radar-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.radar-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #061118;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.82rem;
}

.radar-empty {
  color: var(--muted);
  font-size: 0.82rem;
  margin: 8px 0;
  font-style: italic;
}

/* Combat Simulator Panel */
.combat-sim-card {
  background: #0a1720;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 18px;
}

.combat-sim-settings {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.sim-setting-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--muted);
}

.sim-setting-item input,
.sim-setting-item select {
  background: #061118;
  border: 1px solid var(--line);
  color: var(--ink);
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 0.82rem;
}

.sim-forces-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .sim-forces-grid {
    grid-template-columns: 1fr;
  }
}

.sim-force-col {
  background: #07121a;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 14px;
}

.sim-force-col h4 {
  margin: 0 0 12px 0;
  font-size: 0.88rem;
  text-transform: uppercase;
  color: var(--cyan);
  border-bottom: 1px solid rgba(80, 130, 160, 0.3);
  padding-bottom: 4px;
}

.sim-troop-inputs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.sim-troop-inputs label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  color: var(--muted);
}

.sim-troop-inputs input {
  width: 76px;
  padding: 4px 6px;
  background: #050d14;
  border: 1px solid var(--line);
  color: var(--cyan);
  font-family: var(--font-mono, monospace);
  font-size: 0.82rem;
  border-radius: 4px;
  text-align: right;
}

.sim-results-panel {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.7);
}

.sim-result-badge {
  display: inline-block;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.78rem;
  margin-bottom: 8px;
}

.sim-result-badge--win {
  background: rgba(34, 197, 94, 0.2);
  color: #4ade80;
  border: 1px solid #22c55e;
}

.sim-result-badge--loss {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
  border: 1px solid #ef4444;
}