/* MUD Game Styles */
body {
    font-family: 'VT323', monospace;
    background-color: #0d0d0d;
    color: #00ff41;
}

#terminal-output {
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
    max-width: 100%;
}

#terminal-output::-webkit-scrollbar, #admin-panel::-webkit-scrollbar {
    width: 8px;
}

#terminal-output::-webkit-scrollbar-track, #admin-panel::-webkit-scrollbar-track {
    background: #1a1a1a;
}

#terminal-output::-webkit-scrollbar-thumb, #admin-panel::-webkit-scrollbar-thumb {
    background-color: #00ff41;
    border-radius: 4px;
}

.text-shadow {
    text-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41;
}

#command-input {
    background: transparent;
    border: none;
    outline: none;
    color: #00ff41;
    width: 100%;
    font-family: 'VT323', monospace;
}

.glow {
    box-shadow: 0 0 5px #00ff41, 0 0 10px #00ff41, 0 0 15px #00ff41;
}

.admin-input, .player-edit-input, .auth-input {
    background-color: #1a1a1a;
    border: 1px solid #00ff41;
    color: #00ff41;
    padding: 4px 8px;
    border-radius: 4px;
    width: 100%;
    font-size: 16px; /* Prevents iOS zoom on input focus */
}

/* Better touch targets for mobile links */
#auth-modal a {
    padding: 0.5rem;
    margin: -0.5rem;
    display: inline-block;
    -webkit-tap-highlight-color: rgba(0, 255, 65, 0.2);
}

.gemini-btn {
    background-color: #8A2BE2; /* A magical purple */
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid #c398ff;
}

.admin-tab {
    border-bottom: 2px solid transparent;
}

.admin-tab.active {
    border-bottom-color: #facc15; /* yellow-400 */
    color: #facc15;
}

.combat-log { color: #ff6347; } /* Tomato red for combat */
.loot-log { color: #ffd700; } /* Gold for loot */

/* Message Type Colors - Enhanced for readability */
.game { color: #88dd88; } /* Soft green for general game text */
.system { color: #00d4ff; } /* Bright cyan for system messages */
.error { color: #ff4444; } /* Bright red for errors */
.success { color: #44ff44; } /* Bright green for success */
.npc { color: #ffaa44; } /* Orange for NPC speech */
.chat { color: #ff88ff; } /* Pink for player speech */
.action { color: #ffff88; } /* Yellow for actions/emotes */
.party { color: #88ddff; } /* Light blue for party chat */
.combat { color: #ff6666; } /* Red for combat actions */

/* Player name highlighting */
.player-name { 
    color: #00ffff; /* Cyan */
    font-weight: bold;
    text-shadow: 0 0 3px rgba(0, 255, 255, 0.5);
}

/* Speech/dialogue highlighting */
.speech {
    color: #ffffff; /* White */
    font-style: italic;
}

/* Item names */
.item-name {
    color: #ffd700; /* Gold */
    font-weight: bold;
}

/* NPC names */
.npc-name {
    color: #ffaa44; /* Orange */
    font-weight: bold;
    text-shadow: 0 0 3px rgba(255, 170, 68, 0.5);
}

/* Guild chat */
.guild {
    color: #cc99ff; /* Light purple */
}

/* Room/location names */
.location-name {
    color: #66ff99; /* Mint green */
    font-weight: bold;
    text-shadow: 0 0 3px rgba(102, 255, 153, 0.5);
}

/* Command input echo */
.command-echo {
    color: #aaaaaa; /* Gray */
    font-style: italic;
}

/* Critical hit styling */
.critical-damage {
    color: #ff0000;
    font-weight: bold;
    text-shadow: 0 0 5px #ff0000, 0 0 10px #ff0000;
}

.critical-text {
    color: #ffff00;
    font-weight: bold;
    text-shadow: 0 0 5px #ffff00;
    animation: pulse-critical 0.5s ease-in-out;
}

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

/* Prevent text overflow in admin panel */
#admin-panel {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#admin-panel textarea,
#admin-panel input[type="text"] {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Ensure all editor panels don't overflow */
.editor-panel {
    max-width: 100%;
    overflow-x: auto;
}

/* Container fixes */
#app-container {
    display: flex;
    overflow: hidden;
}

#app-container #terminal-output {
    flex: 1;
    min-height: 0;
}

/* ========== MOBILE RESPONSIVE STYLES ========== */

/* Mobile: Reduce padding and margins */
@media (max-width: 768px) {
    body {
        padding: 0.5rem !important;
    }
    
    /* Game container adjustments */
    #app-container {
        max-width: 100% !important;
        height: calc(100vh - 80px) !important;
        padding: 0.75rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    /* Header adjustments */
    #header h1 {
        font-size: 1.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    #user-info {
        font-size: 0.75rem !important;
    }
    
    /* Terminal output */
    #terminal-output {
        padding: 0.5rem !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
    }
    
    /* Command input */
    #command-input {
        font-size: 1rem !important;
    }
    
    .flex.items-center.border-t-2 span {
        font-size: 1.25rem !important;
    }
    
    /* Admin panel */
    #admin-panel {
        max-width: 100% !important;
        height: calc(100vh - 80px) !important;
        padding: 0.5rem !important;
    }
    
    /* Admin tabs - make scrollable horizontally on mobile */
    #admin-panel > div:first-child {
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap !important;
        gap: 0.25rem !important;
        padding-bottom: 0.5rem;
        margin-bottom: 0.5rem !important;
        -webkit-overflow-scrolling: touch;
    }
    
    .admin-tab {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        white-space: nowrap;
        flex-shrink: 0;
    }
    
    /* Admin content */
    #admin-content {
        font-size: 0.875rem;
    }
    
    /* Admin inputs */
    .admin-input, .player-edit-input, .auth-input {
        font-size: 0.875rem !important;
        padding: 0.5rem !important;
    }
    
    /* Buttons */
    button {
        font-size: 0.875rem !important;
        padding: 0.5rem 0.75rem !important;
    }
    
    /* Logout and admin toggle buttons */
    .w-full.max-w-4xl.flex.gap-2 {
        max-width: 100% !important;
        gap: 0.5rem !important;
        padding: 0 0.5rem;
    }
    
    /* Setup panel grid */
    #setup-panel .grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Editor panels */
    .editor-panel h2 {
        font-size: 1.25rem !important;
    }
    
    /* Selectors and inputs in editors */
    select {
        font-size: 0.875rem !important;
    }
    
    textarea {
        font-size: 0.875rem !important;
    }
    
    /* Settings panel */
    #settings-panel .border {
        padding: 1rem !important;
    }
    
    #settings-panel h3 {
        font-size: 1.125rem !important;
    }
    
    /* Map visualization */
    #map-network {
        height: 400px !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    #header h1 {
        font-size: 1.25rem !important;
    }
    
    #terminal-output {
        font-size: 0.8rem !important;
    }
    
    .admin-tab {
        padding: 0.4rem 0.6rem !important;
        font-size: 0.75rem !important;
    }
    
    /* Make admin panel tabs even more compact */
    #admin-panel > div:first-child {
        gap: 0.125rem !important;
    }
    
    /* Reduce map height further */
    #map-network {
        height: 300px !important;
    }
}

/* Tablet landscape - optimize for medium screens */
@media (min-width: 769px) and (max-width: 1024px) {
    #app-container, #admin-panel {
        max-width: 90% !important;
    }
    
    .admin-tab {
        font-size: 1rem !important;
        padding: 0.5rem 1rem !important;
    }
}

/* Improve touch targets for mobile */
@media (hover: none) and (pointer: coarse) {
    button, input, select, textarea {
        min-height: 44px; /* Apple's recommended touch target size */
    }
    
    .admin-tab {
        min-height: 44px;
    }
}

/* Prevent zoom on input focus for iOS */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important; /* Prevents iOS zoom */
    }
}

/* Smooth scrolling for touch devices */
* {
    -webkit-overflow-scrolling: touch;
}

/* Optimize scrollbar for mobile */
@media (max-width: 768px) {
    #terminal-output::-webkit-scrollbar,
    #admin-panel::-webkit-scrollbar,
    #admin-content::-webkit-scrollbar {
        width: 4px;
    }
}

/* Handle mobile keyboard overlap */
@media (max-width: 768px) {
    body {
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    html {
        height: -webkit-fill-available;
    }
}

/* Improve text selection on mobile */
::selection {
    background-color: #00ff4180;
    color: white;
}

/* Hide horizontal scrollbar but keep functionality */
.overflow-x-auto::-webkit-scrollbar {
    height: 6px;
}

.overflow-x-auto::-webkit-scrollbar-track {
    background: transparent;
}

.overflow-x-auto::-webkit-scrollbar-thumb {
    background-color: #00ff4150;
    border-radius: 3px;
}

.overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background-color: #00ff4180;
}