/* ฟอนต์ของเกม (DESIGN.md): Kanit + Bai Jamjuree · Google Fonts ใบอนุญาต SIL OFL 1.1 (ใช้เชิงพาณิชย์/ฝังได้) · เก็บในเว็บเอง เฉพาะชุดไทย+ละติน · font-display: swap */
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/BaiJamjuree-500-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 500; font-display: swap; src: url(fonts/BaiJamjuree-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/BaiJamjuree-600-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 600; font-display: swap; src: url(fonts/BaiJamjuree-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/BaiJamjuree-700-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/BaiJamjuree-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/Kanit-700i-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: italic; font-weight: 700; font-display: swap; src: url(fonts/Kanit-700i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: italic; font-weight: 800; font-display: swap; src: url(fonts/Kanit-800i-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: italic; font-weight: 800; font-display: swap; src: url(fonts/Kanit-800i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: italic; font-weight: 900; font-display: swap; src: url(fonts/Kanit-900i-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: italic; font-weight: 900; font-display: swap; src: url(fonts/Kanit-900i-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Kanit-700-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Kanit'; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/Kanit-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================================================
   หน้าตาเกม = สไตล์สปอร์ต (human เคาะ 2026-10-26 · กติกาเต็ม DESIGN.md · ต้นแบบ reports/design_styles_20261026/sport/)
   พื้นมืด · สีทีมสว่างแบบนีออน · ตัวเลขใหญ่ตัวเอียง (Kanit) · เนื้อความ Bai Jamjuree · ตัดเฉียง -8° กับป้าย/แถบสั้น
   สีทีมจริงมาจาก config/server.json (ตั้งเป็นตัวแปร --t0* / --t1* ตอนโหลด) · ค่าด้านล่างเป็นค่าตั้งต้นตรงกับ DESIGN.md
   ===================================================================================================== */
:root {
  /* สีทีม: พื้น/เส้น · ตัวหนังสือ (d) · พื้นมืดอมสี (l) · ไล่สีแถบ (deep) · พื้นป้ายตัวขาว (bar) · ตัวหนังสือบนพื้นสีทีม (on) */
  --t0: #1fd6b8; --t0d: #1fd6b8; --t0l: #0d2f2a; --t0deep: #0b9a84; --t0bar: #0b9a84; --t0on: #04201b;
  --t1: #b65cf0; --t1d: #c98bf5; --t1l: #2a1838; --t1deep: #7d32b0; --t1bar: #8a3cc4; --t1on: #1d0629;
  --t0tint: rgba(31, 214, 184, .14); --t1tint: rgba(182, 92, 240, .16);
  --t0glow: rgba(31, 214, 184, .45); --t1glow: rgba(182, 92, 240, .45);
  /* พื้น 4 ชั้น + เส้น */
  --bg: #0d0f12; --surface: #161a1f; --surface-2: #1e232a; --surface-3: #262c34; --line: #2b313a;
  --glass: rgba(13, 15, 18, .82);
  /* ตัวหนังสือ 3 ระดับ */
  --ink: #f2f5f7; --ink-2: #c6ced6; --muted: #8c96a1;
  /* แบรนด์ = สองทีมรวมกัน */
  --brand: linear-gradient(115deg, #1fd6b8 0%, #6d8fe6 52%, #b65cf0 100%); --brand-mid: #6d8fe6; --on-brand: #0b0d10;
  --good: #3ee08f; --good-tint: rgba(62, 224, 143, .13);
  --danger: #ff5468; --danger-text: #ff7a8a; --danger-tint: rgba(255, 84, 104, .12);
  --gold-text: #f0c44e;
  /* ตัวฉัน (ตั้งจากทีมของฉันตอนโหลด) */
  --me: var(--t0); --me-d: var(--t0d);
  /* รูปทรง */
  --r-tag: 5px; --r-chip: 8px; --r-btn: 10px; --r-card: 12px; --r-panel: 14px; --r-sheet: 18px; --skew: -8deg;
  --btn-h: 46px; --btn-h-sm: 36px; --touch: 44px;
  --tabh: 66px;
  --f-display: 'Kanit', 'Bai Jamjuree', sans-serif;
  --f-body: 'Bai Jamjuree', 'Kanit', -apple-system, 'Noto Sans Thai', sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1); --spring: cubic-bezier(.34, 1.56, .64, 1);
  font-size: 13.8px;   /* human 2026-10-25: ขนาดฐาน · ทุกขนาดเป็น rem */
  color-scheme: dark;
}
/* โหมดกลางแดด (ปุ่มในหน้าโปรไฟล์ · DESIGN.md ข้อ 8) */
html[data-contrast="sun"] { --muted: #a7b0ba; --ink-2: #dde3e8; --line: #3a414b; --glass: rgba(13, 15, 18, .94); }
html[data-contrast="sun"] body { font-weight: 600; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); font-family: var(--f-body); font-weight: 500;
  -webkit-text-size-adjust: 100%; line-height: 1.5; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--t0d); }
h1 { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 2.15rem; line-height: 1.2; margin: 6px 2px 14px; }
h2 { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 1.3rem; line-height: 1.3; margin: 0 0 10px; }
h3 { font-family: var(--f-display); font-weight: 700; }
b, strong { font-weight: 700; }
.small { font-size: .9rem; }
.muted { color: var(--muted); }
.hidden { display: none !important; }
.num, .stat-v { font-family: var(--f-display); font-style: italic; font-weight: 800; font-variant-numeric: tabular-nums; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px; }
.glass, #topbar, #recent, #pt-card, #route-card, #mm-card, #warming, #rebuilding, #cu-top, #cu-legend, #cu-sheet {
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .08); }
.page .card { margin-bottom: 12px; }
.help { color: var(--muted); font-size: .9rem; margin: 8px 0 0; }
.ic.flip { transform: rotate(180deg); }
.ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; flex: none;
  vertical-align: middle; }
details > summary { cursor: pointer; font-weight: 700; color: var(--ink-2); }
::selection { background: rgba(109, 143, 230, .45); }
input[type=checkbox] { accent-color: var(--t0); width: 18px; height: 18px; vertical-align: -3px; }

#app { position: fixed; inset: 0; }
.tab { position: absolute; inset: 0 0 calc(var(--tabh) + env(safe-area-inset-bottom)) 0; display: none; }
.tab.active { display: block; animation: rt-fade .2s var(--ease); }
.page { overflow-y: auto; padding: 12px 14px 28px; padding-top: calc(12px + env(safe-area-inset-top)); max-width: 760px; margin: 0 auto;
  -webkit-overflow-scrolling: touch; }

/* ---------- แถบแท็บล่าง ---------- */
#tabs { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--tabh) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); display: flex; background: rgba(13, 15, 18, .96); border-top: 1px solid var(--line); z-index: 20;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
#tabs button { flex: 1; border: 0; background: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; font-size: .9rem; font-weight: 600; color: var(--muted); cursor: pointer; position: relative; min-height: var(--touch); }
#tabs button .ic { width: 25px; height: 25px; }
#tabs button.active { color: var(--ink); }
#tabs button.active .ic { color: var(--t0); }
#tabs button.active::before { content: ''; position: absolute; top: 0; left: 26%; right: 26%; height: 3px; background: var(--brand); border-radius: 0 0 3px 3px; }
.badge { position: absolute; top: 6px; left: calc(50% + 6px); min-width: 19px; height: 19px; border-radius: 10px; background: var(--t1bar); color: #fff;
  font-family: var(--f-display); font-size: .9rem; font-weight: 700; line-height: 19px; padding: 0 5px; text-align: center; }

/* ---------- ปุ่ม (ระบบเดียวทั้งเว็บ · DESIGN.md ข้อ 5) ---------- */
/* ปุ่มหลัก: ไล่สีแบรนด์ ตัวหนังสือเข้ม · 1 ปุ่มต่อหน้าจอ */
.bigbtn, .solid-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--btn-h); padding: 10px 18px;
  border: 0; border-radius: var(--r-btn); background: var(--brand); color: var(--on-brand); font-family: var(--f-display); font-weight: 700;
  font-size: 1.12rem; line-height: 1.2; cursor: pointer; box-shadow: 0 6px 22px rgba(109, 143, 230, .35); text-align: center; text-decoration: none;
  transition: transform .1s var(--ease), filter .15s; }
.bigbtn { display: flex; width: 100%; }
.solid-btn { flex: 1; }
a.bigbtn, a.solid-btn { color: var(--on-brand); }
.bigbtn:active, .solid-btn:active, .chip:active, .cheer-btn:active { transform: scale(.97); }
.bigbtn:disabled, .solid-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
/* ปุ่มรอง: พื้น surface-3 ตัวหนังสือขาว */
.chip { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--touch); padding: 6px 14px;
  border: 1px solid var(--line); border-radius: var(--r-btn); background: var(--surface-3); color: var(--ink); font-family: var(--f-display);
  font-weight: 600; font-size: 1rem; line-height: 1.2; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .1s var(--ease); }
.chip .ic { width: 19px; height: 19px; }
.chip:hover { background: #2d343d; }
.chip:disabled { opacity: .45; cursor: default; }
a.chip { color: var(--ink); }
/* เลือกอยู่ = ชิปขาว ตัวดำ */
.chip.on { background: var(--ink); color: var(--on-brand); border-color: var(--ink); }
.chip.on:disabled { opacity: 1; }
.chip.big { font-size: 1.08rem; min-height: var(--btn-h); padding: 10px 16px; flex: 1; }
/* ปุ่มเส้นขอบ (ทางเลือกรอง) */
.bigbtn.light, .chip.ghost, .share-btn, .logout-btn { background: transparent; border: 1.5px solid var(--line); color: var(--ink-2); box-shadow: none; }
.bigbtn.light { font-size: 1.05rem; }
.bigbtn.light:hover, .chip.ghost:hover, .share-btn:hover { background: var(--surface-2); }
/* ปุ่มกลางๆ (ปิด · ไม่ลบ) */
.modal-actions .chip.big, .chip.neutral { background: var(--surface-3); border-color: var(--line); color: var(--ink); }
/* อันตราย (ที่เดียวที่ใช้สีแดง · ต้องถามยืนยันก่อน) */
.danger-btn, .chip.danger { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 12px; min-height: var(--touch);
  padding: 8px 14px; border-radius: var(--r-btn); border: 1.5px solid var(--danger); background: var(--danger-tint); color: var(--danger-text);
  font-family: var(--f-display); font-weight: 700; font-size: 1rem; cursor: pointer; }
.chip.danger { display: inline-flex; width: auto; margin-top: 0; }
.danger-btn:disabled { opacity: .45; cursor: default; }
.danger-solid { flex: 1; min-height: var(--btn-h); padding: 10px 16px; border-radius: var(--r-btn); border: 1.5px solid var(--danger);
  background: rgba(255, 84, 104, .24); color: #ffd9de; font-family: var(--f-display); font-weight: 700; font-size: 1.08rem; cursor: pointer; }
.danger-solid:disabled { opacity: .45; cursor: default; }
/* ออกจากระบบ */
.logout-btn { display: inline-flex; align-items: center; gap: 6px; min-height: var(--touch); padding: 6px 14px; border-radius: var(--r-btn);
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; cursor: pointer; }
.logout-btn.sm { min-height: 38px; font-size: .95rem; padding: 4px 12px; font-style: normal; }
.h1-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.x-btn { position: sticky; top: 0; float: right; border: 1px solid var(--line); background: var(--surface-3); color: var(--ink); border-radius: 50%;
  width: 40px; height: 40px; font-size: 22px; line-height: 36px; cursor: pointer; margin: -4px -6px 0 6px; z-index: 2; }

/* ---------- ป้าย (ตัดเฉียง) ---------- */
.tag { display: inline-flex; align-items: center; gap: 4px; min-height: 22px; padding: 0 8px; border-radius: var(--r-tag); font-family: var(--f-display);
  font-weight: 700; font-style: italic; font-size: .92rem; line-height: 1.35; transform: skewX(var(--skew)); background: var(--surface-3);
  color: var(--ink-2); vertical-align: middle; white-space: nowrap; }
.tag.ok { background: var(--good-tint); color: var(--good); }
.tag.held { background: var(--surface-3); color: var(--ink-2); outline: 1px dashed var(--muted); }
.tag.bad { background: var(--danger-tint); color: var(--danger-text); }
.tag.gm { background: var(--surface-2); color: var(--ink-2); }
.tm-tag { display: inline-block; padding: 0 8px; border-radius: var(--r-tag); font-family: var(--f-display); font-style: italic; font-weight: 700;
  font-size: .9rem; line-height: 1.5; transform: skewX(var(--skew)); white-space: nowrap; vertical-align: middle; }
.tm-tag.t0 { background: var(--t0); color: var(--t0on); } .tm-tag.t1 { background: var(--t1); color: var(--t1on); }
.me-tag { display: inline-block; font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: .9rem; line-height: 1.5; background: #fff;
  color: var(--on-brand); border-radius: var(--r-tag); padding: 0 7px; margin-left: 5px; transform: skewX(var(--skew)); white-space: nowrap; vertical-align: middle; }
.ttl, .tro-row .tro { display: inline-flex; align-items: center; gap: 4px; font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: .9rem;
  line-height: 1.5; background: var(--surface-3); color: var(--ink); border-radius: var(--r-tag); padding: 0 7px; margin-left: 5px; white-space: nowrap;
  transform: skewX(var(--skew)); vertical-align: middle; }
.tag-chip { display: inline-block; font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: .9rem; border-radius: var(--r-tag);
  padding: 0 8px; background: var(--surface-3); color: var(--ink); vertical-align: middle; transform: skewX(var(--skew)); }
.tag-chip.small-team { background: rgba(109, 143, 230, .2); color: #c9d6ff; }
.new-dot { display: inline-block; background: var(--t1bar); color: #fff; border-radius: var(--r-tag); padding: 0 7px; font-family: var(--f-display);
  font-style: italic; font-size: .9rem; font-weight: 700; transform: skewX(var(--skew)); }

/* ---------- แถบความคืบหน้า (ตัดเฉียง) ---------- */
.rk-bar, .bar { height: 10px; border-radius: 3px; background: var(--surface-3); overflow: hidden; margin: 10px 0 2px; transform: skewX(var(--skew)); }
.rk-bar div, .bar > div { height: 100%; border-radius: 3px; background: var(--brand) !important; transition: width .8s var(--ease); }

/* ---------- แผนที่ (หน้าแรก) ---------- */
#map { position: absolute; inset: 0; background: #15181d; }
#maptop { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; max-width: 540px; margin: 0 auto; z-index: 5;
  display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
#maptop > * { pointer-events: auto; }
#topbar { padding: 10px 12px 8px; border-radius: var(--r-panel); }
.tb-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.tb-live { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--ink-2); font-size: .95rem; min-width: 0; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px rgba(62, 224, 143, .25); flex: none;
  animation: rt-live 2s ease-in-out infinite; }
.tb-lead { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }
/* แถบคะแนนสองท่อนตัดเฉียง */
.scorebar { display: flex; height: 34px; gap: 4px; margin: 8px 0 4px; }
.scorebar div { display: flex; align-items: center; padding: 0 10px; transform: skewX(var(--skew)); border-radius: 6px; min-width: 0; overflow: hidden;
  transition: width .4s var(--spring); }
.scorebar div span { display: block; transform: skewX(calc(-1 * var(--skew))); font-family: var(--f-display); font-style: italic; font-weight: 800;
  font-size: 1.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.scorebar div small { font-size: .9rem; font-weight: 700; opacity: .85; margin: 0 4px; }
.scorebar .b0 { background: linear-gradient(90deg, var(--t0deep), var(--t0)); color: var(--t0on); justify-content: flex-start; }
.scorebar .b1 { background: linear-gradient(90deg, var(--t1bar), var(--t1deep)); color: #fff; justify-content: flex-end; }
#tb-nums { font-size: .9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#legend { font-size: .9rem; pointer-events: none; }
#legend > * { pointer-events: auto; }
.lg-actions { display: flex; gap: 8px; flex-wrap: wrap; width: max-content; max-width: 100%; }
.lg-actions .chip { background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-color: rgba(255, 255, 255, .1);
  color: var(--ink); min-height: 40px; font-size: .95rem; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.lg-actions .chip.on { background: var(--ink); color: var(--on-brand); }
.lg-actions #btn-me { background: var(--brand); color: var(--on-brand); border-color: transparent; box-shadow: 0 6px 22px rgba(109, 143, 230, .35); }
#lg-more { margin-top: 8px; padding: 8px 12px; }
.lg-row { display: flex; align-items: center; gap: 7px; margin: 4px 0; flex-wrap: wrap; color: var(--ink-2); }
.sw { width: 20px; height: 14px; border-radius: 3px; display: inline-block; border: 1.5px solid; transform: skewX(var(--skew)); }
.sw.solid.t0 { background: rgba(31, 214, 184, .35); border-color: var(--t0); } .sw.solid.t1 { background: rgba(182, 92, 240, .35); border-color: var(--t1); }
.sw.stripe.t0 { background: repeating-linear-gradient(135deg, var(--t0) 0 2px, transparent 2px 5px); border-color: var(--t0); }
.sw.stripe.t1 { background: repeating-linear-gradient(135deg, var(--t1) 0 2px, transparent 2px 5px); border-color: var(--t1); }
/* จุดสำคัญ = สี่เหลี่ยมหมุน 45° */
.pin { width: 13px; height: 13px; border-radius: 3px; display: inline-block; transform: rotate(45deg); border: 2px solid #0d0f12; margin: 0 3px; }
.pin.t0 { background: var(--t0); box-shadow: 0 0 8px var(--t0glow); } .pin.t1 { background: var(--t1); box-shadow: 0 0 8px var(--t1glow); }
.pin.none { background: #59626d; width: 11px; height: 11px; }
#warming, #rebuilding { position: absolute; top: 150px; left: 50%; transform: translateX(-50%); z-index: 6; font-weight: 700; width: max-content;
  max-width: calc(100% - 24px); }
#rebuilding { border-color: var(--brand-mid); }
/* ป้ายลอยของแผนที่ */
.maplibregl-popup-content { font-size: 1rem; border-radius: var(--r-card); padding: 14px; max-width: 300px; line-height: 1.45; background: var(--surface);
  color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); font-family: var(--f-body); }
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--surface); }
.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--surface); }
.maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--surface); }
.maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--surface); }
.maplibregl-popup-close-button { font-size: 24px; width: 36px; height: 36px; color: var(--ink-2); }
.maplibregl-popup-close-button:hover { background: var(--surface-3); }
.maplibregl-ctrl-group { background: var(--glass) !important; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px !important; overflow: hidden;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.maplibregl-ctrl-group button { width: 44px !important; height: 44px !important; }
.maplibregl-ctrl-group button + button { border-top: 1px solid rgba(255, 255, 255, .1) !important; }
.maplibregl-ctrl-group button .maplibregl-ctrl-icon { filter: invert(1) brightness(1.4); }
.maplibregl-ctrl-attrib, .maplibregl-ctrl-attrib.maplibregl-compact { background: rgba(13, 15, 18, .78) !important; color: #a7b0ba !important; font-size: 11px; }
.maplibregl-ctrl-attrib a { color: #c6ced6 !important; }
.maplibregl-ctrl-attrib-button { filter: invert(1); }
.pop-title { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; margin-bottom: 4px; padding-right: 22px; line-height: 1.3; }
.pop-lead { font-family: var(--f-display); font-style: italic; font-weight: 700; }
.owner-pop .pin-pop { margin-bottom: 2px; }
.pop-sep { border-top: 1px solid var(--line); margin: 10px 0 6px; }
.pop-place { font-weight: 700; }
#tab-map .maplibregl-ctrl-bottom-right, #tab-map .maplibregl-ctrl-bottom-left { bottom: var(--rc-h, 0px); }

/* ---------- แถบ "ยึดล่าสุด" (ล่างแผนที่) ---------- */
#recent { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 6; max-width: 540px; margin: 0 auto; padding: 0; overflow: hidden;
  border-radius: var(--r-card); }
.rc-head { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 12px; cursor: pointer;
  text-align: left; min-height: var(--touch); color: var(--ink); }
.rc-title { font-family: var(--f-display); font-style: italic; font-weight: 700; white-space: nowrap; flex: none; }
.rc-peek { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); font-size: .9rem; }
.rc-arrow { flex: none; color: var(--ink-2); font-size: .9rem; white-space: nowrap; }
.rc-list { max-height: calc(5 * 48px + 2px); overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid var(--line); overscroll-behavior: contain; }
#recent.closed .rc-list { display: none; }
.rc-row { display: flex; align-items: center; gap: 10px; width: 100%; height: 48px; border: 0; border-top: 1px solid var(--line); background: none;
  padding: 0 12px; cursor: pointer; text-align: left; color: var(--ink); }
.rc-row:first-child { border-top: 0; }
.rc-row.sel { background: rgba(255, 255, 255, .08); box-shadow: inset 3px 0 0 #fff; }
.rc-row .face-img { width: 34px; height: 34px; border-width: 2.5px; }
.rc-txt { flex: 1; min-width: 0; line-height: 1.3; }
.rc-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sub { font-size: .9rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-sub b { color: var(--ink); font-family: var(--f-display); font-style: italic; }
.rc-empty, .rc-more { padding: 10px 12px; color: var(--muted); font-size: .9rem; }
.rc-more { border-top: 1px solid var(--line); }

/* ---------- การ์ดจุดสำคัญ + เส้นทาง + แผนที่ของฉัน (ลอยบนแผนที่) ---------- */
#pt-card { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 7; max-width: 540px; margin: 0 auto; max-height: 48%;
  overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 14px 10px; }
#route-card { position: absolute; left: 10px; right: 10px; top: calc(160px + env(safe-area-inset-top)); z-index: 7; max-width: 540px; margin: 0 auto;
  padding: 10px 44px 10px 12px; }
#mm-card { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; max-width: 540px; margin: 0 auto; z-index: 6; }
#mm-card .solid-btn { width: 100%; margin-top: 10px; }
.hint-head { font-family: var(--f-display); font-weight: 700; margin: 10px 0 2px; }
.hint-row { padding: 8px 0; border-top: 1px solid var(--line); }
.hint-row.close { background: rgba(109, 143, 230, .12); margin: 0 -14px; padding-left: 14px; padding-right: 14px; box-shadow: inset 3px 0 0 var(--brand-mid); }
.hint-close { color: #b9c8ff; font-weight: 700; }
.warn-txt { color: var(--danger-text); }
.good-txt { color: var(--good); }
.hint-tag { background: rgba(13, 15, 18, .92); color: var(--ink); border: 1.5px solid var(--ink-2); border-radius: 8px; padding: 1px 8px; font-family: var(--f-display);
  font-style: italic; font-size: .9rem; font-weight: 700; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .5); }
.hint-tag.close { border-color: var(--brand-mid); color: #d6e0ff; }
.hint-tag.focus { outline: 3px solid #fff; }
.pin-pop { display: flex; gap: 10px; align-items: flex-start; }
.rt-nums { color: var(--ink-2); margin: 2px 0; }
.rt-nums b { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; color: var(--ink); }

/* ---------- แผงเพื่อนวิ่ง (มือถือ = แผ่นล่าง · จอกว้าง = แถบซ้าย) ---------- */
#tab-map.active { display: flex; flex-direction: row; }
#map-pane { position: relative; flex: 1 1 auto; min-width: 0; min-height: 0; transition: flex-basis .3s var(--ease); }
#feed-pane { position: relative; flex: 0 0 clamp(320px, 32%, 420px); min-width: 0; min-height: 0; overflow-y: auto; background: var(--bg);
  border-left: 1px solid var(--line); padding: 12px 12px 24px; padding-top: calc(12px + env(safe-area-inset-top)); overscroll-behavior: contain; }
.fd-handle { display: none; }
.fd-brand { display: none; }
@media (max-width: 899px) and (orientation: portrait) {
  #tab-map.active { flex-direction: column; }
  #map-pane { flex: 0 0 56%; }
  body.feed-big #map-pane { flex-basis: 24%; }
  #feed-pane { flex: 1 1 44%; border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-sheet) var(--r-sheet) 0 0; margin-top: -18px;
    z-index: 8; padding-top: 4px; box-shadow: 0 -10px 30px rgba(0, 0, 0, .45); }
  body.route-mode #map-pane { flex-basis: 74%; }
  body.route-mode #legend, body.route-mode #recent, body.route-mode #tb-nums { display: none; }
  #route-card { top: auto; bottom: 26px; }
  .fd-handle { display: block; width: 100%; height: 22px; border: 0; background: none; cursor: pointer; padding: 8px 0; position: sticky; top: -4px; z-index: 3; }
  .fd-handle::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--surface-3); margin: 0 auto; }
}
.fd-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 2px 2px 10px; flex-wrap: wrap; }
.fd-head h2 { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.6rem; line-height: 1.25; margin: 0; }
.fd-head .muted { flex-basis: 100%; }
/* การ์ดการวิ่ง */
.fd-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 12px 12px 12px 16px; margin-bottom: 10px; cursor: pointer; transition: border-color .15s; }
.fd-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--muted); }
.fd-card.t0::before { background: var(--t0); } .fd-card.t1::before { background: var(--t1); }
.fd-card:hover { border-color: #3a414b; }
.fd-card.sel { border-color: #fff; box-shadow: 0 0 0 1px #fff; }
.fd-top { display: flex; gap: 10px; align-items: center; }
.fd-top .face-img { width: 44px; height: 44px; }
.fd-who { flex: 1; min-width: 0; }
.fd-name { font-weight: 700; font-size: 1.12rem; line-height: 1.35; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; }
.fd-name .tm-tag { margin-left: 2px; }
.fd-when { color: var(--muted); font-size: .9rem; }
.fd-thumb { flex: none; width: 64px; height: 52px; border-radius: 8px; background: var(--surface-2); }
.fd-stats { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 4px; margin: 12px 0 8px; }
.fd-stats .v { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.9rem; line-height: 1.05; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.fd-card.t0 .fd-stats .v { color: var(--t0d); } .fd-card.t1 .fd-stats .v { color: var(--t1d); }
.fd-stats .v small { font-size: 1rem; font-weight: 700; margin-left: 3px; color: var(--ink-2); font-style: italic; }
.fd-stats .k { font-size: .9rem; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.fd-stats .k .ic { width: 15px; height: 15px; }
.fd-gain { display: flex; gap: 6px 8px; flex-wrap: wrap; align-items: center; font-size: .92rem; color: var(--ink-2); padding: 8px 10px; background: var(--surface-2);
  border-radius: 8px; }
.fd-gain b { font-family: var(--f-display); font-style: italic; color: var(--ink); font-size: 1.08rem; }
.fd-gain .sep, .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--muted); display: inline-block; }
.fd-pts { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.fd-act { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.fd-cheerers { color: var(--muted); font-size: .9rem; min-width: 0; flex: 1; }
.share-btn { margin-left: auto; min-height: 38px; }
/* ปุ่มเชียร์ */
.cheer-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 4px 14px; border: 1px solid var(--line);
  border-radius: var(--r-btn); background: var(--surface-3); color: var(--ink); font-family: var(--f-display); font-weight: 600; font-size: 1rem; cursor: pointer;
  white-space: nowrap; }
.cheer-btn b { font-family: var(--f-display); font-style: italic; font-weight: 800; color: var(--t0d); font-variant-numeric: tabular-nums; }
.cheer-btn.on { background: var(--t0tint); border-color: var(--t0); color: var(--ink); }
.cheer-btn:disabled { opacity: .5; cursor: default; }
.cheer-btn .ic { width: 19px; height: 19px; }
.fd-inbox { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 10px 12px; margin-bottom: 10px;
  box-shadow: inset 4px 0 0 var(--brand-mid); }
.fd-inbox .row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.pp { cursor: pointer; }
span.pp:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- รูปคน ---------- */
.face { width: 18px; height: 18px; border-radius: 50%; display: inline-block; border: 3px solid; background: var(--surface-2); }
.face.t0 { border-color: var(--t0); } .face.t1 { border-color: var(--t1); }
.face-img { width: 36px; height: 36px; border-radius: 50%; border: 2.5px solid var(--line); background: var(--surface-2); object-fit: cover; flex: none;
  display: inline-block; vertical-align: middle; }
.face-img.mid { width: 52px; height: 52px; border-width: 3px; }
.face-img.big { width: 84px; height: 84px; border-width: 4px; }
.face-img.second { margin-left: -12px; }

/* ---------- หน้าโปรไฟล์ ---------- */
.profile-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; border-radius: var(--r-panel); padding: 16px;
  background: repeating-linear-gradient(115deg, var(--me-tint, rgba(31, 214, 184, .10)) 0 14px, transparent 14px 28px),
  linear-gradient(135deg, var(--me-hero, #10302b), var(--surface) 70%); }
.profile-card .pc-txt { flex: 1; min-width: 160px; }
.profile-card b#me-name { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 2rem; line-height: 1.2; display: block; }
.pc-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.prof-top { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.team-card { display: flex; align-items: center; gap: 12px; font-size: 1.1rem; flex-wrap: wrap; }
.team-dot { width: 28px; height: 28px; border-radius: 6px; flex: none; transform: rotate(45deg) scale(.8); border: 2px solid #0d0f12; }
.stats3, .pp-stats, .mm-big, .rec-big { display: grid; gap: 8px; text-align: left; }
.stats3 { grid-template-columns: repeat(3, 1fr); }
.stats3 > div, .pp-stats > div, .mm-big > div, .rec-big > div { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.stats3 b, .pp-stats b, .mm-big b, .rec-big b { display: block; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.9rem;
  line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.stats3 span, .pp-stats span, .mm-big span, .rec-big span { color: var(--muted); font-size: .9rem; display: block; line-height: 1.3; margin-top: 2px; }
.pp-stats { grid-template-columns: repeat(3, 1fr); margin-top: 12px; }
.pp-stats b { font-size: 1.45rem; }
.mm-big { grid-template-columns: 1fr 1fr; margin: 10px 0; }
.mm-big b { font-size: 1.6rem; }
.rec-big { grid-template-columns: repeat(3, 1fr); margin: 10px 0; text-align: center; }
.rec-big b { font-size: 2.1rem; }
.upmsg { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); color: var(--ink-2); }
.upmsg.good { background: var(--good-tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--good); }
.upmsg.bad { background: var(--danger-tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--danger); }
.upmsg b.num { font-size: 1.35rem; color: var(--t0d); }
.run-card h3 { margin: 0 0 4px; font-size: 1.3rem; font-style: italic; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.run-big { font-size: 1.05rem; font-weight: 700; margin: 10px 0 6px; padding: 10px 12px; background: var(--surface-2); border-radius: 10px; }
.run-big .claim { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 2.1rem; color: var(--me-d); line-height: 1.1;
  display: block; font-variant-numeric: tabular-nums; }
.run-row { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--ink-2); align-items: baseline; }
.run-row span b { font-family: var(--f-display); font-style: italic; font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.note { color: var(--ink-2); font-size: .92rem; margin-top: 8px; background: var(--surface-2); border-radius: 8px; padding: 8px 10px; }
#me-map { height: 300px; border-radius: 10px; overflow: hidden; }
.list-title { margin: 20px 2px 10px; }
.notice { border-color: var(--brand-mid); box-shadow: inset 4px 0 0 var(--brand-mid); font-weight: 700; }
.modal-actions { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.run-item { display: flex; justify-content: space-between; align-items: center; gap: 8px; cursor: pointer; }
.run-item b { font-family: var(--f-display); font-style: italic; font-size: 1.12rem; }
.run-item .r { text-align: right; }
.run-item:hover { border-color: #3a414b; }
.lbl { display: block; font-weight: 700; margin: 14px 0 6px; color: var(--ink-2); }
.txt { width: 100%; font: inherit; font-size: 1.1rem; padding: 10px 12px; min-height: var(--touch); border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--surface-2); color: var(--ink); }
.txt:focus, .rk-search input:focus, .iv-link input:focus, .iv-new input:focus { outline: none; border-color: var(--brand-mid); box-shadow: 0 0 0 3px rgba(109, 143, 230, .25); }
.txt::placeholder, input::placeholder { color: var(--muted); }
select.txt { background: var(--surface-2); }
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(60px, 1fr)); gap: 10px; }
.av-tile { border: 3px solid transparent; border-radius: 50%; padding: 0; background: var(--surface-2); cursor: pointer; aspect-ratio: 1; display: flex;
  align-items: center; justify-content: center; overflow: hidden; transition: transform .15s var(--spring); }
.av-tile img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.av-tile.on { border-color: #fff; box-shadow: 0 0 0 3px var(--me), 0 0 18px var(--t0glow); transform: scale(1.04); }
.modal-box.scroll { max-height: calc(100% - 16px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* โหมดกลางแดด: ปุ่มแบ่งช่อง */
.sun-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- ระดับ (rank) · เหรียญโล่หกเหลี่ยม (shared kit) ---------- */
.medal { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; flex: none; line-height: 0; margin-left: 2px; }
.medal svg, .medal img { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); }
/* เหรียญแบบ CSS (หน้าที่ไม่ได้โหลดชุดภาพ เช่น หน้าผู้ดูแล) */
.medal:not(:has(svg)):not(:has(img)) { width: 1.4em; height: 1.55em; background: linear-gradient(160deg, #fff7 0, #fff0 45%), var(--mc); color: #fff; font-family: var(--f-display);
  font-weight: 800; font-size: .9rem; line-height: 1.55em; clip-path: polygon(50% 0, 100% 18%, 100% 62%, 50% 100%, 0 62%, 0 18%); }
.rk-nm { margin-left: 4px; font-weight: 700; }
.rank-card { padding: 16px; }
.rank-card .rk-top { display: flex; align-items: center; gap: 14px; }
.rk-lbl { color: var(--muted); font-size: .92rem; }
.rk-big { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 2.45rem; line-height: 1.15; color: var(--tier, var(--ink)); }
.rk-big.legend { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 8px; }
.rk-pts { margin-left: auto; text-align: right; }
.rk-pts b { display: block; font-size: 1.6rem; line-height: 1.1; }
.rk-pts span { color: var(--muted); font-size: .9rem; }
.rk-bar-lbl { display: flex; justify-content: space-between; }
.rk-line { margin-top: 8px; color: var(--ink-2); }
.rk-line b { color: var(--ink); }
.rk-num { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.rk-when { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.rk-weeks { display: flex; gap: 6px; margin-top: 8px; }
.rk-weeks div { flex: 1; text-align: center; background: var(--surface-2); border-radius: 8px; padding: 6px 2px; }
.rk-weeks div.now { background: var(--surface-3); outline: 1.5px solid var(--brand-mid); }
.rk-weeks b { display: block; font-family: var(--f-display); font-style: italic; font-size: 1.15rem; }
.rk-weeks span { color: var(--muted); font-size: .9rem; }
.rk-parts { margin-top: 6px; }
.rk-wk-t { margin-top: 8px; }
.rk-leave { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.rk-leave .small { flex-basis: 100%; margin-top: 2px; }
.rk-how { margin-top: 12px; }
.rk-how ul { margin: 6px 0; padding-left: 18px; color: var(--ink-2); }
.rk-ladder { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-top: 10px; }
.rk-ladder > span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: .9rem; border-radius: 8px; padding: 6px 2px; color: var(--muted);
  text-align: center; }
.rk-ladder > span.lock { opacity: .4; filter: grayscale(.6); }
.rk-ladder > span.on { outline: 1.5px solid var(--gold-text); background: var(--surface-3); color: var(--ink); font-weight: 700; }
.rk-ladder i { font-style: normal; line-height: 1.25; }
.rk-pop { margin-bottom: 2px; }
/* ขึ้นระดับ: เหรียญพลิกเข้า + แสงวาบพาด + กระดาษสีทีมโปรย (DESIGN.md ข้อ 7 · 1.2 วิ) */
.rankup { position: relative; }
.rankup .medal { animation: rt-flip 1.2s var(--ease) both; }
.rankup .medal::after { content: ''; position: absolute; inset: -6px; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .85) 50%, transparent 65%);
  mix-blend-mode: overlay; animation: rt-sweep 1.2s .3s var(--ease) both; pointer-events: none; }
.rankup .medal { position: relative; overflow: hidden; }
.confetti { position: absolute; left: 50px; top: 40px; width: 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; width: 7px; height: 12px; border-radius: 2px; opacity: 0; animation: rt-confetti 1.2s var(--ease) forwards; }
.rk-new { display: inline-block; margin-top: 4px; font-family: var(--f-display); font-style: italic; font-weight: 800; background: var(--brand); color: var(--on-brand);
  border-radius: var(--r-tag); padding: 0 8px; transform: skewX(var(--skew)); animation: rt-pop .4s .9s var(--spring) both; }

/* ---------- อันดับคน ---------- */
.seg { display: flex; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 3px; gap: 3px; margin: 0 0 12px; }
.seg button { flex: 1; border: 0; background: transparent; border-radius: 8px; padding: 8px 6px; min-height: 42px; font-family: var(--f-display); font-size: 1.05rem;
  font-weight: 600; color: var(--muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.seg button .ic { width: 18px; height: 18px; }
.seg button.on { background: var(--surface-3); color: var(--ink); }
.seg.sm button { font-size: .98rem; min-height: 40px; padding: 6px 4px; }
/* ตัวชี้วัด = แท็บขีดไล่สี */
#rk-metric { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: 0; }
#rk-metric button { border-radius: 0; position: relative; background: none; }
#rk-metric button.on { background: none; }
#rk-metric button.on::after { content: ''; position: absolute; left: 16%; right: 16%; bottom: -1px; height: 3px; background: var(--brand); border-radius: 2px; }
#rk-ctrl .seg { margin-bottom: 10px; }
.rk-scope-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: 2px 0 8px; }
.rk-scope-row b { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; }
.rk-levels { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.rk-levels .chip { background: var(--surface-2); color: var(--ink-2); min-height: 40px; }
.rk-levels .chip.on { background: var(--ink); color: var(--on-brand); }
.rk-search { position: relative; }
.rk-search input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 10px; padding: 10px 12px; min-height: var(--touch);
  font-size: 1rem; background: var(--surface-2); color: var(--ink); }
.rk-sug { position: absolute; left: 0; right: 0; top: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; z-index: 20;
  max-height: 300px; overflow-y: auto; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.rk-sug button { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 10px 12px; font-size: 1rem; cursor: pointer; color: var(--ink); }
.rk-sug button:hover { background: var(--surface-2); }
.rk-sug button.off { color: var(--muted); }
.rk-sug .none { padding: 10px 12px; color: var(--muted); }
#rk-table { padding: 10px; }
#rk-table h2 { margin: 4px 4px 10px; }
.rk-row { display: grid; grid-template-columns: 30px 42px 1fr auto; align-items: center; gap: 10px; padding: 8px 8px; border-top: 1px solid var(--line); }
.rk-row:first-child, .podium + .rk-row { border-top: 0; }
.rk-row .face-img { width: 40px; height: 40px; }
.rk-row.me { background: linear-gradient(90deg, rgba(31, 214, 184, .16), rgba(182, 92, 240, .10)); border: 1.5px solid var(--me); border-radius: 10px; }
.rk-row.me + .rk-row { border-top-color: transparent; }
.rk-row .pl { text-align: center; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.3rem; color: var(--muted); }
.rk-row.me .pl { color: var(--me-d); }
.rk-row .nmw { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: 1.05rem; }
.rk-row .tdot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; transform: rotate(45deg); vertical-align: 1px; }
.rk-row .val { text-align: right; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.35rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rk-row .val span { font-weight: 600; color: var(--ink-2); font-size: .9rem; margin-left: 2px; }
.rk-gap { text-align: center; color: var(--muted); font-size: .9rem; padding: 6px 0; border-top: 1px dashed var(--line); }
.rk-empty { text-align: center; padding: 16px 6px; color: var(--muted); }
/* แท่นอันดับ 1–3 */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; align-items: end; margin: 8px 0 12px; }
.pod { text-align: center; position: relative; min-width: 0; cursor: pointer; }
.pod .face-img { width: 58px; height: 58px; display: block; margin: 0 auto; border-width: 3px; }
.pod.p1 .face-img { width: 74px; height: 74px; }
.pod .nm { font-weight: 700; font-size: .98rem; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod .km { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.45rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.pod .km small { font-size: .9rem; color: var(--ink-2); }
.pod .base { margin-top: 6px; border-radius: 8px 8px 0 0; display: grid; place-items: center; font-family: var(--f-display); font-style: italic; font-weight: 900;
  font-size: 2rem; color: rgba(255, 255, 255, .92); }
.pod.p1 .base { height: 74px; background: linear-gradient(180deg, rgba(240, 196, 78, .55), rgba(240, 196, 78, .05)); }
.pod.p2 .base { height: 52px; background: linear-gradient(180deg, rgba(174, 182, 190, .45), rgba(174, 182, 190, .04)); }
.pod.p3 .base { height: 40px; background: linear-gradient(180deg, rgba(196, 122, 69, .5), rgba(196, 122, 69, .04)); }
.pod.me .nm { color: var(--me-d); }
/* แถบอันดับของฉันลอย (เมื่อแถวของฉันเลื่อนพ้นจอ) */
.sticky-me { position: fixed; left: 12px; right: 12px; bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 10px); z-index: 19; max-width: 736px; margin: 0 auto;
  display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 12px; background: var(--brand); color: var(--on-brand); font-weight: 700;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5); cursor: pointer; animation: rt-up .25s var(--ease); }
.sticky-me .n { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.75rem; }
.sticky-me .t { flex: 1; min-width: 0; font-size: .95rem; line-height: 1.3; }
.sticky-me .t b { font-size: 1.08rem; }
.sticky-me .face-img { width: 38px; height: 38px; border-color: #0d0f12 !important; }

/* ---------- อันดับทีม ---------- */
.vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.vs .num { font-family: var(--f-display); font-style: italic; font-size: 2.45rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vs .nm { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 1.1rem; }
.vs .sub { color: var(--muted); font-size: .9rem; }
.vs .mid { color: var(--muted); font-family: var(--f-display); font-style: italic; font-weight: 800; }
.verdict { text-align: center; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.3rem; margin-top: 8px; }
.area-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 0; border-top: 1px solid var(--line); }
.area-row:first-of-type { border-top: 0; }
.area-row .nm { font-weight: 700; }
.mini { display: flex; width: 96px; height: 12px; gap: 2px; flex: none; transform: skewX(var(--skew)); }
.mini div { border-radius: 2px; }
.mini div:first-child { background: var(--t0); } .mini div:last-child { background: var(--t1); }

/* ---------- ศึกพื้นที่ ---------- */
.fx-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.fx-row:first-of-type { border-top: 0; }
.fx-row.new { background: rgba(138, 60, 196, .14); margin: 0 -14px; padding-left: 14px; padding-right: 14px; box-shadow: inset 3px 0 0 var(--t1bar); }
.fx-face { flex: none; display: flex; align-items: center; min-width: 36px; }
.fx-txt { flex: 1; min-width: 0; color: var(--ink-2); }
.fx-txt b { color: var(--ink); }
.fx-row .tm { font-family: var(--f-display); font-style: italic; font-weight: 700; white-space: nowrap; }
.fx-row .go { flex: none; }
.flag { width: 22px; height: 22px; border-radius: 4px; display: inline-block; border: 2.5px solid #0d0f12; margin: 0 8px; transform: rotate(45deg);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .25); }
.card.mission { box-shadow: inset 4px 0 0 var(--brand-mid); }
.ms-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); }
.ms-row:first-of-type { border-top: 0; }
.ms-txt { flex: 1; min-width: 0; color: var(--ink-2); }
.ms-pair { font-size: 1.05rem; margin: 2px 0; color: var(--ink); }
.ms-row .chip { flex: none; }

/* ---------- หน้าต่างลอย (modal) ---------- */
.modal { position: fixed; inset: 0; background: rgba(5, 6, 8, .72); z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal:not(.hidden) .modal-box { animation: rt-up .25s var(--ease); }
.modal-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet); padding: 20px; max-width: 440px; width: 100%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6); }
.modal-box p { color: var(--ink-2); }
/* เลือกทีม = การ์ดลายเฉียงสีทีม */
.team-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 12px; width: 100%; border: 2px solid var(--line); border-radius: var(--r-panel);
  background: var(--surface-2); padding: 14px; margin: 10px 0; cursor: pointer; text-align: left; color: var(--ink); min-height: 72px; }
.team-btn::before { content: ''; position: absolute; inset: 0; opacity: .9; pointer-events: none;
  background: repeating-linear-gradient(115deg, var(--tb-tint, rgba(255, 255, 255, .06)) 0 10px, transparent 10px 20px); }
.team-btn > * { position: relative; }
.team-btn .nm { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.6rem; line-height: 1.2; }
.team-btn .why { color: var(--ink-2); font-size: .92rem; }
.team-btn.on { border-color: var(--tb-col, #fff); box-shadow: 0 0 0 4px var(--tb-tint, rgba(255, 255, 255, .1)), 0 0 24px var(--tb-glow, transparent); }
.tt-result { text-align: center; }
.tt-big { font-size: 3.6rem; line-height: 1.1; animation: rt-pop .5s var(--spring) both; }
.tt-list div { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 1.15rem; margin: 6px 0; }
.tro-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.tro-row .tro { margin-left: 0; }

#toast { position: fixed; left: 50%; bottom: calc(var(--tabh) + env(safe-area-inset-bottom) + 16px); transform: translateX(-50%); background: var(--ink);
  color: var(--on-brand); font-weight: 600; padding: 10px 16px; border-radius: 12px; z-index: 60; max-width: 90%; box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  animation: rt-up .2s var(--ease); }

/* ---------- หน้าคัดจุดสำคัญ ---------- */
#curate { position: fixed; inset: 0; z-index: 40; background: var(--bg); }
#cu-map { position: absolute; inset: 0; }
#cu-top { position: absolute; top: calc(10px + env(safe-area-inset-top)); left: 10px; right: 10px; max-width: 540px; margin: 0 auto; z-index: 5; padding: 8px 12px; }
.cu-row { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.cu-title { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; flex: 1; white-space: nowrap; }
.cu-when { margin-top: 4px; background: rgba(109, 143, 230, .14); border-radius: 8px; padding: 4px 8px; }
#cu-legend { position: absolute; top: calc(var(--cu-top-h, 150px) + 18px + env(safe-area-inset-top)); left: 10px; z-index: 5; padding: 4px 10px; display: flex; flex-wrap: wrap;
  gap: 2px 6px; align-items: center; max-width: calc(100% - 20px); }
.cu-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 2px solid #0d0f12; box-shadow: 0 0 0 1px rgba(255, 255, 255, .4); }
.cu-dot.same { background: #8c96a1; } .cu-dot.new { background: #3ee08f; } .cu-dot.moved { background: #c98bf5; }
.cu-dot.renamed { background: #6d8fe6; } .cu-dot.deleting { background: #0d0f12; box-shadow: 0 0 0 2px var(--danger); }
#cu-sheet { position: absolute; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 6; max-width: 540px; margin: 0 auto;
  max-height: 52%; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.cu-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.cu-actions button { flex: 1 1 30%; }
.cu-warn { background: var(--danger-tint); color: var(--danger-text); border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.cu-ok { background: var(--good-tint); color: var(--good); border-radius: 8px; padding: 6px 10px; margin-top: 8px; }
.cu-pend { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }
.cu-pend .t { flex: 1; min-width: 0; }
.cu-pin { width: 26px; height: 26px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: #3ee08f; border: 3px solid #0d0f12;
  box-shadow: 0 0 0 1px #fff, 0 2px 6px rgba(0, 0, 0, .5); }
.cu-pin.moving { background: #c98bf5; }

/* ---------- เข้าสู่ระบบ · สมัคร · ลิงก์เชิญ ---------- */
.login-body, .join-body { background: radial-gradient(120% 70% at 50% -10%, rgba(109, 143, 230, .18), transparent 60%),
  repeating-linear-gradient(115deg, rgba(255, 255, 255, .025) 0 14px, transparent 14px 28px), var(--bg); }
.login-body { display: flex; align-items: center; justify-content: center; min-height: 100%; padding: 16px; }
.login { max-width: 400px; width: 100%; text-align: center; padding: 26px 22px; border-radius: var(--r-sheet); }
.login img, .login .logo { border-radius: 18px; display: block; margin: 0 auto 4px; }
.login h1 { margin: 6px 0 4px; }
.login input { width: 100%; font-size: 1.15rem; padding: 12px; border-radius: 12px; border: 1.5px solid var(--line); margin: 12px 0; text-align: center;
  background: var(--surface-2); color: var(--ink); }
.login input.txt { letter-spacing: 0; margin: 0; }
.login .txt + .bigbtn, .login .help { margin-top: 10px; }
.err { color: var(--danger-text); min-height: 1.4em; font-weight: 600; }
.join { max-width: 480px; width: 100%; padding: 22px; border-radius: var(--r-sheet); }
.join h1 { font-size: 1.9rem; margin: 0 0 4px; }
.join h2 { margin: 22px 0 8px; }
.join .bigbtn { margin-top: 20px; }
.join ul { padding-left: 20px; line-height: 1.6; color: var(--ink-2); }
.jn-top { display: flex; gap: 14px; align-items: center; }
.iv-row, .fr-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); }
.iv-row .t, .fr-row .t { flex: 1; min-width: 0; }
.iv-link { display: flex; gap: 8px; margin-top: 10px; }
.iv-link input, .iv-new input { flex: 1; min-width: 0; font: inherit; font-size: 1rem; padding: 8px 10px; min-height: var(--touch); border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--surface-2); color: var(--ink); }
.iv-new { display: flex; gap: 8px; }
.st-open { color: var(--good); font-weight: 700; } .st-used { color: var(--muted); } .st-dead { color: var(--danger-text); }
.steps { padding-left: 22px; margin: 8px 0; line-height: 1.55; color: var(--ink-2); }
.acc-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.join-body { padding: 16px; min-height: 100%; }
.join-body .join { margin: 0 auto; }

/* ---------- เชื่อม Garmin ---------- */
.gm-steps { margin: 8px 0 4px; padding-left: 22px; color: var(--ink-2); }
.gm-steps li { margin: 6px 0; }
.gm-steps a { color: var(--t0d); font-weight: 700; }
.gm-key { font-family: ui-monospace, Menlo, monospace; letter-spacing: .5px; }
.gm-ok { font-family: var(--f-display); font-style: italic; font-size: 1.3rem; font-weight: 800; color: var(--good); }
.gm-line { margin: 4px 0; color: var(--ink-2); }
.gm-warn { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: rgba(109, 143, 230, .14); color: var(--ink); font-weight: 700;
  box-shadow: inset 3px 0 0 var(--brand-mid); }
.gm-err { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--danger-tint); color: var(--ink); box-shadow: inset 3px 0 0 var(--danger); }
.gm-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.gm-actions .bigbtn { flex: 2 1 160px; width: auto; }
.gm-actions .chip.big { flex: 1 1 100px; }
.gm-safe { margin-top: 10px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); font-size: .9rem; color: var(--ink-2); }

/* ---------- หน้าโปรไฟล์คน ---------- */
.pp { cursor: pointer; }
#route-card .pin-pop b { font-family: var(--f-display); }
#person-page { position: fixed; inset: 0; z-index: 40; background: var(--bg); display: flex; flex-direction: column; animation: rt-fade .2s var(--ease); }
#person-page.hidden { display: none; }
.pp-bar { display: flex; align-items: center; gap: 10px; padding: 10px 12px; padding-top: calc(10px + env(safe-area-inset-top)); background: rgba(13, 15, 18, .96);
  border-bottom: 1px solid var(--line); }
.pp-bar b { font-family: var(--f-display); font-style: italic; font-size: 1.15rem; }
.pp-scroll { flex: 1; overflow-y: auto; padding: 14px; max-width: 760px; width: 100%; margin: 0 auto; }
.pp-scroll > .card { margin-bottom: 12px; }
.pp-head { display: flex; gap: 14px; align-items: center; }
.pp-head .nm { font-family: var(--f-display); font-style: italic; font-size: 2rem; font-weight: 900; line-height: 1.2; }
.pp-hero { border-radius: var(--r-panel);
  background: repeating-linear-gradient(115deg, var(--pp-tint, rgba(31, 214, 184, .10)) 0 14px, transparent 14px 28px),
  linear-gradient(135deg, var(--pp-hero, #10302b), var(--surface) 70%); }

/* ---------- แชร์ · ผู้ดูแล ---------- */
.sh-preview { width: 100%; max-height: 52vh; object-fit: contain; border-radius: 12px; background: var(--surface-2); margin-bottom: 8px; }
.modal-box.scroll { max-height: 92vh; overflow-y: auto; }
.sh-page h1 { font-size: 1.9rem; }
.sh-page .sh-img { width: 100%; border-radius: 14px; margin: 10px 0; border: 1px solid var(--line); }
.sh-game { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-style: italic; font-weight: 800; color: var(--ink); margin-bottom: 8px; }
.adm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.adm-cards div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 12px; text-align: left; }
.adm-cards b { display: block; font-family: var(--f-display); font-style: italic; font-size: 1.9rem; }
.adm-chart { display: flex; align-items: flex-end; gap: 2px; height: 90px; margin-top: 8px; }
.adm-chart div { flex: 1; background: var(--brand); border-radius: 3px 3px 0 0; min-height: 2px; }
.adm-tbl { width: 100%; border-collapse: collapse; font-size: .95rem; }
.adm-tbl th { text-align: left; cursor: pointer; white-space: nowrap; padding: 8px 6px; border-bottom: 2px solid var(--line); color: var(--ink-2); }
.adm-tbl td { padding: 8px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.adm-tbl tr.susp td { opacity: .55; }
.adm-tbl .face-img { width: 32px; height: 32px; border-width: 2px; }
.adm-wrap { overflow-x: auto; }
.adm-alert { background: var(--danger-tint) !important; border: 1.5px solid var(--danger) !important; margin-bottom: 10px; }
.adm-alert b { color: var(--danger-text); }
body.no-bots .bot-only { display: none !important; }

/* ---------- แผนที่ของฉัน ---------- */
.mm-counts { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.mm-counts span { background: var(--surface-2); border-radius: 8px; padding: 4px 10px; font-size: .92rem; color: var(--ink-2); }
.mm-counts b { font-family: var(--f-display); font-style: italic; color: var(--ink); }
.mm-list { margin-top: 6px; }
.mm-row { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding: 7px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.mm-row:first-child { border-top: 0; }
.mm-row .k { color: var(--muted); font-size: .9rem; }
.mm-row .st { font-size: .9rem; white-space: nowrap; align-self: center; }
.mm-row .st.on { color: var(--t0d); font-weight: 700; }
.mm-row .st.off { color: var(--muted); }
.mm-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.mm-actions > * { flex: 1 1 140px; }
body.mymap-mode #maptop, body.mymap-mode #recent, body.mymap-mode #pt-card, body.mymap-mode #route-card { display: none !important; }
.mm-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: .9rem; margin-top: 6px; color: var(--ink-2); }
.mm-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 4px; }

/* ---------- แอปมือถือ ---------- */
.app-page { max-width: 580px; }
.app-steps { padding-left: 22px; margin: 6px 0 12px; color: var(--ink-2); }
.app-steps li { margin-bottom: 6px; }
.app-h { font-size: 1.15rem; font-style: italic; margin: 16px 0 6px; }
.rec-live { font-family: var(--f-display); font-style: italic; font-weight: 800; color: var(--danger-text); }
.rec-live.paused { color: var(--muted); }
.dev-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--line); }

/* ======================= จอกว้าง (≥ 900px): แผนที่ซ้าย · ฟีดเป็นแถบขวา 420px (human 2026-10-26) · แท็บอยู่บนสุดของแถบขวา ======================= */
@media (min-width: 900px) {
  .tab { inset: 0; }
  #tabs { left: auto; right: 10px; top: 12px; bottom: auto; width: 400px; height: 64px; border-radius: var(--r-panel); border: 1px solid var(--line);
    padding-bottom: 0; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); }
  #tabs button { flex-direction: row; gap: 6px; font-size: .95rem; }
  #tabs button .ic { width: 21px; height: 21px; }
  #tabs button.active::before { top: 0; left: 18%; right: 18%; }
  .badge { top: 6px; left: auto; right: 4px; }
  #feed-pane { flex: 0 0 420px; border-left: 1px solid var(--line); border-right: 0; padding: 92px 16px 24px; }
  .fd-brand { display: flex; align-items: center; gap: 10px; margin: 0 2px 14px; color: var(--muted); font-size: .92rem; }
  #maptop { left: 16px; right: 16px; top: 16px; max-width: 620px; margin: 0; }
  #recent, #pt-card { left: 16px; right: auto; width: min(540px, calc(100% - 32px)); margin: 0; bottom: 16px; }
  #route-card, #mm-card { left: 16px; right: auto; width: min(540px, calc(100% - 32px)); margin: 0; }
  #mm-card { top: 16px; }
  .page { padding-top: 96px; padding-bottom: 40px; }
  #toast { bottom: 24px; }
  .sticky-me { bottom: 20px; }
  #person-page .pp-bar { padding-right: 16px; }
}
@media (min-width: 900px) { #route-card { top: 200px; } }

/* ======================= ภาพเคลื่อนไหว (DESIGN.md ข้อ 7) ======================= */
@keyframes rt-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rt-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
#toast { animation-name: rt-toast; }
@keyframes rt-toast { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes rt-live { 0%, 100% { box-shadow: 0 0 0 3px rgba(62, 224, 143, .25); } 50% { box-shadow: 0 0 0 6px rgba(62, 224, 143, .05); } }
@keyframes rt-pop { 0% { transform: scale(.4) skewX(var(--skew)); opacity: 0; } 100% { transform: scale(1) skewX(var(--skew)); opacity: 1; } }
.tt-big { animation-name: rt-pop-plain; }
@keyframes rt-pop-plain { 0% { transform: scale(.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
/* เชียร์: ตัวเลขเด้ง + ประกายระเบิด (0.2 วิ สปริง) */
.cheer-btn.pop { animation: rt-cheer .2s var(--spring); }
.cheer-btn.pop b { display: inline-block; animation: rt-bump .35s var(--spring); }
.cheer-btn.pop::after { content: ''; position: absolute; left: 18px; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  box-shadow: 0 -16px 0 -1px var(--t0), 14px -9px 0 -1px var(--t1), 15px 8px 0 -1px #fff, 0 16px 0 -1px var(--t0), -14px 8px 0 -1px var(--t1), -14px -9px 0 -1px #fff;
  animation: rt-burst .45s var(--ease) forwards; pointer-events: none; }
@keyframes rt-cheer { 0% { transform: scale(.92); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes rt-bump { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-5px) scale(1.35); } 100% { transform: none; } }
@keyframes rt-burst { from { opacity: 1; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
/* ยึดพื้นที่สำเร็จ: ตัวเลขนับขึ้น + ขอบเรืองวาบ 1 ครั้ง */
.claim-flash { animation: rt-claim .8s var(--ease); }
@keyframes rt-claim { 0% { box-shadow: 0 0 0 0 var(--t0glow); } 40% { box-shadow: 0 0 0 4px var(--t0glow), 0 0 26px var(--t0glow); } 100% { box-shadow: 0 0 0 0 transparent; } }
/* ขึ้นระดับ */
@keyframes rt-flip { 0% { transform: perspective(400px) rotateY(-180deg) scale(.6); opacity: 0; } 60% { transform: perspective(400px) rotateY(20deg) scale(1.08); opacity: 1; }
  100% { transform: perspective(400px) rotateY(0) scale(1); } }
@keyframes rt-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes rt-confetti { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); } }

/* เครื่องตั้ง "ลดการเคลื่อนไหว" = ปิดหมด เหลือแค่เปลี่ยนค่าทันที */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ======================= งานภาพชุดจริง (โลโก้ · เหรียญ · ไอคอน · หน้าแนะนำเกม) ======================= */
.medal-img { display: block; }
.logo-img { display: block; object-fit: contain; }
.fd-brand .logo-img { width: 52px; height: 52px; flex: none; }
.sh-game .logo-img { width: 56px; height: 56px; }
.tt-big { display: flex; justify-content: center; gap: 14px; color: var(--gold-text); }
.tt-big .ic { width: 64px; height: 64px; stroke-width: 1.8; }
.tt-list .ic, .tro .ic, .ttl .ic { width: 16px; height: 16px; stroke-width: 2.4; margin-right: 3px; vertical-align: -3px; }
.ttl > *, .tro > *, .tm-tag > *, .tag > * { transform: none; }
h2 > .ic { width: 22px; height: 22px; vertical-align: -3px; }
.hint-tag .ic, .hint-close .ic { width: 15px; height: 15px; vertical-align: -2px; margin-right: 3px; }
.ms-pair .ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--muted); }
.gm-ok .ic { width: 24px; height: 24px; vertical-align: -4px; margin-right: 4px; }
.rk-how li .ic, .rk-line .ic, .rk-when .ic { width: 17px; height: 17px; vertical-align: -3px; margin-right: 3px; }
.rc-arrow .ic { width: 16px; height: 16px; vertical-align: -3px; }
.bigbtn .ic, .solid-btn .ic, .danger-btn .ic, .danger-solid .ic, .logout-btn .ic { width: 20px; height: 20px; }
.rec-live .ic { width: 18px; height: 18px; vertical-align: -3px; color: var(--danger-text); }
.app-h .ic, h2 .ic { margin-right: 4px; }

/* ---------- หน้าแนะนำเกม (คนยังไม่เข้าระบบ · ปัดได้ 3 หน้า) ---------- */
.wl-body { margin: 0; min-height: 100%; background: var(--bg); overflow: hidden; }
.wl { position: fixed; inset: 0; display: flex; flex-direction: column; }
.wl-top { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 14px; right: 14px; z-index: 5; display: flex; align-items: center;
  justify-content: space-between; pointer-events: none; }
.wl-top > * { pointer-events: auto; }
.wl-top .logo-img { width: 48px; height: 48px; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .5)); }
.wl-skip { background: var(--glass); border: 1px solid rgba(255, 255, 255, .12); color: var(--ink); border-radius: 999px; padding: 6px 16px; min-height: 40px;
  font-family: var(--f-display); font-weight: 600; font-size: 1rem; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.wl-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain; }
.wl-track::-webkit-scrollbar { display: none; }
.wl-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; min-height: 0; position: relative; }
.wl-art { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.wl-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--x, 50%) 40%; }
.wl-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 55%; background: linear-gradient(180deg, transparent, var(--bg) 92%); }
.wl-text { position: relative; z-index: 2; margin-top: -120px; padding: 0 22px 8px; max-width: 640px; }
.wl-text h1 { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 2.6rem; line-height: 1.2; margin: 0 0 10px; }
.wl-text h1 .g { display: block; background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 8px; }
.wl-text p { color: var(--ink-2); font-size: 1.08rem; margin: 0; line-height: 1.55; }
.wl-foot { position: relative; z-index: 6; flex: none; padding: 10px 22px calc(18px + env(safe-area-inset-bottom)); max-width: 640px; width: 100%; }
.wl-dots { display: flex; gap: 8px; margin: 6px 0 14px; }
.wl-dots button { width: 28px; height: 6px; border-radius: 3px; border: 0; background: var(--surface-3); cursor: pointer; padding: 0; transform: skewX(var(--skew));
  transition: width .2s var(--ease), background .2s; }
.wl-dots button.on { width: 46px; background: var(--brand); }
.wl-btns { display: flex; flex-direction: column; gap: 10px; }
.wl-btns .bigbtn { font-size: 1.2rem; min-height: 54px; font-style: italic; }
.wl-btns .bigbtn.light { font-style: normal; font-size: 1.05rem; min-height: 48px; }
.wl-fine { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: .9rem; margin-top: 12px; line-height: 1.45; }
.wl-fine .ic { width: 18px; height: 18px; flex: none; color: var(--ink-2); }
@media (min-width: 900px) {
  .wl-slide { flex-direction: row; align-items: stretch; }
  .wl-art { flex: 1 1 62%; }
  .wl-art::after { left: auto; top: 0; width: 45%; height: auto; background: linear-gradient(90deg, transparent, var(--bg) 95%); }
  .wl-text { flex: 0 0 38%; margin: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 48px 120px 24px; }
  .wl-text h1 { font-size: 3.2rem; }
  .wl-foot { position: absolute; right: 0; bottom: 0; width: 38%; padding: 0 48px 40px 24px; }
}

/* ======================= หน้าศึกพื้นที่ (ออกแบบใหม่ 2026-10-26: สีทีม · ลำดับความสำคัญ · ภาพย่อสามเหลี่ยม · หายใจได้) ======================= */
#tab-fight h1 { margin-bottom: 10px; }
/* สรุปสัปดาห์นี้: ตัวเลขใหญ่สองสี */
.fx-sum { margin-bottom: 14px; }
.fx-sum-h { display: flex; align-items: center; gap: 6px; color: var(--ink-2); font-weight: 600; margin: 0 2px 8px; }
.fx-sum-h .ic { width: 18px; height: 18px; color: var(--muted); }
.fx-sum-h span { margin-left: auto; color: var(--muted); font-size: .9rem; font-weight: 500; }
.fx-sum-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fx-big { position: relative; overflow: hidden; border-radius: var(--r-panel); padding: 12px 14px 12px; border: 1px solid var(--line);
  background: linear-gradient(135deg, color-mix(in srgb, var(--tc) 18%, transparent), var(--surface) 70%); }
.fx-big::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--tc); box-shadow: 0 0 14px var(--tc); }
.fx-big .k { display: flex; align-items: center; gap: 5px; color: var(--ink-2); font-weight: 600; font-size: .95rem; }
.fx-big .k .ic { width: 17px; height: 17px; color: var(--tt); }
.fx-big b { display: block; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.75rem; line-height: 1.2; color: var(--tt);
  margin: 4px 0 2px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fx-big .s { color: var(--muted); font-size: .9rem; }
/* การ์ดภารกิจทีม: หัวสีทีมเรือง */
.card.mission { box-shadow: none; padding: 0; overflow: hidden; border-color: color-mix(in srgb, var(--tc, #6d8fe6) 45%, var(--line)); }
.ms-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; position: relative;
  background: linear-gradient(110deg, var(--tb, rgba(109,143,230,.12)), transparent 75%), repeating-linear-gradient(115deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px);
  border-bottom: 1px solid var(--line); }
.ms-head::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; background: var(--tc, var(--brand-mid)); box-shadow: 0 0 12px var(--tg, transparent); }
.ms-head h2 { margin: 0; color: var(--tt, var(--ink)); }
.ms-ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--tc, var(--brand-mid)); color: #0b0d10;
  box-shadow: 0 0 18px var(--tg, transparent); }
.ms-ic .ic { width: 24px; height: 24px; stroke-width: 2.3; }
.ms-sub { color: var(--muted); font-size: .9rem; margin-top: 2px; }
.ms-sub b { color: var(--ink-2); }
.mission > .help, .mission > .ms-note, .mission > .ms-more, .mission > .ms-empty, .mission > .small { margin-left: 16px; margin-right: 16px; }
.mission > .help { margin-bottom: 14px; }
.ms-more { margin: 4px 16px 0; width: calc(100% - 32px); }
.ms-top { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-bottom: 1px solid var(--line); }
.ms-top .tri { flex: none; background: var(--surface-2); border-radius: 12px; }
.ms-body { flex: 1; min-width: 0; }
.ms-k { display: inline-block; font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: .9rem; color: #0b0d10; background: var(--tc, var(--brand-mid));
  border-radius: var(--r-tag); padding: 0 8px; transform: skewX(var(--skew)); margin-bottom: 6px; }
.ms-pair { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 1.15rem; line-height: 1.35; color: var(--ink); margin: 0; }
.ms-pair b { font-family: var(--f-display); font-weight: 700; }
.ms-pair.sm { font-size: 1.02rem; }
.ms-x { color: var(--tt, var(--muted)); display: inline-flex; }
.ms-x .ic { width: 18px; height: 18px; }
.ms-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.ms-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 3px 10px;
  font-size: .9rem; color: var(--ink-2); line-height: 1.4; }
.ms-chip .ic { width: 15px; height: 15px; color: var(--muted); }
.ms-chip b { color: var(--ink); font-family: var(--f-display); font-style: italic; }
.ms-chip.warn { background: rgba(201, 139, 245, .1); border-color: rgba(201, 139, 245, .55); color: #e4cdfb; }
.ms-chip.warn .ic { color: #c98bf5; }
.ms-top .solid-btn { width: 100%; }
.mission .ms-row { display: flex; gap: 12px; align-items: center; padding: 12px 16px; border-top: 0; border-bottom: 1px solid var(--line); }
.ms-row .tri { flex: none; background: var(--surface-2); border-radius: 10px; }
.ms-row .ms-chips { margin: 6px 0 0; }
.ms-empty { padding: 14px 0 4px; color: var(--ink-2); }
.tri-gap { animation: rt-dash 1.4s linear infinite; }
@keyframes rt-dash { to { stroke-dashoffset: -18; } }
/* แถวเหตุการณ์ยึด */
.fx-card { padding: 4px 0 6px; }
.fx-h { display: flex; align-items: center; gap: 8px; padding: 12px 16px 6px; flex-wrap: wrap; }
.fx-h h2 { margin: 0; display: flex; align-items: center; gap: 6px; }
.fx-h h2 .ic { color: var(--muted); }
.fx-card .fx-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); margin: 0; }
.fx-card .fx-row:first-of-type { border-top: 0; }
.fx-card .fx-row.new { background: linear-gradient(90deg, rgba(138, 60, 196, .16), transparent 70%); box-shadow: inset 3px 0 0 var(--t1bar); }
.fx-face { position: relative; flex: none; display: flex; align-items: center; min-width: 46px; }
.fx-face .face-img, .fx-av { width: 44px; height: 44px; border-width: 3px; }
.fx-face .fx-av.second { width: 34px; height: 34px; margin-left: -14px; align-self: flex-end; }
.fx-dot { position: absolute; top: -2px; right: -2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid var(--bg);
  box-shadow: 0 0 0 3px rgba(201, 139, 245, .55), 0 0 12px #c98bf5; animation: rt-live 1.6s ease-in-out infinite; }
.fx-lm { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: color-mix(in srgb, var(--tc) 18%, var(--surface-2));
  color: var(--tc); border: 1.5px solid color-mix(in srgb, var(--tc) 60%, transparent); flex: none; }
.fx-lm .ic { width: 22px; height: 22px; }
.fx-txt { flex: 1; min-width: 0; }
.fx-line { color: var(--ink-2); line-height: 1.5; }
.fx-line b { color: var(--ink); }
.fx-line .tm-tag { margin: 0 2px; }
.fx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 5px; color: var(--muted); font-size: .9rem; }
.fx-meta .ic { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; }
.fx-amt { display: inline-flex; align-items: center; gap: 3px; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.05rem; color: var(--tt);
  background: var(--tb); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent); border-radius: var(--r-tag); padding: 0 8px; transform: skewX(var(--skew));
  font-variant-numeric: tabular-nums; }
.fx-amt .ic { width: 14px; height: 14px; }
.fx-go { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface-3); color: var(--ink); display: grid;
  place-items: center; cursor: pointer; }
.fx-go:hover { background: #2d343d; }
.fx-go .ic { width: 21px; height: 21px; }
.fx-empty { padding: 10px 16px 14px; color: var(--muted); }
.warn-txt { color: #e4cdfb; }
@media (min-width: 900px) { .fx-big b { font-size: 2.1rem; } }
.ms-top { flex-direction: column; }
.ms-top .tri { width: 100%; height: auto; max-height: 150px; }
@media (min-width: 640px) { .ms-top { flex-direction: row; } .ms-top .tri { width: 260px; flex: none; } }

/* ---------- ปุ่มรูปคนบนแผนที่ (เห็นตลอด · เหนือปุ่มซูม) + เมนูเลือก ---------- */
.map-fab { position: relative; width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--glass); border: 1px solid rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
.map-fab .ic { width: 23px; height: 23px; }
.map-fab.off { color: var(--muted); }
.map-fab.off::after { content: ''; position: absolute; width: 26px; height: 2.4px; background: var(--muted); transform: rotate(-45deg); border-radius: 2px; }
#pin-menu { position: absolute; right: 62px; bottom: 66px; z-index: 9; width: 240px; padding: 8px; border-radius: var(--r-panel);
  display: flex; flex-direction: column; gap: 4px; box-shadow: 0 12px 34px rgba(0, 0, 0, .55); max-height: calc(100% - 16px); overflow-y: auto; }
#pin-menu.hidden { display: none; }
.pm-h { padding: 4px 8px 6px; display: flex; flex-direction: column; }
.pm-h b { font-family: var(--f-display); font-style: italic; font-size: 1.08rem; }
#pin-menu button { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ink-2); font-family: var(--f-body); font-weight: 600; font-size: 1rem; cursor: pointer; text-align: left; }
#pin-menu button .ic { width: 20px; height: 20px; color: var(--muted); }
#pin-menu button:hover { background: rgba(255, 255, 255, .06); }
#pin-menu button.on { background: var(--ink); color: var(--on-brand); }
#pin-menu button.on .ic { color: var(--on-brand); }
#pin-menu .pm-switch { justify-content: space-between; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; margin-top: 4px; }
#pin-menu .pm-switch.on { background: transparent; color: var(--ink-2); }
.pm-switch i { width: 40px; height: 24px; border-radius: 12px; background: var(--surface-3); position: relative; flex: none; transition: background .15s; }
.pm-switch i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .15s var(--ease), background .15s; }
.pm-switch.on i { background: var(--t0); }
.pm-switch.on i::after { transform: translateX(16px); background: #fff; }
.pm-switch:disabled { opacity: .45; }
body.mymap-mode .map-fab, body.mymap-mode #pin-menu { display: none !important; }

/* ======================= หน้าแรกแนะนำเกม (landing · คนยังไม่เข้าระบบ) ======================= */
.ld-body { margin: 0; background: var(--bg); overflow-x: hidden; height: auto; min-height: 100%; }
html:has(.ld-body) { height: auto; scroll-behavior: smooth; }
.ld-top { position: absolute; top: 0; left: 0; right: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top)) 20px 14px; }
.ld-logo img { display: block; width: 52px; height: 52px; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .6)); }
.ld-nav { display: flex; align-items: center; gap: 14px; }
.ld-nav a { color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 600; }
.ld-nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ld-lang { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18);
  background: var(--glass); color: var(--muted); font-family: var(--f-display); font-weight: 700; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ld-lang i { font-style: normal; opacity: .5; }
.ld-lang span.on { color: var(--ink); }
.ld-in { border: 1.5px solid rgba(255, 255, 255, .25); border-radius: var(--r-btn); padding: 7px 14px; background: var(--glass); }
.ld-hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; }
#ld-map { position: absolute; inset: 0; background: radial-gradient(80% 60% at 50% 45%, #171c22, var(--bg)); opacity: 0; transition: opacity 1.2s var(--ease); }
body.map-on #ld-map { opacity: 1; }
#ld-map .maplibregl-ctrl-bottom-right { bottom: 6px; }
.ld-shade { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 50% 50%, rgba(13, 15, 18, .62), rgba(13, 15, 18, .2) 70%, rgba(13, 15, 18, .55)),
  linear-gradient(180deg, rgba(13, 15, 18, .55), transparent 20%, transparent 70%, var(--bg)); }
.ld-hero-in { position: relative; z-index: 2; text-align: center; padding: 110px 20px 70px; max-width: 980px; }
.ld-h1 { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: clamp(3.6rem, 13vw, 9.2rem); line-height: 1.02; margin: 0 0 18px;
  letter-spacing: 0; text-shadow: 0 8px 40px rgba(0, 0, 0, .55); }
.ld-h1 span { display: block; padding: 0 .08em; }
.ld-h1 .g { background: var(--brand); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 6px 30px rgba(109, 143, 230, .35)); }
.ld-h1.sm { font-size: clamp(2.6rem, 8vw, 5.4rem); }
.ld-lede { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.25rem, 2.4vw, 1.7rem); color: var(--ink); margin: 0 0 8px; text-shadow: 0 2px 14px rgba(0, 0, 0, .7); }
.ld-sub { color: var(--ink-2); font-size: clamp(1rem, 1.6vw, 1.15rem); max-width: 640px; margin: 0 auto 24px; text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.ld-cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ld-cta .bigbtn { width: auto; min-width: 230px; min-height: 58px; font-size: 1.3rem; font-style: italic; padding: 12px 26px; }
.ld-cta .ld-app { min-width: 230px; min-height: 58px; font-size: 1.15rem; flex: 0 0 auto; background: rgba(13, 15, 18, .78); border-color: rgba(255, 255, 255, .22);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ld-login { display: inline-block; margin-top: 14px; color: var(--ink-2); font-weight: 600; text-underline-offset: 4px; }
.ld-stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 10px 26px; margin: 30px auto 0; padding: 14px 22px;
  border-radius: var(--r-panel); background: rgba(13, 15, 18, .72); border: 1px solid rgba(255, 255, 255, .08); -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px); width: max-content; max-width: 100%; }
.ld-stats div { text-align: left; min-width: 0; }
.ld-stats b { display: block; font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.7rem; line-height: 1.15; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.ld-stats span { color: var(--muted); font-size: .9rem; }
.ld-stats .vs em { font-style: italic; }
.ld-stats .vs i { color: var(--muted); margin: 0 6px; font-style: normal; }
.ld-down { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 3; color: var(--ink-2); width: 44px; height: 44px; display: grid;
  place-items: center; animation: ld-bob 2.4s ease-in-out infinite; }
@keyframes ld-bob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }
.ld-sec { max-width: 1160px; margin: 0 auto; padding: 70px 20px 30px; }
.ld-h2 { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: clamp(2rem, 4.4vw, 3rem); margin: 0 0 22px; }
.ld-note { color: var(--muted); margin: -10px 0 18px; }
.ld-feats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.ld-feat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sheet); overflow: hidden; display: flex; flex-direction: column; }
.ld-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--surface-2); }
.ld-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ld-img.shot { background: radial-gradient(80% 90% at 50% 100%, rgba(109, 143, 230, .22), transparent 70%), var(--surface-2); display: flex; justify-content: center; padding-top: 18px; }
.ld-img.shot img { width: auto; height: auto; max-width: 62%; object-fit: cover; object-position: top; border-radius: 18px 18px 0 0; border: 1px solid var(--line);
  border-bottom: 0; box-shadow: 0 -10px 40px rgba(0, 0, 0, .5); }
.ld-ft { padding: 18px 20px 22px; }
.ld-n { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.1rem; background: var(--brand); -webkit-background-clip: text; background-clip: text;
  color: transparent; padding-right: 6px; }
.ld-ft h3 { font-family: var(--f-display); font-style: italic; font-weight: 800; font-size: 1.5rem; margin: 2px 0 6px; }
.ld-ft p { color: var(--ink-2); margin: 0; line-height: 1.55; }
.ld-prov { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ld-pc { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 14px 16px 12px 48px; }
.ld-pc .r { position: absolute; left: 14px; top: 12px; font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: 1.4rem; color: var(--muted); }
.ld-pc b { font-family: var(--f-display); font-weight: 700; font-size: 1.12rem; }
.ld-pc .m { display: flex; gap: 14px; color: var(--muted); font-size: .9rem; margin-top: 2px; }
.ld-pc .m em { font-family: var(--f-display); font-style: italic; font-weight: 800; color: var(--ink); font-size: 1.05rem; }
.ld-end { text-align: center; padding-top: 80px; padding-bottom: 70px; }
.ld-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; padding: 26px 20px calc(30px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--line); color: var(--muted); font-size: .92rem; }
.ld-foot a { color: var(--ink-2); }
.ld-fine { flex-basis: 100%; text-align: center; }
@media (max-width: 699px) {
  .ld-nav { gap: 8px; } .ld-nav > a:first-child { display: none; }
  .ld-hero-in { padding: 96px 16px 64px; }
  .ld-cta .bigbtn, .ld-cta .ld-app { width: 100%; min-width: 0; }
  .ld-stats { grid-template-columns: repeat(2, 1fr); width: 100%; gap: 12px 16px; }
  .ld-stats b { font-size: 1.45rem; }
  .ld-stats .vs { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 10px; }
  .ld-feats { grid-template-columns: 1fr; }
  .ld-sec { padding-top: 50px; }
}
@media (prefers-reduced-motion: reduce) { .ld-down { animation: none; } }

/* ภาพสำหรับแชร์ลิงก์หน้าแรก (og:image) · ซ่อนตัวเลข/ปุ่มรอง */
body.og-shot .ld-stats, body.og-shot .ld-login, body.og-shot .ld-down, body.og-shot .ld-top nav, body.og-shot .ld-sub,
body.og-shot .maplibregl-ctrl-attrib { display: none !important; }

/* หน้าข้อความสาธารณะ (/how วิธีเล่น + คำถามที่พบบ่อย · ให้ Google/ผู้ช่วย AI อ่าน) */
.join.doc { max-width: 760px; line-height: 1.65; }
.doc-logo { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-family: var(--f-display); font-weight: 800; margin-bottom: 10px; }
.doc-intro { color: var(--ink-2); font-size: 1.08rem; margin: 6px 0 10px; }
.doc-toc { margin: 0 0 6px; color: var(--muted); }
.doc-toc a, .doc-foot a, .doc-link { color: var(--brand); }
.doc p, .doc li { color: var(--ink-2); }
.doc table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: .95rem; }
.doc th, .doc td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.doc th { color: var(--ink); background: var(--surface-2); }
.doc details { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--surface-2); padding: 10px 14px; margin: 8px 0; }
.doc details > summary { color: var(--ink); }
.doc details > p { margin: 8px 0 2px; }
.doc-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.doc-cta .bigbtn { width: auto; margin-top: 0; }
.doc-foot { margin-top: 18px; }