/* =========================================================
   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;
    }

}