/* ==========================================================================
   Delta Force — theme

   A tactical operations interface: the network core (ui.css) in night-vision
   green on gunmetal black, square hard-edged panels with a notched corner,
   condensed uppercase headings, mono readouts and a faint topographic grid
   behind the top of every page.
   ========================================================================== */
@layer tokens {
  :root {
    --bg: #070908;
    --bg-2: #0b0e0c;
    --s1: #101411;
    --s2: #151a16;
    --s3: #1c221d;
    --s4: #262d27;
    --s5: #313a32;

    --acc: #9ef01a;
    --acc-hi: #b8ff4a;
    --acc-lo: #7cc400;
    --acc-ink: #0b1400;
    --acc-rgb: 158 240 26;
    --hi: #ffb020;
    --hi-ink: #1a1000;

    --display-stretch: 88%;
    --num-stretch: 75%;
    --cut: 9px;

    --notch: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, 0 100%);
    --lean: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
    --cut-tr: var(--notch);
    --cut-bl: var(--notch);
    --hazard: repeating-linear-gradient(-45deg, var(--acc) 0 5px, #0000 5px 10px);
    --grid-lines: linear-gradient(#ffffff06 1px, transparent 1px) 0 0 / 48px 48px, linear-gradient(90deg, #ffffff06 1px, transparent 1px) 0 0 / 48px 48px;
  }
}

@layer components {
  .panel, .kpi { --panel-shape: var(--notch); }
  .kpi { clip-path: var(--notch); }
  .panel.is-round, .modal-panel .panel { --panel-shape: none; }

  .btn-primary { clip-path: var(--notch); border-radius: 2px; box-shadow: 0 8px 24px -14px rgb(var(--acc-rgb) / .9); }
  .btn-primary.btn-sm { --cut: 6px; }
  .btn-hi { clip-path: var(--notch); }

  .phead-title, .phead h1:not(.phead-title), .hero-title, .pf-name, .ph-name { transform: none; letter-spacing: .015em; }
  .lt-title::before { width: 10px; height: 10px; border-radius: 0; background: var(--acc); box-shadow: 0 0 10px rgb(var(--acc-rgb) / .6); clip-path: none; }
  .eyebrow { color: var(--acc); }
  .eyebrow::before { width: 16px; height: 3px; background: var(--acc); }

  .kpi-l, .lt-title small, .crumbs, .panel-h .meta { letter-spacing: .14em; }
  .tag-new, .tag-pro, .live { border-radius: 0; clip-path: var(--lean); padding-inline: 8px; }
  .tag-new { background: rgb(var(--acc-rgb) / .16); color: var(--acc); }

  .pos.p1, .pos.is-1 { background: linear-gradient(160deg, #f4ffcf, var(--acc) 55%, #5d9400); color: var(--acc-ink); box-shadow: 0 0 18px -4px var(--acc); }

  .kpi::after { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--acc); opacity: .9; }
  .hdr-link.is-active::after { box-shadow: 0 0 14px rgb(var(--acc-rgb) / .6); }
  ::selection { background: rgb(var(--acc-rgb) / .3); color: #fff; }

  /* Head lights: a green wash from the top right over a faint map grid. */
  body > main::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none;
    background:
      radial-gradient(40% 80% at 88% -14%, rgb(var(--acc-rgb) / .13), transparent 70%),
      radial-gradient(26% 60% at 60% -20%, color-mix(in srgb, var(--hi) 6%, transparent), transparent 70%),
      radial-gradient(30% 60% at 0% -10%, rgb(var(--acc-rgb) / .05), transparent 70%),
      var(--grid-lines);
    -webkit-mask-image: linear-gradient(180deg, #000 35%, transparent); mask-image: linear-gradient(180deg, #000 35%, transparent);
  }
  /* Page art: a map picture in green duotone, melted into the page. */
  body > main::after {
    content: ""; position: absolute; inset: 0 0 auto; height: 380px; z-index: -2; pointer-events: none;
    background: var(--page-art, none) var(--art-x, 100%) 30% / cover no-repeat;
    opacity: .2; filter: grayscale(1) sepia(1) hue-rotate(40deg) saturate(2.4) brightness(.8);
    -webkit-mask-image: linear-gradient(180deg, #000 10%, #0008 50%, transparent 92%), linear-gradient(90deg, transparent 20%, #0005 50%, #000 85%);
    -webkit-mask-composite: source-in;
    mask-image: linear-gradient(180deg, #000 10%, #0008 50%, transparent 92%), linear-gradient(90deg, transparent 20%, #0005 50%, #000 85%);
    mask-composite: intersect;
  }
  .page-player > main::after { display: none; }
  @media (max-width: 720px) { body > main::after { height: 260px; opacity: .16; } }
}