/* 건스톰: 잿빛 폐허 — ProjectBF */
:root{
  --bg:#0a0710; --bg2:#140d1c; --ink:#f6eedd; --dim:#9a8fa6;
  --amber:#ffb24a; --rust:#ff6a3d; --acid:#9bf24a; --cyan:#54e6ff; --pink:#ff5d8f;
  --panel:#160f20; --line:rgba(255,255,255,.1);
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:#05030a; color:var(--ink);
  font-family:"Apple SD Gothic Neo",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:none;
}
img{image-rendering:pixelated}

.topbar{
  position:fixed; top:0; left:0; right:0; height:44px; z-index:30;
  display:flex; align-items:center; gap:10px; padding:0 12px;
  background:linear-gradient(#0c0814,rgba(12,8,20,.0));
  font-size:13px; pointer-events:none;
}
.topbar .back{
  pointer-events:auto; color:var(--ink); text-decoration:none; opacity:.78;
  background:rgba(0,0,0,.3); padding:5px 10px; border-radius:9px; font-size:12px;
}
.topbar .back:hover{opacity:1}
.topbar .brand{font-weight:800; letter-spacing:-.02em; color:var(--amber)}
.topbar .hs{margin-left:auto; color:var(--dim); font-size:12px}
.topbar .hs b{color:var(--acid)}

#stage{position:fixed; inset:0; overflow:hidden; background:#05030a}
canvas#game{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}

/* ===== HUD ===== */
#hud{position:absolute; top:48px; left:10px; right:10px; z-index:12; pointer-events:none;
  display:flex; flex-direction:column; gap:6px;}
.barRow{display:flex; align-items:center; gap:8px;}
.hpWrap{position:relative; flex:1; max-width:320px; height:18px; background:#1c0e12;
  border:2px solid #3a1a1f; border-radius:4px; overflow:hidden;}
.hpFill{position:absolute; inset:0; width:100%; transform-origin:left;
  background:linear-gradient(#ff7a5a,#e7331f); transition:transform .12s linear;}
.hpTxt{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:800; text-shadow:0 1px 1px #000; letter-spacing:.04em;}
.xpWrap{position:relative; flex:1; max-width:320px; height:10px; background:#10141c;
  border:2px solid #1f2a3a; border-radius:4px; overflow:hidden;}
.xpFill{position:absolute; inset:0; width:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(#7ff0ff,#2bb6ff); transition:transform .18s ease;}
.lvBadge{font-size:11px; font-weight:800; color:var(--cyan); min-width:42px;}

.chips{display:flex; gap:6px; flex-wrap:wrap;}
.chip{background:rgba(8,5,14,.62); border:1px solid var(--line); border-radius:7px;
  padding:3px 8px; font-size:11px; font-weight:700; color:var(--dim);
  display:flex; align-items:center; gap:4px;}
.chip b{color:var(--ink); font-variant-numeric:tabular-nums;}
.chip.floor b{color:var(--amber)} .chip.coin b{color:#ffd23f} .chip.score b{color:var(--acid)}

#weaponDock{position:absolute; left:10px; bottom:10px; z-index:12; display:flex; gap:6px; pointer-events:none;}
.wSlot{width:46px; height:40px; border-radius:9px; background:rgba(8,5,14,.6);
  border:1px solid var(--line); display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:9px; color:var(--dim); position:relative; overflow:hidden;}
.wSlot .ic{font-size:17px; line-height:1}
.wSlot.act{border-color:var(--amber); box-shadow:0 0 0 1px var(--amber), 0 0 12px rgba(255,178,74,.4); color:var(--ink)}

#topctrl{position:absolute; top:48px; right:10px; z-index:14; display:flex; gap:6px;}
.ctrlBtn{pointer-events:auto; width:34px; height:34px; border-radius:9px; cursor:pointer;
  border:1px solid var(--line); background:rgba(8,5,14,.6); color:var(--ink); font-size:15px;}
.ctrlBtn:active{transform:scale(.94)}

#toast{position:absolute; top:42%; left:50%; transform:translate(-50%,-50%); z-index:18;
  background:rgba(8,5,14,.82); border:1px solid var(--line); padding:9px 16px; border-radius:11px;
  font-weight:800; font-size:15px; pointer-events:none; transition:opacity .3s; text-align:center;}
#toast.hidden{opacity:0}

/* ===== overlays ===== */
.overlay{position:absolute; inset:0; z-index:25; display:flex; align-items:center; justify-content:center;
  padding:16px; background:rgba(4,2,8,.72); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);}
.overlay.hidden{display:none}
.panel{width:100%; max-width:440px; background:linear-gradient(#1a1226,#120c1c);
  border:1px solid var(--line); border-radius:18px; padding:22px 20px; text-align:center;
  box-shadow:0 24px 70px rgba(0,0,0,.6);}
.panel.wide{max-width:620px}
.panel h1{font-size:25px; font-weight:900; letter-spacing:-.03em; margin-bottom:4px;}
.panel h1 .sm{display:block; font-size:13px; color:var(--amber); font-weight:800; letter-spacing:.12em; margin-bottom:6px;}
.panel h2{font-size:19px; font-weight:900; margin-bottom:4px;}
.panel .sub{color:var(--dim); font-size:13px; line-height:1.6; margin-bottom:14px;}
.panel .sub b{color:var(--acid)}

.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer;
  border:0; border-radius:12px; padding:13px 22px; font-size:16px; font-weight:800; color:#1a0d04;
  background:linear-gradient(#ffd27a,#ff9d3c); box-shadow:0 6px 0 #b45f15, 0 10px 22px rgba(255,140,40,.35);
  transition:transform .08s;}
.btn:active{transform:translateY(3px); box-shadow:0 3px 0 #b45f15;}
.btn.ghost{background:#241a30; color:var(--ink); box-shadow:0 4px 0 #0d0814;}
.btn.ghost:active{box-shadow:0 1px 0 #0d0814;}
.btnRow{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:6px;}

.howto{text-align:left; background:rgba(0,0,0,.25); border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; font-size:12.5px; line-height:1.85; color:var(--dim); margin:4px 0 16px;}
.howto b{color:var(--ink)} .howto .k{display:inline-block; background:#2a1f38; color:var(--ink);
  border-radius:5px; padding:1px 7px; font-weight:800; font-size:11px; border-bottom:2px solid #0d0814;}

/* augment cards */
.cards{display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:6px;}
@media(max-width:540px){.cards{grid-template-columns:1fr}}
.card2{cursor:pointer; background:linear-gradient(#211731,#181023); border:1px solid var(--line);
  border-radius:14px; padding:14px 12px; text-align:center; transition:transform .1s, border-color .1s;
  display:flex; flex-direction:column; align-items:center; gap:6px;}
.card2:hover{transform:translateY(-3px); border-color:var(--amber)}
.card2 .cIc{font-size:30px; line-height:1}
.card2 .cNm{font-size:14px; font-weight:800}
.card2 .cDz{font-size:11.5px; color:var(--dim); line-height:1.5}
.card2 .cTag{font-size:10px; font-weight:800; letter-spacing:.08em; padding:2px 8px; border-radius:20px;}
.card2 .cTag.wpn{background:rgba(255,106,61,.18); color:var(--rust)}
.card2 .cTag.psv{background:rgba(84,230,255,.16); color:var(--cyan)}
.card2 .cTag.evo{background:rgba(155,242,74,.16); color:var(--acid)}
.card2 .lvdot{display:flex; gap:3px}
.card2 .lvdot i{width:6px; height:6px; border-radius:50%; background:#3a2c4c}
.card2 .lvdot i.on{background:var(--amber)}

.shopItem{display:flex; align-items:center; gap:11px; text-align:left; padding:11px 12px;
  background:rgba(0,0,0,.22); border:1px solid var(--line); border-radius:12px; margin-bottom:8px;}
.shopItem .sic{font-size:24px}
.shopItem .sbody{flex:1; min-width:0}
.shopItem .snm{font-weight:800; font-size:14px}
.shopItem .sdz{font-size:11.5px; color:var(--dim)}
.shopItem .sbuy{flex-shrink:0; cursor:pointer; border:0; border-radius:9px; padding:8px 12px;
  font-weight:800; font-size:13px; color:#1a0d04; background:linear-gradient(#ffe08a,#ffc24a);}
.shopItem .sbuy:disabled{filter:grayscale(.7) brightness(.7); cursor:default}

.statGrid{display:grid; grid-template-columns:1fr 1fr; gap:6px 16px; text-align:left;
  font-size:12.5px; margin:12px 2px 16px;}
.statGrid div{display:flex; justify-content:space-between; border-bottom:1px dashed var(--line); padding:3px 0;}
.statGrid span{color:var(--dim)} .statGrid b{color:var(--ink); font-variant-numeric:tabular-nums}

/* mobile controls */
#touch{position:absolute; inset:0; z-index:10; display:none;}
#touch.on{display:block}
.stickBase{position:absolute; bottom:24px; width:118px; height:118px; border-radius:50%;
  background:rgba(255,255,255,.06); border:2px solid rgba(255,255,255,.14);}
.stickBase.left{left:18px} .stickBase.right{right:18px}
.stickKnob{position:absolute; left:50%; top:50%; width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%; background:rgba(255,255,255,.2); border:2px solid rgba(255,255,255,.3);}
.stickBase.right .stickKnob{background:rgba(255,106,61,.3); border-color:rgba(255,106,61,.5)}
.tBtn{position:absolute; width:62px; height:62px; border-radius:50%; display:flex; align-items:center;
  justify-content:center; font-size:13px; font-weight:800; color:var(--ink);
  background:rgba(20,12,28,.5); border:2px solid rgba(255,255,255,.16);}
#tJump{bottom:150px; right:150px; color:var(--cyan)}
#tDash{bottom:96px; right:64px; color:var(--amber)}

.hidden{display:none !important}
.flash{animation:flz .4s}
@keyframes flz{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}