/* ============================================================
   FRENCH PERFUME — 70s living room, interactive time capsule
   ============================================================ */

:root{
  --cream:      #f3e3c3;
  --cream-dim:  #e4cfa0;
  --mustard:    #e8a33d;
  --mustard-dk: #c6822a;
  --rust:       #c1502e;
  --rust-dk:    #9c3c21;
  --olive:      #6b7a3a;
  --olive-dk:   #4f5a29;
  --brown-900:  #241a12;
  --brown-800:  #3b2a1e;
  --brown-700:  #543a27;
  --brown-600:  #6b4226;
  --brown-500:  #8b5e3c;
  --navy:       #22304a;
  --navy-dk:    #121a2b;
  --cream-ink:  #2a1f16;
  --teal:       #3f8f8a;
  --teal-dk:    #2b6b67;
  --red:        #b5281f;
  --olive-br:   #8a9a4a;

  --font-display: 'Bungee', system-ui, sans-serif;
  --font-mono: 'Space Mono', 'Courier New', monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: var(--font-mono);
  background: var(--brown-900);
  color: var(--cream);
  overflow: hidden;
}
button{ font-family: inherit; cursor:pointer; }

/* ---------------------------------------------------------
   INTRO / POWER-ON SCREEN
--------------------------------------------------------- */
#intro{
  position:fixed; inset:0; z-index:100;
  background: radial-gradient(ellipse at center, #1c140d 0%, #0b0705 80%);
  display:flex; align-items:center; justify-content:center;
  transition: opacity .9s ease, visibility .9s ease;
}
#intro.hidden{ opacity:0; visibility:hidden; pointer-events:none; }

.intro-static{
  position:absolute; inset:0;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0px, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
  opacity:.5;
  animation: staticShift .2s steps(4) infinite;
  pointer-events:none;
}
@keyframes staticShift{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(4px); }
}

.intro-content{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  max-width:92vw;
}
.intro-logo{
  font-family: var(--font-display);
  color: var(--mustard);
  font-size: clamp(1.5rem, 6vw, 4.5rem);
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 var(--rust-dk), 0 0 40px rgba(232,163,61,.3);
  margin: 0 0 2.5rem;
  text-align:center;
  text-wrap: balance;
  max-width:100%;
}

#power-btn{
  position:relative;
  background:none; border:none; padding:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:10px;
  transition: transform .15s ease;
}
#power-btn:hover{ transform: scale(1.03); }
#power-btn:active{ transform: scale(.98); }
#power-btn.popping{ pointer-events:none; }

.bottle-svg{
  width: clamp(110px, 24vw, 150px); height:auto; position:relative; z-index:2;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.55));
}
.bottle-stopper{
  transform-origin: 95px 78px;
  transition: transform .7s cubic-bezier(.32,0,.2,1), opacity .5s ease .2s;
}
#power-btn.popping .bottle-stopper{
  transform: translateY(-60px) rotate(-20deg);
  opacity:0;
}
.bottle-mist{
  position:absolute; left:43%; top:32%;
  width:18px; height:18px; border-radius:50%;
  background: radial-gradient(circle, rgba(232,163,61,.95) 0%, rgba(232,163,61,.55) 40%, rgba(232,163,61,0) 72%);
  transform: translate(-50%,-50%) scale(0);
  opacity:0;
  pointer-events:none; z-index:1;
  transition: transform 1s cubic-bezier(.22,.6,.3,1), opacity 1s ease;
}
#power-btn.popping .bottle-mist{
  transform: translate(-50%,-50%) scale(15);
  opacity:.85;
}
.power-label{
  font-family: var(--font-mono);
  font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase;
  color: var(--cream-dim);
  position:relative; z-index:2;
  text-align:center; max-width:190px;
  transition: opacity .3s ease;
}
#power-btn.popping .power-label{ opacity:0; }
.intro-hint{
  margin-top:1.5rem; font-size:.75rem; letter-spacing:1px;
  color: var(--brown-500); text-transform:uppercase;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{opacity:.5;} 50%{opacity:1;} }

/* ---------------------------------------------------------
   ROOM
--------------------------------------------------------- */
.room{
  position:relative;
  width:100vw; height:100vh;
  overflow:hidden;
  background: var(--brown-800);
}

.room-title{
  position:absolute; top:18px; left:24px; z-index:30;
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-display);
  color: var(--cream);
  font-size: clamp(.9rem, 2vw, 1.3rem);
  letter-spacing:2px;
  text-shadow: 2px 2px 0 rgba(0,0,0,.4);
}
.social-links{ display:flex; gap:6px; }
.social-link{
  font-family: var(--font-mono);
  font-size:.6rem; font-weight:700; letter-spacing:.5px;
  text-decoration:none; color: var(--cream);
  background: rgba(36,26,18,.55);
  border:1px solid var(--mustard-dk);
  width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  backdrop-filter: blur(2px);
  transition: all .15s ease;
}
.social-link:hover{ background: var(--mustard-dk); color: var(--brown-900); }

.room-nav{
  position:absolute; top:22px; right:24px; z-index:30;
  display:flex; gap:10px;
}
.room-nav button{
  background: rgba(36,26,18,.55);
  border:1px solid var(--mustard-dk);
  color: var(--cream-dim);
  font-size:.65rem; letter-spacing:1.5px; text-transform:uppercase;
  padding:7px 12px; border-radius:20px;
  backdrop-filter: blur(2px);
  transition: all .15s ease;
}
.room-nav button:hover{ background: var(--mustard-dk); color: var(--brown-900); }

/* atmosphere overlays */
.scanlines{
  position:absolute; inset:0; z-index:25; pointer-events:none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.08) 0px, rgba(0,0,0,.08) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
}
.vignette{
  position:absolute; inset:0; z-index:26; pointer-events:none;
  background: radial-gradient(ellipse at center, transparent 45%, rgba(10,6,3,.55) 100%);
}
.grain{
  position:absolute; inset:0; z-index:27; pointer-events:none;
  opacity:.05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ---------------------------------------------------------
   SCENE — the room itself
--------------------------------------------------------- */
.scene{
  position:relative;
  width:100%; height:100%;
}

.wall{
  position:absolute; top:0; left:0; right:0; height:68%;
  overflow:hidden;
}
.wall-panels{
  position:absolute; inset:0;
  background: var(--brown-900);
}
.wall-panels::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-radial-gradient(circle at 50% 108%,
      var(--brown-900) 0, var(--brown-900) 40px,
      var(--rust-dk) 40px, var(--rust-dk) 80px,
      var(--mustard) 80px, var(--mustard) 118px,
      var(--rust) 118px, var(--rust) 156px,
      var(--teal) 156px, var(--teal) 192px,
      var(--mustard-dk) 192px, var(--mustard-dk) 226px,
      var(--rust-dk) 226px, var(--rust-dk) 258px,
      var(--brown-700) 258px, var(--brown-700) 290px);
}
.wall-panels::after{
  content:""; position:absolute; inset:0;
  box-shadow: inset 0 -50px 70px -20px rgba(0,0,0,.5), inset 0 40px 60px -30px rgba(0,0,0,.4);
}

.clock{
  position:absolute; top:16%; left:6%;
  width:70px; height:70px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--mustard), var(--mustard-dk));
  box-shadow: 0 0 0 5px var(--brown-900), 0 8px 16px rgba(0,0,0,.4);
}
.clock-face{ position:relative; width:100%; height:100%; }
.hand{
  position:absolute; background: var(--brown-900); border-radius:2px;
  left:50%; bottom:50%; transform-origin: bottom center;
}
.hand.hour{ width:4px; height:18px; transform: translateX(-50%) rotate(125deg); }
.hand.minute{ width:3px; height:24px; transform: translateX(-50%) rotate(40deg); }

/* pendant lamp */
.pendant{
  position:absolute; top:0; left:50%; transform: translateX(-50%);
  width:90px; height:0; background:none; border:none; padding:0;
  z-index:6; cursor:pointer;
}
.pendant-cord{
  width:2px; height:9vh; background: var(--brown-900);
  margin:0 auto;
}
.pendant-shade{
  width:90px; height:46px;
  margin:-4px auto 0;
  background: repeating-linear-gradient(90deg,
    var(--olive) 0 10px, var(--mustard) 10px 20px, var(--rust) 20px 30px);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0% 100%);
  box-shadow: 0 10px 22px rgba(0,0,0,.5);
  transition: filter .2s ease;
}
.pendant:hover .pendant-shade{ filter: brightness(1.15); }

.mood-glow{
  position:absolute; top:0; left:50%; transform: translateX(-50%);
  width:70%; height:55%;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,163,61,.4), transparent 72%);
  opacity:0; transition: opacity .7s ease;
  pointer-events:none; z-index:7;
}
.mood-glow.on{ opacity:1; }

/* hidden flyer, behind the curtain */
.flyer{
  position:absolute; top:12%; right:1.5%;
  width:68px;
  background: var(--cream);
  color: var(--cream-ink);
  border:1px solid var(--brown-700);
  padding:8px 6px 10px;
  box-shadow: 0 10px 20px rgba(0,0,0,.4);
  transform: rotate(3deg);
  z-index:3;
}
.flyer::before{
  content:""; position:absolute; top:-8px; left:50%; transform: translateX(-50%) rotate(-4deg);
  width:34px; height:14px;
  background: rgba(232,163,61,.55);
}
.flyer-heading{
  font-family: var(--font-display);
  color: var(--rust-dk);
  font-size:.7rem; letter-spacing:1px; margin:0 0 6px;
  text-align:center;
}
.flyer-dates{
  list-style:none; margin:0; padding:0;
  font-size:.55rem; line-height:1.5;
  text-align:center;
}
.flyer-dates li{ margin-bottom:4px; }
.flyer-dates .flyer-date{ display:block; font-weight:700; color: var(--rust-dk); }

/* curtain */
.curtain{
  position:absolute; top:0; right:0; width:7%; height:100%;
  background: repeating-linear-gradient(90deg,
    var(--teal) 0 10px, var(--teal-dk) 10px 20px);
  box-shadow: inset 6px 0 14px rgba(0,0,0,.35);
  z-index:4; border:none; padding:0; cursor:pointer;
  transform-origin: right center;
  transition: transform .55s cubic-bezier(.4,0,.2,1);
}
.curtain:hover{ filter: brightness(1.08); }
.curtain.open{ transform: translateX(55%) scaleX(.7); }

.frames{
  position:absolute; top:26%; left:50%; transform: translateX(-50%);
  display:flex; gap:28px;
  z-index:5;
}
.frame{
  width:76px; height:96px;
  background: var(--brown-900);
  border:6px solid var(--mustard-dk);
  border-radius:3px;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 18px rgba(0,0,0,.4);
  transition: transform .15s ease, border-color .15s ease;
}
.frame:hover{ transform: translateY(-4px) rotate(-1deg); border-color: var(--mustard); }
.frame-plus{ color: var(--brown-500); font-size:1.4rem; }
.frame.has-photo{ background-size:cover; background-position:center; }
.frame.has-photo .frame-plus{ display:none; }
.frame-add{
  background: rgba(36,26,18,.35);
  border-style: dashed;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px;
}
.frame-add-icon{ font-size:1.3rem; }
.frame-add-label{ color: var(--mustard); font-size:.5rem; letter-spacing:1px; text-transform:uppercase; }

/* rug */
.rug{
  position:absolute; bottom:0; left:0; right:0; height:38%;
  background: var(--rust-dk);
  border-top-left-radius: 50% 18px;
  border-top-right-radius: 50% 18px;
  box-shadow: inset 0 18px 30px -10px rgba(0,0,0,.4);
  overflow:hidden;
}
.rug-pattern{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 66% 85% at 50% 6%,
      var(--cream-dim) 0 56%, var(--red) 56% 61%, transparent 62%),
    repeating-linear-gradient(90deg, rgba(0,0,0,.05) 0 2px, transparent 2px 7px);
}

/* ---------------------------------------------------------
   RADIO
--------------------------------------------------------- */
.radio{
  position:absolute; bottom:22%; left:50%; transform: translateX(-50%);
  width: min(430px, 70vw);
  z-index:10;
}
.radio-body{
  background: linear-gradient(160deg, var(--brown-500), var(--brown-700) 70%);
  border-radius: 18px;
  padding: 22px 24px 18px;
  box-shadow: 0 20px 40px rgba(0,0,0,.5), inset 0 2px 4px rgba(255,255,255,.12);
  border: 3px solid var(--brown-900);
  display:grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 16px;
  align-items:center;
  transition: background .3s ease;
}
.radio-speaker{
  grid-column:1; grid-row:1;
  display:flex; flex-direction:column; gap:7px;
}
.radio-speaker span{
  height:6px; border-radius:3px;
  background: repeating-linear-gradient(90deg, var(--brown-900) 0 4px, transparent 4px 8px);
  opacity:.8;
}
.radio-readout{
  grid-column:2; grid-row:1;
  background: var(--navy-dk);
  border-radius:8px;
  padding:10px 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,.6), 0 0 14px rgba(232,163,61,.08);
  min-width:0;
}
.radio-controls{ grid-column:3; grid-row:1; }
.play-btn{ grid-column:1; grid-row:2; }

/* disc (CD player skin) shares the speaker's grid slot */
.radio-disc{
  display:none;
  grid-column:1; grid-row:1;
  width:52px; height:52px; border-radius:50%;
  background: conic-gradient(from 0deg, #cfd6dc, #9aa5ad, #cfd6dc 40%, #7d8891, #cfd6dc 70%, #9aa5ad);
  box-shadow: 0 4px 10px rgba(0,0,0,.4), inset 0 0 0 2px rgba(0,0,0,.2);
  position:relative;
}
.radio-disc-hole{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%;
  background: var(--brown-900);
  box-shadow: 0 0 0 3px rgba(255,255,255,.3);
}
.radio.is-playing .radio-disc{ animation: discSpin 2.2s linear infinite; }
@keyframes discSpin{ to{ transform: rotate(360deg); } }

/* second speaker (boombox skin) */
.radio-speaker-right{
  display:none;
  grid-column:4; grid-row:1 / 3;
  align-self:center; justify-self:center;
  width:56px; height:56px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--brown-500), var(--brown-900) 75%);
  box-shadow: inset 0 0 0 4px var(--brown-700), inset 0 0 0 6px var(--brown-900), 0 4px 8px rgba(0,0,0,.4);
  position:relative;
}
.radio-speaker-right span{ display:none; }

/* handle (boombox skin) */
.radio-handle{
  display:none;
  position:absolute; top:-22px; left:50%; transform: translateX(-50%);
  width:120px; height:30px;
  border: 7px solid var(--brown-900);
  border-bottom:none;
  border-radius: 60px 60px 0 0;
}

/* ---------------------------------------------------------
   RADIO SKINS
--------------------------------------------------------- */
.radio[data-skin="boombox"] .radio-body{
  grid-template-columns: .85fr 1.25fr auto .85fr;
  background: linear-gradient(160deg, var(--mustard), var(--mustard-dk) 70%);
  border-radius: 10px;
}
.radio[data-skin="boombox"] .radio-speaker-right{ display:block; }
.radio[data-skin="boombox"] .radio-handle{ display:block; }
.radio[data-skin="boombox"] .radio-speaker{
  width:56px; height:56px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--brown-500), var(--brown-900) 75%);
  box-shadow: inset 0 0 0 4px var(--brown-700), inset 0 0 0 6px var(--brown-900), 0 4px 8px rgba(0,0,0,.4);
  display:block;
}
.radio[data-skin="boombox"] .radio-speaker span{ display:none; }
.radio[data-skin="boombox"] .radio-readout{ background: var(--brown-900); }

.readout-ep{
  background:none; border:none; padding:0; margin:0 0 4px;
  display:block;
  color: var(--teal);
  font-family: var(--font-mono);
  font-size:.6rem; font-weight:700; letter-spacing:1.5px;
  cursor: default;
}
.readout-title{
  color: var(--mustard);
  font-weight:700;
  font-size:.95rem;
  text-shadow: 0 0 8px rgba(232,163,61,.6);
  white-space:nowrap; overflow:hidden;
  position:relative;
}
.readout-title span{ display:inline-block; }
.readout-title.scrolling span{
  animation-name: titleMarquee;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes titleMarquee{
  0%, 12%{ transform: translateX(0); }
  88%, 100%{ transform: translateX(var(--scroll-distance, 0)); }
}
.readout-artist{
  color: var(--cream-dim);
  font-size:.65rem; letter-spacing:1px; text-transform:uppercase;
  margin-top:3px;
}
.readout-bars{ display:flex; gap:3px; margin-top:8px; align-items:flex-end; height:14px; }
.readout-bars i{
  width:4px; background: var(--rust); border-radius:1px;
  height: 20%;
  transition: height .12s ease;
}
.readout-bars.playing i{ animation: bar 1s ease-in-out infinite; }
.readout-bars i:nth-child(odd){ animation-delay:.1s; }
.readout-bars i:nth-child(3n){ animation-delay:.2s; }
@keyframes bar{ 0%,100%{ height:20%; } 50%{ height:100%; } }

.radio-controls{
  display:flex; align-items:center; gap:8px;
}
.dial-btn{
  background: var(--brown-900); color: var(--cream-dim);
  border:none; border-radius:50%;
  width:26px; height:26px;
  font-size:.65rem;
  box-shadow: inset 0 1px 2px rgba(255,255,255,.1);
}
.dial-btn:hover{ color: var(--mustard); }
.dial{
  position:relative;
  width:54px; height:54px; border-radius:50%;
  background: radial-gradient(circle at 35% 30%, var(--cream-dim), var(--mustard-dk) 75%);
  box-shadow: 0 0 0 4px var(--brown-900), 0 6px 10px rgba(0,0,0,.4);
  cursor: grab;
  touch-action:none;
}
.dial:active{ cursor: grabbing; }
.dial-knob{ position:relative; width:100%; height:100%; }
.dial-mark{
  position:absolute; top:4px; left:50%;
  width:3px; height:14px; background: var(--rust-dk);
  transform: translateX(-50%); border-radius:2px;
}
.play-btn{
  width:38px; height:38px; border-radius:50%;
  background: var(--rust); color: var(--cream);
  border:2px solid var(--brown-900);
  display:flex; align-items:center; justify-content:center;
  font-size:.8rem;
  box-shadow: 0 4px 10px rgba(0,0,0,.4);
  justify-self:end;
}
.play-btn:hover{ background: var(--rust-dk); }
.radio-legs{
  height:14px; width:88%; margin:0 auto;
  background: var(--brown-900);
  border-radius: 0 0 6px 6px;
}

.streaming-links{
  display:flex; justify-content:center; gap:8px;
  margin-top:10px;
}
.streaming-link{
  font-family: var(--font-mono);
  font-size:.6rem; letter-spacing:.5px; text-transform:uppercase;
  font-weight:700; text-decoration:none;
  padding:5px 12px; border-radius:14px;
  color:#fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.35);
}
.streaming-link.spotify{ background:#1db954; }
.streaming-link.spotify:hover{ background:#1aa34a; }
.streaming-link.apple{ background:#fa233b; }
.streaming-link.apple:hover{ background:#e01d33; }

/* ---------------------------------------------------------
   RECORD CRATE (shop)
--------------------------------------------------------- */
.crate{
  position:absolute; bottom:16%; left:6%;
  z-index:9;
}
.crate-box{
  position:relative;
  width:120px; height:110px;
  background: linear-gradient(160deg, var(--brown-600), var(--brown-800));
  border: 3px solid var(--brown-900);
  border-radius: 4px 4px 10px 10px;
  box-shadow: 0 16px 28px rgba(0,0,0,.45);
  cursor:pointer;
  transition: transform .15s ease;
}
.crate-box:hover{ transform: translateY(-4px); }
.record{
  position:absolute; bottom:70px;
  width:70px; height:70px; border-radius:50%;
  background: radial-gradient(circle, var(--brown-900) 0 8px, #111 9px 30px, var(--brown-900) 31px 33px, #111 34px);
  box-shadow: 0 6px 10px rgba(0,0,0,.3);
}
.record.r1{ left:4px; transform: rotate(-12deg); }
.record.r2{ left:26px; transform: rotate(4deg); background: radial-gradient(circle, var(--brown-900) 0 8px, #181818 9px 30px, var(--mustard) 31px 33px, #181818 34px); }
.record.r3{ left:48px; transform: rotate(14deg); }
.crate-label{
  position:absolute; bottom:10px; left:50%; transform: translateX(-50%);
  font-family: var(--font-display);
  font-size:.75rem; letter-spacing:1px; color: var(--mustard);
}

/* ---------------------------------------------------------
   TV
--------------------------------------------------------- */
.tv{
  position:absolute; bottom:16%; right:7%;
  z-index:9; cursor:pointer;
}
.tv-body{
  width:150px;
  background: linear-gradient(160deg, var(--brown-500), var(--brown-700));
  border:3px solid var(--brown-900);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 18px 30px rgba(0,0,0,.45);
  transition: transform .15s ease;
}
.tv:hover .tv-body{ transform: translateY(-4px); }
.tv-screen{
  height:96px; border-radius: 50% / 18%;
  background: radial-gradient(ellipse at 35% 30%, #2a3a52, var(--navy-dk) 75%);
  box-shadow: inset 0 0 20px rgba(0,0,0,.6);
  display:flex; align-items:center; justify-content:center;
  text-align:center;
}
.tv-off-label{
  font-size:.55rem; letter-spacing:1px; color: var(--cream-dim); text-transform:uppercase;
  padding: 0 10px;
}
.tv-knobs{ display:flex; gap:10px; justify-content:flex-end; margin-top:10px; }
.tv-knobs span{
  width:14px; height:14px; border-radius:50%;
  background: var(--brown-900);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.15);
}
.tv-legs{
  height:16px; width:70%; margin:0 auto;
  background: var(--brown-900);
  clip-path: polygon(10% 0, 90% 0, 100% 100%, 0 100%);
}

/* striped armchairs, peeking in from the edges */
.armchair{
  position:absolute; bottom:-3%;
  width:140px; height:230px;
  background: repeating-linear-gradient(90deg,
    var(--olive-dk) 0 16px, var(--mustard) 16px 32px,
    var(--rust) 32px 48px, var(--brown-900) 48px 60px);
  border-radius: 70px 70px 10px 10px;
  box-shadow: 0 24px 34px rgba(0,0,0,.4);
  z-index:3;
  opacity:.96;
}
.armchair.left{ left:-4%; transform: rotate(-5deg); }

/* photobook prop */
.photobook{
  position:absolute; bottom:5%; left:43%;
  width:66px; height:48px;
  background:none; border:none; padding:0;
  z-index:9;
  transition: transform .15s ease;
}
.photobook:hover{ transform: translateY(-3px) rotate(-2deg); }
.photobook-cover{
  position:relative;
  width:100%; height:100%;
  background: linear-gradient(160deg, var(--rust), var(--rust-dk));
  border: 2px solid var(--brown-900);
  border-radius: 3px;
  box-shadow: 0 10px 16px rgba(0,0,0,.4);
  display:flex; align-items:center; justify-content:center;
}
.photobook-cover::after{
  content:""; position:absolute; top:2px; bottom:2px; right:-6px; width:6px;
  background: repeating-linear-gradient(0deg, var(--cream) 0 2px, var(--cream-dim) 2px 4px);
  border-radius: 0 2px 2px 0;
}
.photobook-title{
  font-family: var(--font-display);
  color: var(--cream);
  font-size:.85rem; letter-spacing:1px;
}

/* notepad / guestbook prop */
.notepad{
  position:absolute; bottom:5%; left:30%;
  width:46px; height:56px;
  background:none; border:none; padding:0;
  z-index:11;
  transition: transform .12s ease;
}
.notepad:hover{ transform: scale(1.08) rotate(-2deg); }
.notepad-page{
  position:relative;
  width:100%; height:100%;
  background: var(--cream);
  border: 2px solid var(--brown-900);
  border-radius: 2px;
  box-shadow: 0 8px 14px rgba(0,0,0,.4);
  transform: rotate(-3deg);
  padding: 10px 6px 0;
}
.notepad-page span{
  display:block; height:2px; margin-bottom:6px;
  background: var(--brown-500); opacity:.6;
}
.notepad-pen{
  position:absolute; top:-6px; right:-10px;
  width:34px; height:5px; border-radius:3px;
  background: linear-gradient(90deg, var(--brown-900) 0 6px, var(--rust) 6px);
  transform: rotate(40deg);
}

/* handheld game console prop */
.handheld{
  position:absolute; bottom:5%; left:58%;
  width:46px; height:66px;
  background:none; border:none; padding:0;
  z-index:9;
  transition: transform .15s ease;
}
.handheld:hover{ transform: translateY(-3px) rotate(2deg); }
.handheld-body{
  position:relative;
  width:100%; height:100%;
  background: linear-gradient(160deg, var(--olive-br), var(--olive-dk));
  border: 2px solid var(--brown-900);
  border-radius: 5px 5px 10px 10px;
  box-shadow: 0 10px 16px rgba(0,0,0,.4);
  padding:6px 5px;
}
.handheld-screen{
  width:100%; height:26px;
  background: #8fae6b;
  border: 2px solid var(--brown-900);
  border-radius:2px;
  box-shadow: inset 0 0 4px rgba(0,0,0,.5);
}
.handheld-dpad{
  position:relative;
  width:16px; height:16px; margin:7px auto 0;
  background: var(--brown-900);
  box-shadow: -5px 0 0 var(--brown-900), 5px 0 0 var(--brown-900), 0 -5px 0 var(--brown-900), 0 5px 0 var(--brown-900);
}
.handheld-ab{
  display:flex; gap:4px; justify-content:center; margin-top:6px;
}
.handheld-ab span{
  width:8px; height:8px; border-radius:50%;
  background: var(--rust);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
}

/* city map prop — fans suggest a tour stop */
.citymap{
  position:absolute; bottom:6%; left:75%;
  width:52px; height:42px;
  background:none; border:none; padding:0;
  z-index:9;
  transition: transform .15s ease;
}
.citymap:hover{ transform: translateY(-3px) rotate(2deg); }
.citymap-paper{
  position:relative;
  width:100%; height:100%;
  background: var(--cream-dim);
  border: 2px solid var(--brown-900);
  border-radius: 2px;
  box-shadow: 0 8px 14px rgba(0,0,0,.4);
  transform: rotate(-2deg);
  overflow:hidden;
}
.citymap-fold{
  position:absolute; top:0; bottom:0; width:1px;
  background: rgba(36,26,18,.3);
}
.citymap-fold.f1{ left:33%; }
.citymap-fold.f2{ left:66%; }
.citymap-route{
  position:absolute; left:10%; top:60%; width:60%; height:0;
  border-top: 2px dashed var(--rust);
  transform: rotate(-12deg);
}
.citymap-pin{
  position:absolute; top:28%; left:60%;
  width:8px; height:8px; border-radius:50% 50% 50% 0;
  background: var(--rust);
  transform: rotate(45deg);
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}

/* lava lamp decor */
.lava-lamp{
  position:absolute; bottom:17%; left:27%;
  width:30px; height:66px;
  padding:0;
  background: linear-gradient(180deg, var(--navy), var(--navy-dk));
  border: 3px solid var(--brown-900);
  border-radius: 10px 10px 16px 16px;
  overflow:hidden;
  box-shadow: 0 10px 18px rgba(0,0,0,.45), 0 0 14px rgba(232,163,61,.25);
  z-index:8;
  transition: transform .15s ease, box-shadow .3s ease;
}
.lava-lamp:hover{ transform: scale(1.08); }
.lava-lamp.groovy{ box-shadow: 0 10px 18px rgba(0,0,0,.45), 0 0 22px rgba(232,163,61,.7); }
.lava-blob{
  position:absolute; left:50%; width:16px; height:16px; border-radius:50%;
  background: var(--mustard);
  transform: translateX(-50%);
  animation: float 6s ease-in-out infinite;
  opacity:.85;
}
.lava-blob.b1{ bottom:5px; animation-duration:5s; }
.lava-blob.b2{ bottom:20px; width:12px; height:12px; background: var(--rust); animation-duration:7s; animation-delay:1s; }
.lava-blob.b3{ bottom:35px; width:10px; height:10px; animation-duration:6.5s; animation-delay:2s; }
.lava-lamp.groovy .lava-blob{ animation-duration:1.4s; }
@keyframes float{
  0%,100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-30%) translateY(-24px); }
}

/* groovy mode — triggered by the lava lamp, hue-shifts the whole room */
.scene.groovy{ animation: groovyHue 5s linear infinite; }
@keyframes groovyHue{
  from{ filter: hue-rotate(0deg) saturate(1.3); }
  to{ filter: hue-rotate(360deg) saturate(1.3); }
}

/* ---------------------------------------------------------
   MODALS
--------------------------------------------------------- */
.modal-overlay{
  position:fixed; inset:0; z-index:200;
  background: rgba(10,6,3,.75);
  display:none; align-items:flex-start; justify-content:center;
  backdrop-filter: blur(2px);
  overflow-y: auto;
  padding: 24px 0;
}
.modal-overlay.open{ display:flex; }
.modal{
  display:none;
  position:relative;
  background: var(--cream);
  color: var(--cream-ink);
  border-radius: 10px;
  padding: 28px 30px;
  max-width: 420px; width:90%;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
  border: 4px solid var(--brown-900);
}
.modal.open{ display:block; }
.modal h2{
  font-family: var(--font-display);
  color: var(--rust-dk);
  margin:0 0 6px; font-size:1.2rem;
}
.modal-shop{ max-width:480px; }
.shop-grid{
  display:grid; grid-template-columns: repeat(2, 1fr); gap:16px;
  list-style:none; margin:14px 0 0; padding:0;
}
.shop-item{
  background: var(--cream-dim); border-radius:8px; padding:10px;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.shop-item-img{
  width:100%; aspect-ratio:1/1; border-radius:5px;
  background-color: var(--brown-500);
  background-size:cover; background-position:center;
  margin-bottom:8px;
}
.shop-item-name{ font-size:.8rem; font-weight:700; color: var(--cream-ink); }
.shop-item-price{ font-size:.75rem; color: var(--brown-700); margin:2px 0 8px; }
.shop-item-buy{
  background: var(--rust); color:#fff; text-decoration:none;
  font-size:.7rem; font-weight:700; letter-spacing:.5px;
  padding:6px 16px; border-radius:4px;
}
.shop-item-buy:hover{ background: var(--rust-dk); }
.modal-close{
  position:absolute; top:10px; right:14px;
  background:none; border:none; font-size:1.4rem;
  color: var(--brown-700);
}
.coming-soon{ font-size:.85rem; line-height:1.6; }
.secret-sub{ font-size:.7rem; letter-spacing:1px; text-transform:uppercase; color: var(--olive-dk); margin-bottom:14px; }

.polaroid{ background:#fff; padding:10px 10px 30px; box-shadow: 0 10px 24px rgba(0,0,0,.3); transform: rotate(-1deg); }
.polaroid-img{
  width:100%; aspect-ratio: 4/5;
  background-color: var(--brown-500);
  display:flex; align-items:center; justify-content:center;
  color: var(--cream);
  font-size:.7rem;
}
.polaroid-img.has-photo{ aspect-ratio:auto; background:none; }
.polaroid-photo-el{ width:100%; height:auto; display:block; }
.polaroid-caption{ text-align:center; margin-top:10px; display:flex; flex-direction:column; gap:4px; }
.polaroid-caption .caption-title{ font-size:.85rem; font-weight:600; color:#333; }
.caption-credit{
  font-family: var(--font-mono);
  font-size:.6rem; letter-spacing:1.5px; text-transform:uppercase;
  opacity:.6;
}
.caption-credit:empty{ display:none; }

.modal-video{ max-width:520px; }
.video-channel-bar{
  display:flex; align-items:center; justify-content:center; gap:14px;
  margin-bottom:10px;
}
.video-channel-label{
  font-family: var(--font-mono); font-weight:700;
  font-size:.8rem; letter-spacing:1.5px;
  color: var(--rust-dk);
  min-width:70px; text-align:center;
}
.video-arrow{
  background: var(--brown-700); color: var(--cream);
  border:none; border-radius:50%;
  width:30px; height:30px; font-size:1.1rem;
  display:flex; align-items:center; justify-content:center;
}
.video-arrow:hover{ background: var(--brown-900); }

.video-wrap{
  aspect-ratio:16/9; background: var(--navy-dk); border-radius:6px;
  display:flex; align-items:center; justify-content:center; color: var(--cream-dim);
}
.video-wrap iframe, .video-wrap video{ width:100%; height:100%; border:none; border-radius:6px; background:#000; }

.video-info{ margin-top:12px; }
.video-title{
  font-family: var(--font-display);
  color: var(--rust-dk);
  font-size:1rem; margin:0 0 4px;
}
.video-title:empty{ display:none; }
.video-description{
  font-size:.8rem; line-height:1.5; color: var(--brown-700);
  margin:0; white-space:pre-line;
}
.video-description:empty{ display:none; }

.modal-book{ background:none; border:none; box-shadow:none; padding:0; max-width:580px; width:92%; }
.book{
  position:relative;
  background: var(--brown-700);
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
  perspective: 1400px;
}
.modal-book .modal-close{ top:-6px; right:-6px; background:var(--cream); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.book-header{
  text-align:center;
  font-family: var(--font-display);
  color: var(--cream-dim);
  font-size:.65rem; letter-spacing:2px;
  margin-bottom:12px; opacity:.85;
}
.book-tabs{
  display:flex; justify-content:center; gap:8px;
  margin-bottom:12px;
}
.book-tab{
  background: rgba(243,227,195,.1);
  border:1px solid var(--mustard-dk);
  color: var(--cream-dim);
  font-family: var(--font-mono);
  font-size:.65rem; letter-spacing:1px; text-transform:uppercase;
  padding:5px 12px; border-radius:16px;
}
.book-tab:hover{ background: rgba(243,227,195,.2); }
.book-tab.active{ background: var(--mustard); color: var(--brown-900); border-color: var(--mustard); font-weight:700; }
.book-spread{
  display:flex;
  background: var(--cream);
  border-radius:4px;
  overflow:hidden;
  box-shadow: inset 0 0 24px rgba(0,0,0,.18);
  min-height:260px;
  transform-style: preserve-3d;
}
.book-spread.flipping{ animation: pageFlip .5s ease; }
@keyframes pageFlip{
  0%{ transform: rotateY(0) scale(1); filter:brightness(1); }
  50%{ transform: rotateY(-14deg) scale(.96); filter:brightness(.8); }
  100%{ transform: rotateY(0) scale(1); filter:brightness(1); }
}
.book-page{
  flex:1; min-width:0;
  padding:18px 16px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.book-spine{
  width:10px;
  background: linear-gradient(90deg, rgba(0,0,0,.28), rgba(0,0,0,.04) 40%, rgba(0,0,0,.04) 60%, rgba(0,0,0,.28));
}
.book-photo{
  background:#fff; padding:6px 6px 8px;
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
  transform: rotate(-1deg);
  width:100%;
}
.book-page:nth-child(3) .book-photo{ transform: rotate(1deg); }
.book-photo-img{
  width:100%; aspect-ratio:4/5;
  background-color: var(--brown-500);
  display:flex; align-items:center; justify-content:center;
  color: var(--cream); font-size:.6rem; text-align:center;
}
.book-photo-img.has-photo{ aspect-ratio:auto; background:none; }
.book-photo-el{ width:100%; height:auto; display:block; }
.book-caption{
  margin-top:8px;
  display:flex; flex-direction:column; gap:2px;
}
.book-caption .caption-title{
  font-family: 'Caveat', cursive;
  font-size:1.1rem;
  color: var(--cream-ink);
}
.book-caption .caption-credit{ color: var(--cream-ink); }
.book-arrow{
  position:absolute; top:50%; transform: translateY(-50%);
  background: rgba(36,26,18,.75); color: var(--cream);
  border:none; border-radius:50%;
  width:34px; height:34px; font-size:1.3rem;
  cursor:pointer;
}
.book-arrow:hover{ background: var(--rust); }
.book-arrow.left{ left:-6px; }
.book-arrow.right{ right:-6px; }
.book-pagenum{
  text-align:center; margin-top:10px;
  font-size:.65rem; letter-spacing:1px; color: var(--cream-dim);
}

.modal-notepad{ max-width:360px; }
.notepad-sheet{
  background:
    repeating-linear-gradient(var(--cream) 0 34px, var(--teal) 34px 35px, var(--cream) 35px 36px);
  margin: -6px -8px -6px;
  padding: 10px 16px 4px;
  position:relative;
}
.notepad-sheet::before{
  content:""; position:absolute; top:0; bottom:0; left:28px;
  width:2px; background: var(--rust);
  opacity:.5;
}
.notepad-heading{
  font-family: var(--font-display);
  color: var(--rust-dk);
  font-size:1.3rem; margin:6px 0 2px 20px;
}
.notepad-sub{
  font-family: 'Caveat', cursive;
  font-size:1.15rem; line-height:1.3;
  color: var(--cream-ink);
  margin:0 0 10px 20px;
}
.notepad-sheet form{
  display:flex; flex-direction:column; gap:10px;
  margin:0 0 20px 20px;
}
#guestbook-form{ flex-direction:row; align-items:center; flex-wrap:wrap; }

.notepad-sheet input[type="text"],
.notepad-sheet input[type="email"],
.notepad-sheet textarea{
  background:none; border:none; border-bottom:2px solid var(--brown-700);
  font-family: 'Caveat', cursive;
  font-size:1.3rem; color: var(--cream-ink); font-weight:600;
  padding:3px 4px; resize:vertical;
}
#guestbook-email{ flex:1; min-width:160px; font-size:1.4rem; }
.notepad-sheet input[type="text"]:focus,
.notepad-sheet input[type="email"]:focus,
.notepad-sheet textarea:focus{ outline:none; border-bottom-color: var(--rust); }
.notepad-sheet input[type="file"]{
  font-family: var(--font-mono); font-size:.7rem; color: var(--cream-ink);
}
.notepad-sheet form button{
  align-self:flex-start;
  background: var(--olive); color:#fff; border:none; border-radius:4px;
  padding:7px 14px; font-size:.8rem; font-weight:700;
  font-family: var(--font-mono);
}
.notepad-sheet form button:hover{ background: var(--olive-dk); }

.memo-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.memo-list li{
  background: var(--cream-dim); border-radius:6px; padding:10px 12px;
  display:flex; justify-content:space-between; align-items:center;
  font-size:.75rem;
}
.memo-list button{
  background: var(--olive); color:#fff; border:none; border-radius:4px;
  padding:5px 10px; font-size:.65rem;
}

.modal-game{ background:none; border:none; box-shadow:none; padding:0; max-width:300px; width:92%; }
.modal-game .modal-close{ top:-6px; right:-6px; background:var(--cream); border-radius:50%; width:28px; height:28px; display:flex; align-items:center; justify-content:center; }
.console{
  background: linear-gradient(160deg, var(--olive-br), var(--olive-dk));
  border: 3px solid var(--brown-900);
  border-radius: 16px;
  padding: 18px 16px 20px;
  box-shadow: 0 30px 60px rgba(0,0,0,.55);
}
.console-screen-frame{
  position:relative;
  background: #0d1f0f;
  border-radius: 8px;
  padding: 14px;
  box-shadow: inset 0 0 10px rgba(0,0,0,.7);
}
#snake-canvas{
  display:block; width:100%; aspect-ratio:1/1;
  background: #8fae6b;
  border-radius:2px;
  image-rendering: pixelated;
}
.console-overlay{
  position:absolute; inset:14px;
  background: rgba(13,31,15,.92);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  border-radius:2px;
  text-align:center;
  padding: 10px;
}
.console-overlay.hidden{ display:none; }
.console-overlay-title{
  font-family: var(--font-display);
  color: #8fae6b;
  font-size:1.3rem; letter-spacing:2px; margin:0;
}
.console-overlay-hint{
  font-size:.65rem; color: #8fae6b; opacity:.8; margin:0;
}
.console-overlay-actions{
  display:flex; flex-direction:column; align-items:center; gap:8px;
  margin-top:4px;
}
.console-overlay-actions button{
  background: #8fae6b; color: #0d1f0f; border:none; border-radius:4px;
  padding:6px 16px; font-size:.75rem; font-weight:700;
  font-family: var(--font-mono);
}
.console-overlay-actions button:hover{ background:#a3c67f; }
.console-overlay-actions .console-link-btn{
  background:none; color:#8fae6b; text-decoration:underline;
  padding:2px; font-weight:400;
}
.console-overlay-actions .console-link-btn:hover{ background:none; color:#a3c67f; }
.console-score-entry{ display:flex; gap:6px; align-items:center; }
.console-score-entry input{
  background:#0d1f0f; border:1px solid #8fae6b; color:#8fae6b;
  font-family: var(--font-mono); font-size:.7rem;
  padding:5px 7px; border-radius:3px; width:100px;
}
.console-score-entry input:focus{ outline:none; border-color:#a3c67f; }
.console-highscore-list{
  list-style:none; margin:0; padding:0;
  font-size:.7rem; color:#8fae6b;
  display:flex; flex-direction:column; gap:3px;
  max-height:130px; overflow-y:auto;
}
.console-score{
  text-align:center; margin-top:12px;
  font-family: var(--font-mono); font-size:.7rem; letter-spacing:1px;
  color: var(--cream);
}
.console-pad{
  position:relative;
  width:110px; height:110px; margin:16px auto 0;
}
.console-pad-btn{
  position:absolute;
  width:38px; height:38px;
  background: var(--brown-900); color: var(--cream-dim);
  border:none; font-size:.9rem;
}
.console-pad-btn.up{ top:0; left:36px; border-radius:4px 4px 0 0; }
.console-pad-btn.down{ bottom:0; left:36px; border-radius:0 0 4px 4px; }
.console-pad-btn.left{ top:36px; left:0; border-radius:4px 0 0 4px; }
.console-pad-btn.right{ top:36px; right:0; border-radius:0 4px 4px 0; }
.console-pad-btn:hover{ background: var(--brown-700); }

.modal-shows{ max-width:420px; }
.shows-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.shows-list li{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background: var(--cream-dim); border-radius:6px; padding:10px 12px;
  border-left: 3px solid var(--rust);
}
.shows-date{
  font-family: var(--font-display);
  color: var(--rust-dk);
  font-size:.7rem; white-space:nowrap;
}
.shows-place{ font-size:.8rem; flex:1; min-width:120px; }
.shows-tix{
  background: var(--olive); color:#fff; text-decoration:none;
  border-radius:4px; padding:5px 10px; font-size:.65rem; font-weight:700;
}
.shows-tix:hover{ background: var(--olive-dk); }
.shows-empty{
  display:block; text-align:center; padding:16px;
  font-size:.85rem; color: var(--brown-700); border-left:none !important;
}

/* toast */
.toast{
  position:fixed; bottom:24px; left:50%; transform: translateX(-50%) translateY(20px);
  background: var(--brown-900); color: var(--mustard);
  padding:10px 18px; border-radius:20px;
  font-size:.75rem; letter-spacing:.5px;
  border:1px solid var(--mustard-dk);
  opacity:0; pointer-events:none;
  transition: opacity .3s ease, transform .3s ease;
  z-index:300;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width: 760px){
  body{ overflow:auto; }
  .room{ height:auto; min-height:100vh; }
  .scene{ height:860px; }
  .radio{ width: 88vw; bottom:24%; }
  .crate{ left:3%; bottom:12%; transform: scale(.85); }
  .tv{ right:3%; bottom:12%; transform: scale(.85); }
  .frames{ gap:14px; }
  .frame{ width:58px; height:74px; }
  .room-title{ font-size:.75rem; top:14px; left:14px; }
  .room-nav{ top:unset; bottom:14px; left:14px; right:14px; gap:6px; justify-content:center; }
  .room-nav button{ padding:5px 8px; font-size:.55rem; }
  .scene{ height:780px; }
  .frames{ top:20%; gap:14px; }
  .radio{ bottom:30%; width:84vw; }
  .crate{ bottom:3%; transform: scale(.8); }
  .tv{ bottom:3%; transform: scale(.8); }
  .lava-lamp{ bottom:5%; left:38%; }
  .notepad{ left:1%; bottom:20%; transform: scale(.8); }
  .handheld{ left:56%; bottom:4%; }
  .pendant-cord{ height:6vh; }
  .curtain{ width:11%; }
  .flyer{ width:50px; right:0.5%; top:9%; padding:6px 5px 8px; }
  .flyer-heading{ font-size:.55rem; }
  .flyer-dates{ font-size:.45rem; }
  .armchair.left{ left:-8%; width:110px; height:190px; }
  .radio[data-skin="boombox"] .radio-body{ grid-template-columns: 1fr 1.4fr auto; }
  .radio[data-skin="boombox"] .radio-speaker-right{ display:none; }
  .radio[data-skin="boombox"] .radio-handle{ width:90px; height:22px; top:-16px; border-width:5px; }
  .photobook{ left:72%; bottom:4%; }
  .book{ padding:12px; }
  .book-spread{ flex-direction:column; }
  .book-spine{ width:auto; height:8px; }
  .book-arrow{ width:30px; height:30px; font-size:1.1rem; }
  .modal-book .modal-close{ top:8px; right:8px; }
  .citymap{ left:4%; bottom:68%; }
}

/* ---------------------------------------------------------
   CHATROOM — Y2K / AIM-Messenger-style window
--------------------------------------------------------- */
.chat-overlay{
  position:fixed; inset:0; z-index:250;
  background: rgba(10,6,3,.6);
  display:none; align-items:center; justify-content:center;
  padding:24px 0;
}
.chat-overlay.open{ display:flex; }

.chat-window{
  position:relative;
  width:360px; max-width:92vw;
  background:#c0c0c0;
  color:#000;
  border: 2px solid;
  border-color:#fff #0a0a0a #0a0a0a #fff;
  box-shadow: 0 0 0 1px #000, 0 20px 50px rgba(0,0,0,.5);
  font-family: Tahoma, Geneva, Verdana, sans-serif;
}

.chat-titlebar{
  position:relative; z-index:2;
  display:flex; align-items:center; gap:6px;
  background: linear-gradient(90deg, #000080, #1084d0);
  color:#fff;
  padding:4px 6px;
  font-size:.8rem; font-weight:700;
}
.chat-titlebar-icon{ font-size:.85rem; }
.chat-titlebar-text{ flex:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chat-titlebar-btns{ display:flex; gap:3px; }
.chat-tb-btn{
  width:18px; height:16px;
  background:#c0c0c0; color:#000;
  border: 1px solid;
  border-color:#fff #0a0a0a #0a0a0a #fff;
  font-size:.65rem; line-height:1; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  padding:0;
}
.chat-tb-btn:active{ border-color:#0a0a0a #fff #fff #0a0a0a; }

.chat-body{ padding:6px; }
.chat-messages{
  height:240px; overflow-y:auto;
  background:#fff; border:1px solid;
  border-color:#0a0a0a #fff #fff #0a0a0a;
  padding:6px; font-size:.75rem; color:#111;
  display:flex; flex-direction:column; gap:3px;
}
.chat-message{ margin:0; word-break:break-word; }
.chat-message-name{ font-weight:700; }
.chat-system{ margin:0; color:#777; font-style:italic; text-align:center; }

.chat-input-row{ display:flex; gap:4px; margin-top:6px; }
.chat-input-row input{
  flex:1; font-family:inherit; font-size:.75rem;
  padding:4px 6px;
  border:1px solid; border-color:#0a0a0a #fff #fff #0a0a0a;
}
.chat-input-row input:focus{ outline:1px dotted #000; }
.chat-input-row button{
  background:#c0c0c0; font-family:inherit; font-size:.75rem; font-weight:700;
  border:1px solid; border-color:#fff #0a0a0a #0a0a0a #fff;
  padding:4px 14px;
}
.chat-input-row button:active{ border-color:#0a0a0a #fff #fff #0a0a0a; }

.chat-statusbar{
  font-size:.65rem; color:#333;
  border-top:1px solid #808080;
  padding:3px 8px;
  background:#c0c0c0;
}

.chat-name-prompt{
  position:absolute; inset:0;
  background: rgba(0,0,0,.6);
  display:none; align-items:center; justify-content:center;
}
.chat-name-prompt.open{ display:flex; }
.chat-name-box{
  background:#c0c0c0; border:2px solid;
  border-color:#fff #0a0a0a #0a0a0a #fff;
  padding:16px; text-align:center;
  font-size:.8rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.chat-name-box p{ margin:0 0 8px; }
.chat-name-box input{
  width:100%; font-family:inherit; font-size:.8rem;
  padding:5px 6px; margin-bottom:8px; box-sizing:border-box;
  border:1px solid; border-color:#0a0a0a #fff #fff #0a0a0a;
}
.chat-name-box button{
  background:#c0c0c0; font-family:inherit; font-size:.75rem; font-weight:700;
  border:1px solid; border-color:#fff #0a0a0a #0a0a0a #fff;
  padding:5px 16px;
}
.chat-name-box button:active{ border-color:#0a0a0a #fff #fff #0a0a0a; }

/* kept off-screen instead of display:none — some browsers
   deprioritize or skip navigating display:none iframes, which
   silently broke form submissions into this sink */
.form-frame-sink{
  position:absolute; width:1px; height:1px;
  left:-9999px; top:-9999px;
  opacity:0; border:0; pointer-events:none;
}