:root {
    --accent: #ff4800;
    --gold: #ffcc00;
    --blood: #cc0000;
    --bg: #050505;
    --panel-bg: rgba(15, 10, 10, 0.9);
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;700;900&display=swap');

body, html { margin: 0; padding: 0; overflow: hidden; background: #000; font-family: 'Noto Sans KR', sans-serif; color: #fff; }

#game-root { position: relative; width: 100vw; height: 100vh; }
canvas { background: #000; }

#ui-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; }
.sidebar { width: 300px; height: 100%; background: linear-gradient(90deg, rgba(204,0,0,0.1) 0%, transparent 100%); padding: 50px 30px; display: flex; flex-direction: column; gap: 40px; backdrop-filter: blur(10px); }
.module .label { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 5px; }
.module .value { font-size: 34px; font-weight: 900; color: var(--accent); }
.integrity-bar { width: 100%; height: 5px; background: #111; border-radius: 3px; overflow: hidden; }
#hp-fill { height: 100%; background: var(--blood); box-shadow: 0 0 10px var(--blood); transition: width 0.3s; }
.exp-bar-bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: rgba(255,255,255,0.05); }
#exp-fill { height: 100%; background: #fff; box-shadow: 0 0 15px #fff; }

.overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.95); display: flex; justify-content: center; align-items: center; z-index: 100; backdrop-filter: blur(10px); }
.hidden { display: none !important; }
.glass-panel { background: var(--panel-bg); border: 1px solid rgba(255,255,255,0.05); padding: 50px; border-radius: 10px; text-align: center; }
.glass-panel.wide { width: 900px; }
.logo { font-size: 60px; font-weight: 900; color: var(--accent); margin: 0; }

/* DIFFICULTY */
.diff-selector { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.diff-btn { background: #111; border: 1px solid #333; color: #666; padding: 10px 20px; cursor: pointer; transition: 0.2s; }
.diff-btn.selected { border-color: var(--accent); color: var(--accent); background: rgba(255,72,0,0.1); }

/* SHOP */
.shop-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin: 30px 0; }
.shop-item { background: #111; border: 1px solid #222; padding: 20px; cursor: pointer; transition: 0.2s; text-align: left; }
.shop-item:hover { border-color: var(--gold); background: #1a1a00; }
.shop-item h3 { margin: 0; color: var(--gold); }
.shop-item .price { font-size: 18px; font-weight: 900; color: #fff; margin-top: 10px; }

#shop-trigger { margin-top: 20px; background: var(--gold); color: #000; border: none; padding: 10px; font-weight: 900; border-radius: 4px; cursor: pointer; }

button { padding: 15px 40px; background: var(--accent); border: none; color: #fff; font-weight: 900; cursor: pointer; margin-top: 20px; }
button:hover { background: #fff; color: #000; }

.card-container { display: flex; gap: 15px; margin-top: 30px; }
.upgrade-card { flex: 1; background: #111; border: 1px solid #222; padding: 20px; cursor: pointer; }
.upgrade-card:hover { border-color: var(--accent); background: #1a0000; }
.upgrade-card h3 { color: var(--accent); margin: 0; }