/* ============================================
   Room Templates - 14 Maniac Mansion-style environments
   Bright, colorful, clearly distinct rooms
   ============================================ */

.room-bg {
  position: absolute;
  inset: 0;
}

/* ================================================
   1. TITLE SCREEN - Stars + darkness
   ================================================ */
.room-title {
  --bg: #0a0a14;
}

.room-title .room-bg {
  background: linear-gradient(to bottom, #0a0a14 0%, #0a0a14 40%, #0e1025 75%, #141432 100%);
}

/* --- Cityscape silhouette --- */
.cityscape {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    /* Ground strip */
    linear-gradient(#060610, #060610) no-repeat 0 530px / 100% 10px,

    /* Near layer - darkest, shortest foreground */
    linear-gradient(#080812, #080812) no-repeat 0px 420px / 65px 120px,
    linear-gradient(#080812, #080812) no-repeat 130px 395px / 55px 145px,
    linear-gradient(#080812, #080812) no-repeat 250px 385px / 50px 155px,
    linear-gradient(#080812, #080812) no-repeat 400px 405px / 60px 135px,
    linear-gradient(#080812, #080812) no-repeat 490px 395px / 45px 145px,
    linear-gradient(#080812, #080812) no-repeat 600px 415px / 55px 125px,
    linear-gradient(#080812, #080812) no-repeat 720px 400px / 50px 140px,
    linear-gradient(#080812, #080812) no-repeat 830px 392px / 60px 148px,
    linear-gradient(#080812, #080812) no-repeat 1000px 402px / 55px 138px,
    linear-gradient(#080812, #080812) no-repeat 1120px 415px / 60px 125px,
    linear-gradient(#080812, #080812) no-repeat 1210px 435px / 70px 105px,

    /* Mid layer */
    linear-gradient(#0c0c18, #0c0c18) no-repeat 60px 350px / 75px 190px,
    linear-gradient(#0c0c18, #0c0c18) no-repeat 180px 315px / 65px 225px,
    linear-gradient(#0c0c18, #0c0c18) no-repeat 335px 305px / 70px 235px,
    linear-gradient(#0c0c18, #0c0c18) no-repeat 520px 325px / 60px 215px,
    linear-gradient(#0c0c18, #0c0c18) no-repeat 640px 340px / 80px 200px,
    linear-gradient(#0c0c18, #0c0c18) no-repeat 770px 315px / 60px 225px,
    linear-gradient(#0c0c18, #0c0c18) no-repeat 930px 330px / 80px 210px,
    linear-gradient(#0c0c18, #0c0c18) no-repeat 1060px 345px / 65px 195px,

    /* Far layer - lightest, tallest skyline */
    linear-gradient(#10101e, #10101e) no-repeat 280px 230px / 55px 310px,
    linear-gradient(#10101e, #10101e) no-repeat 440px 250px / 80px 290px,
    linear-gradient(#10101e, #10101e) no-repeat 580px 210px / 50px 330px,
    linear-gradient(#10101e, #10101e) no-repeat 700px 260px / 70px 280px,
    linear-gradient(#10101e, #10101e) no-repeat 860px 240px / 60px 300px,

    /* Antenna spires */
    linear-gradient(#10101e, #10101e) no-repeat 603px 198px / 2px 12px,
    linear-gradient(#10101e, #10101e) no-repeat 888px 230px / 2px 10px;
}

/* Steady windows - always lit */
.cityscape::before {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  top: 0;
  left: 0;
  pointer-events: none;
  box-shadow:
    /* Far building 1 (x:280) */
    290px 252px 0 0 #ffcc00,
    318px 252px 0 0 #cc9900,
    304px 292px 0 0 #ffcc00,
    290px 372px 0 0 #cc9900,
    318px 452px 0 0 #ffcc00,
    /* Far building 2 (x:440) */
    452px 272px 0 0 #ffcc00,
    500px 272px 0 0 #cc9900,
    476px 312px 0 0 #ffcc00,
    500px 392px 0 0 #cc9900,
    452px 452px 0 0 #ffcc00,
    /* Far building 3 (x:580) */
    590px 234px 0 0 #ffcc00,
    614px 274px 0 0 #cc9900,
    590px 354px 0 0 #ffcc00,
    614px 434px 0 0 #ffcc00,
    /* Far building 4 (x:700) */
    712px 282px 0 0 #ffcc00,
    748px 282px 0 0 #cc9900,
    730px 362px 0 0 #ffcc00,
    712px 442px 0 0 #cc9900,
    /* Far building 5 (x:860) */
    872px 262px 0 0 #ffcc00,
    900px 302px 0 0 #cc9900,
    872px 382px 0 0 #ffcc00,
    900px 462px 0 0 #ffcc00,
    /* Mid buildings */
    192px 338px 0 0 #cc9900,
    224px 378px 0 0 #cc9900,
    347px 328px 0 0 #cc9900,
    383px 368px 0 0 #cc9900,
    652px 364px 0 0 #cc9900,
    700px 404px 0 0 #cc9900,
    942px 352px 0 0 #cc9900,
    990px 392px 0 0 #cc9900;
}

/* Flickering windows - old game CRT feel */
.cityscape::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 4px;
  top: 0;
  left: 0;
  pointer-events: none;
  animation: window-flicker 6s steps(1) infinite;
  box-shadow:
    304px 252px 0 0 #ffdd44,
    318px 332px 0 0 #ffcc00,
    290px 452px 0 0 #ffdd44,
    476px 272px 0 0 #ffdd44,
    452px 352px 0 0 #ffcc00,
    500px 452px 0 0 #ffdd44,
    614px 234px 0 0 #ffdd44,
    590px 314px 0 0 #ffcc00,
    614px 394px 0 0 #ffdd44,
    748px 322px 0 0 #ffdd44,
    712px 402px 0 0 #ffcc00,
    900px 262px 0 0 #ffdd44,
    872px 342px 0 0 #ffcc00,
    900px 422px 0 0 #ffdd44,
    532px 348px 0 0 #ffdd44,
    782px 338px 0 0 #ffdd44,
    1072px 368px 0 0 #ffdd44;
}

@keyframes window-flicker {
  0%   { opacity: 0.9; }
  8%   { opacity: 0; }
  14%  { opacity: 0.9; }
  38%  { opacity: 0; }
  44%  { opacity: 0.9; }
  60%  { opacity: 0; }
  66%  { opacity: 0.9; }
  83%  { opacity: 0; }
  90%  { opacity: 0.9; }
}

.star-field {
  position: absolute;
  width: 2px;
  height: 2px;
  top: 0;
  left: 0;
  box-shadow:
    120px 40px 0 0 #aaa, 250px 80px 0 0 #ccc, 400px 30px 0 0 #999,
    550px 110px 0 0 #bbb, 700px 50px 0 0 #aaa, 850px 90px 0 0 #ddd,
    1000px 35px 0 0 #999, 1100px 100px 0 0 #bbb, 1200px 60px 0 0 #aaa,
    80px 150px 0 0 #888, 300px 180px 0 0 #aaa, 500px 200px 0 0 #999,
    650px 160px 0 0 #ccc, 900px 190px 0 0 #aaa, 1050px 170px 0 0 #bbb,
    150px 250px 0 0 #999, 450px 280px 0 0 #aaa, 750px 240px 0 0 #ddd,
    950px 270px 0 0 #999, 1150px 230px 0 0 #aaa, 50px 320px 0 0 #bbb,
    350px 350px 0 0 #999, 600px 310px 0 0 #aaa, 800px 340px 0 0 #ccc,
    1080px 330px 0 0 #999, 200px 400px 0 0 #aaa, 480px 380px 0 0 #888,
    720px 410px 0 0 #bbb, 1000px 390px 0 0 #aaa, 30px 70px 0 0 #bbb,
    180px 120px 0 0 #999, 620px 85px 0 0 #ccc, 1180px 150px 0 0 #aaa,
    350px 35px 0 0 #999, 820px 15px 0 0 #aaa, 1050px 65px 0 0 #888,
    50px 220px 0 0 #aaa, 280px 260px 0 0 #ddd, 1220px 290px 0 0 #999;
  pointer-events: none;
  animation: star-twinkle 4s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* ================================================
   2. EXTERIOR - UCF building at dusk/night
   Bright enough to see -- classic approach shot
   ================================================ */
.room-exterior .room-bg {
  background:
    /* Moon */
    radial-gradient(circle 16px at 90% 8%, rgba(255,255,230,0.95), rgba(255,255,230,0.3) 50%, transparent 100%),
    radial-gradient(circle 60px at 90% 8%, rgba(200,200,240,0.15), transparent),

    /* Palm tree left - fronds (crown at ~79, 95) */
    linear-gradient(130deg, #1c6426 0%, #1c6426 40%, transparent 40%) no-repeat 0px 95px / 85px 55px,
    linear-gradient(145deg, #2a7a35 0%, #2a7a35 44%, transparent 44%) no-repeat 5px 67px / 82px 66px,
    linear-gradient(165deg, #1e6828 0%, #1e6828 46%, transparent 46%) no-repeat 22px 50px / 62px 82px,
    linear-gradient(190deg, #2e8838 0%, #2e8838 46%, transparent 46%) no-repeat 55px 47px / 48px 85px,
    linear-gradient(220deg, #247a30 0%, #247a30 40%, transparent 40%) no-repeat 76px 63px / 55px 70px,
    radial-gradient(circle 10px at 79px 92px, #1a5a22, transparent),
    /* Palm tree left - trunk */
    linear-gradient(to right, #6a5030, #7a6040 50%, #6a5030) no-repeat 73px 95px / 12px 230px,

    /* Palm tree right - fronds (crown at ~1134, 82) */
    linear-gradient(230deg, #1c6426 0%, #1c6426 40%, transparent 40%) no-repeat 1128px 82px / 85px 55px,
    linear-gradient(215deg, #2a7a35 0%, #2a7a35 44%, transparent 44%) no-repeat 1126px 54px / 82px 66px,
    linear-gradient(195deg, #1e6828 0%, #1e6828 46%, transparent 46%) no-repeat 1129px 37px / 62px 82px,
    linear-gradient(170deg, #2e8838 0%, #2e8838 46%, transparent 46%) no-repeat 1110px 35px / 48px 85px,
    linear-gradient(140deg, #247a30 0%, #247a30 40%, transparent 40%) no-repeat 1082px 50px / 55px 70px,
    radial-gradient(circle 10px at 1134px 79px, #1a5a22, transparent),
    /* Palm tree right - trunk */
    linear-gradient(to right, #6a5030, #7a6040 50%, #6a5030) no-repeat 1128px 82px / 12px 242px,

    /* Building - lit windows row 1 (symmetric around facade center x=620) */
    radial-gradient(ellipse 55px 40px at 382px 165px, rgba(255,200,80,0.25), transparent),
    radial-gradient(ellipse 55px 40px at 530px 165px, rgba(255,200,80,0.25), transparent),
    radial-gradient(ellipse 55px 40px at 710px 165px, rgba(255,200,80,0.25), transparent),
    radial-gradient(ellipse 55px 40px at 858px 165px, rgba(255,200,80,0.25), transparent),
    linear-gradient(#eebb44, #ddaa30) no-repeat 358px 148px / 48px 32px,
    linear-gradient(#eebb44, #ddaa30) no-repeat 506px 148px / 48px 32px,
    linear-gradient(#eebb44, #ddaa30) no-repeat 686px 148px / 48px 32px,
    linear-gradient(#eebb44, #ddaa30) no-repeat 834px 148px / 48px 32px,

    /* Building - lit windows row 2 */
    linear-gradient(#dda830, #cc9920) no-repeat 358px 220px / 48px 32px,
    linear-gradient(#dda830, #cc9920) no-repeat 506px 220px / 48px 32px,
    linear-gradient(#cc9920, #bb8810) no-repeat 686px 220px / 48px 32px,
    linear-gradient(#dda830, #cc9920) no-repeat 834px 220px / 48px 32px,

    /* Window dividers (cross in each window) */
    linear-gradient(#8a7a50, #8a7a50) no-repeat 380px 162px / 2px 20px,
    linear-gradient(#8a7a50, #8a7a50) no-repeat 364px 155px / 36px 2px,
    linear-gradient(#8a7a50, #8a7a50) no-repeat 528px 162px / 2px 20px,
    linear-gradient(#8a7a50, #8a7a50) no-repeat 512px 155px / 36px 2px,
    linear-gradient(#8a7a50, #8a7a50) no-repeat 708px 162px / 2px 20px,
    linear-gradient(#8a7a50, #8a7a50) no-repeat 692px 155px / 36px 2px,
    linear-gradient(#8a7a50, #8a7a50) no-repeat 856px 162px / 2px 20px,
    linear-gradient(#8a7a50, #8a7a50) no-repeat 840px 155px / 36px 2px,

    /* Building - entrance glow */
    radial-gradient(ellipse 50px 70px at 620px 290px, rgba(255,210,120,0.3), transparent),
    /* Building - entrance door */
    linear-gradient(#4a2a10, #3a1a08) no-repeat 592px 256px / 56px 74px,
    /* Entrance frame + arch */
    linear-gradient(#b09870, #b09870) no-repeat 586px 248px / 68px 6px,
    linear-gradient(#b09870, #b09870) no-repeat 586px 248px / 6px 82px,
    linear-gradient(#b09870, #b09870) no-repeat 648px 248px / 6px 82px,

    /* Building - columns (symmetric around x=620) */
    linear-gradient(to right, #a08a68, #b09a78 50%, #a08a68) no-repeat 292px 130px / 16px 198px,
    linear-gradient(to right, #a08a68, #b09a78 50%, #a08a68) no-repeat 457px 130px / 16px 198px,
    linear-gradient(to right, #a08a68, #b09a78 50%, #a08a68) no-repeat 767px 130px / 16px 198px,
    linear-gradient(to right, #a08a68, #b09a78 50%, #a08a68) no-repeat 932px 130px / 16px 198px,

    /* Building - roof cornice */
    linear-gradient(#7a6a50, #8a7a60) no-repeat 270px 118px / 700px 14px,
    /* Building - pediment */
    linear-gradient(#8a7a60, #7a6a50) no-repeat 500px 100px / 240px 20px,
    linear-gradient(#907a60, #8a7a58) no-repeat 540px 94px / 160px 10px,

    /* Building - main facade */
    linear-gradient(to bottom, #8a7060, #7a6050) no-repeat 280px 130px / 680px 200px,
    /* Brick texture overlay */
    repeating-linear-gradient(
      to bottom,
      transparent 0px, transparent 14px,
      rgba(0,0,0,0.08) 14px, rgba(0,0,0,0.08) 16px
    ) no-repeat 280px 130px / 680px 200px,

    /* Steps */
    linear-gradient(#8a8070, #7a7060) no-repeat 520px 328px / 200px 8px,
    linear-gradient(#807868, #706858) no-repeat 540px 336px / 160px 6px,

    /* Walkway */
    linear-gradient(#5a5e58, #4a4e48) no-repeat 460px 342px / 320px 200px,

    /* Ground - grass */
    linear-gradient(to bottom, #2a5a2a, #1a4a1a) no-repeat 0 320px / 100% 220px,

    /* Sky */
    linear-gradient(to bottom, #0a0a2a 0%, #14143a 30%, #1e1e48 55%, #282850 72%, #2a3a2a 88%);
}

/* ================================================
   3. LECTURE HALL - Bright auditorium feel
   Warm wood tones, visible seats, bright screen
   ================================================ */
.room-lecture-hall .room-bg {
  background:
    /* Projector beam (visible) */
    linear-gradient(175deg, rgba(220,220,240,0.08) 0%, transparent 60%) no-repeat 500px 0 / 300px 200px,

    /* Projection screen */
    linear-gradient(#d8d4cc, #ccc8c0) no-repeat 290px 20px / 660px 8px,
    linear-gradient(#f0ece4, #e8e4dc) no-repeat 300px 28px / 640px 350px,
    /* Screen shadow */
    linear-gradient(rgba(0,0,0,0.2), transparent) no-repeat 300px 378px / 640px 20px,

    /* Podium */
    linear-gradient(to right, #7a6a5a, #8a7a6a 50%, #7a6a5a) no-repeat 570px 380px / 100px 60px,
    linear-gradient(#8a7a6a, #8a7a6a) no-repeat 560px 374px / 120px 8px,

    /* Seat rows - warm red upholstery, visible wood backs */
    linear-gradient(#8a6a58, #8a6a58) no-repeat 100px 430px / 1080px 6px,
    linear-gradient(#6a3030, #5a2828) no-repeat 100px 436px / 1080px 18px,
    linear-gradient(#8a6a58, #8a6a58) no-repeat 60px 466px / 1160px 6px,
    linear-gradient(#6a3030, #5a2828) no-repeat 60px 472px / 1160px 18px,
    linear-gradient(#8a6a58, #8a6a58) no-repeat 20px 502px / 1240px 6px,
    linear-gradient(#6a3030, #5a2828) no-repeat 20px 508px / 1240px 22px,

    /* Seat armrests */
    repeating-linear-gradient(to right, transparent 0px, transparent 56px, #9a8a70 56px, #9a8a70 60px) no-repeat 100px 430px / 1080px 24px,
    repeating-linear-gradient(to right, transparent 0px, transparent 56px, #9a8a70 56px, #9a8a70 60px) no-repeat 60px 466px / 1160px 24px,
    repeating-linear-gradient(to right, transparent 0px, transparent 56px, #9a8a70 56px, #9a8a70 60px) no-repeat 20px 502px / 1240px 28px,

    /* Ceiling light */
    radial-gradient(ellipse 400px 80px at 50% 0%, rgba(220,210,180,0.15), transparent),

    /* Stage floor */
    linear-gradient(#5a4e3e, #5a4e3e) no-repeat 0 408px / 100% 4px,

    /* Walls - warm tan/beige, clearly visible */
    linear-gradient(to bottom, #8a7e6e 0%, #7a6e5e 60%, #5a4e3e 62%, #4a3e2e);
}

/* ================================================
   4. DATA CENTER - Dense blue-lit hardware stacks
   Rows of tall racks, blinking status LEDs
   ================================================ */
.room-data-center .room-bg {
  background:
    /* Overhead blue glow strips (cold aisle lighting) */
    radial-gradient(ellipse 300px 100px at 25% 0%, rgba(60,150,240,0.18), transparent),
    radial-gradient(ellipse 300px 100px at 75% 0%, rgba(60,150,240,0.18), transparent),
    linear-gradient(rgba(40,120,220,0.06), transparent) no-repeat 0 0 / 100% 12px,

    /* === LEFT WALL RACKS === */

    /* Rack 1 - tall full rack */
    linear-gradient(#42424f, #38384a) no-repeat 20px 16px / 90px 370px,
    repeating-linear-gradient(to bottom, #50506a 0px, #50506a 14px, #3c3c52 14px, #3c3c52 16px, #44445c 16px, #44445c 30px, #3c3c52 30px, #3c3c52 32px) no-repeat 26px 22px / 78px 358px,
    /* Rack 1 - drive bay faces */
    linear-gradient(#555570, #4a4a62) no-repeat 30px 24px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 30px 40px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 30px 56px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 30px 72px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 30px 88px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 30px 104px / 50px 12px,

    /* Rack 2 */
    linear-gradient(#46465a, #3a3a4e) no-repeat 120px 16px / 90px 370px,
    repeating-linear-gradient(to bottom, #52526c 0px, #52526c 14px, #3e3e54 14px, #3e3e54 16px, #46465e 16px, #46465e 30px, #3e3e54 30px, #3e3e54 32px) no-repeat 126px 22px / 78px 358px,
    /* Rack 2 - drive bays */
    linear-gradient(#585872, #4c4c64) no-repeat 130px 24px / 50px 12px,
    linear-gradient(#585872, #4c4c64) no-repeat 130px 40px / 50px 12px,
    linear-gradient(#585872, #4c4c64) no-repeat 130px 56px / 50px 12px,
    linear-gradient(#585872, #4c4c64) no-repeat 130px 72px / 50px 12px,

    /* Rack 3 - half-height networking gear */
    linear-gradient(#40404e, #36364a) no-repeat 220px 180px / 90px 206px,
    repeating-linear-gradient(to bottom, #4e4e66 0px, #4e4e66 18px, #3a3a50 18px, #3a3a50 20px) no-repeat 226px 186px / 78px 194px,
    /* Patch panel ports */
    linear-gradient(#333348, #333348) no-repeat 232px 192px / 66px 10px,
    linear-gradient(#333348, #333348) no-repeat 232px 214px / 66px 10px,

    /* === RIGHT WALL RACKS === */

    /* Rack 5 */
    linear-gradient(#42424f, #38384a) no-repeat 980px 16px / 90px 370px,
    repeating-linear-gradient(to bottom, #50506a 0px, #50506a 14px, #3c3c52 14px, #3c3c52 16px, #44445c 16px, #44445c 30px, #3c3c52 30px, #3c3c52 32px) no-repeat 986px 22px / 78px 358px,
    linear-gradient(#555570, #4a4a62) no-repeat 990px 24px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 990px 40px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 990px 56px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 990px 72px / 50px 12px,
    linear-gradient(#555570, #4a4a62) no-repeat 990px 88px / 50px 12px,

    /* Rack 6 */
    linear-gradient(#46465a, #3a3a4e) no-repeat 1080px 16px / 90px 370px,
    repeating-linear-gradient(to bottom, #52526c 0px, #52526c 14px, #3e3e54 14px, #3e3e54 16px, #46465e 16px, #46465e 30px, #3e3e54 30px, #3e3e54 32px) no-repeat 1086px 22px / 78px 358px,
    linear-gradient(#585872, #4c4c64) no-repeat 1090px 24px / 50px 12px,
    linear-gradient(#585872, #4c4c64) no-repeat 1090px 40px / 50px 12px,
    linear-gradient(#585872, #4c4c64) no-repeat 1090px 56px / 50px 12px,

    /* Rack 7 - half-height right */
    linear-gradient(#40404e, #36364a) no-repeat 1180px 180px / 90px 206px,
    repeating-linear-gradient(to bottom, #4e4e66 0px, #4e4e66 18px, #3a3a50 18px, #3a3a50 20px) no-repeat 1186px 186px / 78px 194px,

    /* === CABLE TRAYS === */
    linear-gradient(#555, #555) no-repeat 0 10px / 100% 3px,
    linear-gradient(#4a4a55, #4a4a55) no-repeat 0 390px / 100% 3px,
    /* Vertical cable runs between racks */
    linear-gradient(#333348, #333348) no-repeat 115px 10px / 3px 376px,
    linear-gradient(#333348, #333348) no-repeat 975px 10px / 3px 376px,

    /* Raised floor tiles */
    repeating-linear-gradient(to right, #1a2030 0px, #1a2030 58px, #222a3a 58px, #222a3a 62px) no-repeat 0 396px / 100% 120px,
    repeating-linear-gradient(to right, #1e2434 0px, #1e2434 58px, #262e40 58px, #262e40 62px) no-repeat 0 440px / 100% 80px,

    /* Room - cold blue walls */
    linear-gradient(to bottom, #2a3650 0%, #243048 55%, #1a2030 65%);
}

/* Data center blinking LEDs */
.room-data-center .room-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Left rack 1 LEDs */
    radial-gradient(circle 3px at 84px 30px, #0f0, transparent),
    radial-gradient(circle 3px at 84px 46px, #0f0, transparent),
    radial-gradient(circle 3px at 84px 62px, #0f0, transparent),
    radial-gradient(circle 3px at 84px 78px, #0f0, transparent),
    radial-gradient(circle 3px at 84px 94px, #ff4, transparent),
    radial-gradient(circle 3px at 84px 110px, #0f0, transparent),
    radial-gradient(circle 3px at 100px 30px, #0af, transparent),
    radial-gradient(circle 3px at 100px 46px, #0af, transparent),
    radial-gradient(circle 3px at 100px 62px, #0f0, transparent),
    /* Left rack 2 LEDs */
    radial-gradient(circle 3px at 184px 30px, #0f0, transparent),
    radial-gradient(circle 3px at 184px 46px, #f44, transparent),
    radial-gradient(circle 3px at 184px 62px, #0f0, transparent),
    radial-gradient(circle 3px at 184px 78px, #0f0, transparent),
    radial-gradient(circle 3px at 200px 30px, #0af, transparent),
    radial-gradient(circle 3px at 200px 46px, #0af, transparent),
    radial-gradient(circle 3px at 200px 62px, #0af, transparent),
    /* Left rack 3 LEDs */
    radial-gradient(circle 3px at 284px 198px, #0f0, transparent),
    radial-gradient(circle 3px at 284px 220px, #ff4, transparent),
    radial-gradient(circle 3px at 300px 198px, #0af, transparent),
    /* Right rack 5 LEDs */
    radial-gradient(circle 3px at 1044px 30px, #0f0, transparent),
    radial-gradient(circle 3px at 1044px 46px, #0f0, transparent),
    radial-gradient(circle 3px at 1044px 62px, #ff4, transparent),
    radial-gradient(circle 3px at 1044px 78px, #0f0, transparent),
    radial-gradient(circle 3px at 1044px 94px, #0f0, transparent),
    radial-gradient(circle 3px at 1060px 30px, #0af, transparent),
    radial-gradient(circle 3px at 1060px 46px, #0af, transparent),
    /* Right rack 6 LEDs */
    radial-gradient(circle 3px at 1144px 30px, #0f0, transparent),
    radial-gradient(circle 3px at 1144px 46px, #0f0, transparent),
    radial-gradient(circle 3px at 1144px 62px, #0f0, transparent),
    radial-gradient(circle 3px at 1160px 30px, #f44, transparent),
    radial-gradient(circle 3px at 1160px 46px, #0af, transparent),
    /* Right rack 7 LEDs */
    radial-gradient(circle 3px at 1244px 198px, #0f0, transparent),
    radial-gradient(circle 3px at 1244px 220px, #0f0, transparent);
  animation: ledBlink 1.8s steps(1) infinite;
  pointer-events: none;
}

@keyframes ledBlink {
  0%   { opacity: 1; }
  45%  { opacity: 1; }
  50%  { opacity: 0.3; }
  55%  { opacity: 1; }
  80%  { opacity: 1; }
  85%  { opacity: 0.5; }
  90%  { opacity: 1; }
}

/* Second LED layer with offset timing */
.room-data-center .room-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    /* Scattered activity LEDs - different blink phase */
    radial-gradient(circle 2px at 92px 140px, #f80, transparent),
    radial-gradient(circle 2px at 92px 170px, #f80, transparent),
    radial-gradient(circle 2px at 92px 200px, #0f0, transparent),
    radial-gradient(circle 2px at 192px 110px, #f80, transparent),
    radial-gradient(circle 2px at 192px 140px, #0f0, transparent),
    radial-gradient(circle 2px at 192px 170px, #f80, transparent),
    radial-gradient(circle 2px at 1052px 110px, #f80, transparent),
    radial-gradient(circle 2px at 1052px 140px, #0f0, transparent),
    radial-gradient(circle 2px at 1052px 170px, #f80, transparent),
    radial-gradient(circle 2px at 1152px 110px, #f80, transparent),
    radial-gradient(circle 2px at 1152px 140px, #f80, transparent),
    radial-gradient(circle 2px at 1152px 170px, #0f0, transparent);
  animation: ledBlink2 2.4s steps(1) infinite;
  pointer-events: none;
}

@keyframes ledBlink2 {
  0%   { opacity: 0.4; }
  15%  { opacity: 1; }
  30%  { opacity: 1; }
  35%  { opacity: 0.3; }
  50%  { opacity: 1; }
  70%  { opacity: 1; }
  75%  { opacity: 0.5; }
  90%  { opacity: 1; }
}

/* ================================================
   5. ARCHIVE - Warm amber library with filing cabinets
   Rich brown/amber tones, clearly lit
   ================================================ */
.room-archive .room-bg {
  background:
    /* Warm lamp glow */
    radial-gradient(ellipse 280px 340px at 80% 30%, rgba(255,190,90,0.2), transparent),

    /* Filing cabinet 1 */
    linear-gradient(#8a7a60, #7a6a50) no-repeat 40px 60px / 80px 300px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 44px 68px / 72px 60px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 44px 138px / 72px 60px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 44px 208px / 72px 60px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 44px 278px / 72px 60px,
    /* Drawer handles */
    linear-gradient(#ccb888, #ccb888) no-repeat 68px 92px / 20px 4px,
    linear-gradient(#ccb888, #ccb888) no-repeat 68px 162px / 20px 4px,
    linear-gradient(#ccb888, #ccb888) no-repeat 68px 232px / 20px 4px,
    linear-gradient(#ccb888, #ccb888) no-repeat 68px 302px / 20px 4px,

    /* Filing cabinet 2 */
    linear-gradient(#8a7a60, #7a6a50) no-repeat 140px 80px / 80px 280px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 144px 88px / 72px 56px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 144px 154px / 72px 56px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 144px 220px / 72px 56px,
    linear-gradient(#9a8a70, #8a7a60) no-repeat 144px 286px / 72px 56px,

    /* Reading table */
    linear-gradient(#8a7a58, #7a6a48) no-repeat 300px 340px / 660px 12px,
    linear-gradient(#7a6a48, #6a5a38) no-repeat 300px 352px / 660px 40px,

    /* Desk lamp on table */
    radial-gradient(circle 40px at 920px 330px, rgba(255,210,120,0.4), transparent),
    linear-gradient(#aa8840, #aa8840) no-repeat 916px 310px / 8px 30px,

    /* Dusty shelf on right wall */
    linear-gradient(#7a6a50, #6a5a40) no-repeat 1020px 80px / 220px 8px,
    linear-gradient(#7a6a50, #6a5a40) no-repeat 1020px 180px / 220px 8px,
    linear-gradient(#7a6a50, #6a5a40) no-repeat 1020px 280px / 220px 8px,

    /* Baseboard */
    linear-gradient(#6a5a40, #6a5a40) no-repeat 0 365px / 100% 4px,

    /* Room - warm amber/brown, VISIBLE */
    linear-gradient(to bottom, #6a5840 0%, #5a4830 55%, #4a3820 60%, #3a2a18);
}

/* ================================================
   6. HALLWAY - Portrait hall with adventure game heroes
   Warm tan walls, gold frames, red carpet
   ================================================ */
.room-hallway .room-bg {
  background:
    /* Gallery picture lights (warm glow above each portrait) */
    radial-gradient(ellipse 80px 50px at 125px 30px, rgba(255,220,140,0.15), transparent),
    radial-gradient(ellipse 70px 45px at 440px 45px, rgba(255,220,140,0.12), transparent),
    radial-gradient(ellipse 70px 45px at 840px 45px, rgba(255,220,140,0.12), transparent),
    radial-gradient(ellipse 80px 50px at 1155px 30px, rgba(255,220,140,0.15), transparent),

    /* ---- PORTRAIT 1: Sir Graham (King's Quest) ---- */
    /* Brass nameplate (above frame, outside frame area) */
    linear-gradient(#c8a848, #b89838) no-repeat 80px 242px / 90px 14px,
    /* Face */
    linear-gradient(#d4a878, #c89868) no-repeat 100px 102px / 34px 40px,
    /* Red adventurer's cap */
    linear-gradient(#c83030, #b02828) no-repeat 96px 82px / 48px 22px,
    linear-gradient(#d03838, #c83030) no-repeat 108px 72px / 24px 14px,
    /* Feather on cap */
    linear-gradient(#e8d840, #d8c830) no-repeat 138px 70px / 4px 20px,
    /* Hair (sides) */
    linear-gradient(#8a6830, #7a5820) no-repeat 96px 100px / 8px 28px,
    linear-gradient(#8a6830, #7a5820) no-repeat 130px 100px / 8px 28px,
    /* Blue tunic */
    linear-gradient(#3060b0, #2850a0) no-repeat 96px 144px / 42px 50px,
    /* Canvas (covers frame interior) */
    linear-gradient(#1e3828, #162e20) no-repeat 62px 52px / 126px 171px,
    /* Frame inner (border shows around canvas) */
    linear-gradient(#d4b050, #c8a040) no-repeat 54px 44px / 142px 187px,
    /* Frame outer (border shows around inner) */
    linear-gradient(#c8a040, #b89030) no-repeat 50px 40px / 150px 195px,

    /* ---- PORTRAIT 2: Indiana Jones (Fate of Atlantis) ---- */
    /* Nameplate */
    linear-gradient(#c8a848, #b89838) no-repeat 395px 242px / 90px 14px,
    /* Face */
    linear-gradient(#d4a878, #c89868) no-repeat 418px 112px / 30px 38px,
    /* Eyes */
    linear-gradient(#1a1a2a, #1a1a2a) no-repeat 422px 120px / 6px 5px,
    linear-gradient(#1a1a2a, #1a1a2a) no-repeat 438px 120px / 6px 5px,
    /* Nose */
    linear-gradient(#c08858, #c08858) no-repeat 430px 128px / 6px 8px,
    /* Chin / jaw shadow */
    linear-gradient(#b88050, #b88050) no-repeat 420px 144px / 26px 6px,
    /* 5 o'clock shadow */
    linear-gradient(rgba(80,60,40,0.3), rgba(80,60,40,0.3)) no-repeat 420px 138px / 26px 12px,
    /* Fedora - wide brim */
    linear-gradient(#5a3a1a, #4a2e12) no-repeat 404px 90px / 58px 10px,
    /* Fedora - crown */
    linear-gradient(#6a4420, #5a3818) no-repeat 414px 76px / 38px 16px,
    /* Fedora - band */
    linear-gradient(#3a2810, #3a2810) no-repeat 414px 88px / 38px 4px,
    /* Fedora - hat shadow on face */
    linear-gradient(rgba(40,20,0,0.35), transparent) no-repeat 418px 100px / 30px 16px,
    /* Brown hair (under hat, sides) */
    linear-gradient(#5a3818, #4a2e10) no-repeat 414px 100px / 8px 20px,
    linear-gradient(#5a3818, #4a2e10) no-repeat 444px 100px / 8px 20px,
    /* Brown leather jacket */
    linear-gradient(#6a4420, #5a3818) no-repeat 410px 152px / 46px 46px,
    /* Jacket collar */
    linear-gradient(#7a5430, #6a4420) no-repeat 412px 150px / 42px 8px,
    /* Jacket lapels */
    linear-gradient(#5a3818, #4a2e10) no-repeat 418px 156px / 10px 20px,
    linear-gradient(#5a3818, #4a2e10) no-repeat 438px 156px / 10px 20px,
    /* Khaki shirt showing at collar */
    linear-gradient(#c8b888, #b8a878) no-repeat 428px 154px / 10px 14px,
    /* Whip coil (on right shoulder) */
    linear-gradient(#3a2810, #3a2810) no-repeat 450px 158px / 6px 4px,
    linear-gradient(#3a2810, #3a2810) no-repeat 448px 162px / 8px 3px,
    linear-gradient(#3a2810, #3a2810) no-repeat 450px 165px / 6px 3px,
    /* Canvas - warm brown (adventure/temple tone) */
    linear-gradient(#1e1a14, #181410) no-repeat 387px 72px / 106px 149px,
    /* Frame inner */
    linear-gradient(#d4b050, #c8a040) no-repeat 379px 64px / 122px 167px,
    /* Frame outer */
    linear-gradient(#c8a040, #b89030) no-repeat 375px 60px / 130px 175px,

    /* ---- PORTRAIT 3: Guybrush Threepwood (Monkey Island) ---- */
    /* Nameplate */
    linear-gradient(#c8a848, #b89838) no-repeat 800px 242px / 80px 14px,
    /* Face */
    linear-gradient(#d8b488, #cca878) no-repeat 818px 116px / 28px 34px,
    /* Eyes */
    linear-gradient(#1a1a2a, #1a1a2a) no-repeat 822px 124px / 6px 5px,
    linear-gradient(#1a1a2a, #1a1a2a) no-repeat 836px 124px / 6px 5px,
    /* Nose */
    linear-gradient(#c8a070, #c8a070) no-repeat 830px 132px / 5px 6px,
    /* Grin */
    linear-gradient(#a07050, #a07050) no-repeat 824px 142px / 16px 3px,
    /* Blonde hair top */
    linear-gradient(#d4b040, #c8a430) no-repeat 814px 102px / 38px 18px,
    /* Hair fringe */
    linear-gradient(#dab848, #d4b040) no-repeat 810px 108px / 10px 14px,
    /* Ponytail - flows from behind head down right side */
    linear-gradient(#d4b040, #c8a430) no-repeat 850px 108px / 10px 18px,
    linear-gradient(#c8a430, #c8a430) no-repeat 852px 126px / 8px 20px,
    linear-gradient(#c8a430, #bc9820) no-repeat 854px 146px / 7px 22px,
    linear-gradient(#bc9820, #b08c18) no-repeat 855px 168px / 6px 16px,
    /* Hair tie */
    linear-gradient(#8a2020, #8a2020) no-repeat 853px 124px / 8px 4px,
    /* Goatee */
    linear-gradient(#c0a030, #b89428) no-repeat 828px 150px / 10px 8px,
    /* Blue pirate coat */
    linear-gradient(#2a4a8a, #203e7a) no-repeat 810px 154px / 44px 44px,
    /* Coat collar / white shirt */
    linear-gradient(#e0d8c0, #d4ccb4) no-repeat 822px 154px / 20px 10px,
    /* Canvas (covers frame interior) */
    linear-gradient(#1a1e2e, #141828) no-repeat 787px 72px / 106px 149px,
    /* Frame inner */
    linear-gradient(#d4b050, #c8a040) no-repeat 779px 64px / 122px 167px,
    /* Frame outer */
    linear-gradient(#c8a040, #b89030) no-repeat 775px 60px / 130px 175px,

    /* ---- PORTRAIT 4: Leisure Suit Larry ---- */
    /* Nameplate */
    linear-gradient(#c8a848, #b89838) no-repeat 1110px 242px / 90px 14px,
    /* Face */
    linear-gradient(#c89868, #bc8c58) no-repeat 1130px 104px / 34px 40px,
    /* Eyes */
    linear-gradient(#1a1a2a, #1a1a2a) no-repeat 1134px 114px / 6px 5px,
    linear-gradient(#1a1a2a, #1a1a2a) no-repeat 1152px 114px / 6px 5px,
    /* Big nose */
    linear-gradient(#b88050, #b88050) no-repeat 1142px 120px / 8px 10px,
    /* Smirk */
    linear-gradient(#a06848, #a06848) no-repeat 1136px 136px / 20px 3px,
    /* Bald dome (skin colored) */
    linear-gradient(#c89868, #bc8c58) no-repeat 1130px 88px / 34px 20px,
    /* Dark hair on sides only */
    linear-gradient(#1a1a1a, #101010) no-repeat 1122px 104px / 12px 28px,
    linear-gradient(#1a1a1a, #101010) no-repeat 1160px 104px / 12px 28px,
    /* Mustache */
    linear-gradient(#1a1a1a, #101010) no-repeat 1136px 132px / 20px 4px,
    /* White leisure suit jacket */
    linear-gradient(#e8e8e0, #dcdcd4) no-repeat 1120px 146px / 54px 52px,
    /* V-neck opening showing chest */
    linear-gradient(#b07848, #a06838) no-repeat 1140px 146px / 14px 20px,
    /* Left lapel */
    linear-gradient(#d8d8d0, #ccccbe) no-repeat 1124px 146px / 16px 34px,
    /* Right lapel */
    linear-gradient(#d8d8d0, #ccccbe) no-repeat 1154px 146px / 16px 34px,
    /* Gold chain on chest */
    linear-gradient(#e8c030, #d4a820) no-repeat 1142px 150px / 10px 3px,
    linear-gradient(#e8c030, #d4a820) no-repeat 1140px 153px / 14px 3px,
    /* Pocket square (left breast) */
    linear-gradient(#e84040, #d03030) no-repeat 1126px 150px / 8px 6px,
    /* Canvas (covers frame interior) */
    linear-gradient(#2e1a28, #261420) no-repeat 1092px 52px / 126px 171px,
    /* Frame inner */
    linear-gradient(#d4b050, #c8a040) no-repeat 1084px 44px / 142px 187px,
    /* Frame outer */
    linear-gradient(#c8a040, #b89030) no-repeat 1080px 40px / 150px 195px,

    /* Baseboard */
    linear-gradient(#7a6e50, #7a6e50) no-repeat 0 60% / 100% 4px,

    /* Wood floor */
    repeating-linear-gradient(to right,
      #4a3828 0px, #4a3828 80px, #3e2e1c 80px, #3e2e1c 82px
    ) no-repeat 0 62% / 100% 38%,

    /* Wall - warm tan */
    linear-gradient(to bottom, #7a6e5c, #6a5e4c 62%, #3a3020 64%);
}

/* ================================================
   7. STUDY - Professor's office: desk, books, lamp
   Warm rich browns, clearly visible bookshelf + desk
   ================================================ */
.room-study {
  --wall: #6a4e38;
  --wall-light: #7a5e48;
  --floor: #4a3828;
  --trim: #8a6a48;
}

.room-study .room-bg {
  background:
    /* Desk lamp glow */
    radial-gradient(ellipse 220px 280px at 82% 45%, rgba(255,200,100,0.2), transparent),

    /* Window (right wall) */
    linear-gradient(#2a3060, #1a2050) no-repeat 1040px 40px / 120px 180px,
    /* Window frame */
    linear-gradient(#8a7a58, #8a7a58) no-repeat 1034px 34px / 132px 6px,
    linear-gradient(#8a7a58, #8a7a58) no-repeat 1034px 34px / 6px 192px,
    linear-gradient(#8a7a58, #8a7a58) no-repeat 1160px 34px / 6px 192px,
    linear-gradient(#8a7a58, #8a7a58) no-repeat 1034px 220px / 132px 6px,
    /* Window cross */
    linear-gradient(#8a7a58, #8a7a58) no-repeat 1097px 40px / 4px 180px,
    linear-gradient(#8a7a58, #8a7a58) no-repeat 1040px 126px / 120px 4px,
    /* Moonlight through window */
    radial-gradient(ellipse 120px 140px at 1100px 130px, rgba(160,180,220,0.12), transparent),

    /* Bookshelf (left wall) - shelf boards */
    linear-gradient(var(--trim), #6a4a30) no-repeat 30px 50px / 210px 8px,
    linear-gradient(var(--trim), #6a4a30) no-repeat 30px 140px / 210px 8px,
    linear-gradient(var(--trim), #6a4a30) no-repeat 30px 230px / 210px 8px,
    linear-gradient(var(--trim), #6a4a30) no-repeat 30px 320px / 210px 8px,
    /* Book spines row 1 - bright colorful spines */
    repeating-linear-gradient(to right,
      #a85520 0px, #a85520 10px, #804830 10px, #804830 18px,
      #c06830 18px, #c06830 26px, #4070a0 26px, #4070a0 36px,
      #784028 36px, #784028 44px, #aa8828 44px, #aa8828 52px
    ) no-repeat 36px 58px / 198px 80px,
    /* Book spines row 2 */
    repeating-linear-gradient(to right,
      #906020 0px, #906020 12px, #a85520 12px, #a85520 20px,
      #508050 20px, #508050 30px, #784028 30px, #784028 40px,
      #8a3030 40px, #8a3030 48px, #806030 48px, #806030 56px
    ) no-repeat 36px 148px / 198px 80px,
    /* Book spines row 3 */
    repeating-linear-gradient(to right,
      #7a5030 0px, #7a5030 14px, #aa8828 14px, #aa8828 22px,
      #6a5080 22px, #6a5080 32px, #c06830 32px, #c06830 40px
    ) no-repeat 36px 238px / 198px 80px,
    /* Bookshelf back */
    linear-gradient(#3a2a18, #2e2010) no-repeat 30px 50px / 210px 278px,

    /* Desk surface */
    linear-gradient(to bottom, #8a7a50, #7a6a40) no-repeat 280px 360px / 700px 14px,
    linear-gradient(to bottom, #7a6a40, #6a5a30) no-repeat 280px 374px / 700px 50px,
    /* Desk front panel */
    linear-gradient(#6a5a38, #5a4a28) no-repeat 280px 424px / 700px 30px,
    /* Desk legs */
    linear-gradient(#6a5a38, #6a5a38) no-repeat 290px 454px / 10px 20px,
    linear-gradient(#6a5a38, #6a5a38) no-repeat 970px 454px / 10px 20px,

    /* Desk lamp */
    linear-gradient(#aa8840, #aa8840) no-repeat 940px 340px / 6px 20px,
    radial-gradient(ellipse 30px 12px at 943px 338px, #ccaa44, transparent),

    /* Chair */
    linear-gradient(#5a4228, #4a3218) no-repeat 540px 400px / 60px 70px,
    linear-gradient(#6a5238, #5a4228) no-repeat 535px 394px / 70px 8px,

    /* Wainscoting */
    linear-gradient(var(--trim), var(--trim)) no-repeat 0 60% / 100% 4px,

    /* Wall + floor - warm brown, clearly visible */
    linear-gradient(to bottom, var(--wall-light), var(--wall) 62%, #5a3e28 62%, var(--floor) 65%);
}

/* Study - crisis variant (red-tinted) */
.study-crisis {
  --wall: #6a2e2e;
  --wall-light: #7a3838;
  --floor: #4a2020;
  --trim: #8a4848;
}

/* ================================================
   8. GAME ROOM - 90s PC den with beige CRT + tower
   Teal wallpaper, classic 486-era setup
   ================================================ */
.room-game-room .room-bg {
  background:
    /* Screen glow on wall */
    radial-gradient(ellipse 300px 180px at 580px 200px, rgba(100,180,220,0.08), transparent),

    /* === CPU TOWER (far right) === */
    /* Details listed FIRST so they paint ON TOP of the tower body */

    /* Tower feet */
    linear-gradient(#8a8060, #8a8060) no-repeat 1106px 428px / 20px 4px,
    linear-gradient(#8a8060, #8a8060) no-repeat 1204px 428px / 20px 4px,

    /* Turbo button */
    linear-gradient(#aaa078, #aaa078) no-repeat 1154px 408px / 22px 1px,
    linear-gradient(#c0b48c, #b8ac84) no-repeat 1152px 406px / 26px 10px,

    /* Reset button - small recessed */
    radial-gradient(circle 5px at 1165px 396px, #b8ac84, #a89c78 4px, transparent 5px),

    /* Power symbol on button */
    radial-gradient(circle 4px at 1165px 370px, transparent 3px, #8a7a58 3px, #8a7a58 4px, transparent 4px),
    linear-gradient(#c0b490, #c0b490) no-repeat 1164px 364px / 2px 6px,
    /* Power button - large round */
    radial-gradient(circle 12px at 1165px 370px, #c0b490, #b8ac84 10px, #a89c78 11px, transparent 12px),
    /* Power LED - green */
    radial-gradient(circle 3px at 1130px 370px, #0a0, #080 2px, transparent 3px),
    /* HDD LED - amber */
    radial-gradient(circle 3px at 1130px 382px, #a80, #860 2px, transparent 3px),
    /* LED labels */
    linear-gradient(#b8ac88, #b8ac88) no-repeat 1136px 368px / 16px 4px,
    linear-gradient(#b8ac88, #b8ac88) no-repeat 1136px 380px / 16px 4px,

    /* Ventilation grille */
    repeating-linear-gradient(to bottom, #ccc09c 0px, #ccc09c 3px, #aaa07a 3px, #aaa07a 5px) no-repeat 1110px 260px / 110px 70px,
    /* Grille border */
    linear-gradient(#b8ac88, #b8ac88) no-repeat 1110px 258px / 110px 2px,
    linear-gradient(#b8ac88, #b8ac88) no-repeat 1110px 330px / 110px 2px,

    /* Turbo LED label area */
    linear-gradient(#c8bc98, #c8bc98) no-repeat 1120px 232px / 30px 8px,

    /* "Intel" text area (white stripe on blue) */
    linear-gradient(#e0e0e0, #e0e0e0) no-repeat 1124px 204px / 24px 4px,
    /* Front label (Intel Inside / 486 vibe) */
    linear-gradient(#4868a8, #3858a0) no-repeat 1120px 200px / 44px 16px,
    /* "486" text hint */
    linear-gradient(#8a7a58, #8a7a58) no-repeat 1174px 204px / 28px 4px,
    /* Second sticker - "486" */
    linear-gradient(#c0b490, #b8ac88) no-repeat 1170px 200px / 36px 16px,

    /* Divider line below drives */
    linear-gradient(#b8ac88, #b8ac88) no-repeat 1110px 186px / 110px 2px,

    /* CD LED */
    radial-gradient(circle 2px at 1116px 174px, #880, transparent),
    /* CD tray handle groove */
    linear-gradient(#9a8e6c, #9a8e6c) no-repeat 1130px 168px / 60px 2px,
    /* CD tray seam */
    linear-gradient(#aaa07a, #aaa07a) no-repeat 1112px 162px / 106px 1px,
    /* Eject button */
    linear-gradient(#b4a880, #b4a880) no-repeat 1198px 154px / 14px 10px,
    /* CD-ROM drive */
    linear-gradient(#c8bc94, #c0b48c) no-repeat 1110px 150px / 110px 26px,

    /* Floppy LED */
    radial-gradient(circle 2px at 1116px 136px, #880, transparent),
    /* Floppy slot inner shadow */
    linear-gradient(#111118, #222228) no-repeat 1115px 118px / 80px 4px,
    /* Floppy slot */
    linear-gradient(#222228, #222228) no-repeat 1115px 118px / 80px 14px,
    /* Eject button */
    linear-gradient(#b0a47c, #b0a47c) no-repeat 1198px 122px / 14px 10px,
    /* 3.5" floppy drive */
    linear-gradient(#c8bc94, #c0b48c) no-repeat 1110px 114px / 110px 24px,

    /* Drive activity LED */
    radial-gradient(circle 2px at 1116px 84px, #880, transparent),
    /* 5.25" drive bay lines */
    linear-gradient(#aaa07a, #aaa07a) no-repeat 1112px 74px / 106px 1px,
    linear-gradient(#aaa07a, #aaa07a) no-repeat 1112px 100px / 106px 1px,
    /* Eject button */
    linear-gradient(#b8ac84, #b8ac84) no-repeat 1198px 82px / 14px 10px,
    /* 5.25" drive bay */
    linear-gradient(#c4b890, #bcb088) no-repeat 1110px 72px / 110px 30px,

    /* Tower side edge shadows */
    linear-gradient(#c0b490, #c0b490) no-repeat 1100px 50px / 3px 380px,
    linear-gradient(#c4b894, #c4b894) no-repeat 1227px 50px / 3px 380px,
    /* Tower top highlight */
    linear-gradient(#e4d8b8, #dcd0b0) no-repeat 1100px 46px / 130px 6px,
    /* Tower body (LAST so details paint on top) */
    linear-gradient(to right, #dcd0b0, #d8ccaa 20%, #d0c4a0 80%, #c8bc98) no-repeat 1100px 50px / 130px 380px,

    /* === DESK === */
    linear-gradient(to bottom, #8a7050, #806848) no-repeat 0 430px / 100% 8px,
    linear-gradient(to bottom, #7a6040, #6a5030) no-repeat 0 438px / 100% 102px,
    linear-gradient(to bottom, rgba(0,0,0,0.15), transparent) no-repeat 0 438px / 100% 6px,

    /* === 90s TEAL WALLPAPER === */
    /* Diamond lattice */
    repeating-linear-gradient(45deg,
      transparent 0px, transparent 22px,
      rgba(255,255,255,0.05) 22px, rgba(255,255,255,0.05) 24px
    ),
    repeating-linear-gradient(-45deg,
      transparent 0px, transparent 22px,
      rgba(255,255,255,0.05) 22px, rgba(255,255,255,0.05) 24px
    ),
    /* Subtle horizontal texture */
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 3px,
      rgba(0,0,0,0.04) 3px, rgba(0,0,0,0.04) 4px
    ),
    /* Teal base wall */
    linear-gradient(to bottom, #3a8a82 0%, #2e7a72 50%, #287068 60%);
}

/* CRT bezel on game room images - clean beige rectangle */
/* #room and #objects are siblings, so use ~ combinator */
#room.room-game-room ~ #objects .obj-monitor-screen,
#room.room-game-room ~ #objects .obj-wall-poster {
  border: 16px solid #d4c8a4;
  border-radius: 4px;
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, 0.3),
    0 4px 12px rgba(0, 0, 0, 0.4);
  background: #0e0e18;
  padding: 2px;
  overflow: visible;
}

/* Monitor stand - loads with the bezel */
#room.room-game-room ~ #objects .obj-monitor-screen::after,
#room.room-game-room ~ #objects .obj-wall-poster::after {
  content: '';
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 58px;
  background: linear-gradient(to right, #c8bc98, #d4c8a4 30%, #d0c4a0 70%, #c4b894);
  box-shadow:
    /* Wide base at bottom */
    -45px 52px 0 0 #ccc09c,
    45px 52px 0 0 #ccc09c,
    -30px 52px 0 0 #d0c4a0,
    30px 52px 0 0 #d0c4a0,
    -15px 52px 0 0 #d4c8a4,
    15px 52px 0 0 #d4c8a4,
    0 52px 0 0 #d4c8a4,
    0 56px 4px rgba(0,0,0,0.12);
}

/* Label on screen instead of below stand */
#room.room-game-room ~ #objects .obj-monitor-screen .object-label,
#room.room-game-room ~ #objects .obj-wall-poster .object-label {
  bottom: auto;
  top: 8px;
}

/* ================================================
   8b. THE UNDERGROUND - Neon pink arcade
   Hot pink walls, RGB lighting, sleek black monitor + small PC
   ================================================ */
.room-arcade .room-bg {
  background:
    /* RGB strip glow on ceiling - pink-heavy */
    linear-gradient(to right,
      rgba(255,0,100,0.18), rgba(255,20,120,0.15) 25%,
      rgba(200,0,255,0.12) 50%, rgba(255,0,160,0.14) 75%,
      rgba(255,0,80,0.16)
    ) no-repeat 0 0 / 100% 8px,

    /* Monitor glow on wall - hot pink */
    radial-gradient(ellipse 350px 200px at 540px 180px, rgba(255,40,120,0.14), transparent),

    /* === SMALL MODERN PC (right side) === */

    /* RGB fan glow through tempered glass - pink */
    radial-gradient(circle 18px at 1120px 280px, rgba(255,0,120,0.3), transparent),
    radial-gradient(circle 14px at 1120px 340px, rgba(255,40,180,0.22), transparent),
    /* Tempered glass panel - dark with pink reflection */
    linear-gradient(160deg, rgba(80,20,50,0.2), transparent 60%) no-repeat 1080px 180px / 90px 220px,

    /* PC case body */
    linear-gradient(to right, #1a1018, #22182a 20%, #1e1628 80%, #16101e) no-repeat 1080px 180px / 90px 220px,
    /* Case top */
    linear-gradient(#2a2030, #24182a) no-repeat 1080px 176px / 90px 6px,
    /* Front I/O - power button */
    radial-gradient(circle 4px at 1125px 186px, rgba(255,255,255,0.15), transparent 4px),
    /* Power LED */
    radial-gradient(circle 2px at 1125px 196px, rgba(255,40,120,0.9), transparent 3px),
    /* Front USB ports */
    linear-gradient(#0e0a12, #0e0a12) no-repeat 1110px 200px / 16px 4px,
    linear-gradient(#0e0a12, #0e0a12) no-repeat 1110px 208px / 16px 4px,
    /* Front mesh ventilation */
    repeating-linear-gradient(to bottom,
      #1a1420 0px, #1a1420 2px, #100c16 2px, #100c16 4px
    ) no-repeat 1086px 320px / 78px 60px,
    /* RGB strip on case bottom - hot pink */
    linear-gradient(to right, rgba(255,0,120,0.4), rgba(255,40,180,0.35)) no-repeat 1082px 398px / 86px 2px,
    /* Case feet */
    linear-gradient(#100c16, #100c16) no-repeat 1086px 400px / 14px 4px,
    linear-gradient(#100c16, #100c16) no-repeat 1150px 400px / 14px 4px,

    /* === SLEEK MONITOR === */

    /* Thin bezels - dark black frame */
    linear-gradient(#0a080e, #0a080e) no-repeat 340px 8px / 560px 394px,
    /* Screen area (slightly lighter to show bezel edge) */
    linear-gradient(#101018, #101018) no-repeat 346px 14px / 548px 376px,

    /* Monitor stand neck */
    linear-gradient(to right, #14101e, #1a1428 30%, #18142a 70%, #12101e) no-repeat 590px 402px / 40px 24px,
    /* Monitor base */
    linear-gradient(#18142a, #12101e) no-repeat 550px 424px / 120px 6px,
    linear-gradient(rgba(255,40,120,0.15), transparent) no-repeat 555px 428px / 110px 4px,

    /* === DESK === */
    linear-gradient(#1e1828, #181222) no-repeat 0 430px / 100% 8px,
    /* Desk edge highlight - pink */
    linear-gradient(rgba(255,40,120,0.1), transparent) no-repeat 0 430px / 100% 2px,
    linear-gradient(#141020, #100c18) no-repeat 0 438px / 100% 102px,

    /* Mousepad glow - pink */
    radial-gradient(ellipse 60px 20px at 280px 440px, rgba(255,40,120,0.06), transparent),

    /* === NEON PINK WALLS === */
    /* LED strip along wall bottom - hot pink */
    linear-gradient(to right,
      rgba(255,0,100,0.2), rgba(255,20,120,0.25) 50%, rgba(255,0,100,0.2)
    ) no-repeat 0 426px / 100% 4px,

    /* Wall panels - subtle vertical lines with pink tint */
    linear-gradient(rgba(180,40,100,0.07), rgba(180,40,100,0.07)) no-repeat 320px 0 / 2px 430px,
    linear-gradient(rgba(180,40,100,0.07), rgba(180,40,100,0.07)) no-repeat 640px 0 / 2px 430px,
    linear-gradient(rgba(180,40,100,0.07), rgba(180,40,100,0.07)) no-repeat 960px 0 / 2px 430px,

    /* Neon pink wall + dark floor */
    linear-gradient(to bottom,
      #3a1028 0%, #341026 30%, #2e0e22 55%,
      #1e0a18 62%, #1e0a18 63%,
      #100c16 64%, #0a0810 100%);
}

/* Sleek black monitor bezel for arcade images - high contrast bevel */
#room.room-arcade ~ #objects .obj-monitor-screen,
#room.room-arcade ~ #objects .obj-wall-poster {
  border: 6px solid #0a080e;
  border-top-color: #2a1828;
  border-left-color: #221420;
  border-radius: 2px;
  box-shadow:
    inset 0 0 18px rgba(255,40,120,0.12),
    inset 1px 1px 0 rgba(255,180,220,0.08),
    inset -1px -1px 0 rgba(0,0,0,0.4),
    0 3px 12px rgba(0,0,0,0.6),
    0 0 20px rgba(255,0,100,0.08);
  background: #06040a;
  padding: 2px;
  overflow: visible;
}

/* No monitor stand on arcade (it's in the background) */
#room.room-arcade ~ #objects .obj-monitor-screen::after,
#room.room-arcade ~ #objects .obj-wall-poster::after {
  display: none;
}

/* Label on screen */
#room.room-arcade ~ #objects .obj-monitor-screen .object-label,
#room.room-arcade ~ #objects .obj-wall-poster .object-label {
  bottom: auto;
  top: 8px;
}

/* ================================================
   9. THE FLASH LAB - Strong Bad Email Room
   Flat sage green walls, brown desk, tan carpet
   Homestar Runner / Flash animation aesthetic
   ================================================ */
.room-computer-lab .room-bg {
  background:
    /* Warm overhead glow */
    radial-gradient(circle 60px at 640px 0px, rgba(255,255,210,0.12), transparent),

    /* === WALL DECORATIONS === */

    /* Red pennant / flag - left wall (SB style) */
    linear-gradient(#5a4a30, #5a4a30) no-repeat 100px 55px / 3px 75px,
    linear-gradient(to right, #cc3333 92%, transparent) no-repeat 103px 58px / 70px 13px,
    linear-gradient(to right, #cc3333 80%, transparent) no-repeat 103px 71px / 58px 13px,
    linear-gradient(to right, #cc3333 60%, transparent) no-repeat 103px 84px / 40px 13px,
    linear-gradient(to right, #cc3333 35%, transparent) no-repeat 103px 97px / 22px 10px,

    /* Framed poster - right wall (band poster vibe) */
    linear-gradient(#7a6a40, #7a6a40) no-repeat 1038px 65px / 90px 74px,
    linear-gradient(#e8d8b0, #dcc898) no-repeat 1042px 69px / 82px 66px,
    linear-gradient(#3a5080, #2e4472) no-repeat 1046px 73px / 74px 46px,
    linear-gradient(#c8b880, #c0b070) no-repeat 1046px 119px / 74px 12px,

    /* === DESK - simple flat brown wood === */

    /* Desk surface */
    linear-gradient(#8B6B2A, #826020) no-repeat 250px 390px / 780px 10px,
    /* Desk front panel */
    linear-gradient(#7A5A1E, #6E4E16) no-repeat 250px 400px / 780px 80px,
    /* Under-desk shadow */
    linear-gradient(to bottom, rgba(0,0,0,0.12), transparent) no-repeat 250px 400px / 780px 6px,
    /* Desk legs */
    linear-gradient(#6E4E16, #6E4E16) no-repeat 268px 480px / 12px 60px,
    linear-gradient(#6E4E16, #6E4E16) no-repeat 1000px 480px / 12px 60px,

    /* === FLOOR === */

    /* Baseboard strip */
    linear-gradient(#506840, #4a6238) no-repeat 0 432px / 100% 5px,
    /* Flat tan carpet - Homestar Runner style */
    linear-gradient(#C4A878, #BEA270) no-repeat 0 437px / 100% 103px,

    /* === WALL === */

    /* Flat sage green - THE Strong Bad email room green */
    linear-gradient(#6E9462, #6A9060);
}

/* ================================================
   10. WORKSHOP - Creative maker space, pegboard
   Warm industrial tones, clearly visible tools
   ================================================ */
.room-workshop .room-bg {
  background:
    /* Yellow work light */
    radial-gradient(ellipse 300px 280px at 50% 20%, rgba(255,230,120,0.15), transparent),

    /* Pegboard (back wall - tall enough for scene images) */
    repeating-linear-gradient(to right,
      transparent 0px, transparent 24px,
      rgba(100,90,60,0.2) 24px, rgba(100,90,60,0.2) 28px
    ) no-repeat 270px 8px / 740px 416px,
    repeating-linear-gradient(to bottom,
      transparent 0px, transparent 24px,
      rgba(100,90,60,0.2) 24px, rgba(100,90,60,0.2) 28px
    ) no-repeat 270px 8px / 740px 416px,
    /* Pegboard base color */
    linear-gradient(#6a5a40, #5e5035) no-repeat 270px 8px / 740px 416px,

    /* Hanging tools silhouettes */
    linear-gradient(#4a4030, #4a4030) no-repeat 300px 60px / 6px 40px,
    linear-gradient(#4a4030, #4a4030) no-repeat 300px 40px / 20px 6px,
    linear-gradient(#4a4030, #4a4030) no-repeat 360px 50px / 4px 50px,
    linear-gradient(#4a4030, #4a4030) no-repeat 350px 70px / 24px 6px,
    linear-gradient(#4a4030, #4a4030) no-repeat 920px 55px / 6px 45px,
    linear-gradient(#4a4030, #4a4030) no-repeat 910px 50px / 26px 6px,

    /* Workbench surface */
    linear-gradient(to bottom, #9a8a60, #8a7a50) no-repeat 0 424px / 100% 12px,
    linear-gradient(#8a7a50, #7a6a40) no-repeat 0 436px / 100% 34px,
    /* Bench front */
    linear-gradient(#6a5a38, #5a4a28) no-repeat 0 470px / 100% 16px,
    /* Bench legs */
    linear-gradient(#6a5a38, #6a5a38) no-repeat 40px 486px / 10px 50px,
    linear-gradient(#6a5a38, #6a5a38) no-repeat 1230px 486px / 10px 50px,
    linear-gradient(#6a5a38, #6a5a38) no-repeat 640px 486px / 10px 50px,

    /* Shelf with supplies (left) */
    linear-gradient(#7a6a48, #7a6a48) no-repeat 20px 140px / 180px 8px,
    linear-gradient(#7a6a48, #7a6a48) no-repeat 20px 240px / 180px 8px,
    /* Jars/boxes on shelf */
    linear-gradient(#8a5830, #8a5830) no-repeat 30px 110px / 24px 30px,
    linear-gradient(#6a7a8a, #6a7a8a) no-repeat 60px 115px / 20px 25px,
    linear-gradient(#8a8068, #8a8068) no-repeat 90px 108px / 30px 32px,
    linear-gradient(#7a4828, #7a4828) no-repeat 30px 210px / 28px 30px,
    linear-gradient(#4a6a4a, #4a6a4a) no-repeat 70px 215px / 22px 25px,

    /* Floor - warm concrete */
    linear-gradient(to bottom, #5a5240 0%, #4a4230 55%, #3a3220 60%, #2a2210);
}

/* ================================================
   11. DARK ROOM - Atmospheric void (INTENTIONALLY dark)
   ================================================ */
.room-dark-room .room-bg {
  background:
    /* Subtle fire glow from bottom */
    radial-gradient(ellipse 300px 100px at 30% 100%, rgba(220,100,30,0.08), transparent),
    radial-gradient(ellipse 200px 80px at 70% 100%, rgba(255,140,50,0.05), transparent),
    /* Barely visible wall texture */
    linear-gradient(135deg, #1e1610 0%, transparent 3%) no-repeat 10% 20% / 50px 50px,
    linear-gradient(135deg, #1e1610 0%, transparent 5%) no-repeat 80% 15% / 40px 60px,
    linear-gradient(135deg, #1e1610 0%, transparent 4%) no-repeat 60% 70% / 60px 40px,
    /* Base */
    linear-gradient(to bottom, #0e0a08, #100c0a, #0a0806);
}

/* Fog overlay for dark scenes */
.room-dark-room .fog-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 300px 200px at 20% 60%, rgba(120,120,140,0.08), transparent),
    radial-gradient(ellipse 250px 150px at 80% 40%, rgba(120,120,140,0.06), transparent);
  animation: fog-drift 8s ease-in-out infinite alternate;
  pointer-events: none;
}

@keyframes fog-drift {
  0% { transform: translateX(-20px); opacity: 0.6; }
  100% { transform: translateX(20px); opacity: 1; }
}

/* Fire flicker */
.room-dark-room .fire-overlay,
.room-ruins .fire-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  animation: fire-flicker 3s ease-in-out infinite;
}

@keyframes fire-flicker {
  0%, 100% { background: radial-gradient(ellipse 150px 80px at 30% 95%, rgba(255,120,30,0.06), transparent); }
  33% { background: radial-gradient(ellipse 180px 90px at 32% 95%, rgba(255,140,50,0.08), transparent); }
  66% { background: radial-gradient(ellipse 130px 70px at 28% 95%, rgba(255,100,20,0.04), transparent); }
}

/* ================================================
   12. GALLERY - Clean exhibition space, spotlights
   Bright cream walls, clearly visible
   ================================================ */
.room-gallery .room-bg {
  background:
    /* Spotlights from above */
    radial-gradient(ellipse 180px 350px at 50% 0%, rgba(255,245,210,0.15), transparent),
    radial-gradient(ellipse 100px 250px at 25% 0%, rgba(255,245,210,0.1), transparent),
    radial-gradient(ellipse 100px 250px at 75% 0%, rgba(255,245,210,0.1), transparent),

    /* Crown molding */
    linear-gradient(#bbb8a8, #bbb8a8) no-repeat 0 10px / 100% 4px,
    linear-gradient(#c4c0b0, #c4c0b0) no-repeat 0 14px / 100% 2px,

    /* Wainscoting */
    linear-gradient(#9a9488 0px, #9a9488 2px, #d0c8b8 2px, #d0c8b8 24px, #9a9488 24px, #9a9488 26px, transparent 26px) no-repeat 0 60% / 100% 26px,

    /* Bench (center of gallery) */
    linear-gradient(#6a6050, #5a5040) no-repeat 520px 420px / 240px 12px,
    linear-gradient(#5a5040, #4a4030) no-repeat 520px 432px / 240px 24px,
    linear-gradient(#5a5040, #5a5040) no-repeat 530px 456px / 10px 16px,
    linear-gradient(#5a5040, #5a5040) no-repeat 740px 456px / 10px 16px,

    /* Floor - light hardwood */
    linear-gradient(to bottom,
      #ddd8cc, #d0c8bc 62%,
      #6a6558 62%, #6a6558 62.5%,
      #5a5548 63%, #4a4438);
}

/* Gallery underground variant - Undertale cave aesthetic */
.gallery-underground {
  filter: none;
}

.gallery-underground .room-bg {
  background:
    /* Ceiling crystal stars - scattered glowing blue dots */
    radial-gradient(circle 2px at 80px 18px, rgba(100,180,255,0.7), transparent 3px),
    radial-gradient(circle 1px at 180px 8px, rgba(120,200,255,0.5), transparent 2px),
    radial-gradient(circle 3px at 310px 24px, rgba(80,160,255,0.8), transparent 4px),
    radial-gradient(circle 1px at 420px 12px, rgba(140,210,255,0.5), transparent 2px),
    radial-gradient(circle 2px at 530px 6px, rgba(100,180,255,0.6), transparent 3px),
    radial-gradient(circle 2px at 650px 20px, rgba(120,200,255,0.7), transparent 3px),
    radial-gradient(circle 1px at 750px 10px, rgba(80,160,255,0.5), transparent 2px),
    radial-gradient(circle 3px at 870px 16px, rgba(100,180,255,0.8), transparent 4px),
    radial-gradient(circle 1px at 960px 28px, rgba(140,210,255,0.4), transparent 2px),
    radial-gradient(circle 2px at 1050px 8px, rgba(100,180,255,0.6), transparent 3px),
    radial-gradient(circle 2px at 1150px 22px, rgba(120,200,255,0.7), transparent 3px),
    radial-gradient(circle 1px at 1220px 14px, rgba(80,160,255,0.5), transparent 2px),

    /* Soft blue glow from crystals */
    radial-gradient(ellipse 200px 60px at 310px 20px, rgba(60,120,200,0.12), transparent),
    radial-gradient(ellipse 160px 50px at 870px 16px, rgba(60,120,200,0.10), transparent),

    /* Cave ceiling - jagged rock edge */
    linear-gradient(#1a1028, #1a1028) no-repeat 0 0 / 100% 34px,
    linear-gradient(#1a1028, transparent) no-repeat 0 34px / 100% 12px,

    /* Stalactites */
    linear-gradient(#201430, #201430) no-repeat 140px 34px / 8px 18px,
    linear-gradient(#201430, #201430) no-repeat 390px 34px / 6px 14px,
    linear-gradient(#201430, #201430) no-repeat 680px 34px / 10px 22px,
    linear-gradient(#201430, #201430) no-repeat 950px 34px / 7px 16px,
    linear-gradient(#201430, #201430) no-repeat 1180px 34px / 8px 20px,

    /* Echo flower glow - small blue light patches on ground */
    radial-gradient(circle 12px at 120px 465px, rgba(50,140,220,0.2), transparent),
    radial-gradient(circle 8px at 1100px 470px, rgba(60,150,230,0.15), transparent),
    radial-gradient(circle 10px at 640px 468px, rgba(50,130,210,0.12), transparent),

    /* Purple stone wall texture - column-like segments */
    linear-gradient(#28183a, #28183a) no-repeat 0 44px / 3px 420px,
    linear-gradient(#2a1a3c, #2a1a3c) no-repeat 320px 50px / 3px 414px,
    linear-gradient(#28183a, #28183a) no-repeat 640px 46px / 3px 418px,
    linear-gradient(#2a1a3c, #2a1a3c) no-repeat 960px 48px / 3px 416px,
    linear-gradient(#28183a, #28183a) no-repeat 1277px 44px / 3px 420px,

    /* Waterfall shimmer - vertical blue streak */
    linear-gradient(rgba(40,100,180,0.08), rgba(60,140,220,0.12), rgba(40,100,180,0.06)) no-repeat 1240px 40px / 20px 424px,

    /* Ground path - darker purple rock */
    linear-gradient(#18102a, #18102a) no-repeat 0 464px / 100% 4px,

    /* Purple cave walls + dark floor */
    linear-gradient(to bottom,
      #1e1430 0%, #221838 30%, #261a3c 55%,
      #18102a 62%, #18102a 63%,
      #100c1e 64%, #0c0816 100%);
}

/* Gallery KRZ variant - Kentucky Route Zero aesthetic */
/* Dark theatrical silhouettes, amber lamplight, deep navy void */
.gallery-zero {
  filter: none;
}

.gallery-zero .room-bg {
  background:
    /* Single amber lamp glow - stark dramatic cone */
    radial-gradient(ellipse 120px 400px at 180px 0%, rgba(210,160,60,0.18), transparent),
    /* Distant amber glow far right */
    radial-gradient(ellipse 80px 300px at 1100px 0%, rgba(200,150,50,0.10), transparent),

    /* Telephone pole silhouette - stark black geometric */
    linear-gradient(#080810, #080810) no-repeat 160px 0 / 6px 320px,
    /* Cross beam */
    linear-gradient(#080810, #080810) no-repeat 130px 60px / 66px 4px,
    /* Wires drooping from pole */
    linear-gradient(#0a0a14, #0a0a14) no-repeat 196px 64px / 200px 1px,
    linear-gradient(#0a0a14, #0a0a14) no-repeat 196px 60px / 300px 1px,
    /* Wire sag hint */
    linear-gradient(#0a0a14, #0a0a14) no-repeat 340px 68px / 60px 1px,
    linear-gradient(#0a0a14, #0a0a14) no-repeat 420px 64px / 80px 1px,

    /* Amber lamp fixture on pole */
    radial-gradient(circle 6px at 163px 48px, rgba(220,170,60,0.6), rgba(200,150,40,0.2) 4px, transparent 6px),

    /* Distant telephone poles (silhouettes) */
    linear-gradient(#060610, #060610) no-repeat 900px 20px / 4px 200px,
    linear-gradient(#060610, #060610) no-repeat 878px 50px / 48px 3px,
    linear-gradient(#060610, #060610) no-repeat 1200px 30px / 3px 160px,
    linear-gradient(#060610, #060610) no-repeat 1184px 56px / 36px 2px,

    /* Ground-level amber reflection */
    radial-gradient(ellipse 100px 20px at 170px 462px, rgba(200,150,50,0.08), transparent),

    /* Road / ground line */
    linear-gradient(#0c0c18, #0c0c18) no-repeat 0 460px / 100% 3px,

    /* Roadside gravel texture */
    radial-gradient(circle 1px at 80px 468px, rgba(40,40,50,0.6), transparent 1px),
    radial-gradient(circle 1px at 200px 472px, rgba(40,40,50,0.5), transparent 1px),
    radial-gradient(circle 1px at 500px 470px, rgba(35,35,48,0.5), transparent 1px),
    radial-gradient(circle 1px at 800px 466px, rgba(40,40,55,0.5), transparent 1px),
    radial-gradient(circle 1px at 1050px 474px, rgba(35,35,48,0.4), transparent 1px),

    /* Deep navy-black sky with subtle blue horizon */
    linear-gradient(to bottom,
      #04040c 0%, #06060e 20%, #080812 40%,
      #0a0a18 55%, #0c0c1e 60%,
      #08081a 62%, #08081a 63%,
      #060610 64%, #040408 100%);
}

/* ================================================
   13. RUINS - Destroyed space (INTENTIONALLY dark + fire/fog)
   ================================================ */
.room-ruins .room-bg {
  background:
    /* Distant fire glow */
    radial-gradient(ellipse 400px 200px at 25% 90%, rgba(255,100,30,0.12), transparent),
    radial-gradient(ellipse 300px 150px at 75% 85%, rgba(220,70,15,0.1), transparent),
    /* Embers */
    radial-gradient(circle 3px at 200px 400px, rgba(255,160,60,0.4), transparent),
    radial-gradient(circle 2px at 800px 380px, rgba(255,130,40,0.3), transparent),
    radial-gradient(circle 3px at 500px 420px, rgba(255,110,30,0.35), transparent),

    /* Broken wall chunks */
    linear-gradient(135deg, #2a2018 0%, #2a2018 70%, transparent 70%) no-repeat 0 0 / 120px 200px,
    linear-gradient(135deg, transparent 40%, #241a12 40%) no-repeat 1160px 0 / 120px 180px,
    linear-gradient(145deg, #2a2018 0%, transparent 60%) no-repeat 0 200px / 80px 100px,
    /* Rubble on floor */
    linear-gradient(#2a2018, #2a2018) no-repeat 50px 400px / 40px 20px,
    linear-gradient(#221810, #221810) no-repeat 200px 410px / 30px 15px,
    linear-gradient(#2a2018, #2a2018) no-repeat 900px 395px / 50px 25px,
    linear-gradient(#221810, #221810) no-repeat 1100px 405px / 35px 18px,

    /* Cracked floor */
    linear-gradient(160deg, transparent 49%, #1a1a1a 49%, #1a1a1a 51%, transparent 51%) no-repeat 400px 380px / 200px 100px,
    linear-gradient(20deg, transparent 49%, #141414 49%, #141414 51%, transparent 51%) no-repeat 700px 400px / 150px 80px,

    /* Base - dark but warmer than before */
    linear-gradient(to bottom, #12100c, #0e0c0a, #12100c);
}

/* Ruins fog overlay */
.room-ruins .fog-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 400px 250px at 20% 50%, rgba(100,80,50,0.1), transparent),
    radial-gradient(ellipse 350px 200px at 80% 60%, rgba(100,80,50,0.08), transparent);
  animation: fog-drift 10s ease-in-out infinite alternate;
  pointer-events: none;
}

/* ================================================
   14. OFFICE - Corporate cubicles, bright fluorescent
   Gray/beige, brightly lit, clearly visible
   ================================================ */
.room-office .room-bg {
  background:
    /* Fluorescent ceiling lights */
    linear-gradient(to right, transparent 10%, rgba(230,240,250,0.15) 20%, rgba(230,240,250,0.18) 40%, rgba(230,240,250,0.18) 60%, rgba(230,240,250,0.15) 80%, transparent 90%) no-repeat 0 0 / 100% 4px,
    radial-gradient(ellipse 600px 100px at 50% 0%, rgba(230,240,250,0.1), transparent),

    /* Drop ceiling grid */
    repeating-linear-gradient(to right, transparent 0px, transparent 156px, rgba(200,200,200,0.1) 156px, rgba(200,200,200,0.1) 160px) no-repeat 0 0 / 100% 20px,

    /* Cubicle wall left */
    linear-gradient(#a0a098, #909088) no-repeat 40px 120px / 200px 8px,
    linear-gradient(#b0b0a8, #a0a098) no-repeat 40px 128px / 200px 200px,
    linear-gradient(#909088, #909088) no-repeat 40px 328px / 200px 4px,

    /* Cubicle wall right */
    linear-gradient(#a0a098, #909088) no-repeat 1020px 120px / 220px 8px,
    linear-gradient(#b0b0a8, #a0a098) no-repeat 1020px 128px / 220px 200px,
    linear-gradient(#909088, #909088) no-repeat 1020px 328px / 220px 4px,

    /* Desk */
    linear-gradient(#a0a090, #909080) no-repeat 300px 340px / 680px 12px,
    linear-gradient(#909080, #808070) no-repeat 300px 352px / 680px 40px,

    /* Office chair */
    linear-gradient(#3a3a3a, #333) no-repeat 580px 400px / 60px 50px,
    linear-gradient(#444, #3a3a3a) no-repeat 575px 394px / 70px 8px,
    /* Chair wheels */
    radial-gradient(circle 4px at 590px 455px, #444, transparent),
    radial-gradient(circle 4px at 630px 455px, #444, transparent),

    /* Water cooler (right) */
    linear-gradient(#a0d0e8, #a0d0e8) no-repeat 960px 220px / 20px 40px,
    linear-gradient(#e8e8e8, #d8d8d8) no-repeat 955px 260px / 30px 60px,

    /* Motivational poster on cubicle wall */
    linear-gradient(#fff, #f0f0f0) no-repeat 100px 160px / 40px 30px,

    /* Carpet - beige/tan, bright */
    linear-gradient(to bottom,
      #c0c0b8, #b0b0a8 62%,
      #7a7a74 62.5%, #6a6a64 63%, #5a5a54);
}

/* ================================================
   15. LIBRARY - Deep purple, bookshelves, candelabra
   Foucault & Ted Nelson opening quotes
   ================================================ */
.room-library .room-bg {
  background:
    /* Candelabra glow */
    radial-gradient(circle 40px at 280px 90px, rgba(255,204,68,0.35), transparent),
    radial-gradient(circle 20px at 280px 80px, rgba(255,220,100,0.5), transparent),

    /* Candelabra stem */
    linear-gradient(#8b6914, #8b6914) no-repeat 277px 90px / 6px 30px,
    /* Candelabra base */
    linear-gradient(#8b6914, #6b4a0e) no-repeat 270px 118px / 20px 6px,
    /* Flame */
    radial-gradient(circle 4px at 280px 82px, #ffdd66, #ffaa22, transparent),

    /* Bookshelf 1 - left wall, tall */
    linear-gradient(#5c3a1e, #4a2e16) no-repeat 30px 60px / 140px 320px,
    /* Shelf dividers */
    linear-gradient(#6b4422, #6b4422) no-repeat 30px 140px / 140px 4px,
    linear-gradient(#6b4422, #6b4422) no-repeat 30px 220px / 140px 4px,
    linear-gradient(#6b4422, #6b4422) no-repeat 30px 300px / 140px 4px,

    /* Bookshelf 2 - second column */
    linear-gradient(#5c3a1e, #4a2e16) no-repeat 180px 80px / 120px 300px,
    linear-gradient(#6b4422, #6b4422) no-repeat 180px 160px / 120px 4px,
    linear-gradient(#6b4422, #6b4422) no-repeat 180px 240px / 120px 4px,
    linear-gradient(#6b4422, #6b4422) no-repeat 180px 320px / 120px 4px,

    /* Wainscoting rail */
    linear-gradient(#5a4030, #5a4030) no-repeat 0 340px / 100% 4px,

    /* Checkered floor (two offset repeating gradients simulate checkerboard) */
    repeating-linear-gradient(to right, #3d2b1e 0px, #3d2b1e 20px, #2e1f14 20px, #2e1f14 40px) no-repeat 0 378px / 100% 20px,
    repeating-linear-gradient(to right, #2e1f14 0px, #2e1f14 20px, #3d2b1e 20px, #3d2b1e 40px) no-repeat 0 398px / 100% 20px,
    repeating-linear-gradient(to right, #3d2b1e 0px, #3d2b1e 20px, #2e1f14 20px, #2e1f14 40px) no-repeat 0 418px / 100% 20px,
    repeating-linear-gradient(to right, #2e1f14 0px, #2e1f14 20px, #3d2b1e 20px, #3d2b1e 40px) no-repeat 0 438px / 100% 20px,
    repeating-linear-gradient(to right, #3d2b1e 0px, #3d2b1e 20px, #2e1f14 20px, #2e1f14 40px) no-repeat 0 458px / 100% 20px,
    repeating-linear-gradient(to right, #2e1f14 0px, #2e1f14 20px, #3d2b1e 20px, #3d2b1e 40px) no-repeat 0 478px / 100% 20px,

    /* Walls */
    linear-gradient(to bottom, #1a0a2e 0%, #2d1b4e 40%, #3d2b5e 55%, #4a3366 70%, #3d2b1e 70%);
}

/* Book spines - colorful rectangles via box-shadow */
.room-library .room-bg::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 70px;
  top: 0;
  left: 0;
  pointer-events: none;
  box-shadow:
    /* Shelf 1, row 1 */
    38px 66px 0 0 #8b2020,
    50px 66px 0 0 #1a4a6e,
    60px 66px 0 2px #6b6b2e,
    74px 66px 0 0 #2e5a2e,
    86px 66px 0 2px #8b6914,
    100px 66px 0 0 #5a1a1a,
    112px 66px 0 0 #2e4a6e,
    124px 66px 0 2px #4a4a1e,
    138px 66px 0 0 #6e2e4a,
    150px 66px 0 0 #1a5a4a,
    /* Shelf 1, row 2 */
    38px 146px 0 2px #3a6a8e,
    52px 146px 0 0 #8b4a14,
    64px 146px 0 0 #2e5a2e,
    76px 146px 0 2px #8b2020,
    90px 146px 0 0 #4a4a6e,
    104px 146px 0 0 #6b6b2e,
    116px 146px 0 2px #1a5a4a,
    130px 146px 0 0 #6e2e4a,
    142px 146px 0 0 #5a1a1a,
    154px 146px 0 2px #2e4a6e,
    /* Shelf 1, row 3 */
    38px 226px 0 0 #6b6b2e,
    50px 226px 0 2px #8b2020,
    64px 226px 0 0 #1a4a6e,
    76px 226px 0 0 #2e5a2e,
    88px 226px 0 2px #8b6914,
    102px 226px 0 0 #5a1a1a,
    114px 226px 0 2px #6e2e4a,
    128px 226px 0 0 #4a4a1e,
    140px 226px 0 0 #3a6a8e,
    152px 226px 0 2px #1a5a4a,
    /* Shelf 2, row 1 */
    188px 86px 0 0 #5a1a1a,
    198px 86px 0 2px #2e4a6e,
    212px 86px 0 0 #8b6914,
    222px 86px 0 0 #2e5a2e,
    234px 86px 0 2px #8b2020,
    248px 86px 0 0 #6b6b2e,
    260px 86px 0 0 #1a4a6e,
    272px 86px 0 2px #6e2e4a,
    286px 86px 0 0 #4a4a1e,
    /* Shelf 2, row 2 */
    188px 166px 0 2px #3a6a8e,
    202px 166px 0 0 #8b4a14,
    214px 166px 0 0 #1a5a4a,
    224px 166px 0 2px #8b2020,
    238px 166px 0 0 #6b6b2e,
    250px 166px 0 0 #2e5a2e,
    262px 166px 0 2px #5a1a1a,
    276px 166px 0 0 #2e4a6e,
    288px 166px 0 0 #6e2e4a;
}

/* ================================================
   16. KITCHEN - Olive-green, wood counter, warm light
   Craft of the essay & code
   ================================================ */
.room-kitchen .room-bg {
  background:
    /* Overhead warm light */
    radial-gradient(ellipse 180px 60px at 360px 0px, rgba(200,180,100,0.2), transparent),

    /* Upper cabinet left */
    linear-gradient(#6b5a3a, #5a4a2e) no-repeat 40px 40px / 120px 110px,
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 40px 93px / 120px 2px,
    /* Cabinet handle */
    linear-gradient(#8b7a5a, #8b7a5a) no-repeat 90px 60px / 20px 3px,
    linear-gradient(#8b7a5a, #8b7a5a) no-repeat 90px 110px / 20px 3px,

    /* Upper cabinet right-of-left */
    linear-gradient(#6b5a3a, #5a4a2e) no-repeat 170px 40px / 100px 110px,
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 170px 93px / 100px 2px,
    linear-gradient(#8b7a5a, #8b7a5a) no-repeat 210px 60px / 20px 3px,

    /* Window */
    linear-gradient(#4a6a3a, #5a7a4a) no-repeat 310px 30px / 120px 120px,
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 306px 26px / 128px 4px,
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 306px 150px / 128px 4px,
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 306px 26px / 4px 128px,
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 430px 26px / 4px 128px,
    /* Window cross */
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 368px 30px / 3px 120px,
    linear-gradient(#5a4a2e, #5a4a2e) no-repeat 310px 88px / 120px 3px,

    /* Counter */
    linear-gradient(#8b7a5a, #7a6a4a) no-repeat 0px 260px / 500px 12px,
    /* Counter front */
    linear-gradient(#6b5a3a, #5a4a2e) no-repeat 0px 272px / 500px 100px,

    /* Floor tiles */
    repeating-linear-gradient(to right, #8b7a5a 0px, #8b7a5a 58px, #7a6a4a 58px, #7a6a4a 62px) no-repeat 0 378px / 100% 160px,

    /* Walls */
    linear-gradient(to bottom, #2e3a1e 0%, #3a4a2a 30%, #4a5a3a 55%, #3a4a2a 70%, #2e2418 70%);
}

/* ================================================
   17. LABORATORY - Cyan-teal on navy, bubbling tubes
   Claude as author, p5.js animation
   ================================================ */
.room-laboratory .room-bg {
  background:
    /* Eerie ambient glow */
    radial-gradient(circle 60px at 100px 200px, rgba(100,220,255,0.1), transparent),
    radial-gradient(circle 40px at 180px 180px, rgba(180,100,255,0.08), transparent),

    /* Tube 1 - tall, cyan */
    linear-gradient(rgba(100,220,255,0.15), rgba(100,220,255,0.15)) no-repeat 60px 60px / 16px 280px,
    linear-gradient(rgba(100,220,255,0.3), rgba(100,220,255,0.3)) no-repeat 60px 60px / 16px 1px,
    linear-gradient(rgba(100,220,255,0.3), rgba(100,220,255,0.3)) no-repeat 60px 340px / 16px 1px,
    linear-gradient(rgba(100,220,255,0.3), rgba(100,220,255,0.3)) no-repeat 60px 60px / 1px 280px,
    linear-gradient(rgba(100,220,255,0.3), rgba(100,220,255,0.3)) no-repeat 75px 60px / 1px 280px,

    /* Tube 2 - shorter, purple */
    linear-gradient(rgba(180,100,255,0.15), rgba(180,100,255,0.15)) no-repeat 120px 100px / 20px 240px,
    linear-gradient(rgba(180,100,255,0.3), rgba(180,100,255,0.3)) no-repeat 120px 100px / 20px 1px,
    linear-gradient(rgba(180,100,255,0.3), rgba(180,100,255,0.3)) no-repeat 120px 340px / 20px 1px,
    linear-gradient(rgba(180,100,255,0.3), rgba(180,100,255,0.3)) no-repeat 120px 100px / 1px 240px,
    linear-gradient(rgba(180,100,255,0.3), rgba(180,100,255,0.3)) no-repeat 139px 100px / 1px 240px,

    /* Tube 3 - small, green */
    linear-gradient(rgba(68,204,136,0.15), rgba(68,204,136,0.15)) no-repeat 190px 160px / 14px 180px,
    linear-gradient(rgba(68,204,136,0.3), rgba(68,204,136,0.3)) no-repeat 190px 160px / 14px 1px,
    linear-gradient(rgba(68,204,136,0.3), rgba(68,204,136,0.3)) no-repeat 190px 340px / 14px 1px,

    /* Wires along lower wall */
    linear-gradient(#44aa66, #44aa66) no-repeat 200px 330px / 500px 2px,
    linear-gradient(#aa4466, #aa4466) no-repeat 240px 336px / 400px 2px,
    linear-gradient(#4488aa, #4488aa) no-repeat 220px 342px / 450px 2px,

    /* Floor */
    linear-gradient(#1a2a3a, #0e1e2e) no-repeat 0 348px / 100% 200px,

    /* Walls */
    linear-gradient(to bottom, #0a1a2e 0%, #0e2a3e 40%, #122e44 65%, #1a3a4e 70%);
}

/* Bubbles in tubes */
.room-laboratory .room-bg::before {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  top: 0;
  left: 0;
  pointer-events: none;
  box-shadow:
    /* Tube 1 bubbles */
    64px 260px 0 0 rgba(100,220,255,0.5),
    70px 200px 0 -1px rgba(100,220,255,0.3),
    66px 140px 0 0 rgba(100,220,255,0.4),
    /* Tube 2 bubbles */
    126px 280px 0 0 rgba(180,100,255,0.4),
    134px 220px 0 -1px rgba(180,100,255,0.3),
    128px 160px 0 0 rgba(180,100,255,0.5),
    /* Tube 3 bubbles */
    194px 300px 0 -1px rgba(68,204,136,0.4),
    196px 240px 0 0 rgba(68,204,136,0.3);
  animation: bubble-float 3s ease-in-out infinite alternate;
}

@keyframes bubble-float {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

/* ================================================
   18. SHIP CORRIDOR - Alien meets Space Quest
   Dark steel, amber warnings, green drips, grated floor
   ================================================ */
.room-ship-corridor .room-bg {
  background:
    /* Warning lights */
    radial-gradient(circle 12px at 148px 100px, rgba(255,136,0,0.6), transparent),
    radial-gradient(circle 12px at 1132px 100px, rgba(255,136,0,0.6), transparent),

    /* Ribbed walls - left */
    repeating-linear-gradient(to bottom, #1a2030 0px, #1a2030 12px, #0e1620 12px, #0e1620 16px) no-repeat 0px 0px / 128px 378px,

    /* Ribbed walls - right */
    repeating-linear-gradient(to bottom, #1a2030 0px, #1a2030 12px, #0e1620 12px, #0e1620 16px) no-repeat 1152px 0px / 128px 378px,

    /* Ceiling pipes */
    linear-gradient(#2a3444, #2a3444) no-repeat 128px 30px / 1024px 4px,
    linear-gradient(#222e3e, #222e3e) no-repeat 128px 40px / 1024px 3px,
    linear-gradient(#2a3444, #2a3444) no-repeat 128px 50px / 1024px 4px,

    /* Console panel - left */
    linear-gradient(#0e1418, #0e1418) no-repeat 140px 120px / 160px 160px,
    linear-gradient(#2a3444, #2a3444) no-repeat 138px 118px / 164px 2px,
    linear-gradient(#2a3444, #2a3444) no-repeat 138px 280px / 164px 2px,
    linear-gradient(#2a3444, #2a3444) no-repeat 138px 118px / 2px 164px,
    linear-gradient(#2a3444, #2a3444) no-repeat 300px 118px / 2px 164px,
    /* Console text lines */
    linear-gradient(#224433, #224433) no-repeat 150px 180px / 120px 3px,
    linear-gradient(#224433, #224433) no-repeat 150px 194px / 90px 3px,
    linear-gradient(#224433, #224433) no-repeat 150px 208px / 110px 3px,
    linear-gradient(#224433, #224433) no-repeat 150px 222px / 70px 3px,
    linear-gradient(#224433, #224433) no-repeat 150px 236px / 100px 3px,

    /* Viewport/porthole - right wall */
    radial-gradient(circle 50px at 1080px 200px, #0a0a1e, #000008),
    linear-gradient(#2a3444, #2a3444) no-repeat 1024px 144px / 112px 112px,

    /* Floor glow strip */
    linear-gradient(to right, transparent, rgba(255,136,0,0.2), rgba(255,136,0,0.35), rgba(255,136,0,0.2), transparent) no-repeat 128px 374px / 1024px 4px,

    /* Grated floor */
    repeating-linear-gradient(to right, #1a2030 0px, #1a2030 8px, #0e1418 8px, #0e1418 10px) no-repeat 0 378px / 100% 170px,
    linear-gradient(#1a2030, #0e1418) no-repeat 0 378px / 100% 170px,

    /* Atmospheric fog */
    linear-gradient(transparent, rgba(40,60,80,0.12)) no-repeat 0 300px / 100% 78px,

    /* Walls */
    linear-gradient(to bottom, #0a0e14 0%, #0e1620 40%, #121a24 65%, #0a0e14 70%);
}

/* Warning lights + LEDs + drips */
.room-ship-corridor .room-bg::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  top: 0;
  left: 0;
  pointer-events: none;
  box-shadow:
    /* Warning lights */
    148px 100px 0 0 #ff8800,
    1132px 100px 0 0 #ff8800,
    /* Console LEDs */
    155px 145px 0 -1px #44ff44,
    175px 145px 0 -1px #ff4444,
    195px 145px 0 -1px #44ff44,
    215px 145px 0 -1px #44ff44,
    235px 145px 0 -1px #ff4444,
    255px 145px 0 -1px #44ff44,
    /* Porthole stars */
    1060px 170px 0 -3px #fff,
    1090px 190px 0 -3px #aaf,
    1075px 215px 0 -3px #ffa,
    1100px 175px 0 -3px #fff;
  animation: led-blink 2s steps(1) infinite;
}

@keyframes led-blink {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  75% { opacity: 1; }
  85% { opacity: 0.5; }
}

/* Green bio-drips from ceiling */
.room-ship-corridor .room-bg::after {
  content: '';
  position: absolute;
  top: 54px;
  left: 0;
  width: 5px;
  pointer-events: none;
  box-shadow:
    400px 0px 0 8px transparent,
    400px 4px 0 0 #2a5a3a,
    400px 12px 0 0 #3a7a4a,
    400px 20px 0 0 #44aa66,
    400px 26px 0 -1px rgba(68,170,102,0.5),
    650px 0px 0 8px transparent,
    650px 4px 0 0 #2a5a3a,
    650px 10px 0 0 #3a7a4a,
    650px 16px 0 -1px rgba(68,170,102,0.4),
    880px 0px 0 8px transparent,
    880px 4px 0 0 #2a5a3a,
    880px 14px 0 0 #44aa66,
    880px 22px 0 0 #3a7a4a,
    880px 28px 0 -1px rgba(68,170,102,0.6);
}

/* ================================================
   19. TYPING OFFICE - Warm brown, typewriter, green lamp
   Track Changes / every tool changes our writing
   ================================================ */
.room-typing-office .room-bg {
  background:
    /* Green banker’s lamp shade */
    radial-gradient(ellipse 60px 20px at 520px 234px, #3a8a4a, #2a6a3a 99%, transparent 100%) no-repeat,
    /* Lamp glow pool */
    radial-gradient(ellipse 100px 50px at 520px 268px, rgba(100,180,100,0.18), transparent),
    /* Lamp stem */
    linear-gradient(#8b7a5a, #8b7a5a) no-repeat 517px 240px / 6px 18px,
    /* Lamp base */
    linear-gradient(#8b7a5a, #6b5a3a) no-repeat 508px 258px / 24px 4px,

    /* Typewriter body */
    linear-gradient(#1a1a1e, #222226) no-repeat 300px 230px / 140px 30px,
    /* Typewriter carriage */
    linear-gradient(#2a2a2e, #2a2a2e) no-repeat 310px 224px / 120px 6px,
    /* Paper */
    linear-gradient(#f0e8d8, #e8e0d0) no-repeat 340px 196px / 60px 36px,
    /* Key row hint */
    repeating-linear-gradient(to right, #3a3a3e 0px, #3a3a3e 6px, #1a1a1e 6px, #1a1a1e 9px) no-repeat 310px 254px / 120px 6px,

    /* Desk surface */
    linear-gradient(#5a4a30, #4a3a20) no-repeat 200px 262px / 400px 10px,
    /* Desk front panel */
    linear-gradient(#4a3a20, #3a2a14) no-repeat 200px 272px / 400px 100px,
    /* Desk legs */
    linear-gradient(#4a3a20, #3a2a14) no-repeat 210px 372px / 6px 60px,
    linear-gradient(#4a3a20, #3a2a14) no-repeat 590px 372px / 6px 60px,

    /* Diplomas on left wall */
    linear-gradient(#3a3020, #3a3020) no-repeat 50px 60px / 60px 50px,
    linear-gradient(#5a5040, #5a5040) no-repeat 48px 58px / 64px 2px,
    linear-gradient(#5a5040, #5a5040) no-repeat 48px 108px / 64px 2px,
    linear-gradient(#5a5040, #5a5040) no-repeat 48px 58px / 2px 52px,
    linear-gradient(#5a5040, #5a5040) no-repeat 110px 58px / 2px 52px,

    linear-gradient(#3a3020, #3a3020) no-repeat 130px 50px / 50px 65px,
    linear-gradient(#5a5040, #5a5040) no-repeat 128px 48px / 54px 2px,
    linear-gradient(#5a5040, #5a5040) no-repeat 128px 113px / 54px 2px,
    linear-gradient(#5a5040, #5a5040) no-repeat 128px 48px / 2px 67px,
    linear-gradient(#5a5040, #5a5040) no-repeat 180px 48px / 2px 67px,

    /* Wood paneling lines */
    repeating-linear-gradient(to right, transparent 0px, transparent 158px, rgba(50,40,28,0.4) 158px, rgba(50,40,28,0.4) 160px) no-repeat 0 0 / 100% 378px,

    /* Wainscoting rail */
    linear-gradient(#5a5040, #5a5040) no-repeat 0 220px / 100% 4px,

    /* Burgundy rug */
    linear-gradient(#5a2020, #4a1818) no-repeat 160px 410px / 380px 40px,
    linear-gradient(#6a3030, #6a3030) no-repeat 158px 408px / 384px 2px,
    linear-gradient(#6a3030, #6a3030) no-repeat 158px 448px / 384px 2px,

    /* Floor */
    linear-gradient(#2e2418, #221c12) no-repeat 0 378px / 100% 170px,

    /* Walls */
    linear-gradient(to bottom, #2e2820 0%, #3a3228 25%, #443c30 50%, #4a4030 70%);
}

/* ================================================
   20. OBSERVATORY - Midnight blue, starfield, telescope
   New ending / looking forward
   ================================================ */
.room-observatory .room-bg {
  background:
    /* Telescope tube */
    linear-gradient(155deg, #6a6a7a 0%, #4a4a5a 100%) no-repeat 60px 140px / 180px 8px,
    /* Telescope eyepiece */
    linear-gradient(#5a5a6a, #4a4a5a) no-repeat 50px 134px / 16px 20px,
    /* Telescope tripod legs */
    linear-gradient(#5a5a6a, #4a4a5a) no-repeat 140px 148px / 4px 220px,
    linear-gradient(155deg, #5a5a6a, #4a4a5a) no-repeat 100px 220px / 4px 148px,
    linear-gradient(25deg, #5a5a6a, #4a4a5a) no-repeat 180px 220px / 4px 148px,

    /* Dome opening - radial cutout effect */
    radial-gradient(ellipse 500px 280px at 50% 100%, transparent 58%, #1a1a2e 60%) no-repeat 0 0 / 100% 240px,

    /* Warm light from below */
    radial-gradient(ellipse 80px 40px at 350px 360px, rgba(255,200,100,0.15), transparent),

    /* Floor */
    linear-gradient(#1a1a2e, #0e0e1e) no-repeat 0 370px / 100% 170px,

    /* Sky/walls */
    linear-gradient(to bottom, #000814 0%, #001d3d 30%, #003566 55%, #001d3d 70%, #1a1a2e 72%);
}

/* Stars */
.room-observatory .room-bg::before {
  content: '';
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  top: 0;
  left: 0;
  pointer-events: none;
  box-shadow:
    350px 30px 0 0 #fff,
    500px 50px 0 0 #ddf,
    680px 25px 0 0 #fff,
    820px 60px 0 -1px #ffd,
    950px 35px 0 0 #dff,
    1100px 45px 0 0 #fff,
    400px 90px 0 -1px #ddf,
    600px 75px 0 0 #fff,
    760px 100px 0 0 #ffa,
    900px 80px 0 -1px #fff,
    1050px 95px 0 0 #ddf,
    450px 130px 0 0 #fff,
    550px 120px 0 -1px #dff,
    720px 140px 0 0 #ffd,
    850px 125px 0 0 #fff,
    1000px 135px 0 -1px #ddf,
    380px 170px 0 0 #fff,
    530px 160px 0 0 #ffa,
    700px 180px 0 -1px #ddf,
    880px 165px 0 0 #fff,
    1080px 175px 0 0 #dff,
    470px 200px 0 -1px #fff,
    650px 210px 0 0 #ffd,
    800px 195px 0 0 #fff,
    960px 205px 0 -1px #ddf;
  animation: star-twinkle 4s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0% { opacity: 1; }
  100% { opacity: 0.6; }
}