/*
Theme Name: Roll88 Bet
Theme URI: https://roll88bet.cc/
Author: Roll88
Description: Thai-language Roll88 game lobby and editorial pages.
Version: 1.0.0
Requires PHP: 8.0
Text Domain: roll88
*/
:root{--bg:#100b25;--surface:#21173d;--surface2:#302052;--line:#574578;--text:#faf8ff;--muted:#cfc3e3;--green:#b786fa;--cyan:#72e0ce;--violet:#bd8bff;--gold:#ffd276}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.75 system-ui,"Noto Sans Thai",Tahoma,sans-serif}a{color:inherit;text-decoration:none}a:hover{color:var(--green)}button,input{font:inherit}button{cursor:pointer}img{max-width:100%;height:auto}figure{margin:0}.skip-link{position:absolute;left:-999px;top:0;z-index:20;background:#fff;color:#111;padding:8px}.skip-link:focus{left:10px}.layout{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;align-self:start;height:100vh;overflow:auto;background:#090e35;border-right:1px solid #283371;padding:28px 22px}.brand img{width:185px;height:auto;display:block}.sidebar nav{margin-top:42px;display:grid;gap:9px}.sidebar nav a{display:flex;align-items:center;gap:14px;padding:9px 12px;border-radius:5px;font-weight:700;font-size:15px}.sidebar nav a[aria-current=page],.sidebar nav a:hover{background:#1c285f;color:#fff}.nav-mark{width:28px;text-align:center;color:var(--green);font-size:22px}.sidebar-offer{border-top:1px solid var(--green);margin-top:28px;padding:20px 8px}.sidebar-offer strong{color:var(--green)}.sidebar-offer a{display:block;font-size:13px;padding:7px 0}.main-shell{min-width:0;background:linear-gradient(180deg,#0b1750 0,#0d2b66 650px,#080d2b 1180px,#080d2b 100%)}.topbar{min-height:70px;display:flex;align-items:center;justify-content:flex-end;gap:12px;padding:10px clamp(18px,4vw,55px);background:#071340}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:8px 22px;border:1px solid var(--green);border-radius:5px;background:var(--green);color:#092126;font-weight:800;line-height:1.2;text-align:center}.btn:hover{background:#82f25f;color:#082220}.btn-outline{background:transparent;color:#fff}.btn-outline:hover{background:#1b2c56;color:#fff}.mobile-head,.mobile-bottom{display:none}.container{width:min(1260px,calc(100% - 80px));margin-inline:auto}.hero{padding:18px 0 22px}.carousel{position:relative}.carousel-track{position:relative;overflow:hidden;border-radius:7px;background:#101952}.carousel-slide{display:none}.carousel-slide.is-active{display:block}.carousel-slide img{display:block;width:100%;height:auto;aspect-ratio:24/11;object-fit:contain}.carousel-controls{display:flex;align-items:center;justify-content:center;gap:7px;padding:18px 0}.carousel-controls button{width:11px;height:11px;border:0;border-radius:50%;padding:0;background:#dce9ff}.carousel-controls button[aria-current=true]{background:var(--green);transform:scale(1.15)}.carousel-arrow{position:absolute;z-index:2;top:45%;width:37px;height:37px;border:1px solid #c5d2ff99;border-radius:50%;background:#080e34b8;color:#fff;font-size:21px}.carousel-arrow.prev{left:12px}.carousel-arrow.next{right:12px}.section{padding:34px 0 42px}.section-band{background:#0a123a;border-block:1px solid #263766}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.section h2,.section h1{margin:0;color:var(--green);line-height:1.3}.section h2{font-size:27px}.section h3{margin:0 0 9px;color:var(--cyan);font-size:20px}.eyebrow{display:block;color:var(--gold);font-size:13px;font-weight:800}.section p{color:var(--muted);margin:10px 0 18px}.section-intro{max-width:850px}.category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.category-tile{display:block;position:relative;overflow:hidden;background:#162055;border:1px solid #314081;border-radius:6px}.category-tile img{display:block;width:100%;height:auto;aspect-ratio:151/213;object-fit:contain}.category-tile span{display:block;padding:9px 13px;text-align:center;font-weight:800;background:#0a133a}.game-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.game-card{display:block;overflow:hidden;background:#101944;border:1px solid #2e3e79;border-radius:6px}.game-card img{display:block;width:100%;height:auto;aspect-ratio:306/173;object-fit:contain}.game-card strong{display:block;padding:9px 12px;font-size:14px;line-height:1.4}.game-card:hover,.category-tile:hover{border-color:var(--green);color:#fff}.feature{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:36px}.feature img{width:100%;height:auto;display:block;border-radius:6px}.editorial{max-width:900px}.editorial h1{font-size:clamp(28px,3vw,42px);color:#f6dc7b}.editorial h2{font-size:25px;color:var(--green);margin:40px 0 14px}.editorial h3{font-size:19px;color:var(--cyan);margin:28px 0 10px}.editorial p,.editorial li{color:#d7def8;line-height:1.95}.editorial a:not(.btn){color:#8be8e4;text-decoration:underline;text-underline-offset:3px}.editorial img{display:block;height:auto;width:100%;max-width:850px;margin:24px auto;border-radius:5px}.editorial ul,.editorial ol{padding-left:25px}.lead{font-size:18px;color:#f7f9ff!important}.breadcrumbs{padding:20px 0 0;color:#9aabd5;font-size:13px}.breadcrumbs a{color:#b7c8f2}.page-hero{padding:30px 0 12px}.page-hero figure{max-width:900px;margin:24px 0}.page-hero img{display:block;width:100%;height:auto;border-radius:6px}.related{border-top:1px solid var(--line);margin-top:45px;padding-top:22px}.related a{display:inline-block;margin:0 14px 10px 0;color:var(--cyan)}.site-footer{background:#070b25;border-top:1px solid #28376d;padding:38px 0 105px;color:#aebbe1;font-size:14px}.footer-inner{display:flex;justify-content:space-between;gap:26px}.site-footer nav{display:flex;flex-wrap:wrap;gap:12px 20px}.site-footer p{max-width:700px}.cta-strip{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:20px 24px;background:#171c55;border-left:4px solid var(--green);margin:25px 0}.cta-strip p{margin:0;color:#fff}.not-found{min-height:55vh}
@media(max-width:1100px){.layout{grid-template-columns:205px minmax(0,1fr)}.sidebar{padding:22px 14px}.container{width:min(100% - 36px,1050px)}.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.category-grid{gap:10px}}
@media(max-width:760px){body{font-size:15px}.layout{display:block}.sidebar,.topbar{display:none}.mobile-head{display:flex;position:sticky;top:0;z-index:15;align-items:center;justify-content:space-between;gap:12px;background:#07102f;border-bottom:1px solid #354580;padding:9px 16px;min-height:59px}.mobile-head img{width:115px;display:block}.mobile-head button{border:1px solid #52609b;background:transparent;color:#fff;border-radius:4px;width:38px;height:38px;font-size:24px;line-height:1}.mobile-menu{display:none;position:fixed;inset:59px 0 0;z-index:14;overflow:auto;background:#081239;padding:14px 18px 100px}.mobile-menu.is-open{display:grid;align-content:start;gap:3px}.mobile-menu a{padding:11px 10px;border-bottom:1px solid #293970}.container{width:calc(100% - 28px)}.hero{padding:12px 0 4px}.carousel-slide img{aspect-ratio:24/11}.carousel-arrow{width:30px;height:30px;font-size:18px}.carousel-controls{padding:12px 0}.section{padding:24px 0 28px}.section h2{font-size:21px}.section-head{align-items:start}.category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}.category-tile span{font-size:11px;padding:7px 2px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.game-card strong{font-size:12px}.feature{display:block}.feature img{margin-top:20px}.editorial h1{font-size:28px}.editorial h2{font-size:22px}.editorial p{line-height:1.85}.cta-strip{display:block;padding:16px}.cta-strip .btn{margin-top:12px}.footer-inner{display:block}.site-footer{padding-bottom:100px}.mobile-bottom{position:fixed;z-index:13;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));background:#080f31;border-top:1px solid #34447a}.mobile-bottom .btn{min-height:41px}}
@media(max-width:380px){.category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-tile img{max-height:150px}.section-head{display:block}.section-head a{display:inline-block;margin-top:8px}}
.sidebar{background:#150e2d;border-right-color:#473361}.sidebar nav a[aria-current=page],.sidebar nav a:hover{background:#3c2864}.main-shell{background:linear-gradient(180deg,#24133d 0,#271449 650px,#130d2c 1180px,#130d2c 100%)}.topbar{background:#160d32}.btn{color:#1d1032}.btn:hover{background:#d4afff;color:#160c29}.btn-outline:hover{background:#3b285d;color:#fff}.carousel-track{background:#20133b}.carousel-arrow{background:#190d33cf}.section-band{background:#1b1136;border-block-color:#493364}.category-tile,.game-card{background:#281846;border-color:#654b82}.category-tile span{background:#1c1235}.editorial h1{color:#ffd276}.editorial p,.editorial li{color:#e3d9ef}.editorial a:not(.btn){color:#8fead7}.breadcrumbs{color:#c0afd7}.breadcrumbs a{color:#d2c0ec}.cta-strip{background:#302049}.site-footer{background:#120c25;border-top-color:#493363}.mobile-menu{background:#170d30}
.btn-outline{color:#fff}.btn-outline:hover{color:#fff}
@media(max-width:760px){.mobile-head{background:#160d30;border-bottom-color:#594476}.mobile-head button{border-color:#765c96}.mobile-menu a{border-bottom-color:#4a3769}.mobile-bottom{background:#160d30;border-top-color:#594476}}
@media(max-width:760px){
  .mobile-head{gap:6px;padding:9px 12px}
  .mobile-brand{flex:0 1 115px;min-width:76px}
  .mobile-head .mobile-brand img{display:block;width:100%;height:auto}
  .mobile-actions{display:flex;align-items:center;gap:5px;margin-left:auto;flex:none}
  .mobile-action{display:inline-flex;align-items:center;justify-content:center;min-height:34px;padding:5px 8px;border:1px solid #b48af0;border-radius:4px;background:#b48af0;color:#170c30;font-size:12px;font-weight:800;line-height:1.15;white-space:nowrap}
  .mobile-action:hover,.mobile-action:focus-visible{background:#d0afff;color:#170c30}
  .mobile-action-register{background:transparent;color:#fff}
  .mobile-action-register:hover,.mobile-action-register:focus-visible{background:#39265d;color:#fff}
  .mobile-head #menu-toggle{flex:none;margin-left:2px}
}
@media(max-width:360px){.mobile-head{padding-inline:8px;gap:4px}.mobile-actions{gap:4px}.mobile-action{font-size:11px;padding-inline:6px}.mobile-head #menu-toggle{width:34px;height:34px}}