/* =========================================================
   CYBERPUNK 2045 // SHARED CORE
   ========================================================= */

/* =========================================================
   01. ROOT / COLOR SYSTEM
   ========================================================= */

:root {
  --bg: #03070b;
  --panel: rgba(3, 10, 16, 0.86);
  --panel-2: rgba(5, 18, 26, 0.72);

  --cyan: #00f0ff;
  --cyan-2: #00a9c7;
  --pink: #ff2bd6;
  --yellow: #f7ff00;
  --red: #ff3155;

  --text: #dffcff;
  --muted: #6e9ca5;
  --line: rgba(0, 240, 255, 0.24);

  --header-height: 74px;
  --footer-height: 30px;
  --left-panel-width: 176px;
  --right-panel-width: 300px;
}


/* =========================================================
   02. RESET / PAGE MODES
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    margin: 0;
}

html {
    scrollbar-width: thin;
    scrollbar-color:
        rgba(38, 78, 110, .85)
        rgba(4, 12, 18, .92);
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 7px;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background:
        linear-gradient(
            180deg,
            rgba(3, 10, 16, .98),
            rgba(2, 7, 12, .98)
        );
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background:
        linear-gradient(
            180deg,
            rgba(36, 74, 104, .95),
            rgba(18, 42, 64, .95)
        );

    border:
        1px solid rgba(58, 108, 145, .28);

    box-shadow:
        inset 0 0 6px rgba(120, 170, 210, .06),
        0 0 6px rgba(0, 0, 0, .22);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background:
        linear-gradient(
            180deg,
            rgba(52, 96, 132, .96),
            rgba(24, 53, 79, .96)
        );
}

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 50% 20%,
            #09202a 0%,
            #03080d 38%,
            #010305 100%
        );

    color:
        var(--text);

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    user-select:
        none;
}


/*
 * HUB e MAPPA restano inchiodate alla viewport.
 *
 * CHARACTER invece è una pagina vera e propria
 * e può crescere verticalmente.
 */

body.page-hub,
body.page-map {
    height: 100vh;
    overflow: hidden;
}

body.page-character {
    min-height: 100vh;

    overflow-x: hidden;
    overflow-y: auto;
}

button {
    font: inherit;
}


/* =========================================================
   03. APPLICATION
   ========================================================= */

#app {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-height: 100vh;

    background:
        linear-gradient(
            rgba(0, 240, 255, 0.015),
            rgba(255, 43, 214, 0.015)
        );
}

body.page-hub #app,
body.page-map #app {
    height: 100vh;
}

body.page-character #app {
    height: auto;
}


/* =========================================================
   04. TOP BAR
   ========================================================= */

.topbar {
  position: relative;
  z-index: 50;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  flex: 0 0 var(--header-height);
  height: var(--header-height);

  padding: 0 22px;

  border-bottom: 1px solid var(--line);

  background:
    linear-gradient(
      90deg,
      rgba(0, 240, 255, 0.07),
      rgba(3, 7, 11, 0.94) 28%,
      rgba(3, 7, 11, 0.94) 72%,
      rgba(255, 43, 214, 0.06)
    );

  box-shadow:
    0 0 24px rgba(0, 240, 255, 0.08);
}

.topbar::after {
  content: "";

  position: absolute;
  bottom: -1px;
  left: 0;

  width: 24%;
  height: 2px;

  background: var(--cyan);

  box-shadow:
    0 0 12px var(--cyan);
}


/* =========================================================
   05. BRAND
   ========================================================= */

.brand {
  display: flex;
  align-items: center;
  gap: 13px;
}

.brand-mark {
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border: 1px solid var(--cyan);

  background: rgba(0, 240, 255, 0.06);

  color: var(--yellow);

  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;

  clip-path:
    polygon(
      0 0,
      78% 0,
      100% 22%,
      100% 100%,
      22% 100%,
      0 78%
    );

  box-shadow:
    inset 0 0 18px rgba(0, 240, 255, 0.12);
}

.brand-copy {
  display: flex;
  flex-direction: column;

  line-height: 1;
}

.brand-copy strong {
  font-size: 20px;
  font-weight: 900;
  letter-spacing: 2px;
}

.brand-copy strong span {
  color: var(--yellow);

  text-shadow:
    0 0 10px rgba(247, 255, 0, 0.35);
}

.brand-copy small {
  margin-top: 7px;

  color: var(--cyan);

  font-size: 9px;
  letter-spacing: 3px;
}


/* =========================================================
   06. NETWORK STATUS
   ========================================================= */

.system-status {
  justify-self: center;

  display: flex;
  align-items: center;

  gap: 9px;

  color: #87bac3;

  font-size: 10px;
  letter-spacing: 2px;
}

.status-dot {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: var(--cyan);

  box-shadow:
    0 0 10px var(--cyan);

  animation:
    pulse 1.7s infinite;
}


/* =========================================================
   07. NIGHT CITY CLOCK
   ========================================================= */

.city-clock {
  justify-self: end;

  display: grid;
  grid-template-columns: auto auto;
  align-items: end;

  column-gap: 10px;

  text-align: right;
}

.city-clock small {
  grid-column: 1 / 3;

  color: var(--muted);

  font-size: 8px;
  letter-spacing: 2px;
}

.city-clock strong {
  color: var(--cyan);

  font-family:
    Consolas,
    monospace;

  font-size: 20px;
  letter-spacing: 2px;

  text-shadow:
    0 0 9px rgba(0, 240, 255, 0.35);
}

.city-clock span {
  margin-bottom: 3px;

  color: var(--yellow);

  font-size: 9px;
  letter-spacing: 1px;
}


/* =========================================================
   BOTTOM STATUS
   ========================================================= */

.bottom-status {
  position: relative;
  z-index: 50;

  display: grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items: center;

  flex:
    0 0 var(--footer-height);

  height:
    var(--footer-height);

  padding:
    0 18px;

  border-top:
    1px solid rgba(0, 240, 255, 0.13);

  background:
    #010407;

  color:
    #41656d;

  font-family:
    Consolas,
    monospace;

  font-size:
    7px;

  letter-spacing:
    1.2px;
}

.bottom-status span:nth-child(2) {
  justify-self:
    center;

  color:
    #397d89;
}

.bottom-status span:nth-child(3) {
  justify-self:
    end;
}


/* =========================================================
   BOOT SCREEN
   ========================================================= */

#boot-screen {
  position: fixed;

  inset: 0;

  z-index: 9999;

  display: grid;

  place-items: center;

  background:
    #010305;

  transition:
    opacity 0.7s ease,
    visibility 0.7s ease;
}

#boot-screen.hidden {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}
/* =========================================================
   BOOT SCREEN // FIRST ENTRY ONLY
   ========================================================= */

html.skip-boot #boot-screen {
    display: none !important;
}
/* =========================================================
   HUB // SESSION CHECK
   Evita il flash del login durante il ritorno alla Hub.
   ========================================================= */

html.hub-session-check #access-gate {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
.boot-content {
  width:
    min(520px, 80vw);
}

.boot-kicker {
  margin-bottom:
    20px;

  color:
    var(--cyan);

  font-size:
    9px;

  letter-spacing:
    5px;
}

.boot-content h1 {
  margin:
    0;

  color:
    #eaffff;

  font-size:
    clamp(
        34px,
        5vw,
        54px
    );

  font-weight:
    900;

  font-style:
    italic;

  letter-spacing:
    2px;
}

.boot-content h1 span {
  color:
    var(--yellow);

  text-shadow:
    0 0 15px rgba(247, 255, 0, 0.3);
}

.boot-line {
  width:
    100%;

  height:
    2px;

  margin:
    18px 0;

  background:
    linear-gradient(
      90deg,
      var(--cyan),
      var(--pink),
      transparent
    );
}

.boot-content p {
  margin:
    0;

  color:
    #477781;

  font-family:
    Consolas,
    monospace;

  font-size:
    8px;

  letter-spacing:
    2px;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes pulse {
  0%,
  100% {
    opacity:
        0.45;
  }

  50% {
    opacity:
        1;
  }
}

@keyframes scanMap {
  from {
    transform:
      translateY(-120%);
  }

  to {
    transform:
      translateY(1200%);
  }
}


/* =========================================================
   NIGHT MODE
   ========================================================= */

body.night-mode {
  --line:
    rgba(255, 43, 214, 0.2);
}

body.night-mode .topbar {
  background:
    linear-gradient(
      90deg,
      rgba(0, 240, 255, 0.04),
      rgba(3, 7, 11, 0.96) 30%,
      rgba(3, 7, 11, 0.96) 70%,
      rgba(255, 43, 214, 0.08)
    );
}


/* =========================================================
   SHARED RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {

    .brand-copy strong {
        font-size:
            16px;
    }

}

@media (max-width: 800px) {

    .brand-copy small,
    .system-status {
        display:
            none;
    }

    .topbar {
        grid-template-columns:
            1fr
            auto;
    }

    .city-clock {
        grid-column:
            2;
    }

}


/* =========================================================
   GLOBAL PANEL NAVIGATION // HOLOMAP + CENTRAL HUB
   ========================================================= */

.global-panel-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  justify-self: end;
  flex-wrap: nowrap;
  gap: 8px !important;
  min-width: 0;
}

.global-panel-nav > button,
.global-panel-nav > a {
  flex: 0 0 auto;
  margin: 0 !important;
}

@media (max-width: 760px) {
  .global-panel-nav {
    gap: 5px !important;
  }
}


/* =========================================================
   NIGHT CITY CUSTOM CURSOR SYSTEM
   ========================================================= */

@media (pointer: fine) {

    :root {
        --nc-cursor-default:
            url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2228%22%20height%3D%2228%22%20viewBox%3D%220%200%2028%2028%22%3E%3Cpath%20d%3D%22M3%202%20L18%2013%20L12%2014%20L16%2023%20L12.5%2024.5%20L8.5%2015.5%20L4%2020%20Z%22%20fill%3D%22%23031419%22%20stroke%3D%22%2300f0ff%22%20stroke-width%3D%221.5%22%2F%3E%3Cpath%20d%3D%22M17%205%20L22%2010%20L17%2015%20L12%2010%20Z%22%20fill%3D%22none%22%20stroke%3D%22%23f7ff00%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2217%22%20cy%3D%2210%22%20r%3D%221.4%22%20fill%3D%22%23f7ff00%22%2F%3E%3C%2Fsvg%3E") 3 2,
            auto;

        --nc-cursor-pointer:
            url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2230%22%20height%3D%2230%22%20viewBox%3D%220%200%2030%2030%22%3E%3Cpath%20d%3D%22M8%2014%20V5.5%20C8%204.1%209%203%2010.2%203%20C11.5%203%2012.4%204.1%2012.4%205.5%20V11%20V4.5%20C12.4%203.2%2013.4%202.2%2014.6%202.2%20C15.8%202.2%2016.8%203.2%2016.8%204.5%20V11%20V6%20C16.8%204.8%2017.7%203.9%2018.9%203.9%20C20%203.9%2020.9%204.8%2020.9%206%20V12%20V8%20C20.9%206.9%2021.8%206%2022.9%206%20C24%206%2024.9%206.9%2024.9%208%20V16.5%20C24.9%2022.5%2021.1%2027%2015.2%2027%20H13%20C9.6%2027%207.5%2025.6%205.7%2023.1%20L2.8%2019%20C2%2017.8%202.3%2016.3%203.4%2015.6%20C4.4%2014.9%205.8%2015.1%206.6%2016%20L8%2017.7%20Z%22%20fill%3D%22%23031419%22%20stroke%3D%22%2300f0ff%22%20stroke-width%3D%221.45%22%20stroke-linejoin%3D%22round%22%2F%3E%3Cpath%20d%3D%22M10.2%203%20V9%22%20stroke%3D%22%23f7ff00%22%20stroke-width%3D%221.4%22%2F%3E%3Ccircle%20cx%3D%2210.2%22%20cy%3D%223.3%22%20r%3D%221.3%22%20fill%3D%22%23f7ff00%22%2F%3E%3C%2Fsvg%3E") 10 3,
            pointer;

        --nc-cursor-text:
            url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2230%22%20viewBox%3D%220%200%2024%2030%22%3E%3Cpath%20d%3D%22M8%203%20H16%20M12%203%20V27%20M8%2027%20H16%22%20fill%3D%22none%22%20stroke%3D%22%2300f0ff%22%20stroke-width%3D%222%22%2F%3E%3Cpath%20d%3D%22M5%209%20H9%20M15%2021%20H19%22%20stroke%3D%22%23f7ff00%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2215%22%20r%3D%221.2%22%20fill%3D%22%23f7ff00%22%2F%3E%3C%2Fsvg%3E") 12 15,
            text;
    }


    html,
    body,
    body * {
        cursor:
            var(--nc-cursor-default);
    }


    a,
    button,
    select,
    summary,
    label[for],
    [role="button"],
    [data-admin-view],
    [data-network-module],
    [data-hub-module],
    [data-character-module],
    input[type="button"],
    input[type="submit"],
    input[type="checkbox"],
    input[type="radio"] {
        cursor:
            var(--nc-cursor-pointer) !important;
    }


    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="url"],
    input[type="number"],
    textarea,
    [contenteditable="true"] {
        cursor:
            var(--nc-cursor-text) !important;
    }


    button:disabled,
    input:disabled,
    select:disabled {
        cursor:
            var(--nc-cursor-default) !important;
    }

}


/* =========================================================
   NCCP 2045 // SITE LOGO RUNTIME OVERRIDE
   ========================================================= */

.brand-mark.has-site-logo {
  padding: 0;
  overflow: hidden;
  background: #02070b;
}

.brand-mark.has-site-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}


/* =========================================================
   NCCP 2045 // TOPBAR RADIO CLUSTER
   ========================================================= */

.topbar-right-cluster {
  justify-self: end;
  min-width: 0;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.nc-radio-player {
  width: min(330px, 30vw);
  min-width: 220px;
  height: 46px;

  display: grid;
  grid-template-columns: 58px minmax(0, 1fr) auto;
  grid-template-rows: 1fr 13px;
  align-items: center;
  gap: 0 8px;

  padding: 5px 8px;

  border: 1px solid rgba(0, 240, 255, .22);
  background:
    linear-gradient(
      90deg,
      rgba(0, 240, 255, .055),
      rgba(2, 7, 11, .90) 35%,
      rgba(255, 43, 214, .035)
    );

  box-shadow:
    inset 0 0 18px rgba(0, 240, 255, .035),
    0 0 18px rgba(0, 240, 255, .035);
}

.nc-radio-player.is-playing {
  border-color: rgba(247, 255, 0, .34);
}

.nc-radio-signal {
  grid-row: 1 / 3;

  width: 27px;
  height: 27px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(0, 240, 255, .28);

  color: var(--cyan);
  font-size: 11px;

  box-shadow:
    inset 0 0 12px rgba(0, 240, 255, .08);
}

.nc-radio-player.is-playing .nc-radio-signal {
  color: var(--yellow);
  text-shadow: 0 0 9px rgba(247, 255, 0, .55);
}

.nc-radio-copy {
  min-width: 0;
  align-self: center;
}

.nc-radio-copy small,
.nc-radio-copy strong {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nc-radio-copy small {
  color: rgba(122, 184, 195, .66);
  font-size: 6px;
  letter-spacing: 1.25px;
}

.nc-radio-copy strong {
  margin-top: 3px;
  color: #d9f8fb;
  font-size: 7px;
  letter-spacing: .8px;
}

.nc-radio-controls {
  display: flex;
  gap: 3px;
}

.nc-radio-controls button {
  width: 25px;
  height: 25px;
  padding: 0;

  border: 1px solid rgba(0, 240, 255, .24);
  background: rgba(0, 240, 255, .035);

  color: var(--cyan);
  font-size: 11px;
}

.nc-radio-controls button[data-radio-stop] {
  color: var(--red);
  border-color: rgba(255, 49, 85, .28);
}

.nc-radio-controls button[data-radio-stop]:hover,
.nc-radio-controls button[data-radio-stop]:focus {
  color: #ff6b86;
  border-color: var(--red);
}


.nc-radio-controls button:hover,
.nc-radio-controls button:focus {
  border-color: var(--yellow);
  color: var(--yellow);
  outline: none;
}

.nc-radio-controls button:disabled {
  opacity: .24;
}

.nc-radio-volume {
  grid-column: 2 / 4;

  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(40px, 1fr);
  align-items: center;
  gap: 6px;
}

.nc-radio-volume span {
  color: rgba(118, 176, 187, .55);
  font-size: 5px;
  letter-spacing: 1px;
}

.nc-radio-volume input[type="range"] {
  width: 100%;
  height: 2px;
  accent-color: var(--cyan);
}

@media (max-width: 1180px) {
  .nc-radio-player {
    width: 230px;
    min-width: 190px;
  }

  .nc-radio-volume {
    display: none;
  }

  .nc-radio-player {
    grid-template-rows: 1fr;
  }
}

@media (max-width: 900px) {
  .nc-radio-player {
    width: 120px;
    min-width: 120px;
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .nc-radio-controls {
    display: none;
  }

  .nc-radio-copy small {
    display: none;
  }
}

@media (max-width: 680px) {
  .nc-radio-player {
    display: none;
  }
}


/* =========================================================
   NCCP 2045 // CURSOR HARDENING
   Keep custom cursors even on native form controls where
   browsers otherwise tend to restore OS cursors.
   ========================================================= */

@media (pointer: fine) {

  html,
  body,
  body *,
  input,
  textarea,
  select,
  option,
  button {
    cursor: var(--nc-cursor-default) !important;
  }

  a,
  button,
  select,
  option,
  summary,
  label[for],
  [role="button"],
  [onclick],
  [data-admin-view],
  [data-network-module],
  [data-hub-module],
  [data-character-module],
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="checkbox"],
  input[type="radio"],
  input[type="file"],
  input[type="range"],
  input[type="color"] {
    cursor: var(--nc-cursor-pointer) !important;
  }

  input:not([type]),
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="url"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  textarea,
  [contenteditable="true"] {
    cursor: var(--nc-cursor-text) !important;
  }

}

/* =========================================================
   NCCP 2045 // RADIO STATION SELECTOR
   ========================================================= */

.nc-radio-player {
  position: relative;
  overflow: visible;
}

.nc-radio-station-toggle {
  grid-row: 1 / 3;

  width: 57px;
  height: 32px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;

  padding: 2px 4px;

  border: 1px solid rgba(0, 240, 255, .32);
  background: rgba(0, 240, 255, .045);

  color: var(--cyan);
  font-weight: 700;

  box-shadow:
    inset 0 0 12px rgba(0, 240, 255, .08);
}

.nc-radio-station-toggle-main {
  font-size: 9px;
  line-height: 1;
  letter-spacing: 1.4px;
}

.nc-radio-station-toggle-sub {
  font-size: 5px;
  line-height: 1;
  letter-spacing: 1px;
  opacity: .72;
}

.nc-radio-player.is-playing .nc-radio-station-toggle {
  color: var(--yellow);
  border-color: rgba(247, 255, 0, .32);
  text-shadow: 0 0 9px rgba(247, 255, 0, .55);
}

.nc-radio-station-toggle:hover,
.nc-radio-station-toggle:focus {
  color: var(--yellow);
  border-color: var(--yellow);
  outline: none;
}

.nc-radio-station-menu {
  position: absolute;
  z-index: 9999;
  top: calc(100% + 7px);
  left: 0;

  width: min(390px, 82vw);
  max-height: 360px;
  overflow-y: auto;

  display: none;
  padding: 7px;

  border: 1px solid rgba(0, 240, 255, .30);
  background: rgba(1, 7, 11, .985);

  box-shadow:
    0 16px 40px rgba(0, 0, 0, .72),
    inset 0 0 24px rgba(0, 240, 255, .035);
}

.nc-radio-station-menu.is-open {
  display: grid;
  gap: 4px;
}

.nc-radio-station-option {
  width: 100%;
  min-height: 36px;

  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 9px;

  padding: 6px 8px;

  border: 1px solid rgba(0, 240, 255, .12);
  background: rgba(0, 240, 255, .018);

  color: #a8d5dc;
  text-align: left;
}

.nc-radio-station-option span {
  color: var(--yellow);
  font-size: 7px;
  letter-spacing: 1px;
}

.nc-radio-station-option strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: #d7f7fa;
  font-size: 7px;
  letter-spacing: .7px;
}

.nc-radio-station-option:hover,
.nc-radio-station-option:focus,
.nc-radio-station-option.is-active {
  border-color: rgba(247, 255, 0, .46);
  background: rgba(247, 255, 0, .035);
  outline: none;
}

.nc-radio-station-option.is-active strong {
  color: var(--yellow);
}

.nc-radio-station-empty {
  padding: 16px;
  color: rgba(122, 184, 195, .58);
  font-size: 7px;
  letter-spacing: 1px;
  text-align: center;
}

@media (max-width: 900px) {
  .nc-radio-station-toggle {
    grid-row: 1;
    width: 50px;
    height: 28px;
  }

  .nc-radio-station-menu {
    right: 0;
    left: auto;
  }
}

/* =========================================================
   NCCP 2045 // RADIO FREQUENCY DIRECTORY OVERLAY
   Global station browser opened from the FM control in the
   topbar player. Overlay only: current page never unloads.
   ========================================================= */

body.nc-radio-directory-open {
  overflow: hidden !important;
}

.nc-radio-directory-overlay {
  position: fixed;
  z-index: 2147483000;
  inset: 0;

  display: none;
  align-items: stretch;
  justify-content: center;

  padding: 18px;

  background:
    radial-gradient(circle at 50% 18%, rgba(0, 240, 255, .075), transparent 34%),
    linear-gradient(135deg, rgba(0, 240, 255, .018), rgba(255, 43, 214, .025)),
    rgba(0, 4, 7, .94);

  backdrop-filter: blur(9px);
}

.nc-radio-directory-overlay.is-open {
  display: flex;
}

.nc-radio-directory-shell {
  position: relative;

  width: min(1480px, 100%);
  height: min(900px, 100%);
  min-height: 0;

  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;

  border: 1px solid rgba(0, 240, 255, .34);
  background:
    linear-gradient(rgba(0, 240, 255, .015) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 240, 255, .015) 1px, transparent 1px),
    rgba(1, 8, 12, .985);
  background-size: 48px 48px, 48px 48px, auto;

  box-shadow:
    0 28px 80px rgba(0, 0, 0, .82),
    inset 0 0 60px rgba(0, 240, 255, .025);

  overflow: hidden;
}

.nc-radio-directory-shell::before,
.nc-radio-directory-shell::after {
  content: "";
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.nc-radio-directory-shell::before {
  top: -1px;
  left: 28px;
  width: 120px;
  height: 2px;
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0, 240, 255, .62);
}

.nc-radio-directory-shell::after {
  top: -1px;
  right: 28px;
  width: 92px;
  height: 2px;
  background: var(--magenta, #ff2bd6);
  box-shadow: 0 0 18px rgba(255, 43, 214, .55);
}

.nc-radio-directory-header {
  min-width: 0;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;

  padding: 24px 28px 20px;
  border-bottom: 1px solid rgba(0, 240, 255, .18);
  background: rgba(0, 240, 255, .018);
}

.nc-radio-directory-header > div {
  min-width: 0;
}

.nc-radio-directory-header small {
  display: block;
  margin-bottom: 7px;

  color: rgba(113, 187, 200, .68);
  font-size: 7px;
  letter-spacing: 2px;
}

.nc-radio-directory-header h2 {
  margin: 0;

  color: #e8fbfd;
  font-size: clamp(18px, 2vw, 30px);
  letter-spacing: 2.4px;
  line-height: 1.08;
}

.nc-radio-directory-header p {
  max-width: 820px;
  margin: 10px 0 0;

  color: rgba(142, 202, 213, .67);
  font-size: 8px;
  letter-spacing: .85px;
  line-height: 1.65;
}

.nc-radio-directory-back {
  flex: 0 0 auto;
  min-width: 150px;
  min-height: 42px;

  padding: 0 16px;

  border: 1px solid rgba(0, 240, 255, .34);
  background: rgba(0, 240, 255, .025);

  color: #bfeef3;
  font-size: 7px;
  letter-spacing: 1.45px;
}

.nc-radio-directory-back:hover,
.nc-radio-directory-back:focus {
  color: var(--yellow);
  border-color: var(--yellow);
  outline: none;
}

.nc-radio-directory-now {
  min-width: 0;

  display: grid;
  grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 18px;

  padding: 11px 28px;
  border-bottom: 1px solid rgba(0, 240, 255, .12);
  background:
    linear-gradient(90deg, rgba(247, 255, 0, .03), transparent 40%),
    rgba(0, 0, 0, .14);
}

.nc-radio-directory-now > span {
  color: var(--yellow);
  font-size: 7px;
  letter-spacing: 1.65px;
}

.nc-radio-directory-now > strong,
.nc-radio-directory-now > small {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.nc-radio-directory-now > strong {
  color: #e7fbfd;
  font-size: 9px;
  letter-spacing: 1px;
}

.nc-radio-directory-now > small {
  color: rgba(117, 189, 200, .68);
  font-size: 7px;
  letter-spacing: .8px;
  text-align: right;
}

.nc-radio-directory-grid {
  min-height: 0;
  overflow-y: auto;

  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;

  padding: 18px 28px 24px;

  scrollbar-color: rgba(0, 240, 255, .52) rgba(0, 240, 255, .04);
  scrollbar-width: thin;
}

.nc-radio-directory-card {
  position: relative;
  min-width: 0;
  min-height: 112px;

  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;

  padding: 14px 14px 14px 12px;

  border: 1px solid rgba(0, 240, 255, .16);
  background:
    linear-gradient(110deg, rgba(0, 240, 255, .035), rgba(0, 0, 0, .04) 48%, rgba(255, 43, 214, .018)),
    rgba(1, 9, 13, .74);

  color: #cfeff3;
  text-align: left;

  transition:
    border-color .16s ease,
    background .16s ease,
    transform .16s ease;
}

.nc-radio-directory-card::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: transparent;
}

.nc-radio-directory-card:hover,
.nc-radio-directory-card:focus {
  transform: translateY(-1px);
  border-color: rgba(0, 240, 255, .55);
  background:
    linear-gradient(110deg, rgba(0, 240, 255, .075), rgba(0, 0, 0, .03) 48%, rgba(255, 43, 214, .035)),
    rgba(1, 9, 13, .88);
  outline: none;
}

.nc-radio-directory-card.is-active {
  border-color: rgba(247, 255, 0, .50);
  background:
    linear-gradient(110deg, rgba(247, 255, 0, .07), rgba(0, 240, 255, .025) 48%, rgba(255, 43, 214, .018)),
    rgba(1, 9, 13, .92);
}

.nc-radio-directory-card.is-active::before {
  background: var(--yellow);
  box-shadow: 0 0 12px rgba(247, 255, 0, .55);
}

.nc-radio-directory-frequency {
  display: grid;
  place-items: center;

  width: 64px;
  height: 64px;

  border: 1px solid rgba(0, 240, 255, .23);
  background: rgba(0, 240, 255, .025);

  color: var(--cyan);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .4px;
}

.nc-radio-directory-card.is-active .nc-radio-directory-frequency {
  color: var(--yellow);
  border-color: rgba(247, 255, 0, .34);
}

.nc-radio-directory-copy {
  min-width: 0;
}

.nc-radio-directory-copy strong,
.nc-radio-directory-copy small {
  display: block;
}

.nc-radio-directory-copy strong {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;

  color: #e8fbfd;
  font-size: 10px;
  letter-spacing: .9px;
}

.nc-radio-directory-copy small {
  margin-top: 8px;

  color: rgba(119, 184, 195, .62);
  font-size: 7px;
  letter-spacing: .55px;
  line-height: 1.55;
}

.nc-radio-directory-status {
  align-self: start;

  min-width: 48px;
  padding: 5px 7px;

  border: 1px solid rgba(0, 240, 255, .16);

  color: rgba(110, 184, 196, .63);
  font-size: 6px;
  letter-spacing: 1px;
  text-align: center;
}

.nc-radio-directory-card.is-active .nc-radio-directory-status {
  color: var(--yellow);
  border-color: rgba(247, 255, 0, .34);
}

.nc-radio-directory-card:disabled {
  opacity: .55;
  pointer-events: none;
}

.nc-radio-directory-empty {
  grid-column: 1 / -1;
  min-height: 240px;
  display: grid;
  place-items: center;

  color: rgba(117, 184, 196, .62);
  font-size: 8px;
  letter-spacing: 1.4px;
}

.nc-radio-directory-footer {
  display: flex;
  justify-content: space-between;
  gap: 20px;

  padding: 9px 28px;
  border-top: 1px solid rgba(0, 240, 255, .12);

  color: rgba(97, 166, 178, .50);
  font-size: 6px;
  letter-spacing: 1.3px;
}

@media (max-width: 1180px) {
  .nc-radio-directory-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .nc-radio-directory-overlay {
    padding: 0;
  }

  .nc-radio-directory-shell {
    width: 100%;
    height: 100%;
    border: 0;
  }

  .nc-radio-directory-header {
    padding: 18px;
    flex-direction: column;
  }

  .nc-radio-directory-back {
    width: 100%;
  }

  .nc-radio-directory-now {
    grid-template-columns: 1fr;
    gap: 5px;
    padding: 10px 18px;
  }

  .nc-radio-directory-now > small {
    text-align: left;
  }

  .nc-radio-directory-grid {
    grid-template-columns: 1fr;
    padding: 14px 18px 20px;
  }

  .nc-radio-directory-footer {
    padding: 9px 18px;
  }
}

/* =========================================================
   NCCP 2045 // 054 HARDWIRED RADIO DIRECTORY LAUNCHER
   ========================================================= */

.nc-radio-directory-launcher {
  flex: 0 0 auto;
  min-width: 62px;
  height: 46px;
  padding: 4px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 1px solid rgba(247, 255, 0, .42);
  background: linear-gradient(180deg, rgba(247,255,0,.08), rgba(0,240,255,.035));
  color: var(--yellow);
  box-shadow: inset 0 0 14px rgba(247,255,0,.05), 0 0 14px rgba(247,255,0,.035);
}

.nc-radio-directory-launcher-main {
  font-size: 10px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 1.6px;
}

.nc-radio-directory-launcher-sub {
  font-size: 5px;
  line-height: 1;
  letter-spacing: 1px;
  color: rgba(128, 222, 232, .78);
}

.nc-radio-directory-launcher:hover,
.nc-radio-directory-launcher:focus-visible {
  border-color: var(--yellow);
  color: #fff;
  outline: none;
  box-shadow: inset 0 0 18px rgba(247,255,0,.10), 0 0 18px rgba(247,255,0,.10);
}

/* FM launcher is external now, so the radio player uses only copy + controls. */
.nc-radio-player {
  grid-template-columns: minmax(0, 1fr) auto;
}

.nc-radio-copy {
  grid-column: 1;
}

.nc-radio-controls {
  grid-column: 2;
}

.nc-radio-volume {
  grid-column: 1 / 3;
}

@media (max-width: 1180px) {
  .nc-radio-directory-launcher { min-width: 54px; }
}

@media (max-width: 900px) {
  .nc-radio-directory-launcher {
    min-width: 44px;
    width: 44px;
    padding-inline: 4px;
  }
  .nc-radio-directory-launcher-sub { display: none; }
}

@media (max-width: 680px) {
  .nc-radio-directory-launcher { display: none; }
}