/*
 * ⭐ ธีมพื้นหลังกิจกรรมแต้ม (วงล้อ · เปิดป้าย) — 8 ลายเคลื่อนไหว × 16 ชุดสี = 128 แบบ (000306 · 2026-10-15)
 *
 * มาร์กอัป: <div class="hgt hgt--<ลาย>" style="--gt1:#…;--gt2:#…;--gt3:#…"><i></i><i></i><i></i></div>
 *          รูปของร้าน: class="hgt hgt--image" style="--gt-img:url('…');--gt3:#…"
 * ⚠️ ไฟล์นี้มี 3 สำเนา (weblive · newweb-v2 · newwebbot-v2) ต้องตรงกันทุกไบต์ (`HubGameThemesTest`)
 * ⚠️ คลาส `hgt*` ทั้งหมด · คีย์เฟรม `hgt-*` — ไม่ชนกับไฟล์อื่น
 */
.hgt { position: absolute; inset: 0; overflow: hidden; isolation: isolate; pointer-events: none; background: var(--gt3, #0b0716); }
.hgt > i { position: absolute; display: block; }
.hgt::before, .hgt::after { content: ""; position: absolute; }

/* 1 · ออโรร่า — ม่านแสงไหลช้า ๆ */
.hgt--aurora > i { width: 75%; height: 75%; border-radius: 50%; filter: blur(38px); opacity: .6; animation: hgt-drift 13s ease-in-out infinite; }
.hgt--aurora > i:nth-child(1) { left: -20%; top: -25%; background: var(--gt1); }
.hgt--aurora > i:nth-child(2) { right: -25%; top: 15%; background: var(--gt2); animation-delay: -4s; animation-duration: 16s; }
.hgt--aurora > i:nth-child(3) { left: 15%; bottom: -35%; background: color-mix(in srgb, var(--gt1) 50%, var(--gt2)); animation-delay: -8s; }
.hgt--aurora::after { inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .08) 50%, transparent 70%); background-size: 250% 100%; animation: hgt-sheen 7s linear infinite; }

/* 2 · ดาวระยิบ — ดาวลอยผ่าน + ดาวตก */
.hgt--stars { background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--gt1) 32%, var(--gt3)), var(--gt3) 72%); }
.hgt--stars::before, .hgt--stars::after { inset: -50%; }
.hgt--stars::before {
  background-image: radial-gradient(1.6px 1.6px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent),
    radial-gradient(2px 2px at 40% 80%, var(--gt2), transparent), radial-gradient(1px 1px at 85% 15%, #fff, transparent),
    radial-gradient(1.6px 1.6px at 10% 70%, var(--gt1), transparent);
  background-size: 180px 180px; animation: hgt-fly 46s linear infinite;
}
.hgt--stars::after {
  background-image: radial-gradient(1px 1px at 50% 50%, #fff, transparent), radial-gradient(1.4px 1.4px at 15% 85%, var(--gt2), transparent),
    radial-gradient(1px 1px at 80% 35%, #fff, transparent);
  background-size: 120px 120px; opacity: .8; animation: hgt-fly 28s linear infinite, hgt-twinkle 2.6s ease-in-out infinite;
}
.hgt--stars > i { top: 12%; left: -30%; width: 130px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, #fff, var(--gt2)); transform: rotate(18deg); opacity: 0; animation: hgt-shoot 7s ease-in infinite; }
.hgt--stars > i:nth-child(2) { top: 40%; animation-delay: -2.4s; animation-duration: 9s; }
.hgt--stars > i:nth-child(3) { top: 65%; animation-delay: -5s; animation-duration: 11s; }

/* 3 · ซินธ์เวฟ — พระอาทิตย์ + ตารางนีออนวิ่งเข้าหา */
.hgt--grid { background: linear-gradient(180deg, var(--gt3) 0%, color-mix(in srgb, var(--gt1) 42%, var(--gt3)) 56%, var(--gt3) 57%); }
.hgt--grid::before {
  left: 50%; top: 14%; width: 46%; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%;
  background: repeating-linear-gradient(180deg, transparent 0 58%, var(--gt3) 58% 61%), linear-gradient(180deg, var(--gt2), var(--gt1));
  box-shadow: 0 0 60px color-mix(in srgb, var(--gt1) 70%, transparent); animation: hgt-pulse 4s ease-in-out infinite;
}
.hgt--grid::after {
  left: -50%; right: -50%; bottom: -12%; height: 52%;
  background-image: linear-gradient(var(--gt1) 2px, transparent 2px), linear-gradient(90deg, var(--gt1) 2px, transparent 2px);
  background-size: 44px 44px; transform: perspective(220px) rotateX(62deg); transform-origin: bottom; opacity: .6; animation: hgt-gridrun 1.1s linear infinite;
}

/* 4 · โบเก้ — วงแสงนุ่มลอยขึ้น */
.hgt--bokeh { background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--gt1) 30%, var(--gt3)), var(--gt3) 72%); }
.hgt--bokeh > i, .hgt--bokeh::before, .hgt--bokeh::after {
  bottom: -35%; width: 30%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--gt2) 75%, transparent), transparent 68%); animation: hgt-rise 9s ease-in infinite;
}
.hgt--bokeh > i:nth-child(1) { left: 6%; }
.hgt--bokeh > i:nth-child(2) { left: 42%; width: 22%; animation-delay: -3s; animation-duration: 11s; background: radial-gradient(circle, color-mix(in srgb, var(--gt1) 80%, transparent), transparent 68%); }
.hgt--bokeh > i:nth-child(3) { left: 72%; width: 36%; animation-delay: -6s; animation-duration: 13s; }
.hgt--bokeh::before { left: 24%; width: 16%; animation-delay: -1.5s; animation-duration: 7s; }
.hgt--bokeh::after { left: 58%; width: 18%; animation-delay: -4.5s; animation-duration: 10s; background: radial-gradient(circle, color-mix(in srgb, var(--gt1) 70%, transparent), transparent 68%); }

/* 5 · คลื่น — คลื่นซ้อนชั้นไหล */
.hgt--waves { background: linear-gradient(180deg, var(--gt3), color-mix(in srgb, var(--gt1) 28%, var(--gt3))); }
.hgt--waves > i { left: -40%; top: 58%; width: 180%; aspect-ratio: 1; border-radius: 42%; background: color-mix(in srgb, var(--gt1) 34%, transparent); animation: hgt-spin 12s linear infinite; }
.hgt--waves > i:nth-child(2) { top: 64%; border-radius: 40%; background: color-mix(in srgb, var(--gt2) 26%, transparent); animation-duration: 16s; animation-direction: reverse; }
.hgt--waves > i:nth-child(3) { top: 70%; border-radius: 44%; background: color-mix(in srgb, var(--gt3) 55%, var(--gt1)); animation-duration: 20s; }
.hgt--waves::before { inset: 0; background: radial-gradient(60% 40% at 50% 15%, color-mix(in srgb, var(--gt2) 30%, transparent), transparent 70%); animation: hgt-pulse 5s ease-in-out infinite; }

/* 6 · รัศมี — ลำแสงหมุนรอบจุดกลาง */
.hgt--rays { background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--gt1) 42%, var(--gt3)), var(--gt3) 72%); }
.hgt--rays::before {
  inset: -50%; background: repeating-conic-gradient(from 0deg at 50% 50%, color-mix(in srgb, var(--gt2) 24%, transparent) 0deg 9deg, transparent 9deg 18deg);
  -webkit-mask-image: radial-gradient(circle, #000 18%, transparent 62%); mask-image: radial-gradient(circle, #000 18%, transparent 62%); animation: hgt-spin 32s linear infinite;
}
.hgt--rays::after { inset: 28%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gt2) 55%, transparent), transparent 70%); animation: hgt-pulse 3s ease-in-out infinite; }
.hgt--rays > i { left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--gt2); box-shadow: 0 0 12px var(--gt2); animation: hgt-orbit 6s linear infinite; }
.hgt--rays > i:nth-child(2) { animation-duration: 9s; animation-direction: reverse; background: var(--gt1); }
.hgt--rays > i:nth-child(3) { animation-duration: 13s; }

/* 7 · เนบิวลา — หมอกสีเปลี่ยนเฉด */
.hgt--nebula::before {
  inset: -30%; filter: blur(22px); animation: hgt-nebula 22s ease-in-out infinite;
  background: radial-gradient(40% 30% at 30% 40%, color-mix(in srgb, var(--gt1) 65%, transparent), transparent 70%),
    radial-gradient(35% 40% at 70% 60%, color-mix(in srgb, var(--gt2) 55%, transparent), transparent 70%),
    radial-gradient(30% 25% at 50% 20%, color-mix(in srgb, var(--gt1) 45%, var(--gt2)), transparent 70%);
}
.hgt--nebula::after {
  inset: 0; opacity: .7; animation: hgt-twinkle 3.4s ease-in-out infinite;
  background-image: radial-gradient(1px 1px at 25% 35%, #fff, transparent), radial-gradient(1.4px 1.4px at 65% 20%, #fff, transparent), radial-gradient(1px 1px at 80% 75%, #fff, transparent);
  background-size: 140px 140px;
}

/* 8 · เส้นนีออน — เส้นแสงทแยงวิ่ง */
.hgt--neon { background: linear-gradient(160deg, var(--gt3), color-mix(in srgb, var(--gt1) 22%, var(--gt3))); }
.hgt--neon::before { inset: -100%; opacity: .55; background: repeating-linear-gradient(135deg, transparent 0 38px, color-mix(in srgb, var(--gt1) 55%, transparent) 38px 40px, transparent 40px 80px); animation: hgt-slide 4s linear infinite; }
.hgt--neon::after { inset: -100%; opacity: .45; background: repeating-linear-gradient(45deg, transparent 0 58px, color-mix(in srgb, var(--gt2) 50%, transparent) 58px 60px, transparent 60px 120px); animation: hgt-slide2 6s linear infinite; }
.hgt--neon > i:nth-child(1) { inset: 20% 10%; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--gt1) 35%, transparent), transparent); animation: hgt-pulse 3.6s ease-in-out infinite; }

/* รูปของร้าน — ซูมช้า ๆ (Ken Burns) + ฉากมืดให้ตัวหนังสืออ่านออก */
.hgt--image::before { inset: -6%; background: var(--gt-img) center / cover no-repeat; animation: hgt-ken 26s ease-in-out infinite alternate; }
.hgt--image::after { inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(0, 0, 0, .55)); }

@keyframes hgt-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(12%, -10%) scale(1.15); } }
@keyframes hgt-sheen { from { background-position: 100% 0; } to { background-position: -150% 0; } }
@keyframes hgt-fly { to { transform: translate(180px, 90px); } }
@keyframes hgt-twinkle { 0%, 100% { opacity: .35; } 50% { opacity: .95; } }
@keyframes hgt-shoot { 0% { transform: translateX(0) rotate(18deg); opacity: 0; } 8% { opacity: 1; } 30% { transform: translateX(260%) rotate(18deg); opacity: 0; } 100% { transform: translateX(260%) rotate(18deg); opacity: 0; } }
@keyframes hgt-pulse { 0%, 100% { opacity: .75; transform: translateX(var(--hgt-x, 0)) scale(1); } 50% { opacity: 1; transform: translateX(var(--hgt-x, 0)) scale(1.06); } }
@keyframes hgt-gridrun { to { background-position: 0 44px; } }
@keyframes hgt-rise { 0% { transform: translateY(0) scale(.8); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-170%) scale(1.2); opacity: 0; } }
@keyframes hgt-spin { to { transform: rotate(360deg); } }
@keyframes hgt-orbit { from { transform: rotate(0) translateX(90px); } to { transform: rotate(360deg) translateX(90px); } }
@keyframes hgt-nebula { 0%, 100% { transform: rotate(0) scale(1); filter: blur(22px) hue-rotate(0deg); } 50% { transform: rotate(25deg) scale(1.15); filter: blur(26px) hue-rotate(28deg); } }
@keyframes hgt-slide { to { transform: translateX(113.14px); } }
@keyframes hgt-slide2 { to { transform: translateX(169.71px); } }
@keyframes hgt-ken { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.1) translate(-2%, -2%); } }

/* ซินธ์เวฟ: พระอาทิตย์ต้องอยู่กลางแม้ตอนเต้น */
.hgt--grid::before { --hgt-x: -50%; }

/* หยุดเคลื่อนไหวได้ (ตัวอย่างหลายสิบอันในหลังบ้าน) */
.hgt.is-still > i, .hgt.is-still::before, .hgt.is-still::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hgt > i, .hgt::before, .hgt::after { animation: none !important; }
}