html,
body {
margin: 0;
height: 100%;
background: radial-gradient(#10151c, #05070a);
font-family: "Quicksand", system-ui;
overflow: hidden;
}
/* ROOM */
.room {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 700px;
height: 600px;
background: linear-gradient(#1a212a, #0a0f14);
border-radius: 18px;
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
/* ✅ allow window to extend OUTSIDE box */
overflow: visible;
}
/* HEARTH — anchor for window + fireplace */
.hearth {
position: absolute;
bottom: 160px;
left: 50%;
transform: translateX(-50%);
width: 260px;
height: 360px;
pointer-events: none;
}
/* ✅ ROUND window */
.window {
position: absolute;
bottom: 230px;
left: 50%;
width: 160px;
height: 160px;
transform: translateX(-50%);
object-fit: cover;
z-index: 2;
filter: drop-shadow(0 0 8px rgba(200, 220, 255, 0.3));
}
/* FIREPLACE */
.fireplace {
position: absolute;
bottom: 0;
left: 50%;
width: 240px;
transform: translateX(-50%);
z-index: 3;
filter: drop-shadow(0 0 18px rgba(255, 160, 90, 0.45));
animation: fireGlow 3s ease-in-out infinite;
}
/* FIRE GLOW */
.fire-glow {
position: absolute;
bottom: -40px;
left: 50%;
width: 520px;
height: 280px;
transform: translateX(-50%);
background: radial-gradient(
ellipse at center,
rgba(255, 170, 100, 0.35) 0%,
rgba(255, 140, 80, 0.18) 40%,
rgba(255, 140, 80, 0.06) 65%,
transparent 75%
);
filter: blur(10px);
z-index: 1;
}
/* Rug */
.rug {
position: absolute;
bottom: 24px;
left: 50%;
width: 420px;
transform: translateX(-50%);
z-index: 1;
}
/* Pudgy */
.pudgy {
position: absolute;
bottom: 80px;
left: 50%;
width: 230px;
transform: translateX(-50%);
z-index: 4;
}
/* Caption */
.caption {
position: absolute;
bottom: 24px;
width: 100%;
text-align: center;
font-family: "Cinzel", serif;
color: #f4e9d8;
font-size: 18px;
letter-spacing: 0.8px;
opacity: 0.9;
}
/* Fire flicker */
@keyframes fireGlow {
0%,
100% {
filter: brightness(1);
}
50% {
filter: brightness(1.15);
}
}
/* Music button */
.music-btn {
position: fixed;
bottom: 18px;
right: 18px;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, 0.18);
color: white;
cursor: pointer;
backdrop-filter: blur(6px);
z-index: 99;
}
/* ✅ Mobile scaling only — no repositioning */
@media (max-width: 940px) {
.room {
transform: translate(-50%, -50%) scale(0.9);
}
}
@media (max-width: 780px) {
.room {
transform: translate(-50%, -50%) scale(0.8);
}
}
@media (max-width: 640px) {
.room {
transform: translate(-50%, -50%) scale(0.7);
}
}
@media (max-width: 480px) {
.room {
transform: translate(-50%, -50%) scale(0.72);
}
}