html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:#0c0f12;background-image:radial-gradient(900px 500px at 85% -10%,rgba(245,109,42,.16),transparent 60%),radial-gradient(700px 420px at -5% 25%,rgba(34,191,224,.10),transparent 60%);background-attachment:fixed}
::selection{background:rgba(245,109,42,.4);color:#fff}
.i8-grid-bg{background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px}

/* แถบเมนู */
.i8-bar{background:rgba(12,15,18,.84);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.i8-bar::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(245,109,42,.7),rgba(90,217,245,.55),transparent)}
.i8-link{position:relative;padding:.5rem .8rem;color:#c9d2db;transition:color .2s}
.i8-link::after{content:"";position:absolute;left:.8rem;right:.8rem;bottom:.15rem;height:2px;border-radius:2px;background:linear-gradient(90deg,#f56d2a,#5ad9f5);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.i8-link:hover{color:#fff}
.i8-link:hover::after,.i8-link[aria-current=page]::after{transform:scaleX(1)}
.i8-link[aria-current=page]{color:#ffb48a}
.i8-menu{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}
.i8-menu.is-open{grid-template-rows:1fr}
.i8-menu>div{overflow:hidden}
.i8-burger span{display:block;width:20px;height:2px;border-radius:2px;background:#ffd6bd;transition:transform .25s,opacity .2s}
.i8-burger span+span{margin-top:5px}
.i8-burger[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.i8-burger[aria-expanded=true] span:nth-child(2){opacity:0}
.i8-burger[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ปุ่ม */
.i8-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:"Chakra Petch",sans-serif;font-weight:700;color:#1a0b03;background:linear-gradient(135deg,#ffb48a,#f56d2a 55%,#d9531a);border-radius:12px;padding:.8rem 1.4rem;box-shadow:0 10px 30px -10px rgba(245,109,42,.75),inset 0 1px 0 rgba(255,255,255,.4);transition:transform .2s,box-shadow .2s}
.i8-btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -10px rgba(245,109,42,.9),inset 0 1px 0 rgba(255,255,255,.4)}
.i8-btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:"Chakra Petch",sans-serif;font-weight:600;color:#cdf7ff;border:1px solid rgba(90,217,245,.45);border-radius:12px;padding:.8rem 1.4rem;background:rgba(34,191,224,.06);transition:background .2s,border-color .2s}
.i8-btn-ghost:hover{background:rgba(34,191,224,.14);border-color:rgba(90,217,245,.8)}

/* การ์ดกระจก + ขอบเรืองแสง + การ์ดทึบ */
.i8-glass{position:relative;background:linear-gradient(160deg,rgba(255,255,255,.065),rgba(255,255,255,.015));border:1px solid rgba(255,255,255,.09);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:20px}
.i8-glow::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(245,109,42,.85),rgba(245,109,42,0) 40%,rgba(90,217,245,0) 60%,rgba(90,217,245,.7));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;z-index:2}
.i8-solid{background:#11151a;border:1px solid #222932;border-radius:18px;transition:border-color .25s,transform .25s}
.i8-solid:hover{border-color:rgba(245,109,42,.55);transform:translateY(-3px)}
.i8-chip{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;color:#9becff;background:rgba(34,191,224,.08);border:1px solid rgba(90,217,245,.3);border-radius:999px;padding:.3rem .8rem}
.i8-dot{width:7px;height:7px;border-radius:999px;background:#3ee68f;box-shadow:0 0 0 0 rgba(62,230,143,.7);animation:i8ping 2s infinite}
@keyframes i8ping{70%{box-shadow:0 0 0 8px rgba(62,230,143,0)}100%{box-shadow:0 0 0 0 rgba(62,230,143,0)}}
.i8-grad{background:linear-gradient(95deg,#ffd6bd,#ff8f52 45%,#5ad9f5);-webkit-background-clip:text;background-clip:text;color:transparent}
[data-filter][aria-pressed=true]{color:#1a0b03;background:#ff8f52;border-color:#ff8f52}

/* สไลด์ค่ายเกม */
.i8-prov{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.i8-prov-track{display:flex;gap:18px;width:max-content;margin:0;padding:10px 0 18px;list-style:none;animation:i8prov 52s linear infinite;animation-play-state:paused}
.i8-prov.is-on .i8-prov-track{animation-play-state:running}
.i8-prov.is-on:hover .i8-prov-track{animation-play-state:paused}
.i8-prov-track li{flex:none;border-radius:16px;overflow:hidden;background:#171c22;outline:1px solid rgba(90,217,245,.18);outline-offset:-1px;box-shadow:0 12px 26px -16px rgba(0,0,0,.9);transition:transform .25s,box-shadow .25s,outline-color .25s}
.i8-prov-track li:hover{transform:translateY(-4px) scale(1.02);outline-color:rgba(245,109,42,.7);box-shadow:0 18px 34px -14px rgba(245,109,42,.55)}
.i8-prov-track img{display:block;width:220px;height:141px}
@keyframes i8prov{to{transform:translateX(calc(-50% - 9px))}}
@media (max-width:640px){.i8-prov-track{gap:12px;animation-duration:36s}.i8-prov-track img{width:164px;height:105px}@keyframes i8prov{to{transform:translateX(calc(-50% - 6px))}}}
@media (prefers-reduced-motion:reduce){.i8-prov-track{animation-duration:120s}.i8-prov-track li{transition:none}}

/* บทความ */
.i8-prose{color:#c9d2db;line-height:1.95;font-size:1.05rem}
.i8-prose h2{font-family:"Chakra Petch",sans-serif;font-weight:700;color:#fff;font-size:1.5rem;line-height:1.35;margin:2.4rem 0 .9rem;padding-left:.9rem;border-left:4px solid #f56d2a}
.i8-prose h3{font-family:"Chakra Petch",sans-serif;font-weight:600;color:#ffd6bd;font-size:1.2rem;margin:1.8rem 0 .6rem}
.i8-prose p{margin:0 0 1.15rem}
.i8-prose ul{list-style:none;margin:0 0 1.2rem;padding-left:0}
.i8-prose ul li{position:relative;padding-left:1.4rem;margin:.45rem 0}
.i8-prose ul li::before{content:"";position:absolute;left:0;top:.75em;width:8px;height:8px;border-radius:2px;background:#5ad9f5;transform:rotate(45deg)}
.i8-prose ol{list-style:decimal;margin:0 0 1.2rem;padding-left:1.3rem}
.i8-prose ol li{margin:.45rem 0;padding-left:.3rem}
.i8-prose ol li::marker{color:#ff8f52;font-weight:700}
.i8-prose a{color:#9becff;text-decoration:underline;text-decoration-color:rgba(90,217,245,.45);text-underline-offset:3px}
.i8-prose a:hover{color:#fff}
.i8-prose strong{color:#fff}
.i8-prose blockquote{margin:1.6rem 0;padding:1rem 1.2rem;border-radius:14px;background:rgba(245,109,42,.08);border:1px solid rgba(245,109,42,.3);color:#ffd6bd}
.i8-prose table{width:100%;border-collapse:collapse;margin:1.2rem 0 1.6rem;font-size:.95rem}
.i8-prose th,.i8-prose td{border:1px solid #2e3742;padding:.65rem .8rem;text-align:left;vertical-align:top}
.i8-prose th{background:#171c22;color:#ffb48a;font-family:"Chakra Petch",sans-serif}

/* FAQ */
.i8-faq summary{list-style:none;cursor:pointer}
.i8-faq summary::-webkit-details-marker{display:none}
.i8-faq summary .i8-plus{transition:transform .25s}
.i8-faq[open] summary .i8-plus{transform:rotate(45deg)}

/* แอนิเมชันตอนเลื่อนเข้าจอ */
.i8-rise{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.i8-rise.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.i8-rise{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}

/* เมนูด้านล่าง (มือถือ/แท็บเล็ต) */
.i8-dock{position:fixed;left:0;right:0;bottom:0;z-index:45;display:grid;grid-template-columns:repeat(5,1fr);gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(9,11,14,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid rgba(255,255,255,.08);box-shadow:0 -10px 30px -12px rgba(0,0,0,.8)}
.i8-dock::before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(245,109,42,.7),rgba(90,217,245,.55),transparent)}
.i8-dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:12px;font-family:"Chakra Petch",sans-serif;font-size:11.5px;font-weight:600;color:#93a1ae;transition:color .2s,background .2s}
.i8-dock svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.i8-dock a:active{background:rgba(255,255,255,.06)}
.i8-dock a[aria-current=page]{color:#ffb48a;background:rgba(245,109,42,.1)}
.i8-dock .i8-dock-play{color:#1a0b03;background:linear-gradient(135deg,#ffb48a,#f56d2a 60%,#d9531a);box-shadow:0 6px 18px -6px rgba(245,109,42,.8),inset 0 1px 0 rgba(255,255,255,.4)}
.i8-dock .i8-dock-play svg{fill:currentColor;stroke:none}
@media (min-width:1024px){.i8-dock{display:none}}
@media (max-width:1023.98px){body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}}