/* ==========================================================================
   DESIGN SYSTEM & VARIABLES
   ========================================================================== */
:root {
  /* Default Night Theme */
  --color-sky-top: #050510;
  --color-sky-mid: #0b0c20;
  --color-sky-bot: #191432;
  
  --color-concrete: #565a5e;
  --color-concrete-shadow: #3b3e41;
  --color-concrete-light: #72787e;
  --color-concrete-seam: #242627;
  
  --color-snow: #e4edf7;
  --color-snow-shadow: #b2c9e3;
  --color-snow-light: #ffffff;
  
  --color-glass-dark: #1e2530;
  --color-glass-dark-border: #141820;
  
  --color-glow-warm: #ffa524;
  --color-glow-warm-bright: #ffd785;
  --color-glow-window-bg: rgba(255, 175, 50, 0.95);
  
  --color-term-bg: #141416;
  --color-term-text: #39ff14; /* Matrix green */
  --color-term-text-dim: #25a80d;
  --color-term-border: #333336;
}

/* Day Theme Overrides */
body.theme-day {
  --color-sky-top: #7ec0ee;
  --color-sky-mid: #bce2f7;
  --color-sky-bot: #e0f2fe;
  
  --color-concrete: #8c9296;
  --color-concrete-shadow: #696e72;
  --color-concrete-light: #abb1b5;
  --color-concrete-seam: #4a4d4f;
  
  --color-snow: #f0f5fc;
  --color-snow-shadow: #d0def0;
  
  --color-glass-dark: #7aa5d2;
  --color-glass-dark-border: #5a80ab;
}

/* Sunset Theme Overrides */
body.theme-sunset {
  --color-sky-top: #fd5e53;
  --color-sky-mid: #ff8967;
  --color-sky-bot: #ffd085;
  
  --color-concrete: #756865;
  --color-concrete-shadow: #524744;
  --color-concrete-light: #968884;
  --color-concrete-seam: #3d3432;
  
  --color-snow: #eecfbe;
  --color-snow-shadow: #caa08a;
  
  --color-glass-dark: #4b3e54;
  --color-glass-dark-border: #33273b;
}

/* ==========================================================================
   BASE & RESET
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  image-rendering: pixelated;
}

body {
  font-family: 'JetBrains Mono', Courier, monospace;
  background-color: var(--color-sky-top);
  color: #fff;
  overflow: hidden;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  user-select: none;
  transition: background-color 1s ease;
}

/* Weather Canvas overlay */
.weather-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 99;
}

/* ==========================================================================
   ENVIRONMENT: SKY, STARS, MOON & CLOUDS
   ========================================================================== */
.sky {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, var(--color-sky-top) 0%, var(--color-sky-mid) 60%, var(--color-sky-bot) 100%);
  z-index: 1;
  overflow: hidden;
  transition: background 1s ease;
}

/* Stars */
.stars {
  position: absolute;
  width: 100%;
  height: 70%;
  background-image: 
    radial-gradient(1px 1px at 20px 30px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 150px 80px, #fff, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 300px 120px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 450px 40px, #ffebad, rgba(0,0,0,0)),
    radial-gradient(1px 1px at 600px 180px, #fff, rgba(0,0,0,0)),
    radial-gradient(2px 2px at 750px 100px, #fff, rgba(0,0,0,0)),
    radial-gradient(1.5px 1.5px at 900px 140px, #add8ff, rgba(0,0,0,0));
  background-repeat: repeat;
  background-size: 600px 300px;
  opacity: 0.8;
  animation: twinkle 8s infinite linear;
  transition: opacity 1s ease;
}
body.theme-day .stars,
body.theme-sunset .stars {
  opacity: 0;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* Moon / Sun */
.moon {
  position: absolute;
  top: 60px;
  right: 15%;
  width: 44px;
  height: 44px;
  background: #fdf6e2;
  border-radius: 50%;
  box-shadow: 
    -4px -4px 0 0 #fffbc7,
    -8px -8px 0 0 rgba(253, 246, 226, 0.1),
    6px 6px 0 0 rgba(0,0,0,0.1) inset;
  filter: drop-shadow(0 0 10px rgba(253, 246, 226, 0.4));
  transition: all 1s ease;
}

body.theme-day .moon {
  background: #ffeb60;
  box-shadow: 0 0 25px rgba(255, 235, 96, 0.8);
  filter: none;
  right: 65%;
  top: 50px;
}

body.theme-sunset .moon {
  background: #ff6e40;
  box-shadow: 0 0 20px rgba(255, 110, 64, 0.7);
  filter: none;
  right: 45%;
  top: 80px;
}

/* Clouds */
.cloud {
  position: absolute;
  background: rgba(40, 30, 65, 0.3);
  height: 16px;
  opacity: 0.5;
  transition: background 1s ease;
}
body.theme-day .cloud { background: rgba(255, 255, 255, 0.8); }
body.theme-sunset .cloud { background: rgba(253, 224, 210, 0.5); }

.cloud-1 { width: 120px; top: 100px; left: -150px; animation: floatCloud 65s infinite linear; }
.cloud-2 { width: 80px; top: 160px; left: -100px; animation: floatCloud 50s infinite linear 15s; }

@keyframes floatCloud { to { left: 100%; } }

/* Background Silhouettes */
.bg-silhouettes {
  position: absolute;
  bottom: 120px;
  width: 100%;
  height: 150px;
  z-index: 2;
  background: 
    linear-gradient(to top, #141126 90px, transparent 90px),
    linear-gradient(to top, #0f0d1b 120px, transparent 120px);
  background-size: 140px 100%, 200px 100%;
  background-position: left 20% bottom, right 15% bottom;
  background-repeat: no-repeat;
  opacity: 0.5;
  transition: filter 1s ease;
}
body.theme-day .bg-silhouettes {
  background: 
    linear-gradient(to top, #abb8c4 90px, transparent 90px),
    linear-gradient(to top, #9bb0be 120px, transparent 120px);
  background-size: 140px 100%, 200px 100%;
  background-position: left 20% bottom, right 15% bottom;
  background-repeat: no-repeat;
  opacity: 0.3;
}
body.theme-sunset .bg-silhouettes {
  background: 
    linear-gradient(to top, #6b4a53 90px, transparent 90px),
    linear-gradient(to top, #533644 120px, transparent 120px);
  background-size: 140px 100%, 200px 100%;
  background-position: left 20% bottom, right 15% bottom;
  background-repeat: no-repeat;
  opacity: 0.4;
}

/* ==========================================================================
   MAIN SCENE LAYOUT
   ========================================================================== */
.scene {
  position: relative;
  width: 100%;
  max-width: 800px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  z-index: 5;
  padding-bottom: 90px;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.scene.fade-out {
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
}

/* ==========================================================================
   THE BUILDING (KHRUSHCHYOVKA)
   ========================================================================== */
.building {
  position: relative;
  width: 320px;
  background-color: var(--color-concrete);
  border-left: 8px solid var(--color-concrete-shadow);
  border-right: 8px solid var(--color-concrete-seam);
  z-index: 11; /* Changed from 10 to 11 to let first-floor elements receive clicks */
  box-shadow: 25px 0 35px rgba(0, 0, 0, 0.4);
  transition: background-color 1s ease, border-color 1s ease;
}

/* Panel lines */
.building::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    linear-gradient(to bottom, transparent calc(100% - 4px), var(--color-concrete-seam) calc(100% - 4px)),
    linear-gradient(to right, transparent 100px, var(--color-concrete-seam) 100px, var(--color-concrete-seam) 104px, transparent 104px,
                             transparent 212px, var(--color-concrete-seam) 212px, var(--color-concrete-seam) 216px, transparent 216px);
  background-size: 100% 115px, 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* Random Graffiti */
.building::after {
  content: "ЦОЙ ЖИВ";
  position: absolute;
  bottom: 60px;
  right: 15px;
  font-family: monospace;
  font-size: 9px;
  font-weight: bold;
  color: #2c2f30;
  opacity: 0.6;
  transform: rotate(-3deg);
  pointer-events: none;
  z-index: 5;
}

/* Roof */
.building-roof {
  position: absolute;
  top: -24px;
  left: -12px;
  width: 344px;
  height: 24px;
  z-index: 11;
}

.roof-cornice {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 12px;
  background-color: var(--color-concrete-shadow);
  border-top: 4px solid var(--color-concrete-light);
  border-bottom: 4px solid var(--color-concrete-seam);
  transition: all 1s ease;
}

.antenna {
  position: absolute;
  top: -45px;
  left: 40px;
  width: 4px;
  height: 50px;
  background-color: #222;
}
.antenna::before {
  content: "";
  position: absolute;
  top: 10px;
  left: -8px;
  width: 20px;
  height: 4px;
  background-color: #222;
  box-shadow: 0 10px 0 #222, 4px -15px 0 #222;
}

.chimney {
  position: absolute;
  top: -30px;
  right: 50px;
  width: 24px;
  height: 30px;
  background-color: var(--color-concrete-shadow);
  border: 4px solid var(--color-concrete-seam);
  transition: all 1s ease;
}

/* Smoke */
.smoke-particle {
  position: absolute;
  top: -8px;
  left: 6px;
  width: 8px;
  height: 8px;
  background-color: rgba(220, 220, 220, 0.4);
  animation: driftSmoke 6s infinite ease-out;
  opacity: 0;
}
.smoke-particle:nth-child(2) { animation-delay: 2s; }
.smoke-particle:nth-child(3) { animation-delay: 4s; }

@keyframes driftSmoke {
  0% { transform: translateY(0) translateX(0) scale(1); opacity: 0; }
  10% { opacity: 0.6; }
  50% { transform: translateY(-25px) translateX(-10px) scale(1.5); background-color: rgba(200, 200, 200, 0.25); }
  100% { transform: translateY(-60px) translateX(-25px) scale(2); opacity: 0; }
}

/* ==========================================================================
   THE FACADE & WINDOWS
   ========================================================================== */
.facade {
  display: flex;
  flex-direction: column;
}

.floor {
  height: 115px;
  display: grid;
  grid-template-columns: 100px 112px 108px;
  align-items: center;
  justify-items: center;
  position: relative;
}

.window-unit {
  position: relative;
  z-index: 5;
}

.window-frame {
  width: 48px;
  height: 64px;
  background-color: #2f2015;
  border: 4px solid var(--color-concrete-seam);
  padding: 4px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  position: relative;
  transition: border-color 1s ease;
}

.window-glass {
  width: 100%;
  height: 100%;
  background-color: var(--color-glass-dark);
  border: 2px solid var(--color-glass-dark-border);
  position: relative;
  overflow: hidden;
  transition: background-color 0.4s ease, box-shadow 0.4s ease, border-color 1s ease;
}

.window-glass::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.15) 15%, transparent 15%, transparent 35%, rgba(255,255,255,0.08) 35%, transparent 55%);
  pointer-events: none;
  z-index: 3;
}

.window-glass::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #2f2015;
  z-index: 2;
}

/* Room glows */
.window-glass.lit {
  background-color: var(--color-glow-window-bg);
  box-shadow: 
    0 0 15px rgba(255, 165, 36, 0.4),
    0 0 30px rgba(255, 165, 36, 0.2);
}

.window-unit.fuse-blown {
  pointer-events: none !important;
  cursor: default !important;
}
.window-unit.fuse-blown .window-glass {
  background-color: #08080c !important;
  box-shadow: none !important;
}
.window-unit.fuse-blown .room-interior {
  opacity: 0 !important;
}

.window-sill {
  position: absolute;
  bottom: -4px;
  left: -2px;
  width: 52px;
  height: 4px;
  background-color: var(--color-concrete-light);
  border-bottom: 2px solid var(--color-concrete-seam);
  z-index: 4;
  transition: all 1s ease;
}

/* Stairwell windows */
.stair-window {
  width: 20px;
  height: 50px;
  background-color: #121820;
  border: 3px solid var(--color-concrete-seam);
  position: relative;
  box-shadow: inset 1px 1px 3px rgba(0,0,0,0.5);
  transition: all 1s ease;
}
.stair-window::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(to bottom, transparent, transparent 8px, var(--color-concrete-seam) 8px, var(--color-concrete-seam) 10px);
}

.floor-2 .stair-window,
.floor-4 .stair-window {
  background-color: #ffe6aa;
  box-shadow: 0 0 8px rgba(255,230,170,0.3);
}

body.theme-day .stair-window { background-color: #bbd5ec; }

/* Cozy non-interactive window details */
.cozy-glow { background-color: #ffb852; box-shadow: 0 0 10px rgba(255,184,82,0.4); }
.cozy-glow-warm { background-color: #ff9d47; box-shadow: 0 0 10px rgba(255,157,71,0.4); }

body.theme-day .cozy-glow,
body.theme-day .cozy-glow-warm { box-shadow: none; }

/* Room Shadows */
.room-interior {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.window-glass.lit .room-interior,
.cozy-glow .room-interior,
.cozy-glow-warm .room-interior {
  opacity: 1;
}

.about-room {
  background: 
    radial-gradient(circle at bottom right, #382405 10px, transparent 10px),
    linear-gradient(to bottom, #7a1d1d 15px, transparent 15px);
}
.projects-room {
  background: 
    radial-gradient(circle at center, #64ffda 8px, transparent 12px),
    linear-gradient(to bottom, #6d3a12 12px, transparent 12px);
  background-position: bottom center;
}
.skills-room {
  background: linear-gradient(to right, transparent 6px, #201a15 6px, #201a15 24px, transparent 24px);
  background-position: top 5px left 0;
  background-size: 100% 6px;
  background-repeat: no-repeat;
}
.contacts-room {
  background: radial-gradient(circle at bottom left, #ffeb3b 8px, transparent 12px);
}
.cat-shadow-window {
  background: radial-gradient(circle at bottom center, #111 6px, transparent 6px);
  background-position: bottom 2px center;
  background-repeat: no-repeat;
}
.cat-shadow-window::before {
  content: "";
  position: absolute;
  bottom: 8px;
  left: 17px;
  width: 4px;
  height: 4px;
  background-color: #111;
  box-shadow: -2px -3px 0 0 #111, 2px -3px 0 0 #111;
}

.plants-shadow {
  background: 
    radial-gradient(circle at bottom left, #1a330e 8px, transparent 8px),
    radial-gradient(circle at bottom right, #254617 12px, transparent 12px);
  opacity: 0.85;
}

/* TV Flicker window animation (Apt 2) */
.tv-flicker {
  background-color: #3b5066;
  opacity: 0.8;
}
.window-glass.lit .tv-flicker {
  animation: tvFlickerLight 0.8s infinite alternate steps(3);
}

@keyframes tvFlickerLight {
  0%, 100% { background-color: #436080; box-shadow: 0 0 10px rgba(67,96,128,0.5); }
  33% { background-color: #273b52; box-shadow: 0 0 5px rgba(39,59,82,0.3); }
  66% { background-color: #6385ab; box-shadow: 0 0 15px rgba(99,133,171,0.6); }
}

/* ==========================================================================
   BALCONIES
   ========================================================================== */
.balcony {
  position: absolute;
  bottom: 10px;
  right: 18px;
  width: 72px;
  height: 28px;
  background-color: var(--color-concrete-shadow);
  border: 4px solid var(--color-concrete-seam);
  z-index: 8;
  box-shadow: 0 4px 5px rgba(0,0,0,0.4);
  transition: all 1s ease;
}

.balcony-railings {
  position: absolute;
  top: -12px;
  left: -2px;
  width: 68px;
  height: 12px;
  background-image: repeating-linear-gradient(to right, var(--color-concrete-seam), var(--color-concrete-seam) 3px, transparent 3px, transparent 8px);
  border-top: 3px solid var(--color-concrete-seam);
  transition: all 1s ease;
}

.clothes-line {
  position: absolute;
  top: -20px;
  left: 2px;
  width: 60px;
  height: 12px;
  background: 
    linear-gradient(to bottom, transparent 4px, #444 4px, #444 5px, transparent 5px),
    linear-gradient(to bottom, #d53c3c 10px, transparent 10px),
    linear-gradient(to bottom, #e3dfd3 8px, transparent 8px);
  background-size: 100% 100%, 12px 10px, 16px 8px;
  background-position: 0 0, 10px 4px, 30px 4px;
  background-repeat: no-repeat;
}

.bicycle {
  position: absolute;
  top: -12px;
  left: 10px;
  width: 28px;
  height: 16px;
  background: 
    radial-gradient(circle, transparent 3px, #222 3px, #222 5px, transparent 5px),
    radial-gradient(circle, transparent 3px, #222 3px, #222 5px, transparent 5px),
    linear-gradient(to right, #cc2222 10px, transparent 10px);
  background-size: 10px 10px, 10px 10px, 18px 3px;
  background-position: 0 6px, 16px 6px, 5px 6px;
  background-repeat: no-repeat;
}

/* ==========================================================================
   THE ENTRANCE (ПОДЪЕЗД)
   ========================================================================== */
.entrance {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}

.canopy {
  position: absolute;
  bottom: 54px;
  width: 86px;
  height: 12px;
  background-color: var(--color-concrete-shadow);
  border-top: 4px solid var(--color-concrete-light);
  border-bottom: 4px solid var(--color-concrete-seam);
  z-index: 9;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5);
  transition: all 1s ease;
}

.porch-light {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px;
  height: 6px;
  background-color: #fffbc7;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 10px #ffea75;
}
.porch-light::after {
  content: "";
  position: absolute;
  top: 6px;
  left: -20px;
  width: 52px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(255, 234, 117, 0.25) 0%, rgba(255, 234, 117, 0) 100%);
  clip-path: polygon(25% 0%, 75% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
}
body.theme-day .porch-light,
body.theme-day .porch-light::after {
  display: none;
}

.door-frame {
  width: 44px;
  height: 56px;
  background-color: #1e1e1e;
  border: 4px solid var(--color-concrete-seam);
  border-bottom: none;
  position: relative;
  z-index: 8;
  transition: all 1s ease;
}

.door-metal {
  width: 100%;
  height: 100%;
  background-color: #3d2f26;
  border-right: 4px solid #281d16;
  position: relative;
}

.intercom-panel {
  position: absolute;
  top: 24px;
  left: 4px;
  width: 4px;
  height: 8px;
  background-color: #1a1a1a;
  border: 1px solid #777;
}
.intercom-panel::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 1px;
  width: 2px;
  height: 2px;
  background-color: #ff3333;
  animation: blinkIntercom 2s infinite steps(2);
}

@keyframes blinkIntercom {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}

/* ==========================================================================
   WALKABLE CHARACTER (HERO)
   ========================================================================== */
.hero {
  position: absolute;
  bottom: 60px;
  left: 200px;
  width: 24px;
  height: 36px;
  z-index: 20;
  pointer-events: none;
}

.hero-sprite {
  width: 100%;
  height: 100%;
  position: relative;
}

.hero-sprite::before {
  content: "";
  position: absolute;
  top: 0;
  left: 3px;
  width: 18px;
  height: 36px;
  background: 
    linear-gradient(to right, #c0392b 18px, transparent 18px),
    linear-gradient(to right, #f5cba7 18px, transparent 18px),
    linear-gradient(to right, #111 2px, transparent 2px, transparent 6px, #111 6px, #111 8px, transparent 8px),
    linear-gradient(to right, #2980b9 18px, transparent 18px),
    linear-gradient(to right, #2c3e50 18px, transparent 18px);
  background-size: 18px 8px, 18px 10px, 8px 2px, 18px 14px, 18px 4px;
  background-position: 0 0, 0 8px, 2px 12px, 0 18px, 0 32px;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.hero.walking .hero-sprite::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 3px;
  width: 18px;
  height: 6px;
  background-color: #111;
  animation: legWalk 0.3s infinite alternate steps(2);
}

@keyframes legWalk {
  0% { clip-path: polygon(0 0, 40% 0, 40% 100%, 0 100%); }
  100% { clip-path: polygon(60% 0, 100% 0, 100% 100%, 60% 100%); }
}

.hero.face-left .hero-sprite::before { transform: scaleX(-1); }

.hero-speech-bubble {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  padding: 4px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.2s ease;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.hero-speech-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #000;
}
.hero.near-door .hero-speech-bubble,
.hero.near-bench .hero-speech-bubble,
.hero.near-car .hero-speech-bubble,
.hero.near-carpet .hero-speech-bubble,
.hero.near-swing .hero-speech-bubble {
  opacity: 1;
}

/* ==========================================================================
   NPC GRANDPA GRIGORYICH
   ========================================================================== */
.grandpa-npc {
  position: absolute;
  bottom: 100px;
  left: 360px;
  width: 22px;
  height: 32px;
  cursor: pointer;
  z-index: 13;
}

.grandpa-body {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Custom CSS art for grandpa (sitting posture, grey flat cap, brown jacket) */
.grandpa-body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 2px;
  width: 18px;
  height: 32px;
  background: 
    /* Grey flat cap */
    linear-gradient(to right, #7f8c8d 18px, transparent 18px),
    /* Beard & Face */
    linear-gradient(to right, #bdc3c7 18px, transparent 18px),
    /* Skin */
    linear-gradient(to right, #f5cba7 18px, transparent 18px),
    /* Brown jacket */
    linear-gradient(to right, #6e473b 18px, transparent 18px),
    /* Grey pants */
    linear-gradient(to right, #7f8c8d 18px, transparent 18px);
  background-size: 18px 5px, 18px 10px, 18px 4px, 18px 11px, 18px 6px;
  background-position: 0 0, 0 5px, 0 9px, 0 13px, 0 24px;
  background-repeat: no-repeat;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

.grandpa-pipe {
  position: absolute;
  top: 10px;
  left: -4px;
  width: 6px;
  height: 4px;
  background-color: #222;
}

.grandpa-speech-bubble {
  position: absolute;
  bottom: 110%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1e1e24;
  color: #fff;
  border: 2px solid var(--color-term-border);
  padding: 4px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 100;
  transition: opacity 0.2s ease;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
.grandpa-speech-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: var(--color-term-border);
}
.grandpa-speech-bubble.active {
  opacity: 1;
}

/* Pipe smoke animation particles */
.pipe-smoke-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: rgba(189,195,199,0.5);
  border-radius: 50%;
  pointer-events: none;
  animation: pipeSmoke 2s forwards linear;
}

@keyframes pipeSmoke {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(-15px, -30px) scale(2.5); opacity: 0; }
}

/* ==========================================================================
   RUSTY SWING (PLAYGROUND)
   ========================================================================== */
.swing-container {
  position: absolute;
  bottom: 16px;
  right: 140px;
  width: 50px;
  height: 80px;
  cursor: pointer;
  z-index: 12;
}

.swing-frame-css {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #2d3a33; /* Dark green metal tubes */
  border-bottom: none;
}
.swing-frame-css::before, .swing-frame-css::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 3px;
  height: 16px;
  background-color: #2d3a33;
}
.swing-frame-css::before { left: -6px; transform: rotate(-15deg); }
.swing-frame-css::after { right: -6px; transform: rotate(15deg); }

.swing-ropes-seat {
  position: absolute;
  top: 2px;
  left: 14px;
  width: 22px;
  height: 55px;
  transform-origin: top center;
}

.swing-ropes-seat.swinging {
  animation: swingBackAndForth 2s infinite ease-in-out;
}

@keyframes swingBackAndForth {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(15deg); }
  75% { transform: rotate(-15deg); }
}

.swing-ropes-seat::before, .swing-ropes-seat::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 50px;
  background-color: #555; /* Ropes */
}
.swing-ropes-seat::before { left: 2px; }
.swing-ropes-seat::after { right: 2px; }

.swing-seat {
  position: absolute;
  bottom: 5px;
  left: 0;
  width: 22px;
  height: 4px;
  background-color: #925c38; /* Wooden plank */
  border: 1.5px solid #000;
}

/* ==========================================================================
   GROUND & RETRO PROPS
   ========================================================================== */
.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background-color: var(--color-snow);
  border-top: 6px solid #ffffff;
  z-index: 9;
  box-shadow: inset 0 10px 10px rgba(178, 201, 227, 0.5);
  transition: background-color 1s ease, border-color 1s ease;
}
body.theme-day .ground { border-top-color: #ffffff; }

.snowdrifts {
  position: absolute;
  top: -16px;
  width: 100%;
  height: 16px;
  background-image: 
    radial-gradient(circle at 10% 16px, var(--color-snow) 20px, transparent 20px),
    radial-gradient(circle at 40% 16px, var(--color-snow) 30px, transparent 30px),
    radial-gradient(circle at 75% 16px, var(--color-snow) 25px, transparent 25px);
  filter: drop-shadow(0 -3px 0 var(--color-snow-shadow));
  transition: filter 1s ease;
}

/* Bench */
.bench-container {
  position: absolute;
  bottom: 16px;
  left: 45%;
  z-index: 12;
}

.bench {
  width: 60px;
  height: 16px;
  background-color: #5c3a21;
  border: 3px solid var(--color-concrete-seam);
  position: relative;
  transition: border-color 1s ease;
}
.bench::before, .bench::after {
  content: "";
  position: absolute;
  bottom: -16px;
  width: 6px;
  height: 16px;
  background-color: #2c3e50;
  border: 2px solid var(--color-concrete-seam);
}
.bench::before { left: 8px; }
.bench::after { right: 8px; }

.bench-container::before {
  content: "";
  position: absolute;
  top: -14px;
  left: 0;
  width: 60px;
  height: 8px;
  background-color: #5c3a21;
  border: 3px solid var(--color-concrete-seam);
  transition: border-color 1s ease;
}
.bench-container::after {
  content: "";
  position: absolute;
  top: -6px;
  left: 8px;
  width: 6px;
  height: 8px;
  background-color: #2c3e50;
  box-shadow: 38px 0 0 #2c3e50;
}

/* Sleeping Cat */
.sleeping-cat {
  position: absolute;
  top: -11px;
  left: 5px;
  width: 16px;
  height: 8px;
  cursor: pointer;
  z-index: 15;
}
.cat-body {
  width: 12px;
  height: 8px;
  background-color: #d35400;
  border: 2px solid var(--color-concrete-seam);
  border-radius: 4px 4px 0 0;
  position: relative;
  animation: catBreath 3s infinite ease-in-out;
  transition: border-color 1s ease;
}
.cat-body::before {
  content: "";
  position: absolute;
  right: -4px;
  bottom: 0;
  width: 4px;
  height: 4px;
  background-color: #d35400;
  border-top: 2px solid var(--color-concrete-seam);
  border-right: 2px solid var(--color-concrete-seam);
}

@keyframes catBreath {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.2); }
}

/* Radio on bench */
.radio-container {
  position: absolute;
  top: -11px;
  right: 6px;
  width: 18px;
  height: 11px;
  cursor: pointer;
  z-index: 15;
}

.radio-body {
  width: 100%;
  height: 100%;
  background-color: #333;
  border: 2px solid #000;
  position: relative;
}

.radio-handle {
  position: absolute;
  top: -3px;
  left: 3px;
  width: 12px;
  height: 2px;
  background-color: #666;
  border: 1px solid #000;
}

.radio-speaker {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 5px;
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 2px 2px;
}

.radio-notes {
  position: absolute;
  top: -15px;
  left: 2px;
  width: 20px;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  opacity: 0;
}
.radio-notes.playing {
  animation: notesFloat 2s infinite linear;
  opacity: 1;
}
.radio-notes span:nth-child(2) { animation-delay: 1s; }

@keyframes notesFloat {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-20px) scale(1.2); opacity: 0; }
}

/* Elektronika Game Console item on bench */
.elektronika-container {
  position: absolute;
  top: -7px;
  left: 26px;
  width: 14px;
  height: 9px;
  background-color: #cb2929; /* Red retro shell */
  border: 1.5px solid #000;
  border-radius: 1px;
  cursor: pointer;
  z-index: 15;
}
.elektronika-screen-dot {
  position: absolute;
  top: 2px;
  left: 3px;
  width: 6px;
  height: 4px;
  background-color: #a3be8c; /* Green LCD tint */
  border: 1px solid #000;
}

/* Rusty Daewoo Lanos Car */
.car-container {
  position: absolute;
  bottom: 8px;
  left: 30px;
  width: 108px;
  height: 40px;
  cursor: pointer;
  z-index: 12;
}

.car-body-css.lanos-car {
  width: 100%;
  height: 22px;
  background-color: #8e959c; /* Dull silver-grey Lanos color */
  border: 3px solid #000;
  position: absolute;
  bottom: 10px;
  border-top-left-radius: 8px;
  border-top-right-radius: 6px;
}

.car-cabin.lanos-cabin {
  position: absolute;
  top: -14px;
  left: 18px;
  width: 60px;
  height: 14px;
  background-color: #8e959c;
  border: 3px solid #000;
  border-bottom: none;
  border-top-left-radius: 12px;
  border-top-right-radius: 8px;
}

.car-window.lanos-window {
  position: absolute;
  top: 2px;
  left: 6px;
  width: 44px;
  height: 10px;
  background-color: #88c0d0;
  border: 2px solid #000;
  border-top-left-radius: 9px;
  border-top-right-radius: 5px;
}

.car-wheel {
  position: absolute;
  bottom: -18px;
  width: 20px;
  height: 20px;
  background-color: #1a1a1a;
  border: 3px solid #000;
  border-radius: 50%;
}
.wheel-front { left: 16px; }
.wheel-back { right: 16px; }
.car-wheel::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background-color: #d8dee9;
  border-radius: 50%;
}

/* Rust Spots */
.car-rust {
  position: absolute;
  background-color: #8c4f2b; /* Rust orange-brown */
  border: 1px solid #502a14;
}
.rust-front {
  width: 8px;
  height: 4px;
  bottom: 2px;
  left: 6px;
  border-radius: 2px;
}
.rust-back {
  width: 14px;
  height: 5px;
  bottom: 1px;
  right: 12px;
  border-radius: 3px;
}

.car-lights {
  position: absolute;
  top: 4px;
  right: -3px;
  width: 4px;
  height: 8px;
  background-color: #ffeb3b;
  border: 1px solid #000;
}

.headlight-glow {
  position: absolute;
  top: -20px;
  left: 3px;
  width: 80px;
  height: 50px;
  background: linear-gradient(to right, rgba(255, 235, 96, 0.4) 0%, rgba(255, 235, 96, 0) 100%);
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 60%);
  pointer-events: none;
  display: none;
}
.headlight-glow.active { display: block; }

/* Carpet Rack */
.carpet-container {
  position: absolute;
  bottom: 12px;
  right: 40px;
  width: 72px;
  height: 72px;
  cursor: pointer;
  z-index: 12;
}

.carpet-rack-frame {
  width: 100%;
  height: 100%;
  border: 4px solid #4c566a;
  border-bottom: none;
  position: relative;
}
.carpet-rack-frame::before, .carpet-rack-frame::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 4px;
  height: 12px;
  background-color: #4c566a;
}
.carpet-rack-frame::before { left: -8px; transform: rotate(-30deg); }
.carpet-rack-frame::after { right: -8px; transform: rotate(30deg); }

.carpet-hanging {
  position: absolute;
  top: 4px;
  left: 12px;
  width: 48px;
  height: 54px;
  background-color: #8f3835;
  border: 3px solid #000;
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  overflow: hidden;
  transition: transform 0.15s ease-in-out;
}
.carpet-hanging.hit { animation: shakeCarpet 0.15s steps(2) 2; }

@keyframes shakeCarpet {
  0%, 100% { transform: rotate(0); }
  50% { transform: rotate(2deg) translateY(-2px); }
}

.carpet-pattern {
  width: 100%;
  height: 100%;
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 4px, #4d1c1a 4px, #4d1c1a 8px),
    radial-gradient(circle, #eecfbe 2px, transparent 2px);
  background-size: 100% 100%, 8px 8px;
}

/* Dust particles */
.dust-particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background-color: rgba(200, 200, 200, 0.6);
  pointer-events: none;
  z-index: 100;
  animation: floatDust 1.5s forwards linear;
}

@keyframes floatDust {
  0% { transform: translate(0, 0) scale(1); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1.5); opacity: 0; }
}

/* Street Lamp */
.street-lamp-container {
  position: absolute;
  bottom: 16px;
  right: 25%;
  z-index: 12;
}

.street-lamp {
  width: 8px;
  height: 160px;
  background-color: #2c3e50;
  border: 3px solid var(--color-concrete-seam);
  position: relative;
  transition: border-color 1s ease;
}

.lamp-head {
  position: absolute;
  top: -12px;
  left: -20px;
  width: 32px;
  height: 12px;
  background-color: #2c3e50;
  border: 3px solid var(--color-concrete-seam);
  border-radius: 4px 4px 0 0;
  transition: border-color 1s ease;
}
.lamp-head::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 4px;
  width: 18px;
  height: 4px;
  background-color: #fffbc7;
  box-shadow: 0 0 15px #ffe875;
}
body.theme-day .lamp-head::after {
  background-color: #bbb;
  box-shadow: none;
}

.light-cone {
  position: absolute;
  top: 0;
  left: -60px;
  width: 112px;
  height: 160px;
  background: linear-gradient(to bottom, rgba(255, 251, 199, 0.25) 0%, rgba(255, 251, 199, 0.02) 80%, transparent 100%);
  clip-path: polygon(45% 0%, 55% 0%, 100% 100%, 0% 100%);
  pointer-events: none;
  animation: flickerLight 10s infinite steps(2);
}
body.theme-day .light-cone { display: none; }

@keyframes flickerLight {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: 0.85; }
}

/* ==========================================================================
   BUTTONS & UI PANELS
   ========================================================================== */
.ui-container {
  position: absolute;
  top: 20px;
  width: 100%;
  max-width: 800px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 0 20px;
  z-index: 100;
}

.control-panel {
  background-color: rgba(20, 20, 22, 0.9);
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.control-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.control-row .label {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: var(--color-term-text-dim);
  width: 55px;
}

.pixel-btn {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #fff;
  background-color: #333;
  border: 3px solid #000;
  box-shadow: inset -2px -2px 0 #111, inset 2px 2px 0 #666;
  padding: 4px 6px;
  cursor: pointer;
  outline: none;
}
.pixel-btn:hover {
  background-color: #444;
  box-shadow: inset -2px -2px 0 #222, inset 2px 2px 0 #888;
}
.pixel-btn:active, .pixel-btn.active {
  background-color: #222;
  border-color: #000;
  box-shadow: inset 2px 2px 0 #000, inset -2px -2px 0 #444;
  color: var(--color-term-text);
}

.ambient-btn { font-size: 8px; padding: 8px 10px; }

/* ==========================================================================
   INTERIOR VIEW OF LOBBY (ПОДЪЕЗД)
   ========================================================================== */
.interior-view {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: #17241c;
  z-index: 800;
  display: none;
  justify-content: center;
  align-items: center;
  transition: opacity 0.5s ease;
  opacity: 0;
}

.interior-view.active {
  display: flex;
  opacity: 1;
}

.exit-lobby-btn {
  position: absolute;
  top: 20px;
  left: 20px;
  padding: 10px 14px;
  font-size: 9px;
  z-index: 810;
}

.lobby-scene {
  position: relative;
  width: 90%;
  max-width: 520px;
  height: 380px;
  background-color: #2c4235;
  border: 6px solid #000;
  box-shadow: 0 0 40px rgba(0,0,0,0.6);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  padding-bottom: 24px;
}

.lobby-wall-texture {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: 
    linear-gradient(to bottom, #dcdfd9 160px, #1e2f24 160px, #1e2f24 166px, transparent 166px),
    repeating-linear-gradient(to right, rgba(0,0,0,0.03), rgba(0,0,0,0.03) 20px, transparent 20px, transparent 80px);
  pointer-events: none;
  z-index: 1;
}

/* Mailboxes */
.mailboxes-box {
  width: 180px;
  background-color: #697368;
  padding: 12px;
  z-index: 5;
  margin-bottom: 20px;
}
.mailboxes-box h3 {
  font-size: 9px;
  text-align: center;
  margin-bottom: 12px;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
}

.mailboxes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 10px;
}

.mailbox {
  height: 48px;
  border: 3px solid #000;
  background-color: #3b423a;
  position: relative;
  cursor: pointer;
  overflow: visible;
}

.mailbox-door {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #4a5449;
  border-right: 3px solid #333;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 4px;
  z-index: 3;
  transition: transform 0.3s ease;
  transform-origin: left center;
}

.mailbox.open .mailbox-door {
  transform: rotateY(-110deg);
  box-shadow: 5px 0 10px rgba(0,0,0,0.5);
}

.mailbox-slot {
  width: 80%;
  height: 4px;
  background-color: #000;
  align-self: center;
}

.mailbox-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #fff;
  align-self: flex-end;
}

.mailbox-letter {
  position: absolute;
  top: 8px;
  left: 4px;
  width: 90%;
  z-index: 2;
}
.mailbox-letter a {
  font-family: 'Press Start 2P', monospace;
  font-size: 5px;
  color: #fff;
  background-color: #8f2323;
  padding: 4px 2px;
  display: block;
  text-align: center;
  text-decoration: none;
  box-shadow: 2px 2px 0 #000;
}
.mailbox-letter a:hover { background-color: #b82d2d; }

/* Fuse Box */
.fusebox-box {
  width: 180px;
  height: 200px;
  background-color: #3d3e42;
  z-index: 5;
  margin-bottom: 20px;
  position: relative;
}

.fusebox-door-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #55575c;
  border: 3px solid #000;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8;
  cursor: pointer;
  transition: transform 0.4s ease;
  transform-origin: left center;
}

.fusebox-box.open .fusebox-door-container {
  transform: rotateY(-100deg);
  box-shadow: 5px 0 15px rgba(0,0,0,0.5);
}

.lightning-ico { font-size: 24px; color: #ffc107; display: block; text-align: center; margin-bottom: 6px; }
.warning-txt { font-family: 'Press Start 2P', monospace; font-size: 7px; color: #fff; }

.fusebox-panel {
  width: 100%;
  height: 100%;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.fusebox-panel h3 {
  font-size: 7px;
  text-align: center;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
}

.breakers-grid { display: flex; flex-direction: column; gap: 8px; }
.breaker { display: flex; justify-content: space-between; align-items: center; }
.breaker-label { font-size: 9px; color: #c5c8c6; }

.switch {
  width: 24px;
  height: 14px;
  background-color: #bf616a;
  border: 2px solid #000;
  position: relative;
  cursor: pointer;
}
.switch-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background-color: #d8dee9;
  border: 1px solid #000;
  transition: left 0.1s ease;
}
.switch.active { background-color: #a3be8c; }
.switch.active .switch-toggle { left: 10px; }

.lobby-radiator {
  position: absolute;
  bottom: 0;
  left: 42%;
  width: 72px;
  height: 40px;
  background-image: repeating-linear-gradient(to right, #4c566a, #4c566a 6px, #000 6px, #000 10px);
  border: 3px solid #000;
  border-bottom: none;
  z-index: 3;
}

/* ==========================================================================
   SNAKE GAME DESIGN
   ========================================================================== */
.snake-game-wrapper {
  background-color: #0b0f14;
  margin-bottom: 20px;
  padding: 10px;
}

.snake-game-wrapper h4 {
  color: var(--color-term-text);
  margin-bottom: 8px;
  font-size: 8px;
  text-align: center;
}

.snake-layout {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
}

#snake-canvas {
  background-color: #05070a;
  border: 3px solid var(--color-term-border);
}

.snake-panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}

.score-lbl { font-size: 11px; }
#snake-score { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--color-term-text); }
.controls-lbl { font-size: 8px; color: #777; }

/* ==========================================================================
   SOVIET ROOM INTERIOR STYLING (Apt 1)
   ========================================================================== */
.soviet-room {
  position: relative;
  width: 100%;
  height: 160px;
  background-color: #dcb38a; /* Soft wallpaper color */
  border: 4px solid #000;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  overflow: hidden;
}

/* Wall rug */
.room-wall-rug {
  width: 120px;
  height: 70px;
  background-color: #8c1e18; /* Rug red */
  border: 4px double #d4af37; /* Gold border */
  box-shadow: 2px 2px 5px rgba(0,0,0,0.3);
  background-image: 
    repeating-linear-gradient(45deg, transparent, transparent 3px, #4d100c 3px, #4d100c 6px),
    radial-gradient(circle, #f5cba7 1px, transparent 1px);
  background-size: 100% 100%, 6px 6px;
}

.room-table {
  width: 100%;
  height: 45px;
  background-color: #5c3a21; /* Wooden table top */
  border-top: 3px solid #000;
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 6px;
}
.room-table::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: rgba(255,255,255,0.15); /* Table highlight */
}

/* Steaming Tea Cup */
.tea-cup-container {
  position: relative;
  width: 16px;
  height: 16px;
  cursor: help;
}

.tea-cup {
  width: 12px;
  height: 8px;
  background-color: #f3f3f3; /* Porcelain cup */
  border: 1.5px solid #000;
  border-radius: 0 0 3px 3px;
  position: absolute;
  bottom: 0;
  left: 2px;
}
.tea-cup::after {
  content: "";
  position: absolute;
  top: 1px;
  right: -3px;
  width: 4px;
  height: 4px;
  border: 1.5px solid #000;
  border-left: none;
  border-radius: 0 2px 2px 0;
}

/* Steam animation waves */
.tea-steam {
  position: absolute;
  top: -12px;
  left: 4px;
  width: 8px;
  height: 12px;
  display: flex;
  justify-content: space-between;
}
.tea-steam span {
  width: 1.5px;
  height: 6px;
  background-color: rgba(255,255,255,0.4);
  animation: steamDrift 1.5s infinite linear;
}
.tea-steam span:nth-child(2) { animation-delay: 0.5s; }
.tea-steam span:nth-child(3) { animation-delay: 1s; }

@keyframes steamDrift {
  0% { transform: translateY(6px) scaleX(0.8); opacity: 0; }
  50% { opacity: 0.6; }
  100% { transform: translateY(-4px) scaleX(1.2); opacity: 0; }
}

/* Photo Album biography */
.photo-album {
  width: 32px;
  height: 24px;
  background-color: #7d2626; /* Velvet cover */
  border: 2px solid #000;
  box-shadow: 2px 2px 0 #000;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.15s ease-out;
}
.photo-album:hover {
  transform: translateY(-2px);
}

.album-cover {
  font-family: 'Press Start 2P', monospace;
  font-size: 4px;
  color: #d4af37;
  text-align: center;
  line-height: 1.2;
}

/* Biography Pages sliding book effect */
.biography-pages-container {
  min-height: 110px;
  background-color: #1c1c21;
  border: 3px solid var(--color-term-border);
  padding: 12px;
}

.bio-page.hidden {
  display: none;
}

.next-page-btn {
  margin-top: 10px;
  align-self: flex-start;
}

/* ==========================================================================
   ROTARY TELEPHONE INTERFACE (Apt 10)
   ========================================================================== */
.soviet-hallway {
  display: flex;
  gap: 20px;
  background-color: #3b2c23; /* Dark corridor wallpaper */
  border: 4px solid #000;
  padding: 16px;
}

.dresser {
  width: 180px;
  height: 160px;
  background-color: #4a2c11; /* Polished wood cabinet */
  border: 4px solid #000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-top: 24px;
}
.dresser::before {
  content: "";
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 20px;
  background-image: repeating-linear-gradient(to right, #000, #000 4px, transparent 4px, transparent 12px); /* Cabinet lines */
  border-top: 3px solid #000;
}

.rotary-phone-container {
  position: relative;
  width: 130px;
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.phone-cradle {
  width: 40px;
  height: 12px;
  background-color: #111;
  border: 3px solid #000;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}

.phone-handset {
  width: 110px;
  height: 18px;
  background-color: #111;
  border: 3px solid #000;
  border-radius: 10px;
  position: absolute;
  top: -10px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.5);
  z-index: 5;
}

.phone-base {
  width: 90px;
  height: 75px;
  background-color: #1a1a1a; /* Black bakelite phone */
  border: 3px solid #000;
  border-radius: 12px 12px 6px 6px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.phone-dial {
  width: 60px;
  height: 60px;
  background-color: #eee;
  border: 3px solid #000;
  border-radius: 50%;
  position: relative;
  transform: rotate(0deg);
  transition: transform 0.6s cubic-bezier(0.25, 0.1, 0.25, 1);
  cursor: pointer;
}

.dial-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background-color: #111;
  border-radius: 50%;
  z-index: 4;
}

.dial-holes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hole {
  position: absolute;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  width: 12px;
  height: 12px;
  background-color: #fff;
  border: 1.5px solid #000;
  border-radius: 50%;
  font-family: monospace;
  font-size: 8px;
  color: #000;
  text-align: center;
  line-height: 10px;
  font-weight: bold;
  cursor: pointer;
  z-index: 5;
}

/* Phone Display output */
.phone-display {
  flex-grow: 1;
  background-color: #0d0e10;
  border: 3px solid var(--color-term-border);
  padding: 10px;
  min-height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.phone-msg { font-size: 8px; color: var(--color-term-text-dim); }
.phone-number { font-family: 'Press Start 2P', monospace; font-size: 14px; margin: 10px 0; color: #fff; text-align: center; }
.phone-results { font-size: 11px; line-height: 1.4; color: var(--color-term-text); }

/* ==========================================================================
   RUBIN TV MODAL STYLING (Apt 2)
   ========================================================================== */
.tv-modal-content {
  background-color: #1a1510;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.rubin-tv-frame {
  width: 360px;
  height: 220px;
  background: 
    linear-gradient(to right, #5c3a21 0%, #4a2e1a 100%); /* Wooden cabinet */
  border: 6px solid #000;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.4);
  padding: 12px;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: center;
}

.tv-screen-bezel {
  width: 240px;
  height: 172px;
  background-color: #2b2b2b; /* Plastic bezel */
  border: 5px solid #000;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}

#tv-canvas {
  width: 100%;
  height: 100%;
  background-color: #0b0f14;
}

.tv-glass-glare {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 20%, transparent 20%, transparent 40%, rgba(255,255,255,0.03) 40%, transparent 60%);
  pointer-events: none;
  z-index: 5;
}

.tv-control-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  padding: 6px 0;
}

.tv-knobs-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.tv-knobs-wrapper span {
  font-family: 'Press Start 2P', monospace;
  font-size: 4px;
  color: #ccc;
}

.tv-knob {
  width: 22px;
  height: 22px;
  background-color: #333;
  border: 3px solid #000;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s steps(4);
}
.tv-knob::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 6px;
  background-color: #fff; /* Knob line marker */
}

.tv-grill {
  width: 44px;
  height: 38px;
  background-image: repeating-linear-gradient(to bottom, #000, #000 3px, transparent 3px, transparent 6px); /* Speaker grill */
}

.tv-power-btn {
  width: 14px;
  height: 14px;
  background-color: #cc2929; /* Red power button */
  border: 2px solid #000;
  border-radius: 50%;
  cursor: pointer;
  outline: none;
  box-shadow: inset -1px -1px 0 #666;
}
.tv-power-btn:active {
  background-color: #8a1f1f;
  box-shadow: inset 1px 1px 0 #000;
}

/* ==========================================================================
   ELEKTRONIKA HANDHELD GAME (Ну, погоди!)
   ========================================================================== */
.game-modal-content {
  background-color: #2b303c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.elektronika-console {
  width: 380px;
  height: 240px;
  background-color: #bdc3c7; /* Aluminium body color */
  border: 6px solid #000;
  border-radius: 20px;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.5), inset -5px -5px 0 #7f8c8d, inset 5px 5px 0 #fff;
  padding: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.console-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}

.console-screen-bezel {
  width: 100%;
  height: 130px;
  background-color: #34495e; /* Blue plastic screen rim */
  border: 4px solid #000;
  border-radius: 8px;
  padding: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
}

#game-canvas {
  background-color: #a3be8c; /* Liquid crystal greenish gray screen */
  border: 3px solid #000;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
}

.console-controls {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.control-side {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.game-control-btn {
  width: 28px;
  height: 28px;
  background-color: #e74c3c; /* Red action button */
  border: 3px solid #000;
  border-radius: 50%;
  color: #fff;
  font-weight: bold;
  font-size: 10px;
  cursor: pointer;
  box-shadow: inset -2px -2px 0 #7f0000;
  outline: none;
}
.game-control-btn:active {
  background-color: #c0392b;
  box-shadow: inset 2px 2px 0 #000;
}

.control-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.game-stats {
  display: flex;
  gap: 12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 6px;
  color: #333;
}

.game-keys-hint {
  font-size: 9px;
  color: #999;
  text-align: center;
  margin-top: 15px;
}

/* ==========================================================================
   RETRO CRT TERMINAL MODALS
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 90%;
  max-width: 500px;
  background-color: var(--color-term-bg);
  color: var(--color-term-text);
  z-index: 1001;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.modal.active {
  opacity: 1;
  pointer-events: all;
  transform: translate(-50%, -50%) scale(1);
}

.pixel-border {
  border: 4px solid #000;
  box-shadow: 
    0 -4px 0 -2px #555, 0 4px 0 -2px #555, -4px 0 0 -2px #555, 4px 0 0 -2px #555,
    inset -4px -4px 0 0 #222, inset 4px 4px 0 0 #777;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #222;
  border-bottom: 4px solid #000;
  padding: 8px 12px;
}

.modal-title {
  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  color: #fff;
}

.close-btn {
  background: none;
  border: none;
  color: #ff3b30;
  font-family: 'Press Start 2P', monospace;
  font-size: 14px;
  cursor: pointer;
  line-height: 1;
}
.close-btn:hover { color: #ff6b62; }

.modal-content {
  position: relative;
  padding: 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.crt-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    rgba(18, 16, 16, 0) 0%,
    rgba(0, 0, 0, 0.15) 50%,
    rgba(18, 16, 16, 0) 100%
  );
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 10;
}

.modal-content::-webkit-scrollbar { width: 8px; }
.modal-content::-webkit-scrollbar-track { background: #111; }
.modal-content::-webkit-scrollbar-thumb { background: var(--color-term-text-dim); border: 2px solid #111; }

h3 { font-family: 'Press Start 2P', monospace; font-size: 10px; margin-bottom: 12px; color: #fff; }
h4 { font-family: 'Press Start 2P', monospace; font-size: 8px; margin-bottom: 10px; color: #fff; }
p { line-height: 1.6; font-size: 12px; margin-bottom: 15px; }

.cmd { color: var(--color-term-text-dim); font-weight: bold; margin-bottom: 8px; }
.pixel-hr { border: none; border-top: 4px dashed var(--color-term-border); margin: 15px 0; }
.pixel-link { color: #64ffda; text-decoration: none; font-weight: bold; }
.pixel-link:hover { text-decoration: underline; color: #a4ffee; }

/* Character Preview */
.character-preview { display: flex; gap: 16px; margin-bottom: 15px; align-items: center; }

.pixel-avatar {
  width: 64px;
  height: 64px;
  background-color: #333;
  border: 4px solid var(--color-term-text-dim);
  background: linear-gradient(to bottom, #d4a373 0%, #d4a373 100%);
  background-size: 100% 100%;
  position: relative;
  flex-shrink: 0;
}
.pixel-avatar::before {
  content: "";
  position: absolute;
  top: 12px;
  left: 8px;
  width: 48px;
  height: 24px;
  background: 
    linear-gradient(to right, #000 12px, transparent 12px, transparent 20px, #000 20px, #000 32px, transparent 32px, transparent 40px, #000 40px),
    linear-gradient(to right, #64ffda 12px, transparent 12px, transparent 20px, #64ffda 20px, #64ffda 32px, transparent 32px, transparent 40px, #64ffda 40px);
  background-size: 100% 4px, 100% 8px;
  background-position: 0 0, 0 4px;
  background-repeat: no-repeat;
}
.pixel-avatar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 16px;
  background-color: #1a1a1a;
}

/* Projects list inside modal */
.projects-list { display: flex; flex-direction: column; gap: 12px; }
.pixel-border-subtle { border: 3px solid var(--color-term-border); padding: 10px; background-color: rgba(255,255,255,0.02); }
.project-header { display: flex; justify-content: space-between; margin-bottom: 6px; }
.project-title { font-family: 'Press Start 2P', monospace; font-size: 8px; color: #fff; }
.project-tag { font-size: 10px; color: var(--color-term-text-dim); }
.project-desc { font-size: 11px; margin-bottom: 8px; color: #ccc; }

/* Skills list inside modal */
.skills-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.skill-category h4 { border-bottom: 2px solid var(--color-term-border); padding-bottom: 6px; margin-bottom: 8px; }
.skill-category ul { list-style: none; }
.skill-category li { font-size: 11px; margin-bottom: 6px; position: relative; padding-left: 12px; }
.skill-category li::before { content: ">"; position: absolute; left: 0; color: var(--color-term-text-dim); }

.battery-indicator { display: flex; gap: 4px; background-color: #111; padding: 4px; border: 2px solid var(--color-term-border); width: fit-content; margin-top: 10px; }
.battery-cell { width: 14px; height: 18px; background-color: #222; }
.battery-cell.active { background-color: var(--color-term-text); box-shadow: 0 0 4px var(--color-term-text); }

/* Contacts list inside modal */
.contacts-links { list-style: none; margin-bottom: 20px; }
.contacts-links li { margin-bottom: 12px; font-size: 12px; }
.contacts-links .label { color: var(--color-term-text-dim); margin-right: 8px; }
.blink-cursor { font-weight: bold; animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ==========================================================================
   RESPONSIVE DESIGN (SCALING THE SCENE)
   ========================================================================== */
@media (max-width: 480px) {
  .scene {
    padding-bottom: 70px;
  }
  .ui-container { padding: 0 10px; }
  .control-panel { transform: scale(0.85); transform-origin: top left; }
  .elektronika-console, .rubin-tv-frame { transform: scale(0.8); }
}

@media (max-width: 380px) {
  .elektronika-console, .rubin-tv-frame { transform: scale(0.65); }
}

/* Phone Buttons Styling */
.phone-btn-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 12px;
}
.phone-btn-row .pixel-btn {
  font-size: 6px;
  padding: 4px 6px;
  color: #fff;
  border-width: 2px;
  box-shadow: none;
}
.phone-btn-row .call-btn {
  background-color: #2e7d32;
  border-color: #1b5e20;
}
.phone-btn-row .call-btn:hover {
  background-color: #388e3c;
}
.phone-btn-row .reset-btn {
  background-color: #c62828;
  border-color: #8e2424;
}
.phone-btn-row .reset-btn:hover {
  background-color: #d32f2f;
}

/* Thermometer DOOM Casing and screen styles */
#modal-thermometer {
  max-width: 600px;
}

.hidden {
  display: none !important;
}

.thermometer-modal-content {
  background-color: #2b303c;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
  gap: 16px;
}

.thermometer-keys-hint {
  width: 100%;
  max-width: 520px;
  background-color: #1a1d24;
  border: 3px solid #000;
  padding: 12px;
  box-sizing: border-box;
}

.thermometer-keys-hint p {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #fff;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.thermometer-keys-hint ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.thermometer-keys-hint li {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: #a3be8c; /* Terminal green */
  margin-bottom: 4px;
}

.thermometer-keys-hint li span {
  color: #ffeb3b; /* Yellow for keys */
  font-weight: bold;
}

.thermometer-device {
  width: 520px;
  height: 400px;
  background-color: #ecf0f1; /* White plastic casing */
  border: 5px solid #000;
  border-radius: 20px;
  box-shadow: 10px 10px 0 rgba(0,0,0,0.5), inset -5px -5px 0 #bdc3c7, inset 5px 5px 0 #fff;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  box-sizing: border-box;
}

.thermometer-body-casing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.thermometer-tip {
  position: absolute;
  left: -25px;
  top: 50%;
  transform: translateY(-50%);
  width: 25px;
  height: 32px;
  background-color: #bdc3c7; /* Metal sensor tip */
  border: 4px solid #000;
  border-right: none;
  border-radius: 8px 0 0 8px;
}

.thermometer-display-wrapper {
  width: 100%;
  height: 280px; /* Height increased to hold the cropped screen */
  background-color: #7f8c8d; /* Grey screen rim */
  border: 4px solid #000;
  border-radius: 8px;
  padding: 8px;
  box-sizing: border-box;
}

.thermometer-screen {
  width: 100%;
  height: 100%;
  background-color: #a3be8c; /* Green LCD display */
  border: 3px solid #000;
  box-shadow: inset 2px 2px 5px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.temp-view {
  text-align: center;
  color: #1a1a1a;
  font-family: 'Press Start 2P', monospace;
}

.temp-digits {
  font-size: 32px;
  font-weight: bold;
}

.temp-unit {
  font-size: 20px;
  margin-left: 6px;
}

.temp-status {
  font-size: 10px;
  margin-top: 14px;
  color: #2b5e2b;
}

.doom-iframe-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000;
}

.doom-iframe-container iframe {
  width: 100%;
  height: 100%;
  border: none;
}

.thermometer-controls {
  display: flex;
  gap: 20px;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.thermometer-btn.power-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #3498db; /* Blue power button */
  border: 3px solid #000;
  cursor: pointer;
  box-shadow: inset -2px -2px 0 #2980b9;
  outline: none;
}
.thermometer-btn.power-btn:active {
  background-color: #2980b9;
  box-shadow: inset 2px 2px 0 #000;
}

.thermometer-hack-btn {
  font-size: 9px;
  padding: 8px 16px;
}

/* Scaling thermometer modal on mobile */
@media (max-width: 480px) {
  .thermometer-device {
    transform: scale(0.72);
  }
}

/* Fishing Dialogue Modal styles */
.fishing-modal-content {
  background-color: #3b2f2f; /* Cozy wallpaper color */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px;
  gap: 16px;
}

.fishing-scene-wrapper {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  box-sizing: border-box;
}

.fishing-visual {
  width: 100%;
  height: 160px;
  background-color: #221a1a;
  border: 4px solid #000;
  position: relative;
  overflow: hidden;
  box-shadow: inset 4px 4px 0 rgba(0,0,0,0.4);
}

/* Window with moon in room */
.fishing-visual::before {
  content: "";
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 60px;
  background-color: #191432; /* Night sky */
  border: 3px solid #4a2c11; /* Wood frame */
  box-shadow: inset 2px 2px 0 rgba(0,0,0,0.5);
}

/* Floor */
.fishing-visual::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35px;
  background-color: #5c3a21; /* Wooden floor boards */
  border-top: 3px solid #000;
  background-image: repeating-linear-gradient(to right, transparent, transparent 40px, rgba(0,0,0,0.15) 40px, rgba(0,0,0,0.15) 42px);
}

/* Father (Батя) */
.fishing-father {
  position: absolute;
  bottom: 30px;
  left: 80px;
  width: 36px;
  height: 64px;
  background-color: #2e7d32; /* Green coat */
  border: 4px solid #000;
  border-radius: 4px;
  z-index: 5;
}
.fishing-father::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 4px;
  width: 20px;
  height: 18px;
  background-color: #e5a982; /* Face skin */
  border: 4px solid #000;
  border-radius: 2px;
}
.fishing-father::after {
  content: "";
  position: absolute;
  top: -28px;
  left: 0px;
  width: 28px;
  height: 10px;
  background-color: #4e4e4e; /* Ushanka Hat */
  border: 4px solid #000;
  border-radius: 4px 4px 0 0;
}

/* Son (Сын) */
.fishing-son {
  position: absolute;
  bottom: 30px;
  right: 80px;
  width: 28px;
  height: 48px;
  background-color: #d32f2f; /* Red sweater */
  border: 4px solid #000;
  border-radius: 3px;
  z-index: 5;
}
.fishing-son::before {
  content: "";
  position: absolute;
  top: -15px;
  left: 2px;
  width: 16px;
  height: 15px;
  background-color: #e5a982;
  border: 4px solid #000;
  border-radius: 2px;
}

/* Bucket */
.fishing-bucket {
  position: absolute;
  bottom: 30px;
  left: 135px;
  width: 20px;
  height: 20px;
  background-color: #7f8c8d; /* Metal bucket */
  border: 4px solid #000;
  border-radius: 0 0 6px 6px;
  z-index: 6;
  cursor: pointer;
}
.fishing-bucket::before {
  content: "";
  position: absolute;
  top: -6px;
  left: -2px;
  width: 20px;
  height: 6px;
  background-color: #555; /* Handle */
  border: 2px solid #000;
  border-bottom: none;
  border-radius: 50% 50% 0 0;
}

/* Dialogue Box styling */
.dialogue-box {
  width: 100%;
  background-color: #0d0e10;
  border: 3px solid #333336;
  padding: 12px;
  min-height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.dialogue-speaker {
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  color: #ffeb3b;
  margin-bottom: 6px;
}

.dialogue-text {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: #fff;
  margin-bottom: 8px;
}

.next-dialogue-btn {
  font-size: 8px;
  padding: 5px 10px;
  align-self: flex-end;
}

/* Animations for speaking bouncy effect */
.fishing-father.talking, .fishing-son.talking {
  animation: talkBounce 0.4s infinite alternate;
}

@keyframes talkBounce {
  0% { transform: translateY(0); }
  100% { transform: translateY(-3px); }
}

/* Fishing room window styling for building facade */
.fishing-room-window {
  width: 100%;
  height: 100%;
  background-color: #3b2f2f;
  background-image: 
    linear-gradient(to right, rgba(0,0,0,0.3) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,0.3) 1px, transparent 1px);
  background-size: 6px 6px;
}

/* Red Basin and Catfish styles */
.fishing-basin {
  position: absolute;
  bottom: 30px;
  right: 25px;
  width: 24px;
  height: 12px;
  background-color: #d32f2f; /* Red basin */
  border: 3px solid #000;
  border-radius: 0 0 8px 8px;
  z-index: 6;
  cursor: pointer;
  transition: transform 0.3s ease, top 0.3s ease, left 0.3s ease;
}

.fishing-basin::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 24px;
  height: 2px;
  background-color: #ff5252; /* Basin rim */
  border: 3px solid #000;
  border-radius: 50%;
}

.fishing-catfish {
  position: absolute;
  top: -7px;
  left: 3px;
  width: 12px;
  height: 8px;
  background-color: #4e342e; /* Catfish grey-brown */
  border: 2px solid #000;
  border-radius: 50% 50% 0 0;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Whiskers */
.fishing-catfish::before {
  content: "";
  position: absolute;
  top: 3px;
  left: -4px;
  width: 6px;
  height: 2px;
  background-color: #e0a96d;
  box-shadow: 10px 0 0 #e0a96d;
}

/* Catfish Speech Bubble (cancelling out the 4.5x scale factor) */
.catfish-speech-bubble {
  position: absolute;
  bottom: 150%;
  left: 50%;
  transform: translateX(-50%) scale(0.22);
  transform-origin: bottom center;
  background-color: #fff;
  color: #000;
  border: 2px solid #000;
  padding: 3px 6px;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.catfish-speech-bubble::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 4px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
.catfish-speech-bubble::before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: #000 transparent transparent transparent;
  z-index: -1;
}

/* Zoomed State */
.fishing-basin.zoomed {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  bottom: auto !important;
  right: auto !important;
  transform: translate(-50%, -50%) scale(4.5);
  z-index: 100;
}

.fishing-basin.zoomed .fishing-catfish {
  opacity: 1;
}

.fishing-basin.zoomed .catfish-speech-bubble {
  opacity: 1;
  animation: bubbleWiggle 0.5s infinite alternate;
}

@keyframes bubbleWiggle {
  0% { transform: translateX(-50%) scale(0.22) translateY(0); }
  100% { transform: translateX(-50%) scale(0.22) translateY(-2px); }
}