@import"https://fonts.googleapis.com/css2?family=Kode+Mono:wght@500;600;700&family=Sometype+Mono:wght@400;500;700&display=swap";

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --spacing: .25rem;
  
  --font-display: "Kode Mono", monospace;
  --font-body: "Sometype Mono", ui-monospace, monospace;
  
  /* Original CMDORA COLORS */
  --color-terra: #334822;
  --color-grape: #d94a55;
  --color-die: #2b2620;
  --color-deep: #15120e;
  --color-cream: #c9c99f;
  --color-ink: #0e0d0a;
  --color-paper: #d8d7ae;
  --color-shade: #5c5b45;
  --color-face: #a5a57d;
  --color-space: #0c130a;

  /* MODIFIED COLORS: Overriding gold (orange) and sprout (green) to #CCFF00 Lime */
  --color-gold: #CCFF00;
  --color-sprout: #CCFF00;

  --leading-tight: 1.25;
}

*, :after, :before, ::backdrop {
  box-sizing: border-box;
  border: 0 solid;
  margin: 0;
  padding: 0;
}

html {
  background: var(--color-terra);
  font-family: var(--font-body);
}

body {
  background-color: var(--color-terra);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  overflow: hidden; /* Desktop is fixed */
}

::selection {
  background: var(--color-gold);
  color: var(--color-ink);
}

.font-display { font-weight: 700; font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* Components */
.bevel-out {
  background: linear-gradient(180deg, #d5d4ad 0%, var(--color-cream) 18%, #b7b78b 100%);
  color: var(--color-ink);
  border: 3px solid var(--color-ink);
  border-radius: 12px;
  box-shadow: inset 0 0 0 2px #ffffff24, 6px 6px #0e0d0a80;
}

.bevel-in {
  color: var(--color-ink);
  border: 2px solid var(--color-ink);
  background: #b9b98d;
  border-radius: 6px;
  box-shadow: inset 2px 2px #0e0d0a24;
}

.bevel-in-d {
  background: #0c0a08;
  border: 2px solid #050403;
  border-radius: 6px;
  box-shadow: inset 2px 2px rgba(204, 255, 0, 0.08); /* slight lime shadow for depth */
  color: #d8d7ae;
}

.btn95 {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 4);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: var(--leading-tight);
  user-select: none;
  background: linear-gradient(180deg, #d9ff33 0%, var(--color-gold) 50%, #99cc00 100%);
  color: var(--color-ink);
  border: 3px solid var(--color-ink);
  border-radius: 10px;
  box-shadow: 3px 3px #0e0d0a80;
  transition: transform .12s ease-out, box-shadow .12s ease-out;
}

.btn95:hover { background: var(--color-die); color: var(--color-cream); }
.btn95:active { box-shadow: none; transform: translate(3px,3px); }
.btn95[disabled] { pointer-events: none; opacity: .4; }

.btn95-d {
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  padding: var(--spacing) calc(var(--spacing) * 3);
  font-family: var(--font-display);
  font-size: 12px;
  line-height: var(--leading-tight);
  user-select: none;
  color: #d8d7ae;
  background: #2b2620;
  border: 2px solid #050403;
  border-radius: 7px;
  box-shadow: 3px 3px #0000008c;
}
.btn95-d:active { box-shadow: none; transform: translate(2px,2px); }

.window {
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.28s ease;
  will-change: transform;
}

.window:hover {
  transform: scale(1.05) translateY(-4px) !important;
  z-index: 100 !important;
  box-shadow: inset 0 0 0 2px #ffffff40, 0 16px 36px rgba(0, 0, 0, 0.7), 0 0 24px rgba(204, 255, 0, 0.2) !important;
}

.titlebar {
  height: calc(var(--spacing) * 8);
  display: flex;
  align-items: center;
  gap: calc(var(--spacing) * 2);
  border-bottom: 3px solid var(--color-ink);
  padding: 0 calc(var(--spacing) * 3);
  background: linear-gradient(180deg, #3c352c 0%, var(--color-die) 100%);
  color: var(--color-cream);
  border-radius: 9px 9px 0 0;
  cursor: default;
  user-select: none;
}
.titlebar:active { cursor: default; }

.dots {
  background-image: repeating-linear-gradient(115deg, var(--color-gold) 0 10px, var(--color-die) 10px 13px);
  height: 7px;
  flex: 1;
}

.knob {
  background: var(--color-gold);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  width: 13px;
  height: 13px;
  display: inline-block;
  position: relative;
  box-shadow: inset -1px -1px #0e0d0a59;
}
.knob:after {
  content: "";
  background: var(--color-ink);
  border-radius: 1px;
  width: 2px;
  height: 4px;
  margin-left: -1px;
  position: absolute;
  top: 1px;
  left: 50%;
}

.led {
  background: var(--color-gold);
  border-radius: 999px;
  width: 8px;
  height: 8px;
  display: inline-block;
  box-shadow: 0 0 6px rgba(204,255,0,0.9);
  animation: 2.6s ease-in-out infinite led-breathe;
}

@keyframes led-breathe {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.win-d {
  color: #d8d7ae;
  background: #15120e;
  border: 3px solid #050403;
  border-radius: 10px;
  box-shadow: 5px 6px #0009;
}

.win-scroll-d::-webkit-scrollbar { width: 14px; height: 14px; }
.win-scroll-d::-webkit-scrollbar-track { background: #0c0a08; }
.win-scroll-d::-webkit-scrollbar-thumb { background: #2b2620; border: 2px solid #050403; border-radius: 7px; }

.text-gold { color: var(--color-gold) !important; }
.text-cream { color: var(--color-cream); }
.text-ink { color: var(--color-ink); }

.bg-terra { background-color: var(--color-terra); }
.bg-gold { background-color: var(--color-gold); }
.bg-die { background-color: var(--color-die); }

.text-up { color: var(--color-sprout); }
.text-dn { color: var(--color-grape); }

/* Layout classes */
.absolute { position: absolute; }
.fixed { position: fixed; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.w-full { width: 100%; }
.h-full { height: 100%; }
.w-5 { width: 20px; }
.h-5 { height: 20px; }
.w-8 { width: 32px; }
.h-8 { height: 32px; }
.w-10 { width: 40px; }
.h-10 { height: 40px; }
.w-12 { width: 48px; }
.h-12 { height: 48px; }
.w-14 { width: 56px; }
.h-14 { height: 56px; }
.p-0\.5 { padding: 2px; }
.p-1 { padding: 4px; }
.p-1\.5 { padding: 6px; }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }
.p-2 { padding: calc(var(--spacing) * 2); }
.p-3 { padding: calc(var(--spacing) * 3); }
.p-4 { padding: calc(var(--spacing) * 4); }
.p-6 { padding: calc(var(--spacing) * 6); }
.m-2 { margin: calc(var(--spacing) * 2); }
.mt-2 { margin-top: calc(var(--spacing) * 2); }
.mb-2 { margin-bottom: calc(var(--spacing) * 2); }
.mr-2 { margin-right: calc(var(--spacing) * 2); }
.gap-2 { gap: calc(var(--spacing) * 2); }
.text-sm { font-size: 13px; }
.text-lg { font-size: 1.125rem; }
.text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; }
.text-3xl { font-size: 1.875rem; }
.border-b { border-bottom: 1px solid var(--color-ink); }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }

/* Tables */
table { width: 100%; border-collapse: collapse; text-indent: 0; border-color: inherit; }
th, td { padding: 4px 8px; border-bottom: 1px solid rgba(14, 13, 10, 0.15); }
th { font-family: var(--font-display); font-weight: 700; color: var(--color-shade); font-size: 12px; }

/* Desktop Background Decoration (Optional, like cmdora) */
.checker {
  background-image: radial-gradient(70% 55% at 18% 20%, rgba(204,255,0,0.1), transparent 65%), radial-gradient(60% 50% at 84% 78%, rgba(201,201,159,0.1), transparent 62%);
}

.window {
  box-shadow: 10px 10px rgba(0,0,0,0.4);
}

/* ─── AGENT PAGE STYLES ─── */
.titlebar-striped {
  background: repeating-linear-gradient(45deg, var(--color-gold) 0, var(--color-gold) 10px, var(--color-die) 10px, var(--color-die) 20px);
  border-bottom: 3px solid var(--color-ink);
  height: calc(var(--spacing) * 8);
  border-radius: 9px 9px 0 0;
  display: flex;
  align-items: center;
  padding: 0 calc(var(--spacing) * 3);
  justify-content: space-between;
}

.titlebar-striped .led {
  background: var(--color-die);
  box-shadow: none;
}

.bg-scanline {
  background-color: var(--color-paper);
  background-image: linear-gradient(0deg, rgba(14, 13, 10, 0.05) 50%, transparent 50%);
  background-size: 100% 4px;
}

.pill-nav {
  background: var(--color-die);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  padding: 4px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-face);
}
.pill-nav a {
  color: var(--color-face);
  text-decoration: none;
  text-transform: uppercase;
}
.pill-nav a:hover {
  color: var(--color-cream);
}

.pill-btn {
  background: var(--color-die);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  padding: 4px 16px;
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-cream);
  cursor: pointer;
  box-shadow: 2px 2px #0e0d0a80;
  text-transform: uppercase;
  text-decoration: none;
}
.pill-btn:active {
  box-shadow: none;
  transform: translate(2px,2px);
}
.pill-btn-gold {
  background: var(--color-gold);
  color: var(--color-ink);
  font-weight: 700;
}

/* ─── MOBILE RESPONSIVE POLISH (<= 768px) ─── */
@media (max-width: 768px) {
  html, body {
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh;
  }

  #root {
    position: relative !important;
    height: auto !important;
    min-height: 100vh;
    overflow-y: auto !important;
    padding: 12px !important;
    display: flex;
    flex-direction: column;
  }

  #bg-cmd-text {
    font-size: 11px !important;
    line-height: 1.3 !important;
    padding: 8px !important;
    opacity: 0.25 !important;
  }

  .desktop-icons {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex-direction: row !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    z-index: 100 !important;
  }

  .window {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 16px 0 !important;
    z-index: 10 !important;
    box-shadow: 4px 4px rgba(0,0,0,0.4) !important;
  }

  .agent-grid {
    flex-direction: column !important;
    gap: 16px !important;
  }

  .agent-standing-orders {
    width: 100% !important;
  }

  .agent-header-title {
    font-size: 2rem !important;
    line-height: 1.2 !important;
  }

  .titlebar, .titlebar-striped {
    cursor: default !important;
    padding: 0 8px !important;
  }

  th, td {
    padding: 4px 4px !important;
    font-size: 12px !important;
  }

  .text-3xl {
    font-size: 1.5rem !important;
  }
}

/* ─── LOGO & BRANDING ENHANCEMENTS ─── */
.logo-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1e1a14 0%, #0e0d0a 100%);
  border: 2px solid var(--color-gold);
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(204, 255, 0, 0.25), inset 0 0 8px rgba(0, 0, 0, 0.8), 3px 3px 0px #0e0d0a;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo-badge:hover {
  transform: translateY(-2px) scale(1.05);
  border-color: #eeff66;
  box-shadow: 0 0 20px rgba(204, 255, 0, 0.5), inset 0 0 10px rgba(204, 255, 0, 0.15), 4px 4px 0px #0e0d0a;
}

.logo-badge img, .logo-badge svg {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 0 4px rgba(204, 255, 0, 0.4));
  transition: filter 0.25s ease;
}

.logo-img-fit {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.logo-badge:hover img, .logo-badge:hover svg {
  filter: drop-shadow(0 0 10px rgba(204, 255, 0, 0.9));
}

.logo-badge::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: linear-gradient(180deg, rgba(204,255,0,0.08) 0%, transparent 60%);
  pointer-events: none;
}

/* Desktop Icon Styling */
.desktop-icon-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 86px;
  text-align: center;
  cursor: pointer;
  user-select: none;
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.desktop-icon-btn:hover {
  transform: scale(1.12) translateY(-4px);
}

.desktop-icon-btn:hover .desktop-icon-label {
  color: var(--color-gold);
  text-shadow: 0 0 8px rgba(204, 255, 0, 0.6), 2px 2px #0a0d08;
}

.desktop-icon-label {
  margin-top: 6px;
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.5px;
  color: var(--color-cream);
  text-shadow: 2px 2px #0a0d08;
  transition: all 0.2s ease;
}

/* Top Station Brand Bar */
.station-header-bar {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 12px 6px 20px;
  background: rgba(43, 38, 32, 0.92);
  backdrop-filter: blur(8px);
  border: 2px solid var(--color-ink);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(204, 255, 0, 0.3), 0 8px 24px rgba(0,0,0,0.6);
  font-family: var(--font-display);
  color: var(--color-cream);
  white-space: nowrap;
}

.station-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.station-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-gold);
  letter-spacing: 1.5px;
  text-shadow: 0 0 8px rgba(204, 255, 0, 0.5);
}

.station-tag {
  font-size: 10px;
  padding: 2px 8px;
  background: var(--color-deep);
  border: 1px solid var(--color-shade);
  border-radius: 4px;
  color: var(--color-face);
  letter-spacing: 0.5px;
}

/* Social X Button */
.social-x-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: rgba(14, 13, 10, 0.75);
  border: 1.5px solid rgba(204, 255, 0, 0.35);
  border-radius: 8px;
  color: var(--color-gold);
  text-decoration: none;
  backdrop-filter: blur(8px);
  box-shadow: 0 0 10px rgba(204, 255, 0, 0.08);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  flex-shrink: 0;
}

.social-x-btn:hover {
  background: rgba(204, 255, 0, 0.18);
  border-color: var(--color-gold);
  color: #ffffff;
  transform: scale(1.1) translateY(-1px);
  box-shadow: 0 0 16px rgba(204, 255, 0, 0.5);
}

.logo-glow-pulse {
  animation: logoGlowPulse 3s infinite ease-in-out;
}

@keyframes logoGlowPulse {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(204, 255, 0, 0.4)); }
  50% { filter: drop-shadow(0 0 12px rgba(204, 255, 0, 0.9)); }
}

/* ─── BLINKING EYES MASCOT ANIMATION ─── */
.mascot-eye {
  transform-origin: 50% 50%;
  transform-box: fill-box;
  animation: eyeBlink 3.6s infinite ease-in-out;
}

@keyframes eyeBlink {
  0%, 42%, 46%, 90%, 94%, 100% {
    transform: scaleY(1);
  }
  44%, 92% {
    transform: scaleY(0.08);
  }
}

.mascot-container {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
}

.mascot-container:hover {
  transform: scale(1.08) translateY(-6px);
}

.mascot-container:hover .mascot-eye {
  animation-duration: 1.5s;
}

/* CRT Mascot TV Emblem for Agent Page */
.crt-emblem-frame {
  position: relative;
  width: 84px;
  height: 74px;
  background: linear-gradient(145deg, #3c352c 0%, #1c1813 100%);
  border: 3px solid var(--color-ink);
  border-radius: 14px;
  box-shadow: inset 0 0 0 2px rgba(204, 255, 0, 0.25), 4px 4px 0 #0e0d0a;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px;
}

.crt-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #080705;
  border: 2px solid #000;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.9);
}

.crt-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 3px, 6px 100%;
  pointer-events: none;
  z-index: 2;
}

.crt-antenna {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 14px;
  background: var(--color-ink);
  border-radius: 2px;
}

.crt-antenna::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -3px;
  width: 10px;
  height: 10px;
  background: var(--color-gold);
  border: 2px solid var(--color-ink);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--color-gold);
}

/* ─── MOBILE RESPONSIVE LAYOUT ─── */
@media (max-width: 768px) {
  body {
    overflow-y: auto !important;
  }
  
  #root {
    position: relative !important;
    min-height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: 80px 16px 24px 16px;
    align-items: center;
  }

  .station-header-bar {
    position: fixed;
    top: 8px;
    left: 8px;
    right: 8px;
    width: auto;
    padding: 6px 12px;
    gap: 12px;
    z-index: 100;
  }

  .station-title {
    font-size: 13px;
  }
  
  .station-tag {
    display: none; /* Hide tag on small screens to save space */
  }

  .desktop-icons {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    flex-direction: row !important;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
    gap: 20px;
  }

  .window {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 24px;
    transform: none !important;
    box-shadow: 4px 4px rgba(0,0,0,0.4) !important; /* Smaller shadow */
  }
  
  /* Agent page specific fixes */
  .max-w-\[1000px\] .flex.gap-6 {
    flex-direction: column !important;
  }
  
  [style*="width: 320px"], 
  [style*="width: 340px"], 
  [style*="width: 400px"], 
  [style*="width: 520px"] {
    width: 100% !important;
  }

  /* Chat display adjust */
  .bevel-in-d {
    height: auto !important;
    min-height: 250px;
  }
}

/* ─── TERMINAL & INPUT RESET (Fixes white block background on Mobile/Safari) ─── */
input,
input[type="text"],
#terminal-input,
#terminal-input-m,
#agent-input {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  color: #c9c99f !important;
  font-family: var(--font-body), "Sometype Mono", monospace !important;
  font-size: 14px !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  caret-color: #CCFF00 !important;
}

input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active,
#terminal-input:-webkit-autofill,
#terminal-input-m:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #0c0a08 inset !important;
  -webkit-text-fill-color: #c9c99f !important;
  transition: background-color 5000s ease-in-out 0s;
}

input:focus,
#terminal-input:focus,
#terminal-input-m:focus,
#agent-input:focus {
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}