/* School Unblocked Games — blackboard theme */
:root{
  --bg:#0f1419;--bg2:#161d26;--card:#1b242f;--card2:#212c3a;
  --ink:#eef3f8;--muted:#9fb0c0;--line:#2a3745;
  --accent:#ffc83d;--accent-ink:#1a1402;--mint:#39d98a;--blue:#4da3ff;
  --r:14px;--maxw:1200px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 "Outfit","Segoe UI",system-ui,-apple-system,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(900px 400px at 85% -10%,rgba(255,200,61,.07),transparent 60%),
             radial-gradient(700px 400px at -10% 30%,rgba(57,217,138,.05),transparent 60%)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px;position:relative;z-index:1}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:rgba(15,20,25,.92);backdrop-filter:blur(8px);border-bottom:2px dashed var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:14px;min-height:62px;flex-wrap:wrap;padding-top:6px;padding-bottom:6px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.12rem;color:var(--ink);letter-spacing:.2px}
.logo:hover{text-decoration:none}
.logo svg{flex:0 0 auto}
.logo .lg-b{color:var(--accent)}
.nav{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav a{color:var(--muted);padding:7px 11px;border-radius:9px;font-weight:600;font-size:.92rem}
.nav a:hover{color:var(--ink);background:var(--card);text-decoration:none}
.nav a.on{color:var(--accent-ink);background:var(--accent)}
.searchbox{position:relative;flex:1 1 180px;max-width:320px}
.searchbox input{width:100%;padding:9px 13px 9px 36px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;font-size:.92rem}
.searchbox input:focus{outline:2px solid var(--accent);border-color:transparent}
.searchbox .sic{position:absolute;left:12px;top:50%;transform:translateY(-50%);opacity:.55}
.sresults{position:absolute;top:110%;left:0;right:0;background:var(--card2);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 14px 40px rgba(0,0,0,.5);display:none;max-height:330px;overflow-y:auto}
.sresults.open{display:block}
.sresults a{display:flex;gap:10px;align-items:center;padding:8px 12px;color:var(--ink);border-bottom:1px solid var(--line);font-size:.92rem}
.sresults a:last-child{border-bottom:0}
.sresults a:hover,.sresults a.sel{background:var(--card);text-decoration:none}
.sresults img{width:42px;height:28px;object-fit:cover;border-radius:6px}
.sresults .scat{margin-left:auto;color:var(--muted);font-size:.78rem}

/* hero */
.hero{padding:40px 0 10px}
.hero h1{font-size:clamp(1.6rem,4vw,2.5rem);line-height:1.2;margin:0 0 12px;font-weight:800}
.hero h1 em{font-style:normal;color:var(--accent);position:relative;white-space:nowrap}
.hero p.lead{color:var(--muted);max-width:760px;margin:0 0 18px;font-size:1.04rem}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 8px;padding:0;list-style:none}
.badges li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 13px;font-size:.85rem;color:var(--muted);font-weight:600}
.badges li b{color:var(--mint)}

/* sections */
.sec{padding:26px 0 6px}
.sec-head{display:flex;align-items:baseline;gap:14px;margin:0 0 14px}
.sec-head h2{font-size:1.35rem;margin:0;font-weight:800}
.sec-head h2 a{color:var(--ink)}
.sec-head .more{margin-left:auto;color:var(--accent);font-weight:700;font-size:.9rem;white-space:nowrap}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.gcard{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:transform .15s,border-color .15s;display:block;color:var(--ink)}
.gcard:hover{transform:translateY(-4px);border-color:var(--accent);text-decoration:none}
.gcard img{width:100%;aspect-ratio:512/340;object-fit:cover;background:var(--bg2)}
.gcard .gt{padding:9px 11px;font-weight:700;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.gcard .gc{position:absolute;top:8px;left:8px;background:rgba(15,20,25,.82);color:var(--accent);font-size:.7rem;font-weight:700;padding:3px 9px;border-radius:999px;letter-spacing:.3px;text-transform:uppercase}
.gcard .play{position:absolute;right:10px;top:34%;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;opacity:0;transform:scale(.6);transition:all .18s;font-size:1rem}
.gcard:hover .play{opacity:1;transform:scale(1)}

/* chips */
.chips{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.chips a{background:var(--card);border:1px solid var(--line);color:var(--muted);border-radius:999px;padding:7px 15px;font-weight:700;font-size:.88rem}
.chips a:hover{color:var(--accent-ink);background:var(--accent);border-color:var(--accent);text-decoration:none}
.chips a.on{color:var(--accent-ink);background:var(--accent);border-color:var(--accent)}

/* game page */
.crumbs{font-size:.85rem;color:var(--muted);margin:16px 0 10px}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--accent)}
.player{background:#000;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;position:relative}
.player iframe{display:block;width:100%;aspect-ratio:16/9;border:0;min-height:340px}
.pbar{display:flex;align-items:center;gap:12px;background:var(--card);padding:10px 14px;border-top:1px solid var(--line)}
.pbar .pt{font-weight:800}
.pbar button,.pbar a.btn{margin-left:auto;background:var(--accent);color:var(--accent-ink);border:0;border-radius:9px;padding:8px 15px;font:inherit;font-weight:800;cursor:pointer;font-size:.88rem}
.pbar button:hover{filter:brightness(1.08)}
article.gbody{max-width:860px}
article.gbody h2{font-size:1.25rem;margin:26px 0 10px;font-weight:800}
article.gbody p,article.gbody li{color:#c7d3de}
kbd{background:var(--card2);border:1px solid var(--line);border-bottom-width:2px;border-radius:6px;padding:1px 7px;font-size:.84em;font-family:inherit;font-weight:700}

/* content blocks */
.prose{max-width:860px}
.prose h2{font-size:1.3rem;margin:28px 0 10px;font-weight:800}
.prose h3{font-size:1.08rem;margin:20px 0 8px;font-weight:700}
.prose p,.prose li{color:#c7d3de}
.prose ul{padding-left:22px}
.faq{max-width:860px}
.faq details{background:var(--card);border:1px solid var(--line);border-radius:12px;margin:0 0 10px;overflow:hidden}
.faq summary{cursor:pointer;padding:13px 16px;font-weight:700;list-style:none;position:relative}
.faq summary::after{content:"+";position:absolute;right:16px;color:var(--accent);font-weight:800}
.faq details[open] summary::after{content:"\2013"}
.faq .fa{padding:0 16px 14px;color:var(--muted)}

/* blog */
.postgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}
.pcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;flex-direction:column;gap:8px;color:var(--ink)}
.pcard:hover{border-color:var(--accent);text-decoration:none;transform:translateY(-3px)}
.pcard .pk{color:var(--accent);font-size:.75rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase}
.pcard h3{margin:0;font-size:1.03rem;line-height:1.4}
.pcard p{margin:0;color:var(--muted);font-size:.9rem}
.meta{color:var(--muted);font-size:.85rem;margin:6px 0 18px}

/* footer */
.site-foot{margin-top:44px;border-top:2px dashed var(--line);background:var(--bg2)}
.fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:22px;padding:30px 0}
.fgrid h4{margin:0 0 10px;font-size:.95rem;color:var(--accent)}
.fgrid a{display:block;color:var(--muted);font-size:.88rem;padding:3px 0}
.fgrid a:hover{color:var(--ink)}
.fbot{border-top:1px solid var(--line);padding:16px 0 22px;color:var(--muted);font-size:.84rem;display:flex;gap:14px;flex-wrap:wrap}
.langs{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 0}
.langs a{font-size:.82rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 11px;color:var(--muted)}
.langs a:hover{color:var(--accent);text-decoration:none}

/* misc */
.btn-acc{display:inline-block;background:var(--accent);color:var(--accent-ink);font-weight:800;border-radius:11px;padding:11px 22px}
.btn-acc:hover{text-decoration:none;filter:brightness(1.07)}
.notice{background:var(--card);border:1px dashed var(--line);border-radius:12px;padding:12px 16px;color:var(--muted);font-size:.9rem}
.skip{position:absolute;left:-9999px}
.skip:focus{position:fixed;left:12px;top:12px;background:var(--accent);color:var(--accent-ink);padding:10px 16px;border-radius:9px;z-index:99}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
@media (max-width:700px){
  .nav{display:none}
  .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
  .hero{padding-top:24px}
  .player iframe{min-height:62vh}
}