* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg0: #0b0712;
  --bg1: #160d24;
  --panel: #1b1230;
  --panel2: #251a3e;
  --line: #3a2b5c;
  --neon: #34f5c5;
  --neon2: #ff5d8f;
  --gold: #ffd23f;
  --red: #ff5151;
  --blue: #54b9ff;
  --green: #6ee86e;
  --ink: #eaf6ff;
  --sub: #9d8fc4;
}

html, body {
  height: 100%;
  background: radial-gradient(120% 80% at 50% 0%, #1a1030 0%, var(--bg0) 70%);
  color: var(--ink);
  font-family: "DungGeunMo", "Galmuri11", "Galmuri9", ui-monospace, "Apple SD Gothic Neo", monospace;
  -webkit-font-smoothing: none;
  overflow: hidden;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }

.topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 40px; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 14px;
  background: linear-gradient(180deg, rgba(11,7,18,.95), rgba(11,7,18,.2));
  font-size: 12px; letter-spacing: .5px;
}
.topbar .back { color: var(--neon); text-decoration: none; opacity: .9; }
.topbar .back:hover { opacity: 1; text-shadow: 0 0 8px var(--neon); }
.topbar .brand { color: var(--ink); opacity: .85; }
.topbar .hs { color: var(--gold); }

#app { position: fixed; inset: 40px 0 0 0; overflow: hidden; }

/* ───────── generic ui ───────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; color: var(--ink);
  background: var(--panel2); border: 2px solid var(--line);
  padding: 9px 16px; border-radius: 4px; cursor: pointer;
  box-shadow: 0 3px 0 #0006; transition: transform .06s, background .12s;
}
.btn:hover { background: #31234f; }
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0006; }
.btn.primary { background: linear-gradient(180deg,#2a8c74,#176552); border-color: var(--neon); color: #eafff8; }
.btn.primary:hover { background: linear-gradient(180deg,#33a88b,#1c7a63); }
.btn.danger { border-color: var(--red); }
.btn.gold { border-color: var(--gold); color: var(--gold); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.pixel-shadow { text-shadow: 0 2px 0 #000a; }

/* scene fills */
.scene { position: absolute; inset: 0; display: flex; flex-direction: column; }

/* ───────── title ───────── */
.title-wrap {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center; gap: 14px; padding: 20px;
}
.title-logo { font-size: clamp(34px, 9vw, 64px); letter-spacing: 2px; line-height: 1.05;
  color: var(--neon); text-shadow: 0 0 18px #34f5c577, 4px 4px 0 #1a1030, 0 6px 0 #000; }
.title-logo .b { color: var(--neon2); text-shadow: 0 0 18px #ff5d8f77, 4px 4px 0 #1a1030, 0 6px 0 #000; }
.title-sub { color: var(--sub); font-size: clamp(12px,3vw,15px); max-width: 460px; line-height: 1.7; }
.title-cards { display: flex; gap: -10px; margin: 8px 0; }

/* ───────── map ───────── */
.map-head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 14px; font-size: 12px; background: linear-gradient(180deg,#160d24,transparent);
}
.stat { display: inline-flex; align-items: center; gap: 5px; }
.stat b { color: var(--ink); }
.hpbar { width: 92px; height: 12px; background: #2a0f1a; border: 1px solid #5a2030; border-radius: 2px; overflow: hidden; position: relative; }
.hpbar > i { display:block; height:100%; background: linear-gradient(180deg,#ff7a7a,#d23b3b); }
.hpbar > span { position:absolute; inset:0; font-size: 9px; text-align:center; line-height:12px; color:#fff; text-shadow:0 1px 0 #000; }
.relic-bar { display:flex; gap:4px; flex-wrap: wrap; }
.relic { width: 22px; height: 22px; display:flex; align-items:center; justify-content:center; font-size:14px;
  background: var(--panel2); border:1px solid var(--gold); border-radius: 3px; cursor: help; }
.map-scroll { flex: 1 1 auto; overflow: hidden; position: relative; display:flex; justify-content:center; }
#mapCanvas { display:block; }

/* ───────── battle ───────── */
.battle { position: absolute; inset: 0; display: flex; flex-direction: column; }
.battle-top {
  flex: 0 0 auto; display:flex; align-items:center; justify-content:space-between;
  padding: 6px 12px; font-size: 12px; gap: 10px;
}
#battleCanvas { flex: 1 1 auto; width: 100%; display:block; min-height: 0; }
.battle-bottom { flex: 0 0 auto; position: relative; }
.hand {
  display: flex; justify-content: center; align-items: flex-end; gap: 6px;
  padding: 6px 8px 10px; min-height: 188px; flex-wrap: nowrap;
}
.card {
  position: relative; width: 116px; height: 168px; flex: 0 0 auto;
  background: linear-gradient(180deg,#2a2150,#1a1230);
  border: 2px solid var(--line); border-radius: 7px; cursor: pointer;
  padding: 7px 7px 6px; display:flex; flex-direction:column;
  box-shadow: 0 4px 0 #0007, inset 0 0 0 1px #ffffff10;
  transition: transform .1s ease, box-shadow .1s; transform-origin: bottom center;
}
.card:hover { transform: translateY(-16px) scale(1.06); z-index: 5; box-shadow: 0 14px 22px #000a; }
.card.attack { border-color: #b9484f; }
.card.skill { border-color: #3f8fd0; }
.card.power { border-color: #c79a3a; }
.card.unplayable { opacity: .45; cursor: default; }
.card.selected { transform: translateY(-22px) scale(1.08); box-shadow: 0 0 0 2px var(--neon), 0 14px 22px #000a; }
.card .cost {
  position:absolute; top:-8px; left:-8px; width: 26px; height: 26px;
  background: radial-gradient(circle at 40% 35%, #4aa0ff, #18407a); border:2px solid #cfe6ff;
  border-radius: 50%; font-size: 14px; display:flex; align-items:center; justify-content:center;
  color:#fff; text-shadow:0 1px 0 #000; box-shadow: 0 2px 4px #000a;
}
.card .cost.up { background: radial-gradient(circle at 40% 35%, #6ee86e, #1c7a3a); border-color:#d6ffd6; }
.card .cname { font-size: 11px; text-align:center; line-height:1.15; min-height: 26px; display:flex; align-items:center; justify-content:center; }
.card .cname.upg { color: var(--green); }
.card .cart { height: 46px; margin: 3px 0; border-radius: 4px; display:flex; align-items:center; justify-content:center; font-size: 30px;
  background: #0e0a1c; border:1px solid #ffffff14; }
.card .ctype { font-size: 9px; text-align:center; color: var(--sub); letter-spacing:1px; }
.card .cdesc { flex:1; font-size: 10px; line-height: 1.35; text-align:center; color: #dfe7ff; padding: 3px 1px 0; display:flex; align-items:center; justify-content:center; }
.card .cdesc em { color: var(--gold); font-style: normal; }
.card .cdesc b { color: var(--green); font-weight: normal; }

.endturn { position: absolute; right: 12px; bottom: 96px; z-index: 8; }
.energy { position: absolute; left: 12px; bottom: 92px; z-index: 8; text-align:center; }
.energy .orb {
  width: 56px; height: 56px; border-radius: 50%; display:flex; align-items:center; justify-content:center;
  background: radial-gradient(circle at 38% 32%, #54f5c5, #0e6e58 70%, #07382c);
  border: 3px solid #173f33; box-shadow: 0 0 16px #34f5c566, inset 0 2px 4px #fff5;
  font-size: 20px; color:#06120e; text-shadow: 0 1px 0 #fff7;
}
.energy .lbl { font-size: 10px; color: var(--sub); margin-top: 2px; }
.piles { position:absolute; bottom: 10px; z-index: 7; font-size: 10px; color: var(--sub); display:flex; gap:4px; align-items:center; }
.piles.draw { left: 12px; } .piles.disc { right: 12px; }
.piles .n { color: var(--ink); }

/* ───────── overlay panels (reward / rest / shop / event) ───────── */
.overlay {
  position: absolute; inset: 0; z-index: 40; display:flex; align-items:center; justify-content:center;
  background: rgba(6,4,12,.82); padding: 16px; overflow:auto;
}
.panel {
  width: min(560px, 96vw); background: var(--panel); border: 2px solid var(--line);
  border-radius: 8px; padding: 18px; box-shadow: 0 14px 50px #000b;
}
.panel h2 { font-size: 18px; text-align:center; margin-bottom: 4px; color: var(--neon); }
.panel .psub { text-align:center; color: var(--sub); font-size: 12px; margin-bottom: 14px; }
.reward-list { display:flex; flex-direction: column; gap: 8px; }
.reward-row {
  display:flex; align-items:center; gap: 10px; padding: 11px 12px; cursor: pointer;
  background: var(--panel2); border: 2px solid var(--line); border-radius: 5px; font-size: 13px;
}
.reward-row:hover { border-color: var(--neon); background:#2c2046; }
.reward-row.taken { opacity:.4; pointer-events:none; }
.reward-row .ico { font-size: 20px; width: 26px; text-align:center; }
.reward-row .meta { flex:1; }
.reward-row .meta small { display:block; color: var(--sub); font-size: 11px; }

.card-choices { display:flex; gap: 10px; justify-content:center; flex-wrap: wrap; margin: 6px 0 14px; }
.panel .row-actions { display:flex; gap: 10px; justify-content:center; margin-top: 14px; flex-wrap: wrap; }

.shop-grid { display:grid; grid-template-columns: 1fr 1fr; gap:10px; }
.shop-item { background: var(--panel2); border:2px solid var(--line); border-radius:5px; padding:10px; display:flex; flex-direction:column; align-items:center; gap:6px; cursor:pointer; }
.shop-item:hover { border-color: var(--gold); }
.shop-item.sold { opacity:.35; pointer-events:none; }
.shop-item .price { color: var(--gold); font-size: 12px; }

.deck-view { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-height: 60vh; overflow:auto; padding: 4px; }

.toast {
  position: fixed; left:50%; bottom: 18px; transform: translateX(-50%);
  background: #0d0a1a; border:1px solid var(--line); color: var(--ink);
  padding: 8px 16px; border-radius: 5px; font-size: 12px; z-index: 90; pointer-events:none;
  opacity: 0; transition: opacity .25s; text-shadow:0 1px 0 #000;
}
.toast.show { opacity: 1; }

.center-flash {
  position:absolute; left:0; right:0; top:42%; text-align:center; z-index: 30;
  font-size: clamp(26px,7vw,46px); color: var(--neon2); pointer-events:none;
  text-shadow: 0 0 16px #ff5d8f88, 3px 3px 0 #000; opacity:0;
}

@media (max-width: 520px) {
  .card { width: 92px; height: 138px; }
  .card .cart { font-size: 24px; height: 38px; }
  .card .cdesc { font-size: 9px; }
  .topbar .brand { display:none; }
}