/* ===================================================================
   Smoothie Glass + 3D — ธีมใหม่ของหน้า /all และหน้ารับไวท์ลิสต์
   โหลดต่อท้ายสุด (หลัง sm-fx.css) · เอาออก = ลบ <link> ไฟล์นี้ + sm-glass.js
   =================================================================== */
:root.glass {
  --g-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.025) 60%);
  --g-fill: rgba(30, 24, 40, 0.38);
  --g-brd: rgba(255, 255, 255, 0.11);
  --g-hi: rgba(255, 255, 255, 0.16);
  --g-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.75);
  --g-blur: blur(22px) saturate(1.5);
  --g-c1: #ff5fa8; --g-c2: #8b5cff; --g-c3: #3fd0ff; --g-c4: #ffb36b;
  --g-head: 'Fredoka', 'Mitr', 'IBM Plex Sans Thai', system-ui, sans-serif;
}
:root.glass[data-theme='light'] {
  --g-bg: linear-gradient(140deg, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0.45) 60%);
  --g-fill: rgba(255, 255, 255, 0.35);
  --g-brd: rgba(255, 255, 255, 0.9);
  --g-hi: rgba(255, 255, 255, 1);
  --g-shadow: 0 30px 60px -30px rgba(120, 50, 100, 0.35);
}
/* โทนสีตามฉาก */
:root.glass[data-scene='stats'] { --g-c1: #ff6fb5; --g-c2: #3fd0ff; --g-c3: #7ee2b8; --g-c4: #8b5cff; }
:root.glass[data-scene='portal'] { --g-c1: #8b5cff; --g-c2: #ff5fa8; --g-c3: #ffb36b; --g-c4: #3fd0ff; }
:root.glass[data-scene='gallery'] { --g-c1: #3fd0ff; --g-c2: #ff5fa8; --g-c3: #8b5cff; --g-c4: #ffd27a; }
:root.glass[data-scene='verify'] { --g-c1: #ff5fa8; --g-c2: #8b5cff; --g-c3: #3fd0ff; --g-c4: #ff9f6b; }

.glass body { background: var(--bg) !important; }
.glass .sm-bubbles { display: none; }

/* ---------- ออโรร่า + พื้นกริด 3D ---------- */
.g-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.g-blobs { position: absolute; inset: -10%; transition: transform 0.2s linear; }
.g-blobs i { position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.55; mix-blend-mode: screen; transition: background 1.6s ease; }
.g-blobs .b1 { width: 55vmax; height: 55vmax; left: -10%; top: -20%; background: var(--g-c1); animation: gB1 22s ease-in-out infinite alternate; }
.g-blobs .b2 { width: 50vmax; height: 50vmax; right: -15%; top: -5%; background: var(--g-c2); animation: gB2 26s ease-in-out infinite alternate; }
.g-blobs .b3 { width: 45vmax; height: 45vmax; left: 25%; bottom: -30%; background: var(--g-c3); opacity: 0.38; animation: gB3 30s ease-in-out infinite alternate; }
.g-blobs .b4 { width: 30vmax; height: 30vmax; right: 10%; bottom: 0%; background: var(--g-c4); opacity: 0.35; animation: gB4 18s ease-in-out infinite alternate; }
@keyframes gB1 { to { transform: translate(18vw, 22vh) scale(1.15); } }
@keyframes gB2 { to { transform: translate(-20vw, 25vh) scale(0.9); } }
@keyframes gB3 { to { transform: translate(-15vw, -20vh) scale(1.2); } }
@keyframes gB4 { to { transform: translate(-25vw, -30vh) scale(1.3); } }
:root.glass[data-theme='light'] .g-blobs i { mix-blend-mode: multiply; opacity: 0.32; }
.g-aurora::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 120%, transparent 30%, rgba(var(--bg-rgb), 0.55) 80%); }
.g-floor {
  position: absolute; left: -50%; right: -50%; bottom: -8%; height: 55%;
  background-image: linear-gradient(rgba(var(--accent-rgb), 0.28) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--accent-rgb), 0.28) 1px, transparent 1px);
  background-size: 64px 64px; transform: perspective(420px) rotateX(72deg); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, #000 10%, transparent 75%); mask-image: linear-gradient(to top, #000 10%, transparent 75%);
  animation: gFloor 3.5s linear infinite; opacity: 0.55;
}
@keyframes gFloor { to { background-position: 0 64px; } }
.g-grain { position: absolute; inset: 0; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ---------- กระจก (ใช้ร่วม) ---------- */
.g-card,
.glass .card, .glass .p-card, .glass .dialog, .glass .udrop,
.glass .ux-sheet, .glass .rl-sec, .glass .rl-adminbar, .glass .rl-dlg, .glass .ai-box,
.glass .e-card, .glass .v-card, .glass .v-tabs, .glass .sm-panel, .glass .sm-hero, .glass .sm-chip {
  background: var(--g-bg), var(--g-fill) !important;
  -webkit-backdrop-filter: var(--g-blur); backdrop-filter: var(--g-blur);
  border: 1px solid var(--g-brd) !important;
  box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow) !important;
}
.glass .fx-lit { background-image: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(var(--accent-rgb), 0.2), transparent 70%), var(--g-bg) !important; }

/* การ์ดอัปเดตแบบกระดาษซ้อน — ไม่เบลอ (จะได้ไม่บังชั้นกระดาษ) แต่ใช้สีกระจก */
.glass .ux-tilt { background: linear-gradient(140deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)), rgba(var(--surface-rgb), 0.82) !important; border-color: var(--g-brd) !important; box-shadow: inset 0 1px 0 var(--g-hi), var(--g-shadow) !important; }
.glass .ux-tilt::before, .glass .ux-tilt::after { background: rgba(var(--surface-rgb), 0.6) !important; border-color: var(--g-brd) !important; }

/* ช่องย่อยในแผง — โปร่งแสงบาง ๆ */
.glass .sm-tile, .glass .sm-slot, .glass .u-filter .ux-tile:not(.on), .glass .rl-tab:not(.on), .glass .v-app, .glass .rl-search, .glass .u-changes li, .glass .h-rules a, .glass .h-link {
  background-color: rgba(255, 255, 255, 0.045) !important; border-color: var(--g-brd) !important;
}
:root.glass[data-theme='light'] .sm-tile, :root.glass[data-theme='light'] .sm-slot, :root.glass[data-theme='light'] .u-filter .ux-tile:not(.on), :root.glass[data-theme='light'] .rl-tab:not(.on), :root.glass[data-theme='light'] .v-app, :root.glass[data-theme='light'] .rl-search { background-color: rgba(255, 255, 255, 0.55) !important; }
.glass .rl-search { -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.glass .ai-fab, .glass .rl-ask { box-shadow: 0 14px 30px -10px rgba(255, 95, 168, 0.75) !important; }

/* แถบเมนูลอยเป็นแคปซูลกระจก */
.glass header.nav {
  position: sticky; top: 12px; z-index: 40; width: min(1220px, calc(100% - 24px)); margin: 12px auto 0; border-radius: 22px;
  background: rgba(var(--bg-rgb), 0.35) !important; border: 1px solid var(--g-brd) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--g-hi), 0 20px 40px -24px rgba(0, 0, 0, 0.7);
}
.glass .ptabs a.on { background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.35), rgba(139, 92, 255, 0.28)) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 6px 18px -8px rgba(var(--accent-rgb), 0.8) !important; color: #fff !important; }
:root.glass[data-theme='light'] .ptabs a.on { color: #8a1d55 !important; }
:root.glass[data-theme='light'] .g-l2 { background-image: linear-gradient(90deg, #e8609e, #b56bff, #2fa8e0, #e8609e); }
.glass .sitefoot { background: transparent !important; border-top: 1px solid var(--g-brd); position: relative; z-index: 1; }

/* ปุ่ม: เงาเรือง + กระจก */
.glass .sm-btn:not(.sm-ghost):not(.sm-discord), .glass .btn.primary {
  background: linear-gradient(135deg, #ff8fc1, #ff5fa8 45%, #b56bff) !important; color: #fff !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 14px 30px -10px rgba(255, 95, 168, 0.75) !important;
}
.glass .sm-btn.sm-discord, .glass .btn.discord { background: linear-gradient(135deg, #7984ff, #5865f2) !important; color: #fff !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 30px -10px rgba(88, 101, 242, 0.8) !important; }
.glass .sm-btn.sm-ghost, .glass .btn.ghost {
  background: rgba(255, 255, 255, 0.07) !important; color: var(--text) !important; border: 1px solid var(--g-brd) !important;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 var(--g-hi) !important;
}
.glass .btn { border-radius: 16px; }

/* ===================== หน้า /all ===================== */
.glass .p-wrap { padding-top: clamp(28px, 5vh, 56px); }
.glass #home.p-wrap { max-width: 1240px; padding-top: 0; }
.glass .rl-wrap { padding-top: clamp(20px, 4vh, 40px); }
.g-eyebrow { font: 600 12px/1 var(--g-head); letter-spacing: 0.28em; color: var(--accent); }

/* ---------- หัวเว็บ ---------- */
.g-hero {
  --sp: 0;
  position: relative; min-height: calc(100svh - 96px); display: grid; grid-template-columns: 1fr 1.1fr; align-items: center; gap: 20px;
  padding: clamp(24px, 5vh, 60px) 0 90px;
}
.g-hero-copy { position: relative; z-index: 3; opacity: calc(1 - var(--sp) * 1.4); translate: 0 calc(var(--sp) * -60px); }
.g-hello { display: inline-flex; align-items: center; gap: 9px; padding: 5px 16px 5px 5px; border-radius: 999px; font: 500 14px var(--g-head); color: var(--muted);
  background: rgba(255, 255, 255, 0.06); border: 1px solid var(--g-brd); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: gIn 0.8s both; }
.g-hello b { color: var(--text); font-weight: 600; }
.g-hello img, .g-hello .ph { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: rgba(var(--accent-rgb), 0.25); }
.g-title { margin: 22px 0 0; font: 700 clamp(44px, 6.6vw, 92px)/1.02 var(--g-head) !important; letter-spacing: -0.02em; display: flex; flex-direction: column; }
.g-title span { display: block; animation: gIn 0.9s cubic-bezier(0.2, 0.9, 0.2, 1.1) both; }
.g-l1 { animation-delay: 0.08s !important; }
.g-l2 { animation-delay: 0.18s !important; background: linear-gradient(90deg, #ff8fc1, #ffd27a, #8b5cff, #3fd0ff, #ff8fc1); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gIn 0.9s 0.18s cubic-bezier(0.2, 0.9, 0.2, 1.1) both, fxShine 6s linear infinite !important; padding-bottom: 0.06em; filter: drop-shadow(0 6px 24px rgba(255, 95, 168, 0.45)); }
.g-l3 { animation-delay: 0.28s !important; color: var(--muted); font-weight: 600; }
@keyframes gIn { from { opacity: 0; translate: 0 40px; filter: blur(8px); } }
.g-sub { margin: 20px 0 0; max-width: 470px; color: var(--muted); font-size: 16.5px; line-height: 1.75; animation: gIn 0.9s 0.38s both; }
.g-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; animation: gIn 0.9s 0.48s both; }
.g-cta .sm-btn { padding: 14px 24px; font-size: 16px; border-radius: 18px; }
.g-live { display: inline-flex; align-items: center; gap: 10px; margin-top: 26px; text-decoration: none; color: var(--muted); font: 500 14px var(--g-head);
  padding: 8px 16px; border-radius: 999px; background: rgba(126, 226, 184, 0.08); border: 1px solid rgba(126, 226, 184, 0.25); animation: gIn 0.9s 0.58s both; }
.g-live b { color: var(--text); font-size: 17px; }
.g-live small { display: none; }
.g-dot { width: 9px; height: 9px; border-radius: 50%; background: #7ee2b8; box-shadow: 0 0 0 0 rgba(126, 226, 184, 0.7); animation: gPulse 1.8s infinite; }
.g-live.off { background: rgba(255, 122, 143, 0.08); border-color: rgba(255, 122, 143, 0.3); }
.g-live.off .g-dot { background: #ff7a8f; animation: none; }
@keyframes gPulse { 70% { box-shadow: 0 0 0 10px rgba(126, 226, 184, 0); } 100% { box-shadow: 0 0 0 0 rgba(126, 226, 184, 0); } }

/* เวที 3D */
.g-stage {
  --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 40%;
  position: relative; z-index: 2; aspect-ratio: 1 / 0.86; width: 100%; perspective: 1100px;
  transform: translateY(calc(var(--sp) * 140px)) scale(calc(1 - var(--sp) * 0.3)) rotateX(calc(var(--sp) * 38deg));
  opacity: calc(1 - var(--sp) * 0.9); transform-origin: 50% 80%;
}
.g-stage > * { position: absolute; }
.g-halo { inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.55), rgba(139, 92, 255, 0.25) 45%, transparent 70%); filter: blur(30px); animation: gHalo 5s ease-in-out infinite; }
@keyframes gHalo { 50% { scale: 1.12; opacity: 0.75; } }
.g-ring { left: 50%; top: 54%; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.18); translate: -50% -50%;
  transform: rotateX(calc(72deg + var(--rx))) rotateY(var(--ry)); box-shadow: 0 0 30px rgba(var(--accent-rgb), 0.25), inset 0 0 30px rgba(var(--accent-rgb), 0.18); }
.g-ring1 { width: 78%; aspect-ratio: 1; }
.g-ring2 { width: 96%; aspect-ratio: 1; border-style: dashed; border-color: rgba(var(--accent-rgb), 0.35); animation: gRingSpin 40s linear infinite; }
@keyframes gRingSpin { to { rotate: z 360deg; } }
.g-orbit { inset: 0; }
.g-fruit { position: absolute; left: 0; top: 0; width: 62px; height: 62px; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; }
.g-fruit svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.g-logo3d {
  left: 6%; right: 6%; top: 12%; z-index: 3; transform-style: preserve-3d; cursor: pointer;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); animation: gBob 6s ease-in-out infinite;
}
@keyframes gBob { 50% { translate: 0 -14px; } }
.g-logo3d img { width: 100%; height: auto; display: block; user-select: none; -webkit-user-drag: none; }
.g-lmain { position: relative; transform: translateZ(60px); filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.45)); }
.g-lsh { position: absolute; inset: 0; transform: translateZ(-40px) translateY(26px) scale(0.96); filter: blur(14px) brightness(0.35) saturate(2); opacity: 0.8; }
.g-glare { position: absolute; inset: 0; transform: translateZ(61px); pointer-events: none; mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255, 255, 255, 0.9), transparent 38%);
  -webkit-mask: url(/img/logo.png) center / 100% 100% no-repeat; mask: url(/img/logo.png) center / 100% 100% no-repeat; }
.g-pedestal { left: 22%; right: 22%; bottom: 4%; height: 12%; border-radius: 50%; background: radial-gradient(ellipse, rgba(var(--accent-rgb), 0.5), transparent 70%); filter: blur(14px); }

.g-scroll { position: absolute; left: 50%; bottom: 20px; translate: -50% 0; display: flex; flex-direction: column; align-items: center; gap: 2px; z-index: 3;
  color: var(--faint); font: 500 12px var(--g-head); letter-spacing: 0.2em; text-decoration: none; opacity: calc(1 - var(--sp) * 3); }
.g-scroll svg { width: 22px; height: 22px; animation: gDown 1.6s ease-in-out infinite; }
@keyframes gDown { 50% { translate: 0 6px; } }

/* ---------- ตัวเลขสด ---------- */
.g-stats { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 16px; perspective: 1000px; margin-bottom: clamp(60px, 10vh, 110px); }
.g-card { border-radius: 26px; color: inherit; text-decoration: none; position: relative; }
.g-stat { padding: 22px; display: flex; flex-direction: column; gap: 6px; transition: transform 0.2s ease-out, border-color 0.2s; }
.g-stat b { display: block; font: 700 clamp(30px, 3.2vw, 42px)/1 var(--g-head); letter-spacing: -0.02em; }
.g-stat b small { font: 500 14px var(--g-head); color: var(--faint); margin-left: 4px; letter-spacing: 0; }
.g-stat .g-l { color: var(--faint); font-size: 13.5px; }
.g-sic { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 10px; color: #fff;
  background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.9), rgba(139, 92, 255, 0.8)); box-shadow: 0 10px 20px -8px rgba(var(--accent-rgb), 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.4); }
.g-sic svg { width: 21px; height: 21px; }
.g-stat-big { flex-direction: row; align-items: center; gap: 18px; }
.g-stat-big b { font-size: clamp(38px, 4vw, 56px); }
.g-ringwrap { position: relative; width: 96px; height: 96px; flex: none; }
.g-ringwrap svg { width: 100%; height: 100%; rotate: -90deg; }
.g-ringwrap circle { fill: none; stroke-width: 9; }
.g-ringwrap .bg { stroke: rgba(255, 255, 255, 0.08); }
.g-ringwrap .fg { stroke: url(#none); stroke: #ff8fc1; stroke-linecap: round; stroke-dasharray: 327; stroke-dashoffset: 327; transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.9, 0.2, 1); filter: drop-shadow(0 0 6px rgba(var(--accent-rgb), 0.9)); }
.g-livetag { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 6px; font: 700 12px var(--g-head); letter-spacing: 0.14em; color: #7ee2b8; }
.g-livetag .g-dot { width: 7px; height: 7px; }
.g-stat-big .g-l { display: block; margin-top: 6px; }

/* ค่อย ๆ พลิกขึ้นมาแบบ 3D ตอนเลื่อนถึง */
.g-reveal.fx-rv { rotate: x 38deg; transform-origin: 50% 100%; }
.g-reveal.fx-rv.fx-in {
  rotate: x 0deg;
  transition: opacity 0.6s ease var(--fxd, 0ms), translate 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15) var(--fxd, 0ms), scale 0.9s cubic-bezier(0.2, 0.9, 0.25, 1.15) var(--fxd, 0ms),
    rotate 1s cubic-bezier(0.2, 0.9, 0.25, 1.1) var(--fxd, 0ms), transform 0.2s ease-out, border-color 0.2s;
}

/* ---------- หัวข้อส่วน ---------- */
.g-sec { margin-bottom: clamp(70px, 12vh, 130px); perspective: 1200px; }
.g-sechd { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; margin-bottom: 30px; position: relative; }
.g-sechd h2 { margin: 0; font: 700 clamp(32px, 4.4vw, 56px)/1.05 var(--g-head) !important; letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--text) 30%, rgba(var(--fg-rgb), 0.45)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-count { color: var(--faint); font: 500 13px var(--g-head); padding: 4px 12px; border-radius: 999px; border: 1px solid var(--g-brd); }

/* ---------- bento ---------- */
.g-bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(0, auto); gap: 16px; }
.g-bento > .g-card { padding: 24px; }
.g-b-upd { grid-column: span 4; grid-row: span 2; }
.g-b-ai { grid-column: span 2; }
.g-b-links { grid-column: span 2; }
.g-b-rules { grid-column: span 6; }
.g-bento:not(:has(.g-b-ai)) .g-b-links { grid-row: span 2; }
.g-chd { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.g-chd h3 { margin: 0; font: 600 20px var(--g-head) !important; }
.g-cic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; color: var(--accent); background: rgba(var(--accent-rgb), 0.14); border: 1px solid rgba(var(--accent-rgb), 0.25); }
.g-cic svg { width: 19px; height: 19px; }
.g-more { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font: 500 13.5px var(--g-head); color: var(--accent); text-decoration: none; }
.g-more svg { width: 15px; height: 15px; transition: translate 0.2s; }
.g-more:hover svg { translate: 4px 0; }
.g-uhead { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: center; text-decoration: none; color: inherit; padding: 16px 18px; margin-bottom: 14px;
  border-radius: 18px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.18), rgba(139, 92, 255, 0.12)); border: 1px solid rgba(var(--accent-rgb), 0.25); }
.g-ver { font: 700 22px var(--g-head); background: linear-gradient(90deg, #ff8fc1, #ffd27a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-date { color: var(--faint); font: 500 13px var(--g-head); justify-self: end; }
.g-uhead b { grid-column: 1 / -1; font-size: 16.5px; line-height: 1.45; }
.g-empty { color: var(--muted); margin: 0; }
.glass .g-bento .u-changes li { border-radius: 12px; }

.g-b-ai { overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 230px;
  background: linear-gradient(150deg, rgba(139, 92, 255, 0.35), rgba(255, 95, 168, 0.22) 60%, rgba(63, 208, 255, 0.15)), var(--g-fill) !important; }
.g-b-ai h3 { margin: 0; font: 700 24px/1.2 var(--g-head) !important; position: relative; }
.g-b-ai p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.6; position: relative; }
.g-b-ai .g-eyebrow { position: relative; color: #ffd0e5; }
.g-go { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 10px 18px; border-radius: 14px; font: 600 14.5px var(--g-head);
  background: rgba(255, 255, 255, 0.92); color: #3a1430; position: relative; transition: gap 0.2s; }
.g-b-ai:hover .g-go { gap: 14px; }
.g-go svg { width: 16px; height: 16px; }
.g-orb { position: absolute; width: 180px; height: 180px; right: -50px; top: -50px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #ffc2e4 18%, #ff5fa8 45%, #8b5cff 75%); filter: blur(2px); opacity: 0.85;
  box-shadow: 0 0 60px rgba(255, 95, 168, 0.6); animation: gOrb 7s ease-in-out infinite; }
@keyframes gOrb { 50% { translate: -20px 16px; scale: 1.08; } }

.glass .g-bento .h-links { display: grid; grid-template-columns: 1fr; gap: 10px; }
.glass .g-bento .h-link small { white-space: normal; }
.glass .g-bento .h-link { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--g-brd); border-radius: 16px; }
.glass .g-b-rules .h-rules { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.glass .g-b-rules .h-rules a { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--g-brd); border-radius: 16px; padding: 14px 16px; }

/* ---------- แกลเลอรี coverflow ---------- */
.g-flow { position: relative; height: clamp(280px, 40vw, 440px); perspective: 1200px; outline: none; touch-action: pan-y; user-select: none; cursor: grab; }
.g-flow.drag { cursor: grabbing; }
.g-track { position: absolute; inset: 0; transform-style: preserve-3d; }
.g-slide { position: absolute; left: 50%; top: 50%; margin: 0; width: min(440px, 62vw); aspect-ratio: 4 / 3; border-radius: 24px; overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.2, 1), opacity 0.5s, filter 0.5s; transform-style: preserve-3d;
  border: 1px solid var(--g-brd); box-shadow: 0 40px 70px -30px rgba(0, 0, 0, 0.85); background: rgb(var(--surface-rgb)); -webkit-box-reflect: below 8px linear-gradient(transparent 70%, rgba(255, 255, 255, 0.18)); }
.g-flow.drag .g-slide { transition: none; }
.g-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.g-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 18px 14px; font: 500 15px var(--g-head); color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.65)); opacity: 0; translate: 0 10px; transition: opacity 0.3s, translate 0.3s; }
.g-slide.on figcaption { opacity: 1; translate: 0 0; }
.g-slide.on { cursor: zoom-in; box-shadow: 0 40px 80px -30px rgba(var(--accent-rgb), 0.55), 0 0 0 1px rgba(var(--accent-rgb), 0.5); }
.g-blank { background: linear-gradient(150deg, rgba(var(--accent-rgb), 0.16), rgba(139, 92, 255, 0.12)), rgba(var(--surface-rgb), 0.96); cursor: default !important; }
.g-blankart { height: 100%; display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--faint); font: 500 15px var(--g-head); }
.g-blankart svg { width: 70px; height: 70px; opacity: 0.7; animation: gBob 4s ease-in-out infinite; }
.g-nav { position: absolute; top: 50%; translate: 0 -50%; z-index: 200; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  color: var(--text); background: rgba(var(--bg-rgb), 0.45); border: 1px solid var(--g-brd); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.g-nav:hover { border-color: rgba(var(--accent-rgb), 0.6); color: var(--accent); }
.g-nav svg { width: 22px; height: 22px; }
.g-prev { left: 4px; }
.g-next { right: 4px; }
.g-dots { display: flex; justify-content: center; gap: 8px; margin-top: 30px; }
.g-dots button { width: 8px; height: 8px; border-radius: 99px; border: 0; padding: 0; background: rgba(var(--fg-rgb), 0.2); cursor: pointer; transition: width 0.3s, background 0.3s; }
.g-dots button.on { width: 28px; background: linear-gradient(90deg, #ff8fc1, #8b5cff); }

/* ---------- มือถือ / จอแคบ ---------- */
@media (max-width: 900px) {
  .g-hero { grid-template-columns: 1fr; text-align: center; min-height: 0; padding-top: 10px; gap: 0; }
  .g-stage { order: -1; width: min(520px, 100%); margin: 0 auto; }
  .g-hero-copy { display: flex; flex-direction: column; align-items: center; }
  .g-title { align-items: center; }
  .g-sub { margin-inline: auto; }
  .g-cta { justify-content: center; }
  .g-scroll { display: none; }
  .g-stats { grid-template-columns: 1fr 1fr; }
  .g-stat-big { grid-column: 1 / -1; }
  .g-bento { grid-template-columns: 1fr 1fr; }
  .g-b-upd, .g-b-rules { grid-column: 1 / -1; grid-row: auto; }
  .g-b-ai, .g-b-links { grid-column: span 1; grid-row: auto !important; }
}
@media (max-width: 600px) {
  .glass header.nav { border-radius: 18px; top: 8px; width: calc(100% - 16px); margin-top: 8px; }
  .g-fruit { width: 46px; height: 46px; }
  .g-b-ai, .g-b-links { grid-column: 1 / -1; }
  .g-stat { padding: 14px; }
  .g-stats { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .g-stat:not(.g-stat-big) b { font-size: 22px; }
  .g-stat:not(.g-stat-big) .g-l { font-size: 12px; }
  .g-stat b small { font-size: 11px; margin-left: 2px; }
  .g-sic { width: 38px; height: 38px; margin-bottom: 6px; }
  .g-ringwrap { width: 78px; height: 78px; }
  .g-nav { width: 40px; height: 40px; }
  .g-cta .sm-btn { padding: 12px 18px; font-size: 15px; }
}

/* ===================== หน้ารับไวท์ลิสต์ ===================== */
.glass .wrap { perspective: 1400px; }
.glass .wrap > .card { transform: rotateX(var(--crx, 0deg)) rotateY(var(--cry, 0deg)); border-radius: 30px !important; }
.glass .card .hero { border-bottom-color: var(--g-brd); }
.glass .card .hero-bg { opacity: 0.55; }
.glass .card .hero h1 { font-family: var(--g-head) !important; font-weight: 700 !important; letter-spacing: -0.01em; }
.glass .card .tile, .glass .card .pf-in, .glass .card .opts .tile, .glass .card .timeline, .glass .card .alert, .glass .card .pf-saved {
  background: rgba(255, 255, 255, 0.045) !important; border-color: var(--g-brd) !important; border-radius: 16px;
}
.glass .card .tile.sel { background: rgba(var(--accent-rgb), 0.14) !important; border-color: rgba(var(--accent-rgb), 0.6) !important; box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15); }
.glass .card .step .bar { background: rgba(255, 255, 255, 0.08); height: 6px; border-radius: 99px; }
.glass .card .step .bar::after { background: linear-gradient(90deg, #ff8fc1, #8b5cff) !important; box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.8); border-radius: 99px; }
.glass .card .badge { box-shadow: 0 12px 30px -10px currentColor, inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.glass .card .perks li { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--g-brd); border-radius: 16px; }
.glass .card .perks .n { background: linear-gradient(135deg, #ff8fc1, #8b5cff); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--g-head); font-weight: 700; }
.glass .toast { background: rgba(var(--bg-rgb), 0.6) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid var(--g-brd); }
.glass .modal-back { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

@media (prefers-reduced-motion: reduce) {
  .g-blobs i, .g-floor, .g-halo, .g-ring2, .g-logo3d, .g-orb, .g-blankart svg { animation: none !important; }
  .g-title span, .g-sub, .g-cta, .g-live, .g-hello { animation: none !important; }
}