*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --dk:#0f380f;--mid:#306230;--gm:#8bac0f;--lt:#9bbc0f;--wh:#e8f8e0;
  --cy:#00e5ff;--pk:#ff4da6;--ye:#ffe600;--pu:#b24bff;--re:#ff3a3a;
  --mw:1280px;--nh:56px;
  --pxb:4px solid #0a0a0a;--pxs:4px 4px 0 #0a0a0a;--pxsl:6px 6px 0 #0a0a0a;
  font-size:10px;
}
html{scroll-behavior:smooth}
body{
  font-family:'Press Start 2P','Courier New',monospace;
  background:var(--dk);
  color:var(--wh);
  min-height:100vh;
  background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.04) 0px,rgba(0,0,0,.04) 1px,transparent 1px,transparent 4px);
}
a{color:var(--cy);text-decoration:none}
a:hover{color:var(--ye)}
a:focus-visible{outline:2px solid var(--ye);outline-offset:2px}
img{max-width:100%;height:auto}

/* Nav */
.pixel-nav{
  height:var(--nh);background:var(--dk);border-bottom:4px solid var(--mid);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;position:sticky;top:0;z-index:100;box-shadow:0 4px 0 #000
}
.nav-logo{display:flex;align-items:center;gap:.8rem;font-size:1.1rem;color:var(--ye);text-shadow:2px 2px 0 #000;white-space:nowrap}
.nav-logo:hover{color:var(--cy)}
.nav-logo-icon{font-size:2rem}
.nav-links{display:flex;gap:2rem}
.nav-link{font-size:.9rem;color:var(--gm);padding:.4rem .6rem;border:2px solid transparent;transition:color .15s,border-color .15s}
.nav-link:hover{color:var(--ye);border-color:var(--gm)}

/* Buttons */
.pixel-btn{
  display:inline-block;font-family:'Press Start 2P',monospace;font-size:.9rem;
  padding:.9rem 1.8rem;border:var(--pxb);box-shadow:var(--pxs);
  cursor:pointer;text-align:center;background:var(--mid);color:var(--wh);
  transition:transform .08s,box-shadow .08s;text-decoration:none;line-height:1
}
.pixel-btn:hover{transform:translate(-2px,-2px);box-shadow:var(--pxsl);color:var(--ye)}
.pixel-btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 #0a0a0a}
.pixel-btn--hero{background:var(--mid);color:var(--ye);font-size:1.1rem;padding:1.2rem 2.4rem;border-color:var(--ye);box-shadow:4px 4px 0 var(--ye)}
.pixel-btn--hero:hover{background:var(--ye);color:#000;box-shadow:6px 6px 0 var(--ye)}
.pixel-btn--play{width:100%;background:var(--c,var(--mid));color:#fff;border-color:#000;font-size:.75rem;padding:.8rem 1rem}
.pixel-btn--play:hover{filter:brightness(1.2);color:#fff}
.pixel-btn--sec{background:transparent;border-color:var(--gm);color:var(--gm)}
.pixel-btn--sec:hover{border-color:var(--cy);color:var(--cy)}
.pixel-btn--sm{font-size:.7rem;padding:.5rem 1rem;background:var(--mid);color:var(--wh)}

/* Hero */
.hero{
  position:relative;background:var(--dk);padding:6rem 2rem 4rem;
  text-align:center;overflow:hidden;min-height:480px;
  display:flex;align-items:center;justify-content:center
}
.hero__grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(48,98,48,.18) 1px,transparent 1px),
    linear-gradient(90deg,rgba(48,98,48,.18) 1px,transparent 1px);
  background-size:32px 32px
}
.hero__content{position:relative;z-index:1}
.hero__chars{display:flex;justify-content:center;gap:3rem;font-size:3.5rem;margin-bottom:2rem}
.hero__c{display:inline-block;filter:drop-shadow(0 0 8px var(--cy))}
.c1{animation:bop 1.2s ease-in-out infinite}
.c2{animation:bop 1.2s ease-in-out infinite .4s}
.c3{animation:bop 1.2s ease-in-out infinite .8s}
@keyframes bop{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.hero__title{
  font-size:clamp(2.4rem,6vw,5rem);color:var(--ye);
  text-shadow:4px 4px 0 #000,-2px -2px 0 var(--mid);
  line-height:1.2;margin-bottom:1.5rem;letter-spacing:.05em
}
.hero__sub{font-size:clamp(.6rem,1.5vw,.82rem);color:var(--gm);letter-spacing:.1em;margin-bottom:2.5rem}
.hero__stats{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:2.5rem}
.stat{display:flex;flex-direction:column;align-items:center;gap:.4rem;border:2px solid var(--mid);padding:1rem 1.5rem;background:rgba(48,98,48,.2)}
.stat__n{font-size:1.6rem;color:var(--cy);text-shadow:2px 2px 0 #000}
.stat__l{font-size:.6rem;color:var(--gm)}

/* Sections & layout */
.section{padding:4rem 2rem}
.section--dark{background:#111}
.section--mid{background:#0d1f0d}
.wrap{max-width:var(--mw);margin:0 auto}
.wrap--narrow{max-width:720px}
.s-title{font-size:clamp(.9rem,2vw,1.25rem);color:var(--ye);text-shadow:2px 2px 0 #000;margin-bottom:2.5rem;display:flex;align-items:center;gap:1rem;letter-spacing:.08em}
.s-title span{font-size:1.8rem}

/* Games grid */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:2rem}
.games-grid [data-cat].off{display:none}

/* Game card */
.game-card{
  background:#1a1a1a;border:var(--pxb);box-shadow:var(--pxsl);
  display:flex;flex-direction:column;
  transition:transform .1s,box-shadow .1s
}
.game-card:hover{transform:translate(-3px,-3px);box-shadow:9px 9px 0 #0a0a0a}
.game-card__thumb{
  height:160px;display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;
  background-image:repeating-conic-gradient(rgba(0,0,0,.1) 0% 25%,transparent 0% 50%);
  background-size:8px 8px
}
.game-card__emoji{font-size:5rem;position:relative;z-index:1;filter:drop-shadow(0 3px 8px rgba(0,0,0,.8));line-height:1}
.game-card__badge{position:absolute;top:.5rem;right:.5rem;font-size:.5rem;background:rgba(0,0,0,.8);color:var(--cy);border:1px solid var(--cy);padding:.25rem .5rem}
.game-card__body{padding:1.2rem;display:flex;flex-direction:column;gap:.8rem;flex:1}
.game-card__title{font-size:.85rem;color:var(--wh);text-shadow:1px 1px 0 #000;line-height:1.4}
.game-card__desc{font-size:.58rem;color:#aaa;line-height:1.9;flex:1}
.game-card__ctrl{font-size:.52rem;color:var(--gm)}

/* Category tabs */
.cat-tabs{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem}
.cat-tab{font-family:'Press Start 2P',monospace;font-size:.6rem;padding:.6rem .9rem;border:2px solid var(--mid);background:transparent;color:var(--gm);cursor:pointer;transition:color .1s,border-color .1s}
.cat-tab:hover{border-color:var(--cy);color:var(--cy)}
.cat-tab--on{background:var(--mid);border-color:var(--ye);color:var(--ye)}
.cat-tab__n{margin-left:.4rem;background:rgba(255,255,255,.1);padding:.1rem .3rem;font-size:.55rem}

/* Category strip */
.cat-strip{display:flex;flex-wrap:wrap;gap:1rem}
.cat-pill{display:flex;align-items:center;gap:.8rem;padding:.8rem 1.4rem;border:2px solid var(--mid);background:rgba(48,98,48,.15);color:var(--gm);font-size:.68rem;transition:border-color .15s,color .15s,background .15s}
.cat-pill:hover{border-color:var(--cy);color:var(--cy);background:rgba(0,229,255,.05)}
.cat-pill__n{font-size:.85rem;color:var(--ye)}

/* About box */
.about-box{text-align:center;padding:3rem 2rem;border:var(--pxb);background:rgba(48,98,48,.1)}
.about-box__icon{font-size:4rem;display:block;margin-bottom:1.5rem}
.about-box__title{font-size:1.1rem;color:var(--ye);text-shadow:2px 2px 0 #000;margin-bottom:1.5rem}
.about-box__text{font-size:.62rem;color:#ccc;line-height:2.2;margin-bottom:1rem}

/* Page header */
.page-hdr{background:var(--dk);padding:3rem 2rem 2rem;border-bottom:4px solid var(--mid);text-align:center}
.page-hdr__title{font-size:clamp(1.2rem,4vw,2.2rem);color:var(--ye);text-shadow:3px 3px 0 #000;margin-bottom:.8rem}
.page-hdr__sub{font-size:.62rem;color:var(--gm)}

/* Play page */
.play-bar{display:flex;align-items:center;gap:1.5rem;padding:.8rem 1.5rem;background:#111;border-bottom:3px solid var(--mid);flex-wrap:wrap}
.play-back{font-size:.65rem;color:var(--gm);border:1px solid var(--mid);padding:.35rem .7rem;white-space:nowrap}
.play-back:hover{color:var(--cy);border-color:var(--cy)}
.play-title{font-size:.8rem;color:var(--ye);text-shadow:1px 1px 0 #000;flex:1;min-width:120px}
.play-meta{display:flex;gap:.8rem;align-items:center}
.play-badge{font-size:.52rem;color:var(--cy);border:1px solid var(--cy);padding:.2rem .4rem}
.play-src{font-size:.52rem;color:var(--gm);border:1px solid var(--mid);padding:.2rem .4rem}
.play-src--custom{color:var(--pk);border-color:var(--pk)}
.play-src:hover{color:var(--ye)}
.play-wrap{flex:1;background:#000;display:flex;align-items:stretch;min-height:400px}
.play-frame{width:100%;height:100%;border:none;min-height:560px;display:block}
.play-info{display:flex;align-items:center;justify-content:space-between;padding:.6rem 1.5rem;background:#111;border-top:2px solid var(--mid);gap:1rem;flex-wrap:wrap}
.play-ctrl{font-size:.58rem;color:var(--gm)}
.play-desc-row{padding:1.2rem 1.5rem;background:#0d0d0d;border-top:2px solid #222;display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap}
.play-desc{font-size:.58rem;color:#aaa;line-height:2;flex:1;min-width:200px}
.play-oss{font-size:.52rem;color:var(--gm);white-space:nowrap}
.play-oss a{color:var(--cy)}

/* 404 */
.err-page{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - var(--nh) - 80px);padding:4rem 2rem;text-align:center}
.err-page__inner{text-align:center}
.err-page__icon{font-size:6rem;display:block;margin-bottom:2rem}
.err-page__title{font-size:2rem;color:var(--re);text-shadow:3px 3px 0 #000;margin-bottom:1.5rem}
.err-page__sub{font-size:.7rem;color:var(--gm);margin-bottom:2rem}

/* Footer */
.pixel-footer{background:var(--dk);border-top:4px solid var(--mid);padding:1.5rem 2rem;text-align:center}
.pixel-footer__t{font-size:.68rem;color:var(--gm);margin-bottom:.4rem}
.pixel-footer__s{font-size:.52rem;color:#444}

/* Responsive */
@media(max-width:640px){
  :root{font-size:9px}
  .hero{padding:3rem 1rem 2rem;min-height:340px}
  .hero__title{font-size:2.4rem}
  .hero__chars{gap:2rem;font-size:2.8rem}
  .hero__stats{gap:1.5rem}
  .section{padding:2.5rem 1rem}
  .pixel-nav{padding:0 1rem}
  .nav-logo span:last-child{display:none}
  .games-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:1.2rem}
  .cat-tabs{gap:.4rem}
  .cat-tab{font-size:.55rem;padding:.5rem .7rem}
  .play-bar{padding:.5rem 1rem;gap:.6rem}
  .play-frame{min-height:360px}
}
@media(max-width:380px){
  .games-grid{grid-template-columns:1fr}
  .hero__title{font-size:1.9rem}
}