:root {
  color-scheme: dark;
  --paper: #e7dfc9;
  --muted: #8e8a7c;
  --canvas: #090a08;
  --panel: #12130f;
  --panel-2: #191a15;
  --line: #3e3a31;
  --orange: #ef4b1d;
  --amber: #e9a342;
  --olive: #a5a37f;
  --green: #8ba66c;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-width: 320px; min-height: 100%; margin: 0; }
button, select { font: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, .map-viewport:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

.map-page {
  min-height: 100svh;
  overflow: hidden;
  color: var(--paper);
  background:
    linear-gradient(90deg, #ffffff04 1px, transparent 1px),
    linear-gradient(#ffffff03 1px, transparent 1px),
    radial-gradient(circle at 76% 24%, #d94d1712, transparent 34%),
    var(--canvas);
  background-size: 44px 44px, 44px 44px, auto, auto;
}

.map-shell { height: 100svh; min-height: 650px; display: grid; grid-template-rows: 68px minmax(0, 1fr) 42px; }
.map-masthead { min-width: 0; padding: 0 clamp(.8rem, 2vw, 2rem); display: grid; grid-template-columns: 280px minmax(0, 1fr) 240px; align-items: center; gap: 1rem; border-bottom: 1px solid #51493c; background: #0d0e0bf2; }
.map-brand { min-width: 0; display: flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; }
.map-brand img { width: 50px; height: 50px; object-fit: contain; filter: drop-shadow(0 3px 8px #000c); }
.map-brand span { min-width: 0; display: grid; gap: .12rem; }
.map-brand strong { color: #f3e7d3; font: 900 1rem/1 "Arial Narrow", Impact, sans-serif; letter-spacing: .1em; }
.map-brand small { overflow: hidden; color: #777366; font: 700 .53rem/1.2 monospace; letter-spacing: .08em; text-overflow: ellipsis; white-space: nowrap; }
.map-title { min-width: 0; text-align: center; }
.map-title span { color: var(--orange); font: 800 .52rem/1 monospace; letter-spacing: .2em; }
.map-title h1 { overflow: hidden; margin: .28rem 0 0; color: #d9d2c2; font: 800 clamp(.9rem, 1.35vw, 1.15rem)/1 "Arial Narrow", sans-serif; letter-spacing: .08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.map-discord { min-width: 0; padding: .6rem .8rem .58rem 1rem; display: grid; justify-items: end; border-left: 3px solid var(--orange); color: #120c08; background: linear-gradient(105deg, #f43f18, #ff7921); clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px); text-decoration: none; transition: filter .15s ease; }
.map-discord:hover { filter: brightness(1.12); }
.map-discord span { font: 900 .9rem/1 "Arial Narrow", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.map-discord small { margin-top: .24rem; font: 700 .5rem/1 monospace; }

.map-workspace { min-width: 0; min-height: 0; padding: 10px; display: grid; grid-template-columns: 274px minmax(420px, 1fr) 270px; gap: 10px; overflow: hidden; }
.map-controls, .map-intel, .map-stage-panel { min-width: 0; min-height: 0; border: 1px solid var(--line); background: #11120ef2; }
.map-controls, .map-intel { height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #514a3c #171813; scrollbar-gutter: stable; scrollbar-width: thin; }
.control-section { padding: 1rem; border-bottom: 1px solid #343129; }
.control-section label { display: block; margin-bottom: .45rem; color: var(--orange); font: 800 .57rem/1 monospace; letter-spacing: .16em; text-transform: uppercase; }
.control-section select { width: 100%; min-height: 42px; padding: .65rem 2rem .65rem .7rem; border: 1px solid #4d493f; border-radius: 0; color: var(--paper); background: #1d1e18; cursor: pointer; }
.map-selector-section > p { min-height: 3.8em; margin: .65rem 0 0; color: #8f8a7d; font-size: .67rem; line-height: 1.45; }
.section-heading { margin-bottom: .8rem; }
.section-heading span { color: #6e6a5f; font: 700 .5rem/1 monospace; letter-spacing: .15em; }
.section-heading h2 { margin: .25rem 0 0; color: #ddd5c5; font: 800 1rem/1 "Arial Narrow", sans-serif; letter-spacing: .05em; text-transform: uppercase; }
.section-heading.compact { margin-bottom: .65rem; }
.layer-dial { position: relative; padding-left: 1rem; display: grid; gap: 1px; background: #323027; clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px); }
.layer-dial::before { content: ""; position: absolute; left: 0; top: 16%; bottom: 16%; width: 9px; border: 1px solid #706655; border-right: 0; border-radius: 100% 0 0 100%; }
.layer-key { min-height: 51px; padding: .5rem .6rem; display: grid; grid-template-columns: 14px 1fr; grid-template-rows: auto auto; column-gap: .55rem; border: 0; color: #747166; background: #151611; text-align: left; cursor: pointer; }
.layer-key:hover { background: #1c1d17; }
.layer-key.is-on { color: #eee5d5; }
.layer-swatch { grid-row: 1 / 3; align-self: center; width: 12px; height: 12px; border: 1px solid currentColor; opacity: .35; }
.layer-key.is-on .layer-swatch { opacity: 1; box-shadow: 0 0 12px #ef4b1d55; }
.swatch-grid { border-color: #d8c997; background: repeating-linear-gradient(90deg, transparent 0 3px, #d8c997 3px 4px); }
.swatch-sector { border-color: #ef4b1d; background: #ef4b1d55; }
.swatch-point { border-radius: 50%; border-color: #ef4b1d; background: #ef4b1d; }
.swatch-label { border-color: #e6dfcc; background: #e6dfcc; }
.swatch-hq { border-color: #7fa9d6; background: linear-gradient(135deg, #7fa9d6 0 50%, #c47c4b 50%); }
.layer-key strong { font: 750 .74rem/1.15 sans-serif; }
.layer-key small { margin-top: .14rem; color: #777368; font-size: .58rem; }
.sector-filter { display: grid; grid-template-columns: 1.35fr repeat(5, 1fr); gap: 3px; }
.sector-filter button { min-width: 0; min-height: 34px; padding: 0; border: 1px solid #403d34; color: #787469; background: #171813; cursor: pointer; }
.sector-filter button.is-on { border-color: var(--orange); color: #f2e6d4; background: #2b1b13; }
.control-note { margin: .65rem 0 0; color: #777267; font-size: .6rem; line-height: 1.4; }
.field-note { border-left: 3px solid #756b51; }
.field-note strong { color: #c8b98b; font: 800 .58rem/1 monospace; letter-spacing: .1em; }
.field-note p { margin: .5rem 0 0; color: #79756b; font-size: .63rem; line-height: 1.4; }

.map-stage-panel { display: grid; grid-template-rows: 54px minmax(0, 1fr); background: #090a08; }
.map-toolbar { min-width: 0; padding: 0 .75rem 0 1rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; border-bottom: 1px solid #3d382f; background: #141510; }
.map-toolbar > div:first-child { min-width: 0; display: grid; gap: .16rem; }
.map-toolbar span { color: var(--orange); font: 750 .52rem/1 monospace; letter-spacing: .12em; }
.map-toolbar strong { overflow: hidden; color: #e6ddcc; font: 850 .88rem/1 "Arial Narrow", sans-serif; letter-spacing: .05em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.map-tool-buttons { flex: 0 0 auto; display: flex; align-items: center; gap: 3px; }
.map-tool-buttons button, .map-tool-buttons output { min-width: 36px; height: 32px; padding: 0 .55rem; display: grid; place-items: center; border: 1px solid #444137; color: #c8c0b1; background: #1c1d18; font-size: .67rem; cursor: pointer; }
.map-tool-buttons button:hover { border-color: var(--orange); color: white; }
.map-tool-buttons output { min-width: 52px; color: #847f73; cursor: default; }
.map-viewport { position: relative; min-width: 0; min-height: 0; overflow: hidden; touch-action: none; background: #060705; cursor: grab; user-select: none; }
.map-viewport.is-dragging { cursor: grabbing; }
.map-canvas { position: absolute; left: 0; top: 0; width: 1000px; height: 1000px; transform-origin: 0 0; }
.map-tile-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.map-tile-layer > img { position: absolute; display: block; max-width: none; image-rendering: auto; user-select: none; pointer-events: none; }
.map-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.map-overlay .grid-line { stroke: #ded3a9; stroke-width: 1.25; vector-effect: non-scaling-stroke; opacity: .46; }
.map-overlay .dead-zone { fill: #090a0885; }
.map-overlay .playable-border { fill: none; stroke: #e6d49c; stroke-width: 2; vector-effect: non-scaling-stroke; }
.map-overlay .grid-label { fill: #f0e8ce; font: 750 12px/1 monospace; opacity: .34; paint-order: stroke; stroke: #090a08; stroke-width: 3px; text-anchor: start; }
.map-overlay .sector-boundary { stroke: #ef4b1d; stroke-width: 1.7; stroke-dasharray: 10 8; vector-effect: non-scaling-stroke; opacity: .78; }
.map-overlay .sector-boundary.is-edge { stroke-width: 2.2; opacity: .95; }
.map-overlay .point-target { pointer-events: all; cursor: pointer; }
.map-overlay .point-outer { fill: #ef5a24; }
.map-overlay .point-divider { fill: #090a08; pointer-events: none; }
.map-overlay .point-core { fill: #f4ad3f; pointer-events: none; }
.map-overlay .point-target:hover .point-outer, .map-overlay .point-target.is-selected .point-outer { fill: #ff7542; filter: drop-shadow(0 0 2px #fff1d7); }
.map-overlay .point-target.is-filtered, .map-overlay .point-target.is-hidden-by-user,
.map-overlay .point-label.is-filtered, .map-overlay .point-label.is-hidden-by-user { display: none; }
.map-overlay .point-label { fill: #f6eedf; font: 750 10px/1 sans-serif; paint-order: stroke; stroke: #0b0b08; stroke-width: 3px; stroke-linejoin: round; text-anchor: middle; pointer-events: none; }
.map-overlay .hq-dot { fill: #9ad0ff; stroke: #071018; stroke-width: 2px; vector-effect: non-scaling-stroke; }
.map-overlay .hq-text { fill: #9ad0ff; stroke: #071018; stroke-width: 4px; paint-order: stroke fill; font: 900 12px/1 monospace; letter-spacing: .05em; pointer-events: none; }
.map-overlay .hq-nva .hq-dot,
.map-overlay .hq-nva .hq-text { fill: #ff9b68; stroke: #180b06; }
.map-hint { position: absolute; left: 50%; bottom: .6rem; transform: translateX(-50%); width: max-content; max-width: calc(100% - 1.2rem); padding: .38rem .62rem; color: #d1c9b8; background: #0a0b08d9; border: 1px solid #4c463a; font: 700 .5rem/1 monospace; letter-spacing: .07em; pointer-events: none; }
.map-stage-panel.hide-grid #grid-layer, .map-stage-panel.hide-sectors #sector-layer, .map-stage-panel.hide-points #point-layer, .map-stage-panel.hide-labels #label-layer, .map-stage-panel.hide-hqs #hq-layer { display: none; }

.map-intel { display: block; min-height: 0; }
.intel-header { padding: .9rem 1rem; border-bottom: 1px solid #39362e; background: linear-gradient(105deg, #24150f, #13140f 55%); }
.intel-header span { color: var(--orange); font: 800 .5rem/1 monospace; letter-spacing: .15em; }
.intel-header h2 { margin: .28rem 0 0; font: 850 1rem/1 "Arial Narrow", sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.point-card { min-height: 119px; padding: 1rem; border-bottom: 1px solid #39362e; background: #181914; }
.point-card-empty { margin: 1rem 0; color: #777368; font-size: .68rem; line-height: 1.5; }
.point-card .point-sector { color: var(--orange); font: 800 .55rem/1 monospace; letter-spacing: .12em; }
.point-card h3 { margin: .45rem 0 .65rem; color: #eee4d3; font: 850 1.1rem/1.05 "Arial Narrow", sans-serif; text-transform: uppercase; }
.point-card dl { margin: 0; display: grid; gap: .3rem; }
.point-card dl div, .intel-status dl div { display: flex; justify-content: space-between; gap: .8rem; }
.point-card dt, .intel-status dt { color: #747065; font-size: .6rem; }
.point-card dd, .intel-status dd { margin: 0; color: #cfc7b7; font-size: .6rem; }
.intel-list-section { min-height: 0; display: block; }
.intel-list-heading { padding: .7rem .8rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #343129; background: #151611; cursor: pointer; list-style: none; }
.intel-list-heading::-webkit-details-marker { display: none; }
.intel-list-heading strong { color: #b9b2a4; font-size: .65rem; text-transform: uppercase; }
.intel-list-heading span { color: #716d63; font: 700 .55rem/1 monospace; }
.intel-list-meta { display: flex; align-items: center; gap: .55rem; }
.intel-list-meta i { width: 7px; height: 7px; border-right: 1px solid #a74b2e; border-bottom: 1px solid #a74b2e; transform: rotate(45deg); transition: transform .15s ease; }
.intel-list-section:not([open]) .intel-list-meta i { transform: rotate(-45deg); }
.point-list { min-height: 0; overflow: visible; }
.point-list-row { min-height: 42px; display: grid; grid-template-columns: minmax(0, 1fr) 44px; border-bottom: 1px solid #2d2b25; }
.point-list-row[hidden] { display: none; }
.point-list-select { min-width: 0; padding: .5rem .35rem .5rem .75rem; display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: .5rem; border: 0; color: #aaa396; background: transparent; text-align: left; cursor: pointer; }
.point-list-select:hover, .point-list-select.is-selected { color: #f1e6d4; background: #241811; }
.point-visibility { padding: 0; border: 0; border-left: 1px solid #2d2b25; color: #8f887b; background: #12130f; font: 750 .48rem/1 monospace; text-transform: uppercase; cursor: pointer; }
.point-visibility:hover { color: #f0d7c7; background: #2b1811; }
.point-list-row.is-point-hidden .point-list-select { opacity: .48; }
.point-list-row.is-point-hidden .point-visibility { color: #df6843; }
.point-list .point-marker { width: 9px; height: 9px; margin-left: 6px; border: 2px solid #e2532d; border-radius: 50%; background: #2a1710; }
.point-list .point-list-name { overflow: hidden; font-size: .63rem; text-overflow: ellipsis; white-space: nowrap; }
.point-list .point-list-sector { color: #6e6a60; font: 700 .52rem/1 monospace; }
.map-footer { min-width: 0; padding: 0 1rem; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: center; gap: 1rem; border-top: 1px solid #39362e; color: #666258; background: #0d0e0b; font: 650 .51rem/1.25 monospace; }
.map-footer p { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-footer a { color: #aaa28f; }
.map-footer button { padding: 0; border: 0; color: #726d61; background: transparent; font: inherit; text-transform: uppercase; cursor: pointer; }
.map-cookie-consent { position: fixed; right: .65rem; bottom: .65rem; z-index: 100; width: min(310px, calc(100vw - 1.3rem)); padding: .62rem .7rem; display: flex; align-items: center; gap: .7rem; border: 1px solid #4d493f; background: #12130ff2; box-shadow: 0 8px 28px #0009; }
.map-cookie-consent[hidden] { display: none; }
.map-cookie-consent p { flex: 1; margin: 0; color: #9d978a; font-size: .65rem; line-height: 1.35; }
.map-cookie-consent div { display: flex; gap: .35rem; }
.map-cookie-consent button { padding: .38rem .55rem; border: 1px solid #4d493f; color: #aaa394; background: #1a1b16; font-size: .58rem; cursor: pointer; }
.map-cookie-consent button:last-child { border-color: #b9522f; color: #f0d9c9; background: #321810; }

@media (max-width: 1120px) {
  .map-masthead { grid-template-columns: 220px minmax(0, 1fr) 205px; }
  .map-workspace { grid-template-columns: 230px minmax(390px, 1fr) 235px; }
  .map-controls .control-section { padding: .8rem; }
}

@media (max-width: 860px) {
  .map-page { overflow: auto; }
  .map-shell { height: auto; min-height: 100svh; grid-template-rows: 64px auto auto; }
  .map-masthead { grid-template-columns: minmax(150px, 1fr) auto; }
  .map-title { display: none; }
  .map-workspace { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: auto minmax(520px, 72svh) auto; }
  .map-controls { display: grid; grid-template-columns: 1fr 1.1fr; overflow: visible; }
  .map-controls .control-section { border-right: 1px solid #343129; }
  .sector-section, .field-note { display: none; }
  .layer-dial { grid-template-columns: 1fr 1fr; }
  .map-intel { max-height: 520px; }
  .map-footer { min-height: 62px; padding-block: .5rem; grid-template-columns: 1fr auto; }
  .map-footer p { white-space: normal; }
  .map-footer p:nth-child(2) { display: none; }
}

@media (max-width: 560px) {
  .map-shell { grid-template-rows: 58px auto auto; }
  .map-masthead { padding: 0 .6rem; grid-template-columns: 1fr auto; }
  .map-brand img { width: 42px; height: 42px; }
  .map-brand small, .map-discord small { display: none; }
  .map-discord { padding: .62rem .7rem .58rem .85rem; }
  .map-discord span { font-size: .72rem; }
  .map-workspace { padding: 6px; gap: 6px; grid-template-rows: auto minmax(430px, 70svh) auto; }
  .map-controls { grid-template-columns: 1fr; }
  .layer-section { border-top: 1px solid #343129; }
  .layer-dial { grid-template-columns: repeat(4, 1fr); padding: 0; clip-path: none; }
  .layer-dial::before, .layer-key small { display: none; }
  .layer-key { min-height: 45px; padding: .4rem; grid-template-columns: 1fr; grid-template-rows: auto auto; justify-items: center; gap: .24rem; text-align: center; }
  .layer-swatch { grid-row: auto; }
  .map-toolbar { height: auto; min-height: 62px; align-items: center; }
  .map-tool-buttons button:nth-last-child(-n+2) { display: none; }
  .map-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}