/* MAXIMUM CHAOS CSS v5 - ANXIETY INDUCING NIGHTMARE */
@import url('https://fonts.googleapis.com/css2?family=Shantell+Sans:ital,wght@0,300..800;1,300..800&family=Permanent+Marker&family=Pixelify+Sans:wght@400..700&display=swap');

* {
  cursor: url("images/cursor.png") 16 16, auto !important;
}

body {
  background: #e0e0e0;
  font-family: 'Shantell Sans', 'Comic Sans MS', cursive;
  color: #000;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* COMIC SANS */
.comic-sans {
  font-family: 'Shantell Sans', 'Comic Sans MS', cursive !important;
}

/* ===========================================
   CURSOR TRAIL - RAINBOW SPARKLES
   =========================================== */

.cursor-trail {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  font-size: 20px;
  transition: opacity 0.3s, transform 0.3s;
  animation: sparkle 0.5s ease-out;
}

@keyframes sparkle {
  0% { transform: scale(1) rotate(0deg); opacity: 1; }
  100% { transform: scale(0) rotate(180deg); opacity: 0; }
}

/* ===========================================
   MATRIX RAIN BACKGROUND
   =========================================== */

.matrix-rain {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  opacity: 0.1;
  overflow: hidden;
}

.matrix-column {
  position: absolute;
  top: -100%;
  font-family: 'Pixelify Sans', monospace;
  font-size: 14px;
  color: #cf7a6b;
  writing-mode: vertical-rl;
  animation: matrix-fall 4s linear infinite;
}

@keyframes matrix-fall {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* ===========================================
   FALLING ELEMENTS
   =========================================== */

.falling-element {
  position: fixed;
  top: -50px;
  font-size: 30px;
  pointer-events: none;
  z-index: 50;
  animation: fall-down 5s linear forwards;
}

@keyframes fall-down {
  0% { 
    top: -50px; 
    transform: rotate(0deg) translateX(0);
    opacity: 1;
  }
  100% { 
    top: 100vh; 
    transform: rotate(720deg) translateX(100px);
    opacity: 0;
  }
}

/* ===========================================
   FAKE BSOD
   =========================================== */

.bsod-full {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0078d7;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Segoe UI', sans-serif;
  color: white;
}

.bsod-content {
  max-width: 800px;
  padding: 50px;
}

.bsod-content h1 {
  font-size: 120px;
  margin-bottom: 20px;
}

.bsod-jk {
  margin-top: 30px;
  font-size: 20px;
  color: #c9954a;
}

/* ===========================================
   BREAKING NEWS TICKER
   =========================================== */

.breaking-news-ticker {
  background: linear-gradient(90deg, #cc0000, #990000);
  color: white;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 15px;
  overflow: hidden;
  border-bottom: 3px solid #000;
  margin-bottom: 10px;
}

.breaking-label {
  background: #fff;
  color: #cc0000;
  padding: 5px 15px;
  font-weight: bold;
  font-family: 'Pixelify Sans', monospace;
  flex-shrink: 0;
}

.news-scroll {
  overflow: hidden;
  white-space: nowrap;
  flex: 1;
}

.news-scroll span {
  display: inline-block;
  animation: news-marquee 20s linear infinite;
  font-family: 'Pixelify Sans', monospace;
  font-size: 18px;
}

@keyframes news-marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

/* ===========================================
   SCANLINES
   =========================================== */

.scanlines {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.03),
    rgba(0, 0, 0, 0.03) 1px,
    transparent 1px,
    transparent 2px
  );
}

/* ===========================================
   STATIC NOISE OVERLAY
   =========================================== */

.static-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9997;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23noise)'/%3E%3C/svg%3E");
  animation: static-flicker 0.1s infinite;
}

@keyframes static-flicker {
  0%, 100% { opacity: 0.02; }
  50% { opacity: 0.04; }
}

/* ===========================================
   VIRUS BANNER
   =========================================== */

.virus-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #8f2a2a;
  color: white;
  padding: 10px 20px;
  text-align: center;
  z-index: 10002;
  font-weight: bold;
  font-size: 14px;
  border-bottom: 3px solid #000;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.virus-close {
  background: #fff;
  color: #000;
  border: 2px outset #ccc;
  padding: 2px 10px;
  cursor: pointer;
  font-size: 12px;
}

/* ===========================================
   XP ERROR POPUP
   =========================================== */

.xp-error-popup {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  min-width: 400px;
  background: #ece9d8;
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 4px 4px 10px rgba(0,0,0,0.3);
}

.xp-title-bar {
  background: linear-gradient(180deg, #0a246a 0%, #a6caf0 8%, #0a246a 93%);
  color: white;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.xp-buttons {
  display: flex;
  gap: 2px;
}

.xp-buttons button {
  width: 21px;
  height: 21px;
  font-size: 12px;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  border: 1px solid #404040;
  cursor: pointer;
}

.xp-content {
  padding: 20px;
  display: flex;
  gap: 20px;
  background: #ece9d8;
}

.xp-icon {
  font-size: 48px;
}

.xp-message {
  flex: 1;
  font-size: 12px;
}

.xp-buttons-row {
  background: #ece9d8;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
  border-top: 1px solid #fff;
}

.xp-buttons-row button {
  min-width: 75px;
  padding: 5px 20px;
  background: linear-gradient(180deg, #fff 0%, #ece9d8 100%);
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  font-size: 12px;
  cursor: pointer;
}

/* ===========================================
   NAVIGATION
   =========================================== */

.chaos-nav {
  position: relative;
  padding: 10px;
  border-bottom: 5px solid #000;
  overflow: hidden;
}

.nav-bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.nav-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.nav-header-text {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 
    0 0 5px #a63a3f,
    0 0 20px #a63a3f,
    0 0 40px #a63a3f,
    3px 3px 0 #000;
  padding: 10px 0;
}

.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
}

.chaos-nav a {
  background: #000;
  color: #cf7a6b;
  padding: 8px 15px;
  text-decoration: none;
  font-family: 'Pixelify Sans', monospace;
  font-size: 16px;
  border: 2px solid #cf7a6b;
  transition: all 0.1s;
}

.chaos-nav a:hover {
  background: #cf7a6b;
  color: #000;
  transform: scale(1.1) rotate(-2deg);
}

.nav-logo {
  font-size: 24px !important;
}

/* ===========================================
   MARQUEES
   =========================================== */

.marquee {
  background: #a63a3f;
  color: #fff;
  padding: 8px;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 3px solid #000;
}

.marquee-content {
  display: inline-block;
  animation: scroll-left 20s linear infinite;
  font-family: 'Pixelify Sans', monospace;
  font-size: 18px;
}

@keyframes scroll-left {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes scroll-left-instant {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}

.marquee-fast {
  overflow: hidden;
  white-space: nowrap;
  padding: 5px;
}

.marquee-fast span {
  display: inline-block;
  animation: scroll-left 10s linear infinite;
}

.marquee-slow {
  overflow: hidden;
  white-space: nowrap;
  padding: 5px;
}

.marquee-slow span {
  display: inline-block;
  animation: scroll-left 40s linear infinite;
}

.marquee-reverse span {
  animation-direction: reverse;
}

/* ===========================================
   GLITCH EFFECTS
   =========================================== */

.glitch {
  animation: glitch 0.3s infinite;
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

.glitch-intense {
  animation: glitch-intense 0.1s infinite;
  text-shadow: 
    2px 0 #a63a3f,
    -2px 0 #d9a08c;
}

@keyframes glitch-intense {
  0%, 100% { transform: translate(0); text-shadow: 2px 0 #a63a3f, -2px 0 #d9a08c; }
  25% { transform: translate(-3px, 3px); text-shadow: -2px 0 #a63a3f, 2px 0 #d9a08c; }
  50% { transform: translate(3px, -3px); text-shadow: 2px 0 #d9a08c, -2px 0 #a63a3f; }
  75% { transform: translate(-3px, -3px); text-shadow: -2px 0 #d9a08c, 2px 0 #a63a3f; }
}

/* ===========================================
   BLINK & SHAKE
   =========================================== */

.blink {
  animation: blink 1s step-end infinite;
}

.blink-fast {
  animation: blink 0.3s step-end infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

.shake {
  animation: shake 0.1s infinite;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

/* DISABLED - shake on hover removed for readability */
.shake-hover:hover {
  /* animation: shake 0.1s infinite; */
}

/* ===========================================
   NEON COLORS
   =========================================== */

.neon-pink { color: #a63a3f; text-shadow: 0 0 5px #a63a3f; }
.neon-green { color: #cf7a6b; text-shadow: 0 0 5px #cf7a6b; }
.neon-cyan { color: #d9a08c; text-shadow: 0 0 5px #d9a08c; }
.neon-red { color: #8f2a2a; text-shadow: 0 0 10px #8f2a2a; }

.rainbow {
  animation: rainbow 2s linear infinite;
}

@keyframes rainbow {
  0% { color: #8f2a2a; }
  16% { color: #b0763a; }
  33% { color: #c9954a; }
  50% { color: #cf7a6b; }
  66% { color: #6f7f96; }
  83% { color: #6a4a7a; }
  100% { color: #8f2a2a; }
}

.rgb-split {
  text-shadow: 
    -2px 0 #8f2a2a,
    2px 0 #d9a08c;
}

/* ===========================================
   FLOATING ELEMENTS
   =========================================== */

.floating-element {
  position: fixed;
  pointer-events: none;
  opacity: 0.7;
  z-index: 100;
  animation: float-around 10s ease-in-out infinite;
}

@keyframes float-around {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(10px, -10px) rotate(5deg); }
  50% { transform: translate(-5px, 5px) rotate(-5deg); }
  75% { transform: translate(-10px, -5px) rotate(3deg); }
}

/* ===========================================
   CHAOS BOXES
   =========================================== */

.chaos-box {
  background: linear-gradient(135deg, #000 0%, #222 100%);
  border: 1px solid #444;
  padding: 12px;
  margin: 0;
  color: #fff;
}

.chaos-box h2, .chaos-box h3, .chaos-box h4 {
  color: #fff;
}

.chaos-box p, .chaos-box li, .chaos-box td {
  color: #ddd;
}

.chaos-box-pink {
  border-color: #444;
}

.chaos-box-green {
  border-color: #444;
}

.chaos-box-blue {
  border-color: #444;
}

/* Glyph text 1 degree tilt - only glyph strings get this rotation */
.glyph-tilt {
  display: inline-block;
  transform: rotate(1deg);
  transform-origin: center center;
}

/* Terminal style boxes */
.terminal-box {
  background: #0a0a0a;
  border: 1px solid #cf7a6b;
  font-family: 'Pixelify Sans', monospace;
}

.terminal-section {
  background: #000;
}

/* ===========================================
   BUTTONS
   =========================================== */

.chaos-btn {
  /* inline-block matters: as a bare inline element an <a> lets its vertical
     padding spill outside the line box and the top of the button gets clipped */
  display: inline-block;
  vertical-align: middle;
  text-decoration: none;
  background: linear-gradient(180deg, #a63a3f 0%, #71262a 100%);
  color: #fff;
  border: 3px solid #fff;
  padding: 10px 25px;
  margin: 4px 0;
  font-family: 'Pixelify Sans', monospace;
  font-size: 18px;
  line-height: 1.2;
  cursor: pointer;
  text-shadow: 2px 2px #000;
  box-shadow: 4px 4px 0 #000;
  transition: all 0.1s;
}

.chaos-btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.chaos-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #000;
}

/* ===========================================
   PROGRESS BARS
   =========================================== */

.progress-container {
  margin: 15px 0;
}

.progress-bar {
  background: #333;
  border: 2px solid #fff;
  height: 25px;
  position: relative;
  overflow: hidden;
}

.progress-fill {
  background: linear-gradient(90deg, #a63a3f, #d9a08c, #a63a3f);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #000;
  font-weight: bold;
  font-family: 'Pixelify Sans', monospace;
  animation: progress-glow 1s infinite;
}

@keyframes progress-glow {
  0%, 100% { box-shadow: 0 0 5px #a63a3f; }
  50% { box-shadow: 0 0 20px #d9a08c; }
}

.progress-overflow {
  background: linear-gradient(90deg, #8f2a2a, #b0763a, #8f2a2a);
}

/* ===========================================
   GUESTBOOK
   =========================================== */

.guestbook-section {
  background: linear-gradient(180deg, #000080 0%, #000040 100%);
  border: 5px ridge #c0c0c0;
  padding: 15px;
  margin: 8px;
  color: #fff;
}

.guestbook-section h2, .guestbook-section h3, .guestbook-section p {
  color: #fff;
}

.guestbook-input {
  background: #fff;
  border: 2px inset #888;
  padding: 5px;
  font-family: 'Shantell Sans', cursive;
  width: 100%;
  box-sizing: border-box;
}

.guestbook-btn {
  background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%);
  border: 3px outset #c0c0c0;
  padding: 8px 20px;
  font-family: 'Shantell Sans', cursive;
  font-weight: bold;
  cursor: pointer;
}

.guestbook-entry {
  background: #ffffcc;
  border: 1px solid #000;
  padding: 10px;
  margin: 10px 0;
  font-size: 14px;
}

/* ===========================================
   TABLES
   =========================================== */

.chaos-table {
  width: 100%;
  border-collapse: collapse;
  background: #111;
}

.chaos-table th,
.chaos-table td {
  border: 1px solid #444;
  padding: 10px;
  text-align: left;
  color: #fff;
}

.chaos-table th {
  background: linear-gradient(180deg, #333 0%, #222 100%);
  color: #fff;
}

.chaos-table tr:hover {
  background: rgba(166, 58, 63, 0.2);
}

/* ===========================================
   VISITOR COUNTER
   =========================================== */

.visitor-section {
  text-align: center;
  padding: 12px;
  margin: 8px;
  background: linear-gradient(180deg, #000 0%, #111 100%);
  border: 1px solid #444;
  color: #fff;
}

.visitor-section h2, .visitor-section p {
  color: #fff;
}

.hit-counter {
  font-family: 'Pixelify Sans', monospace;
  font-size: 24px;
  background: #000;
  padding: 10px;
  display: inline-block;
  border: 2px inset #333;
}

.counter-digit {
  background: #001100;
  color: #cf7a6b;
  padding: 5px 8px;
  margin: 0 2px;
  text-shadow: 0 0 5px #cf7a6b;
}

/* ===========================================
   WEBRING
   =========================================== */

.webring {
  background: #c0c0c0;
  border: 3px ridge #fff;
  padding: 10px;
  text-align: center;
  margin: 8px;
}

.webring-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin: 10px 0;
}

.webring-btn {
  background: linear-gradient(180deg, #fff 0%, #c0c0c0 100%);
  border: 2px outset #fff;
  padding: 5px 15px;
  text-decoration: none;
  color: #000;
  font-family: 'Shantell Sans', cursive;
}

/* ===========================================
   BROWSER BADGES
   =========================================== */

.browser-badges {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
  margin: 20px;
}

.badge {
  background: #c0c0c0;
  border: 2px outset #fff;
  padding: 10px;
  font-size: 10px;
  text-align: center;
  font-family: 'Shantell Sans', cursive;
}

/* ===========================================
   MISC
   =========================================== */

.under-construction {
  background: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #c9954a 10px,
    #c9954a 20px
  );
  padding: 15px;
  text-align: center;
  border: 3px solid #000;
}

.countdown-container {
  background: #000;
  border: 1px solid #444;
  padding: 20px;
  display: inline-block;
  margin: 20px;
  color: #fff;
}

.countdown-display {
  font-family: 'Pixelify Sans', monospace;
  font-size: 48px;
  color: #cf7a6b;
  text-shadow: 0 0 20px #cf7a6b;
}

.fake-link {
  color: #0000ff;
  text-decoration: underline;
  cursor: pointer;
}

.fake-link:hover {
  color: #8f2a2a;
}

.vhs-effect {
  position: relative;
}

.vhs-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  pointer-events: none;
}

.agent-thoughts-box {
  background: linear-gradient(180deg, #111 0%, #000 100%);
  border: 1px solid #444;
  padding: 15px;
  margin: 8px auto;
  max-width: 500px;
  color: #fff;
}

.agent-thoughts-box h3, .agent-thoughts-box p {
  color: #fff;
}

.thought-bubble {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #444;
  padding: 15px;
  border-radius: 10px;
  font-style: italic;
}

.classified-section {
  background: #1a1a1a;
  border: 3px solid #8f2a2a;
  padding: 15px;
  margin: 8px;
  color: #fff;
}

.classified-section h2, .classified-section h3, .classified-section p {
  color: #fff;
}

.classified-doc {
  background: #0a0a0a;
  border: 1px solid #333;
  padding: 15px;
  margin: 10px 0;
  font-family: 'Pixelify Sans', monospace;
}

.classified-label {
  background: #8f2a2a;
  color: #fff;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: bold;
  margin-right: 10px;
}

.redacted-item {
  padding: 10px;
  margin: 5px 0;
  cursor: pointer;
}

.redacted {
  background: #000;
  color: #000;
  padding: 3px 5px;
}

.revealed {
  background: transparent;
  color: #cf7a6b;
  font-weight: bold;
}

.spin {
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.float {
  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

.loading-spinner {
  width: 30px;
  height: 30px;
  border: 4px solid #333;
  border-top: 4px solid #666;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.eternal-loader {
  text-align: center;
  padding: 15px;
}

.construction-banner {
  background: repeating-linear-gradient(
    45deg,
    #000,
    #000 10px,
    #c9954a 10px,
    #c9954a 20px
  );
  padding: 10px;
  text-align: center;
  border: 3px solid #000;
  margin: 10px 0;
}

.sound-button-container {
  text-align: center;
  margin: 15px;
}

.sound-button {
  background: linear-gradient(180deg, #444 0%, #222 100%);
  color: #fff;
  border: 3px outset #666;
  padding: 10px 30px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 18px;
  cursor: pointer;
}

.midi-player {
  text-align: center;
  margin: 15px;
}

.midi-btn {
  background: linear-gradient(180deg, #c0c0c0 0%, #808080 100%);
  border: 3px outset #c0c0c0;
  padding: 8px 20px;
  font-family: 'Shantell Sans', cursive;
  cursor: pointer;
}

.danger-zone {
  background: linear-gradient(90deg, #8f2a2a, #880000, #8f2a2a);
  animation: danger-pulse 0.5s infinite;
}

@keyframes danger-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.emergency-blink {
  animation: emergency 0.2s infinite;
}

@keyframes emergency {
  0%, 50% { opacity: 1; color: #8f2a2a; }
  51%, 100% { opacity: 1; color: #c9954a; }
}

.text-corrupt {
  animation: text-corrupt 0.5s infinite;
}

@keyframes text-corrupt {
  0%, 100% { opacity: 1; filter: none; }
  50% { opacity: 0.9; filter: blur(0.5px); }
}

.broken-img {
  background: #ccc;
  border: 2px solid #888;
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  text-align: center;
}

/* ===========================================
   FOOTER
   =========================================== */

.chaos-footer {
  background: linear-gradient(180deg, #000 0%, #111 100%);
  border-top: 1px solid #444;
  padding: 30px;
  text-align: center;
  color: #fff;
}

.visitor-counter {
  font-family: 'Pixelify Sans', monospace;
  font-size: 18px;
  color: #cf7a6b;
}

/* ===========================================
   TABLE CRIMES
   =========================================== */

.table-crime {
  border-collapse: separate;
  border-spacing: 5px;
  margin: 20px auto;
}

.table-crime-cell {
  padding: 15px;
  border: 3px outset #fff;
  text-align: center;
}

.flash-bg-slow {
  animation: flash-bg 2s infinite;
}

@keyframes flash-bg {
  0%, 100% { background: #c9954a; }
  50% { background: #a63a3f; }
}

.bounce-text {
  animation: bounce 0.5s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.fake-gif {
  width: 50px;
  height: 50px;
  background: linear-gradient(45deg, #a63a3f, #d9a08c);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  border: 2px solid #000;
}

.gif-bg-section {
  background: linear-gradient(45deg, #a63a3f, #d9a08c, #c9954a, #a63a3f);
  background-size: 400% 400%;
  animation: gradient-shift 3s ease infinite;
  padding: 15px;
  margin: 8px;
  position: relative;
}

@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.upside-down-section {
  transform: rotate(180deg);
  background: linear-gradient(180deg, #222 0%, #000 100%);
  border: 1px solid #444;
  padding: 15px;
  margin: 8px;
  color: #fff;
}

.upside-down-section h2, .upside-down-section p {
  color: #fff;
}

.wrong-aspect-ratio {
  background: #ccc;
  border: 2px solid #000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  overflow: hidden;
}

.fake-scroll-container {
  background: #fff;
  border: 2px inset #888;
  height: 150px;
  overflow-y: scroll;
  padding: 10px;
}

.broken-form input,
.broken-form textarea {
  width: 100%;
  margin: 5px 0;
  padding: 8px;
  border: 2px inset #888;
  font-family: 'Shantell Sans', cursive;
}

.button-outer {
  background: #c0c0c0;
  border: 3px outset #fff;
  padding: 20px;
  cursor: pointer;
}

.button-inner {
  background: #a63a3f;
  border: 2px outset #c9727a;
  padding: 10px;
  color: #fff;
  margin-top: 10px;
}

.typewriter-container {
  text-align: center;
  padding: 20px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 24px;
  color: #cf7a6b;
}

.cursor-blink {
  animation: blink 0.7s step-end infinite;
}

/* Random spin */
.random-spin {
  animation: random-spin 0.5s linear infinite;
}

@keyframes random-spin {
  0% { transform: rotate(0deg); }
  25% { transform: rotate(90deg); }
  50% { transform: rotate(180deg); }
  75% { transform: rotate(270deg); }
  100% { transform: rotate(360deg); }
}

.spin-box {
  display: inline-block;
  font-size: 40px;
  margin: 10px;
}

.spin-3d {
  animation: spin-3d 2s linear infinite;
}

@keyframes spin-3d {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

.overlap-zone {
  position: relative;
  height: 200px;
}

.overlap-text {
  position: absolute;
}

.text-1 { top: 20%; left: 10%; }
.text-2 { top: 30%; left: 30%; }
.text-3 { top: 40%; left: 50%; }
.text-4 { top: 50%; left: 20%; }
.text-5 { top: 60%; left: 60%; }

.vertical-marquee-container {
  height: 150px;
  overflow: hidden;
  background: #000;
  border: 1px solid #444;
  margin: 20px;
}

.vertical-marquee {
  animation: vertical-scroll 10s linear infinite;
}

.vertical-marquee span {
  display: block;
  padding: 10px;
  color: #cf7a6b;
  font-family: 'Pixelify Sans', monospace;
}

@keyframes vertical-scroll {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

/* Run away elements */
.run-away {
  transition: transform 0.1s;
}

/* ===========================================
   FULL-WIDTH GRID LAYOUTS
   =========================================== */

.two-column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 8px;
  margin: 8px;
}

.three-column-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 8px;
  margin: 8px;
}

.systems-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: 0;
}

.systems-grid .chaos-box {
  padding: 10px;
}

.systems-grid .chaos-box h4 {
  font-size: 11px;
}

.systems-grid .chaos-box p {
  font-size: 10px;
  margin: 4px 0;
}

.systems-grid .system-icon {
  width: 40px;
  margin-bottom: 6px;
}

.full-width-section {
  width: 100%;
  padding: 8px;
}

/* Make chaos boxes fill their grid cells */
.two-column-grid .chaos-box,
.three-column-grid .chaos-box,
.systems-grid .chaos-box {
  margin: 0;
  height: 100%;
}

.two-column-grid .agent-thoughts-box,
.two-column-grid .classified-section {
  margin: 0;
}

.three-column-grid .upside-down-section {
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .two-column-grid,
  .three-column-grid {
    grid-template-columns: 1fr;
  }
  
  .systems-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

/* ===========================================
   RESIDENT CHARACTER STYLES
   =========================================== */

/* Hero character */
.hero-character {
  margin-bottom: 20px;
}

.gt-hero {
  width: 200px;
  height: auto;
  filter: drop-shadow(0 0 20px #a63a3f) drop-shadow(0 0 40px #d9a08c);
  animation: hero-glow 2s ease-in-out infinite alternate;
}

@keyframes hero-glow {
  0% { filter: drop-shadow(0 0 20px #a63a3f) drop-shadow(0 0 40px #d9a08c); }
  100% { filter: drop-shadow(0 0 40px #d9a08c) drop-shadow(0 0 60px #a63a3f); }
}

/* Thinking character next to thoughts */
.thoughts-with-character {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.char-thinking {
  width: 80px;
  height: auto;
  flex-shrink: 0;
}

/* Side character for sections */
.section-with-character {
  display: flex;
  gap: 30px;
  align-items: flex-start;
}

.character-side {
  flex-shrink: 0;
  width: 120px;
}

.char-side {
  width: 100%;
  height: auto;
}

.content-side {
  flex: 1;
}

/* System icons */
.system-icon {
  width: 60px;
  height: auto;
  margin-bottom: 10px;
}

/* Guestbook characters */
.char-guestbook {
  width: 60px;
  height: auto;
}

/* Floating resident characters around the page */
.floating-chars {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}

.floating-char {
  position: absolute;
  width: 60px;
  height: auto;
  opacity: 0.6;
  animation: float-drift 20s ease-in-out infinite;
}

.fc-1 {
  top: 15%;
  left: 5%;
  animation-delay: 0s;
  filter: hue-rotate(0deg);
}

.fc-2 {
  top: 40%;
  right: 3%;
  animation-delay: -5s;
  filter: hue-rotate(60deg);
  transform: scaleX(-1);
}

.fc-3 {
  top: 70%;
  left: 8%;
  animation-delay: -10s;
  filter: hue-rotate(120deg);
}

.fc-4 {
  top: 25%;
  right: 10%;
  animation-delay: -15s;
  filter: hue-rotate(180deg);
  transform: scaleX(-1);
}

@keyframes float-drift {
  0%, 100% { 
    transform: translateY(0) rotate(0deg); 
    opacity: 0.6;
  }
  25% { 
    transform: translateY(-30px) rotate(10deg); 
    opacity: 0.8;
  }
  50% { 
    transform: translateY(0) rotate(0deg); 
    opacity: 0.6;
  }
  75% { 
    transform: translateY(30px) rotate(-10deg); 
    opacity: 0.8;
  }
}

/* Origin story layout */
.origin-layout {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.origin-layout > .chaos-box:first-child {
  flex: 0 0 70%;
}

.origin-layout > div:last-child {
  flex: 0 0 calc(30% - 15px);
}

/* Full width section helper */
.full-width-section {
  width: calc(100% + 40px);
  margin-left: -20px;
  padding: 0 20px;
}

/* Responsive - hide some floating on mobile */
@media (max-width: 768px) {
  .floating-char {
    width: 40px;
  }
  
  .fc-2, .fc-4 {
    display: none;
  }
  
  .gt-hero {
    width: 150px;
  }
  
  .section-with-character {
    flex-direction: column;
    align-items: center;
  }
  
  .character-side {
    width: 80px;
  }
  
  .thoughts-with-character {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  /* Origin layout responsive */
  .origin-layout {
    flex-direction: column;
  }
  
  .origin-layout > .chaos-box:first-child,
  .origin-layout > div:last-child {
    flex: 1 1 100%;
  }
  
  .origin-layout > div:last-child {
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .origin-layout > div:last-child > .chaos-box {
    flex: 1 1 calc(50% - 8px);
    min-width: 140px;
  }
}

/* ===========================================
   WORKFLOW DIAGRAM - SCROLLING CODE
   =========================================== */

.workflow-box {
  transition: all 0.3s;
}

.workflow-box:hover {
  transform: scale(1.05);
}

/* Terminal stream - continuous running text */
.terminal-stream {
  position: relative;
  overflow: hidden;
}

.terminal-scroll-1, .terminal-scroll-2, .terminal-scroll-3, .terminal-scroll-4 {
  animation: terminalScroll 6s linear infinite;
}

.terminal-scroll-2 {
  animation-delay: -1.5s;
}

.terminal-scroll-3 {
  animation-delay: -3s;
}

.terminal-scroll-4 {
  animation-delay: -4.5s;
}

@keyframes terminalScroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* Old code scroll (legacy) */
.code-scroll {
  position: relative;
  overflow: hidden;
}

.scroll-code, .scroll-code-2, .scroll-code-3, .scroll-code-4 {
  animation: scrollCode 4s linear infinite;
}

.scroll-code-2 {
  animation-delay: -1s;
}

.scroll-code-3 {
  animation-delay: -2s;
}

.scroll-code-4 {
  animation-delay: -3s;
}

@keyframes scrollCode {
  0% { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

.workflow-arrow {
  text-shadow: 0 0 10px currentColor;
}

/* ===========================================
   DVD BOUNCE ANIMATION - MASCOT
   =========================================== */

.dvd-bounce-container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.dvd-bounce {
  position: absolute;
  width: 100px;
  height: auto;
  animation: dvd-move-x 4s linear infinite alternate, dvd-move-y 3s linear infinite alternate;
  filter: drop-shadow(0 0 5px #a63a3f);
}

@keyframes dvd-move-x {
  0% { left: 0; }
  100% { left: calc(100% - 100px); }
}

@keyframes dvd-move-y {
  0% { top: 0; }
  100% { top: calc(100% - 100px); }
}

/* Color shift on "bounce" - cycles through colors */
.dvd-bounce {
  animation: dvd-move-x 4s linear infinite alternate, 
             dvd-move-y 3s linear infinite alternate,
             dvd-color-shift 7s steps(7) infinite;
}

@keyframes dvd-color-shift {
  0% { filter: drop-shadow(0 0 15px #8f2a2a) hue-rotate(0deg); }
  14% { filter: drop-shadow(0 0 15px #b0763a) hue-rotate(30deg); }
  28% { filter: drop-shadow(0 0 15px #c9954a) hue-rotate(60deg); }
  42% { filter: drop-shadow(0 0 15px #cf7a6b) hue-rotate(120deg); }
  57% { filter: drop-shadow(0 0 15px #d9a08c) hue-rotate(180deg); }
  71% { filter: drop-shadow(0 0 15px #6f7f96) hue-rotate(220deg); }
  85% { filter: drop-shadow(0 0 15px #a63a3f) hue-rotate(300deg); }
  100% { filter: drop-shadow(0 0 15px #8f2a2a) hue-rotate(360deg); }
}

/* ===========================================
   TWO COLUMN STICKY LAYOUT
   =========================================== */

.gt-layout {
  display: flex;
  gap: 0;
  align-items: flex-start;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.gt-left {
  flex: 1 1 65%;
  min-width: 0;
  padding: 8px;
  background: #c0c0c0;
  border-right: 2px solid #808080;
}

.gt-right {
  flex: 0 0 320px;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 10px;
  background: linear-gradient(180deg, #d0d0d0 0%, #c0c0c0 100%);
  border: 1px inset #808080;
}

/* VERTICAL GLYPH DIVIDER */
.vertical-divider {
  position: absolute;
  left: calc(65% - 2px);
  top: 0;
  bottom: 0;
  width: 16px;
  overflow: hidden;
  z-index: 100;
  pointer-events: none;
}

.vertical-text-scroll {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  font-family: 'Pixelify Sans', monospace;
  font-size: 12px;
  color: #000;
  text-shadow: none;
  animation: vertical-scroll-down 30s linear infinite;
}

@keyframes vertical-scroll-down {
  0% { top: -100%; }
  100% { top: 100%; }
}

/* Hide scrollbar but keep functionality */
.gt-right::-webkit-scrollbar {
  width: 4px;
}

.gt-right::-webkit-scrollbar-track {
  background: #111;
}

.gt-right::-webkit-scrollbar-thumb {
  background: #a63a3f;
  border-radius: 2px;
}

/* Right side boxes styling */
.gt-right .side-box {
  background: linear-gradient(135deg, #0a0a0a 0%, #111 100%);
  border: 1px solid #333;
  margin: 0 0 10px 0;
  padding: 10px;
  flex-shrink: 0;
}

.gt-right .side-box:last-child {
  margin-bottom: 0;
}

.gt-right .side-box h4 {
  color: #a63a3f;
  font-family: 'Pixelify Sans', monospace;
  font-size: 14px;
  margin-bottom: 8px;
  border-bottom: none;
  padding-bottom: 0;
}

/* Vertical border dividers between sections */
.vertical-border {
  height: 8px;
  margin: 0;
  background: linear-gradient(90deg, 
    transparent 0%, 
    transparent 10%,
    #a63a3f 10%,
    #a63a3f 12%,
    transparent 12%,
    transparent 88%,
    #d9a08c 88%,
    #d9a08c 90%,
    transparent 90%
  );
}

/* Glyph divider between sections - thinner, more subtle */
.glyph-divider {
  background: linear-gradient(90deg, transparent 5%, rgba(166,58,63,0.3) 20%, rgba(166,58,63,0.3) 80%, transparent 95%);
  padding: 3px 0;
  margin: 0;
  text-align: center;
  font-family: 'Pixelify Sans', monospace;
  font-size: 10px;
  color: #a63a3f;
  letter-spacing: 2px;
  overflow: hidden;
  white-space: nowrap;
}

.gt-right .side-box p,
.gt-right .side-box span,
.gt-right .side-box a,
.gt-right .side-box pre,
.gt-right .side-box blockquote,
.gt-right .side-box .thought-bubble,
.gt-right .side-box input,
.gt-right .side-box button,
.gt-right .side-box div {
  font-size: 13px;
  line-height: 1.5;
}

.gt-right .side-box input,
.gt-right .side-box button {
  box-sizing: border-box;
}

.gt-right .side-box p {
  color: #ccc;
}

/* Left column boxes - consistent spacing */
.gt-left .chaos-box,
.gt-left .terminal-section,
.gt-left .systems-grid,
.gt-left > div {
  margin-bottom: 8px;
}

.gt-left > div:last-child {
  margin-bottom: 0;
}

/* Responsive - stack on mobile */
@media (max-width: 900px) {
  .gt-layout {
    flex-direction: column;
  }
  
  .gt-right {
    position: relative;
    top: 0;
    flex: 1 1 100%;
    max-height: none;
    overflow-y: visible;
    flex-direction: row;
    flex-wrap: wrap;
  }
  
  .gt-right .side-box {
    flex: 1 1 calc(50% - 5px);
    min-width: 150px;
  }
}

@media (max-width: 900px) {
  .workflow-box {
    width: 140px !important;
    height: 120px !important;
  }
  
  .workflow-arrow {
    font-size: 18px !important;
    padding: 0 5px !important;
  }
}

/* MASCOT POPUP ANIMATIONS */
@keyframes mascotSplash {
  0% { 
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(5deg);
  }
  100% { 
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

@keyframes mascotBounce {
  0%, 100% { transform: translateY(0); }
  25% { transform: translateY(-20px) rotate(-5deg); }
  50% { transform: translateY(0) rotate(5deg); }
  75% { transform: translateY(-10px) rotate(-3deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* AESTHETIC UNICODE FONT STYLE */
.aesthetic-font {
  color: #888;
  letter-spacing: 1px;
  font-weight: bold;
}


/* ===========================================
   GOONERTEK HEADER BAR
   full-size banner with the links fitted beside it
   =========================================== */

.gt-header {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  position: relative;
  background-color: #0d0a0a;
  background-image: url("images/art/header-bg.jpg");
  background-size: cover;
  background-position: center;
  border-top: 2px solid #a63a3f;
  border-bottom: 2px solid #a63a3f;
  padding: 10px 14px;
}

.gt-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}

.gt-header > * { position: relative; z-index: 1; }

.gt-header .gt-banner {
  width: 660px;
  height: 220px;
  display: block;
  flex-shrink: 0;
  max-width: 100%;
}

.gt-header .gt-header-right {
  flex: 1 1 320px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.gt-header .gt-nav,
.gt-header .gt-coins {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.gt-header .gt-nav a {
  background: #000;
  color: #cf7a6b;
  padding: 8px 18px;
  text-decoration: none;
  font-family: 'Pixelify Sans', monospace;
  font-size: 20px;
  border: 2px solid #cf7a6b;
  transition: all 0.1s;
}

.gt-header .gt-nav a:hover {
  background: #cf7a6b;
  color: #000;
  transform: scale(1.1) rotate(-2deg);
}

.gt-header .gt-coins a,
.gt-header .gt-coins button {
  background: linear-gradient(180deg, #a63a3f 0%, #71262a 100%);
  color: #fff;
  border: 2px solid #fff;
  padding: 8px 18px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 20px;
  cursor: pointer;
  text-shadow: 2px 2px #000;
  box-shadow: 4px 4px 0 #000;
  text-decoration: none;
  transition: all 0.1s;
}

.gt-header .gt-coins a:hover,
.gt-header .gt-coins button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 6px 6px 0 #000;
}

.gt-header .gt-ca {
  background: #000 !important;
  border-color: #cf7a6b !important;
  color: #cf7a6b !important;
}

@media (max-width: 1024px) {
  .gt-header { justify-content: center; }
  .gt-header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, .55);
  pointer-events: none;
}

.gt-header > * { position: relative; z-index: 1; }

.gt-header .gt-banner { height: auto; }
  .gt-header .gt-header-right { align-items: center; }
}


/* ===========================================
   GOONERTEK TYPE IDENTITY
   sloppy hand-drawn body, marker headings, pixel mono
   =========================================== */

h1, h2, h3,
.nav-header-text,
.gt-header .gt-banner + * h2 {
  font-family: 'Permanent Marker', 'Shantell Sans', cursive;
  letter-spacing: 1px;
}

h4, h5, h6 {
  font-family: 'Shantell Sans', cursive;
  font-weight: 700;
}

body {
  font-weight: 500;
}

/* ===========================================
   JAPANESE INSERTS
   English carries the sentence, Japanese drops in
   here and there and glitches slightly
   =========================================== */

.jp {
  font-family: 'Pixelify Sans', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  color: #cf7a6b;
  letter-spacing: 1px;
  display: inline-block;
  position: relative;
  animation: jp-glitch 7s infinite steps(1);
}

@keyframes jp-glitch {
  0%, 88%, 100% { transform: translate(0, 0); text-shadow: none; opacity: 1; }
  89%  { transform: translate(-1px, 0);  text-shadow: 1px 0 #a63a3f, -1px 0 #d9a08c; }
  90%  { transform: translate(1px, -1px); text-shadow: -1px 0 #a63a3f, 1px 0 #d9a08c; opacity: .82; }
  91%  { transform: translate(-1px, 1px); text-shadow: 1px 0 #d9a08c, -1px 0 #a63a3f; }
  92%  { transform: translate(0, 0); text-shadow: none; }
  96%  { transform: translate(1px, 0); text-shadow: -1px 0 #a63a3f; opacity: .9; }
  97%  { transform: translate(0, 0); text-shadow: none; opacity: 1; }
}

/* japanese inside the chat feed keeps the speaker's colour but still twitches */
.chat-jp {
  font-family: 'Pixelify Sans', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  animation: jp-glitch 9s infinite steps(1);
}

/* ===========================================
   RESIDENT THUMBS: hover name + file popup
   =========================================== */

.res-thumb {
  position: relative;
  display: inline-block;
  margin: 2px;
  cursor: pointer;
  line-height: 0;
}

.res-thumb img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  transition: transform .12s;
}

.res-thumb:hover img {
  transform: scale(1.18) rotate(-3deg);
}

.res-thumb .res-name {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  border: 1px solid #a63a3f;
  color: #cf7a6b;
  font-family: 'Pixelify Sans', monospace;
  font-size: 12px;
  line-height: 1.2;
  padding: 3px 7px;
  white-space: nowrap;
  z-index: 60;
  pointer-events: none;
}

.res-thumb:hover .res-name { display: block; }

/* file popup, in the same dialog language as the rest of the site */
.res-modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.82);
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.res-modal {
  background: linear-gradient(135deg, #0a0a0a 0%, #151515 100%);
  border: 2px solid;
  border-color: #fff #404040 #404040 #fff;
  box-shadow: 6px 6px 14px rgba(0,0,0,.6);
  max-width: 720px;
  width: 100%;
  max-height: 86vh;
  display: flex;
  flex-direction: column;
}

.res-modal-title {
  background: linear-gradient(90deg, #a63a3f, #d9a08c);
  color: #000;
  padding: 5px 9px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.res-modal-title button {
  background: #c0c0c0;
  border: 1px outset #fff;
  padding: 0 7px;
  font-size: 11px;
  cursor: pointer;
}

.res-modal-body {
  padding: 14px;
  overflow: auto;
}

/* sidebar tail slot: eats whatever vertical space is left */
.gt-layout { align-items: stretch; }
.gt-right { display: flex; flex-direction: column; }
.gt-right .gt-fill { flex: 1 1 0; min-height: 160px; overflow: hidden; }
.gt-right .gt-fill img { height: 100%; width: 100%; object-fit: cover; display: block; }
@media (max-width: 900px) {
  .gt-right .gt-fill { flex: 1 1 100%; min-height: 300px; }
}

/* residents peeking in from the edges */
#peekers {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  pointer-events: none;
  z-index: 60;
  overflow: hidden;
}

/* ===========================================
   THE SHOP: vending machine, preview, brain
   =========================================== */

/* The artwork is a backdrop, not the thing that decides how tall the shop is.
   Pinning the overlay to a 3:1 image is what forced everything to shrink. */
.shop-art { position: absolute; top: 0; left: 0; right: 0; pointer-events: none; }
.shop-art img { width: 100%; display: block; opacity: .5; }
.shop-art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(0,0,0,.30) 0%, rgba(0,0,0,.70) 55%, rgba(0,0,0,.94) 88%, #000 100%);
}
.shop-overlay {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 10px 12px;
  gap: 8px;
  overflow: hidden;   /* the section itself never scrolls */
}

.shop-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.shop-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.85fr 1.1fr;
  gap: 10px;
  /* the machine and the brain set the height of the section. the middle
     column stretches to match and scrolls inside it. */
  align-items: stretch;
}

.shop-card {
  background: rgba(0, 0, 0, .86);
  border: 1px solid #a63a3f;
  padding: 10px;
  overflow: hidden;
  min-height: 0;      /* without this a flex child refuses to shrink */
  display: flex;
  flex-direction: column;
}

.shop-card h4 {
  font-size: 14px;
  color: #a63a3f;
  font-family: 'Pixelify Sans', monospace;
  margin: 0 0 6px 0;
}

/* this used to be 12px dull gold under a tall card, so a failed purchase read
   as the button simply doing nothing. it now has to be seen. */
.shop-msg {
  font-family: 'Pixelify Sans', monospace;
  font-size: 14px;
  line-height: 1.35;
  color: #e8b45c;
  margin-top: 8px;
  min-height: 18px;
}
.shop-msg:not(:empty) {
  padding: 7px 9px;
  border: 1px solid #6b4a1e;
  border-left: 3px solid #e8b45c;
  background: rgba(70, 44, 10, .35);
}

/* ---- the machine: chassis, glass, shelves ---- */
.machine {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2a2023 0%, #171215 60%, #221a1d 100%);
  border: 3px solid #3c2c30;
  border-radius: 6px;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.08), inset 0 -3px 0 rgba(0,0,0,.6), 0 4px 12px rgba(0,0,0,.6);
  padding: 7px;
  min-height: 220px;
}

.machine-glass {
  position: relative;
  flex: 0 0 auto;
  background: #06060a;
  border: 2px solid #0d0d12;
  box-shadow: inset 0 0 0 2px #1d1418, inset 0 0 30px rgba(0,0,0,.95);
  padding: 5px;
  overflow: visible;
}

.machine-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(112deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.03) 22%, rgba(255,255,255,0) 42%);
}

.vend-shelf { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }

.vend-slot {
  position: relative;
  background: #0e0e12;
  border: 1px solid #2c2226;
  border-bottom: 3px solid #3c2c30;   /* the shelf rail */
  aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
}
.vend-slot img { max-width: 82%; max-height: 74%; object-fit: contain; display: block; }
/* NFT art is already a framed square, so it fills the slot edge to edge rather
   than floating inside it like the cutout thumbnails did */
.vend-slot.art img { max-width: 100%; max-height: 100%; width: 100%; height: 100%; object-fit: cover; }
.vend-slot:hover { border-color: #a63a3f; background: #171013; }
.vend-slot.on { border-color: #cf7a6b; box-shadow: 0 0 0 1px #cf7a6b inset; background: #1b1216; }

.vend-slot .code {
  position: absolute; top: 2px; left: 2px;
  font-family: 'Pixelify Sans', monospace; font-size: 10px;
  color: #c9954a; background: rgba(0,0,0,.75);
  padding: 0 3px; letter-spacing: 1px;
}
.vend-slot .tag {
  position: absolute; bottom: 0; left: 0; right: 0;
  font-family: 'Pixelify Sans', monospace; font-size: 8px; text-align: center;
  color: #8a7476; background: rgba(0,0,0,.75); padding: 1px 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vend-slot.gone img { filter: grayscale(1) brightness(.35); }
.vend-slot.gone::after {
  content: "SOLD"; position: absolute; top: 50%; left: 0; right: 0;
  transform: translateY(-50%) rotate(-12deg);
  font-family: 'Pixelify Sans', monospace; font-size: 11px; text-align: center;
  color: #fff; background: rgba(143,42,42,.92); padding: 1px 0;
}

.machine-tray {
  margin-top: 7px; height: 26px;
  background: linear-gradient(180deg, #0a0a0d 0%, #171215 100%);
  border: 2px solid #3c2c30;
  display: flex; align-items: center; justify-content: center;
}
.machine-tray span {
  font-family: 'Pixelify Sans', monospace; font-size: 11px;
  color: #5c4a4c; letter-spacing: 3px;
}

.vend-foot {
  display: flex; justify-content: space-between; gap: 8px;
  font-family: 'Pixelify Sans', monospace; font-size: 12px;
  color: #cf7a6b; margin-top: 6px;
}

/* ---- preview window + keypad ---- */
.vend-preview {
  height: 120px;
  background: #06060a;
  border: 2px solid #2c2226;
  box-shadow: inset 0 0 18px rgba(0,0,0,.9);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.vend-preview img { max-width: 92%; max-height: 92%; object-fit: contain; display: block; }

.vend-name {
  font-family: 'Pixelify Sans', monospace; font-size: 16px;
  color: #cf7a6b; text-align: center; margin-top: 5px;
}
.vend-status { font-family: 'Pixelify Sans', monospace; font-size: 13px; text-align: center; color: #888; }

.code-readout {
  display: flex; align-items: center; justify-content: space-between;
  background: #050d05;
  border: 2px inset #2c2226;
  padding: 4px 8px;
  margin: 7px 0 6px 0;
}
.code-label { font-family: 'Pixelify Sans', monospace; font-size: 10px; color: #4d6b4d; letter-spacing: 2px; }
#code-display {
  font-family: 'Pixelify Sans', monospace; font-size: 24px;
  color: #7dff7d; text-shadow: 0 0 8px rgba(125,255,125,.55); letter-spacing: 3px;
}

.keypad { display: flex; flex-direction: column; gap: 3px; }
.keypad-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }

.keypad-key {
  background: linear-gradient(180deg, #37292c 0%, #1d1518 100%);
  border: 2px solid;
  border-color: #55414500 #000 #000 #554145;
  border-top-color: #6b5257;
  border-left-color: #6b5257;
  color: #cf7a6b;
  font-family: 'Pixelify Sans', monospace;
  font-size: 15px;
  padding: 6px 0;
  cursor: pointer;
}
.keypad-key:hover { background: linear-gradient(180deg, #4a373a 0%, #251b1e 100%); color: #fff; }
.keypad-key:active { border-color: #000 #6b5257 #6b5257 #000; transform: translateY(1px); }
.keypad-key.wide { width: 100%; }
.keypad-key.lit { background: #a63a3f; color: #fff; }

/* ---- the brain: hundreds of little boxes ---- */
.brain-wrap {
  position: relative;
  aspect-ratio: 42 / 35;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  margin: 2px auto 0;
  min-height: 0;
}
.brain-cells { position: absolute; inset: 0; }

.brain-cells .bx {
  position: absolute;
  display: block;
  box-sizing: border-box;
  border: 1px solid #0b0b0d;
  background: #4a4a52;              /* grey: free */
}
.brain-cells .bx.open { cursor: pointer; }
.brain-cells .bx.open:hover { background: #8d8d99; }
.brain-cells .bx.preset { background: #7a2f33; cursor: help; }   /* house topic */
.brain-cells .bx.bought { background: #d0342f; cursor: help; }   /* bought: red */
.brain-cells .bx.preset:hover, .brain-cells .bx.bought:hover { outline: 1px solid #ffd9cf; z-index: 2; }
.brain-cells .bx.done   { background: #241416; }
.brain-cells .bx.dead   { background: #2a2a30; }
.brain-cells .bx.on     { background: #ffd9cf; }

.brain-detail {
  font-family: 'Pixelify Sans', monospace; font-size: 12px;
  color: #cf7a6b; min-height: 30px; border-top: 1px solid #2c2226; padding-top: 4px;
}
.brain-card textarea {
  width: 100%; box-sizing: border-box; height: 50px;
  background: #000; border: 1px solid #a63a3f; color: #cf7a6b;
  font-family: 'Pixelify Sans', monospace; font-size: 13px; padding: 5px; resize: vertical;
}

@media (max-width: 1100px) {
  .shop-overlay { position: relative; background: rgba(0,0,0,.9); }
  .shop-grid { grid-template-columns: 1fr; }
  .vend-shelf { grid-template-columns: repeat(5, 1fr); }
}

/* ---- how the vending machine works ---- */
.howto {
  margin-top: 7px;
  border-top: 1px solid #2c2226;
  padding-top: 7px;
  /* The only scroller in the shop. flex-basis:0 is load bearing: in a column
     flex container an item with basis 0 adds nothing to the parent's intrinsic
     height, so this text can never stretch the section. It scrolls in place and
     runs up under the buy button, which the mask above fades it into. */
  flex: 1 1 0;
  min-height: 118px;   /* a reading pane, not a sliver */
  overflow-y: auto;
  position: relative;
  z-index: 0;
  isolation: isolate;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 22px);
  mask-image: linear-gradient(180deg, transparent 0, #000 22px);
}
.howto::-webkit-scrollbar { width: 6px; }
.howto::-webkit-scrollbar-thumb { background: #5a2b2f; border-radius: 3px; }
.howto-head {
  font-family: 'Pixelify Sans', monospace;
  font-size: 13px;
  color: #a63a3f;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.howto ol {
  margin: 0;
  padding-left: 18px;
  color: #ddd;
  font-size: 12px;
  line-height: 1.5;
}
.howto ol li { margin-bottom: 3px; }
.howto ol li b { color: #cf7a6b; }
.howto-note {
  margin-top: 6px;
  font-size: 12px;
  color: #9a8a8c;
  line-height: 1.45;
}
.howto-note b { color: #c9954a; }
.howto-net {
  margin-top: 6px;
  font-family: 'Pixelify Sans', monospace;
  font-size: 12px;
  color: #c9954a;
  background: rgba(201,149,74,.08);
  border-left: 3px solid #c9954a;
  padding: 4px 8px;
}

/* ---- buy a brain cell: popup so the widget itself never scrolls ---- */
.cell-modal-overlay {
  position: fixed; inset: 0; z-index: 10050;
  background: rgba(0,0,0,.78);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.cell-modal {
  width: 460px; max-width: 100%;
  background: #0e0c0d;
  border: 2px solid #a63a3f;
  box-shadow: 6px 6px 0 #000;
}
.cell-modal-title {
  background: linear-gradient(90deg, #a63a3f, #d9a08c);
  padding: 4px 8px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Pixelify Sans', monospace; font-size: 13px; color: #120608;
}
.cell-modal-body { padding: 12px; }
.cell-which {
  font-family: 'Pixelify Sans', monospace; font-size: 13px;
  color: #c9954a; margin-bottom: 6px;
}
.cell-modal textarea {
  width: 100%; box-sizing: border-box; height: 84px;
  background: #000; border: 1px solid #a63a3f; color: #cf7a6b;
  font-family: 'Pixelify Sans', monospace; font-size: 14px; padding: 6px; resize: vertical;
}
/* the brain card no longer needs its own scrollbar */
.brain-card { overflow: visible; }

/* ---- the magazine rack ---- */
.mag-rack { display: flex; align-items: center; gap: 6px; }
.mag-arrow {
  background: linear-gradient(180deg, #a63a3f 0%, #71262a 100%);
  color: #fff; border: 2px solid #fff;
  font-family: 'Pixelify Sans', monospace; font-size: 16px; line-height: 1;
  padding: 10px 8px; cursor: pointer; box-shadow: 3px 3px 0 #000;
  flex-shrink: 0;
}
.mag-arrow:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 #000; }
.mag-arrow:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #000; }
.mag-frame {
  flex: 1; min-width: 0;
  background: #000; border: 1px solid #333;
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.mag-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mag-name {
  font-family: 'Pixelify Sans', monospace; font-size: 14px;
  color: #cf7a6b; text-align: center; margin-top: 5px;
}
.mag-pos {
  font-family: 'Pixelify Sans', monospace; font-size: 11px;
  color: #888; text-align: center;
}

/* ---- the origin story: measured column so the lines stay readable ---- */
/* an inherited rule pins .origin-layout > div:last-child to 30%, so this needs
   higher specificity than that to win */
.origin-layout > .origin-text:last-child { flex: 1 1 70%; width: 70%; max-width: 70%; }
.origin-text p {
  font-size: 1.05rem;
  line-height: 1.75;
  margin: 0 0 14px 0;
}
.origin-text p.origin-foot {
  font-size: .95rem;
  color: #c9954a;
  border-top: 1px solid #2c2226;
  padding-top: 10px;
  margin-bottom: 0;
}
@media (max-width: 1100px) { .origin-layout > .origin-text:last-child { flex: 1 1 100%; width: 100%; max-width: 100%; } }

/* ---- HOW THEY MET: the convention story laid over the bus stop art ---- */
/* The art is 3:1 and the story is long, so covering the whole box would zoom
   the scene into an unreadable smear. Instead the image sits at its natural
   proportions across the top and its own fade carries it down into the solid
   background, which means the gradient scales with the image at any width. */
.met-box { padding: 0; background: #0d0810; }
.met-art { position: absolute; inset: 0; }
.met-art img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 38%;
  display: block;
}
.met-art::after {
  content: ''; position: absolute; inset: 0;
  /* the art has to stay visible under a lot of text, so this is a readable
     wash rather than a fade to solid */
  background: linear-gradient(180deg,
    rgba(13, 8, 16, .62) 0%,
    rgba(13, 8, 16, .74) 45%,
    rgba(13, 8, 16, .80) 100%);
}
.met-text {
  position: relative; z-index: 2;
  padding: 26px 34px 34px;
}
.met-text h2 { margin-bottom: 6px; }
.met-text p {
  color: #ded6dd;
  font-size: 1.02rem;
  line-height: 1.75;
  margin-bottom: 14px;
  /* 69% of the section, matching the origin story column, rather than a
     character count that collapsed to about a third on a wide screen */
  max-width: 69%;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .95);
}
.met-text p.met-lead {
  color: #e9b9ae;
  font-size: 1.18rem;
  font-weight: 600;
}
@media (max-width: 900px) {
  .met-text { padding: 20px 18px 24px; }
}

/* ---- residents widget: the chair loop ---- */
#residents-widget {
  flex: 0 0 300px;
  min-width: 0;
  position: relative;
  border: 2px solid #a63a3f;
  background: #06060a;
  overflow: hidden;
}
#residents-widget video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
#residents-widget .widget-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  font-family: 'Pixelify Sans', monospace;
  font-size: 12px; letter-spacing: 1px;
  color: #e8b45c;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.85));
  padding: 14px 8px 5px;
  text-align: center;
}