/* ============================================================ KOOXPI GAMES — main stylesheet Retro neon arcade theme (from supplied design) + page styles ============================================================ */ :root{ --bg:#0a0a14; --bg2:#101022; --panel:#13132a; --panel2:#1a1a35; --line:#2a2a55; --neon:#00f0ff; --pink:#ff2bd6; --yellow:#ffe600; --green:#39ff14; --purple:#8a2be2; --text:#cfd2ff; --dim:#7d80b8; --thumb-w:246px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:'Rajdhani',sans-serif; font-size:16px; overflow-x:hidden; } body::before{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9998; background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px); opacity:.6; } body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9997; background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,20,.55) 100%); } a{color:inherit;text-decoration:none} img{display:block} /* ---------- HEADER ---------- */ .topbar{ background:linear-gradient(90deg,#0e0226,#1c0640,#0e0226); border-bottom:1px solid #3a1560; font-size:14px; } .topbar-inner{ max-width:1180px;margin:0 auto;padding:8px 14px; display:flex;align-items:center;gap:18px;flex-wrap:wrap; } .topbar nav{display:flex;gap:14px;flex-wrap:wrap} .topbar nav a{ letter-spacing:1px;text-transform:uppercase;color:var(--dim); transition:.2s;position:relative; } .topbar nav a:hover{color:var(--neon);text-shadow:0 0 8px var(--neon)} .searchbox{margin-left:auto;display:flex;align-items:center;gap:8px} .searchbox input{ background:#0b0b1c;border:1px solid var(--line);color:var(--neon); padding:7px 12px;border-radius:4px;font-family:'Rajdhani';font-size:15px; width:220px;outline:none;transition:.25s; } .searchbox input:focus{border-color:var(--neon);box-shadow:0 0 12px rgba(0,240,255,.4)} .searchbox button{ background:linear-gradient(135deg,var(--pink),var(--purple)); border:none;color:#fff;font-family:'Press Start 2P';font-size:9px; padding:9px 12px;border-radius:4px;cursor:pointer;transition:.2s; } .searchbox button:hover{box-shadow:0 0 14px var(--pink);transform:translateY(-1px)} .masthead{ position:relative; background: radial-gradient(circle at 15% 30%,rgba(255,43,214,.12),transparent 40%), radial-gradient(circle at 85% 60%,rgba(0,240,255,.10),transparent 40%), linear-gradient(180deg,#0b0221 0%,#1c0740 42%,#43105f 70%,#8f1a6e 88%,#e0217f 100%); border-bottom:2px solid rgba(255,43,214,.55); box-shadow:0 2px 24px rgba(255,43,214,.25),inset 0 -16px 36px rgba(255,45,120,.16); overflow:hidden; } .masthead::before{ content:"";position:absolute;inset:0; background-image:linear-gradient(rgba(0,240,255,.06) 1px,transparent 1px), linear-gradient(90deg,rgba(0,240,255,.06) 1px,transparent 1px); background-size:34px 34px; -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,transparent); mask-image:linear-gradient(180deg,transparent,#000 30%,transparent); } .masthead-inner{ max-width:1180px;margin:0 auto;padding:50px 14px 62px; display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap; position:relative;z-index:10; } .logo{display:flex;flex-direction:column;gap:8px} .logo-main{ font-family:'Press Start 2P'; font-size:clamp(20px,4vw,34px); color:#fff; text-shadow: 0 0 6px var(--neon),0 0 18px var(--neon), 3px 3px 0 var(--pink),-2px -2px 0 var(--purple); animation:flicker 4s infinite; } @keyframes flicker{ 0%,100%{opacity:1}92%{opacity:1}93%{opacity:.6}94%{opacity:1}97%{opacity:.7}98%{opacity:1} } .logo-sub{ font-family:'Orbitron';font-weight:700;letter-spacing:6px; color:var(--yellow);text-shadow:0 0 10px rgba(255,230,0,.6);font-size:14px;text-transform:uppercase; } .tagline{ font-family:'Press Start 2P';font-size:clamp(10px,2vw,15px); color:var(--green);text-shadow:0 0 10px var(--green); text-align:right;line-height:1.9; } .tagline small{display:block;color:var(--pink);text-shadow:0 0 10px var(--pink);font-size:.72em} .blink::after{content:"_";animation:blink 1s infinite} @keyframes blink{0%,49%{opacity:1}50%,100%{opacity:0}} .crt-toggle{ display:flex;align-items:center;gap:10px; font-family:'Press Start 2P';font-size:9px;color:var(--dim);cursor:pointer;user-select:none; } .crt-toggle:focus-visible{outline:1px dashed var(--neon);outline-offset:3px} .crt-toggle.crt-on span{color:var(--neon);text-shadow:0 0 8px var(--neon)} .crt-switch{ width:46px;height:22px;border:1px solid var(--line);border-radius:20px; background:#0b0b1c;position:relative;transition:.25s; } .crt-switch::after{ content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:var(--pink);box-shadow:0 0 8px var(--pink);transition:.25s; } .crt-toggle.crt-on .crt-switch{background:#0f2f2f;border-color:var(--neon)} .crt-toggle.crt-on .crt-switch::after{left:28px;background:var(--neon);box-shadow:0 0 8px var(--neon)} body.crt-off::before,body.crt-off::after{display:none} /* ---------- CATEGORY BAR ---------- */ .catbar{ background:linear-gradient(180deg,var(--panel2),var(--panel)); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:100; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); } .catbar-inner{ max-width:1180px;margin:0 auto;padding:0 10px; display:flex;gap:4px;overflow-x:auto;-webkit-overflow-scrolling:touch; } .catbar a{ padding:11px 13px;font-weight:700;font-size:14px;letter-spacing:1px;text-transform:uppercase; color:var(--dim);white-space:nowrap;border-bottom:2px solid transparent;transition:.2s; } .catbar a:hover{color:var(--neon);border-bottom-color:var(--neon);text-shadow:0 0 8px var(--neon)} /* ---------- LAYOUT ---------- */ .wrap{max-width:1180px;margin:0 auto;padding:20px 14px 40px;display:grid;grid-template-columns:250px 1fr;gap:20px} .main-col{display:flex;flex-direction:column;gap:20px;min-width:0} .panel{ background:var(--panel);border:1px solid var(--line);border-radius:8px; overflow:hidden;box-shadow:0 0 0 1px rgba(0,240,255,.04),0 8px 30px rgba(0,0,0,.5); } .panel-head{ display:flex;align-items:center;gap:10px;padding:12px 16px; background:linear-gradient(90deg,rgba(0,240,255,.08),rgba(255,43,214,.06),transparent); border-bottom:1px solid var(--line); font-family:'Press Start 2P';font-size:12px;color:#fff; text-shadow:0 0 8px var(--neon); } .panel-head .dot{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)} .panel-head span{margin-left:auto;font-family:'Rajdhani';font-weight:600;font-size:12px;color:var(--dim);letter-spacing:2px;text-transform:uppercase} .panel-more{ margin-left:auto;font-family:'Rajdhani';font-weight:700;font-size:13px;color:var(--neon); letter-spacing:1px;text-transform:uppercase; } .panel-head span + .panel-more{margin-left:0} /* ---------- GAME GRID ---------- */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumb-w),1fr));gap:14px;padding:16px} .game{ background:var(--panel2);border:1px solid var(--line);border-radius:6px;overflow:hidden; transition:.25s;cursor:pointer;position:relative; } .game:hover{ transform:translateY(-5px); border-color:var(--neon); box-shadow:0 0 0 1px var(--neon),0 0 22px rgba(0,240,255,.35),0 14px 30px rgba(0,0,0,.6); } .thumb{position:relative;width:100%;aspect-ratio:246/148;overflow:hidden;background:#000} .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .35s,filter .35s;filter:saturate(1.05) contrast(1.05)} .game:hover .thumb img{transform:scale(1.08);filter:saturate(1.4) contrast(1.15) brightness(1.1)} .play-overlay{ position:absolute;inset:0;display:flex;align-items:center;justify-content:center; background:rgba(5,5,20,.55);opacity:0;transition:.25s; } .game:hover .play-overlay{opacity:1} .play-btn{ font-family:'Press Start 2P';font-size:11px;color:#05050f; background:var(--green);padding:10px 16px;border-radius:4px; box-shadow:0 0 18px var(--green);animation:pulse 1.2s infinite; } @keyframes pulse{50%{transform:scale(1.08)}} .badge{ position:absolute;top:8px;left:8px;z-index:2; font-family:'Press Start 2P';font-size:8px;padding:5px 8px;border-radius:3px;color:#05050f; } .badge.new{background:var(--green);box-shadow:0 0 10px var(--green)} .badge.hot{background:var(--pink);color:#fff;box-shadow:0 0 10px var(--pink)} .badge.top{background:var(--yellow);box-shadow:0 0 10px var(--yellow)} .gtitle{ padding:10px 12px 4px;font-weight:700;font-size:15px;color:#fff; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .gmeta{display:flex;align-items:center;justify-content:space-between;padding:2px 12px 12px;gap:6px} /* ---------- STARS ---------- */ .stars{display:flex;gap:2px;font-size:15px;line-height:1;cursor:pointer} .stars .s{color:#3a3a66;transition:.15s;text-shadow:none} .stars .s.on{color:var(--yellow);text-shadow:0 0 8px rgba(255,230,0,.8)} .stars .s:hover{transform:scale(1.25)} .plays{font-size:12px;color:var(--dim);font-weight:600;white-space:nowrap} /* ---------- FEATURED ---------- */ .featured-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;padding:16px} .feat{ position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--line); aspect-ratio:4/3;display:flex;align-items:flex-end;transition:.25s;cursor:pointer; } .feat img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.4s;filter:brightness(.7) saturate(1.1)} .feat:hover{border-color:var(--pink);box-shadow:0 0 24px rgba(255,43,214,.4)} .feat:hover img{transform:scale(1.07);filter:brightness(.85) saturate(1.4)} .feat-info{ position:relative;z-index:2;width:100%;padding:16px; background:linear-gradient(0deg,rgba(5,5,20,.95),transparent); } .feat-info h3{font-family:'Orbitron';font-size:17px;color:#fff;text-shadow:0 0 10px var(--neon)} .feat-info .stars{margin:6px 0 8px} .playnow{ display:inline-block;font-family:'Press Start 2P';font-size:10px; color:#05050f;background:var(--neon);padding:9px 14px;border-radius:4px; box-shadow:0 0 14px var(--neon);transition:.2s; } .feat:hover .playnow{background:var(--pink);color:#fff;box-shadow:0 0 18px var(--pink)} /* ---------- ADS ---------- */ .ad{ display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px; background:repeating-linear-gradient(45deg,#12122a 0 12px,#0f0f24 12px 24px); border:1px dashed var(--line);border-radius:8px;color:var(--dim); font-family:'Press Start 2P';font-size:10px;text-align:center; } .ad small{font-family:'Rajdhani';font-size:13px;letter-spacing:2px;text-transform:uppercase;color:#4d4f85} .ad-tall{min-height:560px} .ad-wide{min-height:110px;margin:16px} .ad-slot{max-width:100%;overflow:hidden;margin:16px} .ad-slot.ad-header,.ad-slot.ad-footer{margin:16px auto;text-align:center;max-width:1180px} .ad-slot.ad-header{padding:0 14px} .ad-slot:first-child{margin-top:16px} .ad-empty{min-height:0;margin:0} /* ---------- SIDEBAR ---------- */ .side{display:flex;flex-direction:column;gap:20px} .side-ad{min-height:600px} .side-box{padding:0} .stat-row{display:flex;justify-content:space-between;padding:10px 16px;border-bottom:1px solid rgba(42,42,85,.5);font-weight:600} .stat-row:last-child{border-bottom:none} .stat-row b{color:var(--neon)} .tagcloud{display:flex;flex-wrap:wrap;gap:8px;padding:16px} .tagcloud a{ font-size:13px;font-weight:700;padding:5px 10px;border-radius:20px; background:var(--panel2);border:1px solid var(--line);color:var(--dim);transition:.2s; } .tagcloud a:hover{color:var(--pink);border-color:var(--pink);box-shadow:0 0 10px rgba(255,43,214,.4);transform:translateY(-2px)} .top-list{padding:8px 0} .top-item{display:flex;align-items:center;gap:12px;padding:9px 14px;transition:.2s;border-left:3px solid transparent;cursor:pointer} .top-item:hover{background:rgba(0,240,255,.05);border-left-color:var(--neon)} .top-item .rank{font-family:'Press Start 2P';font-size:11px;color:var(--pink);min-width:26px;text-shadow:0 0 8px var(--pink)} .top-item img{width:58px;height:35px;object-fit:cover;border-radius:4px;border:1px solid var(--line)} .top-item .tn{flex:1;font-weight:700;font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ---------- BREADCRUMBS / LISTING ---------- */ .crumbs{font-size:14px;font-weight:600;color:var(--dim);letter-spacing:.5px} .crumbs a{color:var(--neon)} .crumbs a:hover{text-shadow:0 0 8px var(--neon)} .listing-sub{padding:12px 16px 0;color:var(--dim);font-weight:600;font-size:15px} .sortbar{display:flex;align-items:center;gap:10px;padding:12px 16px 0;font-size:13px} .sortbar b{color:var(--dim);letter-spacing:1px} .sortbar a{ font-weight:700;padding:4px 10px;border-radius:14px;background:var(--panel2); border:1px solid var(--line);color:var(--dim);font-size:12px;letter-spacing:1px;transition:.2s; } .sortbar a:hover{color:var(--neon);border-color:var(--neon)} .sortbar a.on{background:var(--neon);color:#05050f;box-shadow:0 0 10px var(--neon)} /* ---------- PAGINATION ---------- */ .pagination{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center;padding:18px 16px 20px} .pagination .pg{ min-width:38px;text-align:center;padding:8px 10px;border-radius:4px; background:var(--panel2);border:1px solid var(--line);color:var(--text); font-family:'Press Start 2P';font-size:10px;transition:.2s; } .pagination .pg:hover{border-color:var(--neon);color:var(--neon);box-shadow:0 0 10px rgba(0,240,255,.3)} .pagination .pg.active{background:var(--neon);color:#05050f;box-shadow:0 0 14px var(--neon)} .pg-dots{color:var(--dim);font-family:'Press Start 2P';font-size:10px} /* ---------- GAME INFO PAGE ---------- */ .info-layout{display:grid;grid-template-columns:320px 1fr;gap:20px;padding:18px} .info-thumb img{ width:100%;aspect-ratio:246/148;object-fit:cover;border-radius:8px; border:1px solid var(--line);box-shadow:0 0 20px rgba(0,240,255,.15); height: fit-content; } .info-thumb-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px} .btn-play-big{ font-family:'Press Start 2P';font-size:12px;color:#05050f;background:var(--green); padding:14px 16px;border-radius:6px;text-align:center;box-shadow:0 0 18px var(--green); transition:.2s; } .btn-play-big:hover{transform:translateY(-2px);box-shadow:0 0 28px var(--green)} .btn-fav{ font-family:'Press Start 2P';font-size:10px;color:var(--pink);background:transparent; border:1px solid var(--pink);padding:12px 14px;border-radius:6px;cursor:pointer;transition:.2s; } .btn-fav:hover{background:rgba(255,43,214,.12);box-shadow:0 0 14px rgba(255,43,214,.4)} .btn-fav.faved{background:var(--pink);color:#fff;box-shadow:0 0 16px var(--pink)} .info-body{min-width:0} .info-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:10px} .cat-chip{ font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#05050f; background:var(--neon);padding:3px 10px;border-radius:12px;box-shadow:0 0 10px rgba(0,240,255,.5); } .info-title{font-family:'Orbitron';font-size:26px;color:#fff;text-shadow:0 0 12px var(--neon);margin-bottom:12px} .info-desc{color:var(--text);font-weight:600;font-size:16px;line-height:1.75;opacity:.95} .info-desc.howto{color:var(--green)} .info-tags{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:16px} .info-tags b{color:var(--dim);letter-spacing:1px;font-size:13px} .info-tags a{ font-size:13px;font-weight:700;padding:4px 11px;border-radius:20px; background:var(--panel2);border:1px solid var(--line);color:var(--dim);transition:.2s; } .info-tags a:hover{color:var(--pink);border-color:var(--pink);box-shadow:0 0 10px rgba(255,43,214,.4)} /* ---------- PLAY PAGE ---------- */ .play-frame-wrap{padding:16px} .play-frame{ /* --gw/--gh are UNITLESS numbers (set by templates/play.php); calc() adds the px */ width:min(100%,calc(var(--gw,800)*1px));aspect-ratio:var(--gw,800)/var(--gh,600); min-height:320px; /* floor: a frame can never collapse to the iframe's 150px default again */ margin:0 auto;background:#000;border:1px solid var(--line);border-radius:6px; overflow:hidden;position:relative; box-shadow:0 0 0 1px rgba(0,240,255,.15),0 0 30px rgba(0,240,255,.12); } .play-frame:fullscreen{width:100vw;height:100vh;aspect-ratio:auto;border-radius:0} .play-frame iframe,#ruffleHost,#ruffleHost ruffle-player,#ruffleHost embed{width:100%;height:100%;border:0;display:block} .play-frame:fullscreen iframe,#play-frame:fullscreen #ruffleHost{width:100%;height:100%} .play-placeholder{ position:absolute;inset:0;display:flex;flex-direction:column;gap:12px; align-items:center;justify-content:center;color:var(--dim); } .pp-icon{font-size:42px} .pp-text{font-family:'Press Start 2P';font-size:13px;color:var(--pink);text-shadow:0 0 10px var(--pink)} .pp-sub{font-size:14px;font-weight:600} .play-toolbar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px} .pt-btn{ font-family:'Press Start 2P';font-size:9px;color:var(--neon);background:var(--panel2); border:1px solid var(--line);padding:10px 14px;border-radius:4px;cursor:pointer;transition:.2s; } .pt-btn:hover{border-color:var(--neon);box-shadow:0 0 12px rgba(0,240,255,.35)} .pt-btn.faved{color:var(--pink);border-color:var(--pink);box-shadow:0 0 12px rgba(255,43,214,.4)} .play-details{padding:18px;display:flex;flex-direction:column;gap:10px} .pd-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;justify-content:space-between} .pd-rate b,.pd-tags b{display:block;color:var(--dim);letter-spacing:1px;font-size:13px;margin-bottom:6px} .pd-rate small{display:block;color:var(--dim);margin-top:6px;font-weight:600} .pd-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .pd-tags a{ font-size:13px;font-weight:700;padding:4px 11px;border-radius:20px; background:var(--panel2);border:1px solid var(--line);color:var(--dim);transition:.2s; } .pd-tags a:hover{color:var(--pink);border-color:var(--pink)} .pd-h{font-family:'Press Start 2P';font-size:11px;color:var(--neon);text-shadow:0 0 8px var(--neon);margin-top:10px} /* ---------- AUTH / ACCOUNT ---------- */ .auth-box{padding:24px;max-width:420px} .auth-box form{display:flex;flex-direction:column;gap:14px} .auth-box label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--dim);letter-spacing:1px} .auth-box input[type=text],.auth-box input[type=email],.auth-box input[type=password], .auth-box textarea{ background:#0b0b1c;border:1px solid var(--line);color:var(--text); padding:10px 12px;border-radius:4px;font-family:'Rajdhani';font-size:16px;font-weight:600;outline:none;transition:.25s; } .auth-box input:focus,.auth-box textarea:focus{border-color:var(--neon);box-shadow:0 0 12px rgba(0,240,255,.35)} .auth-box label.check{flex-direction:row;align-items:center;gap:8px;font-size:14px;color:var(--text)} .btn-neon{ font-family:'Press Start 2P';font-size:11px;color:#05050f;background:var(--neon); border:none;padding:13px 18px;border-radius:4px;cursor:pointer;box-shadow:0 0 16px var(--neon);transition:.2s; } .btn-neon:hover{background:var(--pink);color:#fff;box-shadow:0 0 20px var(--pink)} .auth-alt{margin-top:16px;color:var(--dim);font-weight:600} .auth-alt a{color:var(--neon)} .form-error{ background:rgba(255,43,214,.1);border:1px solid var(--pink);color:var(--pink); padding:10px 14px;border-radius:4px;font-weight:700;margin-bottom:14px; } .form-notice{ background:rgba(57,255,20,.08);border:1px solid var(--green);color:var(--green); padding:10px 14px;border-radius:4px;font-weight:700;margin-bottom:8px; } .account-head{display:flex;gap:18px;align-items:center;padding:18px;border-bottom:1px solid var(--line)} .account-avatar{width:72px;height:72px;border-radius:50%;border:2px solid var(--neon);box-shadow:0 0 14px rgba(0,240,255,.4);object-fit:cover} .account-name{font-family:'Orbitron';font-size:22px;color:#fff;text-shadow:0 0 10px var(--neon)} .account-meta{color:var(--dim);font-weight:600;font-size:14px;margin-top:4px} .account-bio{color:var(--text);font-weight:600;margin-top:6px} .account-grid{display:grid;grid-template-columns:1fr 1fr;gap:0} .account-col{padding:18px;display:flex;flex-direction:column;gap:14px} .account-col form{display:flex;flex-direction:column;gap:12px} .account-col label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--dim);letter-spacing:1px} .account-col input,.account-col textarea{ background:#0b0b1c;border:1px solid var(--line);color:var(--text); padding:10px 12px;border-radius:4px;font-family:'Rajdhani';font-size:16px;font-weight:600;outline:none;transition:.25s; } .account-col input:focus,.account-col textarea:focus{border-color:var(--neon);box-shadow:0 0 12px rgba(0,240,255,.35)} .account-col .btn-neon{align-self:flex-start} .static-content{padding:20px;line-height:1.8;font-weight:600;color:var(--text)} .static-content p{margin-bottom:12px} /* ---------- FOOTER ---------- */ footer{background:linear-gradient(180deg,#0d0d20,#080814);border-top:2px solid var(--line);margin-top:20px} .foot-grid{ max-width:1180px;margin:0 auto;padding:36px 14px 24px; display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:30px; } .foot-col h4{ font-family:'Press Start 2P';font-size:11px;color:var(--neon); text-shadow:0 0 8px var(--neon);margin-bottom:16px; } .foot-col a,.foot-col p{display:block;color:var(--dim);font-weight:600;margin-bottom:9px;font-size:14px;transition:.2s} .foot-col a:hover{color:var(--pink);text-shadow:0 0 8px var(--pink);transform:translateX(4px)} .socials{display:flex;gap:10px;margin-top:12px} .socials a{ width:36px;height:36px;display:flex;align-items:center;justify-content:center; border:1px solid var(--line);border-radius:6px;color:var(--dim);font-weight:700;transition:.2s;margin:0; } .socials a:hover{color:#05050f;background:var(--neon);box-shadow:0 0 14px var(--neon);transform:translateY(-3px)} .foot-bottom{ border-top:1px solid var(--line);padding:18px 14px;text-align:center; font-size:13px;color:#55578f;letter-spacing:1px; } .foot-bottom b{color:var(--neon)} .foot-stats{display:flex;flex-direction:column;margin-top:2px} .fstat{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:8px 0;border-bottom:1px dashed rgba(42,42,85,.6); font-weight:600;font-size:14px;color:var(--dim); } .fstat:last-child{border-bottom:none} .fstat b{ font-family:'Orbitron';font-weight:700;font-size:15px;color:var(--neon); text-shadow:0 0 10px rgba(0,240,255,.5);white-space:nowrap; } .stat-note{margin-top:12px;font-size:13px;color:#55578f;line-height:1.6} /* ---------- TOAST / MISC ---------- */ #toast{ position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px); background:var(--panel2);border:1px solid var(--neon);color:var(--neon); font-family:'Press Start 2P';font-size:10px;padding:14px 20px;border-radius:6px; box-shadow:0 0 20px rgba(0,240,255,.4);z-index:10000;transition:.3s;opacity:0;max-width:90vw;text-align:center; } #toast.show{transform:translateX(-50%) translateY(0);opacity:1} .no-results{grid-column:1/-1;text-align:center;padding:40px;color:var(--dim);font-family:'Press Start 2P';font-size:11px} /* full-width pages (no sidebar): center content */ .page-noside{max-width:1180px;margin:0 auto;padding:20px 14px 40px;display:flex;flex-direction:column;gap:20px} @media(max-width:900px){ .wrap{grid-template-columns:1fr} .side{order:2} .tagline{text-align:left} .searchbox{margin-left:0;width:100%} .searchbox input{flex:1;width:auto} .info-layout{grid-template-columns:1fr} .account-grid{grid-template-columns:1fr} :root{--thumb-w:172px} } /* ---------- CAPTCHA ---------- */ .captcha-box{margin:2px 0;padding:14px;border:1px dashed var(--line);border-radius:4px;background:rgba(255,255,255,.02)} .captcha-box .captcha-label{display:block;font-size:12px;font-weight:700;color:var(--dim);letter-spacing:1px;margin-bottom:8px} .captcha-box .captcha-row{display:flex;align-items:center;gap:10px;margin-bottom:8px} .captcha-box .captcha-img{border-radius:4px;background:#fff;display:block} .captcha-box .captcha-reload{font-size:12px;color:var(--neon);text-decoration:none} .captcha-box .captcha-q{display:block;font-size:15px;color:var(--text);font-weight:700;margin-bottom:8px} .captcha-box input.captcha-input{width:100%;background:#0b0b1c;border:1px solid var(--line);color:var(--text);padding:10px 12px;border-radius:4px;font-family:'Rajdhani';font-size:16px;font-weight:600;outline:none} .captcha-box input.captcha-input:focus{border-color:var(--neon);box-shadow:0 0 12px rgba(0,240,255,.35)} .captcha-hp{position:absolute;left:-9999px;top:-9999px} /* ---------- Android apps (/android-apps.html) ---------- */ /* Cards reuse the standard .game grid look; the grid CAPS the column width so even a single app shows as one neat card instead of stretching to the full page width. */ .agrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--thumb-w),262px));gap:14px;padding:16px} .gdesc{padding:0 12px 6px;font-size:12px;color:var(--dim);line-height:1.45;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .badge.app{background:#34a853;color:#fff;box-shadow:0 0 10px rgba(52,168,85,.55)} .plays.gp{color:#3ddc68} .catbar a.cat-android{color:var(--green)} .catbar a.cat-android:hover{color:var(--green);border-bottom-color:var(--green);text-shadow:0 0 8px var(--green)} .app-btns{display:flex;flex-wrap:wrap;gap:8px;margin:0 14px 14px} .btn-gplay,.btn-webver{ display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:8px; font-size:12.5px;font-weight:700;letter-spacing:.8px;text-decoration:none;white-space:nowrap; } .btn-gplay{background:linear-gradient(135deg,#34a853,#1b7f3b);color:#fff;box-shadow:0 4px 14px rgba(52,168,83,.3)} .btn-gplay:hover{filter:brightness(1.15);transform:translateY(-1px)} .btn-gplay .gp-ico{font-size:10px} .btn-webver{background:rgba(0,240,255,.08);border:1px solid var(--neon);color:var(--neon)} .btn-webver:hover{background:var(--neon);color:#05050f;box-shadow:0 0 16px rgba(0,240,255,.4)} .app-detail{display:flex;gap:22px;padding:20px;flex-wrap:wrap} .app-detail-img{flex:0 0 min(460px,100%)} .app-detail-img img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;border:1px solid var(--line);background:#05050f} .app-detail-info{flex:1 1 280px;min-width:260px;max-width:640px} .app-detail-title{margin:0 0 12px;font-size:26px;color:var(--neon);letter-spacing:.5px} .app-detail-desc{font-size:14.5px;line-height:1.7;color:#c9c9e0;margin-bottom:18px} .app-back{margin:16px 0 0;font-size:13px} .app-back a{color:var(--dim);text-decoration:none} .app-back a:hover{color:var(--neon)} @media (max-width:560px){.app-detail-img{flex:1 1 100%}.app-detail-title{font-size:21px}} /* ---------- Synthwave sunset header scene ---------- Pure CSS decoration (no images/JS): starfield, striped sun, mountain silhouettes and a neon perspective grid inside the masthead. Markup lives in templates/header.php inside