/* TUNESTRIKE page: the game's own look (neon arena, rhythm HUD, beat at 120 BPM).
   Only loaded on /games/tunestrike; the site header and footer keep Blurrydream's style. */

body.theme-tunestrike {
    --bg: #07030F;
    --surface: rgba(20, 10, 40, 0.72);
    --border: rgba(255, 62, 201, 0.3);
    --ts-pink: #FF3EC9;
    --ts-cyan: #3FD0FF;
    --ts-purple: #9A29FF;
    --ts-perfect: #3CF0A0;
    --ts-beat: 0.5s;                 /* 120 BPM */
    background:
        radial-gradient(ellipse at 50% 0%, rgba(154, 41, 255, 0.28), transparent 60%),
        linear-gradient(180deg, #0D0520 0%, #07030F 55%, #050208 100%);
    background-attachment: fixed;
}

/* the animated background (notes) goes on top of the page background, so it must be see-through */
.theme-tunestrike #bg {
    background: transparent;
}

/* neon grid floor in perspective, fixed at the bottom of the screen (under the notes) */
body.theme-tunestrike::before {
    content: '';
    position: fixed;
    left: -50%;
    right: -50%;
    bottom: -10vh;
    height: 55vh;
    z-index: -2;
    background-image:
        linear-gradient(rgba(255, 62, 201, 0.35) 2px, transparent 2px),
        linear-gradient(90deg, rgba(63, 208, 255, 0.28) 2px, transparent 2px);
    background-size: 80px 80px;
    transform: perspective(420px) rotateX(62deg);
    transform-origin: 50% 100%;
    -webkit-mask: linear-gradient(transparent, #000 45%);
            mask: linear-gradient(transparent, #000 45%);
    animation: ts-grid calc(var(--ts-beat) * 4) linear infinite;
    pointer-events: none;
}

/* faint scanlines over everything, like the arena screens */
body.theme-tunestrike::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 50;
    background: repeating-linear-gradient(transparent 0 3px, rgba(0, 0, 0, 0.12) 3px 4px);
    pointer-events: none;
}

@keyframes ts-grid {
    to { background-position: 0 80px, 0 0; }
}

@keyframes ts-beat {
    0%, 100% { transform: scale(1); }
    12% { transform: scale(1.035); }
}

@keyframes ts-bar {
    0%, 100% { transform: scaleY(0.25); }
    15% { transform: scaleY(1); }
    50% { transform: scaleY(0.5); }
}

@keyframes ts-flicker {
    0%, 92%, 100% { opacity: 1; }
    93% { opacity: 0.55; }
    95% { opacity: 1; }
    96% { opacity: 0.7; }
}

/* ---------- Titles: neon that pulses on the beat ---------- */

.theme-tunestrike .section-title {
    color: #fff;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.6), 0 0 18px var(--ts-pink), 0 0 42px rgba(255, 62, 201, 0.6);
    animation: ts-beat var(--ts-beat) ease-out infinite;
}

.theme-tunestrike .eyebrow {
    color: var(--ts-perfect);
    text-shadow: 0 0 12px rgba(60, 240, 160, 0.7);
    letter-spacing: 4px;
}

.theme-tunestrike .breadcrumb a:hover {
    color: var(--ts-cyan);
}

/* ---------- Hero: neon logo, equalizer and the score strip of the HUD ---------- */

.ts-logo {
    margin: 6px 0 4px;
    font-family: var(--font-display);
    font-weight: normal;
    font-size: clamp(44px, 9vw, 110px);
    line-height: 1;
    letter-spacing: clamp(2px, 0.6vw, 6px);
    color: #fff;
    text-shadow:
        0 0 4px #fff,
        0 0 14px var(--ts-pink),
        0 0 34px var(--ts-pink),
        0 0 70px rgba(154, 41, 255, 0.8);
    animation: ts-flicker 6s linear infinite;
}

.ts-eq {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    height: 46px;
    margin: 6px 0 14px;
}

.ts-eq span {
    width: 9px;
    height: 100%;
    border-radius: 3px 3px 0 0;
    background: linear-gradient(0deg, var(--ts-cyan), var(--ts-pink));
    box-shadow: 0 0 10px rgba(255, 62, 201, 0.6);
    transform-origin: bottom;
    animation: ts-bar var(--ts-beat) ease-out infinite;
}

.ts-score {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto 22px;
    padding: 7px 16px;
    background: rgba(5, 2, 10, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 2px;
    color: rgba(255, 255, 255, 0.85);
}

.ts-score-ranks {
    display: flex;
    gap: 12px;
}

.ts-score-ranks b {
    font-weight: normal;
    opacity: 0.45;
}

.ts-score-ranks b:last-child {
    opacity: 1;
    color: var(--ts-perfect);
    text-shadow: 0 0 10px rgba(60, 240, 160, 0.8);
}

.theme-tunestrike .hero-frame {
    box-shadow:
        0 0 50px rgba(255, 62, 201, 0.45),
        0 0 110px rgba(63, 208, 255, 0.22),
        0 30px 80px rgba(0, 0, 0, 0.6);
}

.theme-tunestrike .hero-badge {
    border-color: rgba(60, 240, 160, 0.5);
    color: var(--ts-perfect);
    background: rgba(60, 240, 160, 0.08);
}

.theme-tunestrike .hero-badge .pulse-dot {
    background: var(--ts-perfect);
}

/* ---------- Features as HUD panels with a combo counter ---------- */

.theme-tunestrike .features-grid {
    counter-reset: combo;
}

.theme-tunestrike .feature-card {
    position: relative;
    counter-increment: combo;
    background: linear-gradient(160deg, rgba(40, 14, 70, 0.85), rgba(10, 5, 22, 0.9));
    border: none;
    border-radius: 0;
    clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
    box-shadow: inset 0 0 0 1px rgba(255, 62, 201, 0.45), inset 0 0 30px rgba(154, 41, 255, 0.18);
}

.theme-tunestrike .feature-card::after {
    content: 'x' counter(combo);
    position: absolute;
    top: 12px;
    right: 16px;
    font-family: var(--font-display);
    font-size: 22px;
    color: rgba(255, 255, 255, 0.14);
}

.theme-tunestrike .feature-card:hover {
    box-shadow: inset 0 0 0 1px var(--ts-cyan), inset 0 0 40px rgba(63, 208, 255, 0.25);
}

.theme-tunestrike .feature-card:hover::after {
    color: var(--ts-perfect);
    text-shadow: 0 0 12px rgba(60, 240, 160, 0.8);
}

.theme-tunestrike .feature-icon {
    color: var(--ts-cyan);
    filter: drop-shadow(0 0 6px rgba(63, 208, 255, 0.7));
}

.theme-tunestrike .feature-title {
    color: #fff;
    text-shadow: 0 0 10px rgba(255, 62, 201, 0.6);
}

/* ---------- Trailer and gallery on neon arena screens ---------- */

.theme-tunestrike .video-frame,
.theme-tunestrike .gallery-grid {
    position: relative;
    padding: 12px;
    background: rgba(5, 2, 10, 0.8);
    border-radius: 14px;
    box-shadow: inset 0 0 0 2px var(--ts-pink), 0 0 40px rgba(255, 62, 201, 0.35), 0 0 90px rgba(63, 208, 255, 0.15);
}

.theme-tunestrike .gallery-item {
    border-radius: 6px;
}

.theme-tunestrike .gallery-item:hover {
    box-shadow: 0 0 0 2px var(--ts-cyan), 0 0 24px rgba(63, 208, 255, 0.6);
}

/* ---------- Calm version ---------- */

@media (prefers-reduced-motion: reduce) {
    body.theme-tunestrike::before,
    .theme-tunestrike .section-title,
    .ts-logo,
    .ts-eq span {
        animation: none;
    }

    .ts-eq span {
        transform: scaleY(0.6);
    }
}

@media (max-width: 600px) {
    .ts-score {
        gap: 10px;
        font-size: 10px;
        letter-spacing: 1px;
    }

    .ts-score-ranks {
        gap: 8px;
    }

    .ts-eq {
        height: 34px;
        gap: 4px;
    }

    .ts-eq span {
        width: 7px;
    }
}