:root{--bg:#0E0B2B;--panel:#1A1450;--panel2:#251B6B;--text:#F2EEFF;--pink:#FF2E93;--cyan:#19E3FF;--yellow:#FFE600;--violet:#7B2FFF;--headerH:74px}
*{box-sizing:border-box}
html{scroll-padding-top:90px}
body{margin:0;color:var(--text);font-family:"Chakra Petch",system-ui,sans-serif;font-weight:500;line-height:1.5;min-height:100vh;
background:radial-gradient(1.5px 1.5px at 20px 30px,#fff8,transparent),radial-gradient(1.5px 1.5px at 90px 120px,#19E3FF99,transparent),radial-gradient(1px 1px at 150px 60px,#fff6,transparent),radial-gradient(ellipse at 50% -10%,#3b1a8f 0%,transparent 60%),var(--bg);
background-size:180px 160px,180px 160px,180px 160px,100% 100%,auto;background-attachment:scroll,scroll,scroll,fixed,scroll}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.14) 0 1px,transparent 1px 3px)}
h1,h2,h3,.px{font-family:"Press Start 2P","Chakra Petch",monospace;font-weight:400}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

/* header */
header{position:sticky;top:0;z-index:10;background:#0a0720;border-bottom:4px solid var(--pink);box-shadow:0 4px 0 var(--violet),0 8px 24px #ff2e9355}
.bar{display:flex;align-items:center;gap:18px;padding:12px 28px;flex-wrap:wrap}
.logo{font-family:"Press Start 2P",monospace;font-size:1.05rem;text-decoration:none;color:var(--yellow);text-shadow:0 0 8px #ffe600aa,3px 3px 0 var(--pink);display:flex;align-items:center;gap:12px}
.mascot{display:inline-flex;filter:drop-shadow(0 0 6px #19e3ffaa)}
.search{position:relative;flex:1;min-width:180px;max-width:420px;margin-left:auto}
.search input{width:100%;padding:11px 14px;font:inherit;font-weight:700;color:var(--cyan);background:#07051a;border:3px solid var(--cyan);border-radius:4px;box-shadow:0 0 10px #19e3ff55 inset}
.search input::placeholder{color:#19e3ff99}
.results{display:none;position:absolute;left:0;right:0;top:100%;margin-top:6px;background:#07051a;border:3px solid var(--cyan);border-radius:4px;z-index:20}
.results.on{display:block}
.results a{display:flex;justify-content:space-between;gap:10px;padding:10px 14px;text-decoration:none;font-weight:700}
.results a:hover,.results a:focus-visible{background:var(--panel2)}
.results small{color:#c9bfff;font-weight:500}
.results p{margin:0;padding:12px 14px}

/* ticker */
.ticker{background:#12082e;border-bottom:3px solid var(--violet);overflow:hidden;white-space:nowrap}
.ticker-track{display:inline-flex;padding:8px 0;animation:tick 45s linear infinite}
.ticker-track span{font-family:"Press Start 2P",monospace;font-size:.55rem;color:var(--yellow);text-shadow:0 0 8px #ffe60088}
@keyframes tick{to{transform:translateX(-50%)}}

/* layout and sidebar */
.layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:0}
.layout.is-collapsed{grid-template-columns:88px minmax(0,1fr)}
.side{position:sticky;top:var(--headerH);align-self:start;height:calc(100vh - var(--headerH));overflow-y:auto;padding:18px 14px;background:#120c3d;border-right:4px solid var(--violet);box-shadow:4px 0 24px #7b2fff44}
.side-top{display:flex;align-items:center;justify-content:space-between;margin:2px 4px 10px}
.side h2{margin:0 4px;font-size:.6rem;color:#b9acff}
.collapse{font:inherit;font-weight:700;color:var(--cyan);background:#07051a;border:3px solid var(--violet);border-radius:4px;width:34px;height:30px;cursor:pointer}
.collapse:hover{border-color:var(--cyan)}
.nav{display:flex;flex-direction:column;gap:8px}
.nav a,.nav .navbtn{display:flex;align-items:center;gap:14px;width:100%;padding:12px 14px;text-decoration:none;text-align:left;font:inherit;font-weight:700;border:3px solid transparent;border-radius:4px;color:var(--text);background:none;cursor:pointer}
.nav .ic{font-size:1.25rem;width:28px;text-align:center;flex:0 0 auto}
.nav a:hover,.nav .navbtn:hover{background:var(--panel2);border-color:var(--violet)}
.nav a[aria-current="page"]{background:var(--pink);border-color:#fff;color:#fff;box-shadow:0 0 14px #ff2e9399}
.nav hr{border:0;border-top:3px dashed #3b2aa8;margin:8px 4px;width:calc(100% - 8px)}
.layout.is-collapsed .lb,.layout.is-collapsed .side h2{display:none}
.layout.is-collapsed .side-top{justify-content:center}
.layout.is-collapsed .nav a,.layout.is-collapsed .nav .navbtn{justify-content:center;padding:10px 0}
main{min-width:0;padding:32px 40px 64px}

/* sections */
.sec{margin:0 0 52px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 22px}
.sec-head h1,.sec-head h2{margin:0;font-size:.95rem;line-height:1.5;color:var(--cyan);text-shadow:0 0 10px #19e3ff88}
.sec-head a{font-weight:700;color:var(--yellow);text-decoration:none}
.sec-head a:hover{text-decoration:underline}
.empty{padding:44px 28px;text-align:center;font-size:1.05rem;background:#120c3d;border:4px dashed var(--violet);border-radius:8px}
.empty b{display:block;margin-bottom:10px;font-family:"Press Start 2P",monospace;font-weight:400;font-size:.8rem;color:var(--yellow)}

/* tiles */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:28px}
.tile{--c:var(--cyan);display:block;position:relative;text-decoration:none;background:var(--panel);border:4px solid var(--c);border-radius:6px;box-shadow:0 0 0 2px #000,0 0 14px color-mix(in srgb,var(--c) 55%,transparent);transition:transform .1s,box-shadow .1s}
.tile:hover,.tile:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 2px #000,0 0 28px var(--c)}
.thumb{aspect-ratio:4/3;display:grid;place-items:center;font-size:3.4rem;position:relative;border-bottom:4px solid var(--c);overflow:hidden}
.thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.thumb::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.22) 0 2px,transparent 2px 4px);pointer-events:none}
.thumb::before{content:"";position:absolute;inset:0;background:rgba(5,3,15,.62);opacity:0;transition:opacity .12s;z-index:1}
.playbtn{position:absolute;left:50%;top:50%;z-index:2;transform:translate(-50%,-50%) scale(.85);opacity:0;transition:opacity .12s,transform .12s;font-family:"Press Start 2P",monospace;font-size:.7rem;white-space:nowrap;color:#1b0a00;background:var(--yellow);padding:12px 14px;border:3px solid #000;border-radius:4px;box-shadow:0 4px 0 #b39e00,0 0 18px #ffe600aa}
.tile:hover .thumb::before,.tile:focus-visible .thumb::before{opacity:1}
.tile:hover .playbtn,.tile:focus-visible .playbtn{opacity:1;transform:translate(-50%,-50%) scale(1)}
.meta{padding:14px 16px 16px}
.meta h3{margin:0 0 7px;font-size:.72rem;line-height:1.6}
.meta span{font-size:.88rem;color:#c9bfff}
.badges{position:absolute;top:8px;left:8px;z-index:3;display:flex;gap:6px;flex-wrap:wrap}
.badge{font-family:"Press Start 2P",monospace;font-size:.5rem;padding:5px 6px;border:2px solid #000;color:#000;background:var(--yellow)}
.b-new{background:var(--cyan)}.b-hot{background:var(--pink);color:#fff}.b-top{background:var(--violet);color:#fff}.b-test{background:#fff}
.rank{position:absolute;top:8px;right:8px;z-index:3;font-family:"Press Start 2P",monospace;font-size:.75rem;color:var(--yellow);background:#000;border:3px solid var(--yellow);padding:6px 8px}
.mosaic{grid-template-columns:repeat(4,minmax(0,1fr))}
.mosaic .tile:first-child{grid-column:span 2;grid-row:span 2;display:flex;flex-direction:column}
.mosaic .tile:first-child .thumb{flex:1;aspect-ratio:auto;min-height:200px;font-size:6rem}
.mosaic .tile:first-child .meta h3{font-size:.85rem}

/* ads */
.ad{margin:0 auto 44px;max-width:100%;text-align:center;overflow:hidden}
.ad.ph{display:grid;place-items:center;border:3px dashed #3b2aa8;background:#120c3d;color:#8f84d6;font-family:"Press Start 2P",monospace;font-size:.55rem;line-height:2;padding:12px}
.ad-banner.ph{min-height:90px;max-width:728px}
.ad-side.ph{width:300px;max-width:100%;min-height:250px;margin:0 auto 26px}

/* game page */
.gamewrap{display:grid;grid-template-columns:minmax(0,1fr) 370px;gap:32px;align-items:start}
.rec{position:sticky;top:calc(var(--headerH) + 24px);max-height:calc(100vh - var(--headerH) - 48px);overflow-y:auto;padding:8px 12px 14px 8px}
.rec h2{margin:0 0 14px;font-size:.8rem;color:var(--cyan);text-shadow:0 0 10px #19e3ff88}
.recgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.rec .ad{margin-bottom:26px}
.rec .thumb{font-size:2.6rem}
.rec .meta{padding:10px 12px 12px}
.rec .meta h3{font-size:.62rem}
.rec .playbtn{font-size:.55rem;padding:9px 10px}
.back{display:inline-block;margin:0 0 20px;font-weight:700;color:var(--cyan)}
.cab{margin:0 0 40px;background:linear-gradient(#2a1f7a,#160f4a);border:4px solid #000;border-radius:18px 18px 8px 8px;box-shadow:0 0 0 4px var(--violet),0 0 40px #7b2fff77;overflow:hidden}
.marquee{padding:14px 16px;text-align:center;background:#07051a;border-bottom:4px solid #000}
.marquee h1{margin:0;font-size:clamp(.9rem,2.2vw,1.35rem);line-height:1.4;color:var(--yellow);text-shadow:0 0 10px #ffe600aa,3px 3px 0 var(--pink)}
.bezel{margin:16px;padding:10px;background:#05030f;border:4px solid #000;border-radius:12px;box-shadow:0 0 0 3px #3b2aa8 inset}
.screen{position:relative;aspect-ratio:16/9;max-height:78vh;background:#000;border-radius:6px;overflow:hidden;box-shadow:0 0 22px #19e3ff55}
.screen iframe{width:100%;height:100%;border:0;display:block}
.coin{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:16px;background-color:#0b0626;background-size:cover;background-position:center}
.coin-emoji{font-size:clamp(2.4rem,8vw,4.4rem);line-height:1}
.coin .px{margin:0;font-size:clamp(.8rem,2.6vw,1.5rem);color:var(--yellow);text-shadow:0 0 12px #ffe600aa,3px 3px 0 var(--pink)}
.coin .credit{margin:0;font-family:"Press Start 2P",monospace;font-size:.55rem;color:var(--cyan)}
.start{font-family:"Press Start 2P",monospace;font-size:.85rem;color:#1b0a00;background:var(--yellow);padding:16px 22px;border:4px solid #fff;border-radius:4px;box-shadow:0 6px 0 #b39e00,0 0 22px #ffe60088;cursor:pointer}
.start:active{transform:translateY(4px);box-shadow:0 2px 0 #b39e00}
.blink{animation:blink 1.1s steps(2,start) infinite}
@keyframes blink{to{opacity:.35}}
.panel{display:flex;align-items:center;justify-content:center;gap:16px;padding:18px 18px 26px;background:#120c3d;border-top:4px solid #000;flex-wrap:wrap}
.stick{width:54px;height:54px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ff7fbd,var(--pink) 45%,#8d0a4b);border:3px solid #000;box-shadow:0 8px 0 #3a0a24,0 0 14px #ff2e9399}
.abtn{font-family:"Press Start 2P",monospace;font-size:.62rem;color:#10062a;padding:14px 18px;border:4px solid #000;border-radius:999px;cursor:pointer}
.abtn:active{transform:translateY(4px);box-shadow:0 1px 0 #000}
.abtn.y{background:var(--yellow);box-shadow:0 5px 0 #b39e00,0 0 16px #ffe60077}
.abtn.p{background:var(--pink);color:#fff;box-shadow:0 5px 0 #a3125f,0 0 16px #ff2e9377}
.abtn.p[aria-pressed="true"]{background:#fff;color:var(--pink)}
.abtn.c{background:var(--cyan);box-shadow:0 5px 0 #0a8ea3,0 0 16px #19e3ff77}
.dots{display:flex;gap:12px}
.dots b{width:30px;height:30px;border-radius:50%;border:3px solid #000;box-shadow:0 5px 0 #000}
.dots b:nth-child(1){background:var(--cyan)}.dots b:nth-child(2){background:var(--violet)}
.info{margin:0 0 30px;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:26px}
.info>div{background:#120c3d;border:4px solid var(--violet);border-radius:8px;padding:20px 22px}
.info h2{margin:0 0 10px;font-size:.7rem;color:var(--cyan)}
.info p{margin:0}
.tags{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px}
.tag{font-weight:700;font-size:.9rem;padding:6px 14px;border:3px solid var(--violet);border-radius:999px;text-decoration:none;background:#120c3d}
a.tag:hover,a.tag:focus-visible{border-color:var(--cyan);color:var(--cyan)}

footer{border-top:4px solid var(--violet);background:#0a0720;padding:32px 28px 52px;font-size:.95rem;color:#c9bfff;text-align:center}

@media (prefers-reduced-motion:reduce){.tile,.playbtn,.thumb::before{transition:none}.tile:hover{transform:none}.blink,.ticker-track{animation:none}}
@media (max-width:1280px){
  .gamewrap{grid-template-columns:minmax(0,1fr)}
  .rec{position:static;max-height:none;overflow:visible;padding:0}
  .recgrid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .ad-side.ph{width:100%;max-width:300px;margin:0 0 26px}
}
@media (max-width:860px){
  .layout,.layout.is-collapsed{grid-template-columns:minmax(0,1fr)}
  .side{position:static;height:auto;overflow:visible;padding:10px 14px;border-right:0;border-bottom:4px solid var(--violet);box-shadow:none}
  main{padding:22px 16px 56px}
  .side-top{display:none}
  .nav{flex-direction:row;overflow-x:auto;gap:8px;padding-bottom:4px}
  .nav a,.nav .navbtn,.layout.is-collapsed .nav a,.layout.is-collapsed .nav .navbtn{flex:0 0 auto;width:auto;padding:8px 12px;white-space:nowrap;justify-content:flex-start}
  .layout.is-collapsed .lb{display:inline}
  .nav hr{display:none}
  .mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mosaic .tile:first-child{grid-row:auto}
  .mosaic .tile:first-child .thumb{aspect-ratio:16/9;flex:none;min-height:0;font-size:4rem}
}
@media (max-width:560px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.thumb{font-size:2.4rem}.meta{padding:10px 12px 12px}.meta h3{font-size:.6rem}
  .search{max-width:none;margin-left:0;flex-basis:100%}.logo{font-size:.9rem}.bezel{margin:10px;padding:8px}
  .bar{padding:10px 14px}main{padding:18px 14px 48px}.abtn{font-size:.55rem;padding:12px 14px}
}

/* legal pages, footer links, report link */
.legal{max-width:760px}
.legal h1{font-size:1rem;line-height:1.6;color:var(--cyan);margin:0 0 20px;text-shadow:0 0 10px #19e3ff88}
.legal h2{font-size:.72rem;line-height:1.6;color:var(--yellow);margin:26px 0 10px}
.legal p,.legal li{font-size:1.05rem}
.legal a{color:var(--cyan)}
.flinks{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.flinks a{font-weight:700;color:var(--cyan)}

/* toast and empty-state mascot */
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:60;max-width:min(92vw,520px);padding:14px 18px;background:#07051a;color:var(--yellow);border:4px solid var(--yellow);border-radius:6px;font-family:"Press Start 2P",monospace;font-size:.6rem;line-height:1.8;box-shadow:0 0 22px #ffe60077;text-align:center;transition:opacity .35s}
.toast.off{opacity:0}
.empty svg{display:block;margin:0 auto 14px}

@media (max-width:779px){.ad-banner{margin:0}}

/* game request banner and form */
.reqbar{position:relative;display:flex;align-items:center;gap:20px;padding:16px 28px;background:linear-gradient(90deg,#2a1470,#6a1b9a 55%,#b0145f);border-bottom:4px solid var(--yellow);cursor:pointer;overflow:hidden}
.reqbar::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 18px 16px,#ffffffaa,transparent),radial-gradient(2px 2px at 70px 44px,#19e3ffcc,transparent),radial-gradient(1.5px 1.5px at 44px 30px,#fff8,transparent);background-size:96px 64px}
.reqbar .mascot{flex:0 0 auto;position:relative}
.reqtext{position:relative;flex:1;min-width:0}
.reqtext h2{margin:0 0 4px;font-size:.85rem;line-height:1.5;color:var(--yellow);text-shadow:0 0 10px #ffe600aa,2px 2px 0 #000}
.reqtext p{margin:0;font-size:1.05rem}
.reqbtn{position:relative;flex:0 0 auto;font-family:"Press Start 2P",monospace;font-size:.7rem;color:#1b0a00;background:var(--yellow);padding:14px 18px;border:4px solid #fff;border-radius:4px;box-shadow:0 5px 0 #b39e00,0 0 20px #ffe60088;cursor:pointer;animation:pulse 2s ease-in-out infinite}
@keyframes pulse{50%{box-shadow:0 5px 0 #b39e00,0 0 32px #ffe600cc}}
.reqbtn:active{transform:translateY(4px);box-shadow:0 1px 0 #b39e00}
#reqDialog{width:min(480px,calc(100% - 32px));padding:0;color:var(--text);background:#120c3d;border:4px solid var(--cyan);border-radius:8px;box-shadow:0 0 40px #19e3ff77}
#reqDialog::backdrop{background:rgba(5,3,15,.82)}
#reqForm{padding:20px 22px 22px;display:flex;flex-direction:column;gap:8px}
.reqhead{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.reqhead h2{margin:0;font-size:.9rem;color:var(--cyan);text-shadow:0 0 10px #19e3ff88}
.reqx{font:inherit;font-weight:700;color:var(--text);background:#07051a;border:3px solid var(--violet);border-radius:4px;width:36px;height:32px;cursor:pointer}
.reqx:hover{border-color:var(--cyan)}
#reqForm label{font-weight:700;margin-top:8px}
#reqForm input:not(.hp),#reqForm textarea{width:100%;padding:11px 14px;font:inherit;color:var(--text);background:#07051a;border:3px solid var(--violet);border-radius:4px}
#reqForm input:focus,#reqForm textarea:focus{border-color:var(--cyan);outline:none;box-shadow:0 0 10px #19e3ff55}
#reqForm small{color:#c9bfff}
.hp{display:none}
#reqSend{margin-top:12px;align-self:flex-start}
#reqSend:disabled{opacity:.6;cursor:default}
.reqstatus{min-height:1.4em;margin:6px 0 0;font-weight:700}
.reqstatus.ok{color:#6BFF8A}.reqstatus.bad{color:#ff7a9c}
.reqnote{margin:4px 0 0;font-size:.9rem;color:#c9bfff}
@media (prefers-reduced-motion:reduce){.reqbtn{animation:none}}
@media (max-width:720px){.reqbar{flex-wrap:wrap;padding:14px 16px}.reqbar .mascot{display:none}.reqbtn{width:100%}}