/* ===== Design tokens ===== */

:root {

    --bg: #16121f;

    --bg-alt: #1f1a2e;

    --bg-alt-2: #241d38;

    --ink: #f5f1ff;

    --ink-muted: #b9afd1;

    --accent-pink: #ff3d7f;

    --accent-pink-ink: #ffd7e4;

    --accent-lime: #c6f135;

    --accent-sun: #ffc93c;

    --border: rgba(245, 241, 255, 0.12);

    --radius-lg: 22px;

    --radius-md: 14px;

    --shadow-soft: 0 20px 40px -22px rgba(0, 0, 0, 0.65);

    --shadow-hover: 0 26px 48px -18px rgba(255, 61, 127, 0.35);

    --font-display: "Archivo Black", "Arial Black", sans-serif;

    --font-body: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;

    --font-mono: "IBM Plex Mono", ui-monospace, monospace;

    --container: 1120px;

}



* { box-sizing: border-box; }

html { scroll-behavior: smooth; }



@media (prefers-reduced-motion: reduce) {

    html { scroll-behavior: auto; }

    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }

}



body {

    margin: 0;

    background: var(--bg);

    color: var(--ink);

    font-family: var(--font-body);

    font-size: 16px;

    line-height: 1.55;

    -webkit-font-smoothing: antialiased;

}



body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    background-image: radial-gradient(rgba(245, 241, 255, 0.05) 1px, transparent 1px);

    background-size: 26px 26px;

    pointer-events: none;

}



a { color: var(--accent-pink); }

img { max-width: 100%; display: block; }



.container {

    width: 100%;

    max-width: var(--container);

    margin: 0 auto;

    padding: 0 24px;

}



.skip-link {

    position: absolute;

    left: -999px;

    top: 0;

    background: var(--accent-pink);

    color: #16121f;

    padding: 10px 18px;

    border-radius: 0 0 10px 0;

    font-weight: 700;

    z-index: 100;

}

.skip-link:focus {

    left: 0;

}



:focus-visible {

    outline: 3px solid var(--accent-lime);

    outline-offset: 3px;

}



/* ===== Header ===== */

.site-header {

    padding: 22px 0;

}

.site-header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

}

.brand {

    display: flex;

    align-items: baseline;

    gap: 8px;

    text-decoration: none;

    font-family: var(--font-display);

    color: var(--ink);

    font-size: 20px;

    letter-spacing: 0.02em;

}

.brand span:last-child { color: var(--accent-pink); }

#secret-admin { color: var(--ink); cursor: pointer; -webkit-user-select: none; user-select: none; }

.lang-switch {

    display: inline-flex;

    align-items: center;

    gap: 2px;

    border: 1px solid var(--border);

    border-radius: 999px;

    padding: 4px;

    font-family: var(--font-mono);

    font-size: 12px;

}

.lang-switch a {

    color: var(--ink-muted);

    text-decoration: none;

    padding: 4px 10px;

    border-radius: 999px;

    line-height: 1;

}

.lang-switch a:hover { color: var(--ink); }

.lang-switch a.is-active { background: var(--accent-pink); color: #1a0e14; font-weight: 700; }



.header-tag {

    font-family: var(--font-mono);

    font-size: 12px;

    color: var(--ink-muted);

    border: 1px solid var(--border);

    padding: 6px 12px;

    border-radius: 999px;

}



/* ===== Hero ===== */

.hero {

    position: relative;

    padding: 64px 0 84px;

    overflow: hidden;

}

.hero .container { position: relative; z-index: 1; }

.hero-glow {

    position: absolute;

    top: -180px;

    left: 50%;

    transform: translateX(-50%);

    width: 900px;

    height: 500px;

    background: radial-gradient(closest-side, rgba(255, 61, 127, 0.28), transparent);

    filter: blur(10px);

    pointer-events: none;

    z-index: 0;

    animation: heroGlow 5.5s ease-in-out infinite alternate;

}

@keyframes heroGlow {

    from { opacity: 0.65; transform: translateX(-50%) scale(1); }

    to   { opacity: 1;    transform: translateX(-52%) scale(1.12); }

}

.hero::after {

    content: "";

    position: absolute;

    right: -140px;

    top: 30%;

    width: 380px;

    height: 380px;

    background: radial-gradient(closest-side, rgba(198, 241, 53, 0.13), transparent);

    filter: blur(30px);

    pointer-events: none;

    animation: blobFloat 8s ease-in-out infinite alternate;

}

@keyframes blobFloat {

    from { transform: translateY(0) scale(1); }

    to   { transform: translateY(-50px) scale(1.15); }

}

.eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-mono);

    font-size: 13px;

    color: var(--accent-lime);

    border: 1px solid rgba(198, 241, 53, 0.35);

    padding: 7px 14px;

    border-radius: 999px;

    transform: rotate(-1.5deg);

    margin-bottom: 28px;

}

.eyebrow::before { content: "●"; font-size: 8px; }

.eyebrow::after {

    content: "▮";

    color: var(--accent-lime);

    animation: cursorBlink 1s steps(1) infinite;

}

@keyframes cursorBlink { 50% { opacity: 0; } }



.hero h1 {

    font-family: var(--font-display);

    font-size: clamp(2.6rem, 6vw, 5rem);

    line-height: 0.98;

    margin: 0 0 22px;

    letter-spacing: -0.01em;

}

.hero h1 .line-2 {

    color: var(--accent-pink);

    display: inline-block;

    position: relative;

    transform: rotate(-1deg);

}

.hero h1 .line-2 svg {

    position: absolute;

    left: 0;

    bottom: -14px;

    width: 100%;

    height: 16px;

}



.hero-lead {

    max-width: 560px;

    color: var(--ink-muted);

    font-size: 1.15rem;

    margin: 0 0 36px;

}



.hero-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    align-items: center;

}

.btn {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: var(--font-body);

    font-weight: 700;

    font-size: 15px;

    padding: 14px 24px;

    border-radius: 999px;

    text-decoration: none;

    border: 2px solid transparent;

    cursor: pointer;

    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;

}

.btn-primary {

    background: var(--accent-pink);

    color: #1a0e14;

}

.btn-primary:hover, .btn-primary:focus-visible {

    transform: translateY(-2px);

    box-shadow: var(--shadow-hover);

}

.btn-ghost {

    background: transparent;

    color: var(--ink);

    border-color: var(--border);

}

.btn-ghost:hover, .btn-ghost:focus-visible {

    border-color: var(--accent-lime);

    color: var(--accent-lime);

}

.hero-count {

    font-family: var(--font-mono);

    font-size: 13px;

    color: var(--ink-muted);

}

.hero-count strong { color: var(--ink); }

.hero-views strong { color: var(--accent-lime); }



/* ===== Ticker retro ===== */

.ticker {

    overflow: hidden;

    border-top: 1px dashed var(--border);

    border-bottom: 1px dashed var(--border);

    padding: 13px 0;

    font-family: var(--font-mono);

    font-size: 13px;

    letter-spacing: 0.06em;

    text-transform: uppercase;

    user-select: none;

}

.ticker-track {

    display: flex;

    width: max-content;

    animation: tickerMove 30s linear infinite;

    will-change: transform;

}

.ticker:hover .ticker-track { animation-play-state: paused; }

.ticker-half { display: flex; gap: 34px; padding-right: 34px; white-space: nowrap; }

.ticker-half span:nth-child(3n+1) { color: var(--accent-pink); }

.ticker-half span:nth-child(3n+2) { color: var(--ink-muted); }

.ticker-half span:nth-child(3n)   { color: var(--accent-lime); }

@keyframes tickerMove { to { transform: translateX(-50%); } }



/* ===== Reveal on scroll ===== */

.app-card.will-reveal { opacity: 0; }

.app-card.in-view { animation: cardIn 0.65s cubic-bezier(.2,.8,.2,1) both; }

@keyframes cardIn {

    from { opacity: 0; transform: rotate(var(--tilt, 0deg)) translateY(34px) scale(0.96); }

    to   { opacity: 1; transform: rotate(var(--tilt, 0deg)) translateY(0) scale(1); }

}



/* ===== Apps section ===== */

.apps-section {

    padding: 10px 0 100px;

    position: relative;

}

.section-head {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 40px;

    flex-wrap: wrap;

}

.section-head h2 {

    font-family: var(--font-display);

    font-size: clamp(1.6rem, 3vw, 2.2rem);

    margin: 0;

}

.section-head p {

    font-family: var(--font-mono);

    font-size: 13px;

    color: var(--ink-muted);

    margin: 0;

}



.app-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 34px 30px;

}

@media (max-width: 860px) { .app-grid { grid-template-columns: repeat(2, 1fr); } }

@media (max-width: 560px) { .app-grid { grid-template-columns: 1fr; } }



.app-pager {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 20px;

    margin-top: 44px;

}

/* Senza questa riga il display:flex batte l'attributo hidden e il pager

   resta a video anche quando le card stanno tutte in una pagina. */

.app-pager[hidden] { display: none; }

.app-pager-info {

    font-family: var(--font-mono);

    font-size: 13px;

    color: var(--ink-muted);

    min-width: 90px;

    text-align: center;

}

.app-pager button[disabled] { opacity: 0.35; cursor: default; }



.app-card {

    position: relative;

    display: flex;

    flex-direction: column;

    background: var(--bg-alt);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    padding: 26px 24px 24px;

    text-decoration: none;

    color: var(--ink);

    box-shadow: var(--shadow-soft);

    transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, border-color 0.22s ease;

    transform: rotate(var(--tilt, 0deg));

}

.app-grid .app-card:nth-child(3n+1) { --tilt: -1.4deg; }

.app-grid .app-card:nth-child(3n+2) { --tilt: 1deg; }

.app-grid .app-card:nth-child(3n)   { --tilt: -0.6deg; }



.app-card:hover, .app-card:focus-visible {

    transform: rotate(0deg) translateY(-8px);

    border-color: var(--accent-pink);

    box-shadow: var(--shadow-hover);

}



.app-card .pin {

    position: absolute;

    top: -10px;

    left: 26px;

    width: 34px;

    height: 16px;

    background: var(--accent-sun);

    border-radius: 3px;

    transform: rotate(-6deg);

    opacity: 0.9;

}



.app-preview {

    display: block;

    margin: -12px -10px 16px;

    border: 1px solid var(--border);

    border-radius: calc(var(--radius-lg) - 6px);

    overflow: hidden;

    background: var(--bg-alt-2);

    aspect-ratio: 4 / 3;

}

.app-preview img {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

    object-position: top;

    transition: transform 0.3s ease;

}

.app-card:hover .app-preview img { transform: scale(1.04); }



/* Elemento senza immagine (tipico dei file da scaricare): icona al posto dell'anteprima */

.app-preview-empty {

    display: flex;

    align-items: center;

    justify-content: center;

    background: linear-gradient(150deg, var(--bg-alt-2), var(--bg-alt));

}

.app-preview-empty span {

    font-size: clamp(48px, 12vw, 76px);

    line-height: 1;

    opacity: 0.85;

    transition: transform 0.3s ease;

}

.app-card:hover .app-preview-empty span { transform: scale(1.08); }



.app-card-top {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 16px;

}

.app-icon {

    width: 52px;

    height: 52px;

    border-radius: 14px;

    background: var(--bg-alt-2);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 26px;

    flex-shrink: 0;

}

.app-featured {

    font-family: var(--font-mono);

    font-size: 10.5px;

    letter-spacing: 0.04em;

    color: #1a0e14;

    background: var(--accent-lime);

    padding: 5px 10px;

    border-radius: 999px;

    white-space: nowrap;

    text-transform: uppercase;

}



.app-card h3 {

    font-family: var(--font-body);

    font-weight: 800;

    font-size: 1.15rem;

    margin: 0 0 8px;

}

.app-card p {

    color: var(--ink-muted);

    font-size: 0.94rem;

    margin: 0 0 20px;

    flex-grow: 1;

}



.app-card-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding-top: 16px;

    border-top: 1px dashed var(--border);

}

.app-category {

    font-family: var(--font-mono);

    font-size: 11.5px;

    color: var(--accent-sun);

    text-transform: uppercase;

    letter-spacing: 0.03em;

}

.app-launch {

    font-weight: 700;

    font-size: 14px;

    color: var(--accent-pink);

    display: inline-flex;

    align-items: center;

    gap: 6px;

}

.app-card:hover .app-launch, .app-card:focus-visible .app-launch { text-decoration: underline; }

.app-clicks {

    margin-top: 14px;

    display: flex;

    align-items: center;

    gap: 7px;

    font-family: var(--font-mono);

    font-size: 12.5px;

    font-weight: 700;

    color: #16121f;

    letter-spacing: 0.02em;

    background: var(--accent-lime);

    border-radius: 8px;

    padding: 7px 12px;

    text-transform: uppercase;

}

.app-clicks::before { content: "▶"; font-size: 10px; }

.app-clicks.played-today {

    background: var(--accent-pink);

    color: #16121f;

    box-shadow: 0 0 16px rgba(255, 61, 127, 0.55);

}



.app-wip {

    font-family: var(--font-mono);

    font-size: 10.5px;

    letter-spacing: 0.04em;

    color: #ffc93c;

    background: transparent;

    border: 1px dashed #ffc93c;

    padding: 4px 9px;

    border-radius: 999px;

    white-space: nowrap;

    text-transform: uppercase;

}

.app-wip.is-beta { color: var(--accent-lime); border-color: var(--accent-lime); }

/* ===== Pulsanti download su card ===== */

.app-cell { display: flex; flex-direction: column; }

.app-cell .app-card { flex-grow: 1; }

.app-downloads {

    display: flex;

    gap: 10px;

    margin-top: 12px;

    padding: 0 6px;

}

.dl-btn {

    flex: 1;

    text-align: center;

    font-family: var(--font-mono);

    font-size: 12.5px;

    font-weight: 700;

    letter-spacing: 0.04em;

    text-decoration: none;

    padding: 10px 8px;

    border-radius: 10px;

    border: 1px solid transparent;

    transition: transform 0.15s ease, box-shadow 0.15s ease;

}

.dl-btn:hover { transform: translateY(-2px); }

.dl-apk { background: rgba(198, 241, 53, 0.15); border-color: var(--accent-lime); color: var(--accent-lime); }

.dl-apk:hover { box-shadow: 0 0 16px rgba(198, 241, 53, 0.35); }

.dl-exe { background: rgba(106, 184, 255, 0.15); border-color: #6ab8ff; color: #6ab8ff; }

.dl-exe:hover { box-shadow: 0 0 16px rgba(106, 184, 255, 0.35); }



.app-new {

    font-family: var(--font-mono);

    font-size: 10.5px;

    letter-spacing: 0.04em;

    color: #1a0e14;

    background: var(--accent-sun);

    padding: 5px 10px;

    border-radius: 999px;

    white-space: nowrap;

    text-transform: uppercase;

}

.app-details {

    font-size: 13px;

    color: var(--ink-muted);

    text-decoration: underline dotted;

    cursor: pointer;

    margin-right: 12px;

}

.app-details:hover, .app-details:focus-visible { color: var(--accent-lime); }



/* ===== Menu pagine ===== */

.site-nav { display: flex; gap: 18px; flex-wrap: wrap; }

.site-nav a {

    color: var(--ink-muted);

    text-decoration: none;

    font-size: 14px;

    font-weight: 600;

}

.site-nav a:hover, .site-nav a:focus-visible { color: var(--accent-pink); }

.site-nav a.is-active { color: var(--accent-pink); }



/* ===== Hub landing ===== */

.hero-hub { padding-bottom: 40px; }

.hub-section { padding: 10px 0 100px; }

.hub-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

    gap: 30px 26px;

}

.hub-card {

    display: flex;

    flex-direction: column;

    background: var(--bg-alt);

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    overflow: hidden;

    text-decoration: none;

    color: var(--ink);

    box-shadow: var(--shadow-soft);

    transition: transform 0.22s cubic-bezier(.2,.8,.2,1), box-shadow 0.22s ease, border-color 0.22s ease;

}

.hub-card:hover, .hub-card:focus-visible {

    transform: translateY(-8px);

    border-color: var(--accent-pink);

    box-shadow: var(--shadow-hover);

}

.hub-card-img {

    display: block;

    height: 180px;

    background-size: cover;

    background-position: center;

    background-color: var(--bg-alt-2);

}

.hub-card-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    height: 180px;

    font-size: 68px;

    background: radial-gradient(closest-side, rgba(255,61,127,0.18), transparent);

}

.hub-card-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex-grow: 1; }

.hub-card-body h2 { font-family: var(--font-display); font-size: 1.4rem; margin: 0 0 10px; }

.hub-card-body p { color: var(--ink-muted); font-size: 0.98rem; margin: 0 0 20px; flex-grow: 1; }

.hub-card-foot {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    padding-top: 16px;

    border-top: 1px dashed var(--border);

}

.hub-card-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--accent-sun); text-transform: uppercase; letter-spacing: 0.03em; }

.hub-card:hover .app-launch, .hub-card:focus-visible .app-launch { text-decoration: underline; }



/* ===== Pagine libere ===== */

.page-articoli { margin-top: 44px; }

.app-card-static {

    transform: none;

    cursor: default;

}

.app-card-static:hover { transform: translateY(-6px); border-color: var(--accent-pink); }

.app-card-static h3 { margin-bottom: 12px; }

.app-card-static .page-body p { font-size: 0.96rem; margin: 0 0 12px; }

.art-download { align-self: flex-start; margin-top: auto; font-size: 14px; padding: 11px 20px; }

.page-article { max-width: 760px; }

.page-article h1 {

    font-family: var(--font-display);

    font-size: clamp(1.9rem, 4vw, 2.9rem);

    line-height: 1.05;

    margin: 0 0 14px;

}

.page-image {

    width: 100%;

    border-radius: var(--radius-lg);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

    margin: 10px 0 26px;

}

.page-body p { color: var(--ink-muted); font-size: 1.05rem; line-height: 1.7; margin: 0 0 18px; }

.page-others { margin-top: 56px; border-top: 1px dashed var(--border); padding-top: 26px; }

.page-others h2 { font-family: var(--font-display); font-size: 1.1rem; color: var(--accent-lime); margin: 0 0 12px; }

.page-others ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }

.page-others a { color: var(--ink-muted); }

.page-others a:hover { color: var(--accent-pink); }



/* ===== Pagina dettaglio ===== */

.detail { padding: 20px 0 90px; }

.detail-back { font-family: var(--font-mono); font-size: 13px; margin: 0 0 26px; }

.detail-back a { color: var(--ink-muted); text-decoration: none; }

.detail-back a:hover { color: var(--accent-pink); }

.detail-grid {

    display: grid;

    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);

    gap: 44px;

    align-items: start;

}

.detail-media img {

    width: 100%;

    border-radius: var(--radius-lg);

    border: 1px solid var(--border);

    box-shadow: var(--shadow-soft);

}

.detail-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }

.detail-info h1 {

    font-family: var(--font-display);

    font-size: clamp(1.8rem, 4vw, 2.8rem);

    line-height: 1.05;

    margin: 0 0 16px;

}

.detail-desc { color: var(--ink-muted); font-size: 1.12rem; margin: 0 0 22px; }

.detail-req {

    font-family: var(--font-mono);

    font-size: 13px;

    color: var(--accent-sun);

    border: 1px dashed var(--border);

    border-radius: var(--radius-md);

    padding: 10px 14px;

    margin: 0 0 26px;

    display: inline-block;

}

.detail-count { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-muted); margin-top: 18px; }

.detail-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

.detail-actions .dl-btn { flex: 0 0 auto; padding: 13px 20px; font-size: 13px; }

.detail-instructions {

    margin-top: 56px;

    border: 1px solid var(--border);

    border-radius: var(--radius-lg);

    background: var(--bg-alt);

    padding: 30px 32px;

    max-width: 760px;

}

.detail-instructions h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 0 0 14px; color: var(--accent-lime); }

.detail-instructions p { color: var(--ink-muted); margin: 0; }

@media (max-width: 760px) { .detail-grid { grid-template-columns: 1fr; gap: 28px; } }



/* ===== Empty state ===== */

.empty-state {

    border: 1px dashed var(--border);

    border-radius: var(--radius-lg);

    padding: 56px 32px;

    text-align: center;

    color: var(--ink-muted);

    font-family: var(--font-mono);

    font-size: 14px;

}



/* ===== Footer ===== */

.site-footer {

    border-top: 1px solid var(--border);

    padding: 34px 0 44px;

}

.site-footer .container {

    display: flex;

    flex-wrap: wrap;

    gap: 14px;

    align-items: center;

    justify-content: space-between;

}

.site-footer p {

    margin: 0;

    color: var(--ink-muted);

    font-size: 13px;

}

.footer-links {

    display: flex;

    gap: 18px;

    list-style: none;

    padding: 0;

    margin: 0;

    font-size: 13px;

}

.footer-links a { color: var(--ink-muted); text-decoration: none; }

.footer-links a:hover, .footer-links a:focus-visible { color: var(--accent-pink); }



@media (max-width: 600px) {

    .hero { padding: 48px 0 60px; }

    .site-footer .container { flex-direction: column; align-items: flex-start; }

}