:root { --ink:#f5f3ec; --night:#0a0e17; --panel:#121826; --line:#293044; --lime:#caff3d; --pink:#ff507c; --blue:#5b8cff; }
* { box-sizing:border-box; }
html { color-scheme:dark; }
body { margin:0; min-height:100vh; background:var(--night); color:var(--ink); font-family:Arial, Helvetica, sans-serif; }
a { color:inherit; text-decoration:none; }
.library-page { background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px); background-size:36px 36px; }
.site-header { height:78px; padding:0 clamp(22px,5vw,72px); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(10,14,23,.9); }
.brand { display:flex; align-items:center; gap:13px; font-family:"Arial Black", Impact, sans-serif; letter-spacing:-.5px; }
.brand-mark { width:27px; height:27px; display:grid; grid-template-columns:1fr 1fr; gap:3px; transform:rotate(8deg); }
.brand-mark i { background:var(--lime); }.brand-mark i:nth-child(2),.brand-mark i:nth-child(3){opacity:.55}
.status { font:500 10px "Courier New", monospace; letter-spacing:1.2px; color:#a6adba; }.status span { display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);margin-right:8px; }
.library { width:min(1180px,90vw); margin:auto; padding:clamp(58px,8vw,110px) 0 70px; }
.hero { max-width:800px; margin-bottom:80px; }.eyebrow { color:var(--lime); font:500 12px "Courier New", monospace; letter-spacing:2px; margin:0 0 22px; }
h1 { margin:0; font:900 clamp(48px,7.3vw,96px)/.92 "Arial Black", Impact, sans-serif; letter-spacing:-5px; text-transform:uppercase; } h1 em { color:transparent; -webkit-text-stroke:1.5px var(--ink); font-style:normal; }
.hero-copy { width:min(470px,100%); margin:28px 0 0; color:#9ba3b1; line-height:1.6; font-size:15px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; border-bottom:1px solid var(--line); padding-bottom:13px; margin-bottom:22px; }.section-heading h2{font:900 16px "Arial Black",Impact,sans-serif;letter-spacing:1px;margin:0}.section-heading span{font:11px "Courier New",monospace;color:#70798c}
.game-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.game-card { border:1px solid var(--line); background:#101622; transition:transform .2s,border-color .2s,box-shadow .2s; overflow:hidden; }
.game-card:hover,.game-card:focus-visible { transform:translateY(-7px); border-color:#687186; box-shadow:0 18px 45px #0007; outline:none; }.game-card:hover .play-button{background:var(--ink);color:var(--night)}
.card-art { height:250px; position:relative; display:grid; place-items:center; overflow:hidden; }.card-art:after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent 45%,rgba(255,255,255,.06));}
.number { position:absolute; right:13px; top:10px; font:10px "Courier New",monospace; color:#ffffff70; }.snake-art{background:#345f2f}.twenty-art{background:#67347f}.tetris-art{background:#244d81}
.snake-pixel{width:34px;height:34px;background:var(--lime);box-shadow:-34px 0 var(--lime),-68px 0 var(--lime),-68px -34px var(--lime),-68px -68px var(--lime);position:relative}.snake-pixel:after{content:"";position:absolute;width:6px;height:6px;background:#192413;right:6px;top:7px}.snake-food{width:24px;height:24px;background:var(--pink);position:absolute;right:25%;top:25%;box-shadow:0 0 20px #ff507c88}
.tile-stack{display:grid;grid-template-columns:1fr 1fr;gap:5px;transform:rotate(-4deg)}.tile-stack i{font:900 35px "Arial Black",Impact,sans-serif;font-style:normal;background:#f7e264;color:#272118;width:61px;height:61px;display:grid;place-items:center;box-shadow:5px 5px #2b1740}.tile-stack i:nth-child(2),.tile-stack i:nth-child(3){background:#ff9d55}
.tetromino{display:grid;grid-template-columns:repeat(3,43px);grid-template-rows:repeat(2,43px);gap:3px;transform:rotate(8deg)}.tetromino i{background:#58ddff;box-shadow:inset -5px -5px #2195c5}.tetromino i:first-child{grid-column:2}.tetromino i:nth-child(2){grid-column:1;grid-row:2}.tetromino i:nth-child(3){grid-column:2;grid-row:2}.tetromino i:nth-child(4){grid-column:3;grid-row:2}
.card-copy { padding:22px; display:flex; justify-content:space-between; align-items:end; }.card-copy p{font:9px "Courier New",monospace;letter-spacing:1px;color:#7f899c;margin:0 0 7px}.card-copy h3{font:900 27px "Arial Black",Impact,sans-serif;text-transform:uppercase;margin:0}.play-button{font:10px "Courier New",monospace;letter-spacing:1px;border:1px solid #525c70;padding:10px 11px;transition:.2s}.play-button b{font-size:15px;margin-left:7px}
footer{border-top:1px solid var(--line);min-height:70px;padding:0 clamp(22px,5vw,72px);display:flex;align-items:center;justify-content:space-between;color:#626b7c;font:9px "Courier New",monospace;letter-spacing:1px}footer i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#4d5668;margin:0 9px}
@media(max-width:800px){.game-grid{grid-template-columns:1fr}.card-art{height:220px}.hero{margin-bottom:55px}h1{letter-spacing:-3px}.game-card{display:grid;grid-template-columns:1.15fr 1fr}.card-copy{align-items:center}.status{display:none}}
@media(max-width:520px){.game-card{display:block}.site-header{height:66px}.library{width:88vw;padding-top:55px}.hero-copy{font-size:14px}footer{gap:20px;flex-direction:column;justify-content:center;text-align:center}}

/* Game shell */
.game-page{min-height:100vh;display:flex;flex-direction:column;background:radial-gradient(circle at 50% 15%,#182136 0,#0a0e17 48%)}
.game-topbar{height:66px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 clamp(16px,4vw,48px)}
.back-link{font:11px "Courier New",monospace;letter-spacing:1px;color:#aab2c1}.back-link:hover{color:var(--lime)}.game-title{font:900 18px "Arial Black",Impact,sans-serif;text-transform:uppercase}.mute-badge{font:9px "Courier New",monospace;color:#697386;letter-spacing:1px}
.game-layout{flex:1;width:min(980px,94vw);margin:auto;padding:30px 0;display:grid;grid-template-columns:200px auto 200px;gap:30px;align-items:center;justify-content:center}
.side-panel{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:12px}.stat{border:1px solid var(--line);background:#101622;padding:17px}.stat label{display:block;font:9px "Courier New",monospace;color:#737e91;letter-spacing:1px;margin-bottom:7px}.stat strong{font:900 24px "Arial Black",Impact,sans-serif}.instructions{font:11px/1.8 "Courier New",monospace;color:#7f899d}.instructions b{color:#d8dde7}.game-board-wrap{position:relative}.game-canvas{display:block;border:1px solid #3a4357;background:#090d15;box-shadow:0 20px 60px #0008;max-width:100%;height:auto;touch-action:none}.game-overlay{position:absolute;inset:0;display:none;place-items:center;text-align:center;background:#080c14d9;z-index:2}.game-overlay.show{display:grid}.game-overlay h2{font:900 32px "Arial Black",Impact,sans-serif;margin:0 0 8px}.game-overlay p{font:11px "Courier New",monospace;color:#8d97a9}.action-button{border:0;background:var(--lime);color:#111;font:700 11px "Courier New",monospace;letter-spacing:1px;padding:13px 18px;cursor:pointer}.action-button:hover{filter:brightness(1.12)}
.mobile-controls{display:none;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(2,42px);justify-content:center;gap:6px;margin-top:15px}.mobile-controls button{border:1px solid #394258;background:#171e2c;color:white;font-size:18px}.mobile-controls .up{grid-column:2}.mobile-controls .left{grid-column:1}.mobile-controls .down{grid-column:2}.mobile-controls .right{grid-column:3}
.snake-layout{grid-template-columns:230px auto 170px}.score-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.settings-panel{border:1px solid var(--line);background:#101622;padding:16px}.settings-panel h2{font:900 13px "Arial Black",Impact,sans-serif;letter-spacing:.7px;margin:0 0 17px}.settings-panel label{display:block;font:9px "Courier New",monospace;color:#7f899d;letter-spacing:1px;margin:12px 0 6px}.settings-panel select{width:100%;appearance:none;border:1px solid #394258;border-radius:0;background:#171e2c;color:#f5f3ec;padding:10px 30px 10px 10px;font:700 10px "Courier New",monospace;letter-spacing:.5px;background-image:linear-gradient(45deg,transparent 50%,#caff3d 50%),linear-gradient(135deg,#caff3d 50%,transparent 50%);background-position:calc(100% - 14px) 14px,calc(100% - 9px) 14px;background-size:5px 5px;background-repeat:no-repeat}.settings-panel select:focus{outline:1px solid var(--lime);border-color:var(--lime)}.settings-panel p{font:9px/1.5 "Courier New",monospace;color:#5f697c;margin:14px 0 0}
@media(max-width:780px){.game-layout{grid-template-columns:1fr;padding-top:20px}.side-panel{display:grid;grid-template-columns:repeat(2,1fr)}.side-panel.instructions-panel{display:none}.game-board-wrap{margin:auto}.mobile-controls{display:grid}}
@media(max-width:780px){.snake-layout .side-panel{display:block}.snake-layout .settings-panel{margin-top:10px}.snake-layout .score-row{grid-template-columns:1fr 1fr}.snake-layout{width:min(520px,94vw)}}

/* Persistent shop and equipped cosmetics */
.shop-button{position:fixed;right:20px;bottom:20px;z-index:20;display:flex;align-items:center;gap:13px;background:var(--lime);color:#111;padding:13px 15px;box-shadow:5px 5px 0 #0008;font:900 12px "Arial Black",Impact,sans-serif;letter-spacing:.8px;transition:transform .18s,box-shadow .18s}.shop-button b{font:700 9px "Courier New",monospace;border-left:1px solid #1115;padding-left:12px}.shop-button:hover,.shop-button:focus-visible{transform:translate(-2px,-2px);box-shadow:8px 8px 0 #0008;outline:none}
body.bg-grid-glow{background-color:#071515;background-image:linear-gradient(rgba(67,255,220,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(67,255,220,.055) 1px,transparent 1px),radial-gradient(circle at 50% 15%,#123833,#071515 55%)!important;background-size:32px 32px,32px 32px,100% 100%!important}
body.bg-sunset{background-color:#190d20;background-image:radial-gradient(circle at 70% 15%,#6b244f 0,#291329 34%,#100d19 70%)!important;background-size:100% 100%!important}
.tiles-neon #game{background:#070b14!important}.tiles-neon .grid-cell{background:#141a2a!important}.tiles-neon .num-tile{color:#fff!important;background:#151d31!important;border:1px solid currentColor;box-shadow:0 0 16px currentColor,inset 0 0 15px #ffffff13}.tiles-neon .n2{color:#E4002B!important}.tiles-neon .n4{color:#FF8200!important}.tiles-neon .n8{color:#FFC700!important}.tiles-neon .n16{color:#a6d608!important}.tiles-neon .n32{color:#00a641!important}.tiles-neon .n64{color:#00b7a8!important}.tiles-neon .n128{color:#00aeef!important}.tiles-neon .n256{color:#0057d9!important}.tiles-neon .n512{color:#7a2ff0!important}.tiles-neon .n1024{color:#d6009c!important}.tiles-neon .n2048{color:#ffad8d!important}
.shop-page{min-height:100vh;background:#0a0e17}.shop-shell{width:min(1120px,90vw);margin:auto;padding:70px 0 110px}.shop-hero{position:relative;padding-bottom:60px}.shop-hero h1{font-size:clamp(45px,7vw,88px)}.wallet{position:absolute;right:0;bottom:65px;width:250px;border:1px solid var(--line);background:#101622;padding:20px}.wallet span,.wallet small{display:block;font:9px/1.5 "Courier New",monospace;color:#758095;letter-spacing:1px}.wallet strong{display:block;font:900 42px "Arial Black",Impact,sans-serif;color:var(--lime);margin:5px 0}.shop-tabs{display:flex;gap:6px;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:24px;overflow:auto}.shop-tabs button{border:1px solid var(--line);background:#101622;color:#8892a5;padding:10px 14px;white-space:nowrap;font:700 9px "Courier New",monospace;letter-spacing:.8px;cursor:pointer}.shop-tabs button.active,.shop-tabs button:hover{background:var(--lime);border-color:var(--lime);color:#111}.shop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.shop-card{border:1px solid var(--line);background:#101622;overflow:hidden}.shop-preview{height:155px;position:relative;overflow:hidden;display:grid;place-items:center}.shop-preview span{position:absolute;left:10px;top:10px;font:8px "Courier New",monospace;letter-spacing:1px;color:#fff8}.shop-card-copy{padding:18px}.shop-card-copy>p{height:34px;margin:0 0 7px;color:#7f899d;font-size:11px;line-height:1.5}.shop-card-copy h2{font:900 19px "Arial Black",Impact,sans-serif;text-transform:uppercase;margin:0 0 17px}.shop-card-copy>div{display:flex;align-items:center;justify-content:space-between}.shop-card-copy strong{font:700 10px "Courier New",monospace;color:var(--lime)}.shop-card button{border:1px solid #4a556c;background:transparent;color:#fff;padding:9px 12px;font:700 9px "Courier New",monospace;cursor:pointer}.shop-card button:hover{background:var(--ink);color:#111}.shop-card button:disabled{border-color:var(--lime);background:#caff3d18;color:var(--lime);cursor:default}.shop-message{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);margin:0;background:var(--lime);color:#111;padding:12px 18px;font:700 10px "Courier New",monospace;box-shadow:5px 5px 0 #0008}.shop-message:empty{display:none}.shop-message.error{background:var(--pink);color:#fff}
.preview-midnight{background:radial-gradient(circle at 50% 20%,#26334e,#090d15)}.preview-grid{background-color:#071515;background-image:linear-gradient(#43ffdc18 1px,transparent 1px),linear-gradient(90deg,#43ffdc18 1px,transparent 1px);background-size:22px 22px}.preview-sunset{background:radial-gradient(circle at 70% 15%,#d74a79,#60204e 40%,#171020 80%)}.preview-snake-lime,.preview-snake-cyan,.preview-snake-pink{background:#172033}.preview-snake-lime:after,.preview-snake-cyan:after,.preview-snake-pink:after{content:"";width:38px;height:38px;border-radius:12px;background:#caff3d;box-shadow:-38px 0 #aee82e,-76px 0 #caff3d,38px 0 #e7ff9a}.preview-snake-cyan:after{background:#54e8ff;box-shadow:-38px 0 #26bcd4,-76px 0 #54e8ff,38px 0 #c4f8ff}.preview-snake-pink:after{background:#ff5b9d;box-shadow:-38px 0 #dc3479,-76px 0 #ff5b9d,38px 0 #ffd2e2}.preview-tiles-classic,.preview-tiles-neon{background:#251e31}.preview-tiles-classic:after,.preview-tiles-neon:after{content:"2048";display:grid;place-items:center;width:86px;height:86px;background:#caff3d;color:#17200b;font:900 23px "Arial Black",Impact,sans-serif}.preview-tiles-neon{background:#070b14}.preview-tiles-neon:after{background:#151d31;color:#caff3d;border:1px solid #caff3d;box-shadow:0 0 20px #caff3d}.preview-tetris-classic,.preview-tetris-pastel{background:#172033}.preview-tetris-classic:after,.preview-tetris-pastel:after{content:"";width:38px;height:38px;background:#5bdcff;box-shadow:38px 0 #ffd84d,0 38px #b96cff,38px 38px #60df75}.preview-tetris-pastel:after{background:#a9e9f5;box-shadow:38px 0 #ffe6a3,0 38px #d8b4f8,38px 38px #b9edc3}
@media(max-width:800px){.shop-grid{grid-template-columns:repeat(2,1fr)}.wallet{position:static;margin-top:35px}.shop-hero{padding-bottom:45px}}
@media(max-width:520px){.shop-grid{grid-template-columns:1fr}.shop-button{right:12px;bottom:12px}.shop-shell{padding-top:45px}.shop-card-copy>p{height:auto}.wallet{width:100%}}
.shop-card-copy .cosmetic-game{display:inline-flex!important;width:auto;align-items:center;border:1px solid #3b465b;color:var(--lime);padding:5px 7px;margin-bottom:10px;font:700 8px "Courier New",monospace;letter-spacing:1px}.shop-card-copy .shop-card-action{display:flex;align-items:center;justify-content:space-between}