/* เปลวฟ้า เติมเกม — ชุดหน้าตาน่ารัก v1.1 (โหลดต่อจาก style.css) กลางวัน = พาสเทล, กลางคืน = ม่วงมีดาว */

/* ============ ตัวแปร ============ */
:root {
	--pf-rail: 258px;
	--pf-head: 70px;
	--pf-bg: #fff6fb;
	--pf-bg2: #fbf6ff;
	--pf-panel: #ffffff;
	--pf-line: #eadcff;
	--pf-text: #45296e;
	--pf-muted: #8a77ac;
	--pf-ink: #4a2a7c;
	--pf-link: color-mix(in srgb, var(--pf-accent) 58%, #8a1f5c);
	--pf-ok: #14b377;
	--pf-err: #ef4770;
	--pf-warn: #ef9a10;
	--pf-soft: #f7efff;
	--pf-hover: color-mix(in srgb, var(--pf-primary) 9%, transparent);
	--pf-edge: color-mix(in srgb, var(--pf-primary) 68%, #2b0d55);
	--pf-edge-soft: #dfcaff;
	--pf-shadow: 0 14px 34px color-mix(in srgb, var(--pf-primary) 16%, transparent);
	--pf-shadow-sm: 0 6px 16px color-mix(in srgb, var(--pf-primary) 11%, transparent);
	--pf-glass: rgba(255, 255, 255, .84);
	--pf-page: linear-gradient(180deg, #efe5ff 0%, #ffe8f4 44%, #fff4e2 100%);
	--pf-dot: rgba(168, 85, 247, .09);
	--pf-foot: #efe1ff;
	--pf-frame: #ffffff;
	--pf-wheel-alt: #6d4bd0;
	--pf-mint: #b9f1de; --pf-butter: #ffeaa8; --pf-sky: #c3e4ff; --pf-peach: #ffd8c7; --pf-lilac: #e4d5ff; --pf-rose: #ffd2e6;
	--pf-mint-ink: #0c8a63; --pf-butter-ink: #9c6200; --pf-sky-ink: #1c69ad; --pf-peach-ink: #bb5128; --pf-lilac-ink: #693dc0; --pf-rose-ink: #c4387c;
	--pf-radius: 24px;
	--pf-spring: cubic-bezier(.34, 1.56, .64, 1);
	--pf-tint: color-mix(in srgb, var(--pf-primary) 10%, #fff);
	--pf-glow: color-mix(in srgb, var(--pf-primary) 26%, transparent);
	--pf-grad: linear-gradient(120deg, var(--pf-primary), var(--pf-accent));
	--pf-head-font: var(--pf-font-head, "Mitr"), var(--pf-font), "Kanit", "Noto Sans Thai", system-ui, sans-serif;
	--pf-hand: "Mali", var(--pf-font-head, "Mitr"), var(--pf-font), cursive;
}
html.pf-night {
	--pf-bg: #1a1034; --pf-bg2: #22164a; --pf-panel: #291b55; --pf-line: #47357f; --pf-text: #f8f0ff; --pf-muted: #c2b1e6; --pf-ink: #f8f0ff;
	--pf-link: color-mix(in srgb, var(--pf-accent) 78%, #fff);
	--pf-ok: #44dd9c; --pf-err: #ff7f98; --pf-warn: #ffc65a;
	--pf-soft: #33236b; --pf-hover: rgba(255, 255, 255, .08);
	--pf-edge: color-mix(in srgb, var(--pf-primary) 55%, #0b041c); --pf-edge-soft: #150c36;
	--pf-shadow: 0 16px 36px rgba(6, 2, 20, .46); --pf-shadow-sm: 0 8px 18px rgba(6, 2, 20, .36);
	--pf-glass: rgba(34, 22, 74, .86);
	--pf-page: linear-gradient(180deg, #150c2e 0%, #24134f 52%, #3a1b57 100%);
	--pf-dot: rgba(255, 255, 255, .045);
	--pf-foot: #1d1140;
	--pf-frame: #5a4496;
	--pf-wheel-alt: #3b2a7c;
	--pf-mint: #1c5648; --pf-butter: #5b4712; --pf-sky: #1e466e; --pf-peach: #663323; --pf-lilac: #412e7c; --pf-rose: #69294d;
	--pf-mint-ink: #9af0d2; --pf-butter-ink: #ffe08a; --pf-sky-ink: #a9d8ff; --pf-peach-ink: #ffc2a8; --pf-lilac-ink: #dcc8ff; --pf-rose-ink: #ffc0dc;
	--pf-tint: color-mix(in srgb, var(--pf-primary) 22%, #1a1034);
	--pf-glow: color-mix(in srgb, var(--pf-primary) 40%, transparent);
	color-scheme: dark;
}
.pf-tone-pink { --tone: var(--pf-rose); --tone-ink: var(--pf-rose-ink); }
.pf-tone-mint { --tone: var(--pf-mint); --tone-ink: var(--pf-mint-ink); }
.pf-tone-butter { --tone: var(--pf-butter); --tone-ink: var(--pf-butter-ink); }
.pf-tone-sky { --tone: var(--pf-sky); --tone-ink: var(--pf-sky-ink); }
.pf-tone-lilac { --tone: var(--pf-lilac); --tone-ink: var(--pf-lilac-ink); }
.pf-tone-peach { --tone: var(--pf-peach); --tone-ink: var(--pf-peach-ink); }

/* ============ พื้นฐาน ============ */
body.pf-body { background: var(--pf-page) fixed; color: var(--pf-text); }
body.pf-body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background-image: radial-gradient(var(--pf-dot) 2px, transparent 2.600px); background-size: 26px 26px; }
.pf-body h1, .pf-body h2, .pf-body h3 { font-family: var(--pf-head-font); color: var(--pf-ink); font-weight: 600; }
.pf-body h2 { font-size: 1.3rem; }
.pf-body a { color: var(--pf-link); }
.pf-wrap { width: min(1160px, 100% - 44px); }
.pf-content { padding: 22px 0 40px; }
.pf-muted { color: var(--pf-muted); }
.pf-link { font-family: var(--pf-head-font); font-weight: 500; }
.pf-sprite { position: absolute; }
.pf-dd { fill: currentColor; overflow: visible; }
.pf-ico { width: 20px; height: 20px; flex: none; }

/* ============ ท้องฟ้าพื้นหลัง ============ */
.pf-sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pf-sk { position: absolute; }
.pf-sk-1, .pf-sk-2, .pf-sk-3 { left: -14%; color: #fff; filter: drop-shadow(0 6px 0 rgba(168, 85, 247, .1)); animation: pf-drift 80s linear infinite; }
.pf-sk-1 { top: 13%; width: 150px; opacity: .95; }
.pf-sk-2 { top: 47%; width: 110px; opacity: .75; animation-duration: 105s; animation-delay: -45s; }
.pf-sk-3 { top: 76%; width: 190px; opacity: .7; animation-duration: 130s; animation-delay: -90s; }
.pf-sk-4, .pf-sk-5, .pf-sk-6, .pf-sk-7, .pf-sk-8 { width: 20px; color: #ffcf5c; animation: pf-twinkle 3s ease-in-out infinite; }
.pf-sk-4 { top: 18%; left: 22%; }
.pf-sk-5 { top: 32%; right: 12%; width: 14px; color: var(--pf-accent); animation-delay: -1s; }
.pf-sk-6 { top: 58%; left: 34%; width: 12px; animation-delay: -2s; }
.pf-sk-7 { top: 70%; right: 24%; width: 18px; color: #9fd4ff; animation-delay: -.5s; }
.pf-sk-8 { top: 88%; left: 12%; width: 14px; color: var(--pf-primary); animation-delay: -1.600s; }
.pf-sk-9, .pf-sk-10, .pf-sk-11 { bottom: -40px; width: 22px; color: #ffa9cf; opacity: .5; animation: pf-floatup 22s linear infinite; }
.pf-sk-9 { left: 8%; }
.pf-sk-10 { left: 56%; width: 16px; animation-duration: 28s; animation-delay: -9s; }
.pf-sk-11 { right: 9%; width: 26px; animation-duration: 34s; animation-delay: -18s; }
.pf-sk-12, .pf-sk-13 { top: 96px; right: 3.500%; width: 72px; }
.pf-sk-12 { color: #ffcf4a; animation: pf-spin 50s linear infinite; }
.pf-sk-13 { color: #ffe9a6; display: none; filter: drop-shadow(0 0 18px rgba(255, 233, 166, .5)); animation: pf-bob 7s ease-in-out infinite; }
html.pf-night .pf-sk-1, html.pf-night .pf-sk-2, html.pf-night .pf-sk-3 { color: #b9a4f2; opacity: .12; filter: none; }
html.pf-night .pf-sk-4, html.pf-night .pf-sk-6 { color: #fff; }
html.pf-night .pf-sk-9, html.pf-night .pf-sk-10, html.pf-night .pf-sk-11 { opacity: .22; }
html.pf-night .pf-sk-12 { display: none; }
html.pf-night .pf-sk-13 { display: block; }
@keyframes pf-drift { from { transform: translateX(0); } to { transform: translateX(132vw); } }
@keyframes pf-floatup { from { transform: translateY(0) rotate(-12deg); } to { transform: translateY(-115vh) rotate(18deg); } }
@keyframes pf-spin { to { transform: rotate(360deg); } }
@keyframes pf-bob { 50% { transform: translateY(-12px); } }
@keyframes pf-wiggle { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(10deg); } }
@keyframes pf-popin { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes pf-heartbeat { 0%, 100% { transform: scale(1); } 14% { transform: scale(1.12); } 28% { transform: scale(1); } 42% { transform: scale(1.08); } }

/* ============ มาสคอตน้องเปลว ============ */
.pf-mascot { display: block; height: auto; overflow: visible; }
.pf-mascot .pf-m-body { animation: pf-boing 2.600s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.pf-mascot .pf-m-shadow { animation: pf-mshadow 2.600s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.pf-mascot .pf-m-eyes { animation: pf-blink 4.400s infinite; transform-box: fill-box; transform-origin: center; }
.pf-mascot .pf-m-arm { animation: pf-wave 1.200s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 0% 100%; }
.pf-mascot .pf-m-arm-l { animation-name: pf-wave-l; transform-origin: 100% 100%; }
.pf-mascot .pf-m-zzz { animation: pf-bob 3s ease-in-out infinite; }
.pf-mascot-sm { width: 86px; }
.pf-mascot-xs { width: 58px; flex: none; }
@keyframes pf-boing { 0%, 100% { transform: translateY(0) scale(1, 1); } 35% { transform: translateY(-6%) scale(.97, 1.04); } 60% { transform: translateY(0) scale(1.045, .95); } 78% { transform: scale(.99, 1.015); } }
@keyframes pf-mshadow { 0%, 100% { transform: scale(1); opacity: .16; } 35% { transform: scale(.76); opacity: .08; } 60% { transform: scale(1.06); } }
@keyframes pf-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes pf-wave { from { transform: rotate(-10deg); } to { transform: rotate(24deg); } }
@keyframes pf-wave-l { from { transform: rotate(10deg); } to { transform: rotate(-24deg); } }
@keyframes pf-jump { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.12, .84); } 55% { transform: translateY(-34%) scale(.92, 1.1); } 80% { transform: translateY(0) scale(1.08, .9); } 100% { transform: none; } }
.pf-bubble { position: relative; display: inline-block; max-width: 240px; padding: 9px 16px; border-radius: 20px; background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: 0 5px 0 var(--pf-edge-soft); font-family: var(--pf-hand); font-weight: 600; font-size: .95rem; line-height: 1.4; color: var(--pf-ink); }
.pf-bubble::after { content: ""; position: absolute; left: 30px; bottom: -10px; width: 15px; height: 15px; background: var(--pf-panel); border-right: 2px solid var(--pf-line); border-bottom: 2px solid var(--pf-line); border-radius: 0 0 5px 0; transform: rotate(45deg); }
.pf-bubble span { display: inline-block; }
.pf-bubble.is-pop span { animation: pf-popin .45s var(--pf-spring); }
.pf-emptybox { text-align: center; padding: 14px 10px 6px; }
.pf-emptybox .pf-mascot { margin: 0 auto 6px; }
.pf-body .pf-emptybox p { font-family: var(--pf-hand); font-weight: 600; color: var(--pf-muted); margin: 0 0 12px; }

/* ============ ปุ่มแบบลูกกวาด ============ */
.pf-btn { position: relative; border-radius: 999px; border: 2px solid var(--pf-line); background: var(--pf-panel); color: var(--pf-ink) !important; font-family: var(--pf-head-font); font-weight: 500; padding: 11px 24px; box-shadow: 0 5px 0 var(--pf-edge-soft); transition: transform .28s var(--pf-spring), box-shadow .2s ease; }
.pf-btn:hover { transform: translateY(-3px) scale(1.03); filter: none; box-shadow: 0 8px 0 var(--pf-edge-soft); text-decoration: none; }
.pf-btn:active { transform: translateY(3px) scale(.97); box-shadow: 0 1px 0 var(--pf-edge-soft); transition-duration: .08s; }
.pf-btn:disabled { opacity: .6; transform: none; box-shadow: 0 3px 0 var(--pf-edge-soft); }
.pf-btn-primary { border-color: transparent; background: var(--pf-grad); background-size: 100% 100%; color: #fff !important; box-shadow: 0 5px 0 var(--pf-edge), 0 14px 24px var(--pf-glow); text-shadow: 0 1px 0 rgba(60, 10, 90, .18); }
.pf-btn-primary::before { content: ""; position: absolute; left: 12px; right: 12px; top: 3px; height: 42%; border-radius: 999px; background: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, 0)); pointer-events: none; }
.pf-btn-primary:hover { box-shadow: 0 8px 0 var(--pf-edge), 0 18px 30px var(--pf-glow); background-position: 0 0; }
.pf-btn-primary:active { box-shadow: 0 1px 0 var(--pf-edge), 0 6px 12px var(--pf-glow); }
.pf-btn-ghost { background: var(--pf-panel); border-color: var(--pf-line); }
.pf-btn-light { background: #fff; color: #6a2fb8 !important; border-color: transparent; box-shadow: 0 5px 0 rgba(60, 10, 90, .22); }
.pf-btn-light:hover { box-shadow: 0 8px 0 rgba(60, 10, 90, .22); }
.pf-btn-sm { padding: 7px 16px; font-size: .9rem; box-shadow: 0 4px 0 var(--pf-edge-soft); }
.pf-btn-primary.pf-btn-sm { box-shadow: 0 4px 0 var(--pf-edge), 0 8px 14px var(--pf-glow); }
.pf-btn-xl { padding: 14px 30px; font-size: 1.08rem; }
.pf-btn .pf-ico { width: 18px; height: 18px; }

/* ============ ช่องกรอก / แผง / แจ้งเตือน ============ */
.pf-input { border: 2px solid var(--pf-line); border-radius: 16px; background: var(--pf-bg2); color: var(--pf-text); padding: 12px 16px; transition: border-color .2s, box-shadow .2s; }
.pf-input:focus { outline: none; border-color: var(--pf-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-accent) 22%, transparent); }
.pf-input::placeholder { color: color-mix(in srgb, var(--pf-muted) 70%, transparent); }
.pf-form label, .pf-game-form label { color: var(--pf-ink); font-weight: 500; }
.pf-form small, .pf-game-form small { font-weight: 400; }
.pf-panel { background: var(--pf-panel); border: 2px solid var(--pf-line); border-radius: var(--pf-radius); box-shadow: var(--pf-shadow-sm); }
.pf-alert { border-width: 2px; border-radius: 18px; font-weight: 500; }
.pf-alert-ok { background: color-mix(in srgb, var(--pf-ok) 12%, var(--pf-panel)); border-color: color-mix(in srgb, var(--pf-ok) 45%, transparent); color: color-mix(in srgb, var(--pf-ok) 55%, var(--pf-ink)); }
.pf-alert-err { background: color-mix(in srgb, var(--pf-err) 11%, var(--pf-panel)); border-color: color-mix(in srgb, var(--pf-err) 45%, transparent); color: color-mix(in srgb, var(--pf-err) 60%, var(--pf-ink)); }
.pf-status { padding: 3px 12px; background: var(--pf-soft); color: var(--pf-ink); }
.pf-status-pending { background: var(--pf-butter); color: var(--pf-butter-ink); }
.pf-status-processing { background: var(--pf-sky); color: var(--pf-sky-ink); }
.pf-status-success, .pf-status-approved { background: var(--pf-mint); color: var(--pf-mint-ink); }
.pf-status-refunded, .pf-status-rejected { background: var(--pf-rose); color: var(--pf-rose-ink); }
.pf-step-no { box-shadow: 0 3px 0 var(--pf-edge); font-family: var(--pf-head-font); }
.pf-body details { border-color: var(--pf-line); }

/* ============ หัวเว็บ ============ */
.pf-announce { display: flex; justify-content: center; align-items: center; gap: 8px; font-family: var(--pf-head-font); }
.pf-announce .pf-ico { width: 18px; height: 18px; animation: pf-wiggle 1.600s ease-in-out infinite; }
.pf-header { background: var(--pf-glass); backdrop-filter: blur(16px) saturate(150%); border-bottom: 2px solid var(--pf-line); }
.pf-header-in { display: flex; align-items: center; gap: 16px; min-height: var(--pf-head); padding: 0 20px; }
.pf-logo { gap: 8px; font-family: var(--pf-head-font); font-size: 1.25rem; font-weight: 600; }
.pf-logo span { background: var(--pf-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .1em 0; }
.pf-logo img { height: 40px; }
.pf-logo-mascot { width: 42px; flex: none; }
.pf-logo:hover .pf-logo-mascot { animation: pf-jump .7s var(--pf-spring); }
.pf-head-search { position: relative; flex: 1; max-width: 400px; margin-left: 12px; }
.pf-head-search .pf-ico, .pf-x-search .pf-ico { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--pf-muted); pointer-events: none; }
.pf-head-search input { width: 100%; padding: 10px 14px 10px 42px; border-radius: 999px; border: 2px solid var(--pf-line); background: var(--pf-bg2); color: var(--pf-text); font: inherit; font-size: .93rem; }
.pf-head-search input:focus, .pf-x-search input:focus { outline: none; border-color: var(--pf-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--pf-accent) 20%, transparent); }
.pf-head-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pf-head-right .pf-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 14px; border-radius: 999px; background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: 0 4px 0 var(--pf-edge-soft); color: var(--pf-ink) !important; font-family: var(--pf-head-font); font-weight: 600; text-decoration: none !important; transition: transform .28s var(--pf-spring); }
.pf-head-right .pf-chip:hover { transform: translateY(-2px) scale(1.04); }
.pf-head-right .pf-chip b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--pf-grad); color: #fff; font-size: 1rem; line-height: 1; }
.pf-head-user, .pf-mode { display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: 0 4px 0 var(--pf-edge-soft); color: var(--pf-primary) !important; cursor: pointer; transition: transform .35s var(--pf-spring); }
.pf-head-user:hover { transform: translateY(-2px) scale(1.08); }
.pf-mode:hover { transform: rotate(22deg) scale(1.1); }
.pf-mode .pf-dd { grid-area: 1 / 1; width: 22px; height: 22px; transition: transform .5s var(--pf-spring), opacity .3s; }
.pf-mode .pf-dd-sun { color: #ffb020; }
.pf-mode .pf-dd-moon { color: #ffe08a; transform: scale(0) rotate(-90deg); opacity: 0; }
html.pf-night .pf-mode .pf-dd-sun { transform: scale(0) rotate(90deg); opacity: 0; }
html.pf-night .pf-mode .pf-dd-moon { transform: none; opacity: 1; }
.pf-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; width: 42px; height: 42px; margin: 0; padding: 0; border-radius: 14px; border: 2px solid var(--pf-line); background: var(--pf-panel); box-shadow: 0 4px 0 var(--pf-edge-soft); cursor: pointer; }
.pf-burger span { display: block; width: 18px; height: 3px; border-radius: 3px; background: var(--pf-primary); }

/* ============ เมนูซ้ายมือ ============ */
.pf-shell { display: grid; grid-template-columns: var(--pf-rail) minmax(0, 1fr); align-items: start; }
.pf-rail { position: sticky; top: calc(var(--pf-head) + 14px); height: calc(100vh - var(--pf-head) - 28px); margin: 14px 0 14px 14px; padding: 12px 12px 20px; overflow-y: auto; border-radius: 28px; background: var(--pf-glass); backdrop-filter: blur(14px); border: 2px solid var(--pf-line); box-shadow: var(--pf-shadow-sm); scrollbar-width: thin; }
.pf-rail-group { display: flex; align-items: center; gap: 6px; margin: 14px 10px 6px; font-family: var(--pf-hand); font-weight: 700; font-size: .82rem; color: var(--pf-muted); }
.pf-rail-group::before { content: "✦"; color: var(--pf-accent); font-size: .8rem; }
.pf-rail-group:first-child { margin-top: 4px; }
.pf-rail a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; margin-bottom: 4px; border-radius: 18px; color: var(--pf-text) !important; font-size: .95rem; text-decoration: none !important; transition: background .2s, transform .3s var(--pf-spring); }
.pf-rail a i { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; background: var(--pf-lilac); color: var(--pf-lilac-ink); font-style: normal; transition: transform .35s var(--pf-spring); }
.pf-rail a:nth-of-type(6n+1) i { background: var(--pf-rose); color: var(--pf-rose-ink); }
.pf-rail a:nth-of-type(6n+2) i { background: var(--pf-sky); color: var(--pf-sky-ink); }
.pf-rail a:nth-of-type(6n+3) i { background: var(--pf-mint); color: var(--pf-mint-ink); }
.pf-rail a:nth-of-type(6n+4) i { background: var(--pf-butter); color: var(--pf-butter-ink); }
.pf-rail a:nth-of-type(6n+5) i { background: var(--pf-peach); color: var(--pf-peach-ink); }
.pf-rail a:hover { background: var(--pf-hover); transform: translateX(4px); }
.pf-rail a:hover i { transform: rotate(-12deg) scale(1.14); }
.pf-rail a.is-on { background: var(--pf-grad); color: #fff !important; font-weight: 500; box-shadow: 0 5px 0 var(--pf-edge), 0 10px 18px var(--pf-glow); }
.pf-rail a.is-on i { background: rgba(255, 255, 255, .3); color: #fff; }
.pf-rail .pf-rail-out { margin-top: 12px; padding: 10px 14px; color: var(--pf-muted) !important; font-size: .9rem; border-top: 2px dashed var(--pf-line); border-radius: 0; }
.pf-rail-install { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 10px 12px; border-radius: 18px; border: 2px dashed var(--pf-accent); background: var(--pf-tint); color: var(--pf-ink); font: inherit; font-family: var(--pf-head-font); font-size: .92rem; cursor: pointer; transition: transform .3s var(--pf-spring); }
.pf-rail-install:hover { transform: scale(1.03); border-style: solid; }
.pf-rail-mode { display: none; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 7px 10px; border: 0; border-radius: 18px; background: none; color: var(--pf-text); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
.pf-rail-mode i { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 13px; background: var(--pf-butter); font-style: normal; }
.pf-rail-mode .pf-dd { grid-area: 1 / 1; width: 20px; height: 20px; transition: transform .5s var(--pf-spring), opacity .3s; }
.pf-rail-mode .pf-dd-sun { color: #f59f00; }
.pf-rail-mode .pf-dd-moon { color: #ffe08a; transform: scale(0) rotate(-90deg); opacity: 0; }
html.pf-night .pf-rail-mode .pf-dd-sun { transform: scale(0) rotate(90deg); opacity: 0; }
html.pf-night .pf-rail-mode .pf-dd-moon { transform: none; opacity: 1; }
.pf-logo span { white-space: nowrap; }
.pf-stage { min-width: 0; }
.pf-rail-shade { position: fixed; inset: 0; z-index: 64; background: rgba(60, 30, 100, .4); backdrop-filter: blur(3px); }

/* ============ หัวข้อของแต่ละช่วง ============ */
.pf-section { margin-bottom: 62px; }
.pf-x-head { text-align: center; margin-bottom: 30px; }
.pf-body .pf-x-head p { display: inline-block; margin: 0 0 10px; padding: 4px 16px; border-radius: 999px; font-family: var(--pf-hand); font-weight: 700; font-size: .88rem; background: var(--tone, var(--pf-rose)); color: var(--tone-ink, var(--pf-rose-ink)); transform: rotate(-2deg); }
.pf-x-head h2 { display: flex; justify-content: center; align-items: center; gap: 12px; margin: 0; font-size: clamp(1.45rem, 3.200vw, 2.150rem); line-height: 1.35; text-wrap: balance; }
.pf-h-star { flex: none; width: 22px; height: 22px; color: #ffc93c; animation: pf-twinkle 2.800s ease-in-out infinite; }
.pf-h-star-2 { width: 16px; height: 16px; color: var(--pf-accent); animation-delay: -1.400s; }
.pf-h-squig { display: block; width: 130px; height: 12px; margin: 8px auto 0; color: var(--tone-ink, var(--pf-accent)); opacity: .55; }
.pf-section-head h1, .pf-section-head h2 { font-size: clamp(1.4rem, 3vw, 1.900rem); }

/* ============ ฮีโร่ + ฉากน้องเปลว ============ */
.pf-x-hero { display: grid; grid-template-columns: 1.080fr .920fr; gap: 28px; align-items: center; padding: 26px 0 26px; }
.pf-body .pf-x-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 6px 16px; border-radius: 999px; font-family: var(--pf-head-font); font-size: .9rem; color: var(--pf-ink); background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: 0 4px 0 var(--pf-edge-soft); }
.pf-pulse { width: 10px; height: 10px; border-radius: 50%; background: var(--pf-ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--pf-ok) 70%, transparent); animation: pf-pulse 1.800s infinite; }
@keyframes pf-pulse { 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.pf-x-hero h1 { margin: 0 0 14px; font-size: clamp(2.200rem, 5.200vw, 3.900rem); font-weight: 700; line-height: 1.3; text-wrap: balance; background: linear-gradient(100deg, var(--pf-primary) 5%, var(--pf-accent) 60%, #ff9d6c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pf-x-hero h1 span { display: block; width: fit-content; margin-bottom: 10px; padding: 3px 16px; border-radius: 999px; font-family: var(--pf-hand); font-size: .34em; font-weight: 700; line-height: 1.6; background: var(--pf-butter); -webkit-text-fill-color: var(--pf-butter-ink); color: var(--pf-butter-ink); transform: rotate(-2deg); }
.pf-body .pf-x-sub { color: var(--pf-muted); font-size: 1.080rem; max-width: 560px; margin-bottom: 20px; }
.pf-x-search { position: relative; max-width: 520px; margin-bottom: 22px; }
.pf-x-search input { width: 100%; padding: 15px 18px 15px 46px; border-radius: 999px; border: 2px solid var(--pf-line); background: var(--pf-panel); color: var(--pf-text); font: inherit; font-size: 1.020rem; box-shadow: 0 6px 0 var(--pf-edge-soft); }
.pf-x-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 12px); padding: 8px; border-radius: 22px; background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: var(--pf-shadow); max-height: 320px; overflow-y: auto; }
.pf-x-suggest a { display: block; padding: 9px 14px; border-radius: 14px; color: var(--pf-text) !important; text-decoration: none !important; }
.pf-x-suggest a:hover, .pf-x-suggest a.is-on { background: var(--pf-tint); }
.pf-body .pf-x-suggest p { margin: 0; padding: 10px 14px; color: var(--pf-muted); font-size: .9rem; }
.pf-x-hero .pf-hero-cta { justify-content: flex-start; margin-bottom: 16px; gap: 14px; }
.pf-x-hero .pf-paychips { justify-content: flex-start; margin-top: 14px !important; }
.pf-paychips i { border-width: 2px; background: var(--pf-panel); font-family: var(--pf-head-font); }
.pf-x-install { margin: 0 0 4px; }
.pf-scene { position: relative; width: min(100%, 470px); aspect-ratio: 1 / 1; margin-inline: auto; }
.pf-scene-blob { position: absolute; inset: 9% 5% 5% 5%; border-radius: 46% 54% 52% 48% / 52% 46% 54% 48%; background: linear-gradient(145deg, var(--pf-lilac), var(--pf-rose) 55%, var(--pf-butter)); box-shadow: inset 0 -18px 40px rgba(255, 255, 255, .5), var(--pf-shadow); animation: pf-morph 12s ease-in-out infinite alternate; }
html.pf-night .pf-scene-blob { box-shadow: inset 0 -18px 40px rgba(255, 255, 255, .06), var(--pf-shadow); }
@keyframes pf-morph { to { border-radius: 54% 46% 45% 55% / 46% 55% 45% 54%; transform: rotate(4deg); } }
.pf-scene-mascot { position: absolute; z-index: 2; left: 50%; bottom: 17%; width: 52%; margin-left: -26%; padding: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.pf-scene-mascot .pf-mascot { width: 100%; }
.pf-scene-mascot.is-jump .pf-mascot { animation: pf-jump .75s var(--pf-spring); transform-origin: 50% 100%; }
.pf-sc { position: absolute; }
.pf-sc-cloud { z-index: 1; left: 17%; bottom: 8%; width: 66%; color: #fff; filter: drop-shadow(0 8px 0 rgba(168, 85, 247, .16)); }
html.pf-night .pf-sc-cloud { color: #cbb8ff; }
.pf-sc-pad { left: 0; top: 30%; width: 23%; color: var(--pf-primary); transform: rotate(-16deg); animation: pf-bob2 5s ease-in-out infinite; }
.pf-sc-gem { right: 5%; top: 15%; width: 13%; color: #6fc8ff; animation: pf-bob 4.200s ease-in-out -1s infinite; }
.pf-sc-coin { right: 1%; bottom: 31%; width: 15%; color: #ffc93c; animation: pf-bob 5.400s ease-in-out -2.200s infinite; }
.pf-sc-heart { left: 8%; bottom: 25%; width: 10%; color: var(--pf-accent); animation: pf-heartbeat 1.800s ease-in-out infinite; }
.pf-sc-star { left: 31%; top: 5%; width: 9%; color: #ffd24d; animation: pf-twinkle 2.400s ease-in-out infinite; }
.pf-sc-star2 { right: 27%; top: 2%; width: 6%; color: var(--pf-accent); animation: pf-twinkle 2.400s ease-in-out -1.200s infinite; }
@keyframes pf-bob2 { 0%, 100% { transform: rotate(-16deg) translateY(0); } 50% { transform: rotate(-9deg) translateY(-12px); } }
.pf-scene-bubble { position: absolute; z-index: 3; left: 2%; top: 9%; transform: rotate(-4deg); }
.pf-x-float { position: absolute; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: 0 5px 0 var(--pf-edge-soft); color: var(--pf-ink) !important; text-decoration: none !important; font-family: var(--pf-head-font); font-size: .84rem; font-weight: 500; animation: pf-bob 6s ease-in-out infinite; }
.pf-x-float .pf-card-img { width: 34px; height: 34px; border-radius: 50%; }
.pf-x-float span { max-width: 110px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-x-float-0 { right: -2%; top: 44%; animation-delay: -2s; }
.pf-x-float-1 { left: 4%; bottom: 3%; animation-delay: -4s; }

/* ============ ตัวเลขร้าน ============ */
.pf-x-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 4px 0 30px; }
.pf-x-stats > div { padding: 18px 12px 16px; border-radius: 26px; text-align: center; background: var(--tone); border: 2px solid color-mix(in srgb, var(--tone-ink) 20%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--tone-ink) 22%, transparent); transition: transform .35s var(--pf-spring); }
.pf-x-stats > div:hover { transform: translateY(-6px) rotate(-2deg); }
.pf-x-stats > div:nth-child(even):hover { transform: translateY(-6px) rotate(2deg); }
.pf-x-stats .pf-dd { display: block; height: 30px; width: auto; margin: 0 auto 4px; color: var(--tone-ink); }
.pf-x-stats b { display: block; font-family: var(--pf-head-font); font-size: clamp(1.450rem, 3vw, 2.150rem); font-weight: 600; line-height: 1.2; color: var(--tone-ink); }
.pf-x-stats span { color: var(--tone-ink); font-size: .88rem; opacity: .85; }
.pf-ticker { border: 2px solid var(--pf-line); border-radius: 999px; background: var(--pf-glass); }
.pf-ticker b { color: var(--pf-link); }

/* ============ สไลด์แบนเนอร์ ============ */
.pf-slides { border-radius: 30px; }
.pf-slide { border-radius: 30px; border: 4px solid var(--pf-frame); box-shadow: var(--pf-shadow-sm); font-family: var(--pf-head-font); }
.pf-slide-text strong { font-weight: 600; }
.pf-slide-text span { font-family: var(--pf-font), sans-serif; }
.pf-slide-img { position: relative; display: block; min-height: 0; padding: 0; aspect-ratio: 8 / 3; background: var(--pf-lilac); }
.pf-slide-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-slide-img .pf-slide-text { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; padding: 40px 30px 22px; background: linear-gradient(transparent, rgba(46, 12, 80, .78)); }
.pf-dots button { width: 11px; height: 11px; }
.pf-dots button.is-on { width: 30px; }

/* ============ วิดีโอ ============ */
.pf-vid { position: relative; aspect-ratio: 16 / 9; border-radius: 26px; overflow: hidden; background: linear-gradient(140deg, var(--pf-lilac), var(--pf-rose)); border: 4px solid var(--pf-frame); box-shadow: var(--pf-shadow-sm); cursor: pointer; }
.pf-vid-v { aspect-ratio: 9 / 16; max-width: 330px; margin-inline: auto; }
.pf-vid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pf-vid:hover img { transform: scale(1.05); }
.pf-vid-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 74px; height: 74px; margin: -37px 0 0 -37px; padding: 0; border-radius: 50%; border: 4px solid #fff; background: var(--pf-grad); box-shadow: 0 6px 0 var(--pf-edge), 0 14px 26px var(--pf-glow); cursor: pointer; animation: pf-heartbeat 1.800s ease-in-out infinite; }
.pf-vid-play svg { width: 34px; height: 34px; fill: #fff; }
.pf-vid.is-playing img, .pf-vid.is-playing .pf-vid-play { display: none; }
.pf-vid iframe, .pf-vid video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.pf-vids { display: grid; gap: 22px; }
.pf-vids-1 { max-width: 860px; margin-inline: auto; }
.pf-vids-2 { grid-template-columns: 1fr 1fr; }
.pf-vids-3 { grid-template-columns: repeat(3, 1fr); }
.pf-vidcard { margin: 0; }
.pf-vidcard figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 6px 0; }
.pf-vidcard figcaption b { font-family: var(--pf-head-font); font-weight: 600; font-size: 1.050rem; color: var(--pf-ink); }
.pf-vidcard figcaption span { color: var(--pf-muted); font-size: .92rem; }
.pf-vidcard figcaption .pf-btn { margin-top: 6px; }

/* ============ เกมยอดนิยม ============ */
.pf-hots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 16px; padding-top: 6px; }
.pf-hot { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 24px; background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: 0 6px 0 var(--pf-edge-soft); color: var(--pf-ink) !important; text-decoration: none !important; transition: transform .35s var(--pf-spring), border-color .2s, box-shadow .2s; }
.pf-hot:hover { transform: translateY(-6px) rotate(-1.200deg); border-color: var(--pf-accent); box-shadow: 0 12px 0 var(--pf-edge-soft); }
.pf-hot:nth-child(even):hover { transform: translateY(-6px) rotate(1.200deg); }
.pf-hot-rank { position: absolute; left: -9px; top: -11px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--pf-panel); background: var(--pf-grad); color: #fff; font-family: var(--pf-head-font); font-weight: 600; font-size: .95rem; box-shadow: var(--pf-shadow-sm); transform: rotate(-10deg); }
.pf-hot:nth-child(1) .pf-hot-rank { background: linear-gradient(140deg, #ffd451, #ff9f1a); }
.pf-hot:nth-child(2) .pf-hot-rank { background: linear-gradient(140deg, #d5deec, #8f9fb8); }
.pf-hot:nth-child(3) .pf-hot-rank { background: linear-gradient(140deg, #f3ba92, #c9743d); }
.pf-hot-media { flex: none; width: 72px; height: 72px; border-radius: 18px; overflow: hidden; }
.pf-hot-body { display: flex; flex-direction: column; min-width: 0; }
.pf-hot-body b { font-family: var(--pf-head-font); font-weight: 500; font-size: 1rem; line-height: 1.3; }
.pf-hot-body small { color: var(--pf-muted); font-size: .82rem; }
.pf-hot-body em { font-style: normal; font-size: .82rem; font-weight: 600; color: var(--pf-link); margin-top: 2px; }

/* ============ ตารางเกม (การ์ดมีหูโผล่ตอนชี้) ============ */
.pf-x-tools { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; }
.pf-x-tools .pf-search { margin: 0; border-radius: 999px; }
.pf-chips button { background: var(--pf-panel); border: 2px solid var(--pf-line); color: var(--pf-ink); font-family: var(--pf-head-font); padding: 6px 16px; box-shadow: 0 3px 0 var(--pf-edge-soft); transition: transform .28s var(--pf-spring); }
.pf-chips button:hover { transform: translateY(-2px); border-color: var(--pf-accent); }
.pf-chips button.is-on { background: var(--pf-grad); color: #fff; border-color: transparent; box-shadow: 0 3px 0 var(--pf-edge); }
.pf-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 26px 18px; padding-top: 8px; }
.pf-card { position: relative; isolation: isolate; padding: 8px 8px 14px; overflow: visible; background: var(--pf-panel); border: 2px solid var(--pf-line); border-radius: 26px; box-shadow: 0 6px 0 var(--pf-edge-soft); color: var(--pf-ink) !important; transition: transform .38s var(--pf-spring), border-color .2s, box-shadow .2s; }
.pf-card::before, .pf-card::after { content: ""; position: absolute; z-index: 0; top: -13px; width: 30px; height: 26px; border-radius: 16px 16px 6px 6px; background: var(--pf-grad); transform: translateY(20px) scale(.5); opacity: 0; transition: transform .4s var(--pf-spring), opacity .15s; }
.pf-card::before { left: 20px; }
.pf-card::after { right: 20px; }
.pf-card:hover, .pf-card:focus-visible { transform: translateY(-9px) rotate(-1.500deg); border-color: var(--pf-accent); box-shadow: 0 13px 0 var(--pf-edge-soft), 0 22px 30px var(--pf-glow); text-decoration: none; }
.pf-card:nth-child(even):hover, .pf-card:nth-child(even):focus-visible { transform: translateY(-9px) rotate(1.500deg); }
.pf-card:hover::before, .pf-card:hover::after, .pf-card:focus-visible::before, .pf-card:focus-visible::after { transform: none; opacity: 1; }
.pf-card-media { position: relative; z-index: 1; border-radius: 19px; margin-bottom: 10px; background: var(--pf-soft); }
.pf-card .pf-card-img { transition: transform .5s ease; }
.pf-card:hover .pf-card-img { transform: scale(1.070); }
.pf-card-title, .pf-card-sub { position: relative; z-index: 1; padding: 0 8px; }
.pf-card-title { font-family: var(--pf-head-font); font-weight: 500; }
.pf-card-sub { color: var(--pf-link); font-weight: 500; }
.pf-card-badge { z-index: 2; top: 8px; left: 8px; background: var(--pf-grad); padding: 3px 12px; font-family: var(--pf-head-font); font-weight: 500; box-shadow: 0 3px 0 var(--pf-edge); transform: rotate(-6deg); }

/* ============ จุดเด่น ============ */
.pf-bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pf-bento-card { --tone: var(--pf-rose); --tone-ink: var(--pf-rose-ink); padding: 24px; border-radius: 28px; background: var(--tone); border: 2px solid color-mix(in srgb, var(--tone-ink) 18%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--tone-ink) 20%, transparent); transition: transform .38s var(--pf-spring); }
.pf-bento-card:nth-child(6n+2) { --tone: var(--pf-sky); --tone-ink: var(--pf-sky-ink); }
.pf-bento-card:nth-child(6n+3) { --tone: var(--pf-mint); --tone-ink: var(--pf-mint-ink); }
.pf-bento-card:nth-child(6n+4) { --tone: var(--pf-butter); --tone-ink: var(--pf-butter-ink); }
.pf-bento-card:nth-child(6n+5) { --tone: var(--pf-lilac); --tone-ink: var(--pf-lilac-ink); }
.pf-bento-card:nth-child(6n+6) { --tone: var(--pf-peach); --tone-ink: var(--pf-peach-ink); }
.pf-bento-card:hover { transform: translateY(-6px) rotate(-1deg); }
.pf-bento-card:nth-child(even):hover { transform: translateY(-6px) rotate(1deg); }
.pf-bento-ico { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 14px; border-radius: 20px; background: var(--pf-panel); color: var(--tone-ink); box-shadow: 0 4px 0 color-mix(in srgb, var(--tone-ink) 25%, transparent); transition: transform .4s var(--pf-spring); }
.pf-bento-card:hover .pf-bento-ico { transform: rotate(-12deg) scale(1.150); }
.pf-bento-ico .pf-ico { width: 28px; height: 28px; }
.pf-body .pf-bento-card h3 { font-size: 1.120rem; margin-bottom: 6px; color: var(--tone-ink); }
.pf-body .pf-bento-card p { margin: 0; font-size: .94rem; color: color-mix(in srgb, var(--tone-ink) 78%, var(--pf-text)); }

/* ============ ขั้นตอน ============ */
.pf-timeline { position: relative; list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pf-timeline::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; border-top: 4px dotted var(--pf-accent); opacity: .45; }
.pf-timeline li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0 10px; text-align: center; }
.pf-timeline .pf-step-no { width: 70px; height: 70px; margin: 0 0 8px; border: 4px solid var(--pf-frame); font-size: 1.600rem; box-shadow: 0 6px 0 var(--pf-edge), 0 14px 22px var(--pf-glow); transition: transform .4s var(--pf-spring); }
.pf-timeline li:hover .pf-step-no { transform: translateY(-8px) rotate(-10deg) scale(1.080); }
.pf-timeline strong { font-family: var(--pf-head-font); font-weight: 600; font-size: 1.080rem; color: var(--pf-ink); }
.pf-timeline li > span:last-child { color: var(--pf-muted); font-size: .9rem; }

/* ============ ระดับสมาชิก ============ */
.pf-vip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 999px; font-family: var(--pf-head-font); font-size: .76rem; font-weight: 600; letter-spacing: .03em; white-space: nowrap; vertical-align: middle; color: color-mix(in srgb, var(--vip) 50%, var(--pf-ink)); background: color-mix(in srgb, var(--vip) 26%, var(--pf-panel)); border: 2px solid color-mix(in srgb, var(--vip) 60%, transparent); }
.pf-viprow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.pf-viptile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 20px 10px 18px; border-radius: 26px; text-align: center; background: linear-gradient(180deg, color-mix(in srgb, var(--vip) 30%, var(--pf-panel)), var(--pf-panel) 75%); border: 2px solid color-mix(in srgb, var(--vip) 60%, transparent); box-shadow: 0 6px 0 color-mix(in srgb, var(--vip) 45%, transparent); transition: transform .38s var(--pf-spring); }
.pf-viptile:hover { transform: translateY(-8px) scale(1.040); }
.pf-viptile .pf-ico { width: 36px; height: 36px; color: color-mix(in srgb, var(--vip) 70%, var(--pf-ink)); transition: transform .4s var(--pf-spring); }
.pf-viptile:hover .pf-ico { transform: rotate(-14deg) scale(1.200); }
.pf-viptile b { font-family: var(--pf-head-font); font-weight: 600; font-size: 1.100rem; color: color-mix(in srgb, var(--vip) 50%, var(--pf-ink)); }
.pf-viptile span { color: var(--pf-muted); font-size: .84rem; }
.pf-viptile em { font-style: normal; font-size: .8rem; font-weight: 600; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--vip) 40%, var(--pf-panel)); color: var(--pf-ink); }
.pf-vipcard { border-color: color-mix(in srgb, var(--vip) 60%, transparent); background: linear-gradient(120deg, color-mix(in srgb, var(--vip) 24%, var(--pf-panel)), var(--pf-panel) 62%); }
.pf-vipcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; color: var(--pf-muted); }
.pf-vipcard-top .pf-vip { font-size: .9rem; padding: 4px 14px; }
.pf-vipbar { height: 14px; margin-bottom: 10px; border-radius: 999px; background: var(--pf-soft); border: 2px solid var(--pf-line); overflow: hidden; }
.pf-vipbar i { display: block; height: 100%; border-radius: 999px; background: repeating-linear-gradient(-45deg, var(--pf-accent) 0 10px, color-mix(in srgb, var(--pf-accent) 70%, #fff) 10px 20px); background-size: 28px 100%; animation: pf-candy 1.200s linear infinite; }
@keyframes pf-candy { to { background-position: 28px 0; } }
.pf-vipcard p { margin: 0; }

/* ============ การ์ดคู่ / คำถาม / ชวนสมัคร / เกี่ยวกับ ============ */
.pf-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.pf-duo-card { position: relative; display: block; padding: 28px; border-radius: 30px; border: 4px solid var(--pf-frame); color: #fff !important; text-decoration: none !important; overflow: hidden; box-shadow: var(--pf-shadow-sm); transition: transform .38s var(--pf-spring); }
.pf-duo-card:hover { transform: translateY(-6px) rotate(-.800deg); }
.pf-duo-a { background: linear-gradient(130deg, #8b5cf6, #c860f0 60%, #f472b6); }
.pf-duo-b { background: linear-gradient(130deg, #f472b6, #ff8d6b 60%, #ffc35a); }
.pf-duo-card .pf-ico { position: absolute; right: -12px; bottom: -16px; width: 150px; height: 150px; opacity: .22; stroke-width: 1.200; transition: transform .5s var(--pf-spring); }
.pf-duo-card:hover .pf-ico { transform: rotate(-10deg) scale(1.100); }
.pf-body .pf-duo-card h3 { font-size: 1.350rem; margin-bottom: 8px; color: #fff; }
.pf-duo-card p { max-width: 420px; opacity: .96; }
.pf-duo-card em { display: inline-block; padding: 6px 18px; border-radius: 999px; background: rgba(255, 255, 255, .26); font-style: normal; font-family: var(--pf-head-font); font-weight: 500; }
.pf-faq details { margin-bottom: 12px; padding: 0; border: 2px solid var(--pf-line); border-radius: 22px; background: var(--pf-panel); box-shadow: 0 4px 0 var(--pf-edge-soft); overflow: hidden; transition: transform .3s var(--pf-spring); }
.pf-faq details:hover { transform: translateX(4px); }
.pf-faq summary { position: relative; list-style: none; padding: 15px 54px 15px 20px; font-family: var(--pf-head-font); font-weight: 500; color: var(--pf-ink); }
.pf-faq summary::-webkit-details-marker { display: none; }
.pf-faq summary::after { content: "+"; position: absolute; right: 16px; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; background: var(--pf-rose); color: var(--pf-rose-ink); font-size: 1.200rem; font-weight: 600; transition: transform .4s var(--pf-spring); }
.pf-faq details[open] { border-color: var(--pf-accent); background: var(--pf-soft); }
.pf-faq details[open] summary::after { transform: rotate(135deg); }
.pf-body .pf-faq details p { margin: 0; padding: 0 20px 18px; color: var(--pf-text); }
.pf-bigcta { position: relative; display: flex; align-items: center; justify-content: center; gap: 26px; flex-wrap: wrap; margin-bottom: 62px; padding: 36px 28px; border-radius: 36px; border: 4px solid var(--pf-frame); text-align: left; background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, .34) 0 7px, transparent 8px), radial-gradient(circle at 84% 26%, rgba(255, 255, 255, .28) 0 5px, transparent 6px), radial-gradient(circle at 70% 82%, rgba(255, 255, 255, .3) 0 8px, transparent 9px), radial-gradient(circle at 30% 80%, rgba(255, 255, 255, .22) 0 4px, transparent 5px), linear-gradient(120deg, var(--pf-primary), var(--pf-accent) 70%, #ffa66b); box-shadow: 0 8px 0 var(--pf-edge), 0 26px 50px var(--pf-glow); }
.pf-bigcta-mascot { flex: none; width: 150px; filter: drop-shadow(0 8px 0 rgba(60, 10, 90, .18)); }
.pf-body .pf-bigcta h2 { margin: 0 0 4px; font-size: clamp(1.500rem, 3.400vw, 2.300rem); color: #fff; }
.pf-body .pf-bigcta p { margin: 0; color: rgba(255, 255, 255, .95); }
.pf-bigcta .pf-hero-cta { justify-content: flex-start; margin-top: 16px !important; }
.pf-about { padding: 24px 26px; border: 2px dashed var(--pf-line); border-radius: 26px; background: var(--pf-glass); }
.pf-about h2 { font-size: 1.150rem; }
.pf-body .pf-about p { color: var(--pf-muted); margin: 0; max-width: none; }

/* ============ บทความ ============ */
.pf-articles { gap: 18px; }
.pf-article-card { border: 2px solid var(--pf-line); border-radius: 26px; box-shadow: 0 6px 0 var(--pf-edge-soft); color: var(--pf-text) !important; transition: transform .38s var(--pf-spring), border-color .2s; }
.pf-article-card:hover { transform: translateY(-6px) rotate(-.800deg); border-color: var(--pf-accent); }
.pf-article-card strong { font-family: var(--pf-head-font); font-weight: 500; color: var(--pf-ink); }
.pf-article-card img { border-radius: 16px; }
.pf-article-card em { color: var(--pf-link); font-family: var(--pf-head-font); }
.pf-prose strong { color: var(--pf-ink); }
.pf-prose p, .pf-prose ul, .pf-prose ol { color: var(--pf-text); }

/* ============ ท้ายเว็บ ============ */
.pf-footer { position: relative; margin-top: 84px; padding-top: 6px; border-top: 0; background: var(--pf-foot); }
.pf-wave { position: absolute; left: 0; bottom: 100%; display: block; width: 100%; height: 44px; margin-bottom: -1px; fill: var(--pf-foot); }
.pf-footer-in { align-items: start; }
.pf-footer-brand { display: flex; align-items: flex-end; gap: 14px; }
.pf-footer-mascot { flex: none; width: 96px; margin-top: -62px; }
.pf-footer .pf-logo { font-size: 1.300rem; }
.pf-body .pf-footer-thanks { margin: 4px 0 0; font-family: var(--pf-hand); font-weight: 700; color: var(--pf-link); }
.pf-footer b { font-family: var(--pf-head-font); font-weight: 600; color: var(--pf-ink); }
.pf-footer a { color: var(--pf-text); }
.pf-copy-line { border-top: 2px dashed var(--pf-line); }

/* ============ หน้าเกม ============ */
.pf-crumb a { font-family: var(--pf-head-font); }
.pf-game-info { border-color: var(--pf-accent); }
.pf-game-info .pf-card-media { border-radius: 22px; border: 4px solid var(--pf-frame); box-shadow: var(--pf-shadow-sm); }
.pf-ticks li::before { content: "♥"; color: var(--pf-accent); }
.pf-tip { display: flex; align-items: flex-end; gap: 4px; margin-top: 14px; }
.pf-tip .pf-bubble { font-size: .84rem; margin-bottom: 18px; }
.pf-tip .pf-bubble::after { left: -8px; bottom: 12px; transform: rotate(135deg); }
.pf-packs { gap: 14px; }
.pf-pack { padding: 14px; border: 2px solid var(--pf-line); border-radius: 20px; background: var(--pf-bg2); box-shadow: 0 4px 0 var(--pf-edge-soft); transition: transform .3s var(--pf-spring), border-color .2s, box-shadow .2s; }
.pf-pack:hover { transform: translateY(-4px) rotate(-1deg); border-color: var(--pf-accent); }
.pf-pack.is-on, .pf-pack:has(input:checked) { border-color: var(--pf-accent); background: var(--pf-tint); box-shadow: 0 4px 0 var(--pf-accent), 0 12px 20px var(--pf-glow); transform: translateY(-3px); }
.pf-pack:has(input:checked)::after { content: "✓"; position: absolute; right: -8px; top: -10px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--pf-panel); background: var(--pf-grad); color: #fff; font-size: .85rem; font-weight: 700; animation: pf-popin .4s var(--pf-spring); }
.pf-pack-name { color: var(--pf-ink); font-family: var(--pf-head-font); font-weight: 500; }
.pf-pack-price { color: var(--pf-link); }
.pf-pack-price s { color: var(--pf-muted); font-size: .8em; font-weight: 400; }
.pf-lastuid { color: var(--pf-ok) !important; }
.pf-summary { border-color: var(--pf-accent); background: linear-gradient(180deg, var(--pf-panel), var(--pf-soft)); }
.pf-kv { border-bottom-width: 2px; }
.pf-price { color: var(--pf-link); font-family: var(--pf-head-font); }
.pf-gbanner { display: block; margin-bottom: 18px; border-radius: 26px; border: 4px solid var(--pf-frame); overflow: hidden; box-shadow: var(--pf-shadow-sm); transition: transform .38s var(--pf-spring); }
a.pf-gbanner:hover { transform: scale(1.010) rotate(-.400deg); }
.pf-gbanner img { display: block; width: 100%; }
.pf-gstrip { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; padding: 10px 18px; border-radius: 999px; background: var(--pf-butter); border: 2px solid color-mix(in srgb, var(--pf-butter-ink) 22%, transparent); box-shadow: 0 4px 0 color-mix(in srgb, var(--pf-butter-ink) 22%, transparent); color: var(--pf-butter-ink) !important; text-decoration: none !important; }
.pf-gstrip .pf-ico { animation: pf-wiggle 1.600s ease-in-out infinite; }
.pf-gstrip em { margin-left: auto; font-style: normal; font-family: var(--pf-head-font); font-weight: 600; white-space: nowrap; }

/* ============ บัญชีของฉัน ============ */
.pf-account > * { min-width: 0; }
.pf-side-name { font-family: var(--pf-head-font); color: var(--pf-ink); }
.pf-side-bal { background: var(--pf-soft); border: 2px dashed var(--pf-line); border-radius: 18px; }
.pf-side-bal b { color: var(--pf-link); font-family: var(--pf-head-font); }
.pf-side nav a { color: var(--pf-text); border-radius: 14px; }
.pf-side nav a:hover, .pf-side nav a.is-on { background: var(--pf-hover); color: var(--pf-ink); }
.pf-hello { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.pf-hello h1 { margin: 0; font-size: 1.500rem; }
.pf-body .pf-hello p { margin: 0; font-family: var(--pf-hand); font-weight: 600; }
.pf-stats b { font-family: var(--pf-head-font); color: var(--pf-ink); }
.pf-table th, .pf-table td { border-bottom-width: 2px; }
.pf-table tbody tr:hover { background: var(--pf-hover); }
.pf-copy { border-width: 2px; color: var(--pf-link); border-radius: 10px; }
.pf-ticket { border-width: 2px; background: var(--pf-bg2); border-radius: 18px; }
.pf-wheel-box > * { min-width: 0; }
.pf-wheel-wrap { width: min(300px, 100%); height: auto; aspect-ratio: 1; }
.pf-wheel { box-shadow: 0 0 0 4px var(--pf-panel), 0 0 40px var(--pf-glow); }
.pf-wheel-pin { border-top-color: var(--pf-accent); }
.pf-aff-tool canvas { border-width: 2px; border-radius: 20px; }
.pf-bankcard { border-radius: 26px; border: 4px solid var(--pf-frame); }
.pf-bankcard-copy { font-family: var(--pf-head-font); }

/* ============ เข้าสู่ระบบ / สมัคร ============ */
.pf-auth-hi { display: flex; align-items: flex-end; justify-content: center; gap: 2px; margin-bottom: 6px; }
.pf-auth-hi .pf-bubble { margin-bottom: 30px; }
.pf-auth-hi .pf-bubble::after { left: -8px; bottom: 12px; transform: rotate(135deg); }
.pf-tabs { background: var(--pf-soft); border: 2px solid var(--pf-line); border-radius: 999px; }
.pf-tabs button { border-radius: 999px; font-family: var(--pf-head-font); font-weight: 500; transition: transform .28s var(--pf-spring); }
.pf-tabs button.is-on { background: var(--pf-grad); color: #fff; box-shadow: 0 3px 0 var(--pf-edge); }
.pf-pass-eye { color: var(--pf-link); }
.pf-form-sub { border-top: 2px dashed var(--pf-line); }
.pf-banks { border: 0; padding: 0; margin: 0 0 14px; }
.pf-banks legend { padding: 0; margin-bottom: 8px; font-size: .92rem; font-weight: 500; color: var(--pf-ink); }
.pf-banks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 2px; }
.pf-form .pf-bankopt { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px; border-radius: 16px; border: 2px solid var(--pf-line); background: var(--pf-bg2); cursor: pointer; font-size: .86rem; font-weight: 400; color: var(--pf-text); transition: transform .28s var(--pf-spring), border-color .2s; }
.pf-bankopt:hover { transform: translateY(-2px); border-color: var(--pf-accent); }
.pf-bankopt input { position: absolute; opacity: 0; pointer-events: none; }
.pf-bankopt:has(input:checked) { border-color: var(--pf-accent); background: var(--pf-tint); box-shadow: 0 3px 0 var(--pf-accent); }
.pf-bankopt:has(input:focus-visible) { outline: 2px solid var(--pf-accent); outline-offset: 2px; }
.pf-bankmark { flex: none; display: inline-grid; place-items: center; min-width: 46px; height: 28px; padding: 0 6px; border-radius: 10px; background: var(--bk); color: #fff; font-style: normal; font-size: .66rem; font-weight: 700; letter-spacing: .03em; vertical-align: middle; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.pf-kyc-note { color: var(--pf-muted); }
.pf-verify { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; background: var(--pf-butter); border-color: color-mix(in srgb, var(--pf-butter-ink) 30%, transparent); color: var(--pf-butter-ink); }

/* ============ ป๊อปอัพ ============ */
.pf-popup { background: rgba(70, 36, 120, .42); backdrop-filter: blur(6px); overflow-y: auto; }
html.pf-night .pf-popup { background: rgba(8, 3, 22, .7); }
.pf-popup-card { position: relative; width: min(430px, 100%); margin-top: 60px; padding: 28px 24px 22px; overflow: visible; background: var(--pf-panel); border: 4px solid var(--pf-frame); border-radius: 34px; box-shadow: 0 10px 0 var(--pf-edge-soft), 0 34px 80px rgba(70, 20, 120, .3); animation: pf-popin .5s var(--pf-spring); }
.pf-popup-wide { width: min(580px, 100%); }
.pf-popup-mascot { position: absolute; left: 50%; top: -82px; width: 118px; margin-left: -59px; clip-path: inset(-20% -30% 34% -30%); pointer-events: none; }
.pf-popup-card > img, .pf-popup-card > a > img { display: block; width: 100%; margin-bottom: 14px; border-radius: 22px; }
.pf-popup-card > .pf-vid { margin-bottom: 14px; }
.pf-popup-card h2 { font-size: 1.400rem; background: var(--pf-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding: .1em 0; }
.pf-popup-card p { color: var(--pf-muted); }
.pf-popup-x { position: absolute; z-index: 3; right: -12px; top: -12px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border-radius: 50%; border: 2px solid var(--pf-line); background: var(--pf-panel); box-shadow: 0 4px 0 var(--pf-edge-soft); color: var(--pf-ink); font-size: 1.400rem; line-height: 1; cursor: pointer; transition: transform .35s var(--pf-spring); }
.pf-popup-x:hover { transform: rotate(90deg) scale(1.100); }
.pf-popup-later { color: var(--pf-muted); font-family: var(--pf-hand); font-weight: 600; }
.pf-welcome .pf-popup-card, .pf-install .pf-popup-card { text-align: center; }
.pf-cred { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 16px; margin-bottom: 8px; border-radius: 16px; background: var(--pf-soft); border: 2px dashed var(--pf-line); text-align: left; }
.pf-cred span { color: var(--pf-muted); font-size: .86rem; }
.pf-cred b { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 1.050rem; color: var(--pf-ink); user-select: all; word-break: break-all; }
.pf-welcome .pf-btn { margin-top: 10px; }
.pf-welcome .pf-alert { margin: 14px 0 0; text-align: left; }
.pf-install-icon { border-radius: 22px; box-shadow: 0 6px 0 var(--pf-edge-soft); margin-bottom: 8px; }
.pf-install ol { text-align: left; margin: 14px 0; padding-left: 1.300em; }
.pf-install li { margin-bottom: 8px; }

/* ============ หน้าโปรโมชัน ============ */
.pf-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.pf-promo-card { display: flex; flex-direction: column; overflow: hidden; background: var(--pf-panel); border: 2px solid var(--pf-line); border-radius: 30px; box-shadow: 0 6px 0 var(--pf-edge-soft); transition: transform .38s var(--pf-spring), border-color .2s; }
.pf-promo-card:hover { transform: translateY(-7px) rotate(-.800deg); border-color: var(--pf-accent); }
.pf-promo-media { display: grid; place-items: center; aspect-ratio: 16 / 9; background: linear-gradient(140deg, var(--pf-lilac), var(--pf-rose)); overflow: hidden; }
.pf-promo-media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pf-promo-media .pf-vid { width: 100%; height: 100%; max-width: none; aspect-ratio: auto; border: 0; border-radius: 0; box-shadow: none; }
.pf-promo-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 20px 22px; }
.pf-body .pf-promo-body h3 { margin: 0; font-size: 1.150rem; }
.pf-body .pf-promo-body p { margin: 0; color: var(--pf-muted); }
.pf-body .pf-promo-date { padding: 2px 12px; border-radius: 999px; background: var(--pf-butter); color: var(--pf-butter-ink); font-size: .82rem; font-weight: 600; }
.pf-promo-body .pf-btn { margin-top: 8px; }

/* ============ ปุ่มติดต่อลอย / แถบเมนูมือถือ / เอฟเฟกต์ ============ */
.pf-fab { position: fixed; right: 20px; bottom: 22px; z-index: 60; }
.pf-fab > button { display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border-radius: 50%; border: 4px solid var(--pf-frame); background: var(--pf-grad); color: #fff; box-shadow: 0 6px 0 var(--pf-edge), 0 16px 30px var(--pf-glow); cursor: pointer; animation: pf-bob 3.200s ease-in-out infinite; transition: transform .35s var(--pf-spring); }
.pf-fab > button:hover { transform: scale(1.120) rotate(-8deg); }
.pf-fab > button .pf-ico { width: 26px; height: 26px; }
.pf-fab-menu { position: absolute; right: 0; bottom: 76px; width: 226px; padding: 14px; border-radius: 26px; background: var(--pf-panel); border: 2px solid var(--pf-line); box-shadow: 0 6px 0 var(--pf-edge-soft), var(--pf-shadow); animation: pf-popin .35s var(--pf-spring); transform-origin: 100% 100%; }
.pf-body .pf-fab-menu p { margin: 0 0 10px 4px; font-family: var(--pf-hand); font-weight: 700; color: var(--pf-ink); }
.pf-fab-menu a { display: block; padding: 9px 14px; margin-bottom: 7px; border-radius: 999px; background: var(--c); color: #fff !important; text-decoration: none !important; font-family: var(--pf-head-font); font-size: .92rem; transition: transform .28s var(--pf-spring); }
.pf-fab-menu a:hover { transform: translateX(-4px) scale(1.030); }
.pf-fab-menu a:last-child { margin-bottom: 0; }
.pf-tabbar { display: none; }
.pf-fx { position: fixed; z-index: 999; width: 16px; height: 16px; margin: -8px 0 0 -8px; pointer-events: none; animation: pf-fx .75s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes pf-fx { 0% { transform: translate(0, 0) scale(.2) rotate(0deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.100) rotate(var(--rot)); opacity: 0; } }
.pf-js [data-pf-reveal] { opacity: 0; transform: translateY(30px) scale(.970); transition: opacity .6s ease, transform .75s var(--pf-spring); }
.pf-js [data-pf-reveal].is-in { opacity: 1; transform: none; }

/* ============ จอกลาง ============ */
@media (max-width: 1320px) {
	.pf-hots { grid-template-columns: repeat(2, 1fr); }
	.pf-viprow { grid-template-columns: repeat(3, 1fr); }
	.pf-vids-3 { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1025px) {
	.pf-side nav { display: none; }
	.pf-side-bal { margin-bottom: 0; }
}

/* ============ แท็บเล็ต / มือถือ ============ */
@media (max-width: 1024px) {
	.pf-shell { display: block; }
	.pf-burger { display: flex; }
	.pf-head-search { margin-left: 0; }
	.pf-rail { position: fixed; z-index: 70; top: 0; left: 0; bottom: 0; width: min(310px, 86vw); height: auto; margin: 0; border-radius: 0 30px 30px 0; background: var(--pf-panel); transform: translateX(-104%); transition: transform .4s var(--pf-spring); }
	.pf-rail.is-open { transform: none; box-shadow: 30px 0 60px rgba(60, 20, 110, .35); }
	.pf-x-hero { grid-template-columns: 1fr; text-align: center; padding-top: 12px; }
	.pf-scene { order: -1; width: min(100%, 340px); }
	.pf-x-hero h1 span { margin-inline: auto; }
	.pf-body .pf-x-sub, .pf-x-search { margin-inline: auto; }
	.pf-x-hero .pf-hero-cta, .pf-x-hero .pf-paychips, .pf-x-install { display: flex; justify-content: center; }
	.pf-bento { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
	.pf-account { grid-template-columns: minmax(0, 1fr); }
	.pf-side { padding: 14px; }
	.pf-side nav { flex-direction: row; gap: 8px; margin-top: 12px; padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; }
	.pf-side nav::-webkit-scrollbar { display: none; }
	.pf-side nav a { flex: none; padding: 7px 14px; border: 2px solid var(--pf-line); border-radius: 999px; background: var(--pf-bg2); font-family: var(--pf-head-font); font-size: .9rem; white-space: nowrap; }
	.pf-side nav a.is-on { background: var(--pf-grad); border-color: transparent; color: #fff; }
	.pf-head-search, .pf-hide-sm, .pf-head-right .pf-vip, .pf-head-right .pf-btn, .pf-head-right .pf-mode, .pf-head-user { display: none; }
	.pf-rail-mode { display: flex; }
	.pf-vid-v { max-width: 270px; }
	.pf-header-in { padding: 0 12px; gap: 10px; }
	.pf-logo { font-size: 1.100rem; }
	.pf-wrap { width: min(1160px, 100% - 28px); }
	.pf-section { margin-bottom: 46px; }
	.pf-x-stats { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.pf-timeline { grid-template-columns: repeat(2, 1fr); row-gap: 26px; }
	.pf-timeline::before { display: none; }
	.pf-vids-2, .pf-vids-3 { grid-template-columns: 1fr; }
	.pf-bigcta { text-align: center; padding: 30px 20px; }
	.pf-bigcta .pf-hero-cta { justify-content: center; }
	.pf-bigcta-mascot { width: 120px; }
	.pf-footer-in { grid-template-columns: 1fr; }
	.pf-stage { padding-bottom: 104px; }
	.pf-fab { right: 14px; bottom: calc(104px + env(safe-area-inset-bottom)); }
	.pf-fab > button { width: 52px; height: 52px; }
	/* แถบเมนูล่างแบบแอป */
	.pf-tabbar { position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 6px; border-radius: 28px; background: var(--pf-glass); backdrop-filter: blur(16px); border: 2px solid var(--pf-line); box-shadow: 0 6px 0 var(--pf-edge-soft), 0 14px 30px var(--pf-glow); }
	.pf-tabbar a { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 2px 2px; color: var(--pf-muted) !important; text-decoration: none !important; font-family: var(--pf-head-font); font-size: .7rem; -webkit-tap-highlight-color: transparent; }
	.pf-tabbar a i { display: grid; place-items: center; width: 42px; height: 30px; border-radius: 14px; font-style: normal; transition: transform .4s var(--pf-spring), background .2s; }
	.pf-tabbar a .pf-ico { width: 22px; height: 22px; }
	.pf-tabbar a:active i { transform: scale(.85); }
	.pf-tabbar a.is-on { color: var(--pf-ink) !important; }
	.pf-tabbar a.is-on i { background: var(--pf-rose); color: var(--pf-rose-ink); transform: translateY(-3px); animation: pf-popin .5s var(--pf-spring); }
	.pf-tabbar .pf-tab-main i { width: 58px; height: 58px; margin-top: -32px; border-radius: 50%; border: 4px solid var(--pf-frame); background: var(--pf-grad); color: #fff; box-shadow: 0 5px 0 var(--pf-edge), 0 10px 20px var(--pf-glow); }
	.pf-tabbar .pf-tab-main.is-on i { background: var(--pf-grad); color: #fff; }
	.pf-tabbar .pf-tab-main .pf-ico { width: 28px; height: 28px; }
	.pf-sk-3, .pf-sk-11 { display: none; }
	.pf-sk-12, .pf-sk-13 { width: 48px; top: 84px; }
}
@media (max-width: 520px) {
	.pf-hots, .pf-bento { grid-template-columns: 1fr; }
	.pf-viprow { grid-template-columns: repeat(2, 1fr); }
	.pf-grid { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; }
	.pf-x-hero h1 { font-size: 2.050rem; }
	.pf-header-in:has(.pf-chip) .pf-logo-mascot { display: none; }
	.pf-btn-xl { flex: 1; padding: 13px 18px; font-size: 1rem; }
	.pf-form .pf-bankopt { flex-direction: column; justify-content: center; gap: 6px; padding: 10px 6px; text-align: center; font-size: .8rem; line-height: 1.3; }
	.pf-popup-card { padding: 26px 18px 20px; }
	.pf-promo-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.pf-js [data-pf-reveal] { opacity: 1; transform: none; }
}

/* ============ หน้าโดเนท ============ */
.pf-donate-avatar { position: relative; flex: none; width: 84px; height: 84px; border-radius: 50%; overflow: hidden; background: var(--pf-soft); border: 3px solid var(--pf-frame); box-shadow: 0 0 0 3px var(--pf-primary), var(--pf-shadow); }
.pf-donate-avatar .pf-mascot { position: absolute; left: 10px; top: 8px; width: 60px; height: auto; }
.pf-donate-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; border-radius: 0; object-fit: cover; }
.pf-donate-head h1 { font-family: var(--pf-head-font); }

/* ============ รอผลออเดอร์ ============ */
.pf-autocheck { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 10px 14px; border: 2px dashed var(--pf-line); border-radius: 16px; background: var(--pf-soft); color: var(--pf-ink); font-size: .92rem; }
.pf-spin { flex: none; width: 18px; height: 18px; border: 3px solid var(--pf-line); border-top-color: var(--pf-primary); border-radius: 50%; animation: pf-spin 1s linear infinite; }
@keyframes pf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pf-spin { animation: none; } }

/* ตารางออเดอร์บนมือถือ: เรียงเป็นการ์ด เห็นสถานะได้โดยไม่ต้องเลื่อนไปทางขวา */
@media (max-width: 640px) {
	.pf-table.pf-stack thead { display: none; }
	.pf-table.pf-stack, .pf-table.pf-stack tbody, .pf-table.pf-stack tr { display: block; width: 100%; }
	.pf-table.pf-stack tr { padding: 10px 0; border-bottom: 2px dashed var(--pf-line); }
	.pf-table.pf-stack tr:last-child { border-bottom: 0; }
	.pf-table.pf-stack td { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; padding: 3px 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; }
	.pf-table.pf-stack td::before { content: attr(data-label); flex: none; color: var(--pf-muted); font-size: .82rem; text-align: left; white-space: nowrap; }
	.pf-table.pf-stack td small { margin-top: 3px; }
}