/*
Theme Name: Beyond The Pixels
Author: Beyond The Pixels
Description: Dark neon gaming news theme for BEYOND THE PIXELS. Responsive.
Version: 1.2
Text Domain: btp
*/
:root{--bg:#0b0a12;--bg2:#14121d;--card:#191624;--line:#2a2638;--tx:#f4f2f8;--mut:#a9a4b8;--or:#ff7a1a;--pk:#ff3d8b;--pu:#8b3dff;--bl:#3d7bff;--grad:linear-gradient(90deg,#ffb11a,#ff3d8b 45%,#8b3dff 75%,#3d9bff)}
html.light{--bg:#f5f4f8;--bg2:#fff;--card:#fff;--line:#e3e0ea;--tx:#15121f;--mut:#5d5870}
*{box-sizing:border-box}html,body{margin:0;overflow-x:hidden}
body{background:var(--bg);color:var(--tx);font:15px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
a{color:inherit;text-decoration:none}img{max-width:100%;height:auto;display:block}
h1,h2,h3,.ttl{font-family:Rajdhani,"Arial Black",Impact,sans-serif;line-height:1.1;margin:0}
.wrap{max-width:1400px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px}.skip:focus{left:8px;top:8px;background:#fff;color:#000;padding:8px;z-index:999}
/* header */
.hdr{position:sticky;top:0;z-index:50;background:rgba(11,10,18,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
html.light .hdr{background:rgba(255,255,255,.92)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:64px}
.logo img{height:40px;width:auto}
.nav{flex:1;min-width:0}.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:nowrap}
.nav a{display:block;padding:20px 10px;font-size:12.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;position:relative}
.nav a:hover,.nav .current-menu-item>a,.nav .current-cat>a,.nav .cur>a{color:var(--or)}
.nav .cur>a:after,.nav .current-menu-item>a:after{content:"";position:absolute;left:10px;right:10px;bottom:14px;height:2px;background:var(--or)}
.tools{display:flex;align-items:center;gap:12px}
.ib{background:none;border:0;color:var(--tx);cursor:pointer;padding:6px;display:grid;place-items:center}
.ib svg{width:22px;height:22px}
.btn{display:inline-flex;align-items:center;gap:10px;border-radius:6px;padding:10px 20px;font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;border:0}
.btn-g{background:linear-gradient(90deg,#ff8a1a,#ff3d6b);color:#fff}
.btn-o{border:2px solid var(--pk);border-radius:40px;color:#fff;background:rgba(0,0,0,.25)}
.btn-o:hover{background:var(--pk)}
.burger{display:none}
.srch{display:none;border-top:1px solid var(--line);padding:12px 0}.srch.on{display:block}
.srch form{display:flex;gap:8px}.srch input{flex:1}
input[type=search],input[type=email],input[type=text]{background:var(--bg2);border:1px solid var(--line);color:var(--tx);padding:12px 14px;border-radius:6px;font:inherit;min-width:0}
/* section titles */
.st{display:flex;align-items:center;justify-content:space-between;margin:0 0 14px}
.st h2{font-size:17px;letter-spacing:.06em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.st h2:before{content:"";width:4px;height:18px;background:var(--or)}
.st h2:after{content:"";width:50px;height:2px;background:linear-gradient(90deg,var(--or),transparent)}
.st a{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--mut);text-transform:uppercase}
.st a:hover{color:var(--or)}
/* hero */
.top{display:grid;grid-template-columns:minmax(0,1fr) 400px;border-bottom:1px solid var(--line)}
.hero{position:relative;min-height:440px;display:flex;align-items:center;overflow:hidden;background:radial-gradient(circle at 70% 40%,#7a2d5a,#2a1030 45%,#0b0a12 80%)}
.hero .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(8,6,14,.92) 0%,rgba(8,6,14,.55) 45%,rgba(8,6,14,.05) 75%);z-index:1}
.hero .in{position:relative;z-index:2;padding:40px 48px;max-width:640px}
.lbl{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#e9e6f0;margin-bottom:10px}
.lbl:before{content:"";width:3px;height:12px;background:var(--or)}
.lbl:after{content:"";width:50px;height:1px;background:var(--or)}
.hero h1{font-size:clamp(32px,4.4vw,62px);font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:16px}
.hero h1 em,.ins h2 em{font-style:italic;background:linear-gradient(90deg,#ffb11a,#ff5a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{color:#ddd8e8;max-width:470px;margin:0 0 22px}
.steps{position:absolute;right:28px;top:50%;transform:translateY(-50%);z-index:2;border-left:2px solid rgba(255,255,255,.2);padding-left:14px;display:flex;flex-direction:column;gap:20px;max-width:180px}
.steps a{font-size:11px;font-weight:700;text-transform:uppercase;color:#bbb;letter-spacing:.05em;line-height:1.3;display:block}
.steps b{display:block;font-size:14px;color:#ddd}
.steps a.on,.steps a.on b{color:var(--or)}
.picks{background:var(--bg2);padding:26px 24px;border-left:1px solid var(--line)}
.pk{display:grid;grid-template-columns:130px 40px 1fr;gap:14px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.pk:last-child{border:0}
.pk .th{aspect-ratio:16/10;border-radius:4px;overflow:hidden;background:var(--grad)}
.pk .th img{width:100%;height:100%;object-fit:cover}
.pk .n{font:700 24px Rajdhani,sans-serif}
.pk h3{font:600 14px/1.35 Inter,sans-serif}
.pk small,.meta{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
/* latest + newsletter */
.mid{display:grid;grid-template-columns:minmax(0,1fr) 450px;border-bottom:1px solid var(--line)}
.latest{padding:22px 24px 24px 44px}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:6px;overflow:hidden;transition:transform .2s,border-color .2s}
.card:hover{transform:translateY(-3px);border-color:var(--pu)}
.card .th{aspect-ratio:16/10;background:var(--grad);overflow:hidden;position:relative}
.card .th img{width:100%;height:100%;object-fit:cover}
.card .bd{padding:12px 16px 16px;position:relative}
.tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:2px 8px;border-radius:3px;color:#fff;background:var(--pu);margin-bottom:6px}
.t0{background:#e88a10}.t1{background:#e8264f}.t2{background:#7a2dff}.t3{background:#2d6bff}.t4{background:#12a3a3}.t5{background:#d6331a}.t6{background:#9b2dd6}
.card h3{font:700 16px/1.25 Inter,sans-serif;margin-bottom:6px}
.news{position:relative;padding:28px 34px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(120deg,#3a0e3a,#1a0b2a 60%,#2a0b30)}
.news .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.news:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(26,8,30,.95) 40%,rgba(26,8,30,.2));z-index:1}
.news .in{position:relative;z-index:2;max-width:300px}
.news .k{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--or);text-transform:uppercase}
.news h2{font-size:32px;font-style:italic;font-weight:800;color:#fff;margin:6px 0 10px}
.news p{color:#ddd;font-size:13px;margin:0 0 14px}
.nf{display:flex}.nf input{flex:1;border-radius:6px 0 0 6px;background:rgba(10,8,16,.7);color:#fff;border-color:#4a3a5a}
.nf button{border:0;border-radius:0 6px 6px 0;background:linear-gradient(90deg,#ff8a1a,#ff3d6b);color:#fff;width:46px;cursor:pointer;font-size:18px}
/* insight */
.ins{position:relative;min-height:240px;display:flex;align-items:center;overflow:hidden;background:linear-gradient(110deg,#2a0d1c,#1b0e2e 50%,#3a1340);border-bottom:1px solid var(--line)}
.ins .bgi{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ins:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,6,14,.92) 30%,rgba(10,6,14,.1) 75%);z-index:1}
.ins .in{position:relative;z-index:2;padding:28px 52px;max-width:720px}
.ins h2{font-size:clamp(28px,3.4vw,44px);font-weight:900;text-transform:uppercase;color:#fff;margin-bottom:12px}
.ins p{color:#ddd;margin:0 0 16px;max-width:470px}
.ins .side{position:absolute;right:40px;bottom:40px;z-index:2;font-size:11px;font-weight:700;letter-spacing:.1em;color:#ddd;line-height:1.4;text-transform:uppercase}
/* categories */
.cats{padding:14px 40px 22px;border-bottom:1px solid var(--line)}
.crow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ct{position:relative;height:66px;display:flex;align-items:center;justify-content:center;gap:10px;color:#fff;font-weight:800;font-size:13px;text-transform:uppercase;letter-spacing:.03em;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);overflow:hidden;padding:0 18px;text-align:center;line-height:1.15}
.ct img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.ct span,.ct svg{position:relative;z-index:1}.ct svg{width:26px;height:26px;flex:none}
.ct:hover{filter:brightness(1.25)}
.c0{background:linear-gradient(90deg,#8a3a10,#3a1508)}.c1{background:linear-gradient(90deg,#8a1030,#3a0815)}.c2{background:linear-gradient(90deg,#5a1a9a,#22083a)}.c3{background:linear-gradient(90deg,#123a8a,#081838)}.c4{background:linear-gradient(90deg,#0d6a8a,#062a3a)}.c5{background:linear-gradient(90deg,#9a4a0d,#3a1a06)}.c6{background:linear-gradient(90deg,#6a1a9a,#2a083a)}
/* footer */
.ftr .wrap{display:flex;align-items:center;gap:24px;padding-top:20px;padding-bottom:20px;flex-wrap:wrap}
.ftr .fl img{height:22px;width:auto}
.ftr ul{list-style:none;margin:0;padding:0 0 0 24px;border-left:1px solid var(--line);display:flex;gap:26px;flex-wrap:wrap}
.ftr ul a{font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mut)}
.ftr ul a:hover,.soc a:hover{color:var(--or)}
.soc{margin-left:auto;display:flex;gap:16px;align-items:center}.soc svg{width:18px;height:18px}
.copy{font-size:11px;color:var(--mut)}
/* archive / single */
.pg{padding:36px 0 60px}
.pg-h{margin-bottom:24px}.pg-h h1{font-size:clamp(28px,4vw,46px);text-transform:uppercase}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.empty{padding:60px 20px;text-align:center;color:var(--mut);border:1px dashed var(--line);border-radius:8px}
.pagin{margin-top:30px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.pagin .page-numbers{padding:8px 14px;border:1px solid var(--line);border-radius:4px}.pagin .current{background:var(--or);color:#fff;border-color:var(--or)}
.single{max-width:820px;margin:0 auto}
.single h1{font-size:clamp(28px,4vw,48px);margin:8px 0 14px}
.single .feat{border-radius:8px;overflow:hidden;margin:20px 0}
.entry{font-size:17px;line-height:1.8}.entry img{border-radius:6px}
.entry h2{font-size:28px;margin:32px 0 12px}.entry h3{font-size:22px;margin:26px 0 10px}
.entry a{color:var(--or);text-decoration:underline}
.entry iframe,.entry video,.entry table{max-width:100%}.entry table{display:block;overflow-x:auto}
.entry blockquote{border-left:4px solid var(--pk);margin:20px 0;padding:6px 20px;background:var(--card)}
.tags a{display:inline-block;margin:4px;padding:4px 10px;border:1px solid var(--line);border-radius:20px;font-size:12px}
.wp-block-image,.aligncenter{margin-left:auto;margin-right:auto}
.comments-area{margin-top:40px}.comments-area textarea{width:100%;background:var(--bg2);color:var(--tx);border:1px solid var(--line);border-radius:6px}
/* responsive */
@media(max-width:1440px){.nav a{padding:20px 7px;font-size:11.5px}.hdr .wrap{gap:14px}}@media(max-width:1280px){.top{grid-template-columns:minmax(0,1fr) 340px}.pk{grid-template-columns:100px 30px 1fr}.mid{grid-template-columns:minmax(0,1fr) 380px}.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1240px){
 .burger{display:grid}.nav{position:absolute;top:100%;left:0;right:0;height:calc(100vh - 64px);background:var(--bg);transform:translateX(100%);transition:transform .25s;overflow-y:auto}
 .nav.on{transform:none}.nav ul{flex-direction:column;padding:10px 20px}.nav a{padding:14px 6px;border-bottom:1px solid var(--line);font-size:14px}.nav .cur>a:after,.nav .current-menu-item>a:after{display:none}
 .hdr .wrap{justify-content:space-between}.tools{margin-left:auto}
 .top,.mid{grid-template-columns:1fr}.picks{border-left:0;border-top:1px solid var(--line)}.latest{padding:22px 24px}
 .crow{grid-template-columns:repeat(4,minmax(0,1fr))}.cats{padding:14px 24px 22px}
}
@media(max-width:760px){
 .wrap{padding:0 16px}.hdr .btn-g{display:none}
 .hero{min-height:420px}.hero .in{padding:32px 20px}.steps{display:none}
 .grid4,.grid3{grid-template-columns:1fr 1fr;gap:12px}.card h3{font-size:14px}
 .news{padding:26px 20px}.ins .in{padding:28px 20px}.ins .side{display:none}
 .crow{grid-template-columns:1fr 1fr}.ct{clip-path:none;border-radius:6px}
 .latest,.picks{padding:20px 16px}.cats{padding:14px 16px 20px}
 .ftr ul{border:0;padding:0;gap:16px}.soc{margin-left:0}
}
@media(max-width:480px){.grid4,.grid3{grid-template-columns:1fr}.pk{grid-template-columns:90px 26px 1fr;gap:10px}.logo img{height:34px}}