/* Anna Escape Room - Updated CSS */

/* Base Styles */
html {
    height: 100%;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    overflow: hidden;
    height: 100vh; /* Ensure full viewport height */
    box-sizing: border-box;
}

/* Force username color and weight in navbar */
#user-controls span, #user-controls {
    font-weight: 600 !important;
}

/* Overlay & Positioning Utilities */
.position-fixed-bottom-right {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 9999;
    pointer-events: none;
}

.game-overlay-absolute {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: 0;
}

.iframe-fullscreen {
    width: 100%;
    height: 100%;
    border: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* Modal Enhancements */
.buy-modal-centered {
    border-radius: 24px;
    text-align: center;
}

.buy-modal-body {
    font-size: 1.3rem;
    padding: 2.5rem 2rem 1.5rem 2rem;
}

.buy-confirm-buttons {
    display: flex;
    justify-content: center;
    gap: 2.5rem;
}

.buy-modal-button {
    min-width: 90px;
    font-size: 1.2rem;
}

/* MetaMask Web3 Integration Styles */
.metamask-btn {
    background: linear-gradient(135deg, #8247e5, #6c5ce7) !important;
    color: white !important;
    border: none !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    overflow: hidden !important;
}

.metamask-btn:hover {
    background: linear-gradient(135deg, #6c5ce7, #5f3dc4) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(130, 71, 229, 0.4) !important;
}

.metamask-btn:active {
    transform: translateY(0) !important;
}

.metamask-btn i {
    margin-right: 8px !important;
    font-size: 1.1em !important;
}

.wallet-info {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.wallet-address {
    font-family: 'Courier New', monospace !important;
    font-size: 0.9em !important;
    color: #28a745 !important;
    font-weight: 600 !important;
    background: rgba(40, 167, 69, 0.1) !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    border: 1px solid rgba(40, 167, 69, 0.3) !important;
}

#disconnect-wallet-btn {
    background: #dc3545 !important;
    color: white !important;
    border: none !important;
    font-size: 0.8em !important;
    padding: 6px 12px !important;
    border-radius: 4px !important;
    transition: all 0.3s ease !important;
}

#disconnect-wallet-btn:hover {
    background: #c82333 !important;
    transform: translateY(-1px) !important;
}

/* Web3 Connection Status Indicator */
.web3-status {
    position: fixed !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 10000 !important;
    padding: 8px 12px !important;
    border-radius: 20px !important;
    font-size: 0.8em !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.web3-status.connected {
    background: rgba(40, 167, 69, 0.9) !important;
    color: white !important;
}

.web3-status.disconnected {
    background: rgba(220, 53, 69, 0.9) !important;
    color: white !important;
}

/* Modal Input Fixes */
.modal .form-control,
.modal input,
.modal textarea,
.modal select {
    pointer-events: auto !important;
    z-index: 2001 !important;
}

.modal-dialog {
    z-index: 2001 !important;
}

/* Utility Classes */
.display-none {
    display: none;
}

/* Top Header */
.top-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    height: 60px;
}

.header-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    flex-shrink: 0;
}

.header-title img {
    width: 20%;
    height: auto;
    object-fit: contain;
    background: transparent;
    mix-blend-mode: normal;
    filter: none;
}

/* Header logo placeholder */
.header-logo {
    display: inline-block;
    font-size: 1.5rem;
    margin-right: 10px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.header-buttons {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}

/* User info alignment in header */
#user-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

#user-name {
    font-weight: 600;
    color: #333;
}

.gem-display {
    display: none;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    font-weight: 600;
    color: #ffbf00;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.gem-display .gem-icon {
    font-size: 1rem;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

#gem-count {
    font-variant-numeric: tabular-nums;
}

.btn-header {
    background: #e0e0e0;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    color: #666;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-header:hover {
    background: #d0d0d0;
}

#add-gems-btn {
    display: none;
    background: linear-gradient(135deg, #fdd835, #ffb300);
    color: #3d3d3d;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(253, 216, 53, 0.35);
}

#buy-gems-btn {
    /* Button will be shown via JavaScript when user is logged in */
    background: linear-gradient(135deg, #4caf50, #45a049);
    color: white;
    font-weight: 600;
    box-shadow: 0 2px 6px rgba(76, 175, 80, 0.35);
}

#buy-gems-btn:hover {
    background: linear-gradient(135deg, #45a049, #388e3c);
    box-shadow: 0 3px 8px rgba(76, 175, 80, 0.5);
}

#add-gems-btn:hover {
    background: linear-gradient(135deg, #ffca28, #ff9800);
    color: #ffffff;
}

#add-gems-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    box-shadow: none;
}

/* Main Container Layout */
.main-container {
    background: linear-gradient(180deg, #ffffff 0%, #d4eaf8 60%, #c1ebf9 100%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh; /* Changed from 98% to 100vh for full viewport height */
    border: none;
    z-index: 0;
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Top Panel - Main Game Area */
.top-panel {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    height: 60%; /* Reduced from 75% to 60% to prevent overlap */
    width: 100%;
    padding: 5px;
    position: fixed;
    top: 20px;
    left: 20px;
    right: 0;
    z-index: 0;
    gap: 15px;
    box-sizing: border-box;
}

/* Instructions Container */
.instructions-container {
    width: 350px;
    height: 100%;
    padding: 20px;
    box-sizing: border-box;
}

.instructions-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 191, 255, 0.3);
    backdrop-filter: blur(10px);
    height: 100%;
    overflow-y: auto;
    box-sizing: border-box;
}

.story-section {
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 2px solid rgba(0, 191, 255, 0.2);
}

.story-title {
    font-size: 1.4rem;
    font-weight: bold;
    color: #2c5aa0;
    margin-bottom: 12px;
    text-shadow: 0 2px 4px rgba(44, 90, 160, 0.3);
    display: flex;
    align-items: center;
    gap: 8px;
}

.story-text {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #555;
    margin: 0;
}

.instructions-section {
    margin-bottom: 20px;
}

.instructions-title {
    font-size: 1.2rem;
    font-weight: bold;
    color: #2c5aa0;
    margin-bottom: 15px;
    text-shadow: 0 1px 3px rgba(44, 90, 160, 0.3);
}

.instruction-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 191, 255, 0.1);
}

.instruction-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.instruction-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.instruction-text {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.4;
    margin: 0;
    font-weight: 500;
}

/* Command Chat Text Interface */
.command-chat-container {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    width: 350px;
    height: 100%;
    vertical-align: center;
}

/* Game Container - Right Side */
.game-container {
    flex: 1;
    height: 100%;
    position: relative;
    max-width: calc(100% - 370px); /* Account for commands panel width + gap */
}


/* Store Panel - Updated from Quick Buy */
.store-panel {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 20px;
    padding: 20px;
    margin: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border: 2px solid rgba(0, 191, 255, 0.3);
    backdrop-filter: blur(10px);
    width: 100%;
    max-width: none;
}

.store-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(0, 191, 255, 0.2);
}

.store-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    display: inline-block;
    text-align: center;
    line-height: 32px;
    font-size: 24px;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

.store-title {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c5aa0;
    text-shadow: 0 2px 4px rgba(44, 90, 160, 0.3);
}

.store-items-grid {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: stretch;
    justify-content: center;
    flex-wrap: wrap;
}

.store-item {
    background: linear-gradient(135deg, rgba(0, 191, 255, 0.1) 0%, rgba(44, 90, 160, 0.1) 100%);
    border: 2px solid rgba(0, 191, 255, 0.3);
    border-radius: 15px;
    padding: 15px;
    width: 160px;
    min-width: 140px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.store-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.store-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 191, 255, 0.3);
    border-color: rgba(0, 191, 255, 0.6);
}

.store-item:hover::before {
    left: 100%;
}

.store-item .item-icon {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.store-item .item-image {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.item-details {
    width: 100%;
    text-align: center;
}

.item-name {
    font-size: 1rem;
    font-weight: bold;
    color: #2c5aa0;
    margin: 0;
    text-shadow: 0 1px 3px rgba(44, 90, 160, 0.3);
}

.item-subtitle {
    font-size: 0.9rem;
    color: #666;
    margin: 2px 0 0 0;
    font-weight: 500;
}

/* Top Right Panel - Game View */
.top-right-panel {
    width: 65%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-shrink: 0;
    height: 100%;
}

.game-container {
    border-radius: 15px;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.game-scene {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Volume controls overlay */
.volume-controls {
    position: absolute;
    left: 40%;
    display: flex !important;
    gap: 8px;
    z-index: 9999;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: rgba(134, 149, 156, 0.3);
    border-radius: 10px;
    padding: 8px;
    border: 1px solid rgba(68, 113, 143, 0.2);
}

.volume-btn {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    background: rgba(0,0,0,0.5);
    padding: 0;
    position: relative;
    overflow: hidden;
    min-width: 40px;
    min-height: 40px;
    opacity: 1;
    visibility: visible;
}

.volume-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.volume-btn:hover::before {
    left: 100%;
}

.volume-btn:hover {
    transform: scale(1.1) translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    border-color: rgba(255,255,255,0.5);
}

.volume-btn:active {
    transform: scale(0.95) translateY(0px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.volume-btn.clicked {
    animation: volumeClick 0.3s ease-out;
    background: rgba(0, 191, 255, 0.3);
    border-color: rgba(0, 191, 255, 0.8);
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.6);
}

.volume-btn.mute {
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    border-color: rgba(220, 53, 69, 0.8);
}

.volume-btn.min {
    background: linear-gradient(135deg, #ffc107 0%, #e0a800 100%);
    border-color: rgba(255, 193, 7, 0.8);
}

.volume-btn.max {
    background: linear-gradient(135deg, #28a745 0%, #218838 100%);
    border-color: rgba(40, 167, 69, 0.8);
}

.volume-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    filter: brightness(0) invert(1) contrast(1.2);
    transition: all 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.volume-btn:hover .volume-icon {
    transform: scale(1.1);
    filter: brightness(0) invert(1) contrast(1.2);
}

.volume-btn.clicked .volume-icon {
    filter: brightness(0) invert(1) contrast(1.2) drop-shadow(0 0 4px rgba(0, 191, 255, 1));
}

/* Fallback for when icons fail to load */
.volume-icon[src*="mute-volume.png"],
.volume-icon[src*="min-volume.png"],
.volume-icon[src*="max-volume.png"] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Ensure icons are always visible */
.volume-icon:not([src]),
.volume-icon[src=""] {
    display: none;
}

/* Debug: Make volume controls more visible for testing */
.volume-controls.debug {
    background: rgba(255, 0, 0, 0.3);
    border: 2px solid red;
    border-radius: 10px;
    padding: 10px;
}

/* Enhanced visibility for volume icons */
.volume-icon {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    min-width: 24px;
    min-height: 24px;
}

/* Fallback text icons if images fail to load */
.volume-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 16px;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    z-index: 2;
    pointer-events: none;
}

.volume-btn[data-volume="mute"]::after {
    content: '🔇';
}

.volume-btn[data-volume="min"]::after {
    content: '🔉';
}

.volume-btn[data-volume="max"]::after {
    content: '🔊';
}

/* Make sure volume buttons have proper contrast */
.volume-btn.mute .volume-icon {
    filter: brightness(0) invert(1) contrast(1.5) sepia(1) saturate(2);
}

.volume-btn.min .volume-icon {
    filter: brightness(0) invert(1) contrast(1.3);
}

.volume-btn.max .volume-icon {
    filter: brightness(0) invert(1) contrast(1.4) hue-rotate(90deg);
}

@keyframes volumeClick {
    0% {
        transform: scale(1.1) translateY(-2px);
        box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    }
    50% {
        transform: scale(0.9) translateY(1px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: scale(1) translateY(0px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    }
}

/* Bottom Panel - Character and Chat */
.bottom-panel {
    position: fixed;
    bottom: 0; /* Changed from 10px to 0 for better positioning */
    left: 0;
    right: 0;
    height: 35%; /* Keep at 35% but ensure no overlap */
    width: 100%;
    z-index: 100;
    display: flex;
    align-items: stretch;
    flex-direction: row;
    box-sizing: border-box; /* Include padding in height calculation */
}

/* Bottom Left Panel - Character Portrait */
.bottom-left-panel {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 40%;
    z-index: 1;
}


/* Bottom Right Panel - Chat Container */
.bottom-right-panel {
    flex: 1 1 auto;
    width: 60%;
    padding: 15px;
    display: flex;
    flex-direction: column;
    margin-right: 0;
    z-index: 1;
    max-width: 70%;
}

.chat-container {
    background: white;
    border-radius: 12px;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    border: 2px solid #ddd;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Updated Chat Message Styles */
.chat-messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 85%;
    animation: messageSlideIn 0.3s ease-out;
}

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

.anna-message {
    align-self: flex-start;
}

.user-message {
    align-self: flex-end;
    flex-direction: row-reverse;
}

.other-message {
    align-self: flex-start;
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(0, 191, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.message-content {
    padding: 12px 16px;
    position: relative;
    max-width: 300px;
}

.anna-message .message-content {
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border: 2px solid #2196f3;
    color: #0d47a1;
    border-radius: 18px 18px 18px 8px;
}

.anna-message .message-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #2196f3;
}

.user-message .message-content {
    background: linear-gradient(135deg, #e8f5e8 0%, #c8e6c9 100%);
    border: 2px solid #4caf50;
    color: #1b5e20;
    border-radius: 18px 18px 8px 18px;
}

.user-message .message-content::before {
    content: '';
    position: absolute;
    right: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-left: 8px solid #4caf50;
}

.other-message .message-content {
    background: linear-gradient(135deg, #fff3e0 0%, #ffe0b2 100%);
    border: 2px solid #ff9800;
    color: #e65100;
    border-radius: 18px 18px 18px 8px;
}

.other-message .message-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #ff9800;
}

.system-message .message-content {
    background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
    border: 2px solid #9c27b0;
    color: #4a148c;
    border-radius: 18px;
    text-align: center;
    font-style: italic;
}

.system-message .message-content::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 15px;
    width: 0;
    height: 0;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-right: 8px solid #9c27b0;
}

.message-sender {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: rgba(0, 0, 0, 0.7);
}

.anna-message .message-sender {
    color: #1976d2;
}

.user-message .message-sender {
    color: #388e3c;
}

.other-message .message-sender {
    color: #f57c00;
}

.system-message .message-sender {
    color: #9c27b0;
}

.message-text {
    font-size: 1.05rem;
    line-height: 1.5;
    color: #333;
    word-wrap: break-word;
}

/* Updated Chat Input Styling */
.chat-input-container {
    background: white;
    padding: 12px 15px;
    border-top: 1px solid rgba(0, 191, 255, 0.2);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    position: relative;
}

/* Command dropdown styling */
.chat-command-dropdown {
    border: 2px solid rgba(0, 191, 255, 0.3);
    border-radius: 20px 0 0 20px;
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 100%);
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    max-width: 150px;
    border-right: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px 12px;
    padding-right: 32px;
}

.chat-command-dropdown:hover {
    border-color: rgba(0, 191, 255, 0.6);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%);
    box-shadow: 0 2px 8px rgba(0, 191, 255, 0.2);
}

.chat-command-dropdown:focus {
    border-color: rgba(0, 191, 255, 0.8);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(248, 249, 250, 1) 100%);
}

/* Floating voice button */
.voice-btn-floating {
    position: fixed;
    bottom: 130px;
    right: 30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(0, 191, 255, 0.6);
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 20px rgba(33, 150, 243, 0.4);
    z-index: 1000;
    font-size: 1.5rem;
    line-height: 1;
}

.voice-btn-floating:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 10px 30px rgba(33, 150, 243, 0.6);
    border-color: rgba(0, 191, 255, 0.9);
}

.voice-btn-floating:active {
    transform: scale(0.9) translateY(0px);
    box-shadow: 0 2px 12px rgba(33, 150, 243, 0.3);
}

.voice-btn-floating.listening {
    animation: pulse 1.5s ease-in-out infinite;
    background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
    border-color: rgba(255, 87, 34, 0.8);
}

/* Mobile responsive for floating voice button */
@media (max-width: 768px) {
    .voice-btn-floating {
        bottom: 15px;
        right: 15px;
        width: 55px;
        height: 55px;
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .voice-btn-floating {
        bottom: 12px;
        right: 12px;
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }
}

.chat-input-wrapper {
    display: flex;
    align-items: stretch;
    background: #f8f9fa;
    border-radius: 25px;
    overflow: hidden;
    border: 2px solid rgba(0, 191, 255, 0.3);
    transition: border-color 0.3s ease;
}

.chat-input-wrapper:focus-within {
    border-color: rgba(0, 191, 255, 0.6);
    box-shadow: 0 0 0 3px rgba(0, 191, 255, 0.1);
}

.chat-input {
    flex: 1;
    border: none;
    padding: 12px 16px;
    background: transparent;
    outline: none;
    font-size: 0.95rem;
    color: #333;
}

.chat-input::placeholder {
    color: #999;
}

.chat-buttons {
    display: flex;
    align-items: center;
    padding-right: 4px;
    gap: 4px;
}

.chat-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    margin: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.chat-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.chat-btn:hover::before {
    left: 100%;
}

.btn-send {
    background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(76, 175, 80, 0.3);
}

.btn-send:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(76, 175, 80, 0.4);
}

.btn-voice {
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
}

.btn-voice:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
}

.btn-icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    display: inline-block;
    text-align: center;
    line-height: 18px;
    font-size: 14px;
}

/* Voice button container - prominently positioned to the right of chat input */
.voice-button-container {
    display: flex;
    justify-content: center;
    align-self: center;
    margin-left: 8px;
    margin-right: 8px;
    margin-bottom: 4px;
}

.voice-btn-large {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid rgba(0, 191, 255, 0.6);
    background: linear-gradient(135deg, #2196f3 0%, #1976d2 100%);
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(33, 150, 243, 0.5);
    position: relative;
    overflow: hidden;
    margin-left: auto;
}

.voice-btn-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.6s;
}

.voice-btn-large:hover::before {
    left: 100%;
}

.voice-btn-large:hover {
    transform: scale(1.15) translateY(-3px);
    box-shadow: 0 10px 30px rgba(33, 150, 243, 0.6);
    border-color: rgba(0, 191, 255, 0.9);
}

.voice-btn-large:active {
    transform: scale(0.9) translateY(0px);
    box-shadow: 0 2px 12px rgba(33, 150, 243, 0.3);
}

.voice-btn-large.listening {
    animation: pulse 1.5s ease-in-out infinite;
    background: linear-gradient(135deg, #ff5722 0%, #d84315 100%);
    border-color: rgba(255, 87, 34, 0.8);
}

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

.voice-icon {
    font-size: 1.8rem;
    line-height: 1;
    filter: brightness(0) invert(1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .main-container {
        position: static;
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        align-items: stretch;
        overflow: visible;
    }
    
    .top-panel {
        flex-direction: column;
        position: static;
        height: auto;
        min-height: unset;
        width: 100%;
        padding-top: 60px;
        overflow: visible;
    }

    .top-left-panel {
        flex-direction: column;
        gap: 10px;
        height: auto;
        width: 100%;
        min-width: 0;
        padding: 16px 6px 16px 6px;
        box-sizing: border-box;
        overflow-y: visible;
    }

    .top-right-panel {
        width: 100%;
        height: auto;
        padding: 10px 4px;
        box-sizing: border-box;
        gap: 10px;
    }
    
    .game-container {
        height: 220px;
        min-height: 180px;
        max-height: 40vh;
    }
    .bottom-panel {
        position: static;
        height: auto;
        min-height: 220px;
        flex-direction: column;
        width: 100%;
        overflow: visible;
    }
    .bottom-left-panel, .bottom-right-panel {
        padding: 8px 4px;
    }
    .bottom-left-panel {
        width: 35%;
        min-width: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 0;
    }
    .bottom-right-panel {
        width: 65%;
        min-width: 0;
        padding-top: 0;
    }

    /* Instructions container mobile adjustments */
    .instructions-container {
        width: 100%;
        padding: 10px;
        height: auto;
        min-height: 200px;
    }

    .instructions-panel {
        height: auto;
        min-height: 200px;
        max-height: 50vh;
        padding: 20px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .story-title {
        font-size: 1.2rem;
    }

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

    .instructions-title {
        font-size: 1.1rem;
    }

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

    /* Make command-chat-container take full width on mobile */
    .command-chat-container {
        width: 100%;
        flex-direction: column;
    }
    
    /* Commands panel mobile adjustments */
    .commands-panel {
        width: 100%;
        max-height: 50vh; /* Limit height to 50% of viewport */
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }
    
    /* Game container mobile adjustments */
    .game-container {
        width: 100%;
        max-width: 100%;
        height: 300px;
        min-height: 250px;
        max-height: 40vh;
    }
    
    .store-panel {
        flex: 1 1 auto;
        min-height: 0;
        max-width: 100%;
        width: 100%;
        margin: 0 auto 12px auto;
        max-height: 40vh; /* Add max height */
        overflow-y: auto;
        overflow-x: hidden;
        box-sizing: border-box;
        -webkit-overflow-scrolling: touch;
    }
    
    .store-items-grid {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        padding: 0 2px;
        overflow-y: visible; /* Changed from auto */
    }
    
    .chat-messages {
        max-height: 30vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bottom-button-panel {
        width: auto;
    }
    .store-panel,
    .store-items-grid,
    .chat-messages {
        overflow-y: auto;
        max-height: 40vh;
    }

    /* Chat input responsive adjustments */
    .chat-input-container {
        padding: 10px 12px;
        gap: 6px;
    }

    .chat-command-buttons {
        gap: 6px;
    }

    .chat-cmd-btn {
        padding: 6px 10px;
        font-size: 0.8rem;
        min-height: 32px;
    }

    .cmd-icon {
        font-size: 0.9rem;
    }

    .voice-btn-large {
        width: 48px;
        height: 48px;
    }

    .voice-icon {
        font-size: 1.3rem;
    }
}

@media (max-width: 480px) {
    .main-container {
        min-height: 100vh;
        height: auto;
        position: static;
        flex-direction: column;
        align-items: stretch;
        overflow: visible;
    }
    
    .top-panel {
        flex-direction: column;
        position: static;
        height: auto;
        min-height: unset;
        width: 100%;
        padding-top: 60px;
        overflow: visible;
    }
    
    /* Smaller screens get even more constrained heights */
    .commands-panel {
        max-height: 40vh;
    }
    
    .game-container {
        height: 250px;
        max-height: 35vh;
    }
    
    .store-panel {
        max-height: 35vh;
    }

    .top-left-panel {
        flex-direction: column;
        gap: 6px;
        height: auto;
    }

    /* Smaller screen chat input adjustments */
    .chat-input-container {
        padding: 8px 10px;
        gap: 4px;
    }

    .chat-command-buttons {
        gap: 4px;
    }

    .chat-cmd-btn {
        padding: 5px 8px;
        font-size: 0.75rem;
        min-height: 28px;
    }

    .cmd-icon {
        font-size: 0.8rem;
    }

    .voice-btn-large {
        width: 44px;
        height: 44px;
    }

    .voice-icon {
        font-size: 1.1rem;
    }

    .chat-input {
        padding: 10px 14px;
        font-size: 0.9rem;
    }

    .chat-btn {
        width: 32px;
        height: 32px;
    }

    .btn-icon {
        width: 16px;
        height: 16px;
        font-size: 12px;
    }
}

/* Reward Modal Styles */
.reward-modal-centered {
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.reward-modal-body {
    padding: 3rem 2rem 2rem 2rem;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.reward-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    animation: bounceIn 0.8s ease-out;
}

.reward-title {
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.reward-subtitle {
    font-size: 1.1rem;
    margin-bottom: 2rem;
    opacity: 0.9;
    line-height: 1.4;
}

.reward-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.reward-claim-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    min-width: 120px;
}

.reward-claim-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
    background: linear-gradient(135deg, #218838 0%, #17a2b8 100%);
}

.reward-continue-btn {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: bold;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    min-width: 120px;
}

.reward-continue-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.4);
    background: linear-gradient(135deg, #0056b3 0%, #5a0fc8 100%);
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 1;
        transform: scale(1.05);
    }
    70% {
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Reward modal animations */
.reward-modal-centered {
    animation: modalSlideIn 0.5s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-50px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Enhanced Reward Modal Styles */
.reward-modal-enhanced {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    color: white;
}

/* Visual Enhancement Placeholders */
/* Note: Visual effects like CCTV filters, destruction sequences, and lighting effects
   are handled by the Unreal Engine MCP integration, not the chat server CSS.
   The chat server focuses on UI modals and user interface elements. */

.reward-modal-body-enhanced {
    padding: 2.5rem 2rem;
    min-height: 500px;
}

.reward-header {
    margin-bottom: 2rem;
}

.reward-main-title {
    font-size: 2rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.reward-claim-section {
    margin-bottom: 2rem;
}

.reward-claim-main-btn {
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    border: none;
    padding: 15px 40px;
    border-radius: 25px;
    font-size: 1.2rem;
    font-weight: bold;
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.3);
    transition: all 0.3s ease;
}

.reward-claim-main-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(40, 167, 69, 0.4);
}

.rewards-table-container {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 15px;
    padding: 1.5rem;
    margin-bottom: 2rem;
    backdrop-filter: blur(10px);
}

.rewards-table-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    text-align: center;
}

.rewards-table {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.reward-row {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    padding: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.reward-name {
    font-size: 1.1rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
    color: #fff;
}

.reward-conditions {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.condition {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.condition-indicator {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
}

.condition-indicator:contains("✓") {
    background: #28a745;
    color: white;
}

.condition-indicator:contains("✗") {
    background: #dc3545;
    color: white;
}

.reward-note {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 2rem;
    text-align: center;
}

.reward-note p {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

.reward-play-again-btn {
    background: linear-gradient(135deg, #007bff 0%, #6610f2 100%);
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 1.1rem;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.3);
    transition: all 0.3s ease;
}

.reward-play-again-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

/* Responsive adjustments for reward modals */
@media (max-width: 768px) {
    .reward-modal-body {
        padding: 2rem 1.5rem 1.5rem 1.5rem;
        min-height: 250px;
    }

    .reward-icon {
        font-size: 3rem;
    }

    .reward-title {
        font-size: 1.5rem;
    }

    .reward-subtitle {
        font-size: 1rem;
    }

    .reward-actions {
        flex-direction: column;
        align-items: center;
    }

    .reward-claim-btn,
    .reward-continue-btn {
        width: 100%;
        max-width: 200px;
    }

    .reward-modal-body-enhanced {
        padding: 1.5rem 1rem;
        min-height: 400px;
    }

    .reward-main-title {
        font-size: 1.5rem;
    }

    .reward-claim-main-btn {
        padding: 12px 30px;
        font-size: 1.1rem;
    }

    .reward-play-again-btn {
        padding: 10px 25px;
        font-size: 1rem;
    }
}