/* 보이드러너: 균열의 심층 — 글로시 네온 벡터 던전 로그라이트 */
:root {
  --bg: #05060f;
  --bg2: #0a0d1e;
  --cyan: #34e6ff;
  --magenta: #ff4dd2;
  --violet: #8a6bff;
  --lime: #b6ff3d;
  --amber: #ffc23d;
  --red: #ff4d63;
  --ink: #e8f0ff;
  --dim: #8893b5;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  background: var(--bg); color: var(--ink);
  font-family: "Trebuchet MS", system-ui, -apple-system, sans-serif;
  user-select: none; -webkit-user-select: none; touch-action: none;
}
.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 44px; z-index: 30;
  display: flex; align-items: center; gap: 14px; padding: 0 14px;
  background: linear-gradient(180deg, rgba(8,10,24,.92), rgba(8,10,24,.55));
  backdrop-filter: blur(8px); border-bottom: 1px solid rgba(138,107,255,.22);
}
.topbar .back { color: var(--cyan); text-decoration: none; font-size: 14px; font-weight: 600; }
.topbar .back:hover { text-decoration: underline; }
.topbar .brand { font-weight: 800; letter-spacing: .5px; font-size: 16px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topbar .hs { margin-left: auto; font-size: 12px; color: var(--dim); letter-spacing: .5px; }
.topbar .hs b { color: var(--amber); font-size: 14px; }

#stage { position: fixed; inset: 44px 0 0 0; }
canvas#game { display: block; width: 100%; height: 100%; background: radial-gradient(120% 90% at 50% 0%, #0c1230 0%, #06081a 55%, #04050e 100%); cursor: crosshair; }

/* ---- HUD ---- */
#hud { position: absolute; top: 10px; left: 10px; display: flex; gap: 8px; flex-wrap: wrap; z-index: 12; pointer-events: none; }
.hudChip {
  font-size: 12px; letter-spacing: .4px; color: var(--dim);
  background: rgba(10,14,32,.74); border: 1px solid rgba(138,107,255,.28);
  border-radius: 999px; padding: 5px 11px; backdrop-filter: blur(6px);
}
.hudChip b { color: var(--ink); font-size: 14px; }
.hudChip.depth b { color: var(--violet); }
.hudChip.shard b { color: var(--amber); }
.hudChip.score b { color: var(--cyan); }

#topctrl { position: absolute; top: 10px; right: 10px; z-index: 12; display: flex; gap: 8px; }
.ctrlBtn {
  width: 38px; height: 38px; border-radius: 11px; cursor: pointer; font-size: 16px;
  background: rgba(10,14,32,.78); color: var(--ink); border: 1px solid rgba(138,107,255,.34);
}
.ctrlBtn:hover { border-color: var(--cyan); }

#minimap {
  position: absolute; bottom: 78px; right: 10px; z-index: 12;
  width: 132px; height: 132px; border-radius: 12px;
  background: rgba(6,8,20,.8); border: 1px solid rgba(138,107,255,.3); backdrop-filter: blur(4px);
}

/* ---- bottom bar: HP + weapons ---- */
#botbar { position: absolute; left: 10px; right: 152px; bottom: 10px; z-index: 12; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; pointer-events: none; }
#hpwrap {
  position: relative; flex: 1 1 200px; min-width: 160px; height: 22px; border-radius: 999px;
  background: rgba(10,14,32,.8); border: 1px solid rgba(255,77,99,.4); overflow: hidden;
}
#hpfill { position: absolute; inset: 0; width: 100%; transform-origin: left;
  background: linear-gradient(90deg, #ff4d63, #ff8a5c); transition: width .12s ease; }
#hptext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
#weaponrow { display: flex; gap: 6px; pointer-events: auto; }
.wchip {
  width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  font-size: 20px; background: rgba(10,14,32,.8); border: 1px solid rgba(138,107,255,.3); position: relative;
}
.wchip.active { border-color: var(--cyan); box-shadow: 0 0 14px rgba(52,230,255,.5); background: rgba(52,230,255,.12); }
.wchip .num { position: absolute; top: -6px; left: -4px; font-size: 9px; color: var(--dim);
  background: rgba(6,8,20,.9); border-radius: 6px; padding: 0 3px; }
#dashrow { display: flex; gap: 4px; }
.dashpip { width: 14px; height: 14px; border-radius: 50%; background: rgba(52,230,255,.18); border: 1px solid rgba(52,230,255,.5); }
.dashpip.ready { background: var(--cyan); box-shadow: 0 0 10px rgba(52,230,255,.7); }

/* ---- toast ---- */
#toast {
  position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 14;
  padding: 8px 18px; border-radius: 999px; font-size: 15px; font-weight: 800; letter-spacing: .5px;
  background: rgba(10,14,32,.9); border: 1px solid var(--cyan); color: var(--cyan);
  box-shadow: 0 6px 28px rgba(52,230,255,.3); text-shadow: 0 0 10px rgba(52,230,255,.5);
  transition: opacity .3s, transform .3s; white-space: nowrap;
}
#toast.hidden { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(-8px); }

/* ---- overlays ---- */
.overlay {
  position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 100% at 50% 30%, rgba(8,10,28,.72), rgba(3,4,12,.92));
  backdrop-filter: blur(5px); padding: 16px;
}
.overlay.hidden { display: none; }
.panel {
  width: min(440px, 94vw); text-align: center; padding: 26px 24px 24px;
  background: linear-gradient(180deg, rgba(16,20,44,.96), rgba(9,11,26,.96));
  border: 1px solid rgba(138,107,255,.4); border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
}
.panel.wide { width: min(720px, 96vw); }
.panel h1 { margin: 0 0 2px; font-size: 34px; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--cyan), var(--magenta), var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 30px rgba(138,107,255,.3); }
.panel h2 { margin: 0 0 4px; font-size: 24px; color: var(--ink); }
.panel .tag { margin: 0 0 12px; font-size: 14px; letter-spacing: 6px; color: var(--violet); text-transform: uppercase; }
.panel .sub { margin: 4px 0 14px; font-size: 14px; color: var(--dim); line-height: 1.55; }
.panel .mobile-note { font-size: 12px; }
.howto { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 14px; text-align: left;
  font-size: 12.5px; color: var(--dim); margin: 4px 0 16px; }
.howto b { color: var(--cyan); font-weight: 700; }
.btn {
  cursor: pointer; border: none; border-radius: 13px; padding: 13px 26px;
  font-size: 16px; font-weight: 800; letter-spacing: .5px; color: #04060f;
  background: linear-gradient(90deg, var(--cyan), var(--magenta)); margin-top: 6px;
  box-shadow: 0 10px 30px rgba(255,77,210,.3); transition: transform .1s;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn.big { padding: 15px 40px; font-size: 18px; }

.statgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 14px; }
.statgrid .cell { background: rgba(8,10,26,.7); border: 1px solid rgba(138,107,255,.22); border-radius: 12px; padding: 12px 8px; }
.statgrid .k { font-size: 11px; color: var(--dim); letter-spacing: .5px; }
.statgrid .v { font-size: 26px; font-weight: 800; margin-top: 2px; }
.statgrid .v.shard { color: var(--cyan); }
.pausestats { font-size: 13px; color: var(--dim); line-height: 1.8; margin: 6px 0 14px; text-align: left; }
.pausestats b { color: var(--ink); }

/* ---- augment / shop cards ---- */
.augcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 8px 0 4px; }
.augcard {
  cursor: pointer; text-align: left; padding: 16px 14px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,24,52,.95), rgba(11,13,30,.95));
  border: 1.5px solid rgba(138,107,255,.35); transition: transform .12s, border-color .12s, box-shadow .12s;
  position: relative; overflow: hidden;
}
.augcard:hover { transform: translateY(-4px); border-color: var(--cyan); box-shadow: 0 14px 34px rgba(52,230,255,.25); }
.augcard .ico { font-size: 30px; }
.augcard .nm { font-size: 15px; font-weight: 800; margin: 6px 0 4px; color: var(--ink); }
.augcard .ds { font-size: 12px; color: var(--dim); line-height: 1.5; }
.augcard .cost { position: absolute; top: 10px; right: 12px; font-size: 13px; font-weight: 800; color: var(--amber); }
.augcard.rare { border-color: rgba(255,194,61,.6); }
.augcard.rare:hover { box-shadow: 0 14px 34px rgba(255,194,61,.3); }
.augcard.disabled { opacity: .42; pointer-events: none; }
.augcard .tag2 { position: absolute; top: 0; left: 0; font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 8px; border-bottom-right-radius: 10px; }
.augcard.rare .tag2 { background: var(--amber); color: #1a1200; }
.augcard.wpn .tag2 { background: var(--cyan); color: #04101a; }
#shopLeave { margin-top: 14px; }

@media (max-width: 560px) {
  .augcards { grid-template-columns: 1fr; }
  .howto { grid-template-columns: 1fr; }
  #minimap { width: 96px; height: 96px; bottom: 96px; }
  #botbar { right: 116px; }
  .panel h1 { font-size: 28px; }
}

/* ---- touch UI ---- */
#touchUI.hidden { display: none; }
.stick { position: absolute; bottom: 24px; width: 116px; height: 116px; border-radius: 50%;
  background: rgba(138,107,255,.08); border: 1.5px solid rgba(138,107,255,.3); z-index: 15; }
#stickL { left: 18px; }
#stickR { right: 18px; }
.stick .nub { position: absolute; left: 50%; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px;
  border-radius: 50%; background: rgba(52,230,255,.35); border: 1px solid rgba(52,230,255,.6); }
.tbtn { position: absolute; z-index: 16; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(52,230,255,.16); border: 1.5px solid var(--cyan); color: var(--cyan);
  font-size: 13px; font-weight: 800; }
.tbtn.spec { background: rgba(255,77,210,.16); border-color: var(--magenta); color: var(--magenta); }
#btnDash { right: 148px; bottom: 40px; }
#btnSpec { right: 150px; bottom: 116px; }