/* CSS Variables for Multi-Theme Switching */
:root {
    /* Light Mode Colors */
    --bg-primary-light: #f5f5f5;
    --bg-secondary-light: #ffffff;
    --text-primary-light: #1a1a1a;
    --text-secondary-light: #4a4a4a;
    --accent-light: #d32f2f;
    --accent-secondary-light: #b71c1c;
    --border-light: #e0e0e0;
    --shadow-light: rgba(0, 0, 0, 0.1);

    /* Default Theme - Blue with Orange (Current) */
    --bg-primary-default: #0a0e1a;
    --bg-secondary-default: #1a1f2e;
    --text-primary-default: #ffffff;
    --text-secondary-default: #b8c5d6;
    --accent-default: #ff6b00;
    --accent-secondary-default: #ff8533;
    --border-default: #2a3441;
    --shadow-default: rgba(255, 255, 255, 0.05);

    /* US Airborne Theme - Green, Brown, and Yellow (101st Airborne) */
    --bg-primary-marines: #4F4C38;
    --bg-secondary-marines: #6B6C3B;
    --text-primary-marines: #ffffff;
    --text-secondary-marines: #C3AE85;
    --accent-marines: #C3AE85;
    --accent-secondary-marines: #C3AE85;
    --border-marines: #6B6C3B;
    --shadow-marines: rgba(195, 174, 133, 0.1);

    /* Blitzkrieg Theme - Dark Gray, Steel, and Olive */
    --bg-primary-german: #1C1C1C;
    --bg-secondary-german: #555E64;
    --text-primary-german: #ffffff;
    --text-secondary-german: #6A6F58;
    --accent-german: #6A6F58;
    --accent-secondary-german: #6A6F58;
    --border-german: #555E64;
    --shadow-german: rgba(106, 111, 88, 0.1);

    /* Motherland Theme - Earth Tones and Red (Soviet Motherland) */
    --bg-primary-soviet: #8B7D4F;
    --bg-secondary-soviet: #6B5C4E;
    --text-primary-soviet: #ffffff;
    --text-secondary-soviet: #A02725;
    --accent-soviet: #A02725;
    --accent-secondary-soviet: #A02725;
    --border-soviet: #4E553E;
    --shadow-soviet: rgba(160, 39, 37, 0.1);

    /* Rising Sun Theme - Japanese Red, White, and Black */
    --bg-primary-japan: #BC002D;
    --bg-secondary-japan: #000000;
    --text-primary-japan: #ffffff;
    --text-secondary-japan: #ffffff;
    --accent-japan: #ffffff;
    --accent-secondary-japan: #ffffff;
    --border-japan: #000000;
    --shadow-japan: rgba(255, 255, 255, 0.1);

    /* Raz Mode Theme - Razbora Colors (White, YouTube Red, Black) */
    --bg-primary-unhinged: #000000;
    --bg-secondary-unhinged: #ff0000;
    --text-primary-unhinged: #ffffff;
    --text-secondary-unhinged: #ffffff;
    --accent-unhinged: #ffffff;
    --accent-secondary-unhinged: #ffffff;
    --border-unhinged: #ff0000;
    --shadow-unhinged: rgba(255, 255, 255, 0.1);

    /* Red Devils Theme - Dark Red, Golden Brown, and Olive Green */
    --bg-primary-britain: #781C1C;
    --bg-secondary-britain: #4F5B36;
    --text-primary-britain: #ffffff;
    --text-secondary-britain: #9C8B64;
    --accent-britain: #9C8B64;
    --accent-secondary-britain: #9C8B64;
    --border-britain: #4F5B36;
    --shadow-britain: rgba(156, 139, 100, 0.1);

    /* Common Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;
}

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

body {
    font-family: 'Exo 2', sans-serif;
    line-height: 1.6;
    transition: all 0.3s ease;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%23ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="8.5"/><circle cx="10" cy="10" r="2.5"/></svg>') 10 10, auto;
}

/* Default Theme - Blue with Orange */
body.theme-default {
    background: radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #1a1f2e 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-default::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(59, 130, 246, 0.03) 2px,
            rgba(59, 130, 246, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* US Airborne Theme - Green, Brown, and Yellow (101st Airborne) */
body.theme-marines {
    background: radial-gradient(circle at 20% 80%, rgba(195, 174, 133, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(195, 174, 133, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #4F4C38 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-marines::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(195, 174, 133, 0.03) 2px,
            rgba(195, 174, 133, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* Blitzkrieg Theme - Dark Gray, Steel, and Olive */
body.theme-german {
    background: radial-gradient(circle at 20% 80%, rgba(106, 111, 88, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(106, 111, 88, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #1C1C1C 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-german::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(106, 111, 88, 0.03) 2px,
            rgba(106, 111, 88, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* Motherland Theme - Earth Tones and Red (Soviet Motherland) */
body.theme-soviet {
    background: radial-gradient(circle at 20% 80%, rgba(160, 39, 37, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 125, 79, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #8B7D4F 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-soviet::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(160, 39, 37, 0.03) 2px,
            rgba(160, 39, 37, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* US Airborne Theme - Green, Brown, and Yellow (101st Airborne) */
body.theme-marines {
    background: radial-gradient(circle at 20% 80%, rgba(195, 174, 133, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(195, 174, 133, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #4F4C38 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-marines::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(195, 174, 133, 0.03) 2px,
            rgba(195, 174, 133, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* Rising Sun Theme - Japanese Red, White, and Black */
body.theme-japan {
    background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(0, 0, 0, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #BC002D 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-japan::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* Raz Mode Theme - Razbora Colors (White, Red, Black) */
body.theme-unhinged {
    background: radial-gradient(circle at 20% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 0, 0, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #000000 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-unhinged::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(255, 255, 255, 0.03) 2px,
            rgba(255, 255, 255, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* Red Devils Theme - Dark Red, Golden Brown, and Olive Green */
body.theme-britain {
    background: radial-gradient(circle at 20% 80%, rgba(156, 139, 100, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(79, 91, 54, 0.1) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #781C1C 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
}

body.theme-britain::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(156, 139, 100, 0.03) 2px,
            rgba(156, 139, 100, 0.03) 4px
    );
    pointer-events: none;
    z-index: -1;
}

/* Theme Variable Mapping */
body.theme-default {
    --bg-primary: var(--bg-primary-default);
    --bg-secondary: var(--bg-secondary-default);
    --text-primary: var(--text-primary-default);
    --text-secondary: var(--text-secondary-default);
    --accent: var(--accent-default);
    --accent-secondary: var(--accent-secondary-default);
    --border: var(--border-default);
    --shadow: var(--shadow-default);
}

body.theme-marines {
    --bg-primary: var(--bg-primary-marines);
    --bg-secondary: var(--bg-secondary-marines);
    --text-primary: var(--text-primary-marines);
    --text-secondary: var(--text-secondary-marines);
    --accent: var(--accent-marines);
    --accent-secondary: var(--accent-secondary-marines);
    --border: var(--border-marines);
    --shadow: var(--shadow-marines);
}

body.theme-german {
    --bg-primary: var(--bg-primary-german);
    --bg-secondary: var(--bg-secondary-german);
    --text-primary: var(--text-primary-german);
    --text-secondary: var(--text-secondary-german);
    --accent: var(--accent-german);
    --accent-secondary: var(--accent-secondary-german);
    --border: var(--border-german);
    --shadow: var(--shadow-german);
}

/* Ensure text legibility in Blitzkrieg theme */
body.theme-german .text-primary,
body.theme-german h1,
body.theme-german h2,
body.theme-german h3,
body.theme-german h4,
body.theme-german h5,
body.theme-german h6 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.theme-german .text-secondary,
body.theme-german p,
body.theme-german span {
    color: #6A6F58 !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

body.theme-soviet {
    --bg-primary: var(--bg-primary-soviet);
    --bg-secondary: var(--bg-secondary-soviet);
    --text-primary: var(--text-primary-soviet);
    --text-secondary: var(--text-secondary-soviet);
    --accent: var(--accent-soviet);
    --accent-secondary: var(--accent-secondary-soviet);
    --border: var(--border-soviet);
    --shadow: var(--shadow-soviet);
}

/* Ensure text legibility in Motherland theme */
body.theme-soviet .text-primary,
body.theme-soviet h1,
body.theme-soviet h2,
body.theme-soviet h3,
body.theme-soviet h4,
body.theme-soviet h5,
body.theme-soviet h6 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.theme-soviet .text-secondary,
body.theme-soviet p,
body.theme-soviet span {
    color: #A02725 !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

/* Make Motherland theme toggle text white */
body.theme-soviet .theme-toggle span {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.theme-marines {
    --bg-primary: var(--bg-primary-marines);
    --bg-secondary: var(--bg-secondary-marines);
    --text-primary: var(--text-primary-marines);
    --text-secondary: var(--text-secondary-marines);
    --accent: var(--accent-marines);
    --accent-secondary: var(--accent-secondary-marines);
    --border: var(--border-marines);
    --shadow: var(--shadow-marines);
}

body.theme-japan {
    --bg-primary: var(--bg-primary-japan);
    --bg-secondary: var(--bg-secondary-japan);
    --text-primary: var(--text-primary-japan);
    --text-secondary: var(--text-secondary-japan);
    --accent: var(--accent-japan);
    --accent-secondary: var(--accent-secondary-japan);
    --border: var(--border-japan);
    --shadow: var(--shadow-japan);
}

/* Ensure text legibility in Rising Sun theme */
body.theme-japan .text-primary,
body.theme-japan h1,
body.theme-japan h2,
body.theme-japan h3,
body.theme-japan h4,
body.theme-japan h5,
body.theme-japan h6 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.theme-japan .text-secondary,
body.theme-japan p,
body.theme-japan span {
    color: #ffffff !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

/* Rising Sun theme navigation - invert colors when highlighted */
body.theme-japan .nav-link:hover,
body.theme-japan .nav-link.active {
    color: #000000;
    background-color: #ffffff;
    border-bottom-color: #000000;
}

body.theme-unhinged {
    --bg-primary: var(--bg-primary-unhinged);
    --bg-secondary: var(--bg-secondary-unhinged);
    --text-primary: var(--text-primary-unhinged);
    --text-secondary: var(--text-secondary-unhinged);
    --accent: var(--accent-unhinged);
    --accent-secondary: var(--accent-secondary-unhinged);
    --border: var(--border-unhinged);
    --shadow: var(--shadow-unhinged);
}

/* Ensure text legibility in Raz Mode theme */
body.theme-unhinged .text-primary,
body.theme-unhinged h1,
body.theme-unhinged h2,
body.theme-unhinged h3,
body.theme-unhinged h4,
body.theme-unhinged h5,
body.theme-unhinged h6 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.theme-unhinged .text-secondary,
body.theme-unhinged p,
body.theme-unhinged span {
    color: #ffffff !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

/* Raz Mode theme navigation - invert colors when highlighted */
body.theme-unhinged .nav-link:hover,
body.theme-unhinged .nav-link.active {
    color: #000000;
    background-color: #ffffff;
    border-bottom-color: #000000;
}

/* Raz Mode theme toggle - add red outline for visibility */
body.theme-unhinged .theme-toggle {
    border: 2px solid #ff0000 !important;
    box-shadow: 0 0 8px rgba(255, 0, 0, 0.5) !important;
}

body.theme-unhinged .theme-toggle span {
    color: #000000 !important;
    text-shadow: 1px 1px 2px rgba(255, 0, 0, 0.8) !important;
    font-weight: 700 !important;
}

/* Raz Mode header - make background darker for logo visibility */
body.theme-unhinged .header {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    border-bottom: 2px solid #ff0000 !important;
}

body.theme-unhinged .logo-container,
body.theme-unhinged .armor-hub-text {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

body.theme-britain {
    --bg-primary: var(--bg-primary-britain);
    --bg-secondary: var(--bg-secondary-britain);
    --text-primary: var(--text-primary-britain);
    --text-secondary: var(--text-secondary-britain);
    --accent: var(--accent-britain);
    --accent-secondary: var(--accent-secondary-britain);
    --border: var(--border-britain);
    --shadow: var(--shadow-britain);
}

/* Ensure text legibility in Red Devils theme */
body.theme-britain .text-primary,
body.theme-britain h1,
body.theme-britain h2,
body.theme-britain h3,
body.theme-britain h4,
body.theme-britain h5,
body.theme-britain h6 {
    color: #ffffff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

body.theme-britain .text-secondary,
body.theme-britain p,
body.theme-britain span {
    color: #9C8B64 !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.6);
}

/* Rising Sun theme header - make background darker for logo visibility */
body.theme-japan .header {
    background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
    border-bottom: 2px solid #BC002D !important;
}

body.theme-japan .logo-container,
body.theme-japan .armor-hub-text {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

/* Light Mode */
body.light-mode {
    background: radial-gradient(circle at 20% 80%, rgba(211, 47, 47, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(211, 47, 47, 0.05) 0%, transparent 50%),
    linear-gradient(135deg, var(--bg-primary) 0%, #e8e8e8 50%, var(--bg-primary) 100%);
    color: var(--text-primary);
    position: relative;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" stroke="%23f0f0f0" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="8.5"/><circle cx="10" cy="10" r="2.5"/></svg>') 10 10, auto;

    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --accent: var(--accent-light);
    --accent-secondary: var(--accent-secondary-light);
    --border: var(--border-light);
    --shadow: var(--shadow-light);
}

body.light-mode::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(
            45deg,
            transparent,
            transparent 2px,
            rgba(0, 0, 0, 0.02) 2px,
            rgba(0, 0, 0, 0.02) 4px
    );
    pointer-events: none;
    z-index: -1;
}

.container {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
/* Header with high z-index to ensure proper layering */
.header {
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary)),
    repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(0, 0, 0, 0.1) 10px,
            rgba(0, 0, 0, 0.1) 20px
    );
    padding: 1.5rem 0;
    box-shadow: 0 4px 20px var(--shadow);
    position: sticky;
    top: 0;
    z-index: 999999999;
    position: relative;
    overflow: visible;
}

.header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.light-mode .header {
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary)),
    repeating-linear-gradient(
            45deg,
            transparent,
            transparent 10px,
            rgba(255, 255, 255, 0.1) 10px,
            rgba(255, 255, 255, 0.1) 20px
    );
    box-shadow: 0 4px 20px var(--shadow);
}

.light-mode .header::before {
    background: radial-gradient(circle at 20% 50%, rgba(0, 0, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0, 0, 0, 0.05) 0%, transparent 50%);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 999999999;
    gap: 2rem;
}

/* Game Version Dropdown */
.game-version-dropdown {
    position: relative;
    z-index: 100;
}

.game-version-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    padding: 0.75rem 1.25rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    backdrop-filter: blur(10px);
    min-width: 120px;
    justify-content: space-between;
}

.game-version-toggle:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

/* REMOVED: This rule was conflicting with the z-index fix below */

.game-version-menu.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.version-option {
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-primary);
    font-size: 0.9rem;
}

.version-option:hover {
    background: rgba(255, 255, 255, 0.1);
}

.version-option.active {
    background: rgba(255, 68, 68, 0.2);
    color: #ff4444;
}

.version-option i {
    font-size: 0.8rem;
    opacity: 0.7;
}

.version-option.active i {
    opacity: 1;
}

.logo {
    display: flex;
    align-items: center;
    position: relative;
}

.logo-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    position: relative;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
}

.logo-container:hover {
    transform: scale(1.02);
}

.logo-container::after {
    content: '';
    position: absolute;
    right: -2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 3rem;
    background: linear-gradient(to bottom, transparent, rgba(255, 255, 255, 0.3), transparent);
}

.light-mode .logo-container::after {
    background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.3), transparent);
}

/* Hell Let Loose Logo Styling */
.logo-left {
    display: flex;
    align-items: center;
}

.hll-logo {
    height: 120px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
    transition: all 0.3s ease;
}

.hll-logo-white {
    display: block;
}

.hll-logo-black {
    display: none;
}

.light-mode .hll-logo-white {
    display: none;
}

.light-mode .hll-logo-black {
    display: block;
}

/* Armor Hub Text Styling */
.armor-hub-text {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 2.2rem;
    color: var(--text-primary);
    text-shadow: 3px 3px 0px #000000,
    6px 6px 0px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(255, 255, 255, 0.5);
    letter-spacing: 4px;
    position: relative;
    transition: all 0.3s ease;
}

.light-mode .armor-hub-text {
    text-shadow: 3px 3px 0px #000000,
    6px 6px 0px rgba(0, 0, 0, 0.5),
    0 0 20px rgba(0, 0, 0, 0.3);
}

/* Unified hover effect for entire logo container */
.logo-container:hover {
    transform: scale(1.05);
}

.logo-container:hover .hll-logo {
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.4));
}

.logo-container:hover .armor-hub-text {
    text-shadow: 3px 3px 0px #000000,
    6px 6px 0px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 68, 68, 0.5);
}

.theme-toggle {
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 120px;
    justify-content: center;
}

.theme-toggle::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 50%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.theme-toggle:hover::before {
    opacity: 1;
}

.light-mode .theme-toggle {
    background: rgba(0, 0, 0, 0.15);
    border: 3px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.light-mode .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Soviet theme toggle styling - ensure text is visible */
body.theme-soviet .theme-toggle {
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(255, 215, 0, 0.6);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 215, 0, 0.2);
}

body.theme-soviet .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.8);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 215, 0, 0.3);
}

/* Japanese theme toggle styling - ensure text is visible */
body.theme-japan .theme-toggle {
    background: rgba(0, 0, 0, 0.3);
    border: 3px solid rgba(188, 0, 45, 0.6);
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(188, 0, 45, 0.2);
}

body.theme-japan .theme-toggle:hover {
    background: rgba(0, 0, 0, 0.4);
    border-color: rgba(188, 0, 45, 0.8);
    color: #ffffff;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(188, 0, 45, 0.3);
}

/* Theme Dropdown Selector */
.theme-selector {
    position: relative;
}

.theme-dropdown {
    background: rgba(255, 255, 255, 0.15);
    border: 3px solid rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    padding: 0.75rem 1.5rem;
    border-radius: 25px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    position: relative;
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
    min-width: 140px;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF9800' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    padding-right: 40px;
}

.theme-dropdown:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.theme-dropdown:focus {
    outline: none;
    border-color: rgba(255, 152, 0, 0.8);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 0 0 2px rgba(255, 152, 0, 0.3);
}

.theme-dropdown option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

/* Light mode dropdown styling */
.light-mode .theme-dropdown {
    background: rgba(0, 0, 0, 0.15);
    border: 3px solid rgba(0, 0, 0, 0.4);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.light-mode .theme-dropdown:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(0, 0, 0, 0.6);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

/* Navigation Styles - Ensure proper z-index */
.nav {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--accent);
    padding: 0;
    position: relative;
    z-index: 999999998;
}

.light-mode .nav {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--accent);
}

.nav-list {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    list-style: none;
    display: flex;
    gap: 0;
    justify-content: center;
}

.nav-link {
    color: var(--text-primary);
    text-decoration: none;
    padding: 1.5rem 2rem;
    display: block;
    transition: all 0.3s ease;
    position: relative;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.light-mode .nav-link {
    color: var(--text-primary);
}

.nav-link:hover,
.nav-link.active {
    color: #ffffff;
    background-color: var(--accent);
    border-bottom-color: var(--accent);
}

.light-mode .nav-link:hover,
.light-mode .nav-link.active {
    color: #ffffff;
    background-color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Main Content Styles - Ensure proper stacking context */
.main-content {
    flex: 1;
    max-width: 1400px;
    margin: 0 auto;
    padding: 2rem;
    width: 100%;
    position: relative;
    z-index: 1;
}

.section {
    display: none;
    animation: fadeIn 0.5s ease-in;
    position: relative;
    z-index: 1;
}

.section.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
    position: relative;
    z-index: -999999 !important;
}

.section-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #f5f5f5;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.light-mode .section-header h2 {
    color: var(--accent);
}

.section-header p {
    font-size: 1.2rem;
    color: #e8e8e8;
    max-width: 600px;
    margin: 0 auto;
}

.light-mode .section-header p {
    color: var(--text-secondary);
}

.update-info {
    font-size: 0.9rem;
    color: var(--accent);
    font-weight: 600;
    margin-top: 0.5rem;
    opacity: 0.8;
    font-style: italic;
}

.light-mode .update-info {
    color: var(--accent);
}


/* Full-screen mode for artillery calculator and armor sights */
.fullscreen-mode .header,
.fullscreen-mode .nav,
.fullscreen-mode .theme-toggle {
    display: none !important;
}

.fullscreen-mode .ranging-tool.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    background: var(--bg-primary);
    border-radius: 0;
    margin: 0;
    padding: 2rem;
    box-shadow: none;
    overflow-y: auto;
}

.fullscreen-mode .ranging-tool.expanded .ranging-tool-content {
    max-height: none;
    height: auto;
}

.fullscreen-close-btn {
    position: fixed;
    top: 1rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
}

.fullscreen-close-btn:hover {
    background: var(--accent-secondary);
}

/* Hide fullscreen close button when scope viewer is active */
.scope-viewer.active ~ .fullscreen-close-btn,
body:has(.scope-viewer.active) .fullscreen-close-btn {
    display: none !important;
}

/* Mobile optimization for fullscreen mode */
@media (max-width: 768px) {
    .fullscreen-mode .ranging-tool.expanded {
        padding: 1rem;
    }

    .fullscreen-close-btn {
        top: 0.5rem;
        left: 50%;
        transform: translateX(-50%);
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
}

/* Overview Section - Extremely low z-index to ensure dropdown visibility */
.overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
    position: relative;
    z-index: -999999 !important;
    /* Prevent stacking context interference */
    transform: translateZ(0);
    will-change: z-index;
}

.overview-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 2rem;
    border-radius: 15px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    backdrop-filter: blur(10px);
    position: relative;
    z-index: -999999 !important;
    overflow: hidden;
}

.light-mode .overview-card {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.overview-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
}

.light-mode .overview-card::before {
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
}

.overview-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--shadow);
}

.light-mode .overview-card:hover {
    box-shadow: 0 10px 20px var(--shadow);
}

.overview-card i {
    font-size: 3rem;
    color: var(--accent);
    margin-bottom: 1rem;
}

.light-mode .overview-card i {
    color: var(--accent);
}

.overview-card h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #f5f5f5;
}

.overview-card p {
    color: #e8e8e8;
    line-height: 1.6;
}

.light-mode .overview-card p {
    color: var(--text-secondary);
}

/* Featured Card Styles - Extremely low z-index to ensure dropdown visibility */
.featured-card {
    grid-column: 1 / -1;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border: 3px solid rgba(255, 255, 255, 0.4);
    padding: 3rem 2rem;
    border-radius: 20px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    backdrop-filter: blur(15px);
    position: relative;
    z-index: -999999 !important;
    overflow: hidden;
}

/* Featured Videos Section - Minimalist and Compact */
/* Featured Video Section */
.featured-video-section {
    margin: 3rem auto 2rem;
    max-width: 900px;
    padding: 0 1rem;
}

.featured-video-header {
    text-align: center;
    margin-bottom: 1.5rem;
    position: relative;
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb), 0.7));
    color: var(--background-color);
    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.4);
    animation: pulse-glow 2s ease-in-out infinite;
}

@keyframes pulse-glow {
    0%, 100% {
        box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.4);
    }
    50% {
        box-shadow: 0 6px 25px rgba(var(--accent-rgb), 0.6);
    }
}

.featured-badge i {
    font-size: 1rem;
    animation: spin-slow 3s linear infinite;
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.featured-video-header h3 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 0.5rem;
    font-family: 'Orbitron', sans-serif;
    text-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.3);
}

.featured-video-header h3 i {
    margin-right: 0.75rem;
}

.featured-video-header p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

.featured-video-container {
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid var(--accent-color);
    border-radius: 16px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(var(--accent-rgb), 0.2);
    transition: all 0.3s ease;
}

.featured-video-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(var(--accent-rgb), 0.3);
    border-color: var(--primary-color);
}

.featured-video-footer {
    margin-top: 1rem;
    text-align: center;
}

.featured-video-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, var(--accent-color), rgba(var(--accent-rgb), 0.8));
    color: var(--background-color);
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
}

.featured-video-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.5);
    background: linear-gradient(135deg, var(--primary-color), var(--accent-color));
}

.featured-video-link i {
    font-size: 1.2rem;
}

.video-section {
    margin-top: 2rem;
    padding: 0 1rem;
}

.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    max-width: 1000px;
    margin: 0 auto;
}

.video-card {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
    padding: 1rem;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
}

.video-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.video-header {
    margin-bottom: 0.75rem;
    text-align: center;
}

.video-header h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.video-header h3 i {
    color: var(--accent);
    font-size: 0.9rem;
}

.video-header p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0.25rem 0 0 0;
    font-style: italic;
}

.video-footer {
    margin-top: 0.75rem;
    text-align: center;
}

.video-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #ff0000;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    border: 1px solid #ff0000;
    border-radius: 6px;
    transition: all 0.3s ease;
    background: rgba(255, 0, 0, 0.1);
}

.video-link:hover {
    background: #ff0000;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3);
}

.video-link i {
    font-size: 1rem;
}

/* Tutorial Videos Section */
.tutorial-videos-section {
    margin-top: 2rem;
    margin-bottom: 3rem;
    padding: 2rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-videos-section h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 1.5rem 0;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}

.tutorial-videos-section h3 i {
    color: var(--accent);
    font-size: 1.25rem;
}

.tutorial-video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 2rem;
    max-width: 1000px;
    margin: 0 auto;
}

.tutorial-video-card {
    background: rgba(255, 255, 255, 0.08);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.tutorial-video-card:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.tutorial-video-header {
    margin-bottom: 1rem;
    text-align: center;
}

.tutorial-video-header h4 {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0 0 0.5rem 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.tutorial-video-header h4 i {
    color: var(--accent);
    font-size: 1rem;
}

.tutorial-video-header p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
    font-style: italic;
}

.tutorial-video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 8px;
    overflow: hidden;
}

.tutorial-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .tutorial-videos-section {
        margin-top: 2rem;
        padding: 1.5rem;
    }

    .tutorial-video-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .tutorial-video-card {
        padding: 1rem;
    }

    .tutorial-videos-section h3 {
        font-size: 1.25rem;
    }
}

.video-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 8px;
    overflow: hidden;
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

.video-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent), var(--accent-secondary));
}

.video-header {
    text-align: center;
    margin-bottom: 1rem;
}

.video-header h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.video-header h3 i {
    font-size: 1rem;
    color: #ff4444;
    animation: pulse 2s ease-in-out infinite;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    transition: transform 0.3s ease;
}

.video-wrapper:hover iframe {
    transform: scale(1.02);
}

/* Light mode adjustments */
.light-mode .video-card {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.2);
}

.light-mode .video-card:hover {
    border-color: rgba(255, 68, 68, 0.6);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

/* Pulse animation for play icon */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

.light-mode .featured-card {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(211, 47, 47, 0.1) 100%);
    border: 3px solid var(--accent);
}

.featured-card::before {
    background: linear-gradient(90deg, var(--accent), #ff4444, var(--accent-secondary));
    height: 6px;
}

.light-mode .featured-card::before {
    background: linear-gradient(90deg, var(--accent), #d32f2f, var(--accent-secondary));
}

/* Special styling for identification card with greyscale hover effect */
.identification-card {
    position: relative;
    overflow: hidden;
}

.identification-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/360/panther/1.webp');
    background-size: cover;
    background-position: center 0%;
    background-repeat: no-repeat;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    z-index: 1;
    border-radius: 15px;
    clip-path: inset(0 0 0 0);
}

.identification-card i,
.identification-card h3,
.identification-card p {
    position: relative;
    z-index: 15;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.identification-card:hover i,
.identification-card:hover h3,
.identification-card:hover p {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 15;
}

.identification-card:hover .card-background-image {
    opacity: 0.9;
    filter: grayscale(0%);
    transform: scale(1.3);
    z-index: 10;
}

.identification-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(156, 39, 176, 0.5);
    z-index: 5;
}

/* Penetration card with greyscale hover effect */

/* Ranging card with greyscale hover effect */
.ranging-card {
    position: relative;
    overflow: hidden;
}

.ranging-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/360/sherman-75-jumbo/7.webp');
    background-size: cover;
    background-position: center 0%;
    background-repeat: no-repeat;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    z-index: 1;
    border-radius: 15px;
    clip-path: inset(0 0 0 0);
}

.ranging-card i,
.ranging-card h3,
.ranging-card p {
    position: relative;
    z-index: 15;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.ranging-card:hover i,
.ranging-card:hover h3,
.ranging-card:hover p {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 15;
}

.ranging-card:hover .card-background-image {
    opacity: 0.9;
    filter: grayscale(0%);
    transform: scale(1.3);
    z-index: 10;
}

.ranging-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 193, 7, 0.5);
    z-index: 5;
}

/* Community card with greyscale hover effect */
.community-card {
    position: relative;
    overflow: hidden;
}

.community-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/360/sherman-76-jumbo/7.webp');
    background-size: cover;
    background-position: center 0%;
    background-repeat: no-repeat;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    z-index: 1;
    border-radius: 15px;
    clip-path: inset(0 0 0 0);
}

.community-card i,
.community-card h3,
.community-card p {
    position: relative;
    z-index: 15;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.community-card:hover i,
.community-card:hover h3,
.community-card:hover p {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 15;
}

.community-card:hover .card-background-image {
    opacity: 0.9;
    filter: grayscale(0%);
    transform: scale(1.3);
    z-index: 10;
}

.community-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0, 150, 255, 0.4);
    z-index: 5;
}

/* Tactics card with greyscale hover effect */
.tactics-card {
    position: relative;
    overflow: hidden;
}

.tactics-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/360/tiger-i/1.webp');
    background-size: cover;
    background-position: center 0%;
    background-repeat: no-repeat;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    z-index: 1;
    border-radius: 15px;
    clip-path: inset(0 0 0 0);
}

.tactics-card i,
.tactics-card h3,
.tactics-card p {
    position: relative;
    z-index: 15;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.tactics-card:hover i,
.tactics-card:hover h3,
.tactics-card:hover p {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 15;
}

.tactics-card:hover .card-background-image {
    opacity: 0.9;
    filter: grayscale(0%);
    transform: scale(1.3);
    z-index: 10;
}

.tactics-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(76, 175, 80, 0.5);
    z-index: 5;
}

.featured-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 15px 35px rgba(255, 68, 68, 0.5);
    border-color: #ff4444;
}

.light-mode .featured-card:hover {
    box-shadow: 0 15px 30px rgba(211, 47, 47, 0.3);
    border-color: #d32f2f;
}

.featured-card i {
    font-size: 3.5rem;
    color: var(--accent);
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 4px rgba(255, 68, 68, 0.3));
    animation: pulse 3s ease-in-out infinite;
    /* Replace icon with tank marker image */
    background-image: url('images/HLL_Icons/Map Markers/icn_tank_marker.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 5rem;
    height: 5rem;
    display: inline-block;
    /* Use mask to apply theme color to the icon */
    background-color: var(--accent);
    mask: url('images/HLL_Icons/Map Markers/icn_tank_marker.png') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('images/HLL_Icons/Map Markers/icn_tank_marker.png') no-repeat center;
    -webkit-mask-size: contain;
}

.light-mode .featured-card i {
    color: var(--accent);
    filter: drop-shadow(0 4px 8px rgba(211, 47, 47, 0.5));
    /* Light mode tank marker with accent color */
    background-color: var(--accent);
    mask: url('images/HLL_Icons/Map Markers/icn_tank_marker.png') no-repeat center;
    mask-size: contain;
    -webkit-mask: url('images/HLL_Icons/Map Markers/icn_tank_marker.png') no-repeat center;
    -webkit-mask-size: contain;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.02);
    }
}

.featured-card h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    background: linear-gradient(45deg, var(--accent), #ff4444);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.light-mode .featured-card h3 {
    background: linear-gradient(45deg, var(--accent), #d32f2f);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.featured-card p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.light-mode .featured-card p {
    color: var(--text-secondary);
}

/* Responsive design for featured card */
@media (max-width: 768px) {
    .featured-card i {
        font-size: 3rem;
    }

    .featured-card h3 {
        font-size: 1.8rem;
    }

    .featured-card p {
        font-size: 1rem;
    }
}

/* Faction Filter - Old style removed, see new filter dropdown styles below */

.faction-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 1rem 1.5rem;
    border-radius: 8px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.faction-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, transparent 50%);
    pointer-events: none;
    transition: all 0.3s ease;
}

.faction-text {
    text-align: center;
    font-size: 0.85rem;
    line-height: 1.2;
}

.faction-flag {
    width: 24px;
    height: 16px;
    border-radius: 2px;
    transition: all 0.3s ease;
    flex-shrink: 0;
    position: relative;
    display: inline-block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* WWII-era flag styling for historical accuracy */
.faction-flag::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.1), transparent);
    border-radius: 3px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.faction-btn:hover .faction-flag::after,
.faction-btn.active .faction-flag::after {
    opacity: 1;
}

/* Flag Design - Only keeping the globe for All Factions */
.flag-globe {
    background: linear-gradient(45deg, #4CAF50, #2196F3, #FF9800, #9C27B0);
    background-size: 200% 200%;
    animation: globeRotate 3s ease-in-out infinite;
}

@keyframes globeRotate {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.light-mode .faction-btn {
    background-color: var(--bg-secondary-light);
    border: 2px solid var(--border-light);
    color: var(--text-secondary-light);
}

.faction-btn:hover,
.faction-btn.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(255, 68, 68, 0.3);
}

.faction-btn:hover::before,
.faction-btn.active::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

/* Special styling for All Factions button with flag */
.faction-btn[data-faction="all"] {
    justify-content: space-between;
    gap: 0.75rem;
}

.faction-btn[data-faction="all"] .faction-text {
    flex: 1;
    text-align: left;
}

.faction-btn:hover .faction-flag,
.faction-btn.active .faction-flag {
    transform: scale(1.1) rotate(2deg);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.5));
}

.light-mode .faction-btn:hover,
.light-mode .faction-btn.active {
    background-color: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 15px rgba(211, 47, 47, 0.3);
}

.light-mode .faction-btn::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, transparent 50%);
}

.light-mode .faction-btn:hover::before,
.light-mode .faction-btn.active::before {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.1) 0%, transparent 50%);
}

/* Filter Dropdown Styles */
.faction-filter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.filter-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

/* Comparison Toggle Button */
.compare-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: var(--card-bg);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.compare-toggle:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.compare-toggle.active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Tank Comparison Panel */
.comparison-panel {
    background: var(--card-bg);
    border: 1px solid var(--accent-color);
    border-radius: 8px;
    margin: 1rem 0;
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.3s ease-out;
    display: none;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.comparison-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.comparison-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.5rem;
    font-weight: 700;
}

.comparison-header h3 i {
    color: var(--accent-color);
    margin-right: 0.5rem;
}

.comparison-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.clear-comparison {
    background: #e74c3c;
    color: white;
    border: none;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.9rem;
    font-weight: 600;
}

.clear-comparison:hover {
    background: #c0392b;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.3);
}

.close-comparison {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.close-comparison:hover {
    background: var(--accent-color);
    color: white;
    transform: rotate(90deg);
}

.comparison-content {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    max-width: 1200px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.comparison-tanks {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: start;
    margin-bottom: 1rem;
}

.comparison-tank {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 0.75rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
    text-align: center;
}

.comparison-tank:hover {
    border-color: var(--accent-color);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.comparison-tank-info h4 {
    margin: 0 0 0.25rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
}

.comparison-tank-info p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.8rem;
}

.comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.vs-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--accent-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.comparison-tank-content {
    margin-top: 1rem;
}

.comparison-tank-content h5 {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 700;
}

.comparison-tank-content .tank-type {
    color: var(--accent-color);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.comparison-tank-content .tank-faction {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

.comparison-stats {
    background: var(--bg-secondary);
    border-radius: 6px;
    padding: 1rem;
    border: 1px solid var(--border-color);
}

.comparison-stats h4 {
    margin: 0 0 0.75rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
}

.comparison-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.comparison-stat {
    background: var(--card-bg);
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.comparison-stat:hover {
    border-color: var(--accent-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.comparison-stat-label {
    font-size: 0.7rem;
    color: var(--text-secondary);
    margin-bottom: 0.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

.comparison-stat-values {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0.5rem;
    align-items: center;
}

.comparison-stat-value {
    font-size: 0.9rem;
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    padding: 0.3rem 0.4rem;
    border-radius: 3px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.comparison-stat-value.winner {
    background: var(--accent-color);
    color: white;
    border-color: var(--accent-color);
    font-weight: 700;
    transform: scale(1.02);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.comparison-stat-difference {
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    padding: 0.2rem 0.3rem;
    border-radius: 3px;
    min-width: 40px;
}

.comparison-stat-difference.positive {
    color: #4CAF50;
    background: rgba(76, 175, 80, 0.15);
}

.comparison-stat-difference.negative {
    color: #F44336;
    background: rgba(244, 67, 54, 0.15);
}

.comparison-stat-difference.neutral {
    color: var(--text-secondary);
    background: rgba(158, 158, 158, 0.15);
}

/* Tank Selection Modal */
.tank-selection-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    z-index: 3000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.tank-selection-modal.show {
    display: flex;
}

.tank-selection-content {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 2rem;
    max-width: 800px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.tank-selection-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid var(--border-color);
}

.tank-selection-header h3 {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.3rem;
    font-weight: 700;
}

.tank-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.tank-selection-item {
    background: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.tank-selection-item:hover {
    border-color: var(--accent-color);
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.tank-selection-item h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.tank-selection-item .tank-type {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.tank-selection-item .tank-faction {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.tank-selection-item:hover .tank-type,
.tank-selection-item:hover .tank-faction {
    color: rgba(255, 255, 255, 0.8);
}

/* Tank Compare Button */
.tank-card .compare-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: #2c3e50;
    color: white;
    border: 2px solid #34495e;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    opacity: 0;
    transform: scale(0.8);
    z-index: 10;
    font-size: 16px;
    font-weight: bold;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tank-card:hover .compare-btn {
    opacity: 1;
    transform: scale(1);
}

.compare-btn:hover {
    background: #34495e;
    border-color: #2c3e50;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.compare-btn.selected {
    background: #27ae60;
    border-color: #2ecc71;
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(39, 174, 96, 0.4);
}

.compare-btn.selected:hover {
    background: #2ecc71;
    border-color: #27ae60;
    transform: scale(1.1);
}

/* Responsive Design for Comparison */
@media (max-width: 768px) {
    .comparison-tanks {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .comparison-vs {
        order: -1;
        height: auto;
        margin: 1rem 0;
    }

    .vs-circle {
        width: 50px;
        height: 50px;
        font-size: 1rem;
    }

    .comparison-stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tank-selection-grid {
        grid-template-columns: 1fr;
    }
}

.filter-group {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* Responsive design for faction buttons */
@media (max-width: 768px) {
    .faction-btn {
        min-width: 140px;
        padding: 0.6rem 1rem;
    }

    .faction-text {
        font-size: 0.8rem;
    }

    .faction-flag {
        width: 20px;
        height: 14px;
    }
}

@media (max-width: 480px) {
    .faction-btn {
        min-width: 120px;
        padding: 0.5rem 0.8rem;
        gap: 0.5rem;
    }

    .faction-text {
        font-size: 0.75rem;
    }

    .faction-flag {
        width: 18px;
        height: 12px;
    }
}

.filter-dropdown {
    position: relative;
    display: inline-block;
}

.filter-toggle {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.light-mode .filter-toggle {
    background-color: var(--bg-secondary-light);
    border: 2px solid var(--border-light);
    color: var(--text-secondary-light);
}

.filter-toggle:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
    transform: scale(1.05);
}

.light-mode .filter-toggle:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}

.filter-dropdown-content {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 16px var(--shadow);
    z-index: 1000;
    min-width: 200px;
    margin-top: 0.5rem;
}

.light-mode .filter-dropdown-content {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 8px 16px var(--shadow);
}

.filter-dropdown-content.show {
    display: block;
}

.filter-section {
    padding: 1rem;
}

.filter-section h4 {
    color: var(--text-primary);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.light-mode .filter-section h4 {
    color: var(--text-primary);
}

.filter-option {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 0.9rem;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.light-mode .filter-option {
    color: var(--text-secondary);
}

.filter-option:hover {
    background-color: var(--accent);
    color: var(--text-primary);
}

.light-mode .filter-option:hover {
    background-color: var(--accent);
}

.filter-option.active {
    background-color: var(--accent);
    color: var(--text-primary);
    font-weight: 600;
}

.light-mode .filter-option.active {
    background-color: var(--accent);
}

/* Tank Grid */
.tank-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.tank-card {
    background-color: transparent;
    border: 2px solid var(--border);
    border-radius: 10px;
    overflow: visible;
    transition: all 0.3s ease;
    position: relative;
    cursor: default;
    padding: 1.5rem;
}

.light-mode .tank-card {
    background-color: transparent;
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.tank-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px var(--shadow);
}

.light-mode .tank-card:hover {
    box-shadow: 0 8px 16px var(--shadow);
}

.tank-card.expanded {
    grid-column: 1 / -1;
    max-width: none;
    margin: 2rem 0;
}

.tank-card.expanded .tank-details {
    display: block;
}

.tank-details {
    display: none;
    padding: 2rem;
    border-top: 2px solid var(--border);
    background-color: var(--bg-primary);
}

.light-mode .tank-details {
    background-color: var(--bg-primary);
    border-top: 2px solid var(--border);
}

.tank-details-header {
    text-align: center;
    margin-bottom: 2rem;
}

.tank-details-header h2 {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0.5rem;
}

.light-mode .tank-details-header h2 {
    color: var(--accent);
}

.tank-details-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* Compact Stats Grid */
.stats-grid-compact {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.stat-group {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1rem;
    transition: all 0.3s ease;
}

.stat-group:hover {
    border-color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px var(--shadow);
}

.stat-group h4 {
    color: var(--accent);
    margin-bottom: 0.75rem;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    border-bottom: 1px solid var(--border);
    padding-bottom: 0.5rem;
}

.stat-group h4 i {
    font-size: 0.9rem;
}

.stat-pair {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    max-width: 100%;
}

.stat-label {
    color: var(--text-secondary);
    font-weight: 500;
    flex: 1;
}

.stat-value {
    color: var(--text-primary);
    font-weight: 600;
    text-align: center;
    min-width: 60px;
}

.tank-stats-section {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
}

.light-mode .tank-stats-section {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.tank-stats-section h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.light-mode .tank-stats-section h3 {
    color: var(--accent);
}

.tank-stats-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.tank-stats-table th,
.tank-stats-table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.light-mode .tank-stats-table th,
.light-mode .tank-stats-table td {
    border-bottom: 1px solid var(--border);
}

.tank-stats-table th {
    background-color: var(--accent);
    color: var(--text-primary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.light-mode .tank-stats-table th {
    background-color: var(--accent);
}

.tank-stats-table tr:hover {
    background-color: rgba(255, 68, 68, 0.1);
}

.light-mode .tank-stats-table tr:hover {
    background-color: rgba(211, 47, 47, 0.1);
}

.tank-performance-section {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 1.5rem;
}

.light-mode .tank-performance-section {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.tank-performance-section h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.light-mode .tank-performance-section h3 {
    color: var(--accent);
}

.tank-performance-section p {
    margin-bottom: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

.light-mode .tank-performance-section p {
    color: var(--text-secondary);
}

@media (max-width: 768px) {
    .tank-details-content {
        grid-template-columns: 1fr;
    }

    .tank-card.expanded {
        margin: 1rem 0;
    }
}

.tank-image {
    width: 100%;
    height: 220px;
    background: transparent !important;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    background-size: cover;
    background-position: center;
    z-index: 1;
}

/* Dynamic height when tank card is expanded */
.tank-card.expanded .tank-image {
    height: 800px;
}

.light-mode .tank-image {
    background: linear-gradient(45deg, var(--accent), var(--accent-secondary));
}

.tank-image i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Background Selector */
.background-selector {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    gap: 50px;
    z-index: 10;
    background: rgba(0, 0, 0, 0.6);
    padding: 8px 20px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

/* Only show background selector when tank card is expanded */
.tank-card.expanded .background-selector {
    display: flex;
}

.background-selector:hover {
    opacity: 1;
}

.bg-btn {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.5rem;
    backdrop-filter: blur(3px);
}

.bg-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.7);
    transform: scale(1.1);
}

.bg-btn.active {
    background: var(--accent);
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 6px rgba(255, 152, 0, 0.5);
    transform: scale(1.1);
}

/* Background Image Classes */
.tank-image.bg-grass {
    background: url('images/360/backgrounds/Grass.jpg') center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

.tank-image.bg-snow {
    background: url('images/360/backgrounds/Snow.jpg') center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

.tank-image.bg-desert {
    background: url('images/360/backgrounds/desert.jpg') center center !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    z-index: 1;
}

/* Ensure tank-360-container doesn't block the background */
.tank-360-container {
    background: transparent !important;
    z-index: 2;
}

/* Ensure tank-360-image doesn't block the background */
.tank-360-image {
    background: transparent !important;
    z-index: 2;
}

/* Light mode background adjustments */
.light-mode .tank-image.bg-default {
    background: linear-gradient(45deg, var(--accent), var(--accent-secondary));
}

.tank-info {
    padding: 1.5rem;
    position: relative;
}

.tank-expand-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.4);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    font-size: 1.2rem;
    backdrop-filter: blur(10px);
}

.light-mode .tank-expand-btn {
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    box-shadow: 0 2px 8px rgba(211, 47, 47, 0.3);
}

.tank-expand-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(255, 68, 68, 0.4);
}

.light-mode .tank-expand-btn:hover {
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.4);
}

.tank-expand-btn.expanded {
    background: linear-gradient(135deg, #ff8c00, #ff6b35);
    transform: rotate(45deg);
}

.light-mode .tank-expand-btn.expanded {
    background: linear-gradient(135deg, #e65100, #d84315);
}

.tank-card.expanded .tank-expand-btn {
    background: linear-gradient(135deg, #ff8c00, #ff6b35);
    transform: rotate(45deg);
}

.light-mode .tank-card.expanded .tank-expand-btn {
    background: linear-gradient(135deg, #e65100, #d84315);
}

.tank-name {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.tank-faction {
    display: inline-block;
    background-color: var(--accent);
    color: var(--text-primary);
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.light-mode .tank-faction {
    background-color: var(--accent);
}

.tank-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.stat {
    text-align: center;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.25rem;
}

.light-mode .stat-label {
    color: var(--text-secondary);
}

.stat-value {
    font-weight: 700;
    font-size: 1.1rem;
    color: var(--accent);
    text-align: center;
}

.light-mode .stat-value {
    color: var(--accent);
}

.tank-description {
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.light-mode .tank-description {
    color: var(--text-secondary);
}

.chart-container {
    overflow-x: auto;
    width: 100%;
}

/* Ranging Section */
.ranging-content {
    max-width: 800px;
    margin: 0 auto;
}

.ranging-tools {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2rem;
    max-width: 3200px;
    margin: 0 auto;
}

.ranging-tool {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    height: 1000px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.ranging-tool:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.ranging-tool.expanded {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    border-radius: 0;
    padding: 20rem 3rem 3rem 3rem;
    overflow-y: auto;
}

.ranging-tool.expanded .expand-btn {
    display: none;
}

.ranging-tool.minimized {
    height: 0;
    padding: 0;
    margin: 0;
    border: none;
    overflow: hidden;
    opacity: 0;
}

.expand-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.expand-btn:hover {
    background: linear-gradient(135deg, #ff5252, #d84315);
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}

.expand-close-btn {
    position: fixed;
    top: 18rem;
    right: 2rem;
    background: #ff4444;
    color: white;
    border: 2px solid #ffffff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.expand-close-btn:hover {
    background: #ff6666;
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}

/* Raz Mode - Fix close button visibility */
body.theme-unhinged .expand-close-btn {
    background: #ff0000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 4px 12px rgba(255, 0, 0, 0.8) !important;
}

body.theme-unhinged .expand-close-btn:hover {
    background: #ff3333 !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(255, 0, 0, 0.9) !important;
}

.light-mode .ranging-tool {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.ranging-tool h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding-right: 6rem;
}

.calculator {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex: 1;
    justify-content: flex-start;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-group label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
}

.input-group input,
.input-group select {
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: 5px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Exo 2', sans-serif;
    transition: all 0.3s ease;
}

.light-mode .input-group input,
.light-mode .input-group select {
    border: 2px solid var(--border);
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

.input-group input:focus,
.input-group select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(255, 68, 68, 0.1);
}

.light-mode .input-group input:focus,
.light-mode .input-group select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
}

.calculate-btn {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 1rem 2rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}

/* WIP Badge Styling */
.wip-badge {
    background: linear-gradient(135deg, #ffa500, #ff8c00);
    color: white;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-left: 0.5rem;
}

/* WIP Message Styling */
.wip-message {
    text-align: center;
    padding: 2rem 1rem;
}

.wip-message p {
    margin-bottom: 1rem;
    color: var(--text-secondary);
}

/* Sights Content Styling */
.sights-content {
    text-align: center;
}

.sights-content p {
    margin-bottom: 1.5rem;
    color: var(--text-secondary);
}

.sights-description {
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 1.5rem;
    padding: 0 1rem;
    color: var(--text-secondary);
}

.sights-note {
    font-size: 0.9rem;
    line-height: 1.4;
    margin-bottom: 1.5rem;
    padding: 0.75rem 1rem;
    background-color: var(--accent-color);
    color: var(--background-color);
    border-radius: 6px;
    border-left: 4px solid var(--primary-color);
    font-weight: 500;
}

.sights-instructions {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 1rem;
    margin-top: 1rem;
    text-align: left;
}

.sights-instructions h5 {
    color: var(--accent);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sights-instructions ul {
    list-style: none;
    padding: 0;
}

.sights-instructions li {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
    font-size: 0.9rem;
}

.sights-instructions li:before {
    content: "•";
    color: var(--accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Tank Selection System */
.sights-selector {
    margin-bottom: 1rem;
}

.sights-selector h4 {
    color: var(--text-primary);
    margin-bottom: 1rem;
    font-size: 1.1rem;
}

.tank-faction-filter {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.faction-filter-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
}

.faction-filter-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.faction-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
}

.tank-type-filter {
    margin-bottom: 1rem;
    text-align: center;
}

.type-filter-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.type-filter-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

.type-filter-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
}

.tank-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 0.5rem;
    max-height: 250px;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-bottom: 1rem;
}

.tank-option {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    padding: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    min-height: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.tank-option:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.tank-option:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.tank-option.selected {
    background: var(--accent);
    border-color: var(--accent);
}

.tank-option img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-bottom: 0.3rem;
}

.tank-option span {
    display: block;
    font-size: 0.75rem;
    color: var(--text-primary);
    line-height: 1.2;
}

/* Scope Viewer */
.scope-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

.scope-viewer.active {
    display: flex;
}

.scope-content {
    background: rgba(20, 20, 20, 0.95);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    position: relative;
    max-width: 900px;
    max-height: 700px;
    overflow: hidden;
    margin: 0 auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
}

.scope-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    width: 100%;
}

.scope-header h4 {
    color: var(--text-primary);
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

.close-scope-btn {
    background: #ff0000;
    border: 3px solid #ffffff;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: bold;
    transition: background 0.2s ease;
    z-index: 99999;
    position: fixed;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    box-shadow: 0 6px 20px rgba(255, 0, 0, 0.8);
    /* Add padding area for easier clicking */
    padding: 10px;
}

.scope-viewer.active .close-scope-btn {
    display: flex;
}

.close-scope-btn:hover {
    background: #ff3333;
    border-color: #ffffff;
    color: white;
    /* Keep the same position - no transform changes */
    transform: translateY(-50%);
    box-shadow: 0 8px 25px rgba(255, 0, 0, 1);
}

@keyframes pulse {
    0% {
        box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
    }
    50% {
        box-shadow: 0 6px 20px rgba(255, 0, 0, 0.9), 0 0 0 10px rgba(255, 0, 0, 0.2);
    }
    100% {
        box-shadow: 0 6px 20px rgba(255, 0, 0, 0.6);
    }
}

.scope-image-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 700px;
    height: auto;
    cursor: pointer;
    border-radius: 8px;
    padding: 0;
    margin: 0 auto;
    transition: transform 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.3);
}

.scope-image {
    width: 100%;
    height: auto;
    max-width: 100%;
    border-radius: 6px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    z-index: 1; /* Middle layer - scope image */
    position: relative;
    cursor: pointer;
}

.scope-image:hover {
    border-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.02);
}

.scope-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 0; /* Bottom layer - white background */
    display: none;
    border-radius: 6px;
}

.scope-overlay-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    z-index: 2; /* Top layer - ranging overlay */
}

/* Scope Expand Button */
.scope-expand-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 140, 0, 0.9);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 0.4rem 0.8rem;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.75rem;
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Scope Magnify Button */
.scope-magnify-btn {
    position: absolute;
    top: 1rem;
    right: 8rem;
    background: var(--accent);
    color: #000;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scope-expand-btn:hover,
.scope-magnify-btn:hover {
    background: var(--accent-hover, #ff8c00);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}

.scope-expand-btn i,
.scope-magnify-btn i {
    font-size: 0.8rem;
}

/* Expanded State */

/* Magnified State */
.scope-image-container.magnified {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.5);
    z-index: 1001;
    background: rgba(0, 0, 0, 0.95);
    padding: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.9);
    transition: transform 0.3s ease;
}

.scope-image-container.magnified:active {
    cursor: grabbing;
}

.scope-image-container.magnified .scope-image,
.scope-image-container.magnified .scope-background-image,
.scope-image-container.magnified .scope-overlay-image {
    pointer-events: none;
}

.scope-info {
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.9rem;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    margin-top: 1rem;
}

.scope-info h5 {
    color: var(--accent);
    margin-bottom: 0.75rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Back to Top Button */
.back-to-top-btn {
    position: absolute;
    top: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent);
    color: #000;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 0.9rem;
    transition: all 0.2s ease;
    z-index: 1000001;
}

.back-to-top-btn:hover {
    background: var(--accent-hover, #ff8c00);
    transform: translateX(-50%) translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 140, 0, 0.3);
}

.back-to-top-btn:active {
    transform: translateX(-50%) translateY(0);
    background: var(--accent-secondary, #e67e00);
}

/* Expanded Content Layout */
.expanded-content-layout {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3rem;
    min-height: 80vh;
    padding: 2rem;
}

.left-side-content {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ranging-guide-expanded {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
}

.ranging-guide-expanded h5 {
    color: var(--accent);
    margin-bottom: 1rem;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ranging-guide-expanded p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    font-size: 0.9rem;
    line-height: 1.5;
}

.ranging-guide-expanded ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ranging-guide-expanded li {
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.4;
}

.ranging-guide-expanded li:before {
    content: "▶";
    color: var(--accent);
    position: absolute;
    left: 0;
    font-size: 0.8rem;
}

.right-side-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.scope-info p {
    margin-bottom: 1rem;
    line-height: 1.5;
    text-align: center;
}

.ranging-tips {
    margin-top: 1rem;
}

.ranging-tips h6 {
    color: var(--accent);
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ranging-tips ul {
    list-style: none;
    padding: 0;
}

.ranging-tips li {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
    padding-left: 1rem;
    position: relative;
    font-size: 0.85rem;
    line-height: 1.4;
}

.ranging-tips li:before {
    content: "▶";
    color: var(--accent);
    position: absolute;
    left: 0;
    font-size: 0.7rem;
}

/* Enhanced Expanded Tile Styling */
.ranging-tool.expanded {
    background: var(--bg-primary);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

.ranging-tool.expanded .calculator {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
}

.ranging-tool.expanded .sights-content {
    max-width: 1000px;
    margin: 0 auto;
}

.ranging-tool.expanded .scope-viewer {
    max-width: 1200px;
    margin: 0 auto;
}

.ranging-tool.expanded .scope-image-container {
    max-width: 800px;
    margin: 0 auto;
}

.ranging-tool.expanded .arty-results {
    max-width: 1000px;
    margin: 0 auto;
}

.ranging-tool.expanded .arty-table {
    font-size: 1rem;
}

.ranging-tool.expanded .arty-table th,
.ranging-tool.expanded .arty-table td {
    padding: 0.75rem;
}

.ranging-tool.expanded .input-group input,
.ranging-tool.expanded .input-group select {
    font-size: 1.1rem;
    padding: 1rem;
}

.ranging-tool.expanded .calculate-btn {
    font-size: 1.1rem;
    padding: 1.25rem 2.5rem;
}

.ranging-tool.expanded h3 {
    font-size: 2rem;
    margin-bottom: 2rem;
}

.ranging-tool.expanded h4 {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
}

.ranging-tool.expanded h5 {
    font-size: 1.3rem;
    margin-bottom: 1rem;
}

.ranging-tool.expanded h6 {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
}

.sights-info h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
}

.sights-info ul {
    list-style: none;
    padding: 0;
}

.sights-info li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.sights-info li:last-child {
    border-bottom: none;
}

/* Artillery Calculator Styling */
.arty-results {
    margin-top: 1.5rem;
}

.arty-results h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    text-align: center;
}

.arty-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}

.arty-table th,
.arty-table td {
    padding: 0.5rem;
    text-align: center;
    border-bottom: 1px solid var(--border);
}

.arty-table th {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.75rem;
}

.arty-table td {
    color: var(--text-secondary);
}

.arty-table .no-results {
    color: var(--text-secondary);
    font-style: italic;
    text-align: center;
}

.delete-btn {
    background: linear-gradient(135deg, #ff6b6b, #ee5a24);
    color: white;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.delete-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
}

/* Recent Calculation Display Styling */
.recent-calculation {
    margin: 1.5rem 0;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--bg-primary), var(--bg-secondary));
    border: 2px solid var(--border);
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.recent-calculation h4 {
    margin-bottom: 1rem;
    color: var(--text-primary);
    font-family: 'Orbitron', monospace;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.recent-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}

.mills-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent);
    font-family: 'Orbitron', monospace;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.calculation-details {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
}

.light-mode .calculate-btn {
    background-color: var(--accent);
}

.calculate-btn:hover {
    background-color: var(--accent-secondary);
    transform: scale(1.02);
}

.light-mode .calculate-btn:hover {
    background-color: var(--accent-secondary);
}

.result {
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 5px;
    padding: 1rem;
    text-align: center;
}

.light-mode .result {
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
}

.ranging-tips {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
}

.light-mode .ranging-tips {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.ranging-tips h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ranging-tips ul {
    list-style: none;
}

.ranging-tips li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 1.5rem;
}

.light-mode .ranging-tips li {
    border-bottom: 1px solid var(--border);
}

.ranging-tips li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.light-mode .ranging-tips li::before {
    color: var(--accent);
}

/* Identification Section */
.identification-content {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.identification-tips {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    height: fit-content;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.light-mode .identification-tips {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.identification-tips h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.identification-tips ul {
    list-style: none;
}

.identification-tips li {
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
    padding-left: 1.8rem;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: all 0.2s ease;
}

.light-mode .identification-tips li {
    border-bottom: 1px solid var(--border);
}

.identification-tips li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.light-mode .identification-tips li::before {
    color: var(--accent);
}

.identification-practice {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 12px;
    padding: 2rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 1200px;
    width: 100%;
}

.light-mode .identification-practice {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.identification-practice h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    margin-bottom: 2rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    color: var(--accent);
}

/* Integrated Identification Tips Section */
.identification-tips-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 0;
    width: 35%;
    float: left;
}

/* Game Area Container */
.game-area-container {
    width: 60%;
    float: right;
    margin-left: 5%;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.identification-tips-section h4 {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--accent);
    text-align: center;
}

.identification-tips-section ul {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.identification-tips-section li {
    padding: 0.4rem 0;
    padding-left: 1.5rem;
    position: relative;
    font-size: 0.9rem;
    line-height: 1.3;
    color: var(--text-secondary);
}

.identification-tips-section li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
    font-size: 0.8rem;
}

/* Difficulty Selector Styles */
.difficulty-selector {
    margin-bottom: 2.5rem;
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    padding: 1.5rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.difficulty-selector h4 {
    font-family: 'Orbitron', monospace;
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.difficulty-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    font-family: 'Orbitron', monospace;
    font-weight: 600;
}

.difficulty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--shadow);
    border-color: var(--accent);
}

.difficulty-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(255, 152, 0, 0.3);
}

.difficulty-icon {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.difficulty-text {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.difficulty-desc {
    font-size: 0.8rem;
    opacity: 0.8;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.25px;
}

.light-mode .difficulty-btn {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 2px 4px var(--shadow);
}

.light-mode .difficulty-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 8px var(--shadow);
}

.light-mode .difficulty-btn.active {
    background: var(--accent);
    border-color: var(--accent);
    box-shadow: 0 4px 12px rgba(255, 152, 0, 0.2);
}

/* Responsive design for difficulty selector */
@media (max-width: 768px) {
    .difficulty-buttons {
        flex-direction: column;
        align-items: center;
        gap: 0.75rem;
    }

    .difficulty-btn {
        min-width: 200px;
        padding: 0.75rem 1rem;
    }

    .difficulty-text {
        font-size: 0.9rem;
    }

    .difficulty-desc {
        font-size: 0.75rem;
    }
}

@media (max-width: 480px) {
    .difficulty-btn {
        min-width: 180px;
        padding: 0.5rem 0.75rem;
    }

    .difficulty-icon {
        font-size: 1.25rem;
    }

    .difficulty-text {
        font-size: 0.85rem;
    }

    .difficulty-desc {
        font-size: 0.7rem;
    }
}

.practice-area {
    text-align: center;
    background: rgba(255, 255, 255, 0.02);
    padding: 2rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    flex: 1;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}

.practice-tank {
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 450px;
    overflow: visible;
    flex: 1;
}

#practiceTankImage {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    max-height: 220px;
    background: transparent;
    border-radius: 12px;
    margin-bottom: 1rem;
    padding: 0.5rem;
    width: 100%;
    max-width: 400px;
}

#practiceTankImage img {
    width: 100%;
    max-width: 400px;
    height: auto;
    min-height: 200px;
    object-fit: contain;
    border-radius: 10px;
    border: 2px solid var(--border);
    transition: filter 0.3s ease;
}

#practiceTankImage img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px var(--shadow);
}

.practice-tank img {
    width: 100%;
    max-width: 400px;
    height: auto;
    min-height: 200px;
    object-fit: contain;
    border-radius: 10px;
    border: 2px solid var(--border);
    transition: filter 0.3s ease;
}

.practice-tank img:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px var(--shadow);
}

/* Silhouette effect for tank identification */
.practice-tank img[style*="brightness(0)"],
#practiceTankImage img[style*="brightness(0)"] {
    filter: brightness(0) contrast(100%) !important;
}

.light-mode .practice-tank img,
.light-mode #practiceTankImage img {
    border: 2px solid var(--border-light);
}

.practice-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 1rem;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.practice-option {
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
    padding: 1rem 1.5rem;
    border-radius: 8px;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28" fill="none" stroke="%23FF9800" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><circle cx="14" cy="14" r="11.5"/><circle cx="14" cy="14" r="3.5"/></svg>') 14 14, pointer;
    transition: all 0.3s ease;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

.light-mode .practice-option {
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    color: var(--text-primary);
}

.practice-option:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-primary);
    transform: scale(1.02);
}

.light-mode .practice-option:hover {
    background-color: var(--accent);
    border-color: var(--accent);
}

/* Tactics Section */
.tactics-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
}

.tactics-strategies {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
}

.light-mode .tactics-strategies {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.tactics-strategies h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.light-mode .tactics-strategies h3 {
    color: var(--accent);
}

.strategy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

.strategy-card {
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 1.5rem;
    transition: all 0.3s ease;
}

.light-mode .strategy-card {
    background-color: var(--bg-primary);
    border: 2px solid var(--border);
}

.strategy-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px var(--shadow);
    border-color: var(--accent);
}

.light-mode .strategy-card:hover {
    box-shadow: 0 8px 16px var(--shadow);
    border-color: var(--accent);
}

.strategy-card h4 {
    font-family: 'Orbitron', monospace;
    font-size: 1.2rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.light-mode .strategy-card h4 {
    color: var(--accent);
}

.strategy-card p {
    color: var(--text-secondary);
    margin-bottom: 1rem;
    line-height: 1.6;
}

.light-mode .strategy-card p {
    color: var(--text-secondary);
}

.strategy-card ul {
    list-style: none;
}

.strategy-card li {
    padding: 0.25rem 0;
    color: var(--text-secondary);
    position: relative;
    padding-left: 1.5rem;
    text-indent: 1.5rem;
}

.light-mode .strategy-card li {
    color: var(--text-secondary);
}

.strategy-card li::before {
    content: '▶';
    position: absolute;
    left: -1.5rem;
    color: var(--accent);
    font-weight: bold;
    font-size: 0.8rem;
}

.light-mode .strategy-card li::before {
    color: var(--accent);
}

.tactics-tips {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    height: fit-content;
}

.light-mode .tactics-tips {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.tactics-tips h3 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.light-mode .tactics-tips h3 {
    color: var(--accent);
}

.tactics-tips ul {
    list-style: none;
}

.tactics-tips li {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
    position: relative;
    padding-left: 1.5rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.light-mode .tactics-tips li {
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

.tactics-tips li::before {
    content: '▶';
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: bold;
}

.light-mode .tactics-tips li::before {
    color: var(--accent);
}

/* Driving Guide Section Styling */
.driving-guide-section {
    margin-top: 2rem;
    background: rgba(var(--accent-rgb), 0.05);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 8px;
    overflow: hidden;
}

.driving-guide-header {
    padding: 1.5rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(var(--accent-rgb), 0.1);
    border-bottom: 1px solid rgba(var(--accent-rgb), 0.2);
    transition: background-color 0.3s ease;
}

.driving-guide-header:hover {
    background: rgba(var(--accent-rgb), 0.15);
}

.driving-toggle-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.driving-toggle-text {
    font-size: 0.9rem;
    color: var(--text-secondary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    user-select: none;
}

.driving-toggle-icon {
    font-size: 1.2rem;
    color: var(--accent);
    transition: transform 0.3s ease;
    user-select: none;
}

.driving-guide-content {
    padding: 1.5rem;
}

.driving-guide-section h4 {
    color: var(--accent);
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    border-bottom: 2px solid var(--accent);
    padding-bottom: 0.5rem;
}

.driving-intro {
    font-style: italic;
    color: var(--text-secondary);
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
}

.driving-topic {
    margin-bottom: 2rem;
}

.driving-topic h5 {
    color: var(--accent);
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
}

.driving-topic p {
    margin-bottom: 1rem;
    line-height: 1.7;
    color: var(--text-primary);
}

.driving-topic p em {
    color: var(--text-secondary);
    font-style: italic;
    background: rgba(var(--accent-rgb), 0.1);
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
    display: inline-block;
    margin: 0.5rem 0;
}

.driving-conclusion {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(var(--accent-rgb), 0.3);
}

.driving-conclusion p {
    margin-bottom: 1rem;
    line-height: 1.7;
}

.author-signature {
    font-weight: 600;
    color: var(--accent);
    font-style: italic;
    text-align: right;
    margin-top: 1rem;
}

/* Light mode adjustments for driving guide */
.light-mode .driving-guide-section {
    background: rgba(var(--accent-rgb), 0.08);
    border-color: rgba(var(--accent-rgb), 0.3);
}

.light-mode .driving-guide-header {
    background: rgba(var(--accent-rgb), 0.12);
    border-bottom-color: rgba(var(--accent-rgb), 0.3);
}

.light-mode .driving-guide-header:hover {
    background: rgba(var(--accent-rgb), 0.18);
}

.light-mode .driving-topic p em {
    background: rgba(var(--accent-rgb), 0.15);
}

/* Community Banner Styles */
.community-banner {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 215, 0, 0.08) 100%);
    border: 3px solid #FFD700;
    border-radius: 15px;
    margin-top: 3rem;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.2);
}

.light-mode .community-banner {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(255, 215, 0, 0.08) 100%);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.15);
}

.community-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, #FFD700, #FFA500, #FFD700);
}

.community-banner:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(255, 215, 0, 0.3);
    border-color: #FFA500;
}

.banner-content {
    display: flex;
    align-items: center;
    padding: 2.5rem;
    gap: 2rem;
}

.banner-logo {
    flex-shrink: 0;
}

.draft-haus-logo-banner {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #FFD700 0%, #FFA500 100%),
    linear-gradient(45deg, #000000 0%, #333333 100%);
    position: relative;
    border: 4px solid #FFD700;
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    transition: all 0.3s ease;
    animation: logoGlow 3s ease-in-out infinite;
}

.community-banner:hover .draft-haus-logo-banner {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}

.draft-haus-logo-banner::before {
    content: 'DH';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 2rem;
    color: #000000;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.banner-text {
    flex: 1;
}

.banner-text h3 {
    font-family: 'Orbitron', monospace;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #FFD700;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.banner-text p {
    font-size: 1.1rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.light-mode .banner-text p {
    color: var(--text-secondary);
}

.banner-features {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.banner-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(255, 215, 0, 0.15);
    color: #FFD700;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    border: 2px solid rgba(255, 215, 0, 0.3);
    transition: all 0.3s ease;
}

.community-banner:hover .banner-badge {
    background: rgba(255, 215, 0, 0.25);
    border-color: rgba(255, 215, 0, 0.5);
    transform: scale(1.05);
}

.banner-badge i {
    font-size: 1rem;
}

.banner-arrow {
    flex-shrink: 0;
    font-size: 2rem;
    color: #FFD700;
    transition: all 0.3s ease;
    animation: arrowSlide 2s ease-in-out infinite;
}

.community-banner:hover .banner-arrow {
    transform: translateX(10px);
    color: #FFA500;
}

@keyframes arrowSlide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}

/* Responsive design for community banner */
@media (max-width: 768px) {
    .banner-content {
        flex-direction: column;
        text-align: center;
        padding: 2rem;
        gap: 1.5rem;
    }

    .banner-text h3 {
        font-size: 1.5rem;
    }

    .banner-features {
        justify-content: center;
    }

    .banner-arrow {
        display: none;
    }
}

/* Community Section Styles */
.community-content {
    max-width: 1000px;
    margin: 0 auto;
}

.community-hero {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    align-items: center;
    margin-bottom: 3rem;
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(88, 101, 242, 0.05) 100%);
    border: 2px solid var(--border);
    border-radius: 15px;
    padding: 3rem;
}

.light-mode .community-hero {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(88, 101, 242, 0.05) 100%);
    border: 2px solid var(--border);
}

.community-logo-large {
    display: flex;
    justify-content: center;
    align-items: center;
}

.draft-haus-logo-large {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle at center, #FFD700 0%, #FFA500 100%),
    linear-gradient(45deg, #000000 0%, #333333 100%);
    position: relative;
    border: 5px solid #FFD700;
    box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    animation: logoGlow 3s ease-in-out infinite;
}

@keyframes logoGlow {
    0%, 100% {
        box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
    }
    50% {
        box-shadow: 0 8px 35px rgba(255, 215, 0, 0.6);
    }
}

.draft-haus-logo-large::before {
    content: 'DH';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 3rem;
    color: #000000;
    text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.5);
}

.community-info h3 {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #FFD700;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.community-description {
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.light-mode .community-description {
    color: var(--text-secondary);
}

.discord-join-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #5865f2, #7289da);
    color: #ffffff;
    padding: 1rem 2rem;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(88, 101, 242, 0.3);
    border: 2px solid #5865f2;
}

.discord-join-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(88, 101, 242, 0.5);
    background: linear-gradient(135deg, #7289da, #5865f2);
}

.discord-join-btn i {
    font-size: 1.3rem;
}

.community-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
}

.feature-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    border-radius: 10px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.light-mode .feature-card {
    background: var(--bg-secondary);
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #5865f2, #7289da);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px var(--shadow);
    border-color: #5865f2;
}

.light-mode .feature-card:hover {
    box-shadow: 0 10px 20px var(--shadow);
}

.feature-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.feature-card h4 {
    font-family: 'Orbitron', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
}

.light-mode .feature-card h4 {
    color: var(--accent);
}

.feature-card p {
    color: var(--text-secondary);
    line-height: 1.6;
}

.light-mode .feature-card p {
    color: var(--text-secondary);
}

/* Footer */
.footer {
    background-color: var(--bg-secondary);
    border-top: 2px solid var(--accent);
    padding: 2rem 0;
    margin-top: 3rem;
}

.light-mode .footer {
    background-color: var(--bg-secondary);
    border-top: 2px solid var(--accent);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
}

.footer-content p {
    color: var(--text-secondary);
    margin-bottom: 0.5rem;
}

.light-mode .footer-content p {
    color: var(--text-secondary);
}

/* Footer Links */
.footer-content a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
}

.footer-content a:hover {
    color: #ff6b6b;
    text-decoration: underline;
}

.light-mode .footer-content a {
    color: var(--accent);
}

.light-mode .footer-content a:hover {
    color: #d63347;
    text-decoration: underline;
}

/* Responsive Design */
@media (max-width: 768px) {
    .header-content {
        padding: 0 1rem;
    }

    .logo h1 {
        font-size: 1.2rem;
    }

    .nav-list {
        padding: 0 1rem;
        flex-direction: column;
    }

    .nav-link {
        text-align: center;
    }

    .main-content {
        padding: 1rem;
    }

    .section-header h2 {
        font-size: 2rem;
    }

    .overview-grid {
        grid-template-columns: 1fr;
    }

    .faction-filter {
        flex-direction: column;
        align-items: center;
    }

    .tank-grid {
        grid-template-columns: 1fr;
    }

    .ranging-tools {
        grid-template-columns: 1fr;
    }

    .identification-content {
        grid-template-columns: 1fr;
    }

    .practice-options {
        grid-template-columns: 1fr;
    }

    .tactics-content {
        grid-template-columns: 1fr;
    }

    .strategy-grid {
        grid-template-columns: 1fr;
    }

    .community-hero {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2rem;
    }

    .community-features-grid {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 480px) {
    .logo {
        flex-direction: column;
        gap: 0.5rem;
    }

    .logo h1 {
        font-size: 1rem;
    }

    .section-header h2 {
        font-size: 1.5rem;
    }

    .overview-card {
        padding: 1.5rem;
    }

    .tank-info {
        padding: 1rem;
    }

    .tank-stats {
        grid-template-columns: 1fr;
    }
}

/* Tank Image Styling */
.tank-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.tank-card:hover .tank-photo {
    transform: scale(1.05);
}

/* 360 Degree Tank Viewer Styles */
.tank-360-viewer {
    position: relative;
    width: 100%;
    height: 220px;
    border-radius: 10px;
    overflow: visible;
    background: transparent !important;
    border: 2px solid var(--border);
    cursor: grab;
    transition: all 0.3s ease;
}

/* Dynamic height when tank card is expanded */
.tank-card.expanded .tank-360-viewer {
    height: 800px;
}

.light-mode .tank-360-viewer {
    background: transparent !important;
    border: 2px solid var(--border);
    box-shadow: 0 4px 6px var(--shadow);
}

.tank-360-viewer:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px var(--shadow);
}

.light-mode .tank-360-viewer:hover {
    box-shadow: 0 8px 16px var(--shadow);
}

.tank-360-viewer:active {
    cursor: grabbing;
}

.tank-360-container {
    position: relative;
    width: 100%;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: height 0.3s ease;
    border: 2px solid transparent;
    overflow: visible;
    background: transparent !important;
    z-index: 2;
}

/* Optimize image sizing for collapsed state */
.tank-360-container .tank-360-image {
    max-width: 95%;
    max-height: 95%;
    object-fit: contain;
    transition: all 0.3s ease;
}

/* Dynamic height when tank card is expanded */
.tank-card.expanded .tank-360-container {
    height: 800px;
}

/* Larger image when tank card is expanded */
.tank-card.expanded .tank-360-container .tank-360-image {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
}

/* Visual feedback when dragging */
.tank-360-container:active {
    border-color: rgba(255, 152, 0, 0.5);
    background: transparent !important;
}

/* Smooth transition for angle snapping */
.tank-360-image {
    transition: all 0.1s ease;
}

/* Visual feedback when snapping to angle */
.tank-360-container.snapping {
    border-color: rgba(255, 152, 0, 0.8);
    background: transparent !important;
    transform: scale(1.02);
}

.tank-360-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: all 0.1s ease;
    user-select: none;
    -webkit-user-drag: none;
    background: transparent !important;
}

.tank-360-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.5rem;
    pointer-events: auto;
    background: none;
    border: none;
    z-index: 20;
}

.tank-360-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 0.1rem 0.2rem;
    border-radius: 3px;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    pointer-events: auto;
    z-index: 25;
    min-width: 18px;
    min-height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tank-360-btn:hover {
    background: rgba(255, 152, 0, 0.2);
    border-color: rgba(255, 152, 0, 0.6);
    color: #FF9800;
    transform: scale(1.1);
}

/* Larger buttons when tank card is expanded */
.tank-card.expanded .tank-360-btn {
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    font-size: 0.7rem;
    min-width: 32px;
    min-height: 32px;
}

.light-mode .tank-360-btn {
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--accent);
    color: var(--text-primary);
}

.tank-360-btn:hover {
    background: var(--accent);
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.light-mode .tank-360-btn:hover {
    background: var(--accent);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.tank-360-btn:active {
    transform: scale(0.95);
}

.tank-360-indicator {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: bold;
    pointer-events: none;
}

.light-mode .tank-360-indicator {
    background: rgba(255, 255, 255, 0.9);
    color: var(--text-primary);
}

.tank-360-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FFD700, #FFA500);
    color: #000;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
    animation: badgeGlow 2s ease-in-out infinite alternate;
}

@keyframes badgeGlow {
    0% {
        box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
    }
    100% {
        box-shadow: 0 2px 8px rgba(255, 215, 0, 0.6);
    }
}

/* Responsive design for 360 viewer */
@media (max-width: 768px) {
    .tank-360-viewer {
        height: 150px;
    }

    .tank-360-btn {
        width: 35px;
        height: 35px;
        font-size: 1rem;
    }

    .tank-360-indicator {
        font-size: 0.8rem;
        padding: 3px 10px;
    }

    .tank-360-badge {
        font-size: 0.7rem;
        padding: 1px 6px;
    }
}

/* Content Creators Section */
.content-creators-section {
    margin-top: 3rem;
    padding: 2rem;
    background: linear-gradient(135deg, rgba(74, 144, 226, 0.1) 0%, rgba(155, 89, 182, 0.1) 100%);
    border-radius: 20px;
    border: 1px solid rgba(74, 144, 226, 0.2);
}

.content-creators-section h3 {
    font-size: 2rem;
    color: #ffd700;
    text-align: center;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}

.content-creators-section > p {
    text-align: center;
    color: #cccccc;
    margin-bottom: 2rem;
    font-size: 1.1rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.creators-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.creator-card {
    background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
    border: 2px solid;
    border-image: linear-gradient(45deg, #4a90e2, #9b59b6) 1;
    border-radius: 15px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.creator-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 30%, rgba(255, 215, 0, 0.05) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.creator-card:hover::before {
    transform: translateX(100%);
}

.creator-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    border-image: linear-gradient(45deg, #5a9ee2, #ab69c6) 1;
}

.creator-header {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
    z-index: 1;
}

.creator-avatar {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #ff0000, #cc0000);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    box-shadow: 0 0 20px rgba(255, 0, 0, 0.3);
}

.creator-avatar i {
    font-size: 1.5rem;
    color: white;
}

.creator-info h4 {
    font-size: 1.3rem;
    color: #ffffff;
    margin: 0 0 0.25rem 0;
    font-weight: 700;
}

.creator-tag {
    background: linear-gradient(135deg, #ffd700, #ff8c00);
    color: #000;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.creator-description {
    color: #cccccc;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 1;
}

.creator-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.creator-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.youtube-link {
    background: linear-gradient(135deg, #ff0000, #cc0000);
    color: white;
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.3);
}

.youtube-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(255, 0, 0, 0.5);
    background: linear-gradient(135deg, #ff1a1a, #e60000);
}

.social-link {
    background: linear-gradient(135deg, #4a90e2, #9b59b6);
    color: white;
    box-shadow: 0 0 15px rgba(74, 144, 226, 0.3);
}

.social-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(74, 144, 226, 0.5);
    background: linear-gradient(135deg, #5a9ee2, #ab69c6);
}

.creator-link i {
    font-size: 1rem;
}

/* Responsive design for content creators */
@media (max-width: 768px) {
    .creators-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .creator-card {
        padding: 1.25rem;
    }

    .creator-header {
        flex-direction: column;
        text-align: center;
        gap: 1rem;
    }

    .creator-avatar {
        margin-right: 0;
    }

    .creator-links {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .content-creators-section {
        padding: 1.5rem;
        margin-top: 2rem;
    }

    .content-creators-section h3 {
        font-size: 1.75rem;
    }

    .creator-links {
        flex-direction: column;
        align-items: center;
    }

    .creator-link {
        width: 100%;
        justify-content: center;
    }
}

/* FIRST BLOOD CELEBRATION ANIMATIONS */
#first-blood-celebration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

.celebration-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1003;
    text-align: center;
}

.achievement-popup {
    background: linear-gradient(135deg, #1a1a1a 0%, #2a2a2a 100%);
    border: 3px solid #ff4444;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 0 50px rgba(255, 68, 68, 0.8);
    animation: achievementPop 0.5s ease-out;
}

.achievement-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: iconBounce 1s ease-in-out infinite;
}

.achievement-popup h2 {
    font-family: 'Orbitron', monospace;
    font-size: 2.5rem;
    color: #ff4444;
    margin-bottom: 0.5rem;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
    animation: textGlow 1s ease-in-out infinite alternate;
}

.achievement-popup p {
    color: #ffffff;
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.achievement-stats {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.achievement-stats span {
    background: linear-gradient(135deg, #ff4444, #ff8800);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 15px;
    font-weight: bold;
    animation: statPulse 0.5s ease-in-out infinite alternate;
}

/* Screen Shake Animation */
@keyframes screenShake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-10px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(10px);
    }
}

/* Explosion Particles */
.explosion-particles {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes explode {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translate(var(--random-x, 100px), var(--random-y, -50px));
        opacity: 0;
    }
}

/* Confetti Animation */
.confetti-container {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes confettiFall {
    0% {
        transform: translateY(-50px) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* Screen Flash */
.screen-flash {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    pointer-events: none;
    opacity: 0;
}

@keyframes screenFlash {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

/* Tank Explosion */
.tank-explosion {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.explosion-fire {
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, #ff4444, #ff8800, #ffff00);
    border-radius: 50%;
    animation: fireExpand 2s ease-out;
}

.explosion-smoke {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(128, 128, 128, 0.8), transparent);
    border-radius: 50%;
    animation: smokeRise 2s ease-out;
}

.explosion-debris {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background: #333;
    border-radius: 2px;
    animation: debrisScatter 2s ease-out;
}

@keyframes fireExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    50% {
        transform: scale(2);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

@keyframes smokeRise {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1) translateY(-20px);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2) translateY(-100px);
        opacity: 0;
    }
}

@keyframes debrisScatter {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translate(50px, -25px) rotate(360deg);
        opacity: 0;
    }
}

/* Matrix Rain */
.matrix-rain {
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes matrixFall {
    0% {
        transform: translateY(-100%);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh);
        opacity: 0;
    }
}

/* Sound Waves */
@keyframes soundWave {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

@keyframes waveExpand {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Achievement Animations */
@keyframes achievementPop {
    0% {
        transform: scale(0) rotate(-180deg);
    }
    50% {
        transform: scale(1.2) rotate(0deg);
    }
    100% {
        transform: scale(1) rotate(0deg);
    }
}

@keyframes iconBounce {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

@keyframes textGlow {
    0% {
        text-shadow: 0 0 20px rgba(255, 68, 68, 0.8);
    }
    100% {
        text-shadow: 0 0 30px rgba(255, 68, 68, 1), 0 0 40px rgba(255, 68, 68, 0.5);
    }
}

@keyframes statPulse {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.05);
    }
}

/* Vietnam Section Styling */
.vietnam-section {
    display: none;
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    position: relative;
    overflow: hidden;
}

.vietnam-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 80%, rgba(34, 139, 34, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(139, 69, 19, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(25, 25, 112, 0.05) 0%, transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Vietnam Jungle Theme */
body.vietnam-jungle-theme {
    background: linear-gradient(135deg, #1a2f1a 0%, #2d4a2d 50%, #1a2f1a 100%) !important;
    color: #e8f5e8 !important;
}

body.vietnam-jungle-theme::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 10% 20%, rgba(34, 139, 34, 0.15) 0%, transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(85, 107, 47, 0.12) 0%, transparent 40%),
    radial-gradient(circle at 50% 50%, rgba(0, 100, 0, 0.08) 0%, transparent 60%),
    radial-gradient(circle at 80% 10%, rgba(34, 139, 34, 0.1) 0%, transparent 30%),
    radial-gradient(circle at 20% 90%, rgba(85, 107, 47, 0.1) 0%, transparent 30%);
    pointer-events: none;
    z-index: -1;
    animation: jungleAmbience 20s ease-in-out infinite;
}

@keyframes jungleAmbience {
    0%, 100% {
        opacity: 0.8;
    }
    50% {
        opacity: 1;
    }
}

/* Vietnam section specific jungle styling */
body.vietnam-jungle-theme .vietnam-section {
    background: linear-gradient(135deg, #0f1f0f 0%, #1a2f1a 50%, #0f1f0f 100%) !important;
}

body.vietnam-jungle-theme .vietnam-section::before {
    background: radial-gradient(circle at 20% 80%, rgba(34, 139, 34, 0.2) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(85, 107, 47, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(0, 100, 0, 0.1) 0%, transparent 50%),
    radial-gradient(circle at 60% 60%, rgba(34, 139, 34, 0.1) 0%, transparent 40%);
}

body.vietnam-jungle-theme .vietnam-title {
    color: #90ee90 !important;
    text-shadow: 4px 4px 0px #0f1f0f,
    8px 8px 0px rgba(15, 31, 15, 0.5),
    0 0 30px rgba(144, 238, 144, 0.5) !important;
}

body.vietnam-jungle-theme .coming-soon-banner {
    background: rgba(15, 31, 15, 0.8) !important;
    border: 3px solid rgba(34, 139, 34, 0.5) !important;
    backdrop-filter: blur(15px);
}

body.vietnam-jungle-theme .coming-soon-banner h2 {
    color: #32cd32 !important;
    text-shadow: 0 0 20px rgba(50, 205, 50, 0.5) !important;
}

body.vietnam-jungle-theme .coming-soon-banner p {
    color: #e8f5e8 !important;
}

body.vietnam-jungle-theme .vietnam-features .feature {
    background: rgba(34, 139, 34, 0.1) !important;
    border: 1px solid rgba(34, 139, 34, 0.3) !important;
}

body.vietnam-jungle-theme .vietnam-features .feature i {
    color: #32cd32 !important;
}

/* Vietnam Video Section */
.vietnam-video-section {
    margin-top: 2rem;
    text-align: center;
}

.vietnam-video-section h3 {
    color: #ffffff;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    font-family: 'Orbitron', sans-serif;
}

.vietnam-video-wrapper {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.vietnam-video-wrapper iframe {
    width: 100%;
    height: 338px;
    border: none;
    border-radius: 12px;
}

body.vietnam-jungle-theme .vietnam-features .feature span {
    color: #e8f5e8 !important;
}

/* Header styling for jungle theme */
body.vietnam-jungle-theme .header {
    background: linear-gradient(135deg, #1a2f1a 0%, #2d4a2d 100%) !important;
    border-bottom: 2px solid rgba(34, 139, 34, 0.5) !important;
    padding: 0.5rem 0 !important;
}

body.vietnam-jungle-theme .game-version-toggle {
    background: rgba(34, 139, 34, 0.2) !important;
    border: 2px solid rgba(34, 139, 34, 0.5) !important;
    color: #e8f5e8 !important;
}

body.vietnam-jungle-theme .game-version-toggle:hover {
    background: rgba(34, 139, 34, 0.3) !important;
    border-color: rgba(50, 205, 50, 0.7) !important;
}

body.vietnam-jungle-theme .game-version-menu {
    background: rgba(15, 31, 15, 0.95) !important;
    border: 2px solid rgba(34, 139, 34, 0.5) !important;
}

body.vietnam-jungle-theme .version-option {
    color: #e8f5e8 !important;
}

body.vietnam-jungle-theme .version-option:hover {
    background: rgba(34, 139, 34, 0.2) !important;
}

body.vietnam-jungle-theme .version-option.active {
    background: rgba(50, 205, 50, 0.3) !important;
    color: #32cd32 !important;
}

/* Logo styling for jungle theme */
body.vietnam-jungle-theme .hllv-logo {
    filter: drop-shadow(0 8px 16px rgba(15, 31, 15, 0.6)) !important;
}

body.vietnam-jungle-theme .logo-container::after {
    background: linear-gradient(to bottom, transparent, rgba(34, 139, 34, 0.5), transparent) !important;
}

/* Replace WWII logo with Vietnam logo when in Vietnam mode */
body.vietnam-jungle-theme .logo-left .hll-logo {
    display: none !important;
}

body.vietnam-jungle-theme .logo-left::before {
    content: '';
    display: block;
    width: 300px;
    height: 300px;
    background-image: url('images/Hell Let loose Logos/Logo HLLV - Horizontal Logo Lockup - White (1).png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0 8px 16px rgba(15, 31, 15, 0.6)) !important;
}

/* CRITICAL: Ensure game version dropdown is always on top of everything */
/* This prevents the dropdown from being hidden behind the overview banner or any other elements */
.game-version-dropdown {
    position: relative;
    z-index: 999999999 !important;
    /* Force stacking context */
    transform: translateZ(0);
    will-change: z-index;
    /* Ensure this creates a new stacking context */
    isolation: isolate;
    /* Ensure dropdown can extend beyond container */
    overflow: visible;
}

.game-version-toggle {
    position: relative;
    z-index: 999999999 !important;
    /* Force stacking context */
    transform: translateZ(0);
    will-change: z-index;
}

.game-version-menu {
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 0.5rem 0;
    min-width: 140px;
    backdrop-filter: blur(15px);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 100000000 !important;
    /* Force the menu to be above everything */
    pointer-events: auto;
    /* Additional properties to ensure visibility */
    will-change: z-index;
    /* Force above all other elements */
    isolation: isolate;
    /* Ensure menu can extend beyond parent boundaries */
    overflow: visible;
    clip: auto;
}

.vietnam-section.active {
    display: block;
}

.vietnam-hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    text-align: center;
    padding: 2rem;
    position: relative;
    z-index: 2;
}

.vietnam-logo {
    margin-bottom: 3rem;
}

.hllv-logo {
    height: 300px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.4));
    transition: all 0.3s ease;
}

.hllv-logo-white {
    display: block;
}

.hllv-logo-black {
    display: none;
}

.light-mode .hllv-logo-white {
    display: none;
}

.light-mode .hllv-logo-black {
    display: block;
}

.vietnam-title {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 4rem;
    color: var(--text-primary);
    text-shadow: 4px 4px 0px #000000,
    8px 8px 0px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(255, 255, 255, 0.5);
    letter-spacing: 6px;
    margin-bottom: 2rem;
}

.coming-soon-banner {
    background: rgba(255, 255, 255, 0.05);
    border: 3px solid rgba(255, 68, 68, 0.3);
    border-radius: 20px;
    padding: 3rem;
    backdrop-filter: blur(15px);
    max-width: 600px;
    margin: 0 auto;
}

.coming-soon-banner h2 {
    font-family: 'Orbitron', monospace;
    font-weight: 900;
    font-size: 2.5rem;
    color: #ff4444;
    text-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
    margin-bottom: 1rem;
    letter-spacing: 3px;
}

.coming-soon-banner p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.vietnam-features {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
}

.vietnam-features .feature {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    min-width: 120px;
}

.vietnam-features .feature i {
    font-size: 1.5rem;
    color: #ff4444;
}

.vietnam-features .feature span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 600;
}

/* ARMOR HUB Easter Egg Theme */
body.secret-theme {
    background: #000000 !important;
    color: #ffffff !important;
}

body.secret-theme .header {
    background: #000000 !important;
    border-bottom: 2px solid #ff9000 !important;
}

body.secret-theme .logo-left::before {
    display: none !important;
}

body.secret-theme .logo-right::before {
    display: none !important;
}

body.secret-theme .armor-hub-text {
    background: linear-gradient(to right, #ffffff 0%, #ffffff 55%, #ff9000 65%, #ff9000 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    border: 2px solid #ff9000 !important;
    border-radius: 4px !important;
    padding: 0.5rem 1rem !important;
    font-weight: 900 !important;
    text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3) !important;
    text-shadow: none !important;
}

body.secret-theme .nav {
    background: #000000 !important;
    border-top: 2px solid #ff9000 !important;
}

body.secret-theme .nav-link {
    color: #ffffff !important;
}

body.secret-theme .nav-link:hover,
body.secret-theme .nav-link.active {
    color: #ff9000 !important;
    background: rgba(255, 144, 0, 0.1) !important;
}

body.secret-theme .section {
    background: #000000 !important;
}

body.secret-theme .tank-card {
    background: #1a1a1a !important;
    border: 2px solid #ff9000 !important;
}

body.secret-theme .tank-card:hover {
    border-color: #ffaa00 !important;
    box-shadow: 0 8px 25px rgba(255, 144, 0, 0.3) !important;
}

body.secret-theme .tank-name {
    color: #ff9000 !important;
}

body.secret-theme .tank-faction {
    color: #ffffff !important;
}

body.secret-theme .tank-360-badge {
    background: #ff9000 !important;
    color: #000000 !important;
}

body.secret-theme .stat-label {
    color: #ff9000 !important;
}

body.secret-theme .stat-value {
    color: #ffffff !important;
}

body.secret-theme .tank-description {
    color: #cccccc !important;
}

body.secret-theme .faction-btn {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #ff9000 !important;
}

body.secret-theme .faction-btn:hover,
body.secret-theme .faction-btn.active {
    background: #ff9000 !important;
    color: #000000 !important;
}

body.secret-theme .filter-btn {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #ff9000 !important;
}

body.secret-theme .filter-btn:hover,
body.secret-theme .filter-btn.active {
    background: #ff9000 !important;
    color: #000000 !important;
}

body.secret-theme .tank-expand-btn {
    background: #ff9000 !important;
    color: #000000 !important;
}

body.secret-theme .tank-expand-btn:hover {
    background: #ffaa00 !important;
}

body.secret-theme .tank-details {
    background: #1a1a1a !important;
    border: 2px solid #ff9000 !important;
}

body.secret-theme .tank-details-header h2 {
    color: #ff9000 !important;
}

body.secret-theme .tank-stats-table {
    background: #000000 !important;
    border: 1px solid #ff9000 !important;
}

body.secret-theme .tank-stats-table th {
    background: #ff9000 !important;
    color: #000000 !important;
}

body.secret-theme .tank-stats-table td {
    color: #ffffff !important;
    border: 1px solid #333333 !important;
}

body.secret-theme .calculator-section {
    background: #1a1a1a !important;
    border: 2px solid #ff9000 !important;
}

body.secret-theme .calculate-btn {
    background: #ff9000 !important;
    color: #000000 !important;
}

body.secret-theme .calculate-btn:hover {
    background: #ffaa00 !important;
}

body.secret-theme .practice-section {
    background: #1a1a1a !important;
    border: 2px solid #ff9000 !important;
}

body.secret-theme .practice-option {
    background: #1a1a1a !important;
    color: #ffffff !important;
    border: 2px solid #ff9000 !important;
}

body.secret-theme .practice-option:hover {
    background: #ff9000 !important;
    color: #000000 !important;
}

body.secret-theme .footer {
    background: #000000 !important;
    border-top: 2px solid #ff9000 !important;
    color: #ffffff !important;
}

/* Hidden click area for easter egg activation */
.easter-egg-trigger {
    position: fixed;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    z-index: 999999999 !important;
    cursor: pointer;
    opacity: 0;
}

/* Easter egg deactivation button */
.secret-deactivate {
    position: fixed;
    top: 20px;
    right: 20px;
    background: #ff9000 !important;
    color: #000000 !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 5px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    z-index: 999999999 !important;
    display: none !important;
}

body.secret-theme .secret-deactivate {
    display: block !important;
}

.secret-deactivate:hover {
    background: #ffaa00 !important;
}

/* Tanks card with greyscale hover effect - FIXED VERSION */
.tanks-card {
    position: relative;
    overflow: hidden;
}

.tanks-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/360/backgrounds/tanks.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    z-index: 1;
    border-radius: 15px;
    clip-path: inset(0 0 0 0);
}

.tanks-card i,
.tanks-card h3,
.tanks-card p {
    position: relative;
    z-index: 15;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.tanks-card:hover i,
.tanks-card:hover h3,
.tanks-card:hover p {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 15;
}

.tanks-card:hover .card-background-image {
    opacity: 0.9;
    filter: grayscale(0%);
    transform: scale(1.2);
    z-index: 10;
}

.tanks-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 165, 0, 0.4);
    z-index: 5;
}

/* Make the "Tanks" text white instead of orange */
.featured-card h3 {
    color: #ffffff !important;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
}

/* Tanks card background image functionality */
.featured-card {
    position: relative;
    overflow: hidden;
}

.featured-card .card-background-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('images/360/backgrounds/tanks.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.3;
    filter: grayscale(100%);
    transition: all 0.4s ease;
    z-index: 1;
    border-radius: 15px;
    clip-path: inset(0 0 0 0);
}

.featured-card i,
.featured-card h3,
.featured-card p {
    position: relative;
    z-index: 15;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
}

.featured-card:hover i,
.featured-card:hover h3,
.featured-card:hover p {
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9);
    z-index: 15;
}

.featured-card:hover .card-background-image {
    opacity: 0.9;
    filter: grayscale(0%);
    transform: scale(1.2);
    z-index: 10;
}

/* Reduce pulse animation intensity on mobile */
.featured-card i {
    animation: pulse 4s ease-in-out infinite; /* Slower, less intensive */
}

/* Mobile-optimized pulse animation */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.01);
    }
    /* Smaller scale change */
}

/* Mobile Touch Experience & Layout Improvements */
@media (max-width: 768px) {
    /* Larger touch targets for all interactive elements */
    .overview-card {
        min-height: 120px; /* Ensure minimum touch target size */
        padding: 1.5rem;
        margin-bottom: 1rem;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    }

    /* Better touch spacing between cards */
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    /* Larger faction buttons for touch */
    .faction-btn {
        min-height: 48px; /* iOS recommended minimum */
        min-width: 120px;
        padding: 0.8rem 1.2rem;
        margin: 0.5rem;
    }

    /* Larger filter buttons */
    .filter-toggle {
        min-height: 48px;
        padding: 0.8rem 1.2rem;
        font-size: 1rem;
    }

    /* Better touch spacing for tank cards */
    .tank-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
        border-radius: 12px;
    }

    /* Optimized tank grid for mobile */
    .tank-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    /* Larger practice option buttons */
    .practice-option {
        min-height: 48px;
        padding: 1rem 1.5rem;
        margin: 0.5rem 0;
    }

    /* Better mobile practice layout */
    .practice-options {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 0 1rem;
    }

    /* Larger navigation links */
    .nav-link {
        padding: 1rem 1.5rem;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 8px;
        margin: 0;
        text-align: center;
    }

    /* Better mobile navigation */
    .nav-list {
        flex-direction: column;
        gap: 0.5rem;
        padding: 1rem;
    }

    /* Better touch spacing for 360 controls */
    .tank-360-btn {
        min-width: 44px;
        min-height: 44px;
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    /* Larger expand buttons */
    .tank-expand-btn {
        min-height: 48px;
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
    }

    /* Better touch spacing for video cards */
    .video-card {
        margin-bottom: 1.5rem;
        padding: 1.5rem;
    }

    /* Mobile-optimized video grid */
    .video-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }

    /* Larger difficulty buttons */
    .difficulty-btn {
        min-height: 48px;
        padding: 0.8rem 1.5rem;
        margin: 0.5rem;
        font-size: 1rem;
    }

    /* Better mobile spacing for sections */
    .section {
        padding: 1.5rem 1rem;
    }

    .section-header {
        margin-bottom: 2rem;
        text-align: center;
    }

    .section-header h2 {
        font-size: 2rem;
        margin-bottom: 1rem;
    }

    /* Mobile-optimized header */
    .header-content {
        padding: 0 1rem;
        flex-direction: column;
        gap: 1rem;
    }

    .logo h1 {
        font-size: 1.5rem;
        text-align: center;
    }

    /* Better mobile faction filter */
    .faction-filter {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        padding: 1rem;
    }

    /* Mobile-optimized filter dropdown */
    .filter-dropdown-content {
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90vw;
        max-width: 300px;
        z-index: 10000;
    }

    /* Performance optimizations for mobile */
    .overview-card,
    .tank-card,
    .video-card,
    .practice-option {
        transition: all 0.2s ease; /* Faster transitions on mobile */
        will-change: transform; /* Optimize for transforms */
    }

    /* Optimize hover effects for mobile */
    .overview-card:hover,
    .tank-card:hover,
    .video-card:hover {
        transform: translateY(-2px); /* Smaller movement on mobile */
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    }

    /* Reduce background image scaling on mobile for performance */
    .identification-card:hover .card-background-image,
    .ranging-card:hover .card-background-image,
    .tactics-card:hover .card-background-image,
    .featured-card:hover .card-background-image,
    .community-card:hover .card-background-image {
        transform: scale(1.1); /* Smaller scale on mobile */
        transition: all 0.3s ease;
    }

    /* Optimize 360 viewer for mobile */
    .tank-360-viewer {
        transition: height 0.2s ease; /* Faster height transitions */
        will-change: height;
    }

    .tank-360-image {
        transition: all 0.1s ease; /* Faster image transitions */
        will-change: transform;
    }

    /* Optimize backdrop filters for mobile */
    .overview-card,
    .tank-card,
    .video-card,
    .faction-btn,
    .filter-toggle {
        backdrop-filter: blur(5px); /* Reduced blur for performance */
    }

    /* Reduce box-shadow complexity on mobile */
    .overview-card,
    .tank-card,
    .video-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }

    /* Optimize text shadows for mobile */
    .overview-card h3,
    .tank-card h3,
    .section-header h2 {
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8); /* Simpler shadows */
    }

    /* Reduce gradient complexity on mobile */
    .featured-card::before {
        background: linear-gradient(45deg, var(--accent), var(--accent-secondary));
        opacity: 0.8;
    }

    /* Optimize button hover states for mobile */
    .faction-btn:hover,
    .filter-toggle:hover,
    .tank-expand-btn:hover {
        transform: scale(1.02); /* Smaller scale on mobile */
        transition: all 0.2s ease;
    }

    /* Reduce complex CSS filters on mobile */
    .tank-360-btn {
        filter: none; /* Remove complex filters on mobile */
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.4);
    }

    /* Optimize mobile scrolling */
    .tank-grid,
    .practice-content {
        -webkit-overflow-scrolling: touch; /* Smooth iOS scrolling */
        scroll-behavior: smooth;
    }
}

/* Smoke Video Link Styling */
.smoke-video-link {
    font-size: 0.8rem;
    text-decoration: none;
    color: #ffffff;
    background: linear-gradient(135deg, var(--accent), var(--accent-secondary));
    padding: 4px 8px;
    border-radius: 12px;
    margin-left: 8px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.3);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.smoke-video-link:hover {
    background: linear-gradient(135deg, var(--accent-secondary), var(--accent));
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
}

.smoke-video-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

/* Health Management Card Styling */
.health-management-card {
    grid-column: 1 / -1; /* Span full width */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.tank-types-card {
    grid-column: 1 / -1; /* Span full width */
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    margin-bottom: 2rem;
}

.health-components {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
    margin-top: 1.5rem !important;
}

.health-component {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.8rem !important;
    padding: 0.8rem !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.2s ease !important;
}

.health-component:hover {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

.health-icon {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    filter: brightness(1.1) contrast(1.05) !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Tank Types Components */
.tank-types-components {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.2rem !important;
    margin-top: 1.5rem !important;
}

.tank-type-component {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.8rem !important;
    padding: 0.8rem !important;
    background: rgba(0, 0, 0, 0.15) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    transition: all 0.2s ease !important;
}

.tank-type-component:hover {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    transform: translateY(-1px) !important;
}

.tank-type-icon {
    width: 44px !important;
    height: 44px !important;
    object-fit: contain !important;
    filter: brightness(1.1) contrast(1.05) !important;
    flex-shrink: 0 !important;
    display: block !important;
    margin: 0 auto !important;
}

.health-caption {
    color: var(--accent) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    margin: 0.3rem 0 !important;
}

.health-description {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    display: block !important;
    text-align: center !important;
}

.health-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.health-info strong {
    color: var(--accent) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

.health-info span {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

/* B33R Clan Branding Icon */
.clan-branding-icon {
    width: 4px;
    height: 4px;
    margin-right: 8px;
    vertical-align: middle;
    filter: brightness(1.2) contrast(1.1);
}

/* Updated Strategy Grid Layout */
.strategy-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.strategy-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 1.5rem;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    margin: 0;
}

/* All strategy cards now span full width in stacked layout */

.strategy-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.strategy-card h4 {
    color: var(--accent);
    margin-bottom: 1rem;
    margin-top: 0;
    font-size: 1.3rem;
    font-weight: 600;
}

.strategy-card p {
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 1rem;
    margin-top: 0;
    line-height: 1.5;
}

.strategy-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.strategy-card li {
    color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    line-height: 1.4;
}

.strategy-card li:last-child {
    border-bottom: none;
}

/* Responsive Design */
@media (max-width: 768px) {
    .strategy-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .health-components {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .health-component {
        padding: 0.8rem;
    }

    .health-icon {
        width: 40px;
        height: 40px;
    }

    .tank-types-components {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .tank-type-component {
        padding: 0.8rem;
    }

    .tank-type-icon {
        width: 40px;
        height: 40px;
    }
}

/* Additional Mobile Optimizations */
.expand-close-btn {
    display: none;
}

.scope-magnify-btn {
    display: none;
}

.start-practice-btn {
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding: 1rem 2rem;
    font-size: 1.1rem;
    font-weight: 600;
}

/* ========================================
   MOBILE TOUCH OPTIMIZATION
   ======================================== */
@media (max-width: 768px) {
    /* Touch-friendly button sizes (minimum 44x44px for Apple, 48x48px for Android) */
    button,
    .btn,
    .nav-link,
    .faction-btn,
    .type-filter-btn,
    .difficulty-btn,
    .bg-btn,
    .tank-expand-btn,
    .compare-btn {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* Larger touch targets for close buttons */
    .close-scope-btn,
    .close-comparison {
        width: 64px !important;
        height: 64px !important;
        font-size: 32px !important;
    }

    /* Reposition scope close button for mobile - center bottom */
    .close-scope-btn {
        position: fixed !important;
        top: auto !important;
        bottom: 20px !important; /* 20px from bottom */
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%) !important; /* Center horizontally */
    }

    /* Keep centered on hover */
    .close-scope-btn:hover {
        transform: translateX(-50%) !important;
    }

    /* ========================================
       MOBILE HEADER/LOGO FIXES
       ======================================== */
    /* Stack logo vertically on mobile */
    .logo-container {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem !important;
    }

    /* Make Hell Let Loose logo smaller on mobile */
    .hll-logo {
        height: 60px !important;
        width: auto !important;
    }

    /* Position Armor Hub text below logo */
    .armor-hub-text {
        position: static !important;
        margin-top: 0.5rem !important;
        font-size: 1.2rem !important;
    }

    /* Remove the decorative line on mobile */
    .logo-container::after {
        display: none !important;
    }

    /* Touch-friendly navigation */
    .nav-links {
        gap: 0.5rem !important;
    }

    .nav-link {
        padding: 14px 18px !important;
        font-size: 16px !important;
        margin: 4px 0 !important;
    }

    /* ========================================
       IDENTIFICATION TAB MOBILE FIXES
       ======================================== */
    /* Make practice area taller and prevent stacking */
    .practice-area {
        min-height: 800px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        gap: 2rem !important;
        padding: 2rem 1rem !important;
    }

    /* Give tank image more space */
    .practice-tank {
        min-height: 300px !important;
        max-height: none !important;
        margin-bottom: 2rem !important;
        flex-shrink: 0 !important;
    }

    .practice-tank img {
        max-width: 100% !important;
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        object-fit: contain !important;
    }

    /* Practice options spacing */
    .practice-options {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
        margin-top: 2rem !important;
    }

    .practice-option {
        width: 100% !important;
        min-height: 56px !important;
        padding: 16px !important;
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Difficulty selector spacing */
    .difficulty-selector {
        margin-bottom: 2rem !important;
    }

    .difficulty-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem !important;
        width: 100% !important;
    }

    .difficulty-btn {
        width: 100% !important;
        min-height: 60px !important;
        padding: 16px !important;
        font-size: 16px !important;
    }

    /* Identification tips mobile */
    .identification-tips-section {
        margin-top: 2rem !important;
        padding: 1.5rem !important;
    }

    .identification-tips-section ul {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    .identification-tips-section li {
        padding: 0.75rem 0 !important;
        padding-left: 2rem !important;
        font-size: 15px !important;
        line-height: 1.5 !important;
    }

    /* Start practice button */
    .start-practice-btn {
        width: 100% !important;
        min-height: 60px !important;
        font-size: 18px !important;
        margin-top: 2rem !important;
        margin-bottom: 1rem !important;
    }

    /* Game area container */
    .game-area-container {
        padding: 1.5rem !important;
        min-height: 900px !important;
    }

    /* Achievement section spacing */
    .achievement-section {
        margin-top: 2rem !important;
        padding: 1rem !important;
    }

    /* Improve text readability on mobile */
    body {
        font-size: 16px !important; /* Base font size to prevent zoom */
        line-height: 1.6 !important;
    }

    h1 {
        font-size: 2rem !important;
    }

    h2 {
        font-size: 1.75rem !important;
    }

    h3 {
        font-size: 1.5rem !important;
    }

    h4 {
        font-size: 1.25rem !important;
    }

    p {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    /* Larger input fields for better touch */
    input[type="text"],
    input[type="number"],
    select {
        min-height: 48px !important;
        font-size: 16px !important; /* Prevents iOS zoom */
        padding: 12px !important;
    }

    /* Touch-friendly tank cards */
    .tank-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .tank-name {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }

    /* Better spacing for finger navigation */
    .tank-grid {
        gap: 1.5rem !important;
        padding: 1rem !important;
    }

    /* Optimize 360° viewer for touch */
    .tank-360-viewer {
        height: 250px !important; /* Larger viewing area */
        touch-action: pan-y pinch-zoom; /* Enable smooth touch scrolling */
    }

    .tank-360-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 12px !important;
        font-size: 18px !important;
    }

    /* Touch-friendly filter buttons */
    .filter-buttons {
        gap: 12px !important;
        padding: 1rem !important;
        flex-wrap: wrap !important;
    }

    /* Scope viewer mobile optimization */
    .scope-viewer {
        padding: 1rem !important;
    }

    .scope-content {
        max-width: 100% !important;
        padding: 1rem !important;
    }

    .scope-image-container {
        touch-action: pan-x pan-y pinch-zoom !important;
    }

    /* Better modal positioning */
    .scope-viewer.active {
        align-items: flex-start !important;
        padding-top: 60px !important; /* Account for header */
    }

    /* Touch-friendly comparison panel */
    .comparison-header {
        padding: 1.5rem !important;
    }

    .comparison-controls {
        gap: 12px !important;
    }

    .clear-comparison,
    .close-comparison {
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
    }

    /* Practice mode mobile optimization */
    .practice-options {
        gap: 12px !important;
        padding: 1rem !important;
    }

    .practice-option {
        min-height: 56px !important;
        padding: 16px !important;
        font-size: 16px !important;
    }

    /* Artillery calculator mobile */
    .input-group {
        margin-bottom: 1.5rem !important;
    }

    .input-group label {
        font-size: 16px !important;
        margin-bottom: 8px !important;
    }

    .calculate-btn {
        width: 100% !important;
        min-height: 56px !important;
        font-size: 18px !important;
        margin-top: 1rem !important;
    }

    /* Strategy cards mobile spacing */
    .strategy-card {
        padding: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .strategy-card h4 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .strategy-card li {
        margin-bottom: 1rem !important;
        line-height: 1.6 !important;
    }

    /* Tank selection grid for scopes */
    .tank-selection-grid {
        gap: 12px !important;
        padding: 1rem !important;
    }

    .tank-option {
        min-height: 60px !important;
        padding: 12px !important;
    }

    /* Community section mobile */
    .creator-card {
        padding: 1.5rem !important;
    }

    .creator-link {
        min-height: 48px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }

    /* Video cards mobile */
    .video-card,
    .tutorial-video-card {
        padding: 1rem !important;
    }

    /* Better scrolling for overflows */
    .tank-details-content,
    .comparison-stats,
    .artillery-results {
        -webkit-overflow-scrolling: touch !important;
    }

    /* Prevent text selection on interactive elements */
    .tank-card,
    .overview-card,
    button,
    .btn {
        -webkit-user-select: none !important;
        user-select: none !important;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
    }

    /* Allow text selection in content areas */
    p, li, .health-description, .tank-type-description {
        -webkit-user-select: text !important;
        user-select: text !important;
    }

    /* ========================================
       RANGING TAB MOBILE FIXES
       ======================================== */
    /* Fix ranging tools grid for mobile */
    .ranging-tools {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        padding: 1rem !important;
    }

    /* Adjust ranging tool height for mobile */
    .ranging-tool {
        height: auto !important;
        min-height: 400px !important;
        padding: 1.5rem !important;
        cursor: default !important; /* Remove pointer cursor */
    }

    /* Prevent click expansion on mobile */
    .ranging-tool:active,
    .ranging-tool:hover {
        transform: none !important;
    }

    /* Hide expand button on mobile - tiles don't expand */
    .expand-btn {
        display: none !important;
    }

    /* Artillery calculator mobile */
    .ranging-tool h3 {
        font-size: 1.5rem !important;
        margin-bottom: 1.5rem !important;
    }

    .input-group {
        margin-bottom: 1.5rem !important;
    }

    .input-group label {
        display: block !important;
        margin-bottom: 0.5rem !important;
        font-size: 16px !important;
    }

    .input-group input,
    .input-group select {
        width: 100% !important;
        min-height: 48px !important;
        font-size: 16px !important;
        padding: 12px !important;
    }

    /* Artillery results table mobile */
    .arty-table {
        font-size: 14px !important;
        width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }

    .arty-table th,
    .arty-table td {
        padding: 8px 4px !important;
        font-size: 14px !important;
    }

    /* Armor sights mobile */
    .sights-selector h4 {
        font-size: 1.25rem !important;
        margin-bottom: 1rem !important;
    }

    .tank-faction-filter,
    .tank-type-filter {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        margin-bottom: 1rem !important;
    }

    .faction-filter-btn,
    .type-filter-btn {
        min-height: 44px !important;
        padding: 10px 16px !important;
        font-size: 14px !important;
        flex: 1 1 auto !important;
        min-width: 80px !important;
    }

    .tank-selection-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
        max-height: 400px !important;
        overflow-y: auto !important;
    }

    .tank-option {
        min-height: 80px !important;
        padding: 12px !important;
        font-size: 14px !important;
    }

    .tank-option img {
        max-width: 60px !important;
        height: auto !important;
    }

    /* Sights instructions mobile */
    .sights-instructions {
        padding: 1rem !important;
        font-size: 14px !important;
    }

    .sights-instructions ul {
        padding-left: 1.5rem !important;
    }

    .sights-instructions li {
        margin-bottom: 0.75rem !important;
        line-height: 1.5 !important;
    }

    /* Hide close button on mobile - tiles don't expand */
    .expand-close-btn {
        display: none !important;
    }
}

/* Performance Optimizations */
@media (max-width: 768px) {
    /* Reduce animations on mobile for better performance */
    * {
        animation-duration: 0.2s !important;
        transition-duration: 0.2s !important;
    }

    /* Optimize images for mobile */
    img {
        image-rendering: optimizeSpeed;
        image-rendering: -webkit-optimize-contrast;
    }

    /* Reduce box shadows on mobile */
    .tank-card,
    .overview-card,
    .strategy-card {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    /* Optimize grid layouts for mobile */
    .tank-grid {
        grid-template-columns: 1fr !important;
        gap: 0.5rem !important;
    }

    .overview-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }

    /* Disable complex gradients on mobile */
    .tank-card {
        background: var(--card-bg) !important;
    }

    /* Optimize font loading */
    .tank-name,
    .logo {
        font-feature-settings: normal !important;
    }
}

/* Desktop optimizations */
@media (min-width: 1200px) {
    /* Preload hover states for desktop */
    .tank-card:hover {
        will-change: transform;
    }

    /* Enable GPU acceleration for smooth animations */
    .tank-card,
    .overview-card {
        transform: translateZ(0);
        backface-visibility: hidden;
    }
}