@font-face{font-family:Bricolage;font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-vietnamese-800-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Bricolage;font-weight:800;font-display:swap;src:url(../fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Newsreader;font-weight:400;font-display:swap;src:url(../fonts/newsreader-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:Newsreader;font-weight:400;font-display:swap;src:url(../fonts/newsreader-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{color-scheme:dark;--base:#0f1620;--surface:#1b2838;--footer:#171a21;--rule:#2a3b50;--text:#e8e4da;--muted:#a3b3c5;--accent:#00a1e7;
--display:Bricolage,"Arial Black",system-ui,sans-serif;--serif:Newsreader,Georgia,"Times New Roman",serif;
--s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:7rem;--wrap:72rem}
*{box-sizing:border-box}
html{background:var(--base);scroll-padding-top:5rem}
body{margin:0;background:var(--base);color:var(--text);font:1.125rem/1.65 var(--serif);-webkit-text-size-adjust:100%}
img{display:block;max-width:100%;height:auto}
a{color:var(--accent);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px}
.wrap{width:min(100% - 2*var(--s3),var(--wrap));margin-inline:auto}
.skip{position:absolute;left:-999px}.skip:focus{left:var(--s2);top:var(--s2);background:var(--text);color:var(--base);padding:var(--s1) var(--s2);z-index:9}

.top{border-bottom:1px solid var(--rule)}
.top .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s4);padding-block:var(--s2)}
.brand{display:flex;align-items:center;gap:.75rem;color:var(--text);text-decoration:none;font:800 1.15rem/1 var(--display)}
.brand svg,.brand img{width:3.2rem;height:auto;color:var(--text)}
.nav{display:flex;flex-wrap:wrap;gap:0 var(--s3);margin:0 0 0 auto;padding:0;list-style:none;font:800 .95rem/1 var(--display)}
.nav a{display:block;padding:.7rem 0;color:var(--muted);text-decoration:none;border-bottom:2px solid transparent}
.nav a:hover{color:var(--text)}.nav a[aria-current]{color:var(--text);border-color:var(--accent)}

.hero{padding-block:var(--s6) var(--s5);display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
.hero .mark{width:clamp(9rem,30vw,20rem);color:var(--accent)}
.hero h1{margin:0;font:800 clamp(2.6rem,8.5vw,7rem)/.95 var(--display);letter-spacing:-.03em;max-width:12ch}
.lede{margin:0;color:var(--muted);font-size:1.25rem}

.games>h2{margin:0 0 var(--s4);font:800 1.1rem/1 var(--display);color:var(--muted)}
.game{display:grid;gap:var(--s3) var(--s5);grid-template-columns:minmax(0,1fr);padding-block:var(--s5);border-top:1px solid var(--rule)}
.game img{width:100%;aspect-ratio:16/9;object-fit:cover;background:var(--surface)}
.game h3{margin:0 0 var(--s2);font:800 clamp(1.9rem,4.5vw,3rem)/1 var(--display);letter-spacing:-.02em}
.game p{margin:0 0 var(--s2);max-width:34rem}
.game .links{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin-top:var(--s3)}
.watch{display:inline-flex;align-items:center;gap:.8rem;padding:.35rem 1.1rem .35rem .35rem;background:var(--surface);color:var(--text);text-decoration:none;font:800 1rem/1 var(--display);border:1px solid var(--rule);transition:border-color .15s,background .15s}
.watch::before{content:"";width:2.6rem;height:2.6rem;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%230f1620' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/70% no-repeat;border-radius:50%}
.watch:hover{border-color:var(--accent);background:#213146}
@media(min-width:56rem){
 .hero{grid-template-columns:auto minmax(0,1fr);align-items:end;gap:var(--s5)}
 .game{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
 .game:nth-of-type(even) img{order:2}
 .game:nth-of-type(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
 .game:nth-of-type(even) img{order:2}
}
.fb{margin-block:var(--s5) var(--s6);padding-top:var(--s3);border-top:1px solid var(--rule)}

.foot{background:var(--footer);padding-block:var(--s5)}
.foot p{margin:0 0 var(--s3);color:var(--muted);font-size:1rem}
.foot ul{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin:0 0 var(--s4);padding:0;list-style:none;font:800 .95rem/1.4 var(--display)}
.foot ul a{color:var(--text)}
.social{gap:var(--s2)!important}
.ico{display:block;width:2.75rem;height:2.75rem;background:var(--muted);-webkit-mask:var(--i) center/1.6rem no-repeat;mask:var(--i) center/1.6rem no-repeat}
.ico:hover{background:var(--accent)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}
.notice{display:flex;gap:.6rem;align-items:baseline;margin:0 0 var(--s2);color:#ffd84d;font-size:1.05rem;line-height:1.4}
.notice-i{flex:none;display:inline-grid;place-items:center;width:1.15rem;height:1.15rem;border:1.5px solid currentColor;border-radius:50%;font:800 .72rem/1 var(--display);transform:translateY(.12em)}