/*
Theme Name: Khaloopks Reference
Theme URI: https://khaloopks.com/
Author: KHALOOPKS
Description: Clean, responsive neon gaming/app directory theme inspired by the supplied reference layout. Uses native WordPress APIs and requires no page builder.
Version: 11.0.0
License: GPL-2.0-or-later
Text Domain: khaloopks-reference
*/

:root{
 --bg:#07000d;--panel:#100718;--panel2:#14091e;--line:#28113d;
 --pink:#ef159f;--pink2:#ff2cae;--purple:#7517d8;--white:#f7f4fb;
 --muted:#a69aaa;--gold:#ffd21f;--max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:linear-gradient(180deg,#07000d 0%,#0b0012 55%,#07000d 100%);color:var(--white);font-family:Arial,Helvetica,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input{font:inherit}
.kp-container{width:min(var(--max),calc(100% - 32px));margin:auto}


/* Logged-in editor toolbar */
.kp-editorbar{height:54px;background:#1d2227;border-bottom:1px solid #30353a;position:relative;z-index:2000}
.kp-editorbar-inner{height:54px;display:flex;align-items:center;gap:30px;padding:0 24px}
.kp-editorbar a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;color:#d8dadd;font-size:28px;text-decoration:none;border-radius:5px}
.kp-editorbar a:hover{background:#2b3035;color:#fff}
.kp-editor-profile{margin-left:auto;border:1px solid #7c8084;border-radius:3px!important;font-size:22px!important}
@media(max-width:800px){
 .kp-editorbar{height:54px}
 .kp-editorbar-inner{gap:18px;padding:0 14px}
 .kp-editorbar a{width:34px;height:34px;font-size:25px}
}

/* Header */
.kp-header{height:76px;background:rgba(5,0,10,.96);border-bottom:1px solid #24102f;position:sticky;top:0;z-index:1000;backdrop-filter:blur(12px)}
.kp-header-inner{height:100%;display:flex;align-items:center;gap:26px}
.kp-logo{font-weight:900;font-size:22px;line-height:1;color:#fff;white-space:nowrap;display:flex;align-items:center;gap:8px}
.kp-logo-mark{color:#ff6b00;font-size:25px}
.kp-logo small{display:block;font-size:7px;color:#c9bccf;letter-spacing:.5px;margin-top:3px}
.kp-search{height:42px;flex:1;max-width:520px;margin:auto;position:relative}
.kp-search input{width:100%;height:100%;border:1px solid #2b1938;border-radius:13px;background:#120d1a;color:#fff;padding:0 48px 0 18px;outline:0}
.kp-search input:focus{border-color:#7520a4;box-shadow:0 0 0 3px rgba(117,32,164,.12)}
.kp-search button{position:absolute;right:5px;top:5px;width:32px;height:32px;border:0;border-radius:10px;background:transparent;color:#fff;cursor:pointer}
.kp-download{background:linear-gradient(135deg,#c717df,#ff209e);padding:12px 18px;border-radius:10px;font-size:10px;font-weight:900;white-space:nowrap;box-shadow:0 8px 24px rgba(255,32,158,.18)}
.kp-menu{width:40px;height:40px;background:none;border:0;color:#fff;font-size:25px;cursor:pointer}
.kp-nav{background:#08010e;border-bottom:1px solid #1c0c29}
.kp-nav-inner{display:flex;justify-content:center;gap:34px;height:42px;align-items:center}
.kp-nav a{font-size:11px;font-weight:800;color:#9d91a5;padding:13px 0;position:relative}
.kp-nav a:hover,.kp-nav a.active{color:#ff2baa}
.kp-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#ef159f}

/* Hero */
.kp-hero{position:relative;min-height:370px;overflow:hidden;background:
 radial-gradient(circle at 68% 42%,rgba(160,13,151,.48),transparent 25%),
 radial-gradient(circle at 86% 40%,rgba(84,0,120,.5),transparent 35%),
 linear-gradient(105deg,#180022,#08000f 55%,#130019)}
.kp-hero-art{position:absolute;inset:0;opacity:.28;background:
 radial-gradient(circle at 74% 52%,#ff1fa8 0 1px,transparent 2px),
 radial-gradient(circle at 88% 30%,#b700ff 0 1px,transparent 2px);
 background-size:90px 90px,120px 120px}
.kp-hero-inner{position:relative;z-index:2;min-height:370px;display:flex;align-items:center}
.kp-hero-copy{width:46%;padding:35px 0}
.kp-eyebrow{color:#ff2cab;font-size:14px;font-weight:900;letter-spacing:.3px}
.kp-hero h1{font-size:48px;line-height:.98;margin:12px 0;color:#fff;letter-spacing:-1.5px}
.kp-hero h1 span{color:#ef159f}
.kp-hero p{font-size:16px;line-height:1.45;color:#e1d9e6;max-width:330px}
.kp-cta{display:inline-flex;margin-top:10px;background:linear-gradient(135deg,#b817df,#ff1e9f);padding:13px 18px;border-radius:9px;font-size:11px;font-weight:900}
.kp-hero-visual{position:absolute;right:3%;bottom:0;width:52%;height:100%;display:flex;align-items:center;justify-content:center}
.kp-character{width:min(430px,90%);height:280px;border-radius:45% 45% 8% 8%;background:
 radial-gradient(circle at 55% 28%,#f1b28f 0 9%,transparent 10%),
 radial-gradient(circle at 47% 31%,#23151c 0 14%,transparent 15%),
 linear-gradient(145deg,transparent 20%,#15121c 21% 55%,#06040a 56%);
 filter:drop-shadow(0 0 38px rgba(255,0,174,.25));position:relative}
.kp-character:before{content:"AVIATOR";position:absolute;left:5%;top:22%;width:150px;height:70px;border:2px solid #ff35bc;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#ff4ec5;font-size:22px;font-weight:900;box-shadow:0 0 25px rgba(255,30,180,.35)}
.kp-character:after{content:"x 15.92";position:absolute;left:18%;top:51%;color:#fff;font-weight:900;font-size:12px}
.kp-card{position:absolute;right:3%;top:37%;font-size:38px;transform:rotate(10deg);text-shadow:0 0 15px #fff}


/* Enhanced live 3D-style hero: browser-rendered template elements, not a screenshot */
.kp-hero-3d{overflow:visible}
.kp-hero-3d:before{
 content:"";position:absolute;right:9%;bottom:7%;width:360px;height:70px;border-radius:50%;
 background:radial-gradient(ellipse,rgba(255,22,180,.30),rgba(98,15,170,.12) 45%,transparent 72%);
 filter:blur(10px);animation:kpFloorGlow 4.8s ease-in-out infinite;z-index:-1
}
.kp-hero-avatar-wrap{will-change:transform;transform-style:preserve-3d}
.kp-hero-avatar{filter:drop-shadow(0 12px 18px rgba(255,0,180,.16));transform-style:preserve-3d}
.kp-hero-avatar-wrap:after{
 content:"";position:absolute;inset:10% 4% 4% 18%;border-radius:45%;
 background:linear-gradient(115deg,rgba(255,255,255,.12),transparent 20% 70%,rgba(255,0,180,.12));
 mix-blend-mode:screen;pointer-events:none;transform:translateZ(2px);opacity:.7
}
.kp-hero-phone{filter:drop-shadow(10px 16px 16px rgba(0,0,0,.5))}
.kp-hero-phone:focus{outline:none}
.kp-hero-app-chip{transform-style:preserve-3d}
@keyframes kpFloorGlow{0%,100%{transform:scale(.92);opacity:.6}50%{transform:scale(1.08);opacity:1}}
@keyframes kpAvatarFloat{0%,100%{transform:translate3d(0,0,0) rotateZ(0deg)}25%{transform:translate3d(-3px,-7px,0) rotateZ(-.35deg)}50%{transform:translate3d(0,-13px,0) rotateZ(0deg)}75%{transform:translate3d(3px,-7px,0) rotateZ(.35deg)}}
@keyframes kpAvatarTilt{0%,100%{transform:perspective(900px) rotateY(-9deg) rotateX(2deg) rotateZ(0deg) scale(1)}
50%{transform:perspective(900px) rotateY(7deg) rotateX(-1deg) rotateZ(.7deg) scale(1.015)}}
@keyframes kpPhoneShow{0%,100%{transform:translate3d(0,0,0) rotate(0deg) rotateY(0deg)}
35%{transform:translate3d(-6px,-8px,3px) rotate(-2deg) rotateY(-4deg)}
70%{transform:translate3d(4px,-4px,1px) rotate(1.5deg) rotateY(3deg)}}
@media(max-width:800px){
 .kp-hero-visual.kp-hero-3d{right:-12%;width:74%;perspective:700px}
 .kp-hero-avatar-wrap{width:min(390px,96%);right:0}
 .kp-hero-3d:before{width:250px;height:48px;right:18%}
 .kp-hero-app-chip{right:0;bottom:20px;padding:7px 9px}
 .kp-hero-app-chip strong{font-size:7px}.kp-hero-app-chip small{font-size:5px}
}
@media(prefers-reduced-motion:reduce){
 .kp-hero-avatar-wrap,.kp-hero-avatar,.kp-hero-phone,.kp-hero-glow,.kp-hero-orbit,.kp-hero-app-chip,.kp-hero-3d:before{animation:none!important}
}

/* Stats */
.kp-stats{background:#0d0715;border:1px solid #24122f;border-radius:14px;position:relative;margin-top:-1px;z-index:4}
.kp-stats-grid{display:grid;grid-template-columns:repeat(4,1fr)}
.kp-stat{padding:18px;text-align:center;border-right:1px solid #24122f}
.kp-stat:last-child{border-right:0}
.kp-stat b{display:block;font-size:19px}.kp-stat span{font-size:9px;color:#9c8fa4;margin-top:6px;display:block}

/* Categories */
.kp-main{padding:24px 0 55px}
.kp-categories{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 25px}
.kp-category{min-height:190px;border:1px solid #29113e;border-radius:14px;background:
 radial-gradient(circle at 50% 25%,rgba(115,21,184,.2),transparent 45%),#100719;
 display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transition:.2s}
.kp-category:hover{transform:translateY(-3px);border-color:#7020a3;box-shadow:0 12px 35px rgba(97,16,145,.15)}
.kp-category-icon{font-size:58px;height:76px;display:flex;align-items:center;filter:drop-shadow(0 0 13px rgba(204,36,255,.45))}
.kp-category h3{font-size:14px;margin:10px 0 6px}.kp-category p{font-size:10px;color:#9e91a6;margin:0}

/* Sections */
.kp-section{background:linear-gradient(180deg,#0e0616,#0d0614);border:1px solid #1e0d2c;border-radius:14px;padding:20px 18px;margin:15px 0}
.kp-section-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.kp-section h2{font-size:18px;margin:0}.kp-view{font-size:10px;color:#c8bbcf;border:1px solid #30203b;border-radius:8px;padding:7px 10px}
.kp-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.kp-card-item{background:#0b0611;border:1px solid #251037;border-radius:9px;padding:7px;min-width:0;transition:.2s}
.kp-card-item:hover{border-color:#7521a9;transform:translateY(-2px)}
.kp-thumb{aspect-ratio:1/1;border-radius:7px;overflow:hidden;background:linear-gradient(135deg,#351052,#120a19);position:relative}
.kp-thumb img{width:100%;height:100%;object-fit:cover}
.kp-thumb-fallback{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:22px;color:#fff}
.kp-badge{position:absolute;left:4px;top:4px;background:#d719aa;color:#fff;border-radius:4px;padding:3px 5px;font-size:7px;font-weight:900}
.kp-card-title{font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:7px 2px 5px}
.kp-rating{font-size:9px;color:var(--gold);margin:0 2px 2px}.kp-rating span{color:#817487}

/* App banner */
.kp-app-banner{min-height:145px;margin:18px 0;border:1px solid #2a1240;border-radius:14px;overflow:hidden;background:
 radial-gradient(circle at 72% 50%,rgba(147,0,177,.35),transparent 28%),
 linear-gradient(105deg,#12031d,#270038 55%,#100016);display:flex;align-items:center;padding:22px 45px;position:relative}
.kp-app-icon{font-size:58px;margin-right:28px}.kp-app-banner h2{margin:0 0 8px;font-size:23px}.kp-app-banner p{margin:0 0 14px;color:#c7b7ce;font-size:12px}.kp-app-btn{display:inline-block;background:#ef159f;padding:10px 16px;border-radius:8px;font-size:10px;font-weight:900}

/* Footer */
.kp-footer{border-top:1px solid #23112f;padding:35px 0;background:#08010e;color:#9f92a6}
.kp-footer-grid{display:flex;justify-content:space-between;gap:30px}.kp-footer h3{color:#fff;margin:0 0 8px}.kp-footer p{font-size:11px;max-width:500px;line-height:1.7}
.kp-bottom{display:none}

/* Mobile */
@media(max-width:800px){
 .kp-container{width:min(100% - 22px,var(--max))}
 .kp-header{height:60px}.kp-header-inner{gap:8px}.kp-logo{font-size:16px}.kp-logo-mark{font-size:20px}.kp-logo small{font-size:5px}
 .kp-search{height:34px}.kp-search input{font-size:10px;padding-left:12px}
 .kp-download{display:none}.kp-menu{width:34px;font-size:22px}
 .kp-nav{display:none}
 .kp-hero{min-height:250px}.kp-hero-inner{min-height:250px}.kp-hero-copy{width:55%;padding:20px 0}.kp-eyebrow{font-size:10px}.kp-hero h1{font-size:31px}.kp-hero p{font-size:11px}.kp-cta{font-size:9px;padding:10px 13px}
 .kp-hero-visual{right:-17%;width:68%;height:100%}.kp-character{height:190px}.kp-character:before{width:105px;height:48px;font-size:15px}.kp-card{font-size:25px}
 .kp-stats-grid{grid-template-columns:repeat(4,1fr)}.kp-stat{padding:11px 4px}.kp-stat b{font-size:11px}.kp-stat span{font-size:6px}
 .kp-main{padding:14px 0 78px}.kp-categories{grid-template-columns:repeat(2,1fr);gap:8px}.kp-category{min-height:125px}.kp-category-icon{font-size:40px;height:48px}.kp-category h3{font-size:11px;margin:7px 0 4px}.kp-category p{font-size:8px}
 .kp-section{padding:13px 10px;margin:10px 0;border-radius:11px}.kp-section h2{font-size:14px}.kp-view{font-size:8px;padding:5px 8px}
 .kp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.kp-card-item{padding:5px}.kp-card-title{font-size:8px;margin-top:5px}.kp-rating{font-size:7px}
 .kp-app-banner{min-height:110px;padding:16px}.kp-app-icon{font-size:40px;margin-right:14px}.kp-app-banner h2{font-size:16px}.kp-app-banner p{font-size:9px}.kp-app-btn{font-size:8px;padding:8px 11px}
 .kp-footer{padding-bottom:78px}.kp-footer-grid{display:block}
 .kp-bottom{display:grid;position:fixed;left:0;right:0;bottom:0;height:62px;background:rgba(8,2,13,.97);border-top:1px solid #2a1437;z-index:1200;grid-template-columns:repeat(4,1fr);backdrop-filter:blur(14px)}
 .kp-bottom a{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:3px;color:#a69aaa;font-size:8px;font-weight:800}.kp-bottom a.active{color:#ef159f}.kp-bottom i{font-style:normal;font-size:18px}
}

/* v1.3 fixes */
.kp-single-image{margin-bottom:20px;border-radius:12px;overflow:hidden;border:1px solid #251037;background:#09040d}
.kp-single-image img{display:block;width:100%;height:auto;max-height:600px;object-fit:cover}
.kp-single-excerpt{color:#c7bbcc;font-size:14px;line-height:1.7;margin:0 0 18px}
.kp-single-content{color:#ddd4e2;font-size:14px;line-height:1.85}
.kp-single-content img{max-width:100%;height:auto;border-radius:10px}
.kp-single-content a{color:#ff36b4}
.kp-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}
.kp-tags a{color:#d7c7dc;border:1px solid #321542;border-radius:8px;padding:7px 10px;font-size:10px}
.kp-single-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}
.kp-empty-text{color:#a79aaa;line-height:1.7}
.kp-bottom a{text-decoration:none}
@media(max-width:800px){.kp-single{padding:14px 12px}.kp-single-content{font-size:13px}.kp-single-actions .kp-cta,.kp-single-actions .kp-app-btn{padding:11px 14px;font-size:10px}}


/* KHALOOPKS v1.6: single-post mobile navigation visibility fix */
@media (max-width:800px){
  html, body { overflow-x:hidden; }
  body { padding-bottom:calc(88px + env(safe-area-inset-bottom)) !important; }
  .kp-bottom{
    display:grid !important;
    position:fixed !important;
    left:0 !important; right:0 !important; bottom:0 !important;
    width:100% !important;
    height:68px !important;
    z-index:2147483000 !important;
    visibility:visible !important;
    opacity:1 !important;
    transform:none !important;
    padding-bottom:env(safe-area-inset-bottom) !important;
    box-sizing:content-box !important;
    pointer-events:auto !important;
  }
  .kp-bottom a { min-height:68px !important; position:relative; z-index:2147483001 !important; }
  .kp-main, .kp-single, .kp-footer { padding-bottom:110px !important; }
}

.kp-footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:14px}.kp-footer-links a{color:#d7c8dc;text-decoration:none;font-size:12px;font-weight:700}.kp-footer-links a:hover{color:#ef159f}.kp-footer-links a+a{border-left:1px solid #382044;padding-left:18px}
@media(max-width:800px){.kp-footer-links{gap:10px 14px}.kp-footer-links a{font-size:11px}.kp-footer-links a+a{padding-left:14px}}

@media(max-width:800px){.kp-single-content{padding-bottom:18px}.kp-single-actions{margin-bottom:12px}}


/* Home article section */
.kp-article-list{display:flex;flex-direction:column;gap:12px;padding:0 16px 28px}
.kp-article-card{display:flex;gap:12px;padding:10px;border:1px solid #2c2e3e;border-radius:14px;background:#20222f;color:#f2f0ec;text-decoration:none}
.kp-article-thumb{width:90px;height:70px;flex:0 0 90px;overflow:hidden;border-radius:10px}
.kp-article-thumb img{width:100%;height:100%;object-fit:cover}
.kp-article-card h3{font-size:14px;margin:2px 0 6px}
.kp-article-card p{font-size:11px;color:#9a9aa8;margin:0;line-height:1.45}
.kp-empty{padding:18px 16px;color:#9a9aa8}
\n\n/* Article content and article-first-class layout */\n.kp-single-article .kp-section-head h1{font-size:28px;line-height:1.2;margin:0}\n.kp-single-article>.kp-section{overflow:hidden}\n.kp-single-article .kp-single-content h1,.kp-single-article .kp-single-content h2,.kp-single-article .kp-single-content h3,.kp-single-article .kp-single-content h4{color:#fff;line-height:1.3;margin:22px 0 10px}\n.kp-single-article .kp-single-content p{margin:0 0 16px}\n.kp-single-article .kp-single-content ul,.kp-single-article .kp-single-content ol{padding-left:22px}\n.kp-single-article .kp-single-content blockquote{border-left:3px solid var(--pink);margin:18px 0;padding:8px 16px;color:#cfc2d5}\n.kp-article-app-banner{margin-top:28px}\n.kp-related-games{margin:28px 0 0;padding:0;border:0;background:transparent}\n@media(max-width:800px){.kp-single-article .kp-section-head h1{font-size:20px}.kp-single-article .kp-single-content{font-size:13px}.kp-article-app-banner{margin-top:20px}.kp-related-games{margin-top:20px}}\n

/* KHALOOPKS v3.0 — animated 3D-style hero avatar */
.kp-hero{min-height:430px;background:
 radial-gradient(circle at 78% 42%,rgba(255,18,185,.18),transparent 18%),
 radial-gradient(circle at 92% 28%,rgba(121,20,255,.28),transparent 30%),
 linear-gradient(105deg,#180022,#08000f 56%,#17001e)}
.kp-hero-inner{min-height:430px}
.kp-hero-visual.kp-hero-3d{right:0;width:57%;height:100%;display:flex;align-items:flex-end;justify-content:center;perspective:900px;isolation:isolate}
.kp-hero-glow{position:absolute;width:330px;height:330px;border-radius:50%;right:16%;top:12%;background:radial-gradient(circle,rgba(239,21,159,.42),rgba(117,23,216,.18) 42%,transparent 70%);filter:blur(7px);animation:kpGlowPulse 4.5s ease-in-out infinite}
.kp-hero-avatar-wrap{position:absolute;right:6%;bottom:-4px;width:min(470px,92%);transform-origin:50% 90%;animation:kpAvatarFloat 4.2s ease-in-out infinite;filter:drop-shadow(0 24px 34px rgba(0,0,0,.48))}
.kp-hero-avatar{display:block;width:100%;height:auto;overflow:visible;transform:rotateY(-8deg) rotateX(2deg);transform-origin:center bottom;animation:kpAvatarTilt 6s ease-in-out infinite}
.kp-hero-phone{transform-origin:397px 290px;animation:kpPhoneShow 3.8s ease-in-out infinite}
.kp-hero-orbit{position:absolute;border:1px solid rgba(255,49,188,.28);border-radius:50%;transform:rotateX(66deg) rotateZ(-14deg);pointer-events:none}
.kp-orbit-a{width:390px;height:120px;right:8%;top:44%;animation:kpOrbitA 12s linear infinite}
.kp-orbit-b{width:300px;height:90px;right:16%;top:48%;border-color:rgba(128,54,255,.25);animation:kpOrbitB 9s linear infinite reverse}
.kp-hero-app-chip{position:absolute;right:2%;bottom:34px;display:flex;align-items:center;gap:7px;padding:9px 12px;border:1px solid rgba(255,52,190,.4);border-radius:12px;background:rgba(12,3,19,.72);box-shadow:0 10px 28px rgba(0,0,0,.3),0 0 28px rgba(238,21,159,.12);backdrop-filter:blur(10px);animation:kpChipFloat 3.6s ease-in-out infinite}
.kp-hero-app-chip strong{font-size:9px;letter-spacing:.5px;color:#fff}.kp-hero-app-chip small{font-size:6px;color:#bcaac6;display:block;margin-left:2px}.kp-chip-dot{width:8px;height:8px;border-radius:50%;background:#ff2aaf;box-shadow:0 0 12px #ff2aaf}
@keyframes kpAvatarFloat{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}
@keyframes kpAvatarTilt{0%,100%{transform:rotateY(-8deg) rotateX(2deg) rotateZ(0deg)}50%{transform:rotateY(4deg) rotateX(1deg) rotateZ(.5deg)}}
@keyframes kpPhoneShow{0%,100%{transform:translate3d(0,0,0) rotate(0deg)}45%{transform:translate3d(-4px,-8px,0) rotate(-2deg)}70%{transform:translate3d(3px,-3px,0) rotate(1.5deg)}}
@keyframes kpGlowPulse{0%,100%{opacity:.72;transform:scale(.96)}50%{opacity:1;transform:scale(1.05)}}
@keyframes kpOrbitA{from{transform:rotateX(66deg) rotateZ(-14deg) rotate(0deg)}to{transform:rotateX(66deg) rotateZ(-14deg) rotate(360deg)}}
@keyframes kpOrbitB{from{transform:rotateX(66deg) rotateZ(12deg) rotate(0deg)}to{transform:rotateX(66deg) rotateZ(12deg) rotate(-360deg)}}
@keyframes kpChipFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(max-width:800px){
 .kp-hero{min-height:390px}.kp-hero-inner{min-height:390px;align-items:flex-start}
 .kp-hero-copy{width:56%;padding:32px 0 20px;position:relative;z-index:5}
 .kp-hero h1{font-size:31px}.kp-hero p{font-size:11px}
 .kp-hero-visual.kp-hero-3d{right:-12%;width:66%;height:100%;align-items:flex-end}
 .kp-hero-avatar-wrap{width:360px;right:-2%;bottom:-8px}
 .kp-hero-glow{width:250px;height:250px;right:6%;top:22%}
 .kp-orbit-a{width:260px;height:82px;right:-4%;top:46%}.kp-orbit-b{width:205px;height:65px;right:6%;top:49%}
 .kp-hero-app-chip{right:1%;bottom:18px;padding:7px 9px;gap:5px}.kp-hero-app-chip strong{font-size:7px}.kp-hero-app-chip small{font-size:5px}.kp-chip-dot{width:6px;height:6px}
}
@media(prefers-reduced-motion:reduce){.kp-hero-avatar-wrap,.kp-hero-avatar,.kp-hero-phone,.kp-hero-glow,.kp-hero-orbit,.kp-hero-app-chip{animation:none!important}}


/* KHALOOPKS v3.1 — replacement hero girl photo with CSS 3-D depth */
.kp-hero-photo-wrap{
  width:min(650px,108%);
  height:auto;
  right:1%;
  bottom:-10px;
  transform-style:preserve-3d;
  perspective:1100px;
  animation:kpPhotoFloat 4.8s ease-in-out infinite;
}
.kp-hero-avatar-photo{
  position:relative;
  z-index:3;
  display:block;
  width:100%;
  height:auto;
  max-height:620px;
  object-fit:contain;
  object-position:center bottom;
  transform-style:preserve-3d;
  transform:rotateY(-7deg) rotateX(1deg) translateZ(18px);
  transform-origin:58% 88%;
  filter:drop-shadow(0 24px 30px rgba(0,0,0,.48))
         drop-shadow(0 0 30px rgba(239,21,159,.22));
  animation:kpPhotoTilt 6.5s ease-in-out infinite;
  transition:transform .35s ease, filter .35s ease;
}
.kp-hero-photo-depth{
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  left:0;
  top:0;
  background:url('assets/khaloopks-girl-3d.png') center bottom / contain no-repeat;
  transform:translate3d(18px,10px,-22px) rotateY(-7deg) rotateX(1deg);
  filter:brightness(.42) saturate(1.25) blur(.2px);
  opacity:.52;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 100%);
  mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 100%);
}
.kp-hero-photo-wrap:hover .kp-hero-avatar-photo{
  transform:rotateY(-13deg) rotateX(2deg) translate3d(-5px,-4px,32px) scale(1.015);
  filter:drop-shadow(0 28px 34px rgba(0,0,0,.52))
         drop-shadow(0 0 42px rgba(239,21,159,.30));
}
@keyframes kpPhotoFloat{
  0%,100%{transform:translate3d(0,0,0) rotateZ(0deg)}
  50%{transform:translate3d(0,-7px,0) rotateZ(.35deg)}
}
@keyframes kpPhotoTilt{
  0%,100%{transform:rotateY(-7deg) rotateX(1deg) translateZ(18px)}
  50%{transform:rotateY(-2deg) rotateX(-1deg) translateZ(25px)}
}
@media(max-width:900px){
  .kp-hero-photo-wrap{right:-8%;width:78%;bottom:-7px}
  .kp-hero-avatar-photo{max-height:410px}
}
@media(max-width:640px){
  .kp-hero-photo-wrap{right:-15%;width:84%;bottom:-5px}
  .kp-hero-avatar-photo{max-height:350px}
  .kp-hero-photo-depth{transform:translate3d(12px,7px,-16px) rotateY(-7deg)}
}
@media(prefers-reduced-motion:reduce){
  .kp-hero-photo-wrap,.kp-hero-avatar-photo{animation:none!important}
}


/* KHALOOPKS v3.2 — dynamic Trending Games UI */
.kp-category[href*="kp_sort=trending"]{position:relative}
.kp-category[href*="kp_sort=trending"]:after{content:"AUTO";position:absolute;top:10px;right:10px;color:#ff66ca;font-size:7px;font-weight:900;letter-spacing:.8px;border:1px solid #5c1b71;border-radius:5px;padding:3px 5px;background:rgba(35,4,45,.55)}

/* Category archive: keep featured images hidden. Homepage cards and single posts remain unchanged. */
.kp-category-card-no-image .kp-thumb,
.kp-category-card-no-image .kp-article-thumb {
  display: none !important;
}


/* v19 — Hide featured images on Games, Apps, Articles and Trending section listings. Homepage cards remain unchanged. */
.kp-category-card-no-image .kp-thumb,
.kp-category-card-no-image .kp-article-thumb { display:none !important; }
.kp-single-article-no-featured .kp-single-image,
.kp-single-article-no-featured > .kp-featured-image { display:none !important; }


/* v5.1 FIX: Featured images are hidden INSIDE individual Games, Apps and
 * Articles. They remain available for listing/card thumbnails. */
.kp-single-image,
.kp-single-article .wp-post-image,
.kp-single-game .wp-post-image,
.kp-single-article article > .post-thumbnail,
.kp-single-game article > .post-thumbnail,
.single .post-thumbnail,
.single-khalowin_game .post-thumbnail,
.single-khalowin_app .post-thumbnail {
    display: none !important;
}

/* Never let a featured-image wrapper leave an empty gap on single posts. */
.kp-single-article .featured-image,
.kp-single-game .featured-image,
.kp-single-article .wp-block-post-featured-image,
.kp-single-game .wp-block-post-featured-image {
    display: none !important;
}

/* v6.1 — move app promotion to top, same girl image */
.kp-app-banner-top{display:flex;align-items:center;justify-content:space-between;min-height:260px;margin:18px auto;border:1px solid #2a1240;border-radius:14px;overflow:hidden;background:radial-gradient(circle at 72% 50%,rgba(147,0,177,.35),transparent 28%),linear-gradient(105deg,#12031d,#270038 55%,#100016);position:relative;text-decoration:none;color:inherit;padding:0 34px 0 45px;box-sizing:border-box}
.kp-app-banner-top .kp-app-banner-copy{position:relative;z-index:2;max-width:58%}
.kp-app-eyebrow{font-size:13px;font-weight:900;letter-spacing:2px;color:#fff;margin-bottom:5px}
.kp-app-banner-top h2{margin:0 0 8px;font-size:34px;line-height:1.05;color:#fff}
.kp-app-banner-top p{margin:4px 0;color:#c7b7ce;font-size:14px}
.kp-app-banner-girl{height:260px;width:42%;display:flex;align-items:flex-end;justify-content:center;position:relative;z-index:1}
.kp-app-banner-girl img{display:block;height:100%;width:auto;max-width:100%;object-fit:contain;object-position:center bottom}
.kp-app-banner-top:hover{border-color:#7521a9}
@media(max-width:800px){.kp-app-banner-top{min-height:250px;margin:10px 0;padding:0 8px 0 18px;border-radius:12px}.kp-app-banner-top .kp-app-banner-copy{max-width:57%}.kp-app-eyebrow{font-size:9px;letter-spacing:1px}.kp-app-banner-top h2{font-size:27px;margin-bottom:6px}.kp-app-banner-top p{font-size:10px;line-height:1.35}.kp-app-banner-girl{height:250px;width:46%}}

/* =========================================================
   KHALOOPKS v9 — compact previous-theme card layout
   ========================================================= */
.kp-small-grid{grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:14px!important;align-items:start}
.kp-small-card{padding:7px!important;border-radius:10px!important;min-width:0!important;background:linear-gradient(180deg,#0e0715,#09050e)!important;box-shadow:0 8px 22px rgba(0,0,0,.16)}
.kp-small-card .kp-thumb{aspect-ratio:1/1!important;height:auto!important;border-radius:8px!important}
.kp-small-card .kp-thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
.kp-small-card .kp-card-title{font-size:11px!important;line-height:1.25!important;margin:8px 2px 0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:28px}
.kp-card-meta{font-size:9px;color:#85788d;margin:6px 2px 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-small-card:nth-child(3n+1){border-color:#2d1640!important}
.kp-small-card:nth-child(3n+2){border-color:#321c48!important}
.kp-small-card:nth-child(3n+3){border-color:#241d43!important}
.kp-small-card:hover{transform:translateY(-3px)!important;border-color:#7b27a8!important;box-shadow:0 12px 28px rgba(117,23,216,.16)!important}
.kp-small-card .kp-badge{font-size:7px!important;padding:4px 6px!important;border-radius:5px!important}
.kp-home-section{margin:14px 0!important}
.kp-home-bottom-app{margin:18px 0 8px!important}

/* Individual content: normal width, readable text, no featured image/title */
.kp-single-game,.kp-single-article{max-width:900px!important;margin-left:auto!important;margin-right:auto!important}
.kp-single-game>.kp-section,.kp-single-article>.kp-section{max-width:900px!important}
.kp-single-game .kp-section-head,.kp-single-article .kp-section-head{display:none!important}
.kp-single-image,.kp-single-article .wp-post-image,.kp-single-game .wp-post-image,.single .post-thumbnail,.single-khalowin_game .post-thumbnail,.single-khalowin_app .post-thumbnail{display:none!important}
.kp-single-content{background:#12101a!important;color:#f2eef5!important;font-size:15px!important;line-height:1.85!important;border-radius:12px!important;padding:24px!important;overflow-wrap:anywhere!important}
.kp-single-content p,.kp-single-content li,.kp-single-content span,.kp-single-content div,.kp-single-content td,.kp-single-content th{color:#f2eef5!important}
.kp-single-content h1,.kp-single-content h2,.kp-single-content h3,.kp-single-content h4,.kp-single-content h5,.kp-single-content h6{color:#fff!important}
.kp-single-content a{color:#ff55c4!important;text-decoration:underline!important}
.kp-single-content strong,b{color:#fff!important}
.kp-single-content img{max-width:100%!important;height:auto!important;opacity:1!important;visibility:visible!important}
.kp-single-content table{width:100%!important;color:#f2eef5!important;background:#181522!important;border-collapse:collapse!important}
.kp-single-content td,.kp-single-content th{border:1px solid #3a2946!important;padding:8px!important}
.kp-single-content blockquote{color:#ddd4e5!important;border-left:3px solid #ef159f!important;background:#18121f!important}

/* Never show automatic title on normal single posts */
.single .entry-title,.single .post-title,.single .page-title,.single-khalowin_game .entry-title,.single-khalowin_app .entry-title{display:none!important}

@media(max-width:900px){
 .kp-small-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
 .kp-small-card .kp-card-title{font-size:9px!important;min-height:24px!important}
 .kp-card-meta{font-size:8px}
}
@media(max-width:800px){
 .kp-small-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px!important}
 .kp-small-card{padding:5px!important;border-radius:9px!important}
 .kp-small-card .kp-thumb{border-radius:7px!important}
 .kp-small-card .kp-card-title{font-size:8.5px!important;line-height:1.25!important;margin-top:6px!important;min-height:22px!important}
 .kp-card-meta{font-size:7px!important;margin-top:4px}
 .kp-small-card .kp-badge{font-size:6px!important;padding:3px 5px!important}
 .kp-single-game,.kp-single-article{width:min(100%,760px)!important}
 .kp-single-content{font-size:14px!important;line-height:1.8!important;padding:17px!important;background:#12101a!important}
}
@media(max-width:480px){
 .kp-container{width:calc(100% - 20px)!important}
 .kp-small-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
 .kp-small-card .kp-card-title{font-size:8px!important}
 .kp-card-meta{font-size:6.5px!important}
}


/* =========================================================
   KHALOOPKS v10 — compact cards + readable single content
   Built to preserve the existing v6 content/routing structure.
   ========================================================= */
.kp-container{width:min(1180px,calc(100% - 28px));}
.kp-main{padding:18px 0 46px!important}
.kp-section{padding:14px!important;margin:12px 0!important;border-radius:12px!important}
.kp-section-head{margin-bottom:10px!important}
.kp-section-head h2{font-size:17px!important;letter-spacing:.2px}
.kp-view{font-size:9px!important;padding:6px 9px!important}

/* Compact category row */
.kp-categories{gap:10px!important;margin-bottom:16px!important}
.kp-category{min-height:104px!important;border-radius:11px!important}
.kp-category-icon{font-size:32px!important;height:40px!important}
.kp-category h3{font-size:12px!important;margin:5px 0 2px!important}
.kp-category p{font-size:8px!important}

/* Small, distinct game/app/article tiles */
.kp-small-grid{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;align-items:stretch!important}
.kp-small-card{padding:7px!important;border-radius:10px!important;min-width:0!important;background:#0b0711!important;box-shadow:none!important;display:block!important}
.kp-small-card .kp-thumb{width:100%!important;aspect-ratio:1/1!important;height:auto!important;border-radius:8px!important;background:#15101b!important}
.kp-small-card .kp-thumb img{width:100%!important;height:100%!important;object-fit:cover!important}
.kp-small-card .kp-card-title{font-size:10px!important;line-height:1.28!important;margin:7px 2px 0!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;min-height:26px!important;color:#f7f4fb!important}
.kp-card-meta{font-size:8px!important;color:#8f8497!important;margin:5px 2px 1px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.kp-small-card .kp-badge{font-size:6px!important;padding:3px 5px!important;border-radius:4px!important}
.kp-small-card:nth-child(4n+1){border-color:#341650!important}.kp-small-card:nth-child(4n+2){border-color:#47205b!important}.kp-small-card:nth-child(4n+3){border-color:#25285b!important}.kp-small-card:nth-child(4n+4){border-color:#5a1d4c!important}
.kp-small-card:hover{transform:translateY(-2px)!important;border-color:#8d2bd0!important;box-shadow:0 7px 18px rgba(116,30,160,.16)!important}

/* Apps use a smaller logo tile so the app title has breathing room. */
.kp-small-card.kp-card-app .kp-thumb{aspect-ratio:1/1!important}
.kp-small-card.kp-card-app .kp-thumb img{object-fit:contain!important;padding:7px!important;background:#0f0a15!important}
/* Articles get a slightly wider thumbnail but remain compact. */
.kp-small-card.kp-card-article .kp-thumb{aspect-ratio:1.35/1!important}

/* Individual pages: never show title/featured image, and NEVER inherit dark inline text. */
.kp-single-game,.kp-single-article{width:min(920px,calc(100% - 28px))!important;max-width:920px!important;margin:0 auto!important;padding-top:14px!important}
.kp-single-game>.kp-section,.kp-single-article>.kp-section{width:100%!important;max-width:none!important;padding:16px!important;background:#0f0a16!important}
.kp-single-game .kp-section-head,.kp-single-article .kp-section-head{display:none!important}
.kp-single-image,.kp-single-article .wp-post-image,.kp-single-game .wp-post-image,.single .post-thumbnail,.single-khalowin_game .post-thumbnail,.single-khalowin_app .post-thumbnail{display:none!important;height:0!important;margin:0!important;padding:0!important}
.kp-single-content{background:#0d0a12!important;color:#f5f1f7!important;font-size:15px!important;line-height:1.82!important;border:1px solid #2b1839!important;border-radius:10px!important;padding:22px!important;overflow-wrap:anywhere!important;opacity:1!important;visibility:visible!important;filter:none!important}
.kp-single-content *{opacity:1!important;visibility:visible!important;filter:none!important;text-shadow:none!important}
.kp-single-content p,.kp-single-content li,.kp-single-content span,.kp-single-content div,.kp-single-content td,.kp-single-content th,.kp-single-content label,.kp-single-content small{color:#f0ebf3!important}
.kp-single-content h1,.kp-single-content h2,.kp-single-content h3,.kp-single-content h4,.kp-single-content h5,.kp-single-content h6{color:#ffffff!important}
.kp-single-content a{color:#ff55c4!important;text-decoration:underline!important}
.kp-single-content strong,.kp-single-content b{color:#ffffff!important}
.kp-single-content img{display:block!important;max-width:100%!important;height:auto!important;opacity:1!important;visibility:visible!important;object-fit:contain!important}
.kp-single-content table{width:100%!important;background:#17111e!important;color:#f0ebf3!important;border-collapse:collapse!important}
.kp-single-content td,.kp-single-content th{border:1px solid #3a2946!important;padding:8px!important;color:#f0ebf3!important}
.kp-single-content blockquote{color:#e6dcea!important;background:#17101e!important;border-left:3px solid #ef159f!important;padding:10px 14px!important}
.single .entry-title,.single .post-title,.single .page-title,.single .entry-header,.single-khalowin_game .entry-title,.single-khalowin_game .entry-header,.single-khalowin_app .entry-title,.single-khalowin_app .entry-header{display:none!important}

/* Footer is always a full-width bottom block with centered copyright. */
.kp-footer{width:100%!important;margin-top:28px!important;border-top:1px solid #29123b!important;background:#08040d!important}
.kp-footer-grid{display:block!important;text-align:center!important;padding:22px 0 16px!important}
.kp-footer-grid>div:first-child p{max-width:650px!important;margin:8px auto!important}
.kp-footer-links{justify-content:center!important;margin:12px 0!important}
.kp-footer-grid>div:last-child p{margin:14px 0 0!important;text-align:center!important;color:#8f8497!important;font-size:11px!important}

@media(max-width:900px){
 .kp-small-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
 .kp-small-card .kp-card-title{font-size:9px!important;min-height:24px!important}
}
@media(max-width:700px){
 .kp-container{width:calc(100% - 20px)!important}
 .kp-main{padding-top:12px!important}
 .kp-categories{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .kp-category{min-height:86px!important}
 .kp-category-icon{font-size:27px!important;height:32px!important}
 .kp-category h3{font-size:10px!important}
 .kp-category p{font-size:7px!important}
 .kp-small-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
 .kp-small-card{padding:5px!important;border-radius:8px!important}
 .kp-small-card .kp-thumb{border-radius:6px!important}
 .kp-small-card .kp-card-title{font-size:8px!important;line-height:1.25!important;margin-top:5px!important;min-height:20px!important}
 .kp-card-meta{font-size:6.5px!important;margin-top:3px!important}
 .kp-single-game,.kp-single-article{width:calc(100% - 18px)!important;padding-top:8px!important}
 .kp-single-game>.kp-section,.kp-single-article>.kp-section{padding:8px!important}
 .kp-single-content{font-size:14px!important;line-height:1.78!important;padding:15px!important;border-radius:8px!important}
 .kp-single-content p{margin:0 0 14px!important}
}
@media(max-width:480px){
 .kp-small-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important}
 .kp-small-card .kp-card-title{font-size:7.6px!important}
 .kp-card-meta{font-size:6px!important}
}

/* =========================================================
   v11 — single-post readability + Blog/Reviews/Guides pages
   ========================================================= */
.kp-single-content,
.kp-single-content *{
  -webkit-text-fill-color:inherit!important;
}
.kp-single-content{
  color:#f5f1f7!important;
  background:#0d0a12!important;
  isolation:isolate;
}
.kp-single-content p,
.kp-single-content li,
.kp-single-content td,
.kp-single-content th,
.kp-single-content label,
.kp-single-content figcaption,
.kp-single-content code,
.kp-single-content pre{
  color:#f0ebf3!important;
  -webkit-text-fill-color:#f0ebf3!important;
}
.kp-single-content h1,.kp-single-content h2,.kp-single-content h3,
.kp-single-content h4,.kp-single-content h5,.kp-single-content h6,
.kp-single-content strong,.kp-single-content b{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
}
.kp-single-content a{color:#ff55c4!important;-webkit-text-fill-color:#ff55c4!important}
.kp-single-content img{filter:none!important;mix-blend-mode:normal!important}
.kp-single-content [hidden]{display:none!important}

.kp-page-readable{min-height:300px}
.kp-page-readable .kp-section-head h1{font-size:24px;margin:0;color:#fff}
.kp-page-post-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.kp-page-post-card{display:flex;gap:10px;min-width:0;padding:10px;border:1px solid #29143b;border-radius:10px;background:#110a18;color:#f5f1f7;transition:.18s}
.kp-page-post-card:hover{border-color:#7b1bb0;transform:translateY(-2px)}
.kp-page-post-thumb{width:82px;height:68px;flex:0 0 82px;overflow:hidden;border-radius:7px;background:#0a0610}
.kp-page-post-thumb img{width:100%;height:100%;object-fit:cover}
.kp-page-post-body{min-width:0}
.kp-page-post-body h2{font-size:12px;line-height:1.35;margin:0 0 5px;color:#fff}
.kp-page-post-body p{font-size:9px;line-height:1.45;margin:0 0 5px;color:#bdb2c5}
.kp-page-post-body small{font-size:7px;color:#82758a}
.kp-page-empty{padding:30px 10px;text-align:center;color:#bdb2c5}
.kp-page-empty h2{color:#fff;margin:0 0 8px}
.kp-page-content,.kp-readable-content{color:#f0ebf3!important;line-height:1.8}
.kp-page-content *,.kp-readable-content *{color:#f0ebf3!important;-webkit-text-fill-color:#f0ebf3!important}
.kp-page-content h1,.kp-page-content h2,.kp-page-content h3,.kp-page-content h4,
.kp-readable-content h1,.kp-readable-content h2,.kp-readable-content h3,.kp-readable-content h4{color:#fff!important;-webkit-text-fill-color:#fff!important}

@media(max-width:900px){.kp-page-post-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .kp-page-post-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .kp-page-post-card{display:block;padding:7px}
 .kp-page-post-thumb{width:100%;height:75px;margin-bottom:7px}
 .kp-page-post-body h2{font-size:9px}
 .kp-page-post-body p{font-size:7px}
 .kp-page-readable .kp-section-head h1{font-size:18px}
}


/* =========================================================
   v13 — remove dark shadow/overlay from individual content
   ========================================================= */
.kp-single-content,
.kp-single-content::before,
.kp-single-content::after,
.kp-single-content *::before,
.kp-single-content *::after{
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
}
.kp-single-content{
  background:#111!important;
  color:#f5f5f5!important;
  opacity:1!important;
}
.kp-single-content p,
.kp-single-content li,
.kp-single-content td,
.kp-single-content th,
.kp-single-content blockquote,
.kp-single-content span,
.kp-single-content div{
  color:#f0f0f0!important;
  background-color:transparent!important;
  text-shadow:none!important;
}
.kp-single-content h1,.kp-single-content h2,.kp-single-content h3,
.kp-single-content h4,.kp-single-content h5,.kp-single-content h6,
.kp-single-content strong,.kp-single-content b{
  color:#fff!important;
  text-shadow:none!important;
}
.kp-page-post-card,
.kp-page-readable,
.kp-page-content,
.kp-readable-content{
  box-shadow:none!important;
  text-shadow:none!important;
  filter:none!important;
}
.kp-page-post-card{background:#110a18!important}


/* =========================================================
   v13 HOMEPAGE HERO CATEGORY BUTTONS
   The three buttons beside the girl jump to the matching
   homepage sections instead of leaving the homepage.
   ========================================================= */
.kp-app-banner-top{position:relative;overflow:hidden}
.kp-hero-category-buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;position:relative;z-index:5}
.kp-hero-cat-btn{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:8px 12px;border:1px solid rgba(255,255,255,.24);border-radius:10px;background:rgba(7,10,18,.72);color:#fff!important;text-decoration:none!important;font-size:11px;font-weight:800;letter-spacing:.3px;line-height:1;box-shadow:0 5px 18px rgba(0,0,0,.22);transition:transform .2s ease,background .2s ease,border-color .2s ease}
.kp-hero-cat-btn:hover{transform:translateY(-2px);background:rgba(20,24,36,.92);border-color:rgba(255,255,255,.5)}
.kp-hero-review{border-color:rgba(255,210,80,.42)}
.kp-hero-blog{border-color:rgba(100,190,255,.42)}
.kp-hero-guide{border-color:rgba(150,255,180,.42)}
.kp-home-category-section{scroll-margin-top:90px}
.kp-home-category-section .kp-section-head{margin-bottom:12px}
@media(max-width:700px){
 .kp-hero-category-buttons{gap:6px;margin-top:10px;max-width:250px}
 .kp-hero-cat-btn{min-height:32px;padding:7px 9px;font-size:9px;border-radius:8px}
}