* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
body { background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Malgun Gothic', sans-serif; }

/* 1920x1080 고정 비율 게임 컨테이너 */
#game-container {
    width: 1920px;
    height: 1080px;
    position: relative;
    background: #222;
    overflow: hidden;
    transform: scale(1); /* 브라우저 크기에 맞출 때 정산용 */
}

/* 층수(z-index) 정산으로 투명 레이어 억까 원천 차단 */
#background-layer { position: absolute; top:0; left:0; width:100%; height:100%; background-size: cover; background-position: center; z-index: 1; }
#character-layer { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 2; pointer-events: none; }
#luri-sprite { height: 1110px; transform: translateY(100px); }

/* HUD 디자인 */
#hud-layer { position: absolute; top: 20px; left: 50px; z-index: 10; color: #fff; text-shadow: 2px 2px 4px #000; font-weight: bold; }
.hud-row { font-size: 26px; margin-bottom: 10px; display: flex; gap: 30px; }
.time-am { color: #5dade2; } .time-pm { color: #f4d03f; }
.hud-stats { display: flex; gap: 20px; font-size: 22px; margin-bottom: 5px; }
.stat-item.love { color: #ff69b4; } .stat-item.anger { color: #ff4500; } .stat-item.corrupt { color: #9370db; }
.hud-dev-stats { display: flex; gap: 15px; font-size: 16px; color: #ffb6c1; }

/* 시스템 메뉴 상단 바 */
#system-menu { position: absolute; top: 30px; right: 50px; z-index: 11; display: flex; gap: 15px; }
#system-menu button { padding: 8px 16px; font-size: 18px; border: none; border-radius: 5px; cursor: pointer; background: rgba(0,0,0,0.7); color: #fff; border: 1px solid #fff; transition: 0.2s; }
#system-menu button:hover { background: #fff; color: #000; }

/* 대사창 */
#message-window { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); width: 1400px; height: 220px; background: rgba(0,0,0,0.75); border: 2px solid #555; border-radius: 10px; padding: 25px; z-index: 20; color: #fff; }
#speaker-name { font-size: 28px; font-weight: bold; color: #f39c12; margin-bottom: 15px; }
#message-text { font-size: 24px; line-height: 1.6; }

/* 선택지 버튼 (glink 완벽 대체) */
#choice-container { position: absolute; right: 100px; top: 250px; z-index: 30; display: flex; flex-direction: column; gap: 20px; }
.choice-btn { width: 450px; padding: 15px; font-size: 22px; font-weight: bold; text-align: center; border: 2px solid #333; border-radius: 8px; cursor: pointer; color: #fff; transition: 0.2s; box-shadow: 3px 3px 6px rgba(0,0,0,0.5); }
.btn-black { background: #2c3e50; } .btn-black:hover { background: #34495e; }
.btn-blue { background: #2980b9; } .btn-blue:hover { background: #3498db; }
.btn-pink { background: #e08283; } .btn-pink:hover { background: #f1a9a0; }
.btn-orange { background: #d35400; } .btn-orange:hover { background: #e67e22; }
.btn-red { background: #c0392b; } .btn-red:hover { background: #e74c3c; }

/* 모달 레이아웃 (드레스룸, 상태창 등 겹침 프리징 해결사) */
#modal-layer { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.6); z-index: 100; display: flex; justify-content: center; align-items: center; }
#modal-content { width: 1000px; height: 800px; background: #1a1a1a; border: 3px solid #ffb6c1; border-radius: 15px; padding: 40px; position: relative; color: #fff; }
#modal-title { font-size: 36px; margin-bottom: 30px; border-bottom: 2px solid #333; padding-bottom: 10px; }
#modal-body { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; max-height: 550px; overflow-y: auto; }
.close-btn { position: absolute; bottom: 40px; left: 40px; width: 300px; padding: 12px; font-size: 20px; background: #000; color: #fff; border: 1px solid #fff; cursor: pointer; border-radius: 5px; }
.close-btn:hover { background: #fff; color: #000; }