/* Multiplayer-specific styles */

/* Lobby Styles */
.lobby-container {
    max-width: 600px;
    margin: 50px auto;
    padding: 30px;
    background: var(--pixel-bg-medium);
    border: 4px solid var(--pixel-border);
}

.lobby-title {
    font-size: 20px;
    color: var(--pixel-accent);
    margin-bottom: 30px;
    text-align: center;
}

.lobby-options {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.lobby-section {
    padding: 20px;
    background: var(--pixel-bg-dark);
    border: 2px solid var(--pixel-border);
}

/* Room Code Styles */
.room-code-display {
    font-size: 32px;
    color: var(--pixel-warning);
    text-align: center;
    padding: 20px;
    background: #000;
    border: 3px solid var(--pixel-accent);
    letter-spacing: 10px;
    margin: 20px 0;
}

/* Round Configuration */
.round-config {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
}

.round-select {
    font-family: 'Press Start 2P', monospace;
    font-size: 10px;
    padding: 8px;
    background: var(--pixel-bg-dark);
    color: var(--pixel-text);
    border: 2px solid var(--pixel-border);
    cursor: pointer;
}

.round-select:hover {
    border-color: var(--pixel-accent);
}

/* Game Settings Display */
.game-settings {
    text-align: center;
    padding: 10px;
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--pixel-border);
}

/* Players List */
.players-list {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid var(--pixel-border);
    padding: 15px;
    max-width: 400px;
    margin: 20px auto;
}

.player-status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin: 5px 0;
    background: var(--pixel-bg-dark);
    border: 1px solid var(--pixel-border);
}

.ready-indicator {
    font-size: 10px;
    padding: 5px 10px;
    border: 2px solid var(--pixel-border);
}

.ready-indicator.not-ready {
    background: var(--pixel-danger);
    color: white;
}

.ready-indicator.ready {
    background: var(--pixel-success);
    color: white;
    animation: pulse 1s ease-in-out infinite;
}

/* Lobby Message */
.lobby-message {
    text-align: center;
    font-size: 12px;
    color: var(--pixel-warning);
    margin: 20px 0;
    min-height: 20px;
}

.room-code-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 24px;
    padding: 15px;
    background: var(--pixel-bg-dark);
    color: var(--pixel-text);
    border: 3px solid var(--pixel-border);
    text-align: center;
    letter-spacing: 8px;
    text-transform: uppercase;
    width: 100%;
    margin: 20px 0;
}

.name-input {
    font-family: 'Press Start 2P', monospace;
    font-size: 14px;
    padding: 10px;
    background: var(--pixel-bg-dark);
    color: var(--pixel-text);
    border: 2px solid var(--pixel-border);
    width: 100%;
    margin: 10px 0;
}

.waiting-message {
    text-align: center;
    color: var(--pixel-warning);
    font-size: 12px;
    animation: text-flash 1s ease-in-out infinite;
}

/* Game View Styles */
.single-player-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.opponent-section {
    opacity: 0.5;
    min-height: 250px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--pixel-border);
    margin: 20px 0;
    padding: 20px;
}

.opponent-container {
    text-align: center;
}

.opponent-name {
    margin-bottom: 15px;
    font-size: 14px;
}

.opponent-box {
    width: 150px;
    height: 150px;
    background: var(--pixel-box-wood);
    border: 4px solid var(--pixel-box-shadow);
    position: relative;
    margin: 0 auto 15px;
    transform-style: preserve-3d;
    perspective: 500px;
}

/* Opponent box 3D effect */
.opponent-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.3;
    background-image:
        repeating-linear-gradient(90deg, transparent, transparent 5px, rgba(93, 47, 10, 0.3) 5px, rgba(93, 47, 10, 0.3) 10px),
        repeating-linear-gradient(0deg, transparent, transparent 20px, rgba(93, 47, 10, 0.2) 20px, rgba(93, 47, 10, 0.2) 22px);
    pointer-events: none;
}

.opponent-box-lid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient(180deg,
        var(--pixel-box-wood) 0%,
        var(--pixel-box-wood) 40%,
        var(--pixel-box-shadow) 100%);
    border-bottom: 4px solid var(--pixel-box-shadow);
    transform-origin: top;
    z-index: 2;
}

.opponent-box-lid::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    background: repeating-linear-gradient(90deg,
        var(--pixel-box-shadow) 0px,
        var(--pixel-box-shadow) 4px,
        rgba(0, 0, 0, 0.5) 4px,
        rgba(0, 0, 0, 0.5) 8px);
}

.my-section {
    margin: 20px 0;
}

/* Connection Status */
.connection-status {
    position: fixed;
    top: 10px;
    right: 10px;
    padding: 5px 10px;
    background: var(--pixel-bg-dark);
    border: 2px solid var(--pixel-border);
    font-size: 10px;
    z-index: 1000;
}

.connection-status.connected {
    border-color: var(--pixel-success);
    color: var(--pixel-success);
}

.connection-status.disconnected {
    border-color: var(--pixel-danger);
    color: var(--pixel-danger);
}

/* Game Info */
.game-info {
    background: var(--pixel-bg-light);
    padding: 15px;
    margin: 20px 0;
    border: 2px solid var(--pixel-border);
    text-align: center;
}

.turn-indicator {
    font-size: 14px;
    color: var(--pixel-warning);
    margin: 10px 0;
}

.turn-indicator.my-turn {
    color: var(--pixel-success);
    animation: pulse 1s ease-in-out infinite;
}

/* Swap Animations */
@keyframes slideOffLeft {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateX(-150%) rotate(-15deg);
        opacity: 0.3;
    }
    100% {
        transform: translateX(-150%) rotate(-15deg);
        opacity: 0;
    }
}

@keyframes slideOffRight {
    0% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
    50% {
        transform: translateX(150%) rotate(15deg);
        opacity: 0.3;
    }
    100% {
        transform: translateX(150%) rotate(15deg);
        opacity: 0;
    }
}

@keyframes slideInFromRight {
    0% {
        transform: translateX(150%) rotate(15deg);
        opacity: 0;
    }
    50% {
        transform: translateX(150%) rotate(15deg);
        opacity: 0.3;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

@keyframes slideInFromLeft {
    0% {
        transform: translateX(-150%) rotate(-15deg);
        opacity: 0;
    }
    50% {
        transform: translateX(-150%) rotate(-15deg);
        opacity: 0.3;
    }
    100% {
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
}

.box-slide-out-left {
    animation: slideOffLeft 0.5s ease-in forwards;
}

.box-slide-out-right {
    animation: slideOffRight 0.5s ease-in forwards;
}

.box-slide-in-from-right {
    animation: slideInFromRight 0.5s ease-out forwards;
}

.box-slide-in-from-left {
    animation: slideInFromLeft 0.5s ease-out forwards;
}

/* Box glow effect during swap */
.swap-glow {
    box-shadow: 0 0 20px var(--pixel-warning),
                0 0 40px var(--pixel-warning);
}

/* Override carrot z-index for multiplayer */
.carrot.pixel-art {
    z-index: 1;  /* Below the lid (z-index: 2) */
}

/* Sound effects visual feedback */
.sound-effect-icon {
    position: fixed;
    top: 10px;
    left: 10px;
    font-size: 20px;
    color: var(--pixel-text);
    animation: sound-pulse 0.5s ease-in-out;
    z-index: 1000;
    pointer-events: none;
}

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

/* Error message styles */
.error-message {
    background: var(--pixel-danger);
    color: var(--pixel-bg-dark);
    padding: 10px;
    margin: 10px 0;
    border: 2px solid var(--pixel-bg-dark);
    text-align: center;
}

/* Spectator mode indicator */
.spectator-badge {
    position: absolute;
    top: 50px;
    right: 10px;
    background: var(--pixel-warning);
    color: var(--pixel-bg-dark);
    padding: 5px 10px;
    font-size: 10px;
    border: 2px solid var(--pixel-bg-dark);
}

/* Loading state for network actions */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.loading-overlay.active {
    display: flex;
}

.loading-text {
    color: var(--pixel-warning);
    font-size: 14px;
    animation: text-flash 0.5s ease-in-out infinite;
}