/* --- Global Transition Setup --- */
#boot-screen,
#os-desktop,
#loading-bar-container {
  transition:
    opacity 0.5s ease,
    transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
  flex-grow: 1;

  /* CRITICAL FIXES to stop the FROM/TO bars from blowing out the right side */
  flex-basis: 0;
  min-width: 0;
  overflow: hidden;

  background: var(--dx-bg-desktop);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin-left: -2px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* --- Phase 1: Boot Screen Styles --- */
#boot-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--dx-bg-desktop); /* Dark boot slate */
  z-index: 50; /* Sits over absolutely everything */
  display: flex;
  align-items: center;
  justify-content: center;
}

.boot-logo {
  width: 12cqw; /* Dynamically scales with the monitor width */
  height: 12cqw;
  background: var(--dx-bg-desktop);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1cqw 3cqw rgba(0, 0, 0, 0.5);
}

.boot-logo svg {
  /* Overrides the hardcoded width="80" in your HTML */
  width: 8cqw !important;
  height: 8cqw !important;
}

.boot-footer {
  position: absolute;
  bottom: 6cqh;
  background: #000;
  padding: 1.5cqh 4cqw;
  color: #fff;
  font-size: 1.8cqw; /* Text now grows as the camera gets closer! */
  letter-spacing: 0.3cqw;
}

.cyan-slash {
  color: #00ccff;
  font-weight: bold;
  margin-right: 5px;
}
.cyan-text {
  color: #00ccff;
  margin-left: 10px;
}

/* --- Phase 2: OS Desktop Additions --- */
.os-media-player {
  position: absolute;
  top: 30px;
  right: 40px;
  text-align: right;
  color: #444;
  font-size: 0.7em;
  letter-spacing: 1px;
  display: flex;
  gap: 15px;
  align-items: flex-end;
}
.media-title {
  font-weight: bold;
  color: #555;
}
.pause-icon {
  width: 12px;
  height: 14px;
  border-left: 4px solid #444;
  border-right: 4px solid #444;
}

.os-clock {
  position: absolute;
  bottom: 80px;
  right: 40px;
  font-size: 4em;
  font-weight: bold;
  color: #222;
  font-family: sans-serif;
  letter-spacing: 5px;
}

.os-code-left,
.os-code-right {
  position: absolute;
  font-family: monospace;
  font-size: 0.6em;
  color: rgba(255, 255, 255, 0.03);
  line-height: 1.5;
  white-space: nowrap;
  pointer-events: none;
}
.os-code-left {
  top: 200px;
  left: 30px;
}
.os-code-right {
  bottom: 200px;
  right: 40px;
  text-align: right;
}

#loading-bar-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 25cqw; /* Replaces 250px */
  height: 2cqh; /* Replaces 15px */
  background: #0a0a0a;
  border: 1px solid #222;
  z-index: 40;
}

.loading-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #ffb400, #ffcc44);
  transition: width 1s cubic-bezier(0.8, 0, 0.2, 1); /* Snappy fill animation */
}

:root {
  --dx-gold: #ffb400;
  --dx-gold-dim: #b37e00;
  --dx-bg-light: #3a3c3a;
  --dx-text-main: #d0d0d0;
  --dx-text-muted: #7a7c7a;
  --dx-border: #555755;
  --dx-black: #0a0a0a;
  --dx-bg-left: #222222;
  --dx-bg-right: #323232;
  --dx-bg-desktop: radial-gradient(circle, #1d2020 0%, #373d3f 100%);
  --dx-icons: linear-gradient(to bottom, #191b1a 0%, #282b27 100%);
}

body,
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #111;
  font-family: "Rajdhani", sans-serif;
  color: var(--dx-text-main);
  overflow: hidden;
  user-select: none;
}

#webgl-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  /* Removed the blur from the container so the monitor stays sharp */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar-track {
  background: var(--dx-bg-light);
  border-left: 1px solid var(--dx-border);
}
::-webkit-scrollbar-thumb {
  background: var(--dx-gold);
  border: 2px solid var(--dx-bg-light);
}

.layout-container,
.ui-footer,
.ui-top-bezel {
  pointer-events: auto;
}

#terminal-ui,
#terminal-ui * {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="1,1 18,10 10,12 6,21" fill="%23ffcc22" stroke="%23111" stroke-width="1.5" stroke-linejoin="round"/></svg>')
      1 1,
    auto !important;
}

/* For clickable elements, we keep the golden arrow but maybe make it slightly brighter */
#terminal-ui a,
#terminal-ui button,
#terminal-ui .blog-item {
  cursor:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><polygon points="1,1 18,10 10,12 6,21" fill="%23ffe666" stroke="%23000" stroke-width="1.5" stroke-linejoin="round"/></svg>')
      1 1,
    pointer !important;
}

/* Main UI Wrapper */
#terminal-ui {
  position: absolute;
  /* Force-override any legacy static constraints */
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  max-height: none !important;
  transform: none !important; /* CRITICAL: Stops it from shifting off the JS coordinates */
  transform-origin: top left;

  z-index: 10;
  pointer-events: none;
  box-sizing: border-box;

  container-type: size;
}

#terminal-ui::after {
  content: " ";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

  /* Scanlines */
  /* background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.1)
  ); */
  background-size: 100% 4px;

  /* Vignette to blend edges into the 3D bezel */
  box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.8);

  pointer-events: none; /* Crucial: allows clicks to pass through to buttons */
  z-index: 100;
}

.layout-container {
  position: absolute;
  top: 72px;
  left: 45px;
  width: 93%;
  height: 93%;
  display: flex;
  align-items: center; /* CRITICAL: Vertically centers the staggered windows */
  gap: 0px;
  z-index: 10;
}

#blog-scroll-container::-webkit-scrollbar,
.reader-body-layout::-webkit-scrollbar {
  left: -5px;
  width: 8px; /* Slightly wider to match the reference */
}

#blog-scroll-container::-webkit-scrollbar-track,
.reader-body-layout::-webkit-scrollbar-track {
  background: #0a0a0a;
  /* We use borders on the track to make it look thinner than the yellow thumb */
  border-left: 2px solid #1a1a1a;
  border-right: 2px solid #1a1a1a;
}

#blog-scroll-container::-webkit-scrollbar-thumb,
.reader-body-layout::-webkit-scrollbar-thumb {
  background: #ffcc22; /* Flat, bright gold */
  border-radius: 0px; /* CRITICAL: Removes the rounding for that sharp hardware look */
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.3); /* Slight inner depth */
}

#blog-scroll-container::-webkit-scrollbar-thumb:hover,
.reader-body-layout::-webkit-scrollbar-thumb:hover {
  background: #ffe55c; /* Brighter gold on interaction */
}

/* Left Side: Entry Scroll */
#blog-scroll-container {
  width: 30%;
  height: 70%; /* Takes up full height */
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 5;
  box-shadow: 15px 0 15px rgba(0, 0, 0, 0.6);
  top: -12%;
  left: -2%;
}

/* --- Refined Left Header Assembly (Two-Tier) --- */
.scroll-header-assembly {
  display: flex;
  flex-direction: column;
  background: #111;
}

/* The Top Lip */
.header-top-lip {
  height: 18px; /* Very thin */
  background: linear-gradient(to bottom, #4a4c4a 0%, #2a2c2a 100%);
  border-top-left-radius: 7px; /* Inner radius to match outer */
  border-top-right-radius: 7px; /* Inner radius to match outer */

  /* This creates the deep groove/bezel between the two levels */
  border-bottom: 2px solid #000;
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);

  position: relative;
  z-index: 2; /* Ensures shadow drops over the bottom plate */
}

/* The Yellow LED, moved inside the top lip */
.header-led {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--dx-gold);
  box-shadow: inset 0 0 2px #fff; /* Give it a bright core */

  /* Using the pulse animation we created earlier */
  animation: ledPulse 1.4s infinite alternate ease-in-out;
  animation-delay: 0.5s;
}

/* The Main Plate */
.header-main-plate {
  background: linear-gradient(to bottom, #2b2c2b 0%, #1e201e 100%);
  padding: 12px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* The Envelope Icon */
.header-icon {
  width: 26px;
  height: 26px;
  color: rgba(255, 255, 255, 0.25); /* Faint grey transparency */
  margin-top: 2px;
}

/* Typography */
.header-title {
  font-size: 1.4em;
  font-weight: 500;
  letter-spacing: 1px;
  color: #f0f0f0;
  text-transform: uppercase;
}

#entry-list {
  background: var(--dx-bg-left); /* Darker olive/charcoal */
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  padding-bottom: 30px; /* Space for pagination */
}

.pagination {
  position: absolute;
  bottom: 5px;
  right: 15px;
  color: var(--dx-text-muted);
  font-size: 0.8em;
  pointer-events: none;
}

.blog-entry {
  display: flex;
  gap: 15px;
  padding: 10px 15px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.avatar-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.avatar-underline {
  width: 80%;
  height: 2px;
  background-color: var(--dx-gold); /* Changed from white */
  transition: background-color 1.5s;
}

.entry-text-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

.entry-author {
  font-size: 1.1em;
  color: #ccc;
}
.entry-title {
  font-size: 0.9em;
  color: var(--dx-text-muted);
  text-transform: uppercase;
}

/* Active State Inversions */
.blog-entry.read .avatar-underline {
  background-color: #ffffff;
}

.blog-entry.active {
  background: var(--dx-gold);
}
.blog-entry.active .entry-author {
  color: white;
}
.blog-entry.active .entry-title {
  color: #111;
  font-weight: 600;
}
.blog-entry.active .entry-avatar-small {
  border-color: #555;
}

.entry-avatar-small {
  width: 42px;
  height: 42px;
  background: #111;
  border: 2px solid #1a1a1a; /* Dark border matching the crop */
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.8);
  display: flex;
  overflow: hidden; /* Ensures the SVG doesn't spill out */
}

/* Right Side: Reader Window */
#reader-window {
  flex-grow: 1;
  height: 88%; /* CRITICAL: Makes it shorter than the left panel */

  flex-basis: 0;
  min-width: 0;
  overflow: hidden;

  background: var(--dx-bg-right);
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin-left: -2px;
  border-radius: 4px;
  top: -40px;
  left: -20px;
}

/* The Top Gray Bar with Hardware Detail */
.reader-top-cap {
  height: 24px; /* Thicker to match the image */
  background: linear-gradient(
    to bottom,
    #555 0%,
    #333 40%,
    #1a1a1a 100%
  ); /* Simulates rounded metal */
  border-bottom: 2px solid #000;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: relative;
  /* Drop shadow casting onto the recessed FROM band */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.8);
  z-index: 10;
}

.cap-screw {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #2a2c2a;
  /* Inner shadow to make it look countersunk */
  box-shadow:
    inset 1px 1px 3px rgba(0, 0, 0, 0.9),
    0 1px 0 rgba(255, 255, 255, 0.1);
}

/* Optional: Add a subtle cross indent to the screw */
.cap-screw::after {
  content: "+";
  position: absolute;
  color: #000;
  font-size: 9px;
  top: -2px;
  left: 2px;
  opacity: 0.6;
}

/* 2. The Metadata Section Layout */
.reader-meta-section {
  display: flex;
  flex-direction: column;
  margin-bottom: 15px;
  padding: 0; /* Removing old global padding */
  z-index: 5;
  width: 100%;
  box-sizing: border-box;
}

/* The recessed dark backing specifically for the FROM line */
.meta-band-dark {
  background: #141614;
  padding: 12px 20px 10px 15px; /* Adjusted padding */

  /* Small, precise 12px cut on the bottom-right */
  clip-path: polygon(
    0 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0 100%
  );
  border-bottom: none; /* Remove border to allow seamless touching */
}

.from-row,
.to-row {
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}

.from-bar {
  /* Sleek dark metallic gradient so it stands out from the background */
  background: linear-gradient(to bottom, #1e1600 0%, #1e1e1e 100%);
  padding: 4px 15px 4px 25px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;

  /* The exact same geometric shape as the TO bar */
  clip-path: polygon(
    0px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    15px 100%,
    0 100%
  );
}

.from-label {
  color: var(--dx-gold); /* Keeps the FROM text gold for contrast */
  font-weight: 700;
  margin-right: 12px;
  letter-spacing: 0.5px;
}

.to-row {
  padding: 0; /* REMOVE top padding that was causing the gap */
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  /* Pull the row up slightly to ensure it tucks under/touches the dark band */
  margin-top: -2px;
  position: relative;
  z-index: 2;
}

.meta-row {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
  font-size: 1.15em;
  letter-spacing: 0.5px;
}

.meta-label {
  color: var(--dx-gold);
  margin-right: 12px;
  font-weight: 500;
}

.white-text {
  color: #f0f0f0;
}

/* The Gold "TO" Bar with Chamfered Edges */
/* --- 3. The Perfected Gold "TO" Bar --- */
.to-bar {
  background: linear-gradient(to bottom, #ffcc22 0%, #ed9e00 100%);
  padding: 4px 15px 4px 25px; /* Slightly more left padding for the arrow point */
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;

  /* CRITICAL: Recreates the exact left arrow point '>' and right bottom chamfer */
  clip-path: polygon(
    15px 0,
    100% 0,
    100% calc(100% - 12px),
    calc(100% - 12px) 100%,
    0px 100%,
    0 50%
  );

  top: -10px;
  position: relative;
}

.to-label {
  color: #ffffff; /* 'TO' is white in the game */
  font-weight: 700;
  margin-right: 12px;
  letter-spacing: 0.5px;
}

.dark-text {
  color: #222222; /* Recipient name is dark in the game */
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Body Layout & Avatar */
.reader-body-layout {
  display: flex;
  padding: 0 20px 20px 20px;
  gap: 20px;
  flex-grow: 1;
  overflow-y: auto;
  overflow-x: hidden;
  align-items: flex-start; /* CRITICAL: Anchors content to the top */
}

.reader-avatar-large {
  width: 90px; /* Slightly smaller to match proportion */
  height: 90px;
  background: #111;
  border: 3px solid #1a1a1a;
  box-shadow:
    0 0 10px rgba(0, 0, 0, 0.5),
    inset 0 0 15px rgba(0, 0, 0, 0.8);
  flex-shrink: 0;
  display: flex;
  overflow: hidden;
}

/* Typography & Content Area */
.reader-content-area {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  padding-right: 15px;
}

.reader-post-title {
  font-size: 1.4em; /* Sized down from the massive default */
  font-weight: 500;
  color: #fff;
  text-transform: none; /* Game uses standard casing (e.g., "Basement Hub") */
  margin-bottom: 15px;
  margin-top: -4px; /* Pulls text up to perfectly align with the top of the avatar */
  letter-spacing: 0.5px;
}

.reader-body-text {
  /* The distinct pale greenish-grey of the text */
  color: #9a9c8f;
  line-height: 1.6;
  font-size: 1.05em;
  font-weight: 500;
}

.to-bar .white-text {
  margin-left: 10px;
  font-weight: normal;
}

/* Footer & Disconnect Button */
.ui-footer {
  position: absolute;
  bottom: -50px;
  left: 0;
  width: 100%; /* Now that the parent is full size, this will span correctly */
  height: 50px;

  background: linear-gradient(to bottom, #1a1b1a 0%, #121312 100%);
  border-top: 2px solid #050505;
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.05),
    0 -5px 15px rgba(0, 0, 0, 0.5);

  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 20;

  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  pointer-events: auto;
}

.desktop-icon-spaced {
  margin-top: 10px;
}

.disconnect-btn {
  background: #080808; /* Pure black inset */
  border: 1px solid #222; /* Faint highlight catching the edge */
  border-bottom-color: #333; /* Light catches the bottom lip */
  border-top-color: #000;
  border-radius: 3px;
  color: #f0f0f0;
  padding: 6px 18px;
  font-family: "Rajdhani", sans-serif;
  font-size: 1.1em;
  font-weight: 700;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.1s ease-in-out;

  /* Heavy inner shadow to make it look deeply inset into the plastic */
  box-shadow:
    inset 0 3px 6px rgba(0, 0, 0, 0.9),
    0 1px 1px rgba(255, 255, 255, 0.05);
}

/* Physical button press effect */
.disconnect-btn:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 5px 8px rgba(0, 0, 0, 1),
    0 0 0 rgba(255, 255, 255, 0);
}

.disconnect-btn:hover {
  color: var(--dx-gold); /* Let the text glow when hovered */
}

.hardware-indicators {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: flex-end;
  gap: 12px;

  /* Give it a solid background to prevent ugly text collisions just in case */
  background: linear-gradient(to right, transparent, #121312 15%);
  padding-left: 20px;
  white-space: nowrap; /* Prevents the text from wrapping onto multiple lines */
}

.hw-label {
  font-size: 0.55em;
  color: #555;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 3px;
  /* Ensure the text stays right-aligned against the bar */
  text-align: right;
}

/* Darken the backgrounds of the unlit LED tracks so they match the plastic */
.hw-bar {
  width: 90px;
  height: 6px;
  background: #0a0a0a; /* Darker than before */
  margin-bottom: 8px;
  position: relative;
  /* Simulate a slight physical trench for the LED bar */
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.8),
    0 1px 0 rgba(255, 255, 255, 0.05);
}

.hw-bar:last-child {
  margin-bottom: 0;
}

.hw-text-bars {
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* Align text and bars to the left */
}

.hw-label {
  font-size: 0.6em;
  color: #4a4c4a; /* Muted dark grey text */
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 2px;
}

.hw-fill {
  height: 100%;
  background: var(--dx-gold);
  width: 10%;
  will-change: width; /* Optimizes for JS animation */
}

/* --- The Plugged-in Hardware Key --- */
.hw-icon-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 2px;
}

/* White connector tip */
.usb-metal {
  width: 16px;
  height: 12px;
  background: #e8e8e8;
  border-top-left-radius: 2px;
  border-top-right-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  box-shadow: inset 0 -3px 5px rgba(0, 0, 0, 0.4);
}

/* The two small contact dashes */
.usb-line {
  width: 6px;
  height: 1px;
  background: #333;
}

/* The sculpted dark base */
.usb-base {
  width: 20px;
  height: 18px;
  background: linear-gradient(to bottom, #333, #0a0a0a);
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  border-top: 2px solid #000;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.8);
}

/* The slot/pedestal it sits in */
.usb-pedestal {
  width: 26px;
  height: 2px;
  background: #2a2c2a;
  border-radius: 50%;
  margin-top: 1px;
}
.hw-fill.alt {
  width: 30%;
}

/* --- THE LED PULSE ANIMATION --- */
/* This simulates the core heating up and the light scattering through the lens */
@keyframes ledPulse {
  0% {
    box-shadow: 0 0 4px var(--dx-gold-dim);
    opacity: 0.6;
    background-color: var(--dx-gold-dim);
    color: rgba(0, 0, 0, 0.5); /* Dims the icon inside */
  }
  100% {
    /* Layered shadows create a realistic light bloom */
    box-shadow:
      0 0 8px var(--dx-gold),
      0 0 15px var(--dx-gold),
      0 0 30px rgba(255, 180, 0, 0.4),
      inset 0 0 4px #fff; /* Hot center core */
    opacity: 1;
    background-color: #ffcc44; /* Brighter gold at peak */
    color: rgba(0, 0, 0, 0.9); /* Sharpens the icon inside */
  }
}

/* --- The Physical Top Monitor Bezel --- */
.ui-top-bezel {
  position: absolute;
  /* Increased height and adjusted top to prevent clipping the bump */
  top: -24px;
  left: 50%;
  transform: translateX(-50%);

  width: 50%;
  height: 24px; /* Tall enough to house the 22px bump */

  background: linear-gradient(to bottom, #2b2c2b 0%, #111211 100%);

  /* 1. Sharper Taper: The top edge is now much shorter than the bottom */
  /* This creates the 'razor-thin' appearance at the tips */
  clip-path: polygon(15px 50%, calc(100% - 15px) 50%, 100% 100%, 0 100%);

  display: flex;
  justify-content: center;
  align-items: flex-end; /* Anchor content to the bottom of the bezel */
  z-index: 20;
}

/* --- The Bezel Bump: Restored Curvature --- */
.bezel-bump {
  position: relative;
  /* Pushed down slightly to sit on the physical line */
  bottom: 0;

  width: 80px;
  height: 22px; /* Height is now fully contained within the 24px parent */

  background: linear-gradient(to bottom, #2b2c2b 0%, #151615 100%);

  /* Smooth sweep from the power light */
  border-radius: 40px 40px 0 0 / 22px 22px 0 0;

  border-top: 1px solid #3a3c3a;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}

/* --- The Power Light: Fixed Alignment --- */
#hardware-power-light {
  position: relative;
  top: -1px;
  width: 15px; /* Slightly smaller for a tighter fit */
  height: 15px;
  border-radius: 50%;

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

  background-color: var(--dx-gold);
  animation: mainPowerPulse 2s infinite alternate ease-in-out;
}

/* Ensure the SVG doesn't shift */
#hardware-power-light svg {
  width: 10px;
  height: 10px;
}

/* --- The Enhanced Main Power Glow Animation --- */
@keyframes mainPowerPulse {
  0% {
    box-shadow: 0 0 5px var(--dx-gold-dim);
    background-color: var(--dx-gold-dim);
  }
  100% {
    box-shadow:
      0 0 10px var(--dx-gold),
      /* Tight bright core */ 0 0 25px rgba(255, 180, 0, 0.6),
      /* Soft medium spread */ -20px 0 30px rgba(255, 180, 0, 0.15),
      /* Left horizontal lens flare */ 20px 0 30px rgba(255, 180, 0, 0.15),
      /* Right horizontal lens flare */ inset 0 0 4px #fff; /* Hot white inner core */
    background-color: #ffda66; /* Peak bright gold */
  }
}

/* --- Panel Footers (Data Stamps) --- */
.panel-footer {
  height: 25px;
  background: rgba(12, 13, 12, 0.98); /* Extremely dark, almost black */
  border-top: 1px solid #1a1a1a;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 15px;
  position: relative;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
}

/* Faint system text on the left */
.sys-text {
  font-size: 0.6em;
  color: #3a3c3a; /* Very faint grey */
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-family:
    "Courier New", Courier, monospace; /* Monospace gives it that raw data look */
}

/* Pagination text on the right (Left Panel) */
.pagination-text {
  font-size: 1.1em;
  color: #d0d0d0;
  letter-spacing: 2px;
  font-weight: 500;
  margin-right: 10px; /* Keep it away from the corner cut */
}

/* Tiny triangle accent in the bottom right corner */
.corner-cut {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 0;
  height: 0;
  border-style: solid;
  /* Draws a 5x5px triangle pointing bottom-right */
  border-width: 0 0 5px 5px;
  border-color: transparent transparent #444 transparent;
  opacity: 0.8;
}

#os-desktop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* Sits behind the layout container */
  pointer-events: none; /* Let clicks pass through */
}

/* Unified OS Desktop System Bar */
.system-top-bar {
  position: absolute;
  top: 5px;
  left: 2px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.8em;
  color: #424242;
  background: #1a1a1a;
}

.sys-title {
  color: #2b2e2b;
  font-size: 1.25em; /* Adjusted to match scale */
  letter-spacing: 2.5px;
  font-weight: 600;
  text-transform: uppercase;
}

.sys-slash {
  width: 8px;
  height: 22px;
  background-color: var(--dx-gold);
  transform: skewX(-24deg);
}

/* Faint Desktop Icons */
.desktop-icons {
  position: absolute;
  top: 40px;
  left: 15px;
  display: flex;
  flex-direction: column;
}

.desktop-icon {
  width: 44px;
  height: 54px;
  background: var(--dx-icons);
  border: 1px solid rgba(255, 255, 255, 0.03); /* Faint border */
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Animated Fire Skies --- */
#fire-screen {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, #9e4b00 0%, #220b00 80%, #0a0300 100%);
  z-index: 60;
  transition: opacity 0.8s ease;
  overflow: hidden;
  animation: fireFlicker 3s infinite alternate ease-in-out;
}

.fire-clouds {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background-image: url("https://www.transparenttextures.com/patterns/black-paper.png");
  pointer-events: none;
}

.layer-bg {
  opacity: 0.15;
  transform: scale(2);
  animation: cloudDrift 90s linear infinite alternate;
}

.layer-fg {
  opacity: 0.25;
  background-blend-mode: overlay;
  animation: cloudDriftFast 50s linear infinite alternate-reverse;
}

.fire-horizon-band {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 20%;
  transform: translateY(-50%);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 20%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.6) 80%,
    rgba(0, 0, 0, 0) 100%
  );
  border-top: 1px solid rgba(255, 150, 0, 0.1);
  border-bottom: 1px solid rgba(255, 150, 0, 0.1);
  z-index: 2;
}

.fire-emblem-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 40%; /* perfectly scaled to the monitor */
  aspect-ratio: 1 / 1;
  z-index: 3;
  animation: emblemPulse 2.5s infinite alternate ease-in-out;
}

@keyframes fireFlicker {
  0% {
    background: radial-gradient(
      circle at center,
      #9e4b00 0%,
      #220b00 80%,
      #0a0300 100%
    );
  }
  100% {
    background: radial-gradient(
      circle at center,
      #c25a00 0%,
      #300f00 75%,
      #0a0300 100%
    );
  }
}

@keyframes emblemPulse {
  0% {
    filter: drop-shadow(0 0 10px rgba(255, 180, 0, 0.4));
    opacity: 0.85;
  }
  100% {
    filter: drop-shadow(0 0 30px rgba(255, 180, 0, 0.9));
    opacity: 1;
  }
}

@keyframes cloudDrift {
  0% {
    transform: translate(0%, 0%) rotate(0deg) scale(2);
  }
  100% {
    transform: translate(-10%, -5%) rotate(2deg) scale(2.2);
  }
}

@keyframes cloudDriftFast {
  0% {
    transform: translate(-5%, -5%) rotate(-1deg) scale(1);
  }
  100% {
    transform: translate(5%, 5%) rotate(1deg) scale(1.1);
  }
}

/* Layer 1: Slow, large movements in the background */
.layer-bg {
  opacity: 0.15;
  transform: scale(2);
  animation: cloudDrift 90s linear infinite alternate;
}

/* Layer 2: Faster, sharper movements in the foreground */
.layer-fg {
  opacity: 0.25;
  background-blend-mode: overlay;
  animation: cloudDriftFast 50s linear infinite alternate-reverse;
}

/* The dark horizontal band cutting through the center */
.fire-horizon-band {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 18vh; /* Scales with the screen height */
  transform: translateY(-50%);

  /* Dark semi-transparent core with faded edges */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 20%,
    rgba(0, 0, 0, 0.8) 50%,
    rgba(0, 0, 0, 0.6) 80%,
    rgba(0, 0, 0, 0) 100%
  );

  /* Subtle orange horizontal lines bounding the band */
  border-top: 1px solid rgba(255, 150, 0, 0.1);
  border-bottom: 1px solid rgba(255, 150, 0, 0.1);
  z-index: 2;
}

/* The Emblem Container */
.fire-emblem-container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38vh; /* Scales size based on monitor height */
  height: 38vh;
  z-index: 3;

  /* Faint drop shadow behind the whole emblem to separate it from the band */
  filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.8));
}

/* --- Fire Screen Animations --- */
@keyframes cloudDrift {
  0% {
    transform: translate(0%, 0%) rotate(0deg) scale(2);
  }
  100% {
    transform: translate(-10%, -5%) rotate(2deg) scale(2.2);
  }
}

@keyframes cloudDriftFast {
  0% {
    transform: translate(-5%, -5%) rotate(-1deg) scale(1);
  }
  100% {
    transform: translate(5%, 5%) rotate(1deg) scale(1.1);
  }
}

/* Ensure state logic remains intact */
/* --- THE STATE MACHINE LOGIC --- */

/* State 1: Idle (Fire Screen) */
.state-idle #boot-screen,
.state-idle #os-desktop,
.state-idle #loading-bar-container,
.state-idle .layout-container,
.state-idle .ui-footer {
  opacity: 0;
  pointer-events: none;
  visibility: hidden; /* Force-hides to prevent layout collision */
}

/* State 2: Booting */
.state-boot #fire-screen,
.state-boot #os-desktop,
.state-boot #loading-bar-container,
.state-boot .layout-container,
.state-boot .ui-footer {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}

/* State 3: Loading */
.state-loading #fire-screen,
.state-loading #boot-screen,
.state-loading .ui-footer {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.state-loading #os-desktop,
.state-loading #loading-bar-container {
  opacity: 1;
  visibility: visible;
}
.state-loading .layout-container {
  opacity: 0;
  transform: translateX(-20px);
  pointer-events: none;
}

/* State 4: Phase 1 (Left window loaded) */
.state-phase1 #boot-screen,
.state-phase1 #fire-screen,
.state-phase1 #loading-bar-container {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.state-phase1 #blog-scroll-container {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.state-phase1 #reader-window {
  opacity: 0;
  transform: translateX(20px);
  pointer-events: none;
}
.state-phase1 .ui-footer {
  opacity: 1; /* Hardware indicators turn on now */
  visibility: visible;
}

/* State 5: Ready (Both windows loaded) */
.state-ready #boot-screen,
.state-ready #fire-screen,
.state-ready #loading-bar-container {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
}
.state-ready #blog-scroll-container,
.state-ready #reader-window {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}
.state-ready .ui-footer {
  opacity: 1;
  visibility: visible;
}

@keyframes drift {
  from {
    transform: translate(-25%, -25%) rotate(0deg);
  }
  to {
    transform: translate(-10%, -10%) rotate(5deg);
  }
}