:root {
  --bg: oklch(0.16 0.035 325); --bg-2: oklch(0.20 0.042 325);
  --surface: oklch(0.24 0.046 325); --surface-2: oklch(0.29 0.060 325);
  --text: oklch(0.95 0.012 100); --text-muted: oklch(0.77 0.028 325);
  --primary: oklch(0.81 0.12 88); --secondary: oklch(0.64 0.13 78); --accent: oklch(0.9 0.11 99);
  --border: oklch(0.52 0.06 325 / .3); --border-strong: oklch(0.8 0.10 88 / .4);
  --on-primary: oklch(0.20 0.04 325); --shine: oklch(0.99 0.01 100 / .5);
  --glow: 0 8px 24px -10px oklch(0.81 0.12 88 / .5);
  --grad: linear-gradient(110deg,var(--accent),var(--primary),var(--secondary));
  --header-h: 84px; --radius: 8px;
  --font-head: 'Anuphan',system-ui,sans-serif; --font-body: 'IBM Plex Sans Thai',system-ui,sans-serif;
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 20px); }
body { margin:0; background:var(--bg); color:var(--text); font:17px/1.8 var(--font-body); letter-spacing:0; }
img { display:block; max-width:100%; height:auto; }
a { color:var(--accent); text-underline-offset:4px; }
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
h1,h2,h3 { font-family:var(--font-head); line-height:1.4; letter-spacing:0; margin:0 0 16px; }
h1 { font-size:46px; } h2 { font-size:30px; } h3 { font-size:21px; }
p { margin:0 0 20px; } figure { margin:0; }
.container { width:min(1200px,calc(100% - 48px)); margin-inline:auto; }
.skip { position:absolute; left:-9999px; top:8px; background:var(--primary); color:var(--on-primary); padding:8px 16px; z-index:100; }
.skip:focus { left:12px; }
.site-header { position:sticky; top:0; z-index:50; background:var(--bg-2); border-bottom:1px solid var(--border); }
.header-inner { min-height:var(--header-h); display:flex; align-items:center; justify-content:space-between; gap:24px; }
.logo { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--accent); font:700 21px/1.3 var(--font-head); }
.logo img { width:72px; height:72px; object-fit:contain; flex:none; }
.site-nav { display:flex; align-items:center; gap:28px; }
.site-nav ul { display:flex; list-style:none; gap:24px; padding:0; margin:0; }
.site-nav ul a { text-decoration:none; color:var(--text-muted); font-size:15px; }
.site-nav ul a:hover { color:var(--accent); }
.btn { display:inline-flex; justify-content:center; align-items:center; gap:18px; text-decoration:none; border-radius:var(--radius); padding:11px 24px; font:600 16px/1.5 var(--font-head); transition:transform .2s,box-shadow .2s; }
.btn-primary { position:relative; overflow:hidden; background:var(--grad); color:var(--on-primary); box-shadow:var(--glow); }
.btn-primary::before { content:''; position:absolute; top:0; left:-70%; height:100%; width:40%; background:linear-gradient(110deg,transparent,var(--shine),transparent); transform:skewX(-20deg); animation:shine 4s infinite; }
.btn-primary span { position:relative; }
.btn-primary:hover { transform:translateY(-2px); }
.btn-ghost { border:1px solid var(--border-strong); color:var(--text); }
@keyframes shine { 0% { left:-70%; } 65%,100% { left:140%; } }
.nav-toggle { display:none; flex-direction:column; justify-content:space-between; width:44px; height:44px; padding:12px 10px; background:transparent; border:1px solid var(--border-strong); border-radius:var(--radius); }
.nav-toggle span { height:2px; width:100%; background:var(--text); }
.hero-media img,.banner-media img { width:100%; height:auto; object-fit:contain; }
.hero-copy { padding-top:36px; padding-bottom:44px; }
.eyebrow { font:600 12px/1.5 var(--font-head); color:var(--primary); margin-bottom:14px; }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; }
.banner-link { display:block; border-block:1px solid var(--border-strong); }
.ph { color:var(--text-muted); border-left:2px dashed var(--border-strong); padding-left:14px; overflow-wrap:anywhere; font-size:15px; }
.overview { padding:64px 0 32px; }
.section-head { margin-bottom:26px; }
.table-wrap { overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius); }
table { min-width:660px; width:100%; border-collapse:collapse; font-size:15px; }
th,td { text-align:left; padding:16px 20px; border-bottom:1px solid var(--border); }
thead { background:var(--surface-2); } tbody { background:var(--surface); }
.article-layout { display:grid; grid-template-columns:270px minmax(0,1fr); gap:56px; padding-top:48px; padding-bottom:64px; align-items:start; }
.toc { position:sticky; top:calc(var(--header-h) + 24px); }
.toc-box { border-top:2px solid var(--primary); padding:20px 0; }
.toc-box summary { font:700 20px var(--font-head); cursor:pointer; }
.toc ol { list-style:none; padding:0; margin:20px 0 0; }
.toc li a { display:flex; gap:14px; padding:10px 0; color:var(--text-muted); text-decoration:none; font-size:14px; }
.toc li a>span:first-child { color:var(--primary); flex:none; }
.toc li a:hover,.toc li a.active { color:var(--accent); }
.article,.toc-label { min-width:0; }
.article-section { padding:0 0 34px; margin-bottom:34px; border-bottom:1px solid var(--border); }
.article-section h3 { margin-top:28px; }
.intro-copy { max-width:960px; }
.intro-copy p:last-child { color:var(--text-muted); }
.hero-link { display:block; }
.overview .table-wrap { margin-top:24px; }
.article-section .table-wrap { margin-block:24px; }
.article-figure { margin:28px 0; }
.article-figure img { width:100%; aspect-ratio:16/9; object-fit:cover; }
figcaption { color:var(--text-muted); font-size:13px; margin-top:10px; }
.review-index { display:grid; grid-template-columns:1fr 1fr; gap:0 24px; border-block:1px solid var(--border); margin-block:24px; }
.review-index a { padding:16px 0; text-decoration:none; font-size:15px; }
.review-group { margin-block:36px; }
.game-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.game-grid>p { grid-column:1/-1; margin-block:8px; color:var(--text-muted); }
.game-card { background:var(--surface); border:1px solid var(--border); border-top:2px solid var(--primary); border-radius:var(--radius); padding:22px; min-width:0; }
.game-card p { font-size:15px; }
.game-card p:last-child { margin-bottom:0; }
.game-card .game-title { font:600 19px/1.5 var(--font-head); color:var(--accent); }
.faq-item { border-bottom:1px solid var(--border); padding-block:18px; }
.faq-item summary { cursor:pointer; font:600 19px/1.6 var(--font-head); color:var(--accent); }
.faq-item>div { padding-top:16px; }
.faq-item p:last-child { margin-bottom:0; }
@media(min-width:1025px) { .toc-box { max-height:calc(100dvh - 140px); overflow-y:auto; } }
@media(max-width:640px) { .game-grid,.review-index { grid-template-columns:1fr; } .game-card { padding:20px; } }
.sec-num { display:block; color:var(--primary); font:600 13px var(--font-head); margin-bottom:12px; }
.faq { padding:56px 0; background:var(--bg-2); border-top:1px solid var(--border); }
.site-footer { padding:48px 0 24px; border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns:1fr 1.3fr 1fr; gap:40px; }
.site-footer h2 { font-size:18px; }
.email { overflow-wrap:anywhere; font-size:15px; }
.footer-bottom { border-top:1px solid var(--border); margin-top:40px; padding-top:20px; display:flex; justify-content:space-between; color:var(--text-muted); font-size:14px; }
@media(max-width:1024px) { .article-layout { grid-template-columns:1fr; gap:32px; } .toc { position:static; } .footer-grid { grid-template-columns:1fr 1fr; } }
@media(max-width:820px) {
  .nav-toggle { display:flex; flex:none; }
  .site-nav { display:none; position:absolute; top:var(--header-h); left:0; right:0; padding:24px; background:var(--bg-2); border-bottom:1px solid var(--border); align-items:stretch; flex-direction:column; }
  .site-nav.open { display:flex; } .site-nav ul { flex-direction:column; }
  .site-nav ul a { display:block; padding:8px 0; }
}
@media(max-width:640px) {
  body { font-size:16px; } .container { width:calc(100% - 36px); }
  h1 { font-size:32px; } h2 { font-size:25px; } h3 { font-size:19px; }
  .logo { font-size:19px; gap:8px; } .logo img { width:60px; height:60px; }
  .hero-copy { padding-top:24px; padding-bottom:30px; } .hero-actions .btn { flex:1 1 100%; }
  .overview { padding-top:40px; } .article-layout { padding-top:28px; }
  .footer-grid { grid-template-columns:1fr; gap:32px; } .footer-bottom { flex-direction:column; gap:12px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }
@media(scripting:none) and (max-width:820px) { .site-nav { display:flex; position:static; padding:12px 0; } .header-inner { flex-wrap:wrap; } .nav-toggle { display:none; } }