:root { --sky:#5c94fc; --ink:#101018; --cream:#fff6da; --red:#e52521; --blue:#049cd8; --green:#43b047; --yellow:#fbd000; --navy-shadow:#172c56; --pixel:"Press Start 2P","Courier New",monospace; --meta:"Silkscreen","Courier New",monospace; color:var(--ink); background:var(--cream); font-family:var(--meta); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { min-width:320px; margin:0; background:var(--cream); }
.hud { display:flex; align-items:center; gap:clamp(.6rem,3vw,2rem); min-height:58px; padding:.75rem max(1rem,calc((100vw - 1460px) / 2)); border-bottom:7px solid var(--blue); color:var(--cream); background:var(--ink); font-family:var(--pixel); font-size:clamp(.42rem,1.2vw,.68rem); letter-spacing:.03em; text-transform:uppercase; white-space:nowrap; }.hud .hud-coffee { margin-left:auto; color:var(--yellow); }.hud .hud-lives { color:#f04a48; }.hud .hi-score { display:none; }
main { overflow:hidden; }.hero { position:relative; z-index:0; min-height:385px; display:grid; place-items:center; overflow:hidden; isolation:isolate; padding:1.8rem 1.2rem 1.2rem; background:linear-gradient(#5c94fc,#8fc3ff); }.hero-copy { position:relative; z-index:2; width:min(680px,100%); text-align:center; }.wordmark { display:block; width:min(100%,670px); margin:0 auto; filter:drop-shadow(0 5px 0 rgb(16 16 24 / .35)); image-rendering:pixelated; }.hero-copy p { margin:1.15rem 0 .9rem; color:var(--cream); font-family:var(--pixel); font-size:clamp(.55rem,2.5vw,.82rem); line-height:1.7; text-shadow:2px 2px 0 var(--navy-shadow); text-transform:uppercase; }.all-games { display:none; }.hero-chachi { position:relative; z-index:2; width:112px; height:160px; margin-top:.2rem; object-fit:contain; object-position:top; image-rendering:pixelated; filter:drop-shadow(5px 6px 0 rgb(16 16 24 / .27)); }
.clouds { position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }.cloud { position:absolute; top:var(--top); left:112%; width:var(--width); height:var(--height); border-radius:999px; opacity:var(--opacity,.78); background:#fff; box-shadow:10px -8px 0 2px #fff,28px -13px 0 4px #fff,47px -5px 0 1px #fff; animation:cloud-drift var(--duration) linear var(--delay) infinite; }.cloud-one{--top:12%;--width:56px;--height:14px;--duration:22s;--delay:-11s}.cloud-two{--top:31%;--width:39px;--height:10px;--duration:31s;--delay:-23s;--opacity:.64}.cloud-three{--top:55%;--width:68px;--height:17px;--duration:40s;--delay:-4s;--opacity:.72}.cloud-four{--top:71%;--width:44px;--height:11px;--duration:27s;--delay:-19s;--opacity:.58}.cloud-five{--top:19%;--width:76px;--height:19px;--duration:52s;--delay:-36s;--opacity:.48}
.games-section { width:100%; margin:0; padding:2rem max(1rem,calc((100vw - 1460px) / 2)) 3.5rem; background:var(--sky); }.section-heading { display:flex; align-items:center; gap:1rem; margin-bottom:1.5rem; }.section-heading::after { flex:1; height:5px; content:""; background:repeating-linear-gradient(90deg,var(--cream) 0 14px,transparent 14px 27px); }.section-heading h1 { margin:0; color:var(--cream); font-family:var(--pixel); font-size:clamp(.72rem,2vw,1.08rem); line-height:1.5; text-shadow:2px 2px 0 var(--navy-shadow); text-transform:uppercase; white-space:nowrap; }.game-grid { display:grid; gap:1.75rem; }
.game-card { position:relative; display:grid; grid-template-columns:108px 1fr; min-height:154px; overflow:hidden; border:4px solid var(--ink); color:var(--ink); background:var(--cream); box-shadow:6px 6px 0 var(--navy-shadow); text-decoration:none; transition:transform 140ms steps(2),box-shadow 140ms steps(2); }.game-card:hover { transform:translate(-3px,-3px); box-shadow:9px 9px 0 var(--navy-shadow); }.game-card:focus-visible { outline:4px solid var(--yellow); outline-offset:5px; }.card-number { position:absolute; z-index:3; top:8px; left:9px; padding:3px 4px; color:var(--cream); background:var(--ink); font-family:var(--pixel); font-size:.5rem; }.sprite-plate { position:relative; display:grid; place-items:end center; overflow:hidden; background:var(--game-color); box-shadow:inset -8px 0 rgb(16 16 24 / .17); }.sprite-plate::after { position:absolute; inset:auto 0 0; height:23px; content:""; background:repeating-linear-gradient(90deg,rgb(16 16 24 / .28) 0 6px,transparent 6px 12px),linear-gradient(#fff6da 0 4px,#8f5a20 4px 8px,#613313 8px); }.sprite-plate img { position:relative; z-index:1; width:106px; max-height:136px; object-fit:contain; object-position:bottom; image-rendering:pixelated; filter:drop-shadow(3px 4px 0 rgb(16 16 24 / .25)); }.card-copy { display:flex; min-width:0; flex-direction:column; padding:1.25rem 1rem .9rem; }.game-title { color:var(--ink); font-family:var(--pixel); font-size:clamp(.8rem,2.6vw,1.1rem); line-height:1.45; white-space:pre-line; }.game-genre { margin-top:.65rem; color:#80501d; font-size:clamp(.78rem,2.6vw,.96rem); font-weight:700; line-height:1.2; }.game-footer { display:flex; align-items:center; gap:.65rem; margin-top:auto; padding-top:.75rem; }.play-chip { padding:.42rem .5rem; border:2px solid var(--ink); color:var(--cream); background:var(--red); box-shadow:2px 2px 0 var(--ink); font-family:var(--pixel); font-size:.48rem; line-height:1; text-transform:uppercase; }.game-meta { color:#655b61; font-family:var(--pixel); font-size:.42rem; text-transform:uppercase; }
.sprite-plate.has-art::after { display:none; }.sprite-plate .box-art { position:absolute; inset:0; z-index:0; width:100%; height:100%; max-height:none; object-fit:cover; object-position:center; filter:none; }
.new-game-slot { min-height:118px; display:grid; place-items:center; align-content:center; gap:.25rem; border:4px dashed #80746a; color:#685e58; background:rgb(255 246 218 / .6); text-align:center; }.new-game-slot span { display:block; width:28px; height:28px; border:3px solid currentColor; font-family:var(--pixel); font-size:1.15rem; line-height:22px; }.new-game-slot strong { font-family:var(--pixel); font-size:.62rem; text-transform:uppercase; }.new-game-slot small { font-family:var(--pixel); font-size:.42rem; text-transform:uppercase; }
.ground { height:112px; border-top:7px solid var(--ink); background:#8f5a20; }.grass { height:20px; border-top:7px solid var(--yellow); border-bottom:5px solid #c47721; background:#f2aa24; }.soil { height:85px; background:repeating-linear-gradient(90deg,transparent 0 43px,rgb(84 45 36 / .42) 43px 49px,transparent 49px 86px),repeating-linear-gradient(0deg,transparent 0 38px,rgb(110 59 38 / .34) 38px 43px),#8f5938; }.no-script { width:min(1120px,calc(100% - 2rem)); margin:2rem auto; padding:1.5rem; border:4px solid var(--ink); background:var(--cream); }.no-script h2 { font-family:var(--pixel); font-size:1rem; text-transform:uppercase; }.no-script li+li { margin-top:.75rem; }.no-script a { color:var(--navy-shadow); font-weight:700; }
@keyframes cloud-drift { to { transform:translateX(-235vw); } }
@media (min-width:721px) { .hud .hi-score{display:inline}.hero{height:clamp(520px,46.5vw,744px);grid-template-columns:minmax(0,1.25fr) minmax(340px,.75fr);gap:2rem;padding:2.5rem max(4rem,calc((100vw - 1460px) / 2))}.hero-copy{width:100%;text-align:left}.wordmark{width:min(100%,690px);margin-left:0}.hero-copy p{max-width:42rem;margin:3.2rem 0 2.5rem;font-size:clamp(.66rem,1.2vw,1.04rem);line-height:1.9}.all-games{display:inline-block;padding:1.2rem 1.8rem;border:5px solid var(--ink);border-radius:7px;color:var(--ink);background:var(--yellow);box-shadow:0 10px 0 var(--ink);font-family:var(--pixel);font-size:.8rem;text-decoration:none;text-transform:uppercase}.all-games:hover{transform:translateY(-3px);box-shadow:0 13px 0 var(--ink)}.all-games:focus-visible{outline:4px solid var(--cream);outline-offset:4px}.hero-chachi{width:min(100%,470px);height:clamp(470px,39vw,635px);margin:0;align-self:center;justify-self:center}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.game-card{display:flex;flex-direction:column;min-height:470px;padding:22px;border-width:7px;box-shadow:0 13px 0 var(--navy-shadow)}.game-card:hover{box-shadow:0 16px 0 var(--navy-shadow)}.card-number{top:31px;left:31px}.sprite-plate{flex:none;height:245px;border:6px solid var(--ink);box-shadow:inset 0 13px rgb(255 255 255 / .18),inset 0 -13px rgb(16 16 24 / .16)}.sprite-plate::after{height:18px}.sprite-plate img{width:210px;max-height:230px}.card-copy{flex:1;padding:1.35rem 0 0}.game-title{font-size:1.02rem;line-height:1.4}.game-genre{margin-top:1.2rem;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}.game-footer{padding-top:1.1rem}.play-chip{padding:.62rem .75rem;border-width:4px;color:var(--ink);background:var(--yellow);font-size:.6rem}.game-meta{margin-left:auto;font-size:.52rem;letter-spacing:.08em}.new-game-slot{min-height:470px;border:7px dashed var(--cream);color:var(--cream);background:rgb(23 44 86 / .2)}.new-game-slot span{width:48px;height:48px;border:0;font-size:2.1rem;line-height:48px}.new-game-slot strong{margin-top:auto;padding-top:8rem;font-size:.72rem}.new-game-slot small{margin-bottom:auto;font-size:.58rem} }
@media (min-width:1040px) { .game-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto}.cloud{animation:none}.game-card,.all-games{transition:none}.game-card:hover,.all-games:hover{transform:none} }