:root{--ink:#15181e;--blue:#0ea5e9;--orange:#ff8a1f;--paper:#f6f8fb}*{box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:Inter,"Noto Sans Thai",ui-sans-serif,system-ui,sans-serif}.header-2027{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(246,248,251,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(15,23,42,.08)}.header-2027 nav a,.header-2027>div>div:nth-child(2) a{padding:.7rem 1rem;border-radius:999px;font-size:.84rem;font-weight:800;color:#475569;transition:.25s}.header-2027>div>div:nth-child(2) a:hover{background:#f1f5f9;color:#0f172a}.spark-btn{position:relative;isolation:isolate;overflow:hidden;border-radius:13px;padding:.78rem 1rem;font-size:.82rem;font-weight:900;transition:.25s}.spark-btn:hover{transform:translateY(-2px)}.spark-btn:before{content:"";position:absolute;inset:-2px;z-index:-2;background:conic-gradient(from var(--angle),#0ea5e9,#f97316,#eab308,#0ea5e9);animation:borderTurn 2.8s linear infinite}.spark-btn:after{content:"";position:absolute;inset:2px;z-index:-1;border-radius:11px}.spark-login{color:#0f172a}.spark-login:after{background:#fff}.spark-register{color:#fff}.spark-register:after{background:linear-gradient(135deg,#0f4aa5,#0ea5e9)}.drawer-btn{width:42px;height:42px;border:1px solid #dbe2ea;border-radius:12px;background:#fff;font-size:1.2rem}.drawer-menu{display:none;padding:0 1rem 1rem;background:rgba(246,248,251,.98)}.drawer-menu.open{display:grid;gap:.4rem}.drawer-menu>a{padding:.8rem;border-bottom:1px solid #e2e8f0;font-weight:800}.hero-2027{position:relative;overflow:hidden;background:linear-gradient(180deg,#f8fafc 0%,#eef5fb 100%)}.noise{position:absolute;inset:0;opacity:.14;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}.line-art{position:absolute;border:1px solid rgba(14,165,233,.18);border-radius:50%;animation:drift 10s ease-in-out infinite}.line-one{width:520px;height:520px;left:-240px;top:90px}.line-two{width:320px;height:320px;right:-120px;bottom:70px;border-color:rgba(249,115,22,.2);animation-delay:-3s}.hero-copy{align-self:center;padding:5rem 0 3rem}.hero-label{display:inline-flex;align-items:center;gap:.6rem;font-size:.72rem;font-weight:900;letter-spacing:.18em;color:#64748b}.hero-label span{width:32px;height:2px;background:linear-gradient(90deg,var(--blue),var(--orange))}.hero-copy h1{margin-top:1.2rem;font-size:clamp(3.5rem,6.5vw,7.4rem);font-weight:950;line-height:.88;letter-spacing:-.06em;color:#111827}.hero-copy h1 em{font-style:normal;color:transparent;-webkit-text-stroke:1.5px #111827}.hero-copy>p{margin-top:2rem;max-width:620px;font-size:1.05rem;line-height:1.85;color:#64748b}.magnetic-cta,.outline-cta{display:inline-flex;align-items:center;gap:.75rem;border-radius:999px;padding:1rem 1.25rem;font-weight:900;transition:.3s}.magnetic-cta{position:relative;overflow:hidden;background:#111827;color:#fff;box-shadow:0 14px 35px rgba(15,23,42,.16)}.magnetic-cta:before{content:"";position:absolute;width:80px;height:80px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#ff8a1f);filter:blur(6px);right:-30px;top:-35px;opacity:.75;transition:.35s}.magnetic-cta:hover{transform:translateY(-3px) scale(1.02)}.magnetic-cta:hover:before{right:35%;top:-28px}.outline-cta{border:1px solid #cbd5e1;background:rgba(255,255,255,.6);color:#334155}.outline-cta:hover{background:#fff;transform:translateY(-3px)}.hero-tags{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:2.2rem}.hero-tags span{font-size:.7rem;font-weight:900;letter-spacing:.14em;padding:.58rem .78rem;border:1px solid #dbe2ea;border-radius:999px;background:rgba(255,255,255,.55)}.hero-media{position:relative;display:flex;align-items:center;justify-content:center}.image-window{position:relative;overflow:hidden;width:min(100%,690px);border-radius:36px 8px 36px 8px;box-shadow:0 40px 100px rgba(15,23,42,.18);background:#111827;padding:9px;transform:rotate(1.5deg)}.image-window img{width:100%;height:100%;min-height:520px;object-fit:cover;border-radius:28px 5px 28px 5px}.image-caption{position:absolute;left:30px;right:30px;bottom:28px;padding:1rem 1.15rem;border-radius:18px;background:rgba(255,255,255,.88);backdrop-filter:blur(16px);box-shadow:0 20px 50px rgba(15,23,42,.18)}.image-caption small{display:block;font-size:.66rem;font-weight:900;letter-spacing:.15em;color:#0284c7}.image-caption strong{display:block;margin-top:.3rem;font-size:1rem}.orbit-dot{position:absolute;border-radius:50%;filter:blur(.2px);animation:float 6s ease-in-out infinite}.dot-a{width:64px;height:64px;background:linear-gradient(135deg,#0ea5e9,#67e8f9);left:-8px;top:20%}.dot-b{width:38px;height:38px;background:linear-gradient(135deg,#fb923c,#fde047);right:2%;bottom:16%;animation-delay:-2s}.marquee{overflow:hidden;border-top:1px solid #dce5ec;border-bottom:1px solid #dce5ec;background:#fff;white-space:nowrap}.marquee div{display:inline-block;padding:1rem 0;font-size:.72rem;font-weight:900;letter-spacing:.18em;color:#64748b;animation:marquee 22s linear infinite}.story-section{background:#fff}.story-grid{display:grid;grid-template-columns:180px 1fr 1fr;gap:3rem;align-items:start}.story-index{font-size:.72rem;font-weight:900;letter-spacing:.14em;color:#94a3b8;padding-top:.7rem}.story-grid h2,.section-row h2,.feature-head h2,.faq-section h2{font-size:clamp(2.35rem,4.5vw,4.8rem);font-weight:950;line-height:1.05;letter-spacing:-.045em}.story-copy{font-size:1rem;line-height:1.95;color:#64748b}.story-copy p+p{margin-top:1.2rem}.games-section{background:#101318;color:white}.section-row{display:flex;align-items:flex-end;justify-content:space-between;gap:3rem}.section-row span,.feature-head p,.mini-label{font-size:.7rem;font-weight:900;letter-spacing:.18em;color:#38bdf8}.section-row p{max-width:430px;color:#94a3b8;line-height:1.8}.bento{display:grid;grid-template-columns:1.35fr .65fr .65fr;grid-template-rows:280px 280px;gap:18px}.bento-card{position:relative;overflow:hidden;border-radius:28px;padding:1.5rem}.bento-main{grid-row:1/3}.bento-main img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.bento-main:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.75))}.bento-overlay{position:absolute;z-index:2;left:1.6rem;right:1.6rem;bottom:1.5rem}.bento-overlay span,.bento-card>span{font-size:.68rem;font-weight:900;letter-spacing:.16em}.bento-overlay h3{margin-top:.45rem;font-size:1.7rem;font-weight:900}.card-blue{background:#0ea5e9}.card-white{background:#f8fafc;color:#0f172a}.card-orange{background:#fb923c;color:#1e293b}.bento-card h3{margin-top:.7rem;font-size:1.7rem;font-weight:950}.bento-card p{margin-top:.5rem;font-size:.9rem;line-height:1.7;opacity:.86}.bento-card>b{position:absolute;right:1.2rem;bottom:.8rem;font-size:4rem;line-height:1;opacity:.16}.features-section{background:#f6f8fb}.feature-head{display:flex;align-items:end;justify-content:space-between;gap:2rem}.feature-head p{padding-bottom:.7rem}.feature-list{margin-top:3rem;border-top:1px solid #cfd7df}.feature-line{display:grid;grid-template-columns:70px .8fr 1.2fr;gap:2rem;align-items:center;padding:1.7rem 0;border-bottom:1px solid #cfd7df}.feature-line span{font-size:.75rem;font-weight:900;color:#94a3b8}.feature-line h3{font-size:1.2rem;font-weight:900}.feature-line p{color:#64748b;line-height:1.7}.quote-band{background:linear-gradient(135deg,#0ea5e9 0%,#0f172a 55%,#f97316 100%)}.quote-card{position:relative;max-width:980px;color:#fff}.quote-card>span{position:absolute;left:-.12em;top:-.35em;font-size:10rem;line-height:1;opacity:.14}.quote-card h2{position:relative;font-size:clamp(2rem,4vw,4rem);font-weight:950;line-height:1.1;letter-spacing:-.04em}.quote-card a{display:inline-flex;gap:.8rem;margin-top:2rem;font-weight:900}.faq-section{background:#fff}.faq-list{border-top:1px solid #dbe2ea}.faq-item{border-bottom:1px solid #dbe2ea}.faq-item button{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.35rem 0;text-align:left;font-size:1rem;font-weight:900}.faq-item button span{font-size:1.5rem;transition:.25s}.faq-item.open button span{transform:rotate(45deg)}.faq-answer{display:grid;grid-template-rows:0fr;overflow:hidden;color:#64748b;line-height:1.75;transition:grid-template-rows .3s,padding .3s}.faq-item.open .faq-answer{grid-template-rows:1fr;padding:0 0 1.3rem}.footer-2027{background:#0c1016;color:white}.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:2rem;border-bottom:1px solid rgba(255,255,255,.1)}.footer-top p{font-size:.78rem;letter-spacing:.14em;color:#94a3b8}.footer-grid{display:grid;grid-template-columns:.7fr .7fr 1.6fr;gap:3rem;padding:2.5rem 0}.footer-grid h3{font-weight:900;margin-bottom:.9rem}.footer-grid a:not(.magnetic-cta){display:block;color:#94a3b8;margin:.5rem 0;font-size:.9rem}.footer-cta{justify-self:end}.footer-cta p{margin-bottom:1rem;color:#cbd5e1}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:1.3rem;color:#64748b;font-size:.78rem}.reveal{opacity:0;transform:translateY(22px);transition:.75s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:none}@property --angle{syntax:"<angle>";initial-value:0deg;inherits:false}@keyframes borderTurn{to{--angle:360deg}}@keyframes float{50%{transform:translateY(-18px) scale(1.08)}}@keyframes drift{50%{transform:translate3d(16px,-18px,0) rotate(8deg)}}@keyframes marquee{to{transform:translateX(-50%)}}@media(max-width:1023px){.hero-copy{padding-top:2rem}.hero-media{padding-bottom:2rem}.image-window img{min-height:400px}.story-grid{grid-template-columns:1fr}.story-index{padding:0}.section-row,.feature-head{display:block}.section-row p{margin-top:1.5rem}.bento{grid-template-columns:1fr 1fr;grid-template-rows:auto}.bento-main{grid-column:1/3;grid-row:auto;min-height:460px}.feature-line{grid-template-columns:50px 1fr}.feature-line p{grid-column:2}.footer-grid{grid-template-columns:1fr 1fr}.footer-cta{justify-self:start;grid-column:1/3}}@media(max-width:640px){.hero-copy h1{font-size:3.55rem}.image-window{border-radius:26px 7px}.image-window img{min-height:300px}.image-caption{left:18px;right:18px;bottom:18px}.bento{grid-template-columns:1fr}.bento-main{grid-column:auto;min-height:350px}.bento-card{min-height:240px}.feature-line{grid-template-columns:1fr;gap:.6rem}.feature-line p{grid-column:auto}.footer-top{display:block}.footer-top p{margin-top:1rem}.footer-grid{grid-template-columns:1fr}.footer-cta{grid-column:auto}.story-grid h2,.section-row h2,.feature-head h2,.faq-section h2{font-size:2.6rem}}

/* Full light theme overrides */
.games-section{background:#f4f8fc;color:#111827}
.section-row p{color:#64748b}
.bento-main{box-shadow:0 24px 60px rgba(15,23,42,.12)}
.card-blue{background:linear-gradient(145deg,#e0f2fe,#f0f9ff);color:#0f172a;border:1px solid #bae6fd}
.card-orange{background:linear-gradient(145deg,#fff7ed,#ffedd5);color:#0f172a;border:1px solid #fed7aa}
.card-white{background:#fff;border:1px solid #e2e8f0}
.quote-band{background:linear-gradient(135deg,#e0f2fe 0%,#ffffff 48%,#fff7ed 100%);border-top:1px solid #e2e8f0;border-bottom:1px solid #e2e8f0}
.quote-card{color:#111827}
.quote-card>span{color:#0ea5e9;opacity:.12}
.footer-2027{background:#f8fafc;color:#0f172a;border-top:1px solid #e2e8f0}
.footer-top{border-bottom:1px solid #e2e8f0}.footer-top p{color:#64748b}
.footer-grid a:not(.magnetic-cta){color:#64748b}.footer-cta p{color:#475569}
.footer-bottom{border-top:1px solid #e2e8f0;color:#94a3b8}


/* Hero title size adjustment for 2027 project */
.hero-copy h1{font-size:clamp(2.9rem,5.2vw,5.8rem);line-height:.94;max-width:10.5ch}
@media(max-width:640px){.hero-copy h1{font-size:clamp(2.5rem,9vw,3.25rem);line-height:.95;max-width:11ch}}


/* Mobile off-canvas drawer only */
@media(max-width:1023px){
  .drawer-menu{display:grid!important;position:fixed;top:0;right:0;bottom:0;width:min(86vw,340px);height:100dvh;padding:88px 18px 24px;background:rgba(246,248,251,.99);box-shadow:-18px 0 50px rgba(15,23,42,.18);z-index:70;transform:translateX(105%);transition:transform .3s ease;overflow-y:auto;gap:.45rem}
  .drawer-menu.open{transform:translateX(0)}
  .drawer-menu>a{padding:.9rem .7rem;border-bottom:1px solid #e2e8f0}
  body.drawer-open{overflow:hidden}
}
@media(min-width:1024px){.drawer-menu{display:none!important}}

/* Responsive containment: allow grid content to shrink and keep table scrolling local. */
.content-grid > *, .subsections > *, .section-title > *, .footer-grid > *,
.hero-2026 .grid > *, .hero-2027 .grid > * { min-width: 0; }
.content-body, .rich-copy, .table-wrap { min-width: 0; max-width: 100%; }
.content-container h2, .content-container h3, .footer-copy-wide { overflow-wrap: anywhere; }
@media (max-width: 1023px) {
  html { overflow-x: clip; }
  /* A closed drawer must not enlarge the page or remain keyboard-focusable. */
  #mobileMenu { visibility: hidden; transition: transform .3s ease, visibility .3s; }
  #mobileMenu.open { visibility: visible; }
}

/* Mobile navigation refresh; desktop and page content retain their existing styles. */
.drawer-backdrop { display: none; }
@media (max-width: 1023px) {
  .mobile-topbar { gap: 8px; }
  .mobile-brand { flex: 0 1 auto; min-width: 0; }
  .mobile-brand img { width: clamp(74px, 22vw, 122px); height: auto; }
  header .mobile-actions { display: flex !important; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0; }
  header .mobile-actions > a { display: inline-flex !important; align-items: center; justify-content: center; padding: 10px 9px; font-size: 12px; line-height: 1.4; white-space: nowrap; border-radius: 12px; }
  header #menuBtn { display: grid; place-content: center; flex: 0 0 38px; width: 38px; height: 38px; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 80; border: 0; background: rgba(15,23,42,.38); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
  body.drawer-open .drawer-backdrop { opacity: 1; visibility: visible; }
  #mobileMenu { z-index: 90; display: flex !important; flex-direction: column; gap: 8px; width: min(88vw, 340px); max-width: 100%; height: 100vh; height: 100dvh; padding: max(22px, env(safe-area-inset-top)) 18px max(22px, env(safe-area-inset-bottom)); background: #fff; border-radius: 24px 0 0 24px; box-shadow: -12px 0 48px rgba(15,23,42,.16); overscroll-behavior: contain; }
  .drawer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; margin-bottom: 16px; padding-bottom: 20px; border-bottom: 1px solid #e8eef5; }
  .drawer-heading img { width: 100px; height: auto; }
  .drawer-close { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid #e2e8f0; border-radius: 12px; color: #475569; background: #f8fafc; font-size: 25px; line-height: 1; cursor: pointer; }
  .drawer-caption { margin: 0 12px 6px; font-size: 10px; font-weight: 800; letter-spacing: .16em; color: #94a3b8; }
  #mobileMenu > a { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; min-height: 48px; padding: 13px 15px; border: 1px solid #edf2f7; border-radius: 14px; background: #f8fafc; color: #334155; font-size: 14px; font-weight: 700; line-height: 1.4; transition: background .2s, border-color .2s, color .2s; }
  #mobileMenu > a::after { content: '›'; color: #94a3b8; font-size: 22px; font-weight: 400; line-height: 1; }
  #mobileMenu > a:hover, #mobileMenu > a:focus-visible { background: #eff8ff; border-color: #bae6fd; color: #0284c7; }
  #mobileMenu > .grid { flex: 0 0 auto; margin-top: auto; padding-top: 24px; gap: 10px; }
  #mobileMenu > .grid > a { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 12px 8px; font-size: 12px; line-height: 1.5; text-align: center; }
  #mobileMenu :focus-visible, header #menuBtn:focus-visible { outline: 2px solid #0284c7; outline-offset: 3px; }
}
@media (max-width: 359px) {
  header .mobile-actions { gap: 4px; }
  header .mobile-actions > a { padding: 10px 7px; font-size: 11px; }
  .mobile-topbar { gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  #mobileMenu, .drawer-backdrop { transition: none !important; }
}

/* FAQ only: accessible accordion motion and shared responsive foundations. */
.faq-refresh .faq-layout { min-width: 0; }
.faq-refresh .faq-intro { min-width: 0; }
.faq-refresh .faq-intro .section-title { margin-bottom: 20px; }
.faq-refresh .faq-intro .rich-copy { margin-top: 20px; }
.faq-refresh .faq-list-new { display: grid; gap: 12px; min-width: 0; }
.faq-refresh .faq-entry { min-width: 0; overflow: hidden; }
.faq-refresh .faq-entry h3 { margin: 0; }
.faq-refresh .faq-toggle { width: 100%; display: flex; align-items: center; gap: 16px; padding: 23px 24px; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; font-size: 16px; font-weight: 750; line-height: 1.55; color: #1e293b; }
.faq-refresh .faq-question { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.faq-refresh .faq-symbol { position: relative; display: block; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%; transition: background .3s, transform .3s; }
.faq-refresh .faq-symbol::before, .faq-refresh .faq-symbol::after { content: ''; position: absolute; top: 14px; left: 9px; width: 12px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .3s; }
.faq-refresh .faq-symbol::after { transform: rotate(90deg); }
.faq-refresh .faq-entry.is-open .faq-symbol::after { transform: rotate(0); }
.faq-refresh .faq-panel { display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden; transition: grid-template-rows .34s cubic-bezier(.2,.7,.2,1), opacity .24s ease, visibility .34s; }
.faq-refresh .faq-panel-inner { min-height: 0; overflow: hidden; }
.faq-refresh .faq-answer-copy { padding: 0 24px 24px; color: #64748b; font-size: 15px; line-height: 1.85; overflow-wrap: anywhere; }
.faq-refresh .faq-entry.is-open .faq-panel { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
.faq-refresh .faq-toggle:focus-visible { outline: 2px solid #0284c7; outline-offset: -4px; border-radius: 14px; }
@media (max-width: 640px) {
 .faq-refresh .faq-toggle { padding: 19px 17px; gap: 12px; font-size: 15px; }
 .faq-refresh .faq-answer-copy { padding: 0 17px 20px; font-size: 14px; }
 .faq-refresh .faq-intro .section-title h2 { font-size: clamp(1.75rem,7vw,2.4rem); }
}
@media (prefers-reduced-motion: reduce) {
 .faq-refresh .faq-panel, .faq-refresh .faq-symbol, .faq-refresh .faq-symbol::after { transition: none; }
}

/* 2027: centered heading and numbered rows in one warm, minimal panel. */
.faq-2027 { background: #fff !important; }
.faq-2027 .faq-intro { max-width: 730px; margin: 0 auto 36px; text-align: center; }
.faq-2027 .section-title { display: block; }
.faq-2027 .section-title span { margin: 0 auto 20px; border-radius: 50%; background: #fff1e3; color: #c56913; }
.faq-2027 .section-title h2 { font-size: clamp(1.9rem,3.7vw,3rem); letter-spacing: -.035em; line-height: 1.18; }
.faq-2027 .faq-list-new { gap: 0; max-width: 980px; margin: 0 auto; padding: 8px 28px; border: 1px solid #e5e7eb; border-radius: 26px; background: #fff; box-shadow: 0 18px 60px rgba(15,23,42,.045); }
.faq-2027 .faq-entry { border-bottom: 1px solid #edf0f3; }
.faq-2027 .faq-entry:last-child { border-bottom: 0; }
.faq-2027 .faq-toggle { padding: 24px 4px; gap: 20px; }
.faq-2027 .faq-number { flex: 0 0 28px; align-self: flex-start; padding-top: 3px; font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #94a3b8; transition: color .3s; }
.faq-2027 .faq-symbol { border: 1px solid #e2e8f0; color: #64748b; }
.faq-2027 .is-open .faq-number { color: #d97706; }
.faq-2027 .is-open .faq-symbol { color: #c56913; background: #fff1e3; border-color: #fed7aa; transform: rotate(180deg); }
.faq-2027 .faq-toggle:hover { color: #b45309; }
.faq-2027 .faq-answer-copy { padding: 0 48px 26px 52px; }
@media (max-width: 640px) {
 .faq-2027 .faq-list-new { padding: 3px 15px; border-radius: 20px; }
 .faq-2027 .faq-toggle { gap: 10px; padding: 20px 0; }
 .faq-2027 .faq-number { flex-basis: 23px; }
 .faq-2027 .faq-answer-copy { padding: 0 3px 22px 33px; }
}

/* Footer copy uses the full row; no unused side columns. */
.footer-2027 .footer-grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
.footer-2027 .footer-copy-wide { width: 100%; max-width: none; min-width: 0; }