/* ============================================================
   EVANTGAMES v7.4.0 — MODAPKTOP-style layout skin (DARK identity)
   Keeps the EVANTGAMES background & palette:
   bg #2B3648 · surface #333F53 · green #1AAE50/#4ADE80 · blue #38BDF8
   Loads AFTER the base sheets and only adds/overrides layout details:
   icon nav pills, category sidebar, PPSSPP shelf, compact cards,
   simple footer. 100% additive — nothing here breaks existing pages.
   ============================================================ */

:root{
  --mapk-bg:#2B3648;
  --mapk-surface:#333F53;
  --mapk-surface-2:#3A4760;
  --mapk-line:rgba(255,255,255,.09);
  --mapk-green:#1AAE50;
  --mapk-green-2:#4ADE80;
  --mapk-blue:#38BDF8;
  --mapk-text:#EAEFFA;
  --mapk-muted:#BCC4DA;
  --mapk-radius:18px;
}

/* ---------- 1. Header: MODAPKTOP icon nav pills ---------- */
.nav-list.mapk-nav{display:flex;align-items:center;gap:6px}
.nav-list.mapk-nav li a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 14px;border-radius:999px;
  font-weight:700;font-size:.86rem;color:var(--mapk-muted);
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.nav-list.mapk-nav li a:hover,
.nav-list.mapk-nav li a.active{
  color:#fff;background:rgba(255,255,255,.07);transform:translateY(-1px);
}
.nav-list.mapk-nav .nav-ic{
  width:24px;height:24px;border-radius:50%;flex:0 0 24px;
  display:inline-grid;place-items:center;font-size:.6rem;color:#fff;
  background:linear-gradient(135deg,var(--mapk-green),var(--mapk-blue));
  box-shadow:0 2px 8px rgba(26,174,80,.35);
}
.nav-list.mapk-nav li:nth-child(2) .nav-ic{background:linear-gradient(135deg,#8B5CF6,var(--mapk-blue))}
.nav-list.mapk-nav li:nth-child(3) .nav-ic{background:linear-gradient(135deg,var(--mapk-blue),#8B5CF6)}
.nav-list.mapk-nav li:nth-child(4) .nav-ic{background:linear-gradient(135deg,#F59E0B,#F97316)}
.nav-list.mapk-nav li:nth-child(5) .nav-ic{background:linear-gradient(135deg,#EC4899,#8B5CF6)}
.nav-list.mapk-nav li:nth-child(6) .nav-ic{background:linear-gradient(135deg,var(--mapk-green),#0EA5E9)}

/* ---------- 2. Games Library: main column + sidebar ---------- */
.mapk-layout{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:26px;align-items:start;
}
.mapk-main{min-width:0}
.mapk-side{position:sticky;top:92px;display:flex;flex-direction:column;gap:20px}

.mapk-widget{
  background:var(--mapk-surface);
  border:1px solid var(--mapk-line);
  border-radius:var(--mapk-radius);
  padding:18px 16px;
  box-shadow:0 10px 28px rgba(0,0,0,.22);
}
.mapk-widget-head{
  display:flex;align-items:center;gap:10px;
  padding-bottom:12px;margin-bottom:12px;
  border-bottom:1px solid var(--mapk-line);
}
.mapk-widget-head h3{
  margin:0;font-size:1rem;font-weight:900;color:#fff;letter-spacing:-.2px;flex:1;
}
.mapk-widget-ic{
  width:32px;height:32px;border-radius:10px;flex:0 0 32px;
  display:inline-grid;place-items:center;color:#fff;font-size:.8rem;
  background:linear-gradient(135deg,var(--mapk-green),var(--mapk-blue));
  box-shadow:0 4px 12px rgba(26,174,80,.35);
}
.mapk-widget-ic.mapk-ic-2{background:linear-gradient(135deg,#8B5CF6,var(--mapk-blue));box-shadow:0 4px 12px rgba(139,92,246,.35)}
.mapk-viewall{
  font-size:.72rem;font-weight:800;color:var(--mapk-green-2);
  padding:4px 10px;border-radius:999px;background:rgba(26,174,80,.12);
  transition:background .18s ease,color .18s ease;
}
.mapk-viewall:hover{background:rgba(26,174,80,.25);color:#fff}

/* Category links — 2 columns like MODAPKTOP side boxes */
.mapk-cat-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr 1fr;gap:6px 10px;
}
.mapk-cat-list li a{
  display:flex;align-items:center;gap:7px;
  padding:8px 10px;border-radius:10px;
  font-size:.8rem;font-weight:600;color:var(--mapk-muted);
  background:rgba(255,255,255,.03);
  border:1px solid transparent;
  transition:all .18s ease;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mapk-cat-list li a i{color:var(--mapk-green);font-size:.65rem;flex:0 0 auto}
.mapk-cat-list li a:hover{
  color:#fff;border-color:rgba(26,174,80,.4);
  background:rgba(26,174,80,.1);transform:translateX(2px);
}

/* ---------- 3. Game cards — compact MODAPKTOP polish ---------- */
.game-card{border-radius:var(--mapk-radius)}
.game-card:hover{border-color:rgba(56,189,248,.35)}

/* ---------- 4. PPSSPP shelf ---------- */
.mapk-ppsspp{position:relative}
.mapk-ppsspp .cn{position:relative}
.mapk-ppsspp .ppsspp-grid{position:relative}
.mapk-ppsspp .evn-strip-head{
  border-left:4px solid var(--mapk-blue);
  padding-left:16px;border-radius:4px;
}
.ppsspp-grid .game-card{
  background:linear-gradient(180deg,rgba(56,189,248,.05),transparent 40%),var(--mapk-surface);
}
.ppsspp-grid .game-card:hover{border-color:rgba(56,189,248,.5)}

/* ---------- 5. Simple footer ---------- */
.mapk-footer{
  background:var(--mapk-surface);
  border-top:1px solid var(--mapk-line);
  padding:44px 0 0;margin-top:40px;
}
.mapk-footer .f-grid{
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px;
  padding-bottom:32px;
}
.mapk-footer .f-brand strong{font-size:1.3rem;font-weight:900;color:#fff;letter-spacing:-.5px}
.mapk-footer .f-brand span{color:var(--mapk-green-2)}
.mapk-footer .f-desc{color:var(--mapk-muted);font-size:.85rem;line-height:1.6;margin:10px 0 14px;max-width:340px}
.mapk-footer .f-social{display:flex;gap:8px}
.mapk-footer .f-social a{
  width:34px;height:34px;border-radius:10px;display:inline-grid;place-items:center;
  color:var(--mapk-muted);background:rgba(255,255,255,.05);
  border:1px solid var(--mapk-line);font-size:.85rem;
  transition:all .18s ease;
}
.mapk-footer .f-social a:hover{
  color:#fff;background:linear-gradient(135deg,var(--mapk-green),var(--mapk-blue));
  border-color:transparent;transform:translateY(-2px);
}
.mapk-footer .f-col h4{
  color:#fff;font-size:.82rem;font-weight:900;text-transform:uppercase;
  letter-spacing:.8px;margin:4px 0 14px;
}
.mapk-footer .f-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.mapk-footer .f-col ul a{
  color:var(--mapk-muted);font-size:.83rem;font-weight:600;
  display:inline-flex;align-items:center;gap:7px;transition:color .18s ease,transform .18s ease;
}
.mapk-footer .f-col ul a i{font-size:.55rem;color:var(--mapk-green)}
.mapk-footer .f-col ul a:hover{color:var(--mapk-green-2);transform:translateX(3px)}
.mapk-footer .f-bottom{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--mapk-line);
  padding:16px 0 18px;
}
.mapk-footer .f-copy{color:var(--mapk-muted);font-size:.8rem}
.mapk-footer .f-copy strong{color:#fff}
.mapk-footer .f-links{display:flex;gap:16px;flex-wrap:wrap}
.mapk-footer .f-links a{color:var(--mapk-muted);font-size:.78rem;font-weight:600}
.mapk-footer .f-links a:hover{color:var(--mapk-green-2)}

/* ---------- 6. Scroll-top button (kept from base, safe re-style) ---------- */
#scrollTopBtn{
  position:fixed;right:18px;bottom:18px;z-index:60;
  width:42px;height:42px;border-radius:12px;border:0;cursor:pointer;
  color:#fff;background:linear-gradient(135deg,var(--mapk-green),var(--mapk-blue));
  box-shadow:0 8px 22px rgba(26,174,80,.4);
  display:grid;place-items:center;font-size:.9rem;
  opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease;
}
#scrollTopBtn.show,body.scrolled #scrollTopBtn{opacity:1;pointer-events:auto;transform:translateY(0)}

/* ---------- 7. Responsive ---------- */
@media (max-width:1024px){
  .mapk-layout{grid-template-columns:1fr}
  .mapk-side{position:static;order:2;flex-direction:row;flex-wrap:wrap}
  .mapk-side .mapk-widget{flex:1 1 280px}
}
@media (max-width:860px){
  .mapk-footer .f-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .nav-list.mapk-nav li a{padding:6px 10px;font-size:.8rem}
  .mapk-footer .f-grid{grid-template-columns:1fr;gap:24px}
  .mapk-footer .f-bottom{flex-direction:column;align-items:flex-start}
  .mapk-cat-list{grid-template-columns:1fr 1fr}
  .mapk-side{flex-direction:column}
}

/* ============================================================
   v7.4.1 additions — hidden SEO H1, big auto-rotating hero banner,
   compact rectangular game cards (MODAPKTOP list style)
   ============================================================ */

/* ---------- 8. Hidden-but-crawlable hero H1 ---------- */
.mapk-sr-only{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}

/* ---------- 9. Big auto-rotating hero banner ---------- */
.mapk-hero-banner{position:relative;width:100%;min-height:280px;aspect-ratio:16/7;border-radius:22px;overflow:hidden;background:var(--mapk-surface);border:1px solid var(--mapk-line);box-shadow:0 18px 44px rgba(0,0,0,.35);margin:6px 0 18px}
.mapk-slide{position:absolute;inset:0;display:block;opacity:0;transition:opacity .8s ease;pointer-events:none}
.mapk-slide.on{opacity:1;pointer-events:auto}
.mapk-slide img{width:100%;height:100%;object-fit:cover;object-position:center top}
.mapk-slide-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,54,72,0) 32%,rgba(18,24,34,.94) 100%)}
.mapk-slide-txt{position:absolute;left:22px;right:22px;bottom:18px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mapk-slide-badge{font-size:.6rem;font-weight:900;letter-spacing:.8px;text-transform:uppercase;color:#fff;background:#EF4444;padding:3px 10px;border-radius:999px;box-shadow:0 3px 10px rgba(239,68,68,.4)}
.mapk-slide-txt strong{font-size:clamp(1.2rem,2.6vw,1.9rem);font-weight:900;color:#fff;letter-spacing:-.5px;text-shadow:0 2px 12px rgba(0,0,0,.55);line-height:1.15}
.mapk-slide-txt em{font-style:normal;font-size:.8rem;font-weight:700;color:#D7DEEF}
.mapk-slide-btn{display:inline-flex;align-items:center;gap:8px;margin-top:5px;padding:8px 20px;border-radius:999px;font-size:.8rem;font-weight:900;color:#fff;background:linear-gradient(135deg,var(--mapk-green),var(--mapk-blue));box-shadow:0 6px 18px rgba(26,174,80,.45);transition:transform .18s ease}
.mapk-slide.on:hover .mapk-slide-btn{transform:translateY(-2px)}
.mapk-dots{position:absolute;right:16px;bottom:16px;display:flex;gap:6px;z-index:3}
.mapk-dot{width:9px;height:9px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.35);padding:0;transition:all .2s ease}
.mapk-dot.on{width:22px;border-radius:999px;background:linear-gradient(135deg,var(--mapk-green),var(--mapk-blue))}
.mapk-hero-static .mapk-slide-brand{position:absolute;inset:0;display:grid;place-items:center;text-align:center;background:linear-gradient(135deg,#3A4760,#2B3648)}
.mapk-hero-static .mapk-slide-txt{position:static;align-items:center}

/* ---------- 10. Compact rectangular game cards ---------- */
.game-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;align-items:stretch}
.mapk-layout .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.game-grid .game-card{display:flex!important;flex-direction:row!important;align-items:center;gap:14px;position:relative;padding:12px 14px!important;background:var(--mapk-surface)!important;border:1px solid var(--mapk-line)!important;border-radius:16px!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;overflow:visible!important;min-height:0}
.game-grid .game-card:hover{transform:translateY(-2px);border-color:rgba(56,189,248,.45)!important;box-shadow:0 10px 24px rgba(0,0,0,.28)}
.game-grid .game-img-wrap{position:relative;width:78px;height:78px;flex:0 0 78px;margin:0!important;padding:0!important;aspect-ratio:1/1;overflow:visible!important;border-radius:16px}
.game-grid .game-img-wrap .game-card-link{display:block;width:100%;height:100%}
.game-grid .game-img{width:100%!important;height:100%!important;object-fit:cover;border-radius:16px!important;display:block}
.game-grid .game-mod-badge{position:absolute;left:50%;bottom:-7px;top:auto!important;right:auto!important;transform:translateX(-50%);margin:0;font-size:.55rem;font-weight:900;letter-spacing:.6px;color:#fff!important;background:#EF4444!important;padding:2px 9px;border-radius:6px;box-shadow:0 3px 8px rgba(239,68,68,.5);line-height:1.5}
.game-grid .game-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;padding:0!important;margin:0!important}
.game-grid .game-title{margin:0!important;font-size:.95rem;font-weight:800;color:#fff;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:28px}
.game-grid .game-meta{display:flex;gap:6px;margin:0!important;font-size:.76rem;color:var(--mapk-muted);font-weight:600;line-height:1.4}
.game-grid .game-meta span{display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.game-grid .game-meta i{color:var(--mapk-muted);margin-right:6px;font-size:.68rem}
.game-grid .mapk-feat-line span i{color:var(--mapk-green-2)}
.game-grid .mapk-bm{position:absolute;top:12px;right:12px;width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:.72rem;color:var(--mapk-blue);border:1px solid rgba(56,189,248,.35);background:rgba(56,189,248,.08)}
.game-grid .filler-card[hidden]{display:none!important}

/* ---------- 11. Responsive ---------- */
@media (max-width:1180px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1024px){.mapk-layout .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .game-grid,.mapk-layout .game-grid{grid-template-columns:1fr}
  .mapk-hero-banner{aspect-ratio:16/10;min-height:210px;border-radius:16px}
  .mapk-slide-txt{left:14px;right:14px;bottom:12px}
}

/* ============================================================
   v7.4.2 — hero harmony: the big banner stretches to match the
   phone column height, platforms row tucks under it, and the
   static fallback is centered. No more dead space.
   ============================================================ */
.hero.hero-compact{padding:30px 0 44px!important}
.hero-grid{align-items:stretch!important}
.hero-left{display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0}
.hero-left .mapk-hero-banner{flex:1 1 auto;aspect-ratio:auto;min-height:400px;max-height:560px;margin:0}
.hero-left .hn-platforms{margin:0;display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.mapk-hero-static .mapk-slide-brand::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(26,174,80,.22),transparent 55%),radial-gradient(circle at 75% 80%,rgba(56,189,248,.18),transparent 55%)}
.mapk-hero-static .mapk-slide-txt{position:relative;align-items:center;text-align:center;max-width:520px;padding:0 24px}
.mapk-hero-static .mapk-slide-txt strong{font-size:clamp(1.6rem,3.4vw,2.4rem)}
.mapk-hero-static .mapk-slide-txt em{line-height:1.7}
@media (max-width:980px){
  .hero-left .mapk-hero-banner{flex:none;width:100%;min-height:0;aspect-ratio:16/9;max-height:420px}
}
@media (max-width:720px){
  .hero-left{display:flex!important;flex-direction:column!important;gap:14px}
  .hero-left .mapk-hero-banner{aspect-ratio:16/10;min-height:200px}
}

/* ============================================================
   v7.4.4 — phone mockup mirrors the real mobile site
   (mini hero banner + MODAPKTOP-style compact game rows)
   ============================================================ */
.phone-3d{border-width:7px!important;border-color:#3A4763!important;border-radius:42px!important}
.phone-screen{gap:10px!important;padding:34px 14px 16px!important}
.ph-search{border:1px solid rgba(255,255,255,.1)!important;background:rgba(255,255,255,.05)!important;border-radius:11px!important}

/* mini hero banner — same look as the big homepage banner */
.ph-mini-banner{position:relative;width:100%;aspect-ratio:16/8.2;border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.1);margin:0 0 8px;background:#232C3D}
.ph-mini-banner img{width:100%;height:100%;object-fit:cover;display:block}
.ph-mb-grad{position:absolute;inset:0;background:linear-gradient(180deg,rgba(35,44,61,0) 30%,rgba(35,44,61,.94) 96%)}
.ph-mb-badge{position:absolute;top:7px;left:7px;background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;font:800 .48rem/1 'Inter',system-ui,sans-serif;padding:3px 7px;border-radius:6px;letter-spacing:.6px;box-shadow:0 3px 8px rgba(0,0,0,.4)}
.ph-mb-txt{position:absolute;left:10px;right:10px;bottom:7px;display:flex;flex-direction:column;gap:2px}
.ph-mb-txt b{font:800 .68rem/1.25 'Inter',system-ui,sans-serif;color:#fff;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-mb-txt i{font:700 .53rem/1.2 'Inter',system-ui,sans-serif;font-style:normal;color:#4ADE80;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* compact game rows — same DNA as the new .mapk-flat cards */
.ph-codes{display:flex;flex-direction:column;gap:7px}
.ph-code-row.mapk-mini{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.09);transition:border-color .2s,background .2s}
.ph-code-row.mapk-mini:hover{border-color:rgba(74,222,128,.42);background:rgba(74,222,128,.05)}
.ph-code-row.mapk-mini .ph-code-ic{position:relative;width:38px;height:38px;flex-shrink:0;border:0;background:0 0;box-shadow:none;overflow:visible}
.ph-code-row.mapk-mini .ph-code-ic img{width:38px;height:38px;border-radius:10px;object-fit:cover;display:block;border:1px solid rgba(255,255,255,.14)}
.ph-mini-mod{position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#EF4444,#DC2626);color:#fff;font:800 .4rem/1 'Inter',system-ui,sans-serif;padding:2px 5px;border-radius:5px;letter-spacing:.4px;box-shadow:0 2px 6px rgba(0,0,0,.45)}
.ph-code-row.mapk-mini .ph-code-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ph-code-row.mapk-mini .ph-code-name{font:800 .62rem/1.25 'Inter',system-ui,sans-serif;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ph-code-sub{font:600 .52rem/1.2 'Inter',system-ui,sans-serif;color:#BCC4DA;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.ph-code-sub i{color:#38BDF8;font-size:.48rem}
.ph-code-feat{font:700 .52rem/1.2 'Inter',system-ui,sans-serif;color:#4ADE80;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden}
.ph-code-feat i{font-size:.48rem;color:#4ADE80}
.ph-code-row.mapk-mini .ph-code-copy{flex-shrink:0;background:linear-gradient(135deg,#1AAE50,#16A34A);color:#fff;font:800 .52rem/1 'Inter',system-ui,sans-serif;padding:6px 10px;border-radius:8px;letter-spacing:.5px;box-shadow:0 4px 10px rgba(26,174,80,.35);border:0}
.ph-code-row.mapk-mini.done .ph-code-copy{background:rgba(74,222,128,.12);color:#4ADE80;border:1px solid rgba(74,222,128,.4);box-shadow:none}
.ph-reward{border:1px dashed rgba(74,222,128,.3)!important;border-radius:10px!important;background:rgba(26,174,80,.07)!important}

/* floating side games — thin frame that matches the new design */
.float-game{width:64px!important;height:64px!important;border-radius:16px!important;border:1px solid rgba(255,255,255,.16)!important;background:#333F53!important;box-shadow:0 10px 24px rgba(0,0,0,.45)!important;padding:3px!important}
.float-game img{border-radius:12px!important}
.float-game::after{content:none!important}
.float-game:hover{border-color:rgba(74,222,128,.55)!important;box-shadow:0 14px 30px rgba(0,0,0,.55),0 0 22px rgba(74,222,128,.28)!important}
.float-game.fg-7,.float-game.fg-8{width:52px!important;height:52px!important;border-radius:13px!important}
@media (max-width:640px){.float-game{width:48px!important;height:48px!important;border-radius:12px!important;padding:2px!important}.float-game img{border-radius:9px!important}}