/* style.css — mobile-first, พื้นที่หน้าจอจริง (100dvh) + safe-area สำหรับ iPhone */
:root {
  --bg: #120d0a;
  --bg-2: #1b1410;
  --panel: #241a14;
  --panel-2: #2e211a;
  --line: #3d2c22;
  --fg: #f3e6d8;
  --fg-dim: #b39d8a;
  --gold: #f2b53a;
  --ember: #e2663a;
  --hp: #d94b3f;
  --foe: #8c5bd8;
  --heal: #58b368;
  --poison: #7fc241;
  --shield: #59a7d7;
  --radius: 12px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  background: radial-gradient(120% 80% at 50% 0%, #2a1c14 0%, var(--bg) 55%);
  color: var(--fg);
  font-family: "SF Thai", "Noto Sans Thai", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  overscroll-behavior: none;
}

body { display: flex; justify-content: center; }

.app {
  width: 100%;
  max-width: 480px;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
}

/* ── HUD ── */
.hud-row { display: flex; align-items: center; gap: 10px; }
.hp-wrap { flex: 1; }
.hp-label { display: flex; justify-content: space-between; font-size: 12px; color: var(--fg-dim); margin-bottom: 4px; }
.hp-bar { height: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.hp-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #ff7a5c, var(--hp)); transition: width .25s ease; }
.hud-stats { display: flex; gap: 8px; }
.stat {
  display: flex; align-items: center; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  padding: 6px 9px; font-size: 14px; font-variant-numeric: tabular-nums;
}
.stat b { font-weight: 700; }
#stat-gold b { color: var(--gold); }
#stat-lives b { color: #ff9a8a; }
.stat.flash { animation: pop .35s ease; }

/* ── ศัตรู ── */
.foe {
  background: linear-gradient(180deg, #2a1e2c, #1d1520);
  border: 1px solid #4a3350;
  border-radius: var(--radius);
  padding: 10px 12px;
}
.foe-head { display: flex; align-items: baseline; gap: 8px; }
.foe-tag { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #b48bd4; }
.foe-head b { font-size: 15px; flex: 1; }
.foe-hp { font-size: 13px; color: #d9c2ea; font-variant-numeric: tabular-nums; }
.foe-items { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.foe-chip {
  font-size: 11px; color: #cbb7d8; background: #ffffff10; border: 1px solid #ffffff18;
  border-radius: 8px; padding: 4px 7px;
}

/* ── บอร์ด ── */
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.slot {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius);
  border: 1px dashed var(--line);
  background: #ffffff06;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 6px;
  transition: transform .12s ease, border-color .2s ease, background .2s ease;
}
.slot.filled {
  border-style: solid;
  border-color: #5a4030;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
}
.slot .icon { font-size: 26px; line-height: 1; }
.slot .sname { font-size: 10.5px; color: var(--fg-dim); text-align: center; line-height: 1.2; }
.slot .lvl { position: absolute; top: 4px; left: 6px; font-size: 10px; color: var(--gold); letter-spacing: 1px; }
.slot .cd { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--ember); width: 0; border-radius: 0 2px 2px 0; }
.slot .up-badge {
  position: absolute; top: 4px; right: 6px; font-size: 10px;
  color: #1b1207; background: var(--gold); border-radius: 6px; padding: 1px 5px; font-weight: 700;
}
.slot.empty .plus { font-size: 20px; color: #5c4636; }
.slot:active { transform: scale(.97); }
.slot.pulse { animation: slotPulse .45s ease; }
.slot.hit { animation: hitFlash .3s ease; }

/* ── ร้านค้า ── */
.shop { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.shop-head { display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--fg-dim); }
.shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.card {
  position: relative;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  padding: 8px 6px 6px;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-height: 104px;
  transition: transform .12s ease;
}
.card:active { transform: scale(.97); }
.card.bought { opacity: .25; pointer-events: none; }
.card .icon { font-size: 24px; }
.card .cname { font-size: 11px; text-align: center; line-height: 1.25; }
.card .cost { font-size: 12px; color: var(--gold); font-weight: 700; }
.card .tag {
  position: absolute; top: 4px; right: 5px; font-size: 9px; padding: 1px 4px;
  border-radius: 5px; background: #ffffff12; color: var(--fg-dim);
}
.card.up { border-color: var(--gold); box-shadow: 0 0 0 1px #f2b53a55 inset; }
.card.up .tag { background: var(--gold); color: #1b1207; font-weight: 700; }
.card.poor .cost { color: #8a6a4a; }

.hint { margin: 0; font-size: 11px; color: #7e6a5a; text-align: center; }

/* ── ปุ่ม ── */
button { font: inherit; border: 0; cursor: pointer; }
.primary {
  width: 100%;
  min-height: 52px;
  border-radius: 14px;
  background: linear-gradient(180deg, #ff8a4c, var(--ember));
  color: #1a0d06;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .01em;
  box-shadow: 0 6px 18px #e2663a40;
}
.primary:active { transform: translateY(1px); }
.primary[disabled] { opacity: .45; box-shadow: none; }
.ghost {
  background: #ffffff0e; color: var(--fg); border: 1px solid var(--line);
  border-radius: 10px; padding: 8px 12px; font-size: 13px; min-height: 36px;
}
.actions { padding-bottom: 4px; }

/* hidden ต้องชนะ display:flex ของคลาส (attribute selector อ่อนกว่า class) */
.battle[hidden], .modal[hidden] { display: none; }

/* ── ฉากต่อสู้ ── */
.battle {
  position: fixed; inset: 0; z-index: 40;
  background: radial-gradient(100% 60% at 50% 0%, #2b1a10 0%, #0b0705 70%);
  display: flex; flex-direction: column; align-items: center;
  padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
  overflow: hidden;
}
.battle-inner { width: 100%; max-width: 460px; display: flex; flex-direction: column; gap: 10px; height: 100%; }
.fighter { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.fighter-name { font-size: 13px; color: var(--fg-dim); }
.fighter-hp { font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.bar { grid-column: 1 / -1; height: 14px; background: #ffffff10; border-radius: 999px; overflow: hidden; border: 1px solid #ffffff18; }
.bar-fill { height: 100%; width: 100%; transition: width .18s linear; }
.bar-fill.hero { background: linear-gradient(90deg, #5ccf7a, #2f9e58); }
.bar-fill.foe { background: linear-gradient(90deg, #a97bea, #6c3fc0); }
.vs { text-align: center; font-size: 11px; letter-spacing: .3em; color: #6f5a4a; }

.battle-board {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-top: 4px;
}
.b-slot {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius);
  border: 1px solid var(--line); background: #ffffff08;
  display: flex; align-items: center; justify-content: center; font-size: 26px;
}
.b-slot.fire { animation: fire .32s ease; border-color: var(--ember); }
.b-slot.ready { border-color: #ffffff30; }
.b-slot .mini-cd { position: absolute; bottom: 0; left: 0; height: 3px; background: var(--ember); width: 0; }
.b-slot .mini-lvl { position: absolute; top: 3px; left: 5px; font-size: 9px; color: var(--gold); }

.log {
  flex: 1; overflow-y: auto; font-size: 12px; color: #bfa894;
  display: flex; flex-direction: column; gap: 3px;
  padding: 8px 10px; background: #ffffff06; border-radius: var(--radius); border: 1px solid #ffffff10;
  min-height: 90px;
}
.log div { opacity: .9; }
.log b { color: var(--fg); }
.battle-actions { display: flex; gap: 8px; justify-content: center; }

.float {
  position: fixed; z-index: 60; font-weight: 800; font-size: 15px; pointer-events: none;
  animation: floatUp .85s ease-out forwards; text-shadow: 0 2px 6px #000;
}
.float.dmg { color: #ff8f6b; }
.float.heal { color: var(--heal); }
.float.shield { color: var(--shield); }
.float.dot { color: var(--poison); font-size: 12px; }

/* ── modal ── */
.modal {
  position: fixed; inset: 0; z-index: 70; background: #000000b0;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-card {
  width: 100%; max-width: 380px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 18px; padding: 20px;
  text-align: center;
}
.modal-card h2 { margin: 0 0 6px; font-size: 22px; }
.modal-card p { margin: 0 0 14px; color: var(--fg-dim); font-size: 13px; line-height: 1.5; }
.modal-body { text-align: left; font-size: 13px; color: var(--fg-dim); margin-bottom: 16px; display: grid; gap: 6px; }
.modal-body .row { display: flex; justify-content: space-between; }
.modal-body .row b { color: var(--fg); }

@keyframes fire {
  0% { transform: scale(1); box-shadow: 0 0 0 0 #e2663a88; }
  40% { transform: scale(1.08); box-shadow: 0 0 0 6px #e2663a33; }
  100% { transform: scale(1); box-shadow: 0 0 0 0 #e2663a00; }
}
@keyframes hitFlash {
  0% { background: #ff5a3a40; transform: translateX(0); }
  30% { transform: translateX(-3px); }
  60% { transform: translateX(3px); }
  100% { background: transparent; transform: translateX(0); }
}
@keyframes floatUp {
  0% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -46px) scale(1.15); }
}
@keyframes slotPulse {
  0% { box-shadow: 0 0 0 0 #f2b53a66; }
  100% { box-shadow: 0 0 0 12px #f2b53a00; }
}
@keyframes pop {
  0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001s !important; transition-duration: .001s !important; }
}

/* จอเตี้ย (iPhone SE): ย่อการ์ดลงหน่อย ไม่งั้นต้องเลื่อน */
@media (max-height: 700px) {
  .slot { aspect-ratio: 1.35/1; }
  .card { min-height: 88px; }
  .card .icon { font-size: 20px; }
  .b-slot { aspect-ratio: 1.6/1; font-size: 20px; }
}

/* ── เพิ่มรอบ v2: สายอาชีพ · SFX · VFX ─────────────────────────────────── */

/* ปุ่มไอคอนใน HUD (ปิดเสียง) */
.icon-btn {
  width: 36px; height: 36px; border-radius: 10px; font-size: 16px;
  background: var(--panel); border: 1px solid var(--line); color: var(--fg);
  display: grid; place-items: center;
}
.icon-btn.off { opacity: .5; }
.icon-btn:active { transform: scale(.94); }

/* แถบสายอาชีพใต้ HUD */
.hud-sub { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.class-chip {
  font-size: 12px; font-weight: 700; color: var(--gold);
  background: #f2b53a14; border: 1px solid #f2b53a3a; border-radius: 999px; padding: 3px 9px;
}
.perk-chip { font-size: 11px; color: #8d7a68; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ชั้นอนุภาค: อยู่เหนือเกม ใต้ modal ไม่รับการกด */
.fx-layer { position: fixed; inset: 0; z-index: 55; pointer-events: none; }

/* ฉากต่อสู้: หัวเรื่อง + คู่ fighters */
.battle-head { text-align: center; font-size: 12px; letter-spacing: .12em; color: var(--gold); text-transform: uppercase; }
.fighters { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 8px; align-items: center; }
/* grid 3 แถวชัดเจน: ชื่อ+HP แถวบน · แถบเลือดเต็มความกว้างแถวล่าง
   (เดิมใช้ flex แล้ว align-items:center ของ .fighter ทำให้แถบเลือดหดเหลือ 0 px) */
.fighters .fighter { display: grid; grid-template-columns: 1fr auto; gap: 5px 8px; align-items: center; }
.fighters .fighter-name { grid-area: 1 / 1; }
.fighters .fighter-hp { grid-area: 1 / 2; text-align: right; font-weight: 800; font-size: 16px; }
.fighters .bar { grid-area: 2 / 1 / 3 / 3; width: 100%; }
.fighters .foe-side .fighter-name { text-align: right; }
.fighters .foe-side .fighter-hp { grid-area: 1 / 1; text-align: left; }
.fighters .foe-side .bar { grid-area: 2 / 1 / 3 / 3; }
.fighters .vs { align-self: center; }
.bar { position: relative; }
.bar-shield {
  position: absolute; inset: 0 auto 0 0; height: 100%; width: 0;
  background: repeating-linear-gradient(45deg, #59a7d766, #59a7d733 6px, #59a7d766 6px, #59a7d766 12px);
  border-right: 1px solid #8fd3ff; transition: width .18s linear;
}
.float.dmg.big { font-size: 22px; color: #ffd166; text-shadow: 0 0 12px #ff6a3d, 0 2px 6px #000; }
.foe-chip.dot { color: #8fe27f; }

/* สล็อตที่อัปเต็มแล้ว */
.slot.maxed { border-color: #f2b53a88; box-shadow: 0 0 0 1px #f2b53a33 inset; }

/* ── หน้าเลือกสายอาชีพ ── */
.screen {
  position: fixed; inset: 0; z-index: 80; overflow-y: auto;
  background: radial-gradient(120% 70% at 50% 0%, #33200f 0%, #0c0806 65%);
  padding: calc(20px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
}
.screen[hidden] { display: none; }
.screen-inner { max-width: 440px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.title {
  margin: 0; font-size: 30px; letter-spacing: .02em;
  background: linear-gradient(180deg, #ffe6a6, #e2913a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-align: center;
}
.subtitle { margin: 0; text-align: center; font-size: 12.5px; color: var(--fg-dim); line-height: 1.5; }
.class-grid { display: flex; flex-direction: column; gap: 10px; }
.class-card {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: start;
  text-align: left; padding: 12px 14px; border-radius: 16px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); color: var(--fg);
  transition: transform .12s ease, border-color .2s ease;
}
.class-card:active { transform: scale(.985); border-color: var(--gold); }
.cc-icon { grid-row: span 2; font-size: 30px; line-height: 1.1; }
.cc-body { display: flex; flex-direction: column; gap: 3px; }
.cc-body b { font-size: 16px; }
.cc-body small { font-size: 12px; color: var(--fg-dim); }
.cc-body em { font-size: 11.5px; font-style: normal; color: #c9a06a; }
.cc-starter { font-size: 11px; color: #8d7a68; }
.cc-best { grid-column: 2; font-size: 10.5px; color: #6f5c4b; text-align: right; }
.screen-foot { margin: 0; text-align: center; font-size: 11px; color: #6f5c4b; }

/* ปุ่มรองใน modal */
.modal-alt { margin-top: 10px; width: 100%; }
.modal-body .row { gap: 12px; }
.modal-body .row b { text-align: right; }

/* ปุ่มลอย: กันการกดซ้ำระหว่างอนิเมชัน */
.primary[disabled] { pointer-events: none; }

@media (max-height: 700px) {
  .title { font-size: 24px; }
  .class-card { padding: 9px 11px; }
  .cc-icon { font-size: 24px; }
  .cc-body em { font-size: 11px; }
}

/* ══════════════════════════════════════════════════════════════════════
   v3: ภาพรวมทันสมัย + ฉากต่อสู้ 3D (three.js)
   หลักคิด: UI ยังเป็น HTML ที่คมและเข้าถึงง่าย แต่เลเยอร์ภาพใช้กระจกฝ้า
   + แสงเรืองจากสีประจำสาย ⇒ ดูเป็นเกมปี 2026 โดยไม่ต้องมี build step
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --glass: rgba(28, 20, 16, 0.62);
  --glass-line: rgba(255, 214, 160, 0.14);
  --glow: #ff8a4c;
}

body {
  background:
    radial-gradient(90% 55% at 50% -10%, #3a2416 0%, transparent 60%),
    radial-gradient(70% 45% at 100% 100%, #2a1320 0%, transparent 55%),
    #0b0705;
}

/* กระจกฝ้า: ใช้กับ HUD, การ์ดศัตรู, ร้าน, modal และแผงในฉากต่อสู้ */
.glass {
  background: linear-gradient(160deg, rgba(46, 32, 24, 0.72), rgba(22, 16, 12, 0.82));
  border: 1px solid var(--glass-line);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 235, 210, 0.08);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}

.hud { border-radius: 18px; padding: 10px 12px; }
.foe, .shop { border-radius: 18px; }

/* การ์ดไอเท็ม: ขอบเรืองแสงจาง ๆ + ยกตัวเมื่อแตะ */
.card {
  border-radius: 16px;
  background: linear-gradient(165deg, rgba(58, 40, 30, 0.9), rgba(28, 20, 16, 0.95));
  border: 1px solid rgba(255, 214, 170, 0.12);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.card.up { box-shadow: 0 0 0 1px rgba(242, 181, 58, 0.55), 0 8px 22px rgba(242, 181, 58, 0.18); }

.primary {
  background: linear-gradient(135deg, #ffb45c, #f2743a 55%, #d94b3f);
  box-shadow: 0 10px 26px rgba(242, 116, 58, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  letter-spacing: 0.01em;
}

/* ── การ์ดศัตรูแบบใหม่: สายอาชีพ + ชื่อบิลด์ + ไอเท็มจริง ── */
.foe { padding: 11px 13px 12px; }
.foe-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.foe-class {
  font-size: 11.5px; font-weight: 700; color: #e7c7ff;
  background: rgba(160, 110, 220, 0.16); border: 1px solid rgba(180, 130, 240, 0.35);
  border-radius: 999px; padding: 2px 9px;
}
.foe-arch {
  font-size: 11px; color: #ffd9a8;
  background: rgba(242, 181, 58, 0.12); border: 1px solid rgba(242, 181, 58, 0.3);
  border-radius: 999px; padding: 2px 9px;
}
.foe-items {
  margin-top: 8px; gap: 5px;
  /* ไม่ให้บิลด์ที่โตขึ้นตามวันดันความสูงการ์ด: เลื่อนแนวนอนแทนการขึ้นบรรทัดใหม่ */
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
}
.foe-items::-webkit-scrollbar { display: none; }
.foe-chip { flex: 0 0 auto; }
.foe-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; padding: 3px 7px; border-radius: 9px; }
.foe-chip b { color: var(--gold); font-size: 9px; letter-spacing: -1px; }
.foe-chip.dot { color: #9be088; border-color: rgba(155, 224, 136, 0.35); }
.foe-chip.burn { color: #ffb37a; border-color: rgba(255, 179, 122, 0.35); }

/* ── ฉากต่อสู้ 3D ── */
.battle {
  display: block;
  padding: 0;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 15%, #2a1a10 0%, #080504 70%);
}
.arena {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; z-index: 0;
}
.arena[hidden] { display: none; }
.arena-fallback {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 40% at 30% 70%, rgba(242, 116, 58, 0.22), transparent 70%),
    radial-gradient(60% 40% at 70% 70%, rgba(150, 100, 240, 0.22), transparent 70%),
    #0b0705;
}
.arena-fallback[hidden] { display: none; }

.battle-inner {
  position: relative; z-index: 2; height: 100%;
  max-width: 460px; margin: 0 auto;
  display: flex; flex-direction: column; gap: 8px;
  padding: calc(10px + env(safe-area-inset-top)) 12px calc(10px + env(safe-area-inset-bottom));
  pointer-events: none; /* ให้เห็นฉาก 3D เต็มตา ปุ่มเท่านั้นที่กดได้ */
}
.battle-inner button { pointer-events: auto; }
.battle-head {
  text-align: center; font-size: 11px; letter-spacing: .16em;
  color: #ffcf8a; text-transform: uppercase;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
}
.fighters {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px 10px;
  padding: 10px 12px; border-radius: 16px;
}
.battle-spacer { flex: 1; min-height: 120px; }
.battle-bottom { border-radius: 18px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.battle-bottom .log { min-height: 62px; max-height: 96px; background: rgba(0, 0, 0, 0.28); }
.battle-board { grid-template-columns: repeat(6, 1fr); gap: 6px; margin: 0; }
.b-slot { aspect-ratio: 1/1; font-size: 18px; border-radius: 10px; }
.b-slot .mini-lvl { font-size: 8px; top: 1px; left: 3px; }

/* แถบเลือด: เรืองแสงจาง ๆ ให้เข้ากับฉาก 3D */
.bar { height: 12px; background: rgba(0, 0, 0, 0.55); border-color: rgba(255, 255, 255, 0.16); }
.bar-fill.hero { box-shadow: 0 0 12px rgba(92, 207, 122, 0.45); }
.bar-fill.foe { box-shadow: 0 0 12px rgba(169, 123, 234, 0.45); }
.fighters .fighter-hp { font-size: 17px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); }

/* ป้ายบอกผลในฉาก: ตัวเลขใหญ่ อ่านง่ายตอนมือถือสั่น */
.float { font-size: 16px; font-weight: 900; }

@media (max-height: 700px) {
  .battle-spacer { min-height: 70px; }
  .battle-bottom .log { min-height: 46px; max-height: 62px; font-size: 11px; }
  .b-slot { font-size: 15px; }
}

/* จอเตี้ย: บีบหน้าหลักให้พอดี 667px โดยไม่ต้องเลื่อน (ชิปบิลด์ศัตรูทำให้เคยล้น 36px) */
@media (max-height: 720px) {
  .app { gap: 7px; padding-top: calc(7px + env(safe-area-inset-top)); padding-bottom: calc(7px + env(safe-area-inset-bottom)); }
  .hud { padding: 8px 10px; border-radius: 14px; }
  .hud-sub { margin-top: 5px; }
  .perk-chip { display: none; }
  .foe { padding: 8px 10px 9px; }
  .foe-items { margin-top: 5px; }
  .foe-chip { font-size: 9.5px; padding: 2px 6px; }
  .board { gap: 6px; }
  .slot { aspect-ratio: 1.55 / 1; }
  .slot .icon { font-size: 22px; }
  .shop { gap: 6px; }
  .card { min-height: 84px; padding: 6px 4px 5px; }
  .card .icon { font-size: 21px; }
  .hint { font-size: 10px; }
  .primary { min-height: 46px; font-size: 16px; }
}




/* ══════════════════════════════════════════════════════════════════════
   v4: voxel ทั้งเกม (การ์ด/ไอเท็ม/ตัวละคร/สนาม)
   หลักคิด: ขอบหนา + เงาแข็ง ไม่มี blur / gradient นุ่ม ⇒ ภาษาภาพเดียวกับ voxel
   และใช้ <img> ที่เรนเดอร์จาก three.js ชุดเดียวกับของที่ติดตั้งบนตัวละคร
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --pixel-line: #120b07;
  --pixel-edge: #6b4a2a;
  --pixel-gold: #ffcf5c;
  --pixel-bg: #1a120c;
}

body {
  font-family: ui-monospace, "SF Mono", "Menlo", "Courier New", monospace;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px),
    radial-gradient(90% 55% at 50% -10%, #3a2416 0%, transparent 60%),
    #0b0705;
  image-rendering: pixelated;
}

/* กระจกฝ้าแบบ voxel: ทึบขึ้น ขอบหนา ไม่เบลอ */
.glass {
  background: linear-gradient(180deg, #241a13, #150f0a);
  border: 2px solid var(--pixel-edge);
  box-shadow: 0 4px 0 #00000066, inset 0 2px 0 rgba(255, 224, 180, 0.1);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.hud, .foe, .shop, .fighters, .battle-bottom, .modal-card { border-radius: 6px; }

/* ปุ่ม: กล่องมีเงาแข็ง กดแล้วยุบลง */
.primary {
  border-radius: 6px;
  border: 2px solid #5a2a12;
  background: linear-gradient(180deg, #ffb45c 0%, #f2743a 60%, #d94b3f 100%);
  box-shadow: 0 5px 0 #7a2f14, inset 0 2px 0 rgba(255, 255, 255, 0.35);
  color: #24100a;
  font-weight: 900;
  letter-spacing: 0.02em;
}
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a2f14; }
.ghost {
  border-radius: 4px;
  border: 2px solid var(--pixel-edge);
  background: #2a1e15;
  box-shadow: 0 3px 0 #00000055;
}
.ghost:active { transform: translateY(2px); box-shadow: none; }
.icon-btn { border-radius: 4px; border: 2px solid var(--pixel-edge); box-shadow: 0 3px 0 #00000055; }
.stat { border-radius: 4px; border: 2px solid var(--pixel-edge); background: #241a13; box-shadow: 0 3px 0 #00000044; }

/* ไอคอนไอเท็ม: ภาพ voxel จาก three.js */
.vicon {
  width: 38px; height: 38px; object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.55));
  pointer-events: none;
}
.vicon.mini { width: 15px; height: 15px; vertical-align: -3px; }

/* การ์ดร้าน/บอร์ด: กรอบหนา มุมโค้งนิดเดียว */
.card {
  border-radius: 6px;
  border: 2px solid var(--pixel-edge);
  background: linear-gradient(180deg, #3a2a1f, #221810);
  box-shadow: 0 4px 0 #00000055, inset 0 2px 0 rgba(255, 224, 180, 0.08);
  padding-top: 10px;
}
.card.up {
  border-color: var(--pixel-gold);
  box-shadow: 0 4px 0 #7a5a10, 0 0 0 2px rgba(255, 207, 92, 0.25) inset;
}
.card .tag { border-radius: 2px; background: #0f0a06; color: var(--pixel-gold); border: 1px solid #5a4020; }
.card.up .tag { background: var(--pixel-gold); color: #24100a; }
.slot {
  border-radius: 6px;
  border: 2px dashed #4a3424;
  background: #1b130d;
}
.slot.filled {
  border: 2px solid var(--pixel-edge);
  background: linear-gradient(180deg, #34251a, #1e1610);
  box-shadow: 0 4px 0 #00000055, inset 0 2px 0 rgba(255, 224, 180, 0.08);
}
.slot .icon { font-size: 24px; }
.slot.pulse { animation: slotPulse .4s steps(4, end); }
.hint { font-size: 10.5px; color: #9a7f66; letter-spacing: 0.02em; }

/* ── แถวเทียบตัว: ตัวเรา (voxel stage) vs ศัตรู ── */
.matchup { display: grid; grid-template-columns: 112px 1fr; gap: 8px; align-items: stretch; }
.hero-card { position: relative; overflow: hidden; padding: 0; min-height: 112px; }
.hero-stage { display: block; width: 100%; height: 112px; image-rendering: pixelated; background: #120c08; }
.hero-tag {
  position: absolute; left: 6px; bottom: 4px; font-size: 9px; letter-spacing: 0.08em;
  color: var(--pixel-gold); text-shadow: 0 1px 0 #000;
}
.foe { padding: 8px 10px 9px; min-width: 0; }
.foe-head b { font-size: 13.5px; }
.foe-meta { margin-top: 4px; }
.foe-class, .foe-arch { border-radius: 3px; font-size: 10px; padding: 2px 6px; }
.foe-arch { margin-top: 5px; display: inline-block; }
.foe-items { margin-top: 6px; }
.foe-chip { border-radius: 3px; font-size: 10px; padding: 2px 5px; background: #0f0a06cc; border: 1px solid #4a3424; }
.foe-hp { font-size: 11px; color: #ffd9c2; }

/* ── ฉากต่อสู้: กรอบ voxel เช่นกัน ── */
.fighters { border-width: 2px; }
.b-slot { border-radius: 4px; border: 2px solid #3a2a1e; background: #1b130d; }
.b-slot .mini-lvl { color: var(--pixel-gold); letter-spacing: -1px; }
.battle-bottom .log { border: 2px solid #3a2a1e; background: #0f0a06; border-radius: 4px; }
.log { font-family: inherit; font-size: 11.5px; }

@media (max-height: 720px) {
  .matchup { grid-template-columns: 96px 1fr; }
  .hero-stage { height: 96px; }
  .hero-card { min-height: 96px; }
  .vicon { width: 30px; height: 30px; }
  .foe-head b { font-size: 12px; }
  .foe-chip { font-size: 9px; }
}


/* ══════════════════════════════════════════════════════════════════════
   v5: gen-z × hollywood — นีออน โครม สติกเกอร์ + ซีนีม่าในไฟต์
   หลักคิด: ตัวอักษรใหญ่ อารมณ์มันส์ แต่ข้อมูลยังอ่านง่ายบนมือถือ
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,800&family=Noto+Sans+Thai:wght@500;700;900&display=swap');

:root {
  --neon-pink: #ff3b8d;
  --neon-cyan: #4ff0ff;
  --neon-lime: #b6ff3b;
  --neon-violet: #9b5cff;
  --holo-1: #ff3b8d;
  --holo-2: #ffd166;
  --holo-3: #4ff0ff;
  --holo-4: #9b5cff;
}

body {
  font-family: "Noto Sans Thai", "Bricolage Grotesque", ui-monospace, system-ui, sans-serif;
  background:
    radial-gradient(80% 50% at 15% 0%, #3a0f2a 0%, transparent 60%),
    radial-gradient(70% 45% at 90% 10%, #0d2a3a 0%, transparent 55%),
    radial-gradient(60% 50% at 50% 100%, #2a1040 0%, transparent 60%),
    #08060c;
}
.title, .cine-title, .modal-card h2, .battle-head, .primary {
  font-family: "Bricolage Grotesque", "Noto Sans Thai", system-ui, sans-serif;
  font-weight: 800;
}

/* หัวเรื่องไล่สีโครม + เรืองแสง */
.title {
  font-size: 34px;
  letter-spacing: -0.02em;
  background: linear-gradient(96deg, var(--neon-pink), var(--holo-2) 35%, var(--neon-cyan) 70%, var(--neon-violet));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 18px rgba(255, 59, 141, 0.35));
}
.subtitle { font-size: 12.5px; color: #cdbfe8; }

/* HUD: ขอบนีออนบาง ๆ + ตัวเลขเรืองแสง */
.hud { border: 2px solid transparent; background-clip: padding-box; position: relative; }
.hud::after {
  content: ""; position: absolute; inset: -2px; border-radius: 8px; pointer-events: none;
  background: linear-gradient(120deg, var(--neon-pink), var(--neon-cyan), var(--neon-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .55;
}
.class-chip { color: var(--neon-cyan); border-color: rgba(79, 240, 255, .45); background: rgba(79, 240, 255, .1); }
.perk-chip { color: #cdbfe8; }
#stat-gold b { color: var(--holo-2); text-shadow: 0 0 10px rgba(255, 209, 102, .5); }
#stat-lives b { color: var(--neon-pink); }

/* การ์ดไอเท็ม: ฟอยล์โฮโลแกรม + ขอบนีออนตาม rarity */
.card {
  position: relative; overflow: hidden;
  border: 2px solid #3a2a4a;
  background: linear-gradient(170deg, #241a34, #14101f 70%);
}
.card::before {
  content: ""; position: absolute; inset: -40%;
  background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.16), transparent 30%,
    rgba(255,59,141,.16), transparent 55%, rgba(79,240,255,.16), transparent 80%);
  animation: holoSpin 7s linear infinite; pointer-events: none;
}
.card > * { position: relative; }
.card.up {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px rgba(79,240,255,.35), 0 6px 22px rgba(79,240,255,.22);
}
.card .vicon { filter: drop-shadow(0 4px 10px rgba(255, 59, 141, .35)); }
.card .tag {
  border-radius: 999px; font-weight: 800; letter-spacing: .02em;
  background: linear-gradient(120deg, var(--neon-pink), var(--neon-violet));
  color: #fff; border: 0; padding: 2px 7px;
}
.card.up .tag { background: linear-gradient(120deg, var(--neon-cyan), #7affd6); color: #06222a; }

/* ช่องบอร์ด: เส้นประนีออน + ไอคอนเรืองแสง */
.slot.empty { border-color: rgba(155, 92, 255, .38); background: rgba(155, 92, 255, .05); }
.slot.filled { border-color: #4a3466; border-radius: 6px; }
.slot.maxed { border-color: var(--holo-2); box-shadow: 0 0 14px rgba(255, 209, 102, .28); }

/* ปุ่มหลัก: โครมชมพู-ส้ม มีเงาแข็ง + ไฮไลต์ */
.primary {
  background: linear-gradient(120deg, #ff3b8d 0%, #ff7a3d 45%, #ffd166 100%);
  border: 2px solid #ffd9e8;
  color: #1a0611;
  box-shadow: 0 5px 0 #7a1230, 0 12px 28px rgba(255, 59, 141, .35), inset 0 2px 0 rgba(255,255,255,.55);
  text-transform: none;
}
.primary:active { transform: translateY(3px); box-shadow: 0 2px 0 #7a1230; }

/* ป้าย/ชิปแบบสติกเกอร์ */
.foe-class { color: #fff; background: linear-gradient(120deg, var(--neon-violet), var(--neon-pink)); border: 0; font-weight: 800; }
.foe-arch { color: #06222a; background: linear-gradient(120deg, var(--neon-cyan), var(--neon-lime)); border: 0; font-weight: 800; }
.foe-tag { color: var(--neon-pink); letter-spacing: .14em; }
.foe { border: 2px solid #3a2450; }
.hero-card { border: 2px solid #4a3466; }

/* ── ซีนีม่าในไฟต์ ── */
.letterbox {
  position: fixed; left: 0; right: 0; height: 7vh; z-index: 56; pointer-events: none;
  background: #000; opacity: 0; transition: opacity .25s ease;
}
.letterbox.top { top: 0; }
.letterbox.bottom { bottom: 0; }
.battle.cine .letterbox { opacity: .92; }

/* ต้องอยู่เหนือ canvas อนุภาค (z 55) ไม่งั้นเศษเอมเบอร์ลอยทับตัวอักษรไตเติล */
.cine-card {
  position: fixed; left: 0; right: 0; top: 50%; z-index: 59; text-align: center;
  transform: translateY(-50%);
  pointer-events: none;
  padding: 0 24px;
}
.cine-card[hidden] { display: none; }
.cine-card.pop { animation: cinePop .55s cubic-bezier(.16,.9,.24,1.25) both; }
.cine-kicker {
  display: inline-block; font-size: 12px; font-weight: 900; letter-spacing: .3em;
  color: #0a0610; background: linear-gradient(120deg, var(--neon-cyan), var(--neon-lime));
  padding: 3px 10px; border-radius: 3px; margin-bottom: 10px;
}
.cine-title {
  display: block; font-size: 40px; line-height: 1.05; letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffd166 0%, #ff8a3d 30%, #ff3b8d 62%, #9b5cff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 0 rgba(0,0,0,.55)) drop-shadow(0 6px 26px rgba(255, 59, 141, .6));
}
.cine-sub { display: block; margin-top: 8px; font-size: 12.5px; color: #e8dcff; text-shadow: 0 2px 12px #000; }
.cine-card.ko .cine-title { font-size: 46px; }

/* แฟลชเต็มจอ (สร้างจาก fx.js) */
.fx-flash {
  position: fixed; inset: 0; z-index: 58; pointer-events: none; opacity: 0;
  background: #fff; mix-blend-mode: screen;
}
.fx-flash.on { animation: flashOut .18s ease-out both; }

/* ตัวเลขดาเมจ: ใหญ่ขึ้น มีเอาต์ไลน์ */
.float { font-family: "Bricolage Grotesque", "Noto Sans Thai", sans-serif; font-weight: 900; }
.float.dmg { color: #ffd166; -webkit-text-stroke: 1px #7a1230; }

@keyframes holoSpin { to { transform: rotate(360deg); } }
@keyframes flashOut { 0% { opacity: .9; } 100% { opacity: 0; } }
@keyframes cinePop {
  0% { opacity: 0; transform: translateY(-50%) scale(.82); filter: blur(6px); }
  60% { opacity: 1; transform: translateY(-50%) scale(1.04); filter: blur(0); }
  100% { opacity: 1; transform: translateY(-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .card::before, .cine-card.pop { animation: none !important; }
}
@media (max-height: 720px) {
  .cine-title { font-size: 32px; }
  .cine-card.ko .cine-title { font-size: 38px; }
}

/* ── ตัวเลขดาเมจแบบหนัง: ใหญ่ มี outline เอียงเล็กน้อย ── */
.float.dmg, .float.heal, .float.shield {
  font-size: 21px; letter-spacing: -0.01em;
  text-shadow: 0 0 0 #000, 0 2px 0 #000, 0 0 18px currentColor;
  -webkit-text-stroke: 1.5px rgba(0,0,0,.85);
}
.float.dmg.big { font-size: 31px; transform-origin: center; }
.float.dmg { color: #ffe066; }
.float.dmg.big { color: #ff5a8a; }
.float.heal { color: #7affd6; }
.float.shield { color: #4ff0ff; }
/* เริ่มที่ opacity สูงทันที: เดิมเฟดจาก 0 ทำให้ภาพนิ่งจับไม่ทันและคนเล่นรู้สึกว่าตัวเลขไม่ขึ้น */
@keyframes floatUp {
  0% { opacity: .95; transform: translateY(0) scale(.72) rotate(-4deg); }
  18% { opacity: 1; transform: translateY(-8px) scale(1.14) rotate(-2deg); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-52px) scale(.95) rotate(2deg); }
}
/* ข้อความบนการ์ดโฮโลแกรมต้องมีเงา ไม่งั้นจมพื้น */
.card .cname, .slot .sname { text-shadow: 0 2px 6px #000, 0 0 3px #000; }
.foe-chip { text-shadow: 0 1px 3px #000; }

/* ── วงกระแทก 2D ที่จุดปะทะ (เสริม 3D: อ่านง่ายกว่าบนจอเล็ก) ── */
.hit-ring {
  position: fixed; z-index: 57; pointer-events: none; border-radius: 50%;
  border: 3px solid #fff; width: 10px; height: 10px; margin: -5px 0 0 -5px;
  animation: hitRing .3s ease-out forwards;
}
@keyframes hitRing {
  0% { opacity: .9; transform: scale(.5); border-width: 4px; }
  100% { opacity: 0; transform: scale(4.2); border-width: 1px; }
}
.float.dmg { font-size: 26px; }
.float.dmg.big { font-size: 42px; letter-spacing: -0.03em; }
.float.dmg.big::after { content: ""; }

/* ── หน้าเลือกสาย: การ์ดโครม + ป้ายสติกเกอร์ ── */
.class-card {
  position: relative; overflow: hidden;
  border: 2px solid rgba(155, 92, 255, .45);
  background: linear-gradient(165deg, rgba(58, 32, 92, .75), rgba(16, 12, 26, .95) 70%);
  box-shadow: 0 6px 0 rgba(0,0,0,.5), inset 0 2px 0 rgba(255,255,255,.08);
}
.class-card::after {
  content: ""; position: absolute; inset: auto -30% -60% -30%; height: 70%;
  background: radial-gradient(closest-side, rgba(255, 59, 141, .35), transparent);
  pointer-events: none;
}
.class-card:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(0,0,0,.5); }
.class-card .cc-name { font-family: "Bricolage Grotesque", "Noto Sans Thai", sans-serif; font-weight: 800; letter-spacing: -.01em; }
.class-card .cc-best {
  display: inline-block; font-size: 10px; font-weight: 800;
  color: #06222a; background: linear-gradient(120deg, var(--neon-cyan), var(--neon-lime));
  padding: 1px 7px; border-radius: 999px;
}
.class-card .cc-perk { color: #e6d6ff; }

/* ── บรรยากาศฟิล์ม: ขอบมืด + เกรนบาง ๆ (CSS ล้วน ไม่กิน GPU เท่า canvas) ── */
#battle::before {
  content: ""; position: fixed; inset: 0; z-index: 54; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 45%, transparent 45%, rgba(0,0,0,.55) 100%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.022) 0 1px, transparent 1px 2px);
  mix-blend-mode: multiply;
}
#battle::after {
  content: ""; position: fixed; inset: 0; z-index: 54; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)'/></svg>");
  animation: grainShift .6s steps(2) infinite;
}
@keyframes grainShift {
  0% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(-6px,4px,0); }
  100% { transform: translate3d(4px,-6px,0); }
}
@media (prefers-reduced-motion: reduce) { #battle::after { animation: none; } }

/* ตัวเลขลอย: ปิด CSS animation แล้วใช้ rAF ใน ui.js (คุมจังหวะเองและชัวร์กว่าเรื่องคอมโพสิต) */
/* ไม่ใส่ will-change: headless Chrome (swiftshader) ไม่วาดเลเยอร์ที่ promote เป็น composited layer ใน screenshot */
.float.js-float { animation: none !important; }