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

:root {
    --neon-cyan: #0ff;
    --neon-magenta: #f0f;
    --neon-yellow: #ff0;
    --neon-green: #0f0;
    --neon-blue: #00f;
    --neon-red: #f00;
    --neon-orange: #f70;
    --background-color: #080114;
    --menu-background: rgba(8, 1, 20, 0.9);
    --border-glow: 0 0 10px, 0 0 20px;
    --primary-glow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    --secondary-glow: 0 0 5px var(--neon-magenta), 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-magenta);
    --accent-glow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-yellow);
}

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

body {
    font-family: 'Orbitron', sans-serif;
    background-color: var(--background-color);
    color: white;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    transition: background-color 0.5s ease;
}

/* Position content lower on mobile devices */
.mobile-device body,
body[data-is-mobile="true"] {
    align-items: flex-start; /* Align from top instead of center */
    min-height: 100vh; /* Ensure full viewport height */
    height: auto; /* Allow content to determine height */
}

/* Default theme (already applied in body) */
body.theme-default {
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 255, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.05) 0%, transparent 20%),
        radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* Cyberpunk theme */
body.theme-cyberpunk {
    background-color: #120458;
}

.cyberpunk-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.cyberpunk-gridline {
    position: absolute;
    background-color: rgba(255, 0, 255, 0.2);
    box-shadow: 0 0 10px rgba(255, 0, 255, 0.5);
}

.cyberpunk-gridline.horizontal {
    width: 100%;
    height: 1px;
    animation: cyberpunk-h-pulse 3s infinite alternate;
}

.cyberpunk-gridline.vertical {
    height: 100%;
    width: 1px;
    animation: cyberpunk-v-pulse 3s infinite alternate;
}

@keyframes cyberpunk-h-pulse {
    0% {
        opacity: 0.2;
        box-shadow: 0 0 5px rgba(255, 0, 255, 0.3);
    }
    100% {
        opacity: 0.5;
        box-shadow: 0 0 15px rgba(255, 0, 255, 0.6), 0 0 30px rgba(255, 0, 255, 0.3);
    }
}

@keyframes cyberpunk-v-pulse {
    0% {
        opacity: 0.2;
        box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
    }
    100% {
        opacity: 0.5;
        box-shadow: 0 0 15px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.3);
    }
}

/* Retro wave theme */
body.theme-retro {
    background: linear-gradient(180deg, #2b1055 0%, #7597de 100%);
}

.retro-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.retro-sun {
    position: absolute;
    width: 200px;
    height: 200px;
    background: linear-gradient(0deg, #ff9a00, #ff0057);
    border-radius: 50%;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 50px #ff0057, 0 0 100px #ff0057;
    z-index: -1;
}

.retro-grid {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background-image: linear-gradient(0deg, rgba(255, 0, 136, 0.8) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(255, 0, 136, 0.8) 1px, transparent 1px);
    background-size: 50px 50px;
    background-position-y: 0px;
    transform: perspective(500px) rotateX(60deg);
    transform-origin: bottom;
    animation: retro-grid-move 20s linear infinite;
}

@keyframes retro-grid-move {
    0% {
        background-position: 0px 0px;
    }
    100% {
        background-position: 0px 50px;
    }
}

/* Matrix theme */
body.theme-matrix {
    background-color: #000;
}

.matrix-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
}

.matrix-code-stream {
    position: absolute;
    top: -300px;
    font-family: monospace;
    font-size: 20px;
    line-height: 20px;
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
    white-space: pre;
    opacity: 0.7;
    animation: matrix-fall linear infinite;
}

@keyframes matrix-fall {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    10% {
        opacity: 0.8;
    }
    90% {
        opacity: 0.8;
    }
    100% {
        transform: translateY(120vh);
        opacity: 0;
    }
}

/* Hide elements */
.hidden {
    display: none !important;
}

/* Music visualization spectrum styles - positioned at the screen edges/borders */
.spectrum-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw; /* Full viewport width */
    height: 100vh; /* Full viewport height */
    pointer-events: none;
    z-index: 999; /* Above everything else */
    box-sizing: border-box;
    /* No transform to ensure precise edge positioning */
}

/* Hide spectrum container on mobile devices */
.mobile-device .spectrum-container,
body[data-is-mobile="true"] .spectrum-container {
    display: none !important;
}

/* Spectrum bars for music visualization */
.spectrum-bar {
    position: absolute;
    transition: height 0.03s cubic-bezier(0.25, 0.1, 0.25, 1), 
                width 0.03s cubic-bezier(0.25, 0.1, 0.25, 1); /* Faster, more responsive transitions */
    opacity: 0.9; /* Slightly transparent for better visual effect */
}

/* Different colors for different frequency ranges */
.spectrum-bar.bass {
    background-color: var(--neon-red);
    box-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red);
}

.spectrum-bar.mid-low {
    background-color: var(--neon-orange);
    box-shadow: 0 0 5px var(--neon-orange), 0 0 10px var(--neon-orange);
}

.spectrum-bar.mid {
    background-color: var(--neon-yellow);
    box-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow);
}

.spectrum-bar.mid-high {
    background-color: var(--neon-green);
    box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
}

.spectrum-bar.high {
    background-color: var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
}

/* Top spectrum bars */
.spectrum-bar.top {
    top: 0;
    height: 2px; /* Default height before audio - smaller initial height */
    transform-origin: bottom center; /* Ensure bars grow from bottom */
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; /* More glow */
}

/* Right spectrum bars */
.spectrum-bar.right {
    right: 0;
    width: 2px; /* Default width before audio - smaller initial width */
    transform-origin: left center; /* Ensure bars grow from left */
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; /* More glow */
}

/* Bottom spectrum bars */
.spectrum-bar.bottom {
    bottom: 0;
    height: 2px; /* Default height before audio - smaller initial height */
    transform-origin: top center; /* Ensure bars grow from top */
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; /* More glow */
}

/* Left spectrum bars */
.spectrum-bar.left {
    left: 0;
    width: 2px; /* Default width before audio - smaller initial width */
    transform-origin: right center; /* Ensure bars grow from right */
    box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; /* More glow */
}

/* Add glow animation to spectrum bars for extra effect */
@keyframes glow-pulse {
    0% { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
    50% { box-shadow: 0 0 8px currentColor, 0 0 16px currentColor, 0 0 24px currentColor; }
    100% { box-shadow: 0 0 5px currentColor, 0 0 10px currentColor; }
}

/* Apply frequency-specific glow animations to active bars */
.spectrum-bar.bass[style*="height: 20"], 
.spectrum-bar.bass[style*="width: 20"] {
    animation: bass-pulse 0.5s infinite alternate;
}

.spectrum-bar.mid-low[style*="height: 20"], 
.spectrum-bar.mid-low[style*="width: 20"] {
    animation: mid-low-pulse 0.5s infinite alternate;
}

.spectrum-bar.mid[style*="height: 20"], 
.spectrum-bar.mid[style*="width: 20"] {
    animation: mid-pulse 0.5s infinite alternate;
}

.spectrum-bar.mid-high[style*="height: 20"], 
.spectrum-bar.mid-high[style*="width: 20"] {
    animation: mid-high-pulse 0.5s infinite alternate;
}

.spectrum-bar.high[style*="height: 20"], 
.spectrum-bar.high[style*="width: 20"] {
    animation: high-pulse 0.5s infinite alternate;
}

/* Custom animations for each frequency range */
@keyframes bass-pulse {
    0% { box-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red); }
    50% { box-shadow: 0 0 8px var(--neon-red), 0 0 16px var(--neon-red), 0 0 24px var(--neon-red); }
    100% { box-shadow: 0 0 5px var(--neon-red), 0 0 10px var(--neon-red); }
}

@keyframes mid-low-pulse {
    0% { box-shadow: 0 0 5px var(--neon-orange), 0 0 10px var(--neon-orange); }
    50% { box-shadow: 0 0 8px var(--neon-orange), 0 0 16px var(--neon-orange), 0 0 24px var(--neon-orange); }
    100% { box-shadow: 0 0 5px var(--neon-orange), 0 0 10px var(--neon-orange); }
}

@keyframes mid-pulse {
    0% { box-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow); }
    50% { box-shadow: 0 0 8px var(--neon-yellow), 0 0 16px var(--neon-yellow), 0 0 24px var(--neon-yellow); }
    100% { box-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow); }
}

@keyframes mid-high-pulse {
    0% { box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); }
    50% { box-shadow: 0 0 8px var(--neon-green), 0 0 16px var(--neon-green), 0 0 24px var(--neon-green); }
    100% { box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green); }
}

@keyframes high-pulse {
    0% { box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan); }
    50% { box-shadow: 0 0 8px var(--neon-cyan), 0 0 16px var(--neon-cyan), 0 0 24px var(--neon-cyan); }
    100% { box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan); }
}

/* Main Menu Styles */
.menu-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 50px 20px;
    background-color: var(--menu-background);
    z-index: 1000;
    text-align: center;
}

.logo-container {
    margin-bottom: 50px;
}

.game-logo {
    font-size: 60px;
    font-weight: 900;
    letter-spacing: 2px;
    color: var(--neon-cyan);
    text-shadow: var(--primary-glow);
    margin-bottom: 10px;
    animation: logo-pulse 2s infinite alternate;
}

.game-logo span {
    color: var(--neon-magenta);
    text-shadow: var(--secondary-glow);
    animation: logo-pulse-alt 2s infinite alternate;
}

.tagline {
    font-size: 18px;
    color: var(--neon-yellow);
    text-shadow: var(--accent-glow);
    letter-spacing: 1px;
}

.menu-buttons {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.menu-button {
    background-color: transparent;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 20px;
    padding: 15px 30px;
    min-width: 250px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-shadow: 0 0 5px var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan);
    letter-spacing: 1px;
}

.menu-button:hover {
    background-color: var(--neon-cyan);
    color: var(--background-color);
    box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
}

.menu-button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
    position: relative;
}

.coming-soon {
    font-size: 0.6em;
    background-color: var(--neon-red);
    padding: 2px 5px;
    border-radius: 3px;
    margin-left: 10px;
    letter-spacing: 1px;
}

.footer-note {
    font-size: 14px;
    opacity: 0.7;
    margin-top: 20px;
}

/* How to Play and Settings screens */
.how-to-content, .settings-content {
    max-width: 600px;
    margin: 20px auto;
    text-align: left;
}

.how-to-section {
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.how-to-section h3 {
    color: var(--neon-cyan);
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--neon-cyan);
}

.how-to-section ul {
    padding-left: 20px;
}

.how-to-section li {
    margin-bottom: 5px;
}

.setting-item {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.setting-item label {
    margin-bottom: 10px;
    color: var(--neon-cyan);
}

.setting-item input[type="range"] {
    width: 100%;
    background: rgba(0, 255, 255, 0.2);
    height: 10px;
    border-radius: 5px;
    appearance: none;
    outline: none;
}

.setting-item input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 20px;
    height: 20px;
    background-color: var(--neon-cyan);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px var(--neon-cyan);
}

/* Theme selector */
.theme-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
    margin-top: 10px;
}

.theme-option {
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s ease;
    width: 100px;
}

.theme-option:hover {
    transform: translateY(-5px);
}

.theme-option.selected {
    position: relative;
}

.theme-option.selected::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 3px;
    background-color: var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
    border-radius: 3px;
}

.theme-preview {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    margin: 0 auto 8px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Theme previews */
.default-theme {
    background-color: var(--background-color);
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(0, 255, 255, 0.2) 0%, transparent 30%),
        radial-gradient(circle at 90% 80%, rgba(255, 0, 255, 0.2) 0%, transparent 30%);
}

.cyberpunk-theme {
    background-color: #120458;
    background-image: 
        linear-gradient(45deg, #120458 0%, #000000 100%),
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><rect x="0" y="40" width="100" height="1" fill="%23ff00ff" opacity="0.5"/><rect x="0" y="70" width="100" height="1" fill="%2300ffff" opacity="0.5"/><rect x="40" y="0" width="1" height="100" fill="%23ffff00" opacity="0.5"/><rect x="70" y="0" width="1" height="100" fill="%2300ff00" opacity="0.5"/></svg>');
}

.retro-theme {
    background: linear-gradient(180deg, #2b1055 0%, #7597de 100%);
    position: relative;
}

.retro-theme::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: linear-gradient(90deg, #f953c6, #b91d73, #f953c6);
    z-index: 1;
}

.retro-theme::after {
    content: '';
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(255, 255, 255, 0.5);
    box-shadow: 0 0 5px #fff, 0 0 10px #fff;
    z-index: 2;
}

.matrix-theme {
    background-color: #000;
    position: relative;
    overflow: hidden;
}

.matrix-theme::before {
    content: '10101010101010';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    font-family: monospace;
    font-size: 8px;
    line-height: 8px;
    color: #00ff00;
    text-shadow: 0 0 5px #00ff00;
    opacity: 0.7;
    white-space: pre-wrap;
}

/* Logo animation */
@keyframes logo-pulse {
    0% {
        text-shadow: var(--primary-glow);
    }
    100% {
        text-shadow: 0 0 5px var(--neon-cyan), 0 0 15px var(--neon-cyan), 0 0 30px var(--neon-cyan);
    }
}

@keyframes logo-pulse-alt {
    0% {
        text-shadow: var(--secondary-glow);
    }
    100% {
        text-shadow: 0 0 5px var(--neon-magenta), 0 0 15px var(--neon-magenta), 0 0 30px var(--neon-magenta);
    }
}

/* Multiplayer Styles */
.multiplayer-options {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 20px 0;
    max-width: 500px;
    width: 100%;
}

.multiplayer-section {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.multiplayer-section h3 {
    color: var(--neon-cyan);
    margin-bottom: 15px;
    text-align: center;
    text-shadow: 0 0 5px var(--neon-cyan);
}

.multiplayer-divider {
    text-align: center;
    color: var(--neon-yellow);
    font-size: 18px;
    position: relative;
}

.multiplayer-divider::before,
.multiplayer-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: rgba(255, 255, 0, 0.3);
}

.multiplayer-divider::before {
    left: 0;
}

.multiplayer-divider::after {
    right: 0;
}

.input-group {
    margin-bottom: 15px;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
    color: white;
}

.input-group input {
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--neon-cyan);
    border-radius: 4px;
    color: white;
    font-family: 'Orbitron', sans-serif;
    outline: none;
    transition: all 0.3s ease;
}

.input-group input:focus {
    box-shadow: 0 0 5px var(--neon-cyan);
}

.menu-button.small {
    font-size: 16px;
    padding: 8px 15px;
    min-width: 120px;
}

.rooms-list {
    max-height: 150px;
    overflow-y: auto;
    margin-bottom: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.room-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    cursor: pointer;
    transition: all 0.2s ease;
}

.room-item:hover {
    background-color: rgba(0, 255, 255, 0.1);
}

.room-item .room-code {
    color: var(--neon-cyan);
    font-weight: bold;
}

.room-item .player-name {
    font-size: 14px;
    opacity: 0.8;
}

/* Waiting Room */
.waiting-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin: 30px 0;
}

.room-info {
    text-align: center;
}

.room-info h3 {
    color: var(--neon-cyan);
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--neon-cyan);
}

#waiting-room-code {
    color: var(--neon-yellow);
    text-shadow: 0 0 5px var(--neon-yellow);
    letter-spacing: 2px;
}

.loader {
    width: 60px;
    height: 60px;
    border: 5px solid rgba(0, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: var(--neon-cyan);
    animation: spin 1s linear infinite;
}

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

.player-list {
    width: 100%;
    max-width: 300px;
}

.player-list h3 {
    color: var(--neon-cyan);
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--neon-cyan);
}

.player-list ul {
    list-style: none;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px;
    border-radius: 4px;
    border: 1px solid rgba(0, 255, 255, 0.2);
}

.player-list li {
    padding: 8px;
    border-bottom: 1px solid rgba(0, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
}

.player-list li:last-child {
    border-bottom: none;
}

/* Multiplayer Game Layout */
.multiplayer-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    position: relative;
}

.player-board, .opponent-board {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.player-info {
    margin-bottom: 10px;
    text-align: center;
    width: 100%;
}

.player-info h3 {
    color: var(--neon-cyan);
    margin-bottom: 10px;
    text-shadow: 0 0 5px var(--neon-cyan);
}

.player-info h4 {
    color: var(--neon-yellow);
    margin-bottom: 5px;
}

.opponent-board {
    transform: scale(0.7);
    transform-origin: top center;
    margin-top: -40px;
}

.opponent-board canvas {
    border: 2px solid var(--neon-magenta);
    box-shadow: 0 0 5px var(--neon-magenta), 0 0 10px var(--neon-magenta);
    background-color: rgba(0, 0, 0, 0.5);
}

.multiplayer-ui {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 20px;
}

.incoming-attack-indicator {
    background-color: rgba(255, 0, 0, 0.3);
    color: var(--neon-red);
    padding: 10px 15px;
    border-radius: 5px;
    border: 1px solid var(--neon-red);
    text-shadow: 0 0 5px var(--neon-red);
    animation: warning-flash 0.5s infinite alternate;
}

.attack-countdown {
    height: 4px;
    background-color: var(--neon-red);
    margin-top: 5px;
    box-shadow: 0 0 5px var(--neon-red);
    width: 100%;
    transition: width 3s linear;
}

@keyframes warning-flash {
    from {
        opacity: 0.7;
    }
    to {
        opacity: 1;
    }
}

.multiplayer-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: bold;
    z-index: 100;
    text-align: center;
    animation: message-fade 3s forwards;
}

@keyframes message-fade {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.5);
    }
    20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.2);
    }
    40% {
        transform: translate(-50%, -50%) scale(1);
    }
    80% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.5);
    }
}

.game-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    background-color: rgba(0, 0, 0, 0.7);
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
    transition: box-shadow 0.5s ease;
}

/* Intensity classes for dynamic lighting based on combos - reduced intensity */
.game-container.intensity-1 {
    box-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    transition: box-shadow 0.5s ease;
}

.game-container.intensity-2 {
    box-shadow: 0 0 15px var(--neon-magenta), 0 0 30px var(--neon-magenta);
    transition: box-shadow 0.5s ease;
}

.game-container.intensity-3 {
    box-shadow: 0 0 20px var(--neon-yellow), 0 0 40px var(--neon-yellow);
    transition: box-shadow 0.5s ease;
}

/* Canvas intensity - reduced for better visibility */
.canvas-glow-1 {
    filter: drop-shadow(0 0 5px var(--neon-cyan));
}

.canvas-glow-2 {
    filter: drop-shadow(0 0 8px var(--neon-magenta));
}

.canvas-glow-3 {
    filter: drop-shadow(0 0 12px var(--neon-yellow));
}

.game-info, .controls {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 150px;
}

h2 {
    margin-bottom: 10px;
    text-align: center;
    text-transform: uppercase;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
}

#score, #level {
    font-size: 24px;
    text-align: center;
    margin-bottom: 20px;
    color: var(--neon-yellow);
    text-shadow: 0 0 5px var(--neon-yellow), 0 0 10px var(--neon-yellow);
}

#next-piece {
    height: 120px;
    width: 120px;
    margin: 0 auto;
    background-color: rgba(0, 0, 0, 0.3);
    border: 2px solid var(--neon-magenta);
    box-shadow: 0 0 5px var(--neon-magenta), 0 0 10px var(--neon-magenta);
    position: relative;
    overflow: hidden;
}

.next-piece-canvas {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

#tetris {
    border: 2px solid var(--neon-cyan);
    box-shadow: 0 0 5px var(--neon-cyan), 0 0 10px var(--neon-cyan);
    background-color: rgba(0, 0, 0, 0.3);
}

.controls ul {
    list-style: none;
    padding: 10px;
}

.controls li {
    margin-bottom: 10px;
    color: var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green);
}

/* Tetris piece colors with neon glow */
.piece-I {
    background-color: var(--neon-cyan);
    box-shadow: inset 0 0 3px white, 0 0 3px var(--neon-cyan), 0 0 7px var(--neon-cyan);
}

.piece-J {
    background-color: var(--neon-blue);
    box-shadow: inset 0 0 3px white, 0 0 3px var(--neon-blue), 0 0 7px var(--neon-blue);
}

.piece-L {
    background-color: var(--neon-orange);
    box-shadow: inset 0 0 3px white, 0 0 3px var(--neon-orange), 0 0 7px var(--neon-orange);
}

.piece-O {
    background-color: var(--neon-yellow);
    box-shadow: inset 0 0 3px white, 0 0 3px var(--neon-yellow), 0 0 7px var(--neon-yellow);
}

.piece-S {
    background-color: var(--neon-green);
    box-shadow: inset 0 0 3px white, 0 0 3px var(--neon-green), 0 0 7px var(--neon-green);
}

.piece-T {
    background-color: var(--neon-magenta);
    box-shadow: inset 0 0 3px white, 0 0 3px var(--neon-magenta), 0 0 7px var(--neon-magenta);
}

.piece-Z {
    background-color: var(--neon-red);
    box-shadow: inset 0 0 3px white, 0 0 3px var(--neon-red), 0 0 7px var(--neon-red);
}

/* Piece trail effects */
.piece-trail {
    position: absolute;
    border-radius: 3px;
    opacity: 0.4;
    pointer-events: none;
    animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
    0% { opacity: 0.4; }
    100% { opacity: 0; }
}

/* Grid reaction effect */
.grid-cell-flash {
    animation: grid-flash 0.5s;
}

@keyframes grid-flash {
    0% { opacity: 0.2; }
    50% { opacity: 1; }
    100% { opacity: 0.2; }
}

/* Light bloom effect - reduced blur for better visibility */
.light-bloom {
    filter: blur(2px) brightness(1.2);
    transition: filter 0.15s ease;
}

/* Animation for line clear */
@keyframes glow-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.5; }
    100% { opacity: 1; }
}

.clear-line {
    animation: glow-pulse 0.5s ease-in-out infinite;
}

/* Pause overlay */
.pause-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--neon-cyan);
    font-size: 36px;
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan);
    z-index: 100;
}

/* Game over overlay */
.game-over {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: var(--neon-red);
    font-size: 36px;
    text-shadow: 0 0 10px var(--neon-red), 0 0 20px var(--neon-red);
    z-index: 100;
}

.high-score-notice {
    color: #ff00ff !important;
    font-size: 1.8rem !important;
    margin: 15px 0 !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.9) !important;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.7; }
    50% { opacity: 1; }
    100% { opacity: 0.7; }
}

/* Multiplayer connection status */
.connection-status {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 8px 15px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bold;
    z-index: 100;
    animation: fadeOut 3s forwards;
    opacity: 1;
}

.connection-status.connected {
    background-color: rgba(0, 255, 0, 0.2);
    color: var(--neon-green);
    border: 1px solid var(--neon-green);
    text-shadow: 0 0 5px var(--neon-green);
}

.connection-status.disconnected {
    background-color: rgba(255, 0, 0, 0.2);
    color: var(--neon-red);
    border: 1px solid var(--neon-red);
    text-shadow: 0 0 5px var(--neon-red);
}

.multiplayer-error {
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    padding: 15px 20px;
    background-color: rgba(255, 0, 0, 0.2);
    color: var(--neon-red);
    border: 1px solid var(--neon-red);
    text-shadow: 0 0 5px var(--neon-red);
    border-radius: 5px;
    max-width: 80%;
    text-align: center;
    z-index: 1000; /* Ensure it's above all other elements */
    font-size: 16px;
    box-shadow: 0 0 10px var(--neon-red);
    transition: opacity 0.5s ease;
}

@keyframes fadeOut {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}

.restart-button {
    margin-top: 20px;
    padding: 10px 20px;
    background-color: transparent;
    color: var(--neon-green);
    border: 2px solid var(--neon-green);
    box-shadow: 0 0 5px var(--neon-green), 0 0 10px var(--neon-green);
    font-family: 'Orbitron', sans-serif;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.restart-button:hover {
    background-color: var(--neon-green);
    color: black;
}

/* Game control buttons */
.game-buttons {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 15px;
}

.game-control-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--neon-cyan);
    color: var(--neon-cyan);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 20px;
    margin-right: 15px;
    box-shadow: 0 0 5px var(--neon-cyan);
    transition: all 0.2s ease;
}

.game-control-btn:hover {
    background-color: rgba(0, 255, 255, 0.2);
    box-shadow: 0 0 10px var(--neon-cyan);
}

.game-control-btn.muted {
    border-color: var(--neon-red);
    color: var(--neon-red);
    box-shadow: 0 0 5px var(--neon-red);
}

.game-control-btn.muted:hover {
    background-color: rgba(255, 0, 0, 0.2);
    box-shadow: 0 0 10px var(--neon-red);
}

/* Goal Container Styles */
.goal-container {
    margin-top: 20px;
    text-align: center;
    border: 1px solid rgba(0, 255, 255, 0.3);
    border-radius: 8px;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.2);
}

.goal-container h2 {
    margin-bottom: 10px;
}

#current-goal {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#goal-description {
    margin-bottom: 10px;
    color: var(--neon-yellow);
    font-size: 14px;
    line-height: 1.4;
    text-shadow: 0 0 5px var(--neon-yellow);
}

#goal-progress-bar {
    width: 100%;
    height: 8px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
    margin-top: 5px;
}

#goal-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, var(--neon-cyan), var(--neon-magenta));
    border-radius: 4px;
    transition: width 0.3s ease;
    box-shadow: 0 0 8px var(--neon-cyan);
}

/* Mobile-specific goal system adjustments */
.mobile-device .goal-container,
body[data-is-mobile="true"] .goal-container {
    margin-top: 10px;
    padding: 8px;
}

.mobile-device #current-goal,
body[data-is-mobile="true"] #current-goal {
    min-height: 60px;
}

.mobile-device #goal-description,
body[data-is-mobile="true"] #goal-description {
    font-size: 16px;
    margin-bottom: 8px;
}

@media (max-width: 480px) {
    .goal-container {
        margin-top: 8px;
        margin-bottom: 8px;
    }
    
    #goal-description {
        font-size: 15px;
    }
    
    #goal-progress-bar {
        height: 10px; /* Slightly larger for easier touch */
    }
}

/* Shake Defense Button */
.shake-defense-container {
    margin-top: 20px;
    text-align: center;
}

.defense-btn {
    position: relative;
    width: 100%;
    padding: 10px;
    background-color: rgba(0, 255, 0, 0.1);
    border: 2px solid var(--neon-green);
    color: var(--neon-green);
    border-radius: 8px;
    font-family: 'Orbitron', sans-serif;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.defense-btn:not([disabled]):hover {
    background-color: rgba(0, 255, 0, 0.2);
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.4);
}

.defense-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    border-color: #666;
    color: #999;
    box-shadow: none;
}

.defense-btn[disabled] .defense-icon {
    opacity: 0.3;
}

.defense-btn .cooldown {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 3px;
    background-color: var(--neon-green);
    transition: width 0.1s linear;
}

.defense-icon {
    font-size: 20px;
    margin-right: 5px;
}

.defense-label {
    font-weight: bold;
}

/* Mobile-specific adjustments for shake defense button */
.mobile-device .shake-defense-container,
body[data-is-mobile="true"] .shake-defense-container {
    margin-top: 10px;
}

.mobile-device .defense-btn,
body[data-is-mobile="true"] .defense-btn {
    font-size: 18px;
    padding: 12px;
    min-height: 60px;
}

.mobile-device .defense-icon,
body[data-is-mobile="true"] .defense-icon {
    font-size: 24px;
}

@media (max-width: 480px) {
    .defense-btn {
        min-height: 50px;
        font-size: 18px;
    }
    
    .shake-defense-container {
        margin-top: 8px;
        margin-bottom: 8px;
    }
}

/* Message display for encouragement */
.message-display {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: var(--neon-yellow);
    font-size: 32px;
    font-weight: bold;
    text-shadow: 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-yellow);
    z-index: 1000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
    text-align: center;
    pointer-events: none;
    width: 100%;
    max-width: 300px;
    padding: 10px;
    text-transform: uppercase;
    font-family: 'Orbitron', sans-serif;
}

.message-display.active {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    animation: messageGlow 0.5s ease-in-out infinite alternate;
}

@keyframes messageGlow {
    from {
        text-shadow: 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-yellow);
    }
    to {
        text-shadow: 0 0 15px var(--neon-yellow), 0 0 30px var(--neon-yellow), 0 0 45px var(--neon-yellow);
    }
}

/* Level up message */
.level-up-message {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--neon-cyan);
    font-size: 48px;
    font-weight: bold;
    text-shadow: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px var(--neon-cyan);
    z-index: 95;
    text-align: center;
    pointer-events: none;
    animation: levelUpAnim 1s ease-out forwards; /* Reduced from 2s to 1s */
}

/* Animation for messages */
@keyframes pulse {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        text-shadow: 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-yellow);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.1);
        text-shadow: 0 0 15px var(--neon-yellow), 0 0 30px var(--neon-yellow), 0 0 45px var(--neon-yellow);
    }
}

@keyframes levelUpAnim {
    0% { 
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    15% { 
        transform: translate(-50%, -50%) scale(1.2);
        opacity: 1;
    }
    30% { 
        transform: translate(-50%, -50%) scale(0.9);
    }
    50% { 
        transform: translate(-50%, -50%) scale(1.1);
    }
    70% { 
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
    }
}

/* Game mode transition */
.mode-transition {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--neon-red);
    font-size: 40px;
    font-weight: bold;
    text-align: center;
    text-shadow: 0 0 10px var(--neon-red), 0 0 20px var(--neon-red);
    z-index: 95;
    animation: warningPulse 0.5s ease-in-out infinite alternate;
    pointer-events: none;
}

@keyframes warningPulse {
    0% { 
        transform: translate(-50%, -50%) scale(1);
        color: var(--neon-red);
        text-shadow: 0 0 10px var(--neon-red), 0 0 20px var(--neon-red);
    }
    100% { 
        transform: translate(-50%, -50%) scale(1.1);
        color: var(--neon-yellow);
        text-shadow: 0 0 10px var(--neon-yellow), 0 0 20px var(--neon-yellow), 0 0 30px var(--neon-yellow);
    }
}

/* Leaderboard Styles */
.leaderboard-content {
    max-width: 100%;
    width: 1200px;
    margin: 20px auto;
    padding: 25px;
    background-color: rgba(0, 0, 0, 0.6);
    border: 2px solid var(--neon-cyan);
    border-radius: 10px;
    box-shadow: 0 0 20px var(--neon-cyan);
}

.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px; /* Increased font size */
}

.leaderboard-header {
    display: flex;
    font-weight: bold;
    padding: 18px 15px; /* Increased padding */
    border-bottom: 2px solid var(--neon-cyan); /* Thicker border */
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
    margin-bottom: 15px;
}

.leaderboard-entries {
    max-height: 450px; /* Taller to fit more entries */
    overflow-y: auto;
}

.leaderboard-entry {
    display: flex;
    padding: 15px; /* Increased padding */
    border-bottom: 1px solid rgba(0, 255, 255, 0.2);
    transition: all 0.3s ease;
    border-radius: 5px; /* Rounded corners for entries */
    margin-bottom: 5px; /* Add space between entries */
}

.leaderboard-entry:hover {
    background-color: rgba(0, 255, 255, 0.1);
    transform: translateX(5px);
}

.leaderboard-entry.highlighted {
    background-color: rgba(255, 255, 0, 0.1);
    border-left: 3px solid var(--neon-yellow);
    animation: highlight-pulse 2s infinite alternate;
}

@keyframes highlight-pulse {
    0% { background-color: rgba(255, 255, 0, 0.05); }
    100% { background-color: rgba(255, 255, 0, 0.2); }
}

/* Updated column widths and spacing */
.rank-col {
    width: 8%;
    text-align: center;
    font-weight: bold;
}

.name-col {
    width: 35%;
    text-align: left;
    padding-left: 10px; /* Added padding */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.score-col {
    width: 22%;
    text-align: right;
    padding-right: 15px; /* Added padding */
    font-weight: bold;
    color: var(--neon-yellow); /* Highlight scores */
}

.level-col {
    width: 12%;
    text-align: center;
    font-weight: bold;
}

.date-col {
    width: 23%;
    text-align: right;
    padding-right: 5px; /* Added padding */
}

.loading-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(0, 255, 255, 0.2);
    border-top: 3px solid var(--neon-cyan);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 10px;
}

/* Score submit overlay */
.score-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.score-submit-container {
    background-color: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 0 30px var(--neon-cyan);
    animation: appear 0.5s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
}

@keyframes appear {
    0% { transform: scale(0.8); opacity: 0; }
    100% { transform: scale(1); opacity: 1; }
}

.score-submit-container h2 {
    color: var(--neon-red);
    margin-bottom: 20px;
    font-size: 36px;
    text-shadow: 0 0 10px var(--neon-red);
}

.final-score, .final-level {
    font-size: 24px;
    margin-bottom: 10px;
    text-align: center;
}

.high-score-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
}

.high-score-message {
    color: var(--neon-yellow);
    font-size: 20px;
    margin: 0 auto;
    text-shadow: 0 0 10px var(--neon-yellow);
    animation: pulse 1s infinite alternate;
    text-align: center;
    display: contents;
    padding: 8px 20px;
    border-radius: 8px;
    background-color: rgba(255, 255, 0, 0.1);
    border: 1px solid rgba(255, 255, 0, 0.3);
}

.high-score-message p {
    margin: 0;
    padding: 0;
    text-align: center;
}

.submit-form {
    margin-top: 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.submit-form p {
    margin-bottom: 15px;
}

#player-name-input {
    width: 80%;
    max-width: 300px;
    padding: 10px;
    font-family: 'Orbitron', sans-serif;
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--neon-cyan);
    color: white;
    border-radius: 5px;
    margin: 0 auto 20px auto;
    text-align: center;
    font-size: 18px;
}

.submit-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 0 auto 15px auto;
    flex-wrap: wrap;
    width: 100%;
}

.menu-button.secondary {
    border-color: var(--neon-magenta);
    color: var(--neon-magenta);
    box-shadow: 0 0 5px var(--neon-magenta);
}

.menu-button.secondary:hover {
    background-color: var(--neon-magenta);
    box-shadow: 0 0 10px var(--neon-magenta), 0 0 20px var(--neon-magenta);
}

/* Mobile Controls */
.mobile-controls {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 10px;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999; /* Extremely high z-index to ensure visibility */
    /* iOS Safari specific fixes */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    /* Ensure it stays at the bottom on iOS */
    padding-bottom: env(safe-area-inset-bottom, 10px);
}

.mobile-buttons {
    display: flex;
    gap: 10px;
}

.mobile-buttons.left {
    justify-content: flex-start;
}

.mobile-buttons.right {
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 200px;
}

.mobile-btn {
    width: 60px;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--neon-cyan);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--neon-cyan);
    font-family: 'Orbitron', sans-serif;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 0 5px var(--neon-cyan);
    transition: all 0.2s ease;
}

.mobile-btn:active {
    transform: scale(0.9);
    background-color: var(--neon-cyan);
    color: black;
}

.arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
}

.left-arrow {
    border-width: 10px 17px 10px 0;
    border-color: transparent var(--neon-cyan) transparent transparent;
}

.right-arrow {
    border-width: 10px 0 10px 17px;
    border-color: transparent transparent transparent var(--neon-cyan);
}

.up-arrow {
    border-width: 0 10px 17px 10px;
    border-color: transparent transparent var(--neon-cyan) transparent;
}

.down-arrow {
    border-width: 17px 10px 0 10px;
    border-color: var(--neon-cyan) transparent transparent transparent;
}

/* Media queries for responsive design */
/* Target mobile devices specifically with both class selectors and media queries */
.mobile-device .menu-container,
.mobile-device .game-container,
.mobile-device .multiplayer-container,
.mobile-device .score-submit-container,
body[data-is-mobile="true"] .menu-container,
body[data-is-mobile="true"] .game-container,
body[data-is-mobile="true"] .multiplayer-container,
body[data-is-mobile="true"] .score-submit-container {
    /* Override shared styles for mobile devices */
    width: 100%;
    max-width: 100%;
    padding: 15px;
}

/* Media query for adjusting to screen size */
@media (max-width: 768px) {
    body {
        font-size: 14px;
    }
    
    .game-logo {
        font-size: 36px;
        line-height: 1.2;
        text-align: center;
    }
    
    .game-logo br {
        display: block;
    }
    
    .game-logo span {
        display: inline-block;
        font-size: 42px;
        margin: 5px 0;
    }
    
    .tagline {
        font-size: 14px;
    }
    
    .menu-button {
        font-size: 16px;
        padding: 12px 25px;
        min-width: 200px;
    }
    
    .game-container, .multiplayer-container {
        flex-direction: column;
        align-items: center;
        padding-bottom: 20px; /* Reduced padding since we don't need space for controls */
    }
    
    #tetris, #mp-tetris {
        width: 240px;
        height: 480px;
    }
    
    /* Improve controls display on mobile */
    .mobile-device .controls {
        margin-top: 20px;
        width: 100%;
        text-align: center;
    }
    
    .mobile-device .controls h2 {
        display: none;
    }
    
    .mobile-device .controls ul {
        display: none;
    }
    
    /* This style is replaced by a more comprehensive one above */
    
    /* Make sure next piece is visible and properly positioned */
    .next-piece-container {
        max-width: 100px;
        overflow: visible;
        margin: 5px auto;
        position: relative;
        order: 2; /* Control display order in flexbox */
    }
    
    #next-piece,
    #mp-next-piece {
        position: relative;
        width: 100%;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-width: 1px; /* Thinner border on mobile */
    }
    
    #next-piece canvas,
    #mp-next-piece canvas {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0.75);
        max-width: 100%;
    }
    
    /* Fix the next piece container specifically for mobile */
    .mobile-device .game-info .next-piece-container,
    body[data-is-mobile="true"] .game-info .next-piece-container {
        flex: 0 0 auto;
        width: 90px;
        height: auto;
        margin: 0 5px;
    }
    
    .mobile-device .game-info #next-piece,
    body[data-is-mobile="true"] .game-info #next-piece {
        height: 90px;
        width: 90px;
        background-color: rgba(0, 0, 0, 0.4);
    }
    
    /* Mobile layout - reposition game elements to be more accessible */
    .mobile-device .game-container,
    body[data-is-mobile="true"] .game-container {
        flex-direction: column;
        padding: 5px;
        gap: 0;
    }
    
    /* Push the entire game screen down on mobile */
    .mobile-device #game-screen,
    body[data-is-mobile="true"] #game-screen {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 40px; /* Additional top padding */
        padding-bottom: 10px;
    }
    
    .mobile-device #tetris,
    body[data-is-mobile="true"] #tetris {
        order: 1; /* Game board first */
        width: 280px; /* Slightly smaller to better fit mobile screens */
        height: 560px; /* Maintain aspect ratio */
        margin-bottom: 0;
        margin-top: 10px; /* Add space at the top within the container */
    }
    
    .mobile-device .game-info,
    body[data-is-mobile="true"] .game-info {
        order: 2; /* Info panels after the game */
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-around;
        align-items: center;
        gap: 5px;
        width: 100%;
        max-width: 280px; /* Match new game width */
        background: rgba(0,0,0,0.7);
        border-radius: 0 0 10px 10px;
        padding: 5px;
        margin-top: -5px; /* Slightly overlap with game */
    }
    
    .mobile-device .controls,
    body[data-is-mobile="true"] .controls {
        order: 3; /* Controls at the bottom */
        width: 100%;
        max-width: 280px; /* Match new game width */
        margin-top: 10px; /* Add space between game info and controls */
        margin-bottom: 15px; /* Add space at the bottom */
    }
    
    /* Optimize the layout of game info containers for mobile */
    .mobile-device .game-info > div,
    body[data-is-mobile="true"] .game-info > div {
        margin: 3px;
        flex: 0 1 auto;
    }
    
    /* Score and level side by side */
    .mobile-device .score-container,
    .mobile-device .level-container,
    body[data-is-mobile="true"] .score-container,
    body[data-is-mobile="true"] .level-container {
        width: 75px;
        margin: 0 3px;
        order: 1; /* Appear first */
    }
    
    /* Next piece next to score/level */
    .mobile-device .next-piece-container,
    body[data-is-mobile="true"] .next-piece-container {
        order: 2; /* Appear next */
        margin: 0 3px;
    }
    
    /* Shake defense button */
    .mobile-device .shake-defense-container,
    body[data-is-mobile="true"] .shake-defense-container {
        width: 80px;
        order: 3; /* Appear last */
        margin: 0 3px;
    }
    
    /* Goals at the bottom of the info panel */
    .mobile-device .goal-container,
    body[data-is-mobile="true"] .goal-container {
        width: 100%;
        order: 4; /* At the bottom */
        margin-top: 3px;
    }
    
    .mobile-device h2,
    body[data-is-mobile="true"] h2 {
        font-size: 16px;
        margin-bottom: 4px;
    }
    
    .mobile-device #score, 
    .mobile-device #level,
    body[data-is-mobile="true"] #score,
    body[data-is-mobile="true"] #level {
        font-size: 18px;
        margin-bottom: 4px;
    }
    
    /* Compact shake defense button for mobile */
    .mobile-device .defense-btn,
    body[data-is-mobile="true"] .defense-btn {
        padding: 5px;
        min-height: 40px;
    }
    
    .mobile-device .defense-icon,
    body[data-is-mobile="true"] .defense-icon {
        font-size: 16px;
    }
    
    .mobile-device .defense-label,
    body[data-is-mobile="true"] .defense-label {
        font-size: 14px;
    }
    
    /* Game controls more visible and accessible on mobile */
    .mobile-device .controls,
    body[data-is-mobile="true"] .controls {
        margin-top: 5px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 8px;
        border: 1px solid rgba(0, 255, 255, 0.2);
    }
    
    .mobile-device .controls ul,
    body[data-is-mobile="true"] .controls ul {
        display: none; /* Hide controls list on mobile to save space */
    }
    
    /* Make game buttons more prominent on mobile */
    .mobile-device .game-buttons,
    body[data-is-mobile="true"] .game-buttons {
        display: flex;
        justify-content: center;
        width: 100%;
        gap: 20px;
        margin: 8px 0;
    }
    
    /* Style the main menu button on mobile */
    .mobile-device #return-to-menu,
    body[data-is-mobile="true"] #return-to-menu {
        display: inline-block;
        font-size: 16px;
        padding: 10px 15px;
        margin: 5px auto;
        min-width: 140px;
    }
    
    /* Style the mute button on mobile */
    .mobile-device #mute-music-btn,
    body[data-is-mobile="true"] #mute-music-btn {
        display: flex;
        width: 50px;
        height: 50px;
        font-size: 24px;
        margin: 0;
    }
    
    .leaderboard-content {
        max-width: 95%;
        padding: 15px;
    }
    
    .leaderboard-header, .leaderboard-entry {
        font-size: 14px; /* Slightly larger than before */
        padding: 12px 8px;
    }
    
    .date-col {
        display: none; /* Still hiding date column on mobile */
    }
    
    /* Adjusted column widths for mobile */
    .rank-col {
        width: 12%;
        padding-left: 5px;
    }
    
    .name-col {
        width: 40%;
        padding-left: 8px;
    }
    
    .score-col {
        width: 30%;
        padding-right: 10px;
    }
    
    .level-col {
        width: 18%;
        padding-right: 5px;
    }
    
    /* Game over / Score submission mobile adjustments */
    .score-submit-container {
        padding: 20px 15px;
        width: 95%;
    }
    
    .score-submit-container h2 {
        font-size: 28px;
    }
    
    .final-score, .final-level {
        font-size: 20px;
    }
    
    .high-score-message p {
        font-size: 18px;
    }
    
    .submit-buttons {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    
    .submit-buttons .menu-button {
        width: 100%;
        max-width: 250px;
    }
}

/* iPhone-specific overrides */
@media (max-width: 480px), (max-device-width: 480px) {
    .score-submit-container {
        padding: 15px 10px;
        width: 98%;
        margin: 10px auto;
    }
    
    .score-submit-container h2 {
        font-size: 24px;
        margin-bottom: 10px;
    }
    
    .final-score, .final-level {
        font-size: 18px;
        margin-bottom: 5px;
    }
    
    .submit-form {
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
    }
    
    #player-name-input {
        width: 90%;
        margin-bottom: 15px;
    }
    
    .submit-buttons {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 10px;
    }
    
    .submit-buttons .menu-button {
        padding: 10px 15px;
        font-size: 14px;
        width: 80%;
        min-width: 200px;
        max-width: 250px;
        margin: 0 auto;
    }
    
    .high-score-container {
        width: 100%;
        margin: 15px 0;
    }
    
    .high-score-message {
        width: auto;
        padding: 5px 15px;
        font-size: 16px;
    }
    
    .high-score-message p {
        font-size: 16px;
        margin: 0;
        padding: 0;
    }
    
    /* Force mobile layout */
    .score-overlay {
        align-items: center;
        justify-content: center;
        padding: 10px;
    }
}

/* Safari on iOS specific fixes - using multiple selectors for redundancy */
@supports (-webkit-touch-callout: none),
          (touch-action: manipulation) {
    .score-submit-container {
        width: 95%;
        max-width: 95%;
        padding: 15px;
    }
    
    .submit-buttons {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    
    .submit-buttons .menu-button {
        width: 80%;
        margin: 5px auto;
    }
    
    /* Force mobile controls to be visible */
    .mobile-controls {
        display: flex !important;
    }
    
    /* Force layout to be mobile */
    .game-container, .multiplayer-container {
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Ensure canvas is properly sized */
    #tetris, #mp-tetris {
        width: 240px !important;
        height: 480px !important;
    }
}

/* Specific targeting for iOS Safari */
.ios-safari .mobile-controls {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
}

.ios-safari .game-container {
    flex-direction: column !important;
    padding-bottom: 100px !important; /* Space for controls */
}

.ios-safari #tetris {
    width: 240px !important;
    height: 480px !important;
}

/* Crash Recovery Prompt Styles */
.crash-recovery-prompt {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.recovery-message {
    background-color: rgba(0, 0, 0, 0.9);
    border: 2px solid var(--neon-cyan);
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    max-width: 500px;
    box-shadow: 0 0 30px var(--neon-cyan);
    animation: appear 0.5s ease;
}

.recovery-message h3 {
    color: var(--neon-cyan);
    margin-bottom: 20px;
    font-size: 28px;
    text-shadow: 0 0 10px var(--neon-cyan);
}

.recovery-message p {
    margin-bottom: 30px;
    font-size: 18px;
    line-height: 1.5;
}

.recovery-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

@media (max-width: 768px) {
    .recovery-message {
        width: 90%;
        padding: 20px;
    }
    
    .recovery-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .recovery-message h3 {
        font-size: 22px;
    }
    
    .recovery-message p {
        font-size: 16px;
    }
}

/* Volume controls styling */
.volume-controls {
    display: flex;
    align-items: center;
    margin: 5px 0;
    width: 100%;
}

.neon-slider {
    flex: 1;
    height: 8px;
    -webkit-appearance: none;
    appearance: none;
    background: linear-gradient(to right, var(--neon-cyan), var(--neon-magenta));
    border-radius: 4px;
    outline: none;
    box-shadow: 0 0 10px var(--neon-cyan);
}

.neon-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 15px var(--neon-magenta);
}

.neon-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 15px var(--neon-magenta);
}

.volume-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    padding: 5px 10px;
    cursor: pointer;
    transition: transform 0.2s;
}

.volume-btn:hover {
    transform: scale(1.2);
    text-shadow: 0 0 10px var(--neon-cyan);
}

.setting-description {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 3px;
}

/* PWA Install Button */
.install-button {
    background: linear-gradient(135deg, var(--neon-cyan), var(--neon-blue));
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

.install-button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.1) 50%, 
        rgba(255,255,255,0) 100%);
    transform: rotate(-45deg);
    animation: install-button-shine 3s infinite;
    z-index: 1;
    pointer-events: none;
}

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

.install-button:hover {
    box-shadow: 0 0 15px var(--neon-blue), 0 0 30px var(--neon-cyan);
}

/* Safari-specific install button for iOS */
.ios-safari .install-button-ios {
    display: block !important;
    background: linear-gradient(135deg, #ff2d55, #ff9500);
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

/* iOS Install Instructions */
.ios-install-instructions {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 9999;
    color: white;
    padding: 20px;
    text-align: center;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ios-install-instructions.show {
    display: flex;
}

.ios-install-instructions .close-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 24px;
    cursor: pointer;
}

.ios-install-instructions h3 {
    color: var(--neon-cyan);
    margin-bottom: 20px;
    font-size: 24px;
}

.ios-install-instructions p {
    margin-bottom: 15px;
    font-size: 16px;
}

.ios-install-instructions .share-icon {
    width: 40px;
    height: 40px;
    margin: 10px;
    filter: invert(1);
}

.ios-install-instructions .instruction-step {
    margin-bottom: 30px;
}

/* Hide button controls completely since we now use touch/swipe controls */
.mobile-controls {
    display: none !important;
}

/* These styles are no longer needed since we're using touch controls,
   but keeping them commented for reference in case we need them later
.mobile-device .mobile-controls {
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.7);
    background-color: rgba(0, 0, 0, 0.85);
    padding: 15px;
}

.mobile-device .menu-container:not(.hidden) ~ .mobile-controls {
    display: none !important;
}

.mobile-device #game-screen:not(.hidden) ~ .mobile-controls {
    display: flex !important;
}
*/

.mobile-btn {
    border: 2px solid var(--neon-cyan) !important;
    background-color: rgba(20, 20, 40, 0.8) !important;
    width: 60px !important;
    height: 60px !important;
}

.mobile-btn:active {
    background-color: var(--neon-cyan) !important;
    color: #000 !important;
    transform: scale(0.95);
}

#mobile-drop {
    background-color: rgba(255, 0, 255, 0.2) !important;
    border: 2px solid var(--neon-magenta) !important;
    border-radius: 30px !important;
    padding: 15px 25px !important;
}

#mobile-drop:active {
    background-color: var(--neon-magenta) !important;
}

/* Offline notification */
.offline-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 20px;
    border-radius: 8px;
    border-left: 4px solid var(--neon-red);
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
    display: flex;
    align-items: center;
    z-index: 9999;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(150%);
    opacity: 0;
}

.offline-notification.show {
    transform: translateY(0);
    opacity: 1;
}

.offline-notification .icon {
    margin-right: 10px;
    color: var(--neon-red);
    font-size: 24px;
}

.offline-notification .message {
    font-size: 14px;
}

.offline-notification .close {
    margin-left: 15px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    font-size: 18px;
}

.offline-notification .close:hover {
    color: white;
}

/* Challenge Indicator */
.challenge-indicator {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.5);
    background: transparent; /* Changed from rgba(0, 0, 0, 0.9) to transparent */
    border: 2px solid var(--neon-cyan);
    border-radius: 15px;
    padding: 15px 25px;
    color: white;
    text-align: center;
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 20px var(--neon-cyan);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.challenge-indicator.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.challenge-icon {
    font-size: 2em;
    margin-bottom: 5px;
    animation: pulse 1s infinite;
}

.challenge-name {
    font-family: 'Orbitron', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    text-transform: uppercase;
    color: var(--neon-cyan);
    text-shadow: 0 0 5px var(--neon-cyan);
}

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

/* Mobile adjustments for challenge indicator */
@media (max-width: 768px) {
    .challenge-indicator {
        padding: 10px 20px;
    }
    
    .challenge-icon {
        font-size: 1.5em;
    }
    
    .challenge-name {
        font-size: 1em;
    }
}

/* Mobile touch instruction styles */
.touch-instructions {
    position: absolute;
    bottom: 15px;
    left: 0;
    right: 0;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    margin: 0 auto;
    width: fit-content;
    max-width: 90%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
    z-index: 1000;
    pointer-events: none;
    transition: opacity 0.5s ease;
    opacity: 0;
    animation: fadeIn 0.5s ease forwards, fadeOut 0.5s ease 8s forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Visual feedback for touch regions (optional) */
.touch-region {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    pointer-events: none;
    transform: scale(0);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.touch-region.active {
    transform: scale(1);
    opacity: 0.3;
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    0% { opacity: 0.2; }
    100% { opacity: 0.4; }
}

/* Make canvas interact better with touch */
#tetris {
    touch-action: none; /* Prevent browser handling of touches */
}

/* Mobile-specific game container adjustments */
body[data-is-mobile="true"] .game-container {
    padding: 10px;
}

body[data-is-mobile="true"] .game-container canvas {
    max-height: 70vh; /* Leave room for controls and info */
}

/* Make sure canvas is not too small on mobile */
@media screen and (max-width: 480px) {
    #tetris {
        max-width: 100% !important;
        height: auto !important;
    }
}