/* Unblocked Games 76 — static rebuild */
:root{
  --bg:#070b13;--bg2:#0b1120;--card:#101a2e;--card-hi:#16233f;
  --mint:#2dd4a7;--mint-soft:rgba(45,212,167,.14);
  --indigo:#818cf8;--amber:#fbbf24;
  --text:#eef2f9;--text2:#8da0c0;--muted:#51648a;
  --border:#1b2a47;--r:14px;--maxw:1240px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:'Source Sans 3',system-ui,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;min-height:100vh}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:
 radial-gradient(ellipse at 20% 10%,rgba(45,212,167,.05),transparent 50%),
 radial-gradient(ellipse at 85% 30%,rgba(129,140,248,.05),transparent 50%)}
a{color:var(--mint);text-decoration:none}
a:hover{color:#5eead4}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--mint);outline-offset:2px;border-radius:4px}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,11,19,.92);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.hdr{display:flex;align-items:center;gap:14px;padding:10px 16px;max-width:var(--maxw);margin:0 auto}
.logo{font-family:'Exo 2',sans-serif;font-weight:800;font-size:1.22rem;color:var(--text);white-space:nowrap}
.logo span{color:var(--mint)}
.search{flex:1;max-width:430px;position:relative;margin-left:auto}
.search input{width:100%;background:var(--card);border:1px solid var(--border);border-radius:10px;padding:9px 14px 9px 38px;color:var(--text);font:inherit;font-size:.92rem}
.search input::placeholder{color:var(--muted)}
.search::before{content:'\1F50D';position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:.85rem;opacity:.7}
.search-results{position:absolute;top:110%;left:0;right:0;background:var(--bg2);border:1px solid var(--border);border-radius:10px;max-height:330px;overflow-y:auto;display:none;z-index:60;box-shadow:0 14px 40px rgba(0,0,0,.5)}
.search-results.open{display:block}
.search-results a{display:flex;align-items:center;gap:10px;padding:8px 12px;color:var(--text);font-size:.9rem;border-bottom:1px solid rgba(255,255,255,.03)}
.search-results a:hover{background:var(--card-hi)}
.search-results img{width:30px;height:30px;border-radius:6px;object-fit:cover}
.topnav{display:flex;gap:16px;align-items:center}
.topnav a{color:var(--text2);font-weight:600;font-size:.9rem}
.topnav a:hover{color:var(--text)}
.navtgl{display:none;background:none;border:1px solid var(--border);color:var(--text);font-size:1.15rem;border-radius:8px;padding:3px 10px;cursor:pointer}

/* category chip bar */
.chips{border-bottom:1px solid var(--border);background:var(--bg2)}
.chips-in{display:flex;gap:8px;overflow-x:auto;padding:9px 16px;max-width:var(--maxw);margin:0 auto;scrollbar-width:none}
.chips-in::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;background:var(--card);border:1px solid var(--border);color:var(--text2);padding:5px 13px;border-radius:999px;font-size:.82rem;font-weight:600;white-space:nowrap}
.chip:hover{color:var(--text);border-color:var(--mint)}
.chip.on{background:var(--mint-soft);border-color:var(--mint);color:var(--mint)}

/* headings & sections */
h1{font-family:'Exo 2',sans-serif;font-weight:800;line-height:1.15}
h2,h3{font-family:'Exo 2',sans-serif;line-height:1.25}
.sec{margin:30px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.sec-head h2{font-size:1.25rem}
.sec-head h2 em{color:var(--mint);font-style:normal}
.sec-head a{font-size:.85rem;font-weight:600}

/* game grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:13px}
.gcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;transition:transform .15s,border-color .15s;position:relative}
.gcard:hover{transform:translateY(-3px);border-color:var(--mint)}
.gcard img{width:100%;aspect-ratio:1;object-fit:cover}
.gcard .ph{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-family:'Exo 2',sans-serif;font-size:1.9rem;font-weight:800;background:linear-gradient(135deg,#16233f,#1b2a47);color:var(--mint)}
.gcard b{display:block;padding:8px 9px;font-size:.8rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard a{position:absolute;inset:0}

/* hero */
.hero{padding:34px 0 8px;text-align:center}
.hero h1{font-size:clamp(1.55rem,4.4vw,2.6rem);background:linear-gradient(120deg,#fff 15%,var(--mint) 55%,var(--indigo));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}
.hero p{color:var(--text2);max-width:720px;margin:0 auto;font-size:1rem}
.badges{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.badge{background:var(--card);border:1px solid var(--border);border-radius:999px;padding:4px 13px;font-size:.76rem;font-weight:600;color:var(--text2)}
.badge.hot{border-color:var(--mint);color:var(--mint)}

/* breadcrumbs */
.crumbs{font-size:.82rem;color:var(--muted);margin:16px 0 6px}
.crumbs a{color:var(--text2)}
.crumbs span{margin:0 6px;color:var(--muted)}

/* player */
.player{background:var(--card);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:14px 0}
.player-frame{position:relative;width:100%;aspect-ratio:16/9;background:#02050a}
.player-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.poster{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at center,#0e1a30,#02050a);cursor:pointer;border:0;width:100%;color:var(--text)}
.poster img{width:108px;height:108px;border-radius:18px;object-fit:cover;box-shadow:0 10px 36px rgba(0,0,0,.6)}
.poster .pbtn{background:linear-gradient(120deg,var(--mint),#14b8a6);color:#04281e;font-family:'Exo 2',sans-serif;font-weight:800;font-size:1.02rem;padding:12px 38px;border-radius:999px;box-shadow:0 6px 26px rgba(45,212,167,.35)}
.poster small{color:var(--text2);font-size:.78rem}
.player-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;border-top:1px solid var(--border);flex-wrap:wrap}
.player-bar .meta{font-size:.8rem;color:var(--text2)}
.player-bar .acts{display:flex;gap:8px}
.pb-btn{background:var(--card-hi);border:1px solid var(--border);color:var(--text);font:inherit;font-size:.8rem;font-weight:600;padding:6px 13px;border-radius:8px;cursor:pointer}
.pb-btn:hover{border-color:var(--mint);color:var(--mint)}

/* content blocks */
.content{max-width:860px}
.content h2{font-size:1.3rem;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.content h3{font-size:1.05rem;margin:20px 0 8px;color:var(--mint)}
.content p{color:var(--text2);margin-bottom:12px;font-size:.95rem}
.content ul,.content ol{color:var(--text2);padding-left:22px;margin-bottom:12px;font-size:.95rem}
.content li{margin-bottom:5px}
.content strong{color:var(--text)}
.content a{border-bottom:1px solid rgba(45,212,167,.3)}
.ibox{background:var(--mint-soft);border:1px solid rgba(45,212,167,.3);border-radius:var(--r);padding:14px 18px;margin:14px 0}
.ibox h2,.ibox h3{border:0;margin:0 0 6px;color:var(--mint);font-size:1rem}
.ibox p{margin:0;color:var(--text)}

/* FAQ */
.faq{margin:14px 0}
.faq details{background:var(--card);border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.faq summary{padding:13px 16px;font-weight:700;cursor:pointer;font-size:.93rem;list-style:none;position:relative;padding-right:36px}
.faq summary::after{content:'+';position:absolute;right:15px;top:50%;transform:translateY(-50%);color:var(--mint);font-size:1.15rem;font-weight:800}
.faq details[open] summary::after{content:'\2212'}
.faq summary::-webkit-details-marker{display:none}
.faq .fa{padding:0 16px 13px;color:var(--text2);font-size:.9rem;line-height:1.7}

/* ads */
.adbox{margin:20px auto;text-align:center}
.adbox .adlbl{font-size:.56rem;color:var(--muted);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}

/* blog cards */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:16px}
.bcard{background:var(--card);border:1px solid var(--border);border-radius:var(--r);padding:20px;transition:border-color .15s}
.bcard:hover{border-color:var(--mint)}
.bcard h2,.bcard h3{font-size:1.02rem;margin-bottom:8px}
.bcard p{color:var(--text2);font-size:.86rem}
.bcard .more{display:inline-block;margin-top:10px;font-size:.82rem;font-weight:700}

/* language links */
.langs{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.langs a{background:var(--card);border:1px solid var(--border);border-radius:8px;padding:5px 12px;font-size:.8rem;color:var(--text2)}
.langs a:hover{border-color:var(--mint);color:var(--mint)}

/* footer */
.site-footer{border-top:1px solid var(--border);background:var(--bg2);margin-top:44px;padding:30px 0 22px}
.f-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:22px;margin-bottom:20px}
.f-cols h3{font-size:.82rem;text-transform:uppercase;letter-spacing:1px;color:var(--text);margin-bottom:9px}
.f-cols a{display:block;color:var(--text2);font-size:.85rem;padding:2.5px 0}
.f-cols a:hover{color:var(--mint)}
.f-note{color:var(--muted);font-size:.76rem;text-align:center;border-top:1px solid var(--border);padding-top:14px}
.f-note a{color:var(--text2)}

@media(max-width:860px){
  .topnav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg2);border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;padding:14px 18px;gap:12px}
  .topnav.open{display:flex}
  .navtgl{display:block}
  .grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:9px}
  .gcard b{font-size:.72rem;padding:6px 7px}
  .hdr{gap:9px}
  .search{max-width:none}
}