/* 08 cyberpunk store + 09 jack-in — only for theme_cyberpunk */

html[data-launcher-theme="theme_cyberpunk"] {
    --va-radius: 2px;
    --va-radius-sm: 2px;
    --va-radius-pill: 2px;
    --va-font: "Rajdhani", "Inter", "Segoe UI", sans-serif;
    --va-display: "Orbitron", "Syne", sans-serif;
}

html[data-launcher-theme="theme_cyberpunk"] body {
    font-family: var(--va-font);
}

html[data-launcher-theme="theme_cyberpunk"] .logo,
html[data-launcher-theme="theme_cyberpunk"] .page-title,
html[data-launcher-theme="theme_cyberpunk"] .store-page--hero .hero-copy h1,
html[data-launcher-theme="theme_cyberpunk"] .vk-home-stage .play-meta h2 {
    font-family: var(--va-display) !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Soft cyber overlay on store hero (no canvas rain — CSS only) */
html[data-launcher-theme="theme_cyberpunk"] .store-page--hero .hero-stage {
    background:
        radial-gradient(900px 420px at 70% 10%, rgba(255, 43, 214, 0.22), transparent 55%),
        radial-gradient(700px 500px at 10% 80%, rgba(24, 255, 246, 0.12), transparent 50%),
        #070012 !important;
}

html[data-launcher-theme="theme_cyberpunk"] .store-page--hero .hero-stage::before {
    content: "";
    position: absolute;
    left: -10%;
    right: -10%;
    bottom: -20%;
    height: 55%;
    background-image:
        linear-gradient(rgba(255, 43, 214, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(24, 255, 246, 0.12) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: perspective(500px) rotateX(62deg);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%);
            mask-image: linear-gradient(180deg, transparent, #000 40%);
    pointer-events: none;
    z-index: 0;
}

html[data-launcher-theme="theme_cyberpunk"] .store-page--hero .hero-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.12) 0 1px,
        transparent 1px 3px
    );
    pointer-events: none;
    z-index: 8;
    mix-blend-mode: multiply;
}

html[data-launcher-theme="theme_cyberpunk"] .store-page--hero .hero-copy h1 {
    position: relative;
    text-shadow: 0 0 18px rgba(255, 43, 214, 0.35);
}

html[data-launcher-theme="theme_cyberpunk"] .store-page--hero .btn-primary,
html[data-launcher-theme="theme_cyberpunk"] .store-page--hero #hero-cta {
    border-radius: 2px !important;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    background: #ff2bd6 !important;
    color: #140014 !important;
    box-shadow: 0 0 24px rgba(255, 43, 214, 0.45);
}

html[data-launcher-theme="theme_cyberpunk"] .store-page--hero .hero-product {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 60px rgba(24, 255, 246, 0.25), 0 24px 80px rgba(0, 0, 0, 0.55);
}

html[data-launcher-theme="theme_cyberpunk"] .nav-links,
html[data-launcher-theme="theme_cyberpunk"] .community-seg,
html[data-launcher-theme="theme_cyberpunk"] .btn {
    border-radius: 2px !important;
}

/* 09 Jack-in overlay on library play */
.jack-overlay {
    position: fixed;
    inset: 0;
    z-index: var(--z-toast);
    background: #050008;
    color: #e8d5ff;
    font-family: "Share Tech Mono", ui-monospace, monospace;
    display: grid;
    place-items: center;
}

.jack-overlay .jack-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: saturate(1.4) contrast(1.15) hue-rotate(-10deg);
    opacity: 0.55;
}

.jack-overlay .jack-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 50% 40%, transparent 20%, rgba(5, 0, 8, 0.55) 70%),
        linear-gradient(90deg, rgba(5, 0, 8, 0.75), transparent 28%, transparent 72%, rgba(5, 0, 8, 0.75));
}

.jack-overlay .jack-crt {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(rgba(0, 0, 0, 0.18) 0 1px, transparent 1px 3px);
    box-shadow: inset 0 0 120px rgba(0, 0, 0, 0.65);
}

.jack-overlay .jack-core {
    position: relative;
    z-index: 2;
    text-align: center;
}

.jack-overlay .jack-hex {
    width: 180px;
    height: 180px;
    margin: 0 auto 18px;
    -webkit-clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
            clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
    border: 2px solid #18fff6;
    box-shadow: 0 0 40px rgba(24, 255, 246, 0.35), inset 0 0 40px rgba(255, 43, 214, 0.2);
    display: grid;
    place-items: center;
    background: rgba(0, 0, 0, 0.35);
}

.jack-overlay .jack-hex b {
    font-family: Orbitron, Syne, sans-serif;
    font-size: 1.5rem;
    letter-spacing: 0.2em;
    color: #ff2bd6;
}

.jack-overlay h1 {
    font-family: Orbitron, Syne, sans-serif;
    letter-spacing: 0.18em;
    font-size: clamp(1.4rem, 3vw, 2.2rem);
}

.jack-overlay p {
    color: #9a7aad;
    margin: 8px 0 18px;
}

.jack-overlay .jack-go {
    height: 46px;
    padding: 0 28px;
    background: #ff2bd6;
    color: #140014;
    border: 0;
    font-weight: 800;
    letter-spacing: 0.14em;
    cursor: pointer;
}

.jack-overlay .jack-log {
    position: absolute;
    left: 28px;
    top: 80px;
    z-index: 2;
    width: min(360px, 34vw);
    color: #18fff6;
    font-size: 0.78rem;
    line-height: 1.55;
    text-align: left;
    white-space: pre-wrap;
}