:root {
  --sand: #c99a63;
  --sand-2: #8a6340;
  --ink: #120d0a;
  --panel: #1c1512e6;
  --line: #ffffff1f;
  --gold: #ffcf5c;
  --red: #ff4f4f;
  --cyan: #62e8ff;
  --lime: #b7ff5c;
}

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

html, body {
  margin: 0; height: 100%; overflow: hidden; background: #0a0705;
  font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #f5e9d8; user-select: none; touch-action: none;
}

#app { position: fixed; inset: 0; }
#view { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── HUD ───────────────────────────────────────────── */
.hud {
  position: absolute; inset: 0 0 auto 0; padding: calc(10px + env(safe-area-inset-top)) 12px 0;
  pointer-events: none; display: flex; flex-direction: column; gap: 6px;
  max-width: 620px; margin: 0 auto;
}
.hud-row { display: flex; align-items: center; gap: 10px; }
.hp { flex: 1; }
.hp-num { font-size: 15px; font-weight: 800; text-shadow: 0 2px 4px #000; }
.hp-bar {
  height: 12px; border-radius: 99px; background: #00000066; border: 1px solid var(--line);
  overflow: hidden; margin-top: 3px;
}
.hp-bar i { display: block; height: 100%; width: 100%; border-radius: 99px;
  background: linear-gradient(90deg, #ff5d5d, #ff9a3d); transition: width .12s linear; }
.timer {
  font-variant-numeric: tabular-nums; font-weight: 800; font-size: 18px;
  padding: 3px 10px; border-radius: 99px; background: #00000080; border: 1px solid var(--line);
}
.kills { font-size: 11px; text-align: right; color: #e6d0b4; line-height: 1.1; }
.kills b { display: block; font-size: 17px; color: var(--gold); }

.xp { position: relative; height: 8px; border-radius: 99px; background: #00000066; border: 1px solid var(--line); }
.xp i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), #7affd6); box-shadow: 0 0 12px #62e8ff88; }
.xp b { position: absolute; right: 4px; top: 10px; font-size: 10px; color: #bfe9ff; letter-spacing: .08em; }

.skills {
  position: absolute; right: 12px; bottom: calc(18px + env(safe-area-inset-bottom));
  z-index: 12; display: grid; grid-template-columns: repeat(2, 58px); gap: 7px; pointer-events: auto;
}
.skill {
  position: relative; width: 58px; height: 58px; border-radius: 14px; overflow: hidden;
  border: 1px solid #ffffff2e; background: radial-gradient(circle at 50% 30%, #2a1c14, #120c08);
  color: #ffe6b8; font-family: inherit; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.skill .sk-ico { font-size: 22px; line-height: 1; filter: drop-shadow(0 2px 4px #000); }
.skill .sk-name {
  position: absolute; bottom: 2px; left: 0; right: 0; text-align: center;
  font-size: 8px; letter-spacing: .02em; color: #e6d0b4; white-space: nowrap; overflow: hidden;
}
.skill .sk-lv {
  position: absolute; top: 2px; right: 4px; font-size: 8.5px; font-weight: 800; color: var(--gold);
}
.skill i.cd {
  position: absolute; left: 0; right: 0; bottom: 0; height: 0%;
  background: #05030acc; border-top: 1px solid #ffffff33; transition: height .08s linear;
}
.skill.ready { border-color: #ffcf5c88; box-shadow: 0 0 0 1px #ffcf5c33, 0 0 14px #ffcf5c33; }
.skill.ready .sk-ico { transform: scale(1.06); }
.skills[hidden] { display: none; }
.skill.empty { opacity: .38; border-style: dashed; }
.skill.empty .sk-ico { font-size: 20px; color: #8f8272; }
.card.new { border-color: #ffcf5c; box-shadow: 0 0 0 1px #ffcf5c66, 0 6px 20px #ffcf5c22; }
.card.new .lv { color: #1a0d05; background: var(--gold); padding: 1px 6px; border-radius: 99px; font-weight: 900; }
.wchip {
  font-size: 10px; padding: 2px 7px; border-radius: 99px; background: #00000080;
  border: 1px solid var(--line); color: #ffe6b8;
  display: inline-flex; align-items: center; gap: 4px;
}
.wchip b { color: var(--gold); }

.bossbar {
  margin-top: 8px; padding: 6px 10px; border-radius: 10px;
  background: #2a0a0acc; border: 1px solid #ff5a3d66;
}
.bossbar span { font-size: 11px; font-weight: 800; color: #ffb3a0; letter-spacing: .06em; }
.bossbar .bb { height: 8px; margin-top: 4px; border-radius: 99px; background: #00000088; overflow: hidden; }
.bossbar .bb i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff2f2f, #ff9a3d); }
.bossbar[hidden] { display: none; }

.waveflag {
  position: absolute; top: 34%; left: 0; right: 0; text-align: center; pointer-events: none;
  font-size: 26px; font-weight: 900; letter-spacing: .12em;
  color: #fff; text-shadow: 0 0 22px #ff7a3d, 0 4px 12px #000;
  animation: flagIn .5s ease-out both;
}
@keyframes flagIn { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

/* ── จอย ───────────────────────────────────────────── */
.stick {
  position: absolute; left: 20px; bottom: calc(20px + env(safe-area-inset-bottom));
  width: 118px; height: 118px; border-radius: 50%;
  background: #00000055; border: 2px solid #ffffff26;
  display: grid; place-items: center; touch-action: none;
}
.stick i {
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8, #ffcf5c66); border: 2px solid #ffffff4d;
}

/* ── หน้าจอ ────────────────────────────────────────── */
.screen {
  position: absolute; inset: 0; z-index: 20; overflow-y: auto;
  display: grid; place-items: center; padding: 24px 18px;
  background:
    radial-gradient(80% 60% at 50% 0%, #3a1f0fcc 0%, transparent 60%),
    #0a0705ee;
  backdrop-filter: blur(2px);
}
.screen[hidden], .levelup[hidden], .waveflag[hidden], .hud[hidden], .stick[hidden] { display: none; }
.screen-inner { width: 100%; max-width: 460px; text-align: center; }
.kicker { font-size: 11px; letter-spacing: .34em; color: var(--gold); margin: 0 0 8px; }
h1 {
  margin: 0; font-size: 46px; line-height: .96; letter-spacing: -.03em; font-weight: 900;
  background: linear-gradient(100deg, #fff3d8, #ffcf5c 45%, #ff7a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 20px #ff7a3d55);
}
h1 span { display: block; color: transparent; }
.sub { color: #d6bda1; font-size: 13px; margin: 10px 0 16px; line-height: 1.5; }
.wallet {
  display: inline-flex; gap: 6px; align-items: center; margin: 0 0 12px;
  font-size: 13px; color: #ffe6b8; background: #00000066; border: 1px solid #ffcf5c33;
  padding: 5px 12px; border-radius: 99px;
}
.wallet b { color: var(--gold); font-size: 15px; }
.wallet span { color: #b8a184; font-size: 11px; }

.chars { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin: 0 0 14px; }
.chr {
  display: flex; gap: 8px; align-items: center; text-align: left; cursor: pointer;
  padding: 8px 9px; border-radius: 12px; font-family: inherit; color: inherit;
  background: linear-gradient(160deg, #2a1c14, #17100c);
  border: 1px solid #ffffff1f;
}
.chr .ico { font-size: 20px; }
.chr b { display: block; font-size: 12.5px; }
.chr span { font-size: 10px; color: #b8a184; line-height: 1.3; }
.chr.on { border-color: #ffcf5c; box-shadow: 0 0 0 1px #ffcf5c88, 0 6px 18px #ffcf5c22; background: linear-gradient(160deg, #3a2716, #1d1309); }
.chr.locked { opacity: .62; }
.chr.locked .ico { filter: grayscale(1); }
.chr .tag { margin-left: auto; font-size: 10px; color: var(--gold); white-space: nowrap; }

.ghost {
  width: 100%; margin-top: 8px; padding: 12px; cursor: pointer; font-family: inherit;
  font-size: 14px; font-weight: 800; color: #ffe6b8; border-radius: 12px;
  background: #ffffff0d; border: 1px solid #ffffff26;
}
.ghost:active { transform: translateY(2px); }

.shop-title { margin: 0 0 6px; font-size: 22px; color: #fff3d8; }
.shoplist { display: grid; gap: 7px; margin: 14px 0 16px; text-align: left; }
.sitem {
  display: flex; gap: 10px; align-items: center; padding: 10px 11px; border-radius: 12px;
  background: linear-gradient(160deg, #241a12, #150f0b); border: 1px solid #ffffff1f;
}
.sitem .ico { font-size: 21px; }
.sitem b { display: block; font-size: 13px; }
.sitem small { color: #b8a184; font-size: 10.5px; }
.sitem .pips { display: flex; gap: 2px; margin-top: 3px; }
.sitem .pips i { width: 9px; height: 4px; border-radius: 2px; background: #ffffff22; }
.sitem .pips i.on { background: var(--gold); }
.sitem button {
  margin-left: auto; padding: 8px 11px; border-radius: 9px; border: 0; cursor: pointer;
  font-family: inherit; font-weight: 800; font-size: 12px; color: #1a0d05;
  background: linear-gradient(120deg, #ffd166, #ff9a3d); white-space: nowrap;
}
.sitem button:disabled { background: #ffffff1a; color: #8f8272; cursor: default; }

.rank {
  font-size: 54px; font-weight: 900; line-height: 1; margin: 10px 0 4px; letter-spacing: -.04em;
  background: linear-gradient(120deg, #fff3d8, #ffcf5c 50%, #ff7a3d);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px #ff9a3d55);
}
.hud-gold b { color: var(--gold); }
.cta {
  width: 100%; padding: 15px; border: 0; border-radius: 12px; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 900; color: #1a0d05;
  background: linear-gradient(120deg, #ffd166, #ff8a3d 60%, #ff5d3d);
  box-shadow: 0 6px 0 #7a2d10, 0 14px 30px #ff5d3d44;
}
.cta:active { transform: translateY(3px); box-shadow: 0 3px 0 #7a2d10; }
.hint { font-size: 11px; color: #a89179; margin: 12px 0 0; line-height: 1.5; }

/* ── เลเวลอัป ───────────────────────────────────────── */
.levelup {
  position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; padding: 20px;
  background: #0a0705e6; backdrop-filter: blur(3px);
}
.levelup h2 { margin: 0 0 14px; font-size: 20px; text-align: center; }
.levelup .kicker { text-align: center; margin-bottom: 4px; }
.cards { display: grid; gap: 8px; width: 100%; max-width: 420px; }
.card {
  display: flex; gap: 10px; align-items: center; text-align: left; cursor: pointer;
  padding: 11px 12px; border-radius: 12px; font-family: inherit; color: inherit;
  background: linear-gradient(160deg, #2a1c14, #17100c);
  border: 1px solid #ffffff1f; box-shadow: 0 4px 0 #00000055;
}
.card:active { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.card .ico { font-size: 24px; width: 34px; text-align: center; }
.card .txt b { display: block; font-size: 14px; }
.card .txt span { font-size: 11.5px; color: #c8ad91; line-height: 1.35; }
.card .lv { margin-left: auto; font-size: 11px; color: var(--gold); white-space: nowrap; }

.stats { display: grid; gap: 6px; margin: 16px 0 20px; }
.stats div { display: flex; justify-content: space-between; font-size: 13px; color: #d9c2a8;
  border-bottom: 1px dashed #ffffff14; padding-bottom: 5px; }
.stats b { color: #fff; }

.vignette {
  position: absolute; inset: 0; z-index: 15; pointer-events: none; opacity: 0;
  transition: opacity .18s ease;
  background: radial-gradient(70% 70% at 50% 55%, transparent 45%, #ff2b2b66 100%);
}

.fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none;
  transition: opacity .4s ease; z-index: 40; }


/* ── 16:9 LANDSCAPE: HUD ซ้ายบน · ชิ้นส่วนขวาล่าง 4 ช่องเรียงแนวนอน ───────── */
@media (orientation: landscape) and (min-width: 620px) {
  .hud { left: max(14px, env(safe-area-inset-left)); right: auto; width: min(46vw, 470px); }
  .skills { grid-template-columns: repeat(4, 62px); right: max(16px, env(safe-area-inset-right)); }
  .stick { left: max(22px, env(safe-area-inset-left)); }
  .screen-inner { max-width: 780px; }
  .chars { grid-template-columns: repeat(4, 1fr); }
  .levelup .cards { flex-direction: row; max-width: 800px; }
  .levelup .card { flex: 1 1 0; }
  .screen h1 { font-size: clamp(40px, 7vw, 78px); }
}
.rotate { display: none; }
@media (orientation: portrait) {
  .rotate {
    display: block; position: fixed; left: 50%; transform: translateX(-50%);
    top: max(8px, env(safe-area-inset-top)); z-index: 40;
    padding: 7px 14px; border-radius: 99px; font-size: 12px; font-weight: 700;
    background: #1a120c99; color: var(--gold); border: 1px solid #ffcf5c55;
    pointer-events: none; white-space: nowrap;
  }
}
.sk-mount { font-size: 7px; letter-spacing: .06em; color: #ffcf5c99; font-weight: 800; }
.skill.empty .sk-mount { color: #8f827266; }

/* ── TPS crosshair ────────────────────────────────────────────────────────── */
.crosshair { position: fixed; left: 50%; top: 50%; width: 26px; height: 26px; transform: translate(-50%, -50%);
  z-index: 9; pointer-events: none; opacity: .85; }
.crosshair { filter: drop-shadow(0 0 2px #000) drop-shadow(0 0 4px #0008); }
.crosshair i { position: absolute; background: #6dffc0; box-shadow: 0 0 8px #6dffc0, 0 0 2px #000; }
.crosshair::after { content: ''; position: absolute; inset: 7px; border: 1px solid #6dffc088; border-radius: 50%; }
.crosshair i:nth-child(1) { left: 12px; top: 0; width: 2px; height: 8px; }
.crosshair i:nth-child(2) { left: 12px; bottom: 0; width: 2px; height: 8px; }
.crosshair i:nth-child(3) { top: 12px; left: 0; height: 2px; width: 8px; }
.crosshair i:nth-child(4) { top: 12px; right: 0; height: 2px; width: 8px; }
.crosshair b { position: absolute; left: 11px; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: #7dffc8; }
.crosshair[hidden] { display: none; }

/* ชิ้นส่วนในโหมด 16:9: ช่องใหญ่ขึ้น อ่านชื่อออก */
@media (orientation: landscape) and (min-width: 620px) {
  .skills { grid-template-columns: repeat(4, 70px); gap: 8px; }
  .skill { width: 70px; height: 66px; }
  .sk-name { font-size: 9px; }
  .sk-ico { font-size: 22px; }
  .crosshair { width: 30px; height: 30px; }
  .crosshair i:nth-child(1), .crosshair i:nth-child(2) { left: 14px; height: 10px; }
  .crosshair i:nth-child(3), .crosshair i:nth-child(4) { top: 14px; width: 10px; }
  .crosshair b { left: 13px; top: 13px; width: 4px; height: 4px; }
}


/* ══ HUD v2: การ์ดผู้เล่นซ้าย · โซนกลาง · มินิแมพ/สถิติขวา ══════════════════ */
.hud { position: absolute; inset: 0; max-width: none; margin: 0; display: block;
  padding: calc(10px + env(safe-area-inset-top)) 14px 0; pointer-events: none; }
.pcard { position: absolute; left: 14px; top: calc(10px + env(safe-area-inset-top));
  display: flex; gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px;
  background: linear-gradient(180deg, #16233af2, #0a1120e6);
  border: 1px solid #3b5b86; box-shadow: 0 8px 24px #0009, inset 0 1px 0 #ffffff14; }
.portrait { position: relative; width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 30%, #24456f, #0b1524); border: 2px solid #62e8ff99;
  box-shadow: inset 0 0 14px #62e8ff33; }
.p-ico { font-size: 27px; line-height: 1; filter: drop-shadow(0 2px 4px #000); }
.p-badge { position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 900;
  padding: 1px 7px; border-radius: 99px; background: #7c3aed; color: #fff; border: 1px solid #c4b5fd88; }
.pinfo { min-width: 186px; }
.pname { display: flex; align-items: center; gap: 6px; font-size: 12px; letter-spacing: .07em; color: #eaf4ff; }
.pname .tag { font-size: 8px; font-weight: 800; padding: 1px 7px; border-radius: 99px; background: #1e3a5f; color: #8fd0ff; border: 1px solid #3b5b86; }
.hpbar { position: relative; height: 17px; border-radius: 6px; margin-top: 5px; background: #070c14; border: 1px solid #2a3a52; overflow: hidden; }
.hpbar i { display: block; height: 100%; width: 100%; background: linear-gradient(180deg, #8dff9f, #2fbf5a); transition: width .12s linear; }
.hpbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 900; color: #eafff0; text-shadow: 0 1px 2px #000; }
.shbar { height: 5px; margin-top: 3px; border-radius: 99px; background: #070c14; border: 1px solid #2a3a52; overflow: hidden; }
.shbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4ff0ff, #62a8ff); transition: width .12s linear; }
.xpbar { height: 5px; margin-top: 3px; border-radius: 99px; background: #070c14; border: 1px solid #2a3a52; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), #7affd6); box-shadow: 0 0 10px #62e8ff88; transition: width .1s linear; }

.zonebar { position: absolute; left: 50%; transform: translateX(-50%); top: calc(8px + env(safe-area-inset-top));
  display: flex; flex-direction: column; align-items: center; gap: 5px; }
.zname { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 900; letter-spacing: .12em; color: #eaf4ff;
  text-shadow: 0 2px 6px #000; }
.zname .pips { display: inline-flex; gap: 4px; }
.zname .pips i { width: 7px; height: 7px; border-radius: 50%; background: #43536b; display: block; }
.zname .pips i.on { background: #ff5d5d; box-shadow: 0 0 8px #ff5d5daa; }
.zname .mode { font-size: 8px; padding: 2px 7px; border-radius: 4px; background: #17351f; color: #7dffb0; border: 1px solid #2f6b45; }
.ztime { display: flex; align-items: center; gap: 7px; padding: 3px 12px 3px 7px; border-radius: 99px;
  background: #0b1220e0; border: 1px solid #3b5b86; box-shadow: 0 4px 14px #0008; }
.ztime .ball { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(180deg, #ff5d5d 0 48%, #f2efe6 48% 100%);
  border: 1px solid #0a0f18; position: relative; }
.ztime .ball::after { content: ''; position: absolute; left: 0; right: 0; top: 48%; height: 2px; background: #0a0f18; }
.ztime b { font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: .04em; }

.rightcol { position: absolute; right: 14px; top: calc(10px + env(safe-area-inset-top)); display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.minimap { position: relative; width: 132px; height: 132px; border-radius: 50%; padding: 4px;
  background: radial-gradient(circle, #0d1a2ccc, #060b12ee); border: 2px solid #7a2a2a; box-shadow: 0 8px 24px #000a, inset 0 0 20px #00000088; }
.minimap canvas { width: 100%; height: 100%; border-radius: 50%; display: block; }
.minimap .mm-gold { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900;
  padding: 2px 9px; border-radius: 99px; background: #0b1220; border: 1px solid #d9a83a88; color: var(--gold); white-space: nowrap; }
.season { width: 132px; padding: 7px 9px; border-radius: 10px; background: #140b1ee6; border: 1px solid #5b3a86; box-shadow: 0 6px 18px #0008; }
.season .shead { font-size: 8px; font-weight: 900; letter-spacing: .12em; padding: 2px 6px; border-radius: 4px;
  background: #7c3aed; color: #fff; display: inline-block; margin-bottom: 5px; }
.season .srow { display: flex; justify-content: space-between; font-size: 9px; color: #c9b7e6; letter-spacing: .05em; }
.season .srow b { color: #fff; font-variant-numeric: tabular-nums; }
.streak { margin-top: 4px; text-align: right; line-height: 1; }
.streak b { display: block; font-size: 27px; font-weight: 900; color: #ff9a3d; text-shadow: 0 0 14px #ff9a3d66; font-variant-numeric: tabular-nums; }
.streak span { font-size: 7.5px; font-weight: 800; letter-spacing: .18em; color: #ffd9b0; }

/* ── moves (ชิ้นส่วน) ซ้ายล่าง เรียงแนวนอน มีเลขคีย์ ─────────────────────── */
.moves { position: absolute; left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 12;
  display: flex; gap: 8px; pointer-events: auto; }
.moves[hidden] { display: none; }
.moves .skill { width: 74px; height: 74px; border-radius: 12px; background: radial-gradient(circle at 50% 25%, #1d2c44, #0a111c); border: 1px solid #3b5b86; }
.moves .skill .sk-ico { font-size: 26px; }
.moves .skill .sk-name { font-size: 8.5px; bottom: 3px; }
.moves .skill .sk-mount { position: absolute; top: 3px; left: 5px; font-size: 6.5px; letter-spacing: .06em; color: #8fd0ff99; }
.sk-key { position: absolute; top: 3px; right: 4px; font-size: 8px; font-weight: 900; color: #0a111c; background: #c9d6e6; border-radius: 3px; padding: 0 4px; }
.moves .skill i.cd { background: #05030ad9; }

/* ── level-up ตาม reference: หัวมีเลเวล/เวลา/สตรีค + ปุ่มล่าง ─────────────── */
.levelup .lu-head { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.lu-head .lvtag { font-size: 11px; letter-spacing: .14em; font-weight: 900; color: #b9c8dd; }
.lu-head .lvtag b { color: var(--gold); font-size: 16px; }
.lu-head .lutime { font-size: 12px; padding: 2px 10px; border-radius: 99px; background: #0b1220cc; border: 1px solid #3b5b86; font-variant-numeric: tabular-nums; }
.lu-head .lustreak { font-size: 11px; color: #ff9a3d; font-weight: 900; letter-spacing: .08em; }
.lu-actions { display: flex; gap: 10px; margin-top: 14px; }
.lu-actions button { display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px;
  background: #0e1729e6; border: 1px solid #3b5b86; color: #cfe0f5; font-family: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.lu-actions button:hover { border-color: #62e8ff; color: #fff; }
.lu-actions kbd { font-family: inherit; font-size: 9px; padding: 1px 5px; border-radius: 4px; background: #22304a; color: #9fb8d6; border: 1px solid #3b5b86; }
@media (max-width: 720px) {
  .moves .skill { width: 58px; height: 58px; }
  .season, .minimap { width: 108px; }
  .minimap { height: 108px; }
  .pinfo { min-width: 140px; }
}

kbd { font-family: inherit; font-size: 9px; font-weight: 800; padding: 1px 5px; border-radius: 4px;
  background: #0a111ccc; color: #cfe0f5; border: 1px solid #ffffff33; margin-left: 6px; vertical-align: middle; }
.cta kbd, .ghost kbd { background: #00000055; }

.devbadge { display: inline-block; font-size: 9px; font-weight: 900; letter-spacing: .12em; padding: 2px 7px;
  border-radius: 4px; background: #7c3aed; color: #fff; border: 1px solid #c4b5fd88; vertical-align: middle; }
.devbadge[hidden] { display: none; }
.chr.locked { opacity: .45; }

/* HUD v2 ต้องเต็มจอ: ทับกฎ landscape เดิมที่จำกัดความกว้าง 470px (ทำให้มินิแมพไปอยู่กลางซ้าย) */
@media (orientation: landscape) and (min-width: 620px) {
  .hud { left: 0; right: 0; width: auto; }
}

/* ── preview 3D 360° ของ part/perk ในหน้าต่างเลือก ───────────────────────── */
.lu-body { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 18px; align-items: center; width: 100%; max-width: 880px; }
.lu-preview { position: relative; width: 300px; height: 300px; border-radius: 18px;
  background: radial-gradient(circle at 50% 35%, #16283f, #070c14 70%);
  border: 1px solid #3b5b86; box-shadow: inset 0 0 40px #62e8ff1a, 0 10px 30px #0008; overflow: hidden; }
.lu-preview canvas { width: 100%; height: 100%; display: block; }
.lu-prev-text { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px;
  background: linear-gradient(0deg, #050a12ee, #050a1200); text-align: center; }
.lu-prev-text b { display: block; font-size: 13px; color: #eaf4ff; letter-spacing: .04em; }
.lu-prev-text span { display: block; font-size: 10px; color: #9fb8d6; margin-top: 2px; }
@media (orientation: landscape) and (min-width: 620px) {
  .levelup .cards { flex-direction: column; max-width: none; }
  .levelup .card { flex: initial; }
}
@media (max-width: 860px) {
  .lu-body { grid-template-columns: 200px minmax(0, 1fr); gap: 12px; }
  .lu-preview { width: 200px; height: 200px; }
}

/* ── ปุ่มกระโดด ───────────────────────────────────────────────────────────── */
.jumpbtn { position: absolute; right: 18px; bottom: calc(104px + env(safe-area-inset-bottom)); z-index: 12;
  width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; gap: 0;
  background: radial-gradient(circle at 50% 30%, #1d3550, #0a111c); border: 1px solid #4ff0ff88;
  color: #bff3ff; font-family: inherit; font-size: 24px; font-weight: 900; cursor: pointer;
  box-shadow: 0 6px 18px #0008, inset 0 0 16px #62e8ff22; pointer-events: auto; }
.jumpbtn span { font-size: 7px; letter-spacing: .16em; color: #7fd8ef; }
.jumpbtn:active { transform: scale(.94); }
.jumpbtn[hidden] { display: none; }
@media (orientation: landscape) and (min-width: 620px) { .jumpbtn { right: 26px; bottom: 24px; width: 58px; height: 58px; } }

/* ── guest login gate ─────────────────────────────────────────────────────── */
.gate-box { display: flex; gap: 10px; justify-content: center; align-items: stretch; margin: 14px 0 6px; flex-wrap: wrap; }
.gate-box input { min-width: 260px; padding: 12px 16px; border-radius: 12px; background: #0b1220dd;
  border: 1px solid #3b5b86; color: #eaf4ff; font-family: inherit; font-size: 14px; outline: none; }
.gate-box input:focus { border-color: #62e8ff; box-shadow: 0 0 0 2px #62e8ff33; }
.profiles { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.profiles button { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 10px;
  background: #0e1729cc; border: 1px solid #3b5b86; color: #cfe0f5; font-family: inherit; font-size: 12px; cursor: pointer; }
.profiles button:hover { border-color: #62e8ff; color: #fff; }
.profiles small { color: #7f95ad; }
.profchip { margin-left: 8px; padding: 3px 10px; border-radius: 99px; background: #0e1729cc; border: 1px solid #3b5b86;
  color: #cfe0f5; font-family: inherit; font-size: 11px; cursor: pointer; }
.profchip:hover { border-color: #62e8ff; }