/*
  SamppaLandian pikselibrändi.
  Ladataan sivun oman <style>-lohkon jälkeen, joten nämä säännöt ohittavat
  vanhat tyylit samalla tarkkuudella. Efektien logiikka: assets/pixel-brand.js
  ja assets/pixel-button.js.
*/

@import url("https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@500;600;700&display=swap");

:root {
    --pixel: 6px;
    --pixel-font: 'Pixelify Sans', 'Inter', sans-serif;
}

::selection {
    background: rgba(210, 5, 248, 0.45);
    color: #fff;
}

/* ---------- Taustan pikselikenttä ---------- */
#pixel-bg {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}
/* Shaderi piirtää auroran pikseleinä, joten sumennettu CSS-aurora pois. */
.has-pixel-bg .aurora-wrap { display: none; }

/* ---------- Pikselifontti pienissä otsakkeissa ja tunnisteissa ---------- */
.text-\[11px\].uppercase,
.last-game-badge,
#sticky-label,
.brand-ticker-group span {
    font-family: var(--pixel-font);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 0.14em;
}
.brand-ticker-group span { font-size: 1rem; }
/* Hero-yläotsake (Yhteisö, johon kuulut) */
span.brand-text-gradient.text-\[11px\] {
    font-family: var(--pixel-font);
    font-size: 13px;
    letter-spacing: 0.18em;
}
@media (min-width: 768px) {
    span.brand-text-gradient.text-\[11px\] { font-size: 15px; }
}

/* ---------- Isot liukuväriotsikot pikselipinnalla ---------- */
.brand-text-gradient.pixel-text {
    background-image:
        linear-gradient(90deg, rgba(0, 0, 0, 0.5) 1px, transparent 1px),
        linear-gradient(rgba(0, 0, 0, 0.5) 1px, transparent 1px),
        var(--brand-gradient);
    background-size: 5px 5px, 5px 5px, 100% 100%;
}

/* ---------- Korttien pikselivalo ---------- */
.apple-card, .stat-card, .perk-card, .partner-card, .faq-item, .clip-card, .last-game-card {
    position: relative;
    isolation: isolate;
}
:is(.apple-card, .stat-card, .perk-card, .partner-card, .faq-item, .clip-card, .last-game-card)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: var(--brand-gradient);
    opacity: 0;
    transition: opacity 0.45s ease;
    -webkit-mask-image: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%), var(--pixel-dither, none);
    mask-image: radial-gradient(circle 190px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.35) 45%, transparent 75%), var(--pixel-dither, none);
    -webkit-mask-size: 100% 100%, 192px 192px;
    mask-size: 100% 100%, 192px 192px;
    -webkit-mask-repeat: no-repeat, repeat;
    mask-repeat: no-repeat, repeat;
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
}
@media (hover: hover) {
    :is(.apple-card, .stat-card, .perk-card, .partner-card, .faq-item, .clip-card, .last-game-card):hover::before {
        opacity: 0.32;
    }
}

/* ---------- Profiilikuvan pikselilataus ---------- */
.pixel-resolve {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    image-rendering: pixelated;
    transition: opacity 0.35s ease;
}
.pixel-resolve.done { opacity: 0; }

/* ---------- Pikselinapit: brändikohtaiset varjot ---------- */
.pixel-btn { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }

/* ---------- Porrastettu vierityspalkki ---------- */
#scroll-progress {
    height: 4px;
    background:
        linear-gradient(90deg, #000 1px, transparent 1px) 0 0 / var(--pixel) 100%,
        var(--brand-gradient);
}

/* ---------- Pikselireunat ---------- */
footer {
    position: relative;
    border-top-width: 0 !important;
}
footer::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--pixel);
    background:
        linear-gradient(90deg, #000 1px, transparent 1px) 0 0 / var(--pixel) 100%,
        var(--brand-gradient);
    opacity: 0.8;
}
.tip-item {
    border-left: 4px solid transparent;
    border-image: repeating-linear-gradient(to bottom, var(--brand-left) 0 5px, transparent 5px 7px) 1;
}

/* Pyöreät pallukat neliöiksi */
#live-dot { border-radius: 1px; }
.last-game-badge::before { border-radius: 1px; }
.brand-ticker-group .dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    font-size: 0 !important;
    background: var(--brand-gradient);
}

@media (prefers-reduced-motion: reduce) {
    :is(.apple-card, .stat-card, .perk-card, .partner-card, .faq-item, .clip-card, .last-game-card)::before {
        transition: none;
    }
}