:root {
  --bg: #0b1020;
  --panel: rgba(12, 20, 44, .86);
  --panel2: rgba(24, 36, 72, .9);
  --line: rgba(140, 200, 255, .35);
  --glow: #5fd0ff;
  --gold: #ffd34d;
  --text: #eef4ff;
  --muted: #9fb2d4;
  --danger: #ff5a6a;
  --btn: clamp(50px, 14vh, 84px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: 'Kanit', system-ui, sans-serif; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; overscroll-behavior: none;
}
body { position: fixed; inset: 0; }
button { font-family: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
button:disabled { cursor: not-allowed; opacity: .45; }
#app { position: fixed; inset: 0; }
#game { position: absolute; touch-action: none; }
.hidden { display: none !important; }

/* ---------- เลเยอร์เมนู ---------- */
.screens { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 0 calc(10px + var(--safe-r)) 0 calc(10px + var(--safe-l)); }
.screens:not(.screen-home):not(.screen-battle):not(.screen-town):not(.screen-login) { background: linear-gradient(180deg, rgba(6, 10, 26, .78), rgba(6, 10, 26, .55)); }
.screen-battle { pointer-events: none; }
.scroll { overflow-y: auto; touch-action: pan-y; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }

.topbar { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 52px; flex-shrink: 0; }
.topbar h2 { margin: 0; font-size: clamp(18px, 4vh, 26px); font-weight: 800; letter-spacing: .5px; flex: 1; }
.topbar h2 small { font-size: .6em; color: var(--muted); font-weight: 400; }
.cur { display: flex; gap: 8px; }
.cur span { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 3px 12px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.btn-back, .icon-btn {
  width: 40px; height: 40px; border-radius: 50%; background: var(--panel2); border: 1px solid var(--line);
  font-size: 16px; font-weight: 800; flex-shrink: 0;
}
.btn-back:active, .icon-btn:active { transform: scale(.92); }

/* ---------- หน้าแรก ---------- */
.home { display: flex; flex-direction: column; height: 100%; }
.home-top { justify-content: flex-end; }
.logo-sm { flex: 1; font-weight: 800; letter-spacing: 2px; color: var(--glow); text-shadow: 0 0 10px rgba(95, 208, 255, .6); font-size: 15px; }
.home-main { flex: 1; display: flex; justify-content: space-between; align-items: stretch; padding-bottom: calc(10px + var(--safe-b)); min-height: 0; }
.home-left { display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding-top: 2vh; }
.logo { font-size: clamp(30px, 9vh, 64px); line-height: .95; font-weight: 900; font-style: italic; letter-spacing: 2px;
  color: #fff; text-shadow: 0 0 18px rgba(95, 208, 255, .9), 0 4px 0 #1a3a7a, 0 6px 14px rgba(0, 0, 0, .6); }
.logo b { color: var(--gold); text-shadow: 0 0 18px rgba(255, 200, 80, .8), 0 4px 0 #7a4a10, 0 6px 14px rgba(0, 0, 0, .6); }
.logo-sub { font-size: 12px; letter-spacing: 4px; color: #fff; text-shadow: 0 2px 4px #000; }
.lead-tag { margin-top: 4px; font-size: 14px; text-shadow: 0 2px 4px #000; }
.lead-tag small { color: #dfe8ff; }
.daily { margin-top: 6px; align-self: flex-start; padding: 8px 16px; border-radius: 22px; background: linear-gradient(90deg, #ff9a3c, #ffd34d);
  color: #3a1a00; font-weight: 800; box-shadow: 0 0 16px rgba(255, 180, 60, .7); animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { transform: scale(1.05); } }
.home-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(44vw, 420px); align-content: end; }
.menu-btn {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  padding: 10px 14px; min-height: clamp(56px, 17vh, 96px); border-radius: 14px; text-align: left;
  background: linear-gradient(135deg, rgba(30, 60, 120, .92), rgba(12, 20, 44, .92)); border: 1px solid var(--line);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 6px 18px rgba(0, 0, 0, .4); transition: transform .1s;
}
.menu-btn:active { transform: scale(.96); }
.menu-btn.big { grid-column: span 2; min-height: clamp(70px, 24vh, 130px); background: linear-gradient(135deg, rgba(40, 110, 200, .95), rgba(14, 30, 70, .95)); }
.menu-btn.gold { background: linear-gradient(135deg, rgba(160, 100, 20, .95), rgba(60, 30, 10, .95)); border-color: rgba(255, 210, 120, .5); }
.menu-btn .ico { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: clamp(24px, 7vh, 44px); opacity: .9; }
.menu-btn b { font-size: clamp(17px, 4.5vh, 26px); font-weight: 800; }
.menu-btn small { color: #cfe0ff; font-size: 12px; }

/* ---------- เควส ---------- */
.quest { flex: 1; display: flex; gap: 10px; min-height: 0; padding-bottom: calc(10px + var(--safe-b)); }
.floor-tabs { display: flex; flex-direction: column; gap: 6px; width: clamp(130px, 22vw, 200px); overflow-y: auto; }
.tab { text-align: left; padding: 8px 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.tab b { font-size: 15px; }
.tab small { color: var(--muted); font-size: 11px; }
.tab.on { background: linear-gradient(90deg, rgba(60, 140, 255, .55), rgba(20, 40, 90, .9)); border-color: var(--glow); box-shadow: 0 0 10px rgba(95, 208, 255, .4); }
.stage-list { flex: 1; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
.stage {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; text-align: left;
  background: linear-gradient(90deg, rgba(30, 50, 100, .9), rgba(12, 20, 44, .9)); border: 1px solid var(--line); transition: transform .1s;
}
.stage:active { transform: scale(.98); }
.stage.boss { background: linear-gradient(90deg, rgba(120, 30, 40, .9), rgba(30, 12, 24, .9)); border-color: rgba(255, 120, 120, .5); }
.st-id { font-size: 20px; font-weight: 900; color: var(--glow); width: 44px; }
.boss .st-id { color: #ff8a8a; }
.st-main { flex: 1; display: flex; flex-direction: column; }
.st-main b { font-size: 16px; }
.st-main small, .st-right small { color: var(--muted); font-size: 11px; }
.st-main em { color: #ff6a6a; font-style: normal; font-weight: 800; }
.st-right { display: flex; flex-direction: column; align-items: flex-end; }
.stars { color: var(--gold); font-size: 18px; letter-spacing: 1px; text-shadow: 0 0 6px rgba(255, 200, 60, .6); }
.stars i { color: rgba(255, 255, 255, .2); font-style: normal; text-shadow: none; }

/* ---------- modal ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 10px; animation: fade .15s; }
@keyframes fade { from { opacity: 0; } }
.modal {
  background: linear-gradient(180deg, rgba(20, 32, 66, .97), rgba(10, 16, 36, .97)); border: 1px solid var(--line);
  border-radius: 16px; padding: 14px 18px; width: min(560px, 96vw); max-height: 94vh; overflow-y: auto; touch-action: pan-y;
  box-shadow: 0 0 30px rgba(95, 208, 255, .25), 0 10px 40px rgba(0, 0, 0, .6); animation: pop .2s;
}
.modal.wide { width: min(860px, 96vw); }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }
.modal h3 { margin: 0 0 8px; font-size: 20px; }
.modal h4 { margin: 6px 0 4px; font-size: 13px; color: var(--glow); font-weight: 600; letter-spacing: .5px; }
.center { text-align: center; }
.modal-btns { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin-top: 10px; }
.btn {
  padding: 9px 18px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--line); font-weight: 600; font-size: 15px;
  display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; transition: transform .1s;
}
.btn small { font-size: 11px; color: var(--muted); font-weight: 400; }
.btn:active:not(:disabled) { transform: scale(.95); }
.btn.primary { background: linear-gradient(180deg, #3aa0ff, #1a5ad0); border-color: #8fd0ff; box-shadow: 0 0 12px rgba(60, 160, 255, .5); }
.btn.primary small { color: #dbeaff; }
.btn.danger { background: linear-gradient(180deg, #c83a4a, #7a1a2a); border-color: #ff9aa8; }
.tip { color: var(--muted); font-size: 12px; margin: 6px 0; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); border: 1px solid var(--line); font-size: 12px; margin: 2px; }
.chip.boss { border-color: #ff7a7a; color: #ffb0b0; }
.prep { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cond { margin: 0; padding-left: 0; list-style: none; font-size: 13px; color: var(--muted); }
.cond li.ok { color: var(--gold); }
.mini-party { display: flex; gap: 6px; flex-wrap: wrap; }
.mini { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .06); border-radius: 10px; padding: 4px 8px 4px 4px; border-left: 3px solid var(--el); }
.mini img { width: 36px; height: 36px; border-radius: 8px; }
.mini span { display: flex; flex-direction: column; font-size: 13px; line-height: 1.1; }
.mini small { color: var(--muted); font-size: 11px; }
.mini em { color: #7dffa0; font-style: normal; font-weight: 800; }

/* ---------- ตัวละคร / ทีม ---------- */
.party { flex: 1; display: flex; flex-direction: column; min-height: 0; padding-bottom: calc(8px + var(--safe-b)); }
.party-slots { display: flex; gap: 8px; align-items: stretch; }
.slot {
  position: relative; flex: 1; display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 12px; text-align: left;
  background: linear-gradient(135deg, rgba(30, 50, 100, .9), rgba(12, 20, 44, .9)); border: 2px solid rgba(255, 255, 255, .12); min-height: 64px;
}
.slot img { width: 50px; height: 50px; border-radius: 10px; border: 2px solid var(--el); }
.slot div { display: flex; flex-direction: column; line-height: 1.15; }
.slot small { color: var(--muted); font-size: 11px; }
.slot.sel { border-color: var(--glow); box-shadow: 0 0 12px rgba(95, 208, 255, .6); }
.slot.empty { justify-content: center; color: var(--muted); border-style: dashed; }
.slot .leader { position: absolute; top: -6px; left: 8px; background: var(--gold); color: #3a2a00; font-size: 10px; padding: 0 6px; border-radius: 6px; font-style: normal; font-weight: 800; }
.slot .x { position: absolute; top: 4px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .4); display: flex; align-items: center; justify-content: center; font-size: 12px; }
.power { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 0 10px; font-size: 11px; color: var(--muted); }
.power b { font-size: 20px; color: var(--gold); }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; align-content: start; flex: 1; min-height: 0; padding: 2px 4px 4px 0; }
.char-grid.full { padding-bottom: calc(10px + var(--safe-b)); }
.ccard {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(30, 50, 100, .9), rgba(12, 20, 44, .95)); border: 2px solid rgba(255, 255, 255, .1); transition: transform .1s;
}
.ccard:active { transform: scale(.95); }
.ccard.r5 { border-color: rgba(255, 211, 77, .7); box-shadow: 0 0 10px rgba(255, 211, 77, .25); }
.ccard.r4 { border-color: rgba(197, 139, 255, .6); }
.ccard img { width: 64px; height: 64px; border-radius: 10px; }
.ccard b { font-size: 14px; }
.ccard small { color: var(--muted); font-size: 11px; }
.ccard .el { position: absolute; top: 4px; left: 6px; font-size: 14px; }
.ccard em { position: absolute; top: 4px; right: 4px; background: var(--glow); color: #00223a; font-size: 9px; padding: 0 4px; border-radius: 5px; font-style: normal; font-weight: 800; }
.ccard.inparty { outline: 2px solid var(--glow); outline-offset: -2px; }
.ccard.locked { opacity: .35; filter: grayscale(1) brightness(.4); }
.rar { font-size: 11px; letter-spacing: -1px; }
.rar.r5 { color: var(--gold); }
.rar.r4 { color: #c58bff; }
.rar.r3 { color: #9fc2dd; }
.rname { font-weight: 800; font-size: 12px; color: var(--muted); }

.detail { display: flex; gap: 14px; }
.detail-art { width: 38%; flex-shrink: 0; align-self: flex-start; position: sticky; top: 0; border-radius: 14px; background: radial-gradient(circle at 50% 60%, var(--el), transparent 70%), rgba(0, 0, 0, .25); display: flex; align-items: flex-end; justify-content: center; }
.detail-art canvas { width: 100%; max-width: 260px; aspect-ratio: 1; }
.detail-info { flex: 1; min-width: 0; }
.detail-info h3 { display: flex; flex-direction: column; font-size: 26px; line-height: 1.1; margin: 2px 0 6px; }
.detail-info h3 small { font-size: 13px; color: var(--muted); font-weight: 400; }
.tags { margin-bottom: 6px; }
.lv { font-size: 14px; }
.lv b { font-size: 22px; }
.lv small { color: var(--muted); font-size: 11px; }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.stats span { background: rgba(255, 255, 255, .06); border-radius: 8px; padding: 4px 8px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; }
.stats b { color: var(--text); font-size: 16px; }
.skill { background: rgba(255, 255, 255, .05); border-left: 3px solid var(--el); border-radius: 6px; padding: 5px 8px; margin-bottom: 5px; font-size: 13px; }
.skill em { color: var(--glow); font-style: normal; font-size: 11px; }
.skill small { display: block; color: var(--muted); font-size: 12px; }
.bar { height: 6px; background: rgba(0, 0, 0, .5); border-radius: 4px; overflow: hidden; margin: 2px 0; }
.bar i { display: block; height: 100%; width: 100%; transition: width .15s; }
.bar.exp i { background: linear-gradient(90deg, #5fd0ff, #b0f0ff); }

/* ---------- สเกาท์ ---------- */
.scout { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-bottom: calc(10px + var(--safe-b)); }
.banner {
  flex: 1; min-height: 0; border-radius: 16px; display: flex; align-items: center; gap: 12px; padding: 12px 18px; overflow: hidden;
  background: radial-gradient(circle at 75% 50%, rgba(255, 210, 100, .35), transparent 60%), linear-gradient(135deg, #2a1a5a, #0e1a40 60%, #3a1a3a);
  border: 1px solid rgba(255, 210, 120, .45); box-shadow: inset 0 0 40px rgba(255, 200, 100, .15);
}
.banner-txt { flex: 1; }
.banner-txt small { letter-spacing: 4px; color: var(--gold); font-size: 11px; }
.banner-txt h3 { margin: 0; font-size: clamp(20px, 6vh, 34px); font-weight: 900; font-style: italic; }
.banner-txt p { margin: 4px 0 0; color: #dfe4ff; font-size: 12px; }
.feat { display: flex; gap: 8px; }
.fc { display: flex; flex-direction: column; align-items: center; font-size: 12px; font-weight: 600; }
.fc img { width: clamp(52px, 17vh, 96px); height: clamp(52px, 17vh, 96px); border-radius: 12px; border: 2px solid var(--gold); box-shadow: 0 0 14px var(--el); }
.scout-btns { display: flex; gap: 10px; justify-content: center; }
.scout-btn { min-width: 200px; font-size: 18px; font-weight: 800; padding: 10px 20px; }
.pull-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pull-grid.one { grid-template-columns: 160px; justify-content: center; }
.pull {
  display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 12px; position: relative;
  background: linear-gradient(180deg, rgba(40, 60, 110, .95), rgba(12, 20, 44, .95)); border: 2px solid rgba(255, 255, 255, .15);
  animation: flip .5s backwards;
}
@keyframes flip { from { transform: rotateY(90deg) scale(.6); opacity: 0; } }
.pull img { width: 100%; max-width: 90px; border-radius: 10px; }
.pull b { font-size: 13px; }
.pull em { font-size: 10px; font-style: normal; color: var(--muted); }
.pull em.new { color: #ff5a8a; font-weight: 800; }
.pull.r5 { border-color: var(--gold); box-shadow: 0 0 20px rgba(255, 211, 77, .7); background: linear-gradient(180deg, rgba(120, 90, 20, .95), rgba(40, 24, 10, .95)); }
.pull.r4 { border-color: #c58bff; box-shadow: 0 0 12px rgba(197, 139, 255, .5); }

/* ---------- ผลการต่อสู้ ---------- */
.result h2 { text-align: center; margin: 0; font-size: 34px; font-weight: 900; font-style: italic; }
.result.win h2 { color: var(--gold); text-shadow: 0 0 16px rgba(255, 210, 80, .7); }
.result.lose h2 { color: #ff8a8a; }
.result .tip { text-align: center; }
.big-stars { text-align: center; font-size: 44px; line-height: 1; }
.big-stars span { color: rgba(255, 255, 255, .15); display: inline-block; }
.big-stars span.on { color: var(--gold); text-shadow: 0 0 14px rgba(255, 200, 60, .9); animation: star .4s backwards; }
@keyframes star { from { transform: scale(3) rotate(-40deg); opacity: 0; } }
.res-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; }
.res-grid small { color: var(--muted); font-size: 12px; }
.rewards { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rewards span { background: rgba(255, 255, 255, .07); padding: 3px 10px; border-radius: 10px; font-weight: 600; }
.rewards .gem { color: #9fe0ff; }
.settings { display: flex; gap: 8px; flex-wrap: wrap; }
.help { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px; }
.help ul { margin: 0; padding-left: 18px; color: #d8e2f5; }
.help li { margin: 2px 0; }
.help i { color: #7affd4; font-style: normal; font-weight: 800; }
.help-wide { grid-column: span 2; color: var(--muted); font-size: 12px; }
.toast {
  position: fixed; left: 50%; top: 18%; transform: translateX(-50%); z-index: 99; background: rgba(10, 20, 50, .95);
  border: 1px solid var(--glow); padding: 8px 20px; border-radius: 22px; font-weight: 600; animation: toast 2.2s forwards; pointer-events: none;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ---------- HUD ต่อสู้ ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; touch-action: none; }
#hud button { pointer-events: auto; touch-action: none; }
#party-bar { position: absolute; top: 8px; left: calc(8px + var(--safe-l)); display: flex; gap: 6px; }
.pm {
  position: relative; display: flex; align-items: center; gap: 6px; width: clamp(118px, 17vw, 170px); padding: 4px 6px 4px 4px; border-radius: 10px;
  background: rgba(8, 14, 34, .78); border: 2px solid rgba(255, 255, 255, .15); text-align: left; transition: transform .1s;
}
.pm img { width: clamp(30px, 8vh, 42px); height: clamp(30px, 8vh, 42px); border-radius: 8px; border: 2px solid var(--el); flex-shrink: 0; }
.pm-info { flex: 1; min-width: 0; }
.pm-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.1; }
.pm-name small { color: var(--muted); font-weight: 400; }
.pm .bar { height: 5px; margin: 2px 0 0; }
.pm .bar.hp i { background: linear-gradient(90deg, #3fdc6a, #9affb0); transition: none; }
.pm .bar.hp.low i { background: linear-gradient(90deg, #ff4a4a, #ff9a6a); }
.pm .bar.sp i { background: linear-gradient(90deg, #3fa0ff, #9fe0ff); transition: none; }
.pm.active { border-color: var(--glow); box-shadow: 0 0 10px rgba(95, 208, 255, .7); transform: translateY(2px); }
.pm.dead { filter: grayscale(1) brightness(.5); }
.pm-cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 900; color: #fff; text-shadow: 0 0 4px #000; pointer-events: none; }
.pm.cool:not(.active) { opacity: .65; }
#hud-right { position: absolute; top: 8px; right: calc(8px + var(--safe-r)); display: flex; gap: 6px; align-items: center; }
.hud-info { display: flex; flex-direction: column; align-items: flex-end; font-size: 12px; font-weight: 600; text-shadow: 0 1px 3px #000; margin-right: 4px; }
.hud-btn { height: 36px; min-width: 44px; padding: 0 10px; border-radius: 10px; background: rgba(8, 14, 34, .78); border: 1px solid var(--line); font-weight: 800; font-size: 13px; }
.hud-btn.on { background: linear-gradient(180deg, #3aa0ff, #1a5ad0); border-color: #8fd0ff; box-shadow: 0 0 10px rgba(60, 160, 255, .7); }

.ctl {
  position: absolute; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 35%, rgba(70, 110, 190, .55), rgba(10, 20, 50, .6)); border: 2px solid rgba(160, 210, 255, .45);
  font-weight: 900; color: #fff; text-shadow: 0 1px 3px #000; backdrop-filter: blur(2px); transition: transform .05s;
}
.ctl.down { transform: scale(.9); background: radial-gradient(circle at 50% 35%, rgba(120, 190, 255, .8), rgba(30, 60, 140, .7)); }
#joy {
  position: absolute; left: calc(18px + var(--safe-l)); bottom: calc(16px + var(--safe-b)); width: calc(var(--btn) * 2); height: calc(var(--btn) * 2);
  border-radius: 50%; pointer-events: auto; touch-action: none;
  background: radial-gradient(circle, rgba(70, 110, 190, .25), rgba(10, 20, 50, .45)); border: 2px solid rgba(160, 210, 255, .35);
}
#joy::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; border: 1px dashed rgba(160, 210, 255, .25); }
#joy .knob {
  position: absolute; left: 50%; top: 50%; width: calc(var(--btn) * .85); height: calc(var(--btn) * .85); margin: calc(var(--btn) * -.425);
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(170, 215, 255, .9), rgba(50, 90, 170, .85));
  border: 2px solid rgba(220, 240, 255, .7); box-shadow: 0 4px 12px rgba(0, 0, 0, .4); pointer-events: none;
}
#joy.on { border-color: var(--glow); }
#joy .key { bottom: auto; top: -18px; right: 50%; transform: translateX(50%); }
#pad-right { position: absolute; right: calc(14px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); width: calc(var(--btn) * 3.4); height: calc(var(--btn) * 2.45); }
.ctl.parry { right: calc(var(--btn) * 1.3); bottom: calc(var(--btn) * 1.0); width: calc(var(--btn) * .9); height: calc(var(--btn) * .9); font-size: calc(var(--btn) * .3);
  background: radial-gradient(circle at 50% 35%, rgba(90, 210, 255, .65), rgba(10, 50, 90, .7)); border-color: rgba(150, 235, 255, .7); line-height: 1; }
.ctl.parry small { font-size: calc(var(--btn) * .14); font-weight: 800; }
.ctl.atk { right: 0; bottom: 0; width: calc(var(--btn) * 1.3); height: calc(var(--btn) * 1.3); font-size: calc(var(--btn) * .3);
  background: radial-gradient(circle at 50% 35%, rgba(255, 120, 90, .7), rgba(90, 20, 20, .7)); border-color: rgba(255, 180, 160, .6); }
.ctl.dodge { right: calc(var(--btn) * 1.45); bottom: 0; width: calc(var(--btn) * .85); height: calc(var(--btn) * .85); font-size: calc(var(--btn) * .17); }
.ctl.skill { width: calc(var(--btn) * .98); height: calc(var(--btn) * .98); font-size: calc(var(--btn) * .15); line-height: 1.05; padding: 4px; opacity: .55;
  border-color: color-mix(in srgb, var(--el, #8fd0ff) 70%, transparent); }
.ctl.skill.ready { opacity: 1; box-shadow: 0 0 14px var(--el, #8fd0ff); animation: ready 1.2s infinite; }
@keyframes ready { 50% { box-shadow: 0 0 22px var(--el, #8fd0ff); } }
#btn-s1 { right: calc(var(--btn) * .1); bottom: calc(var(--btn) * 1.42); }
#btn-s2 { right: calc(var(--btn) * 2.4); bottom: calc(var(--btn) * .55); }
.ctl .sname { font-size: 1em; font-weight: 800; text-align: center; }
.ctl .scost { font-size: .85em; color: #bfe8ff; font-weight: 600; }
.key { display: none; position: absolute; bottom: -2px; right: 2px; font-size: 10px; font-weight: 800; background: rgba(0, 0, 0, .6); border-radius: 4px; padding: 0 4px; color: #ffe27a; }
.pm .key { display: none; top: 2px; bottom: auto; right: 4px; }
body:not(.touch) .key { display: block; }

/* ---------- ตัวเอก ---------- */
.home-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.gender-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 20px; font-size: 20px; font-weight: 800;
  background: var(--panel2); border: 1px solid var(--line);
}
.gender-btn.m { color: #7ab8ff; }
.gender-btn.f { color: #ff8fc0; }
.gender-btn small { font-size: 12px; color: var(--text); font-weight: 600; }
.gender-btn:active { transform: scale(.95); }
.pts-badge { padding: 5px 12px; border-radius: 20px; background: linear-gradient(90deg, #2fbf71, #7dffa0); color: #00331a; font-weight: 800; font-size: 13px; animation: pulse 1.4s infinite; }
.hero-wrap { flex: 1; display: flex; gap: 12px; min-height: 0; padding-bottom: calc(8px + var(--safe-b)); }
.hero-side { width: clamp(150px, 26vw, 260px); display: flex; flex-direction: column; align-items: center; gap: 6px; flex-shrink: 0; }
.hero-art { width: 100%; border-radius: 14px; background: radial-gradient(circle at 50% 65%, var(--el), transparent 70%), rgba(0, 0, 0, .25); display: flex; justify-content: center; }
.hero-art canvas { width: 100%; max-width: 240px; aspect-ratio: 1; }
.hero-name { display: flex; align-items: baseline; gap: 6px; font-size: 18px; }
.hero-name small { color: var(--muted); font-size: 12px; }
.link { color: var(--glow); font-size: 15px; }
.hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.hero-body { flex: 1; min-height: 0; padding-right: 4px; }
.tabs-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs-row.small { margin: 8px 0 6px; }
.pill { padding: 5px 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); font-weight: 600; font-size: 14px; }
.tabs-row.small .pill { padding: 3px 10px; font-size: 12px; }
.pill.on { background: linear-gradient(180deg, #3aa0ff, #1a5ad0); border-color: #8fd0ff; }
.pill em { font-style: normal; background: #2fbf71; color: #00331a; border-radius: 9px; padding: 0 6px; font-size: 11px; font-weight: 800; }
.btn.sm { padding: 5px 12px; font-size: 13px; }
.train-row { display: flex; gap: 6px; margin: 6px 0; flex-wrap: wrap; }
.pts-head { display: flex; justify-content: space-between; align-items: center; margin: 6px 0; font-size: 14px; }
.pts-head b { color: #7dffa0; font-size: 20px; }
.stat-rows { display: flex; flex-direction: column; gap: 5px; }
.stat-row { display: flex; align-items: center; gap: 6px; background: rgba(255, 255, 255, .05); border-radius: 10px; padding: 5px 8px; }
.sr-name { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.sr-name b { color: var(--glow); font-size: 15px; }
.sr-name small { color: var(--muted); font-size: 11px; }
.sr-val { font-size: 20px; font-weight: 800; min-width: 38px; text-align: right; }
.sbtn { width: 36px; height: 32px; border-radius: 8px; background: var(--panel2); border: 1px solid var(--line); font-weight: 800; font-size: 14px; }
.sbtn:active:not(:disabled) { transform: scale(.9); }
.stats.derived { grid-template-columns: repeat(4, 1fr); }
.wdetail { display: flex; gap: 12px; background: rgba(255, 255, 255, .04); border-radius: 12px; padding: 8px; border-left: 3px solid var(--el); }
.wdetail > img { width: 96px; height: 96px; border-radius: 12px; flex-shrink: 0; }
.wdetail h3 { margin: 0 0 4px; font-size: 20px; }
.wdetail .modal-btns { justify-content: flex-start; margin-top: 4px; }
.refine { color: #7dffa0; font-weight: 800; }
.combo-desc { font-size: 12px; color: #d8e2f5; margin: 4px 0; }
.item-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 7px; padding-bottom: 6px; }
.icard {
  position: relative; display: flex; flex-direction: column; align-items: center; padding: 5px 4px; border-radius: 12px; text-align: center;
  background: linear-gradient(180deg, rgba(30, 50, 100, .9), rgba(12, 20, 44, .95)); border: 2px solid rgba(255, 255, 255, .1); line-height: 1.15;
}
.icard img, .none-ic { width: 60px; height: 60px; border-radius: 10px; }
.none-ic { display: flex; align-items: center; justify-content: center; font-size: 24px; background: rgba(255, 255, 255, .06); }
.icard b { font-size: 11px; margin-top: 2px; }
.icard small { color: var(--muted); font-size: 10px; }
.icard.r5 { border-color: rgba(255, 211, 77, .6); }
.icard.r4 { border-color: rgba(197, 139, 255, .5); }
.icard.sel { outline: 2px solid var(--glow); outline-offset: -2px; box-shadow: 0 0 10px rgba(95, 208, 255, .5); }
.icard em { position: absolute; top: 3px; right: 3px; background: var(--glow); color: #00223a; font-size: 9px; padding: 0 4px; border-radius: 5px; font-style: normal; font-weight: 800; }
.icard.locked { opacity: .35; filter: grayscale(1) brightness(.5); }
.banner.fashion { background: radial-gradient(circle at 75% 50%, rgba(255, 140, 200, .35), transparent 60%), linear-gradient(135deg, #4a1a4a, #1a1440 60%, #3a1a3a); border-color: rgba(255, 160, 210, .45); }
.fc img { border-radius: 12px; }
.pull small { color: var(--muted); font-size: 10px; }
.create { display: flex; gap: 12px; justify-content: center; }
.create-card { display: flex; flex-direction: column; align-items: center; padding: 6px; border-radius: 14px; background: var(--panel); border: 2px solid rgba(255, 255, 255, .12); }
.create-card canvas { width: clamp(120px, 30vh, 200px); aspect-ratio: 1; }
.create-card b { font-size: 18px; }
.create-card.sel { border-color: var(--glow); box-shadow: 0 0 16px rgba(95, 208, 255, .6); }
.name-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; font-weight: 600; }
.name-row input { font: inherit; padding: 6px 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); color: var(--text); width: 180px; user-select: text; -webkit-user-select: text; }
.hero-mini { position: relative; padding-right: 50px; }
.hero-mini .wicon { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 8px; }
.lvup { color: #7dffa0; font-weight: 800; margin: 6px 0 0; }
.pm.hero { width: clamp(200px, 28vw, 300px); }
.pm-nums { display: flex; justify-content: space-between; font-size: 10px; color: #d8e2f5; margin-top: 1px; }

/* ---------- สไตล์พิกเซล ---------- */
img, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#game { image-rendering: pixelated; }
.logo, .logo-sm, .st-id, .result h2, .hud-btn, .ctl.atk, .ctl.dodge, .banner-txt small, .rname, .big-stars {
  font-family: 'Press Start 2P', 'Kanit', sans-serif; font-style: normal;
}
.logo { font-size: clamp(22px, 6.5vh, 46px); line-height: 1.15; letter-spacing: 0; }
.logo-sm { font-size: 11px; letter-spacing: 1px; }
.st-id { font-size: 13px; }
.result h2 { font-size: clamp(18px, 4.5vh, 28px); line-height: 1.4; }
.hud-btn { font-size: 10px; }
.ctl.atk { font-size: calc(var(--btn) * .2); }
.ctl.dodge { font-size: calc(var(--btn) * .11); }
.stage, .menu-btn, .modal, .icard, .pm, .tab, .banner { border-radius: 6px; }
.btn, .pill { border-radius: 6px; }
.icard img, .ccard img, .pm img, .mini img, .wdetail > img, .fc img, .pull img { border-radius: 4px; }

/* ---------- แนวตั้ง ---------- */
#rotate { display: none; }
@media (orientation: portrait) and (pointer: coarse) {
  #rotate { display: flex; position: fixed; inset: 0; z-index: 200; background: var(--bg); align-items: center; justify-content: center; text-align: center; font-size: 48px; }
  #rotate p { font-size: 18px; margin: 10px 20px; }
}

/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 430px) {
  .topbar { min-height: 44px; padding: 4px 0; }
  .cur span { font-size: 12px; padding: 2px 8px; }
  .btn-back, .icon-btn { width: 34px; height: 34px; }
  .modal { padding: 10px 14px; }
  .detail-art canvas { max-width: 180px; }
  .stage { padding: 6px 12px; }
  .pull { padding: 3px; }
  .pull img { max-width: 44px; }
  .pull-grid { gap: 5px; }
  .modal h3 { font-size: 17px; margin-bottom: 4px; }
  .modal-btns { margin-top: 6px; }
  .scout-btn { min-width: 160px; font-size: 15px; }
  .slot img { width: 40px; height: 40px; }
  .slot { min-height: 52px; }
  .char-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); }
  .ccard img { width: 50px; height: 50px; }
  .big-stars { font-size: 34px; }
  .hero-side { width: 150px; }
  .hero-art canvas { max-width: 140px; }
  .icard img, .none-ic { width: 46px; height: 46px; }
  .item-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
  .wdetail > img { width: 64px; height: 64px; }
  .stats.derived { grid-template-columns: repeat(4, 1fr); }
  .create-card canvas { width: 110px; }
  .result h2 { font-size: 26px; }
}
@media (max-width: 700px) {
  .prep, .res-grid, .help { grid-template-columns: 1fr; }
  .help-wide { grid-column: auto; }
}

/* =====================================================================
   ธีม HD-2D: หน้าต่างโทนมืดอุ่นโปร่งแสง ขอบทองบาง (แนว Octopath / Sea of Stars)
   ===================================================================== */
:root {
  --ink: #f4ead8; --ink-dim: #b8a88f; --ink-mute: #8a7c68;
  --pn: rgba(22, 17, 15, .88); --pn-hi: rgba(46, 37, 31, .9); --pn-deep: rgba(12, 9, 8, .72);
  --pn-line: rgba(214, 178, 112, .42); --pn-line-hi: #e3c07a;
  --gold-1: #ffe6a6; --gold-2: #e2ae4c; --gold-3: #9a6820;
  /* ใช้ร่วมกับ HUD/ปุ่มควบคุม */
  --win-top: #3a2f28; --win-bot: #1a1412; --win-line: #d9b46e; --win-dark: #0a0706;
  --text: var(--ink); --muted: var(--ink-dim); --glow: #ffd27a; --line: var(--pn-line);
}
.modal, .menu-btn, .stage, .tab, .icard, .ccard, .slot, .wdetail, .banner, .create-card, .pull,
.pm, .hud-btn, .skill, .mini, .floor-tabs .tab, .toast, .rewards span, .chip, .opt {
  background: linear-gradient(180deg, var(--pn-hi), var(--pn));
  border: 1px solid var(--pn-line);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .07), 0 6px 18px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
}
.chip, .rewards span, .mini, .skill { box-shadow: none; border-radius: 999px; background: rgba(255, 236, 200, .06); }
.skill { border-radius: 8px; border-left: 3px solid var(--el); }
.mini { border-radius: 10px; border-left: 3px solid var(--el); }
.modal { border-color: rgba(227, 192, 122, .6); padding: 16px 20px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(48, 38, 32, .97), rgba(20, 16, 14, .97));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(255, 236, 200, .05), 0 20px 50px rgba(0, 0, 0, .6); }
.modal h3 { text-shadow: 0 2px 4px rgba(0, 0, 0, .6); }
.modal h4 { color: var(--gold-1); text-shadow: none; }

/* ปุ่ม */
.btn, .pill, .sbtn, .icon-btn, .gender-btn {
  background: linear-gradient(180deg, #45372d, #2a211c);
  border: 1px solid var(--pn-line);
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .12), 0 3px 8px rgba(0, 0, 0, .35);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .7);
  transition: transform .1s, border-color .15s, filter .15s;
}
.btn:hover:not(:disabled), .pill:hover, .sbtn:hover:not(:disabled), .icon-btn:hover, .gender-btn:hover { border-color: var(--pn-line-hi); filter: brightness(1.12); }
.btn:active:not(:disabled), .pill:active, .sbtn:active:not(:disabled) { transform: translateY(1px) scale(.98); }
.btn.primary, .pill.on {
  background: linear-gradient(180deg, var(--gold-1) 0%, var(--gold-2) 55%, var(--gold-3) 100%);
  color: #2e1800; text-shadow: 0 1px 0 rgba(255, 244, 214, .6); border-color: #fff1c8;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 4px 14px rgba(226, 174, 76, .35);
}
.btn.primary small { color: #5a3400; }
.btn.danger { background: linear-gradient(180deg, #c8484e, #7a1c24); }
.btn.ghost { background: rgba(255, 236, 200, .05); box-shadow: none; }
.pill { border-radius: 999px; }
.pill.on em { background: #2a1400; color: #7dffa0; }
.btn small svg { width: 12px; height: 12px; vertical-align: -1px; }

/* เมนูหลัก + เคอร์เซอร์ชี้ */
.menu-btn { position: relative; overflow: visible; border-radius: 12px; }
.menu-btn.big { background: radial-gradient(ellipse at 85% 50%, rgba(255, 210, 120, .22), transparent 60%), linear-gradient(180deg, #4a3a2e, #1e1714); border-color: rgba(227, 192, 122, .6); }
.menu-btn.gold { background: linear-gradient(180deg, #8a5a1a, #3a2008); border-color: var(--gold-1); }
.menu-btn b, .stage b { letter-spacing: .3px; }
.menu-btn small { color: var(--ink-dim); }
.menu-btn:hover, .stage:hover:not(:disabled), .icard:hover, .tab:hover:not(:disabled), .opt:hover { border-color: var(--pn-line-hi); filter: brightness(1.12); }
.menu-btn:hover::before, .stage:hover:not(:disabled)::before {
  content: '▶'; position: absolute; left: -22px; top: 50%; transform: translateY(-50%);
  color: var(--gold-1); font-size: 16px; text-shadow: 0 2px 0 #000; animation: cursor .6s steps(2) infinite;
}
@keyframes cursor { 50% { margin-left: -4px; } }
.stage { position: relative; }
.stage.boss { background: linear-gradient(180deg, #6a2028, #2a0c10); border-color: rgba(255, 170, 150, .6); }
.st-id { color: var(--gold-1); }
.tab small, .st-main small, .st-right small { color: var(--ink-dim); }
.tab.on { background: linear-gradient(180deg, #5a4630, #2a2018); border-color: var(--gold-1); box-shadow: 0 0 14px rgba(255, 210, 120, .3); }
.icard.sel, .create-card.sel, .slot.sel, .opt.on { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-1), 0 0 16px rgba(255, 210, 120, .45); outline: none; }
.icard.r5, .pull.r5 { border-color: rgba(255, 214, 120, .8); }
.icard.r4, .pull.r4 { border-color: rgba(206, 160, 255, .7); }
.icard em, .ccard em { background: var(--gold-2); color: #2a1400; text-shadow: none; border-radius: 999px; padding: 1px 6px; }
.banner.weapon { background: radial-gradient(circle at 75% 50%, rgba(255, 210, 100, .3), transparent 60%), linear-gradient(180deg, #3a2c22, #140f0c); }
.banner.fashion { background: radial-gradient(circle at 75% 50%, rgba(255, 150, 190, .3), transparent 60%), linear-gradient(180deg, #3a2430, #140c12); }
.screens:not(.screen-home):not(.screen-battle):not(.screen-town):not(.screen-login) {
  background: radial-gradient(ellipse 90% 80% at 50% 45%, rgba(14, 10, 8, .35), rgba(8, 6, 5, .8));
}
.logo { text-shadow: 3px 3px 0 #3a2410, -2px -2px 0 #3a2410, 2px -2px 0 #3a2410, -2px 2px 0 #3a2410, 0 6px 0 #1a0e04, 0 0 24px rgba(255, 210, 140, .45); }
.logo b { text-shadow: 3px 3px 0 #6a3a08, -2px -2px 0 #6a3a08, 2px -2px 0 #6a3a08, -2px 2px 0 #6a3a08, 0 6px 0 #3a1c00, 0 0 24px rgba(255, 200, 80, .6); }
.logo-sm { color: var(--gold-1); text-shadow: 0 0 10px rgba(255, 210, 120, .5); }
.toast { font-weight: 600; border-radius: 999px; border-color: var(--pn-line-hi); }
.modal-bg { background: rgba(6, 4, 3, .6); backdrop-filter: blur(2px); }
.bar { background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .08); }
.bar.exp i { background: linear-gradient(90deg, #e2ae4c, #ffe6a6); box-shadow: 0 0 8px rgba(255, 214, 120, .5); }
.tip { color: var(--ink-dim); }
.rar.r3 { color: #c9b8a0; }

/* ---------- แถบบน: ปุ่มกลับ + ค่าเงิน (แบบโมเดิร์น) ---------- */
.topbar { gap: 12px; padding: 10px 2px 8px; }
.topbar h2 { display: flex; align-items: center; gap: 10px; font-size: clamp(18px, 3.6vh, 24px); color: var(--ink);
  text-shadow: 0 2px 6px rgba(0, 0, 0, .7); }
.topbar h2::before { content: ''; width: 4px; height: 1.1em; border-radius: 2px; background: linear-gradient(180deg, var(--gold-1), var(--gold-3)); box-shadow: 0 0 8px rgba(255, 210, 120, .6); }
.btn-back {
  width: auto; height: 38px; padding: 0 14px 0 8px; display: inline-flex; align-items: center; gap: 2px;
  border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ink);
  background: rgba(16, 12, 10, .62); border: 1px solid rgba(255, 236, 200, .16);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .15s, border-color .15s, transform .1s;
}
.btn-back svg { width: 20px; height: 20px; color: var(--gold-1); transition: transform .15s; }
.btn-back:hover { background: rgba(40, 30, 24, .8); border-color: var(--pn-line-hi); }
.btn-back:hover svg { transform: translateX(-2px); }
.btn-back:active { transform: scale(.96); }
.icon-btn { border-radius: 999px; background: rgba(16, 12, 10, .62); border: 1px solid rgba(255, 236, 200, .16); backdrop-filter: blur(8px); color: var(--gold-1); }
.cur { display: flex; gap: 8px; }
.cur-item {
  display: flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px 0 4px; border-radius: 999px;
  background: rgba(16, 12, 10, .62); border: 1px solid rgba(255, 236, 200, .14);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .06);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.cur-item i { width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.cur-item.gem i { background: radial-gradient(circle at 35% 30%, rgba(120, 220, 255, .45), rgba(20, 90, 140, .35)); box-shadow: inset 0 0 0 1px rgba(140, 220, 255, .35); }
.cur-item.coin i { background: radial-gradient(circle at 35% 30%, rgba(255, 220, 120, .45), rgba(140, 80, 10, .35)); box-shadow: inset 0 0 0 1px rgba(255, 210, 120, .35); }
.cur-item svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); }
.cur-item b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .3px; color: var(--ink); min-width: 3ch; text-align: right; }

/* ---------- หน้าตัวเอก ---------- */
.hero-wrap { gap: 14px; }
.hero-side { width: clamp(170px, 26vw, 290px); gap: 8px; }
.hero-stage {
  position: relative; width: 100%; flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  border-radius: 14px; overflow: hidden; border: 1px solid var(--pn-line);
  background:
    radial-gradient(ellipse 60% 12% at 50% 74%, rgba(0, 0, 0, .55), transparent 70%),
    radial-gradient(ellipse 80% 55% at 50% 62%, color-mix(in srgb, var(--el) 38%, transparent), transparent 70%),
    linear-gradient(180deg, rgba(46, 37, 31, .82), rgba(14, 11, 10, .94));
  box-shadow: inset 0 1px 0 rgba(255, 236, 200, .08), 0 8px 24px rgba(0, 0, 0, .4);
}
/* เส้นแสงพาดเฉียงจางๆ */
.hero-stage::before { content: ''; position: absolute; inset: -20% 30% 40% -10%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(255, 236, 200, .07), transparent); pointer-events: none; }
.hero-stage canvas { width: 100%; max-width: 280px; aspect-ratio: 300 / 380; margin-top: 18px; position: relative; flex-shrink: 1; min-height: 0; object-fit: contain; }
.hs-top { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; justify-content: space-between; gap: 6px; z-index: 1; }
.hs-badge { font-size: 12px; padding: 2px 10px; border-radius: 999px; background: rgba(8, 6, 5, .6); border: 1px solid rgba(255, 236, 200, .14); white-space: nowrap; }
.hs-badge.pw b { color: var(--gold-1); font-variant-numeric: tabular-nums; }
.hs-plate { position: relative; width: 100%; padding: 8px 12px 10px; background: linear-gradient(180deg, transparent, rgba(8, 6, 5, .75) 35%); }
.hs-name { display: flex; align-items: center; gap: 8px; }
.hs-name b { font-size: 18px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 4px #000; }
.hs-lv { font-size: 12px; font-weight: 800; padding: 1px 8px; border-radius: 6px; color: #2e1800; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.hs-edit { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--ink-dim); background: rgba(255, 236, 200, .06); }
.hs-edit:hover { color: var(--gold-1); background: rgba(255, 236, 200, .12); }
.hs-edit svg { width: 15px; height: 15px; }
.hs-plate .bar { height: 4px; margin: 6px 0 4px; }
.hs-plate small { color: var(--ink-dim); font-size: 12px; }
.hero-side .gender-btn { width: 100%; justify-content: center; border-radius: 10px; }
.gender-btn small { color: var(--ink); }

.hero-main { gap: 10px; }
.seg-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: var(--pn-deep); border: 1px solid rgba(255, 236, 200, .1); backdrop-filter: blur(8px); flex-shrink: 0; }
.seg {
  position: relative; flex: 1; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 10px; border-radius: 9px;
  color: var(--ink-dim); font-weight: 600; font-size: 14px; transition: background .15s, color .15s;
}
.seg svg { width: 18px; height: 18px; flex-shrink: 0; }
.seg:hover { color: var(--ink); background: rgba(255, 236, 200, .05); }
.seg.on { color: var(--gold-1); background: linear-gradient(180deg, #4e3e30, #2a211b); box-shadow: inset 0 0 0 1px rgba(255, 214, 140, .45), 0 3px 10px rgba(0, 0, 0, .4); }
.seg.on::after { content: ''; position: absolute; left: 30%; right: 30%; bottom: 2px; height: 2px; border-radius: 2px; background: var(--gold-1); box-shadow: 0 0 6px var(--gold-2); }
.seg em { font-style: normal; font-size: 11px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: #3fcf78; color: #00301a; }
.hero-body { padding: 12px 14px; border-radius: 12px; background: var(--pn-deep); border: 1px solid rgba(255, 236, 200, .1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.hero-body h4, .sec-h { margin: 12px 0 6px; font-size: 13px; font-weight: 600; color: var(--gold-1); letter-spacing: .5px; display: flex; align-items: center; gap: 8px; text-shadow: none; }
.sec-h::after, .cust h4::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(227, 192, 122, .4), transparent); }

/* แท็บสเตตัส */
.lv-card { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 10px; background: rgba(255, 236, 200, .04); border: 1px solid rgba(255, 236, 200, .08); flex-wrap: wrap; }
.lv-num { display: flex; align-items: baseline; gap: 4px; }
.lv-num small { font-size: 10px; letter-spacing: 2px; color: var(--ink-dim); margin-right: 4px; }
.lv-num b { font-size: 30px; line-height: 1; color: var(--gold-1); font-variant-numeric: tabular-nums; }
.lv-num span { color: var(--ink-mute); font-size: 13px; }
.lv-exp { flex: 1; min-width: 140px; }
.lv-exp .bar { height: 8px; border-radius: 4px; }
.lv-exp small { color: var(--ink-dim); font-size: 11px; }
.train-row { margin: 0; }
.pts-head { margin: 10px 0 8px; }
.pts { font-size: 14px; color: var(--ink-dim); padding: 3px 12px; border-radius: 999px; background: rgba(255, 236, 200, .05); }
.pts b { color: var(--ink); font-size: 18px; margin-left: 4px; }
.pts.has { background: rgba(63, 207, 120, .14); box-shadow: inset 0 0 0 1px rgba(63, 207, 120, .45); color: #bff5d2; }
.pts.has b { color: #7dffa0; }
.stat-rows { gap: 6px; }
.stat-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 236, 200, .035); border: 1px solid rgba(255, 236, 200, .07); }
.stat-row:hover { background: rgba(255, 236, 200, .06); }
.sr-ic { width: 46px; height: 34px; flex-shrink: 0; border-radius: 8px; display: flex; align-items: center; justify-content: center;
  font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--sc);
  background: color-mix(in srgb, var(--sc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 45%, transparent); }
.sr-name { min-width: 0; }
.sr-name b { color: var(--ink); font-size: 14px; }
.sr-name small { color: var(--ink-dim); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-meter { height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .07); margin-top: 4px; overflow: hidden; }
.sr-meter i { display: block; height: 100%; background: var(--sc); box-shadow: 0 0 6px var(--sc); transition: width .2s; }
.sr-val { font-size: 22px; font-weight: 800; min-width: 40px; font-variant-numeric: tabular-nums; }
.sr-btns { display: flex; gap: 4px; }
.sbtn { width: 32px; height: 32px; border-radius: 50%; padding: 0; font-size: 16px; line-height: 1; }
.sbtn.wide { width: 40px; border-radius: 999px; font-size: 13px; }
.sbtn.plus:not(:disabled) { color: #9fffc0; border-color: rgba(63, 207, 120, .5); }
.stats.derived { gap: 6px; margin: 0; }
.stats.derived span { background: rgba(255, 236, 200, .04); border: 1px solid rgba(255, 236, 200, .07); border-radius: 8px; padding: 6px 10px; box-shadow: none; text-shadow: none; color: var(--ink-dim); }
.stats.derived b { font-size: 17px; font-variant-numeric: tabular-nums; }
.stats.derived span.hl { border-color: rgba(227, 192, 122, .45); background: rgba(226, 174, 76, .1); }
.stats.derived span.hl b { color: var(--gold-1); }

/* แท็บอาวุธ / แฟชัน */
.wdetail { padding: 12px; gap: 14px; border-radius: 12px; border-left: 1px solid var(--pn-line);
  background: radial-gradient(ellipse 45% 90% at 0% 50%, color-mix(in srgb, var(--el) 22%, transparent), transparent 70%), linear-gradient(180deg, var(--pn-hi), var(--pn)); }
.wdetail > img { box-shadow: 0 0 0 1px rgba(255, 236, 200, .2), 0 0 18px color-mix(in srgb, var(--el) 45%, transparent); }
.combo-desc { color: var(--ink-dim); }
.skill em { color: var(--gold-1); }
.item-grid { gap: 8px; }
.icard { padding: 6px 4px 7px; overflow: hidden; }
.icard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #8a7c68; }
.icard.r4::after { background: linear-gradient(90deg, #9a6aff, #e0b8ff); }
.icard.r5::after { background: linear-gradient(90deg, var(--gold-2), var(--gold-1), var(--gold-2)); }
.icard img, .none-ic { border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.none-ic { color: var(--ink-dim); }
.icard small { color: var(--ink-dim); }
.tabs-row.small .pill { font-size: 12px; }

/* ปรับแต่งรูปลักษณ์ */
.cust h4 { margin: 12px 0 6px; color: var(--gold-1); font-size: 13px; font-weight: 600; text-shadow: none; display: flex; align-items: center; gap: 8px; }
.cust h4:first-child { margin-top: 2px; }
.opt-row { display: flex; gap: 8px; flex-wrap: wrap; }
.opt { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 5px 6px; width: 78px; box-shadow: 0 3px 8px rgba(0, 0, 0, .3); }
.opt img { width: 64px; height: 64px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.opt span { font-size: 11px; color: var(--ink-dim); }
.opt.on span { color: var(--gold-1); }
.opt:active { transform: translateY(1px); }
.sw-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.swatch {
  position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--c);
  border: 2px solid rgba(10, 7, 6, .9); box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .25), 0 0 0 1px rgba(255, 236, 200, .25);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; text-shadow: 0 1px 2px #000;
  transition: transform .12s;
}
.swatch:hover { transform: scale(1.1); }
.swatch.on { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 2px var(--gold-1), 0 0 10px rgba(255, 220, 120, .7); transform: scale(1.12); }
.swatch.pick { background: conic-gradient(#ff5050, #ffd040, #50ff80, #40c8ff, #a060ff, #ff5050); }
.swatch.pick.on { background: var(--c); }
.swatch.pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

/* ---------- HUD ต่อสู้ ---------- */
.pm.hero { padding: 6px 10px 6px 6px; gap: 8px; width: clamp(220px, 30vw, 320px); }
.pm.hero img { width: clamp(38px, 10vh, 54px); height: clamp(38px, 10vh, 54px); border: 2px solid var(--gold-1); box-shadow: 0 0 0 2px var(--win-dark); border-radius: 6px; }
.pm .bar { height: 8px; border-radius: 0; transform: skewX(-24deg); background: #0e0a08; box-shadow: 0 0 0 1px var(--win-line), 0 0 0 2px var(--win-dark); margin: 4px 4px 0 2px; }
.pm .bar.sp { height: 5px; }
.pm .bar.hp i { background: linear-gradient(180deg, #b8ff70 0%, #52d23a 50%, #2a8a2a 100%); }
.pm .bar.hp.low i { background: linear-gradient(180deg, #ffb070, #ff4a3a 50%, #a01a1a); }
.pm .bar.sp i { background: linear-gradient(180deg, #a0e8ff, #3a9aff 50%, #1a4ab0); }
.pm-name { font-size: 13px; }
.pm-nums { font-family: 'Press Start 2P', monospace; font-size: 7px; margin-top: 4px; }
.hud-btn { font-size: 9px; border-radius: 8px; }
.hud-btn.on { background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 50%, var(--gold-3)); color: #3a1e00; text-shadow: none; }
.hud-btn.danger { color: #ffd2c8; border-color: rgba(255, 120, 100, .55); background: linear-gradient(180deg, rgba(120, 30, 24, .85), rgba(60, 14, 10, .85)); }
.hud-btn.tr-only { white-space: nowrap; }
.hud-info { font-family: 'Press Start 2P', monospace; font-size: 8px; gap: 4px; }
/* แถบปุ่มขวาบนในด่าน (โรงฝึก / AUTO / หยุด): ปุ่มใหญ่ กดง่ายบนมือถือ */
#hud-right { gap: 8px; }
#hud-right .hud-btn { height: 46px; min-width: 58px; padding: 0 14px; font-size: 12px; border-radius: 9px; }
#hud-right #btn-pause { min-width: 50px; font-size: 16px; }
#hud-right .hud-btn.tr-only { font-family: 'Kanit', sans-serif; font-size: 15px; font-weight: 600; }
#hud-right .hud-info { font-size: 10px; gap: 6px; }
@media (max-height: 430px) {
  #hud-right { gap: 6px; }
  #hud-right .hud-btn { height: 40px; min-width: 50px; padding: 0 11px; font-size: 11px; }
  #hud-right #btn-pause { min-width: 44px; font-size: 14px; }
  #hud-right .hud-btn.tr-only { font-size: 13px; }
  #hud-right .hud-info { font-size: 9px; }
}
.ctl {
  background: radial-gradient(circle at 50% 30%, rgba(96, 78, 62, .85), rgba(26, 20, 16, .85) 70%);
  border: 2px solid var(--win-line);
  box-shadow: 0 0 0 2px var(--win-dark), inset 0 0 0 2px rgba(255, 236, 200, .1), 0 4px 0 rgba(0, 0, 0, .4);
  text-shadow: 2px 2px 0 #000; backdrop-filter: none;
}
.ctl.down { background: radial-gradient(circle at 50% 30%, rgba(160, 130, 90, .9), rgba(60, 44, 30, .85) 70%); }
.ctl.atk { background: radial-gradient(circle at 50% 30%, #ff8a5a, #b8282a 60%, #5a0e14); border-color: var(--gold-1); }
.ctl.parry { background: radial-gradient(circle at 50% 30%, #8ae8ff, #2a8ac8 60%, #0c3a6a); }
.ctl.skill { opacity: .6; }
.ctl.skill.ready { opacity: 1; border-color: var(--gold-1); }
.ctl .sname { font-family: 'Press Start 2P', 'Kanit', sans-serif; font-size: .62em; line-height: 1.3; }
#joy { border: 2px solid rgba(227, 192, 122, .6); box-shadow: 0 0 0 2px rgba(10, 7, 6, .5); background: radial-gradient(circle, rgba(70, 56, 44, .3), rgba(12, 9, 8, .5)); }
#joy .knob { background: radial-gradient(circle at 40% 35%, #c8a878, #5a4430 70%); border: 2px solid var(--win-line); }

/* จอเตี้ย (มือถือแนวนอน) */
@media (max-height: 430px) {
  .topbar { padding: 6px 2px 4px; }
  .btn-back { height: 32px; padding: 0 10px 0 4px; font-size: 13px; }
  .cur-item { height: 30px; padding-right: 10px; }
  .cur-item i { width: 22px; height: 22px; }
  .cur-item b { font-size: 13px; }
  .hero-side { width: 165px; }
  .hero-stage canvas { max-width: 140px; margin-top: 22px; }
  .hs-name b { font-size: 15px; }
  .seg { padding: 6px 6px; font-size: 13px; }
  .hero-body { padding: 8px 10px; }
  .lv-card { padding: 6px 10px; gap: 10px; }
  .lv-num b { font-size: 24px; }
  .stat-row { padding: 5px 8px; }
  .sr-name small { display: none; }
  .sbtn { width: 30px; height: 30px; }
  .opt { width: 64px; }
  .opt img { width: 50px; height: 50px; }
  .swatch { width: 26px; height: 26px; }
  .cust h4 { margin: 8px 0 4px; }
}
@media (max-width: 760px) {
  .seg span { display: none; }
  .btn-back span { display: none; }
  .btn-back { padding: 0 8px; }
}

/* ---------- สนามฝึก ---------- */
#train-bar { position: absolute; top: 64px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; align-items: stretch; pointer-events: none; max-width: calc(100vw - 20px); }
#train-bar > * { pointer-events: auto; }
.tb-weapon { display: flex; align-items: center; gap: 7px; padding: 3px 8px 3px 3px; border-radius: 10px; text-align: left;
  background: linear-gradient(180deg, var(--pn-hi), var(--pn)); border: 1px solid var(--pn-line); box-shadow: 0 4px 12px rgba(0, 0, 0, .35); }
.tb-weapon:hover { border-color: var(--pn-line-hi); }
.tb-weapon img { width: 34px; height: 34px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.tb-weapon span { display: flex; flex-direction: column; line-height: 1.1; }
.tb-weapon small { font-size: 9px; color: var(--ink-dim); }
.tb-weapon b { font-size: 12px; white-space: nowrap; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.tb-weapon i { font-style: normal; font-size: 10px; font-weight: 800; color: #2e1800; padding: 1px 7px; border-radius: 999px; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
.tb-meter { display: flex; padding: 3px 4px; border-radius: 10px; background: rgba(12, 9, 8, .74); border: 1px solid rgba(255, 236, 200, .14); backdrop-filter: blur(6px); }
.tb-meter span { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 58px; padding: 0 5px; }
.tb-meter span + span { border-left: 1px solid rgba(255, 236, 200, .1); }
.tb-meter small { font-size: 9px; color: var(--ink-dim); }
.tb-meter b { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--ink); margin-top: 3px; }
.tb-meter .m-dps { color: var(--gold-1); font-size: 12px; }
.tb-opts { display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.tb-opt { font-size: 10px; font-weight: 600; padding: 2px 9px; border-radius: 999px; white-space: nowrap; color: var(--ink-dim);
  background: rgba(12, 9, 8, .74); border: 1px solid rgba(255, 236, 200, .18); }
.tb-opt.on { color: #2e1800; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); border-color: #fff1c8; }
.tb-opt:active { transform: scale(.95); }
.icard em.try { background: #3fcf78; color: #00301a; }
.gender-btn.practice { color: var(--gold-1); }
@media (max-height: 430px) {
  #train-bar { top: 72px; }
  .tb-opts { flex-direction: row; align-items: center; }
  .tb-weapon img { width: 28px; height: 28px; }
  .tb-meter span { min-width: 46px; padding: 0 3px; }
  .tb-meter b { font-size: 8px; }
  .tb-meter .m-dps { font-size: 10px; }
}
@media (max-width: 760px) {
  .tb-weapon span small { display: none; }
  .tb-opts { flex-direction: row; flex-wrap: wrap; max-width: 150px; }
}

/* ---------- เลือกเพศ (แท็บรูปลักษณ์เท่านั้น) ---------- */
.gender-row { display: flex; gap: 10px; flex-wrap: wrap; }
.gender-opt {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 16px 6px 6px; min-width: 190px; border-radius: 12px; text-align: left;
  background: linear-gradient(180deg, var(--pn-hi), var(--pn)); border: 1px solid var(--pn-line); box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  transition: border-color .15s, filter .15s, transform .1s;
}
.gender-opt:hover { border-color: var(--pn-line-hi); filter: brightness(1.1); }
.gender-opt:active { transform: translateY(1px); }
.gender-opt img { width: 54px; height: 54px; border-radius: 8px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .5); }
.gender-opt span { display: flex; flex-direction: column; line-height: 1.2; }
.gender-opt b { font-size: 15px; }
.gender-opt.m b { color: #8fc4ff; }
.gender-opt.f b { color: #ff9ac8; }
.gender-opt small { color: var(--ink-dim); font-size: 12px; }
.gender-opt.on { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-1), 0 0 16px rgba(255, 210, 120, .4); }
.gender-opt em { position: absolute; top: -8px; right: 8px; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 8px; border-radius: 999px; color: #2a1400; background: var(--gold-2); }
@media (max-height: 430px) {
  .gender-opt { min-width: 160px; padding: 4px 12px 4px 4px; }
  .gender-opt img { width: 42px; height: 42px; }
}

/* ---------- HUD มุมซ้ายบน (โมเดิร์น + HD-2D): ป้ายเลเวลแปดเหลี่ยม · ชื่อ · แถบเฉียง HP/SP ---------- */
.pm.hero {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 10px;
  width: clamp(300px, 34vw, 430px); padding: 8px 14px 10px 8px;
  background: none; border: 0; box-shadow: none; border-radius: 0;
  text-shadow: 0 2px 2px rgba(0, 0, 0, .85);
}
/* เงาไล่จางด้านหลัง แทนกรอบทึบ — ยังดูโปร่งใสแต่อ่านง่ายบนฉากสว่าง */
.pm.hero::before {
  content: ''; position: absolute; inset: 0 -50px 0 0; z-index: -1; border-radius: 14px 0 0 14px;
  background: linear-gradient(90deg, rgba(8, 6, 5, .58), rgba(8, 6, 5, .32) 55%, transparent);
}
.pm.hero::after {
  content: ''; position: absolute; left: 62px; right: -10px; top: 33px; height: 1px; z-index: -1;
  background: linear-gradient(90deg, rgba(227, 192, 122, .7), rgba(227, 192, 122, 0));
}
/* ป้ายเลเวล: แปดเหลี่ยมขอบทอง */
.pm-badge {
  --oct: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
  position: relative; width: 52px; height: 52px; flex-shrink: 0; clip-path: var(--oct);
  background: linear-gradient(160deg, #fff1c8, var(--gold-2) 45%, var(--gold-3));
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1;
  filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
}
.pm-badge::before {
  content: ''; position: absolute; inset: 3px; clip-path: var(--oct); z-index: -1;
  background: radial-gradient(circle at 50% 30%, #4a3a2c, #16110e 75%);
}
.pm-badge { z-index: 0; }
.pm-badge small { font-family: 'Press Start 2P', monospace; font-size: 7px; color: var(--gold-2); letter-spacing: 1px; }
.pm-badge b { font-family: 'Press Start 2P', monospace; font-size: 15px; color: var(--gold-1); margin-top: 4px; text-shadow: 0 2px 0 #000; }
.pm-main { flex: 1; min-width: 0; }
.pm-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.pm.hero .pm-name { font-size: clamp(16px, 3.2vh, 21px); font-weight: 800; color: var(--ink); letter-spacing: .4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* แถบเฉียง: กรอบทองบาง + พื้นมืดโปร่ง + ขีดแบ่งทุก 10% */
.pm-bar { position: relative; display: flex; align-items: center; gap: 8px; }
.pm-bar + .pm-bar { margin-top: 5px; }
.pm-track {
  --cut: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  position: relative; flex: 1; height: 16px; clip-path: var(--cut); overflow: hidden;
  background: linear-gradient(180deg, rgba(227, 192, 122, .85), rgba(154, 104, 32, .85));
}
.pm-track::before { content: ''; position: absolute; inset: 1px; clip-path: var(--cut); background: rgba(10, 7, 6, .62); }
.pm-track i { position: absolute; left: 1px; top: 1px; bottom: 1px; display: block; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.pm-track .fill { transition: none; }
.pm-track .fill::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 38%; background: rgba(255, 255, 255, .3); }
.pm-track .ghost { background: #fff3d6; opacity: .75; transition: width .55s cubic-bezier(.3, 0, .3, 1) .35s; }
.pm-bar.hp .fill { background: linear-gradient(90deg, #2a9a3a, #6ae04a 60%, #c8ff7a); box-shadow: 0 0 10px rgba(120, 255, 90, .35); }
.pm-bar.hp.low .fill { background: linear-gradient(90deg, #a01a1a, #ff4a3a 60%, #ffa070); animation: hp-low .7s ease-in-out infinite alternate; }
@keyframes hp-low { to { filter: brightness(1.35); } }
.pm-bar.hp .pm-track { background-image: linear-gradient(180deg, rgba(227, 192, 122, .85), rgba(154, 104, 32, .85)); }
/* ขีดแบ่งทุก 10% บนแถบเลือด */
.pm-bar.hp .pm-track::after {
  content: ''; position: absolute; inset: 1px; pointer-events: none;
  background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(0, 0, 0, .35) calc(10% - 1px) 10%);
}
.pm-bar.sp .pm-track { height: 9px; --cut: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.pm-bar.sp .fill { background: linear-gradient(90deg, #1a4ab0, #3a9aff 60%, #a0e8ff); box-shadow: 0 0 8px rgba(90, 180, 255, .4); }
/* ขีด SP ของสกิล: สว่างเมื่อใช้ได้ */
.pm-bar .mark { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .25); z-index: 1; }
.pm-bar .mark.on { background: #fff6c8; box-shadow: 0 0 6px #ffe27a; }
/* ตัวเลข */
.pm-bar em { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 11px; color: var(--ink); min-width: 92px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pm-bar em small { font-size: 8px; color: var(--ink-dim); margin-left: 3px; }
.pm-bar.sp em { font-size: 9px; color: #bfe6ff; }
.pm-bar.hp.low em { color: #ff9a8a; }

#train-bar { top: 82px; }
@media (max-height: 430px) {
  .pm.hero { width: clamp(250px, 36vw, 320px); padding: 6px 10px 7px 6px; gap: 8px; }
  .pm.hero::after { top: 27px; left: 50px; }
  .pm-badge { width: 42px; height: 42px; }
  .pm-badge b { font-size: 12px; margin-top: 3px; }
  .pm-badge small { font-size: 6px; }
  .pm.hero .pm-name { font-size: 15px; }
  .pm-head { margin-bottom: 4px; }
  .pm-track { height: 12px; }
  .pm-bar.sp .pm-track { height: 7px; }
  .pm-bar em { font-size: 9px; min-width: 76px; }
  .pm-bar em small { font-size: 7px; }
  .pm-bar.sp em { font-size: 8px; }
  #train-bar { top: 72px; }
}

/* ---------- ปุ่มควบคุม: ไอคอนอาวุธบนปุ่มโจมตี · สลับที่ parry กับสกิล U ---------- */
.ctl.atk .wglyph { width: 66%; height: 66%; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .5)); pointer-events: none; }
.ctl.atk.down .wglyph { transform: scale(.92) rotate(-8deg); }
.ctl.parry { right: calc(var(--btn) * .14); bottom: calc(var(--btn) * 1.46); }
#btn-s1 { right: calc(var(--btn) * 1.26); bottom: calc(var(--btn) * .96); }

/* ---------- หน้าปรับปุ่มควบคุม (ตั้งค่า) ---------- */
body.ctl-edit #hud { z-index: 60; background: rgba(6, 4, 3, .55); }
body.ctl-edit #party-bar, body.ctl-edit #hud-right, body.ctl-edit #train-bar, body.ctl-edit #screens { display: none; }
body.ctl-edit .ctl, body.ctl-edit #joy { pointer-events: auto; cursor: grab; touch-action: none; opacity: 1; }
body.ctl-edit .ctl:active, body.ctl-edit #joy:active { cursor: grabbing; }
body.ctl-edit [data-ctl]::after {
  content: attr(data-ctl); position: absolute; left: 50%; top: -20px; transform: translateX(-50%);
  font: 600 11px 'Kanit', sans-serif; color: var(--ink); white-space: nowrap; text-shadow: 0 1px 2px #000; pointer-events: none;
}
body.ctl-edit .ce-on { outline: 2px dashed var(--gold-1); outline-offset: 5px; box-shadow: 0 0 0 2px var(--win-dark), 0 0 22px rgba(255, 210, 120, .7); }
body.ctl-edit .key { display: none; }
#ctl-editor {
  position: fixed; z-index: 70; top: 10px; left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 20px));
  padding: 10px 14px; border-radius: 12px; background: linear-gradient(180deg, rgba(48, 38, 32, .96), rgba(20, 16, 14, .96));
  border: 1px solid rgba(227, 192, 122, .6); box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
.ce-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.ce-head b { color: var(--gold-1); font-size: 15px; }
.ce-head small { color: var(--ink-dim); font-size: 12px; }
.ce-row { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.ce-sel { min-width: 92px; font-weight: 800; color: var(--ink); }
.ce-row input[type=range] { flex: 1; accent-color: var(--gold-2); }
.ce-pct { font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--gold-1); min-width: 44px; text-align: right; }
.ce-btns { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.ce-gap { flex: 1; }
@media (max-height: 430px) {
  #ctl-editor { top: 6px; padding: 6px 10px; }
  .ce-row { margin: 4px 0; }
  .ce-head small { display: none; }
}

/* ---------- หน้าแรก: ปุ่มเข้าเมือง ---------- */
.menu-btn.wide { grid-column: span 2; }
.menu-btn.big.town { background: radial-gradient(ellipse at 85% 50%, rgba(140, 220, 140, .22), transparent 60%), linear-gradient(180deg, #3e5a34, #182414); border-color: rgba(190, 230, 150, .6); }
.menu-btn small em { font-style: normal; color: #7affd4; font-weight: 800; }

/* ---------- เมือง ---------- */
.screen-town { pointer-events: none; }
.town-top { display: flex; align-items: center; gap: 8px; padding: 8px 0; pointer-events: none; }
.town-top > * { pointer-events: auto; }
.town-top .tt-gap { flex: 1; pointer-events: none; }
.town-loc { display: flex; flex-direction: column; line-height: 1.15; padding: 6px 16px 6px 12px; border-radius: 10px;
  background: linear-gradient(90deg, rgba(16, 12, 10, .8), rgba(16, 12, 10, .35)); border-left: 3px solid var(--gold-2); text-shadow: 0 2px 2px rgba(0, 0, 0, .7); }
.town-loc b { color: var(--gold-1); font-size: clamp(15px, 3vh, 19px); letter-spacing: .5px; }
.town-loc small { color: var(--ink-dim); font-size: 11px; }
.town-qt { align-self: flex-start; display: flex; flex-direction: column; gap: 2px; min-width: 190px; max-width: 260px; padding: 6px 10px; border-radius: 10px;
  background: rgba(16, 12, 10, .62); border: 1px solid rgba(227, 192, 122, .3); font-size: 12px; pointer-events: none; }
.town-qt b { color: var(--gold-1); font-size: 12px; }
.town-qt div { display: flex; justify-content: space-between; gap: 10px; }
.town-qt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.town-qt i { font-style: normal; font-family: 'Press Start 2P', monospace; font-size: 9px; color: var(--ink-dim); white-space: nowrap; align-self: center; }
.town-qt .ok i { font-family: 'Kanit', sans-serif; font-size: 11px; font-weight: 800; color: #7affd4; }
#hud.town #train-bar, #hud.town #hud-right, #hud.town #btn-s1, #hud.town #btn-s2, #hud.town #btn-parry, #hud.town #btn-dodge { display: none; }
#hud.town .ctl.atk { background: radial-gradient(circle at 50% 30%, #8a7a62, #4a3a2a 60%, #241a12); border-color: rgba(227, 192, 122, .45); opacity: .7; line-height: 1; }
#hud.town .ctl.atk.near { background: radial-gradient(circle at 50% 30%, #7affd4, #2a9a7a 60%, #0a3a2c); border-color: var(--gold-1); opacity: 1; animation: ready 1.2s infinite; --el: #7affd4; }
#hud.town .ctl.atk .talk-ic { font-size: 1.25em; }
#hud.town .ctl.atk small { font-size: .5em; font-weight: 800; margin-top: 2px; }
.town-menu { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* กล่องข้อความ NPC แบบ JRPG */
.tdialog { position: fixed; left: 0; right: 0; bottom: calc(10px + var(--safe-b)); z-index: 45; display: flex; justify-content: center; padding: 0 12px; animation: tdin .18s ease-out; }
@keyframes tdin { from { transform: translateY(20px); opacity: 0; } }
.td-box { display: flex; gap: 14px; width: min(820px, 100%); padding: 12px 16px 12px 12px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, rgba(46, 37, 31, .96), rgba(18, 14, 12, .96)); border: 1px solid rgba(227, 192, 122, .7);
  box-shadow: 0 0 0 3px rgba(10, 7, 6, .6), 0 10px 30px rgba(0, 0, 0, .55); }
.td-face { flex-shrink: 0; width: clamp(64px, 18vh, 104px); height: clamp(64px, 18vh, 104px); border-radius: 10px; overflow: hidden;
  border: 2px solid var(--gold-2); box-shadow: 0 0 0 2px rgba(10, 7, 6, .7); }
.td-face img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.td-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-name { display: flex; align-items: baseline; gap: 10px; }
.td-name b { color: var(--gold-1); font-size: 17px; }
.td-name small { color: var(--ink-dim); font-size: 12px; }
.td-text { margin: 4px 0 8px; font-size: clamp(14px, 2.8vh, 17px); line-height: 1.45; min-height: 2.9em; color: var(--ink); }
.td-opts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-top: auto; }

/* กระดานภารกิจ */
.qlist { display: flex; flex-direction: column; gap: 6px; max-height: 56vh; padding-right: 2px; }
.qcard { display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px;
  background: linear-gradient(180deg, rgba(60, 48, 36, .75), rgba(28, 22, 18, .85)); border: 1px solid rgba(227, 192, 122, .3); }
.qcard.ready { border-color: #7affd4; box-shadow: 0 0 12px rgba(122, 255, 212, .25); }
.qcard.locked { opacity: .5; filter: grayscale(.6); }
.qc-main { flex: 1; min-width: 0; }
.qc-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qc-head b { font-size: 15px; color: var(--ink); }
.qc-head em { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 7px; border-radius: 999px; background: #5ab8ff; color: #001a33; }
.qc-head small { color: var(--ink-mute); font-size: 11px; }
.qc-desc { display: block; color: var(--ink-dim); font-size: 12px; margin: 1px 0 3px; }
.qc-goal { display: flex; align-items: center; gap: 4px; font-size: 13px; color: var(--gold-1); font-weight: 600; }
.qc-goal span { margin-left: auto; font-family: 'Press Start 2P', monospace; font-size: 10px; color: var(--ink); }
.qcard .bar i { background: linear-gradient(90deg, var(--gold-3), var(--gold-1)); }
.qcard.ready .bar i { background: linear-gradient(90deg, #2a9a7a, #7affd4); }
.qc-right { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex-shrink: 0; max-width: 42%; }
.qc-rew { font-size: 12px; color: var(--ink); text-align: right; display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: flex-end; }
.qi { width: 18px; height: 18px; image-rendering: pixelated; border-radius: 3px; vertical-align: middle; }
.qlock, .qdone { font-size: 11px; color: var(--ink-dim); }
.empty { padding: 18px 0; }

/* ร้านรับซื้อ / กระเป๋า */
.shop-head { display: flex; align-items: center; gap: 10px; }
.shop-head h3 { flex: 1; margin: 0; }
.shop-body { max-height: 54vh; }
.item-grid.shop { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); }
.icard.mat.t2 { border-color: rgba(106, 215, 122, .55); }
.icard.mat.t3 { border-color: rgba(92, 184, 255, .6); }
.icard.mat.t4 { border-color: rgba(197, 139, 255, .6); }
.icard.mat.t5 { border-color: rgba(255, 211, 77, .7); }
.icard img { image-rendering: pixelated; }
.sell-btns { display: flex; gap: 4px; margin-top: 4px; flex-wrap: wrap; justify-content: center; }
.sell-btns .btn.sm { padding: 3px 8px; font-size: 11px; }
.modal-btns.left { justify-content: flex-start; }
.loot { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.loot .li { position: relative; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; border: 1px solid var(--pn-line); }
.loot .li.t3 { border-color: #5cb8ff; }
.loot .li.t4 { border-color: #c58bff; }
.loot .li.t5 { border-color: #ffd34d; box-shadow: 0 0 10px rgba(255, 211, 77, .5); }
.loot .li img { width: 100%; height: 100%; image-rendering: pixelated; display: block; }
.loot .li b { position: absolute; right: 2px; bottom: 0; font-size: 11px; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.qready { color: #7affd4; font-weight: 600; font-size: 13px; margin: 4px 0; }
@media (max-height: 430px) {
  .town-top { padding: 4px 0; }
  .town-loc small { display: none; }
  .town-qt { min-width: 150px; font-size: 11px; padding: 4px 8px; }
  .td-box { padding: 8px 10px; gap: 10px; }
  .td-text { margin: 2px 0 4px; min-height: 2.6em; }
  .qlist, .shop-body { max-height: 50vh; }
  .qcard { padding: 5px 8px; }
  .qc-desc { display: none; }
}
#hud.talking #joy, #hud.talking #pad-right { visibility: hidden; }

/* ---------- เมือง: แถบ HUD ตัวเอก + ป้ายชื่อเมืองกลางจอ ---------- */
.screen-town .town-loc { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); align-items: center; text-align: center;
  padding: 5px 22px; border-left: 0; border-radius: 999px; pointer-events: none; white-space: nowrap;
  background: linear-gradient(90deg, transparent, rgba(16, 12, 10, .78) 18%, rgba(16, 12, 10, .78) 82%, transparent); }
.screen-town .town-qt { position: absolute; top: 92px; left: calc(10px + var(--safe-l)); }
.town-pm .pm-head { flex-wrap: wrap; row-gap: 0; }
.pm-sub { font-size: 11px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pm-pts { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 7px; border-radius: 999px; color: #00301a; background: #6ad77a; }
.pm-bar.exp .pm-track { height: 9px; --cut: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
.pm-bar.exp .fill { background: linear-gradient(90deg, var(--gold-3), var(--gold-2) 60%, var(--gold-1)); box-shadow: 0 0 8px rgba(255, 210, 120, .4); }
.pm-bar.exp em { font-size: 9px; color: var(--gold-1); }
@media (max-width: 900px) { .screen-town .town-loc small { display: none; } }
@media (max-height: 430px) {
  .screen-town .town-qt { top: 74px; }
  .screen-town .town-loc { top: 6px; padding: 3px 18px; }
  .pm-sub { font-size: 10px; }
}

/* ---------- เมือง: มินิแมพมุมขวาบน ---------- */
.screen-town .town-map { position: absolute; top: 58px; right: calc(10px + var(--safe-r)); width: clamp(210px, 25vw, 300px); height: clamp(62px, 11vh, 84px);
  padding: 4px; border-radius: 10px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(46, 37, 31, .92), rgba(16, 12, 10, .92)); border: 1px solid rgba(227, 192, 122, .7);
  box-shadow: 0 0 0 2px rgba(10, 7, 6, .55), 0 6px 16px rgba(0, 0, 0, .4); }
.town-map::before, .town-map::after { content: ''; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; transform: rotate(45deg);
  background: var(--gold-2); box-shadow: 0 0 0 1px rgba(10, 7, 6, .8); }
.town-map::before { left: -4px; }
.town-map::after { right: -4px; }
.town-map canvas { display: block; width: 100%; height: 100%; border-radius: 6px; cursor: pointer; }
.town-map .tm-name { position: absolute; top: -8px; left: 12px; z-index: 1; padding: 1px 7px 0; border-radius: 999px; pointer-events: none;
  font: 7px 'Press Start 2P', monospace; letter-spacing: 1px; color: #2e1800; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); }
@media (max-height: 430px) {
  .screen-town .town-map { top: 46px; width: 190px; height: 58px; }
}

/* ---------- หน้าแรก: ไอคอนตัวละคร · เดินออกไปเมือง ---------- */
.menu-btn .ico .ico-face { display: block; width: clamp(34px, 9vh, 54px); height: clamp(34px, 9vh, 54px); border-radius: 8px; image-rendering: pixelated;
  border: 2px solid var(--gold-2); box-shadow: 0 0 0 2px rgba(10, 7, 6, .6), 0 3px 8px rgba(0, 0, 0, .5); }
.screen-home > * { transition: opacity .35s, transform .35s; }
.screen-home.leaving > * { opacity: 0; pointer-events: none; }
.screen-home.leaving .home-menu { transform: translateX(30px); }

/* ---------- ฉากโหลด ---------- */
.loading { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .3s;
  background: radial-gradient(ellipse at 50% 45%, #2a2018 0%, #120e0b 55%, #050403 100%); }
.loading.on { opacity: 1; }
.loading.out { opacity: 0; transition: opacity .45s; }
.loading::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .18;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .5) 0 2px, transparent 2px 4px); }
.ld-box { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; width: min(420px, 86vw); }
.ld-box canvas { width: clamp(96px, 26vh, 132px); height: clamp(96px, 26vh, 132px); image-rendering: pixelated; }
.ld-box small { color: var(--ink-dim); font-size: 13px; letter-spacing: 1px; }
.ld-box b { color: var(--gold-1); font-size: clamp(22px, 5.5vh, 32px); font-weight: 800; letter-spacing: 1px; text-shadow: 0 0 14px rgba(255, 210, 120, .45), 0 3px 0 #000; }
.ld-bar { position: relative; width: 100%; height: 12px; margin: 10px 0 8px; padding: 2px; border: 1px solid rgba(227, 192, 122, .7);
  background: rgba(10, 7, 6, .8); clip-path: polygon(6px 0, calc(100% - 6px) 0, 100% 50%, calc(100% - 6px) 100%, 6px 100%, 0 50%); }
.ld-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold-3), var(--gold-2) 60%, var(--gold-1));
  box-shadow: 0 0 10px rgba(255, 210, 120, .6); transition: width 1.25s cubic-bezier(.3, .1, .3, 1); }
.loading.on .ld-bar i { width: 100%; }
.ld-tip { margin: 0; color: var(--ink-dim); font-size: 12px; }

/* ---------- เมือง: แถบปุ่มลัด (ล่างกลาง) ---------- */
.screen-town .town-dock { position: absolute; left: 50%; bottom: calc(10px + var(--safe-b)); transform: translateX(-50%); display: flex; gap: 4px;
  padding: 5px 8px; border-radius: 14px; pointer-events: auto;
  background: linear-gradient(180deg, rgba(46, 37, 31, .92), rgba(16, 12, 10, .92)); border: 1px solid rgba(227, 192, 122, .65);
  box-shadow: 0 0 0 2px rgba(10, 7, 6, .55), 0 6px 18px rgba(0, 0, 0, .45); }
.town-dock::before { content: ''; position: absolute; left: 14px; right: 14px; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-1), transparent); }
.qk { position: relative; width: clamp(48px, 9.5vh, 64px); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 3px;
  border-radius: 10px; color: var(--ink); transition: background .15s, transform .1s; }
.qk i { font-style: normal; font-size: clamp(18px, 4.4vh, 26px); line-height: 1.15; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)); }
.qk small { font-size: 10px; font-weight: 600; color: var(--ink-dim); white-space: nowrap; }
.qk:hover { background: rgba(227, 192, 122, .14); }
.qk:hover small { color: var(--gold-1); }
.qk:active { transform: scale(.93); }
.qk + .qk::before { content: ''; position: absolute; left: -3px; top: 20%; bottom: 20%; width: 1px; background: rgba(227, 192, 122, .18); }
.qk em { position: absolute; top: 0; right: 4px; min-width: 16px; padding: 0 4px; border-radius: 999px; font-style: normal; font-size: 10px; font-weight: 800;
  color: #00301a; background: #7affd4; box-shadow: 0 0 8px rgba(122, 255, 212, .6); }
.qk-adv i { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 6px rgba(255, 120, 80, .5)); }
.screen-town.talking .town-dock { display: none; }
@media (max-height: 430px) {
  .qk { width: 50px; padding: 3px 1px 2px; }
  .qk small { font-size: 9px; }
}

/* ---------- เคอร์เซอร์เมาส์ pixel art (ตั้งค่าใน applyCursors ของ hero.js) ---------- */
html, body, #app, #game, .screens, .modal-bg, .modal { cursor: var(--cur-def, auto); }
button, [data-act], .swatch, .swatch.pick input, label, select, input[type=range], input[type=color], .td-box, .town-map canvas { cursor: var(--cur-ptr, pointer); }
button:disabled, button:disabled * { cursor: var(--cur-def, not-allowed); }
input[type=text], input:not([type]), textarea { cursor: text; }
#game.cur-talk { cursor: var(--cur-talk, pointer); }
body.ctl-edit .ctl, body.ctl-edit #joy { cursor: grab; }
body.ctl-edit .ctl:active, body.ctl-edit #joy:active { cursor: grabbing; }
.modal-bg[data-act] { cursor: var(--cur-def, auto); }
body.cur-down, body.cur-down * { cursor: var(--cur-click, pointer) !important; }

/* =====================================================================
   ออนไลน์: หน้าเข้าสู่ระบบ · ชิปสถานะ · เพื่อน/ปาร์ตี้ · แจ้งเตือน · HUD ปาร์ตี้ในด่าน
   ===================================================================== */
.screen-login { background: radial-gradient(ellipse 70% 60% at 50% 40%, transparent 40%, rgba(8, 5, 3, .55)); }
.login { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 3vh, 24px); padding: 2vh 0 calc(8px + var(--safe-b)); }
.login-logo { text-align: center; transition: transform .5s; }
.login-logo .logo { font-size: clamp(38px, 12vh, 86px); }
.login-logo .logo-sub { margin-top: 6px; letter-spacing: 6px; color: var(--gold-1); }
.login.open .login-logo { transform: scale(.8); }
.press-start { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 40px; margin-top: 4vh; }
.press-start b { font-size: clamp(18px, 4.4vh, 32px); color: #fff6dc; letter-spacing: 3px; text-shadow: 0 2px 0 #3a2410, 0 0 14px rgba(255, 210, 140, .6); animation: blink 1.4s steps(2) infinite; }
.press-start small { font: clamp(9px, 1.4vh, 12px) 'Press Start 2P', monospace; letter-spacing: 3px; color: var(--gold-2); text-shadow: 0 2px 0 #000; }
@keyframes blink { 50% { opacity: .35; } }
.login-panel { position: relative; width: clamp(300px, 30vw, 420px); max-width: 92vw; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 14px 20px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(48, 38, 32, .95), rgba(18, 14, 12, .95)); border: 1px solid rgba(227, 192, 122, .7);
  box-shadow: 0 0 0 2px rgba(10, 7, 6, .7), inset 0 0 0 1px rgba(255, 236, 200, .06), 0 18px 46px rgba(0, 0, 0, .6); animation: lpIn .35s ease-out; }
.login-panel::before, .login-panel::after { content: ''; position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; transform: rotate(45deg);
  background: var(--gold-2); box-shadow: 0 0 0 1px rgba(10, 7, 6, .8); }
.login-panel::before { left: -5px; }
.login-panel::after { right: -5px; }
@keyframes lpIn { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.lp-head { display: flex; align-items: center; justify-content: center; gap: 10px; color: var(--gold-1); font-size: 18px; letter-spacing: 1px; }
.lp-head i { font-style: normal; color: var(--gold-2); font-size: 12px; }
.lp-server { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--ink-dim); }
.lp-server i { width: 7px; height: 7px; border-radius: 50%; background: #8a7c68; }
.lp-server.on i { background: #5ae08a; box-shadow: 0 0 6px #5ae08a; }
.lp-cont { display: flex; flex-direction: column; align-items: center; padding: 8px; font-size: 16px; }
.lp-cont small { font-size: 11px; }
.lp-google { display: flex; justify-content: center; min-height: 44px; align-items: center; color-scheme: light; }
.lp-gdis { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; }
.g-ico { font-style: normal; font-weight: 900; width: 20px; height: 20px; line-height: 20px; border-radius: 50%; background: #fff; color: #4285f4; }
.lp-note { margin: -2px 0 0; font-size: 11px; color: var(--ink-mute); text-align: center; line-height: 1.35; }
.lp-lan { display: flex; flex-direction: column; align-items: center; padding: 8px; font-size: 15px; }
.lp-lan small { font-size: 10px; color: var(--ink-dim); }
.lp-off { padding: 6px; font-size: 13px; color: var(--ink-dim); }
.lp-or { display: flex; align-items: center; gap: 8px; color: var(--ink-mute); font-size: 11px; }
.lp-or::before, .lp-or::after { content: ''; flex: 1; height: 1px; background: var(--pn-line); }
.lp-link { color: var(--gold-1); font-size: 12px; text-decoration: underline; text-underline-offset: 2px; align-self: center; padding: 0 4px; }
.lp-err { margin: 0; min-height: 16px; font-size: 12px; color: #ff9a8a; text-align: center; }
.lp-err.wait { color: var(--gold-1); }
.lp-wait { font-size: 12px; color: var(--ink-dim); }
.login-foot { font: 8px 'Press Start 2P', monospace; letter-spacing: 2px; color: rgba(255, 236, 200, .55); text-shadow: 0 2px 0 #000; }
@media (max-height: 430px) {
  .login.open .login-logo { display: none; }
  .login-panel { gap: 5px; padding: 10px 16px; }
}

/* ชิปสถานะออนไลน์ (หน้าแรก) + ปุ่ม channel/เพื่อน (เมือง) */
.net-chip { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: linear-gradient(180deg, #45372d, #2a211c); border: 1px solid var(--pn-line); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
.net-chip > i { width: 8px; height: 8px; border-radius: 50%; background: #8a7c68; }
.net-chip.on > i { background: #5ae08a; box-shadow: 0 0 6px #5ae08a; }
.net-chip small { color: var(--ink-dim); font-weight: 400; }
.net-chip em, .net-social em, .soc-tabs em { font-style: normal; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 999px;
  background: #ff5a4a; color: #fff; font-size: 10px; font-weight: 800; text-align: center; }
.net-chip em, .net-social em { position: absolute; top: -5px; right: -5px; }
.net-town { display: flex; gap: 6px; align-items: center; }
.net-ch { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; white-space: nowrap;
  background: linear-gradient(180deg, #45372d, #2a211c); border: 1px solid var(--pn-line); box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
#net-chip { display: flex; align-items: center; gap: 8px; }
.net-ch { display: flex; align-items: center; gap: 6px; }
/* ปุ่มเพื่อน & ปาร์ตี้: กรอบทองเรืองแสง ไอคอนในวงกลมทอง (เด่นกว่าปุ่มอื่นบนแถบบน) */
.net-social { position: relative; display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; text-align: left;
  background: linear-gradient(180deg, #6a4c22, #2e1f10); border: 1.5px solid var(--gold-1);
  box-shadow: 0 0 0 2px rgba(10, 7, 6, .6), 0 0 14px rgba(255, 210, 120, .45), inset 0 1px 0 rgba(255, 240, 200, .35);
  transition: transform .1s, filter .15s; animation: nsGlow 2.4s ease-in-out infinite; }
.net-social:hover { filter: brightness(1.15); }
.net-social:active { transform: scale(.96); }
.net-social .ns-ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 20px;
  background: radial-gradient(circle at 35% 30%, var(--gold-1), var(--gold-2) 60%, var(--gold-3)); box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .3), 0 0 8px rgba(255, 210, 120, .6); }
.net-social .ns-txt { display: flex; flex-direction: column; line-height: 1.15; }
.net-social .ns-txt b { color: var(--gold-1); font-size: 14px; letter-spacing: .3px; white-space: nowrap; text-shadow: 0 1px 2px #000; }
.net-social .ns-txt small { color: #e8d8b8; font-size: 10px; white-space: nowrap; }
.net-social.inparty { border-color: #9affc0; }
.net-social.inparty .ns-txt small { color: #9affc0; }
.net-social.alert { animation: nsAlert .9s ease-in-out infinite; }
.net-social em { min-width: 20px; height: 20px; line-height: 20px; font-size: 11px; top: -6px; right: -4px; box-shadow: 0 0 0 2px #2e1f10; }
@keyframes nsGlow { 50% { box-shadow: 0 0 0 2px rgba(10, 7, 6, .6), 0 0 22px rgba(255, 210, 120, .75), inset 0 1px 0 rgba(255, 240, 200, .35); } }
@keyframes nsAlert { 50% { box-shadow: 0 0 0 2px rgba(10, 7, 6, .6), 0 0 26px rgba(255, 110, 90, .9); transform: scale(1.04); } }
@media (max-height: 430px), (max-width: 1100px) {
  .net-social .ns-txt small { display: none; }
}
/* จอแคบ (มือถือแนวนอน): เหลือวงกลมทองเรืองแสง ไม่ทับป้ายชื่อเมือง */
@media (max-width: 900px) {
  .net-social { padding: 3px; }
  .net-social .ns-txt { display: none; }
  .net-social .ns-ic { width: 38px; height: 38px; }
}
/* ป้ายชื่อเมือง (ออนไลน์): แตะเพื่อเปลี่ยน channel · แสดง ping */
.screen-town .town-loc.online { pointer-events: auto; cursor: pointer; }
.screen-town .town-loc small#town-ch { display: flex; align-items: center; gap: 6px; }
.town-loc .tl-sw { font-style: normal; font-size: 10px; color: var(--gold-1); padding: 0 6px; border-radius: 999px; border: 1px solid rgba(227, 192, 122, .5); }
.screen-town .town-loc.online:hover .tl-sw { background: rgba(227, 192, 122, .2); }
@media (max-width: 900px) { .town-loc .tl-sw { display: none; } }

/* ขีดสัญญาณ ping */
.ping { display: inline-flex; align-items: flex-end; gap: 1.5px; font-style: normal; }
.ping i { width: 3px; border-radius: 1px; background: rgba(255, 255, 255, .18); }
.ping i:nth-child(1) { height: 5px; } .ping i:nth-child(2) { height: 8px; } .ping i:nth-child(3) { height: 11px; }
.ping b { margin-left: 4px; font: 600 11px 'Kanit', sans-serif; color: var(--ink-dim); line-height: 1; }
.ping.g i { background: #5ae08a; } .ping.g b { color: #9affc0; }
.ping.y i:nth-child(-n+2) { background: #ffd040; } .ping.y b { color: #ffe27a; }
.ping.r i:nth-child(1) { background: #ff5a4a; } .ping.r b { color: #ff9a8a; }

/* ตารางผู้เล่นในช่องนี้ */
.pl-table { display: flex; flex-direction: column; gap: 3px; }
.pl-row { display: grid; grid-template-columns: minmax(0, 1fr) 64px 84px 150px; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px;
  background: rgba(255, 236, 200, .05); border: 1px solid rgba(214, 178, 112, .2); }
.pl-row.pl-head { background: none; border: 0; padding: 0 10px; font-size: 11px; color: var(--gold-2); letter-spacing: .5px; }
.pl-row.me { border-color: rgba(255, 214, 120, .55); background: rgba(255, 214, 120, .08); }
.pl-name { display: flex; align-items: center; gap: 6px; min-width: 0; cursor: pointer; }
.pl-row.me .pl-name { cursor: default; }
.pl-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-lv { font: 10px 'Press Start 2P', monospace; color: var(--gold-1); }
.pl-tag { font-style: normal; font-size: 10px; padding: 0 6px; border-radius: 999px; flex-shrink: 0; }
.pl-tag.pt-me { background: var(--gold-2); color: #2a1400; font-weight: 800; }
.pl-tag.pt-party { background: rgba(122, 255, 170, .2); color: #9affc0; }
.pl-tag.pt-fr { background: rgba(140, 210, 255, .2); color: #bfe4ff; }
.pl-row .soc-act { justify-content: flex-end; }
@media (max-width: 700px) { .pl-row { grid-template-columns: minmax(0, 1fr) 54px 74px 110px; } }
.town-party { position: absolute; top: 92px; left: calc(10px + var(--safe-l)); display: flex; flex-direction: column; gap: 2px; min-width: 180px; max-width: 240px;
  padding: 6px 10px; border-radius: 10px; background: rgba(16, 12, 10, .78); border: 1px solid rgba(122, 255, 170, .4); pointer-events: auto; font-size: 12px; }
.town-qt:not(.hidden) ~ .town-party { top: auto; bottom: calc(96px + var(--safe-b)); }
.town-party b { color: #9affc0; font-size: 12px; }
.town-party div { display: flex; justify-content: space-between; gap: 8px; cursor: pointer; }
.town-party div.off { opacity: .5; }
.town-party span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.town-party i { font-style: normal; color: var(--ink-dim); font-size: 11px; white-space: nowrap; }

/* แผงเพื่อน & ปาร์ตี้ */
.social h3 { margin: 0 0 8px; }
.soc-tabs { display: flex; gap: 6px; margin-bottom: 8px; }
.soc-tabs .tab { flex: 1; padding: 6px 8px; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 4px; }
.soc-body { max-height: 52vh; padding-right: 4px; }
.soc-body h4 { margin: 8px 0 4px; }
.soc-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-bottom: 4px; border-radius: 8px; background: rgba(255, 236, 200, .05); border: 1px solid rgba(214, 178, 112, .2); }
.soc-row.off { opacity: .55; }
.soc-row.req { border-color: rgba(255, 214, 120, .6); }
.soc-row .dot { width: 8px; height: 8px; border-radius: 50%; background: #6a5c4c; flex-shrink: 0; }
.soc-row.on .dot { background: #5ae08a; box-shadow: 0 0 6px #5ae08a; }
.soc-name { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.soc-name b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.soc-name small { color: var(--ink-dim); font-size: 11px; }
.soc-act { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.soc-act em, .pcard em { font-style: normal; font-size: 11px; color: #9affc0; }
.btn.sm { padding: 4px 10px; font-size: 12px; }
.soc-code { display: flex; gap: 6px; margin-top: 8px; }
.soc-code input { flex: 1; min-width: 0; padding: 6px 10px; border-radius: 8px; border: 1px solid var(--pn-line); background: rgba(0, 0, 0, .35); color: var(--ink); font: inherit; font-size: 13px; user-select: text; -webkit-user-select: text; }
.social code { font-size: 11px; color: var(--gold-1); background: rgba(0, 0, 0, .35); padding: 1px 6px; border-radius: 4px; user-select: all; -webkit-user-select: all; }
.party-note { color: #9affc0; font-size: 12px; margin: 4px 0; }
.modal-btns .party-note, .modal-btns > .tip { flex-basis: 100%; text-align: center; margin: 0; }

/* การ์ดผู้เล่น */
.pc-main { display: flex; gap: 14px; align-items: center; }
.pc-main h3 { margin: 0; }
.pc-main p { margin: 2px 0; }
.pc-face { width: 84px; height: 84px; border-radius: 12px; image-rendering: pixelated; border: 2px solid var(--gold-2); box-shadow: 0 0 0 2px rgba(10, 7, 6, .6); }
.pc-w { display: flex; align-items: center; gap: 4px; font-size: 13px; }
.pc-w img { width: 28px; height: 28px; image-rendering: pixelated; }

/* เลือก channel */
.ch-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0; }
.ch-opt { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 14px; border-radius: 10px;
  background: linear-gradient(180deg, var(--pn-hi), var(--pn)); border: 1px solid var(--pn-line); text-align: left; }
.ch-opt.on { border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-1), 0 0 16px rgba(255, 210, 120, .4); }
.ch-opt b { font: 14px 'Press Start 2P', monospace; color: var(--gold-1); }
.ch-opt small { color: var(--ink-dim); font-size: 11px; }
.ch-bar { width: 100%; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .45); overflow: hidden; margin-top: 4px; }
.ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, #5ae08a, #ffe27a); }
.ch-opt em { position: absolute; top: 10px; right: 12px; font-style: normal; font-size: 12px; color: var(--ink); }

/* แจ้งเตือนคำขอเพื่อน/คำเชิญปาร์ตี้ (มุมบนกลาง) */
#net-asks { position: absolute; top: 56px; left: 50%; transform: translateX(-50%); z-index: 60; display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
.net-ask { pointer-events: auto; display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.25; min-width: 280px;
  background: linear-gradient(180deg, rgba(52, 42, 34, .97), rgba(20, 16, 14, .97)); border: 1px solid var(--gold-2); box-shadow: 0 8px 22px rgba(0, 0, 0, .55); animation: lpIn .25s ease-out; transition: opacity .25s, transform .25s; }
.net-ask.party { border-color: #7aff9a; }
.net-ask.out { opacity: 0; transform: translateY(-8px); }
.net-ask > i { font-style: normal; font-size: 22px; }
.net-ask span { flex: 1; }
.net-ask small { color: var(--ink-dim); }

/* HUD ด่าน: แถบเลือดเพื่อนในปาร์ตี้ใต้ของตัวเอง */
#party-bar { flex-wrap: wrap; max-width: 60vw; }
.pm-allies { flex-basis: 100%; display: flex; flex-direction: column; gap: 3px; }
.pm-ally { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 2px 6px; width: 180px; padding: 3px 8px; border-radius: 8px;
  background: rgba(16, 12, 10, .62); border: 1px solid rgba(122, 255, 170, .3); font-size: 11px; }
.pm-ally b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; color: #bff4d4; font-weight: 600; }
.pm-ally small { color: var(--ink-dim); }
.pm-ally .pm-track { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(0, 0, 0, .5); overflow: hidden; }
.pm-ally .fill { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3fdc6a, #9affb0); transition: width .2s; }
.pm-ally.down { opacity: .6; border-color: rgba(255, 120, 120, .5); }
.pm-ally.down .fill { background: #8a4a4a; }
.acct { flex-basis: 100%; font-size: 13px; color: var(--ink-dim); }

/* ---------- ย้อมสีชุด (แท็บแฟชัน › ชุด) ---------- */
.dye-box { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 12px; padding: 10px 12px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(60, 46, 34, .7), rgba(20, 16, 14, .7)); border: 1px solid rgba(227, 192, 122, .45); }
.dye-prev { width: 92px; height: 108px; flex-shrink: 0; border-radius: 10px; image-rendering: pixelated; border: 2px solid var(--gold-2); box-shadow: 0 0 0 2px rgba(10, 7, 6, .6); }
.dye-main { flex: 1; min-width: 0; }
.dye-main h4 { margin: 0 0 6px !important; }
.dye-row { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.dye-lbl { width: 78px; flex-shrink: 0; font-size: 12px; color: var(--ink-dim); }
.dye-row .sw-row { gap: 5px; }
.dye-row .swatch { width: 24px; height: 24px; }
.swatch.base::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.dye-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.dye-foot small { font-size: 11px; }
@media (max-width: 700px), (max-height: 430px) {
  .dye-prev { width: 64px; height: 76px; }
  .dye-lbl { width: 60px; font-size: 11px; }
  .dye-row .swatch { width: 20px; height: 20px; }
}

/* ---------- แชทผู้เล่น (มุมซ้ายล่าง เหนือจอยสติ๊ก) ---------- */
.chat { position: fixed; z-index: 30; left: calc(10px + var(--safe-l)); bottom: calc(var(--btn) * 2 + 40px + var(--safe-b)); width: min(340px, 42vw);
  display: flex; flex-direction: column; gap: 4px; pointer-events: none; }
.screen-home ~ .chat, body:has(.screen-home) .chat { bottom: calc(12px + var(--safe-b)); }
.chat .ch-tabs, .chat .ch-form { display: none; }
.chat.open { pointer-events: auto; padding: 6px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(36, 28, 22, .92), rgba(14, 11, 9, .92)); border: 1px solid rgba(227, 192, 122, .55);
  box-shadow: 0 0 0 2px rgba(10, 7, 6, .55), 0 10px 26px rgba(0, 0, 0, .5); }
.chat.open .ch-tabs, .chat.open .ch-form { display: flex; }
.ch-tabs { gap: 4px; }
.ch-tabs button { flex: 1; padding: 3px 0; border-radius: 6px; font-size: 11px; color: var(--ink-dim); background: rgba(255, 236, 200, .05); border: 1px solid transparent; }
.ch-tabs button.on { color: var(--gold-1); border-color: rgba(227, 192, 122, .6); background: rgba(227, 192, 122, .12); }
.ch-tabs .ch-x { flex: 0 0 26px; }
.ch-log { display: flex; flex-direction: column; gap: 1px; max-height: 30vh; overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; }
.chat:not(.open) .ch-log { overflow: hidden; max-height: 24vh; }
.chat.open .ch-log { min-height: 90px; padding: 2px 2px 4px; }
.cl { font-size: 12.5px; line-height: 1.35; color: #f4ead8; padding: 1px 7px; border-radius: 6px; word-break: break-word; text-shadow: 0 1px 2px #000, 0 0 3px #000; transition: opacity 2s; }
.chat:not(.open) .cl { background: rgba(10, 7, 6, .5); align-self: flex-start; max-width: 100%; }
.cl.fade { opacity: 0; }
.cl small { color: var(--ink-mute); font-size: 10px; margin-right: 4px; }
.cl-tag { font-style: normal; font-size: 10.5px; margin-right: 3px; color: #e8d8b8; }
.cl b { font-weight: 700; cursor: pointer; color: #ffe6a6; }
.cl b.me { color: #fff; cursor: default; }
.cl.k-party .cl-tag, .cl.k-party b { color: #9affc0; }
.cl.k-w .cl-tag, .cl.k-w b, .cl.k-w span { color: #ffb0e0; }
.cl.k-sys { color: var(--ink-dim); font-style: italic; font-size: 11.5px; }
.cl.k-sys.warn { color: #ff9a8a; }
.ch-form { gap: 4px; }
.ch-to { max-width: 112px; padding: 4px; border-radius: 6px; border: 1px solid var(--pn-line); background: #1e1713; color: var(--gold-1); font: 600 12px 'Kanit', sans-serif; }
.ch-in { flex: 1; min-width: 0; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--pn-line); background: rgba(0, 0, 0, .45); color: var(--ink);
  font: 13px 'Kanit', sans-serif; user-select: text; -webkit-user-select: text; outline: none; }
.ch-in:focus { border-color: var(--gold-1); box-shadow: 0 0 0 1px rgba(255, 220, 140, .4); }
.ch-send { padding: 4px 12px; border-radius: 6px; font-weight: 700; font-size: 12px; color: #2e1800;
  background: linear-gradient(180deg, var(--gold-1), var(--gold-2) 60%, var(--gold-3)); }
.ch-toggle { pointer-events: auto; align-self: flex-start; position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: 999px;
  background: linear-gradient(180deg, #45372d, #2a211c); border: 1px solid var(--pn-line); box-shadow: 0 3px 8px rgba(0, 0, 0, .4); font-size: 13px; font-weight: 600; }
.ch-toggle i { font-style: normal; font-size: 16px; }
.ch-toggle kbd { font: 9px 'Press Start 2P', monospace; color: var(--ink-mute); padding: 2px 4px; border-radius: 4px; border: 1px solid rgba(255, 236, 200, .2); }
.ch-toggle em { position: absolute; top: -6px; left: 18px; min-width: 18px; height: 18px; line-height: 18px; padding: 0 4px; border-radius: 999px; font-style: normal;
  background: #ff5a4a; color: #fff; font-size: 10px; font-weight: 800; text-align: center; box-shadow: 0 0 0 2px #2a211c; }
.chat.open .ch-toggle { display: none; }
body.touch .ch-toggle kbd { display: none; }
@media (max-height: 430px) {
  .chat { width: min(300px, 40vw); }
  .ch-log { max-height: 34vh; }
  .chat:not(.open) .ch-log { max-height: 20vh; }
  .cl { font-size: 11.5px; }
}

/* =====================================================================
   การ์ดอาวุธ / แฟชัน (แท็บตัวละคร + ร้านค้า): ภาพใหญ่ · พื้นหลังตามธาตุ · กรอบตามระดับ · SSR มีเอฟเฟกต์
   ===================================================================== */
@property --ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.grid-count { margin-left: auto; align-self: center; font-size: 11px; color: var(--ink-dim); }
.wgrid, .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; padding: 2px 2px 10px; }
.fgrid { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); }
.wcard, .fcard { position: relative; display: flex; flex-direction: column; padding: 0; overflow: hidden; text-align: left; border-radius: 12px;
  background: linear-gradient(180deg, #2e241d, #15110e); border: 2px solid #6a604f; box-shadow: 0 6px 14px rgba(0, 0, 0, .4);
  transition: transform .12s, box-shadow .15s, filter .15s; }
button.wcard:hover, button.fcard:hover { transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 10px 20px rgba(0, 0, 0, .5); }
button.wcard:active, button.fcard:active { transform: translateY(0) scale(.98); }

/* กรอบตามระดับ */
.wcard.r3, .fcard.r3 { border-color: #9fc2dd; }
.wcard.r4, .fcard.r4 { border-color: #b98aff; box-shadow: 0 0 0 1px rgba(10, 7, 6, .6), 0 0 14px rgba(185, 138, 255, .45), 0 6px 14px rgba(0, 0, 0, .4); }
.wcard.r5, .fcard.r5 { border-color: transparent; animation: ssrSpin 3.2s linear infinite;
  background: linear-gradient(180deg, #33281d, #15110e) padding-box,
    conic-gradient(from var(--ang), #fff6d0, #e2ae4c, #8a5a12, #ffe6a6, #fff, #e2ae4c, #fff6d0) border-box;
  box-shadow: 0 0 0 1px rgba(10, 7, 6, .6), 0 0 18px rgba(255, 205, 90, .55), 0 6px 14px rgba(0, 0, 0, .4); }
@keyframes ssrSpin { to { --ang: 360deg; } }
.wcard.sel, .fcard.sel { outline: 2px solid #fff4cc; outline-offset: 2px; }
.wcard.locked, .fcard.locked { filter: saturate(.25) brightness(.7); }
.wcard.locked .wc-art img, .fcard.locked .fc-art img { filter: brightness(0) drop-shadow(0 0 1px rgba(255, 255, 255, .4)); opacity: .6; }
.wcard.r5.locked, .fcard.r5.locked { animation: none; }

/* ภาพอาวุธ + พื้นหลังตามธาตุ */
.wc-art, .wd-art, .fc-art { position: relative; display: grid; place-items: center; overflow: hidden; isolation: isolate; }
.wc-art { aspect-ratio: 1 / .78; border-bottom: 1px solid rgba(0, 0, 0, .5); }
.wc-art img, .wd-art img { width: 80%; height: 86%; object-fit: contain; image-rendering: pixelated; position: relative; z-index: 2;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 8px rgba(255, 255, 255, .18)); transition: transform .25s; }
button.wcard:hover .wc-art img { transform: scale(1.06) rotate(-3deg); }
.el-fire .wc-art, .el-fire .wd-art { background:
  radial-gradient(circle at 18% 26%, rgba(255, 220, 120, .7) 0 1.4px, transparent 2px) 0 0 / 23px 27px,
  radial-gradient(circle at 70% 60%, rgba(255, 170, 60, .55) 0 1.2px, transparent 2px) 0 0 / 31px 23px,
  radial-gradient(ellipse 80% 60% at 50% 115%, rgba(255, 190, 70, .75), transparent 60%),
  linear-gradient(180deg, #2a0804, #6e1a0a 55%, #b8381a); }
.el-wind .wc-art, .el-wind .wd-art { background:
  repeating-linear-gradient(140deg, rgba(220, 255, 230, .09) 0 5px, transparent 5px 15px),
  radial-gradient(ellipse 70% 55% at 30% 15%, rgba(200, 255, 220, .4), transparent 60%),
  radial-gradient(ellipse 60% 50% at 80% 100%, rgba(120, 255, 170, .35), transparent 65%),
  linear-gradient(180deg, #082216, #1a5a34 60%, #349a58); }
.el-earth .wc-art, .el-earth .wd-art { background:
  repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 2px, transparent 2px 14px),
  repeating-linear-gradient(90deg, rgba(0, 0, 0, .09) 0 2px, transparent 2px 22px),
  radial-gradient(ellipse 75% 60% at 50% 110%, rgba(255, 214, 130, .55), transparent 62%),
  linear-gradient(180deg, #24160a, #5e3c16 58%, #a6722a); }
.el-water .wc-art, .el-water .wd-art { background:
  repeating-radial-gradient(circle at 50% 125%, rgba(220, 245, 255, .1) 0 2px, transparent 2px 13px),
  radial-gradient(ellipse 70% 55% at 50% 0%, rgba(170, 225, 255, .4), transparent 60%),
  linear-gradient(180deg, #06142e, #123e70 58%, #2678c0); }
/* ป้ายธาตุ / ระดับ / ตีบวก / ใช้อยู่ */
.wc-el { position: absolute; top: 6px; left: 6px; z-index: 3; width: 24px; height: 24px; display: grid; place-items: center; font-style: normal; font-size: 13px;
  border-radius: 50%; background: rgba(10, 7, 6, .55); box-shadow: 0 0 0 1px rgba(255, 236, 200, .35); }
.wc-rar { position: absolute; top: 6px; right: 6px; z-index: 3; padding: 1px 7px; border-radius: 6px; font: 9px 'Press Start 2P', monospace; letter-spacing: 1px;
  background: rgba(10, 7, 6, .65); color: #d8d0c0; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); }
.r3 .wc-rar { color: #cfe6f8; box-shadow: 0 0 0 1px rgba(159, 194, 221, .7); }
.r4 .wc-rar { color: #e6d0ff; box-shadow: 0 0 0 1px rgba(185, 138, 255, .9), 0 0 8px rgba(185, 138, 255, .6); }
.r5 .wc-rar { color: #2e1800; background: linear-gradient(180deg, #fff6d0, #ffd34d 55%, #c8901a); box-shadow: 0 0 10px rgba(255, 210, 90, .8); }
.wc-ref { position: absolute; left: 6px; bottom: 5px; z-index: 3; font: 10px 'Press Start 2P', monospace; color: #ffe6a6; text-shadow: 0 2px 0 #000, 0 0 6px rgba(255, 210, 120, .8); }
.wc-eq { position: absolute; right: 6px; bottom: 6px; z-index: 3; font-style: normal; font-size: 10px; font-weight: 800; padding: 1px 7px; border-radius: 999px;
  color: #2a1400; background: linear-gradient(180deg, var(--gold-1), var(--gold-2)); box-shadow: 0 0 8px rgba(255, 210, 120, .6); }
/* SSR: แสงวิ่งผ่าน + ประกายดาวกระพริบ */
.r5 .wc-art::before, .r5 .wd-art::before, .r5 .fc-art::before { content: ''; position: absolute; inset: -20%; z-index: 4; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 250, 220, .5) 48%, rgba(255, 255, 255, .8) 50%, rgba(255, 250, 220, .5) 52%, transparent 62%);
  transform: translateX(-70%); animation: ssrSweep 3.4s ease-in-out infinite; mix-blend-mode: screen; }
.r5 .wc-art::after, .r5 .wd-art::after, .r5 .fc-art::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(circle at 18% 22%, #fff 0 1px, rgba(255, 230, 150, .8) 1.5px, transparent 3px),
    radial-gradient(circle at 82% 30%, #fff 0 1px, rgba(255, 230, 150, .8) 1.5px, transparent 3px),
    radial-gradient(circle at 70% 82%, #fff 0 1px, rgba(255, 230, 150, .8) 1.5px, transparent 3px),
    radial-gradient(circle at 28% 74%, #fff 0 1px, rgba(255, 230, 150, .8) 1.5px, transparent 3px),
    radial-gradient(ellipse 60% 45% at 50% 50%, rgba(255, 220, 120, .28), transparent 70%);
  animation: ssrTwinkle 1.6s ease-in-out infinite alternate; }
@keyframes ssrSweep { 0%, 35% { transform: translateX(-70%); } 75%, 100% { transform: translateX(70%); } }
@keyframes ssrTwinkle { from { opacity: .35; } to { opacity: 1; } }
.locked .wc-art::before, .locked .wc-art::after, .locked .fc-art::before, .locked .fc-art::after { display: none; }

/* ข้อมูลใต้ภาพ */
.wc-info, .fc-info { display: flex; flex-direction: column; gap: 2px; padding: 6px 9px 8px; min-width: 0; }
.wc-info > b, .fc-info > b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 0 1px 2px #000; }
.wc-stars { font-size: 10px; letter-spacing: 1px; line-height: 1; color: #b8ad98; }
.r3 .wc-stars { color: #9fc2dd; } .r4 .wc-stars { color: #c58bff; } .r5 .wc-stars { color: var(--gold); text-shadow: 0 0 6px rgba(255, 210, 80, .7); }
.wc-row { display: flex; justify-content: space-between; gap: 6px; font-size: 11px; color: var(--ink-dim); }
.wc-row b { color: #ffe6a6; font-size: 12px; }
.wc-sk { display: flex; align-items: center; gap: 4px; }
.wc-sk i { width: 14px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); }
.wc-sk i.on { background: linear-gradient(90deg, #7ae8ff, #4fb4ff); box-shadow: 0 0 6px rgba(122, 232, 255, .6); }
.r5 .wc-sk i.on { background: linear-gradient(90deg, #fff1b0, #ffd34d); box-shadow: 0 0 6px rgba(255, 210, 80, .7); }
.wc-sk small { margin-left: 2px; font-size: 10px; color: var(--ink-dim); }
.wc-buy { margin-top: 2px; font-size: 10px; color: #ffd27a; }
.wc-skname { font-size: 10.5px; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wcard.shopw .btn { margin-top: 4px; }

/* แผงรายละเอียดอาวุธที่เลือก */
.wdetail2 { display: grid; grid-template-columns: clamp(150px, 22vw, 230px) 1fr; gap: 16px; padding: 12px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(48, 38, 32, .92), rgba(20, 16, 14, .92)); border: 1px solid rgba(227, 192, 122, .45); }
.wdetail2.r4 { border-color: rgba(185, 138, 255, .7); box-shadow: 0 0 18px rgba(185, 138, 255, .25); }
.wdetail2.r5 { border-color: rgba(255, 214, 120, .9); box-shadow: 0 0 22px rgba(255, 205, 90, .3); }
.wd-art { aspect-ratio: 1; border-radius: 12px; border: 2px solid rgba(255, 236, 200, .35); box-shadow: inset 0 0 30px rgba(0, 0, 0, .45); }
.wdetail2.r5 .wd-art { border-color: #ffd34d; }
.wd-art img { width: 84%; height: 84%; }
.wd-main { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.wd-head h3 { margin: 0; font-size: clamp(18px, 3.4vh, 26px); line-height: 1.15; }
.wd-head h3 small { color: #ffe6a6; font-size: .7em; }
.wd-stars { font-size: 13px; letter-spacing: 2px; color: #9fc2dd; }
.r2 .wd-stars { color: #b8ad98; } .r4 .wd-stars { color: #c58bff; } .r5 .wd-stars { color: var(--gold); text-shadow: 0 0 8px rgba(255, 210, 80, .7); }
.wd-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-tags span { padding: 2px 10px; border-radius: 999px; font-size: 12px; background: rgba(255, 236, 200, .07); border: 1px solid rgba(255, 236, 200, .15); }
.wd-tags span[style] { border-color: var(--c); color: var(--c); }
.wd-stat { display: flex; align-items: center; gap: 8px; max-width: 380px; }
.wd-stat small { width: 30px; font-size: 11px; color: var(--ink-dim); }
.wd-stat b { font-size: 18px; color: #ffe6a6; font-variant-numeric: tabular-nums; }
.wd-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(0, 0, 0, .45); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .1); }
.wd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #e2ae4c, #ffe6a6); box-shadow: 0 0 8px rgba(255, 214, 120, .5); }
.wd-skills { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px; }
.wd-skill { display: flex; gap: 8px; align-items: flex-start; padding: 7px 9px; border-radius: 10px; background: rgba(122, 232, 255, .06); border: 1px solid rgba(122, 232, 255, .3); }
.wd-skill .ws-n { flex-shrink: 0; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 6px; font: 10px 'Press Start 2P', monospace;
  color: #06202a; background: linear-gradient(180deg, #bff4ff, #4fb4ff); }
.wd-skill b { font-size: 13px; } .wd-skill em { font-style: normal; font-size: 11px; color: var(--gold-1); }
.wd-skill small { display: block; font-size: 11px; color: var(--ink-dim); line-height: 1.3; }
.wd-skill.lock { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .12); opacity: .7; }
.wd-skill.lock .ws-n { background: rgba(255, 255, 255, .1); font-size: 11px; }
.wdetail2 .modal-btns { justify-content: flex-start; margin-top: 2px; }

/* การ์ดแฟชัน: พื้นตามระดับ */
.fc-art { aspect-ratio: 1 / 1.05; border-bottom: 1px solid rgba(0, 0, 0, .5); }
.fc-art img { position: absolute; z-index: 2; left: 50%; bottom: 2%; height: 94%; width: auto; max-width: 96%; transform: translateX(-50%);
  image-rendering: pixelated; filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35)); transition: transform .25s; }
.fc-art.acc img { bottom: 7%; height: 86%; }
button.fcard:hover .fc-art img { transform: translateX(-50%) translateY(-3px); }
.fcard.r2 .fc-art { background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .04) 0 4px, transparent 4px 9px), linear-gradient(180deg, #3a3228, #6a5c48); }
.fcard.r3 .fc-art { background: radial-gradient(ellipse 70% 50% at 50% 100%, rgba(190, 225, 255, .35), transparent 65%), linear-gradient(180deg, #1c2632, #3e5a74); }
.fcard.r4 .fc-art { background: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, .5) 0 1px, transparent 2px) 0 0 / 19px 23px,
  radial-gradient(ellipse 70% 55% at 50% 100%, rgba(210, 160, 255, .5), transparent 65%), linear-gradient(180deg, #1c1030, #4a2a7a); }
.fcard.r5 .fc-art { background: radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255, 220, 130, .6), transparent 65%), linear-gradient(180deg, #2a1a06, #7a5214 60%, #c8901a); }
.fcard.none .fc-art { background: linear-gradient(180deg, #2a221c, #3a3028); }
.fcard .none-ic { font-size: 30px; color: var(--ink-dim); }
.fc-dye { position: absolute; left: 6px; bottom: 5px; z-index: 3; font-style: normal; font-size: 13px; filter: drop-shadow(0 1px 2px #000); }
.fc-info small { font-size: 11px; color: var(--ink-dim); }

@media (max-width: 760px), (max-height: 430px) {
  .wgrid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 7px; }
  .fgrid { grid-template-columns: repeat(auto-fill, minmax(106px, 1fr)); gap: 7px; }
  .wdetail2 { grid-template-columns: 120px 1fr; gap: 10px; padding: 8px; }
  .wc-info, .fc-info { padding: 4px 7px 6px; }
  .wc-info > b, .fc-info > b { font-size: 12px; }
  .wd-skills { grid-template-columns: 1fr; }
}
.wcard .btn svg { width: 14px; height: 14px; vertical-align: -2px; margin: 0 2px; }
.wcard .btn { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 2px; white-space: nowrap; }

/* =====================================================================
   หน้าสุ่ม (กาชา): ตู้ SSR เด่นกลาง · SR รองลงมา · ฉากสุ่มวงเวท + เปิดการ์ด · ประวัติการสุ่ม
   ===================================================================== */
.scout2 { flex: 1; display: flex; flex-direction: column; gap: 10px; min-height: 0; padding-bottom: calc(10px + var(--safe-b)); }
.scout2 .tabs-row { align-items: center; }
.sc-hist { margin-left: auto; }
.sc-banner { position: relative; flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(240px, 1.35fr) minmax(220px, 1fr);
  gap: 16px; padding: 16px 20px; border-radius: 16px; overflow: hidden; isolation: isolate; border: 1px solid rgba(255, 214, 120, .55);
  box-shadow: inset 0 0 60px rgba(0, 0, 0, .45), 0 10px 30px rgba(0, 0, 0, .4); }
.sc-banner.weapon { background: radial-gradient(ellipse 50% 70% at 50% 55%, rgba(255, 200, 90, .32), transparent 70%),
  radial-gradient(circle at 15% 20%, rgba(255, 236, 200, .35) 0 1px, transparent 2px) 0 0 / 37px 41px, linear-gradient(135deg, #1e140c, #3e2a14 50%, #1a120c); }
.sc-banner.fashion { background: radial-gradient(ellipse 50% 70% at 50% 55%, rgba(255, 160, 210, .32), transparent 70%),
  radial-gradient(circle at 15% 20%, rgba(255, 220, 240, .35) 0 1px, transparent 2px) 0 0 / 37px 41px, linear-gradient(135deg, #1e0c18, #3e1a34 50%, #160c1a); border-color: rgba(255, 170, 215, .55); }
.sc-rays { position: absolute; left: 50%; top: 52%; width: 150vmax; height: 150vmax; margin: -75vmax 0 0 -75vmax; z-index: -1; pointer-events: none; opacity: .22;
  background: repeating-conic-gradient(from 0deg, rgba(255, 230, 160, .9) 0 4deg, transparent 4deg 14deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 34%); mask: radial-gradient(circle, #000 0, transparent 34%); animation: scRays 40s linear infinite; }
.sc-banner.fashion .sc-rays { background: repeating-conic-gradient(from 0deg, rgba(255, 190, 230, .9) 0 4deg, transparent 4deg 14deg); }
@keyframes scRays { to { transform: rotate(360deg); } }

/* ซ้าย: ชื่อตู้ อัตรา สถิติ */
.sc-left { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; }
.sc-left small { font: 10px 'Press Start 2P', monospace; letter-spacing: 3px; color: var(--gold); }
.sc-left h3 { margin: 0; font-size: clamp(22px, 5vh, 36px); font-weight: 900; font-style: italic; line-height: 1.1;
  text-shadow: 2px 2px 0 #3a2410, 0 0 18px rgba(255, 210, 140, .45); }
.sc-left p { margin: 0; font-size: 12px; color: #e8dcc4; line-height: 1.5; }
.sc-rates { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-rates span { padding: 2px 10px; border-radius: 999px; font: 9px 'Press Start 2P', monospace; background: rgba(10, 7, 6, .6); }
.sc-rates .r5 { color: #2e1800; background: linear-gradient(180deg, #fff6d0, #ffd34d 55%, #c8901a); box-shadow: 0 0 10px rgba(255, 210, 90, .6); }
.sc-rates .r4 { color: #e6d0ff; box-shadow: 0 0 0 1px #b98aff; }
.sc-rates .r3 { color: #cfe6f8; box-shadow: 0 0 0 1px #9fc2dd; }
.sc-stat { padding: 6px 10px; border-radius: 8px; background: rgba(10, 7, 6, .45); }
.sc-stat b { color: #fff; } .sc-stat .c5 { color: var(--gold); } .sc-stat .c4 { color: #c58bff; }

/* กลาง: SSR เด่น */
.sc-stage { --elc: #ffd34d; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 0;
  border-radius: 16px; overflow: hidden; isolation: isolate; border: 2px solid rgba(255, 214, 120, .85);
  background: radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--elc) 55%, transparent), transparent 55%), radial-gradient(ellipse at 50% 100%, rgba(255, 200, 90, .4), transparent 60%),
    linear-gradient(180deg, rgba(30, 20, 10, .9), rgba(70, 46, 16, .9));
  box-shadow: 0 0 0 1px rgba(10, 7, 6, .7), 0 0 30px rgba(255, 205, 90, .45), inset 0 0 40px rgba(0, 0, 0, .5); }
.sc-stage.el-fire { --elc: #ff6b3d; } .sc-stage.el-wind { --elc: #4fdc7a; } .sc-stage.el-earth { --elc: #d8a24a; } .sc-stage.el-water { --elc: #3fa9ff; } .sc-stage.fash { --elc: #ff8ac8; }
.sc-stage.swap > * { animation: ssIn .5s ease-out both; }
@keyframes ssIn { from { opacity: 0; transform: scale(.85) translateY(10px); } }
.ss-halo { position: absolute; left: 50%; top: 42%; width: 74%; aspect-ratio: 1; transform: translate(-50%, -50%); z-index: -1; border-radius: 50%;
  border: 2px dashed rgba(255, 230, 160, .45); box-shadow: 0 0 40px color-mix(in srgb, var(--elc) 60%, transparent), inset 0 0 40px rgba(255, 230, 160, .25);
  animation: ssHalo 18s linear infinite; }
.ss-halo::after { content: ''; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(255, 230, 160, .35); }
@keyframes ssHalo { to { transform: translate(-50%, -50%) rotate(360deg); } }
.ss-art { width: 62%; max-height: 58%; object-fit: contain; image-rendering: pixelated; animation: ssBob 3s ease-in-out infinite;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, .35)) drop-shadow(0 0 18px rgba(255, 240, 200, .5)); }
.ss-art.fash { width: auto; height: 62%; }
@keyframes ssBob { 50% { transform: translateY(-8px); } }
.ss-pick { position: absolute; top: 14px; left: -34px; z-index: 3; width: 140px; padding: 3px 0; transform: rotate(-35deg); text-align: center;
  font: 9px 'Press Start 2P', monospace; letter-spacing: 2px; color: #fff; background: linear-gradient(90deg, #c8322a, #ff6a4a); box-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.ss-rar { top: 10px; right: 10px; font-size: 11px !important; padding: 3px 10px !important; }
.sc-stage .ss-rar { color: #2e1800; background: linear-gradient(180deg, #fff6d0, #ffd34d 55%, #c8901a); box-shadow: 0 0 12px rgba(255, 210, 90, .8); }
.ss-info { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 10px 8px;
  border-radius: 10px; background: linear-gradient(180deg, rgba(10, 7, 6, .35), rgba(10, 7, 6, .8)); text-align: center; }
.ss-stars { color: var(--gold); font-size: 12px; letter-spacing: 2px; text-shadow: 0 0 8px rgba(255, 210, 80, .8); }
.ss-info b { font-size: clamp(16px, 3.4vh, 22px); color: #fff6dc; text-shadow: 0 2px 0 #000, 0 0 12px rgba(255, 210, 120, .6); }
.ss-info small { font-size: 12px; color: #e8dcc4; }
.ss-info em { font-style: normal; font-size: 11px; color: #9affc0; }

/* ขวา: SSR ทั้งหมด (การ์ดทอง) + SR (ชิปเล็ก ไม่เด่นเท่า) */
.sc-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.sc-side h4 { margin: 2px 0 0; font-size: 13px; display: flex; align-items: baseline; gap: 6px; }
.sc-side h4 small { font-size: 10px; color: var(--ink-dim); font-weight: 400; }
.sc-side h4.h5 { color: var(--gold); text-shadow: 0 0 8px rgba(255, 210, 80, .5); }
.sc-side h4.h4 { color: #c58bff; margin-top: 6px; }
.sc-ssr { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 7px; }
.sc-mini { position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 0 4px; border-radius: 10px; overflow: hidden;
  border: 2px solid #e2ae4c; background: linear-gradient(180deg, #4a3414, #1e140a); box-shadow: 0 0 10px rgba(255, 205, 90, .35); transition: transform .12s, box-shadow .15s; }
.sc-mini img { width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; padding: 6px;
  background: radial-gradient(circle at 50% 55%, rgba(255, 220, 130, .45), transparent 65%); }
.sc-mini span { font-size: 10.5px; padding: 0 4px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff1c8; }
.sc-mini:hover { transform: translateY(-2px); }
.sc-mini.on { border-color: #fff6d0; box-shadow: 0 0 0 1px #fff6d0, 0 0 18px rgba(255, 214, 120, .8); }
.sc-mini i, .sc-chip i { position: absolute; top: 3px; left: 4px; font-style: normal; font-size: 10px; color: #9affc0; text-shadow: 0 1px 2px #000; }
.sc-sr { display: flex; flex-wrap: wrap; gap: 5px; }
.sc-chip { position: relative; width: 44px; height: 44px; border-radius: 8px; border: 1px solid rgba(185, 138, 255, .7); background: linear-gradient(180deg, #2c1c44, #160e22); opacity: .9; }
.sc-chip img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; padding: 4px; }

@media (max-width: 900px), (max-height: 460px) {
  .sc-banner { grid-template-columns: 1fr 1.2fr; padding: 10px 12px; gap: 10px; }
  .sc-side { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; overflow: visible; }
  .sc-side h4 { display: none; }
  .sc-ssr { display: flex; gap: 5px; }
  .sc-mini { width: 54px; } .sc-mini span { display: none; }
  .sc-chip { width: 34px; height: 34px; }
  .sc-left p:not(.sc-stat) { display: none; }
  /* จอเตี้ย: ภาพของเด่นอยู่ซ้าย ชื่ออยู่ขวา (ไม่ซ้อนกัน) */
  .sc-stage { flex-direction: row; gap: 8px; padding: 6px 10px 6px 18px; }
  .ss-halo { left: 28%; top: 50%; width: auto; height: 120%; }
  .ss-art { width: 42%; max-height: 92%; }
  .ss-art.fash { width: auto; height: 92%; }
  .ss-info { position: static; flex: 1; align-items: flex-start; text-align: left; background: none; padding: 0; }
  .ss-pick { top: 8px; left: -40px; width: 120px; font-size: 7px; }
}

/* ---------- ฉากสุ่ม ---------- */
.gacha { --gc: #8fd4ff; position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; overflow: hidden; user-select: none; }
.gacha.best4 { --gc: #c58bff; } .gacha.best5 { --gc: #ffd34d; }
.ga-bg { position: absolute; inset: 0; background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .5) 0 1px, transparent 2px) 0 0 / 53px 47px,
  radial-gradient(circle at 70% 60%, rgba(255, 255, 255, .35) 0 1px, transparent 2px) 0 0 / 71px 63px,
  radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--gc) 22%, #0c0812), #05030a 75%); animation: fade .3s; }
.gacha.done.best5 .ga-bg { background: radial-gradient(ellipse at 50% 45%, rgba(255, 200, 90, .35), transparent 60%), radial-gradient(ellipse at 50% 50%, #241808, #05030a 80%); }
/* วงเวทเรียก */
.ga-summon { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; transition: opacity .35s; }
.ga-circle { position: relative; width: min(60vh, 60vw); aspect-ratio: 1; display: grid; place-items: center; animation: gaIn .5s ease-out; }
.ga-circle i { position: absolute; border-radius: 50%; border: 3px solid var(--gc); box-shadow: 0 0 18px var(--gc), inset 0 0 18px var(--gc); }
.ga-circle i:nth-child(1) { inset: 0; border-style: dashed; animation: spin 6s linear infinite; }
.ga-circle i:nth-child(2) { inset: 14%; border-style: dotted; border-width: 5px; animation: spin 4s linear infinite reverse; }
.ga-circle i:nth-child(3) { inset: 30%; animation: spin 3s linear infinite; border-left-color: transparent; border-right-color: transparent; }
.ga-circle b { font-size: min(10vh, 64px); color: var(--gc); text-shadow: 0 0 20px var(--gc); animation: spin 2s linear infinite; }
.gacha.best5 .ga-circle i { animation-duration: 2.5s; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes gaIn { from { transform: scale(.3) rotate(-90deg); opacity: 0; } }
.ga-orb { position: absolute; width: 24vmin; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #fff 0, var(--gc) 35%, transparent 70%);
  filter: blur(2px); animation: orbGrow 1.2s ease-in forwards; }
.gacha.best4 .ga-orb { animation-duration: 1.5s; }
.gacha.best5 .ga-orb { animation: orbGrow 1.9s ease-in forwards, rainbow 0.6s linear infinite; }
@keyframes orbGrow { from { transform: scale(.1); opacity: .3; } 80% { opacity: 1; } to { transform: scale(1.6); opacity: 1; } }
@keyframes rainbow { to { filter: blur(2px) hue-rotate(360deg); } }
.ga-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.gacha.flashy .ga-flash { animation: gaFlash .7s ease-out; }
.gacha.reveal .ga-flash, .gacha.done .ga-flash { animation: gaFlash .5s ease-out; }
@keyframes gaFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
.gacha.reveal .ga-summon, .gacha.done .ga-summon { opacity: 0; }
.gacha.shake { animation: gaShake .45s; }
@keyframes gaShake { 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -5px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }

/* การ์ด */
.ga-cards { position: relative; display: none; grid-template-columns: repeat(5, clamp(92px, 15vw, 164px)); gap: clamp(8px, 1.6vw, 18px); perspective: 1200px; margin-top: -6vh; }
.ga-cards.one { grid-template-columns: clamp(170px, 26vw, 250px); }
.gacha.reveal .ga-cards, .gacha.done .ga-cards { display: grid; }
.gcard { position: relative; aspect-ratio: .7; animation: gcIn .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes gcIn { from { opacity: 0; transform: translateY(60px) scale(.6) rotate(-8deg); } }
.gc-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.3, 1.3, .5, 1); }
.gcard.flip .gc-inner { transform: rotateY(180deg); }
.gc-back, .gc-front { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 12px; }
.gc-back { display: grid; place-items: center; border: 2px solid #c8a060;
  background: repeating-linear-gradient(45deg, rgba(255, 220, 150, .06) 0 6px, transparent 6px 12px), radial-gradient(circle at 50% 50%, #3a2a50, #120c1e 75%);
  box-shadow: inset 0 0 0 4px rgba(10, 7, 6, .6), inset 0 0 0 5px rgba(227, 192, 122, .5), 0 8px 18px rgba(0, 0, 0, .55); }
.gc-back span { font-size: clamp(28px, 5vw, 52px); color: #e3c07a; text-shadow: 0 0 14px rgba(255, 214, 120, .7); }
.gcard.r4 .gc-back { box-shadow: inset 0 0 0 4px rgba(10, 7, 6, .6), inset 0 0 0 5px rgba(185, 138, 255, .6), 0 0 14px rgba(185, 138, 255, .55); }
.gcard.tease .gc-back { animation: tease .12s linear infinite; border-color: #ffd34d; box-shadow: 0 0 26px #ffd34d, 0 0 60px rgba(255, 200, 80, .6); }
.gcard.tease .gc-back span { color: #fff6d0; }
@keyframes tease { 50% { transform: translateX(3px) rotate(1.5deg); } }
.gc-front { transform: rotateY(180deg); }
.gc-front > .wcard, .gc-front > .fcard { height: 100%; }
.gc-front .wc-art { flex: 1; aspect-ratio: auto; }
.gc-front .fc-art { flex: 1; aspect-ratio: auto; }
.gc-front .wc-info small, .gc-front .fc-info small { font-size: 10.5px; color: var(--ink-dim); }
.gc-tag { align-self: center; margin: 0 0 7px; padding: 1px 9px; border-radius: 999px; font-style: normal; font-size: 10.5px; font-weight: 700;
  background: rgba(255, 236, 200, .1); color: var(--ink-dim); }
.gc-tag.new { color: #fff; background: linear-gradient(90deg, #ff4a7a, #ff8a5a); box-shadow: 0 0 10px rgba(255, 90, 120, .6); }
/* แสงหลังเปิดตามระดับ */
.gc-burst { position: absolute; inset: -40%; z-index: -1; pointer-events: none; opacity: 0; border-radius: 50%; }
.gcard.flip .gc-burst { animation: burst .7s ease-out forwards; }
.gcard.r3 .gc-burst { background: radial-gradient(circle, rgba(170, 220, 255, .55), transparent 55%); }
.gcard.r4 .gc-burst { background: radial-gradient(circle, rgba(200, 150, 255, .8), rgba(150, 90, 255, .3) 40%, transparent 62%); }
.gcard.r5 .gc-burst { inset: -90% -60%; border-radius: 0;
  background: repeating-conic-gradient(from 0deg, rgba(255, 225, 140, .75) 0 6deg, transparent 6deg 18deg);
  -webkit-mask: radial-gradient(circle, #000 0, transparent 60%); mask: radial-gradient(circle, #000 0, transparent 60%); }
.gcard.r5.flip .gc-burst { animation: burst .5s ease-out forwards, spin 7s linear infinite; }
@keyframes burst { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }
.gcard.r3.flip .gc-burst { animation: burst .5s ease-out, burstOut .9s .4s ease-in forwards; }
@keyframes burstOut { to { opacity: 0; } }
.gcard.r4.flip { filter: drop-shadow(0 0 12px rgba(185, 138, 255, .8)); }
.gcard.r5.flip { filter: drop-shadow(0 0 18px rgba(255, 210, 90, .95)); z-index: 2; }
.gcard.r5.flip::before { content: ''; position: absolute; left: 10%; right: 10%; top: -120vh; bottom: 30%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(255, 230, 150, .55) 70%, rgba(255, 255, 230, .9)); filter: blur(6px); animation: pillar .8s ease-out both; }
@keyframes pillar { from { transform: scaleY(0); transform-origin: bottom; opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
.gc-ssr { position: absolute; left: 50%; top: -14px; z-index: 5; transform: translateX(-50%) scale(0); font: 16px 'Press Start 2P', monospace; color: #fff6d0;
  text-shadow: 2px 2px 0 #8a5a12, 0 0 14px #ffd34d; pointer-events: none; }
.gcard.r5.flip .gc-ssr { animation: ssrPop .5s .35s cubic-bezier(.2, 1.6, .4, 1) forwards; }
@keyframes ssrPop { to { transform: translateX(-50%) scale(1); } }
/* จบ: สรุป + ปุ่ม */
.ga-end { position: absolute; left: 0; right: 0; bottom: calc(14px + var(--safe-b)); display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity .35s; }
.gacha.done .ga-end { opacity: 1; pointer-events: auto; }
.ga-sum { display: flex; gap: 8px; }
.ga-sum span { padding: 3px 12px; border-radius: 999px; font: 10px 'Press Start 2P', monospace; background: rgba(10, 7, 6, .7); }
.ga-sum .r5 { color: #2e1800; background: linear-gradient(180deg, #fff6d0, #ffd34d 55%, #c8901a); box-shadow: 0 0 12px rgba(255, 210, 90, .7); }
.ga-sum .r4 { color: #e6d0ff; box-shadow: 0 0 0 1px #b98aff, 0 0 10px rgba(185, 138, 255, .5); }
.ga-sum .r3 { color: #cfe6f8; box-shadow: 0 0 0 1px #9fc2dd; }
.ga-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.ga-skip { position: absolute; right: calc(16px + var(--safe-r)); bottom: calc(14px + var(--safe-b)); font-size: 12px; color: rgba(255, 236, 200, .7); animation: blink 1.4s steps(2) infinite; }
.gacha.done .ga-skip { display: none; }
@media (max-height: 460px) {
  .ga-cards { grid-template-columns: repeat(5, clamp(70px, 11vw, 120px)); margin-top: -10vh; }
  .ga-cards.one { grid-template-columns: clamp(130px, 22vw, 190px); }
  .gc-front .wc-info, .gc-front .fc-info { padding: 3px 5px 4px; }
  .gc-front .wc-info small, .gc-front .fc-info small, .gc-front .wc-stars { display: none; }
}

/* ---------- ประวัติการสุ่ม ---------- */
.sc-histm h3 { margin: 0 0 8px; }
.sh-stat { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sh-stat span { padding: 3px 12px; border-radius: 999px; font-size: 12px; background: rgba(255, 236, 200, .07); border: 1px solid rgba(255, 236, 200, .15); }
.sh-stat .r5 { border-color: rgba(255, 214, 120, .8); color: var(--gold); } .sh-stat .r4 { border-color: rgba(185, 138, 255, .8); color: #d8b8ff; } .sh-stat .r3 { color: #cfe6f8; }
.sh-stat small { color: var(--ink-dim); }
.sh-list { max-height: 48vh; display: flex; flex-direction: column; gap: 3px; padding-right: 4px; }
.sh-row { display: grid; grid-template-columns: 44px 36px 1fr auto 76px; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px;
  background: rgba(255, 236, 200, .04); border: 1px solid rgba(255, 236, 200, .08); }
.sh-row .wc-rar { position: static; text-align: center; }
.sh-row img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.sh-row b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sh-row em { font-style: normal; font-size: 11px; color: var(--ink-dim); }
.sh-row em.new { color: #ff7a9a; font-weight: 700; }
.sh-row small { font-size: 10.5px; color: var(--ink-mute); text-align: right; }
.sh-row.r4 { background: rgba(185, 138, 255, .1); border-color: rgba(185, 138, 255, .35); }
.sh-row.r5 { background: linear-gradient(90deg, rgba(255, 210, 90, .22), rgba(255, 210, 90, .05)); border-color: rgba(255, 214, 120, .7); box-shadow: 0 0 10px rgba(255, 205, 90, .25); }
.sh-row.r5 b { color: #fff1c8; }

/* แถบการันตี SSR (หน้าตู้ + ประวัติ) */
.sc-pity { display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; border-radius: 10px; background: rgba(10, 7, 6, .55); border: 1px solid rgba(255, 214, 120, .45); }
.sp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12px; }
.sp-top b { color: var(--gold); }
.sp-top em { font: 13px 'Press Start 2P', monospace; font-style: normal; color: #fff6dc; }
.sp-bar { height: 7px; border-radius: 4px; background: rgba(0, 0, 0, .55); overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 236, 200, .1); }
.sp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #8a5a12, #e2ae4c, #fff1b0); box-shadow: 0 0 8px rgba(255, 210, 90, .6); }
.sc-pity small, .sc-left .sc-pity small { font: 10px 'Kanit', sans-serif; letter-spacing: 0; color: var(--ink-dim); }
.sc-pity.near { border-color: #ffd34d; box-shadow: 0 0 14px rgba(255, 210, 90, .45); animation: pityPulse 1.6s ease-in-out infinite; }
@keyframes pityPulse { 50% { box-shadow: 0 0 22px rgba(255, 210, 90, .75); } }
.sc-histm .sc-pity { margin: 8px 0 0; }
.gc-pity { position: absolute; left: 50%; bottom: -12px; z-index: 5; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #2e1800; background: linear-gradient(180deg, #fff6d0, #ffd34d); box-shadow: 0 0 12px rgba(255, 210, 90, .8); opacity: 0; }
.gcard.flip .gc-pity { animation: pityIn .35s .55s both; }
@keyframes pityIn { from { opacity: 0; transform: translateX(-50%) scale(.5); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
@media (max-width: 900px), (max-height: 460px) { .sc-pity small { display: none; } }

/* ---------- บัญชีผู้เล่น (ชื่อผู้ใช้/รหัสผ่าน) + เลือกเซฟเมื่อชนกัน ---------- */
.lp-acct { display: flex; flex-direction: column; gap: 5px; padding: 8px 10px; border-radius: 10px; background: rgba(255, 236, 200, .05); border: 1px solid rgba(227, 192, 122, .3); }
.lp-sub { font-size: 12px; color: var(--gold-1); text-align: center; }
.lp-in { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--pn-line); background: rgba(0, 0, 0, .45); color: var(--ink);
  font: 14px 'Kanit', sans-serif; user-select: text; -webkit-user-select: text; outline: none; }
.lp-in:focus { border-color: var(--gold-1); box-shadow: 0 0 0 1px rgba(255, 220, 140, .4); }
.lp-in[readonly] { opacity: .7; }
.lp-row { display: flex; gap: 6px; }
.lp-row .btn { flex: 1; padding: 7px 8px; }
.sv-choice h3 { margin: 0 0 4px; }
.sv-cards { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 10px 0 4px; }
.sv-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(240px, 80vw); padding: 14px 12px; border-radius: 12px;
  background: linear-gradient(180deg, #3a2e24, #1a1410); border: 2px solid var(--pn-line); transition: transform .12s, border-color .15s; }
.sv-card:hover { transform: translateY(-3px); border-color: var(--gold-1); }
.sv-card i { font-style: normal; font-size: 30px; }
.sv-card b { font-size: 15px; color: var(--gold-1); }
.sv-card span { font-size: 16px; } .sv-card em { font-style: normal; font-size: 12px; color: #9affc0; }
.sv-card small { font-size: 11px; color: var(--ink-dim); text-align: center; }
.sv-card.cloud { border-color: rgba(122, 200, 255, .6); }
.cred { display: flex; flex-direction: column; gap: 6px; min-width: min(360px, 86vw); }
.cred h3 { margin: 0; }
/* กล่องล็อกอินสูงกว่าจอ: เลื่อนได้ · จอเตี้ยซ่อนโลโก้ */
.login { overflow-y: auto; justify-content: safe center; }
@media (max-height: 760px) { .login.open .login-logo { display: none; } }
.cfm { display: flex; flex-direction: column; gap: 8px; min-width: min(380px, 86vw); }
.cfm p { margin: 4px 0; font-size: 15px; line-height: 1.5; text-align: center; }
.cfm h3 { margin: 0; }
.cfm.kicked p small { display: block; margin-top: 6px; font-size: 12px; color: var(--ink-dim); }

/* =====================================================================
   แพตช์ใหญ่: ผจญภัย 10 แผนที่ · ดันเจี้ยน · อุปกรณ์สวมใส่ · ตีบวก +15
   ===================================================================== */
/* ---------- หน้าผจญภัย: แท็บแผนที่ (แบ่งโซน) + หัวแผนที่ + รางวัลดาว ---------- */
.adv { flex: 1; display: flex; gap: 10px; min-height: 0; padding-bottom: calc(10px + var(--safe-b)); }
.map-tabs { display: flex; flex-direction: column; gap: 8px; width: clamp(170px, 24vw, 250px); flex-shrink: 0; padding-right: 2px; }
.mz { display: flex; flex-direction: column; gap: 4px; }
.mz > small { font-size: 10.5px; color: var(--gold-1); letter-spacing: .5px; padding: 2px 4px; border-bottom: 1px solid rgba(227, 192, 122, .25); }
.mtab { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 8px; text-align: left; border-radius: 0;
  background: #211d24e6; border: 1px solid #6a5a44; box-shadow: inset 3px 0 0 var(--mc), 2px 2px 0 #100e14; transition: transform .1s steps(2), filter .12s; }
.mtab i { font-style: normal; font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
.mtab span { display: flex; flex-direction: column; min-width: 0; }
.mtab b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtab small { font-size: 10.5px; color: var(--ink-dim); }
.mtab:hover:not(:disabled) { filter: brightness(1.15); transform: translateX(2px); }
.mtab.on { background: linear-gradient(90deg, color-mix(in srgb, var(--mc) 35%, #2a221c), #211d24); border-color: var(--mc); box-shadow: inset 4px 0 0 var(--mc), 0 0 12px color-mix(in srgb, var(--mc) 40%, transparent), 2px 2px 0 #100e14; }
.mtab:disabled { opacity: .45; filter: grayscale(.8); }
.mtab em { position: absolute; top: -4px; right: -3px; font-style: normal; font-size: 11px; font-weight: 900; padding: 0 6px; background: #3fcf78; color: #00301a; box-shadow: 2px 2px 0 #111; animation: pulse 1s ease-in-out infinite alternate; }
@keyframes pulse { to { filter: brightness(1.35); } }
.map-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.map-head { display: flex; gap: 12px; padding: 10px 12px; flex-shrink: 0; border: 2px solid color-mix(in srgb, var(--mc) 60%, #87704b);
  background: radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--mc) 28%, transparent), transparent 60%), #211d24eb; box-shadow: inset 0 0 0 3px #100e1466, 4px 4px 0 #100e1466; }
.mh-info { flex: 1; min-width: 0; }
.mh-info small { font-size: 10.5px; color: var(--ink-dim); }
.mh-info h3 { margin: 2px 0; font-size: clamp(17px, 3.2vh, 24px); color: #fff0d2; text-shadow: 0 2px 0 #000; }
.mh-info p { margin: 0 0 4px; font-size: 12px; color: var(--ink-dim); line-height: 1.4; }
.mh-foes { display: flex; flex-wrap: wrap; gap: 0; }
.mh-foes .chip { font-size: 11px; padding: 1px 8px; }
.chip.elite { border-color: #ffb44a; color: #ffd48a; }
.star-track { width: clamp(200px, 30%, 300px); flex-shrink: 0; display: flex; flex-direction: column; gap: 5px; }
.st-top { display: flex; align-items: baseline; gap: 6px; }
.st-top b { font-size: 20px; color: var(--gold); text-shadow: 0 0 8px rgba(255, 210, 80, .6); }
.st-top small { font-size: 10.5px; color: var(--ink-dim); line-height: 1.2; }
.st-bar { position: relative; height: 8px; background: #0d0b10; box-shadow: inset 0 0 0 1px #6a5a44; }
.st-bar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #ffd34d 0 6px, #c8901a 6px 8px); }
.st-bar span { position: absolute; top: -2px; bottom: -2px; width: 2px; margin-left: -1px; background: #fff0d2; }
.st-chests { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.chest { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 3px; border-radius: 0; background: #17151b; border: 1px solid #6a5a44; box-shadow: 2px 2px 0 #100e14; }
.chest i { font-style: normal; font-size: 18px; line-height: 1.1; }
.chest b { font-size: 11px; color: var(--gold-1); }
.chest small { font-size: 9px; color: var(--ink-dim); text-align: center; line-height: 1.25; }
.chest.ready { border-color: #ffd34d; background: linear-gradient(180deg, #5a4214, #241a0c); animation: pulse .8s ease-in-out infinite alternate; }
.chest.ready small { color: #fff0d2; }
.chest.got { opacity: .55; }
.chest.got i { color: #7affb0; }
.chest:disabled { cursor: default; }
.stage.elite { background: linear-gradient(180deg, #5a4220, #241a0c); border-color: rgba(255, 190, 110, .6); }
.stage.elite .st-id { color: #ffc46a; }
.st-main em.el { color: #ffb44a; }
.st-pow { font-weight: 600; }
.st-pow.ok { color: #8aeaa0 !important; } .st-pow.mid { color: #ffd27a !important; } .st-pow.bad { color: #ff8a7a !important; }
.lvtag { font-size: 12px; font-weight: 600; color: var(--gold-1); padding: 1px 8px; border: 1px solid rgba(227, 192, 122, .5); vertical-align: middle; margin-left: 4px; }
.pow-cmp { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin: 6px 0; padding: 6px 10px; background: #17151b; border: 1px solid #6a5a44; border-left: 4px solid #8aeaa0; }
.pow-cmp span { font-size: 12px; color: var(--ink-dim); } .pow-cmp b { color: #fff0d2; font-size: 14px; }
.pow-cmp small { width: 100%; font-weight: 700; font-size: 12px; color: #8aeaa0; }
.pow-cmp.mid { border-left-color: #ffd27a; } .pow-cmp.mid small { color: #ffd27a; }
.pow-cmp.bad { border-left-color: #ff6a5a; } .pow-cmp.bad small { color: #ff8a7a; }
.loot-note { color: #ffe6a6 !important; }
@media (max-width: 900px), (max-height: 460px) {
  .map-tabs { width: 150px; }
  .mz > small { display: none; }
  .mtab { padding: 4px 6px; } .mtab i { font-size: 16px; width: 20px; } .mtab b { font-size: 12px; }
  .map-head { padding: 6px 8px; gap: 8px; }
  .mh-info p, .mh-foes { display: none; }
  .star-track { width: 46%; }
}

/* ---------- หน้าดันเจี้ยน ---------- */
.dungeon { flex: 1; min-height: 0; padding-bottom: calc(10px + var(--safe-b)); }
.dungeon > .tip { margin: 0 0 8px; }
.dg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dg-card { display: flex; flex-direction: column; gap: 6px; padding: 10px; border: 2px solid color-mix(in srgb, var(--mc) 60%, #87704b);
  background: radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--mc) 25%, transparent), transparent 60%), #211d24eb; box-shadow: inset 0 0 0 3px #100e1466, 4px 4px 0 #100e1466; }
.dg-card.upgrade { grid-column: 1 / -1; }
.dg-card header { display: flex; align-items: center; gap: 10px; }
.dg-card header i { font-style: normal; font-size: 30px; width: 44px; height: 44px; display: grid; place-items: center; background: #17151b; border: 1px solid var(--mc); box-shadow: 2px 2px 0 #100e14; }
.dg-card header small { display: block; font-size: 10.5px; color: var(--ink-dim); }
.dg-card header b { font-size: 16px; color: #fff0d2; }
.dg-card p { margin: 0; font-size: 12px; color: var(--ink-dim); line-height: 1.4; }
.dg-drops { display: flex; align-items: center; gap: 4px; }
.dg-drops img { width: 34px; height: 34px; image-rendering: pixelated; box-shadow: 0 0 0 1px #000; }
.dg-drops small { font-size: 10px; color: var(--ink-dim); margin-left: 4px; }
.dg-floors { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 6px; }
.dg-floor { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 8px; border-radius: 0; text-align: left;
  background: linear-gradient(180deg, #3a2e24, #1a1410); border: 1px solid var(--mc); box-shadow: 2px 2px 0 #100e14; transition: transform .1s steps(2), filter .12s; }
.dg-floor b { font-size: 13px; color: #fff0d2; } .dg-floor small { font-size: 11px; color: var(--gold-1); } .dg-floor em { font-style: normal; font-size: 10px; color: var(--ink-dim); }
.dg-floor:hover:not(:disabled) { filter: brightness(1.15); transform: translateY(-2px); }
.dg-floor.locked { opacity: .5; filter: grayscale(.7); }
.menu-btn.dun { background: radial-gradient(ellipse at 85% 50%, rgba(180, 140, 255, .2), transparent 60%), linear-gradient(180deg, #3e3050, #181220); border-color: rgba(200, 170, 255, .55); }

/* ---------- แท็บอุปกรณ์: ช่องสวม 4 ส่วน + สรุปค่าพลัง + การ์ดอุปกรณ์ ---------- */
.eq-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; margin-bottom: 10px; }
.eq-doll { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eq-slot { display: flex; align-items: center; gap: 8px; padding: 6px; text-align: left; border-radius: 0; min-width: 0;
  background: #211d24; border: 2px solid #6a5a44; box-shadow: inset 0 0 0 2px #0f1015, 3px 3px 0 #100e14; transition: transform .1s steps(2), filter .12s; }
.eq-slot:hover { filter: brightness(1.15); transform: translateY(-2px); }
.eq-slot.r3 { border-color: #8dbacb; } .eq-slot.r4 { border-color: #bc91e7; } .eq-slot.r5 { border-color: #f0c96c; box-shadow: inset 0 0 0 2px #fff0b033, 3px 3px 0 #100e14, 0 0 12px #edb84d40; }
.eq-slot.empty { border-style: dashed; opacity: .8; }
.eq-slot.sel, .eq-slot.on { outline: 2px solid #fff4cc; outline-offset: 1px; }
.eq-ic { position: relative; width: 52px; height: 52px; flex-shrink: 0; display: grid; place-items: center; background: #17151b; box-shadow: inset 0 0 0 1px #000; }
.eq-ic img { width: 52px; height: 52px; image-rendering: pixelated; }
.eq-ic em { font-style: normal; font-size: 24px; opacity: .5; }
.eq-ic .wc-ref { left: 2px; bottom: 1px; font-size: 8px; }
.eq-tx { display: flex; flex-direction: column; min-width: 0; }
.eq-tx small { font-size: 10.5px; color: var(--ink-dim); }
.eq-tx b { font-size: 12.5px; color: #fff0d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-tx i { font-style: normal; font-size: 10.5px; color: var(--gold-1); }
.eq-sum { padding: 8px 10px; background: #17151bd9; border: 1px solid #6a5a44; }
.eq-sum h4 { margin-top: 0 !important; }
.eq-sum .stats.derived { grid-template-columns: 1fr 1fr; }
.g-opts { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0; }
.g-opts span { font-size: 11.5px; padding: 2px 8px; color: #bff4ff; background: rgba(122, 232, 255, .08); border: 1px solid rgba(122, 232, 255, .35); }
.g-stats { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.g-stats span { font-size: 12px; color: var(--ink-dim); } .g-stats b { font-size: 18px; color: #ffe6a6; }
.g-stats em { font-style: normal; font-size: 11px; font-weight: 800; margin-left: 4px; }
.g-stats em.up { color: #7affb0; } .g-stats em.down { color: #ff8a7a; }
.g-stats small { font-size: 10px; color: var(--ink-dim); }
.g-optn { color: #7ae8ff; letter-spacing: 1px; }
.warn { color: #ff8a7a !important; }
.wd-tags span.warn { border-color: #ff8a7a; }
.enh-tag b { color: #ffe6a6; }
.wc-eq.lock { background: #3a3448; color: #fff; }
.lv-how { font-size: 11px; color: var(--ink-dim); }
/* พื้นการ์ดอุปกรณ์ตามระดับ (ลายตารางเหล็ก) */
.wcard.gear.r3 .wc-art, .wd-art.gear.r3, .enh-art.gear.r3 .wd-art { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 12px), radial-gradient(ellipse 70% 50% at 50% 100%, rgba(190, 225, 255, .35), transparent 65%), linear-gradient(180deg, #1c2632, #3e5a74); }
.wcard.gear.r4 .wc-art, .wd-art.gear.r4, .enh-art.gear.r4 .wd-art { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .12) 0 2px, transparent 2px 12px), radial-gradient(ellipse 70% 55% at 50% 100%, rgba(210, 160, 255, .5), transparent 65%), linear-gradient(180deg, #1c1030, #4a2a7a); }
.wcard.gear.r5 .wc-art, .wd-art.gear.r5, .enh-art.gear.r5 .wd-art { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .1) 0 2px, transparent 2px 12px), radial-gradient(ellipse 70% 55% at 50% 100%, rgba(255, 220, 130, .6), transparent 65%), linear-gradient(180deg, #2a1a06, #7a5214 60%, #c8901a); }
.wcard.gear .wc-art img, .wd-art.gear img { width: 70%; height: 80%; }
@media (max-width: 900px), (max-height: 460px) {
  .eq-top { grid-template-columns: 1fr; }
  .eq-ic, .eq-ic img { width: 40px; height: 40px; }
}
/* ของที่ได้ในหน้าผลด่าน: อุปกรณ์ */
.loot.gear .gi { position: relative; }
.loot.gear .gi b { font: 8px 'Press Start 2P', monospace; }
.loot.gear .gi.r4 { box-shadow: 0 0 0 1px #bc91e7, 0 0 8px rgba(188, 145, 231, .6); }
.loot.gear .gi.r5 { box-shadow: 0 0 0 1px #f0c96c, 0 0 10px rgba(240, 201, 108, .8); }

/* ---------- หน้าต่างตีบวก ---------- */
.enh-modal { width: min(640px, 96vw) !important; }
.enh h3 small { font-size: 12px; color: var(--ink-dim); font-weight: 400; }
.enh-main { display: grid; grid-template-columns: clamp(130px, 30%, 190px) 1fr; gap: 14px; align-items: start; }
.enh-art { position: relative; }
.enh-art .wd-art { aspect-ratio: 1; border: 2px solid #87704b; }
.enh-art.r4 .wd-art { border-color: #bc91e7; } .enh-art.r5 .wd-art { border-color: #f0c96c; }
.enh-art .wd-art img { width: 78%; height: 78%; }
.enh-art .wc-ref { left: 8px; bottom: 6px; font-size: 13px; }
.enh-art.hammer { animation: enhHammer .76s steps(8) both; }
@keyframes enhHammer { 0% { transform: none; } 20% { transform: translateY(-6px) rotate(-3deg); } 45% { transform: translateY(3px) scale(1.04); filter: brightness(1.8); } 60% { transform: translateX(-3px); } 75% { transform: translateX(3px); } 100% { transform: none; } }
.enh-art.ok .wd-art { animation: enhOk 1s ease-out both; }
@keyframes enhOk { 0% { box-shadow: 0 0 0 0 #fff4cc, 0 0 40px #ffd34d; filter: brightness(2); } 100% { box-shadow: 0 0 0 0 transparent; filter: none; } }
.enh-art.fail .wd-art { animation: enhFail .6s steps(6) both; }
@keyframes enhFail { 0%, 100% { transform: none; filter: none; } 25% { transform: translateX(-5px); filter: grayscale(1) brightness(.6); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
.enh-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.enh-name { font-size: 17px; color: #fff0d2; }
.enh-lv { display: flex; align-items: center; gap: 10px; font: 18px 'Press Start 2P', monospace; color: #ffe6a6; }
.enh-lv i { font-style: normal; color: var(--ink-dim); font-size: 14px; }
.enh-lv .nx { color: #7affb0; text-shadow: 0 0 8px rgba(122, 255, 176, .6); }
.enh-lv em { font: 11px 'Press Start 2P', monospace; font-style: normal; color: #2e1800; background: var(--gold); padding: 3px 6px; }
.enh-pips { display: grid; grid-template-columns: repeat(15, 1fr); gap: 2px; max-width: 320px; }
.enh-pips i { height: 8px; background: #2a2630; box-shadow: inset 0 0 0 1px #4a4250; }
.enh-pips i.on { background: #8ad0ff; box-shadow: 0 0 4px rgba(138, 208, 255, .7); }
.enh-pips i.t2.on { background: #c08aff; box-shadow: 0 0 4px rgba(192, 138, 255, .7); }
.enh-pips i.t3.on { background: #ffd34d; box-shadow: 0 0 5px rgba(255, 211, 77, .8); }
.enh-stat { display: flex; flex-direction: column; gap: 2px; }
.enh-stat div { display: flex; align-items: baseline; gap: 8px; }
.enh-stat small { width: 70px; font-size: 11px; color: var(--ink-dim); }
.enh-stat b { font-size: 16px; color: #ffe6a6; } .enh-stat b.nx { color: #7affb0; } .enh-stat i { font-style: normal; color: var(--ink-dim); font-size: 12px; }
.enh-cost { display: flex; flex-wrap: wrap; gap: 6px; }
.enh-cost span { display: flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; background: #17151b; border: 1px solid #6a5a44; }
.enh-cost img { width: 24px; height: 24px; image-rendering: pixelated; }
.enh-cost svg { width: 16px; height: 16px; }
.enh-cost b { color: #fff0d2; }
.enh-cost span.lack { border-color: #ff6a5a; } .enh-cost span.lack b { color: #ff8a7a; }
.enh-rate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: 12px; color: var(--ink-dim); }
.enh-rate b { font-size: 18px; color: #7affb0; }
.enh-rate em { font-style: normal; color: #ff8a7a; font-weight: 700; } .enh-rate small { font-size: 11px; }
.enh-guard { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; padding: 4px 8px; background: rgba(255, 232, 160, .06); border: 1px solid rgba(255, 232, 160, .3); }
.enh-guard img { width: 22px; height: 22px; image-rendering: pixelated; }
.enh-guard.off { opacity: .5; cursor: default; }
@media (max-width: 600px), (max-height: 430px) { .enh-main { grid-template-columns: 110px 1fr; gap: 8px; } }
@media (max-height: 460px) {
  .map-head { padding: 4px 8px; }
  .mh-info small, .st-top small, .chest small { display: none; }
  .mh-info h3 { font-size: 15px; margin: 0; }
  .st-top b { font-size: 15px; }
  .chest { flex-direction: row; justify-content: center; gap: 4px; padding: 2px; }
  .chest i { font-size: 14px; }
  .adv .stage { padding: 5px 10px; }
  .adv .st-main b { font-size: 14px; }
}

/* แถบแฟชันที่เลือก (คลิก = เลือก · ดับเบิลคลิก = สวม/ถอด) */
.fsel-bar { display: flex; align-items: center; gap: 10px; margin: 6px 0 8px; padding: 6px 10px; background: #211d24eb; border: 2px solid #6a604f; box-shadow: inset 0 0 0 2px #0f1015, 3px 3px 0 #100e14; }
.fsel-bar.r3 { border-color: #8dbacb; } .fsel-bar.r4 { border-color: #bc91e7; } .fsel-bar.r5 { border-color: #f0c96c; }
.fsel-bar img { width: 46px; height: 46px; image-rendering: pixelated; box-shadow: 0 0 0 1px #000; }
.fsel-bar .none-ic { width: 46px; height: 46px; display: grid; place-items: center; font-size: 22px; color: var(--ink-dim); background: #17151b; }
.fsel-bar > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fsel-bar b { font-size: 14px; color: #fff0d2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsel-bar small { font-size: 11px; color: var(--ink-dim); } .fsel-bar small em { font-style: normal; color: #a8dfb3; font-weight: 700; }

/* ป้ายบอกตำแหน่งในด่าน (ใต้แถบ HP): "ถ้ำเหมืองร้าง 3-9 · ชื่อจุด" / "ชั้น 2 · ชื่อดันเจี้ยน" */
.stage-tag { flex-basis: 100%; min-width: 0; display: flex; align-items: center; gap: 6px; margin-top: -2px; padding: 3px 10px 3px 6px; overflow: hidden; white-space: nowrap;
  width: max-content; max-width: 100%; border-radius: 8px; background: linear-gradient(90deg, rgba(8, 6, 5, .62), rgba(8, 6, 5, .2)); text-shadow: 0 1px 2px #000; pointer-events: none; }
.stage-tag i { font-style: normal; font-size: 14px; }
.stage-tag b { font-size: 13px; font-weight: 700; color: var(--gold-1); letter-spacing: .3px; }
.stage-tag small { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 12px; color: var(--ink-dim); }
.stage-tag.dg b { color: #c8b0ff; }
.pause-place { margin: -2px 0 8px; text-align: center; font-size: 13px; color: var(--ink-dim); }
.pause-place b { color: var(--gold-1); }
.pause-place small { display: block; font-size: 11px; opacity: .8; }
@media (max-height: 460px) { .stage-tag { padding: 2px 8px 2px 5px; } .stage-tag b { font-size: 11px; } .stage-tag small { font-size: 10px; } }
/* รหัสจุดในหน้าผจญภัย (เช่น 1-10) อยู่บรรทัดเดียวเสมอ */
.stage .st-id { width: auto; min-width: 58px; white-space: nowrap; flex-shrink: 0; }
@media (max-width: 900px), (max-height: 460px) { .stage .st-id { min-width: 50px; font-size: 11px; } }

/* ===== เอกลักษณ์อาวุธ SR/SSR (weaponArtHtml / การ์ด / หน้าสุ่ม) ===== */
.wd-art-box { margin: 6px 0; padding: 8px 10px; border: 1px solid rgba(197, 139, 255, .45); background: linear-gradient(135deg, rgba(197, 139, 255, .12), rgba(20, 14, 10, .2)); display: grid; gap: 4px; }
.wd-art-box.r5 { border-color: rgba(255, 211, 77, .6); background: linear-gradient(135deg, rgba(255, 211, 77, .16), rgba(122, 232, 255, .06) 60%, rgba(20, 14, 10, .2)); }
.wd-art-box.basic { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .03); }
.wd-art-box > b { font-size: 13px; color: var(--gold-1, #ffe27a); }
.wd-art-box.r4 > b { color: #d8b0ff; }
.wd-art-box.basic > b { color: var(--ink-dim, #b8b0a0); }
.wd-art-box em { font-style: normal; font-size: 12px; font-weight: 700; color: #f4ead8; }
.wd-art-box small { display: block; font-size: 11px; color: var(--ink-dim, #b8b0a0); line-height: 1.35; }
.wd-art-box .wa-up { color: #c58bff; opacity: .85; }
.wc-arts { margin-top: 2px; font-size: 10px; font-weight: 700; color: #d8b0ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wc-arts.r5 { color: #ffe27a; text-shadow: 0 0 6px rgba(255, 211, 77, .5); }
.ss-arts { margin: 6px 0 0; font-size: 12px; font-weight: 700; color: #ffe27a; line-height: 1.35; }
.ss-arts span { font-weight: 400; font-size: 11px; color: #f4ead8; }
.tr-detail .wd-art-box { text-align: left; }

/* ===== ฉายา (title-data.js · UI.tab_title): สีตามความหายาก --tc · ระดับ 6 ไล่สีรุ้ง ===== */
.ttag { display: inline-block; max-width: 100%; padding: 1px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--tc, #d8cfbd); border: 1px solid color-mix(in srgb, var(--tc, #d8cfbd) 55%, transparent); background: color-mix(in srgb, var(--tc, #d8cfbd) 14%, rgba(10, 7, 6, .55)); text-shadow: 0 1px 2px #000; }
.ttag.big { font-size: 15px; padding: 2px 14px; }
.ttag.none { --tc: #8f8676; font-weight: 600; border-style: dashed; }
.ttag.tt0 { --tc: #8f8676; letter-spacing: 2px; }
.ttag.tt4 { box-shadow: 0 0 8px color-mix(in srgb, var(--tc) 45%, transparent); }
.ttag.tt5 { box-shadow: 0 0 10px rgba(255, 207, 74, .55); background: linear-gradient(90deg, rgba(90, 60, 10, .75), rgba(150, 105, 20, .55), rgba(90, 60, 10, .75)); color: #ffe48a; }
.ttag.tt6 { color: #fff; border-color: rgba(255, 255, 255, .55); box-shadow: 0 0 12px rgba(255, 122, 156, .6);
  background: linear-gradient(90deg, #b8325a, #b36a1e, #2f8f5a, #2a62b0, #7a3ab8, #b8325a) 0 0 / 300% 100%; animation: ttRainbow 4s linear infinite; }
@keyframes ttRainbow { to { background-position: 300% 0; } }
.hs-title { display: block; max-width: 100%; margin: 0 0 4px; padding: 0; background: none; border: 0; cursor: pointer; text-align: left; }
.t-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--pn-deep, rgba(10, 7, 6, .6)); border: 1px solid rgba(255, 236, 200, .12); }
.t-cur { flex: 1; min-width: 0; display: grid; gap: 4px; justify-items: start; }
.t-cur > small:first-child { font-size: 11px; color: var(--ink-dim); letter-spacing: 1px; }
.t-count { text-align: right; }
.t-count b { font-size: 24px; color: var(--gold-1, #ffe27a); }
.t-count span { color: var(--ink-dim); margin-left: 2px; }
.t-count small { display: block; font-size: 11px; color: var(--ink-dim); }
.t-chips .pill { display: inline-flex; align-items: center; gap: 5px; }
.t-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tc); box-shadow: 0 0 6px var(--tc); }
.t-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; margin-top: 8px; }
.trow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
  border-left: 3px solid var(--tc); background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 10%, rgba(10, 7, 6, .55)), rgba(10, 7, 6, .35)); }
.trow.lock { filter: saturate(.55); opacity: .82; }
.trow.eq { box-shadow: 0 0 0 1px var(--tc), 0 0 14px color-mix(in srgb, var(--tc) 40%, transparent); }
.trow.tt6.got { border-left-color: #fff; }
.tr-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.tr-head { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tr-rank { flex-shrink: 0; font-size: 10px; color: var(--tc); opacity: .85; }
.tr-new { font-style: normal; font-size: 10px; font-weight: 800; padding: 0 6px; border-radius: 999px; background: #ff5a6a; color: #fff; animation: blink 1s infinite; }
.tr-desc { font-size: 12px; color: var(--ink-dim); line-height: 1.35; }
.tr-bonus { font-size: 11px; font-weight: 600; color: #8fe3a8; }
.tr-prog { display: flex; align-items: center; gap: 8px; }
.tr-prog .bar { flex: 1; height: 5px; margin: 0; }
.tr-prog .bar i { background: var(--tc); }
.tr-prog small { font-size: 10px; color: var(--ink-dim); white-space: nowrap; }
.tr-lock { font-size: 16px; opacity: .6; }
.seg em.new { background: #ff5a6a; color: #fff; }
.title-toast { position: absolute; left: 50%; top: 14%; z-index: 300; transform: translateX(-50%); display: grid; justify-items: center; gap: 4px; padding: 10px 22px; pointer-events: none;
  border-radius: 14px; border: 1px solid var(--tc); background: rgba(14, 10, 8, .9); box-shadow: 0 0 24px color-mix(in srgb, var(--tc) 50%, transparent), 0 8px 24px rgba(0, 0, 0, .6);
  animation: ttToast 3.6s ease forwards; text-align: center; }
.title-toast small { font-size: 12px; color: var(--ink-dim); }
.title-toast small:first-child { color: var(--tc); font-weight: 700; letter-spacing: 1px; }
@keyframes ttToast { 0% { opacity: 0; transform: translate(-50%, -14px) scale(.9); } 10%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -6px); } }
@media (max-width: 900px), (max-height: 460px) { .t-list { grid-template-columns: 1fr; } .t-head { padding: 8px 10px; } .t-count b { font-size: 18px; } }
.pc-title { margin: -2px 0 4px; }
/* แท็บตัวละคร 7 แท็บ (เพิ่มฉายา): ชื่อแท็บไม่ตัดบรรทัด · จอกลางซ่อนไอคอนให้ชื่อพอดี */
.seg { min-width: 0; }
.seg span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 761px) and (max-width: 1100px) { .seg { gap: 4px; padding-left: 4px; padding-right: 4px; } .seg svg { display: none; } }

/* ===== คู่หู (pet-data.js · UI.tab_pet · ตู้สุ่มคู่หู) ===== */
.sc-banner.pet { background: radial-gradient(ellipse 50% 70% at 50% 55%, rgba(120, 230, 170, .3), transparent 70%),
  radial-gradient(circle at 15% 20%, rgba(210, 255, 225, .35) 0 1px, transparent 2px) 0 0 / 37px 41px, linear-gradient(135deg, #0c1a14, #163a2a 50%, #0c1612); border-color: rgba(140, 230, 180, .55); }
.sc-banner.pet .sc-rays { background: repeating-conic-gradient(from 0deg, rgba(170, 255, 200, .9) 0 4deg, transparent 4deg 14deg); }
.ss-pet { display: grid; place-items: center; width: 100%; height: 62%; }
.ss-art.pet { width: auto; height: 100%; max-height: 100%; }
.wcard.petc .wc-art img, .pcard-pet .wc-art img { width: 76%; height: 84%; }
button.wcard.petc:hover .wc-art img { transform: translateY(-4px) scale(1.04); }
.pet-detail { display: flex; gap: 14px; align-items: stretch; padding: 10px; margin-bottom: 8px; border-radius: 12px; border: 1px solid rgba(255, 236, 200, .14); background: rgba(10, 7, 6, .45); }
.pet-detail.r4 { border-color: rgba(185, 138, 255, .5); }
.pet-detail.r5 { border-color: rgba(255, 211, 77, .6); box-shadow: 0 0 16px rgba(255, 211, 77, .18); }
.pd-art { flex: 0 0 150px; display: grid; place-items: center; border-radius: 10px; background: radial-gradient(ellipse 70% 40% at 50% 88%, rgba(0, 0, 0, .45), transparent 70%), var(--elbg, #2a2420); }
.pet-detail.el-fire .pd-art { --elbg: linear-gradient(180deg, #2a120c, #6a2a14); }
.pet-detail.el-water .pd-art { --elbg: linear-gradient(180deg, #0c1a2e, #1a4a7a); }
.pet-detail.el-wind .pd-art { --elbg: linear-gradient(180deg, #0c2418, #1e5a3a); }
.pet-detail.el-earth .pd-art { --elbg: linear-gradient(180deg, #241a0c, #5a4220); }
.pd-art img { width: 136px; height: 136px; image-rendering: pixelated; animation: ssBob 3s ease-in-out infinite; }
.pd-info { flex: 1; min-width: 0; display: grid; gap: 6px; align-content: start; }
.pd-info .tip { margin: 0; }
.pd-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pd-head b { font-size: 18px; color: var(--gold-1, #ffe27a); }
.pd-head .wc-rar { position: static; }
.pd-el { font-size: 13px; font-weight: 700; }
.pd-bond { display: flex; align-items: center; gap: 2px; }
.pd-bond i { font-style: normal; font-size: 15px; color: rgba(255, 255, 255, .18); }
.pd-bond i.on { color: #ff6a8a; text-shadow: 0 0 6px rgba(255, 106, 138, .7); }
.pd-bond small { margin-left: 8px; font-size: 11px; color: var(--ink-dim); }
.pd-rows { display: grid; gap: 3px; font-size: 13px; }
.pd-rows b { color: #fff4cc; }
.pd-skill { color: #d8c8ff; }
.pet-detail .modal-btns { justify-content: flex-start; margin-top: 2px; }
.pet-empty { display: grid; justify-items: center; gap: 8px; padding: 18px; margin-bottom: 8px; border-radius: 12px; border: 1px dashed rgba(255, 236, 200, .25); text-align: center; }
@media (max-width: 900px), (max-height: 460px) { .pd-art { flex-basis: 104px; } .pd-art img { width: 96px; height: 96px; } .pd-head b { font-size: 15px; } .pd-rows { font-size: 12px; } }

/* ===== ต่อสู้ซ้ำอัตโนมัติ (UI.repeatBox / repeatHud / repeatNext / repeatSummary) ===== */
.repeat-box { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin: 8px 0 2px; padding: 9px 12px; border-radius: 12px;
  border: 1px solid rgba(122, 232, 255, .45); background: linear-gradient(135deg, rgba(60, 140, 200, .2), rgba(10, 7, 6, .4)); }
.repeat-box.locked { border-style: dashed; border-color: rgba(255, 236, 200, .2); background: rgba(10, 7, 6, .3); opacity: .8; }
.repeat-box b { color: #9ae8ff; font-size: 14px; }
.repeat-box small { display: block; font-size: 11px; color: var(--ink-dim); }
.repeat-box.locked b { color: var(--ink-dim); }
.rp-head { flex: 1 1 220px; min-width: 0; }
.rp-opts { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.rp-opts > span { font-size: 11px; color: var(--ink-dim); margin: 0 2px 0 6px; }
.rp-opts .pill { padding: 3px 10px; font-size: 12px; }
.rp-go { flex-shrink: 0; }
#repeat-bar { position: absolute; top: calc(100% + 6px); right: 0; white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 3px 4px 3px 10px; border-radius: 999px; background: rgba(10, 18, 26, .72); border: 1px solid rgba(122, 232, 255, .45);
  font-size: 13px; color: #e8f6ff; text-shadow: 0 1px 2px #000; }
#repeat-bar.hidden { display: none; }
#repeat-bar .rp-n b { color: #9ae8ff; }
#repeat-bar .rp-g { color: #8fe0ff; font-weight: 700; }
#repeat-bar .hud-btn { height: 30px; min-width: 0; padding: 0 10px; font-size: 12px; border-radius: 999px; }
#repeat-bar .rp-spd { color: #ffe27a; font-weight: 800; }
#repeat-bar .rp-stop.on { background: rgba(255, 120, 90, .35); }
.repeat-toast { position: absolute; left: 50%; top: 22%; z-index: 250; transform: translateX(-50%); display: grid; justify-items: center; gap: 2px; padding: 8px 18px;
  border-radius: 12px; background: rgba(10, 14, 20, .88); border: 1px solid rgba(122, 232, 255, .5); pointer-events: none; animation: ttToast 2.4s ease forwards; white-space: nowrap; }
.repeat-toast.lose { border-color: rgba(255, 110, 110, .6); }
.repeat-toast b { font-size: 15px; color: #bff4ff; }
.repeat-toast.lose b { color: #ffb0b0; }
.repeat-toast span { font-size: 12px; color: var(--ink-dim); }
.repeat-toast em { font-style: normal; font-weight: 800; color: #6fdcff; }
.rp-stats { display: flex; justify-content: center; gap: 18px; margin: 6px 0; font-size: 14px; }
.rp-stats b { color: #fff4cc; font-size: 18px; }
.rp-stats .gem b { color: #6fdcff; }
@media (max-width: 900px), (max-height: 460px) { #repeat-bar { font-size: 11px; gap: 4px; } #repeat-bar .hud-btn { padding: 2px 7px; font-size: 11px; } }
/* ต่อสู้ซ้ำอัตโนมัติ: AUTO ล็อก (กดไม่ได้) · ซ่อนจอยและปุ่มควบคุม */
#btn-auto.locked { opacity: .75; cursor: not-allowed; }
#btn-auto.locked::after { content: '🔒'; margin-left: 4px; font-size: 10px; }
#hud.repeat #joy, #hud.repeat #pad-right { display: none; }

/* ---------- ประกาศจากผู้ดูแล (UI.announce) ---------- */
.announce {
  position: fixed; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); z-index: 120;
  display: flex; align-items: center; gap: 10px; max-width: min(92vw, 720px); padding: 9px 18px;
  background: linear-gradient(180deg, var(--pn-hi), var(--pn)); border: 1px solid var(--pn-line-hi); border-radius: 12px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .55), 0 0 14px rgba(255, 210, 120, .25); pointer-events: none;
  animation: announce-in .35s ease-out; transition: opacity .4s, transform .4s;
}
.announce b { flex: none; color: var(--gold-1); font-weight: 800; white-space: nowrap; }
.announce span { color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.announce.out { opacity: 0; transform: translate(-50%, -10px); }
@keyframes announce-in { from { opacity: 0; transform: translate(-50%, -12px); } to { opacity: 1; transform: translate(-50%, 0); } }