* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
  font-family: "Courier New", monospace;
  color: #d9faff;
}


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

#boot-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background:
    radial-gradient(circle at center, #071013 0%, #020506 45%, #000 100%);
}

.boot-terminal {
  width: min(700px, 88vw);
}

.boot-logo {
  font-family: Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 8px;
  font-size: clamp(32px, 5vw, 60px);
  color: #eee;
  margin-bottom: 40px;

  text-shadow:
    0 0 20px rgba(255,255,255,.18);
}

.boot-logo span {
  color: #ff172f;
}

.boot-lines {
  font-size: 13px;
  letter-spacing: 2px;
  line-height: 2.1;
  color: #55777c;
}

.boot-lines div {
  opacity: 0;
  transform: translateY(5px);
  animation: bootLine .25s forwards;
}

.boot-lines div:nth-child(1) { animation-delay: .15s; }
.boot-lines div:nth-child(2) { animation-delay: .40s; }
.boot-lines div:nth-child(3) { animation-delay: .65s; }
.boot-lines div:nth-child(4) { animation-delay: .90s; }
.boot-lines div:nth-child(5) { animation-delay: 1.15s; }
.boot-lines div:nth-child(6) { animation-delay: 1.40s; }
.boot-lines div:nth-child(7) { animation-delay: 1.65s; }
.boot-lines div:nth-child(8) { animation-delay: 1.90s; }

.boot-lines b {
  color: #21ff9b;
  font-weight: normal;
  text-shadow: 0 0 8px rgba(33,255,155,.6);
}

.boot-bar {
  height: 2px;
  margin-top: 32px;
  background: #10191b;
  overflow: hidden;
}

.boot-bar div {
  height: 100%;
  width: 0;
  background: #e60021;

  box-shadow:
    0 0 12px #e60021;

  animation: bootProgress 2.6s forwards;
}

.boot-footer {
  margin-top: 12px;
  font-size: 9px;
  letter-spacing: 3px;
  color: #43575b;
}

@keyframes bootLine {
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes bootProgress {
  0%   { width: 0%; }
  20%  { width: 17%; }
  45%  { width: 48%; }
  70%  { width: 73%; }
  100% { width: 100%; }
}

#boot-screen.exit {
  animation: bootExit .8s forwards;
}

@keyframes bootExit {
  0% {
    opacity: 1;
  }

  60% {
    opacity: 1;
    filter: brightness(2);
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}


/* =====================================================
   COMMAND CENTER
===================================================== */

#command-center {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;

  opacity: 0;
  transform: scale(1.03);
}

#command-center.online {
  animation: commandOnline 1.2s forwards;
}

@keyframes commandOnline {
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* =====================================================
   ENVIRONMENT
===================================================== */

.environment {
  position: absolute;
  inset: -2%;

  background-image:
    url("/assets/skynet-command-center.png");

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  transform: scale(1.02);

  filter:
    contrast(1.08)
    brightness(.88)
    saturate(1.05);

  transition: transform .15s linear;
}


/* =====================================================
   ATMOSPHERE
===================================================== */

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;

  box-shadow:
    inset 0 0 180px 50px rgba(0,0,0,.75);
}

.scanlines {
  position: absolute;
  inset: 0;
  pointer-events: none;

  opacity: .12;

  background:
    repeating-linear-gradient(
      to bottom,
      transparent 0px,
      transparent 3px,
      rgba(120,220,255,.12) 4px
    );
}

.scanner {
  position: absolute;

  width: 100%;
  height: 2px;

  top: -5%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,0,30,.15),
      rgba(255,0,30,.9),
      rgba(255,0,30,.15),
      transparent
    );

  box-shadow:
    0 0 15px rgba(255,0,30,.8),
    0 0 40px rgba(255,0,30,.25);

  opacity: .45;

  animation: scannerSweep 7s linear infinite;
}

@keyframes scannerSweep {
  from {
    top: -5%;
  }

  to {
    top: 105%;
  }
}


/* =====================================================
   AMBIENT LIGHTING
===================================================== */

.red-glow,
.cyan-glow {
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(90px);
  mix-blend-mode: screen;
}

.red-glow {
  width: 35vw;
  height: 35vw;

  left: 32%;
  top: 25%;

  background: rgba(255,0,20,.08);

  animation: redPulse 4s ease-in-out infinite;
}

.cyan-glow {
  width: 45vw;
  height: 35vw;

  left: 30%;
  top: 20%;

  background: rgba(0,180,255,.035);

  animation: cyanPulse 6s ease-in-out infinite;
}

@keyframes redPulse {
  50% {
    opacity: .45;
    transform: scale(1.15);
  }
}

@keyframes cyanPulse {
  50% {
    opacity: .25;
    transform: scale(.92);
  }
}


/* =====================================================
   INTERACTIVE EYE
===================================================== */

#eye-zone {
  position: absolute;

  left: 50%;
  top: 45%;

  width: 15vw;
  height: 15vw;

  min-width: 150px;
  min-height: 150px;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  justify-content: center;

  pointer-events: none;
}

#eye {
  position: relative;

  width: 72px;
  height: 72px;

  display: flex;
  align-items: center;
  justify-content: center;

  transition:
    transform .09s linear;
}

.eye-halo {
  position: absolute;

  width: 72px;
  height: 72px;

  border-radius: 50%;

  border: 1px solid rgba(255,0,25,.5);

  box-shadow:
    0 0 15px rgba(255,0,25,.6),
    inset 0 0 18px rgba(255,0,25,.3);

  animation: eyeHalo 2.2s ease-in-out infinite;
}

.eye-core {
  width: 34px;
  height: 34px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      #fff 0%,
      #ffb7b7 8%,
      #ff1b2d 24%,
      #bd0017 48%,
      #270006 74%,
      transparent 76%
    );

  box-shadow:
    0 0 10px #ff001e,
    0 0 25px rgba(255,0,30,.9),
    0 0 55px rgba(255,0,30,.55);
}

.eye-hotspot {
  position: absolute;

  width: 8px;
  height: 8px;

  border-radius: 50%;

  background: white;

  box-shadow:
    0 0 10px white,
    0 0 18px #ff001e;
}

@keyframes eyeHalo {
  50% {
    transform: scale(1.12);
    opacity: .55;
  }
}


/* =====================================================
   TARGETING RINGS
===================================================== */

.target {
  position: absolute;

  left: 50%;
  top: 45%;

  border-radius: 50%;

  pointer-events: none;

  border:
    1px dashed rgba(255,30,50,.25);
}

.target-one {
  width: 26vw;
  height: 26vw;

  transform: translate(-50%, -50%);

  animation: rotateTarget 28s linear infinite;
}

.target-two {
  width: 34vw;
  height: 34vw;

  border-color: rgba(80,210,255,.16);

  transform: translate(-50%, -50%);

  animation: rotateTargetReverse 38s linear infinite;
}

@keyframes rotateTarget {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotateTargetReverse {
  from {
    transform: translate(-50%, -50%) rotate(360deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(0deg);
  }
}


/* =====================================================
   INTERACTIVE MONITOR HOTSPOTS
===================================================== */

.hotspot {
  position: absolute;

  display: flex;
  align-items: flex-end;

  padding: 12px;

  text-decoration: none;

  border: 1px solid transparent;

  transition:
    border-color .2s,
    background .2s,
    box-shadow .2s;

  z-index: 20;
}

.hotspot span {
  opacity: 0;

  color: #ff3045;

  background: rgba(0,0,0,.82);

  padding: 5px 8px;

  font-size: 10px;

  letter-spacing: 2px;

  transition: opacity .2s;
}

.hotspot:hover {
  border-color: rgba(255,0,30,.75);

  background: rgba(255,0,30,.035);

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

.hotspot:hover span {
  opacity: 1;
}


/*
 Approximate monitor positions in the V4 artwork.
 We'll fine-tune these after seeing it on your monitor.
*/

.jellyfin {
  left: 3%;
  top: 34%;
  width: 19%;
  height: 16%;
}

.portainer {
  left: 3%;
  top: 51%;
  width: 19%;
  height: 15%;
}

.kuma {
  right: 3%;
  top: 34%;
  width: 19%;
  height: 16%;
}

.control {
  right: 3%;
  top: 51%;
  width: 19%;
  height: 15%;
}


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

.live-status {
  position: absolute;

  left: 50%;
  bottom: 3%;

  transform: translateX(-50%);

  padding: 8px 15px;

  background: rgba(0,0,0,.6);

  border: 1px solid rgba(255,0,30,.25);

  font-size: 10px;
  letter-spacing: 3px;

  color: #ff3145;
}

.live-status i {
  display: inline-block;

  width: 6px;
  height: 6px;

  margin-right: 9px;

  border-radius: 50%;

  background: #ff1731;

  box-shadow:
    0 0 8px #ff1731;

  animation: statusPulse 1.6s infinite;
}

@keyframes statusPulse {
  50% {
    opacity: .3;
  }
}


#clock {
  position: absolute;

  right: 2%;
  top: 2%;

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

  color: rgba(200,240,255,.55);

  text-shadow:
    0 0 6px rgba(80,200,255,.25);
}


/* =====================================================
   CUSTOM HUD CURSOR
===================================================== */

#cursor-hud {
  position: fixed;

  width: 28px;
  height: 28px;

  pointer-events: none;

  z-index: 100;

  transform: translate(-50%, -50%);

  opacity: .65;
}

.cursor-ring {
  position: absolute;

  inset: 0;

  border:
    1px solid rgba(255,30,50,.7);

  border-radius: 50%;
}

.cursor-dot {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 3px;
  height: 3px;

  transform: translate(-50%, -50%);

  border-radius: 50%;

  background: #ff1830;

  box-shadow:
    0 0 8px #ff1830;
}


/* =====================================================
   SMALL SCREEN
===================================================== */

@media (max-width: 900px) {

  .environment {
    background-size: cover;
  }

  .hotspot span {
    display: none;
  }

  #cursor-hud {
    display: none;
  }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
  }

}

/* =====================================================
   MOBILE V4 - SHOW FULL COMMAND CENTER
===================================================== */

@media (max-width: 900px) {

  #command-center {
    background: #000;
  }

  .environment {
    inset: 0;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
  }

  /* Disable desktop parallax on phones */
  .target-one {
    width: 42vw;
    height: 42vw;
  }

  .target-two {
    width: 55vw;
    height: 55vw;
  }

  #eye-zone {
    width: 25vw;
    height: 25vw;
  }

  #cursor-hud {
    display: none;
  }

  .hotspot {
    display: none;
  }

  #clock {
    display: none;
  }

  .live-status {
    bottom: 2%;
    font-size: 8px;
    white-space: nowrap;
  }
}

/* =====================================================
   V4 PORTRAIT MOBILE COMMAND CENTER
===================================================== */

@media (max-width: 900px) {

  /* Use dedicated portrait artwork */
  .environment {
    inset: 0 !important;
    background-image: url("/assets/skynet-mobile.png") !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    filter:
      contrast(1.05)
      brightness(.92)
      saturate(1.05) !important;
  }

  /* Mobile artwork already contains its own HUD,
     so remove desktop targeting rings */
  .target {
    display: none !important;
  }

  /* Position interactive eye over portrait AI core */
  #eye-zone {
    left: 50% !important;
    top: 32% !important;
    width: 120px !important;
    height: 120px !important;
  }

  #eye {
    transform: none !important;
  }

  /* Remove desktop-only status overlays */
  #clock,
  .live-status,
  #cursor-hud {
    display: none !important;
  }

  /*
     Portrait touch controls.
     Transparent hotspots align with the four
     navigation monitors in the mobile artwork.
  */

  .hotspot {
    display: block !important;
    z-index: 30;
    padding: 0;
    background: transparent;
  }

  .hotspot span {
    display: none !important;
  }

  .jellyfin {
    left: 8% !important;
    top: 64% !important;
    width: 40% !important;
    height: 10% !important;
  }

  .kuma {
    right: 8% !important;
    left: auto !important;
    top: 64% !important;
    width: 40% !important;
    height: 10% !important;
  }

  .portainer {
    left: 8% !important;
    top: 75% !important;
    width: 40% !important;
    height: 10% !important;
  }

  .control {
    right: 8% !important;
    left: auto !important;
    top: 75% !important;
    width: 40% !important;
    height: 10% !important;
  }

  /* Slightly softer scan effect on small displays */
  .scanner {
    opacity: .28;
    animation-duration: 8s;
  }

  .scanlines {
    opacity: .07;
  }

  .red-glow {
    width: 80vw;
    height: 80vw;
    left: 10%;
    top: 20%;
  }

  .cyan-glow {
    width: 90vw;
    height: 70vw;
    left: 5%;
    top: 15%;
  }
}

/* =====================================================
   V4 PHONE ORIENTATION + SCROLL
===================================================== */

/* Portrait phone: portrait artwork + allow vertical scroll */
@media (max-width: 900px) and (orientation: portrait) {

  html,
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    min-height: 100%;
  }

  #command-center {
    position: relative !important;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
  }

  .environment {
    background-image: url("/assets/skynet-mobile.png") !important;
    background-size: cover !important;
    background-position: center top !important;
  }
}


/* Landscape phone: switch back to widescreen command center */
@media (max-height: 900px) and (orientation: landscape) {

  html,
  body {
    overflow: hidden !important;
  }

  #command-center {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw;
    height: 100vh;
  }

  .environment {
    inset: -2% !important;

    background-image:
      url("/assets/skynet-command-center.png") !important;

    background-size: cover !important;
    background-position: center center !important;

    transform: scale(1.02) !important;
  }

  /* Restore desktop HUD */
  .target {
    display: block !important;
  }

  .target-one {
    width: 26vw !important;
    height: 26vw !important;
  }

  .target-two {
    width: 34vw !important;
    height: 34vw !important;
  }

  #eye-zone {
    left: 50% !important;
    top: 45% !important;
    width: 15vw !important;
    height: 15vw !important;
  }

  /* Restore desktop hotspot positions */

  .jellyfin {
    left: 3% !important;
    right: auto !important;
    top: 34% !important;
    width: 19% !important;
    height: 16% !important;
  }

  .portainer {
    left: 3% !important;
    right: auto !important;
    top: 51% !important;
    width: 19% !important;
    height: 15% !important;
  }

  .kuma {
    right: 3% !important;
    left: auto !important;
    top: 34% !important;
    width: 19% !important;
    height: 16% !important;
  }

  .control {
    right: 3% !important;
    left: auto !important;
    top: 51% !important;
    width: 19% !important;
    height: 15% !important;
  }
}

/* === V4 PORTRAIT LIVE HUD CLOCK === */
@media (max-width: 900px) and (orientation: portrait) {

  #clock {
    display: flex !important;
    position: absolute !important;

    /* Overlay the clock baked into skynet-mobile.png */
    left: auto !important;
    right: 2.2% !important;
    top: 10.2% !important;
    bottom: auto !important;

    width: 18% !important;
    height: 5.4% !important;

    z-index: 50 !important;

    box-sizing: border-box !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    padding: 4px !important;

    background:
      linear-gradient(
        180deg,
        rgba(6,18,29,.97),
        rgba(3,11,18,.97)
      ) !important;

    border: 1px solid rgba(72,150,190,.55) !important;
    border-radius: 3px !important;

    color: rgba(150,205,230,.95) !important;
    font-family: monospace !important;
    font-size: clamp(7px, 2.4vw, 14px) !important;
    line-height: 1.25 !important;
    white-space: normal !important;

    text-shadow:
      0 0 5px rgba(80,180,220,.45) !important;

    pointer-events: none !important;
  }
}


/* === V4 MOBILE CLOCK V2 === */

#mobile-live-clock {
  display: none;
}

@media (max-width: 900px) and (orientation: portrait) {

  #mobile-live-clock {
    display: flex !important;
    position: absolute !important;

    /* Baked clock location */
    top: 10.1% !important;
    right: 1.7% !important;

    width: 19.2% !important;
    height: 5.4% !important;

    z-index: 1000 !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    padding: 2px !important;

    /* Cover the clock printed into the PNG */
    background: rgba(4, 13, 21, .98) !important;
    border: 1px solid rgba(75, 139, 170, .65) !important;
    border-radius: 3px !important;

    font-family: monospace !important;
    text-align: center !important;
    pointer-events: none !important;

    box-shadow:
      inset 0 0 10px rgba(0, 90, 130, .15),
      0 0 5px rgba(0, 0, 0, .8) !important;
  }

  #mobile-live-clock .mobile-clock-time {
    display: block !important;
    color: rgb(145, 195, 220) !important;
    font-size: clamp(10px, 3.2vw, 20px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 5px rgba(70, 160, 205, .45) !important;
  }

  #mobile-live-clock .mobile-clock-date {
    display: block !important;
    margin-top: 3px !important;
    color: rgb(105, 145, 165) !important;
    font-size: clamp(5px, 1.5vw, 10px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}

/* === V4 MOBILE CLOCK FINAL ALIGNMENT === */
@media (max-width: 900px) and (orientation: portrait) {
  #mobile-live-clock {
    top: 9.8% !important;
    right: 1.9% !important;
    width: 18.3% !important;
    height: 5.1% !important;
    padding: 2px !important;
  }

  #mobile-live-clock .mobile-clock-time {
    font-size: clamp(11px, 3.4vw, 21px) !important;
    letter-spacing: 0 !important;
  }

  #mobile-live-clock .mobile-clock-date {
    margin-top: 3px !important;
    font-size: clamp(5px, 1.45vw, 9px) !important;
    letter-spacing: 0 !important;
  }
}


/* === V4 PORTRAIT CLOCK FINAL === */
@media (max-width: 900px) and (orientation: portrait) {

  #clock {
    display: flex !important;
    position: absolute !important;

    top: 9.8% !important;
    right: 1.9% !important;
    left: auto !important;
    bottom: auto !important;

    width: 18.3% !important;
    height: 5.1% !important;

    z-index: 1000 !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    box-sizing: border-box !important;
    padding: 2px !important;

    background: rgba(4, 13, 21, .98) !important;
    border: 1px solid rgba(75, 139, 170, .65) !important;
    border-radius: 3px !important;

    font-family: monospace !important;
    text-align: center !important;
    pointer-events: none !important;

    box-shadow:
      inset 0 0 10px rgba(0,90,130,.15),
      0 0 5px rgba(0,0,0,.8) !important;
  }

  #clock .clock-time {
    display: block !important;
    color: rgb(145,195,220) !important;
    font-size: clamp(11px, 3.4vw, 21px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
    text-shadow: 0 0 5px rgba(70,160,205,.45) !important;
  }

  #clock .clock-date {
    display: block !important;
    margin-top: 3px !important;
    color: rgb(105,145,165) !important;
    font-size: clamp(5px, 1.45vw, 9px) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }
}