/* KingPepe Explorer — Cinematic theme overlay (frontend-only).
   Loaded AFTER style.css / api.css / mempool.css so it re-themes via CSS variables
   without touching any layout, markup, or functionality. */

:root{
  --bg:#060a08;
  --bg2:rgba(10,16,13,.6);
  --card:rgba(13,20,16,.66);
  --card2:rgba(20,30,24,.72);
  --border:rgba(120,230,170,.14);
  --text:#dce8df;
  --muted:#84988b;
  --green:#22d97f;
  --green-dim:#2fa85a;
  --gold:#e7c15a;
  --blue:#6fb6ff;
  --red:#ff6b7a;
  --radius:12px;
}
html{scroll-behavior:smooth}
body{
  color:var(--text);
  background:
    radial-gradient(60% 42% at 18% 10%,rgba(34,217,127,.06),transparent 60%),
    radial-gradient(52% 46% at 84% 86%,rgba(63,191,79,.05),transparent 60%),
    #060a08;
}

/* ---------- atmosphere layers (built by cinematic.js) — behind everything ---------- */
.kpe-atmos{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.kpe-atmos canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.85}
.kpe-grid{position:absolute;inset:-2px;opacity:.26;
  background-image:linear-gradient(rgba(120,230,170,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(120,230,170,.08) 1px,transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 18%,#000 30%,transparent 80%);
          mask-image:radial-gradient(120% 90% at 50% 18%,#000 30%,transparent 80%);
  animation:kpeGrid 44s linear infinite}
@keyframes kpeGrid{to{background-position:0 -60px,-60px 0}}
.kpe-fog{position:absolute;inset:0;
  background:radial-gradient(50% 40% at 30% 20%,rgba(34,217,127,.10),transparent 60%),
             radial-gradient(46% 40% at 80% 84%,rgba(231,193,90,.05),transparent 60%);
  animation:kpeFog 20s ease-in-out infinite alternate}
@keyframes kpeFog{from{opacity:.6}to{opacity:1}}
.kpe-vig{position:absolute;inset:0;background:radial-gradient(130% 120% at 50% 32%,transparent 55%,rgba(0,0,0,.5))}

/* ---------- glass panels + hover + transitions ---------- */
.card,.table-wrap,.blockcube,.projblock,.ioitem,.raw-hex,.error-box,
.apx-card,.apx-scard,.apx-ep,.apx-ex{
  backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.card,.apx-card,.apx-scard,.apx-ep{box-shadow:inset 0 1px 0 rgba(255,255,255,.02),0 8px 24px rgba(0,0,0,.28)}
.card:hover,.blockcube:hover,.apx-ep:hover,.apx-scard:hover{
  transform:translateY(-2px);border-color:rgba(34,217,127,.4);
  box-shadow:0 12px 34px rgba(0,0,0,.45),0 0 0 1px rgba(34,217,127,.14),0 0 26px rgba(34,217,127,.08);
}

/* ---------- top bar / api top (glass) ---------- */
.topbar,.apx-top{
  background:linear-gradient(180deg,rgba(10,16,13,.84),rgba(6,10,8,.68))!important;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(34,217,127,.16)!important;
}
.brand-text b,.apx-brand b{color:var(--green);text-shadow:0 0 16px rgba(34,217,127,.35)}
.logo{box-shadow:0 0 0 1px rgba(34,217,127,.3),0 0 18px rgba(34,217,127,.22)!important}
.net-badge{box-shadow:0 0 16px rgba(34,217,127,.18)}

/* ---------- nav ---------- */
.mainnav a,.apx-link{transition:color .2s,background .2s,box-shadow .2s}
.mainnav a:hover,.apx-link:hover{background:rgba(34,217,127,.08)!important;color:#eafff2!important;box-shadow:inset 0 0 0 1px rgba(34,217,127,.22)}
.mainnav a.active{background:rgba(34,217,127,.12)!important;color:#eafff2!important;box-shadow:inset 0 0 0 1px rgba(34,217,127,.32)}

/* ---------- search ---------- */
.search input:focus{border-color:var(--green)!important;box-shadow:0 0 0 2px rgba(34,217,127,.18)}
.search button{background:linear-gradient(180deg,var(--green),var(--green-dim))!important;border:0!important;transition:filter .2s}
.search button:hover{filter:brightness(1.1)}

/* ---------- tables ---------- */
tbody tr{transition:background .18s}
tbody tr:hover{background:rgba(34,217,127,.07)!important}
th{background:rgba(10,16,13,.7)!important}

/* ---------- block / projected cubes (recolour from blue/purple) ---------- */
.blockcube{background:linear-gradient(160deg,rgba(20,40,28,.7),rgba(8,16,12,.6))!important;border:1px solid rgba(34,217,127,.28)!important}
.blockcube:hover{border-color:var(--green)!important}
.blockcube .h{color:var(--gold)!important}
.projblock{background:linear-gradient(160deg,rgba(40,30,60,.5),rgba(14,20,26,.6))!important;border:1px solid rgba(140,110,220,.35)!important}

/* ---------- misc accents ---------- */
.pill.ok{box-shadow:0 0 14px rgba(34,217,127,.18)}
.section-title,.apx-section-title{color:#9fdcb8}
.apx-dot.on{box-shadow:0 0 10px var(--green)!important}

/* ---------- smooth page transition (SPA swaps #view child) ---------- */
@keyframes kpeEnter{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.view>*{animation:kpeEnter .5s cubic-bezier(.2,.7,.2,1)}

/* ---------- number flash when values (re)render ---------- */
@keyframes kpeNum{0%{text-shadow:none}28%{text-shadow:0 0 18px rgba(34,217,127,.75);color:#eafff2}100%{text-shadow:none}}
.stat .value{animation:kpeNum 1.1s ease .12s}
.stat .value.kpe-count{color:#eafff2}

/* ---------- sound toggle ---------- */
.kpe-sound{position:fixed;right:16px;bottom:16px;z-index:9997;display:inline-flex;align-items:center;gap:7px;
  height:38px;padding:0 13px;border-radius:11px;border:1px solid var(--border);
  background:rgba(10,16,13,.7);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  color:var(--text);font:600 12.5px/1 -apple-system,"Segoe UI",Roboto,sans-serif;cursor:pointer;transition:.2s}
.kpe-sound:hover{border-color:var(--green);color:#fff}
.kpe-sound.on{border-color:var(--green);color:var(--green)}

/* ---------- lightning + KINGPEPE flash (never blocks interaction) ---------- */
.kpe-strike{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden;display:none}
.kpe-strike.go{display:block}
.kpe-flashwrap{position:absolute;inset:0;background:#dfffe9;opacity:0}
.kpe-strike.go .kpe-flashwrap{animation:kpeFlash 1.5s ease-out forwards}
@keyframes kpeFlash{0%{opacity:0}6%{opacity:.6}12%{opacity:.1}18%{opacity:.38}30%{opacity:0}100%{opacity:0}}
.kpe-bolt{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  filter:drop-shadow(0 0 12px rgba(34,217,127,.7)) drop-shadow(0 0 4px rgba(255,255,255,.8))}
.kpe-strike.go .kpe-bolt{animation:kpeBolt 1.4s ease-out forwards}
@keyframes kpeBolt{0%{opacity:0}5%{opacity:1}16%{opacity:.5}24%{opacity:.95}40%{opacity:0}100%{opacity:0}}
.kpe-word{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%) scale(.86);opacity:0;white-space:nowrap;
  font:800 clamp(34px,10vw,120px)/1 "Segoe UI",system-ui,sans-serif;letter-spacing:.06em;
  background:linear-gradient(180deg,#eafff2,#22d97f 55%,#3fbf4f);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 30px rgba(34,217,127,.55))}
.kpe-strike.go .kpe-word{animation:kpeWord 2s ease-out .18s forwards}
@keyframes kpeWord{0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1)}70%{opacity:1}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.04)}}

/* ---------- reduced motion / lightweight mobile ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .kpe-atmos canvas,.kpe-grid,.kpe-fog{animation:none!important}
  .view>*{animation:none!important}
  .stat .value{animation:none!important}
  .kpe-strike{display:none!important}
  *{transition:none!important}
}
@media (max-width:720px){
  /* keep panels a touch more opaque on phones so blur cost stays low + text stays crisp */
  .card,.apx-card,.apx-scard,.apx-ep{background:rgba(12,19,15,.82)}
}

/* ===================== Ecosystem gateway (Native / Story / Solana) ===================== */
.ecoswitch{display:flex;gap:6px;align-items:center}
.eco-link{color:var(--muted);padding:6px 13px;border-radius:9px;font-weight:600;font-size:clamp(15px,0.85rem + 0.25vw,18px);border:1px solid transparent;transition:.2s;white-space:nowrap;display:inline-flex;align-items:center}
.eco-link::before{margin-right:5px}
.eco-native::before{content:"🟢"}.eco-story::before{content:"👑"}
.eco-solana .solana-logo{margin-right:6px}
.eco-link.eco-native.active,.eco-link.eco-native:hover{color:#eafff2;background:rgba(34,217,127,.12);border-color:rgba(34,217,127,.3);box-shadow:0 0 16px rgba(34,217,127,.15)}
.eco-link.eco-story:hover{color:var(--gold);background:rgba(231,193,90,.1);border-color:rgba(231,193,90,.3)}
.eco-link.eco-solana:hover{color:#c9b6ff;background:rgba(153,69,255,.12);border-color:rgba(153,69,255,.35)}

/* compact identity banner */
.eco-banner{max-width:1180px;margin:14px auto 0;padding:9px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-radius:12px;border:1px solid var(--border);background:rgba(10,16,13,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.eco-banner .eb-tag{font:700 10px/1 var(--mono);letter-spacing:.18em;padding:4px 9px;border-radius:20px}
.eco-banner.native .eb-tag{color:#04120a;background:linear-gradient(90deg,var(--green),var(--gold))}
.eco-banner .eb-title{font-weight:800;letter-spacing:.06em;color:#eafff2;font-size:clamp(15px,0.9rem + 0.4vw,20px)}
.eco-banner .eb-sub{color:var(--muted);font-size:clamp(13px,0.8rem + 0.2vw,15px)}

/* home ecosystem cards */
.eco-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:6px}
.eco-card{position:relative;display:flex;flex-direction:column;gap:5px;padding:20px;border-radius:16px;overflow:hidden;
  border:1px solid var(--border);color:var(--text);text-decoration:none;backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);
  transition:transform .25s,box-shadow .25s,border-color .25s}
.eco-card:hover{transform:translateY(-4px);text-decoration:none}
.eco-card .ec-tag{font:700 10px/1 var(--mono);letter-spacing:.16em;opacity:.92}
.eco-card .ec-icon{font-size:29px;margin:2px 0}
.eco-card .ec-h{font-size:clamp(20px,1.1rem + 0.5vw,24px);font-weight:800;letter-spacing:.2px}
.eco-card .ec-s{color:var(--muted);font-size:clamp(14px,0.85rem + 0.2vw,16px);line-height:1.5;flex:1}
.eco-card .ec-btn{margin-top:8px;font-weight:700;font-size:clamp(14px,0.85rem + 0.2vw,16px)}
.eco-card .ec-icon .solana-logo{width:28px;height:28px;max-width:28px;max-height:28px}
.eco-card.native{background:radial-gradient(120% 100% at 20% 0%,rgba(34,217,127,.14),rgba(8,16,12,.5))}
.eco-card.native .ec-tag,.eco-card.native .ec-btn{color:var(--green)}.eco-card.native .ec-h{color:#eafff2}
.eco-card.native:hover{border-color:var(--green);box-shadow:0 16px 40px rgba(0,0,0,.4),0 0 30px rgba(34,217,127,.14)}
.eco-card.story{background:radial-gradient(120% 100% at 20% 0%,rgba(231,193,90,.12),rgba(6,8,6,.7))}
.eco-card.story .ec-tag,.eco-card.story .ec-btn{color:var(--gold)}.eco-card.story .ec-h{color:#f4dd97}
.eco-card.story:hover{border-color:rgba(231,193,90,.5);box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 30px rgba(231,193,90,.12)}
.eco-card.solana{background:radial-gradient(120% 100% at 20% 0%,rgba(153,69,255,.16),rgba(20,241,149,.05) 55%,rgba(8,12,16,.6))}
.eco-card.solana .ec-tag,.eco-card.solana .ec-btn{color:#c9b6ff}.eco-card.solana .ec-h{color:#e6dcff}
.eco-card.solana:hover{border-color:rgba(153,69,255,.5);box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 30px rgba(153,69,255,.16)}

/* mobile menu + toggle */
.navtoggle{display:none;background:rgba(10,16,13,.7);border:1px solid var(--border);color:var(--text);width:40px;height:38px;border-radius:10px;font-size:18px;cursor:pointer}
.mobilemenu{display:none}
.mobilemenu:not([hidden]){display:block;max-width:1180px;margin:10px auto 0;padding:6px 16px}
.mm-group{margin-bottom:12px}
.mm-label{font:700 12px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;margin:8px 0;color:var(--green);display:flex;align-items:center}
.mm-label .solana-logo{margin-right:6px}
.mm-group:nth-child(2) .mm-label{color:#c9b6ff}
.mobilemenu a{display:block;padding:11px 12px;border-radius:9px;color:var(--text);border:1px solid var(--border);background:rgba(10,16,13,.5);margin-bottom:6px;font-weight:600}
.mobilemenu a:hover{border-color:var(--green);text-decoration:none}

@media (max-width:900px){ .mainnav{display:none} .navtoggle{display:inline-block} .ecoswitch{order:3} }
@media (max-width:560px){ .brand-text{font-size:16px} .net-badge{display:none} .search{flex-basis:100%;order:4} }