/* General Dreamy House Theme */
body {
    margin:0;
    font-family:'Segoe UI', sans-serif;
    background: linear-gradient(135deg, #1e1f3a, #3a2e4f, #2c5364);
    color:white;
}

.container {
    max-width: 1000px;
    margin:auto;
    padding:10px;
}

.panel {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 0 25px rgba(0,0,0,0.3);
}

h2,h3 { text-shadow:0 0 10px rgba(255,255,255,0.3); }

button {
    background: linear-gradient(45deg, #ff9a9e,#fad0c4);
    border:none;
    padding:10px 15px;
    border-radius:12px;
    cursor:pointer;
    font-weight:bold;
    color:black;
    transition:0.2s;
}

button:hover { transform:scale(1.05); box-shadow:0 0 15px rgba(255,255,255,0.5); }

input { padding:10px; border-radius:10px; border:none; margin:5px; }

#room {
    width:100%;
    height:60vh;
    border-radius:20px;
    position:relative;
    overflow:hidden;
    background: radial-gradient(circle at top, #2b5876, #4e4376);
    box-shadow: inset 0 0 50px rgba(0,0,0,0.5);
}

/* Objects */
.obj {
    width:90px;
    cursor:grab;
    transition: transform 0.2s;
    touch-action: none; /* allow mobile dragging */
}

.obj:active {
    cursor:grabbing;
    transform:scale(1.1);
}

/* Chat Box */
#chatBox {
    height:200px;
    overflow-y:auto;
    background: rgba(0,0,0,0.3);
    padding:10px;
    border-radius:15px;
    margin-top:10px;
}

#chatBox div { margin-bottom:5px; }

/* Popups */
.popup {
    position: fixed;
    display: none;
    top:0; left:0; right:0; bottom:0;
    background: rgba(0,0,0,0.7);
    z-index: 9999;
}
.popup-content {
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 20px;
    width: 90%;
    max-width: 350px;
    padding: 20px;
    margin: 100px auto;
    color: white;
    text-align: center;
}
.popup input { width: 90%; margin: 10px 0; padding: 10px; border-radius: 10px; border:none; }
.popup button { width: 95%; padding: 10px; border-radius: 10px; border:none; margin-top:10px; cursor:pointer; }
.close-btn { float:right; cursor:pointer; color:#fff; font-weight:bold; }

/* -----------------------------
      MOBILE RESPONSIVE STYLES
------------------------------*/
@media(max-width:768px){
    #room{height:50vh;}
    .obj{width:70px;}
    button, input{width:90%;}
    #chatBox{height:150px;}
}

@media(max-width:480px){
    #room{height:45vh;}
    .obj{width:60px;}
    #chatBox{height:120px;}
    h2,h3{font-size:1.2em;}
}