/* === MUD GAME TERMINAL === */
#mud-game { display: flex; gap: 12px; padding: 8px 0; }
#mud-terminal { flex: 1; display: flex; flex-direction: column; background: #2b2d31; border: 1px solid #3f4147; border-radius: 8px; overflow: hidden; }
#mud-header { background: #c0392b; padding: 10px 16px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; color: #fff; }
.mud-title { display: flex; align-items: center; gap: 8px; }
.mud-room-indicator { font-size: 12px; opacity: 0.8; }
#mud-output { flex: 1 1 0; overflow-y: auto; padding: 12px 16px; background: #1a1a2e; font-family: "Consolas","Monaco","Courier New",monospace; font-size: 14px; line-height: 1.6; color: #c0c0c0; min-height: 0; }
#mud-output::-webkit-scrollbar { width: 6px; }
#mud-output::-webkit-scrollbar-track { background: #1a1a2e; }
#mud-output::-webkit-scrollbar-thumb { background: #3f4147; border-radius: 3px; }
.mud-line { margin: 2px 0; word-wrap: break-word; }
.mud-input-echo { color: #57F287; }
.mud-error { color: #ED4245; }
.mud-event { color: #949ba4; font-style: italic; }
.mud-say { color: #f2f3f5; }
.mud-yell { color: #f2f3f5; font-weight: 700; font-size: 15px; }
.mud-whisper { color: #b5bac1; font-style: italic; }
.mud-me { color: #e74c3c; font-style: italic; }
.mud-it { color: #949ba4; font-style: italic; }
.mud-ooc { color: #72767d; }
.mud-roll { color: #FEE75C; }
.mud-loot { color: #FEE75C; }
.mud-system { color: #949ba4; }
.mud-radio { color: #5865F2; }
.mud-vendor-npc { color: #FEE75C; font-style: italic; }
.mud-broadcast { color: #ED4245; font-weight: 700; border-left: 3px solid #ED4245; padding-left: 8px; }
.mud-quest { color: #FEE75C; }
.mud-lore-text { color: #949ba4; font-style: italic; border-left: 3px solid #72767d; padding-left: 8px; }
.mud-terminal-item { color: #5865F2; font-style: italic; }
.mud-board-notice { color: #FEE75C; font-style: italic; }
.mud-lockdown-indicator { color: #ED4245; font-weight: 700; animation: mud-pulse 2s infinite; }
@keyframes mud-pulse { 0%,100%{opacity:1}50%{opacity:0.5} }
.mud-thumper-active { color: #57F287; font-style: italic; }
.mud-thumper-inactive { color: #FFA500; font-style: italic; }
.mud-event-banner { background: rgba(237,66,69,0.1); border: 1px solid #ED4245; border-radius: 4px; padding: 6px 10px; margin: 4px 0; }
.mud-quest-badge { display: inline-block; font-size: 10px; padding: 1px 5px; border-radius: 3px; font-weight: 700; margin-right: 4px; }
.mud-quest-explore { background: #5865F2; color: #fff; }
.mud-quest-gather { background: #57F287; color: #1e1f22; }
.mud-quest-progress { color: #949ba4; font-size: 12px; margin-left: 4px; }
.mud-quest-item { padding: 3px 0; font-size: 13px; }
.mud-quest-count { background: #ED4245; color: #fff; border-radius: 8px; font-size: 10px; padding: 1px 5px; margin-left: 4px; }
.mud-property-info { color: #57F287; font-style: italic; }
.mud-token-val { color: #FEE75C !important; font-weight: 600; }
.mud-room-name { color: #e74c3c; font-weight: 700; font-size: 16px; }
.mud-room-desc { color: #b0b0b0; }
.mud-room-exits { color: #949ba4; }
.mud-room-items { color: #FEE75C; }
.mud-room-players { color: #57F287; }
.mud-desc { color: #b5bac1; font-style: italic; }
.mud-faction { color: #949ba4; font-size: 13px; }
.mud-divider { border-top: 1px solid #3f4147; margin: 8px 0; }
#mud-input-area { padding: 10px 16px; background: #2b2d31; border-top: 1px solid #3f4147; display: flex; align-items: center; gap: 8px; }
.mud-prompt { color: #c0392b; font-family: "Consolas",monospace; font-weight: 700; font-size: 16px; }
.mud-input { flex: 1; background: #1e1f22; color: #f2f3f5; border: 1px solid #3f4147; border-radius: 4px; padding: 9px 14px; font-family: "Consolas","Monaco","Courier New",monospace; font-size: 14px; outline: none; transition: border-color 0.2s; }
.mud-input:focus { border-color: #c0392b; }
.mud-input::placeholder { color: #949ba4; }

/* === DIRECTION BAR (below command input, inside terminal) === */
#mud-direction-bar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px 16px 10px; background: #2b2d31; border-top: 1px solid #3f4147; }
#mud-direction-bar:empty { display: none; }
.mud-exit-btn { background: #1e1f22; border: 1px solid #3f4147; border-radius: 4px; color: #b5bac1; padding: 6px 10px; font-size: 11px; cursor: pointer; text-align: center; transition: background 0.1s, color 0.1s; font-family: "Consolas",monospace; font-weight: 600; min-width: 36px; }
.mud-exit-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.mud-exit-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.mud-exit-btn:disabled:hover { background: #1e1f22; color: #b5bac1; border-color: #3f4147; }

/* === SIDEBAR === */
#mud-sidebar { width: 260px; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.mud-panel { background: #2b2d31; border: 1px solid #3f4147; border-radius: 8px; overflow: hidden; }
.mud-panel-header { padding: 8px 14px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: #949ba4; border-bottom: 1px solid #3f4147; }
.mud-panel-body { padding: 4px 0; }
.mud-stat-row { display: flex; align-items: center; gap: 8px; padding: 6px 14px; font-size: 12px; color: #b5bac1; }
.mud-stat-label { min-width: 48px; }
.mud-stat-val { min-width: 50px; text-align: right; font-size: 11px; }
.mud-bar { flex: 1; height: 8px; background: #1e1f22; border-radius: 4px; overflow: hidden; }
.mud-bar-fill { height: 100%; border-radius: 4px; transition: width 0.3s ease; }
.mud-bar-fill.mud-hp { background: #57F287; }
.mud-bar-fill.mud-hunger { background: #FEE75C; }
.mud-bar-fill.mud-exp { background: linear-gradient(90deg, #5865F2, #7289DA); }
.mud-title-row .mud-title-val { color: #7289DA; font-style: italic; font-size: 12px; }
.mud-level-tag { color: #949ba4; font-size: 11px; margin-left: 4px; }
.mud-level-up { color: #FEE75C; font-weight: bold; }
@keyframes mud-levelup-flash { 0% { box-shadow: 0 0 0 rgba(88,101,242,0); } 50% { box-shadow: 0 0 20px rgba(88,101,242,0.5); } 100% { box-shadow: 0 0 0 rgba(88,101,242,0); } }
.mud-levelup-glow { animation: mud-levelup-flash 1.5s ease-out; }
.mud-inv-item { padding: 5px 14px; font-size: 12px; color: #b5bac1; cursor: default; transition: background 0.1s; display: flex; align-items: center; gap: 6px; }
.mud-inv-item:hover { background: #35373c; }
.mud-inv-icon { width: 20px; height: 20px; object-fit: contain; flex-shrink: 0; filter: brightness(0.85); }
.mud-inv-item:hover .mud-inv-icon { filter: brightness(1); }
.mud-qty { color: #949ba4; }
.mud-inv-empty { padding: 12px 14px; color: #72767d; font-size: 12px; text-align: center; }
.mud-player-item { padding: 5px 14px; font-size: 12px; color: #b5bac1; display: flex; align-items: center; gap: 4px; }
.mud-faction-icon { width: 18px; height: 18px; object-fit: contain; flex-shrink: 0; filter: brightness(0.85); }
.mud-player-item:hover .mud-faction-icon { filter: brightness(1); }
.mud-faction-tag { color: #72767d; font-size: 11px; }
.mud-npc-item { border-left: 2px solid #ED4245; }
.mud-npc-tag { color: #ED4245; font-size: 11px; font-weight: 600; }
.mud-npc-hp { color: #949ba4; font-size: 11px; }
.mud-idle { color: #72767d; font-size: 11px; }

/* === ACTIONS PANEL === */
#mud-actions-panel { overflow: visible; }
.mud-actions { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px !important; }
.mud-action-wrap { position: relative; }
.mud-action-btn { background: #1e1f22; border: 1px solid #3f4147; border-radius: 12px; color: #b5bac1; padding: 5px 12px; font-size: 11px; cursor: pointer; text-align: center; transition: background 0.15s, color 0.15s, border-color 0.15s; font-family: inherit; font-weight: 600; white-space: nowrap; }
.mud-action-btn:hover { background: #c0392b; color: #fff; border-color: #c0392b; }
.mud-action-arrow { font-size: 9px; margin-left: 2px; opacity: 0.7; }
.mud-action-has-dropdown { padding-right: 8px; }

/* Action dropdown */
.mud-action-dropdown { display: none; position: absolute; top: 100%; left: 0; margin-top: 4px; background: #1e1f22; border: 1px solid #3f4147; border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 100; min-width: 120px; max-height: 160px; overflow-y: auto; }
.mud-action-dropdown.mud-dd-open { display: block; }
.mud-action-dd-item { padding: 7px 12px; font-size: 12px; color: #b5bac1; cursor: pointer; transition: background 0.1s; white-space: nowrap; }
.mud-action-dd-item:hover { background: #35373c; color: #f2f3f5; }
.mud-action-dd-item:first-child { border-radius: 5px 5px 0 0; }
.mud-action-dd-item:last-child { border-radius: 0 0 5px 5px; }
.mud-action-dropdown::-webkit-scrollbar { width: 4px; }
.mud-action-dropdown::-webkit-scrollbar-track { background: #1e1f22; }
.mud-action-dropdown::-webkit-scrollbar-thumb { background: #3f4147; border-radius: 2px; }

/* === COMBAT STATUS EFFECTS (Phase 4) === */
.mud-status-effects { padding: 4px 14px; }
.mud-status-effect { display: inline-block; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; margin-right: 6px; margin-top: 4px; }
.mud-status-stunned { background: #5865F2; color: #fff; }
.mud-status-defending { background: #57F287; color: #1a1a2e; }
.mud-status-dead { background: #ED4245; color: #fff; }

/* === CHARACTER CREATION === */
.mud-create-panel { display: flex; justify-content: center; align-items: center; min-height: calc(100vh - 120px); width: 100%; }
.mud-create-inner { background: #2b2d31; border: 1px solid #3f4147; border-radius: 12px; padding: 40px; max-width: 480px; width: 100%; text-align: center; }
.mud-create-inner h2 { color: #f2f3f5; font-size: 24px; margin: 0 0 12px; }
.mud-create-lore { color: #b5bac1; font-size: 14px; line-height: 1.6; margin: 0 0 24px; font-style: italic; }
.mud-create-form { text-align: left; }
.mud-create-form label { display: block; color: #b5bac1; font-size: 12px; font-weight: 600; text-transform: uppercase; margin: 16px 0 6px; }
.mud-hint { font-weight: 400; text-transform: none; color: #72767d; }
.mud-create-form input, .mud-create-form textarea { width: 100%; background: #1e1f22; color: #f2f3f5; border: 1px solid #3f4147; border-radius: 4px; padding: 10px 14px; font-size: 14px; outline: none; font-family: inherit; box-sizing: border-box; transition: border-color 0.2s; }
.mud-create-form input:focus, .mud-create-form textarea:focus { border-color: #c0392b; }
.mud-create-note { color: #72767d; font-size: 12px; margin: 16px 0; }
.mud-btn { display: inline-block; background: #c0392b; color: #fff; border: none; border-radius: 4px; padding: 12px 24px; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; font-family: inherit; text-decoration: none; }
.mud-btn:hover { background: #e74c3c; }
.mud-create-error { color: #ED4245; font-size: 13px; margin-top: 12px; min-height: 20px; }

/* === MAP COMMAND === */
.mud-map-pre { font-family: "Consolas","Monaco","Courier New",monospace; font-size: 13px; line-height: 1.4; color: #949ba4; white-space: pre; overflow-x: auto; padding: 8px 0; max-width: 100%; }
.mud-map-title { color: #c0392b; font-weight: 700; }
.mud-map-you { color: #57F287; font-weight: 700; }
.mud-map-hidden { color: #4e5058; }
.mud-map-restricted { color: #5865F2; }
.mud-map-city17 { color: #b5bac1; }
.mud-map-canals { color: #3498db; }
.mud-map-nexus { color: #5865F2; }
.mud-map-resistance { color: #e67e22; }
.mud-map-residential { color: #95a5a6; }
.mud-map-industrial { color: #FEE75C; }
.mud-map-ravenholm { color: #ED4245; }
.mud-map-highway17 { color: #d4a574; }
.mud-map-underground { color: #95a5a6; }

/* === MOBILE === */
@media (max-width: 1100px) {
    #mud-game { flex-direction: column; }
    #mud-terminal { min-height: 50vh; }
    #mud-game > .mud-panel { width: 100%; }
    #mud-sidebar { width: 100%; min-width: unset; flex-direction: row; flex-wrap: wrap; gap: 8px; }
    .mud-panel { flex: 1 1 calc(50% - 4px); min-width: 180px; }
}
@media (max-width: 768px) {
    .mud-map-pre { font-size: 11px; }
    #mud-terminal { min-height: 45vh; }
    #mud-output { font-size: 13px; padding: 8px 10px; }
    .mud-input { font-size: 13px; padding: 7px 10px; }
    #mud-input-area { padding: 8px 10px; }
    #mud-direction-bar { padding: 6px 10px 8px; }
    #mud-header { padding: 8px 12px; font-size: 13px; }
    .mud-room-indicator { font-size: 11px; }
    #mud-sidebar { flex-direction: column; }
    .mud-panel { flex: 1 1 100%; }
    .mud-room-name { font-size: 14px; }
    .mud-create-inner { padding: 24px; margin: 16px; }
    .mud-exit-btn { padding: 8px 12px; font-size: 12px; min-width: 40px; }
    .mud-action-btn { padding: 7px 14px; font-size: 12px; }
}
@media (max-width: 480px) {
    .mud-map-pre { font-size: 10px; }
    #mud-terminal { min-height: 40vh; }
    #mud-output { font-size: 12px; padding: 6px 8px; }
    .mud-input { font-size: 13px; }
    #mud-input-area { padding: 6px 8px; gap: 6px; }
    #mud-direction-bar { padding: 4px 8px 6px; }
    #mud-header { padding: 6px 10px; font-size: 12px; }
    .mud-room-indicator { display: none; }
    .mud-create-inner { padding: 16px; }
    .mud-exit-btn { padding: 10px 14px; font-size: 13px; min-width: 44px; }
    .mud-action-btn { padding: 9px 16px; font-size: 13px; }
}
/* === SPECTATOR MODE === */
#mud-spectator-cta { background: linear-gradient(135deg, #c0392b 0%, #96281b 100%); padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; }
.mud-cta-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.mud-cta-text { color: #fff; font-size: 14px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.mud-cta-buttons { display: flex; gap: 8px; }
.mud-btn-cta { padding: 6px 16px !important; font-size: 13px !important; background: rgba(255,255,255,0.15) !important; color: #fff !important; border: 1px solid rgba(255,255,255,0.3) !important; border-radius: 4px !important; text-decoration: none; transition: background 0.2s; }
.mud-btn-cta:hover { background: rgba(255,255,255,0.25) !important; }
.mud-btn-register { background: #57F287 !important; color: #1e1f22 !important; border-color: #57F287 !important; font-weight: 600; }
.mud-btn-register:hover { background: #45d975 !important; }
.mud-spectator-input { opacity: 0.5; }
.mud-spectator-input .mud-input { cursor: not-allowed; }
#mud-info-panel .mud-panel-body { font-size: 13px; line-height: 1.5; }
.mud-info-text { color: #b5bac1; margin: 0 0 8px 0; }
.mud-info-features { color: #949ba4; margin: 0; padding: 0 0 0 18px; font-size: 12px; }
.mud-info-features li { margin: 2px 0; }
@media (max-width: 768px) {
    .mud-cta-inner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    #mud-spectator-cta { padding: 8px 12px; }
    .mud-cta-text { font-size: 12px; }
    .mud-btn-cta { padding: 5px 12px !important; font-size: 12px !important; }
}