/* =========================================================================
   BATTLE HUD  —  everything inside uses `em`, so the whole HUD scales with
   --hud-fs (driven by viewport width). Landscape-first.
   ========================================================================= */
#battleView {
  /* 1920px wide -> ~13px, 1366px -> 9.6px(min 9), 2560px -> 17px(max 18) */
  --hud-fs: clamp(10px, 0.7vw, 18px);
  --hud-side-w: clamp(170px, 15.5vw, 400px);   /* right column (map + threats) */
  --hud-gap: 0.6em;
}

.hud-root {
  position: absolute;
  top: max(3.4em, 38px); left: 0.6em; right: 0.6em; bottom: 0.6em;
  font-size: var(--hud-fs);
  display: flex; align-items: flex-start; gap: var(--hud-gap);
  pointer-events: none;
}
.hud-root > .hud-side { pointer-events: auto; }
.hud-left, .hero-grid { pointer-events: none; }     /* empty space must not block canvas clicks */
.hero-card { pointer-events: auto; }

.hud-topbar {
  position: absolute; top: 0.5em; left: 0.6em; right: 0.6em;
  font-size: var(--hud-fs);
  pointer-events: none;
}
.hud-topbar .interactive { pointer-events: auto; }

/* ---------- Hero grid ---------- */
.hud-left { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: var(--hud-gap); }
.hero-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hud-gap);
}
.hero-grid.few-1 { grid-template-columns: repeat(1, minmax(0, 24em)); }
.hero-grid.few-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hero-grid.few-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* ---------- RAID (8 heroes): compact card — the 2 rows together are as tall as ONE normal card row ----------
   line 1: icon | name Lv | element | buffs   line 2: HP bar (value inside) + thin MP bar   line 3: skills */
.hero-grid.raid { gap: 0.2em var(--hud-gap); align-items: stretch; }
.hero-grid.raid .hero-card { padding: 0.38em 0.55em 0.4em; gap: 0.26em; border-radius: 0.8em; justify-content: space-between; }
.hero-grid.raid .hc-head { flex-wrap: nowrap; gap: 0.35em; }
.hero-grid.raid .hc-icon { width: 1.9em; height: 1.9em; font-size: 0.95em; border-radius: 0.6em; }
.hero-grid.raid .hc-name { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; gap: 0.4em; white-space: nowrap; }
.hero-grid.raid .hc-name b { display: block; font-size: 1.05em; min-width: 0; }
.hero-grid.raid .hc-name span { flex: 0 0 auto; font-size: 0.85em; }
.hero-grid.raid .hc-elems .hc-elem { min-width: 0; padding: 0.08em 0.3em; }
.hero-grid.raid .hc-elem { min-width: 0; display: flex; align-items: center; gap: 0.2em; padding: 0.12em 0.4em; font-size: 0.8em; border-radius: 0.55em; }
.hero-grid.raid .hc-elem i { display: inline; font-size: 1em; }
.hero-grid.raid .slots { margin-left: 0; padding: 0.12em 0.22em; gap: 0.15em; border-radius: 0.6em; }
.hero-grid.raid .slot { width: 1.2em; height: 1.2em; font-size: 0.8em; border-radius: 0.35em; }
.hero-grid.raid .slots .sep { height: 0.9em; }
/* bars: label sits INSIDE the bar */
.hero-grid.raid .bar-row { position: relative; gap: 0; }
.hero-grid.raid .bar-label { position: absolute; inset: 0 0.45em; z-index: 2; align-items: center; pointer-events: none; font-size: 0.78em; text-shadow: 0 0 3px #000, 0 0 3px #000, 0 0 2px #000; }
.hero-grid.raid .bar-label .lbl-hp, .hero-grid.raid .bar-label .lbl-mp { color: #e2e8f0; }
.hero-grid.raid .bar.hpbar { height: 1.15em; }
.hero-grid.raid .bar.sm { height: 0.9em; }
.hero-grid.raid .bar-pair { grid-template-columns: 1fr; gap: 0; }
.hero-grid.raid .bar-pair .bar-row:nth-child(2) { display: none; }   /* EXP is not shown in raid */
.hero-grid.raid .hc-skills { padding-top: 0.3em; gap: 0.25em; }
.hero-grid.raid .hc-skills .sk { max-width: 2em; border-radius: 0.55em; font-size: 0.9em; }
.hero-grid.raid .hc-skills .sep { height: 1.4em; }

.hero-card {
  position: relative;
  background: rgba(15, 23, 42, 0.93);
  border: 1px solid rgba(51, 65, 85, 0.9);
  border-radius: 1.1em;
  padding: 0.75em 0.8em 0.7em;
  box-shadow: 0 6px 20px rgba(0,0,0,.45);
  backdrop-filter: blur(4px);
  display: flex; flex-direction: column; gap: 0.5em;
  min-width: 0;
  transition: border-color .2s, filter .3s, opacity .3s;
}
.hero-card .hit-flash, .mob-card .hit-flash { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 3;
  background: radial-gradient(ellipse at 50% 50%, rgba(239,68,68,.78), rgba(185,28,28,.62)); box-shadow: inset 0 0 0 2px rgba(254,202,202,.85), inset 0 0 22px rgba(239,68,68,.9); }
.hero-card.leader { border-color: rgba(245, 158, 11, 0.85); box-shadow: 0 0 0 1px rgba(245,158,11,.25), 0 6px 20px rgba(0,0,0,.45); }
.hero-card.dead { filter: grayscale(1) brightness(.7); opacity: .75; }
.hero-card .dead-tag {
  display: none; position: absolute; inset: 0; border-radius: inherit;
  align-items: center; justify-content: center;
  font-weight: 800; letter-spacing: .15em; color: #fca5a5; font-size: 1.1em;
  background: rgba(2, 6, 23, .45);
}
.hero-card.dead .dead-tag { display: flex; }

.hc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em 0.55em; min-width: 0; }
.hc-icon {
  width: 2.9em; height: 2.9em; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.05em;
  background: #020617; border: 1px solid #334155; border-radius: 0.8em;
}
.hc-name { flex: 1 1 6.5em; min-width: 6.5em; line-height: 1.15; }
.hc-name b { display: block; font-size: 1.15em; color: #f1f5f9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-name span { font-family: ui-monospace, monospace; font-size: 0.95em; font-weight: 700; color: #34d399; }

.hc-elem {
  flex: 0 0 auto; min-width: 3.6em; text-align: center; cursor: help;
  padding: 0.3em 0.5em; border-radius: 0.7em; line-height: 1.1;
  font-weight: 800; font-size: 0.95em; border: 1px solid;
}
.hc-elem i { display: block; font-style: normal; font-size: 1.15em; }
.hc-elems { flex: 0 0 auto; display: flex; flex-direction: column; gap: 0.2em; }
.hc-elems .hc-elem { display: flex; align-items: center; gap: 0.25em; justify-content: flex-start; padding: 0.12em 0.45em; min-width: 5.6em; font-size: 0.82em; white-space: nowrap; }
.hc-elems .hc-elem i { display: inline; font-size: 1em; }
.hc-elems .hc-elem u { text-decoration: none; font-size: 0.85em; opacity: 0.85; font-weight: 700; }

/* buff (4) | debuff (3) slot pill */
.slots {
  flex: 0 0 auto; margin-left: auto; display: flex; align-items: center; gap: 0.25em;
  padding: 0.25em 0.35em; border-radius: 0.8em;
  background: rgba(2, 6, 23, .85); border: 1px solid #1e293b;
}
.slots .sep { width: 1px; height: 1.3em; background: #334155; margin: 0 0.1em; }
.slot {
  position: relative; width: 1.65em; height: 1.65em; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.45em; font-size: 0.95em;
  background: #0b1220; border: 1px solid #1e293b; color: #334155;
}
.slot.buff   { border-color: #f59e0b; color: #fcd34d; background: #1c1405; cursor: help; }
.slot.debuff { border-color: #f43f5e; color: #fda4af; background: #1f0a10; cursor: help; }
.slot.buff:hover, .slot.debuff:hover { transform: scale(1.12); }
.slot small {
  position: absolute; right: -0.15em; bottom: -0.3em; font-size: .62em; line-height: 1;
  font-family: ui-monospace, monospace; font-weight: 800; color: #e2e8f0;
  background: rgba(2,6,23,.92); padding: 0 .2em; border-radius: .3em;
}
.slot .dot { font-size: .5em; }

/* bars */
.bar-row { display: flex; flex-direction: column; gap: 0.18em; min-width: 0; }
.bar-label { display: flex; justify-content: space-between; align-items: baseline; font-family: ui-monospace, monospace; font-size: 0.9em; font-weight: 700; line-height: 1; }
.bar { height: 0.75em; background: #020617; border: 1px solid #1e293b; border-radius: 99px; overflow: hidden; }
.bar > div { height: 100%; width: 100%; border-radius: inherit; transform-origin: left; transition: width .08s linear; }
.bar.sm { height: 0.55em; }
.hp-fill  { background: linear-gradient(90deg, #059669, #34d399); }
.hp-fill.mid { background: linear-gradient(90deg, #d97706, #fbbf24); }
.hp-fill.low { background: linear-gradient(90deg, #e11d48, #fb7185); }
.mp-fill  { background: linear-gradient(90deg, #0284c7, #38bdf8); }
.exp-fill { background: linear-gradient(90deg, #9333ea, #d946ef); }
.shield-fill {
  background: repeating-linear-gradient(135deg, rgba(255,255,255,.22) 0 .35em, rgba(255,255,255,0) .35em .7em),
              linear-gradient(90deg, #0ea5e9, #7dd3fc);
}
/* HP + shield share ONE bar: [ hp ][ shield ] (scale = max(maxHp, hp+shield)) */
.bar.hpbar { display: flex; }
.bar.hpbar > div { width: 0; flex: 0 0 auto; border-radius: 0; }
.lbl-hp { color: #34d399; } .lbl-mp { color: #38bdf8; } .lbl-exp { color: #e879f9; }
.val { color: #cbd5e1; }
.bar-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7em; }

/* skill dock inside card */
.hc-skills { display: flex; align-items: center; gap: 0.45em; padding-top: 0.5em; border-top: 1px solid #1e293b; }
.hc-skills .sep { width: 1px; height: 2em; background: #334155; margin: 0 0.15em; }
/* สกิลเยอะ: ไอคอนหดตามความกว้างการ์ด ไม่ล้นออกนอกกรอบ */
.hc-skills { min-width: 0; max-width: 100%; overflow: hidden; gap: 0.35em; }
.hc-skills .sep { flex: 0 0 1px; }
.hc-skills .sk { flex: 1 1 0; width: auto; height: auto; min-width: 0; max-width: 2.7em; aspect-ratio: 1 / 1; font-size: clamp(0.7em, 1.05em, 1.05em); }
.sk {
  position: relative; width: 2.7em; height: 2.7em; flex: 0 0 auto; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  border-radius: 0.8em; background: #020617; border: 1.5px solid #334155; color: #e2e8f0;
  font-size: 1.05em; cursor: help; transition: transform .1s, opacity .15s, box-shadow .2s;
}
.sk:hover { transform: translateY(-1px) scale(1.06); }
.sk.ult { border-color: #b45309; color: #fbbf24; }
.sk.ult.ready { border-color: #fbbf24; box-shadow: 0 0 0.9em rgba(251,191,36,.55); animation: ultPulse 1.1s ease-in-out infinite; }
.sk.passive { border-color: #0369a1; color: #7dd3fc; }
.sk.passive.on { border-color: #38bdf8; box-shadow: 0 0 .8em rgba(56,189,248,.5); }
.sk.nomp { opacity: .45; }
.sk.casting { border-color: #fbbf24; box-shadow: 0 0 .8em rgba(251,191,36,.6); }
.sk .gauge { position: absolute; left: 0; bottom: 0; height: .28em; width: 100%; transform-origin: left; }
.sk .gauge.cd { background: #22c55e; }
.sk .gauge.ug { background: #f59e0b; }
.sk .cdtxt {
  position: absolute; inset: 0; display: none; align-items: center; justify-content: center;
  background: rgba(2,6,23,.78); color: #e2e8f0; font-family: ui-monospace, monospace; font-weight: 800; font-size: .85em;
}
.sk.oncd .cdtxt { display: flex; }
@keyframes ultPulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.35); } }

/* ---------- Right column: radar + threat list ---------- */
.hud-side {
  flex: 0 0 var(--hud-side-w); width: var(--hud-side-w);
  align-self: stretch;                 /* full height -> threat list runs down to bottom */
  display: flex; flex-direction: column; gap: var(--hud-gap); min-height: 0;
}
.radar-box {
  flex: 0 0 auto; background: rgba(15,23,42,.95); border: 1px solid rgba(51,65,85,.9);
  border-radius: 1em; padding: 0.5em; box-shadow: 0 6px 20px rgba(0,0,0,.45);
}
.radar-box header { display: flex; justify-content: space-between; align-items: center; padding: 0 0.3em 0.35em; font-weight: 800; font-size: 1em; color: #fbbf24; }
.radar-box header span:last-child { font-family: ui-monospace, monospace; color: #fb7185; font-size: .9em; }
#radarCanvas { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; border-radius: .7em; background: #020617; border: 1px solid #1e293b; }

.threat-panel {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  background: rgba(2,6,23,.9); border: 1px solid rgba(30,41,59,.95);
  border-radius: 1em; padding: 0.55em; box-shadow: 0 6px 20px rgba(0,0,0,.45); backdrop-filter: blur(4px);
}
.threat-panel header { display: flex; justify-content: space-between; align-items: center; padding-bottom: .45em; margin-bottom: .45em; border-bottom: 1px solid #1e293b; font-weight: 800; color: #fb7185; }
.threat-panel header .badge { font-family: ui-monospace, monospace; font-size: .85em; padding: .1em .55em; border-radius: .5em; background: #4c0519; border: 1px solid #9f1239; color: #fda4af; }
.threat-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: .5em; padding-right: .2em; }
.threat-list::-webkit-scrollbar { width: 5px; } .threat-list::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.threat-empty { text-align: center; padding: 2em .5em; color: #64748b; font-size: .9em; }

.mob-card {
  flex: 0 0 auto; position: relative; cursor: pointer;
  background: rgba(15,23,42,.95); border: 1px solid #1e293b; border-radius: .9em;
  padding: .55em .6em; display: flex; flex-direction: column; gap: .4em;
  transition: border-color .15s;
}
.mob-card:hover { border-color: #fb7185; }
.mob-card.boss { border-color: rgba(245,158,11,.8); }
.mob-card.manager { border-color: rgba(168,85,247,.6); }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.mc-name { display: flex; align-items: center; gap: .4em; min-width: 0; font-weight: 800; color: #f1f5f9; }
.mc-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-name em { font-style: normal; font-family: ui-monospace, monospace; font-size: .85em; color: #fbbf24; }
.mc-elem { font-size: .85em; font-weight: 800; padding: .1em .55em; border-radius: .5em; border: 1px solid; flex: 0 0 auto; cursor: help; }
.mc-mid { display: flex; align-items: center; justify-content: space-between; gap: .4em; }
.mc-mid .slots { padding: .2em .3em; }
.mc-mid .slot { width: 1.45em; height: 1.45em; }
.mc-target { display: flex; align-items: center; gap: .4em; min-width: 0; font-family: ui-monospace, monospace; font-weight: 700; color: #fda4af; font-size: .95em; }
.mc-target span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-hpnum { font-family: ui-monospace, monospace; font-weight: 700; color: #e2e8f0; font-size: .95em; flex: 0 0 auto; }
.mob-hp { background: linear-gradient(90deg, #e11d48, #fb7185); }
.mc-skills { display: flex; align-items: center; gap: .4em; flex-wrap: wrap; }
.mc-skills .sk { width: 2.2em; height: 2.2em; font-size: .95em; border-color: #9f1239; color: #fda4af; }
.mc-skills .sk.oncd { border-color: #1e293b; color: #475569; }
.mc-cast { margin-left: auto; font-family: ui-monospace, monospace; font-size: .85em; font-weight: 800; color: #fcd34d; animation: ultPulse .8s infinite; }

/* ---------- Tooltip ---------- */
#hudTooltip {
  position: fixed; z-index: 99999; display: none; pointer-events: none;
  font-size: var(--hud-tip-fs, 12px);
  width: max-content; max-width: min(26em, 90vw);
  background: rgba(2, 6, 23, 0.98); border: 1px solid #475569; border-radius: .9em;
  padding: .8em .9em; box-shadow: 0 12px 30px rgba(0,0,0,.65); color: #cbd5e1; line-height: 1.4;
}
#hudTooltip .tt-head { display: flex; align-items: center; justify-content: space-between; gap: .8em; padding-bottom: .4em; margin-bottom: .45em; border-bottom: 1px solid #1e293b; }
#hudTooltip .tt-title { font-weight: 800; color: #f1f5f9; display: flex; align-items: center; gap: .45em; }
#hudTooltip .tt-tag { font-family: ui-monospace, monospace; font-size: .8em; font-weight: 800; padding: .1em .5em; border-radius: .4em; border: 1px solid; white-space: nowrap; }
#hudTooltip .tt-desc { color: #cbd5e1; margin-bottom: .45em; }
#hudTooltip .tt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .2em .9em; font-family: ui-monospace, monospace; font-size: .85em; color: #94a3b8; padding-top: .4em; border-top: 1px solid #0f172a; }
#hudTooltip .tt-grid b { color: #e2e8f0; }
#hudTooltip .tt-grid .full { grid-column: 1 / -1; }
#hudTooltip .tt-amber { color: #fcd34d; } #hudTooltip .tt-sky { color: #7dd3fc; } #hudTooltip .tt-rose { color: #fda4af; } #hudTooltip .tt-green { color: #6ee7b7; }

/* ---------- Live stats panel (right column) ---------- */
.stats-panel {
  flex: 0 0 auto; background: rgba(2,6,23,.9); border: 1px solid rgba(30,41,59,.95);
  border-radius: 1em; padding: .5em .55em; box-shadow: 0 6px 20px rgba(0,0,0,.45); backdrop-filter: blur(4px);
  max-height: 34vh; display: flex; flex-direction: column; min-height: 0;
}
.stats-panel header { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding-bottom: .35em; margin-bottom: .35em; border-bottom: 1px solid #1e293b; font-weight: 800; color: #7dd3fc; }
.stats-panel header .st-time { font-family: ui-monospace, monospace; font-size: .85em; color: #94a3b8; margin-left: auto; }
.stats-panel header button { font-size: .8em; font-weight: 800; padding: .1em .55em; border-radius: .5em; background: #0f172a; border: 1px solid #334155; color: #cbd5e1; cursor: pointer; }
.stats-panel header button:hover { border-color: #7dd3fc; color: #fff; }
#liveStatsBody { overflow-y: auto; min-height: 0; display: flex; flex-direction: column; gap: .45em; }
#liveStatsBody::-webkit-scrollbar { width: 4px; } #liveStatsBody::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
.ls-title { font-weight: 800; font-size: .88em; margin-bottom: .15em; }
.ls-row { display: grid; grid-template-columns: 1fr auto; gap: 0 .5em; align-items: center; margin-bottom: .25em; }
.ls-name { font-weight: 700; color: #e2e8f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ls-row.lead .ls-name { color: #fef3c7; }
.ls-val { font-family: ui-monospace, monospace; font-weight: 800; color: #f8fafc; font-size: .95em; }
.ls-val em { font-style: normal; color: #64748b; font-size: .8em; margin-left: .35em; }
.ls-bar { grid-column: 1 / -1; height: .38em; background: #0f172a; border-radius: .3em; overflow: hidden; margin-top: .1em; }
.ls-bar i { display: block; height: 100%; transition: width .25s; }

/* ---------- Battle result overlay ---------- */
#battleResultModal { font-size: clamp(11px, 0.75vw, 16px); }
.br-card { width: min(62em, 96vw); max-height: 94vh; overflow-y: auto; background: linear-gradient(180deg,#0f172a,#020617); border: 1px solid #f59e0b88; border-radius: 1.4em; padding: 1.3em 1.5em; box-shadow: 0 0 60px rgba(245,158,11,.25); color: #e2e8f0; }
.br-head { display: flex; align-items: center; gap: .9em; flex-wrap: wrap; margin-bottom: 1em; }
.br-trophy { font-size: 3em; line-height: 1; }
.br-title { font-size: 1.9em; font-weight: 900; color: #fbbf24; letter-spacing: .03em; }
.br-sub { color: #94a3b8; font-weight: 700; }
.br-chips { margin-left: auto; display: flex; gap: .5em; flex-wrap: wrap; }
.br-chips span { font-family: ui-monospace, monospace; font-weight: 800; background: #0f172a; border: 1px solid #334155; border-radius: .7em; padding: .3em .75em; }
.br-mvps { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7em; margin-bottom: 1em; }
.br-mvp { background: #0b1220; border: 1px solid; border-radius: 1em; padding: .7em .9em; text-align: center; }
.br-mvp-t { font-weight: 800; font-size: .95em; }
.br-mvp-n { font-weight: 900; font-size: 1.25em; color: #f8fafc; margin: .15em 0; }
.br-mvp-v { font-family: ui-monospace, monospace; font-weight: 800; color: #cbd5e1; }
.br-table { width: 100%; border-collapse: collapse; margin-bottom: 1em; }
.br-table th { text-align: left; font-size: .85em; color: #94a3b8; padding: .4em .5em; border-bottom: 1px solid #1e293b; }
.br-table td { padding: .5em .5em; border-bottom: 1px solid #0f172a; vertical-align: middle; }
.br-table td.nm { font-weight: 800; white-space: nowrap; }
.br-table td.c { text-align: center; font-family: ui-monospace, monospace; font-weight: 800; }
.br-table td.top .br-num { color: #fde68a; }
.br-num { font-family: ui-monospace, monospace; font-weight: 800; }
.br-num em { font-style: normal; color: #64748b; font-size: .8em; margin-left: .4em; }
.br-bar { height: .4em; background: #0f172a; border-radius: .3em; overflow: hidden; margin-top: .25em; }
.br-bar i { display: block; height: 100%; }
.dead { opacity: .8; }
.br-rewards { background: #0b1220; border: 1px solid #1e293b; border-radius: 1em; padding: .8em 1em; margin-bottom: 1em; }
.br-gold { font-weight: 900; color: #fcd34d; font-size: 1.2em; margin-bottom: .5em; }
.br-items-t { color: #94a3b8; font-weight: 800; font-size: .9em; margin-bottom: .4em; }
.br-items { display: flex; flex-wrap: wrap; gap: .5em; }
.br-item { display: flex; align-items: center; gap: .5em; background: #0f172a; border: 1px solid #334155; border-radius: .8em; padding: .35em .75em; font-weight: 700; }
.br-item b { color: #fbbf24; font-family: ui-monospace, monospace; }
.br-none { color: #64748b; }
.br-actions { display: flex; justify-content: flex-end; gap: .6em; }
.br-btn { font-weight: 800; padding: .6em 1.3em; border-radius: .9em; background: #1e293b; color: #e2e8f0; border: 1px solid #334155; cursor: pointer; }
.br-btn:hover { filter: brightness(1.2); }
.br-btn.primary { background: linear-gradient(90deg,#f59e0b,#eab308); color: #0f172a; border-color: #fbbf24; }
.br-btn.ghost { background: transparent; }

/* ---------- ดาวภารกิจของด่าน Story (หน้าสรุปผล) ---------- */
.br-stars { background: rgba(15,23,42,.7); border: 1px solid #334155; border-radius: 14px; padding: 10px 14px; margin: 10px 0; }
.br-stars-h { display: flex; align-items: center; gap: 4px; font-size: 30px; line-height: 1; margin-bottom: 8px; color: #475569; }
.br-stars-h span.on { color: #fbbf24; text-shadow: 0 0 14px #f59e0b; }
.br-stars-h em { font-size: 12px; font-style: normal; color: #86efac; margin-left: 10px; font-weight: 800; }
.br-mis { display: flex; align-items: center; gap: 8px; font-size: 12px; color: #94a3b8; padding: 3px 0; }
.br-mis b { color: #475569; width: 16px; }
.br-mis.ok { color: #e2e8f0; } .br-mis.ok b { color: #fbbf24; }
.br-mis i { margin-left: auto; font-style: normal; font-family: monospace; color: #cbd5e1; }
.br-unlock { margin-top: 6px; font-size: 12px; font-weight: 800; color: #86efac; }

.sk.more { border-style: dashed; border-color: #64748b; color: #cbd5e1; font-weight: 800; }
.sk.more small { position: static; font-size: .85em; }

/* ===== สถานะจากธาตุที่แพ้ทาง บนการ์ดฮีโร่ (burn / bleed / wet / stun / blind / fear) =====
   .es-fx = ชั้นเอฟเฟกต์ทับการ์ด (ไม่รับเมาส์) ; เปิดชั้นด้วยคลาส es-<ชื่อ> บน .hero-card (hud_battle.js) */
.es-fx { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.es-fx > i { position: absolute; inset: 0; display: none; font-style: normal; }
.es-fx b { position: absolute; font-weight: 400; }
.hero-card.es-burn .fx-burn, .mob-card.es-burn .fx-burn, .hero-card.es-bleed .fx-bleed, .mob-card.es-bleed .fx-bleed, .hero-card.es-wet .fx-wet, .mob-card.es-wet .fx-wet,
.hero-card.es-stun .fx-stun, .mob-card.es-stun .fx-stun, .hero-card.es-blind .fx-blind, .mob-card.es-blind .fx-blind, .hero-card.es-fear .fx-fear, .mob-card.es-fear .fx-fear, .hero-card.es-shock .fx-shock, .mob-card.es-shock .fx-shock { display: block; }

/* Max HP ที่ถูกเผา: แถบดำไหม้ริมขวาของแถบ HP */
.scorch-seg { margin-left: auto; display: none; background: repeating-linear-gradient(135deg, #1c1917 0 .3em, #44180a .3em .6em); box-shadow: inset 0 0 6px #f97316, inset 1px 0 0 #fb923c; animation: esScorch 1.3s ease-in-out infinite; }
@keyframes esScorch { 50% { box-shadow: inset 0 0 9px #fbbf24, inset 1px 0 0 #fde047; } }

/* Burn: เปลวไฟลุกจากขอบล่าง + ถ่านลอยขึ้น */
.hero-card.es-burn, .mob-card.es-burn { border-color: rgba(249,115,22,.9); }
.fx-burn { background: linear-gradient(0deg, rgba(249,115,22,.55), rgba(239,68,68,.18) 38%, transparent 70%); animation: esFlick .5s ease-in-out infinite alternate; box-shadow: inset 0 0 14px rgba(249,115,22,.55); }
.fx-burn b { bottom: -4px; width: .55em; height: .55em; border-radius: 50%; background: radial-gradient(circle, #fde047, #f97316 60%, transparent 72%); animation: esEmber 1.4s linear infinite; opacity: 0; }
.fx-burn b:nth-child(1) { left: 12%; } .fx-burn b:nth-child(2) { left: 38%; animation-delay: .4s; } .fx-burn b:nth-child(3) { left: 63%; animation-delay: .8s; } .fx-burn b:nth-child(4) { left: 86%; animation-delay: .2s; }
@keyframes esFlick { from { opacity: .65; filter: brightness(1); } to { opacity: 1; filter: brightness(1.25); } }
@keyframes esEmber { 0% { transform: translateY(0) scale(1); opacity: 0; } 15% { opacity: .95; } 100% { transform: translateY(-3.2em) scale(.3); opacity: 0; } }

/* Bleed: หยดเลือดไหลลงตามการ์ด + ขอบแดงเต้นตามจังหวะ */
.hero-card.es-bleed, .mob-card.es-bleed { border-color: rgba(220,38,38,.95); }
.fx-bleed { box-shadow: inset 0 0 16px rgba(220,38,38,.75); animation: esPulse .9s ease-in-out infinite; }
.fx-bleed b { top: -1.2em; width: .32em; height: 1.1em; border-radius: 0 0 .4em .4em; background: linear-gradient(180deg, rgba(185,28,28,0), #dc2626 55%, #7f1d1d); animation: esDrip 1.3s ease-in infinite; }
.fx-bleed b:nth-child(1) { left: 8%; } .fx-bleed b:nth-child(2) { left: 29%; animation-delay: .5s; height: 1.6em; } .fx-bleed b:nth-child(3) { left: 52%; animation-delay: .2s; } .fx-bleed b:nth-child(4) { left: 73%; animation-delay: .8s; height: 1.4em; } .fx-bleed b:nth-child(5) { left: 91%; animation-delay: .35s; }
@keyframes esPulse { 50% { box-shadow: inset 0 0 26px rgba(239,68,68,.95); } }
@keyframes esDrip { 0% { transform: translateY(0); opacity: 0; } 20% { opacity: .95; } 100% { transform: translateY(5.2em); opacity: 0; } }

/* Wet: ฟิล์มน้ำสีฟ้า + หยดน้ำไหลลง + แสงวาบผิวเปียก */
.hero-card.es-wet, .mob-card.es-wet { border-color: rgba(56,189,248,.9); }
.fx-wet { background: linear-gradient(160deg, rgba(56,189,248,.22), rgba(14,165,233,.12) 60%, rgba(125,211,252,.2)); box-shadow: inset 0 0 12px rgba(56,189,248,.5); }
.fx-wet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 28%; left: -40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent); animation: esShine 2.6s ease-in-out infinite; }
.fx-wet b { top: 0; width: .38em; height: .55em; border-radius: 50% 50% 55% 55% / 35% 35% 65% 65%; background: radial-gradient(circle at 35% 30%, #fff, #7dd3fc 55%, #0ea5e9); animation: esDrop 1.9s ease-in infinite; opacity: 0; }
.fx-wet b:nth-child(1) { left: 14%; } .fx-wet b:nth-child(2) { left: 34%; animation-delay: .7s; } .fx-wet b:nth-child(3) { left: 55%; animation-delay: 1.2s; } .fx-wet b:nth-child(4) { left: 74%; animation-delay: .3s; } .fx-wet b:nth-child(5) { left: 90%; animation-delay: 1.5s; }
@keyframes esDrop { 0% { transform: translateY(-.3em); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(5em); opacity: 0; } }
@keyframes esShine { to { left: 130%; } }

/* Stun: ดาววิ้งๆ หมุนวนเหนือหัวการ์ด + การ์ดหม่นลงเล็กน้อย */
.hero-card.es-stun, .mob-card.es-stun { border-color: rgba(250,204,21,.9); }
.fx-stun { background: rgba(250,204,21,.07); }
.fx-stun b { top: .05em; left: 50%; font-size: 1.05em; line-height: 1; margin-left: -.5em; text-shadow: 0 0 6px #fde047, 0 0 12px #f59e0b; transform-origin: 50% 1.1em; animation: esSpin 1.1s linear infinite; }
.fx-stun b:nth-child(2) { animation-delay: -.37s; } .fx-stun b:nth-child(3) { animation-delay: -.73s; }
@keyframes esSpin { from { transform: rotate(0deg) translateX(2.3em) rotate(0deg) scale(1); } 50% { filter: brightness(1.5); } to { transform: rotate(360deg) translateX(2.3em) rotate(-360deg) scale(1); } }

/* Blind: ควันบางๆ ปกคลุมทั้งการ์ด ลอยไหลช้าๆ */
.hero-card.es-blind, .mob-card.es-blind { border-color: rgba(226,232,240,.7); }
.fx-blind { background: rgba(203,213,225,.12); }
.fx-blind b { width: 70%; height: 90%; border-radius: 50%; filter: blur(.7em); background: radial-gradient(ellipse, rgba(226,232,240,.5), rgba(148,163,184,.18) 60%, transparent 75%); animation: esSmoke 5s ease-in-out infinite alternate; }
.fx-blind b:nth-child(1) { left: -15%; top: -20%; } .fx-blind b:nth-child(2) { right: -20%; top: 10%; animation-delay: -2s; animation-duration: 6.5s; } .fx-blind b:nth-child(3) { left: 20%; bottom: -35%; animation-delay: -3.5s; animation-duration: 5.5s; }
@keyframes esSmoke { from { transform: translate(-8%, 4%) scale(.9); opacity: .55; } to { transform: translate(12%, -6%) scale(1.12); opacity: .95; } }

/* Fear: ม่วงมืดขอบมัว + ผีวิญญาณลอยหลอน + เหงื่อตก และหัวการ์ดสั่นระริก */
.hero-card.es-fear, .mob-card.es-fear { border-color: rgba(168,85,247,.9); }
.fx-fear { background: radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(46,16,101,.75) 100%); box-shadow: inset 0 0 18px rgba(126,34,206,.8); animation: esDread 1.6s ease-in-out infinite; }
.fx-fear b { font-size: 1em; opacity: 0; animation: esGhost 2.4s ease-in-out infinite; }
.fx-fear b:nth-child(1) { left: 8%; bottom: 12%; } .fx-fear b:nth-child(2) { left: 46%; top: 4%; animation-name: esSweat; animation-duration: 1s; } .fx-fear b:nth-child(3) { right: 8%; bottom: 20%; animation-delay: -1.2s; }
.hero-card.es-fear .hc-head, .hero-card.es-fear .hc-skills { animation: esShiver .16s linear infinite; }
@keyframes esDread { 50% { filter: brightness(.8); } }
@keyframes esGhost { 0% { transform: translateY(0) scale(.8); opacity: 0; } 30% { opacity: .85; } 100% { transform: translateY(-1.8em) scale(1.15); opacity: 0; } }
@keyframes esSweat { 0% { transform: translateY(-.2em); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(1.6em); opacity: 0; } }
@keyframes esShiver { 0% { transform: translateX(-1px); } 50% { transform: translateX(1px) translateY(.5px); } 100% { transform: translateX(-1px); } }

/* Shock (สายฟ้า): ฟ้าแลบซิกแซกวาบเป็นจังหวะ + การ์ดกะพริบเหลือง-ฟ้า */
.hero-card.es-shock, .mob-card.es-shock { border-color: rgba(250,204,21,.95); }
.fx-shock { background: radial-gradient(ellipse at 50% 50%, rgba(253,224,71,.14), transparent 70%); box-shadow: inset 0 0 14px rgba(250,204,21,.65); animation: esZap .55s steps(2, end) infinite; }
.fx-shock b { top: 0; bottom: 0; width: .7em; background: linear-gradient(180deg, #fef9c3, #fde047 50%, #38bdf8); clip-path: polygon(55% 0, 10% 42%, 45% 45%, 0 100%, 90% 52%, 52% 49%, 100% 0); filter: drop-shadow(0 0 4px #fde047); opacity: 0; animation: esBolt 1.2s linear infinite; }
.fx-shock b:nth-child(1) { left: 12%; } .fx-shock b:nth-child(2) { left: 38%; animation-delay: .45s; transform: scaleX(-1); } .fx-shock b:nth-child(3) { left: 64%; animation-delay: .8s; } .fx-shock b:nth-child(4) { left: 86%; animation-delay: .2s; transform: scaleX(-1); }
@keyframes esZap { 0% { filter: brightness(1); } 50% { filter: brightness(1.6) hue-rotate(-12deg); } }
@keyframes esBolt { 0%, 62% { opacity: 0; } 66% { opacity: 1; } 74% { opacity: .2; } 80% { opacity: 1; } 88%, 100% { opacity: 0; } }

/* Parch (ดินแห้งกรอบ): แถบ HP แห้งแตกระแหง สีดินซีด + รอยร้าวพาดตลอดแถบ */
.hero-card.es-parch .bar.hpbar { position: relative; border-color: #92400e; box-shadow: 0 0 0 1px rgba(146,64,14,.55), 0 0 6px rgba(180,83,9,.45); }
.hero-card.es-parch .hp-fill { filter: sepia(.9) saturate(.7) brightness(.85); }
.hero-card.es-parch .bar.hpbar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; border-radius: inherit; opacity: .95;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='46' height='12' viewBox='0 0 46 12'><path d='M0 6 L7 4 L11 7 L17 3 L21 6 L26 2 L31 7 L37 4 L42 8 L46 5 M11 7 L13 11 M26 2 L24 0 M31 7 L34 11 M17 3 L16 0' fill='none' stroke='%232b1604' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/><path d='M7 4 L8 1 M37 4 L39 0 M21 6 L22 10' fill='none' stroke='%237c4a1d' stroke-width='.9'/></svg>") repeat-x center / auto 100%,
    repeating-linear-gradient(115deg, rgba(180,125,60,.28) 0 3px, rgba(120,72,24,.0) 3px 7px);
}

/* การ์ดมอนสเตอร์: ดินแห้งกรอบ = แถบ HP ซีดแห้งเป็นสีดิน */
.mob-card.es-parch .bar { border-color: #92400e; box-shadow: 0 0 0 1px rgba(146,64,14,.55); }
.mob-card.es-parch .mob-hp { filter: sepia(.9) saturate(.7) brightness(.85); }
.mob-card .es-fx { border-radius: inherit; }