/* ══════════════════ THEME: eFootball 2022 style ══════════════════
   โทนน้ำเงินเข้ม + เหลือง ปุ่ม/แท็บเฉียงแบบเมนูเกม
   ค่า RGB แบบ "r g b" ให้ Tailwind ใส่ความโปร่งใสได้ เช่น bg-accent/10
   ทุกสีผ่านความคมชัด ≥4.5:1 บนพื้นการ์ด (faint ใช้กับของตกแต่งเท่านั้น) */
:root {
  color-scheme: dark;
  --page: 8 24 150;         /* #081896 น้ำเงินสดแบบโปสเตอร์ eFootball 2022 */
  --surface: 17 42 107;     /* #112A6B */
  --sunken: 8 20 54;        /* #081436 */
  --ink: 255 255 255;
  --soft: 214 225 250;      /* #D6E1FA */
  --muted: 150 168 214;     /* #96A8D6 */
  --faint: 84 104 156;      /* #54689C */
  --line: 150 180 255;
  --accent: 255 222 46;     /* #FFDE2E เหลือง = สิ่งที่ถูกเลือก/ปุ่มหลัก */
  --on-accent: 6 14 42;
  --link: 91 155 255;       /* #5B9BFF น้ำเงินสว่าง */
  --win: 52 227 160;
  --loss: 255 107 133;
  --stripe: 255 228 0;      /* #FFE400 ลายเหลืองพื้นหลัง */

  --surface-bg: linear-gradient(180deg, #112A6B 0%, #0B1C4A 100%);
  --surface-shadow: inset 0 1px 0 rgb(255 255 255 / .07), 0 18px 40px -24px rgb(0 0 0 / .85);
  --surface-shadow-hover: inset 0 1px 0 rgb(255 255 255 / .1), 0 18px 44px -18px rgb(47 120 255 / .55);
  --card-inner: linear-gradient(180deg, #163478 0%, #0B1C4A 100%);
  --sheen: rgb(255 255 255 / .14);

  --t1-frame: linear-gradient(160deg, #FFE680, #E0A800 40%, rgb(150 180 255 / .14) 75%);
  --t1-label: #FFD54A;
  --t2-frame: linear-gradient(160deg, #F1F5FB, #9FB0CC 40%, rgb(150 180 255 / .14) 75%);
  --t2-label: #D3DCEB;
  --t3-frame: linear-gradient(160deg, #F8C49A, #C06A2B 40%, rgb(150 180 255 / .14) 75%);
  --t3-label: #F0A36B;
  --t0-frame: rgb(150 180 255 / .24);
  --t0-label: #96A8D6;
}

/* ══════════════════ BASE ══════════════════ */
body {
  font-family: 'Noto Sans Thai', system-ui, -apple-system, sans-serif;
  background: rgb(var(--page));
  color: rgb(var(--soft));
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
/* แอปบนมือถือ (เปิดจากหน้าจอโฮมของ iPhone): เว้นที่ให้แถบสถานะ รอยบาก และแถบโฮม · เครื่องอื่นค่าเป็น 0 = หน้าตาเหมือนเดิม */
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
header.fl-safe { padding-top: env(safe-area-inset-top); }
footer.fl-safe { padding-bottom: calc(1.75rem + env(safe-area-inset-bottom)); }
div.fl-scrim { padding-top: max(1rem, env(safe-area-inset-top)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); }
/* น้ำเงินสดไล่สีจากด้านบน + แสงฟ้ามุมขวาบน แบบโปสเตอร์ eFootball 2022 (fixed ไม่เลื่อนตาม) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1100px 620px at 86% -10%, rgb(70 120 255 / .45), transparent 62%),
    linear-gradient(180deg, #0B27C4 0%, rgb(var(--page)) 520px);
}

/* ══════════════════ แถบเหลืองวิ่งที่ขอบเว็บ (ใน index.html › .ef-stripes) ══════════════════
   แบบตัวอย่างเกม eFootball 2022: เส้นแนวนอนหลายขนาดผสมเส้นเฉียง สุ่มลายใหม่ทุกรอบ (สคริปต์ใน index.html วาดเป็น SVG ทีละกลุ่ม)
   แถบข้างกว้างเท่าที่ว่างข้างเนื้อหา (เนื้อหากว้าง 1152px = max-w-6xl) → ไม่ยื่นไปทับเนื้อหา · จอแคบเหลือขอบบาง 16px (ในระยะขอบ 20px ของ main)
   สีเหลืองทึบ (ไม่หรี่ → ไม่เป็นสีขุ่น) · ตัวหนังสือบนพื้นใช้ .ef-halo ให้อ่านง่าย */
.ef-stripes { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.ef-stripes .fl, .ef-stripes .fr { position: absolute; top: calc(122px + env(safe-area-inset-top)); bottom: 0;
  width: clamp(16px, calc(50vw - 576px), 16vw); }   /* เริ่มใต้แถบเมนู (สูง 116px) ไม่ลอดใต้แถบเมนูที่โปร่งแสง */
@media (max-width: 639px) {   /* จอแคบ: แถวเมนูเลื่อนข้างได้ บางเครื่องมีแถบเลื่อนทำให้แถบเมนูสูงขึ้นอีก ~9px */
  .ef-stripes .fl, .ef-stripes .fr { top: calc(131px + env(safe-area-inset-top)); }
}
.ef-stripes .fl { left: 0; }
.ef-stripes .fr { right: 0; }
.ef-stripes .slot { position: absolute; left: 0; right: 0; }
.ef-stripes .g { position: absolute; left: 0; display: block; overflow: hidden; }
.ef-stripes .fl .g { transform-origin: left center; }
.ef-stripes .fr .g { transform-origin: right center; }
.ef-stripes .g rect, .ef-stripes .g polygon { fill: rgb(var(--stripe)); }
.ef-stripes .g polygon { stroke: rgb(var(--stripe)); stroke-width: 1.5px; stroke-linejoin: round; }   /* มุมเส้นเฉียงมนนิด ๆ */
.ef-stripes .gl { transform-box: fill-box; animation: ef-glitch 3.3s steps(1) var(--gd, 1s) infinite; }
/* 3 ท่า (สุ่มต่อกลุ่ม) · ทุกท่าเริ่มและจบที่พ้นจอ = จังหวะที่สคริปต์สุ่มลายใหม่ ไม่มีใครเห็นตอนเปลี่ยน */
@keyframes ef-bar-l { 0% { transform: translateX(-110%); } 9% { transform: translateX(3%); } 13%, 64% { transform: translateX(0); } 74%, 100% { transform: translateX(-110%); } }
@keyframes ef-bar-r { 0% { transform: translateX(110%); } 9% { transform: translateX(-3%); } 13%, 64% { transform: translateX(0); } 74%, 100% { transform: translateX(110%); } }
@keyframes ef-grow-l { 0% { transform: scaleX(0); } 12%, 66% { transform: scaleX(1); } 76%, 100% { transform: scaleX(0); } }
@keyframes ef-grow-r { 0% { transform: scaleX(0); } 12%, 66% { transform: scaleX(1); } 76%, 100% { transform: scaleX(0); } }
@keyframes ef-step-l { 0% { transform: translateX(-110%); } 4% { transform: translateX(-72%); } 7% { transform: translateX(-36%); } 10%, 62% { transform: translateX(0); }
  66% { transform: translateX(-30%); } 70% { transform: translateX(-66%); } 74%, 100% { transform: translateX(-110%); } }
@keyframes ef-step-r { 0% { transform: translateX(110%); } 4% { transform: translateX(72%); } 7% { transform: translateX(36%); } 10%, 62% { transform: translateX(0); }
  66% { transform: translateX(30%); } 70% { transform: translateX(66%); } 74%, 100% { transform: translateX(110%); } }
/* กะพริบแบบดิจิทัล: กระตุกเข้าด้านใน แล้วกลับที่ (ฝั่งขวาถูกกลับด้านทั้งกลุ่มอยู่แล้ว ใช้ท่าเดียวกันได้) */
@keyframes ef-glitch { 0%, 88%, 100% { transform: none; opacity: 1; } 90% { transform: translateX(22%); } 93% { transform: translateX(-9%); opacity: .55; } 96% { transform: none; opacity: 1; } }

/* ══════════════════ อินโทรตอนเปิดเว็บ (ใน index.html › .fl-intro) ══════════════════
   ชื่อคลาสขึ้นต้น fl- เสมอ (เช่น fl-ring) · ชื่อสั้นอย่าง ring จะชนคำสั่งของ Tailwind แล้วได้เส้นขอบแปลก ๆ
   แถบเหลืองกวาดเข้า (0–1.2 วิ) → วงแหวนวาด + ถ้วยรางวัล (0.7–1.7) → ชื่อลีก (1.4–2.1) → แถบกวาดออก + เปิดม่านเข้าหน้าเว็บ (2.0–2.9) */
.fl-intro { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; align-content: center; gap: clamp(8px, 2vh, 18px);
  overflow: hidden; cursor: pointer; text-align: center; background: linear-gradient(180deg, #0B27C4, rgb(var(--page))); }
.fl-intro.play { display: grid; animation: fl-intro-out 2.9s cubic-bezier(.7, 0, .3, 1) both; }
@keyframes fl-intro-out { 0%, 80% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 0 100%); } }
.fl-intro .lane { position: absolute; left: 0; right: 0; top: var(--t); height: var(--h); }
.fl-intro .lane i { display: block; height: 100%; width: var(--w); margin-left: var(--x); border-radius: 999px; background: rgb(var(--stripe)); }
.fl-intro.play .sweep-in .lane { animation: fl-lane-in .9s cubic-bezier(.75, 0, .25, 1) var(--d) both; }
.fl-intro.play .sweep-out .lane { animation: fl-lane-out .75s cubic-bezier(.75, 0, .25, 1) var(--d) both; }
@keyframes fl-lane-in { from { transform: translateX(105%); } to { transform: translateX(-105%); } }
@keyframes fl-lane-out { from { transform: translateX(-105%); } to { transform: translateX(105%); } }
.fl-intro .mark { position: relative; width: clamp(96px, 24vmin, 190px); aspect-ratio: 1; }
.fl-intro .fl-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.fl-intro .fl-ring circle { fill: none; stroke: rgb(var(--stripe)); stroke-width: 11; stroke-dasharray: 239; stroke-dashoffset: 239; }
.fl-intro.play .fl-ring { animation: fl-ring-spin .8s cubic-bezier(.2, .8, .2, 1) .7s both; }
.fl-intro.play .fl-ring circle { animation: fl-ring-draw .8s cubic-bezier(.2, .8, .2, 1) .7s both; }
@keyframes fl-ring-draw { to { stroke-dashoffset: 0; } }
@keyframes fl-ring-spin { from { transform: rotate(-200deg); } to { transform: rotate(-90deg); } }
.fl-intro .cup { position: absolute; inset: 23% 0; display: flex; justify-content: center; }   /* โลโก้สูง 54% ของวง → อยู่ในวงแหวน ไม่แตะเส้น */
.fl-intro .cup svg { display: block; height: 100%; width: auto; }
.fl-intro.play .cup { animation: fl-pop .45s cubic-bezier(.3, 1.6, .5, 1) 1.25s both; }
@keyframes fl-pop { from { transform: scale(0); } to { transform: scale(1); } }
.fl-intro .word { position: relative; font-family: Kanit, "Noto Sans Thai", sans-serif; font-style: italic; font-weight: 700;
  font-size: clamp(30px, 7.5vw, 72px); line-height: 1; letter-spacing: .04em; color: #fff; }
.fl-intro .sub { position: relative; font-weight: 600; font-size: clamp(10px, 1.5vw, 14px); letter-spacing: .3em; color: rgb(var(--stripe)); }
.fl-intro.play .word { animation: fl-rise .5s cubic-bezier(.2, .8, .2, 1) 1.4s both; }
.fl-intro.play .sub { animation: fl-rise .5s cubic-bezier(.2, .8, .2, 1) 1.6s both; }
@keyframes fl-rise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ตัวหนังสือที่วางบนพื้นหลังโดยตรง (หัวข้อ ลิงก์ ท้ายหน้า): ขอบเงาสีพื้น → อ่านออกแม้ทับลายเหลือง */
.ef-halo { text-shadow: 0 0 2px rgb(var(--page)), 0 0 4px rgb(var(--page)), 0 0 10px rgb(var(--page)), 0 0 22px rgb(var(--page) / .9); }

.font-display { font-variant-numeric: tabular-nums; }

/* ══════════════════ BOOT SCREEN ══════════════════ */
.boot {
  display: grid;
  place-items: center;
  gap: 18px;
  height: 100vh;
  color: rgb(var(--muted));
  font-size: 14px;
  text-align: center;
  padding: 24px;
}
.boot-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid rgb(var(--line) / .15);
  border-top-color: rgb(var(--accent));
  animation: fl-spin .8s linear infinite;
}
@keyframes fl-spin { to { transform: rotate(360deg); } }

/* ══════════════════ SURFACES ══════════════════ */
/* ใส่เงาผ่าน --tw-shadow เพื่อให้ใช้ร่วมกับ ring-* ของ Tailwind ได้ */
.fl-surface {
  background: var(--surface-bg);
  --tw-shadow: var(--surface-shadow);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.fl-lift { transition: box-shadow .2s ease, transform .2s ease; }
.fl-lift:hover { --tw-shadow: var(--surface-shadow-hover); transform: translateY(-1px); }
.fl-scrim { background: rgb(2 6 20 / .78); }
.fl-hl { background: linear-gradient(180deg, #FFF07A, #FFC400); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* เส้นไล่สีใต้หัวเว็บ */
.ef-rule { height: 2px; background: linear-gradient(90deg, transparent, #2F78FF 18%, #FFDE2E 50%, #2F78FF 82%, transparent); }

/* ══════════════════ SLANTED BUTTONS / TABS ══════════════════ */
/* พื้นหลังอยู่ใน ::before ที่เอียง → ตัวหนังสือไม่เอียง และกรอบโฟกัสไม่โดนตัด */
.ef-btn { position: relative; isolation: isolate; }
.ef-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: skewX(-14deg);
  border-radius: 5px;
  transition: filter .15s ease, background .15s ease;
}
.ef-btn:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 3px; }
.ef-btn-primary { color: rgb(var(--on-accent)); font-weight: 600; }
.ef-btn-primary::before { background: linear-gradient(180deg, #FFEB5C, #FFC800); box-shadow: 0 0 0 2px rgb(var(--page) / .85), 0 6px 18px -8px rgb(0 0 0 / .6); }
.ef-btn-primary:hover::before { filter: brightness(1.08); }
.ef-btn-ghost { color: rgb(var(--soft)); }
.ef-btn-ghost::before { background: rgb(var(--line) / .08); box-shadow: inset 0 0 0 1px rgb(var(--line) / .25); }
.ef-btn-ghost:hover { color: rgb(var(--ink)); }
.ef-btn-ghost:hover::before { background: rgb(var(--line) / .15); }
.ef-btn-danger { color: rgb(var(--loss)); }
.ef-btn-danger::before { background: rgb(var(--loss) / .12); box-shadow: inset 0 0 0 1px rgb(var(--loss) / .4); }

.ef-tab { color: rgb(var(--muted)); }
.ef-tab:hover { color: rgb(var(--ink)); }
.ef-tab::before { background: transparent; }
.ef-tab:hover::before { background: rgb(var(--line) / .08); }
.ef-tab-on, .ef-tab-on:hover { color: rgb(var(--on-accent)); font-weight: 600; }
.ef-tab-on::before, .ef-tab-on:hover::before { background: linear-gradient(180deg, #FFEB5C, #FFC800); }

/* โลโก้: บล็อกน้ำเงินเอียง */
.ef-brand { color: #fff; }
/* โลโก้ถ้วยบนหัวเว็บ (index.html › window.flLogo) · สูงตามคลาสที่ใส่ กว้างตามสัดส่วนถ้วย */
.fl-logo { display: inline-block; flex-shrink: 0; }
.fl-logo svg { display: block; height: 100%; width: auto; filter: drop-shadow(0 4px 10px rgb(0 0 0 / .4)); }
.ef-brand::before { background: linear-gradient(135deg, #3B82FF, #1D4ED8); box-shadow: 0 8px 20px -10px rgb(47 120 255 / .9); }

/* หัวข้อ: แถบเหลืองเอียงด้านหน้า */
.ef-title { position: relative; padding-left: 18px; }
.ef-title::before {
  content: "";
  position: absolute;
  left: 2px; top: 12%; bottom: 12%;
  width: 6px;
  transform: skewX(-14deg);
  background: linear-gradient(180deg, #FFEB5C, #FFC400);
  border-radius: 2px;
}

/* ══════════════════ SCROLLBAR ══════════════════ */
::-webkit-scrollbar        { width: 9px; height: 9px; }
::-webkit-scrollbar-track  { background: rgb(var(--page)); }
::-webkit-scrollbar-thumb  { background: rgb(var(--line) / .25); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgb(var(--line) / .4); }

/* ══════════════════ FORM CONTROLS ══════════════════ */
select option, select optgroup { background: #0B1C4A; color: #fff; }

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

input[type=color] {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch {
  border: 1px solid rgb(var(--line) / .3);
  border-radius: 8px;
}

/* ══════════════════ POSITIONS (สีตามแบบเกม: GK ส้ม · DF น้ำเงิน · MF เขียว · FW แดง) ══════════════════ */
.ef-pos {
  display: inline-grid;
  place-items: center;
  min-width: 34px;
  height: 18px;
  padding: 0 4px;
  border-radius: 3px;
  font: italic 700 10px/1 Kanit, sans-serif;
  letter-spacing: .02em;
}
.ef-pos-GK { background: #FF9F1C; color: #1A1000; }
.ef-pos-DF { background: #2563EB; color: #FFFFFF; }
.ef-pos-MF { background: #2ECC71; color: #04210F; }
.ef-pos-FW { background: #D7263D; color: #FFFFFF; }
.ef-pos-select { border: 0; border-radius: 6px; padding: 6px 4px; font: italic 700 12px/1.2 Kanit, sans-serif; cursor: pointer; }
.ef-pos-select:focus-visible { outline: 2px solid rgb(var(--accent)); outline-offset: 2px; }

/* ประเภทการ์ดนักเตะ (ไม่มี Standard) — ทุกสีตัวหนังสือผ่าน ≥5:1 */
.ef-card {
  display: inline-grid;
  place-items: center;
  height: 18px;
  padding: 0 6px;
  border-radius: 3px;
  font: italic 700 10px/1 Kanit, sans-serif;
  letter-spacing: .02em;
  white-space: nowrap;
  transform: skewX(-8deg);
}
.ef-card-epic      { background: linear-gradient(135deg, #F4D27A, #E0B33A 55%, #B8891F); color: #1A1200; }
.ef-card-bigtime   { background: #6D28D9; color: #fff; }
.ef-card-showtime  { background: #BE185D; color: #fff; }
.ef-card-highlight { background: #0E7490; color: #fff; }
.ef-card-featured  { background: #15803D; color: #fff; }
.ef-card-potw      { background: #1D4ED8; color: #fff; }
.ef-card-legendary { background: #B45309; color: #fff; }

/* สนามสำหรับแสดงตัวจริง 11 คน */
.ef-pitch { position: relative; background: repeating-linear-gradient(180deg, #0E5A36 0 10%, #0C5131 10% 20%); }
.ef-pitch::before { content: ""; position: absolute; inset: 10px; border: 1.5px solid rgb(255 255 255 / .28); border-radius: 4px; pointer-events: none; }
.ef-pitch::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; border-top: 1.5px solid rgb(255 255 255 / .28); pointer-events: none; }
.ef-pitch-circle { position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid rgb(255 255 255 / .28); border-radius: 50%; pointer-events: none; }

/* ══════════════════ COLLECTOR CARD ══════════════════ */
/* กรอบตามอันดับ: fl-tier-1 ทอง · 2 เงิน · 3 ทองแดง · 0 ธรรมดา */
.fl-tier-0 { --frame: var(--t0-frame); --tier-label: var(--t0-label); }
.fl-tier-1 { --frame: var(--t1-frame); --tier-label: var(--t1-label); }
.fl-tier-2 { --frame: var(--t2-frame); --tier-label: var(--t2-label); }
.fl-tier-3 { --frame: var(--t3-frame); --tier-label: var(--t3-label); }
.fl-frame { background: var(--frame); }
.fl-tier-label { color: var(--tier-label); }

/* การ์ดเอียงตามเมาส์ (JS ใส่ transform) + แสงวาบพาดผ่านตอน hover */
.fl-tilt { transition: transform .25s ease-out; transform-style: preserve-3d; will-change: transform; }
.fl-sheen {
  background: linear-gradient(115deg, transparent 35%, var(--sheen) 48%, transparent 60%);
  background-size: 250% 100%;
  background-position: 120% 0;
  transition: background-position .6s ease-out;
}
.fl-tilt:hover .fl-sheen { background-position: -20% 0; }

/* ══════════════════ MOTION ══════════════════ */
@keyframes fl-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fl-enter { animation: fl-fade-up .28s ease-out both; }

/* ══════════════════ MOMENTS (ผนังสมุดภาพ · แท็บ Moments) ══════════════════
   กรอบเหลืองหนา + หัวข้อในกรอบ (ตามแบบที่ผู้ใช้วาด) · ผนังน้ำเงินลายจุด · รูปเป็นโพลารอยด์เอียง ๆ ซ้อนกันได้
   ชิ้นของตัวเอง: ลากได้ (touch-action: none → ลากแล้วจอไม่เลื่อน) · จุดจับเป็นพิกเซลจริง ไม่ย่อตามผนัง */
.fl-wall-frame {
  border-radius: 22px; padding: 8px;
  background: linear-gradient(180deg, #FFEA55, #FFD21A);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .7), 0 26px 50px -30px rgb(0 0 0 / .9);
}
.fl-wall-title { margin: 0; font: italic 800 clamp(22px, 4.2vw, 34px)/1.15 Kanit, sans-serif; color: #141000; }
.fl-wall-tool {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 7px 14px;
  font-size: 13px; font-weight: 600; color: #fff; background: #081896; box-shadow: 0 2px 0 rgb(0 0 0 / .25);
  transition: transform .15s, background-color .15s;
}
.fl-wall-tool:hover { background: #0B27C4; }
.fl-wall-tool:active { transform: scale(.96); }
.fl-wall-tool.fl-on { background: #FF5C1F; }
.fl-wall-tool:disabled { opacity: .55; pointer-events: none; }
.fl-wall-zoom { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 999px; color: #141000; background: rgb(8 24 150 / .14); }
.fl-wall-zoom:hover { background: rgb(8 24 150 / .24); }
.fl-wall-zoom:disabled { opacity: .35; }
.fl-wall-tool:focus-visible, .fl-wall-zoom:focus-visible { outline: 2px solid #081896; outline-offset: 2px; }
.fl-wall-wrap { overflow-x: auto; overflow-y: hidden; border-radius: 16px; background: #081896; }
.fl-wall {
  position: relative; overflow: hidden; border-radius: 16px; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background:
    radial-gradient(70% 45% at 82% 0%, rgb(80 120 255 / .35), transparent 70%),
    radial-gradient(rgb(255 255 255 / .09) 1.2px, transparent 1.7px) 0 0 / 22px 22px,
    linear-gradient(180deg, #0B27C4, #081896 75%);
}
.fl-wall.fl-drawing { cursor: crosshair; }
.fl-wall.fl-dropping { outline: 3px dashed rgb(var(--accent)); outline-offset: -10px; }   /* ลากไฟล์รูปมาเหนือผนัง */
.fl-wall-mark { font: italic 800 1em/1 Kanit, sans-serif; letter-spacing: .06em; color: rgb(255 255 255 / .1); }
.fl-wall-item { position: absolute; transform-origin: center; outline: none; }
.fl-wall-item[role=button] { cursor: zoom-in; }
.fl-wall-item.fl-mine { cursor: grab; touch-action: none; }
.fl-wall-item.fl-mine:active { cursor: grabbing; }
.fl-wall-item:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.fl-polaroid { padding: 5% 5% 0; border-radius: 3px; background: #FBFAF3; box-shadow: 0 12px 24px -10px rgb(0 0 0 / .7), 0 1px 2px rgb(0 0 0 / .3); }
.fl-polaroid img, .fl-polaroid-wait { display: block; width: 100%; object-fit: cover; background: #0B1C4A; -webkit-user-drag: none; }
.fl-polaroid-cap {
  min-height: 3.1em; padding: .45em .2em .55em; overflow: hidden; text-align: center; word-break: break-word;
  font: italic 600 1em/1.25 Kanit, sans-serif; color: #1B2436;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fl-sticker > svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 6px 8px rgb(0 0 0 / .45)); }
/* ข้อความบนผนัง: ขอบน้ำเงินเข้มรอบตัวอักษร (เงาหลายทิศ) → อ่านออกบนรูปทุกสี */
.fl-wall-text {
  font: italic 800 1em/1.15 Kanit, sans-serif; white-space: pre;
  text-shadow: 0 .05em 0 #050D5E, .05em 0 0 #050D5E, -.05em 0 0 #050D5E, 0 -.05em 0 #050D5E,
    .04em .04em 0 #050D5E, -.04em -.04em 0 #050D5E, .04em -.04em 0 #050D5E, -.04em .04em 0 #050D5E, 0 .12em .25em rgb(0 0 0 / .45);
}
.fl-sel-box { position: absolute; inset: -7px; border: 2px dashed rgb(var(--accent)); border-radius: 6px; pointer-events: none; }
.fl-handle {
  position: absolute; z-index: 1; width: 26px; height: 26px; border-radius: 999px; display: grid; place-items: center;
  color: #081896; background: #fff; border: 2px solid #081896; box-shadow: 0 3px 8px rgb(0 0 0 / .4); touch-action: none;
}
.fl-handle::before { content: ""; position: absolute; inset: -9px; border-radius: 999px; }   /* พื้นที่แตะใหญ่กว่าที่เห็น */
.fl-h-rot { left: 50%; top: -46px; margin-left: -13px; cursor: grab; }
.fl-h-rot::after { content: ""; position: absolute; left: 50%; top: 24px; width: 2px; height: 14px; margin-left: -1px; background: rgb(var(--accent)); }
.fl-h-size { right: -20px; bottom: -20px; cursor: nwse-resize; background: rgb(var(--accent)); }
.fl-h-del { left: -20px; top: -20px; color: #fff; background: #E8283C; border-color: #fff; cursor: pointer; }
/* แถบเครื่องมือติดล่างจอ (ระหว่างวาด / ตอนเลือกชิ้นของตัวเอง) */
.fl-wall-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: rgb(6 14 42 / .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-top: 1px solid rgb(150 180 255 / .2); box-shadow: 0 -12px 30px -12px rgb(0 0 0 / .7);
}

/* ══════════════════ PODIUM (สถิตินักเตะ · 3 อันดับแรก) ══════════════════
   แท่นไล่สีทอง/เงิน/ทองแดง ขอบมน (ขอบบนมีแสง ด้านล่างเข้ม) · ตัวเลขบนแท่นสีเข้ม (ผ่าน ≥7:1)
   แสงสปอตไลต์ทองหลังอันดับ 1 + เส้นพื้นเวทีใต้แท่น (อยู่หลังแท่น) */
.fl-podium { position: relative; isolation: isolate; }
.fl-podium::before {
  content: ""; position: absolute; z-index: -1; left: 50%; top: 0; width: min(64%, 400px); aspect-ratio: 1; transform: translate(-50%, -12%);
  background: radial-gradient(closest-side, rgb(255 214 74 / .28), rgb(255 214 74 / .07) 60%, transparent); pointer-events: none;
}
.fl-podium::after {
  content: ""; position: absolute; z-index: -1; left: 3%; right: 3%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, rgb(var(--accent) / .75), transparent); pointer-events: none;
}
.fl-step { border-radius: 14px 14px 6px 6px; box-shadow: inset 0 1px 0 rgb(255 255 255 / .6), inset 0 -14px 20px -14px rgb(0 0 0 / .45), 0 16px 28px -18px rgb(0 0 0 / .9); }
.fl-step-1 { background: linear-gradient(180deg, #FFEF8F 0%, #F7C928 42%, #D29A00 100%); color: #2A1C00; }
.fl-step-2 { background: linear-gradient(180deg, #FFFFFF 0%, #D3DCEA 42%, #93A5C4 100%); color: #172033; }
.fl-step-3 { background: linear-gradient(180deg, #FFD9B6 0%, #E0965A 42%, #A95A22 100%); color: #2A1204; }

@media (prefers-reduced-motion: reduce) {
  *, .boot-ring { animation: none !important; transition: none !important; }
}