@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;700&family=Orbitron:wght@400;500;900&display=swap');

/* =========================================
   0. DESIGN TOKENS
   ========================================= */
:root {
    --p1-color: #0077CC; /* Bright Blue */
    --p2-color: #FF9933; /* Bright Gold */
    --burn-color: #CC00CC; /* Magenta (VEX) */
    --board-bg: #050505;
    --neon-blue: #2a2a40;
    --move-highlight: rgba(255, 255, 255, 0.2);
    --capture-border: #888888;

    /* Animation Speeds */
    --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
}

/* =========================================
   1. GLOBAL RESET
   ========================================= */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    min-width: 375px; /* Minimum supported viewport width (iPhone size) */
    /* CRITICAL: overflow: hidden prevents layout shifts that might reveal white space or "cut" the gradient */
    overflow: hidden;
    transition: transform 0.1s ease-out;
    /* CRITICAL: Global Background Lock - radial gradient centered behind board */
    /* Changed from 50% 0% to 50% 50% so glow stays centered regardless of header height */
    /* Fixed attachment anchors gradient to viewport so it doesn't scroll with content */
    background: radial-gradient(circle at 50% 50%, #1a1a1a 0%, #000 100%) fixed;
    font-family: 'Orbitron', sans-serif;
    color: #fff;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* =========================================
   2. APP LAYOUT ENGINE
   ========================================= */
#app {
    display: flex;
    flex-direction: column;
    height: 100dvh;  /* CRITICAL: Strictly 100dvh - exact viewport height */
    width: 100%;
    min-width: 375px; /* Minimum supported viewport width */
    /* CRITICAL: overflow: hidden prevents layout shifts that might reveal white space or "cut" the gradient */
    overflow: hidden;
    /* CRITICAL: Hard-Code Container Transparency - remove all visual artifacts that cause seams */
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
}

/* =========================================
   3. HEADER
   ========================================= */
.header {
    position: relative;
    flex: 0 0 auto;  /* CRITICAL: Keeps logo at natural size - no flex growth/shrink */
    width: 100%;
    min-height: 0;  /* CRITICAL: No fixed height - allows natural sizing */
    padding-top: max(clamp(15px, 2vmin, 25px), env(safe-area-inset-top));
    padding-bottom: clamp(15px, 2vmin, 25px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 150;
    /* CRITICAL: Aggressive Transparency - remove all visual artifacts that cause seams */
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;  /* CRITICAL: Removed blur that causes cutoff look */
    background-image: none !important;
    /* CRITICAL: Functionally invisible to background rendering */
    pointer-events: none;
    overflow: visible;
}

#game-title {
    position: relative;
    pointer-events: auto;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 0;  /* Padding handled by .header */
    gap: clamp(2px, 0.3vmin, 4px);
    overflow: visible;
    margin-bottom: 0;  /* No extra margin - spacing handled by .header padding */
}



#game-logo {
    position: relative;  /* Needed for ::after pseudo-element positioning */
    height: clamp(112px, 17vmin, 312px);
    width: auto;
    opacity: 0.7;
    margin-bottom: 0;
    padding-bottom: 0;
    filter: drop-shadow(0 clamp(2px, 0.3vmin, 8px) clamp(8px, 1vmin, 16px) rgba(0, 0, 0, 0.3));
    transition: transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
    will-change: transform, opacity;
}

#game-logo:hover {
    opacity: 1.0;
    transform: scale(1.05);
}

/* Center node appears when menu is open - using #game-title::after since img tags don't support ::after */
.header.menu-open #game-title::after,
#game-title.menu-open::after {
    content: '';
    position: absolute;
    /* Position: half logo height (56-156px) = center of logo */
    /* #game-title has padding-top: 0, so node is positioned relative to top of #game-title */
    /* Logo height is clamp(112px, 17vmin, 312px), so half is clamp(56px, 8.5vmin, 156px) */
    top: clamp(56px, 8.5vmin, 156px);
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(8px, 1.2vmin, 16px);
    height: clamp(8px, 1.2vmin, 16px);
    background: radial-gradient(circle, var(--burn-color), rgba(204, 0, 204, 0.9));
    border-radius: 50%;
    box-shadow:
        0 0 3px rgba(204, 0, 204, 0.9),
        0 0 8px rgba(204, 0, 204, 0.6),
        0 0 16px rgba(204, 0, 204, 0.4);
    opacity: 1;
    animation: logo-node-appear 0.3s ease-out;
    z-index: 9999;
    pointer-events: none;
    display: block;
    visibility: visible;
}

/* Flash/glow animation when node appears */
@keyframes logo-node-appear {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
        box-shadow:
            0 0 3px rgba(204, 0, 204, 0.9),
            0 0 8px rgba(204, 0, 204, 0.6),
            0 0 16px rgba(204, 0, 204, 0.4);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.3);
        box-shadow:
            0 0 15px rgba(204, 0, 204, 1),
            0 0 35px rgba(204, 0, 204, 1),
            0 0 60px rgba(204, 0, 204, 0.9),
            0 0 90px rgba(204, 0, 204, 0.6);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
        box-shadow:
            0 0 3px rgba(204, 0, 204, 0.9),
            0 0 8px rgba(204, 0, 204, 0.6),
            0 0 16px rgba(204, 0, 204, 0.4);
    }
}

/* Fade out animation when menu closes */
.header:not(.menu-open) #game-title::after,
#game-title:not(.menu-open)::after {
    animation: logo-node-disappear 0.2s ease-out forwards;
}

@keyframes logo-node-disappear {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
}

.logo-chevron {
    display: none;  /* Removed - no longer needed */
}

.rotated {
    transform: rotate(180deg);
}

/* --- DROPDOWN MENU --- */
/* Backdrop overlay when menu is open */
.header.menu-open::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;  /* CRITICAL: Covers entire viewport so it doesn't look like a slice */
    /* CRITICAL: Cleanup Layout Overflows - use strictly transparent black to avoid horizontal line */
    /* Semi-transparent overlay provides dimming while backdrop-filter provides blur */
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    z-index: 199;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 0.2s ease, backdrop-filter 0.2s ease;
    animation: backdrop-fade-in 0.2s ease-out;
}

@keyframes backdrop-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.logo-dropdown {
    position: absolute;
    /* Position relative to #game-title: logo height + minimal gap */
    /* #game-title has padding-top: 0, so dropdown is positioned relative to top of #game-title */
    /* Logo height is clamp(112px, 17vmin, 312px) */
    top: calc(clamp(112px, 17vmin, 312px) + clamp(2px, 0.3vmin, 4px));
    left: 50%;
    transform: translateX(-50%);
    margin-top: 0;
    padding-top: 0;
    min-width: clamp(160px, 20vmin, 240px);
    padding: clamp(8px, 1vmin, 12px);
    background: rgba(10, 10, 10, 0.95);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: clamp(8px, 1.2vmin, 12px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s var(--ease-out), visibility 0.2s;
}

.logo-dropdown.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%);
}

.logo-dropdown ul { list-style: none; padding: 0; margin: 0; }

.known-issues-note {
    opacity: 0.6;
    font-style: italic;
    padding-top: clamp(6px, 0.8vmin, 8px) !important;
    padding-bottom: clamp(6px, 0.8vmin, 8px) !important;
}

.known-issues-note small {
    font-size: clamp(8px, 1vmin, 12px);
    color: rgba(255, 255, 255, 0.5);
}

.dropdown-item {
    padding: clamp(14px, 2vmin, 20px) clamp(20px, 2.5vmin, 28px);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    border-radius: clamp(8px, 1vmin, 12px);
    font-size: clamp(14px, 1.8vmin, 20px);
    font-weight: 600;
    text-transform: uppercase;
    transition: background-color 0.2s, color 0.2s;
    display: block;
    min-height: clamp(44px, 5.5vmin, 60px);  /* Minimum touch target size for mobile */
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.dropdown-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    margin: clamp(3px, 0.4vmin, 6px) clamp(6px, 0.8vmin, 10px);
}

.dropdown-setting {
    padding: clamp(14px, 2vmin, 20px) clamp(20px, 2.5vmin, 28px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: clamp(8px, 1vmin, 12px);  /* Similar spacing as between menu items */
    color: rgba(255, 255, 255, 0.7);
    font-size: clamp(16px, 2vmin, 22px);
    font-weight: 500;
    min-height: clamp(44px, 5.5vmin, 60px);  /* Minimum touch target size for mobile */
    text-align: center;
}

/* Center the Sound label */
.dropdown-setting > span:first-child {
    text-align: center;
    width: 100%;
}

.setting-toggle {
    width: clamp(48px, 6vmin, 64px);
    height: clamp(28px, 3.5vmin, 36px);
    background: rgba(255, 255, 255, 0.2);
    border-radius: clamp(14px, 1.75vmin, 18px);
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    flex-shrink: 0;
}

.setting-toggle.active { background: var(--p1-color); }

.setting-toggle::after {
    content: '';
    position: absolute;
    top: clamp(3px, 0.4vmin, 5px);
    left: clamp(3px, 0.4vmin, 5px);
    width: clamp(22px, 2.75vmin, 28px);
    height: clamp(22px, 2.75vmin, 28px);
    background: white;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    transition: transform 0.3s var(--ease-out);
}

.setting-toggle.active::after {
    transform: translateX(clamp(23px, 2.9vmin, 30px));
}

/* =========================================
   4. BOARD WRAPPER
   ========================================= */
.board-wrapper {
    flex: 1 1 auto;  /* CRITICAL: Flexible middle - must shrink or grow to fit remaining gap */
    position: relative;
    /* CRITICAL: Refine Flex Centering - dual-axis centering for perfect positioning */
    display: flex;
    flex-direction: column;
    justify-content: center;  /* Center horizontally */
    align-items: center;  /* Center vertically */
    width: 100%;
    min-height: 0;  /* CRITICAL: Allows wrapper to shrink smaller than children, forcing board to scale */
    min-width: 0;   /* Critical: Allow flex shrinking */
    overflow: hidden;  /* CRITICAL: Prevent board from overflowing into header/footer */
    padding: clamp(10px, 1.5vmin, 20px) 0;  /* Small padding to ensure separation */
    box-sizing: border-box;
    /* Ensure container has constrained dimensions for child sizing */
    max-width: 100%;
    max-height: 100%;
    /* CRITICAL: Background & Seam Cleanup - ensure body's gradient is the only background visible */
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    background-image: none !important;
    border: none;
}

/* =========================================
   5. GAME CONTAINER (Pure viewport-based, no pixel caps)
   ========================================= */
#game-container {
    position: relative;
    /* CRITICAL: Implement CSS Clamp - hard limits for playability and visual balance */
    /* Min (320px): Ensures nodes are large enough for accurate finger taps on mobile */
    /* Max (900px): Prevents board from becoming too big on high-resolution monitors */
    /* Preferred (90vmin): Scales dynamically with viewport */
    width: clamp(320px, 90vmin, 900px);
    height: clamp(320px, 90vmin, 900px);
    /* CRITICAL: Perfect square lock - strictly enforce 1:1 aspect ratio */
    aspect-ratio: 1 / 1;
    /* CRITICAL: Safe Area and UI Buffer - prevent overlap with header/footer */
    /* Use 100% to respect flexbox container constraints (board-wrapper) */
    /* This ensures board never overlaps header/footer regardless of their actual heights */
    max-height: 100%;
    /* CRITICAL: Fix Flex Centering - margin: auto centers in flex container */
    margin: auto;  /* Centers both horizontally and vertically */
    padding: 0;  /* No padding that might push it toward header */
    z-index: 1;  /* Below header (150) and footer (100) */
    flex-shrink: 1;
    /* CRITICAL: Background & Seam Cleanup - ensure body's gradient is the only background visible */
    background: transparent !important;
    box-shadow: none !important;
    border: none;
    /* CRITICAL: Responsive font scaling based on shortest screen dimension */
    /* Use clamp to match board sizing */
    font-size: clamp(320px, 90vmin, 900px);
}

/* "Niemeyer's Floating Concrete Vessel" Look */
#game-board {
  position: absolute;
  /* CRITICAL: Center the board exactly at the (0,0) midpoint of the container */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* CRITICAL: Enforce 1:1 Aspect Ratio Lock - perfect circle that matches internal grid */
  aspect-ratio: 1 / 1;
  height: 98%;  /* CRITICAL: Height is the anchor - when screen is wide, width scales to match */
  width: auto;  /* Width determined by aspect-ratio */
  border-radius: 50%;
  /* Ensure it never exceeds container */
  max-width: 100%;
  max-height: 100%;
  
  /* Smooth concrete gradient */
  background: radial-gradient(circle at 50% 50%,
          #222222 0%,   
          #2d2d2d 60%,  
          #353535 85%,  
          #3a3a3a 100%);
          
  box-shadow:
      inset 0 0 120px rgba(0, 0, 0, 0.9),
      inset 0 20px 80px rgba(0, 0, 0, 0.6),
      0 30px 80px rgba(0, 0, 0, 0.9),
      0 15px 40px rgba(0, 0, 0, 0.8),
      inset 0 -2px 4px rgba(255, 255, 255, 0.03);
      
  /* 🔴 KEEP VISIBLE: Prevents piece selection glow from being sliced off */
  overflow: visible; 
}

/* Organic alcoves - subtle texture overlay */
#game-board::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    pointer-events: none;
    background:
        radial-gradient(ellipse 110px 70px at 50% 2%, rgba(15, 15, 15, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 110px 70px at 50% 98%, rgba(15, 15, 15, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 70px 110px at 2% 50%, rgba(15, 15, 15, 0.8) 0%, transparent 70%),
        radial-gradient(ellipse 70px 110px at 98% 50%, rgba(15, 15, 15, 0.8) 0%, transparent 70%);
    box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.02);
}

/* =========================================
   6. LINES (Connections between nodes)
   ========================================= */
.line {
    position: absolute;
    height: 1px;
    background: rgba(160, 180, 200, 0.25);
    transform-origin: left center;
    pointer-events: none;
    z-index: 1;
}

.line.connecting {
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.3);
}

/* =========================================
   7. NODES (Updated to use absolute pixel positioning)
   ========================================= */
.node {
    position: absolute;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Standard Grid Intersections */
.node.intersection {
    width: 0.016em;  /* Scales with board container size */
    height: 0.016em;
    background-color: #666;
    border-radius: 50%;
    z-index: 5;
    box-shadow: 0 0 0 1px #888;
    transition: all 0.2s;
}

/* Large invisible hit area */
.node.intersection::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 0.08em;  /* Scales with board container size */
    height: 0.08em;
    border-radius: 50%;
}

/* Valid move highlighting (Pulsing Ring) */
.node.intersection.selected-move,
.node.outer.selected-move,
.node.center.selected-move {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 0 0 1px #888,
        0 0 0 8px rgba(255, 255, 255, 0.3);
    animation: subtle-pulse 2s ease-in-out infinite;
}

/* Removed general hover - now only applies to valid moves (see .node.intersection.selected-move:hover below) */

/* Hover state for valid move intersection nodes - expanding circle with white dot */
.node.intersection.selected-move:hover {
    width: 0.0747em;  /* Scales with board container size */
    height: 0.0747em;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.06) 0%, transparent 70%);
    border: 2px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 0 12px rgba(255, 255, 255, 0.3),
        inset 0 0 8px rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease-out;
}

.node.intersection.selected-move:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.0107em;  /* Scales with board container size */
    height: 0.0107em;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.4);
}

/* Blocked nodes (VEX trail) - Simple purple dots indicating historical pathing */
.node.blocked {
    width: 0.023em;  /* Scales with board container size */
    height: 0.023em;
    background: radial-gradient(circle, var(--burn-color), rgba(204, 0, 204, 0.9));
    border-radius: 50%;
    box-shadow:
        0 0 3px rgba(204, 0, 204, 0.9),
        0 0 8px rgba(204, 0, 204, 0.6),
        0 0 16px rgba(204, 0, 204, 0.4);
    transform: translate(-50%, -50%);
    z-index: 15;
    pointer-events: none;
    cursor: default;
}

/* Home Bases */
.node.outer {
    width: 0.0933em;  /* Scales with board container size */
    height: 0.0933em;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.9) 40%, rgba(255, 255, 255, 0.01) 70%);
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Target Glows - Using CSS variables for colorblind mode support */
.node.target-p1 {
    border-color: color-mix(in srgb, var(--p1-color) 40%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--p1-color) 15%, transparent) inset;
}

.node.target-p2 {
    border-color: color-mix(in srgb, var(--p2-color) 40%, transparent);
    box-shadow: 0 0 30px color-mix(in srgb, var(--p2-color) 15%, transparent) inset;
}

.node.center {
    width: 0.0933em;  /* Scales with board container size */
    height: 0.0933em;
    background: rgba(0, 0, 0, 0.5);
    border: 1px dashed rgba(255, 255, 255, 0.3);
    border-radius: 50%;
}

/* Home circle hover effects - show colored border and dot */
.node.outer.selected-move:hover {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.04) 0%, transparent 70%);
    border: 3px solid rgba(255, 255, 255, 0.4);
    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.3),
        inset 0 0 12px rgba(255, 255, 255, 0.08);
    transition: all 0.2s ease-out;
    z-index: 100;
}

/* P1 (Blue) home circle hover */
.node.outer.selected-move.target-p1:hover {
    background: radial-gradient(circle, color-mix(in srgb, var(--p1-color) 8%, transparent) 0%, transparent 70%);
    border: 3px solid color-mix(in srgb, var(--p1-color) 60%, transparent);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--p1-color) 40%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--p1-color) 10%, transparent);
}

.node.outer.selected-move.target-p1:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.0177em;  /* Scales with board container size */
    height: 0.0177em;
    background-color: color-mix(in srgb, var(--p1-color) 70%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--p1-color) 60%, transparent);
}

/* P2 (Gold) home circle hover */
.node.outer.selected-move.target-p2:hover {
    background: radial-gradient(circle, color-mix(in srgb, var(--p2-color) 8%, transparent) 0%, transparent 70%);
    border: 3px solid color-mix(in srgb, var(--p2-color) 60%, transparent);
    box-shadow:
        0 0 16px color-mix(in srgb, var(--p2-color) 40%, transparent),
        inset 0 0 12px color-mix(in srgb, var(--p2-color) 10%, transparent);
}

.node.outer.selected-move.target-p2:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.0177em;  /* Scales with board container size */
    height: 0.0177em;
    background-color: color-mix(in srgb, var(--p2-color) 70%, transparent);
    border-radius: 50%;
    box-shadow: 0 0 8px color-mix(in srgb, var(--p2-color) 60%, transparent);
}

/* Center node (N17) hover effects */
.node.center.selected-move {
    cursor: pointer;
    z-index: 100;
    box-shadow:
        0 0 0 2px #888,
        0 0 0 12px rgba(255, 255, 255, 0.25),
        0 0 16px 12px rgba(255, 255, 255, 0.15);
    animation: subtle-pulse 2s ease-in-out infinite;
}

.node.center.selected-move:hover {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    border: 3px solid rgba(255, 255, 255, 0.5);
    box-shadow:
        0 0 16px rgba(255, 255, 255, 0.35),
        inset 0 0 12px rgba(255, 255, 255, 0.1);
    transition: all 0.2s ease-out;
}

.node.center.selected-move:hover::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0.0177em;  /* Scales with board container size */
    height: 0.0177em;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
}

@keyframes subtle-pulse {
    0%, 100% { box-shadow: 0 0 0 1px #888, 0 0 0 8px rgba(255, 255, 255, 0.2); }
    50% { box-shadow: 0 0 0 1px #888, 0 0 0 8px rgba(255, 255, 255, 0.35); }
}

/* =========================================
   8. GAME PIECES (Universal viewport scaling)
   ========================================= */
.piece {
    width: 0.08em;  /* Scales with board container size (8% of board) */
    height: 0.08em;

    position: absolute;
    top: 0; left: 0;
    transform: translate(-50%, -50%);

    border-radius: 50%;
    z-index: 50;
    cursor: pointer;

    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.9),
        inset 2px 2px 5px rgba(255, 255, 255, 0.4),
        0 10px 20px rgba(0, 0, 0, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(4px);
    touch-action: none;

    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* The Glowing Core */
.piece::after {
    content: "";
    position: absolute;
    top: 20%; left: 20%;
    width: 60%; height: 60%;
    border-radius: 50%;
    filter: blur(5px);
    opacity: 0.7;
    z-index: -1;
}

/* Hover effect only for pieces the current player can move */
.piece.hoverable:hover {
    transform: translate(-50%, -50%) scale(1.15);
    z-index: 60;
    border-color: rgba(255, 255, 255, 0.7);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        inset 2px 2px 5px rgba(255, 255, 255, 0.5),
        0 10px 20px rgba(0, 0, 0, 0.6),
        0 0 20px rgba(255, 255, 255, 0.4);
}

.piece.selected {
    transform: translate(-50%, -50%) scale(1.2);
    z-index: 60;
    border-color: rgba(255, 255, 255, 0.9);
    box-shadow:
        inset 0 0 20px rgba(0, 0, 0, 0.8),
        inset 2px 2px 5px rgba(255, 255, 255, 0.5),
        0 10px 20px rgba(0, 0, 0, 0.6),
        0 0 25px rgba(255, 255, 255, 0.6);
}

/* P1: BLUE */
.piece.p1 {
    background: radial-gradient(circle at 30% 30%, #242424, #050505);
}
.piece.p1::after {
    background: var(--p1-color);
    box-shadow: 0 0 12px var(--p1-color), 0 0 20px var(--p1-color);
}

/* P2: GOLD */
.piece.p2 {
    background: radial-gradient(circle at 30% 30%, #242424, #050505);
}
.piece.p2::after {
    background: var(--p2-color);
    box-shadow: 0 0 12px var(--p2-color), 0 0 20px var(--p2-color);
}

/* Animation States */
.piece.moving {
    animation: vex-pulse 0.5s ease-in-out;
}

.piece.dimmed::after {
    opacity: 0.2;
}

.piece.flashing {
    animation: flash 0.1s ease-in-out 3;
}

.piece.revealed {
    animation: reveal 0.35s ease-out;
}

/* SCORED STATE - Pieces locked into enemy home circles */
.piece.scored {
    transform: translate(-50%, -50%) scale(0.9);
    z-index: 45;
    border: none;
    box-shadow: inset 0 0 30px currentColor, 0 0 20px currentColor;
}

.piece.scored::after {
    opacity: 1;
    filter: blur(10px);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: neon-pulse 2s infinite alternate;
}

.piece.p1.scored {
    color: var(--p1-color);
}

.piece.p2.scored {
    color: var(--p2-color);
}

@keyframes neon-pulse {
    0% {
        opacity: 0.8;
        box-shadow: 0 0 10px currentColor;
    }
    100% {
        opacity: 1;
        box-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* Capturable piece - can be captured by VEX */
.piece.capturable {
    cursor: pointer;
    outline: 3px solid rgba(255, 255, 255, 0.6);
    outline-offset: 3px;
    animation: capturable-ring-pulse 1.5s ease-in-out infinite;
    transition: outline-offset 0.08s linear, outline-color 0.08s linear;
    /* Ensure positioning is not affected by outline */
    transform: translate(-50%, -50%);
}

/* Hover affordance for capturable pieces - precise focus indicator */
.piece.capturable:hover {
    outline-color: rgba(255, 255, 255, 0.9);
    outline-offset: 5px;
    /* Maintain exact centering on hover */
    transform: translate(-50%, -50%);
}

.piece.capturable:hover::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    pointer-events: none;
    z-index: 5;
}

@keyframes capturable-ring-pulse {
    0%, 100% {
        outline-color: rgba(255, 255, 255, 0.6);
        outline-width: 3px;
    }
    50% {
        outline-color: rgba(255, 255, 255, 0.75);
        outline-width: 3.5px;
    }
}

/* Captured piece - suppressed and inert, subordinate to VEX */
.piece.captured {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.55;
    filter: brightness(0.65) saturate(0.5);
    z-index: 1; /* Above VEX background, below VEX grid */
    cursor: not-allowed;
    pointer-events: none;
    border: none;
    box-shadow: none;
}

/* Remove colored core glow from captured piece */
.piece.captured::after {
    display: none;
}

/* Remove any pseudo-element overlays */
.piece.captured::before {
    display: none;
}

/* Captured piece core indicator - small solid color dot at VEX center */
.captured-core-indicator {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2vmin;  /* Responsive scaling - ~15px at 750px board */
    height: 2vmin;
    border-radius: 50%;
    z-index: 1; /* Same layer as captured piece, below VEX grid */
    pointer-events: none;
    box-shadow: none;
    border: none;
}

.captured-core-indicator.p1 {
    background: #1a7bb3; /* Slightly darker blue */
}

.captured-core-indicator.p2 {
    background: #b8813d; /* Slightly darker gold */
}

/* Being consumed - pulled into VEX center and scaled down */
.piece.being-consumed {
    animation: consume-into-vex 0.35s ease-in forwards !important;
}

@keyframes consume-into-vex {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0.65;
    }
    100% {
        transform: translate(-50%, -50%) scale(0.1);
        opacity: 0;
    }
}

/* Energy core - forms at VEX center before particle emission */
.energy-core {
    position: absolute;
    width: 1.6vmin;  /* Larger, more intense buildup */
    height: 1.6vmin;
    border-radius: 50%;
    z-index: 55;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0);
    animation: core-form-intense 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.energy-core.p1 {
    background: radial-gradient(circle, #2da8ff, var(--p1-color), rgba(0, 119, 204, 0.8));
    box-shadow: 
        0 0 8px var(--p1-color),
        0 0 16px rgba(45, 168, 255, 0.6),
        0 0 24px rgba(45, 168, 255, 0.3);
}

.energy-core.p2 {
    background: radial-gradient(circle, #ffb84d, var(--p2-color), rgba(255, 153, 51, 0.8));
    box-shadow: 
        0 0 8px var(--p2-color),
        0 0 16px rgba(255, 184, 77, 0.6),
        0 0 24px rgba(255, 184, 77, 0.3);
}

@keyframes core-form-intense {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* Energy particle - intensified for supercharged capture */
.energy-particle {
    position: absolute;
    width: 2.4vmin;  /* Larger, more visible */
    height: 2.4vmin;
    border-radius: 50%;
    z-index: 56;  /* Above trail */
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: filter 0.05s linear;
}

.energy-particle.p1 {
    background: radial-gradient(circle, #ffffff 0%, #2da8ff 40%, var(--p1-color) 100%);
    box-shadow:
        0 0 6px rgba(45, 168, 255, 1),
        0 0 12px rgba(45, 168, 255, 0.8),
        0 0 20px rgba(45, 168, 255, 0.5),
        0 0 30px rgba(45, 168, 255, 0.3);
}

.energy-particle.p2 {
    background: radial-gradient(circle, #ffffff 0%, #ffb84d 40%, var(--p2-color) 100%);
    box-shadow:
        0 0 6px rgba(255, 184, 77, 1),
        0 0 12px rgba(255, 184, 77, 0.8),
        0 0 20px rgba(255, 184, 77, 0.5),
        0 0 30px rgba(255, 184, 77, 0.3);
}

/* Energy trail - subtle streak effect */
.energy-trail {
    position: absolute;
    height: 0.4vmin;  /* Thin line */
    transform-origin: left center;
    z-index: 55;  /* Below particle */
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.energy-trail.p1 {
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(45, 168, 255, 0.6) 20%,
        rgba(45, 168, 255, 0.8) 50%,
        rgba(45, 168, 255, 0.6) 80%,
        transparent 100%
    );
    box-shadow: 0 0 4px rgba(45, 168, 255, 0.5);
}

.energy-trail.p2 {
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(255, 184, 77, 0.6) 20%,
        rgba(255, 184, 77, 0.8) 50%,
        rgba(255, 184, 77, 0.6) 80%,
        transparent 100%
    );
    box-shadow: 0 0 4px rgba(255, 184, 77, 0.5);
}

/* Particle-to-piece transformation */
.piece.particle-to-piece {
    animation: particle-expand 0.25s ease-out forwards;
}

@keyframes particle-expand {
    from {
        width: 2.4vmin;  /* Matches enhanced energy particle size */
        height: 2.4vmin;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    to {
        width: 6vmin;  /* Responsive scaling - matches .piece base size */
        height: 6vmin;
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Piece respawn - snap to position then expand */
.piece.respawning {
    animation: respawn-expand 0.22s ease-out forwards;
}

@keyframes respawn-expand {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.3);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes vex-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); }
    50% { transform: translate(-50%, -50%) scale(1.1); }
}

@keyframes flash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

@keyframes reveal {
    0% {
        transform: translate(-50%, -50%) scale(0.5);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

/* =========================================
   9. HUD / FOOTER
   ========================================= */
.hud {
    position: relative;
    flex: 0 0 auto;  /* CRITICAL: Keeps turn indicator pinned at bottom - no flex growth/shrink */
    flex-shrink: 0;  /* CRITICAL: Prevent flexbox from squishing footer or pushing it off-screen */
    width: 100%;
    min-height: 0;  /* CRITICAL: No fixed height - allows natural sizing */
    padding-top: clamp(15px, 2vmin, 25px);
    padding-bottom: max(clamp(15px, 2vmin, 25px), env(safe-area-inset-bottom));
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    /* CRITICAL: Aggressive Transparency - remove all visual artifacts that cause seams */
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;  /* CRITICAL: Removed blur that causes cutoff look */
    background-image: none !important;
    /* CRITICAL: Functionally invisible to background rendering */
    pointer-events: none;
}

.turn-indicator {
    position: relative;
    min-width: clamp(100px, 15vw, 250px);
    padding: clamp(12px, 1.8vmin, 24px) clamp(28px, 4vw, 56px);
    font-size: clamp(14px, 2.2vmin, 31px);
    font-weight: 700;
    letter-spacing: clamp(0.1em, 0.2vmin, 0.25em);
    text-align: center;
    z-index: 1000;
    pointer-events: auto;
    white-space: nowrap;
    border-radius: clamp(20px, 4vmin, 60px);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(12px);
    transition: color 0.3s, border-color 0.3s, text-shadow 0.3s;
}

.turn-indicator.cyan {
    color: var(--p1-color);
    border: clamp(1px, 0.1vmin, 2px) solid color-mix(in srgb, var(--p1-color) 30%, transparent);
    text-shadow: 0 0 clamp(10px, 1.5vmin, 20px) color-mix(in srgb, var(--p1-color) 60%, transparent);
    box-shadow: 0 clamp(3px, 0.4vmin, 5px) clamp(15px, 2vmin, 25px) rgba(0,0,0,0.3);
}

.turn-indicator.magenta {
    color: var(--p2-color);
    border: clamp(1px, 0.1vmin, 2px) solid color-mix(in srgb, var(--p2-color) 30%, transparent);
    text-shadow: 0 0 clamp(10px, 1.5vmin, 20px) color-mix(in srgb, var(--p2-color) 60%, transparent);
    box-shadow: 0 clamp(3px, 0.4vmin, 5px) clamp(15px, 2vmin, 25px) rgba(0,0,0,0.3);
}

/* AI Difficulty Selector */
.ai-difficulty-selector {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    margin: 0 0.5rem;
    pointer-events: auto;
}

.ai-difficulty-selector label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;
}

.ai-difficulty-selector select {
    padding: 0.4rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-size: 0.85rem;
    cursor: pointer;
    transition: border-color 0.2s;
}

.ai-difficulty-selector select:hover {
    border-color: rgba(255, 255, 255, 0.4);
}

.ai-difficulty-selector select:focus {
    outline: none;
    border-color: var(--p1-color);
}

/* AI Thinking Indicator */
.ai-thinking-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 153, 51, 0.2);
    border-radius: 6px;
    margin: 0 0.5rem;
    border: 1px solid rgba(255, 153, 51, 0.3);
    pointer-events: auto;
}

.ai-thinking-indicator span {
    font-size: 0.85rem;
    color: #FF9933;
    font-weight: 500;
}

.ai-thinking-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 153, 51, 0.3);
    border-top-color: #FF9933;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* How to Play Modal */
.how-to-play-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}

.how-to-play-overlay.hidden {
    display: none;
}

.how-to-play-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    max-width: 800px; /* Increased width for better readability */
    width: 100%;
    max-height: 90vh;
    height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.how-to-play-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.how-to-play-title-group {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.how-to-play-header h2 {
    margin: 0;
    font-size: clamp(28px, 4vmin, 36px); /* Increased and responsive */
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.how-to-play-subtitle {
    margin: 8px 0 0 0;
    font-size: clamp(14px, 2vmin, 18px);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Orbitron', sans-serif;
}

.close-btn {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.close-btn:hover {
    color: #fff;
}

.how-to-play-content {
    padding: 24px 32px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    min-height: 0; /* CRITICAL: Allows flex child to shrink and enable scrolling */
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.8; /* Increased line height for better readability */
    /* Custom scrollbar styling */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.how-to-play-content::-webkit-scrollbar {
    width: 8px;
}

.how-to-play-content::-webkit-scrollbar-track {
    background: transparent;
}

.how-to-play-content::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 4px;
}

.how-to-play-content::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

.how-to-play-content section {
    margin-bottom: 32px;
}

.how-to-play-content section:last-child {
    margin-bottom: 0;
}

.how-to-play-content h3 {
    color: #00ffff;
    font-size: clamp(22px, 3vmin, 28px); /* Increased and responsive */
    font-weight: 700;
    margin: 0 0 16px 0;
    font-family: 'Orbitron', sans-serif;
}

.how-to-play-content p {
    margin: 0 0 18px 0;
    font-size: clamp(18px, 2.5vmin, 22px); /* Increased and responsive */
}

.how-to-play-content .game-description {
    font-size: clamp(16px, 2.2vmin, 20px);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    text-align: center;
    margin-bottom: 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.how-to-play-content p:last-child {
    margin-bottom: 0;
}

.how-to-play-content em {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    display: block;
    margin-top: 6px;
    font-size: clamp(16px, 2vmin, 20px); /* Increased and responsive */
}

.how-to-play-content ul,
.how-to-play-content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.how-to-play-content li {
    margin-bottom: 10px;
    font-size: clamp(18px, 2.5vmin, 22px); /* Increased and responsive */
}

.how-to-play-content strong {
    color: #fff;
    font-weight: 600;
}

/* Beta Disclaimer Modal */
.beta-disclaimer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    z-index: 10001; /* Above other modals */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.beta-disclaimer-overlay.hidden {
    display: none;
}

.beta-disclaimer-modal {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid rgba(255, 107, 107, 0.3);
    border-radius: 12px;
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.beta-disclaimer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 107, 107, 0.1) 0%, rgba(238, 90, 111, 0.1) 100%);
}

.beta-disclaimer-header h2 {
    margin: 0;
    font-size: 24px;
    color: #fff;
    font-family: 'Orbitron', sans-serif;
    font-weight: 700;
}

.beta-disclaimer-content {
    padding: 32px;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'Rajdhani', sans-serif;
    line-height: 1.8;
    text-align: center;
}

.beta-disclaimer-content p {
    margin: 0 0 16px 0;
}

.beta-disclaimer-content p:last-child {
    margin-bottom: 0;
}

.beta-disclaimer-content strong {
    color: #ff6b6b;
    font-weight: 700;
}

.beta-note {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
    margin-top: 24px !important;
}

.beta-disclaimer-footer {
    padding: 24px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: center;
}

.how-to-play-footer {
    padding: 20px 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center;
}

.how-to-play-footer .primary-btn {
    padding: 12px 48px;
    font-size: 16px;
    font-weight: 600;
}

/* THE VEX (Red Grid on Black) - Layered for piece containment */
.piece.vex {
  background: none; /* Background moved to ::after for z-index layering */
  border: 2px solid var(--burn-color);
  box-shadow:
      0 0 15px var(--burn-color),
      inset 0 0 15px var(--burn-color);
  overflow: hidden;
  z-index: 52; /* Above captured piece */
}

/* VEX background fill - energy field with subtle depth */
.piece.vex::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at 35% 35%,
    rgba(20, 20, 20, 0.85),
    rgba(5, 5, 5, 0.9),
    rgba(0, 0, 0, 0.95)
  );
  border-radius: 50%;
  z-index: -2; /* Below VEX element, below captured piece */
  pointer-events: none;
}

/* VEX containing captured piece - smoked glass transparency */
.piece.vex.containing::after {
  background: radial-gradient(
    circle at 35% 35%,
    rgba(20, 20, 20, 0.75),
    rgba(5, 5, 5, 0.8),
    rgba(0, 0, 0, 0.85)
  );
}

/* The Vex Grid - Jitter Effect */
.piece.vex::before {
  content: "";
  position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;

  background-image:
      linear-gradient(color-mix(in srgb, var(--burn-color) 50%, transparent) 1px, transparent 1px),
      linear-gradient(90deg, color-mix(in srgb, var(--burn-color) 50%, transparent) 1px, transparent 1px);

  background-size: clamp(10px, 1.5vmin, 20px) clamp(10px, 1.5vmin, 20px);
  z-index: 2; /* Above captured piece */

  /* FAST JITTER (0.2s) instead of slow spin */
  animation: grid-jitter 0.2s infinite linear;
}

/* Jitter Keyframes: Rapid XY translation */
@keyframes grid-jitter {
  0% { transform: translate(0, 0); }
  25% { transform: translate(2px, 1px); }
  50% { transform: translate(-1px, 2px); }
  75% { transform: translate(1px, -2px); }
  100% { transform: translate(0, 0); }
}

/* VEX Active State - When it's VEX's turn to move (white grid, intense jitter) */
.piece.vex.active {
  cursor: pointer;
  border-color: #fff;
  box-shadow:
      0 0 30px var(--burn-color),
      inset 0 0 30px var(--burn-color);
}

.piece.vex.active::before {
  background-image:
      linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
  animation: grid-jitter-intense 0.1s infinite linear;
}

/* VEX Active Hover - Shows VEX is moveable */
.piece.vex.active {
  transition: transform 0.08s linear, border-color 0.08s linear, box-shadow 0.08s linear;
}

.piece.vex.active:hover {
  transform: translate(-50%, -50%) scale(1.05);
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
      0 0 35px var(--burn-color),
      0 0 20px rgba(255, 255, 255, 0.4),
      inset 0 0 35px var(--burn-color);
}

/* VEX Selected State - Even brighter when clicked */
.piece.vex.selected {
  cursor: pointer;
  border: 3px solid #fff;
  box-shadow:
      0 0 40px var(--burn-color),
      inset 0 0 40px var(--burn-color);
  transform: translate(-50%, -50%) scale(1.1);
}

/* VEX Long-press feedback - subtle white shrink effect */
.piece.vex.long-pressing {
  animation: vex-long-press 0.5s ease-out forwards;
  border-color: rgba(255, 255, 255, 0.9) !important;
  box-shadow:
      0 0 25px rgba(255, 255, 255, 0.6),
      inset 0 0 25px rgba(255, 255, 255, 0.4) !important;
}

@keyframes vex-long-press {
  0% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.7;
  }
}

/* Supercharged VEX Long-press feedback - intense charged pressing effect with smooth transition */
.piece.vex.supercharged-p1.long-pressing {
  animation: supercharged-vex-long-press-p1 0.5s ease-out forwards;
  border-color: rgba(0, 119, 204, 0.9) !important;
}

.piece.vex.supercharged-p2.long-pressing {
  animation: supercharged-vex-long-press-p2 0.5s ease-out forwards;
  border-color: rgba(255, 153, 51, 0.9) !important;
}

@keyframes supercharged-vex-long-press-p1 {
  0% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
    filter: brightness(2);
    box-shadow:
        0 0 80px var(--p1-color),
        0 0 120px var(--p1-color),
        0 0 160px var(--p1-color),
        inset 0 0 60px var(--p1-color),
        inset 0 0 30px #fff;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(1.8);
    box-shadow:
        0 0 100px var(--p1-color),
        0 0 150px var(--p1-color),
        0 0 200px var(--p1-color),
        inset 0 0 80px var(--p1-color),
        inset 0 0 40px #fff;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.95);
    filter: brightness(1.4);
    box-shadow:
        0 0 50px rgba(0, 119, 204, 0.6),
        0 0 80px rgba(0, 119, 204, 0.4),
        0 0 100px rgba(255, 255, 255, 0.3),
        inset 0 0 40px rgba(0, 119, 204, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.7;
    filter: brightness(1);
    box-shadow:
        0 0 25px rgba(255, 255, 255, 0.6),
        0 0 40px rgba(255, 255, 255, 0.3),
        inset 0 0 25px rgba(255, 255, 255, 0.4);
  }
}

@keyframes supercharged-vex-long-press-p2 {
  0% {
    transform: translate(-50%, -50%) scale(1.15);
    opacity: 1;
    filter: brightness(2);
    box-shadow:
        0 0 80px var(--p2-color),
        0 0 120px var(--p2-color),
        0 0 160px var(--p2-color),
        inset 0 0 60px var(--p2-color),
        inset 0 0 30px #fff;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.05);
    filter: brightness(1.8);
    box-shadow:
        0 0 100px var(--p2-color),
        0 0 150px var(--p2-color),
        0 0 200px var(--p2-color),
        inset 0 0 80px var(--p2-color),
        inset 0 0 40px #fff;
  }
  70% {
    transform: translate(-50%, -50%) scale(0.95);
    filter: brightness(1.4);
    box-shadow:
        0 0 50px rgba(255, 153, 51, 0.6),
        0 0 80px rgba(255, 153, 51, 0.4),
        0 0 100px rgba(255, 255, 255, 0.3),
        inset 0 0 40px rgba(255, 153, 51, 0.5),
        inset 0 0 20px rgba(255, 255, 255, 0.5);
  }
  100% {
    transform: translate(-50%, -50%) scale(0.9);
    opacity: 0.7;
    filter: brightness(1);
    box-shadow:
        0 0 25px rgba(255, 255, 255, 0.6),
        0 0 40px rgba(255, 255, 255, 0.3),
        inset 0 0 25px rgba(255, 255, 255, 0.4);
  }
}

.piece.vex.selected::before {
  background-image:
      linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
  animation: grid-jitter-intense 0.1s infinite linear;
}

/* Grid Jitter Intense - for active/moving VEX */
@keyframes grid-jitter-intense {
  0% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(4px, -3px) scale(1.1); }
  50% { transform: translate(-4px, 4px) scale(0.9); }
  75% { transform: translate(3px, -5px) scale(1.05); }
  100% { transform: translate(0, 0) scale(1); }
}

/* Grid Jitter Supercharged - for supercharged VEX */
@keyframes grid-jitter-supercharged {
  0% { transform: translate(0, 0) scale(1.05); }
  25% { transform: translate(5px, -4px) scale(1.1); }
  50% { transform: translate(-5px, 5px) scale(0.95); }
  75% { transform: translate(4px, -6px) scale(1.08); }
  100% { transform: translate(0, 0) scale(1.05); }
}

/* VEX Supercharged States - Match original exactly */
.piece.vex.supercharged-p1 {
  border: 4px solid var(--p1-color);
  border-color: var(--p1-color) !important;
  background: rgba(0, 0, 0, 0.9);
  box-shadow:
      0 0 40px var(--p1-color),
      0 0 60px var(--p1-color),
      inset 0 0 40px var(--p1-color),
      inset 0 0 20px #fff !important;
  animation: supercharge-pulse-p1 0.8s ease-in-out infinite;
  filter: brightness(1.5);
  transform: translate(-50%, -50%) scale(1.1);
}

.piece.vex.supercharged-p1::before {
  background-image:
      linear-gradient(var(--p1-color) 2px, transparent 2px),
      linear-gradient(90deg, var(--p1-color) 2px, transparent 2px);
  background-size: clamp(8px, 1.2vmin, 16px) clamp(8px, 1.2vmin, 16px);
  animation: grid-jitter-supercharged 0.08s infinite linear;
  filter: brightness(2);
}

.piece.vex.supercharged-p2 {
  border: 4px solid var(--p2-color);
  border-color: var(--p2-color) !important;
  background: rgba(0, 0, 0, 0.9);
  box-shadow:
      0 0 40px var(--p2-color),
      0 0 60px var(--p2-color),
      inset 0 0 40px var(--p2-color),
      inset 0 0 20px #fff !important;
  animation: supercharge-pulse-p2 0.8s ease-in-out infinite;
  filter: brightness(1.5);
  transform: translate(-50%, -50%) scale(1.1);
}

.piece.vex.supercharged-p2::before {
  background-image:
      linear-gradient(var(--p2-color) 2px, transparent 2px),
      linear-gradient(90deg, var(--p2-color) 2px, transparent 2px);
  background-size: clamp(8px, 1.2vmin, 16px) clamp(8px, 1.2vmin, 16px);
  animation: grid-jitter-supercharged 0.08s infinite linear;
  filter: brightness(2);
}

@keyframes supercharge-pulse-p1 {
  0%, 100% {
    box-shadow:
        0 0 40px var(--p1-color),
        0 0 60px var(--p1-color),
        inset 0 0 40px var(--p1-color),
        inset 0 0 20px #fff;
  }
  50% {
    box-shadow:
        0 0 60px var(--p1-color),
        0 0 120px var(--p1-color),
        inset 0 0 60px var(--p1-color),
        inset 0 0 30px #fff;
  }
}

@keyframes supercharge-pulse-p2 {
  0%, 100% {
    box-shadow:
        0 0 40px var(--p2-color),
        0 0 60px var(--p2-color),
        inset 0 0 40px var(--p2-color),
        inset 0 0 20px #fff;
  }
  50% {
    box-shadow:
        0 0 60px var(--p2-color),
        0 0 120px var(--p2-color),
        inset 0 0 60px var(--p2-color),
        inset 0 0 30px #fff;
  }
}

/* =========================================
   10. ENDGAME SCREENS
   ========================================= */

/* Endgame Overlay - Restrained, abstract-strategy tone */
.endgame-overlay {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.endgame-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* Win Screen (Blue) */
.win-text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(2.2rem, 6vw, 4rem);
    letter-spacing: 0.25em;
    color: #2da8ff;
    text-shadow:
        0 0 6px rgba(45, 168, 255, 0.45),
        0 0 14px rgba(45, 168, 255, 0.25);
    opacity: 0;
    animation: fadeIn 240ms ease-out forwards;
}

/* Loss Screen (Gold) */
.loss-text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(2.2rem, 6vw, 4rem);
    letter-spacing: 0.25em;
    color: #d49a3a;
    text-shadow:
        0 0 4px rgba(212, 154, 58, 0.35),
        0 0 10px rgba(212, 154, 58, 0.18);
    opacity: 0;
    animation: fadeIn 240ms ease-out forwards;
}

/* Draw Screen (Purple/White) */
.draw-text {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(1.8rem, 5vw, 3.2rem);
    letter-spacing: 0.2em;
    color: #a855f7;
    text-shadow:
        0 0 5px rgba(168, 85, 247, 0.4),
        0 0 12px rgba(168, 85, 247, 0.2);
    opacity: 0;
    animation: fadeIn 240ms ease-out forwards;
}

/* Fade Animation - Shared */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Endgame Buttons Container */
.endgame-buttons {
    margin-top: clamp(24px, 3vmin, 32px);
    display: flex;
    flex-direction: column;
    gap: clamp(12px, 1.5vmin, 20px);
    align-items: center;
}

/* Play Again Button */
.play-again {
    padding: clamp(14px, 2vmin, 20px) clamp(32px, 4vmin, 48px);
    font-size: clamp(16px, 2vmin, 24px);
    letter-spacing: 0.12em;
    color: #e6e6e6;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: clamp(8px, 1vmin, 12px);
    cursor: pointer;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: uppercase;
    transition: background 0.2s ease;
    width: 100%;
    max-width: clamp(200px, 25vmin, 300px);
    min-height: clamp(48px, 6vmin, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.play-again:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* Main Menu Button */
.main-menu-btn {
    padding: clamp(14px, 2vmin, 20px) clamp(32px, 4vmin, 48px);
    font-size: clamp(16px, 2vmin, 24px);
    letter-spacing: 0.12em;
    color: #e6e6e6;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: clamp(8px, 1vmin, 12px);
    cursor: pointer;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    text-transform: uppercase;
    transition: background 0.2s ease;
    width: 100%;
    max-width: clamp(200px, 25vmin, 300px);
    min-height: clamp(48px, 6vmin, 64px);
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* =========================================
   11. RESPONSIVE DESIGN
   ========================================= */

/* Mobile-first base styles (already set above) */

/* Minimum viewport size warning */
.viewport-warning {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    z-index: 10000;
    font-weight: 700;
}

@media (max-width: 374px) {
    .viewport-warning {
        display: block;
    }
    
    /* Ensure content doesn't shrink below minimum */
    html, body, #app {
        min-width: 375px;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    /* Header now scales with viewport - no override needed */

    /* Logo and chevron now scale with viewport - no override needed */

    .logo-dropdown {
        min-width: 160px;
        font-size: 11px;
        z-index: 250;
    }

    .dropdown-item {
        padding: clamp(14px, 2vmin, 20px) clamp(20px, 2.5vmin, 28px);
        font-size: clamp(14px, 1.8vmin, 20px);
        min-height: clamp(44px, 5.5vmin, 60px);
    }

    .dropdown-setting {
        padding: clamp(14px, 2vmin, 20px) clamp(20px, 2.5vmin, 28px);
        font-size: clamp(14px, 1.8vmin, 20px);
        min-height: clamp(44px, 5.5vmin, 60px);
    }

    /* HUD now scales with viewport - no override needed */

    .turn-indicator {
        min-width: clamp(100px, 12vw, 180px);
    }

    /* Board spans 98% of screen length on mobile, constrained by flex layout */
    #game-container {
        width: min(98vmin, 950px, 100%);
        aspect-ratio: 1 / 1;
        font-size: min(98vmin, 950px);
        max-width: calc(100vw - 20px);  /* Small margin for safety */
        max-height: 100%;
    }

    /* Ensure board wrapper doesn't cause overflow */
    .board-wrapper {
        min-height: 0;
        padding: 0;
    }
}

/* Tablets */
@media (min-width: 768px) {
    /* Header now scales with viewport - no override needed */

    /* Logo and chevron now scale with viewport - no override needed */

    /* Logo dropdown and items now scale with viewport - no override needed */

    /* HUD now scales with viewport - no override needed */

    .turn-indicator {
        min-width: clamp(140px, 16vw, 220px);
    }
}

/* Desktop */
@media (min-width: 1024px) {
    /* Header now scales with viewport - no override needed */

    /* Logo and chevron now scale with viewport - no override needed */

    /* Logo dropdown and items now scale with viewport - no override needed */

    /* HUD now scales with viewport - no override needed */

    .turn-indicator {
        min-width: clamp(180px, 18vw, 280px);
    }
}
/* ============================================
   TUTORIAL SYSTEM STYLES
   ============================================ */

/* Tutorial Overlay - Dims the board */
.tutorial-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: brightness(0.6) blur(1px);
    z-index: 9998;
    display: none;
    pointer-events: none; /* Allow clicks to pass through */
}

.tutorial-overlay.active {
    display: block;
}

/* Tutorial HUD - Instruction box at bottom */
.tutorial-hud {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 2px solid #00ffff;
    border-radius: 12px;
    padding: 24px 32px;
    max-width: 600px;
    z-index: 9999;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.3);
    pointer-events: all; /* HUD blocks clicks */
}

#tutorial-instruction {
    color: #00ffff;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 16px;
    line-height: 1.4;
}

.tutorial-controls {
    text-align: center;
}

.tutorial-skip {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.tutorial-skip:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}


/* Tutorial Complete Screen */
.tutorial-complete-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10002;
}

.tutorial-complete-overlay.show {
    display: flex;
}

.tutorial-complete-content {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    border: 3px solid #00ffff;
    border-radius: 16px;
    padding: 48px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 8px 40px rgba(0, 255, 255, 0.4);
}

.tutorial-complete-content h2 {
    color: #00ffff;
    font-size: 36px;
    margin-bottom: 16px;
    text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

.tutorial-complete-content p {
    color: #fff;
    font-size: 16px;
    margin-bottom: 12px;
    line-height: 1.6;
}

.strategy-link {
    display: inline-block;
    color: #00ffff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0;
    padding: 12px 24px;
    border: 2px solid #00ffff;
    border-radius: 8px;
    transition: all 0.3s;
}

.strategy-link:hover {
    background: #00ffff;
    color: #000;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

.tutorial-done {
    background: linear-gradient(135deg, #00ffff 0%, #0088ff 100%);
    color: #000;
    border: none;
    padding: 14px 40px;
    border-radius: 8px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 24px;
    transition: all 0.3s;
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.4);
}

.tutorial-done:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 30px rgba(0, 255, 255, 0.6);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .tutorial-hud {
        bottom: 20px;
        max-width: 90%;
        padding: 20px 24px;
    }
    
    #tutorial-instruction {
        font-size: 16px;
    }
    
    .tutorial-complete-content {
        padding: 32px 24px;
        max-width: 90%;
    }
    
    .tutorial-complete-content h2 {
        font-size: 28px;
    }
}
/* Punch-through effect for highlighted elements */
.tutorial-highlight {
    position: relative;
    z-index: 10000 !important;
    filter: brightness(1.5) drop-shadow(0 0 16px #00ffff) drop-shadow(0 0 8px #00ffff);
    animation: tutorial-pulse 1.5s ease-in-out infinite;
    pointer-events: all !important;
}

@keyframes tutorial-pulse {
    0%, 100% {
        filter: brightness(1.5) drop-shadow(0 0 16px #00ffff) drop-shadow(0 0 8px #00ffff);
        transform: scale(1);
    }
    50% {
        filter: brightness(2) drop-shadow(0 0 24px #00ffff) drop-shadow(0 0 12px #ffffff);
        transform: scale(1.08);
    }
}

/* =========================================
   MULTIPLAYER UI
   ========================================= */

/* Utility class */
.hidden {
    display: none !important;
}

/* Mode Selector */
.mode-selector {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #000 100%);
    z-index: 10000;
}

.mode-selector-content {
    text-align: center;
    padding: 48px;
    background: rgba(20, 20, 40, 0.9);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    transition: transform 0.15s cubic-bezier(0.34, 1.15, 0.64, 1), 
                box-shadow 0.2s ease-out,
                border-color 0.2s ease-out;
    transform-origin: center center;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.2);
}

.mode-selector-content h2 {
    font-family: 'Orbitron', sans-serif;
    font-size: 48px;
    font-weight: 900;
    margin: 0 0 32px 0;
    background: linear-gradient(135deg, #00ffff, #0077cc);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 40px rgba(0, 255, 255, 0.5);
    transition: transform 0.08s cubic-bezier(0.34, 1.15, 0.64, 1),
                text-shadow 0.1s ease-out;
    transform-origin: center center;
}

.mode-btn {
    display: block;
    width: 280px;
    padding: 16px 32px;
    margin: 16px auto;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 500;
    background: rgba(30, 30, 60, 0.8);
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.mode-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 255, 0.6);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.3);
}

.mode-btn.primary {
    background: rgba(0, 119, 204, 0.3);
    border-color: rgba(0, 255, 255, 0.5);
}

.mode-btn.primary:hover {
    background: rgba(0, 119, 204, 0.5);
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.5);
}

/* Match Lobby */
.match-lobby {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 0%, #1a1a1a 0%, #000 100%);
    z-index: 10000;
}

.lobby-content {
    width: 500px;
    max-width: 90%;
    padding: 40px;
    background: rgba(20, 20, 40, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.3);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.2);
    text-align: center;
}

.lobby-content h3 {
    font-family: 'Orbitron', sans-serif;
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 24px 0;
    color: #00ffff;
}

.lobby-content p {
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
    margin: 16px 0;
}

.primary-btn {
    display: inline-block;
    padding: 16px 48px;
    margin: 16px auto;
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    font-weight: 500;
    background: rgba(0, 119, 204, 0.5);
    color: #fff;
    border: 2px solid rgba(0, 255, 255, 0.5);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
}

.primary-btn:hover {
    transform: translateY(-2px);
    background: rgba(0, 119, 204, 0.7);
    border-color: rgba(0, 255, 255, 0.8);
    box-shadow: 0 4px 20px rgba(0, 255, 255, 0.4);
}

.secondary-btn {
    display: inline-block;
    padding: 12px 32px;
    margin: 24px auto 0;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    background: transparent;
    color: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.secondary-btn:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.5);
}

/* Match Link Container */
.match-link-container {
    display: flex;
    gap: 8px;
    margin: 16px 0;
}

.match-link-container input {
    flex: 1;
    padding: 12px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    text-align: center;
}

.match-link-container button {
    padding: 12px 24px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 500;
    background: rgba(0, 119, 204, 0.5);
    color: #fff;
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.match-link-container button:hover {
    background: rgba(0, 119, 204, 0.7);
    border-color: rgba(0, 255, 255, 0.8);
}

.waiting-text {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    animation: pulse-opacity 2s ease-in-out infinite;
}

@keyframes pulse-opacity {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Spinner */
.spinner {
    width: 40px;
    height: 40px;
    margin: 20px auto;
    border: 4px solid rgba(0, 255, 255, 0.1);
    border-top-color: rgba(0, 255, 255, 0.8);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Error View */
.error-text {
    color: #ff6b6b;
    font-size: 16px;
    margin: 16px 0;
}

/* Player Indicator */
.player-indicator {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    padding: 12px 24px;
    background: rgba(20, 20, 40, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .mode-selector-content {
        padding: 32px 24px;
    }

    .mode-selector-content h2 {
        font-size: 36px;
    }

    .mode-btn {
        width: 240px;
        font-size: 16px;
        padding: 14px 24px;
    }

    .lobby-content {
        width: 100%;
        padding: 32px 24px;
    }

    .lobby-content h3 {
        font-size: 24px;
    }

    .player-indicator {
        top: 70px;
        font-size: 14px;
        padding: 10px 20px;
    }
}

/* =========================================
   SIMULATION DASHBOARD
   ========================================= */

/* Dropdown Section Header */
.dropdown-section-header {
    padding: 12px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(0, 255, 255, 0.8);
    background: rgba(0, 255, 255, 0.05);
    border-top: 1px solid rgba(0, 255, 255, 0.1);
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    margin: 4px 0;
}

/* Simulation Select Dropdown */
.sim-select {
    padding: 6px 12px;
    background: rgba(0, 119, 204, 0.15);
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 4px;
    color: #00ffff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    outline: none;
    transition: all 0.3s;
}

.sim-select:hover {
    background: rgba(0, 119, 204, 0.25);
    border-color: rgba(0, 255, 255, 0.5);
}

.sim-select:focus {
    background: rgba(0, 119, 204, 0.3);
    border-color: rgba(0, 255, 255, 0.7);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.3);
}

.sim-select option {
    background: #1a1a2e;
    color: #00ffff;
}

/* Dropdown Button Group */
.dropdown-button-group {
    padding: 12px 16px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.audit-btn {
    flex: 1;
    padding: 10px 16px;
    font-family: 'Rajdhani', sans-serif;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.audit-btn.primary {
    background: linear-gradient(135deg, #0077cc, #00ffff);
    color: #000;
}

.audit-btn.primary:hover {
    background: linear-gradient(135deg, #0088dd, #00ffff);
    box-shadow: 0 4px 16px rgba(0, 255, 255, 0.4);
    transform: translateY(-1px);
}

.audit-btn.primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 255, 255, 0.3);
}

.audit-btn.danger {
    background: linear-gradient(135deg, #cc0000, #ff3333);
    color: #fff;
}

.audit-btn.danger:hover {
    background: linear-gradient(135deg, #dd0000, #ff4444);
    box-shadow: 0 4px 16px rgba(255, 0, 0, 0.4);
    transform: translateY(-1px);
}

.audit-btn.danger:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(255, 0, 0, 0.3);
}

.audit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Simulation Progress Bar */
.simulation-progress {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    max-width: 90%;
    padding: 16px 24px;
    background: rgba(20, 20, 40, 0.95);
    border: 2px solid rgba(0, 255, 255, 0.4);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 255, 255, 0.2);
    z-index: 2000;
    backdrop-filter: blur(12px);
}

.simulation-progress.hidden {
    display: none;
}

.progress-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    font-family: 'Rajdhani', sans-serif;
}

#progress-text {
    font-size: 14px;
    font-weight: 600;
    color: #00ffff;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

#progress-stats {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.7);
}

.progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.progress-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #0077cc, #00ffff);
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 12px rgba(0, 255, 255, 0.6);
    position: relative;
}

.progress-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    animation: progress-shimmer 1.5s infinite;
}

@keyframes progress-shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .simulation-progress {
        width: 90%;
        padding: 12px 16px;
    }

    .audit-btn {
        padding: 8px 12px;
        font-size: 12px;
    }

    .dropdown-button-group {
        flex-direction: column;
    }

    .audit-btn {
        width: 100%;
    }
}

/* Balance Test UI */
.balance-test-ui {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 20px;
}

.balance-test-content {
    background: rgba(0, 0, 0, 0.8);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 32px;
    max-width: 600px;
    width: 100%;
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
}

.balance-test-content h2 {
    color: #00ffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 28px;
    margin: 0 0 24px 0;
    text-align: center;
}

.balance-test-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.balance-test-controls label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
}

.balance-test-controls input {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: 'Rajdhani', sans-serif;
    font-size: 16px;
}

.balance-test-progress {
    margin: 24px 0;
}

.balance-test-progress .progress-text {
    text-align: center;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}

.balance-test-progress .progress-bar-container {
    width: 100%;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.balance-test-progress .progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #00ffff, #0099ff);
    transition: width 0.3s ease;
    width: 0%;
}

.balance-test-results {
    margin-top: 24px;
}

.balance-test-results h3 {
    color: #00ffff;
    font-family: 'Orbitron', sans-serif;
    font-size: 22px;
    margin: 0 0 20px 0;
    text-align: center;
}

.balance-stats {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8);
}

.stat-value {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
}

.balance-warning {
    background: rgba(255, 153, 51, 0.2);
    border: 2px solid rgba(255, 153, 51, 0.5);
    border-radius: 8px;
    padding: 16px;
    margin: 20px 0;
    text-align: center;
    font-size: 18px;
    color: #FF9933;
    font-weight: 600;
}

.balance-test-controls .primary-btn,
.balance-test-results .primary-btn {
    width: 100%;
    margin-top: 12px;
}

.balance-test-results .secondary-btn {
    width: 100%;
    margin-top: 12px;
    text-align: center;
    display: inline-block;
    text-decoration: none;
}

/* =========================================
   GAME START ANIMATION
   ========================================= */
.game-start-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

.game-start-overlay.active {
    opacity: 1;
    pointer-events: none; /* Allow clicks through during animation */
}

.game-start-overlay.black-fade {
    background: #000;
}

.game-start-overlay.white-flash {
    background: #fff;
    opacity: 0;
}

.game-start-overlay.white-flash.active {
    opacity: 0.95;
}

/* =========================================
   GAME START ANIMATION - Simple Fade to Black then Board Appears
   ========================================= */

/* Stage 1: Hide board during fade to black */
#game-container.animating-start {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Stage 2: Board appears instantly at impact with shake animation */
#game-container.stage-impact {
    opacity: 1 !important;
    visibility: visible !important;
    transition: none;
}

/* Impact animation - All elements shake in random directions */
#game-container.stage-impact .node {
    animation: impact-shake-node 0.3s ease-out;
}

#game-container.stage-impact .piece {
    animation: impact-shake-piece-random 0.3s ease-out;
}

/* Shake animation for nodes (preserve base translate) */
@keyframes impact-shake-node {
    0% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    10% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x1, -2px)), calc(var(--shake-y1, 2px)));
    }
    20% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x2, 2px)), calc(var(--shake-y2, -2px)));
    }
    30% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x3, -1px)), calc(var(--shake-y3, 3px)));
    }
    40% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x4, 3px)), calc(var(--shake-y4, -1px)));
    }
    50% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x5, -2px)), calc(var(--shake-y5, -2px)));
    }
    60% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x6, 2px)), calc(var(--shake-y6, 2px)));
    }
    70% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x7, -1px)), calc(var(--shake-y7, 1px)));
    }
    80% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x8, 1px)), calc(var(--shake-y8, -1px)));
    }
    90% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x9, -0.5px)), calc(var(--shake-y9, 0.5px)));
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translate(0, 0);
    }
}

/* Shake animation for pieces (with translate offset) */
@keyframes impact-shake-piece-random {
    0% {
        transform: translate(-50%, -50%) scale(1.05);
    }
    10% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x1, -2px)), calc(var(--shake-y1, 2px)));
    }
    20% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x2, 2px)), calc(var(--shake-y2, -2px)));
    }
    30% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x3, -1px)), calc(var(--shake-y3, 3px)));
    }
    40% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x4, 3px)), calc(var(--shake-y4, -1px)));
    }
    50% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x5, -2px)), calc(var(--shake-y5, -2px)));
    }
    60% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x6, 2px)), calc(var(--shake-y6, 2px)));
    }
    70% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x7, -1px)), calc(var(--shake-y7, 1px)));
    }
    80% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x8, 1px)), calc(var(--shake-y8, -1px)));
    }
    90% {
        transform: translate(-50%, -50%) scale(1) translate(calc(var(--shake-x9, -0.5px)), calc(var(--shake-y9, 0.5px)));
    }
    100% {
        transform: translate(-50%, -50%) scale(1) translate(0, 0);
    }
}

.game-start-overlay.purple-flash {
    background: var(--burn-color);
    opacity: 0;
}

.game-start-overlay.purple-flash.active {
    opacity: 0.9;
}

/* =========================================
   LOGO ANIMATION
   ========================================= */
.logo-animation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: clamp(112px, 17vmin, 312px);
    height: clamp(112px, 17vmin, 312px);
    pointer-events: none;
    z-index: 200;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.logo-animation-overlay.active {
    opacity: 1;
}

.logo-animation-vex {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(8px, 1.2vmin, 16px);
    height: clamp(8px, 1.2vmin, 16px);
    background: radial-gradient(circle, var(--burn-color), rgba(204, 0, 204, 0.9));
    border-radius: 50%;
    box-shadow: 
        0 0 3px rgba(204, 0, 204, 0.9),
        0 0 8px rgba(204, 0, 204, 0.6),
        0 0 16px rgba(204, 0, 204, 0.4);
    opacity: 0;
    transition: opacity 0.15s ease-out;
}

.logo-animation-vex.active {
    opacity: 1;
}

.logo-animation-vex.fade-out {
    opacity: 0;
}

.logo-animation-blue-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: clamp(56px, 8.5vmin, 156px);
    height: clamp(56px, 8.5vmin, 156px);
    border: clamp(2px, 0.3vmin, 4px) solid var(--p1-color);
    border-radius: 50%;
    opacity: 0.8;
    animation: ring-expand-blue 0.2s ease-out forwards;
}

.logo-animation-blue-ring.active {
    opacity: 1;
}

@keyframes ring-expand-blue {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
}

.logo-animation-gold-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: clamp(112px, 17vmin, 312px);
    height: clamp(112px, 17vmin, 312px);
    border: clamp(2px, 0.3vmin, 4px) solid var(--p2-color);
    border-radius: 50%;
    opacity: 0.8;
    animation: ring-expand-gold 0.2s ease-out 0.15s forwards;
}

.logo-animation-gold-ring.active {
    opacity: 1;
}

@keyframes ring-expand-gold {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }
}

/* =========================================
   TURN INDICATOR ANIMATION
   ========================================= */
.indicator-animation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1001;
}

.indicator-animation-node {
    position: absolute;
    width: clamp(8px, 1.2vmin, 16px);
    height: clamp(8px, 1.2vmin, 16px);
    background: var(--p1-color);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.1s ease-out;
}

.indicator-animation-node.active {
    opacity: 1;
}

.indicator-animation-node.expand {
    animation: indicator-expand 0.3s ease-out forwards;
}

@keyframes indicator-expand {
    0% {
        width: clamp(8px, 1.2vmin, 16px);
        height: clamp(8px, 1.2vmin, 16px);
        border-radius: 50%;
        opacity: 1;
    }
    30% {
        width: clamp(50px, 7.5vw, 125px);
        height: clamp(24px, 3.6vmin, 48px);
        border-radius: clamp(12px, 1.8vmin, 24px);
        opacity: 1;
    }
    100% {
        width: clamp(100px, 15vw, 250px);
        height: clamp(48px, 6vmin, 64px);
        border-radius: clamp(12px, 1.8vmin, 24px);
        opacity: 0;
    }
}

#game-container {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    transform-origin: center center;
}

#game-container.animating-in {
    opacity: 0;
    transform: scale(0);
    clip-path: circle(0% at 50% 50%);
}

#game-container.animating-in.active {
    opacity: 1;
    transform: scale(1);
    clip-path: circle(100% at 50% 50%);
    transition: opacity 1.5s ease-out, transform 1.5s ease-out, clip-path 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* =========================================
   BEAT DETECTION ANIMATIONS
   ========================================= */

/* Standard beat pulse - very subtle and quick (1.01x scale) */
.mode-selector-content h2.beat-pulse {
    transform: scale(1.0125);
    transition: transform 0.08s cubic-bezier(0.34, 1.15, 0.64, 1);
}

/* Glow pulse on menu background for standard beats - very subtle (1.005x intensity) */
.mode-selector-content.beat-glow-pulse-standard {
    box-shadow: 
        0 8px 32px rgba(0, 255, 255, 0.25),
        0 0 12px rgba(0, 119, 204, 0.15);
    transition: box-shadow 0.08s ease-out;
}

/* Strong bass beat - kick drum shake effect */
.mode-selector-content h2.beat-strong {
    text-shadow: 
        0 0 40px rgba(0, 255, 255, 0.625),
        0 0 10px rgba(0, 119, 204, 0.4375);
}

/* Realistic bass drum rattle shake animation for strong beats - same structure as standard but 1.05x intensity */
.mode-selector-content.beat-kick-shake {
    animation: bass-drum-rattle-subtle-strong 0.12s ease-out;
    box-shadow: 
        0 8px 32px rgba(0, 255, 255, 0.25),
        0 0 12px rgba(0, 119, 204, 0.15);
}

/* Lower intensity bass drum rattle for standard beats */
.mode-selector-content.beat-kick-shake-standard {
    animation: bass-drum-rattle-subtle 0.12s ease-out;
    box-shadow: 
        0 8px 32px rgba(0, 255, 255, 0.25),
        0 0 12px rgba(0, 119, 204, 0.15);
}

@keyframes bass-drum-rattle-strong {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    3% {
        transform: translate(-2.5px, 1.5px) rotate(-0.5deg);
    }
    6% {
        transform: translate(2.5px, -1.5px) rotate(0.5deg);
    }
    9% {
        transform: translate(-2px, -2px) rotate(-0.4deg);
    }
    12% {
        transform: translate(2px, 2px) rotate(0.4deg);
    }
    15% {
        transform: translate(-2.2px, 1.2px) rotate(-0.45deg);
    }
    18% {
        transform: translate(2.2px, -1.2px) rotate(0.45deg);
    }
    21% {
        transform: translate(-1.8px, -1.8px) rotate(-0.35deg);
    }
    24% {
        transform: translate(1.8px, 1.8px) rotate(0.35deg);
    }
    27% {
        transform: translate(-1.5px, 1px) rotate(-0.3deg);
    }
    30% {
        transform: translate(1.5px, -1px) rotate(0.3deg);
    }
    33% {
        transform: translate(-1.2px, -1.2px) rotate(-0.25deg);
    }
    36% {
        transform: translate(1.2px, 1.2px) rotate(0.25deg);
    }
    39% {
        transform: translate(-1px, 0.8px) rotate(-0.2deg);
    }
    42% {
        transform: translate(1px, -0.8px) rotate(0.2deg);
    }
    45% {
        transform: translate(-0.8px, -0.8px) rotate(-0.15deg);
    }
    48% {
        transform: translate(0.8px, 0.8px) rotate(0.15deg);
    }
    51% {
        transform: translate(-0.6px, 0.5px) rotate(-0.12deg);
    }
    54% {
        transform: translate(0.6px, -0.5px) rotate(0.12deg);
    }
    57% {
        transform: translate(-0.5px, -0.5px) rotate(-0.1deg);
    }
    60% {
        transform: translate(0.5px, 0.5px) rotate(0.1deg);
    }
    63% {
        transform: translate(-0.4px, 0.3px) rotate(-0.08deg);
    }
    66% {
        transform: translate(0.4px, -0.3px) rotate(0.08deg);
    }
    69% {
        transform: translate(-0.3px, -0.3px) rotate(-0.06deg);
    }
    72% {
        transform: translate(0.3px, 0.3px) rotate(0.06deg);
    }
    75% {
        transform: translate(-0.25px, 0.2px) rotate(-0.05deg);
    }
    78% {
        transform: translate(0.25px, -0.2px) rotate(0.05deg);
    }
    81% {
        transform: translate(-0.2px, -0.2px) rotate(-0.04deg);
    }
    84% {
        transform: translate(0.2px, 0.2px) rotate(0.04deg);
    }
    87% {
        transform: translate(-0.15px, 0.1px) rotate(-0.03deg);
    }
    90% {
        transform: translate(0.15px, -0.1px) rotate(0.03deg);
    }
    93% {
        transform: translate(-0.1px, -0.1px) rotate(-0.02deg);
    }
    96% {
        transform: translate(0.1px, 0.1px) rotate(0.02deg);
    }
    98% {
        transform: translate(-0.05px, 0.05px) rotate(-0.01deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes bass-drum-rattle {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    5% {
        transform: translate(-1.5px, 1px) rotate(-0.3deg);
    }
    10% {
        transform: translate(1.5px, -1px) rotate(0.3deg);
    }
    15% {
        transform: translate(-1px, -1.5px) rotate(-0.2deg);
    }
    20% {
        transform: translate(1px, 1.5px) rotate(0.2deg);
    }
    25% {
        transform: translate(-1.2px, 0.8px) rotate(-0.25deg);
    }
    30% {
        transform: translate(1.2px, -0.8px) rotate(0.25deg);
    }
    35% {
        transform: translate(-0.8px, -1.2px) rotate(-0.15deg);
    }
    40% {
        transform: translate(0.8px, 1.2px) rotate(0.15deg);
    }
    45% {
        transform: translate(-0.6px, 0.6px) rotate(-0.1deg);
    }
    50% {
        transform: translate(0.6px, -0.6px) rotate(0.1deg);
    }
    55% {
        transform: translate(-0.4px, -0.4px) rotate(-0.05deg);
    }
    60% {
        transform: translate(0.4px, 0.4px) rotate(0.05deg);
    }
    65% {
        transform: translate(-0.3px, 0.3px) rotate(-0.03deg);
    }
    70% {
        transform: translate(0.3px, -0.3px) rotate(0.03deg);
    }
    75% {
        transform: translate(-0.2px, -0.2px) rotate(-0.02deg);
    }
    80% {
        transform: translate(0.2px, 0.2px) rotate(0.02deg);
    }
    85% {
        transform: translate(-0.1px, 0.1px) rotate(-0.01deg);
    }
    90% {
        transform: translate(0.1px, -0.1px) rotate(0.01deg);
    }
    95% {
        transform: translate(-0.05px, 0.05px) rotate(-0.005deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes bass-drum-rattle-subtle-strong {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    5% {
        transform: translate(-1.5px, 0.9375px) rotate(-0.28125deg);
    }
    10% {
        transform: translate(1.5px, -0.9375px) rotate(0.28125deg);
    }
    15% {
        transform: translate(-0.9375px, -1.5px) rotate(-0.1875deg);
    }
    20% {
        transform: translate(0.9375px, 1.5px) rotate(0.1875deg);
    }
    25% {
        transform: translate(-1.125px, 0.75px) rotate(-0.225deg);
    }
    30% {
        transform: translate(1.125px, -0.75px) rotate(0.225deg);
    }
    35% {
        transform: translate(-0.75px, -1.125px) rotate(-0.15deg);
    }
    40% {
        transform: translate(0.75px, 1.125px) rotate(0.15deg);
    }
    45% {
        transform: translate(-0.5625px, 0.5625px) rotate(-0.09375deg);
    }
    50% {
        transform: translate(0.5625px, -0.5625px) rotate(0.09375deg);
    }
    55% {
        transform: translate(-0.375px, -0.375px) rotate(-0.05625deg);
    }
    60% {
        transform: translate(0.375px, 0.375px) rotate(0.05625deg);
    }
    65% {
        transform: translate(-0.28125px, 0.28125px) rotate(-0.0375deg);
    }
    70% {
        transform: translate(0.28125px, -0.28125px) rotate(0.0375deg);
    }
    75% {
        transform: translate(-0.1875px, -0.1875px) rotate(-0.01875deg);
    }
    80% {
        transform: translate(0.1875px, 0.1875px) rotate(0.01875deg);
    }
    85% {
        transform: translate(-0.09375px, 0.09375px) rotate(-0.009375deg);
    }
    90% {
        transform: translate(0.09375px, -0.09375px) rotate(0.009375deg);
    }
    95% {
        transform: translate(-0.05625px, 0.05625px) rotate(-0.005625deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}

@keyframes bass-drum-rattle-subtle {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    5% {
        transform: translate(-1.3px, 0.8125px) rotate(-0.24375deg);
    }
    10% {
        transform: translate(1.3px, -0.8125px) rotate(0.24375deg);
    }
    15% {
        transform: translate(-0.8125px, -1.3px) rotate(-0.1625deg);
    }
    20% {
        transform: translate(0.8125px, 1.3px) rotate(0.1625deg);
    }
    25% {
        transform: translate(-0.975px, 0.65px) rotate(-0.195deg);
    }
    30% {
        transform: translate(0.975px, -0.65px) rotate(0.195deg);
    }
    35% {
        transform: translate(-0.65px, -0.975px) rotate(-0.13deg);
    }
    40% {
        transform: translate(0.65px, 0.975px) rotate(0.13deg);
    }
    45% {
        transform: translate(-0.4875px, 0.4875px) rotate(-0.08125deg);
    }
    50% {
        transform: translate(0.4875px, -0.4875px) rotate(0.08125deg);
    }
    55% {
        transform: translate(-0.325px, -0.325px) rotate(-0.04875deg);
    }
    60% {
        transform: translate(0.325px, 0.325px) rotate(0.04875deg);
    }
    65% {
        transform: translate(-0.24375px, 0.24375px) rotate(-0.0325deg);
    }
    70% {
        transform: translate(0.24375px, -0.24375px) rotate(0.0325deg);
    }
    75% {
        transform: translate(-0.1625px, -0.1625px) rotate(-0.01625deg);
    }
    80% {
        transform: translate(0.1625px, 0.1625px) rotate(0.01625deg);
    }
    85% {
        transform: translate(-0.08125px, 0.08125px) rotate(-0.008125deg);
    }
    90% {
        transform: translate(0.08125px, -0.08125px) rotate(0.008125deg);
    }
    95% {
        transform: translate(-0.04875px, 0.04875px) rotate(-0.004875deg);
    }
    100% {
        transform: translate(0, 0) rotate(0deg);
    }
}