/* ACBIZ Retro Arcade — pixel/neon theme.
   Scoped entirely under .retro-page, the same isolation pattern used by
   play.css (.play-page) — these three themes (CRM app.css, Play
   play.css, Retro Arcade retro-arcade.css) never bleed into each other. */

.retro-page {
    --retro-bg: #0a0014;
    --retro-panel: #170a2e;
    --retro-panel-2: #22103f;
    --retro-line: rgba(255,255,255,0.08);
    --retro-pink: #ff2d75;
    --retro-cyan: #00f0ff;
    --retro-yellow: #ffe94a;
    --retro-purple: #b967ff;
    --retro-paper: #f2eaff;
    --retro-muted: #9c8bc4;

    background: var(--retro-bg);
    color: var(--retro-paper);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.retro-page h1, .retro-page h2, .retro-page h3, .retro-pixel {
    font-family: 'Press Start 2P', 'Space Grotesk', monospace;
    letter-spacing: 0.02em;
    line-height: 1.5;
}

/* ── Light mode variant ──────────────────────────────────── */
.retro-page.retro-light {
    --retro-bg: #f4f0ff;
    --retro-panel: #ffffff;
    --retro-panel-2: #ece4ff;
    --retro-line: rgba(20,10,40,0.1);
    --retro-paper: #170a2e;
    --retro-muted: #6b5a8e;
}
.retro-page.retro-light .retro-crt-overlay { opacity: 0.15; }

/* ── CRT scanline overlay ────────────────────────────────── */
.retro-crt-overlay {
    position: fixed; inset: 0; pointer-events: none; z-index: 5;
    background: repeating-linear-gradient(
        0deg, rgba(0,0,0,0.15) 0px, rgba(0,0,0,0.15) 1px,
        transparent 1px, transparent 3px
    );
    mix-blend-mode: overlay;
    animation: retro-flicker 6s infinite;
}
.retro-page.retro-crt-off .retro-crt-overlay { display: none; }
@keyframes retro-flicker {
    0%, 100% { opacity: 0.9; }
    50% { opacity: 1; }
    52% { opacity: 0.85; }
}

/* ── Floating background particles ──────────────────────── */
.retro-bg-particles { position: fixed; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.retro-particle {
    position: absolute; bottom: -40px; border-radius: 2px;
    animation: retro-float linear infinite;
    opacity: 0.5;
}
@keyframes retro-float {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.5; }
    90% { opacity: 0.5; }
    100% { transform: translateY(-110vh) rotate(180deg); opacity: 0; }
}

/* ── Nav ─────────────────────────────────────────────────── */
.retro-nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 24px; max-width: 1200px; margin: 0 auto; position: relative; z-index: 2;
    border-bottom: 1px solid var(--retro-line); flex-wrap: wrap; gap: 12px;
}
.retro-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.retro-brand-mark { font-family: 'Press Start 2P', monospace; font-size: 13px; color: var(--retro-cyan); text-shadow: 0 0 8px var(--retro-cyan); }
.retro-nav-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.retro-nav-actions a { color: var(--retro-muted); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.retro-nav-actions a:hover { color: var(--retro-paper); }
.retro-theme-toggle {
    background: var(--retro-panel-2); border: 1px solid var(--retro-line); color: var(--retro-paper);
    width: 38px; height: 38px; border-radius: 10px; cursor: pointer; font-size: 16px;
}
.retro-back-link { font-size: 12.5px; color: var(--retro-muted); text-decoration: none; }
.retro-back-link:hover { color: var(--retro-cyan); }

/* ── Hero ────────────────────────────────────────────────── */
.retro-hero { max-width: 900px; margin: 0 auto; padding: 60px 24px 40px; text-align: center; position: relative; z-index: 2; }
.retro-hero h1 {
    font-size: clamp(20px, 4vw, 34px); color: var(--retro-paper);
    text-shadow: 0 0 6px var(--retro-pink), 0 0 18px var(--retro-pink);
    margin-bottom: 18px;
}
.retro-hero p { color: var(--retro-muted); font-size: 15px; max-width: 46ch; margin: 0 auto 30px; line-height: 1.6; }
.retro-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

.retro-btn {
    display: inline-flex; align-items: center; gap: 6px; padding: 12px 22px; border-radius: 10px;
    font-family: 'Press Start 2P', monospace; font-size: 10.5px; text-decoration: none; cursor: pointer;
    background: none; border: 2px solid var(--retro-cyan); color: var(--retro-cyan);
    transition: transform .15s ease, box-shadow .15s ease;
}
.retro-btn:hover { transform: translateY(-2px); box-shadow: 0 0 16px var(--retro-cyan); }
.retro-btn-solid { background: var(--retro-pink); border-color: var(--retro-pink); color: #170a2e; }
.retro-btn-solid:hover { box-shadow: 0 0 20px var(--retro-pink); }
.retro-btn-gold { background: var(--retro-yellow); border-color: var(--retro-yellow); color: #170a2e; }
.retro-btn-gold:hover { box-shadow: 0 0 20px var(--retro-yellow); }

/* ── Category grid ───────────────────────────────────────── */
.retro-section { max-width: 1180px; margin: 0 auto; padding: 20px 24px 60px; position: relative; z-index: 2; }
.retro-section-title {
    font-size: 15px; color: var(--retro-yellow); text-shadow: 0 0 6px var(--retro-yellow);
    margin-bottom: 22px; text-align: center;
}
.retro-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.retro-cat-card {
    background: var(--retro-panel); border: 1px solid var(--retro-line); border-radius: 14px; padding: 20px;
    display: flex; flex-direction: column; gap: 10px;
}
.retro-cat-icon { font-size: 28px; }
.retro-cat-card h3 { font-size: 12px; color: var(--retro-paper); }
.retro-cat-count { font-size: 11px; color: var(--retro-muted); font-family: 'Inter', sans-serif; }
.retro-cat-games { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.retro-cat-game-link {
    display: flex; justify-content: space-between; align-items: center; text-decoration: none;
    background: var(--retro-panel-2); border-radius: 8px; padding: 8px 12px; color: var(--retro-paper); font-size: 12.5px;
}
.retro-cat-game-link:hover { box-shadow: inset 0 0 0 1px var(--retro-cyan); color: var(--retro-cyan); }
.retro-cat-empty { font-size: 12px; color: var(--retro-muted); font-style: italic; padding: 6px 0; }
.retro-cat-badge {
    display: inline-block; font-size: 10px; padding: 3px 8px; border-radius: 999px;
    background: rgba(185,103,255,0.15); color: var(--retro-purple); border: 1px solid rgba(185,103,255,0.3); align-self: flex-start;
}

@media (max-width: 640px) {
    .retro-nav-actions { width: 100%; justify-content: flex-start; }
}

.retro-skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 100;
    background: var(--retro-cyan); color: #0a0014; padding: 10px 16px;
    border-radius: 0 0 8px 0; font-weight: 600; text-decoration: none; font-size: 14px;
}
.retro-skip-link:focus { left: 0; }

/* ── Featured sections (horizontal scroll rows) ─────────── */
.retro-feat-row { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; }
.retro-feat-row::-webkit-scrollbar { height: 6px; }
.retro-feat-row::-webkit-scrollbar-thumb { background: var(--retro-panel-2); border-radius: 999px; }
.retro-feat-card {
    flex: 0 0 160px; scroll-snap-align: start; text-decoration: none; color: inherit;
    background: var(--retro-panel); border: 1px solid var(--retro-line); border-radius: 12px; padding: 14px;
    display: flex; flex-direction: column; gap: 8px; transition: transform .15s ease, box-shadow .15s ease;
}
.retro-feat-card:hover { transform: translateY(-3px); box-shadow: 0 0 14px rgba(0,240,255,0.25); border-color: var(--retro-cyan); }
.retro-feat-card-title { font-size: 12px; color: var(--retro-paper); font-weight: 600; }
.retro-feat-card-meta { font-size: 10.5px; color: var(--retro-muted); font-family: 'Inter', sans-serif; }