body, html { margin:0; padding:0; width:100%; height:100%; overflow:hidden; background:#050505; font-family:sans-serif; color:#ddd; }
.hidden { display:none !important; }
.active { display:flex !important; }

.bg-overlay { position:fixed; width:100%; height:100%; background:radial-gradient(circle, #2a1f1f, #000); z-index:-1; }

.main-container { display:flex; width:900px; height:600px; margin:5vh auto; background:rgba(20,20,20,0.95); border:1px solid #444; box-shadow:0 0 50px #000; }
.left-panel { flex:1; border-right:1px solid #333; display:flex; align-items:center; justify-content:center; flex-direction:column; }
.left-panel h1 { color:#d4af37; }
.right-panel { flex:1.5; padding:30px; position:relative; }
.screen { width:100%; height:100%; flex-direction:column; gap:15px; }

.input-group { position:relative; width:100%; }
.input-group i { position:absolute; left:10px; top:12px; color:#666; }
input { width:100%; padding:12px 10px 12px 35px; background:#111; border:1px solid #333; color:white; box-sizing:border-box; }

.btn-gold { background:#d4af37; color:#000; padding:12px; border:none; font-weight:bold; cursor:pointer; width:100%; }
.btn-gold:hover { filter:brightness(1.2); }
.btn-gold:disabled { filter:grayscale(1); cursor:not-allowed; }
.btn-dark { background:#333; color:#fff; padding:12px; border:1px solid #555; cursor:pointer; width:100%; }
.btn-group { display:flex; gap:10px; margin-top:auto; }

.char-list { flex-grow:1; overflow-y:auto; border:1px solid #222; background:#0a0a0a; padding:5px; }
.char-card { padding:15px; border-bottom:1px solid #222; cursor:pointer; display:flex; justify-content:space-between; align-items:center; }
.char-card:hover { background:#151515; }
.char-card.selected { background:#222; border-left:3px solid #d4af37; }

.selector { display:flex; gap:10px; }
.opt-card { flex:1; padding:15px; background:#111; border:1px solid #333; text-align:center; cursor:pointer; opacity:0.5; }
.opt-card.selected { opacity:1; border-color:#d4af37; background:#221a00; }
.opt-card.disabled { opacity:0.2; pointer-events:none; }

#gameModal { position:fixed; top:0; left:0; width:100vw; height:100vh; background:#000; z-index:1000; }
#gameContainer { width:100%; height:100%; }
#hud { position:absolute; top:10px; left:10px; right:10px; display:flex; justify-content:space-between; pointer-events:none; }
#coordInfo { background:rgba(0,0,0,0.5); padding:5px 10px; color:gold; pointer-events:none; }
#btnCloseGame { background:#900; color:white; border:1px solid white; padding:8px 20px; cursor:pointer; pointer-events:auto; }