:root{--bg:#fff7ee;--ink:#241a17;--text-secondary:#5a4a42;--text-on-dark-1:#c9bdb6;--text-on-dark-2:#8c7e77;--chip-bg:#fff1e0;--coral:#ff5a4d;--yellow:#ffc93c;--teal:#2fbf9a;--purple:#7c5cff;--pink:#ff7dae;--font-display:"Mitr", sans-serif;--font-body:"IBM Plex Sans Thai", sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);margin:0}#root{min-height:100vh;overflow-x:hidden}h1,h2,h3,p{margin:0}button{font-family:inherit}@keyframes floaty{0%,to{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-14px) rotate(var(--r,0deg))}}@keyframes pop{0%{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}.page{background:var(--bg);min-height:100vh;color:var(--ink);font-family:var(--font-body)}.load-state{text-align:center;max-width:1180px;color:var(--text-secondary);margin:0 auto;padding:80px 24px;font-size:18px}.load-state--error{color:var(--coral)}.header{z-index:50;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:2px solid var(--ink);background:#fff7eed1;position:sticky;top:0}.header__inner{justify-content:space-between;align-items:center;gap:16px;max-width:1180px;margin:0 auto;padding:16px 24px;display:flex}.header__brand{align-items:center;gap:12px;display:flex}.header__logo{background:var(--coral);border:2px solid var(--ink);width:40px;height:40px;font-family:var(--font-display);color:#fff;box-shadow:3px 3px 0 var(--ink);border-radius:12px;justify-content:center;align-items:center;font-size:22px;font-weight:700;display:flex}.header__title{font-family:var(--font-display);letter-spacing:.2px;white-space:nowrap;font-size:20px;font-weight:600}.header__nav{align-items:center;gap:26px;font-size:15px;font-weight:500;display:flex}.header__link{color:var(--ink);white-space:nowrap;text-decoration:none}.header__cta{background:var(--ink);color:var(--bg);font-family:var(--font-display);white-space:nowrap;border-radius:999px;align-items:center;gap:8px;padding:10px 18px;font-weight:500;text-decoration:none;display:inline-flex}@media (width<=640px){.header__inner{gap:10px;padding:12px 16px}.header__logo{border-radius:10px;width:34px;height:34px;font-size:18px}.header__title{font-size:16px}.header__nav{gap:12px}.header__link{display:none}.header__cta{padding:8px 14px;font-size:14px}}.hero{max-width:1180px;margin:0 auto;padding:72px 24px 40px;position:relative}.hero__dot{border:2px solid var(--ink);animation:5s ease-in-out infinite floaty;position:absolute}.hero__dot--1{background:var(--yellow);--r:0deg;border-radius:50%;width:26px;height:26px;animation-duration:5s;top:60px;left:6%}.hero__dot--2{background:var(--teal);--r:12deg;border-radius:10px;width:34px;height:34px;animation-duration:6s;animation-delay:.6s;top:140px;right:10%;transform:rotate(12deg)}.hero__dot--3{background:var(--purple);border-radius:50%;width:20px;height:20px;animation-duration:4.5s;animation-delay:.3s;bottom:20px;left:16%}.hero__dot--4{background:var(--pink);border-radius:50%;width:16px;height:16px;animation-duration:5.5s;animation-delay:.9s;top:210px;left:44%}.hero__content{max-width:760px}.hero__badge{background:var(--yellow);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink);border-radius:999px;padding:6px 16px;font-size:14px;font-weight:600;display:inline-block}.hero__title{font-family:var(--font-display);letter-spacing:-.5px;margin:22px 0 0;font-size:clamp(38px,6vw,68px);font-weight:700;line-height:1.05}.hero__title-accent{color:var(--coral)}.hero__desc{color:var(--text-secondary);max-width:560px;margin:20px 0 0;font-size:clamp(16px,2vw,20px);line-height:1.6}.hero__actions{flex-wrap:wrap;gap:14px;margin-top:32px;display:flex}.btn{border:2px solid var(--ink);font-family:var(--font-display);box-shadow:4px 4px 0 var(--ink);cursor:pointer;border-radius:999px;align-items:center;gap:8px;padding:14px 26px;font-size:17px;font-weight:500;text-decoration:none;transition:transform .12s,box-shadow .12s;display:inline-flex}.btn:hover{box-shadow:2px 2px 0 var(--ink);transform:translate(2px,2px)}.btn--primary{background:var(--coral);color:#fff}.btn--secondary{color:var(--ink);background:#fff}.featured{max-width:1180px;margin:0 auto;padding:8px 24px}.featured__inner{background:var(--ink);color:var(--bg);border-radius:24px;flex-wrap:wrap;align-items:center;gap:20px;padding:22px 26px;animation:.25s ease-out pop;display:flex;box-shadow:6px 6px #241a1740}.featured__label{letter-spacing:1px;color:var(--yellow);text-transform:uppercase;font-size:13px;font-weight:600}.featured__link{min-width:240px;color:inherit;flex:1;align-items:center;gap:20px;text-decoration:none;display:flex}.featured__icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:46px;height:46px;font-size:24px;display:flex}.featured__info{flex:1;min-width:180px}.featured__name{font-family:var(--font-display);font-size:22px;font-weight:600}.featured__blurb{color:var(--text-on-dark-1);font-size:14px}.featured__play{font-family:var(--font-display);color:var(--yellow);white-space:nowrap;font-size:14px;font-weight:600}a.featured__link:hover .featured__play{text-decoration:underline}.featured__btn{background:var(--coral);color:#fff;font-family:var(--font-display);cursor:pointer;border:none;border-radius:999px;padding:12px 22px;font-size:15px;font-weight:500}.games-section{max-width:1180px;margin:0 auto;padding:40px 24px 20px}.games-section__head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:16px;margin-bottom:20px;display:flex}.games-section__title{font-family:var(--font-display);font-size:clamp(26px,4vw,38px);font-weight:600}.games-section__count{color:var(--text-secondary);font-size:15px}.filter-bar{flex-wrap:wrap;gap:10px;margin-bottom:30px;display:flex}.filter-btn{font-family:var(--font-display);cursor:pointer;border:2px solid var(--ink);color:var(--ink);box-shadow:2px 2px 0 var(--ink);background:#fff;border-radius:999px;padding:9px 18px;font-size:15px;font-weight:500;transition:all .12s}.filter-btn--active{background:var(--ink);color:var(--bg);box-shadow:3px 3px 0 var(--coral)}.games-grid{grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:22px;display:grid}.game-card{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);background:#fff;border-radius:20px;flex-direction:column;display:flex;overflow:hidden}.game-card--link{color:inherit;cursor:pointer;text-decoration:none;transition:transform .12s,box-shadow .12s}.game-card--link:hover{box-shadow:7px 7px 0 var(--ink);transform:translate(-2px,-2px)}.game-card--soon{filter:saturate(.7)}.game-card--soon .game-card__name,.game-card--soon .game-card__blurb{opacity:.8}.game-card__soon-ribbon{background:var(--ink);width:160px;color:var(--bg);text-align:center;font-family:var(--font-display);padding:4px 0;font-size:13px;font-weight:600;position:absolute;top:16px;left:-42px;transform:rotate(-40deg);box-shadow:0 2px #241a1759}.game-card__top{border-bottom:2px solid var(--ink);justify-content:center;align-items:center;height:120px;display:flex;position:relative}.game-card__icon{filter:drop-shadow(2px 2px #241a1740);font-size:56px;line-height:1}.game-card__badge{background:var(--bg);border:2px solid var(--ink);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:600;position:absolute;top:12px;right:12px}.game-card__badge--ready{background:var(--teal);color:#fff}.game-card__body{flex-direction:column;flex:1;padding:18px 18px 20px;display:flex}.game-card__name{font-family:var(--font-display);margin:0 0 6px;font-size:20px;font-weight:600}.game-card__blurb{color:var(--text-secondary);flex:1;margin:0 0 16px;font-size:14px;line-height:1.55}.game-card__chips{flex-wrap:wrap;gap:8px;display:flex}.chip{background:var(--chip-bg);border:1.5px solid var(--ink);border-radius:8px;align-items:center;gap:5px;padding:5px 10px;font-size:12.5px;font-weight:500;display:inline-flex}.how-section{max-width:1180px;margin:0 auto;padding:56px 24px}.how-section__title{font-family:var(--font-display);text-align:center;margin:0 0 28px;font-size:clamp(26px,4vw,38px);font-weight:600}.how-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;display:grid}.how-card{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);border-radius:20px;padding:26px 24px}.how-card__num{background:var(--ink);width:44px;height:44px;color:var(--bg);font-family:var(--font-display);border-radius:12px;justify-content:center;align-items:center;margin-bottom:16px;font-size:22px;font-weight:700;display:flex}.how-card__title{font-family:var(--font-display);margin:0 0 8px;font-size:20px;font-weight:600}.how-card__desc{color:#3a2e29;margin:0;font-size:14.5px;line-height:1.6}.footer{background:var(--ink);color:var(--bg);margin-top:20px}.footer__inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;max-width:1180px;margin:0 auto;padding:48px 24px;display:flex}.footer__heading{font-family:var(--font-display);font-size:26px;font-weight:600}.footer__sub{color:var(--text-on-dark-1);margin-top:6px;font-size:15px}.footer__cta{background:var(--yellow);color:var(--ink);border:2px solid var(--yellow);font-family:var(--font-display);border-radius:999px;padding:14px 28px;font-size:16px;font-weight:600;text-decoration:none}.footer__bottom{text-align:center;color:var(--text-on-dark-2);border-top:1px solid #3a2e29;padding:18px 24px;font-size:13px}