/* Thám Hiểm Hầm Ngục — giao diện kiểu pixel hầm ngục (cùng bộ khung với Đấu Trường Ngầm) */
/* Chữ số lấy từ font Jersey 10 (SIL Open Font License, Google Fonts), cắt riêng 0–9 và nhúng sẵn:
   số 0 của Handjet có gạch chéo nên dễ đọc nhầm thành 8 */
@font-face {
  font-family: "Digits";
  src: url(data:font/ttf;base64,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) format("truetype");
  unicode-range: U+0030-0039;
  size-adjust: 118%;
}
:root {
  --bg: #120a16;
  --panel: #2b1d35;
  --panel2: #22162b;
  --edge: #0c060f;
  --hi: #4d3860;
  --text: #efe6f4;
  --muted: #a894b6;
  --gold: #ffcc4a;
  --gold2: #d8902a;
  --green: #7aff9a;
  --red: #ff5a5a;
  --t0: #d8d8e0;
  --t1: #5ab4ff;
  --t2: #c07cff;
  --t3: #ff5a5a;
  --px: "Digits", "Handjet", sans-serif;
  --body: "Digits", "Handjet", sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.3px;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.app {
  position: fixed;
  inset: 0;
}
#cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  touch-action: none;
}
[hidden] {
  display: none !important;
}
canvas.ico,
canvas.coin,
#coinIco,
canvas.hero-spr {
  image-rendering: pixelated;
}
.grow {
  flex: 1;
}
h1,
h2 {
  margin: 0;
  font-family: var(--px);
  font-weight: 800;
}

/* ---------- khung & nút pixel ---------- */
.panel {
  background: var(--panel);
  border: 3px solid var(--edge);
  box-shadow:
    inset 0 0 0 2px var(--hi),
    inset 0 -5px 0 2px var(--panel2),
    0 6px 0 rgba(0, 0, 0, 0.45);
  border-radius: 2px;
}
.btn {
  font-family: var(--px);
  font-weight: 800;
  font-size: 19px;
  color: var(--text);
  background: #4a3558;
  border: 3px solid var(--edge);
  box-shadow:
    inset 0 -4px 0 #33243f,
    inset 0 2px 0 #6c5280;
  padding: 8px 16px 11px;
  cursor: pointer;
  border-radius: 2px;
  line-height: 1;
  position: relative;
  transition: transform 0.06s;
}
.btn:hover:not(:disabled) {
  filter: brightness(1.15);
}
.btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: inset 0 -1px 0 #33243f;
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
}
.btn.gold {
  background: var(--gold2);
  color: #2a1606;
  box-shadow:
    inset 0 -4px 0 #9a5a14,
    inset 0 2px 0 #ffd67a;
}
.btn.gold:active:not(:disabled) {
  box-shadow: inset 0 -1px 0 #9a5a14;
}
.btn.big {
  font-size: 26px;
  padding: 12px 26px 15px;
}
.btn.small {
  font-size: 16px;
  padding: 6px 10px 8px;
}
.btn.icon {
  min-width: 40px;
}
.btn.ghost {
  background: rgba(30, 18, 38, 0.7);
  text-decoration: none;
  display: inline-block;
}
.btn small {
  display: block;
  font-family: var(--body);
  font-size: 17px;
  margin-top: 4px;
  opacity: 0.85;
}
.btn.off {
  opacity: 0.5;
  text-decoration: line-through;
}
.label {
  font-family: var(--px);
  font-size: 15px;
  color: var(--muted);
  letter-spacing: 1px;
  margin: 10px 0 6px;
  text-transform: uppercase;
}
.label small {
  font-family: var(--body);
  font-size: 16px;
  text-transform: none;
}
.row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ---------- màn hình ---------- */
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.topbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: max(10px, env(safe-area-inset-top)) 14px 10px;
}
.topbar h2 {
  font-size: 24px;
  text-shadow: 0 3px 0 #000;
}
.home {
  background: radial-gradient(ellipse at 50% 40%, rgba(18, 10, 22, 0.1), rgba(18, 10, 22, 0.75));
}
.home-box {
  margin: auto;
  padding: 10px 16px 40px;
  text-align: center;
  max-width: 640px;
}
.logo {
  line-height: 0.95;
  text-shadow:
    0 4px 0 #3a1a10,
    0 8px 0 rgba(0, 0, 0, 0.5);
  animation: bob 3s ease-in-out infinite;
}
.logo canvas {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
}
.logo span {
  display: block;
  font-size: clamp(34px, 8vw, 64px);
  color: #f0e0c8;
}
.logo b {
  display: block;
  font-weight: 800;
  font-size: clamp(60px, 15vw, 120px);
  color: var(--gold);
  -webkit-text-stroke: 2px #6a2a10;
}
@keyframes bob {
  50% {
    transform: translateY(-6px);
  }
}
.tag {
  font-size: 22px;
  color: #e8d8f0;
  text-shadow: 0 2px 0 #000;
  margin: 18px auto 22px;
  max-width: 520px;
}
.home-btns {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.home-btns .btn.big {
  min-width: 260px;
}
.rec {
  margin-top: 18px;
  font-size: 19px;
  color: var(--muted);
  text-shadow: 0 2px 0 #000;
}
.rec b {
  color: var(--gold);
  font-weight: 800;
}

/* chọn nhân vật */
.pick {
  background: rgba(18, 10, 22, 0.55);
}
.pick-body {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 0 14px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.chars {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
.char {
  padding: 10px 4px 8px;
  text-align: center;
  cursor: pointer;
  position: relative;
}
.char .stage {
  height: 92px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 90%, rgba(0, 0, 0, 0.5) 0 30%, transparent 31%);
}
.char .nm {
  font-family: var(--px);
  font-size: 17px;
  margin-top: 6px;
}
.char.on {
  box-shadow:
    inset 0 0 0 2px var(--gold),
    inset 0 -5px 0 2px var(--panel2),
    0 0 0 3px var(--gold),
    0 6px 0 rgba(0, 0, 0, 0.45);
}
.char.locked .stage {
  filter: brightness(0) opacity(0.6);
}
.char.locked .nm {
  color: var(--muted);
}
.char .lock {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 16px;
}
.pick-info {
  padding: 12px 16px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  min-height: 110px;
}
.pick-info .big-ico {
  flex: none;
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  background: var(--panel2);
  border: 2px solid var(--edge);
}
.pick-info h3 {
  margin: 0 0 4px;
  font-family: var(--px);
  font-weight: 800;
  font-size: 22px;
  color: var(--gold);
}
.pick-info p {
  margin: 0 0 6px;
  color: #e0d0ea;
}
.mods {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  font-size: 19px;
}
.pos {
  color: var(--green);
}
.neg {
  color: var(--red);
}
.diffs-wrap .label {
  text-align: center;
}
.diffs {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.diffs .btn.on {
  background: #7a3a2a;
  box-shadow:
    inset 0 -4px 0 #4a1a12,
    inset 0 2px 0 #a85a40,
    0 0 0 2px var(--gold);
}
.diff-desc {
  text-align: center;
  color: var(--muted);
  margin-top: 6px;
  font-size: 18px;
}
#btnStart {
  align-self: center;
  min-width: 260px;
}

/* ---------- HUD ---------- */
.hud {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: flex-start;
  padding: max(8px, env(safe-area-inset-top)) 10px 0;
  pointer-events: none;
  gap: 10px;
}
.hud-l,
.hud-r {
  flex: 1;
}
.hud-r {
  display: flex;
  justify-content: flex-end;
  pointer-events: auto;
}
.hud-c {
  text-align: center;
  flex: 1.2;
}
.bar {
  position: relative;
  height: 24px;
  width: min(240px, 40vw);
  background: #1a0e1e;
  border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 1px #3a2a44;
  margin-bottom: 5px;
}
.bar i {
  position: absolute;
  inset: 0 auto 0 0;
  background: linear-gradient(#ff6a6a, #c42a3a 60%, #9a1a2a);
  transition: width 0.12s;
}
.bar.xp {
  height: 19px;
}
.bar.xp i {
  background: linear-gradient(#9affa8, #3aba5a);
}
.bar span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--px);
  font-size: 18px;
  text-shadow:
    0 2px 0 #000,
    1px 0 0 #000,
    -1px 0 0 #000;
}
.bar.xp span {
  font-size: 15px;
}
.coins {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--px);
  font-size: 22px;
  color: var(--gold);
  text-shadow: 0 3px 0 #000;
}
.coins canvas {
  width: 18px;
  height: 21px;
}
.coins.big {
  font-size: 28px;
}
.coins.big canvas {
  width: 24px;
  height: 28px;
}
.wave {
  font-family: var(--px);
  font-size: 26px;
  text-shadow: 0 3px 0 #000;
}
.timer {
  font-family: var(--px);
  font-size: 40px;
  line-height: 1;
  text-shadow: 0 4px 0 #000;
}
.timer.hot {
  color: var(--red);
}
.bossbar {
  margin: 6px auto 0;
  width: min(360px, 60vw);
}
.bossbar span {
  font-family: var(--px);
  font-size: 15px;
  color: #ffb0a0;
  text-shadow: 0 2px 0 #000;
}
.bar.boss {
  width: 100%;
  height: 14px;
}
.bar.boss i {
  background: linear-gradient(#ff8a5a, #b0201a);
}
.joy {
  position: absolute;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 3px solid rgba(255, 255, 255, 0.25);
  pointer-events: none;
}
.joy .knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  background: rgba(255, 220, 140, 0.55);
  border: 3px solid rgba(0, 0, 0, 0.4);
}

/* ---------- lớp phủ ---------- */
.overlay {
  position: absolute;
  inset: 0;
  background: rgba(10, 4, 14, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  overflow: auto;
  animation: fade 0.18s;
}
@keyframes fade {
  from {
    opacity: 0;
  }
}
.sheet {
  width: min(860px, 100%);
  padding: 18px 18px 20px;
  position: relative;
  margin: auto;
  animation: pop 0.22s cubic-bezier(0.3, 1.6, 0.6, 1);
}
.sheet.small {
  width: min(380px, 100%);
}
@keyframes pop {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
}
.title {
  text-align: center;
  font-size: 34px;
  text-shadow: 0 4px 0 #000;
}
.title small {
  font-size: 18px;
  color: var(--muted);
}
.title.green {
  color: var(--green);
}
.title.gold {
  color: var(--gold);
}
.title.red {
  color: var(--red);
}
.sub {
  text-align: center;
  color: var(--muted);
  margin: 4px 0 12px;
}
.close {
  position: absolute;
  top: 6px;
  right: 10px;
  background: none;
  border: 0;
  color: var(--text);
  font-size: 34px;
  cursor: pointer;
  font-family: var(--px);
}

/* thẻ (lên cấp, cửa hàng, rương) */
.cards {
  display: grid;
  gap: 10px;
}
.cards.four {
  grid-template-columns: repeat(4, 1fr);
}
.card {
  --tc: var(--t0);
  background: var(--panel2);
  border: 3px solid var(--edge);
  box-shadow:
    inset 0 0 0 2px var(--tc),
    0 4px 0 rgba(0, 0, 0, 0.4);
  padding: 10px 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  min-width: 0;
}
.card.t1 {
  --tc: var(--t1);
}
.card.t2 {
  --tc: var(--t2);
}
.card.t3 {
  --tc: var(--t3);
}
.card.t3 {
  animation: legend 1.6s ease-in-out infinite;
}
@keyframes legend {
  50% {
    box-shadow:
      inset 0 0 0 2px var(--tc),
      0 0 14px var(--tc),
      0 4px 0 rgba(0, 0, 0, 0.4);
  }
}
.card.pickable {
  cursor: pointer;
  transition: transform 0.1s;
}
.card.pickable:hover {
  transform: translateY(-4px);
}
.card .top {
  display: flex;
  gap: 8px;
  align-items: center;
}
.card .frame {
  flex: none;
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  background: #170e1c;
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--tc);
}
.card .frame canvas {
  width: 48px;
  height: 48px;
}
.card .nm {
  font-family: var(--px);
  font-size: 17px;
  color: var(--tc);
  line-height: 1.1;
}
.card .kind {
  font-size: 16px;
  color: var(--muted);
}
.card .desc {
  font-size: 18px;
  line-height: 1.05;
  color: #e0d4ea;
  flex: 1;
}
.card .desc div {
  margin: 1px 0;
}
.card .big-val {
  font-family: var(--px);
  font-size: 30px;
  text-align: center;
  color: var(--green);
  margin: 4px 0;
}
.card .buyrow {
  display: flex;
  gap: 6px;
}
.card .lock {
  flex: none;
  font-size: 15px;
  padding: 6px 8px 8px;
}
.card .lock.on {
  background: var(--gold2);
}
.card .buy {
  flex: 1;
}
.card.sold {
  visibility: hidden;
}
.card.sold.show {
  visibility: visible;
  opacity: 0.35;
}

/* cửa hàng */
.shop {
  align-items: stretch;
  gap: 12px;
}
.shop-main {
  flex: 1;
  max-width: 900px;
  padding: 14px;
  overflow: auto;
}
.shop-side {
  width: 250px;
  padding: 10px 14px 14px;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
.shop-side .btn.big {
  margin-top: auto;
}
.shop-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.shop-head .title {
  text-align: left;
  font-size: 28px;
}
.offers {
  grid-template-columns: repeat(4, 1fr);
}
.wslots,
.islots {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.slot {
  --tc: #3a2a44;
  width: 52px;
  height: 52px;
  background: #170e1c;
  border: 2px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--tc);
  display: grid;
  place-items: center;
  position: relative;
  cursor: pointer;
}
.slot canvas {
  width: 40px;
  height: 40px;
}
.slot.t0 {
  --tc: var(--t0);
}
.slot.t1 {
  --tc: var(--t1);
}
.slot.t2 {
  --tc: var(--t2);
}
.slot.t3 {
  --tc: var(--t3);
}
.slot.empty {
  cursor: default;
  opacity: 0.4;
}
.slot .n,
.slot .tier {
  position: absolute;
  right: 2px;
  bottom: 0;
  font-family: var(--px);
  font-size: 13px;
  text-shadow:
    0 2px 0 #000,
    1px 0 0 #000;
}
.slot .tier {
  left: 3px;
  right: auto;
  top: 1px;
  bottom: auto;
  color: var(--tc);
}
.slot.can-merge::after {
  content: "";
  position: absolute;
  inset: -5px;
  border: 2px dashed var(--gold);
  animation: blink 1s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0.2;
  }
}
.stats {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: 18px;
}
.stats .s {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 1px 2px;
}
.stats .s canvas {
  width: 20px;
  height: 20px;
}
.stats .s span {
  flex: 1;
}
.stats .s b {
  font-weight: 800;
  font-family: var(--px);
  font-size: 15px;
}
.stats .zero b {
  color: var(--muted);
}

/* popup chi tiết */
.pop {
  position: absolute;
  z-index: 20;
  width: 250px;
  padding: 10px 12px 12px;
  background: #1c1224;
  border: 3px solid var(--edge);
  box-shadow:
    inset 0 0 0 2px var(--hi),
    0 6px 0 rgba(0, 0, 0, 0.5);
  font-size: 18px;
}
.pop h4 {
  margin: 0 0 4px;
  font-family: var(--px);
  font-weight: 800;
  font-size: 17px;
}
.pop .row {
  margin-top: 8px;
}
.pause-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 18px;
  margin-top: 10px;
}
.end-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 8px 0 14px;
  text-align: center;
}
.end-stats div {
  background: var(--panel2);
  border: 2px solid var(--edge);
  padding: 8px 4px;
}
.end-stats b {
  display: block;
  font-family: var(--px);
  font-weight: 800;
  font-size: 26px;
  color: var(--gold);
}
#endW {
  justify-content: center;
}
.unlock {
  text-align: center;
  color: var(--green);
  font-family: var(--px);
  font-size: 18px;
  margin-bottom: 10px;
}
.help {
  padding-left: 20px;
  margin: 12px 0;
  line-height: 1.15;
}
.help li {
  margin-bottom: 8px;
}
.help b {
  font-weight: 800;
  color: var(--gold);
}
.credit {
  font-size: 16px;
  color: var(--muted);
  text-align: center;
}
.toast {
  position: absolute;
  left: 50%;
  bottom: 40px;
  transform: translateX(-50%);
  background: #1c1224;
  border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--hi);
  padding: 8px 16px 10px;
  font-family: var(--px);
  font-size: 17px;
  z-index: 30;
  white-space: nowrap;
}

/* ---------- màn hình nhỏ ---------- */
@media (max-width: 900px) {
  .shop {
    flex-direction: column;
    justify-content: flex-start;
  }
  .shop-main,
  .shop-side {
    width: 100%;
    max-width: none;
    flex: none;
    overflow: visible;
  }
  .shop-side .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }
  .shop-side .btn.big {
    margin-top: 12px;
    position: sticky;
    bottom: 0;
  }
  .offers {
    grid-template-columns: repeat(2, 1fr);
  }
  .chars {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 640px) {
  html,
  body {
    font-size: 18px;
  }
  .cards.four {
    grid-template-columns: repeat(2, 1fr);
  }
  .card .frame {
    width: 44px;
    height: 44px;
  }
  .card .frame canvas {
    width: 36px;
    height: 36px;
  }
  .card .desc {
    font-size: 16px;
  }
  .pause-grid {
    grid-template-columns: 1fr;
  }
  .end-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .timer {
    font-size: 32px;
  }
  .wave {
    font-size: 20px;
  }
  .bar {
    height: 20px;
  }
  .char .stage {
    height: 76px;
  }
  .title {
    font-size: 28px;
  }
}
@media (max-height: 520px) and (orientation: landscape) {
  .home-box {
    padding-bottom: 10px;
  }
  .logo canvas {
  display: block;
  margin: 0 auto;
  image-rendering: pixelated;
}
.logo span {
    font-size: 30px;
  }
  .logo b {
    font-size: 64px;
  }
  .tag {
    margin: 8px auto 12px;
  }
  .home-btns {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ---------- riêng Thám Hiểm Hầm Ngục ---------- */
.pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--px);
  font-size: 24px;
  color: #ff8ae0;
  text-shadow: 0 3px 0 #000;
}
canvas.gem-ico {
  width: 22px;
  height: 22px;
  image-rendering: pixelated;
}
.chars {
  grid-template-columns: repeat(4, 1fr);
}
.char .price {
  font-family: var(--px);
  font-size: 17px;
  color: #ff8ae0;
  margin-top: 2px;
}
.diffs {
  margin-top: 4px;
}
.hud {
  padding: max(8px, env(safe-area-inset-top)) 10px 0;
}
.hud-stats {
  padding: 8px 10px 9px;
  pointer-events: none;
  flex: none;
  width: min(250px, 44vw);
}
.hud-l {
  display: none;
}
.hearts {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 5px;
}
.hearts canvas {
  width: 26px;
  height: 24px;
  image-rendering: pixelated;
}
.bar.shield,
.bar.mana {
  width: 100%;
  height: 18px;
}
.bar.shield i {
  background: linear-gradient(#bfe6ff, #5a9ad8 60%, #3a6aa8);
}
.bar.mana i {
  background: linear-gradient(#c0a8ff, #6a4ad8 60%, #4a2aa8);
}
.bar.shield span,
.bar.mana span {
  font-size: 15px;
}
.money {
  display: flex;
  gap: 14px;
  font-family: var(--px);
  font-size: 21px;
  text-shadow: 0 2px 0 #000;
}
.money span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.money span:first-child {
  color: var(--gold);
}
.money span:last-child {
  color: #ff8ae0;
}
.money canvas.coin {
  width: 15px;
  height: 18px;
}
.floor-name {
  font-family: var(--px);
  font-size: 22px;
  text-shadow: 0 3px 0 #000;
  color: #e8d8f0;
}
.hud-r {
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}
.minimap {
  width: min(150px, 28vw);
  height: min(150px, 28vw);
  background: rgba(14, 8, 20, 0.7);
  border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 1px var(--hi);
  image-rendering: pixelated;
}
.hud-r .btn {
  pointer-events: auto;
}
/* vũ khí, kỹ năng, nút cảm ứng */
.hand {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: max(14px, env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: auto auto;
  grid-template-areas: "act skill" "slot fire";
  gap: 10px;
  align-items: end;
  justify-items: end;
}
.slot-btn {
  grid-area: slot;
  position: relative;
  width: 190px;
  height: 66px;
  background: rgba(30, 18, 40, 0.85);
  border: 3px solid var(--edge);
  box-shadow: inset 0 0 0 2px var(--tc, var(--hi));
  color: var(--text);
  font-family: var(--px);
  cursor: pointer;
  text-align: left;
  padding: 0;
}
.slot-btn .wico canvas {
  position: absolute;
  left: 6px;
  top: 6px;
  width: 50px;
  height: 50px;
}
.slot-btn .wsub canvas {
  position: absolute;
  right: 4px;
  top: 4px;
  width: 24px;
  height: 24px;
  opacity: 0.6;
}
.slot-btn .wname {
  position: absolute;
  left: 60px;
  top: 8px;
  right: 28px;
  font-size: 17px;
  line-height: 1;
  color: var(--tc, var(--text));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.slot-btn .wcost {
  position: absolute;
  left: 60px;
  bottom: 7px;
  font-size: 15px;
  color: #b8a8ff;
  white-space: nowrap;
}
.skill-btn,
.act-btn,
.fire-btn {
  border-radius: 50%;
  border: 3px solid var(--edge);
  font-family: var(--px);
  color: var(--text);
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.skill-btn {
  grid-area: skill;
  width: 66px;
  height: 66px;
  background: #3a2a4a;
  box-shadow: inset 0 0 0 2px #8a6aaa;
  padding: 0;
}
.skill-btn canvas {
  width: 46px;
  height: 46px;
  margin-top: 4px;
}
.skill-btn i {
  position: absolute;
  inset: auto 0 0 0;
  height: 0;
  background: rgba(0, 0, 0, 0.65);
}
.skill-btn.ready {
  animation: ready 1s ease-in-out infinite;
}
@keyframes ready {
  50% {
    box-shadow:
      inset 0 0 0 2px #d8b0ff,
      0 0 14px #b080ff;
  }
}
.act-btn {
  grid-area: act;
  width: 58px;
  height: 58px;
  background: #2a5a3a;
  box-shadow: inset 0 0 0 2px #7ad89a;
  font-size: 24px;
}
.fire-btn {
  grid-area: fire;
  width: 92px;
  height: 92px;
  background: #8a2a2a;
  box-shadow:
    inset 0 0 0 3px #ff8a6a,
    inset 0 -6px 0 3px #5a1a1a;
  font-size: 22px;
  display: none;
}
.touch .fire-btn {
  display: block;
}
.fire-btn.on {
  filter: brightness(1.3);
}
.cards.three {
  grid-template-columns: repeat(3, 1fr);
}
.buffs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 52px;
}
@media (max-width: 640px) {
  .cards.three {
    grid-template-columns: 1fr;
  }
  .chars {
    grid-template-columns: repeat(2, 1fr);
  }
  .slot-btn {
    width: 120px;
    height: 58px;
  }
  .slot-btn .wico canvas {
    width: 42px;
    height: 42px;
  }
  .slot-btn .wname {
    left: 52px;
    font-size: 15px;
  }
  .slot-btn .wcost {
    left: 52px;
  }
  .hearts canvas {
    width: 20px;
    height: 18px;
  }
}
.playing #cv {
  cursor: none;
}