:root {
    --bg-color: #f5eadd;
    --wall-color: #f2d4ba;
    --floor-color: #c5a88d;
    --accent-color: #e8a09a;
    --text-color: #4a3f35;
    --couch-color: #a47c6a;
    --table-color: #8b5e34;
    --rug-color: #d1bfa7;
    --lamp-color: #fdeca6;
}

body {
    font-family: 'Gaegu', cursive;
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

#loading-screen {
    text-align: center;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid var(--accent-color);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
    margin: 0 auto 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#app {
    width: 100vw;
    height: 100vh;
    max-width: 900px;
    max-height: 630px;
    position: relative;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    border-radius: 20px;
    background-color: var(--wall-color);
}

.room {
    width: 100%;
    height: 100%;
    position: relative;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, var(--wall-color) 60%, var(--floor-color) 60%);
    border-radius: 20px;
    overflow: hidden;
}

.background::before { /* Wall texture */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%;
    background-image: radial-gradient(circle at 100px 100px, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0) 50%);
    opacity: 0.5;
}

.background::after { /* Floor texture */
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to right, var(--floor-color), #b1957a);
    opacity: 0.6;
}

.character {
    position: absolute;
    width: 100px;
    height: 150px;
    bottom: 5%;
    z-index: 6;
    transition: transform 1s ease-in-out;
}

.character img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#doodoo {
    left: 48%;
    transform: translateX(-50%);
}

#booboo {
    left: 58%;
    transform: translateX(-50%);
}

.interactive-object {
    position: absolute;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.interactive-object:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,0.25));
}

#couch {
    width: 320px;
    height: 160px;
    bottom: -3%;
    left: 52%;
    transform: translateX(-50%);
    z-index: 5;
}

#couch .couch-cushion {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 30px;
    background: linear-gradient(170deg, #b38b7a, #a47c6a 80%);
    border-radius: 20px 20px 10px 10px;
    box-shadow: inset 0 5px 10px rgba(0,0,0,0.2), 0 10px 15px rgba(0,0,0,0.2);
}

#couch .couch-cushion::before, #couch .couch-cushion::after {
    content: '';
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(170deg, #b38b7a, #a47c6a 80%);
    border-radius: 20px;
}

#couch .couch-cushion::before {
    left: 0;
    border-radius: 20px 10px 10px 20px;
}

#couch .couch-cushion::after {
    right: 0;
    border-radius: 10px 20px 20px 10px;
}

#couch .couch-arm {
    position: absolute;
    width: 40px;
    height: 80px;
    background: #9a7260;
    border-radius: 15px 15px 0 0;
    left: -20px;
    bottom: 30px;
    box-shadow: inset -5px 0px 8px rgba(0,0,0,0.2);
}

#couch .couch-leg {
    position: absolute;
    width: 15px;
    height: 30px;
    background: #6b4a2e;
    bottom: 0;
    border-radius: 0 0 5px 5px;
}

#couch .couch-leg:nth-of-type(1) {
    left: 20px;
}

#couch .couch-leg:nth-of-type(2) {
    right: 20px;
}

#table {
    width: 180px;
    height: 90px;
    bottom: 5%;
    left: 5%;
    z-index: 6;
}

.table-top {
    width: 100%;
    height: 20px;
    background: linear-gradient(to right, #9a6d38, #8b5e34, #9a6d38);
    position: absolute;
    bottom: 50px;
    border-radius: 5px;
    box-shadow: 0 5px 0 #6b4a2e, 0 8px 15px rgba(0,0,0,0.4);
}

.table-top::before { /* Wood grain */
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(90deg, rgba(255,255,255,0.05) 0px, rgba(255,255,255,0.05) 2px, transparent 2px, transparent 10px);
    border-radius: 5px;
    opacity: 0.5;
}

.table-leg {
    position: absolute;
    width: 18px;
    height: 60px;
    background: linear-gradient(to right, #7a522f, #6b4a2e 80%);
    bottom: 0;
    border-radius: 3px;
    box-shadow: 1px 0 0 #9a6d38, -1px 0 0 #5a3f25;
}

.table-leg:nth-of-type(1) { left: 10px; }
.table-leg:nth-of-type(2) { right: 10px; }
.table-leg:nth-of-type(3) { left: 25px; bottom: 5px; filter: brightness(0.85); z-index: -1; }
.table-leg:nth-of-type(4) { right: 25px; bottom: 5px; filter: brightness(0.85); z-index: -1; }

#plant {
    width: 60px;
    height: 90px;
    bottom: calc(5% + 70px);
    left: 11%;
    z-index: 7;
}

.pot-container {
    position: absolute;
    width: 35px;
    height: 30px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.pot {
    width: 100%;
    height: 100%;
    background: linear-gradient(160deg, #d4a373, #a16634);
    border-radius: 2.5px 2.5px 15px 15px;
    position: absolute;
    bottom: 0;
    box-shadow: inset 0 1.5px 4px rgba(0,0,0,0.4);
}

.pot-top {
    content: '';
    position: absolute;
    top: 0;
    left: -3.75px;
    width: 42.5px;
    height: 9px;
    background: #e6b88a;
    border-radius: 4px 4px 2px 2px;
    box-shadow: 0 1px 1.5px rgba(0,0,0,0.2);
}

.stem {
    position: absolute;
    bottom: 27.5px;
    left: 50%;
    width: 2.5px;
    background: #6a994e;
    transform-origin: bottom center;
}

.stem1 { transform: translateX(-7.5px) rotate(-20deg); height: 35px; }
.stem2 { transform: translateX(5px) rotate(15deg); height: 40px; }
.stem3 { transform: translateX(0px) rotate(5deg); height: 30px; z-index: -1; filter: brightness(0.9);}
.stem4 { transform: translateX(-2.5px) rotate(-5deg); height: 45px; z-index: 1; }

.leaf {
    width: 22.5px;
    height: 22.5px;
    background: #a1cca1;
    border-radius: 50% 0;
    position: absolute;
    transform-origin: bottom right;
}

.leaf1 { top: -10px; right: 0; transform: rotate(20deg); background: #8fbc8f; }
.leaf2 { top: -15px; right: 0; transform: rotate(10deg); background: #7aa97a; }
.leaf3 { top: -12.5px; right: 0; transform: rotate(0deg);  }
.leaf4 { top: -20px; right: 0; transform: rotate(5deg); background: #b2d8b2; }

.leaf-dangling {
    width: 20px;
    height: 20px;
    position: absolute;
    bottom: 5px;
    left: 0;
    transform: rotate(120deg);
    background: #7aa97a;
    z-index: 2;
}

#window {
    width: 200px;
    height: 220px;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    perspective: 800px;
}

.window-frame {
    width: 100%;
    height: 100%;
    border: 15px solid #8b5e34;
    background-color: #6b4a2e;
    border-radius: 10px;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.5), 0 5px 20px rgba(0,0,0,0.4);
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    padding: 10px;
    position: relative;
    overflow: hidden;
}

.sky-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    overflow: hidden;
    z-index: 1;
}

.window-grid {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 10px;
    z-index: 2;
}

.window-pane {
    /* The glass pane itself is now mostly for reflection */
    position: relative;
    overflow: hidden;
}

.window-pane::after { /* Reflection */
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.05) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        transparent 75%,
        transparent 100%
    );
    background-size: 60px 60px;
    transform: rotate(45deg);
    opacity: 0.1;
    z-index: 1;
}

.window-glass-reflection {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom right,
        rgba(255, 255, 255, 0.05) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.05) 75%,
        transparent 75%,
        transparent 100%
    );
    background-size: 90px 90px;
    opacity: 0.1;
    z-index: 3;
    pointer-events: none;
}

.window-mullion-h, .window-mullion-v {
    position: absolute;
    background: #7a522f;
    box-shadow: inset 1px 1px 3px rgba(0,0,0,0.4);
    z-index: 2;
}

.window-mullion-h {
    top: 50%;
    left: 0;
    width: 100%;
    height: 10px;
    transform: translateY(-5px);
}

.window-mullion-v {
    top: 0;
    left: 50%;
    width: 10px;
    height: 100%;
    transform: translateX(-5px);
}

/* --- The Cosmos --- */
@keyframes moonRotation {
    from { background-position: 0% 0%; }
    to { transform: translate(-50%, -50%); }
}

.moon {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 20px;
    right: 30px;
    border-radius: 50%;
    background-image: url('https://www.solarsystemscope.com/textures/download/2k_moon.jpg');
    background-size: 200% 100%;
    box-shadow: 
        inset -8px 5px 4px -4px #ffffffa0, 
        inset 10px -10px 25px 20px rgba(0, 0, 0, 0.9),
        0px 0px 20px 2px #ffffff80;
    animation: moonRotation 120s linear infinite;
    z-index: 1;
}

@keyframes animStar {
  from { transform: translateY(0px); }
  to { transform: translateY(-2000px); }
}

#stars1, #stars2, #stars3 {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: transparent;
    border-radius: 50%;
}

#stars1 { /* Big, sparse stars */
    width: 3px;
    height: 3px;
    animation: animStar 250s linear infinite;
    box-shadow: 236px 774px #FFF, 1475px 1222px #FFF, 412px 1438px #FFF, 1269px 748px #FFF, 1723px 1805px #FFF, 240px 1452px #FFF, 1632px 177px #FFF, 1239px 387px #FFF, 848px 1010px #FFF, 84px 343px #FFF, 1700px 921px #FFF, 1243px 1563px #FFF, 1076px 1519px #FFF, 1618px 1974px #FFF, 129px 1276px #FFF, 1530px 584px #FFF, 626px 1762px #FFF, 755px 1195px #FFF, 414px 170px #FFF, 281px 1489px #FFF, 1515px 1477px #FFF, 1709px 48px #FFF, 1420px 338px #FFF;
}
#stars2 { /* Medium, more frequent stars */
    width: 2px;
    height: 2px;
    animation: animStar 200s linear infinite;
    box-shadow: 1735px 331px #FFF, 1290px 418px #FFF, 1599px 232px #FFF, 1141px 76px #FFF, 1178px 1146px #FFF, 1374px 1913px #FFF, 401px 839px #FFF, 1018px 186px #FFF, 510px 1845px #FFF, 1782px 903px #FFF, 1267px 1184px #FFF, 1295px 180px #FFF, 1063px 1561px #FFF, 100px 1205px #FFF, 94px 1969px #FFF, 136px 1836px #FFF, 1789px 753px #FFF, 1202px 1888px #FFF, 884px 94px #FFF, 1253px 165px #FFF, 796px 1433px #FFF, 345px 1904px #FFF, 1059px 1236px #FFF, 1200px 1477px #FFF, 819px 751px #FFF, 142px 199px #FFF, 402px 1904px #FFF, 187px 561px #FFF, 1461px 1022px #FFF, 674px 1997px #FFF, 1135px 1489px #FFF, 749px 1139px #FFF, 1221px 1299px #FFF, 1477px 621px #FFF, 1131px 192px #FFF, 218px 439px #FFF, 642px 756px #FFF, 532px 1470px #FFF, 694px 506px #FFF, 121px 146px #FFF, 1078px 109px #FFF, 1715px 1912px #FFF, 1303px 1734px #FFF, 203px 1664px #FFF, 1493px 852px #FFF, 85px 1228px #FFF, 329px 1234px #FFF, 417px 1121px #FFF, 1682px 1317px #FFF, 1409px 194px #FFF;
}
#stars3 { /* Small, dense stars */
    width: 1px;
    height: 1px;
    animation: animStar 150s linear infinite;
    box-shadow: 1530px 1275px #FFF, 1121px 1481px #FFF, 915px 1653px #FFF, 1152px 1118px #FFF, 1073px 1757px #FFF, 715px 1208px #FFF, 167px 1731px #FFF, 1591px 1982px #FFF, 1159px 160px #FFF, 1162px 1476px #FFF, 429px 1980px #FFF, 1241px 1094px #FFF, 1720px 1837px #FFF, 888px 1865px #FFF, 1157px 1838px #FFF, 1295px 1819px #FFF, 1629px 1414px #FFF, 1227px 1205px #FFF, 608px 1816px #FFF, 711px 1779px #FFF, 1502px 1195px #FFF, 133px 1932px #FFF, 1056px 1331px #FFF, 1404px 173px #FFF, 1754px 1209px #FFF, 615px 182px #FFF, 1445px 1758px #FFF, 477px 1581px #FFF, 1378px 899px #FFF, 1184px 1632px #FFF, 712px 1978px #FFF, 1651px 1693px #FFF, 1335px 164px #FFF, 1421px 1461px #FFF, 747px 1954px #FFF, 80px 1746px #FFF, 713px 132px #FFF, 1269px 748px #FFF, 1400px 304px #FFF, 497px 125px #FFF, 1555px 100px #FFF, 1259px 1220px #FFF, 1690px 1858px #FFF, 924px 1608px #FFF, 1444px 1283px #FFF, 479px 1285px #FFF, 142px 1765px #FFF, 1528px 243px #FFF, 977px 1420px #FFF, 1645px 687px #FFF, 219px 1581px #FFF, 189px 1628px #FFF, 540px 1944px #FFF, 1371px 1223px #FFF, 145px 1825px #FFF, 1185px 536px #FFF, 1060px 1544px #FFF, 1380px 1788px #FFF, 1799px 1587px #FFF, 538px 1686px #FFF, 1419px 1255px #FFF, 1488px 1033px #FFF, 107px 1897px #FFF, 1743px 1895px #FFF, 1572px 1330px #FFF, 1197px 1481px #FFF, 347px 1957px #FFF, 1247px 1751px #FFF, 1324px 1941px #FFF, 911px 1949px #FFF, 1083px 1958px #FFF, 988px 1823px #FFF, 1533px 1914px #FFF, 1668px 1700px #FFF, 452px 1872px #FFF, 840px 1938px #FFF, 269px 1899px #FFF, 122px 1980px #FFF, 1472px 1761px #FFF, 792px 1823px #FFF, 1466px 1919px #FFF, 1362px 1989px #FFF, 1052px 1836px #FFF;
}

@keyframes move-sky {
    from { transform: translate(0, 0); }
    to { transform: translate(-50%, -50%); }
}

.window-sill {
    display: none;
    width: 110%;
    height: 20px;
    background: #8b5e34;
    position: absolute;
    bottom: -15px;
    left: -5%;
    border-radius: 5px;
    box-shadow: 0 5px 5px rgba(0,0,0,0.3);
}

#photos {
    position: absolute;
    top: 15%;
    right: 5%;
    width: 180px;
    height: 130px;
    z-index: 1;
    cursor: pointer;
}

.polaroid {
    position: absolute;
    width: 60px;
    height: 70px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    padding: 4px;
    border: 1px solid #eee;
}

.polaroid-picture {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.8);
    font-size: 20px;
}

.polaroid-picture::before {
    content: '♥';
}

#photos:hover .polaroid {
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    transform: scale(1.05);
}

#p1 { transform: rotate(-10deg); top: 10px; left: 15px; }
#p2 { transform: rotate(5deg); top: 25px; left: 70px; }
#p3 { transform: rotate(15deg); top: 0px; left: 45px; }

#p1 .polaroid-picture { background: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%); }
#p2 .polaroid-picture { background: linear-gradient(45deg, #a1c4fd 0%, #c2e9fb 100%); }
#p3 .polaroid-picture { background: linear-gradient(45deg, #84fab0 0%, #8fd3f4 100%); }

#rug {
    width: 250px;
    height: 70px;
    background:
        radial-gradient(ellipse at center, var(--rug-color) 0%, #bca58f 70%);
    border-radius: 50%;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%) rotateX(60deg);
    transform-style: preserve-3d;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    z-index: 1;
}

#rug::before, #rug::after { /* Tassels */
    content: '';
    position: absolute;
    width: 110%;
    height: 20px;
    background-image: repeating-linear-gradient(to right, #e0e0e0, #e0e0e0 4px, transparent 4px, transparent 10px);
    left: -5%;
}

#rug::before {
    top: -5px;
}

#rug::after {
    bottom: -5px;
}

#lamp {
    width: 80px;
    height: 200px;
    bottom: 10%;
    right: 8%;
    z-index: 6;
}

.lamp-shade {
    width: 100%;
    height: 70px;
    background: radial-gradient(circle at 50% 100%, #fff7d1, var(--lamp-color));
    position: absolute;
    top: 0;
    border-radius: 0 0 40px 40px;
    box-shadow: 0 5px 20px #fff7d1, inset 0 -5px 10px rgba(0,0,0,0.1);
}

.lamp-stand {
    width: 10px;
    height: 110px;
    background: linear-gradient(to right, #e0e0e0, #bdbdbd);
    position: absolute;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    box-shadow: inset 2px 0 3px rgba(0,0,0,0.1);
}

.lamp-base {
    width: 50px;
    height: 20px;
    background: radial-gradient(ellipse at top, #e0e0e0, #b0b0b0);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50% / 100% 100% 0 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#photo-album-shelf {
display: none;
    width: 150px;
    height: 100px;
    top: 280px;
    right: 5%;
    z-index: 6;
}

#photo-album-shelf::before { /* The shelf plank */
    content: '';
    position: absolute;
    bottom: 40px;
    left: 0;
    width: 100%;
    height: 15px;
    background-color: var(--table-color);
    border-radius: 3px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

#photo-album-shelf::after { /* The photo album */
    content: '';
    position: absolute;
    bottom: 55px; /* Sits on the shelf */
    left: 45px;
    width: 60px;
    height: 45px;
    background-color: var(--accent-color);
    border: 3px solid #fff;
    border-radius: 4px;
    transform: rotate(-8deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

#message-box {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 600px;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    text-align: center;
    z-index: 100;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

#message-box.hidden {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
    pointer-events: none;
}

#message-text {
    margin: 0 0 15px;
    font-size: 1.2em;
}

#close-message {
    font-family: 'Gaegu', cursive;
    background-color: var(--accent-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s;
}

#close-message:hover {
    background-color: #d68781;
}

/* --- TV & Console --- */
#tv-console-wrapper {
    position: absolute;
    left: -50px;
    bottom: 30%;
    width: 450px;
    height: 250px;
    z-index: 8;
}

.tv-console {
    position: absolute;
    width: 300px;
    height: 80px;
    background: linear-gradient(to right, #4a3f35, #3a312a);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.4);
}
.tv-console::before, .tv-console::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 100%;
    background: #2f2721;
    top: 0;
}
.tv-console::before { left: 30px; }
.tv-console::after { right: 30px; }


.tv {
    position: absolute;
    width: 250px;
    height: 140px;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.tv-screen-bezel {
    width: 100%;
    height: 100%;
    background: #111;
    border-radius: 15px;
    padding: 10px;
    box-shadow: inset 0 0 5px #000, 0 5px 15px rgba(0,0,0,0.5);
}

.tv-screen {
    width: 100%;
    height: 100%;
    background: #0a0a0a;
    border-radius: 5px;
    transition: all 0.5s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    color: white;
    text-shadow: 0 0 10px #fff, 0 0 20px #2a9df4;
}
.tv-screen.on {
    background: radial-gradient(ellipse at center, #1c3b5a 0%, #0c1a2a 100%);
    box-shadow: inset 0 0 20px #2a9df4;
}

.stardew-title {
    font-family: 'Gaegu', cursive;
    color: #f7ce59;
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.tv-stand {
    position: absolute;
    width: 80px;
    height: 20px;
    background: linear-gradient(to top, #ccc, #eee);
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%) perspective(50px) rotateX(-30deg);
    border-radius: 0 0 10px 10px;
}

#nintendo-switch {
    width: 100px;
    height: 55px;
    position: absolute;
    bottom: 20px;
    left: 70px;
    z-index: 3;
}

.switch-dock {
    width: 100%;
    height: 50px;
    background: #222;
    border-radius: 8px;
    position: absolute;
    bottom: 0;
    box-shadow: inset 0 2px 5px rgba(0,0,0,0.5);
}
.switch-dock::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 10px;
    width: 20px;
    height: 10px;
    background: #0f0;
    border-radius: 2px;
    box-shadow: 0 0 5px #0f0;
    opacity: 0.6;
}

.switch-body-docked {
    position: absolute;
    width: 80%;
    height: 120%;
    background: #333;
    top: -15px;
    left: 10%;
    border-radius: 5px 5px 0 0;
    display: flex;
    justify-content: space-between;
}

.joy-con-docked {
    width: 20px;
    height: 100%;
    border-radius: 5px 5px 0 0;
}
.joy-con-docked.left { background: #00a1e9; }
.joy-con-docked.right { background: #ff5252; }

/* --- Vinyl Player --- */
#vinyl-player {
    position: absolute;
    bottom: 30%;
    right: 20%;
    width: 125px;
    height: 113px;
    z-index: 9;
}

.turntable-base {
    position: absolute;
    width: 100%;
    height: 50px;
    background: linear-gradient(to right, #8b5e34, #6b4a2e);
    bottom: 0;
    border-radius: 6px;
    box-shadow: 0 6px 15px rgba(0,0,0,0.5), inset 0 1.5px 2px rgba(255,255,255,0.1);
}

.platter {
    position: absolute;
    width: 88px;
    height: 88px;
    background: radial-gradient(circle, #ddd, #aaa);
    border-radius: 50%;
    top: -50px;
    left: 19px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4);
}

.vinyl-record {
    position: absolute;
    width: 81px;
    height: 81px;
    background: #111;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    overflow: hidden;
    background-image: repeating-radial-gradient(circle at center, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 2px);
    transition: transform 1.8s linear;
}

#vinyl-player.playing .vinyl-record {
    animation: spin-record 1.8s linear infinite;
}

@keyframes spin-record {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.vinyl-label {
    position: absolute;
    width: 31px;
    height: 31px;
    background: radial-gradient(circle, #e8a09a, #d68781);
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: inset 0 0 3px rgba(0,0,0,0.3);
}

.spindle {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #555;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1.5px solid #ccc;
    z-index: 1;
}

.tone-arm {
    position: absolute;
    width: 63px;
    height: 6px;
    background: linear-gradient(to right, #ccc, #eee);
    border-radius: 3px;
    top: -31px;
    right: -13px;
    transform-origin: 95% 50%;
    transition: transform 0.8s ease-in-out;
}

#vinyl-player.playing .tone-arm {
    transform: rotate(-15deg);
}

.needle {
    position: absolute;
    width: 3px;
    height: 3px;
    background: #333;
    border-radius: 50%;
    top: 2px;
    left: 2px;
}

.power-knob {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #777;
    border-radius: 50%;
    top: 10px;
    right: 15px;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.4);
}

/* --- Navigation --- */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 40px;
    color: var(--text-color);
    text-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    z-index: 100;
    transition: transform 0.2s ease;
}
.nav-arrow:hover {
    transform: translateY(-50%) scale(1.1);
}
.right-arrow { right: 10px; }
.left-arrow { left: 10px; transform: translateY(-50%) rotate(180deg); }
.left-arrow:hover { transform: translateY(-50%) rotate(180deg) scale(1.1); }


/* --- Kitchen --- */
#kitchen {
    background-color: #f0e8d9; /* Lighter wall color */
    border-radius: 20px;
}

.kitchen-background {
    /* This element is no longer needed for the main background, but kept for structure */
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
}

.kitchen-rug {
    position: absolute;
    width: 550px;  /* Way, way larger */
    height: 120px; /* Way, way larger */
    bottom: 5%;    /* Moved up */
    left: 50%;
    transform: translateX(-50%) perspective(300px) rotateX(55deg); /* Corrected angle */
    border-radius: 10px;
    background-color: #f5eadd; /* Base color */
    background-image: 
        linear-gradient(45deg, var(--accent-color) 25%, transparent 25%), 
        linear-gradient(-45deg, var(--accent-color) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--accent-color) 75%),
        linear-gradient(-45deg, transparent 75%, var(--accent-color) 75%);
    background-size: 40px 40px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1; /* Bring rug above the counter */
}

.kitchen-background::before { /* Tiled backsplash */
    content: '';
    position: absolute;
    top: 28%; /* Position between counter and shelf */
    left: 0;
    width: 100%;
    height: 32%;
    background-image:
        linear-gradient(rgba(255,255,255,.2) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255,255,255,.2) 2px, transparent 2px),
        linear-gradient(rgba(255,255,255,.1) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.1) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 10px 10px, 10px 10px;
    background-color: #e0d8c8;
    z-index: 0;
}

.kitchen-counter {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, #c1ab95, #d3bca5); /* Marble-like gradient */
    box-shadow: inset 0 5px 15px rgba(0,0,0,0.15);
    z-index: 1;
}

.kitchen-counter::after { /* Counter edge highlight */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0));
}

.kitchen-shelf {
    position: absolute;
    top: 25%;
    left: 10%;
    width: 80%;
    height: 15px;
    background: linear-gradient(to right, #c3a68c, #b39c87);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 2px;
    z-index: 1;
}

.kitchen-shelf::before, .kitchen-shelf::after { /* Shelf Brackets */
    content: '';
    position: absolute;
    top: 15px;
    width: 15px;
    height: 40px;
    background: #a38c77;
    border-radius: 0 0 5px 5px;
}
.kitchen-shelf::before {
    left: 20px;
}
.kitchen-shelf::after {
    right: 20px;
}

#fridge {
    width: 130px;    /* Smaller */
    height: 200px;   /* Smaller */
    bottom: 40%;     /* On the counter */
    right: 5%;
    z-index: 3;
}

.fridge-door {
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, #f5f5f5, #e0e0e0);
    border-radius: 15px;
    border: 2px solid #bdbdbd;
    box-shadow: inset -8px 0px 15px rgba(0,0,0,0.15);
}

.fridge-handle {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 15px;
    width: 8px;
    height: 80px; /* Shorter handle */
    background: linear-gradient(to bottom, #d0d0d0, #b8b8b8);
}

#oven {
    width: 120px;    /* A LOT Smaller */
    height: 150px;   /* A LOT Smaller */
    position: absolute;
    bottom: 40%;     /* On the counter */
    right: calc(5% + 140px); /* Next to fridge */
    z-index: 4;
}

.stovetop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px; /* Smaller */
    background: linear-gradient(to top, #4d4d4d, #333);
    border-radius: 10px 10px 0 0;
}

.burner {
    position: absolute;
    width: 25px;  /* Smaller */
    height: 25px; /* Smaller */
    background: #222;
    border-radius: 50%;
    border: 2px solid #111;
}

.burner::before { /* Inner ring */
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px; /* Smaller */
    height: 10px; /* Smaller */
    border: 2px solid #1a1a1a;
    border-radius: 50%;
}

.burner.top-left { top: 5px; left: 25px; }
.burner.top-right { top: 5px; right: 25px; }
.burner.bottom-left { top: 28px; left: 25px; }
.burner.bottom-right { top: 28px; right: 25px; }

.oven-door {
    position: absolute;
    top: 50px; /* Below smaller stovetop */
    left: 0;
    width: 100%;
    height: 100px; /* Fill remaining space */
    background: linear-gradient(to top, #e8e8e8, #f8f8f8);
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.oven-handle {
    position: absolute;
    top: 5px;
    left: 10%;
    width: 80%;
    height: 10px; /* Slimmer */
    background: linear-gradient(to right, #d0d0d0, #b8b8b8);
    border-radius: 5px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.oven-window {
    position: absolute;
    top: 20px; /* Adjusted */
    left: 50%;
    transform: translateX(-50%);
    width: 90px; /* Smaller */
    height: 50px; /* Smaller */
    background: #222;
    border: 6px solid #f0f0f0; /* Thinner border */
    border-radius: 5px;
    overflow: hidden;
}

.oven-reflection {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to bottom right,
        transparent 48%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 52%
    );
    transform: rotate(45deg);
}

.oven-knob {
    position: absolute;
    top: 40px; /* Adjusted */
    width: 12px; /* Smaller */
    height: 12px; /* Smaller */
    background: #d0d0d0;
    border-radius: 50%;
    box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
}
.oven-knob:nth-of-type(1) { right: 10px; }
.oven-knob:nth-of-type(2) { right: 25px; }
.oven-knob:nth-of-type(3) { right: 40px; }


#grill {
    width: 150px;
    height: 120px;
    bottom: 40%;
    left: 35%; /* Moved right */
    z-index: 2;
}

.grill-body {
    position: absolute;
    width: 100%;
    height: 50px;
    background: linear-gradient(to top, #444, #666);
    bottom: 20px;
    border-radius: 10px 10px 5px 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

.grill-body::before { /* Grill Grate */
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    width: 80%;
    height: 100%;
    background: 
        repeating-linear-gradient(to right, #222, #222 2px, transparent 2px, transparent 10px),
        repeating-linear-gradient(to bottom, #222, #222 2px, transparent 2px, transparent 10px);
    border-radius: 10px 10px 0 0;
}

.grill-body::after { /* Legs */
    content: '';
    position: absolute;
    bottom: -20px;
    left: 10%;
    width: 10px;
    height: 20px;
    background: #333;
    box-shadow: 118px 0 0 #333;
    border-radius: 0 0 3px 3px;
}

.souvlaki {
    position: absolute;
    width: 100px;
    height: 15px;
    top: -10px;
    z-index: 1;
}

.souvlaki:nth-of-type(1) {
    left: 15px;
    transform: rotate(-10deg);
}

.souvlaki:nth-of-type(2) {
    right: 15px;
    transform: rotate(5deg);
    top: -15px;
}

.souvlaki::before { /* Skewer stick */
    content: '';
    position: absolute;
    left: -15px;
    top: 5px;
    width: 130px;
    height: 5px;
    background: linear-gradient(to right, #f0d9b5, #c8a878);
    border-radius: 5px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

.souvlaki::after { /* Meat and Veggies */
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: 
        linear-gradient(to right, 
            #8B4513 0% 15%, /* Cooked Meat */
            #FFD700 15% 25%, /* Bell Pepper */
            #8B4513 25% 40%, 
            #C0C0C0 40% 50%, /* Onion */
            #8B4513 50% 65%, 
            #228B22 65% 75%, /* Zucchini */
            #8B4513 75% 90%,
            #FF6347 90% 100% /* Tomato */
        );
    border-radius: 8px;
    box-shadow: inset 0 -2px 5px rgba(0,0,0,0.3);
}

.grill-heat {
    display: none; /* The old heat effect is no longer needed */
}

#cookbook {
    width: 50px;
    height: 70px;
    position: absolute;
    bottom: 75%;
    left: 28%;
    z-index: 5;
    transform-style: preserve-3d;
    transform: perspective(800px) rotateX(10deg) rotateY(-25deg);
    transition: transform 0.3s ease;
}

#cookbook:hover {
    transform: perspective(800px) rotateX(10deg) rotateY(-25deg) scale(1.1);
}

.book-cover-front {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #c75e5e; /* Deep red color */
    border-radius: 2px 4px 4px 2px;
    transform: translateZ(4px);
    box-shadow: inset -2px 0 4px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.book-title {
    font-size: 8px;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    line-height: 1.2;
}

.book-spine {
    position: absolute;
    width: 8px;
    height: 100%;
    background: #a64d4d; /* Darker red */
    transform: rotateY(-90deg) translateX(-4px);
    transform-origin: center left;
    border-radius: 2px 0 0 2px;
}

.book-pages-side {
    position: absolute;
    right: 0;
    width: 98%;
    height: 96%;
    top: 2%;
    background: #fdf5e6; /* Page color */
    transform: translateZ(-2px);
    box-shadow: 
        inset 2px 0 0 #e8dcc8,
        inset 4px 0 0 #e8dcc8,
        inset 6px 0 0 #e8dcc8;
}

.book-pages-top {
    position: absolute;
    width: 98%;
    right: 0;
    height: 8px; /* thickness of pages */
    background: #fdf5e6;
    transform: rotateX(90deg) translateY(-4px);
    transform-origin: top center;
     box-shadow: inset 0 -2px 0 #e8dcc8;
}

#snacks {
    width: 45px;  /* A LOT Smaller */
    height: 55px; /* A LOT Smaller */
    position: absolute;
    bottom: 75%; /* On the shelf */
    left: 15%;   /* On the shelf */
    z-index: 6; 
    transform: rotate(-5deg);
}

.bag-body {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 90%;
    background: linear-gradient(to bottom, #ff6b6b, #ff8e8e);
    border-radius: 10px 10px 30% 30% / 10px 10px 20px 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.bag-body::before { /* Candy graphic */
    content: '♥';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
}

.bag-top {
    position: absolute;
    top: 0;
    left: 5%;
    width: 90%;
    height: 25%;
    background: linear-gradient(to right, #e0e0e0, #f8f8f8, #e0e0e0);
    border-radius: 5px;
    transform: perspective(100px) rotateX(20deg);
}

.bag-top::before { /* Crinkled top edge */
    content: '';
    position: absolute;
    top: -5px;
    left: 0;
    width: 100%;
    height: 10px;
    background-image:
        radial-gradient(circle at 10% 50%, #f0f0f0 2px, transparent 3px),
        radial-gradient(circle at 90% 50%, #f0f0f0 2px, transparent 3px),
        linear-gradient(to right, #ccc, #fff, #ccc);
    border-radius: 5px 5px 0 0;
    clip-path: polygon(0 50%, 10% 0, 20% 60%, 30% 20%, 40% 70%, 50% 30%, 60% 80%, 70% 40%, 80% 90%, 90% 50%, 100% 100%, 100% 100%, 0 100%);
}

.nav-arrow.left-arrow {
    z-index: 10;
}

/* --- Kitchen Characters --- */
.doodoo-kitchen {
    left: 15%;
    bottom: 10%; /* Moved up */
    transform: translateX(-50%) scale(0.9); /* Bigger */
    z-index: 10;
}

.booboo-kitchen {
    left: 25%;
    bottom: 10%; /* Moved up */
    transform: translateX(-50%) scale(0.9); /* Bigger */
    z-index: 10;
}

/* --- Kitchen Decorations --- */
#utensil-rack {
    position: absolute;
    top: 35%; /* Moved up */
    left: 48%; /* Moved left */
    width: 100px;
    height: 3px;
    background: #b0a090;
    z-index: 1;
}

.utensil-hook {
    position: absolute;
    top: 0;
    width: 5px;
    height: 10px;
    background: #b0a090;
    border-radius: 0 0 3px 3px;
}
.utensil-hook:nth-of-type(1) { left: 10px; }
.utensil-hook:nth-of-type(2) { left: 60px; }

.spatula, .ladle {
    position: absolute;
    top: 3px;
}

.spatula { left: -5px; }
.ladle { left: 45px; }

.utensil-handle {
    width: 5px;
    height: 40px;
    background: linear-gradient(to right, #e0e0e0, #b8b8b8);
    border-radius: 2px;
}

.spatula-head {
    width: 20px;
    height: 25px;
    background: #ccc;
    position: absolute;
    bottom: -15px;
    left: -7px;
    border-radius: 4px;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
}

.ladle-scoop {
    width: 20px;
    height: 20px;
    background: #ccc;
    position: absolute;
    bottom: -10px;
    left: -7px;
    border-radius: 50%;
    box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2);
}

#kitchen-plant {
    width: 40px;
    height: 60px;
    position: absolute;
    bottom: 75%;
    right: 12%;
    z-index: 6;
}

.small-pot {
    position: absolute;
    width: 30px;
    height: 25px;
    background: #d4a373;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 3px 3px 10px 10px;
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.1);
}
.small-pot::before { /* Pot rim */
    content: '';
    position: absolute;
    top: 0;
    left: -5%;
    width: 110%;
    height: 5px;
    background: #c39263;
    border-radius: 2px;
}

.succulent {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 10px;
    height: 10px;
    transform: translateX(-50%);
}
.succulent-leaf {
    position: absolute;
    width: 20px;
    height: 15px;
    background: linear-gradient(to top, #8fbc8f, #b2d8b2);
    border-radius: 50% 0;
}
.succulent-leaf:nth-child(1) { transform: rotate(45deg); }
.succulent-leaf:nth-child(2) { transform: rotate(165deg); }
.succulent-leaf:nth-child(3) { transform: rotate(285deg); }

/* --- Bedroom --- */
#bedroom {
    border-radius: 20px;
    overflow: hidden;
    position: relative; 
}

.bedroom-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, #c1d3e8 60%, #9aaabf 60%); /* Calm blue bedroom colors */
    z-index: 0; /* Behind all content */
    box-shadow: inset 50px 0 40px -40px rgba(0,0,0,0.15); /* Safer wall shadow */
}

/* Adds a subtle stippled texture to the back wall */
.bedroom-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 60%; /* Cover wall area */
    background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.1) 1px, transparent 0);
    background-size: 4px 4px;
    opacity: 0.5;
}

/* Adds floorboard texture */
.bedroom-background::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%; /* Cover floor area */
    background-image: repeating-linear-gradient(to right, rgba(0,0,0,0.05), rgba(0,0,0,0.05) 1px, transparent 1px, transparent 60px);
}

.bedroom-rug {
    position: absolute;
    width: 300px;
    height: 80px;
    background: #e3d9d0;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%) perspective(200px) rotateX(55deg);
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    z-index: 1; /* Above floor */
}

#bed {
    position: absolute;
    width: 280px;
    height: 250px;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.headboard {
    position: absolute;
    width: 100%;
    height: 120px;
    background: #8b5e34;
    top: -50px;
    border-radius: 20px 20px 0 0;
}

.mattress {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 10px;
}

.duvet {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 80%;
    background: #a9bcd0;
    border-radius: 10px;
    clip-path: polygon(0 20%, 100% 0, 100% 100%, 0% 100%);
}

.pillow {
    position: absolute;
    width: 60px;
    height: 40px;
    background: #dce5ef;
    border-radius: 8px;
    top: 5px;
}
.pillow:nth-child(2) {
    left: 80px;
}

#plushies {
    position: absolute;
    width: 100px;
    height: 50px;
    left: 50%;
    bottom: 40%;
    transform: translateX(-50%);
    z-index: 3;
}

.plushie {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

#cutiepie-bear {
    background: #8b5e34;
    left: 10px;
}

#honeybun-pig {
    background: #f4c2c2;
    left: 45px;
    top: 5px;
}

.plushie-snout {
    position: absolute;
    width: 18px;
    height: 12px;
    background: #a47c6a;
    border-radius: 50%;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}
.plushie-snout::before { /* Nose */
    content: '';
    position: absolute;
    width: 8px;
    height: 5px;
    background: #4a3f35;
    border-radius: 50%;
    top: 2px;
    left: 50%;
    transform: translateX(-50%);
}

.plushie-ear {
    position: absolute;
    width: 12px;
    height: 12px;
    background: inherit;
    border-radius: 50%;
    top: -3px;
}
#cutiepie-bear .plushie-ear:nth-child(1) { left: 3px; }
#cutiepie-bear .plushie-ear:nth-child(2) { right: 3px; }

.pig-ear {
    border-radius: 5px 50% 5px 50%;
    transform: rotate(-15deg);
}
#honeybun-pig .plushie-ear:nth-child(1) { left: 0px; transform: rotate(15deg); }
#honeybun-pig .plushie-ear:nth-child(2) { right: 0px; }

.pig-snout {
    position: absolute;
    width: 15px;
    height: 10px;
    background: #e1a9a9;
    border-radius: 5px;
    bottom: 8px;
    left: 50%;
    transform: translateX(-50%);
}
.pig-snout::before { /* Nostrils */
    content: '';
    position: absolute;
    width: 3px;
    height: 3px;
    background: #c75e5e;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    box-shadow: 6px 0 0 #c75e5e;
}

#bedroom-shelf {
    position: absolute;
    width: 200px;
    height: 10px;
    background: #8797a9;
    top: 35%;
    left: 15%;
    border-radius: 2px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.2);
    z-index: 1;
}

#hamster-cage {
    position: absolute;
    width: 80px;
    height: 60px;
    top: calc(35% - 60px);
    left: 18%;
    z-index: 4;
}

.cage-base {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 25px;
    background: #d4e0eb;
    border-radius: 5px;
}

.cage-bars {
    position: absolute;
    top: 0;
    width: 100%;
    height: 35px;
    background-image: repeating-linear-gradient(to right, #a9bcd0, #a9bcd0 2px, transparent 2px, transparent 8px);
    border: 2px solid #a9bcd0;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
}

.hamster-wheel {
    position: absolute;
    bottom: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    border: 2px solid #9aaabf;
    border-radius: 50%;
}

.wheel-stand {
    position: absolute;
    width: 10px;
    height: 10px;
    background: #9aaabf;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
}

.hamster {
    position: absolute;
    width: 15px;
    height: 10px;
    background: #f0e2d1;
    border-radius: 5px;
    bottom: 5px;
    left: 10px;
}

.hamster-ear {
    position: absolute;
    width: 5px;
    height: 5px;
    background: #e0d2c1;
    border-radius: 50%;
    top: -2px;
    right: 0;
}

/* --- Bedroom Characters --- */
.doodoo-bedroom {
    left: 70%; /* Moved right */
    bottom: 12%;
    transform: translateX(-50%) scale(0.9);
    z-index: 3;
}

.booboo-bedroom {
    left: 80%; /* Moved right */
    bottom: 12%;
    transform: translateX(-50%) scale(0.9);
    z-index: 3;
}