:root{
  --bg0:#0a0712; --bg1:#160e26; --bg2:#1d1433;
  --panel:#1b1530; --panel2:#241a3e; --line:#3a2c5e;
  --ink:#ece6ff; --dim:#a79bd0; --faint:#6f649a;
  --gold:#f2c84b; --gold2:#ffe39a;
  --hp:#e8506b; --hp2:#ff8aa0;
  --energy:#5fd0ff; --block:#7fa8ff; --mana:#b98aff;
  --atk:#ff7a5c; --poison:#7ee08a; --burn:#ff9a3c;
  --rare-c:#9fb0c8; --rare-u:#5fd08a; --rare-r:#5aa8ff; --rare-e:#c879ff; --rare-l:#ffb43c;
  --cell:46px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%}
body{
  font-family:'Segoe UI','Apple SD Gothic Neo',system-ui,sans-serif;
  background:radial-gradient(120% 90% at 50% -10%, #271646 0%, var(--bg1) 45%, var(--bg0) 100%);
  color:var(--ink); overflow:hidden; user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
}
button{font-family:inherit; cursor:pointer; color:inherit}

/* ---- top bar ---- */
#topbar{
  display:flex; align-items:center; gap:8px; padding:8px 12px;
  background:linear-gradient(#1c1333ee,#160e26cc); border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:40; backdrop-filter:blur(6px);
}
#topbar .back{color:var(--dim); text-decoration:none; font-size:13px; padding:6px 9px; border:1px solid var(--line); border-radius:9px; white-space:nowrap}
#topbar .back:hover{color:var(--ink); border-color:var(--gold)}
#topbar .brand{font-weight:800; letter-spacing:.3px; display:flex; align-items:center; gap:6px; font-size:15px}
#topbar .brand .ic{font-size:18px}
#topbar .spacer{flex:1}
.hud{font-size:13px; padding:5px 9px; border:1px solid var(--line); border-radius:9px; background:#120c22; white-space:nowrap; font-variant-numeric:tabular-nums}
.hud b{color:var(--gold2)}
#topbar button{background:#241a3e; border:1px solid var(--line); border-radius:9px; width:34px; height:32px; font-size:15px}
#topbar button:hover{border-color:var(--gold)}

/* ---- layout ---- */
#app{height:calc(100% - 49px); display:flex; flex-direction:column; overflow:hidden}
#main{flex:1; overflow-y:auto; overflow-x:hidden; padding:12px}
.scene{display:none}
.scene.on{display:block}
#bpSection{margin-top:4px}
#footer{flex:0 0 auto; border-top:1px solid var(--line); background:linear-gradient(#160e26,#120b1f); padding:9px 12px}
.wrap{max-width:760px; margin:0 auto}

/* ---- combat header (enemy) ---- */
.enemybar{
  background:linear-gradient(#2a1838,#1d1030); border:1px solid #4a2c4e; border-radius:16px;
  padding:14px 16px; margin-bottom:10px; position:relative; overflow:hidden;
}
.enemybar.elite{border-color:#7a4cff; box-shadow:0 0 0 1px #7a4cff55, 0 8px 30px #5a2cff22}
.enemybar.boss{border-color:var(--gold); box-shadow:0 0 0 1px #f2c84b55,0 10px 36px #f2c84b22}
.enemytop{display:flex; align-items:center; gap:12px}
.esprite{font-size:46px; filter:drop-shadow(0 4px 8px #0008); line-height:1}
.einfo{flex:1; min-width:0}
.ename{font-weight:800; font-size:16px; display:flex; align-items:center; gap:8px}
.etag{font-size:10px; padding:2px 7px; border-radius:999px; background:#7a4cff33; color:#cbb4ff; border:1px solid #7a4cff66}
.etag.boss{background:#f2c84b22; color:var(--gold2); border-color:#f2c84b66}
.hpbar{height:14px; border-radius:8px; background:#10081c; border:1px solid #00000055; margin-top:7px; overflow:hidden; position:relative}
.hpbar>i{display:block; height:100%; background:linear-gradient(90deg,var(--hp),var(--hp2)); transition:width .35s ease}
.hpbar>span{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; text-shadow:0 1px 2px #000}
.intent{display:flex; align-items:center; gap:6px; margin-top:9px; font-size:13px; color:#ffd9c0}
.intent .ibadge{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:9px; background:#3a1f2a; border:1px solid #6a3340; font-weight:700}
.intent .ibadge.def{background:#1f2b3a; border-color:#33506a; color:#bcd6ff}
.intent .ibadge.buff{background:#3a2f1f; border-color:#6a5733; color:#ffe7b0}
.estatus{display:flex; gap:5px; margin-top:8px; flex-wrap:wrap; min-height:4px}
.chipst{font-size:11px; padding:2px 7px; border-radius:999px; border:1px solid; font-weight:700; font-variant-numeric:tabular-nums}
.chipst.poison{color:var(--poison); border-color:#3a7a45; background:#13301a}
.chipst.burn{color:var(--burn); border-color:#7a5320; background:#2e1c0c}
.chipst.weak{color:#d8a0ff; border-color:#5a3a7a; background:#221033}
.chipst.block{color:var(--block); border-color:#3a4f7a; background:#0f1830}
.chipst.str{color:#ff9a7a; border-color:#7a3a2a; background:#2e1207}
.chipst.regen{color:var(--rare-u); border-color:#3a7a55; background:#102a1c}

/* ---- player stat row ---- */
.pstats{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; align-items:center}
.stat{display:flex; align-items:center; gap:7px; padding:7px 11px; border-radius:11px; background:var(--panel); border:1px solid var(--line); font-weight:800; font-size:14px; font-variant-numeric:tabular-nums}
.stat .lab{font-size:11px; color:var(--faint); font-weight:600}
.stat.hp{border-color:#5a2533}
.stat.hp b{color:var(--hp2)}
.stat.block b{color:var(--block)}
.stat.energy b{color:var(--energy)}
.pips{display:flex; gap:3px}
.pip{width:11px; height:11px; border-radius:50%; background:#241a3e; border:1px solid #4a3a6e}
.pip.on{background:radial-gradient(circle at 35% 30%, #b9f0ff, var(--energy)); border-color:#8fe0ff; box-shadow:0 0 6px #5fd0ff88}
.pstatuses{display:flex; gap:5px; flex-wrap:wrap}

/* ---- backpack grid ---- */
.bpwrap{background:linear-gradient(#1a1230,#140d24); border:1px solid var(--line); border-radius:16px; padding:12px; margin-bottom:10px}
.bphead{display:flex; align-items:center; justify-content:space-between; margin-bottom:9px}
.bphead h3{margin:0; font-size:13px; color:var(--dim); font-weight:700; letter-spacing:.4px}
.bphead .hint{font-size:11px; color:var(--faint)}
.grid{position:relative; margin:0 auto; touch-action:manipulation}
.gcell{
  position:absolute; width:var(--cell); height:var(--cell); border-radius:8px;
  background:#0f0a1c; border:1px solid #2a2046;
}
.gcell.locked{background:repeating-linear-gradient(45deg,#0c0816,#0c0816 6px,#120c1f 6px,#120c1f 12px); border-color:#1c1530; opacity:.55}
.gcell.valid{box-shadow:inset 0 0 0 2px #5fd08a99; background:#13301f}
.gcell.invalid{box-shadow:inset 0 0 0 2px #e8506b99; background:#2a0f17}
.item{
  position:absolute; border-radius:9px; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(#2c2046,#211738); border:1px solid #4a3a6e; cursor:pointer;
  transition:transform .08s, box-shadow .12s, filter .12s; overflow:visible; z-index:2;
}
.item .ico{font-size:22px; pointer-events:none; filter:drop-shadow(0 2px 3px #0007)}
.item .badge{position:absolute; bottom:-6px; right:-5px; font-size:10px; font-weight:800; padding:1px 5px; border-radius:7px; background:#120c22; border:1px solid #4a3a6e; color:var(--gold2); pointer-events:none; font-variant-numeric:tabular-nums}
.item .ecost{position:absolute; top:-6px; left:-5px; font-size:9px; font-weight:800; min-width:15px; text-align:center; padding:1px 3px; border-radius:7px; background:#0c2336; border:1px solid #2a6a8a; color:#9fe6ff; pointer-events:none}
.item[data-r="common"]{border-color:#4a4458}
.item[data-r="uncommon"]{border-color:var(--rare-u); box-shadow:0 0 0 1px #5fd08a33}
.item[data-r="rare"]{border-color:var(--rare-r); box-shadow:0 0 0 1px #5aa8ff44}
.item[data-r="epic"]{border-color:var(--rare-e); box-shadow:0 0 0 1px #c879ff55}
.item[data-r="legendary"]{border-color:var(--rare-l); box-shadow:0 0 0 1px #ffb43c66, 0 0 14px #ffb43c33}
.item.usable{box-shadow:0 0 0 2px #f2c84b, 0 0 14px #f2c84b66; animation:pulse 1.3s infinite}
.item.spent{filter:grayscale(.8) brightness(.6); cursor:default}
.item.synergy::after{content:"✦"; position:absolute; top:-7px; right:-6px; font-size:11px; color:var(--gold2); text-shadow:0 0 6px #f2c84b}
.item.held{opacity:.35}
@keyframes pulse{0%,100%{box-shadow:0 0 0 2px #f2c84b,0 0 8px #f2c84b55}50%{box-shadow:0 0 0 2px #ffe39a,0 0 18px #f2c84baa}}
.item:active{transform:scale(.94)}

/* held tray */
#heldbar{display:none; align-items:center; gap:10px; background:#241a3e; border:1px solid var(--gold); border-radius:12px; padding:8px 10px; margin-bottom:10px}
#heldbar.on{display:flex}
#heldbar .hi{font-size:24px}
#heldbar .ht{flex:1; min-width:0}
#heldbar .ht .n{font-weight:800; font-size:14px}
#heldbar .ht .d{font-size:11px; color:var(--dim)}
#heldbar button{border:1px solid var(--line); background:#1a1230; border-radius:9px; padding:7px 11px; font-size:13px; font-weight:700}
#heldbar button:hover{border-color:var(--gold)}

/* ---- stash tray ---- */
.stash{display:flex; gap:8px; flex-wrap:wrap; min-height:54px; padding:10px; background:#140d24; border:1px dashed var(--line); border-radius:12px}
.stash:empty::before{content:"가방에 넣을 아이템이 없다"; color:var(--faint); font-size:12px}
.sitem{display:flex; align-items:center; gap:8px; padding:7px 11px; border-radius:10px; background:var(--panel2); border:1px solid var(--line); cursor:pointer; font-size:13px; font-weight:700}
.sitem:hover{border-color:var(--gold)}
.sitem .si{font-size:20px}

/* ---- action buttons ---- */
.combatbtns{display:flex; gap:10px; margin-top:4px}
.bigbtn{flex:1; padding:14px; border-radius:13px; border:1px solid var(--line); background:linear-gradient(#2c2046,#211738); font-weight:800; font-size:15px}
.bigbtn:hover{border-color:var(--gold)}
.bigbtn.primary{background:linear-gradient(#f2c84b,#e0a92e); color:#2a1d00; border-color:#ffe39a}
.bigbtn.primary:hover{filter:brightness(1.07)}
.bigbtn.danger{background:linear-gradient(#3a1f2a,#2a141c); border-color:#6a3340; color:#ffb0bd}

/* ---- map / choices ---- */
.maptitle{text-align:center; margin:8px 0 16px}
.maptitle h2{margin:0 0 4px; font-size:20px}
.maptitle p{margin:0; color:var(--dim); font-size:13px}
.doors{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-top:8px}
.door{background:linear-gradient(#211738,#1a1230); border:1px solid var(--line); border-radius:16px; padding:18px 14px; text-align:center; cursor:pointer; transition:transform .1s, border-color .12s}
.door:hover{transform:translateY(-3px); border-color:var(--gold)}
.door .dico{font-size:40px; margin-bottom:8px; filter:drop-shadow(0 4px 8px #0007)}
.door .dn{font-weight:800; font-size:16px; margin-bottom:4px}
.door .dd{font-size:12px; color:var(--dim); line-height:1.4}
.door.combat .dn{color:#ff9a7a}
.door.elite .dn{color:#d8a0ff}
.door.treasure .dn{color:var(--gold2)}
.door.shop .dn{color:#9fe6ff}
.door.rest .dn{color:var(--rare-u)}
.door.boss{border-color:var(--gold); box-shadow:0 0 0 1px #f2c84b44,0 10px 30px #f2c84b22}
.door.boss .dn{color:var(--gold2)}

/* ---- reward / shop overlay panels ---- */
.panelcard{background:linear-gradient(#1f1636,#181027); border:1px solid var(--line); border-radius:16px; padding:16px; margin-bottom:12px}
.panelcard h2{margin:0 0 4px; font-size:19px}
.panelcard .sub{color:var(--dim); font-size:13px; margin:0 0 12px}
.offer{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px}
.ocard{background:#211738; border:1px solid var(--line); border-radius:13px; padding:13px; cursor:pointer; transition:transform .1s,border-color .12s; position:relative}
.ocard:hover{transform:translateY(-2px); border-color:var(--gold)}
.ocard[data-r="uncommon"]{border-color:var(--rare-u)}
.ocard[data-r="rare"]{border-color:var(--rare-r)}
.ocard[data-r="epic"]{border-color:var(--rare-e)}
.ocard[data-r="legendary"]{border-color:var(--rare-l); box-shadow:0 0 16px #ffb43c22}
.ocard .oh{display:flex; align-items:center; gap:9px; margin-bottom:6px}
.ocard .oico{font-size:30px}
.ocard .on{font-weight:800; font-size:15px}
.ocard .osize{font-size:10px; color:var(--faint)}
.ocard .od{font-size:12px; color:var(--dim); line-height:1.45}
.ocard .ocost{position:absolute; top:10px; right:12px; font-weight:800; color:var(--gold2); font-size:13px}
.ocard.sold{opacity:.4; pointer-events:none; filter:grayscale(1)}
.shoprow{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.shopbtn{flex:1; min-width:130px; padding:12px; border-radius:12px; border:1px solid var(--line); background:#211738; font-weight:700; font-size:13px}
.shopbtn:hover{border-color:var(--gold)}
.shopbtn b{color:var(--gold2)}

/* ---- toast ---- */
#toast{position:fixed; left:50%; bottom:18px; transform:translateX(-50%) translateY(20px); background:#241a3eee; border:1px solid var(--gold); color:var(--ink); padding:10px 16px; border-radius:11px; font-size:14px; font-weight:700; opacity:0; transition:.25s; pointer-events:none; z-index:90; max-width:90%; text-align:center}
#toast.on{opacity:1; transform:translateX(-50%) translateY(0)}

/* floating damage numbers */
.flynum{position:fixed; font-weight:900; font-size:22px; pointer-events:none; z-index:80; text-shadow:0 2px 4px #000; animation:fly 1s ease forwards}
@keyframes fly{0%{opacity:0; transform:translateY(0) scale(.6)}20%{opacity:1; transform:translateY(-10px) scale(1.15)}100%{opacity:0; transform:translateY(-46px) scale(.9)}}
.shake{animation:shk .35s}
@keyframes shk{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ---- overlay (title/help/gameover) ---- */
.overlay{position:fixed; inset:0; background:radial-gradient(120% 90% at 50% 0%, #1a0f33ee, #08050feb); display:flex; align-items:center; justify-content:center; z-index:100; padding:18px; overflow:auto}
.overlay[hidden]{display:none}
.obox{background:linear-gradient(#1f1636,#150e26); border:1px solid var(--line); border-radius:20px; padding:26px 22px; max-width:520px; width:100%; box-shadow:0 24px 70px #000a; max-height:92vh; overflow:auto}
.obox h1{margin:0 0 6px; font-size:30px; letter-spacing:.5px; text-align:center}
.obox h1 .em{display:block; font-size:48px; margin-bottom:6px}
.obox .tagline{text-align:center; color:var(--gold2); font-size:14px; margin:0 0 16px; font-weight:600}
.obox h2{margin:0 0 12px; font-size:22px; text-align:center}
.obox ul{margin:0 0 16px; padding-left:18px; line-height:1.7; color:var(--dim); font-size:14px}
.obox ul b{color:var(--ink)}
.obox .big{display:block; width:100%; padding:15px; border-radius:14px; border:none; background:linear-gradient(#f2c84b,#e0a92e); color:#2a1d00; font-weight:900; font-size:17px; margin-top:6px}
.obox .big:hover{filter:brightness(1.07)}
.obox .ghost{display:block; width:100%; padding:12px; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--dim); font-weight:700; font-size:14px; margin-top:9px}
.obox .ghost:hover{color:var(--ink); border-color:var(--gold)}
.scoreline{text-align:center; font-size:15px; color:var(--dim); margin:6px 0 14px}
.scoreline b{color:var(--gold2); font-size:30px; display:block; font-variant-numeric:tabular-nums}
.legend{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:14px 0; font-size:12px}
.legend span{display:inline-flex; align-items:center; gap:5px; color:var(--dim)}
.legend .dot{width:10px;height:10px;border-radius:3px;display:inline-block}

@media (max-width:560px){
  :root{--cell:40px}
  #topbar .brand{font-size:13px}
  .hud{font-size:11px; padding:4px 7px}
  .obox h1{font-size:24px}
}