/* Layout: full-bleed map with floating HUD; sheets slide up from the bottom; AR is a full-screen layer */
:root {
  --ink: #1b2a35;
  --ink-2: #566a77;
  --lagoon: #0fa39a;
  --lagoon-d: #0b7f78;
  --coral: #ff6b57;
  --sun: #ffc93c;
  --sand: #fffaf1;
  --totem: #7b5cff;
  --line: rgba(27, 42, 53, .12);
  --display: 'Mitr', 'Noto Sans Thai', system-ui, sans-serif;
  --body: 'IBM Plex Sans Thai', 'Noto Sans Thai', system-ui, sans-serif;
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --sl: max(14px, env(safe-area-inset-left, 0px));
  --sr: max(14px, env(safe-area-inset-right, 0px));
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: #dcefe9; color: var(--ink);
  font-family: var(--body); -webkit-tap-highlight-color: transparent; overscroll-behavior: none; }
button { font-family: var(--display); color: inherit; cursor: pointer; }
button:focus-visible { outline: 3px solid var(--sun); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- แผนที่ ---------- */
#map { position: fixed; inset: 0; background: #e6f1ec; }
.leaflet-tile-pane { filter: saturate(1.25) hue-rotate(-6deg) brightness(1.03); }
.leaflet-control-attribution { font-size: 10px; background: rgba(255, 255, 255, .7) !important; margin-bottom: calc(var(--sb) + 2px) !important; }

.me { position: relative; width: 40px; height: 40px; }
.me-dot { position: absolute; left: 11px; top: 11px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--lagoon); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.me-ring { position: absolute; inset: 0; border-radius: 50%; background: rgba(15, 163, 154, .35); animation: ping 2s ease-out infinite; }
@keyframes ping { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.6); opacity: 0; } }

.mon { position: relative; width: 72px; height: 72px; display: grid; place-items: end center; }
.mon img { width: 62px; height: 62px; position: relative; z-index: 1; transform-origin: 50% 100%;
  animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .18)); }
.mon i { position: absolute; bottom: 2px; left: 50%; width: 40px; height: 13px; margin-left: -20px; border-radius: 50%;
  border: 3px solid var(--rc, #5bbf6a); background: rgba(0, 0, 0, .12); }
.mon.far img { filter: saturate(.55) brightness(.95) drop-shadow(0 2px 1px rgba(0, 0, 0, .18)); }
.mon.near i { animation: glow 1.1s ease-in-out infinite; }
.mon.near img { animation-duration: 1.1s; }
@keyframes bob { 0%, 100% { transform: translateY(0) scaleY(1); } 50% { transform: translateY(-5px) scaleY(1.03); } }
@keyframes glow { 0%, 100% { box-shadow: 0 0 0 0 var(--rc); } 50% { box-shadow: 0 0 0 6px transparent; transform: scale(1.12); } }

.stop { position: relative; width: 44px; height: 64px; }
.stop::before { content: ""; position: absolute; left: 20px; top: 26px; width: 4px; height: 32px; border-radius: 2px; background: #3a3170; }
.stop b { position: absolute; left: 8px; top: 2px; width: 28px; height: 28px; border-radius: 6px; transform: rotate(45deg);
  background: linear-gradient(135deg, #a993ff, var(--totem)); border: 3px solid #fff; box-shadow: 0 3px 8px rgba(60, 40, 160, .45);
  animation: spin 4s linear infinite; }
.stop i { position: absolute; left: 10px; bottom: 0; width: 24px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .2); }
.stop.used b { background: linear-gradient(135deg, #d8d2ef, #a9a1c9); animation: none; transform: rotate(45deg) scale(.88); }
.stop.near b { box-shadow: 0 0 0 4px rgba(123, 92, 255, .35), 0 3px 8px rgba(60, 40, 160, .45); }
@keyframes spin { from { transform: rotate(45deg) rotateY(0); } to { transform: rotate(45deg) rotateY(360deg); } }

/* ---------- HUD ---------- */
.hud-top { position: fixed; top: calc(var(--st) + 12px); left: var(--sl); right: var(--sr); z-index: 1100;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; pointer-events: none; }
.hud-top > * { pointer-events: auto; }
.trainer { display: flex; align-items: center; gap: 10px; background: rgba(255, 255, 255, .92); border-radius: 18px;
  padding: 6px 14px 6px 6px; box-shadow: 0 4px 14px rgba(27, 42, 53, .16); backdrop-filter: blur(6px); }
.lv { width: 44px; height: 44px; border-radius: 14px; background: var(--lagoon); color: #fff; display: grid; place-items: center;
  line-height: 1; font-family: var(--display); }
.lv small { font-size: 10px; opacity: .85; letter-spacing: .08em; margin-top: 4px; }
.lv b { font-size: 20px; font-weight: 600; margin-top: -10px; }
.xp { display: grid; gap: 3px; min-width: 120px; }
.xpbar { height: 8px; border-radius: 4px; background: #e2ece9; overflow: hidden; }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--lagoon), #4fd1c5); border-radius: 4px; transition: width .6s; }
.xp span { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.chip { border: 0; border-radius: 99px; padding: 8px 14px; font-size: 13px; font-weight: 500; background: rgba(255, 255, 255, .92);
  box-shadow: 0 4px 14px rgba(27, 42, 53, .16); display: flex; align-items: center; gap: 6px; }
.chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3cc46a; box-shadow: 0 0 0 3px rgba(60, 196, 106, .25); }
.chip.demo::before { background: var(--sun); box-shadow: 0 0 0 3px rgba(255, 201, 60, .3); }

#nearby { position: fixed; right: var(--sr); bottom: calc(var(--sb) + 112px); z-index: 1100; display: grid; gap: 8px; }
.nb { border: 0; background: rgba(255, 255, 255, .94); border-radius: 16px; padding: 4px 10px 4px 4px; display: flex; align-items: center; gap: 4px;
  box-shadow: 0 4px 12px rgba(27, 42, 53, .16); font-size: 12px; font-variant-numeric: tabular-nums; }
.nb img { width: 40px; height: 40px; }
.nb.in { background: #e3f8f5; color: var(--lagoon-d); font-weight: 600; }

.hud-bottom { position: fixed; left: var(--sl); right: var(--sr); bottom: calc(var(--sb) + 18px); z-index: 1100;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; pointer-events: none; }
.hud-bottom > * { pointer-events: auto; }
.round { justify-self: start; width: 52px; height: 52px; border-radius: 50%; border: 0; background: #fff; color: var(--lagoon-d);
  display: grid; place-items: center; box-shadow: 0 4px 14px rgba(27, 42, 53, .2); }
.dex-btn { border: 0; background: none; display: grid; justify-items: center; gap: 4px; font-size: 13px; font-weight: 500;
  text-shadow: 0 1px 0 #fff, 0 0 6px #fff; }
.dex-ico { width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #34c4b8, var(--lagoon-d));
  border: 4px solid #fff; display: grid; place-items: center; box-shadow: 0 6px 18px rgba(11, 127, 120, .45); }
.dex-btn:active .dex-ico { transform: scale(.94); }
.balls { justify-self: end; display: flex; align-items: center; gap: 8px; background: #fff; border-radius: 99px; padding: 6px 14px 6px 6px;
  box-shadow: 0 4px 14px rgba(27, 42, 53, .2); font: 600 18px var(--display); font-variant-numeric: tabular-nums; }
.orb { width: 30px; height: 30px; border-radius: 50%; flex: none; position: relative;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .7) 0 10%, transparent 24%), var(--orb-top, #13a89e);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .2), 0 1px 2px rgba(0, 0, 0, .15); }
.orb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px; border-radius: 50%;
  background: #fff; }

#toast { position: fixed; left: 50%; top: calc(var(--st) + 76px); z-index: 3000; transform: translate(-50%, -10px); opacity: 0;
  max-width: min(92vw, 420px); width: max-content; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 14px;
  font-size: 14px; line-height: 1.45; text-align: center; transition: opacity .25s, transform .25s; pointer-events: none; }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- หน้าจับ ---------- */
#encounter { position: fixed; inset: 0; z-index: 2000; background: #000; overflow: hidden; touch-action: none; user-select: none; }
#cam, #ar { position: absolute; inset: 0; width: 100%; height: 100%; }
/* โหมดกล้อง: ซ้อนสีท้องฟ้าของตัวที่จับบนภาพกล้องเบา ๆ ให้รู้ว่าเป็นตัวไหน */
.enc-tint { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s ease;
  background: linear-gradient(180deg, var(--tint-a, transparent) 0%, transparent 60%); }
#encounter.cam-on .enc-tint { opacity: .3; }
#cam { object-fit: cover; }
#ar { display: block; }
.enc-top { position: absolute; top: calc(var(--st) + 12px); left: var(--sl); right: var(--sr); display: grid;
  grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.pill { border: 0; border-radius: 99px; padding: 9px 14px; background: rgba(255, 255, 255, .9); font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 3px 10px rgba(0, 0, 0, .2); }
.ar-toggle { color: var(--ink-2); }
.ar-toggle.on { background: var(--lagoon); color: #fff; }
.enc-name { justify-self: center; text-align: center; color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .6); display: grid; gap: 1px; }
.enc-name b { font: 600 22px var(--display); }
.enc-name span:last-child { font: 500 13px var(--display); letter-spacing: .04em; opacity: .95; }
.rar { justify-self: center; font: 500 11px var(--display); color: #fff; padding: 2px 9px; border-radius: 99px; text-shadow: none; }
#encMsg { position: absolute; left: 16px; right: 16px; top: calc(var(--st) + 112px); text-align: center; color: #fff;
  font: 500 15px var(--display); text-shadow: 0 1px 4px rgba(0, 0, 0, .7); pointer-events: none; }
#encMsg.pop { animation: msg .4s ease-out; }
@keyframes msg { from { transform: translateY(8px); opacity: 0; } }
#floatText { position: absolute; left: 50%; top: 32%; transform: translateX(-50%); font: 600 34px var(--display); color: #fff;
  -webkit-text-stroke: 1.5px var(--lagoon-d); text-shadow: 0 3px 0 var(--lagoon-d); opacity: 0; pointer-events: none; white-space: nowrap; }
#floatText.go { animation: floaty 1.3s ease-out; }
@keyframes floaty { 0% { opacity: 0; transform: translate(-50%, 16px) scale(.6); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  75% { opacity: 1; transform: translate(-50%, -10px) scale(1); } 100% { opacity: 0; transform: translate(-50%, -30px); } }
.enc-bottom { position: absolute; right: var(--sr); bottom: calc(var(--sb) + 18px); display: flex; align-items: center; gap: 8px;
  background: rgba(255, 255, 255, .9); border-radius: 99px; padding: 5px 14px 5px 5px; font: 600 17px var(--display); font-variant-numeric: tabular-nums; }
#flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
/* ปุ่มโยนและแถบความแรง: กดค้างให้แถบวิ่ง ปล่อยตอนแถบอยู่กลางจะแรงพอดี */
/* ปุ่มโยนเป็นลูกบิลเลียดเงาวาวสีเดียวกับลูกในมือ มีแผ่นขาวตรงกลางเป็นป้าย "โยน" */
.throw { position: absolute; left: 50%; bottom: calc(var(--sb) + 22px); transform: translateX(-50%); width: 112px; height: 112px; border: 4px solid #fff;
  border-radius: 50%; padding: 0; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .7) 0 6%, transparent 22%), var(--orb-top, #13a89e);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .35), inset -8px -10px 18px rgba(0, 0, 0, .18); touch-action: none; user-select: none; z-index: 6;
  display: grid; place-items: center; }
.throw-label { width: 60px; height: 60px; border-radius: 50%; background: #fff; color: var(--ink); font: 600 19px var(--display);
  display: grid; place-items: center; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .08); }
.throw:disabled { opacity: .45; }
.throw:active:not(:disabled) { transform: translateX(-50%) scale(.95); }
/* เฟสของหน้าจับ (ตั้งจากสคริปต์): ปุ่มโยนโผล่เฉพาะตอนพร้อมขว้างหรือกำลังชาร์จ ไม่ทับมินิเกม */
#encounter { animation: encIn .3s ease-out; }
#encounter:not([data-phase="ready"]):not([data-phase="charging"]) .throw { opacity: 0; transform: translate(-50%, 40px) scale(.9); pointer-events: none; }
#encounter[data-phase="ready"] .throw:not(:disabled) { animation: throwIn .45s cubic-bezier(.2, 1.4, .4, 1) backwards; }
.throw { transition: opacity .25s ease, transform .3s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes encIn { from { opacity: 0; } }
@keyframes throwIn { from { opacity: 0; transform: translate(-50%, 40px) scale(.8); } }
.enc-top { animation: dropIn .4s ease-out backwards; transition: opacity .3s ease; }
/* จบการจับ: ซ่อนชื่อและถาดลูก ให้การ์ดผลลัพธ์อ่านได้โดยไม่มีตัวหนังสือซ้อนอยู่ข้างหลัง */
#encounter[data-phase="done"] .enc-top, #encounter[data-phase="done"] .enc-tray, #encounter[data-phase="done"] .power { opacity: 0; }
.enc-tray { transition: opacity .3s ease; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-14px); } }
/* ไอคอนลูกในถาด: ลูกทึบ (ลูกปกติ/ทอง) หรือลูกลายแถบ (ลูกใหญ่) */
.mini-ball { --t: #13a89e; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; flex: none;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 10%, transparent 22%), var(--t);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); }
.mini-ball.great { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .8) 0 10%, transparent 22%),
  linear-gradient(180deg, #fff 0 28%, #2f6fd6 28% 72%, #fff 72%); }
.mini-ball.gold { --t: #ffc93c; }
.mini-ball.sel { box-shadow: 0 0 0 3px #ffc93c, 0 0 0 4px rgba(0, 0, 0, .2); }
/* ลูกแก้วที่เหลือในหน้าจับ แสดงเป็นไอคอนลูกบอลมุมซ้ายล่าง */
.enc-tray { position: absolute; left: var(--sl); top: calc(var(--st) + 64px); display: flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, .9); border-radius: 99px; padding: 6px 12px 6px 8px; font: 600 16px var(--display); z-index: 6;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.enc-tray b { margin-left: 4px; font-variant-numeric: tabular-nums; }
/* ป้ายคอมโบ มุมขวาบนใต้ปุ่ม AR เด้งทุกครั้งที่ต่อคอมโบ */
.combo { position: absolute; right: var(--sr); top: calc(var(--st) + 64px); z-index: 6; background: linear-gradient(135deg, #ffb74d, #ff7043);
  color: #fff; border-radius: 99px; padding: 6px 14px; font: 600 15px var(--display); box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.combo b { font-size: 18px; font-variant-numeric: tabular-nums; }
.combo[hidden] { display: none; }
/* ไอเทมมุมซ้ายล่าง แตะเพื่อเลือกใช้กับลูกถัดไป */
.enc-items { position: absolute; left: var(--sl); bottom: calc(var(--sb) + 26px); display: grid; gap: 10px; z-index: 6; }
.item { width: 58px; height: 58px; border-radius: 50%; border: 3px solid #fff; background: rgba(255, 255, 255, .92); color: var(--ink);
  display: grid; place-items: center; align-content: center; gap: 0; padding: 0; box-shadow: 0 4px 12px rgba(0, 0, 0, .25); font: 600 15px var(--display); }
.item small { font: 500 11px var(--display); color: var(--ink-2); }
.item:disabled { opacity: .4; }
#encounter:not([data-phase="ready"]) .enc-items { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.enc-items { transition: opacity .25s ease; }
.item.armed { background: #ffc93c; box-shadow: 0 0 0 3px #fff, 0 0 0 6px #ffc93c; }
.combo.bump { animation: trayBump .4s ease-out; }
/* วิธีเล่นครั้งแรก */
.coach { position: absolute; left: 50%; top: calc(var(--st) + 120px); transform: translateX(-50%); width: min(90vw, 340px); background: var(--sand);
  border-radius: 20px; padding: 16px 18px; box-shadow: 0 16px 40px rgba(0, 0, 0, .4); z-index: 20; font-size: 14px; line-height: 1.5; }
.coach b { font: 600 18px var(--display); }
.coach ol { margin: 8px 0 12px; padding-left: 20px; }
.coach li + li { margin-top: 4px; }
/* ป้ายโซนในหน้าสมุด */
.badges { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; max-width: 760px; }
.badge { font: 500 13px var(--display); padding: 5px 12px; border-radius: 99px; color: #fff; background: var(--zc, #888); opacity: .45; }
.badge.got { opacity: 1; box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--zc); }
/* เขย่าหน้าจับเมื่อโดนหรือถูกโจมตี */
/* ปิดการเขย่าทั้งหน้าจับ: การขยับทั้งจอที่เต็มหน้าจอทำให้บนมือถือเกิดภาพซ้อนค้าง */
@keyframes shake { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-6px, 2px); } 75% { transform: translate(6px, -2px); } }
.power { position: absolute; left: 50%; bottom: calc(var(--sb) + 150px); transform: translateX(-50%); width: min(70vw, 300px); height: 18px;
  border-radius: 9px; background: rgba(27, 42, 53, .55); border: 3px solid #fff; overflow: hidden; z-index: 6; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
/* จุดแรงพอดี สุ่มตำแหน่งใหม่ทุกครั้งที่เริ่มชาร์จ (ตั้งค่าผ่านตัวแปร --c) */
.power::after { content: ""; position: absolute; left: calc(var(--c, 50%) - var(--w, 10%) / 2); width: var(--w, 10%); top: 0; bottom: 0; background: rgba(255, 255, 255, .75); }
.power i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #4ade80, #facc15, #ef4444); }
/* ตัวชี้ตำแหน่งแรงตอนนี้ วิ่งตามแถบ */
.power em { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; margin-left: -2px; background: #fff; box-shadow: 0 0 6px rgba(255, 255, 255, .9); }
.power:not([hidden]) { animation: powerIn .3s cubic-bezier(.2, 1.3, .4, 1) backwards; }
@keyframes powerIn { from { opacity: 0; transform: translate(-50%, 12px); } }
/* ถาดลูกเด้งเมื่อจำนวนเปลี่ยน */
.enc-tray.bump { animation: trayBump .4s ease-out; }
@keyframes trayBump { 0% { transform: scale(.88); } 55% { transform: scale(1.08); } 100% { transform: scale(1); } }
#flash.go { animation: flash .45s ease-out; }
@keyframes flash { 0% { opacity: .85; } 100% { opacity: 0; } }

.result { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 340px); background: var(--sand);
  border-radius: 28px; padding: 22px 22px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); animation: rise .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes rise { from { transform: translate(-50%, -40%) scale(.85); opacity: 0; } }
.result img { width: 150px; height: 150px; margin: -70px auto 0; display: block; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.result h2 { font: 600 24px var(--display); margin: 6px 0 2px; text-wrap: balance; }
.result p { margin: 0 0 12px; color: var(--ink-2); }
.result ul { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 6px; }
.result li { display: flex; justify-content: space-between; background: #fff; border-radius: 12px; padding: 8px 12px; font-size: 14px;
  font-variant-numeric: tabular-nums; }
.result li b { color: var(--lagoon-d); font-family: var(--display); }
.cta { border: 0; border-radius: 16px; padding: 13px 18px; width: 100%; background: var(--lagoon); color: #fff; font-size: 17px; font-weight: 500;
  box-shadow: 0 4px 0 var(--lagoon-d); }
.cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lagoon-d); }

/* ---------- แผ่นเลื่อน (สมุดสะสม) ---------- */
.sheet { position: fixed; inset: 0; z-index: 2500; background: var(--sand); overflow-y: auto;
  padding: calc(var(--st) + 12px) var(--sr) calc(var(--sb) + 24px) var(--sl); animation: sheet .35s cubic-bezier(.2, .9, .3, 1); }
@keyframes sheet { from { transform: translateY(40px); opacity: 0; } }
.sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.sheet-head h2 { font: 600 24px var(--display); margin: 0; }
.muted { color: var(--ink-2); font-size: 14px; }
.x { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; border: 0; background: #fff; font-size: 17px; box-shadow: 0 2px 8px rgba(27, 42, 53, .12); }
#detail .x { margin-left: 0; }
#detail .rar { margin-left: auto; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-width: 760px; }
.dcard { border: 0; background: #fff; border-radius: 20px; padding: 12px 10px 12px; display: grid; justify-items: center; gap: 2px;
  box-shadow: 0 2px 10px rgba(27, 42, 53, .08); position: relative; }
.dcard img { width: 100px; height: 100px; }
.dcard .no { position: absolute; top: 8px; left: 12px; font: 500 12px var(--display); color: var(--ink-2); }
.dcard b { font: 600 17px var(--display); }
.dcard small { color: var(--ink-2); font-size: 12px; }
.dcard.locked img { filter: brightness(0) opacity(.18); }
.dcard.locked b { color: var(--ink-2); }
.dex-foot { margin-top: 20px; font-size: 14px; }
.dex-foot a { color: var(--lagoon-d); }
.viewer-stage { position: relative; aspect-ratio: 1 / 1; max-width: min(100%, 440px); margin: 0 auto; border-radius: 24px;
  background: radial-gradient(circle at 50% 70%, #eaf8f4, #cde9e3); overflow: hidden; }
.viewer-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.viewer-stage .hint { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: 12px; color: var(--ink-2); }
.d-desc { max-width: 60ch; margin: 14px auto 10px; line-height: 1.65; }
.ghost { display: block; margin: 0 auto; border: 2px solid var(--lagoon); background: transparent; color: var(--lagoon-d); border-radius: 14px;
  padding: 10px 16px; font-size: 15px; }
.d-h { font: 600 17px var(--display); margin: 22px 0 8px; max-width: 440px; margin-inline: auto; }
.d-list { list-style: none; padding: 0; margin: 0 auto; max-width: 440px; display: grid; gap: 6px; }
.d-list li { display: flex; justify-content: space-between; background: #fff; border-radius: 12px; padding: 10px 14px; font-variant-numeric: tabular-nums; }
.d-list li b { font-family: var(--display); }

/* ---------- หน้าเริ่ม ---------- */
#splash { position: fixed; inset: 0; z-index: 4000; display: grid; place-items: center; overflow-y: auto;
  padding: calc(var(--st) + 20px) var(--sr) calc(var(--sb) + 20px) var(--sl);
  background: radial-gradient(120% 80% at 50% 0%, #bff0e4 0, #7fd6c8 45%, #0fa39a 100%); }
.splash-in { width: min(100%, 420px); display: grid; gap: 14px; text-align: center; justify-items: center; }
.cast { display: flex; justify-content: center; align-items: flex-end; height: 130px; }
.cast img { width: 96px; height: 96px; margin: 0 -14px; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .2)); }
.cast img:nth-child(2n) { animation-delay: -1.2s; width: 80px; height: 80px; }
.cast img:nth-child(3) { width: 124px; height: 124px; z-index: 1; }
#splash h1 { font: 600 clamp(40px, 12vw, 58px) / 1 var(--display); margin: 0; color: #fff; text-shadow: 0 4px 0 var(--lagoon-d); }
#splash h1 span { color: var(--sun); }
#splash p { margin: 0; color: #08403c; font-size: 16px; line-height: 1.6; max-width: 34ch; }
#splash .cta { background: var(--sun); color: var(--ink); box-shadow: 0 5px 0 #d79d12; font-size: 19px; max-width: 320px; }
.link { border: 0; background: none; color: #08403c; text-decoration: underline; font-size: 14px; padding: 6px; }
#splash small { color: #0b5a54; font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- แผนที่รีสอร์ท ---------- */
.leaflet-image-layer { image-rendering: auto; }

/* ---------- หน้าตั้งค่าตำแหน่ง (?setup) ---------- */
.setup-mode .hud-bottom, .setup-mode #nearby, .setup-mode .hud-top { display: none; }
.setup { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2600; max-height: 46vh; overflow-y: auto; background: var(--sand);
  border-radius: 22px 22px 0 0; box-shadow: 0 -8px 30px rgba(0, 0, 0, .25); display: grid; gap: 10px;
  padding: 16px var(--sr) calc(var(--sb) + 18px) var(--sl); }
.setup h2 { margin: 0; font: 600 20px var(--display); }
.s-gps { margin: 0; padding: 8px 12px; border-radius: 12px; background: #fff3d6; font-size: 13px; font-variant-numeric: tabular-nums; }
.s-gps.ok { background: #dcf7ee; color: var(--lagoon-d); }
.s-steps { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.s-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 13px; font-variant-numeric: tabular-nums; }
.s-list li { background: #fff; border-radius: 10px; padding: 8px 10px; }
.s-row { display: flex; gap: 8px; flex-wrap: wrap; }
.s-row .ghost { margin: 0; flex: 1; }
.setup .cta:disabled { opacity: .5; box-shadow: none; }
.setup textarea { width: 100%; font: 12px/1.5 ui-monospace, Consolas, monospace; border: 1px solid var(--line); border-radius: 10px; padding: 8px; }
.setup p { margin: 0; font-size: 13px; line-height: 1.55; }
.s-note { color: var(--ink-2); }
.s-pin { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--coral); color: #fff;
  border: 2px solid #fff; font: 600 13px var(--display); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }

/* ---------- แจ้งเตือนเมื่ออยู่นอกเขตรีสอร์ท ---------- */
.zone-note { position: fixed; left: 50%; bottom: calc(var(--sb) + 128px); transform: translateX(-50%); z-index: 1100; width: max-content;
  max-width: min(92vw, 380px); background: var(--coral); color: #fff; padding: 9px 14px; border-radius: 14px; font: 500 14px var(--display);
  text-align: center; line-height: 1.45; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }

/* ---------- ป้ายชื่อโซนบนแผนที่ ---------- */
.leaflet-tooltip.zone-label { background: none; border: 0; box-shadow: none; padding: 0; }
.leaflet-tooltip.zone-label::before { display: none; }
.zone-label span { display: inline-block; padding: 3px 10px 4px; border-radius: 99px; background: var(--zc); color: #fff;
  font: 600 12px var(--display); letter-spacing: .03em; border: 2px solid #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
  white-space: nowrap; }
/* ธีมกลางคืน: แผงต่าง ๆ บนแผนที่ใช้สีเข้ม */
[data-map-theme="night"] .trainer, [data-map-theme="night"] .chip, [data-map-theme="night"] .nb,
[data-map-theme="night"] .balls, [data-map-theme="night"] .round { background: rgba(18, 52, 64, .92); color: #e6fbf7; }
[data-map-theme="night"] .xp span { color: #a9d8d2; }
[data-map-theme="night"] .xpbar { background: #24525f; }
[data-map-theme="night"] .dex-btn { color: #e6fbf7; text-shadow: 0 1px 3px #000; }

/* ---------- แผนที่มีชีวิต: เอฟเฟกต์ลอย ตัวผู้เล่น มินิพูลเด้งออกมา ---------- */
.map-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 450; }
.me { position: relative; width: 56px; height: 56px; }
.me-radar { position: absolute; left: 50%; top: 54%; width: 40px; height: 40px; margin: -20px; border-radius: 50%;
  border: 3px solid rgba(15, 163, 154, .75); animation: radar 2.6s ease-out infinite; }
.me-radar.d2 { animation-delay: 1.3s; }
@keyframes radar { from { transform: scale(.6); opacity: 1; } to { transform: scale(4.2); opacity: 0; } }
.me-avatar { position: absolute; left: 7px; top: 0; width: 42px; height: 42px; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 35%, #5fd3c7, #0b7f78);
  border: 3px solid var(--lagoon); box-shadow: 0 4px 10px rgba(0, 0, 0, .35); animation: bob 1.6s ease-in-out infinite; }
.me-avatar img { width: 150%; max-width: none; margin: -2px 0 0 -25%; }
.me::after { content: ""; position: absolute; left: 16px; bottom: 2px; width: 24px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .25); }
.mon { animation: monPop .55s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes monPop { from { transform: scale(0) translateY(20px); opacity: 0; } }
.mon.r-rare::after, .mon.r-legendary::after { content: "✦"; position: absolute; left: 6px; top: 6px; z-index: 2; color: #ffe066;
  font-size: 18px; text-shadow: 0 0 6px #ffb300; animation: twinkle 1.4s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { transform: scale(.6) rotate(0); opacity: .4; } 50% { transform: scale(1.2) rotate(30deg); opacity: 1; } }
.mon[data-fest]::before { content: attr(data-fest); position: absolute; right: 2px; top: 0; z-index: 2; font-size: 17px;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .4)); animation: bob 1.2s ease-in-out infinite; }

/* ป้ายเข้าโซน */
.zone-banner { position: fixed; left: 50%; top: calc(var(--st) + 84px); z-index: 1200; display: flex; align-items: center; gap: 10px;
  transform: translateX(-50%); width: max-content; max-width: min(92vw, 380px); padding: 8px 16px 8px 8px; border-radius: 20px;
  background: var(--zc, var(--lagoon)); color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); border: 3px solid #fff; pointer-events: none; }
.zone-banner.show { animation: bannerIn 3.2s ease both; }
@keyframes bannerIn { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.8); } 10% { opacity: 1; transform: translate(-50%, 0) scale(1.04); }
  15% { transform: translate(-50%, 0) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } }
.zone-banner img { width: 52px; height: 52px; background: rgba(255, 255, 255, .25); border-radius: 14px; }
.zone-banner b { display: block; font: 600 18px var(--display); }
.zone-banner span { font-size: 13px; opacity: .95; }

/* ป้ายเทศกาล */
.fest-banner { position: fixed; left: var(--sl); top: calc(var(--st) + 72px); z-index: 1100; max-width: min(70vw, 340px); text-align: left;
  border: 0; border-radius: 14px; padding: 7px 12px; font: 500 12.5px/1.45 var(--display); color: #fff;
  background: linear-gradient(135deg, var(--orb-top, #13a89e), var(--orb-band, #ffc93c)); box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.splash-fest { margin: 0; padding: 8px 14px; border-radius: 14px; background: rgba(255, 255, 255, .85); color: var(--ink); font: 500 14px var(--display); }

/* ---------- มินิเกม ---------- */
.challenge { position: absolute; inset: 0; z-index: 5; background: radial-gradient(circle at 50% 40%, rgba(10, 40, 50, .35), rgba(10, 25, 35, .8));
  backdrop-filter: blur(2px); color: #fff; touch-action: none; }
.mg-head { position: absolute; left: 16px; right: 16px; top: calc(var(--st) + 128px); text-align: center; display: grid; gap: 4px; }
.mg-title { font: 600 24px var(--display); text-shadow: 0 2px 6px rgba(0, 0, 0, .5); }
.mg-how { font-size: 14px; opacity: .92; }
.mg-bar { position: absolute; left: 20%; right: 20%; top: calc(var(--st) + 200px); height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.mg-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ffd54f, #ff8a65); border-radius: 4px; }
.mg-canvas { position: absolute; left: 0; right: 0; top: calc(var(--st) + 220px); bottom: calc(var(--sb) + 90px); width: 100%; height: auto; }
.mg-score { position: absolute; left: 0; right: 0; bottom: calc(var(--sb) + 40px); text-align: center; font: 600 22px var(--display); font-variant-numeric: tabular-nums; }
.mg-count { position: absolute; inset: 0; display: grid; place-items: center; font: 600 64px var(--display); opacity: 0; pointer-events: none;
  text-shadow: 0 4px 0 rgba(0, 0, 0, .25); }
.mg-count.show { opacity: 1; animation: countPop .4s ease-out; }
.mg-count.win { color: #b9f6ca; }
.mg-count.lose { color: #ffccbc; }
@keyframes countPop { from { transform: scale(1.6); opacity: 0; } }
.mg-skip { position: absolute; right: var(--sr); bottom: calc(var(--sb) + 34px); border: 0; border-radius: 99px; padding: 8px 16px;
  background: rgba(255, 255, 255, .85); color: var(--ink); font: 500 14px var(--display); }

/* ปุ่มหนีและชื่อมินิพูลอยู่เหนือมินิเกม */
.enc-top { z-index: 6; }