/* ═══ ชีพจรสดทุกเกม (/pulse.php) — prefix ps- ══════════════════════════════
   วงแหวนแกนกลาง + ไอคอนเกมโคจร · แถบตัวเลขสด · กราฟรายชั่วโมง/เส้น 3 ชม./ฟีด · การ์ดรายเกมเรืองแสงเมื่อ LIVE
   ══════════════════════════════════════════════════════════════════════ */
.ps { --ps-out: cubic-bezier(.22, 1, .36, 1); position: relative; overflow-x: clip; }
.ps [hidden] { display: none !important; }
.ps > section { position: relative; z-index: 1; }
.ps-sec { padding-top: 46px; padding-bottom: 46px; }

.ps-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.ps-bg i { position: absolute; width: 48vmax; height: 48vmax; border-radius: 50%; filter: blur(90px); opacity: .15; animation: ps-drift 28s ease-in-out infinite alternate; }
.ps-bg i:nth-child(1) { left: -14vmax; top: -8vmax; background: #21a040; }
.ps-bg i:nth-child(2) { right: -16vmax; top: 26%; background: #0ea5e9; opacity: .1; animation-duration: 34s; animation-delay: -12s; }
.ps-bg i:nth-child(3) { left: 24%; top: 64%; background: #f59e0b; opacity: .06; animation-duration: 40s; animation-delay: -20s; }
.ps-scan { position: absolute; left: 0; right: 0; height: 220px; top: -220px; background: linear-gradient(180deg, transparent, rgba(102, 221, 79, .06), transparent); animation: ps-scan 9s linear infinite; }
@keyframes ps-drift { to { transform: translate(5vmax, -6vmax) scale(1.15); } }
@keyframes ps-scan { to { transform: translateY(2600px); } }

/* hero */
.ps-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 30px; align-items: center; padding-top: 52px; padding-bottom: 18px; }
.ps-hero h1 { font-size: clamp(2rem, 4.6vw, 3.3rem); line-height: 1.18; margin: 0 0 14px; }
.ps-lead { color: var(--muted); font-size: 1.02rem; max-width: 600px; margin: 0 0 16px; }
.ps-sync { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 99px; font-size: .8rem; color: var(--muted); background: rgba(10, 24, 19, .7); border: 1px solid var(--border); margin-bottom: 18px; }
.ps-dot { width: 9px; height: 9px; border-radius: 50%; background: #64748b; }
.ps-dot.on { background: #66dd4f; animation: ps-ping 2s infinite; }
@keyframes ps-ping { 0% { box-shadow: 0 0 0 0 rgba(102, 221, 79, .6); } 70% { box-shadow: 0 0 0 9px rgba(102, 221, 79, 0); } 100% { box-shadow: 0 0 0 0 rgba(102, 221, 79, 0); } }
.ps-cta { display: flex; flex-wrap: wrap; gap: 12px; }

.ps-core-wrap { position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; justify-self: center; }
.ps-core { position: absolute; inset: 14%; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, rgba(31, 122, 61, .55), rgba(6, 24, 15, .9) 70%); box-shadow: 0 0 60px rgba(102, 221, 79, .25), inset 0 0 40px rgba(102, 221, 79, .2); }
.ps-core svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.ps-core circle { fill: none; stroke-width: 6; }
.ps-core .trk { stroke: rgba(255, 255, 255, .06); stroke-dasharray: 3 7; animation: ps-rot 30s linear infinite; transform-origin: center; }
.ps-core .arc { stroke: #66dd4f; stroke-linecap: round; filter: drop-shadow(0 0 10px rgba(102, 221, 79, .8)); stroke-dasharray: 553; stroke-dashoffset: 553; transition: stroke-dashoffset 1.4s var(--ps-out); }
.ps-core > div { position: relative; display: grid; justify-items: center; text-align: center; }
.ps-core > div > b { font-family: var(--mono); font-size: clamp(3rem, 7vw, 4.6rem); line-height: 1; color: #fff; text-shadow: 0 0 26px rgba(102, 221, 79, .8); }
.ps-core > div > span { color: var(--accent); font-size: .86rem; letter-spacing: .06em; }
.ps-core small { color: var(--muted); font-size: .76rem; margin-top: 4px; } .ps-core small b { color: #fff; font-family: var(--mono); }
.ps-sat { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--a)); animation: ps-orbit 70s linear infinite; }
.ps-sat i { position: absolute; left: -19px; top: -19px; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-style: normal; font-size: 1.1rem; translate: 0 -170px; background: rgba(7, 20, 15, .85); border: 1px solid var(--border); opacity: .45; filter: grayscale(.7); transition: .5s; }
.ps-sat.on i { opacity: 1; filter: none; border-color: hsl(var(--h) 85% 60%); box-shadow: 0 0 16px hsl(var(--h) 85% 55% / .6); animation: ps-blink 2.4s ease-in-out infinite; }
@keyframes ps-orbit { from { transform: rotate(var(--a)); } to { transform: rotate(calc(var(--a) + 360deg)); } }
@keyframes ps-rot { to { transform: rotate(360deg); } }
@keyframes ps-blink { 50% { box-shadow: 0 0 26px hsl(var(--h) 85% 60% / .9); } }

/* ตัวเลข */
.ps-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.ps-kpi { padding: 14px; display: grid; gap: 2px; }
.ps-kpi > * { position: relative; z-index: 1; }
.ps-kic { font-size: 1.25rem; display: inline-block; width: max-content; animation: ps-float 3.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); }
.ps-kpi b { font-family: var(--mono); font-size: 1.7rem; line-height: 1.15; background: linear-gradient(180deg, #fff, #b6f09c); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps-kpi > span:not(.ps-kic) { font-size: .8rem; } .ps-kpi small { font-size: .68rem; color: var(--muted); }
.ps-bump { animation: ps-bump .6s var(--ps-out); }
@keyframes ps-bump { 30% { filter: brightness(1.8) drop-shadow(0 0 8px #66dd4f); } }
@keyframes ps-float { 50% { transform: translateY(-4px); } }

/* กราฟ */
.ps-charts { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) minmax(0, .9fr); gap: 14px; }
.ps-hourly, .ps-trend, .ps-feed { padding: 16px; position: relative; }
.ps-hourly > *, .ps-trend > *, .ps-feed > * { position: relative; z-index: 1; }
.ps-charts h4 { margin: 0 0 12px; font-size: .92rem; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .ps-charts h4 small { margin-left: auto; color: var(--muted); font-weight: 400; font-size: .72rem; display: inline-flex; gap: 6px; align-items: center; }
.ps-charts h4 small i { width: 10px; height: 3px; border-radius: 2px; display: inline-block; } .ps-charts .k1 { background: #66dd4f; } .ps-charts .k2 { background: #45d9ff; }
.ps-bars { height: 170px; display: flex; align-items: flex-end; gap: 3px; padding-bottom: 18px; background: repeating-linear-gradient(0deg, transparent 0 33px, rgba(255, 255, 255, .04) 33px 34px); }
.ps-bars i { position: relative; flex: 1; height: calc(var(--v) * 100%); min-height: 2px; border-radius: 4px 4px 0 0; background: linear-gradient(180deg, #b6f09c, #21a040); box-shadow: 0 0 10px rgba(102, 221, 79, .35); transition: height 1s var(--ps-out); }
.ps-bars i.future { background: rgba(255, 255, 255, .06); box-shadow: none; }
.ps-bars i.now { background: linear-gradient(180deg, #fff, #66dd4f); box-shadow: 0 0 18px #66dd4f; animation: ps-now 1.6s ease-in-out infinite; }
.ps-bars em { position: absolute; bottom: -17px; left: 50%; translate: -50% 0; font-style: normal; font-size: .58rem; color: var(--dim); }
.ps-bars i:nth-child(odd) em { visibility: hidden; }
@keyframes ps-now { 50% { filter: brightness(1.4); } }
.ps-trend svg { width: 100%; height: 170px; }
.ps-trend .l1 { fill: none; stroke: #66dd4f; stroke-width: 2.2; filter: drop-shadow(0 0 4px #66dd4f); vector-effect: non-scaling-stroke; }
.ps-trend .l2 { fill: none; stroke: #45d9ff; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.ps-feed ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ps-feed li { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 10px; font-size: .78rem; background: rgba(255, 255, 255, .03); border-left: 3px solid #45d9ff; }
.ps-feed li.ok { border-left-color: #66dd4f; } .ps-feed li.live { border-left-color: #fbbf24; } .ps-feed li.muted { border-left-color: #475569; color: var(--muted); }
.ps-feed li.new { animation: ps-in .5s var(--ps-out); }
.ps-feed time { margin-left: auto; font-family: var(--mono); font-size: .66rem; color: var(--dim); }
@keyframes ps-in { from { opacity: 0; transform: translateX(-10px); } }

/* การ์ดรายเกม */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ps-card { display: grid; gap: 12px; padding: 16px; color: inherit; text-decoration: none; transition: transform .3s var(--ps-out), border-color .3s, box-shadow .3s; }
.ps-card > * { position: relative; z-index: 1; }
.ps-card:hover { transform: translateY(-4px); border-color: hsl(var(--h) 80% 55% / .6); }
.ps-card.is-live { border-color: hsl(var(--h) 80% 55% / .55); box-shadow: 0 0 0 1px hsl(var(--h) 80% 55% / .25), 0 0 30px hsl(var(--h) 80% 50% / .18); }
.ps-card-top { display: flex; gap: 10px; align-items: center; }
.ps-card-top > div { flex: 1; min-width: 0; display: grid; } .ps-card-top small { color: var(--muted); font-size: .72rem; }
.ps-gic { width: 46px; height: 46px; flex: none; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: hsl(var(--h) 60% 20% / .5); border: 1px solid hsl(var(--h) 70% 50% / .35); }
.ps-gic i { font-style: normal; display: inline-block; }
.is-live .ps-gic i { animation: ps-float 2.4s ease-in-out infinite; }
.ps-badge { font-size: .66rem; font-weight: 700; letter-spacing: .06em; padding: 4px 9px; border-radius: 99px; color: var(--muted); border: 1px solid var(--border); white-space: nowrap; }
.is-live .ps-badge { color: #04140b; background: #66dd4f; border-color: #66dd4f; box-shadow: 0 0 12px rgba(102, 221, 79, .7); animation: ps-badge 1.6s ease-in-out infinite; }
@keyframes ps-badge { 50% { box-shadow: 0 0 20px rgba(102, 221, 79, 1); } }
.ps-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0; }
.ps-stats div { display: grid; justify-items: center; padding: 8px 4px; border-radius: 10px; background: rgba(255, 255, 255, .03); }
.ps-stats dt { font-size: .62rem; color: var(--muted); } .ps-stats dd { margin: 0; font-family: var(--mono); font-size: 1.05rem; color: #fff; }
.ps-meter { display: grid; gap: 5px; font-size: .72rem; color: var(--muted); }
.ps-meter i { height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .05); position: relative; overflow: hidden; }
.ps-meter i::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--w) * 100%); border-radius: 99px; background: linear-gradient(90deg, hsl(var(--h) 80% 40%), hsl(var(--h) 85% 62%)); box-shadow: 0 0 10px hsl(var(--h) 85% 55%); transition: width 1s var(--ps-out); }
.ps-meter b { color: #fff; font-family: var(--mono); }
.ps-go { font-size: .8rem; color: var(--accent); display: inline-flex; gap: 6px; align-items: center; }
.ps-note { margin: 16px 0 0; font-size: .76rem; color: var(--muted); text-align: center; }

@media (max-width: 1100px) { .ps-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ps-charts { grid-template-columns: 1fr 1fr; } .ps-hourly { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ps-hero { grid-template-columns: 1fr; text-align: center; } .ps-lead { margin-left: auto; margin-right: auto; } .ps-cta { justify-content: center; } .ps-core-wrap { max-width: 320px; } .ps-sat i { translate: 0 -130px; } }
@media (max-width: 560px) {
  .ps-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ps-kpi b { font-size: 1.35rem; }
  .ps-charts { grid-template-columns: 1fr; } .ps-grid { grid-template-columns: 1fr; }
  .ps-sat i { translate: 0 -130px; width: 32px; height: 32px; left: -16px; top: -16px; font-size: .95rem; }
}
@media (prefers-reduced-motion: reduce) { .ps *, .ps *::before, .ps *::after { animation: none !important; transition: none !important; } }