@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--bg:#090b14;--text:#f5f5fa;--muted:#818698;--lime:#ccff87}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:'Noto Sans SC',system-ui,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--lime);outline-offset:5px}button{border:0}#ambient,.grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1}.grain{opacity:.035;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.5' d='M0 0h180v180H0z'/%3E%3C/svg%3E")}header{height:106px;max-width:1240px;margin:auto;padding:0 40px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;color:white;font-size:21px;font-weight:800;letter-spacing:-.8px;display:flex;gap:9px;align-items:center}.brand>span:last-child{font-weight:500}.brand-icon{color:var(--lime);font-size:36px;margin-right:3px}.dot{color:#737989}.header-note{color:#989dac;font-size:12px;display:flex;gap:9px;align-items:center}.header-note i{width:6px;height:6px;background:var(--lime);border-radius:100%;box-shadow:0 0 12px #ccff8788}main{max-width:1240px;margin:auto;padding:0 40px}.hero{position:relative;padding:58px 0 53px}.eyebrow{font-size:11px;letter-spacing:3px;color:var(--lime)}.hero h1{font-size:76px;line-height:1.22;letter-spacing:-4px;margin:23px 0 24px;font-weight:900}.hero h1>span:first-child{background:linear-gradient(100deg,#d6ffa5,#a6edb2 65%,#8cdbd9);background-clip:text;color:transparent}.hero-star{display:inline-block;font-size:81px;font-weight:400;color:var(--lime);margin-left:23px;vertical-align:middle;animation:rotate 22s linear infinite}.hero p{font-size:14px;color:#9398a9;line-height:1.9}.hero-meta{display:flex;gap:23px;color:#a7acba;font-size:11px;margin-top:25px}.games-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.game-card{position:relative;min-height:320px;border:1px solid #ffffff13;background:#141821a8;border-radius:20px;padding:23px;text-align:left;overflow:hidden;transition:transform .2s,border-color .2s,box-shadow .2s;transform-style:preserve-3d}.game-card:before{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,0%),var(--glow),transparent 65%);opacity:.65}.game-card:hover{border-color:var(--accent);box-shadow:0 12px 40px #0004}.snake-card{--accent:#b7f58a;--glow:#88dd4820}.tiles-card{--accent:#c4afff;--glow:#9e75ff22}.breakout-card{--accent:#ffab81;--glow:#ff875022}.memory-card{--accent:#f0a6d8;--glow:#d176ce22}.reaction-card{--accent:#8fdfe5;--glow:#67ceda22}.card-top{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:10px;letter-spacing:1px;color:#9296a5}.arrow{font-size:22px;color:var(--accent)}.art{height:153px;position:relative;display:flex;align-items:center;justify-content:center;color:var(--accent)}.card-bottom{position:relative}.card-bottom h2{font-size:23px;margin:7px 0}.card-bottom p{font-size:12px;color:#8f94a5;margin:0}.tag{position:absolute;right:0;top:12px;border:1px solid #ffffff15;border-radius:20px;padding:5px 9px;font-size:9px;color:#a9adba}.snake-art i{height:28px;width:28px;background:#b7f58a;border-radius:7px;box-shadow:0 0 25px #b7f58116;margin:2px}.snake-art i:first-child{transform:translate(30px,-32px);opacity:.5}.snake-art i:nth-child(2){opacity:.7}.snake-art i:nth-child(4):after{content:'··';color:#31432a;font-size:30px;position:absolute;line-height:12px;margin-left:8px}.snake-art b{font-size:29px;margin-left:27px}.tiles-art{gap:7px;transform:rotate(-9deg)}.tiles-art b{width:51px;height:57px;display:grid;place-items:center;border-radius:10px;background:#c4afff1a;font-size:25px;box-shadow:0 6px 0 #0003}.tiles-art b:last-child{background:#c4afff;color:#443565;transform:translateY(-13px)}.breakout-art{flex-direction:column}.breakout-art div{font-size:39px;line-height:.7;letter-spacing:5px;transform:rotate(-7deg)}.breakout-art b{font-size:17px;position:absolute;bottom:34px;left:52%;filter:drop-shadow(-8px -12px 7px #ffab8188)}.breakout-art i{position:absolute;bottom:15px;width:73px;height:9px;background:#ffab81;border-radius:8px;transform:rotate(-7deg)}.memory-art b{display:grid;place-items:center;background:#f0a6d81a;border:1px solid #f0a6d840;border-radius:10px;width:65px;height:82px;font-size:39px;transform:rotate(-13deg)}.memory-art b:nth-child(2){transform:rotate(6deg) translateY(-8px);margin:0 -6px;color:#f0a6d888;font-size:28px;background:#282130}.memory-art b:last-child{transform:rotate(18deg)}.reaction-art{font-size:110px;line-height:1;text-shadow:0 0 45px #8fdfe530}.reaction-art span{font-size:9px;letter-spacing:3px;position:absolute;bottom:8px;color:#8fdfe580}.small-note{display:flex;flex-direction:column;justify-content:center;align-items:center;color:#71788c;text-align:center}.small-note>span{font-size:45px;color:#b6bf9f}.small-note p{font-size:13px;line-height:2}footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff10;margin-top:49px;padding:25px 0 30px;color:#62697c;font-size:10px}.screen.active{animation:enter .4s ease both}.screen[hidden],[hidden]{display:none!important}.play-top{display:flex;justify-content:space-between;align-items:center;margin:35px 0}.subtle{background:transparent;color:#a2a9bc;font-size:12px;padding:8px 0}.subtle:hover{color:white}.play-heading{display:flex;justify-content:space-between;align-items:center;max-width:680px;margin:30px auto}.play-heading h1{font-size:36px;margin:0 0 8px}.play-heading p{font-size:12px;color:var(--muted);margin:0}.scores{display:flex;gap:24px;text-align:right}.scores span{display:block;font-size:10px;color:var(--muted);margin-bottom:6px}.scores strong{font-size:25px;color:var(--lime);font-variant-numeric:tabular-nums}.game-shell{max-width:520px;margin:auto;background:#131724;border:1px solid #ffffff14;border-radius:22px;padding:16px;box-shadow:0 25px 90px #0004}#game-area{position:relative;width:100%;aspect-ratio:1;overflow:hidden;border-radius:12px;background:#0c101b;touch-action:none;user-select:none;overscroll-behavior:none}#game-canvas{width:100%;height:100%;display:block}#overlay{position:absolute;inset:0;background:#0b101be8;backdrop-filter:blur(7px);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:22px;z-index:4}#overlay-icon{font-size:48px;color:var(--lime)}#overlay h2{font-size:27px;margin:14px 0 8px}#overlay p{font-size:13px;line-height:1.8;color:#989fb3;white-space:pre-line;margin-bottom:25px}.primary{background:var(--lime);color:#223219;font-weight:700;padding:13px 25px;border-radius:10px;box-shadow:0 4px 24px #ccff8715}.primary span{margin-left:22px}.primary:hover{background:#deffb5}.game-toolbar{display:flex;justify-content:space-between;align-items:center;padding-top:13px;gap:12px}#instructions{font-size:10px;color:#8e96a9}.play-note{text-align:center;font-size:11px;color:#596277;margin:25px 0 40px}#board2048{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:14px;width:100%;height:100%;background:#181b28}.tile{border-radius:9px;background:#ffffff07;display:flex;align-items:center;justify-content:center;font-size:clamp(21px,5vw,39px);font-weight:800;transition:background .15s;animation:pop .17s ease}.tile.filled{background:hsl(var(--hue),55%,var(--light));color:#fff}.tile[data-value="2"],.tile[data-value="4"]{color:#2b253e}#memory-board{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:16px;height:100%}.memory-tile{border:1px solid #ffffff12;border-radius:10px;background:linear-gradient(135deg,#27223b,#1b2030);font-size:30px;color:#a99ac8;transition:transform .25s,background .25s}.memory-tile.flipped{background:#c4afff27;transform:rotateY(180deg)}.memory-tile.matched{background:#ccff8719;color:var(--lime);border-color:#ccff8740}#reaction-pad{width:100%;height:100%;background:#202b40;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:18px;font-size:25px;font-weight:700;white-space:pre-line;text-align:center;padding:25px;transition:background .2s}#reaction-pad.ready{background:#a8e978;color:#1e391a}#reaction-pad.waiting{background:#713e54}#snake-controls{text-align:center;padding-top:12px}#snake-controls button{width:45px;height:36px;margin:3px;background:#ffffff0b;border:1px solid #ffffff10;border-radius:8px;color:var(--lime);touch-action:none}body.playing{overscroll-behavior:none}@keyframes enter{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@keyframes pop{from{transform:scale(.88)}to{transform:scale(1)}}@keyframes rotate{to{transform:rotate(360deg)}}@media(hover:hover){#snake-controls{display:none!important}}@media(max-width:760px){header{height:80px;padding:0 23px}.brand{font-size:17px}.brand-icon{font-size:30px}.header-note{font-size:10px}main{padding:0 23px}.hero{padding:38px 0}.hero h1{font-size:61px}.hero-star{font-size:62px}.games-grid{grid-template-columns:repeat(2,1fr);gap:13px}.game-card{min-height:290px;padding:17px}.tag{display:none}.art{height:143px}.card-top{font-size:9px}.card-bottom h2{font-size:20px}.card-bottom p{font-size:11px}.tiles-art{gap:4px}.tiles-art b{width:35px;height:44px;font-size:20px}.snake-art i{width:20px;height:20px;margin:1px}.snake-art i:first-child{transform:translate(22px,-23px)}.snake-art b{margin-left:14px}.memory-art b{width:45px;height:64px}.breakout-art div{font-size:30px}footer{flex-wrap:wrap;gap:14px}footer span:nth-child(2){display:none}.play-heading h1{font-size:29px}.scores{gap:14px}.scores strong{font-size:22px}.play-heading{gap:12px}.play-heading p{max-width:190px;line-height:1.6}.play-top{margin:15px 0}.game-shell{padding:10px;border-radius:16px}.play-top .eyebrow{font-size:9px;letter-spacing:1px}#memory-board{padding:10px;gap:8px}.hero-meta{gap:15px;font-size:10px}}@media(max-width:360px){main{padding:0 14px}.card-top{letter-spacing:0}.hero h1{font-size:53px}.game-card{padding:13px}.card-bottom p{font-size:10px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
