*,:after,:before{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--gradient-page);background-attachment:fixed;color:var(--color-ink);font-family:var(--font-body);font-weight:var(--weight-body);font-size:var(--text-body);line-height:var(--leading-body);-webkit-font-smoothing:antialiased}html[lang=th] body{line-height:var(--leading-body-th);letter-spacing:var(--tracking-th)}html[lang=th] h1,html[lang=th] h2,html[lang=th] h3{font-weight:var(--th-display-weight);letter-spacing:var(--tracking-th)}html[lang=th] h1{line-height:var(--leading-display-th);font-size:calc(var(--text-h1) * var(--th-display-scale))}html[lang=th] h2,html[lang=th] h3{line-height:var(--leading-heading-th)}html[lang=th] .hero h1{font-size:calc(var(--text-display) * var(--th-display-scale))}html[lang=th] .label{font-size:var(--text-label-th)}h1,h2,h3{font-family:var(--font-display);margin:0}h1{font-size:var(--text-h1);line-height:var(--leading-display)}h1,h2{font-weight:var(--weight-black)}h2{font-size:var(--text-h2)}h2,h3{line-height:var(--leading-heading)}h3{font-size:var(--text-h3);font-weight:var(--weight-bold)}p{margin:0 0 var(--space-3)}a{color:var(--color-primary-500);text-decoration:none}a:hover{color:var(--color-primary-700);text-decoration:underline}img{max-width:100%}:focus-visible{outline:3px solid var(--color-primary-700);outline-offset:2px;border-radius:var(--radius-xs)}.skip{position:absolute;left:-9999px;top:var(--space-2);z-index:var(--z-fullscreen);background:var(--color-white);color:var(--color-primary-700);font-weight:var(--weight-bold);padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg)}.skip:focus{left:var(--space-4)}.wrap{width:100%;max-width:var(--content-outer);margin:0 auto;padding:0 var(--gutter)}body>footer,body>header,body>main{min-width:0;max-width:100%}main{display:block;flex:1 0 auto;padding-bottom:var(--space-16)}.stack>*+*{margin-top:var(--space-4)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}:root{--nav-block:96px}@media (min-width:768px){:root{--nav-block:104px}}.hdr{position:sticky;top:0;z-index:var(--z-sticky);justify-content:space-between;gap:var(--space-4);margin:var(--space-4) auto;padding:11px 14px;max-width:var(--content-outer);background:rgb(255 255 255/42%);border:1.5px solid rgb(255 255 255/70%);border-radius:var(--radius-3xl);box-shadow:var(--shadow-header)}.hdr,.hdr-end{display:flex;align-items:center}.hdr-end{gap:var(--space-2);flex:none}@supports not ((-webkit-backdrop-filter:blur(14px)) or (backdrop-filter:blur(14px))){.hdr{background:rgb(255 255 255/92%)}}@supports ((-webkit-backdrop-filter:blur(14px)) or (backdrop-filter:blur(14px))){.hdr{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}}.hdr nav.menu{display:none;align-items:center;gap:10px;flex:1 1 auto;min-width:0}.menu-side{display:flex;align-items:center;gap:inherit;flex:1 1;min-width:max-content}.menu-side-start{justify-content:flex-end}.menu-side-end{justify-content:flex-start}.hdr nav.menu:after{content:"";flex:0 1 var(--bar-balance,0px);min-width:0}.nav-chip,.nav-play{display:inline-flex;align-items:center;gap:9px;flex:none;min-height:var(--tap-min);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-body);line-height:1;white-space:nowrap;transition:transform var(--motion-hover) var(--ease-out)}html[lang=th] .nav-chip,html[lang=th] .nav-play{font-weight:var(--th-display-weight)}.nav-chip svg,.nav-play svg{width:21px;height:21px;flex:none}.nav-chip{padding:14px var(--space-5);border:2px solid var(--color-white);border-radius:var(--radius-xl);background:var(--color-white);color:var(--color-ink);box-shadow:var(--shadow-3d-ghost)}.nav-chip:hover{color:var(--color-ink);text-decoration:none;transform:translateY(-2px);background:var(--color-tint-purple);border-color:var(--color-tint-purple);box-shadow:var(--shadow-3d-ghost-hover)}.nav-chip:active{transform:translateY(var(--press-translate));box-shadow:var(--shadow-3d-ghost-pressed)}.nav-chip[aria-current=page]{background:var(--color-tint-purple);border-color:var(--color-primary-500);color:var(--color-primary-700)}.nav-play[aria-current=page]{box-shadow:inset 0 0 0 3px var(--color-ink),var(--shadow-3d-play-nav)}.nav-play{padding:16px 30px;margin:0 4px;border-radius:26px;background:linear-gradient(165deg,var(--color-play-200),var(--color-play-400));color:var(--color-ink);box-shadow:var(--shadow-3d-play-nav)}.nav-play span{letter-spacing:.6px}.nav-play svg{width:19px;height:19px}.nav-play:hover{color:var(--color-ink);text-decoration:none;transform:translateY(-2px);background:linear-gradient(165deg,var(--color-play-200),var(--color-play-300));box-shadow:var(--shadow-3d-play-nav-hover)}.nav-play:active{transform:translateY(var(--press-translate));box-shadow:var(--shadow-3d-play-nav-pressed)}.nav-chip:focus-visible,.nav-play:focus-visible{outline:none;box-shadow:var(--ring-focus)}@media (min-width:768px){.hdr nav.menu{display:flex}.hdr .nav-chip{display:none}.hdr{--bar-balance:102px}}@media (min-width:1024px) and (max-width:1279px){.hdr{--bar-balance:0px}}@media (min-width:1280px){.hdr .nav-chip{display:inline-flex;padding:14px 16px}.hdr nav.menu{gap:8px}.nav-play{padding:16px 26px}}.lang-desktop{display:none}@media (min-width:1024px) and (max-width:1279px){.lang-desktop{display:block}.drawer-panel .lang{display:none}}.drawer-panel .lang{border-top:1px solid var(--color-surface-2);margin-top:var(--space-2);padding-top:var(--space-2)}.lang{display:flex;gap:var(--space-1);flex:none}.lang-link{display:grid;place-items:center;min-width:var(--tap-min);min-height:var(--tap-min);padding:0 var(--space-2);border:2px solid var(--color-white);border-radius:var(--radius-pill);background:var(--color-white);box-shadow:var(--shadow-3d-ghost);color:var(--color-ink);font-weight:var(--weight-bold);font-size:var(--text-sm)}.lang-link[aria-current=true]{color:var(--color-primary-700);background:var(--color-tint-purple);border-color:var(--color-primary-500)}.mark{display:flex;align-items:center;gap:11px;flex:none;min-width:132px;max-width:216px;height:48px;color:var(--color-ink)}.mark:hover{text-decoration:none}.mark[aria-current=page] s{width:12px;height:12px;box-shadow:0 0 0 3px var(--color-tint-purple),0 0 0 5px var(--color-primary-500)}.mark i{position:relative;display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:var(--radius-pill);background:radial-gradient(circle at 34% 28%,var(--color-mascot-core),var(--color-mascot-mid) 62%,var(--color-mascot-deep));box-shadow:inset 0 -4px 8px rgb(0 0 0/16%),0 5px 12px rgb(74 86 216/40%)}.mark .mark-ring{position:absolute;width:88%;height:88%;color:var(--color-warn-300)}.mark i u{position:absolute;top:33.3%;width:14.6%;height:18.75%;border-radius:var(--radius-pill);background:var(--color-ink)}.mark i .eye-l{left:27%}.mark i .eye-r{right:27%}.mark b{font-family:var(--font-display);font-weight:var(--weight-black);font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.2}.mark s{width:8px;height:8px;flex:none;border-radius:var(--radius-pill);background:var(--color-pink-700)}.mark b{white-space:normal;overflow-wrap:normal;overflow:hidden;text-overflow:ellipsis}@media (max-width:767px){.hdr{gap:var(--space-2)}.mark{flex:0 0 auto;min-width:0;max-width:168px}.mark i{width:40px;height:40px}.mark b{font-size:var(--text-body-lg);min-width:0}}@media (max-width:389px){.mark b,.mark s{display:none}.mark i{width:40px;height:40px}.mark{min-width:var(--tap-min);justify-content:center}}.icon-btn{display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);flex:none;border:0;border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-primary-700);box-shadow:var(--shadow-rail);cursor:pointer;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-body)}.icon-btn.search{color:var(--color-primary-500)}.icon-btn.search svg{width:23px;height:23px}.icon-btn.search:hover{background:var(--color-tint-purple)}@media (min-width:768px){.icon-btn.search{width:54px;height:54px}}.drawer-toggle{width:var(--tap-min);height:var(--tap-min);flex:none}@media (min-width:768px){.drawer-link[data-onbar=play]{display:none}}@media (min-width:1280px){.drawer-link[data-onbar=chip]{display:none}}.drawer-toggle>summary{list-style:none;display:grid;place-items:center;width:var(--tap-min);height:var(--tap-min);border:2px solid var(--color-primary-500);border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-primary-700);box-shadow:var(--shadow-rail);cursor:pointer}.drawer-toggle>summary:hover,.drawer-toggle[open]>summary{background:var(--color-tint-purple)}.drawer-toggle>summary::-webkit-details-marker{display:none}.drawer-toggle{position:relative}.drawer-panel{position:absolute;inset-inline:auto 0;top:100%;z-index:1;width:max-content;min-width:232px;max-width:min(320px,calc(100vw - 2 * var(--gutter)));margin-top:var(--space-3);padding:var(--space-2);background:var(--color-white);border-radius:var(--radius-2xl);box-shadow:var(--shadow-soft);display:grid;gap:var(--space-1)}.drawer-panel a{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3);min-height:var(--tap-min);color:var(--color-ink);font-weight:var(--weight-bold);border-radius:var(--radius-md)}.drawer-link svg{width:21px;height:21px;flex:none;color:var(--color-primary-500)}.drawer-link[aria-current=page]{background:var(--color-tint-purple);color:var(--color-primary-700)}.drawer-link[aria-current=page] svg{color:var(--color-primary-700)}.drawer-toggle>summary svg{width:22px;height:22px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--tap-min);padding:0 var(--space-5);border:0;border-radius:var(--radius-lg);background:var(--color-play-300);box-shadow:var(--shadow-3d-play);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-body);line-height:1;cursor:pointer;text-align:center;transition:transform var(--motion-press) var(--ease-out),box-shadow var(--motion-press) var(--ease-out),background-color var(--motion-press) var(--ease-out)}.btn,.btn:hover{color:var(--color-ink)}.btn:hover{transform:translateY(-2px);background:var(--color-play-200);box-shadow:var(--shadow-3d-play-hover);text-decoration:none}.btn:active{transform:translateY(var(--press-translate));box-shadow:var(--shadow-3d-play-pressed)}.btn:focus-visible{outline:none;box-shadow:var(--shadow-3d-play),var(--ring-focus)}html[lang=th] .btn{font-weight:var(--th-display-weight)}.btn.big{border-radius:var(--radius-xl);font-size:var(--text-body-lg);min-height:56px}.btn.xl{border-radius:var(--radius-lg);min-height:58px;padding:0 30px;font-size:18px}.btn.warn{background:var(--color-warn-300);box-shadow:var(--shadow-3d-warn)}.btn.warn,.btn.warn:hover{color:var(--color-on-warn)}.btn.warn:hover{background:var(--color-warn-200);box-shadow:var(--shadow-3d-warn-hover)}.btn.warn:active{color:var(--color-on-warn);box-shadow:var(--shadow-3d-warn-pressed)}.btn.warn:focus-visible{box-shadow:var(--shadow-3d-warn),var(--ring-focus)}.btn.warn.xl{box-shadow:var(--shadow-3d-warn-hero)}.btn.warn.xl:hover{box-shadow:var(--shadow-3d-warn-hero-hover)}.btn.warn.xl:active{box-shadow:var(--shadow-3d-warn-hero-pressed)}.btn.warn.xl:focus-visible{box-shadow:var(--shadow-3d-warn-hero),var(--ring-focus)}.btn.ghost{background:var(--color-white);box-shadow:var(--shadow-3d-ghost)}.btn.ghost,.btn.ghost:hover{color:var(--color-primary-700)}.btn.ghost:hover{background:var(--color-tint-purple);box-shadow:var(--shadow-3d-ghost-hover)}.btn.ghost:active{color:var(--color-primary-700);box-shadow:var(--shadow-3d-ghost-pressed)}.btn.ghost:focus-visible{box-shadow:var(--shadow-3d-ghost),var(--ring-focus)}.btn svg{width:17px;height:17px;flex:none}.btn.block{width:100%}.btn:disabled,.btn[aria-disabled=true]{background:var(--color-disabled-bg);color:var(--color-disabled-fg);box-shadow:none;cursor:default;transform:none}.drawer-toggle>summary,.heart,.icon-btn,.lang-link,.promo .cta-chip,.rail-nav button{transition:transform var(--motion-press) var(--ease-out),box-shadow var(--motion-press) var(--ease-out),background-color var(--motion-press) var(--ease-out)}.drawer-toggle>summary,.heart,.icon-btn,.rail-nav button{box-shadow:var(--shadow-3d-ghost)}.drawer-toggle>summary:hover,.heart:hover,.icon-btn:hover,.lang-link:hover,.rail-nav button:hover{transform:translateY(-2px);background:var(--color-tint-purple);box-shadow:var(--shadow-3d-ghost-hover);text-decoration:none}.drawer-toggle>summary:active,.heart:active,.icon-btn:active,.lang-link:active,.rail-nav button:active{transform:translateY(var(--press-translate));box-shadow:var(--shadow-3d-ghost-pressed)}.heart:hover{background:var(--color-tint-pink)}.promo .cta-chip{box-shadow:var(--shadow-3d-ghost)}.promo:hover .cta-chip{transform:translateY(-2px);box-shadow:var(--shadow-3d-ghost-hover)}.promo:active .cta-chip{transform:translateY(var(--press-translate));box-shadow:var(--shadow-3d-ghost-pressed)}.badge{display:inline-block;padding:6px 10px;border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-primary-700);font-size:var(--text-label);font-weight:var(--weight-black);line-height:1.2}html[lang=th] .badge{font-size:var(--text-label-th)}.badge.new{background:var(--color-pink-700)}.badge.info,.badge.new{color:var(--color-white)}.badge.info{background:var(--color-blue-700)}.hero{position:relative;isolation:isolate;min-height:min(72vh,440px);display:flex;align-items:center;padding:var(--space-8) 0;margin-bottom:var(--space-8);background:var(--color-blue-400);color:var(--color-white);overflow:hidden}.hero .hero-shell{position:relative;z-index:2;width:100%;max-width:var(--content-outer);margin:0 auto;padding:0 var(--gutter)}.hero.under-nav{margin-top:calc(-1 * var(--nav-block));padding-top:calc(var(--space-8) + var(--nav-block))}@media (max-width:767px){.hero.under-nav{padding-top:calc(var(--space-5) + var(--nav-block))}}.hero .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}.hero .hero-scrim{position:absolute;inset:0;background:var(--gradient-hero-scrim);pointer-events:none}.hero .hero-bg{z-index:0;object-fit:cover;object-position:50% 100%;filter:saturate(1.14)}.hero .inner{position:relative;z-index:2;max-width:var(--hero-text-col)}.hero h1{font-size:var(--text-display);line-height:var(--leading-display);margin-bottom:var(--space-4);text-shadow:var(--text-shadow-display);text-wrap:balance}.hero p{font-size:var(--text-body-lg);font-weight:var(--weight-medium);max-width:42ch;text-wrap:pretty}@media (min-width:768px){.hero p{font-size:19px;font-weight:var(--weight-bold)}}.hero .cta{display:flex;flex-wrap:wrap;gap:var(--space-4);margin-top:var(--space-6)}.hero-badge{display:inline-flex;align-items:center;gap:var(--space-2);max-width:100%;min-height:var(--tap-min);padding:var(--space-1) var(--space-4) var(--space-1) var(--space-1);margin-bottom:var(--space-5);border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-primary-700);font-size:var(--text-sm);font-weight:var(--weight-black);transition:transform var(--motion-hover) var(--ease-out)}html[lang=th] .hero-badge{font-weight:var(--th-display-weight)}.hero-badge:hover{color:var(--color-primary-700);text-decoration:none;transform:translateY(var(--hover-lift))}.hero-badge .chip{flex:none;padding:6px 10px;border-radius:var(--radius-pill);background:var(--color-pink-700);color:var(--color-white);font-size:var(--text-label);letter-spacing:var(--tracking-overline);line-height:1.2}html[lang=th] .hero-badge .chip{font-size:var(--text-label-th);letter-spacing:var(--tracking-th)}.hero-badge .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width:767px){.hero{align-items:flex-end;min-height:min(78vh,520px);padding:var(--space-5) 0}.hero .hero-bg{object-position:86% 100%}.hero .hero-scrim{background:var(--gradient-hero-veil)}.hero .copy{background:var(--gradient-hero-scrim-flat);padding:var(--space-5);border-radius:var(--radius-md)}.hero .cta .btn{width:100%}}@media (min-width:768px){.hero{min-height:480px}}@media (min-width:1024px){.hero{min-height:540px}}@media (min-width:1440px){.hero{min-height:600px}}.sech{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3);margin:var(--space-10) 0 var(--space-4)}.sech.page{margin-top:var(--space-6)}.sech.page h1{position:relative;padding-bottom:var(--space-3)}.sech.page h1:after{content:"";position:absolute;left:0;bottom:0;width:64px;height:6px;border-radius:var(--radius-pill);background:var(--color-warn-300)}.sech p{color:var(--color-ink-soft);margin:var(--space-1) 0 0;font-size:var(--text-sm)}@media (max-width:767px){.sech{display:block}.sech a{display:inline-block;margin-top:var(--space-2)}}.pills{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:var(--space-2)}@media (min-width:1024px){.pills{flex-wrap:wrap;overflow:visible}}.pills.wrap{flex-wrap:wrap;overflow:visible}.pill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-2);flex:none;width:108px;min-height:110px;padding:var(--space-4) var(--space-2) var(--space-3);text-align:center;border:2.5px solid rgb(255 255 255/85%);border-radius:var(--radius-2xl);box-shadow:var(--shadow-pill);font-weight:var(--weight-bold);font-size:var(--text-sm);scroll-snap-align:start;transition:transform var(--motion-hover) var(--ease-out),box-shadow var(--motion-hover) var(--ease-out)}.pill,.pill:hover{color:var(--color-ink-soft)}.pill:hover{text-decoration:none;transform:translateY(var(--hover-lift))}@media (min-width:390px){.pill{width:116px;min-height:118px}}@media (min-width:768px){.pill{width:124px}}.pill em{display:grid;place-items:center;height:46px;font-size:38px;font-style:normal;line-height:1}@media (min-width:390px){.pill em{height:52px}}.pill span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pill.sel,.pill[aria-current=page]{background:var(--color-white);border-color:var(--color-primary-500);color:var(--color-primary-700);box-shadow:var(--shadow-pill-selected);transform:scale(1.06)}.catgrid{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));list-style:none;margin:0;padding:0}@media (min-width:768px){.catgrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}}@media (min-width:1024px){.catgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}.catgrid .pill{width:auto;min-height:132px}@media (min-width:768px){.catgrid .pill{min-height:148px}}.catgrid .pill b{display:block;color:var(--color-ink-soft);font-size:var(--text-sm);font-weight:var(--weight-medium)}.hero-float{position:absolute;z-index:3;top:var(--space-2);right:var(--gutter);background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);box-shadow:var(--shadow-rail);animation:obob var(--motion-float) ease-in-out infinite .6s}@media (min-width:768px){.hero-float{top:var(--space-10)}}.hero-float .label{display:block;color:var(--color-muted);font-size:var(--text-label);font-weight:var(--weight-bold);margin-bottom:var(--space-1)}html[lang=th] .hero-float .label{font-size:var(--text-label-th)}.hero-float strong{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:var(--text-h3);font-weight:var(--weight-black);color:var(--color-ink);line-height:1}.grid{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fill,minmax(var(--card-min,156px),1fr));list-style:none;margin:0;padding:0}@media (min-width:390px){.grid{--card-min:168px}}@media (min-width:768px){.grid{--card-min:200px}}.grid.wide{--card-min:260px}.card{position:relative;background:var(--color-white);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);padding:var(--space-3);transition:transform var(--motion-hover) var(--ease-out)}.card:hover{transform:translateY(var(--hover-lift))}.card:focus-within{outline:3px solid var(--color-primary-700);outline-offset:2px}.card .cover{position:relative;aspect-ratio:16/9;border-radius:var(--radius-lg);overflow:hidden;margin-bottom:var(--space-2)}.card .cover img{width:100%;height:100%;object-fit:cover;display:block}.card .cover .badge{position:absolute;top:var(--space-2);left:var(--space-2)}.card .cover .heart-slot{position:absolute;top:var(--space-1);right:var(--space-1);z-index:2}.card h3{display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(2 * 1.15em);word-break:normal;overflow-wrap:anywhere;line-break:strict;margin:0}html[lang=th] .card h3{min-height:calc(2 * 1.35em)}.card .title-link:after{content:"";position:absolute;inset:0;border-radius:var(--radius-xl)}.card .title-link{color:var(--color-ink)}.card .title-link:hover{text-decoration:none;color:var(--color-ink)}.card .rate{color:var(--color-muted);font-size:var(--text-sm);margin:var(--space-1) 0 var(--space-3)}.card .rate b{color:var(--color-star);font-weight:var(--weight-black)}.card .btn{position:relative;z-index:2;min-height:48px}.heart{width:var(--tap-min);height:var(--tap-min);display:grid;place-items:center;border:0;border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-pink-700);font-size:18px;line-height:1;cursor:pointer;box-shadow:var(--shadow-rail)}.rail-nav{display:flex;gap:var(--space-2)}.rail-nav button{width:var(--tap-min);height:var(--tap-min);border:0;border-radius:var(--radius-xs);background:var(--color-white);box-shadow:var(--shadow-rail);color:var(--color-primary-700);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-body-lg);line-height:1;cursor:pointer}.card .when{color:var(--color-muted);font-size:var(--text-sm);margin:var(--space-1) 0 var(--space-3)}.rail{display:flex;gap:var(--space-4);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:var(--space-1) 0 var(--space-4);list-style:none;margin:0}.rail>*{flex:none;width:200px;scroll-snap-align:start}@media (min-width:390px){.rail>*{width:210px}}@media (min-width:768px){.rail>*{width:230px}}@media (min-width:1024px){.rail>*{width:250px}}.promo{display:block;position:relative;isolation:isolate;padding:var(--promo-pad);border-radius:var(--radius-2xl);background:var(--gradient-community);color:var(--color-white);min-height:180px;box-shadow:var(--shadow-soft);transition:transform var(--motion-hover) var(--ease-out)}.promo-media{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit}.promo-bg{object-fit:cover;object-position:100% 50%}.promo-scrim{position:absolute;inset:0;background:var(--gradient-promo-scrim);pointer-events:none}.promo-copy{position:relative;z-index:1;display:block;max-width:var(--promo-text-col)}.promo:hover{transform:translateY(var(--hover-lift));color:var(--color-white);text-decoration:none}.promo.warm{background:var(--gradient-promo-warm)}.promo .badge{background:var(--color-white);color:var(--color-primary-700);margin-bottom:var(--space-3)}.promo.warm .badge{color:var(--color-pink-700)}.promo h3{font-size:var(--text-h2);font-weight:var(--weight-black);margin-bottom:var(--space-2);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.promo p{font-weight:var(--weight-medium);margin:0 0 var(--space-4)}.promo .cta-chip{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:0 var(--space-5);border-radius:var(--radius-sm);background:var(--color-white);color:var(--color-primary-700);font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--text-sm)}.promo.warm .cta-chip{color:var(--color-pink-700)}.explore{position:relative;isolation:isolate;overflow:hidden;margin-top:var(--space-10);padding:var(--space-8) var(--space-6);border-radius:var(--radius-4xl);background:var(--gradient-community);color:var(--color-white)}@media (min-width:768px){.explore{padding:var(--space-12) var(--space-10)}}.explore h2{font-size:clamp(1.75rem,1.1rem + 3vw,3rem);line-height:var(--leading-display);margin:var(--space-4) 0 var(--space-3);max-width:18ch}html[lang=th] .explore h2{line-height:var(--leading-display-th)}.explore p{font-weight:var(--weight-medium);font-size:var(--text-body-lg);max-width:46ch;margin-bottom:var(--space-6)}.explore .stars i{position:absolute;border-radius:var(--radius-pill);animation:otwinkle var(--motion-twinkle) ease-in-out infinite}.explore .stars i:first-child{top:12%;left:8%;width:7px;height:7px;background:var(--color-white)}.explore .stars i:nth-child(2){top:34%;left:22%;width:5px;height:5px;background:var(--color-warn-300);animation-delay:.5s}.explore .stars i:nth-child(3){bottom:18%;left:14%;width:9px;height:9px;background:var(--color-pink-400);animation-delay:1s}.explore .stars i:nth-child(4){top:22%;right:12%;width:6px;height:6px;background:var(--color-white);animation-delay:1.5s}.explore .stars:after{content:"";position:absolute;top:-90px;right:-40px;width:300px;height:300px;border-radius:var(--radius-pill);background:radial-gradient(circle at 35% 30%,var(--color-pink-400),var(--color-primary-700));opacity:.55;z-index:-1}.cols-2{display:grid;gap:var(--space-4);grid-template-columns:1fr}@media (min-width:768px){.cols-2{grid-template-columns:1fr 1fr}}.rate-pill{display:inline-flex;align-items:center;gap:var(--space-2);margin:var(--space-3) 0 var(--space-5);padding:var(--space-2) var(--space-4);border-radius:var(--radius-pill);background:var(--color-warn-100);color:var(--color-warn-ink);font-size:var(--text-sm);font-weight:var(--weight-bold)}.rate-pill b{color:var(--color-star);font-size:var(--text-body-lg);line-height:1}h1.game-title{position:relative;padding-bottom:var(--space-3)}h1.game-title:after{content:"";position:absolute;left:0;bottom:0;width:64px;height:6px;border-radius:var(--radius-pill);background:var(--color-warn-300)}.meta{display:grid;gap:var(--space-3);grid-template-columns:1fr;margin:var(--space-4) 0}@media (min-width:390px){.meta{grid-template-columns:1fr 1fr}}@media (min-width:768px){.meta{grid-template-columns:repeat(3,1fr)}}.meta div{background:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}.meta .label{display:block;color:var(--color-muted);font-size:var(--text-label);font-weight:var(--weight-bold);margin-bottom:var(--space-1)}.meta strong{font-size:var(--text-body-lg)}.shell{position:relative;aspect-ratio:3/4;contain:layout;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);padding:var(--space-4);border-radius:var(--radius-3xl);background:var(--color-play-shell);color:var(--color-white);overflow:hidden;text-align:center}@media (min-width:768px){.shell{aspect-ratio:16/9}}.shell .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45;filter:blur(2px)}.shell .front{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.shell .poster-card{width:clamp(120px,30vw,200px);height:auto;aspect-ratio:1;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-rail);background:var(--color-white)}.shell iframe{position:absolute;inset:0;width:100%;height:100%;border:0}.shell .muted-on-dark{color:var(--color-on-dark-muted);font-size:var(--text-sm);margin:0}.shell-bar{display:flex;flex-wrap:wrap;gap:var(--space-2);margin-top:var(--space-3)}.shell-bar button{min-width:48px;min-height:48px}.shell:fullscreen{aspect-ratio:auto;width:100%;height:100%;border-radius:0}.catlinks{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);margin:var(--space-4) 0;list-style:none;padding:0}.catlinks a{display:inline-block;padding:8px 14px;border-radius:var(--radius-pill);background:var(--color-tint-blue);color:var(--color-ink-soft);font-size:var(--text-sm);font-weight:var(--weight-bold)}.catlinks a:hover{text-decoration:none;background:var(--color-tint-purple)}.prose{max-width:68ch}html[lang=th] .prose{line-height:var(--leading-body-th)}.prose h2,.prose h3{margin-top:var(--space-6);margin-bottom:var(--space-3);scroll-margin-top:96px}.prose ol,.prose ul{padding-inline-start:var(--space-6)}.prose details,.prose li{margin-bottom:var(--space-2)}.prose details{background:var(--color-white);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4)}.prose details>summary{font-family:var(--font-display);font-weight:var(--weight-bold);cursor:pointer;min-height:48px;display:flex;align-items:center}.crumb{margin:var(--space-4) 0;color:var(--color-ink-soft);font-size:var(--text-sm)}.crumb ol{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}.crumb a{color:var(--color-ink-soft);text-decoration:underline}.notice{display:flex;align-items:flex-start;gap:var(--space-3);background:var(--color-tint-yellow);color:var(--color-on-warn);border-radius:var(--radius-lg);padding:var(--space-3) var(--space-4);margin:var(--space-4) 0;font-weight:var(--weight-medium);font-size:var(--text-sm)}.notice.danger{background:var(--color-surface);color:var(--color-danger-700)}.empty{display:grid;justify-items:center;gap:var(--space-3);text-align:center;background:var(--color-white);border-radius:var(--radius-2xl);padding:var(--space-12) var(--space-6);box-shadow:var(--shadow-soft);margin:var(--space-6) 0}.empty .glyph{font-size:44px;line-height:1}.empty p{color:var(--color-muted);max-width:44ch;margin:0}.rescue{display:grid;justify-items:center;gap:var(--space-4);text-align:center;background:var(--color-white);border-radius:var(--radius-3xl);padding:var(--space-6);box-shadow:var(--shadow-card);margin:var(--space-6) 0}@media (min-width:768px){.rescue{border-radius:var(--radius-4xl);padding:var(--space-10);max-width:640px;margin-inline:auto}}.rescue .glyph{display:grid;place-items:center;width:96px;height:96px;border-radius:var(--radius-pill);background:var(--color-tint-blue);font-size:44px;line-height:1;animation:obob var(--motion-float) ease-in-out infinite}.rescue p{color:var(--color-muted);max-width:44ch;margin:0}.rescue form{display:flex;flex-wrap:wrap;gap:var(--space-2);width:100%}.rescue form label{flex:1 1 200px}@media (max-width:767px){.rescue form .btn{width:100%}}.rescue .exits{display:grid;gap:var(--space-3);width:100%}@media (min-width:768px){.rescue .exits{display:flex;justify-content:center}}.skeleton{background:var(--color-surface-2);border-radius:var(--radius-lg);animation:opulse 1.4s ease-in-out infinite}@keyframes opulse{0%,to{opacity:1}50%{opacity:.55}}.criteria{background:var(--color-tint-yellow);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-5);color:var(--color-on-warn);font-size:var(--text-sm);max-width:68ch}.criteria b{display:block;font-size:var(--text-body);margin-bottom:var(--space-1)}.card .rank,.criteria b{font-family:var(--font-display)}.card .rank{position:absolute;top:var(--space-2);left:var(--space-2);z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--radius-pill);background:var(--color-white);color:var(--color-primary-700);font-weight:var(--weight-black);font-size:var(--text-sm);box-shadow:var(--shadow-rail)}.card .cover:has(.rank) .badge{top:calc(var(--space-2) + 34px)}.setgrid{display:grid;gap:var(--space-4);grid-template-columns:1fr;list-style:none;margin:0;padding:0}@media (min-width:768px){.setgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (min-width:1024px){.setgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}.setcard{display:block;height:100%;padding:var(--space-5) var(--space-5) var(--space-5) var(--space-6);border-left:6px solid var(--color-primary-500);border-radius:var(--radius-2xl);background:var(--color-white);box-shadow:var(--shadow-card);color:var(--color-ink);transition:transform var(--motion-hover) var(--ease-out)}.setcard:hover{transform:translateY(var(--hover-lift));color:var(--color-ink);text-decoration:none}.setcard h3{margin-bottom:var(--space-1)}.setcard .count{color:var(--color-muted);font-size:var(--text-sm);margin:0}.setcard .criteria-line{margin:var(--space-3) 0 0;color:var(--color-ink-soft);font-size:var(--text-sm);display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.setcard .stack3{display:flex;margin-bottom:var(--space-3)}.setcard .stack3 span{width:56px;height:56px;flex:none;border-radius:var(--radius-md);border:2px solid var(--color-white);overflow:hidden;position:relative}.setcard .stack3 span+span{margin-inline-start:-12px}.setcard .stack3 img{width:100%;height:100%;object-fit:cover;display:block}.setcard .stack3 span:first-child{transform:rotate(-4deg)}.setcard .stack3 span:nth-child(3){transform:rotate(4deg)}.filterbar{flex-wrap:wrap;margin-bottom:var(--space-4)}.field,.filterbar{display:flex;gap:var(--space-2);align-items:center}.field{flex:1 1 240px}input[type=search],select{width:100%;min-height:48px;padding:0 var(--space-4);border:2px solid var(--color-white);border-radius:var(--radius-lg);background:var(--color-white);box-shadow:var(--shadow-pill);color:var(--color-ink);font-family:var(--font-body);font-weight:var(--weight-medium);font-size:var(--text-body);transition:box-shadow var(--motion-press) var(--ease-out),border-color var(--motion-press) var(--ease-out)}input[type=search]:hover,select:hover{border-color:var(--color-primary-500);box-shadow:var(--shadow-rail)}input[type=search]:focus-visible,select:focus-visible{outline:none;border-color:var(--color-primary-700);box-shadow:var(--ring-focus)}.to-top{position:fixed;right:var(--space-4);bottom:max(var(--space-6),env(safe-area-inset-bottom));z-index:var(--z-overlay)}footer.site{flex:0 0 auto;margin-top:auto;padding:var(--space-8) 0 max(var(--space-8),env(safe-area-inset-bottom));background:var(--color-white);border-radius:var(--radius-3xl) var(--radius-3xl) 0 0;box-shadow:var(--shadow-soft-up);color:var(--color-ink-soft);font-size:var(--text-sm)}@media (min-width:768px){footer.site{padding-top:var(--space-12);border-radius:var(--radius-4xl) var(--radius-4xl) 0 0}}.ft-grid{display:grid;gap:var(--space-8);grid-template-columns:1fr}@media (min-width:768px){.ft-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-10)}}@media (min-width:1024px){.ft-grid{grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(148px,1fr))}}.ft-brand .mark{height:auto;min-height:var(--tap-min);margin-bottom:var(--space-2)}.ft-brand .mark i{width:40px;height:40px}.ft-brand p{color:var(--color-muted);max-width:42ch}.ft-h{font-family:var(--font-display);font-size:var(--text-sm);font-weight:var(--weight-bold);color:var(--color-ink);margin:0 0 var(--space-3)}html[lang=th] .ft-h{font-weight:var(--th-display-weight)}.ft-chips{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;margin:0;padding:0}.ft-chip,.ft-chips li{max-width:100%}.ft-chip{display:inline-flex;align-items:center;min-height:var(--tap-min);padding:var(--space-2) var(--space-4);border:2.5px solid rgb(255 255 255/85%);border-radius:var(--radius-pill);font-weight:var(--weight-bold);overflow-wrap:anywhere;word-break:normal;transition:transform var(--motion-hover) var(--ease-out)}.ft-chip,.ft-chip:hover{color:var(--color-ink-soft)}.ft-chip:hover{text-decoration:none;border-color:var(--color-primary-500);transform:translateY(calc(var(--hover-lift) / 2))}.ft-chip:active{transform:translateY(0)}.ft-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-4);list-style:none;margin:0;padding:0}@media (min-width:768px){.ft-links{grid-template-columns:1fr}}.ft-links a,.ft-trust a{display:flex;align-items:center;min-height:var(--tap-min);color:var(--color-ink-soft)}.ft-links a[aria-current=page],.ft-trust a[aria-current=page]{font-weight:var(--weight-bold)}.ft-trust{margin-top:var(--space-8)}.ft-trust ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 var(--space-4);list-style:none;margin:0;padding:0}@media (min-width:768px){.ft-trust ul{display:flex;flex-wrap:wrap;gap:var(--space-5)}}.ft-disc{align-items:flex-start;gap:var(--space-3);margin:var(--space-4) 0 0;padding:var(--space-4);background:var(--color-surface);border-radius:var(--radius-lg);max-width:68ch}.ft-base,.ft-disc{display:flex;color:var(--color-muted)}.ft-base{flex-direction:column;gap:var(--space-2);margin-top:var(--space-8);padding-top:var(--space-4);border-top:1px solid var(--color-surface-2)}@media (min-width:768px){.ft-base{flex-direction:row;align-items:center;justify-content:space-between}}.ft-base p{margin:0}.ft-base a{display:inline-flex;align-items:center;min-height:var(--tap-min);color:var(--color-muted);padding-block:var(--space-2)}.ft-base a:hover{color:var(--color-primary-700)}footer.site .lang{margin-top:var(--space-3);flex-wrap:wrap}footer.site .lang-link{background:var(--color-surface);color:var(--color-muted);padding:0 var(--space-4)}footer.site .lang-link[aria-current=true]{background:var(--color-white);border:2px solid var(--color-primary-500);color:var(--color-primary-700)}.tint-0{background:var(--color-tint-blue)}.tint-1{background:var(--color-tint-pink)}.tint-2{background:var(--color-tint-green)}.tint-3{background:var(--color-tint-yellow)}.tint-4{background:var(--color-tint-purple)}.tint-5{background:var(--color-tint-peach)}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:after,:before{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}.btn:active,.btn:hover,.card:hover,.drawer-toggle>summary:active,.drawer-toggle>summary:hover,.ft-chip:hover,.heart:active,.heart:hover,.hero-badge:hover,.icon-btn:active,.icon-btn:hover,.lang-link:active,.lang-link:hover,.nav-chip:active,.nav-chip:hover,.nav-play:active,.nav-play:hover,.pill:hover,.promo:active .cta-chip,.promo:hover,.promo:hover .cta-chip,.rail-nav button:active,.rail-nav button:hover{transform:none}}