:root{
  --bg:#08090d;
  --panel:#12141b;
  --panel-2:#1a1d26;
  --line:#2a2e3a;
  --text:#ece8df;
  --muted:#a29c8f;
  --faint:#6f6a60;
  --amber:#ffb347;
  --gold:#ffd36e;
  --hp:#ef6b6b;
  --sans:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"D2Coding",Menlo,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;word-break:keep-all;overflow:hidden;-webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
kbd{font-family:var(--mono);font-size:11px;padding:1px 5px;border:1px solid var(--line);border-bottom-width:2px;border-radius:5px;
  background:var(--panel-2);color:var(--muted);margin:0 2px;white-space:nowrap}

.app{height:100%;max-width:1100px;margin:0 auto;display:flex;flex-direction:column;
  padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}

/* 상태줄 */
.hud{display:flex;align-items:center;gap:8px;padding-bottom:8px}
.chip{display:flex;align-items:baseline;gap:4px;padding:5px 9px;background:var(--panel);border:1px solid var(--line);border-radius:9px;white-space:nowrap}
.chip span{font-size:12px;color:var(--muted)}
.chip b{font-family:var(--mono);font-weight:700}
.bar{position:relative;flex:1;min-width:0;height:28px;background:var(--panel);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.bar i{position:absolute;left:0;top:0;bottom:0;transition:width .15s}
.bar.hp i{background:linear-gradient(90deg,#7a2630,var(--hp))}
.bar.oil i{background:linear-gradient(90deg,#7a4b16,var(--amber))}
.bar.oil.low i{animation:blink 1s steps(2) infinite}
.bar span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
@keyframes blink{50%{opacity:.45}}
.icon-btn{width:34px;height:30px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-weight:800;font-size:12px;flex:none}
.icon-btn:hover{color:var(--text)}

/* 화면 */
.stage{position:relative;flex:1;min-height:0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#000}
.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
body.hurt .stage{animation:hurt .3s ease}
@keyframes hurt{0%{box-shadow:inset 0 0 0 0 rgba(239,107,107,0)}30%{box-shadow:inset 0 0 70px 14px rgba(239,107,107,.55)}100%{box-shadow:inset 0 0 0 0 rgba(239,107,107,0)}}
.bossbar{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);width:min(420px,80%);height:20px;border-radius:10px;
  background:rgba(10,8,8,.8);border:1px solid #5a2a2a;overflow:hidden}
.bossbar i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#8a1f2b,#ff6b6b);transition:width .15s}
.bossbar span{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;text-shadow:0 1px 2px #000}
.toast{position:absolute;left:50%;top:14px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:rgba(10,10,14,.82);
  border:1px solid var(--line);font-size:14px;font-weight:600;color:var(--gold);opacity:0;transition:opacity .25s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1}

/* 무기 */
.weps{display:flex;gap:8px;margin-top:8px}
.wep{flex:1;min-width:0;display:flex;align-items:center;gap:6px;height:38px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.wep .wn{font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wep .wc{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--amber);white-space:nowrap}
.wep.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px rgba(255,179,71,.25)}
.wep.empty{opacity:.4}

/* 터치 조작: 손가락 기기에서만 */
.touch{display:none;gap:10px;margin-top:8px;align-items:center}
.stick{position:relative;width:128px;height:128px;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle,var(--panel-2),var(--panel));flex:none;touch-action:none}
.stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#2c2f3b;border:1px solid #444a5c}
.tbtns{flex:1;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tbtns button{height:56px;border:1px solid var(--line);border-radius:12px;background:var(--panel);font-size:14px;touch-action:none}
.tbtns button.on{background:var(--panel-2);border-color:var(--amber)}
.tbtns .fire{border-color:#7a4b16;color:var(--amber);font-weight:700}
@media (pointer:coarse){
  .touch{display:flex}
  .keys{display:none}
}

.keys{margin-top:8px;font-size:12px;color:var(--faint);text-align:center;line-height:2}

/* 창 */
.modal{position:fixed;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(4,5,8,.78);backdrop-filter:blur(3px)}
.box{width:100%;max-width:420px;max-height:100%;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px 22px;text-align:center}
.box.wide{max-width:600px;text-align:left}
.box h1{font-size:40px;font-weight:900;letter-spacing:-.03em;background:linear-gradient(180deg,#fff2cf,var(--amber));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.box h2{font-size:24px;font-weight:800;letter-spacing:-.02em}
.box.wide h2{text-align:center}
.lead{margin-top:8px;color:var(--muted);line-height:1.65}
.lead b{color:var(--text)}
.lead.small{font-size:13px;margin-top:12px}
.choices{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.choices button{display:flex;align-items:center;gap:10px;min-height:46px;padding:8px 14px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);text-align:left;font-size:15px}
.choices button:hover,.choices button:focus-visible{border-color:var(--amber)}
.choices button small{color:var(--faint);font-size:12px;margin-left:auto;text-align:right}
.choices button .pd{display:block;font-size:12px;color:var(--muted)}
.choices button .pn{font-weight:700}
.rec{margin-top:14px;font-size:13px;color:var(--faint)}
.help{width:100%;border-collapse:collapse;margin-top:14px;font-size:13px}
.help th{text-align:left;font-weight:600;color:var(--muted);padding:7px 10px 7px 0;white-space:nowrap;vertical-align:top}
.help td{padding:7px 0;border-top:1px solid var(--line)}
.help tr:first-child td{border-top:0}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.stats div{background:var(--panel-2);border-radius:10px;padding:10px}
.stats dt{font-size:12px;color:var(--muted)}
.stats dd{font-family:var(--mono);font-size:20px;font-weight:700}

@media (max-width:520px){
  .hud{gap:6px}
  .bar{height:26px}
  .chip{padding:4px 7px}
  .wep{height:34px;font-size:13px}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}