/* =====================================================================
   BUILDING 13 HQ — FALL SKINS
   Site-wide fall/Halloween visual language layered over the existing
   design. Visual changes only: no markup, nav, links, or content touched.
   Palette: black, charcoal, concrete, worn metal, deep purple, neon green,
   white — plus fall accents (lantern amber, pumpkin, harvest gold, ember).
   Seasonal variants: body.season-halloween (default thru Oct 31) and
   body.season-thanksgiving (Nov 1 on; warm harvest grade). Set by the
   season snippet in entrance-door.html; override with ?season=halloween
   or ?season=thanksgiving (persisted in localStorage).
   ===================================================================== */

:root{
  --lantern:#ffb347;
  --pumpkin:#ff7a1a;
  --ember:#ff4d1c;
  --harvest:#f5c76a;
  --leaf:#e07b1f;
  --leaf-deep:#a83c14;
  --cork:#141007;
  --warm-ink:#171310;
}

/* ---------- site-wide atmosphere: drifting leaves (behind content) ---- */
body::before{
  content:"";position:fixed;inset:-40px;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(26px 34px at 12% 22%, rgba(224,123,31,.20), transparent 70%),
    radial-gradient(18px 24px at 68% 12%, rgba(168,60,20,.22), transparent 70%),
    radial-gradient(30px 38px at 84% 58%, rgba(245,199,106,.13), transparent 70%),
    radial-gradient(20px 26px at 34% 74%, rgba(224,123,31,.16), transparent 70%),
    radial-gradient(24px 30px at 52% 40%, rgba(170,61,242,.10), transparent 70%),
    radial-gradient(16px 22px at 8% 88%, rgba(255,179,71,.14), transparent 70%),
    radial-gradient(22px 28px at 92% 84%, rgba(224,123,31,.18), transparent 70%);
  background-size:640px 640px;
  animation:fall-drift 46s linear infinite;
}
@keyframes fall-drift{
  from{background-position:0 -640px, 60px -640px, -40px -640px, 30px -640px, -60px -640px, 80px -640px, -30px -640px}
  to{background-position:40px 640px, -30px 640px, 70px 640px, -50px 640px, 60px 640px, -70px 640px, 50px 640px}
}

/* ---------- site-wide film grain (above everything, non-interactive) -- */
body::after{
  content:"";position:fixed;inset:-60px;z-index:9999;pointer-events:none;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  animation:grain-jitter 1.1s steps(3) infinite;
}
@keyframes grain-jitter{
  0%{transform:translate(0,0)}33%{transform:translate(-18px,10px)}
  66%{transform:translate(12px,-14px)}100%{transform:translate(0,0)}
}

/* ---------- shared room dressing -------------------------------------- */
/* hanging industrial signage for room kickers */
.view .section-head .kicker{
  display:inline-block;background:#0d0c09;border:1px solid rgba(255,179,71,.45);
  color:var(--lantern);padding:7px 12px 5px;letter-spacing:.22em;
  box-shadow:4px 4px 0 rgba(0,0,0,.55), inset 0 0 18px rgba(255,179,71,.07);
  transform:rotate(-.6deg);
}
/* keep section-head paragraphs readable over new backdrops */
.view .section-head p{text-shadow:0 1px 0 #000, 0 0 22px rgba(0,0,0,.9)}

/* primary buttons stay obvious; warm up for the harvest season */
body.season-thanksgiving .btn.primary{background:var(--harvest);border-color:var(--harvest)}
body.season-thanksgiving .btn:hover,body.season-thanksgiving .btn:focus{background:var(--pumpkin);border-color:var(--pumpkin)}

/* =====================================================================
   ROOM 1 — MAIN LOBBY  (#home, #doors, #app)
   Industrial reception, warm lantern wash over worn concrete.
   ===================================================================== */
.view#home{
  background:
    radial-gradient(1100px 420px at 50% -60px, rgba(255,179,71,.10), transparent 62%),
    radial-gradient(900px 700px at 50% 115%, rgba(170,61,242,.08), transparent 60%),
    linear-gradient(180deg,#0c0d0a 0%,#080908 70%);
}
.view#doors{
  background:
    radial-gradient(1000px 380px at 50% -40px, rgba(170,61,242,.12), transparent 60%),
    linear-gradient(180deg,#0d0e0b,#080908 65%);
  box-shadow:inset 0 0 140px rgba(0,0,0,.55);
}
/* lobby directory doors: lantern-glow hover, worn-metal frames */
.view#doors .door{border-color:#4a4438;box-shadow:6px 6px 0 rgba(0,0,0,.6)}
.view#doors .door:hover,.view#doors .door:focus-visible{
  border-color:var(--lantern);box-shadow:6px 6px 0 rgba(0,0,0,.6), 0 0 26px rgba(255,179,71,.35);
}
.view#app{
  background:
    radial-gradient(900px 380px at 50% -40px, rgba(245,199,106,.09), transparent 60%),
    linear-gradient(180deg,#0c0d0a,#080908 70%);
}
.view#app .app-card{border-color:#4a4438;background:#100e0a}
.view#app .app-card h3{color:var(--harvest)}

/* =====================================================================
   ROOM 2 — STORYTELLER'S DEN + ARCHIVES  (#den, #archives)
   Eerie cozy hideout: fireside amber, dusty filing-wing green.
   ===================================================================== */
.view#den{
  background:
    radial-gradient(1000px 520px at 50% 118%, rgba(255,122,26,.13), transparent 62%),
    radial-gradient(700px 340px at 50% -60px, rgba(170,61,242,.07), transparent 60%),
    linear-gradient(180deg,#0c0b09,#080908 70%);
  box-shadow:inset 0 -120px 160px rgba(20,8,2,.5);
}
.view#den .den-copy{background:#12100b;border:1px solid rgba(255,179,71,.35);box-shadow:8px 8px 0 rgba(0,0,0,.6), 0 0 40px rgba(255,122,26,.10)}
.view#den .den-player{box-shadow:7px 7px 0 var(--lantern)}
.view#archives{
  background:
    radial-gradient(900px 420px at 50% -40px, rgba(184,255,22,.06), transparent 60%),
    linear-gradient(180deg,#0b0c09,#080908 70%);
}
.view#archives .wattpad-story{background:#100e0a;border:1px solid #4a4438}
.view#archives .wattpad-story:hover{border-color:var(--lantern)}
.view#archives .wp-reader{border-color:rgba(255,179,71,.4)}

/* =====================================================================
   ROOM 3 — BROADCAST ROOM  (#reacts, #submit-reacts)
   Retro radio/TV studio: ON AIR purple, warm tube glow.
   ===================================================================== */
.view#reacts,.view#submit-reacts{
  background:
    radial-gradient(1000px 400px at 50% -60px, rgba(170,61,242,.14), transparent 62%),
    radial-gradient(700px 300px at 8% 108%, rgba(255,122,26,.08), transparent 60%),
    linear-gradient(180deg,#0c0a0e,#080908 70%);
}
.view#reacts .reacts-featured:before{background:var(--ember);color:#fff}
.view#reacts .reacts-player{box-shadow:10px 10px 0 var(--purple), 0 0 44px rgba(170,61,242,.25)}
.view#submit-reacts .reaction-form,.view#submit-reacts .react-playlist{border-color:rgba(170,61,242,.5)}

/* =====================================================================
   ROOM 4 — MUSIC DEPARTMENT  (#music, #artifacts)
   Gritty studio: warm console glow, gold-record wall.
   ===================================================================== */
.view#music{
  background:
    radial-gradient(1000px 420px at 50% -60px, rgba(255,179,71,.09), transparent 60%),
    repeating-linear-gradient(180deg, transparent 0 46px, rgba(255,179,71,.028) 46px 48px),
    linear-gradient(180deg,#0c0b09,#080908 70%);
}
.view#music .music-strip{background:#100e0a;border:1px solid #4a4438}
.view#music .spotify-artist{border-color:rgba(255,179,71,.35)}
.view#artifacts{
  background:
    radial-gradient(900px 480px at 50% -40px, rgba(245,199,106,.10), transparent 60%),
    linear-gradient(180deg,#0d0b08,#080908 70%);
}
.view#artifacts .artifact-console{background:#12100b;border:1px solid rgba(245,199,106,.4);box-shadow:7px 7px 0 var(--purple), 0 0 44px rgba(245,199,106,.12)}
.view#artifacts .artifact-track{border-bottom:1px dashed #4a4438}
.view#artifacts .cd-card{background:#100e0a;border:1px solid #4a4438}
.view#artifacts .cd-price{color:var(--harvest)}

/* =====================================================================
   ROOM 5 — COMIC ROOM  (#comics)
   Inking workshop: drawing-desk lamp warmth, inked panel edges.
   ===================================================================== */
.view#comics{
  background:
    radial-gradient(1000px 420px at 50% -60px, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(700px 320px at 92% 108%, rgba(255,122,26,.07), transparent 60%),
    linear-gradient(180deg,#0c0c0a,#080908 70%);
}
.view#comics .comic-series{border-color:#4a4438}
.view#comics .comic-series:hover{border-color:var(--pumpkin)}
.view#comics .issue-card{background:#100e0a;border:1px solid #4a4438;box-shadow:6px 6px 0 rgba(0,0,0,.55)}
.view#comics .issue-price{color:var(--lantern)}

/* =====================================================================
   ROOM 6 — COMMISSARY / COMPANY STORE  (#shop)
   Industrial shelves, warm stockroom light.
   ===================================================================== */
.view#shop{
  background:
    radial-gradient(1000px 420px at 50% -60px, rgba(255,179,71,.09), transparent 60%),
    linear-gradient(180deg,#0c0b09,#080908 70%);
}
.view#shop .shop-tab{border-color:#4a4438}
.view#shop .shop-tab.active{background:var(--lantern);border-color:var(--lantern);color:#0a0803}
.view#shop .shop-grid > *{background:#100e0a;border:1px solid #4a4438}

/* =====================================================================
   ROOM 7 — RESIDENT FILES  (#residents)
   Classified records room: stamped dossiers, warm desk lamp.
   ===================================================================== */
.view#residents{
  background:
    radial-gradient(900px 420px at 50% -40px, rgba(245,199,106,.08), transparent 60%),
    linear-gradient(180deg,#0d0b08,#080908 70%);
}
.view#residents .resident{background:#12100b;border:1px solid #4a4438}
.view#residents .resident-id-card{border-color:rgba(245,199,106,.45);box-shadow:8px 8px 0 rgba(0,0,0,.6)}
.view#residents .resident-builder{border-color:rgba(255,179,71,.35)}

/* =====================================================================
   ROOM 8 — CREATOR SERVICES  (#studio, #creator-hub)
   Production office: workstations, corkboard warmth.
   ===================================================================== */
.view#studio,.view#creator-hub{
  background:
    radial-gradient(1000px 420px at 50% -60px, rgba(184,255,22,.06), transparent 60%),
    radial-gradient(700px 340px at 8% 108%, rgba(255,179,71,.08), transparent 60%),
    linear-gradient(180deg,#0c0c0a,#080908 70%);
}
.view#studio .service-card{background:#100e0a;border:1px solid #4a4438}
.view#studio .service-card:hover{border-color:var(--harvest)}
.view#studio .studio-video{box-shadow:8px 8px 0 var(--purple), 0 0 30px rgba(0,0,0,.5)}
.view#studio .payment-bar{border-color:rgba(245,199,106,.45);background:#12100b}
.view#creator-hub .hub-auth,.view#creator-hub .hub-compose{border-color:rgba(184,255,22,.55)}

/* =====================================================================
   ARCADE / GAMES ROOM  (#arcade)
   Keeps its neon; adds warm vignette + fall air. Visual-only — the
   Reaperboy selector track owns the markup, this skin never touches it.
   ===================================================================== */
.view#arcade{
  background:
    radial-gradient(1000px 460px at 50% -60px, rgba(168,85,247,.10), transparent 60%),
    radial-gradient(800px 400px at 50% 115%, rgba(255,122,26,.07), transparent 60%),
    linear-gradient(180deg,#0b0910,#080908 72%);
}

/* =====================================================================
   LOBBY BULLETIN BOARDS  (#spotlight, #local) + UTILITY  (#lost)
   Pinned noticeboards flanking the entrance; lost = utility closet.
   ===================================================================== */
.view#spotlight,.view#local{
  background:
    radial-gradient(1000px 420px at 50% -60px, rgba(255,179,71,.08), transparent 60%),
    linear-gradient(180deg,#0c0b09,#080908 70%);
}
.view#spotlight .pkg,.view#local .sun-card{
  position:relative;background:#100e0a;border:1px solid #4a4438;
  box-shadow:6px 6px 0 rgba(0,0,0,.55);
}
.view#spotlight .pkg:before,.view#local .sun-card:before{
  content:"";position:absolute;top:-7px;left:50%;width:14px;height:14px;margin-left:-7px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, var(--harvest), var(--pumpkin) 70%);
  box-shadow:0 2px 4px rgba(0,0,0,.6);
}
.view#local .prompt-box{border-color:rgba(255,179,71,.4);background:#12100b}
.view#lost{background:linear-gradient(180deg,#0a0a09,#080908 70%)}
.view#lost .lost-group{border:1px dashed #4a4438;background:#0d0c0a}

/* =====================================================================
   ENTRANCE-DOOR FRAGMENT STYLES  (see entrance-door.html)
   Full-bleed cinematic door hero replacing the old welcome-stage block.
   ===================================================================== */
.door-entrance{
  position:relative;min-height:calc(100dvh - var(--head));display:flex;
  align-items:flex-end;justify-content:center;overflow:hidden;isolation:isolate;
  border-bottom:3px solid rgba(255,179,71,.35);
  box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.door-art{
  position:absolute;inset:0;z-index:-3;
  background:url(assets/entrance-door-final.jpg) center 32%/cover no-repeat #050505;
  transform:scale(1.02);
}
body.season-thanksgiving .door-art{
  filter:sepia(.38) saturate(1.28) hue-rotate(-14deg) brightness(1.06) contrast(1.02);
}
/* vignette so copy stays readable */
.door-entrance::before{
  content:"";position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg, rgba(4,4,5,.55) 0%, transparent 26%, transparent 52%, rgba(4,3,2,.88) 100%);
}
/* lantern flicker glow over the art's lanterns/candles */
.door-flicker{
  position:absolute;inset:0;z-index:-1;pointer-events:none;mix-blend-mode:screen;opacity:.8;
  background:
    radial-gradient(220px 260px at 7% 20%, rgba(255,179,71,.30), transparent 65%),
    radial-gradient(260px 300px at 93% 62%, rgba(255,150,50,.22), transparent 65%),
    radial-gradient(420px 240px at 50% 96%, rgba(255,122,26,.16), transparent 70%);
  animation:lantern-flicker 3.4s ease-in-out infinite;
}
@keyframes lantern-flicker{
  0%,100%{opacity:.82}8%{opacity:.68}14%{opacity:.84}32%{opacity:.74}
  47%{opacity:.86}63%{opacity:.70}79%{opacity:.83}92%{opacity:.76}
}
/* drifting leaves inside the entrance */
.door-leaves{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.door-leaves i{
  position:absolute;top:-8%;width:13px;height:17px;opacity:0;
  background:linear-gradient(135deg,var(--leaf),var(--leaf-deep));
  border-radius:90% 6% 90% 6%;
  animation:leaf-fall linear infinite;
}
.door-leaves i:nth-child(1){left:6%;animation-duration:9s;animation-delay:0s}
.door-leaves i:nth-child(2){left:18%;animation-duration:12s;animation-delay:2.4s;transform:scale(.8)}
.door-leaves i:nth-child(3){left:31%;animation-duration:10s;animation-delay:5s}
.door-leaves i:nth-child(4){left:47%;animation-duration:13s;animation-delay:1.2s;transform:scale(1.15)}
.door-leaves i:nth-child(5){left:62%;animation-duration:9.5s;animation-delay:3.8s}
.door-leaves i:nth-child(6){left:74%;animation-duration:11s;animation-delay:6.4s;transform:scale(.85)}
.door-leaves i:nth-child(7){left:86%;animation-duration:10.5s;animation-delay:.8s}
.door-leaves i:nth-child(8){left:94%;animation-duration:12.5s;animation-delay:4.6s;transform:scale(.75)}
@keyframes leaf-fall{
  0%{transform:translate3d(0,-6vh,0) rotate(0deg);opacity:0}
  8%{opacity:.9}
  50%{transform:translate3d(46px,52vh,0) rotate(235deg)}
  92%{opacity:.85}
  100%{transform:translate3d(-24px,110vh,0) rotate(470deg);opacity:0}
}
/* entrance grain (heavier than the site-wide pass, local to the hero) */
.door-grain{
  position:absolute;inset:-40px;z-index:1;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain-jitter 1.3s steps(3) infinite;
}
/* copy plaque on the porch step */
.door-copy{
  position:relative;z-index:2;text-align:center;padding:0 20px calc(30px + env(safe-area-inset-bottom));
  max-width:640px;
}
.door-kicker{
  margin:0 0 10px;color:var(--lantern);font:900 .68rem "Work Sans";
  letter-spacing:.3em;text-transform:uppercase;text-shadow:0 2px 8px #000;
}
.door-sign{
  margin:0 0 18px;color:#fff9ed;font:900 clamp(1.5rem,5.4vw,2.6rem)/1.15 "Barlow Condensed";
  letter-spacing:.02em;text-transform:uppercase;text-shadow:0 2px 0 #000, 0 0 26px rgba(255,179,71,.35), 3px 3px 0 rgba(0,0,0,.8);
}
.door-sign-thanksgiving{display:none}
body.season-thanksgiving .door-sign-halloween{display:none}
body.season-thanksgiving .door-sign-thanksgiving{display:block}
/* the neon ENTER — real control over the art's painted sign */
.door-enter{
  font:900 clamp(1.6rem,6vw,2.4rem)/1 "Barlow Condensed" !important;
  letter-spacing:.28em !important;text-indent:.28em;
  min-height:64px;padding:16px 46px 14px !important;
  background:var(--green) !important;border-color:var(--green) !important;color:#061206 !important;
  box-shadow:6px 6px 0 var(--purple), 0 0 34px rgba(184,255,22,.55), 0 0 90px rgba(184,255,22,.25) !important;
  animation:enter-pulse 2.6s ease-in-out infinite;
}
.door-enter:hover,.door-enter:focus-visible{
  background:#d4ff4d !important;transform:translateY(-2px);
  box-shadow:6px 8px 0 var(--purple), 0 0 54px rgba(184,255,22,.8), 0 0 120px rgba(184,255,22,.35) !important;
}
@keyframes enter-pulse{
  0%,100%{box-shadow:6px 6px 0 var(--purple), 0 0 30px rgba(184,255,22,.5), 0 0 80px rgba(184,255,22,.2)}
  50%{box-shadow:6px 6px 0 var(--purple), 0 0 48px rgba(184,255,22,.75), 0 0 110px rgba(184,255,22,.32)}
}
.door-hint{margin:14px 0 0;color:var(--muted);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;text-shadow:0 2px 6px #000}
/* the preserved welcome video, now the lobby below the door */
.lobby-welcome{min-height:0 !important;padding-top:54px}
.lobby-welcome::before{opacity:.08}

/* ---------- mobile: keep the door readable, button thumb-sized ------- */
@media(max-width:650px){
  .door-art{background-position:center 28%}
  .door-copy{padding-bottom:calc(22px + env(safe-area-inset-bottom))}
  .door-enter{min-height:60px;padding:14px 34px 12px !important}
}

/* ---------- reduced motion: still air, no drift ----------------------- */
@media(prefers-reduced-motion:reduce){
  body::before,.door-leaves i,.door-flicker,.door-grain,body::after,.door-enter{animation:none !important}
  .door-leaves{display:none}
  body::after{opacity:.04}
}

/* ---- Room backgrounds: Petra's door art, one per room (fall 2026) ---- */
.view{background-size:cover;background-position:center top;background-repeat:no-repeat}
#home{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-home-01.jpg)}
#studio{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-creative-studio-02.jpg)}
#reacts{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-petra-reacts-03.jpg)}
#channel13{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-channel-13-04.jpg)}
#submit-reacts{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-submit-reacts.jpg)}
#den{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-storytellers-den.jpg)}
#music{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-music-07.jpg)}
#artifacts{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-artifacts-08.jpg)}
#comics{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-comics-09.jpg)}
#archives{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-archives-10.jpg)}
#residents{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-residents-11.jpg)}
#shop{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-shop-12.jpg)}
#lost{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-lost-traveler-13.jpg)}
#arcade{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-arcade.jpg)}
#creator-hub{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-creator-hub.jpg)}
#spotlight{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-creator-spotlight.jpg)}
#local{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-local-spotlight.jpg)}
#app{background-image:linear-gradient(rgba(12,7,3,.80),rgba(12,7,3,.88)),url(assets/room-backgrounds/room-get-the-app.jpg)}

/* ---- Falling autumn leaves (lightweight canvas) ---- */
#leafFall{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:60;opacity:.9}
@media (prefers-reduced-motion:reduce){#leafFall{display:none}}