body { background: #1a1a1a; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; }

#game-container {
    width: 800px;
    height: 550px;
    border: 8px solid #333;
    position: relative;
    overflow: hidden;
}

#room {
    width: 100%;
    height: 80%;
    background-size: cover;
    background-position: center;
    position: relative;
    transition: 0.8s filter ease-in-out;
}

/* জগত পরিবর্তনের লুক */
.real-world { background-image: url('images/bg-real.jpg'); }
.shadow-world { 
    background-image: url('images/bg-shadow.jpg.png'); 
    filter: sepia(0.6) contrast(1.3) brightness(0.7) hue-rotate(280deg);
}

/* ক্যারেক্টার স্টাইল ও অ্যানিমেশন */
#player-character {
    width: 100px;
    height: 180px;
    position: absolute;
    bottom: 30px;
    left: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    transition: left 1.5s linear;
    z-index: 100;
}

.character-idle { background-image: url('images/pose1.png'); }

.character-walk {
    animation: walk-cycle 0.4s infinite;
}

@keyframes walk-cycle {
    0% { background-image: url('images/pose1.png'); }
    50% { background-image: url('images/pose2.png'); }
    100% { background-image: url('images/pose1.png'); }
}

/* অবজেক্টস */
#key-item {
    width: 50px;
    height: 30px;
    background-image: url('images/key.png');
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 60px;
    right: 200px;
    display: none; /* শ্যাডো জগতে এটি দৃশ্যমান হবে */
    cursor: pointer;
}

#door {
    width: 100px;
    height: 200px;
    position: absolute;
    right: 40px;
    top: 60px;
    cursor: pointer;
}

/* UI ডিজাইন */
#ui-panel {
    height: 20%;
    background: #000;
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: white;
    font-family: 'Courier New', Courier, monospace;
}

.switch-btn {
    padding: 10px 20px;
    background: #4a0000;
    color: #ff9999;
    border: 2px solid #700000;
    cursor: pointer;
    font-weight: bold;
}

#inv-slot {
    width: 50px;
    height: 50px;
    border: 1px solid #444;
    display: flex;
    justify-content: center;
    align-items: center;
}