/* =====================================================================
   From styles.css
   ===================================================================== */
:root {
    /* Color Palette - Valorant Inspired Dark Mode */
    --bg-main: #0f1923;
    /* Deep dark blue/black */
    --val-red: var(--red);
    /* Signature red */
    --val-light: #ece8e1;
    /* Off-white text */
    --val-gray: #768079;
    --val-cyan: var(--teal-strong);
    /* Accent for glitch effects */

    /* Typography */
    --font-display: "Teko", sans-serif;
    --font-mono: "JetBrains Mono", monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--bg-main);
    color: var(--val-light);
    font-family: var(--font-mono);
    line-height: 1.5;
    overflow-x: hidden;
    position: relative;
}

/* Background Effects */
.grid-bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        linear-gradient(rgba(255,70,85, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,70,85, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: -2;
    transform: perspective(500px) rotateX(60deg) translateY(-100px) scale(3);
    animation: gridMove 20s linear infinite;
}

@keyframes gridMove {
    0% {
        transform: perspective(500px) rotateX(60deg) translateY(0) scale(3);
    }

    100% {
        transform: perspective(500px) rotateX(60deg) translateY(40px) scale(3);
    }
}

/* Nav */
.glitch-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%;
    border-bottom: 2px solid var(--val-gray);
    position: relative;
    z-index: 10;
    background: var(--bg-main);
}

#particle-canvas {
    flex-grow: 1;
    max-width: 1200px;
    height: 150px;
    margin: 0 0.5rem;
    cursor: crosshair;
}

.logo {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--val-red);
    letter-spacing: 2px;
    position: relative;
}

.nav-links {
    display: flex;
    gap: 2rem;
    align-items: center;
}

.nav-links a {
    color: var(--val-light);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    transition: color 0.2s, text-shadow 0.2s;
}

.nav-links a:hover {
    color: var(--val-red);
    text-shadow: 0 0 10px rgba(255,70,85, 0.8);
}

/* Buttons */
.btn-primary {
    background-color: var(--val-red);
    color: var(--val-light) !important;
    padding: 0.5rem 1.5rem;
    border: 1px solid var(--val-red);
    position: relative;
    clip-path: polygon(0 0, 100% 0, 100% 70%, 90% 100%, 0 100%);
    transition: all 0.2s;
}

.btn-primary:hover {
    background-color: transparent;
    color: var(--val-red) !important;
    box-shadow: inset 0 0 10px rgba(255,70,85, 0.5);
}

.btn-large {
    font-size: 1.2rem;
    padding: 1rem 3rem;
    font-weight: 800;
    letter-spacing: 2px;
}

/* Hero Section */
.hero {
    display: flex;
    min-height: 80vh;
    padding: 0 5%;
    align-items: center;
    position: relative;
}

.hero-content {
    flex: 1;
    z-index: 2;
}

.hero-title {
    font-family: var(--font-display);
    font-size: 8rem;
    line-height: 0.8;
    text-transform: uppercase;
    margin-bottom: 0;
}

.hero-desc {
    font-size: 1.1rem;
    max-width: 500px;
    margin-bottom: 3rem;
    color: var(--val-gray);
    border-left: 4px solid var(--val-red);
    padding-left: 1rem;
}

/* FPS counter flicker accent */

@keyframes float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-15px);
    }
}

/* Services */
.services-section {
    padding: 5rem 5%;
    border-top: 1px solid rgba(118, 128, 121, 0.3);
    position: relative;
}

.section-title {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--val-gray);
    margin-bottom: 3rem;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
}

.service-card {
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(118, 128, 121, 0.2);
    padding: 2rem;
    position: relative;
    transition: all 0.3s;
}

.service-card.highlight {
    border-color: var(--val-red);
    background-color: rgba(255,70,85, 0.05);
}

.service-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
    border-color: var(--val-light);
}

.card-header {
    display: flex;
    align-items: flex-end;
    margin-bottom: 1.5rem;
    gap: 1rem;
}

.card-num {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--val-red);
    line-height: 0.8;
}

.card-header h3 {
    font-size: 1.5rem;
    letter-spacing: 1px;
}

.card-footer {
    margin-top: 2rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--val-cyan);
}

/* Footer / Marquee — old duplicate removed; see CYBER FOOTER & SMOOTH MARQUEE block below */

/* Achievements / Coaching Logs */
.achievements-section {
    padding: 5rem 5%;
    border-top: 1px solid rgba(118, 128, 121, 0.3);
}

/* Player Championships */
.championships-section {
    padding: 5rem 5%;
    background: linear-gradient(to right, rgba(255,70,85, 0.05), transparent);
}

.championship-display {
    display: flex;
    justify-content: center;
}

.champ-card {
    background: #000;
    border: 2px solid var(--val-red);
    padding: 2.5rem;
    max-width: 600px;
    position: relative;
    box-shadow: 0 0 30px rgba(255,70,85, 0.2);
}

.champ-tag {
    background: var(--val-red);
    color: #fff;
    padding: 0.2rem 1rem;
    font-size: 0.8rem;
    font-weight: 800;
    position: absolute;
    top: -15px;
    left: 20px;
}

.champ-header h3 {
    font-family: var(--font-display);
    font-size: 3rem;
    color: var(--val-light);
    margin-bottom: 1.5rem;
}

.champ-stats {
    display: flex;
    gap: 3rem;
    margin-bottom: 2rem;
    border-top: 1px solid rgba(255,70,85, 0.3);
    padding-top: 1.5rem;
}

.champ-stats .stat {
    display: flex;
    flex-direction: column;
}

.champ-stats .label {
    font-size: .75rem;
    color: var(--val-gray);
    letter-spacing: 2px;
}

.champ-stats .value {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--val-cyan);
}

.champ-desc {
    color: var(--val-gray);
    font-style: italic;
    border-left: 2px solid var(--val-red);
    padding-left: 1rem;
}

.has-preview {
    position: relative;
    cursor: help;
    text-decoration: underline dotted rgba(0, 255, 204, 0.4);
}

.hover-preview {
    position: absolute;
    bottom: 160%;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    width: 600px;
    height: auto;
    border: 3px solid var(--val-red);
    box-shadow: 0 0 50px rgba(255,70,85, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    border-radius: 8px;
}

.has-preview:hover .hover-preview {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    bottom: 140%;
}

@media (max-width: 1200px) {
    .hover-preview {
        width: 450px;
    }
}

@media (max-width: 768px) {
    .hover-preview {
        width: 280px;
        bottom: 180%;
    }
}

/* Testimonials */
.testimonials-section {
    padding: 5rem 5%;
}

.testimonial-card {
    background: rgba(15, 25, 35, 0.8);
    border: 1px solid rgba(255,70,85, 0.2);
    border-top: 3px solid var(--val-red);
    padding: 2rem;
    width: 450px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s;
}

.testimonial-card:hover {
    border-color: var(--val-red);
    background: rgba(255,70,85, 0.05);
    transform: translateY(-5px);
}

.user-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255,70,85, 0.1);
}

.user-avatar {
    width: 40px;
    height: 40px;
    background: var(--val-red);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    border-radius: 4px;
    font-family: var(--font-display);
    font-size: 1.2rem;
}

.user-name {
    font-family: var(--font-display);
    font-size: 1.2rem;
    color: var(--val-light);
}

.testimonial-card p {
    font-size: 0.9rem;
    color: var(--val-light);
    line-height: 1.6;
    font-family: var(--font-mono);
}

/* Footer Socials */
.social-links {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1.5rem;
}

.social-btn {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--val-gray);
    text-decoration: none;
    padding: 0.4rem 1.4rem;
    border: 1px solid var(--val-gray);
    transition: all 0.2s;
    letter-spacing: 2px;
}

.social-btn:hover {
    color: var(--val-red);
    border-color: var(--val-red);
    text-shadow: 0 0 8px var(--val-red);
    box-shadow: 0 0 12px rgba(255,70,85, 0.2);
}

.squad-disclaimer {
    margin-top: 3rem;
    text-align: center;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.4);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
    letter-spacing: 1px;
}

.squad-disclaimer .warning-tag {
    color: var(--val-red);
    font-weight: 700;
    margin-right: 5px;
}

/* Media Queries */
@media (max-width: 768px) {
    .glitch-nav {
        padding: 1rem 3% !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 0.5rem !important;
        align-items: center !important;
    }

    #particle-canvas {
        height: 60px !important; 
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        order: 2 !important; /* Force it below the logo */
    }

    .logo {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
        order: 1 !important;
    }

    .nav-links {
        display: flex !important;
        order: 3 !important;
        margin-top: 0.5rem !important;
    }

    .nav-links a {
        font-size: .75rem;
    }

    .hero {
        flex-direction: column !important;
        padding-top: 2rem !important;
        min-height: auto !important;
        padding-bottom: 4rem !important;
    }

    .hero-title {
        font-size: 3.5rem !important;
        line-height: 1 !important;
        text-align: center !important;
    }

    

    .hero-desc {
        text-align: center !important;
        border-left: none !important;
        border-top: 4px solid var(--val-red) !important;
        padding-left: 0 !important;
        padding-top: 1rem !important;
        margin: 0 auto 3rem !important;
    }

    .about-card {
        padding: 20px;
    }

    .avatar-container {
        width: 180px;
        height: 180px;
    }

    .gallery-wrapper {
        margin: 20px auto;
        width: 95vmin;
        height: 95vmin;
    }

    .gallery-section {
        padding: 2rem 0;
    }

    .champ-card {
        padding: 1.5rem;
    }

    .champ-stats {
        gap: 1.5rem;
    }

    .champ-stats .value {
        font-size: 1.5rem;
    }

    .gallery-nav-btn {
        width: 45px;
        height: 45px;
    }

    .gallery-nav-btn.prev { transform: translateX(10px); }
    .gallery-nav-btn.next { transform: translateX(-10px); }

    .gallery-nav-btn.prev:hover { transform: translateX(10px) scale(1.05); }
    .gallery-nav-btn.next:hover { transform: translateX(-10px) scale(1.05); }

    .section-title {
        font-size: 2.2rem;
        margin-bottom: 2rem;
        text-align: center;
        width: 100%;
    }

    .about-section, .championships-section, .achievements-section, .squad-section, .services-section, .gallery-section, .testimonials-section, .specs-section {
        padding: 3rem 5%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    

    

    

    .service-grid {
        justify-items: center;
    }

    .service-card {
        text-align: center;
    }

    .card-header {
        justify-content: center;
    }
}

/* --- SQUAD SECTION --- */
.squad-section {
    padding: 100px 5%;
    background: var(--bg-main);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.squad-container {
    display: flex;
    width: 100%;
    max-width: 1400px;
    height: 600px;
    gap: 10px;
    margin-top: 40px;
}

.agent-card {
    position: relative;
    flex: 1;
    overflow: hidden;
    border-radius: 20px;
    cursor: pointer;
    transition: flex 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.5s ease, 
                opacity 0.5s ease,
                transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    filter: grayscale(1) brightness(0.6);
    opacity: 0.5;
    will-change: flex, transform, opacity, filter;
    backface-visibility: hidden;
    transform: translateZ(0);
}

.agent-card.expanded {
    flex: 5;
    filter: grayscale(0) brightness(1);
    opacity: 1;
    box-shadow: 0 0 30px rgba(255,70,85, 0.4);
    border: 2px solid var(--val-red);
}

.agent-card:hover:not(.expanded) {
    opacity: 1;
    filter: grayscale(0.5) brightness(0.8);
}

.agent-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Collapsed stays cover for a clean glance */
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), 
                filter 0.5s ease;
    will-change: transform;
    image-rendering: -webkit-optimize-contrast;
}

.agent-card.expanded img {
    object-fit: contain;
    /* ZOOM OUT */
    transform: scale(0.95);
    /* Slight extra padding for 'fit' */
    background: rgba(255, 255, 255, 0.03);
    /* Subtle background for the 'frame' */
}

.agent-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 30px;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;
    will-change: transform;
}

.agent-card.expanded .agent-info {
    transform: translateY(0);
}

.agent-tag {
    font-family: var(--font-body) !important;
    font-size: .75rem !important;
    color: #ffffff !important;
    background-color: var(--red) !important; /* var(--val-red) */
    padding: 3px 12px !important;
    letter-spacing: 2px !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    border-radius: 2px !important;
    box-shadow: 0 4px 15px rgba(255,70,85, 0.5) !important;
    position: relative !important;
    z-index: 10 !important;
}

.agent-card h3 {
    font-family: var(--font-display);
    font-size: 3rem;
    line-height: 1;
    color: white;
}

.agent-card::after {
    content: attr(data-index);
    position: absolute;
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: .75rem;
    font-weight: 700;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 1024px) {
    .squad-container {
        height: auto;
        flex-direction: column;
    }

    .agent-card {
        height: 200px;
        flex: none;
        width: 100%;
    }

    .agent-card.expanded {
        height: 400px;
    }
}

/* --- PC SPECS ORBIT --- */
.specs-section {
    padding: 60px 5%;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-top: 1px solid rgba(255,70,85, 0.1);
}

#specs-orbit-container {
    width: 100%;
    height: 500px;
    cursor: grab;
}

#specs-orbit-container:active {
    cursor: grabbing;
}

.specs-section .section-title {
    margin-bottom: 0;
}

@media (max-width: 768px) {
    #specs-orbit-container {
        height: 350px;
    }
}

.gallery-section {
    padding: 100px 0;
    background: transparent; /* Allows global vines to show through */
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    z-index: 1; /* Sits above background but below HUD if any */
}

.gallery-wrapper {
    position: relative;
    width: 90vmin;
    height: 90vmin;
    max-width: 600px;
    max-height: 600px;
    margin: 50px auto;
    border-radius: 24px;
    overflow: hidden;
    background: #0a0a0a; /* Opaque background to hide vines behind it */
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 
                0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 10; /* Ensures it stays in front of the vines */
}

.gallery-main {
    width: 100%;
    height: 100%;
    position: relative;
}

.gallery-controls {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 2000; /* Extremely high priority */
    pointer-events: none;
}

.gallery-nav-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    color: #1a1a1a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
}

.gallery-nav-btn:hover {
    transform: scale(1.1) translateY(-2px);
    background: #ffffff;
    box-shadow: 0 15px 40px rgba(255,70,85, 0.2);
    color: var(--val-red);
}

.gallery-nav-btn:active {
    transform: scale(0.95);
}

.gallery-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(1);
}

.gallery-nav-btn.prev { transform: translateX(-50%); }
.gallery-nav-btn.next { transform: translateX(50%); }

.gallery-nav-btn.prev:hover { transform: translateX(-50%) scale(1.1) translateY(-2px); }
.gallery-nav-btn.next:hover { transform: translateX(50%) scale(1.1) translateY(-2px); }

/* --- CYBER FOOTER & SMOOTH MARQUEE --- */
.cyber-footer {
    background: #0a0a0a;
    padding: 60px 0 30px;
    border-top: 1px solid rgba(255,70,85, 0.2);
    position: relative;
    overflow: hidden;
}

/* marquee-scroll keyframe removed — driven by JS RAF */

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.btn-discord {
    padding: 12px 30px;
    background: transparent;
    border: 1px solid var(--val-red);
    color: var(--val-red);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 2px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn-discord:hover {
    background: var(--val-red);
    color: white;
    box-shadow: 0 0 20px rgba(255,70,85, 0.4);
}

/* .social-links / .social-btn — consolidated earlier in file */

.about-flex-layout {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
}

.about-card-wrapper {
    position: relative;
    flex: 0 0 400px;
    margin-left: 4%;
}

.about-glow {
    pointer-events: none;
    position: absolute;
    inset: -20px;
    background: var(--val-red);
    opacity: 0.1;
    filter: blur(60px);
    border-radius: 40px;
    z-index: 0;
}

.about-card {
    position: relative;
    z-index: 10;
    background: rgba(15, 25, 35, 0.6);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

.card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    font-size: 0.75rem;
    color: var(--val-gray);
    letter-spacing: 1px;
}

.status-indicator {
    display: flex;
    align-items: center;
    gap: 10px;
}

.status-dot {
    width: 8px;
    height: 8px;
    background: var(--teal-strong);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--teal-strong);
}

.pulse {
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.5); opacity: 0.5; }
    100% { transform: scale(1); opacity: 1; }
}

.clock-display {
    display: flex;
    align-items: center;
}

.profile-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
    margin-bottom: 30px;
}

.avatar-container {
    width: 220px;
    height: 220px;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid transparent; /* border removed — matches bg */
}

.avatar-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: smooth;
    filter: blur(0.3px) contrast(1.05); /* subtle smoothing pass */
}

.profile-details h3 {
    font-family: var(--font-display);
    font-size: 2.5rem;
    color: var(--val-light);
    line-height: 1;
    margin-bottom: 5px;
}

.profile-details .role {
    color: var(--val-gray);
    font-size: 0.85rem;
    letter-spacing: 1px;
}

.card-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.btn-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--val-light);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 700;
    transition: all 0.3s;
    cursor: pointer;
}

.btn-card:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

.card-footer-glow {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--val-red);
    color: #fff;
    padding: 10px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 700;
    margin-top: 10px;
    box-shadow: 0 0 15px rgba(255,70,85, 0.4);
}

/* Right Side Text Content */
.about-text-content {
    flex: 1;
}

.side-title {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--val-red);
    line-height: 1;
    margin-bottom: 2rem;
    letter-spacing: 2px;
}

.bio-paragraphs {
    font-size: 1.1rem;
    color: var(--val-light);
    opacity: 0.9;
    line-height: 1.8;
}

.bio-paragraphs p {
    margin-bottom: 1.5rem;
}

.bio-paragraphs strong {
    color: var(--val-red);
}

@media (max-width: 1024px) {
    .about-flex-layout {
        flex-direction: column;
        text-align: center;
    }
    .about-card-wrapper {
        flex: 0 0 auto;
        width: 100%;
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    .side-title {
        font-size: 3rem;
        text-align: center;
    }
}

/* ============================================================
   CUSTOM CROSSHAIR CURSOR
   ============================================================ */
body,
a, button, [role="button"],
.agent-card, .service-card,
.gallery-nav-btn, .music-controller,
.has-preview, .btn-card, .btn-copy {
    cursor: none;
}

#custom-cursor.hidden { opacity: 0; }

/* Lines turn cyan on hoverable elements */
#custom-cursor.hovering .cursor-line-h,
#custom-cursor.hovering .cursor-line-v {
    background: var(--val-cyan);
    box-shadow: 0 0 8px var(--val-cyan);
}

/* Gap in the middle of horizontal line */
.cursor-line-h::before,
.cursor-line-h::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 1px;
    background: var(--bg-main);
}

/* Gap in the middle of vertical line */
.cursor-line-v::before,
.cursor-line-v::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 6px;
    background: var(--bg-main);
}

/* Hide custom cursor on touch devices */
@media (hover: none) {
    
    body, a, button, [role="button"],
    .agent-card, .service-card, .gallery-nav-btn,
    .has-preview, .btn-card, .btn-copy {
        cursor: auto;
    }
    a, button { cursor: pointer; }
}

/* ============================================================
   MUSIC CONTROLLER (missing styles)
   ============================================================ */
.music-controller {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 9000;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(15, 25, 35, 0.85);
    border: 1px solid rgba(255,70,85, 0.3);
    padding: 0.5rem 1rem 0.5rem 0.75rem;
    backdrop-filter: blur(10px);
    transition: border-color 0.2s, box-shadow 0.2s;
}

.music-controller:hover {
    border-color: var(--val-red);
    box-shadow: 0 0 12px rgba(255,70,85, 0.2);
}

.music-icon { color: var(--val-gray); transition: color 0.2s; }
.music-controller.playing .music-icon { color: var(--val-cyan); }
.music-controller.muted .music-icon { color: var(--val-gray); }

.music-text {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: var(--val-gray);
    transition: color 0.2s;
}
.music-controller.playing .music-text { color: var(--val-cyan); }

/* ============================================================
   #BOOK — INITIATE COMMS SECTION
   ============================================================ */
.book-section {
    padding: 5rem 5%;
    border-top: 1px solid rgba(118, 128, 121, 0.3);
    position: relative;
}

.book-container {
    max-width: 1100px;
    margin: 0 auto;
}

.book-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 4rem;
    align-items: start;
    margin-top: 2rem;
}

.book-badge {
    display: inline-block;
    background: var(--val-cyan);
    color: var(--bg-main);
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: 2px;
    padding: 0.3rem 1rem;
    margin-bottom: 1.5rem;
}

.book-heading {
    font-family: var(--font-display);
    font-size: 3.5rem;
    color: var(--val-light);
    line-height: 1;
    margin-bottom: 1rem;
    letter-spacing: 1px;
}

.book-sub {
    color: var(--val-gray);
    font-size: 0.95rem;
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 420px;
}

.book-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-top: 2rem;
}

.book-meta-item {
    border: 1px solid rgba(255,70,85, 0.15);
    padding: 0.75rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    background: rgba(255,70,85, 0.02);
    transition: border-color 0.2s, background 0.2s;
}

.book-meta-item:hover {
    border-color: rgba(255,70,85, 0.4);
    background: rgba(255,70,85, 0.05);
}

.meta-label {
    font-size: .75rem;
    color: var(--val-gray);
    letter-spacing: 2px;
    font-family: var(--font-mono);
}

.meta-val {
    font-family: var(--font-display);
    font-size: 1.4rem;
    color: var(--val-cyan);
    line-height: 1;
}

.book-divider {
    width: 1px;
    background: linear-gradient(to bottom,
        transparent,
        rgba(255,70,85, 0.3) 20%,
        rgba(255,70,85, 0.3) 80%,
        transparent);
    align-self: stretch;
    min-height: 300px;
}

/* How It Works steps */
.steps-title {
    font-family: var(--font-display);
    font-size: 1rem;
    color: var(--val-gray);
    letter-spacing: 4px;
    margin-bottom: 2rem;
}

.step-item {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-bottom: 1.75rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(255,70,85, 0.08);
}

.step-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.step-num {
    font-family: var(--font-display);
    font-size: 2.8rem;
    color: rgba(255,70,85, 0.3);
    line-height: 0.9;
    flex-shrink: 0;
    transition: color 0.2s;
}

.step-item:hover .step-num { color: var(--val-red); }

.step-body strong {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 2px;
    color: var(--val-light);
    margin-bottom: 0.4rem;
}

.step-body p {
    font-size: 0.85rem;
    color: var(--val-gray);
    line-height: 1.6;
    font-family: var(--font-mono);
}

@media (max-width: 1024px) {
    .book-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .book-divider { display: none; }
    .book-sub { max-width: 100%; }
}

@media (max-width: 768px) {
    .book-heading { font-size: 2.5rem; }
    .book-meta-grid { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   BOOT / LOADING SCREEN
   ============================================================ */

/* Dark vignette — heavy on left (text), fades to let character breathe through center/right */

/* ============================================================
   BOOT — VALORANT LOGO ANIMATION
   ============================================================ */

/* Shockwave ring that fires on logo slam */

/* Boot character image — full-screen background, behind everything */

/* ============================================================
   OPTION A — TACTICAL HUD
   ============================================================ */

/* Grid */

/* Animated sweep line */

/* Corner brackets */

/* Floating data readouts */

/* Boot click prompt */

/* ============================================================
   BOOT SCREEN — OPTION B: RADAR SCANNER HUD
   ============================================================ */

/* ── Concentric rings ── */

/* ── Rotating sweep cone ── */

/* ── Crosshair lines ── */
.radar-cross-h,
.radar-cross-v {
    position: absolute;
    background: rgba(255,70,85, 0.2);
}

/* ── Center dot ── */

/* ── Detection blips ── */

/* ── HUD labels ── */

/* ============================================================
   BOOT SCREEN — OPTION C: VALORANT SLASH + DIAMOND RETICLE
   ============================================================ */

/* ── Diagonal slash lines sweeping across ── */

/* ── Diamond reticle — centered right half ── */

/* Diamond corner brackets */

/* Ping/pulse ring */

/* ── Side data bars ── */

/* ============================================================
   HERO CHARACTER IMAGE
   ============================================================ */
.hero-char-wrap {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    overflow: visible;
    z-index: 1;
}
.hero-char-glow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 380px;
    height: 100px;
    background: radial-gradient(ellipse, rgba(255,70,85,0.65) 0%, rgba(255,70,85,0.2) 50%, transparent 75%);
    border-radius: 50%;
    filter: blur(18px);
    animation: heroGlowPulse 3s ease-in-out infinite;
}
.hero-char-img {
    height: 78vh;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    position: relative;
    z-index: 2;
    mix-blend-mode: screen;          /* screen(black, dark-bg) ≈ dark-bg — removes black bg box */
    filter: drop-shadow(0 0 40px rgba(255,70,85,0.45));
    animation: heroCharFloat 4s ease-in-out infinite;
}
@keyframes heroCharFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-14px); }
}
@keyframes heroGlowPulse {
    0%, 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1); }
    50%       { opacity: 1;   transform: translateX(-50%) scaleX(1.15); }
}
@media (max-width: 768px) {
    .hero-char-wrap { display: none; }
    
    
}

/* ============================================================
   HERO PARTICLES CANVAS
   ============================================================ */

/* Ensure stat boxes and crosshair sit above canvas */
.hero-visual .stat-box,
.hero-visual .crosshair-element { position: relative; z-index: 1; }

/* ============================================================
   BACK TO TOP BUTTON
   ============================================================ */
#back-to-top {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;         /* left side — music controller is on the right */
    z-index: 9000;
    width: 42px;
    height: 42px;
    background: rgba(15, 25, 35, 0.85);
    border: 1px solid rgba(255,70,85, 0.3);
    color: var(--val-red);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s, box-shadow 0.2s;
    pointer-events: none;
}

#back-to-top.visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

#back-to-top:hover {
    border-color: var(--val-red);
    box-shadow: 0 0 14px rgba(255,70,85, 0.25);
    color: var(--val-light);
}

/* ============================================================
   SCROLL REVEAL SYSTEM
   ============================================================ */

/* Base hidden state — applied via JS so non-JS still works */

/* Visible state — Observer adds this class */
.js-reveal.in-view,
.js-reveal-left.in-view,
.js-reveal-scale.in-view {
    opacity: 1;
    transform: none;
}

/* ============================================================
   ABOUT CARD 3D TILT
   ============================================================ */
.about-card-wrapper {
    /* Smooth spring-back when mouse leaves */
    will-change: transform;
}

/* Lift inner elements in Z so they visually pop in 3D */
.about-card {
    transform-style: flat; /* keep backdrop-filter working */
}

/* ============================================================
   PREFERS-REDUCED-MOTION — respect accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    /* Reveal instantly — no animation */
    .js-reveal,
    .js-reveal-left,
    .js-reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }

    /* Kill all CSS keyframe animations */
    .grid-bg,
    .marquee-track,
    .testimonial-track,
    .float-1,
    .float-2,
    .float-3,
    .pulse,
    .crt-overlay {
        animation: none !important;
    }
}

/* =====================================================================
   From refinement.css
   ===================================================================== */
/* Pass 1: reading comfort and a consistent visual system. */
:root {
  --bg-main: #101820;
  --val-light: #f2f3f5;
  --val-gray: #b6c0cb;
  --surface: #17222d;
  --border: #34414e;
  --font-body: "Segoe UI", Arial, sans-serif;
}
body { font-family: var(--font-body); line-height: 1.65; cursor: auto; }

.grid-bg { opacity: .15; animation: none; }
a, button, [role="button"], .agent-card, .gallery-nav-btn,
.music-controller, .btn-card, .btn-copy { cursor: pointer; }
.service-card { cursor: auto; }
.has-preview { cursor: help; }
a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--teal); outline-offset: 5px;
}
.glitch-nav { border-bottom: 1px solid var(--border); }
.nav-links a, .rank-badge, .stat-label, .ach-date,
.meta-label, .book-badge, .agent-tag, .card-num {
  font-family: var(--font-mono);
}
.hero-desc, .bio-paragraphs p, .service-card p, .champ-desc,
.book-sub, .step-body p, .testimonial-card p {
  font-family: var(--font-body);
  color: #ced6de;
  font-size: 1.0625rem;
  line-height: 1.8;
  letter-spacing: normal;
  text-shadow: none;
}
.hero-desc { max-width: 48ch; padding-left: 1.25rem; }
.bio-paragraphs { max-width: 65ch; gap: 1.25rem; }
.bio-paragraphs p { margin-bottom: 1.25rem; }
.bio-paragraphs strong { color: var(--val-light); }
.champ-desc { font-style: normal; }
.section-title, .side-title { line-height: 1.1; letter-spacing: .025em; margin-bottom: 2.5rem; }
.services-section, .achievements-section, .championships-section,
.squad-section, .gallery-section, .testimonials-section, .book-section {
  padding-top: clamp(3.5rem, 6vw, 6rem);
  padding-bottom: clamp(3.5rem, 6vw, 6rem);
}
.service-grid { gap: 1.5rem; align-items: stretch; }
.service-card, .testimonial-card, .champ-card, .about-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.12);
}
.service-card, .testimonial-card, .champ-card { padding: clamp(1.5rem, 3vw, 2.25rem); }
.service-card { display: flex; flex-direction: column; }
.service-card .card-footer { margin-top: auto; padding-top: 1.5rem; }
.service-card.highlight { border-color: var(--red); background: #1d2630; }
.service-card:hover, .testimonial-card:hover {
  transform: translateY(-3px); border-color: #788693;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}
.card-header { gap: 1rem; margin-bottom: 1.25rem; }

.ach-date, .meta-label, .profile-details .role, .music-text,
.status-indicator, .clock-display, .squad-disclaimer { color: var(--val-gray); }
.squad-disclaimer { font-family: var(--font-body); font-size: .9375rem; line-height: 1.7; }
.card-footer-glow { background: #2b202a; box-shadow: none; color: #ffb9bf; }
.about-glow { opacity: .18; }
.btn-card { border: 1px solid #536171; background: #202c39; border-radius: 8px; }
.btn-primary { color: #101820 !important; text-decoration: none; text-shadow: none; }
.btn-primary:hover { color: var(--red-light) !important; }
.nav-links a:hover { text-shadow: none; }
.testimonial-card p { font-size: 1rem; }

.testimonial-card { flex-shrink: 0; }
.user-name { color: var(--val-light); }
.music-controller, #back-to-top { border-color: #536171; border-radius: 8px; }
/* Reading content stays visible during scroll; the hero retains its entrance. */

@media (max-width: 768px) {
  .testimonial-card { width: min(85vw, 450px); }
  .bio-paragraphs p, .hero-desc, .service-card p, .book-sub { font-size: 1rem; }
}

/* Pass 2: a clear introduction, with the cinematic experience by choice. */
.glitch-nav { padding: 1rem max(5%, calc((100vw - 1320px)/2)); min-height: 88px; gap: 2rem; }
#particle-canvas { height: 72px; width: 360px; max-width: 360px; min-width: 260px; flex: 1 1 360px; opacity: 1; background: transparent; border: 0; box-shadow: none; }
.logo { font-size: 2rem; white-space: nowrap; }
.hero {
  min-height: min(720px, calc(100svh - 88px));
  padding: 4rem max(5%, calc((100vw - 1320px)/2));
  isolation: isolate; overflow: hidden; align-items: center;
  border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at 80% 65%, #302331 0%, transparent 48%);
}
.hero-content { flex: 0 1 58%; max-width: 690px; position: relative; z-index: 3; }
.hero-eyebrow { color: #c2cbd5; font-family: var(--font-mono); font-size: .75rem; letter-spacing: .14em; margin-bottom: 1.4rem; }
.hero-title { font-size: clamp(3rem, 5.6vw, 5.6rem); line-height: .98; margin: 0 0 1.5rem; letter-spacing: .01em; }
.hero-title span { display: block; color: var(--red); margin-top: .12em; }
.hero-desc { border: 0; padding: 0; max-width: 43ch; margin-bottom: 1.8rem; line-height: 1.7; }
.hero-actions { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.hero-actions .btn-large { padding: .95rem 1.4rem; font-size: .85rem; letter-spacing: .06em; display: inline-flex; align-items: center; gap: 1.5rem; }
.hero-secondary { color: #f2f3f5; text-decoration: none; font-size: .95rem; border-bottom: 1px solid #64717d; padding: .5rem 0; }
.hero-secondary:hover { color: var(--red-light); }
.hero-proof { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin-top: 1.8rem; color: #bcc7d2; font-size: .8125rem; }
.hero-proof span::before { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--red); margin: 0 .6rem .15rem 0; }

.hero .hero-visual { display: none; }
.hero-char-wrap { inset: 0 0 0 44%; opacity: 1; align-items: flex-end; justify-content: center; overflow: hidden; }
.hero-char-img { width: 100%; height: 100%; max-height: 690px; object-fit: contain; object-position: center bottom; animation: none; filter: drop-shadow(0 0 35px rgba(255,70,85,.15)); }
.hero-char-glow { opacity: .35; animation: none; }
.hero-art-label { position: absolute; bottom: 1.4rem; right: 5%; z-index: 2; font: .65rem var(--font-mono); letter-spacing: .12em; color: #bdc4ce; }
.hero-art-label span { color: var(--red); margin-left: 2rem; }

.music-controller { font-family: var(--font-body); }
@media (max-width: 1000px) {
  #particle-canvas { display: none; }
  .hero-content { flex-basis: 64%; }
  .hero-char-wrap { left: 48%; opacity: .7; }
}
@media (max-width: 768px) {
  .glitch-nav { padding: 1rem 5%; min-height: 72px; flex-direction: row; flex-wrap: wrap; gap: .5rem 1rem; }
  .logo { font-size: 1.6rem; }
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: .75rem; }
  .hero { min-height: auto; padding: 3rem 6%; display: block; }
  .hero-content { width: 100%; max-width: 38rem; }
  .hero-eyebrow { font-size: .75rem; text-align: left; }
  .hero-title { font-size: clamp(3rem, 11vw, 4.6rem) !important; text-align: left !important; line-height: 1 !important; }
  .hero .hero-desc { text-align: left !important; border: 0 !important; padding: 0 !important; margin: 0 0 1.5rem !important; }
  .hero-char-wrap, .hero-art-label { display: none; }
  .hero-actions { align-items: flex-start; gap: 1rem; }
  .hero-proof { flex-direction: column; }
}

/* Pass 3: narrow screens and touch input. */
.equipment-mobile-list { display: none; }

/* Pass 4: navigation, profile evidence and direct contact. */
.glitch-nav { flex-wrap: wrap; }
.nav-links { flex-wrap: wrap; justify-content: center; gap: .75rem 1.25rem; }
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }
.card-actions { flex-wrap: wrap; }
.vlr-profile { flex-basis: 100%; }
.profile-history-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.5rem; color: var(--teal); text-underline-offset: 5px; }
.contact-details { margin: 1.5rem 0; padding: 1.25rem; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.contact-label { color: var(--val-gray); font: .75rem var(--font-mono); }
.contact-row { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: .5rem 0; }
.contact-row code { font-size: 1.1rem; color: #fff; }
.contact-row button { min-height: 44px; padding: .6rem 1rem; }
.contact-details p { color: #ced6de; font-size: .9rem; line-height: 1.6; margin: .75rem 0; }
.contact-email { display: inline-flex; align-items: center; min-height: 44px; color: var(--teal); overflow-wrap: anywhere; word-break: break-word; }
.copy-status:empty { display: none; }
.copy-status { position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); z-index: 10000; width: max-content; max-width: calc(100% - 32px); padding: 1rem 1.25rem; margin: 0; background: #17222d; color: #fff; border: 1px solid var(--teal); border-radius: 10px; box-shadow: 0 8px 24px #0006; overflow-wrap: anywhere; }
[data-copy]:disabled { opacity: .6; cursor: wait; }
@media (max-width: 1024px) {
  .about-card-wrapper, .about-text-content, .book-card-main, .book-steps { min-width: 0; max-width: 100%; }
  .about-flex-layout { gap: 2.5rem; }
  .service-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); width: 100%; }
}
@media (max-width: 768px) {
  html { scroll-padding-top: 1rem; }
  .glitch-nav { position: relative; padding: 1rem 5% !important; gap: .5rem !important; }
  .nav-links { flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; margin-top: 0 !important; }
  .nav-links a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; font-size: .75rem; }
  .hero { padding: 2.5rem 5% 3rem !important; }
  .hero-content { min-width: 0; }
  .hero-eyebrow { letter-spacing: .08em; line-height: 1.7; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-large { justify-content: space-between; width: 100%; box-sizing: border-box; }
  .hero-secondary { align-self: flex-start; }
  
  .section-title, .side-title { font-size: clamp(2rem, 8vw, 3rem); overflow-wrap: anywhere; margin-bottom: 1.75rem; }
  .about-container, .about-flex-layout, .championship-display, .champ-card,
  .service-grid, .service-card, .book-container { width: 100%; min-width: 0; }
  .about-card-wrapper { width: 100%; flex: auto; }
  .about-text-content, .bio-paragraphs { text-align: left; }
  .card-top, .card-actions, .champ-header, .champ-stats { flex-wrap: wrap; gap: 1rem; }
  .card-actions .btn-card { flex: 1 1 130px; min-height: 48px; }
  .service-grid { grid-template-columns: minmax(0, 1fr); }
  .service-card { text-align: left; }
  .card-header { justify-content: flex-start; }
  
  .ach-title, .ach-result, .meta-val, .book-badge { overflow-wrap: anywhere; }
  .book-section { padding: 3rem 5%; }
  .book-inner { gap: 2rem; }
  .book-heading { font-size: clamp(2rem, 9vw, 2.75rem); line-height: 1.15; }
  .book-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .book-card-main .btn-large { display: flex; justify-content: center; width: 100%; min-height: 48px; box-sizing: border-box; white-space: normal; }
  .step-body { min-width: 0; }
  .gallery-wrapper { width: 100%; height: auto; aspect-ratio: 1; margin: 1rem auto; }
  .gallery-main { position: absolute; inset: 0; touch-action: pan-y pinch-zoom; }
  .gallery-controls { padding: 0 8px; }
  .gallery-nav-btn { width: 44px; height: 44px; flex-shrink: 0; }
  .gallery-nav-btn.prev, .gallery-nav-btn.next { transform: none; }
  
  .testimonial-card { width: min(80vw, 360px); scroll-snap-align: start; }
  .squad-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; margin-top: 0; }
  .agent-card, .agent-card.expanded { width: 100%; height: 260px; filter: none; opacity: 1; }
  .agent-card .agent-info { opacity: 1; transform: none; padding: 1rem .5rem; }
  .agent-info h3 { font-size: 1.35rem; overflow-wrap: anywhere; }
  .specs-section { background: var(--bg-main); }
  #specs-orbit-container { display: none; }
  .equipment-mobile-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; width: 100%; list-style: none; padding: 0; margin: 1.5rem 0 0; }
  .equipment-mobile-list li { min-width: 0; padding: .75rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
  .equipment-mobile-list img { display: block; width: 100%; height: 130px; object-fit: contain; margin-bottom: .75rem; }
  .equipment-mobile-list span { display: block; color: var(--val-light); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
  .footer-contact, .social-links { flex-wrap: wrap; gap: 1rem; }
  .footer-contact { padding-inline: 5%; }
  .footer-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .cyber-footer { padding-bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
  .music-controller { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); min-height: 44px; max-width: calc(100vw - 80px); }
  #back-to-top { left: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
}
@media (hover: none) {
  .has-preview { display: block; }
  .has-preview .hover-preview, .has-preview:hover .hover-preview { position: static; display: block; width: 100%; max-width: 280px; height: auto; opacity: 1; visibility: visible; transform: none; margin-top: .75rem; pointer-events: auto; }
  .service-card:hover, .testimonial-card:hover { transform: none; }
}

/* Pass 5: coaching experience and supporting evidence. */
.experience-intro { max-width: 64ch; margin: -1rem 0 2rem; color: #ced6de; font-size: 1.0625rem; line-height: 1.8; }
.experience-grid, .scope-grid, .feedback-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; width: 100%; }
.experience-card { display: flex; flex-direction: column; min-width: 0; padding: 1.75rem; background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--red); border-radius: 12px; }
.experience-role { font: 600 .75rem var(--font-mono); letter-spacing: .14em; color: var(--red-light); margin-bottom: .75rem; }
.experience-card h3 { font-family: var(--font-display); font-size: clamp(1.75rem, 2.6vw, 2.5rem); line-height: 1.15; color: var(--val-light); overflow-wrap: anywhere; margin: 0 0 .6rem; }
.experience-dates { font-size: .875rem; color: var(--val-gray); margin: 0 0 1.5rem; }
.experience-event { font-size: .95rem; line-height: 1.6; color: #ced6de; margin: 0 0 1rem; }
.experience-result { color: var(--val-light); font-size: .9rem; margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border); }
.experience-result span { color: var(--val-gray); margin-right: .5rem; }
.experience-card a { display: inline-flex; align-items: center; min-height: 44px; margin-top: .6rem; font-size: .85rem; color: var(--teal); text-underline-offset: 4px; }
.coaching-scope { width: 100%; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border); }
.coaching-scope > h3 { font-family: var(--font-display); font-size: 2rem; line-height: 1.2; margin-bottom: 1.5rem; color: var(--val-light); }
.scope-grid article { min-width: 0; padding-right: 1rem; }
.scope-number { color: var(--red-light); font: .8rem var(--font-mono); }
.scope-grid h4 { font-size: 1.1rem; margin: .5rem 0 .75rem; color: var(--val-light); }
.scope-grid p { font-size: 1rem; line-height: 1.8; color: #ced6de; }
.feedback-grid .testimonial-card { width: auto; min-width: 0; margin: 0; padding: 1.5rem; transform: none; }
.feedback-grid .testimonial-card p { font-style: normal; }
.feedback-grid .user-info { margin-top: 1.5rem; }
.more-feedback { width: 100%; margin-top: 1.5rem; }
.more-feedback summary { width: fit-content; padding: .75rem 0; min-height: 44px; color: var(--teal); cursor: pointer; }
.more-feedback summary:focus-visible { outline: 3px solid var(--teal); outline-offset: 4px; }
.more-feedback[open] summary { margin-bottom: 1rem; }
@media (max-width: 1000px) {
  .experience-grid, .scope-grid, .feedback-grid { grid-template-columns: 1fr; }
  .experience-card { padding: 1.5rem; }
  .experience-intro { margin-top: 0; }
  .scope-grid { gap: 1.75rem; }
  .scope-grid article { padding-right: 0; }
}

/* =====================================================================
   From design.css
   ===================================================================== */
/* Step 6: the portfolio's shared visual direction. */
.footer-credit { margin-top:28px; padding-top:20px; border-top:1px solid var(--border); color:#acb8c5; font:12px/1.8 var(--font-mono); letter-spacing:.08em; }
.equipment-list-toggle { min-height:44px; padding:10px 18px; margin:12px 0; align-self:flex-start; background:#192632; color:#f1eee8; border:1px solid #526171; border-radius:4px; font:13px var(--font-body); cursor:pointer; }
.specs-list-view #specs-orbit-container, .specs-list-view .orbit-pause { display:none; }
.specs-list-view .equipment-mobile-list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); gap:16px; width:100%; list-style:none; margin:24px 0 0; padding:0; }
.specs-list-view .equipment-mobile-list li { min-width:0; padding:18px; background:var(--surface); border:1px solid var(--border); border-radius:5px; }
.specs-list-view .equipment-mobile-list img { display:block; width:100%; height:160px; object-fit:contain; margin-bottom:12px; }
.specs-list-view .equipment-mobile-list span { font-size:.85rem; color:var(--val-light); line-height:1.6; }
.gallery-status { position:absolute; top:10px; left:10px; z-index:11; padding:6px 10px; max-width:calc(100% - 20px); color:#fff; background:#0b1118e8; font-size:.8rem; pointer-events:none; }
.gallery-tab:focus-visible { outline:3px solid var(--teal); }
.gallery-tab[aria-pressed="true"] circle { stroke:var(--red-pale); stroke-width:3; }
@media (max-width:768px) { .equipment-list-toggle { display:none; } }
.services-intro { max-width:65ch; margin:-10px 0 30px; color:#c4d1de; font-size:1rem; line-height:1.8; }
.coaching-services { grid-template-columns:repeat(2,minmax(0,1fr)); }
.session-topics { padding-left:20px; margin:20px 0; color:#d4dce4; font-size:.95rem; line-height:1.7; }
.session-topics li { margin-bottom:6px; padding-left:4px; }
.session-topics li::marker { color:var(--red-light); }
.session-prep { border-top:1px solid var(--border); padding-top:18px; margin-bottom:8px; }
.session-prep h4 { color:var(--red-pale); font:600 .75rem var(--font-mono); margin-bottom:8px; }
.service-card .session-prep p { font-size:.9rem; color:#b8c7d5; line-height:1.7; }
.session-guide { margin-top:40px; padding-top:28px; border-top:1px solid var(--border); }
.session-guide h3 { font:500 2rem/1.2 var(--font-display); margin-bottom:24px; }
.session-guide ol { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; padding-left:22px; }
.session-guide li { padding-left:6px; }
.session-guide li::marker { color:var(--red-light); font-family:var(--font-mono); }
.session-guide strong { font-size:1rem; }
.session-guide p { color:#b8c7d5; font-size:.95rem; line-height:1.75; margin-top:10px; }
@media (max-width:768px) {
  .coaching-services, .session-guide ol { grid-template-columns:1fr; }
  .coaching-services .card-num { line-height:1.6; }
}
/* Step 7: consistent interaction feedback and optional motion. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior:smooth; }
  .btn-primary, .btn-card, .session-link, .nav-links a, .picture-close,
  .player-viewer-controls button, .orbit-pause { transition:background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease; }
  .experience-card, .service-card, .agent-card { transition:border-color .2s ease, box-shadow .2s ease; }
  #player-viewer[open], #championship-viewer[open] { animation:viewer-enter .22s ease-out; }
  #player-viewer[open]::backdrop, #championship-viewer[open]::backdrop { animation:backdrop-enter .22s ease-out; }
}
@keyframes viewer-enter { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes backdrop-enter { from { opacity:0; } to { opacity:1; } }
.nav-links a[aria-current="location"] { color:var(--red-pale); box-shadow:inset 0 -2px var(--red); }
.session-link:hover, .session-link:focus-visible { color:var(--red-pale); }
@media (hover:hover) {
  .experience-card:hover, .service-card:hover, .agent-card:hover { border-color:#788a9b; box-shadow:0 12px 32px #0003; }
  .btn-card:hover, .picture-close:hover, .player-viewer-controls button:hover { background:#2c4052; border-color:var(--teal); }
}
.orbit-pause { align-self:center; min-height:44px; padding:10px 18px; margin-top:12px; background:#192632; color:#f1eee8; border:1px solid #526171; border-radius:4px; font:13px var(--font-body); cursor:pointer; }
.orbit-pause:disabled { color:#acb8c5; cursor:default; }
@media (max-width:768px) { .orbit-pause { display:none; } }
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto !important; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
}
.player-profile-trigger { position:absolute; inset:0; z-index:3; width:100%; height:100%; border:0; background:transparent; color:#f1eee8; cursor:zoom-in; }
.player-profile-trigger span { position:absolute; right:12px; bottom:14px; padding:5px 8px; border:1px solid #617080; border-radius:3px; background:#0d141ce8; font:12px/1.4 var(--font-body); }
.player-profile-trigger:hover { box-shadow:inset 0 0 0 2px var(--red-light); }
.player-profile-trigger:focus-visible { outline:3px solid var(--teal); outline-offset:-4px; }
#player-viewer { position:fixed; inset:0; margin:auto; width:min(740px,94vw); max-width:94vw; max-height:94vh; max-height:94dvh; padding:20px; border:1px solid #526171; border-radius:8px; background:#111a24; color:#f1eee8; overflow:auto; }
#player-viewer::backdrop { background:rgba(3,7,12,.9); }
.player-viewer-top { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.player-viewer-top .picture-close { margin:0; flex-shrink:0; }
.player-viewer-label { font:12px var(--font-mono); letter-spacing:.12em; color:var(--red-pale); }
#player-viewer-name { font:500 2.4rem/1.1 var(--font-display); margin-top:6px; }
.player-viewer-image { display:block; width:100%; height:auto; max-height:calc(94vh - 210px); max-height:calc(94dvh - 210px); object-fit:contain; background:#0b1118; }
.player-viewer-controls { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:16px; }
.player-viewer-controls button { min-height:44px; padding:10px 14px; border:1px solid #526171; border-radius:4px; background:#22313f; color:#fff; font:13px var(--font-body); cursor:pointer; }
.player-viewer-count { font:12px/1.5 var(--font-body); color:#b6c4d1; text-align:center; }
@media (max-width:480px) {
  #player-viewer { padding:14px; }
  .player-profile-trigger span { right:8px; bottom:64px; font-size:12px; }
  .player-viewer-controls { gap:6px; }
  .player-viewer-controls button { padding:8px; font-size:12px; }
}
.championship-preview { text-decoration:none; cursor:zoom-in; border-bottom:0 !important; }
.preview-hint { display:block; margin-top:10px; font:12px/1.6 var(--font-body); color:#c4d1de; }
.championship-preview:hover .preview-hint { color:var(--red-pale); }
#championship-viewer { position:fixed; inset:0; margin:auto; width:min(1100px,94vw); max-width:94vw; max-height:92vh; max-height:92dvh; padding:18px; border:1px solid #526171; border-radius:8px; color:#f1eee8; background:#111a24; overflow:auto; }
#championship-viewer::backdrop { background:rgba(3,7,12,.9); }
.picture-close { display:block; margin:0 0 14px auto; min-height:44px; padding:8px 18px; background:#22313f; color:#fff; border:1px solid #657585; border-radius:4px; font:600 14px var(--font-body); cursor:pointer; }
.picture-full { display:block; width:100%; max-height:calc(92vh - 150px); max-height:calc(92dvh - 150px); object-fit:contain; }
#championship-caption { margin:14px 0 0; font-size:.9rem; color:#c4d1de; }
:root { --bg-main:#0d141c; --surface:#141f2a; --border:#2b3947; --val-light:#f1eee8; --val-gray:#acb8c5; --val-red:var(--red); --val-cyan:var(--teal); --page-gutter:max(5%, calc((100vw - 1240px)/2)); }
html { scroll-padding-top:24px; }
body { background:var(--bg-main); }
::selection { background:var(--red); color:#0d141c; }
.grid-bg { transform:none; background-size:80px 80px; opacity:.3; }
.skip-link { position:fixed; top:8px; left:16px; z-index:20000; transform:translateY(-160%); background:#f1eee8; color:#0d141c; padding:12px 20px; }
.skip-link:focus { transform:none; }
.glitch-nav { padding:18px var(--page-gutter); gap:24px; background:#0d141c; border-bottom:1px solid var(--border); }
.logo { color:var(--val-light); text-decoration:none; font-size:1.9rem; line-height:1; letter-spacing:.04em; }
.logo-caption { display:block; margin-top:7px; font:12px var(--font-mono); letter-spacing:.19em; color:#a8b5c2; }
.nav-links { gap:20px; }
.nav-links a { font-size:.75rem; letter-spacing:.08em; }
.nav-links .cta-button { border:1px solid var(--red); padding:0 18px; color:#fff; background:#ff465515; }
#particle-canvas { flex:1 1 200px; min-width:180px; max-width:280px; width:240px; height:60px; }
.hero { padding:5rem var(--page-gutter); min-height:690px; background:radial-gradient(ellipse at 85% 60%, #28303c 0%, #151b25 35%, #0d141c 70%); }
.hero::before { content:""; position:absolute; width:32%; height:75%; right:9%; top:12%; border:1px solid #ffffff12; transform:skew(-12deg); pointer-events:none; z-index:0; }
.hero-content { max-width:650px; flex-basis:56%; }
.hero-title { font-size:clamp(4rem,6.5vw,6.6rem); letter-spacing:.005em; line-height:.96; }
.hero-title span { color:var(--red); }
.hero-eyebrow { font-size:.75rem; color:#b8c5d1; border-left:3px solid var(--red); padding-left:12px; }
.hero-desc { font-size:1.05rem; max-width:40ch; }
.hero-char-wrap { left:48%; right:1%; }
.hero-art-label { bottom:24px; right:var(--page-gutter); }
.btn-primary { background:var(--red); border:1px solid var(--red); border-radius:3px; clip-path:none; font-weight:700; }
.btn-primary:hover { background:var(--red-light); color:#101820 !important; box-shadow:0 8px 28px #ff465522; }
main > section { padding:80px var(--page-gutter); border-top:1px solid var(--border); position:relative; }
main > section:nth-of-type(even) { background:#111a24; }
.chapter-label { display:flex; align-items:center; gap:14px; width:100%; color:#a8b7c5; font:12px var(--font-mono); letter-spacing:.15em; margin-bottom:28px; }
.chapter-label span { color:var(--red-light); }
.chapter-label::after { content:""; height:1px; width:70px; background:#3b4854; }
.section-title, .side-title { width:100%; font-size:clamp(2.5rem,4.3vw,4rem); line-height:1; letter-spacing:.02em; text-align:left; color:var(--val-light); margin-bottom:32px; }
.section-title::after, .side-title::after { display:none; }
.about-container { max-width:none; width:100%; }
.about-flex-layout { display:grid; grid-template-columns:minmax(280px,.85fr) minmax(0,1.15fr); align-items:center; gap:70px; }
.about-card-wrapper { width:100%; max-width:420px; margin:0; }
.about-card { border-radius:8px; padding:28px; background:linear-gradient(145deg,#1c2936,#111a24); box-shadow:0 24px 60px #0003; }
.about-text-content { min-width:0; }
.bio-paragraphs p { font-size:1rem; line-height:1.85; }
.about-glow { display:none; }
.card-top { font-size:.75rem; letter-spacing:0; }
.avatar-container { width:150px; height:150px; }
.btn-card { min-height:44px; border-radius:4px; font-size:.8rem; }
.card-footer-glow { background:transparent; color:#acb8c5; border-top:1px solid var(--border); font-size:.75rem; }
.experience-grid { gap:18px; }
.experience-card { border-radius:5px; border-top:2px solid var(--red); background:linear-gradient(160deg,#1a2835,#121c27); box-shadow:none; padding:28px; }
.experience-card h3 { font-size:2.3rem; }
.experience-role { font-size:.75rem; }
.experience-result { font-family:var(--font-mono); font-size:.75rem; }
.scope-grid { gap:32px; }
.scope-grid article { border-left:1px solid #40505f; padding-left:20px; }
.scope-grid h4 { font-size:1.1rem; }
.scope-grid p { font-size:.95rem; }
.service-grid { gap:18px; }
.service-card { border-radius:5px; background:#141f2a; padding:30px; box-shadow:none; }
.service-card.highlight { background:linear-gradient(155deg,#2c222d,#18232e); border-color:#b85b66; }
.card-header { flex-direction:column; align-items:flex-start; gap:25px; }
.card-num { font:12px var(--font-mono); color:var(--red-light); }
.card-header h3 { font:500 2.5rem/1 var(--font-display); letter-spacing:.02em; }
.service-card p { font-size:1rem; }
.service-card .card-footer { color:#c8d4df; font:12px var(--font-mono); padding-top:28px; }
.session-link { display:flex; align-items:center; justify-content:space-between; min-height:48px; margin-top:18px; padding-top:14px; border-top:1px solid #3c4956; color:#fff; text-decoration:none; font-size:.9rem; }
.session-link span { color:var(--red-light); }
.feedback-grid .testimonial-card { display:flex; flex-direction:column; padding:26px; border-radius:5px; box-shadow:none; background:#141f2a; }
.feedback-grid .testimonial-card p { font-size:.95rem; line-height:1.8; }
.feedback-grid .user-info { margin-top:auto; padding-top:24px; }
.user-avatar { background:#233241; color:#f1eee8; border:1px solid #3c4b59; }
.more-feedback summary { font-size:.9rem; }
.championship-display { width:100%; max-width:none; }
.champ-card { background:linear-gradient(120deg,#202735,#151e28); border-radius:5px; padding:32px; }
.champ-header { justify-content:space-between; align-items:center; }
.champ-header h3 { font:500 2.7rem var(--font-display); }
.champ-tag { color:var(--red-pale); border-color:#82525c; background:#ff46550a; }
.champ-stats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:24px 0; gap:24px; }
.champ-stats .stat { min-width:0; text-align:left; }
.has-preview { display:block; }
.has-preview .hover-preview, .has-preview:hover .hover-preview { position:static; display:block; width:100%; max-width:none; height:230px; object-fit:contain; background:#0b1118; margin-top:12px; border:1px solid #384655; box-shadow:none; opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.champ-desc { font-size:.95rem; max-width:75ch; }
.squad-container { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); height:auto; gap:16px; margin-top:0; }
.agent-card, .agent-card.expanded { height:300px; width:100%; border-radius:5px; border:1px solid var(--border); filter:none; opacity:1; background:#151e28; }
.agent-card img, .agent-card.expanded img { object-fit:contain; transform:none; background:transparent; }
.agent-card .agent-info { transform:none; opacity:1; padding:40px 18px 16px; align-items:flex-start; text-align:left; background:linear-gradient(transparent,#0b1118ed); }
.agent-info h3 { font:500 1.75rem var(--font-display); letter-spacing:.04em; }
.agent-tag { font-size:.75rem !important; padding:2px 7px !important; letter-spacing:.1em !important; background:#21303e !important; color:#c5d2df !important; }
.squad-disclaimer { margin-top:24px; max-width:75ch; }
.gallery-wrapper { width:min(100%,700px); height:auto; aspect-ratio:1; max-width:700px; max-height:none; margin:0 auto; border-radius:5px; box-shadow:0 20px 55px #0004; border:1px solid var(--border); }
.gallery-main { position:absolute; inset:0; }
.gallery-nav-btn { border-radius:4px; width:48px; height:48px; }
.specs-section { background:radial-gradient(ellipse at center,#201a26,#0d141c 70%); }
#specs-orbit-container { height:560px; }
.book-section { background:linear-gradient(120deg,#27212c,#121c27 65%) !important; }
.book-inner { gap:48px; grid-template-columns:minmax(0,1.1fr) 1px minmax(0,.9fr); }
.book-heading { font:500 clamp(2.3rem,3vw,3.2rem)/1.1 var(--font-display); }
.book-badge { background:#ff46551a; color:var(--red-pale); border:1px solid #77505b; border-radius:3px; letter-spacing:.08em; }
.book-sub { font-size:1rem; }
.contact-details { background:#101a24; border-radius:5px; }
.step-item { padding:20px 0; border-bottom:1px solid var(--border); }
.step-num { color:var(--red-light); }
.step-body p { font-size:.95rem; }
.cyber-footer { background:#0b1118; padding:24px var(--page-gutter) 90px; }

.footer-contact { display:flex; justify-content:space-between; gap:24px; align-items:center; margin:0; padding:0; }
.social-links { display:flex; gap:24px; }
.social-btn, .btn-discord { font-size:.75rem; text-decoration:none; color:#c1ceda; }
@media (max-width:1100px) {
  #particle-canvas { display:none; }
  .about-flex-layout { gap:36px; }
  .experience-grid, .feedback-grid { grid-template-columns:1fr; }
  .book-inner { grid-template-columns:1fr; }
  .book-divider { display:none; }
}
@media (max-width:768px) {
  .glitch-nav { padding:18px 5% !important; }
  .logo { font-size:1.9rem !important; text-align:center; }
  .nav-links { gap:4px 16px; }
  .nav-links a { font-size:.75rem; }
  .hero { min-height:auto; padding:48px 5% !important; }
  .hero::before { display:none; }
  .hero-title { font-size:clamp(3.4rem,13vw,5.5rem) !important; }
  main > section { padding:48px 5%; align-items:stretch; }
  .chapter-label { font-size:12px; letter-spacing:.1em; margin-bottom:22px; }
  .section-title, .side-title { text-align:left; font-size:clamp(2.4rem,9vw,3.4rem); }
  .about-flex-layout { grid-template-columns:1fr; text-align:left; }
  .about-card-wrapper { max-width:none; }
  .scope-grid, .service-grid { grid-template-columns:1fr; }
  .experience-card, .service-card, .champ-card { padding:24px; }
  .squad-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
  .agent-card, .agent-card.expanded { height:240px; }
  .agent-card .agent-info { padding:30px 10px 10px; }
  .champ-stats { grid-template-columns:1fr; }
  .has-preview .hover-preview, .has-preview:hover .hover-preview { height:auto; max-height:300px; }
  .gallery-wrapper { margin:0; width:100%; }
  .book-inner { gap:24px; }
  .equipment-mobile-list li { border-radius:5px; }
  .cyber-footer { padding-bottom:calc(90px + env(safe-area-inset-bottom,0px)); }
  .footer-contact { align-items:flex-start; flex-direction:column; }
}

/* Visual pass 1: cinematic opening, isolated from the content sections. */
.glitch-nav { background:#0a1017; border-bottom:1px solid #ffffff18; position:relative; }
.glitch-nav::after { content:""; position:absolute; bottom:-1px; left:var(--page-gutter); width:66px; height:3px; background:var(--red); }
.glitch-nav .logo { border-left:3px solid var(--red); padding-left:13px; }
.glitch-nav .nav-links .cta-button { background:var(--red); color:#0b1017; font-weight:800; clip-path:polygon(0 0,100% 0,100% 75%,90% 100%,0 100%); }
.cinematic-hero { min-height:760px; padding:72px var(--page-gutter) 116px; background:radial-gradient(ellipse at 79% 43%,#273d4b 0,transparent 44%),#090f16; }
.cinematic-hero::before { display:block; inset:0; width:auto; height:auto; border:0; transform:none; background:linear-gradient(90deg,#090f16 2%,#090f16ef 30%,transparent 65%),repeating-linear-gradient(0deg,transparent 0 79px,#ffffff06 80px),repeating-linear-gradient(90deg,transparent 0 79px,#ffffff06 80px); z-index:1; }
.cinematic-hero::after { content:""; position:absolute; inset:auto 0 0; height:150px; background:linear-gradient(transparent,#090f16); z-index:2; pointer-events:none; }
.hero-stage { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.hero-stage::before { content:""; position:absolute; width:36%; height:115%; right:8%; top:-10%; transform:skew(-17deg); background:linear-gradient(160deg,var(--red) 0%,#b7263c 47%,#451522 100%); box-shadow:22px 0 0 #ff46550f,24px 0 0 #ff465550; }
.hero-stage::after { content:""; position:absolute; width:30%; height:55%; right:11%; top:14%; border:1px solid #ffd2d850; border-left:0; transform:skew(-17deg); }
.stage-word { position:absolute; top:4%; right:1%; font:700 clamp(110px,18vw,290px)/1 var(--font-display); letter-spacing:.02em; color:transparent; -webkit-text-stroke:1px #ffd2d857; transform:rotate(-90deg) translateX(-100%); transform-origin:top right; }
.stage-coordinate { position:absolute; right:5%; top:32px; font:12px/1.8 var(--font-mono); letter-spacing:.16em; color:#f4c4ca; text-align:right; }
.cinematic-hero .hero-content { flex:0 1 57%; max-width:700px; }
.cinematic-hero .hero-eyebrow { color:#b2c7d1; font-size:12px; letter-spacing:.16em; border:0; padding:0; margin-bottom:27px; }
.cinematic-hero .hero-eyebrow::before { content:""; display:inline-block; width:7px; height:7px; background:var(--teal); margin-right:10px; box-shadow:0 0 15px #9de2d560; }
.hero-identity { color:var(--red-light); font:600 20px/1 var(--font-display); letter-spacing:.23em; margin-bottom:14px; }
.cinematic-hero .hero-title { font-size:clamp(76px,8vw,120px); line-height:.86; letter-spacing:-.012em; color:#f4f0e8; margin-bottom:26px; }
.cinematic-hero .hero-title span { color:var(--red); margin-top:9px; text-shadow:0 4px 40px #ff465515; }
.cinematic-hero .hero-desc { max-width:38ch; color:#bac7d2; font-size:1rem; line-height:1.8; }
.cinematic-hero .hero-actions .btn-large { background:var(--red); color:#0a1017; border-radius:0; padding:18px 24px; clip-path:polygon(0 0,100% 0,100% 73%,94% 100%,0 100%); }
.cinematic-hero .hero-secondary { font-size:13px; }
.cinematic-hero .hero-proof { max-width:420px; gap:10px; flex-direction:column; font-size:12px; }
.cinematic-hero .hero-proof span::before { background:var(--teal); }
.cinematic-hero .hero-char-wrap { display:flex; inset:20px -10% 0 34%; opacity:1; overflow:visible; z-index:2; }
.cinematic-hero .hero-char-img { width:100%; height:100%; max-height:none; object-fit:contain; object-position:center bottom; mix-blend-mode:normal; filter:drop-shadow(-18px 12px 26px #0009); }
.cinematic-hero .hero-char-glow { display:none; }
.cinematic-hero .hero-art-label { display:flex; flex-direction:column; gap:10px; bottom:36px; right:var(--page-gutter); z-index:4; color:#d9e3e9; font-size:12px; letter-spacing:.15em; border-right:2px solid var(--red); padding-right:16px; text-align:right; }
.cinematic-hero .hero-art-label span { margin:0; color:var(--red-light); }
.hero-scroll { position:absolute; left:var(--page-gutter); bottom:32px; z-index:4; display:flex; align-items:center; gap:14px; min-height:44px; text-decoration:none; color:#c6d0d8; font:12px var(--font-mono); letter-spacing:.14em; }
.hero-scroll span { display:grid; place-items:center; width:34px; height:40px; border:1px solid #52616c; color:var(--red-light); font-size:20px; }
.hero-scroll:hover { color:white; }
@media (prefers-reduced-motion:no-preference) {
  .cinematic-hero .hero-char-img { animation:portrait-arrival 1.1s cubic-bezier(.2,.7,.2,1) both; }
  .hero-stage::after { animation:stage-breathe 7s ease-in-out infinite alternate; }
  .cinematic-hero .hero-actions a { transition:background-color .2s,translate .2s; }
  .cinematic-hero .hero-actions a:hover { translate:0 -3px; }
}
@keyframes portrait-arrival { from { opacity:0; transform:translate(25px,20px); } to { opacity:1; transform:translate(0,0); } }
@keyframes stage-breathe { from { opacity:.25; } to { opacity:.85; } }
@media (min-width:769px) and (max-width:1100px) {
  .cinematic-hero .hero-title { font-size:clamp(68px,8.5vw,94px); }
  .cinematic-hero .hero-char-wrap { left:38%; right:-19%; }
  .cinematic-hero .hero-content { flex-basis:65%; }
}
@media (max-width:768px) {
  .glitch-nav { align-items:stretch !important; gap:10px !important; }
  .glitch-nav .logo { text-align:left; align-self:flex-start; }
  .glitch-nav .nav-links { justify-content:space-between; gap:4px 10px; width:100%; }
  .glitch-nav .nav-links a { font-size:12px; }
  .glitch-nav .nav-links .cta-button { padding:0 12px; }
  .cinematic-hero { padding:40px 6% 88px !important; display:flex; flex-direction:column !important; align-items:stretch; }
  .cinematic-hero::before { background:linear-gradient(180deg,#090f16 0%,#090f16e8 43%,transparent 68%); }
  .hero-stage::before { width:65%; right:7%; top:46%; height:65%; }
  .hero-stage::after { top:60%; width:65%; right:10%; height:30%; }
  .stage-word { top:auto; bottom:8%; right:2%; transform:none; font-size:26vw; }
  .stage-coordinate { display:none; }
  .cinematic-hero .hero-content { flex:auto; width:100%; max-width:none; }
  .cinematic-hero .hero-eyebrow { font-size:12px; margin-bottom:22px; }
  .cinematic-hero .hero-title { font-size:clamp(62px,15.5vw,112px) !important; line-height:.88 !important; }
  .cinematic-hero .hero-desc { max-width:42ch; font-size:15px; }
  .cinematic-hero .hero-actions { flex-direction:row; align-items:center; gap:12px 20px; }
  .cinematic-hero .hero-actions .btn-large { width:auto; font-size:12px; padding:16px 20px; }
  .cinematic-hero .hero-proof { font-size:12px; }
  .cinematic-hero .hero-char-wrap { position:relative; inset:auto; width:calc(100% + 12vw); margin:0 -6vw -34px; height:350px; height:clamp(280px,77vw,460px); flex:none; }
  .cinematic-hero .hero-char-img { width:100%; height:100%; }
  .cinematic-hero .hero-art-label { bottom:28px; right:6%; font-size:12px; max-width:45%; line-height:1.6; }
  .hero-scroll { left:6%; bottom:24px; font-size:12px; max-width:45%; gap:8px; }
}

/* Visual pass 2: competitive team dossiers. Monograms are decorative typography, not team logos. */
main > .competitive-showcase { background:radial-gradient(ellipse at 100% 0,#25364166,transparent 55%),#0d141c; overflow:hidden; }
.competitive-showcase .experience-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; margin-bottom:24px; }
.competitive-showcase .experience-heading .section-title { margin:0; font-size:clamp(40px,5vw,70px); line-height:1; }
.experience-heading .section-title span { color:var(--red-light); }
.experience-heading-note { font:12px/1.9 var(--font-mono); letter-spacing:.1em; color:#a7bdca; padding-left:18px; border-left:2px solid var(--red); flex-shrink:0; margin-bottom:7px; }
.competitive-showcase .experience-intro { margin:0 0 38px; max-width:60ch; font-size:16px; }
.competitive-showcase .experience-grid { gap:22px; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:stretch; }
.competitive-showcase .experience-card { --team-accent:#e5bcff; --team-tint:#563764; padding:0 26px 24px; border:1px solid #35414e; border-top:0; border-radius:0; background:linear-gradient(155deg,#1c2733,#101923 75%); position:relative; isolation:isolate; box-shadow:0 18px 40px #0002; }
.competitive-showcase .team-dominari { --team-accent:var(--red-light); --team-tint:#702a3b; }
.competitive-showcase .team-stellar { --team-accent:var(--teal); --team-tint:#235458; }
.team-banner { position:relative; isolation:isolate; overflow:hidden; height:160px; margin:0 -26px 26px; border-top:3px solid var(--team-accent); border-bottom:1px solid #ffffff18; background:linear-gradient(130deg,var(--team-tint),#131d28 85%); }
.team-banner::before { content:""; position:absolute; inset:0; z-index:-1; background:repeating-linear-gradient(135deg,transparent 0 24px,#ffffff09 25px,transparent 26px); }
.team-banner::after { content:""; position:absolute; top:-30%; right:22%; width:35%; height:160%; border:1px solid #ffffff25; transform:skew(-22deg); background:#ffffff04; }
.team-monogram { position:absolute; left:22px; top:12px; font:700 112px/1 var(--font-display); letter-spacing:-.03em; color:var(--team-accent); text-shadow:5px 5px 0 #0003; }
.team-series { position:absolute; bottom:15px; left:26px; font:12px/1.5 var(--font-mono); letter-spacing:.12em; color:#d3dce6; z-index:2; }
.team-crosshair { position:absolute; width:24px; height:24px; right:23px; top:24px; border:1px solid #ffffff40; }
.team-crosshair::before,.team-crosshair::after { content:""; position:absolute; background:var(--team-accent); }
.team-crosshair::before { width:34px; height:1px; left:-6px; top:11px; }
.team-crosshair::after { width:1px; height:34px; left:11px; top:-6px; }
.competitive-showcase .experience-role { color:var(--team-accent); font-size:12px; letter-spacing:.2em; margin-bottom:12px; }
.competitive-showcase .experience-card h3 { font-size:clamp(28px,2.7vw,39px); line-height:1; min-height:2em; margin-bottom:12px; }
.competitive-showcase .experience-dates { font:12px/1.7 var(--font-mono); color:#c2ced9; margin-bottom:20px; padding-left:12px; border-left:2px solid var(--team-accent); }
.competitive-showcase .experience-event { font-size:14px; line-height:1.7; min-height:3.4em; max-width:27ch; }
.competitive-showcase .experience-result { display:grid; grid-template-columns:auto 1fr; gap:0 12px; align-items:end; border-top:1px solid #ffffff20; padding-top:20px; margin-bottom:12px; }
.competitive-showcase .experience-result .result-label { grid-column:1/-1; color:#b8c5d1; font:12px var(--font-mono); letter-spacing:.15em; margin-bottom:10px; }
.competitive-showcase .experience-result strong { font:600 64px/.95 var(--font-display); color:var(--team-accent); }
.competitive-showcase .experience-result small { font:400 26px/1 var(--font-display); vertical-align:top; margin-left:3px; }
.competitive-showcase .experience-result .result-unit { font:12px var(--font-mono); letter-spacing:.15em; padding-bottom:7px; color:#b8c5d1; }
.competitive-showcase .experience-card a { color:var(--team-accent); font-size:12px; border-top:1px solid #ffffff12; padding-top:10px; margin-top:auto; }
.competitive-showcase .experience-card:focus-within { border-color:var(--team-accent); }
.competitive-showcase .profile-history-link { margin-top:28px; padding:12px 0; color:#d2e7ee; font-size:13px; }
.competitive-showcase .coaching-scope { margin-top:36px; padding-top:32px; }
.competitive-showcase .scope-grid { gap:24px; }
.competitive-showcase .scope-grid article { padding:0 0 0 18px; border-left:2px solid #ff465566; }
.competitive-showcase .scope-number { font:500 30px/1 var(--font-display); color:var(--red-light); }
.competitive-showcase .scope-grid h4 { margin-top:12px; }
.competitive-showcase .scope-grid p { font-size:14px; }
@media (hover:hover) {
  .competitive-showcase .experience-card:hover { border-color:var(--team-accent); box-shadow:0 18px 45px #0005; }
  .competitive-showcase .experience-card:hover .team-monogram { translate:6px 0; }
}
@media (prefers-reduced-motion:no-preference) {
  .team-monogram { transition:translate .3s ease; }
}
@media (max-width:1000px) {
  .competitive-showcase .experience-grid { gap:14px; }
  .competitive-showcase .experience-card { padding-left:18px; padding-right:18px; }
  .team-banner { margin-left:-18px; margin-right:-18px; }
  .competitive-showcase .experience-heading { align-items:flex-start; }
  .experience-heading-note { max-width:180px; }
}
@media (max-width:768px) {
  .competitive-showcase .experience-heading { flex-direction:column; gap:18px; }
  .competitive-showcase .experience-heading .section-title { font-size:clamp(36px,9vw,62px); }
  .experience-heading-note { max-width:none; font-size:12px; }
  .competitive-showcase .experience-grid { grid-template-columns:1fr; gap:24px; }
  .team-banner { height:140px; }
  .team-monogram { font-size:96px; }
  .competitive-showcase .experience-card h3 { min-height:0; font-size:36px; }
  .competitive-showcase .experience-event { min-height:0; max-width:none; }
  .competitive-showcase .experience-result { margin-top:12px; }
  .competitive-showcase .scope-grid { grid-template-columns:1fr; }
}

/* Visual pass 3: illustrative coaching workstations. */
.coaching-lab > .section-title { font-size:clamp(38px,5vw,68px); line-height:1; }
.coaching-lab > .section-title span { color:var(--teal); }
.coaching-lab .services-intro { margin-top:0; }
.coaching-lab .coaching-services { gap:28px; align-items:stretch; }
.coaching-lab .service-card { --service-color:var(--red-pale); display:flex; flex-direction:column; padding:0 30px 26px; overflow:hidden; border-radius:0; border:1px solid #354352; background:linear-gradient(145deg,#1c2935,#101923); }
.coaching-lab .service-aim { --service-color:var(--teal); }
.coaching-lab .service-strategy { --service-color:#b2a6f5; }
.coaching-lab .service-prep { --service-color:var(--teal); }
.service-art { height:190px; position:relative; flex:none; overflow:hidden; margin:0 -30px 28px; color:var(--service-color); border-bottom:1px solid #ffffff20; background:radial-gradient(ellipse at 65% 50%,#30455870,transparent 65%),repeating-linear-gradient(0deg,transparent 0 29px,#ffffff06 30px),repeating-linear-gradient(90deg,transparent 0 29px,#ffffff06 30px),#0b141e; }
.art-label { position:absolute; top:15px; left:22px; font:12px var(--font-mono); letter-spacing:.16em; }
.service-art::after { content:"+"; position:absolute; right:18px; top:12px; color:#6f8596; font:18px var(--font-mono); }
.review-frame { position:absolute; left:15%; right:15%; top:45px; height:100px; border:1px solid #7993a35c; background:#101f2a; }
.review-cover { position:absolute; left:18%; top:0; width:20%; height:60%; background:#344451; border-bottom:2px solid #8093a0; }
.review-player { position:absolute; width:12px; height:12px; border-radius:50%; background:var(--service-color); top:65%; left:23%; box-shadow:0 0 0 7px #ffa5ad16; }
.review-sight { position:absolute; left:28%; top:30%; width:45%; height:40%; border-right:1px dashed var(--service-color); border-bottom:1px dashed var(--service-color); transform:skewY(-12deg); }
.review-frame span { position:absolute; right:8px; top:8px; font:7px var(--font-mono); }
.review-track { position:absolute; left:15%; right:15%; bottom:22px; height:4px; background:#354451; display:flex; justify-content:space-around; }
.review-track i { width:3px; height:8px; margin-top:-2px; background:#8298a7; }
.review-track b { position:absolute; width:9px; height:9px; top:-3px; left:38%; background:var(--service-color); transform:rotate(45deg); }
.aim-ring { position:absolute; width:100px; height:100px; border:1px solid #9de2d566; border-radius:50%; left:calc(50% - 50px); top:45px; box-shadow:0 0 0 15px #9de2d506,0 0 0 30px #9de2d504; }
.aim-ring::before,.aim-ring::after { content:""; position:absolute; background:var(--service-color); }
.aim-ring::before { width:140px; height:1px; top:49px; left:-21px; }
.aim-ring::after { height:120px; width:1px; left:49px; top:-11px; }
.aim-ring i { position:absolute; inset:30px; border:1px solid var(--service-color); border-radius:50%; }
.aim-ring b { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--service-color); left:46px; top:46px; box-shadow:0 0 18px var(--teal); }
.aim-direction,.strategy-caption,.prep-caption { position:absolute; left:0; right:0; bottom:15px; text-align:center; font:12px var(--font-mono); letter-spacing:.1em; }
.strategy-site { position:absolute; top:46px; right:20%; width:85px; height:80px; border:1px solid var(--service-color); background:#b2a6f512; display:grid; place-items:center; font:12px var(--font-mono); }
.strategy-wall { position:absolute; left:19%; top:43px; height:70px; width:65px; border-bottom:9px solid #36434f; border-right:9px solid #36434f; }
.strategy-route { position:absolute; left:28%; top:95px; width:40%; height:48px; border-bottom:2px dashed var(--service-color); border-right:2px dashed var(--service-color); border-radius:0 0 12px; }
.strategy-dot { position:absolute; width:9px; height:9px; background:var(--service-color); border-radius:50%; box-shadow:0 0 0 5px #b2a6f516; }
.dot-one { left:24%; top:138px; }.dot-two { left:38%; top:138px; }.dot-three { right:31%; top:91px; }
.prep-board { position:absolute; left:12%; right:12%; top:58px; display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.prep-board span { font:12px var(--font-mono); color:#bbd2d5; }
.prep-board i { display:block; margin-top:13px; height:62px; border-top:2px solid var(--service-color); background:repeating-linear-gradient(0deg,#9de2d510 0 7px,transparent 7px 16px); }
.prep-board span:nth-child(2) i { height:46px; }.prep-board span:nth-child(3) i { height:30px; }
.coaching-lab .card-header { gap:15px; margin-bottom:18px; }
.coaching-lab .card-num { color:var(--service-color); font-size:12px; letter-spacing:.08em; }
.coaching-lab .card-header h3 { font-size:clamp(32px,3.5vw,46px); margin:0; }
.coaching-lab .service-card > p { font-size:15px; line-height:1.8; color:#c4cfda; }
.coaching-lab .session-topics { font-size:14px; line-height:1.8; margin:20px 0 24px; }
.coaching-lab .session-topics li::marker { color:var(--service-color); }
.coaching-lab .session-prep { margin-top:auto; border-top:1px solid #ffffff20; padding-top:0; }
.coaching-lab .session-prep summary { display:flex; justify-content:space-between; align-items:center; min-height:48px; cursor:pointer; color:var(--service-color); font:12px var(--font-mono); list-style:none; }
.coaching-lab .session-prep summary::-webkit-details-marker { display:none; }
.coaching-lab .session-prep summary span { font-size:22px; }
.coaching-lab .session-prep[open] summary span { transform:rotate(45deg); }
.coaching-lab .session-prep p { font-size:14px; padding:0 0 16px; margin:0; }
.coaching-lab .card-footer { padding-top:12px; border:0; font-size:12px; color:#b7c8d4; }
.coaching-lab .session-link { padding:14px 18px; border:1px solid #526370; color:#ecf0f3; margin-top:16px; background:#ffffff04; }
.coaching-lab .session-link span { color:var(--service-color); }
.coaching-lab .session-link:hover,.coaching-lab .session-link:focus-visible { background:#ffffff0c; border-color:var(--service-color); }
.coaching-lab summary:focus-visible { outline:2px solid var(--service-color); outline-offset:3px; }
.coaching-lab .session-guide { border-top:0; padding:30px; background:#0c151e; border-left:3px solid var(--teal); }
.coaching-lab .session-guide ol { gap:32px; }
.coaching-lab .session-guide li::marker { color:var(--teal); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .coaching-lab .service-card:hover .review-track b { animation:review-cue 1.8s ease-in-out 2 alternate; }
  .coaching-lab .service-card:hover .aim-ring i { animation:aim-focus 1.2s ease-in-out 2 alternate; }
  .coaching-lab .service-card:hover .strategy-dot { animation:tactic-cue 1.2s ease-in-out 2 alternate; }
  .coaching-lab .service-card:hover .prep-board i { animation:prep-cue .6s ease-out both; }
}
@keyframes review-cue { to { left:65%; } }
@keyframes aim-focus { to { scale:.75; } }
@keyframes tactic-cue { to { box-shadow:0 0 0 10px #b2a6f525; } }
@keyframes prep-cue { from { opacity:.35; translate:0 5px; } to { opacity:1; translate:0 0; } }
@media (max-width:768px) {
  .coaching-lab .coaching-services { grid-template-columns:1fr; gap:24px; }
  .coaching-lab .service-card { padding:0 22px 22px; }
  .service-art { margin-left:-22px; margin-right:-22px; height:180px; }
  .coaching-lab .session-guide { padding:24px 20px; }
  .coaching-lab .session-guide ol { grid-template-columns:1fr; gap:22px; }
}

/* Visual pass 4: individual feedback, player history and profile gallery. */
.section-context { color:#b6c8d5; font:15px/1.8 var(--font-body); max-width:66ch; margin:0 0 32px; }
.feedback-evidence > .section-title,.championship-showcase > .section-title,.player-showcase > .section-title { font-size:clamp(38px,5vw,68px); line-height:1; margin-bottom:20px; }
.feedback-evidence > .section-title span,.player-showcase > .section-title span { color:var(--teal); }
.feedback-evidence .testimonial-card { position:relative; border:1px solid #354957; border-top:2px solid var(--teal); border-radius:0; background:linear-gradient(145deg,#1c2c38,#111c27); padding:30px; }
.feedback-evidence .testimonial-card::before { content:"“"; display:block; color:var(--teal); font:64px/.8 Georgia,serif; margin-bottom:12px; }
.feedback-evidence .testimonial-card p { font-size:15px; line-height:1.85; }
.feedback-evidence .user-avatar { border-radius:50%; background:#9de2d513; border:1px solid #9de2d54d; color:var(--teal-light); }
.feedback-evidence .user-name { font:500 23px/1.3 var(--font-display); }
.feedback-evidence .user-info { margin-top:auto; padding-top:22px; }
.feedback-evidence .more-feedback summary { display:inline-flex; align-items:center; min-height:48px; padding:12px 18px; border:1px solid #52746f; background:#9de2d509; color:var(--teal-light); cursor:pointer; }
.feedback-evidence .more-feedback summary::before { content:"+"; font-size:22px; margin-right:12px; }
.feedback-evidence .more-feedback[open] summary::before { content:"−"; }
.feedback-evidence .more-feedback summary:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
.championship-showcase > .section-title span { color:#e9ca8d; }
.championship-showcase .championship-display { width:100%; }
.championship-showcase .champ-card { width:100%; max-width:none; padding:36px; border:1px solid #8c795a; border-top:3px solid #e9ca8d; border-radius:0; background:radial-gradient(ellipse at 100% 0,#6a513230,transparent 60%),#121d27; }
.championship-showcase .champ-header { display:flex; align-items:center; justify-content:space-between; flex-direction:row-reverse; gap:20px; }
.championship-showcase .champ-tag { position:static; background:#e9ca8d10; color:#e9ca8d; font:12px var(--font-mono); border:1px solid #e9ca8d60; padding:12px 16px; }
.championship-showcase .champ-header h3 { margin:0; font-size:42px; }
.championship-showcase .champ-stats { border-top:1px solid #e9ca8d30; padding-top:26px; gap:28px; }
.championship-showcase .champ-stats .label { font:12px var(--font-mono); color:#c3cbd1; letter-spacing:.15em; }
.championship-showcase .championship-preview { color:#e9ca8d; font:500 34px/1.2 var(--font-display); margin-top:10px; }
.championship-showcase .championship-preview .hover-preview { width:100%; height:auto; aspect-ratio:16/9; max-height:none; object-fit:contain; border-radius:0; border:1px solid #49525a; background:#080f16; }
.championship-showcase .preview-hint { font:12px var(--font-mono); margin:14px 0 0; color:#e9ca8d; }
.championship-preview:focus-visible { outline:2px solid #e9ca8d; outline-offset:6px; }
.championship-showcase .champ-desc { max-width:none; border-left:2px solid #e9ca8d; color:#d1d7dd; }
.player-showcase .squad-container { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.player-showcase .agent-card,.player-showcase .agent-card.expanded { height:auto; min-height:0; display:flex; flex-direction:column; border-radius:0; background:#0b141d; border:1px solid #374957; overflow:hidden; }
.player-showcase .agent-card img,.player-showcase .agent-card.expanded img { position:relative; display:block; width:100%; height:auto; aspect-ratio:1.25; object-fit:contain; padding:12px; transform:none; filter:none; opacity:1; background:radial-gradient(ellipse at 50% 0,#28434b,#0b141d 80%); }
.player-showcase .agent-card .agent-info { position:relative; inset:auto; width:100%; padding:18px 20px; background:#15232e; border-top:1px solid #344752; gap:8px; }
.player-showcase .agent-info h3 { font-size:30px; line-height:1; margin:0; }
.player-showcase .agent-tag { background:transparent !important; color:var(--teal) !important; padding:0 !important; box-shadow:none; text-shadow:none; }
.player-showcase .agent-card::after { width:28px; height:28px; top:12px; right:12px; font-size:12px; border:1px solid #75908a; border-radius:0; pointer-events:none; }
.player-showcase .player-profile-trigger span { bottom:22px; right:16px; font:12px var(--font-mono); padding:8px; border-color:#647e88; background:#0c1720; color:#c9e9e5; }
.player-showcase .player-profile-trigger:hover { box-shadow:inset 0 0 0 2px var(--teal); }
.player-showcase .squad-disclaimer { text-align:left; max-width:80ch; line-height:1.8; font-size:12px; color:#b4c5d1; margin-top:28px; }
#player-viewer { border-radius:0; border-top:3px solid var(--teal); background:linear-gradient(145deg,#20303d,#0c141d); }
#player-viewer .player-viewer-label { color:var(--teal); }
#championship-viewer { border-radius:0; border-top:3px solid #e9ca8d; }
.gallery-showcase .gallery-wrapper { border-radius:0; border:1px solid #586e7c; box-shadow:16px 16px 0 #9de2d508,0 20px 65px #0005; margin-bottom:20px; }
.gallery-showcase .gallery-status { border-left:2px solid var(--teal); font:12px/1.6 var(--font-mono); padding:10px 14px; }
.gallery-showcase .gallery-nav-btn { border-radius:0; background:#101f2bf5; color:var(--teal-light); border:1px solid #7c9c9b; }
.gallery-showcase .gallery-nav-btn:focus-visible { outline:3px solid var(--teal); outline-offset:4px; }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .player-showcase .agent-card img { transition:filter .25s; }
  .player-showcase .agent-card:hover img { filter:brightness(1.12); }
  .championship-showcase .hover-preview { transition:border-color .2s,filter .2s; }
  .championship-showcase .championship-preview:hover .hover-preview { border-color:#e9ca8d; filter:brightness(1.08); }
}
@media (max-width:900px) {
  .player-showcase .squad-container { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
}
@media (max-width:768px) {
  .championship-showcase .champ-card { padding:24px 18px; }
  .championship-showcase .champ-header { flex-direction:column; align-items:flex-start; }
  .championship-showcase .champ-stats { grid-template-columns:1fr; gap:28px; }
  .feedback-evidence .testimonial-card { padding:24px; }
  .player-showcase .agent-card .agent-info { padding:16px 12px 48px; }
  .player-showcase .player-profile-trigger span { bottom:10px; left:12px; right:auto; font-size:12px; }
  .player-showcase .agent-info h3 { font-size:26px; }
  .gallery-showcase .gallery-wrapper { box-shadow:6px 6px 0 #9de2d508; }
}
@media (max-width:380px) {
  .player-showcase .squad-container { grid-template-columns:1fr; }
}

/* Visual pass 5: shared motion and scroll orientation. */
.page-progress { position:fixed; inset:0 0 auto; height:3px; z-index:100; background:linear-gradient(90deg,var(--red),var(--red-pale) 55%,var(--teal)); pointer-events:none; transform:scaleX(0); transform-origin:left center; }
.nav-links a:not(.cta-button) { position:relative; }
.nav-links a:not(.cta-button)::after { content:""; position:absolute; left:0; right:0; bottom:5px; height:2px; background:var(--red-light); transform:scaleX(0); transform-origin:left; }
.nav-links a:not(.cta-button):hover::after,.nav-links a:not(.cta-button):focus-visible::after,.nav-links a:not(.cta-button)[aria-current="location"]::after { transform:scaleX(1); }
.nav-links a[aria-current="location"] { box-shadow:none; }
.session-link span,.hero-secondary span { display:inline-block; }
@media (prefers-reduced-motion:no-preference) {
  .nav-links a::after { transition:transform .22s ease; }
  .session-link span,.hero-secondary span { transition:translate .22s ease; }
  .session-link:hover span,.session-link:focus-visible span,.hero-secondary:hover span { translate:3px -2px; }
  .picture-close,.player-viewer-controls button,.equipment-list-toggle { transition:background-color .18s,border-color .18s; }
  .more-feedback[open] > .feedback-grid { animation:feedback-unfold .32s ease-out; }
  .session-prep[open] > p { animation:feedback-unfold .22s ease-out; }
}
@keyframes feedback-unfold { from { opacity:.5; translate:0 6px; } to { opacity:1; translate:0 0; } }
/* Motion preferences also cover the original page's inherited animations. */
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Visual pass 6: narrow layouts, inherited-state fixes and final usability. */
.player-showcase .agent-card:hover:not(.expanded) { filter:none; opacity:1; }
.player-showcase .agent-card img { will-change:auto; }
.player-showcase .agent-card.expanded { box-shadow:none; }
a:focus-visible,button:focus-visible { outline:2px solid var(--teal); outline-offset:4px; }
.player-showcase .player-profile-trigger:focus-visible { outline-offset:-4px; }
.coaching-lab .service-card, .experience-card, .testimonial-card { min-width:0; }
.contact-email,.contact-row code { overflow-wrap:anywhere; }
.section-title,.experience-heading h2 { text-wrap:balance; }
.hero-actions a,.session-link,.profile-history-link { touch-action:manipulation; }
@media (max-width:768px) {
  .cinematic-hero .hero-eyebrow { font-size:12px; }
  .glitch-nav .nav-links { justify-content:flex-start; gap:4px 16px; }
  .glitch-nav .nav-links a { font-size:12px; min-height:44px; }
  .glitch-nav .nav-links .cta-button { margin-left:auto; }
  .hero-scroll { font-size:12px; }
  .cinematic-hero .hero-art-label { font-size:12px; }
  .player-showcase .player-profile-trigger span { font-size:12px; }
  .gallery-showcase .gallery-nav-btn.prev,.gallery-showcase .gallery-nav-btn.next,
  .gallery-showcase .gallery-nav-btn.prev:hover,.gallery-showcase .gallery-nav-btn.next:hover { transform:none; }
  .gallery-showcase .gallery-controls { padding:0 10px; }
  .gallery-showcase .gallery-status { max-width:calc(100% - 20px); font-size:12px; }
  .feedback-evidence .more-feedback summary { width:100%; text-align:left; font-size:13px; }
  .feedback-evidence .chapter-label { flex-wrap:wrap; line-height:1.7; }
  .feedback-evidence .chapter-label::after { width:36px; }
  .player-viewer-controls button { min-height:44px; }
}
@media (max-width:420px) {
  .glitch-nav .nav-links { gap:2px 12px; }
  .glitch-nav .nav-links a { font-size:12px; }
  .cinematic-hero .hero-actions { flex-direction:column; align-items:stretch; }
  .cinematic-hero .hero-actions .btn-large { width:100%; }
  .cinematic-hero .hero-title { font-size:clamp(48px,15vw,63px) !important; }
  .hero-scroll { max-width:43%; letter-spacing:.05em; }
  .cinematic-hero .hero-art-label { max-width:48%; letter-spacing:.06em; }
  .player-viewer-controls { flex-wrap:wrap; }
  .player-viewer-count { order:-1; width:100%; }
  .player-viewer-controls button { flex:1; }
}

/* Tactical previews: map boards with real playback and scrubbing. */
.coaching-lab .tactical-preview { height:auto; min-height:0; padding:0; background:#081219; color:var(--teal-strong); }
.tactical-preview::after { display:none; }
.tactical-top { min-height:44px; padding:12px 18px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid #38505b; background:#10212c; font:12px/1.5 var(--font-mono); letter-spacing:.08em; color:#c8f1f1; }
.demo-tag { font-size:12px; color:#9cb7c2; }
.tactical-stage { position:relative; background:radial-gradient(ellipse at 50% 50%,#17354155,transparent 70%); overflow:hidden; }
.tactical-stage svg { display:block; width:100%; height:auto; aspect-ratio:600/340; max-height:390px; }
.map-floor { fill:#0c2a3a; stroke:var(--teal-strong); stroke-width:1.5; stroke-linejoin:round; }
.map-room { fill:#144c54; stroke:var(--teal-strong); stroke-width:1; }
.map-walls { fill:none; stroke:var(--teal-strong); stroke-width:2; stroke-linecap:square; }
.map-cover { fill:#09202c; stroke:#7fb5c3; stroke-width:1; }
.map-labels { fill:#c4e4e8; font:7px var(--font-mono); text-anchor:middle; }
.map-routes { fill:none; stroke:#e5c685; stroke-width:1.6; stroke-dasharray:5 5; opacity:.65; }
.utility-zones { fill:#b2a6f54d; stroke:#c2b4ff; stroke-width:1; }
.recon-ring { fill:none; stroke:#e9ca8d; stroke-width:1.2; }
.agent-token circle { fill:#22566a; stroke:var(--teal-light); stroke-width:2; }
.agent-token.enemy circle { fill:#783e47; stroke:var(--red-pale); }
.agent-token text { fill:#fff; text-anchor:middle; font:700 9px var(--font-mono); }
.agent-token .token-role { fill:#e0edef; font:6px var(--font-mono); paint-order:stroke; stroke:#081219; stroke-width:2px; stroke-linejoin:round; }
.map-crosshair { fill:none; stroke:#f2e8c7; stroke-width:1.5; }
.map-caption { position:absolute; bottom:8px; left:14px; color:#72929f; font:7px var(--font-mono); letter-spacing:.06em; }
.tactical-phase { display:flex; align-items:center; gap:12px; padding:10px 18px; border-top:1px solid #2d4854; background:#10212b; font:12px/1.5 var(--font-mono); color:#e3ecef; }
.phase-index { color:var(--teal-strong); border:1px solid #42e1dc55; padding:3px 6px; }
.tactical-time { margin-left:auto; color:#8bb4c2; font-size:12px; }
.tactical-controls { display:flex; align-items:center; gap:14px; padding:8px 18px; }
.tactical-controls button { min-height:44px; min-width:64px; padding:8px 12px; background:#17303e; border:1px solid #527b89; color:#cbf5f2; cursor:pointer; font:12px var(--font-mono); }
.tactical-controls button:hover { background:#235064; }
.tactical-controls input { min-width:0; width:100%; height:44px; accent-color:var(--teal-strong); cursor:pointer; }
.tactical-controls input:focus-visible { outline:2px solid var(--teal); outline-offset:3px; }
.coaching-lab .service-card .tactical-note { margin:0; padding:0 18px 12px; font:12px/1.5 var(--font-mono); color:#9ab9c5; }
.tactical-stage::after { content:""; position:absolute; inset:-60% -20%; pointer-events:none; background:linear-gradient(110deg,transparent 43%,#b8efe509 49%,#b8efe515 50%,transparent 56%); transform:translateX(-70%); }
@media (prefers-reduced-motion:no-preference) {
  .tactical-stage::after { animation:tactical-shine 8s ease-in-out infinite; animation-play-state:paused; }
  .tactical-running .tactical-stage::after { animation-play-state:running; }
}
@keyframes tactical-shine { 0%,30% { transform:translateX(-70%); } 70%,100% { transform:translateX(70%); } }
@media (max-width:768px) {
  .tactical-top { padding:12px; font-size:12px; }
  .demo-tag { font-size:7px; }
  .tactical-controls { padding:6px 12px; gap:8px; }
  .tactical-controls button { min-width:58px; padding:8px; font-size:12px; }
  .tactical-phase { padding:10px 12px; font-size:12px; gap:8px; }
  .map-labels { font-size:8px; }
  .map-caption { font-size:6px; }
}

.real-map-preview .tactical-stage svg { aspect-ratio:360/340; height:390px; max-height:none; width:100%; }
.real-map-preview .map-base image { opacity:.88; }
.real-map-preview .map-labels text { fill:#fff; font-size:8px; paint-order:stroke; stroke:#081219; stroke-width:3px; stroke-linejoin:round; }
.real-map-preview .map-routes { stroke-width:1.5; }
.real-map-preview .agent-token .token-role { font-size:5px; }
.tactical-roster { display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:8px 12px; background:#0d1c26; border-top:1px solid #34515e; }
.tactical-roster > span { display:flex; align-items:center; gap:5px; padding:3px 6px 3px 3px; border:1px solid #427a7c; background:#17343c; font:12px var(--font-mono); color:#d6e9ec; }
.tactical-roster > .roster-enemy { border-color:#9b5e68; background:#3a252f; }
.tactical-roster img { width:26px; height:26px; object-fit:contain; }
@media(max-width:768px){ .real-map-preview .tactical-stage svg { height:340px; } .tactical-roster { gap:4px; } .tactical-roster > span { font-size:12px; } }

/* Shared shape system: soft panels, compact pills, tactical primary actions. */
:root { --radius-panel:18px; --radius-inner:11px; --radius-pill:999px; }
.about-card,
.competitive-showcase .experience-card,
.coaching-lab .service-card,
.feedback-evidence .testimonial-card,
.championship-showcase .champ-card,
.player-showcase .agent-card,
.player-showcase .agent-card.expanded,
.gallery-showcase .gallery-wrapper { border-radius:var(--radius-panel); }
.competitive-showcase .team-banner { border-radius:var(--radius-panel) var(--radius-panel) 0 0; }
.coaching-lab .service-art { border-radius:var(--radius-panel) var(--radius-panel) 0 0; }
.coaching-lab .session-guide { border-radius:var(--radius-inner); }
.contact-details,
.equipment-mobile-list li,
.specs-list-view .equipment-mobile-list li,
.championship-showcase .championship-preview .hover-preview { border-radius:var(--radius-inner); }
.gallery-showcase .gallery-main { border-radius:var(--radius-panel); overflow:hidden; }
#player-viewer,#championship-viewer { border-radius:20px; }
.player-viewer-image,.picture-full { border-radius:var(--radius-inner); }
.tactical-controls button,
.player-viewer-controls button,
.picture-close,
.equipment-list-toggle,
.orbit-pause,
.btn-card,
.social-btn,
.book-badge,
.championship-showcase .champ-tag,
.feedback-evidence .more-feedback summary,
.player-showcase .player-profile-trigger span { border-radius:var(--radius-pill); }
.tactical-controls button { padding-left:15px; padding-right:15px; }
.player-showcase .agent-card::after { border-radius:50%; }
.tactical-roster > span { border-radius:var(--radius-pill); padding-right:9px; }
.tactical-roster img { border-radius:50%; }
.tactical-phase .phase-index { border-radius:6px; }
.gallery-showcase .gallery-nav-btn { border-radius:50%; }
.gallery-showcase .gallery-status { border-radius:8px; }
.coaching-lab .session-link { border-radius:var(--radius-inner); }
.hero-scroll span { border-radius:var(--radius-pill); }
/* Keep the primary action's single cut corner while easing its other corners. */
.btn-primary,
.cinematic-hero .hero-actions .btn-large,
.glitch-nav .nav-links .cta-button { border-radius:8px; clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%); }
@media (max-width:768px) {
  :root { --radius-panel:14px; --radius-inner:9px; }
  #player-viewer,#championship-viewer { border-radius:16px; }
  .tactical-controls button { padding-left:10px; padding-right:10px; }
}

/* ===== Batch 1 fixes (2026-11-10) ===== */
/* Gallery lost its side gutter: .gallery-section { padding: 100px 0 } beat main > section. */
main > section.gallery-section { padding-left:var(--page-gutter); padding-right:var(--page-gutter); }
/* Card buttons: keep the arrow on the same line as the label. */
.btn-card { white-space:nowrap; }
.vlr-profile { flex-basis:auto; }
/* Riot fan project notice. */
.footer-legal { margin-top:12px; max-width:720px; color:#8f9cab; font:12px/1.6 var(--font-body); }
@media (max-width:768px) {
  main > section.gallery-section { padding-left:5%; padding-right:5%; }
  /* Sound button becomes a 44px icon so it covers less text. */
  .music-controller { width:44px; min-width:44px; height:44px; padding:0; justify-content:center; }
  .music-controller .music-text { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
}

/* ===== Batch 3 (2026-11-10) ===== */
/* Name now sits inside the h1; keep its old look. */
.cinematic-hero .hero-title .hero-identity { display:block; margin:0 0 14px; color:var(--red-light); text-shadow:none; font:600 20px/1 var(--font-display); letter-spacing:.23em; }
/* Proof strip under the hero. */
.proof-strip { list-style:none; margin:0; padding:28px var(--page-gutter); display:grid; grid-template-columns:repeat(4,1fr); gap:0; background:#0b1118; border-top:1px solid var(--border); border-bottom:1px solid var(--border); position:relative; z-index:2; }
.proof-strip li { display:flex; flex-direction:column; gap:6px; padding:4px 24px; border-left:1px solid var(--border); }
.proof-strip li:first-child { border-left:0; padding-left:0; }
.proof-strip strong { font:600 30px/1 var(--font-display); letter-spacing:.02em; color:#f1eee8; }
.proof-strip li:first-child strong { color:var(--red); }
.proof-strip span { font:12px/1.4 var(--font-mono); letter-spacing:.06em; color:#acb8c5; }
@media (max-width:900px) {
  .proof-strip { grid-template-columns:repeat(2,1fr); row-gap:22px; }
  .proof-strip li:nth-child(3) { border-left:0; padding-left:0; }
}
@media (max-width:420px) { .proof-strip strong { font-size:24px; } .proof-strip li { padding:4px 14px; } }
/* Team placements: present but quiet. */
.competitive-showcase .experience-result.result-quiet { display:block; }
.competitive-showcase .experience-result .result-text { display:block; font:14px/1.4 var(--font-body); color:#ced6de; }
.clock-zone { font-size:.85em; color:#acb8c5; }


/* =====================================================================
   Batch 4 design system (2026-11-10)
   One red, one teal, gold for championships only. Sharp shapes.
   ===================================================================== */
:root {
  --red:#ff4655; --red-light:#ff8a94; --red-pale:#ffa5ad;
  --teal:#9de2d5; --teal-light:#b8efe5; --teal-strong:#42e1dc;
  --gold:#e9ca8d;
  --val-red:var(--red); --val-cyan:var(--teal);
  --font-body:'Barlow','Segoe UI',Arial,sans-serif;
  --radius-panel:4px; --radius-inner:3px; --radius-pill:3px;
}
@media (max-width:768px) { :root { --radius-panel:4px; --radius-inner:3px; } }
body { font-family:var(--font-body); }
/* Buttons: sharp rectangles. Filled primary actions keep the cut corner. */
.btn-card, .social-btn, .btn-discord, .orbit-pause, .equipment-list-toggle, .picture-close,
.player-viewer-controls button, .tactical-controls button, .feedback-evidence .more-feedback summary,
.coaching-lab .session-link, .music-controller, #back-to-top, .gallery-showcase .gallery-nav-btn,
.gallery-showcase .gallery-status, .book-badge, .championship-showcase .champ-tag { border-radius:3px; }
.btn-primary, .cinematic-hero .hero-actions .btn-large, .glitch-nav .nav-links .cta-button {
  border-radius:2px; clip-path:polygon(0 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%);
}
#player-viewer, #championship-viewer { border-radius:4px; }
/* Fast, sharp interaction timing. */
@media (prefers-reduced-motion:no-preference) {
  .btn-primary, .btn-card, .session-link, .social-btn, .btn-discord, .nav-links a { transition-duration:180ms; transition-timing-function:cubic-bezier(.2,.8,.2,1); }
}
/* Phones: the large faded AARON word sat behind the hero buttons. */
@media (max-width:768px) { .hero-stage .stage-word { display:none; } }
/* Minimum readable label size. */
.tactical-preview .map-caption, .tactical-preview .demo-tag, .clock-zone, .music-text { font-size:12px !important; }

/* ===== Batch 5 (2026-11-10) ===== */
/* Players: one consistent card per player instead of profile screenshots. */
.player-grid { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px; width:100%; }
.player-card { display:flex; flex-direction:column; align-items:center; gap:10px; padding:24px 12px 20px; background:#141f2a; border:1px solid var(--border); border-radius:var(--radius-panel); text-align:center; }
.player-card img, .player-initial { width:96px; height:96px; border-radius:50%; object-fit:cover; box-shadow:0 0 0 2px #0d141c, 0 0 0 4px var(--red); }
.player-initial { display:grid; place-items:center; background:#22313f; color:#f1eee8; font:600 44px/1 var(--font-display); }
.player-card h3 { margin:6px 0 0; font:600 26px/1 var(--font-display); letter-spacing:.04em; color:#f1eee8; }
.player-tag { font:12px var(--font-mono); letter-spacing:.14em; color:var(--teal); }
@media (prefers-reduced-motion:no-preference) and (hover:hover) {
  .player-card { transition:border-color 180ms cubic-bezier(.2,.8,.2,1), transform 180ms cubic-bezier(.2,.8,.2,1); }
  .player-card:hover { border-color:var(--red); transform:translateY(-3px); }
}
@media (max-width:420px) { .player-grid { grid-template-columns:repeat(2,1fr); gap:12px; } }
/* Still tactical boards: no controls. */
.tactical-static .tactical-phase { border-bottom:0; }
/* My Settings block. */
.my-settings { width:100%; margin:32px 0 48px; }
.settings-title { margin:0 0 16px; font:12px var(--font-mono); letter-spacing:.18em; color:var(--teal); }
.gear-title { width:100%; margin-top:0; }
.settings-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:0; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-panel); overflow:hidden; }
.settings-grid > div { background:#141f2a; padding:20px 22px; display:flex; flex-direction:column; gap:8px; }
.settings-grid dt { font:12px var(--font-mono); letter-spacing:.1em; color:#acb8c5; text-transform:uppercase; }
.settings-grid dd { margin:0; font:600 40px/1 var(--font-display); color:#f1eee8; letter-spacing:.02em; }
.settings-grid dd small { font-size:.6em; color:#acb8c5; }
.settings-key dd { color:var(--red); }
.settings-crosshair { grid-column:span 2; }
.settings-crosshair p { margin:0; font:12px var(--font-mono); letter-spacing:.06em; color:#acb8c5; }
@media (max-width:900px) { .settings-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:420px) { .settings-grid dd { font-size:32px; } .settings-grid > div { padding:16px; } }
/* Crosshair preview and code. */
.settings-crosshair dd.crosshair-row { display:flex; align-items:center; gap:18px; font:inherit; }
.crosshair-preview { flex:0 0 auto; width:84px; height:84px; border:1px solid var(--border); border-radius:var(--radius-inner); }
.crosshair-bg { fill:#5b6672; }
.crosshair-code { display:flex; flex-direction:column; align-items:flex-start; gap:10px; min-width:0; }
.crosshair-code code { display:block; max-width:100%; font:12px/1.5 var(--font-mono); color:#ced6de; word-break:break-all; }
@media (max-width:900px) { .settings-crosshair { grid-column:1 / -1; } }
/* Tactical boards: flank and opponent routes. */
.map-routes .route-flank { stroke:var(--teal-strong); opacity:.95; stroke-width:2; }
.map-routes .route-enemy { stroke:var(--red-pale); }
/* Eliminated agents: dimmed, grey, with a red X. */
.kill-mark { fill:none; stroke:var(--red); stroke-width:2.6; stroke-linecap:round; opacity:0; }
.agent-token.dead > circle, .agent-token.dead > image, .agent-token.dead > text { opacity:.3; filter:grayscale(1); }
.agent-token.dead .kill-mark { opacity:1; }
.tactical-roster > span.dead { opacity:.4; filter:grayscale(1); text-decoration:line-through; }