:root{
  --bg:#0a0a12; --panel:#15151f; --panel2:#1c1c2b; --line:#2a2a3d;
  --ink:#e7e7f0; --sub:#9a9ab0; --gold:#f4c95d; --red:#e25b5b;
  --green:#6fcf6f; --blue:#5aa9e6; --purple:#b07de0;
}
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%;}
body{
  background:radial-gradient(120% 80% at 50% -10%, #16101f 0%, var(--bg) 60%);
  color:var(--ink);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Apple SD Gothic Neo",monospace;
  display:flex; flex-direction:column; align-items:center;
  min-height:100vh; padding:0 10px env(safe-area-inset-bottom);
  -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}
a{color:inherit; text-decoration:none;}

.topbar{
  width:100%; max-width:760px; display:flex; align-items:center; gap:14px;
  padding:12px 4px; font-size:13px;
}
.topbar .back{color:var(--sub);}
.topbar .back:hover{color:var(--ink);}
.topbar .brand{font-weight:700; letter-spacing:.5px; font-size:15px;}
.topbar .hs{margin-left:auto; color:var(--sub);}
.topbar .hs b{color:var(--gold);}

#app{
  width:100%; max-width:760px; display:flex; gap:12px; align-items:stretch;
}
#stage{
  position:relative; flex:0 0 auto;
  border:2px solid var(--line); border-radius:10px; overflow:hidden;
  background:#05050a; line-height:0;
  box-shadow:0 10px 40px rgba(0,0,0,.5);
}
canvas#game{
  display:block; width:368px; height:272px;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(5,5,12,.82); color:var(--ink); text-align:center;
  font-size:14px; line-height:1.7; padding:18px; z-index:5;
}
.overlay.hidden{display:none;}
.overlay h2{font-size:22px; margin-bottom:6px;}
.overlay .big{font-size:30px; color:var(--gold);}
.overlay button{
  margin-top:14px; padding:10px 20px; font:inherit; font-weight:700;
  background:var(--gold); color:#1a1408; border:none; border-radius:8px; cursor:pointer;
}

#side{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:10px;}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:10px 12px; font-size:12.5px;
}
#stats .row{display:flex; justify-content:space-between; align-items:center; margin:3px 0;}
#stats .name{color:var(--sub);}
#stats .depth{font-size:14px; font-weight:700; color:var(--purple); margin-bottom:6px;}
.bar{height:8px; border-radius:4px; background:#000; overflow:hidden; flex:1; margin-left:8px; min-width:60px;}
.bar > i{display:block; height:100%;}
.bar.hp > i{background:linear-gradient(90deg,#e25b5b,#ff8a5b);}
.bar.xp > i{background:linear-gradient(90deg,#5aa9e6,#7de0c8);}
.bar.food > i{background:linear-gradient(90deg,#6fcf6f,#c9e06f);}
#stats .equip{margin-top:8px; padding-top:8px; border-top:1px solid var(--line); color:var(--sub); line-height:1.6;}
#stats .equip b{color:var(--ink);}
.log{flex:1 1 auto; overflow:hidden; display:flex; flex-direction:column-reverse; min-height:120px;}
.log .m{margin:2px 0; line-height:1.45; opacity:.95;}
.log .m.dim{opacity:.45;}
.c-gold{color:var(--gold);} .c-red{color:var(--red);} .c-green{color:var(--green);}
.c-blue{color:var(--blue);} .c-purple{color:var(--purple);} .c-sub{color:var(--sub);}

/* 컨트롤 */
#controls{
  width:100%; max-width:760px; margin-top:12px; display:flex; gap:18px;
  justify-content:space-between; align-items:center;
}
.dpad{display:grid; grid-template-columns:repeat(3,46px); grid-auto-rows:46px; gap:6px;}
.acts{display:grid; grid-template-columns:1fr 1fr; gap:8px; flex:1; max-width:240px;}
.db,.ab{
  font:inherit; color:var(--ink); background:var(--panel2);
  border:1px solid var(--line); border-radius:9px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.db{font-size:18px;} .db:active{background:#33334d;}
.db.wait{color:var(--sub);}
.ab{padding:12px 6px; font-size:13px; font-weight:700;}
.ab:active{background:#33334d;}

.hint{
  width:100%; max-width:760px; color:var(--sub); font-size:11px;
  text-align:center; margin:12px 0 22px; line-height:1.7;
}
.hint b{color:var(--ink);}

/* 모달 */
.modal{
  position:fixed; inset:0; background:rgba(4,4,10,.78);
  display:flex; align-items:center; justify-content:center; padding:18px; z-index:50;
}
.modal.hidden{display:none;}
.modal-card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:18px 20px; max-width:440px; width:100%; max-height:80vh; overflow:auto;
  font-size:13px; line-height:1.6;
}
.modal-card h2{font-size:18px; margin-bottom:10px;}
.modal-card h3{font-size:13px; color:var(--sub); margin:14px 0 6px; text-transform:uppercase; letter-spacing:.5px;}
.inv-item{
  display:flex; gap:10px; align-items:center; padding:8px 10px; margin:4px 0;
  background:var(--panel2); border:1px solid var(--line); border-radius:8px; cursor:pointer;
}
.inv-item:hover{border-color:var(--gold);}
.inv-item .key{
  width:22px; height:22px; flex:0 0 auto; border-radius:5px; background:#000;
  display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--gold);
}
.inv-item .it-name{flex:1;}
.inv-item .it-tag{font-size:11px; color:var(--sub);}
.inv-item.eq{border-color:var(--green);}
.modal-card .close{
  margin-top:14px; width:100%; padding:10px; font:inherit; font-weight:700;
  background:var(--panel2); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; cursor:pointer;
}
.modal-card .empty{color:var(--sub); padding:10px 0;}
kbd{background:#000; border:1px solid var(--line); border-radius:4px; padding:1px 5px; font-size:11px;}

@media (max-width:680px){
  #app{flex-direction:column; align-items:center;}
  canvas#game{width:92vw; height:auto; max-width:420px;}
  #side{width:100%; max-width:420px;}
  .log{min-height:84px;}
}