/* ============================================================
   ZBD — app-retro.css
   Turns each product page into a themed RETRO ARCADE MACHINE
   that matches the company home page. Loaded LAST on every app
   page (after app.css and any page-specific css) so it can lift
   the generic landing components into the cabinet aesthetic while
   preserving every existing element. Per-page colour comes from
   --accent / --accent2 already set on :root by each page.
   ============================================================ */

/* ---------- shared retro panel look (matches home .service) ---------- */
.feature,
.mechanic-card,
.liquid-card,
.archetype,
.ctrl-card,
.stat-pill,
.boss,
.hero-card{
  background:linear-gradient(180deg,var(--panel),var(--panel2)) !important;
  border:var(--px) solid var(--shadow) !important;
  border-radius:0 !important;
  box-shadow:inset 0 0 0 2px var(--line) !important;
  transition:transform .12s steps(2), box-shadow .12s !important;
}
.feature:hover,
.mechanic-card:hover,
.liquid-card:hover,
.archetype:hover,
.ctrl-card:hover,
.boss:hover,
.hero-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:inset 0 0 0 2px var(--accent), 0 var(--px) 0 var(--shadow) !important;
}

/* accent top rail like a console cartridge slot */
.feature, .mechanic-card, .archetype, .ctrl-card, .boss{ position:relative; overflow:hidden; }
.feature::after,
.mechanic-card::after,
.archetype::after,
.ctrl-card::after,
.boss::after{
  content:""; position:absolute; top:0; left:0; right:0; height:var(--px);
  background:linear-gradient(90deg,var(--accent),var(--accent2)); z-index:2;
}

/* icons become lit pixel tiles */
.feature .ico,
.mechanic-icon{
  border-radius:0 !important;
  background:linear-gradient(135deg,
    color-mix(in srgb,var(--accent) 26%,transparent),
    color-mix(in srgb,var(--accent2) 22%,transparent)) !important;
  border:2px solid var(--accent) !important;
  box-shadow:inset 0 0 0 2px var(--shadow) !important;
  color:var(--accent) !important;
}

/* card headings — pixel HUD label */
.feature h3,
.mechanic-card h3,
.liquid-card h3,
.archetype h4,
.ctrl-card h3,
.boss-info h3,
.hero-card .hname{
  font-family:'Press Start 2P','Sora',sans-serif !important;
  font-size:13px !important; line-height:1.5 !important; letter-spacing:.01em;
}
.liquid-card h3, .archetype h4{ font-size:12px !important; }

/* ---------- chips → arcade slot tags ---------- */
.app-hero-text .chip,
.platform-chip{
  border-radius:0 !important;
  font-family:'Press Start 2P','VT323',monospace !important;
  font-size:9px !important; letter-spacing:.06em !important;
  color:var(--shadow) !important;
  background:var(--accent2) !important;
  border:none !important;
  box-shadow:0 0 0 2px var(--shadow) !important;
  padding:7px 11px !important;
}
.platform-chip svg{ display:none; }

/* ---------- stat pills → pixel score plates ---------- */
.stat-pill .stat-num{
  font-family:'Press Start 2P','Sora',sans-serif !important;
  background:none !important; -webkit-background-clip:border-box !important;
  background-clip:border-box !important;
  color:var(--accent) !important;
  font-size:clamp(20px,4vw,30px) !important;
  text-shadow:0 var(--px) 0 var(--shadow);
}
.stat-pill .stat-lbl{
  font-family:'VT323',monospace !important; font-size:15px !important;
  letter-spacing:.06em; color:var(--muted) !important;
}

/* ---------- hero title glow to sit on the CRT ---------- */
.app-hero-text h1,
.app-hero-text h1 .grad{
  text-shadow:0 var(--px) 0 var(--shadow), 0 0 22px color-mix(in srgb,var(--accent) 30%,transparent);
}

/* ---------- HERO becomes an attract-screen inside the tube ---------- */
.app-hero{ min-height:86vh; }
/* synthwave perspective floor along the bottom of the hero */
.app-hero .hero-grid{
  position:absolute; inset:auto 0 -2px 0; z-index:1; height:46%; opacity:.8;
  pointer-events:none;
  transform:perspective(560px) rotateX(58deg); transform-origin:50% 100%;
  background:
    linear-gradient(color-mix(in srgb,var(--accent2) 26%,transparent) 2px, transparent 2px) 0 0 / 100% 44px,
    linear-gradient(90deg, color-mix(in srgb,var(--accent2) 20%,transparent) 2px, transparent 2px) 0 0 / 44px 100%,
    linear-gradient(180deg, transparent 0%, rgba(11,13,16,.35) 72%, rgba(11,13,16,.6) 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 26%, #000 100%);
}
.app-hero .hero-grid::before{
  content:""; position:absolute; left:-4%; right:-4%; top:-2px; height:3px;
  background:linear-gradient(90deg, transparent, var(--accent2) 22%, var(--accent) 50%, var(--accent2) 78%, transparent);
  box-shadow:0 0 22px color-mix(in srgb,var(--accent2) 80%,transparent),
             0 0 60px color-mix(in srgb,var(--accent) 40%,transparent);
}
/* oscilloscope strip across the bottom of the hero */
.app-hero .digital-wave{
  position:absolute; left:0; right:0; bottom:0; z-index:1;
  width:100%; height:clamp(100px,18vh,180px);
  pointer-events:none; mix-blend-mode:screen; opacity:.8;
}
.app-hero .wrap{ position:relative; z-index:2; }

/* ---------- CTA band gets a scope wave too ---------- */
.app-cta{ overflow:hidden; }
.app-cta .digital-wave{
  position:absolute; left:0; right:0; bottom:0; z-index:0;
  width:100%; height:clamp(90px,15vh,150px);
  pointer-events:none; mix-blend-mode:screen; opacity:.55;
}
.app-cta .wrap{ position:relative; z-index:2; }
.app-cta h2{
  font-family:'Press Start 2P','Sora',sans-serif !important;
  font-size:clamp(18px,3.6vw,30px) !important; line-height:1.4 !important;
  text-shadow:0 var(--px) 0 var(--shadow);
}

/* ---------- round screenshots keep the CRT bezel, square ones get pixel frame ---------- */
.shots-grid .shot{
  border-radius:0 !important;
  border:var(--px) solid var(--shadow) !important;
  box-shadow:inset 0 0 0 2px var(--accent), 0 var(--px) 0 var(--shadow) !important;
}
.shots-grid .shot:hover{
  transform:translateY(-4px) !important;
  box-shadow:inset 0 0 0 2px var(--accent2), 0 var(--px) 0 var(--shadow) !important;
}

/* ---------- wetwatch fluid ring + watch boxes: square-ish CRT tint ---------- */
.fluid-canvas-box{
  box-shadow:0 0 0 var(--px) var(--accent),0 0 0 calc(var(--px)*2) var(--shadow),
             0 0 60px color-mix(in srgb,var(--accent) 25%,transparent) !important;
}

/* ---------- anatolia game frame: cabinet screen framing ---------- */
.game-frame{
  border:var(--px) solid var(--accent) !important; border-radius:0 !important;
  box-shadow:0 0 0 calc(var(--px)*2) var(--shadow),
             0 24px 64px rgba(0,0,0,.6),
             0 0 50px color-mix(in srgb,var(--accent) 18%,transparent) !important;
}

/* ---------- ctrl / hero-cost / badges pixel tweaks ---------- */
.ctrl-badge{
  border-radius:0 !important; font-family:'VT323',monospace !important;
  font-size:14px !important; letter-spacing:.04em;
  border:2px solid color-mix(in srgb,var(--accent) 45%,transparent) !important;
}
.liquid-card .lc-sub,
.hero-card .htitle{
  font-family:'VT323',monospace !important; font-size:14px !important; letter-spacing:.06em;
}

/* the fixed control deck already clears via retro3d.css footer padding */