@import url('https://cdn.jsdelivr.net/gh/moonspam/NanumSquareNeo/nanumsquareneo.css');

/* 
    Nano Future Design System 
    Concept: Premium, Glass, Neon, Physical Tactility
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    /* Mobile touch optimization */
}

:root {
    /* Brand Colors */
    --primary: #7BE495;
    --primary-dim: rgba(123, 228, 149, 0.8);
    --primary-glow: rgba(123, 228, 149, 0.4);
    --secondary: #9DF3C4;
    --accent: #20E2D7;

    /* Backgrounds */
    --dark-bg: #080C0A;
    /* Deep rich black-green */
    --surface-bg: rgba(20, 30, 25, 0.7);
    --glass-high: rgba(255, 255, 255, 0.08);
    --glass-med: rgba(255, 255, 255, 0.05);
    --glass-low: rgba(255, 255, 255, 0.02);

    /* Borders & Shadows */
    --glass-border: rgba(255, 255, 255, 0.12);
    --glass-border-light: rgba(255, 255, 255, 0.2);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 15px 40px rgba(0, 0, 0, 0.6);
    --shadow-neon: 0 0 20px var(--primary-glow);

    /* Typography */
    --text-main: #FFFFFF;
    --text-muted: #A0B8AD;

    /* Category Colors - More Vivid */
    --color-lower-body: #00ff88;
    --color-lower-body-glow: rgba(0, 255, 136, 0.5);
    --color-back: #00ccff;
    --color-back-glow: rgba(0, 204, 255, 0.5);
    --color-chest: #ff3377;
    --color-chest-glow: rgba(255, 51, 119, 0.5);
    --color-shoulder: #ffaa00;
    --color-shoulder-glow: rgba(255, 170, 0, 0.5);
    --color-arms: #aa55ff;
    --color-arms-glow: rgba(170, 85, 255, 0.5);
    --color-others: #00ffff;
    --color-others-glow: rgba(0, 255, 255, 0.5);
}

body {
    font-family: 'NanumSquareNeo', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-main);
    line-height: 1.5;
    min-height: 100vh;
    overflow-x: hidden;
    font-weight: 400;
    position: relative;
    /* Mesh Gradient Background */
    background-image:
        radial-gradient(circle at 15% 50%, rgba(32, 226, 215, 0.15), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(123, 228, 149, 0.15), transparent 25%),
        radial-gradient(circle at 50% 80%, rgba(157, 243, 196, 0.1), transparent 40%);
    background-size: 200% 200%;
    background-attachment: fixed;
    /* Fix background during scroll */
    animation: meshFlow 15s ease infinite alternate;
}

/* Noise Texture Overlay */
body::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: -1;
    opacity: 0.4;
}

/* Floating Orbs Animation - Replaces Particle Float */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        radial-gradient(circle at 50% 50%, rgba(32, 226, 215, 0.05) 0%, transparent 60%);
    z-index: -2;
    animation: pulseGlow 8s ease-in-out infinite;
}

@keyframes meshFlow {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulseGlow {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* Sticky Premium Header */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(8, 12, 10, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--glass-border);
    transition: all 0.3s ease;
}

.header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.8rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    z-index: 1001;
}

.logo-image {
    height: 32px;
    /* Sleek small logo for header */
    width: auto;
    filter: drop-shadow(0 0 8px var(--primary-glow));
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.logo:active .logo-image {
    transform: scale(0.95);
}

.logo-text {
    font-family: 'NanumSquare Neo', sans-serif;
    font-size: 0.9rem;
    color: #e0fff4;
    /* Pale mint white */
    margin-left: 0.8rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    white-space: nowrap;
    opacity: 1;

    /* Neon Green Glow Effect - Reduced Brightness */
    text-shadow:
        0 0 1px #fff,
        0 0 3px var(--primary),
        0 0 5px rgba(32, 226, 215, 0.5);
}

@media (max-width: 480px) {
    .logo-text {
        font-size: 0.75rem;
        /* Smaller on mobile */
        margin-left: 0.5rem;
        display: none;
        /* Hide on very small screens if meaningful, or keep if user insists. 
                        User likely wants it visible. Let's keep it but small, or maybe hide.
                        Given "Nano Future" simplistic mobile header, text might clutter.
                        Let's try hiding it on strictly < 480px (phones) or maybe < 360px.
                        Actually, let's keep it visible but very small for now as requested. */
        display: inline-block;
    }
}

/* Scrollable Nav for Mobile */
nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-left: 1rem;
    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

nav::-webkit-scrollbar {
    display: none;
}

.nav-links {
    display: flex;
    gap: 0.5rem;
    list-style: none;
    padding: 0.2rem;
    white-space: nowrap;
}

.nav-links li {
    flex-shrink: 0;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    background: transparent;
}

.nav-links a:hover,
.nav-links a:active {
    color: var(--text-main);
    background: var(--glass-low);
}

/* Active State Simulation (Optional JS could toggle this) */
.nav-links a.active {
    color: var(--primary);
    background: var(--glass-med);
    border: 1px solid var(--glass-border);
}

/* Container */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12rem 1.5rem 2rem;
    position: relative;
    z-index: 1;
}

/* Page Title - Compact & Futuristic */
.page-title {
    text-align: center;
    margin-bottom: 0;
    /* No bottom margin */
    margin-top: -11rem;
    /* Extreme negative top margin to move up */
    padding: 0 1.5rem;
    /* Remove top/bottom padding */
    width: fit-content;
    /* Shrink to fit content */
    margin-left: auto;
    margin-right: auto;
    background: transparent;
    /* No background */
    backdrop-filter: none;
    border-radius: 0;
    border: none;
    box-shadow: none;
    position: relative;
    overflow: hidden;
}

.page-title::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: transparent;
    /* Remove shine effect */
    animation: none;
}

@keyframes shine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.hero-logo {
    max-width: 100%;
    width: auto;
    height: auto;
    max-height: 400px;
    /* Greatly increased */
    margin: 0 auto 1rem auto;
    /* Center horizontally */
    filter: drop-shadow(0 0 40px rgba(123, 228, 149, 0.4));
    transition: transform 0.3s ease;
    display: block;
}

.hero-logo:hover {
    transform: scale(1.05) rotate(2deg);
    filter: drop-shadow(0 0 60px rgba(123, 228, 149, 0.6));
}

.page-title p {
    font-family: 'NanumSquareNeo';
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
    text-align: center;
    /* Ensure text is centered */
    margin: 0 auto;
    width: 100%;
}

/* Toggles Container */
.toggles-container {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Toggle Section - Modern Cards */
.toggle-section {
    background: var(--glass-bg);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.toggle-section:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(123, 228, 149, 0.2);
    border-color: var(--primary);
}

.toggle-header {
    width: 100%;
    padding: 1.8rem 2rem;
    background: linear-gradient(135deg, var(--card-bg), rgba(123, 228, 149, 0.08));
    border: none;
    color: var(--text-primary);
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.toggle-header::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    transform: scaleY(0);
    transition: transform 0.3s ease;
}

.toggle-header:hover::before,
.toggle-header.active::before {
    transform: scaleY(1);
}

.toggle-header:hover {
    background: linear-gradient(135deg, rgba(123, 228, 149, 0.15), rgba(157, 243, 196, 0.1));
}

.toggle-header.active {
    background: linear-gradient(135deg, rgba(123, 228, 149, 0.2), rgba(157, 243, 196, 0.15));
    box-shadow: inset 0 4px 20px rgba(123, 228, 149, 0.1);
}

.toggle-header span:first-child {
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: 'NanumSquareNeo';
    font-weight: 800;
    font-size: 1.4rem;
    letter-spacing: -0.5px;
}

.toggle-icon {
    width: 45px;
    /* Increased size */
    height: 45px;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

.count {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--dark-bg);
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 700;
    box-shadow: 0 4px 15px var(--primary-glow);
}

@keyframes floatParticles {
    0% {
        background-position: 0% 0%;
    }

    50% {
        background-position: 100% 100%;
    }

    100% {
        background-position: 0% 0%;
    }
}

body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    background: var(--glass-low);
    border: 1px solid var(--glass-border-light);
    color: var(--primary);
    padding: 0.3rem 0.9rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 800;
    box-shadow: none;
    /* Clean flat look */
}

.toggle-header.active .count {
    background: var(--primary);
    color: var(--dark-bg);
    border-color: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Mobile Optimization */
@media (max-width: 768px) {
    .container {
        padding: 1rem 0.5rem;
        /* Minimal side padding */
        display: flex;
        flex-direction: column;
        align-items: center;
        /* Center all children */
        width: 100%;
    }

    .page-title {
        display: none !important;
        /* Completely hide on mobile */
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
    }

    .toggle-section:first-child {
        margin-top: 3rem !important;
        /* Add space from header on mobile */
    }

    .hero-logo {
        display: none !important;
        /* Force hide logo on mobile */
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        max-height: 0 !important;
        overflow: hidden !important;
    }

    .header-container {
        padding: 0.8rem 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .logo-image {
        height: 40px;
    }

    .nav-links {
        gap: 0.5rem;
        flex-wrap: wrap;
        justify-content: center;
    }

    .nav-links a {
        font-size: 0.9rem;
        padding: 0.5rem 0.8rem;
    }

    .toggle-header span:first-child {
        font-size: 1.1rem;
        gap: 10px;
    }

    .toggle-icon {
        width: 35px;
        height: 35px;
    }

    .equipment-item {
        padding: 1rem;
    }

    .equipment-detail {
        padding: 1.5rem 0.8rem;
        /* Reduced padding for full width content */
        width: 100%;
        box-sizing: border-box;
    }
}

.toggle-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.toggle-content.active {
    max-height: 2000px;
}

/* Category-Specific Colors */
/* 하체 (Lower Body) - Green */
.toggle-section:nth-child(1) {
    background: linear-gradient(135deg, rgba(123, 228, 149, 0.15), rgba(157, 243, 196, 0.1));
    border-color: rgba(123, 228, 149, 0.4);
}

.toggle-section:nth-child(1):hover {
    background: linear-gradient(135deg, rgba(123, 228, 149, 0.2), rgba(157, 243, 196, 0.15));
    border-color: var(--color-lower-body);
    box-shadow: 0 12px 40px var(--color-lower-body-glow);
}

.toggle-section:nth-child(1) .toggle-header::before {
    background: linear-gradient(180deg, var(--color-lower-body), #9DF3C4);
}

.toggle-section:nth-child(1) .toggle-header {
    color: var(--color-lower-body);
}

.toggle-section:nth-child(1) .toggle-header:hover {
    background: linear-gradient(135deg, rgba(123, 228, 149, 0.25), rgba(157, 243, 196, 0.15));
}

.toggle-section:nth-child(1) .toggle-header.active {
    background: linear-gradient(135deg, rgba(123, 228, 149, 0.3), rgba(157, 243, 196, 0.2));
    box-shadow: inset 0 4px 20px var(--color-lower-body-glow);
}

.toggle-section:nth-child(1) .toggle-header.active span:first-child {
    color: var(--color-lower-body);
}

.toggle-section:nth-child(1) .count {
    background: linear-gradient(135deg, var(--color-lower-body), #9DF3C4);
    box-shadow: 0 4px 15px var(--color-lower-body-glow);
}

/* 등 (Back) - Blue */
.toggle-section:nth-child(2) {
    background: linear-gradient(135deg, rgba(107, 182, 255, 0.15), rgba(157, 201, 255, 0.1));
    border-color: rgba(107, 182, 255, 0.4);
}

.toggle-section:nth-child(2):hover {
    background: linear-gradient(135deg, rgba(107, 182, 255, 0.2), rgba(157, 201, 255, 0.15));
    border-color: var(--color-back);
    box-shadow: 0 12px 40px var(--color-back-glow);
}

.toggle-section:nth-child(2) .toggle-header::before {
    background: linear-gradient(180deg, var(--color-back), #9DC9FF);
}

.toggle-section:nth-child(2) .toggle-header {
    color: var(--color-back);
}

.toggle-section:nth-child(2) .toggle-header:hover {
    background: linear-gradient(135deg, rgba(107, 182, 255, 0.25), rgba(157, 201, 255, 0.15));
}

.toggle-section:nth-child(2) .toggle-header.active {
    background: linear-gradient(135deg, rgba(107, 182, 255, 0.3), rgba(157, 201, 255, 0.2));
    box-shadow: inset 0 4px 20px var(--color-back-glow);
}

.toggle-section:nth-child(2) .toggle-header.active span:first-child {
    color: var(--color-back);
}

.toggle-section:nth-child(2) .count {
    background: linear-gradient(135deg, var(--color-back), #9DC9FF);
    box-shadow: 0 4px 15px var(--color-back-glow);
}

/* 가슴 (Chest) - Pink */
.toggle-section:nth-child(3) {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.15), rgba(255, 179, 198, 0.1));
    border-color: rgba(255, 107, 157, 0.4);
}

.toggle-section:nth-child(3):hover {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.2), rgba(255, 179, 198, 0.15));
    border-color: var(--color-chest);
    box-shadow: 0 12px 40px var(--color-chest-glow);
}

.toggle-section:nth-child(3) .toggle-header::before {
    background: linear-gradient(180deg, var(--color-chest), #FFB3C6);
}

.toggle-section:nth-child(3) .toggle-header {
    color: var(--color-chest);
}

.toggle-section:nth-child(3) .toggle-header:hover {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.25), rgba(255, 179, 198, 0.15));
}

.toggle-section:nth-child(3) .toggle-header.active {
    background: linear-gradient(135deg, rgba(255, 107, 157, 0.3), rgba(255, 179, 198, 0.2));
    box-shadow: inset 0 4px 20px var(--color-chest-glow);
}

.toggle-section:nth-child(3) .toggle-header.active span:first-child {
    color: var(--color-chest);
}

.toggle-section:nth-child(3) .count {
    background: linear-gradient(135deg, var(--color-chest), #FFB3C6);
    box-shadow: 0 4px 15px var(--color-chest-glow);
}

/* 어깨 (Shoulder) - Orange */
.toggle-section:nth-child(4) {
    background: linear-gradient(135deg, rgba(255, 184, 108, 0.15), rgba(255, 209, 155, 0.1));
    border-color: rgba(255, 184, 108, 0.4);
}

.toggle-section:nth-child(4):hover {
    background: linear-gradient(135deg, rgba(255, 184, 108, 0.2), rgba(255, 209, 155, 0.15));
    border-color: var(--color-shoulder);
    box-shadow: 0 12px 40px var(--color-shoulder-glow);
}

.toggle-section:nth-child(4) .toggle-header::before {
    background: linear-gradient(180deg, var(--color-shoulder), #FFD19B);
}

.toggle-section:nth-child(4) .toggle-header {
    color: var(--color-shoulder);
}

.toggle-section:nth-child(4) .toggle-header:hover {
    background: linear-gradient(135deg, rgba(255, 184, 108, 0.25), rgba(255, 209, 155, 0.15));
}

.toggle-section:nth-child(4) .toggle-header.active {
    background: linear-gradient(135deg, rgba(255, 184, 108, 0.3), rgba(255, 209, 155, 0.2));
    box-shadow: inset 0 4px 20px var(--color-shoulder-glow);
}

.toggle-section:nth-child(4) .toggle-header.active span:first-child {
    color: var(--color-shoulder);
}

.toggle-section:nth-child(4) .count {
    background: linear-gradient(135deg, var(--color-shoulder), #FFD19B);
    box-shadow: 0 4px 15px var(--color-shoulder-glow);
}

/* 팔 (Arms) - Purple */
.toggle-section:nth-child(5) {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.15), rgba(212, 191, 252, 0.1));
    border-color: rgba(189, 147, 249, 0.4);
}

.toggle-section:nth-child(5):hover {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.2), rgba(212, 191, 252, 0.15));
    border-color: var(--color-arms);
    box-shadow: 0 12px 40px var(--color-arms-glow);
}

.toggle-section:nth-child(5) .toggle-header::before {
    background: linear-gradient(180deg, var(--color-arms), #D4BFFC);
}

.toggle-section:nth-child(5) .toggle-header {
    color: var(--color-arms);
}

.toggle-section:nth-child(5) .toggle-header:hover {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.25), rgba(212, 191, 252, 0.15));
}

.toggle-section:nth-child(5) .toggle-header.active {
    background: linear-gradient(135deg, rgba(189, 147, 249, 0.3), rgba(212, 191, 252, 0.2));
    box-shadow: inset 0 4px 20px var(--color-arms-glow);
}

.toggle-section:nth-child(5) .toggle-header.active span:first-child {
    color: var(--color-arms);
}

.toggle-section:nth-child(5) .count {
    background: linear-gradient(135deg, var(--color-arms), #D4BFFC);
    box-shadow: 0 4px 15px var(--color-arms-glow);
}

/* 기타 (Others) - Cyan */
.toggle-section:nth-child(6) {
    background: linear-gradient(135deg, rgba(139, 233, 253, 0.15), rgba(196, 245, 254, 0.1));
    border-color: rgba(139, 233, 253, 0.4);
}

.toggle-section:nth-child(6):hover {
    background: linear-gradient(135deg, rgba(139, 233, 253, 0.2), rgba(196, 245, 254, 0.15));
    border-color: var(--color-others);
    box-shadow: 0 12px 40px var(--color-others-glow);
}

.toggle-section:nth-child(6) .toggle-header::before {
    background: linear-gradient(180deg, var(--color-others), #C4F5FE);
}

.toggle-section:nth-child(6) .toggle-header {
    color: var(--color-others);
}

.toggle-section:nth-child(6) .toggle-header:hover {
    background: linear-gradient(135deg, rgba(139, 233, 253, 0.25), rgba(196, 245, 254, 0.15));
}

.toggle-section:nth-child(6) .toggle-header.active {
    background: linear-gradient(135deg, rgba(139, 233, 253, 0.3), rgba(196, 245, 254, 0.2));
    box-shadow: inset 0 4px 20px var(--color-others-glow);
}

.toggle-section:nth-child(6) .toggle-header.active span:first-child {
    color: var(--color-others);
}

.toggle-section:nth-child(6) .count {
    background: linear-gradient(135deg, var(--color-others), #C4F5FE);
    box-shadow: 0 4px 15px var(--color-others-glow);
}

/* Equipment List - Responsive Grid */
.equipment-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    /* Larger cards */
    gap: 1rem;
    padding: 1.5rem;
}

/* Equipment Item - Premium Glass Card */
.equipment-item {
    background: var(--glass-med);
    backdrop-filter: blur(15px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
    gap: 1.2rem;
    position: relative;
    overflow: hidden;
}

.equipment-item:hover {
    background: var(--glass-high);
    border-color: var(--primary);
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-sm), 0 0 20px rgba(123, 228, 149, 0.1);
}

.equipment-item:active {
    transform: scale(0.98);
}

/* Icon */
.equipment-icon {
    font-size: 2.5rem;
    margin-right: 0.5rem;
    transition: transform 0.4s ease;
    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
}

.equipment-item:hover .equipment-icon {
    transform: rotate(15deg) scale(1.1);
}

/* Name */
.equipment-name {
    font-family: 'NanumSquareNeo';
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--text-main);
}

/* Mobile Specific for Grid */
@media (max-width: 768px) {
    .container {
        padding: 9rem 1rem 2rem;
        /* Equal horizontal padding */
    }

    .hero-logo {
        max-height: 250px;
        /* Limit logo height on mobile */
        margin: 0 auto 1rem auto;
        display: block;
        /* Perfect center with bottom margin */
    }

    .equipment-list {
        grid-template-columns: 1fr;
        /* Single column for mobile focus */
        padding: 1rem 0;
    }

    .equipment-item {
        padding: 1.2rem;
        border-radius: 20px;
    }

    .video-container video {
        max-height: 50vh;
    }
}

/* Equipment Detail - Modern Layout */
.equipment-detail {
    background: var(--glass-bg);
    backdrop-filter: blur(30px);
    border-radius: 30px;
    padding: 3rem;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    animation: fadeInUp 0.6s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.equipment-header {
    text-align: center;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--glass-border);
    position: relative;
}

.equipment-header::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--primary), transparent);
}

.equipment-header h1 {
    font-size: 2.8rem;
    font-weight: 900;
    margin-bottom: 1rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.target-muscle {
    font-size: 1.3rem;
    color: var(--text-secondary);
    margin: 1rem 0;
}

.equipment-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1.5rem;
    /* Increased gap for better mobile touch */
    padding: 1.5rem;
}

@media (max-width: 768px) {
    .equipment-list {
        grid-template-columns: 1fr;
        padding: 1rem 0;
        gap: 1.5rem;
        /* Ensure gap is consistent on mobile */
    }
}

/* Level Colors */
.level-beginner {
    color: #00ff88;
    /* Mint Green */
    font-weight: 800;
}

.level-advanced {
    color: #00ccff;
    /* Cyan Blue */
    font-weight: 800;
}

.sets-info {
    display: inline-block;
    background: var(--glass-low);
    padding: 1rem 1.5rem;
    /* Increased padding */
    border-radius: 20px;
    font-weight: 700;
    font-size: 1rem;
    border: 1px solid var(--glass-border);
    color: var(--text-main);
    line-height: 1.6;
    text-align: left;
    width: 100%;
    /* Full width on mobile for better reading */
}

/* Video Container - Cinematic */
.video-container {
    margin: 2rem 0;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--glass-border);
    background: #000;
    position: relative;
}

.video-container video {
    width: 100%;
    display: block;
    max-height: 70vh;
    object-fit: contain;
}

/* Section Styling */
.section {
    margin: 2rem 0;
    padding: 1.5rem;
    background: var(--glass-low);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
}

.section-title {
    font-size: 1.3rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
    color: var(--secondary);
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.section-title::before {
    content: '';
    width: 4px;
    height: 24px;
    background: var(--primary);
    border-radius: 4px;
    box-shadow: 0 0 10px var(--primary-glow);
}

/* Steps List */
.steps-list {
    list-style: none;
    counter-reset: step-counter;
}

.steps-list li {
    position: relative;
    padding: 1rem 1rem 1rem 3.5rem;
    margin-bottom: 0.8rem;
    background: var(--glass-low);
    border-radius: 16px;
    transition: transform 0.2s ease;
    font-size: 1rem;
    color: var(--text-main);
    line-height: 1.6;
}

.steps-list li::before {
    counter-increment: step-counter;
    content: counter(step-counter);
    position: absolute;
    left: 1rem;
    top: 1rem;
    width: 28px;
    height: 28px;
    background: var(--glass-med);
    border: 1px solid var(--glass-border);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.9rem;
}

.toggle-section {
    margin-bottom: 1rem;
    /* Reduced spacing between category toggles */
    margin-top: -2rem;
    /* Move toggles up */
    border-radius: 24px;
    background: var(--glass-med);
    border: 1px solid var(--glass-border);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

/* Caution & Tips */
.caution-item,
.tip-item {
    padding: 1.2rem;
    margin-bottom: 1rem;
    border-radius: 16px;
    font-size: 0.95rem;
    backdrop-filter: blur(10px);
}

.caution-item {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid rgba(255, 107, 107, 0.3);
    color: #FF8F8F;
}

.tip-item {
    background: rgba(123, 228, 149, 0.1);
    border: 1px solid rgba(123, 228, 149, 0.3);
    color: var(--secondary);
}

/* Buttons */
.btn {
    padding: 1rem 2rem;
    border: none;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn-secondary {
    background: linear-gradient(135deg, var(--glass-bg), rgba(123, 228, 149, 0.1));
    color: var(--primary);
    border: 2px solid var(--primary);
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(123, 228, 149, 0.2);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: var(--dark-bg);
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(123, 228, 149, 0.4);
}

/* Minimal Back Button */
.btn-back {
    padding: 0.5rem 1.2rem;
    /* Much smaller */
    font-size: 0.9rem;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    border-radius: 20px;
    backdrop-filter: blur(5px);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.btn-back:hover {
    background: rgba(123, 228, 149, 0.1);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateX(-5px);
    /* Slide left on hover */
}

/* Navigation Buttons Container */
.navigation-buttons {
    display: flex;
    justify-content: flex-start;
    /* Align left or center */
    margin-top: 2rem;
}

/* Footer */
footer {
    background: var(--dark-bg);
    border-top: 1px solid var(--glass-border);
    padding: 4rem 2rem 6rem;
    /* Extra bottom padding for mobile scroll */
    margin-top: 4rem;
    text-align: center;
}

.footer-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.footer-content a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

/* Final Mobile Tweaks */
@media (max-width: 768px) {
    .page-title h1 {
        font-size: 1.8rem;
    }

    .equipment-header {
        text-align: center;
        /* Center align for mobile */
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
    }

    .equipment-header h1 {
        font-size: 1.6rem;
        margin-bottom: 1rem;
        /* Restore bottom margin */
    }

    .target-muscle {
        font-size: 1rem;
        /* Slightly smaller than desktop */
        margin: 0.5rem 0;
    }

    .section {
        margin: 1.5rem 0;
        padding: 0.8rem;
        /* Reduced padding for more width */
        width: 100%;
        box-sizing: border-box;
    }

    .steps-list li {
        padding: 0.75rem 1.5rem 0.75rem 2.8rem;
        /* Reduced vertical, increased horizontal padding */
        font-size: 0.8rem;
        /* Smaller font size */
        line-height: 1.5;
    }

    .steps-list li::before {
        width: 20px;
        height: 20px;
        /* Smaller circle */
        font-size: 0.7rem;
        /* Smaller number */
        left: 0.8rem;
        top: 0.75rem;
        /* Adjusted position */
    }

    .caution-item,
    .tip-item {
        padding: 0.8rem 1.5rem;
        /* Increased horizontal padding */
        font-size: 0.8rem;
        /* Smaller font size */
        line-height: 1.5;
    }

    .navigation-buttons {
        justify-content: center;
    }

    /* Refined Mobile Spacing & Text */
    .step-item {
        padding: 0.8rem;
        font-size: 0.95rem;
    }

    .sets-info {
        padding: 0.8rem;
        font-size: 0.9rem;
    }

    .equipment-item {
        padding: 1rem;
        gap: 0.8rem;
    }

    /* 
       MOBILE GRID REDESIGN - 3 Column Layout
    */
    .equipment-list {
        display: grid;
        /* Back to Grid */
        grid-template-columns: repeat(3, 1fr) !important;
        /* Force 3 columns */
        gap: 1rem;
        /* More space between items */
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0.5rem 1rem 1.5rem;
        /* More container padding (Top, Side, Bottom) */
        margin-top: 0.5rem;
    }

    .equipment-item {
        display: flex;
        flex-direction: column;
        /* Icon Top, Text Bottom */
        align-items: center;
        justify-content: center;
        width: 100%;
        padding: 0.8rem 0.3rem;
        /* Tighter internal padding */
        min-height: 90px;
        /* Slightly smaller height */
        gap: 0.5rem;

        /* Restore Card Styling */
        background: var(--glass-med) !important;
        border: 1px solid var(--glass-border) !important;
        border-radius: 14px !important;
        /* Slightly smaller radius */
        box-shadow: none !important;
        margin: 0 !important;
        text-align: center;
    }

    /* Icon Image Styling Global */
    .equipment-icon-img {
        width: 60px;
        height: 60px;
        object-fit: contain;
        margin-bottom: 0.5rem;

        /* Transparent PNGs */
        filter: drop-shadow(0 0 5px rgba(32, 226, 215, 0.4));

        transition: transform 0.3s ease;
    }

    /* Icon Image Styling for Mobile Grid */
    .equipment-icon-img {
        width: 45px !important;
        height: 45px !important;
        max-width: 100%;
        object-fit: contain;
        margin-bottom: 0.3rem;

        /* Transparent PNGs */
        filter: drop-shadow(0 0 5px rgba(32, 226, 215, 0.6));

        transition: transform 0.3s ease;
    }

    /* Remove Dividers */
    .equipment-item:last-child {
        border-bottom: 1px solid var(--glass-border) !important;
    }

    .equipment-item:active {
        transform: scale(0.96) !important;
        background: var(--glass-high) !important;
    }

    .equipment-icon {
        font-size: 2rem;
        /* Larger icon for grid focus */
        margin: 0;
    }

    .equipment-name {
        font-size: 0.85rem;
        /* Smaller text to fit */
        flex-grow: 0;
        text-align: center;
        font-weight: 700;
        word-break: keep-all;
        /* Prevent awkward breaks */
        line-height: 1.3;
    }

    /* Remove Chevron */
    .equipment-item::after {
        display: none;
    }
}