/**
 * styles/main.css
 * Estilos del HUD y UI del juego Argentum Online Web
 * Tema: Premium Medieval (Gold/Brown)
 */

/* ============================================================================
   VARIABLES
   ============================================================================ */
:root {
    --bg-dark: #050505;
    --bg-panel: #14100b;
    /* Muy oscuro marrón */
    --bg-panel-light: #2a221a;
    --border-copper: #8b5a2b;
    --border-gold: #c5a059;
    /* Dorado apagado premium */
    --border-gold-bright: #ffd700;
    --text-primary: #e8dcc8;
    --text-gold: #ffcc00;
    --text-orange: #ff8c00;
    --exp-color: #d4af37;
}

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

*:focus {
    outline: none !important;
}

input[type="text"]:focus, 
input[type="email"]:focus, 
input[type="password"]:focus, 
textarea:focus {
    outline: none !important;
    border-color: var(--border-gold) !important;
}

body {
    background-color: var(--bg-dark);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    color: var(--text-primary);
    overflow: hidden;
    font-size: 11px;
}

/* SCREEN */
.screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screen-hidden {
    display: none !important;
}

/* LOADING */
#screen-loading {
    background: #000;
    z-index: 2000;
}

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

.loading-logo h1 {
    font-family: serif;
    font-size: 36px;
    color: var(--text-gold);
    margin-bottom: 10px;
}

.loading-bar {
    width: 300px;
    height: 10px;
    border: 1px solid var(--border-copper);
    margin: 0 auto;
}

.loading-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--text-gold);
    transition: width 0.2s;
}

.loading-text {
    margin-top: 10px;
    color: #666;
}

/* GAME LAYOUT */
#screen-game {
    background: #000;
    align-items: center;
}

.game-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.game-layout {
    display: flex;
    flex-direction: row;
    width: auto;
    border: 3px solid var(--border-copper);
    border-radius: 4px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
    background: #000;
    position: relative;
}

/* ============================================================================
   MODALES - Posicionados dentro del game-layout
   ============================================================================ */
.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Options modal needs higher z-index to appear above pause menu */
#options-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
}

.modal-window {
    background: linear-gradient(135deg, #1a1510 0%, #0d0a07 100%);
    border: 2px solid var(--border-gold);
    border-radius: 6px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.05);
    min-width: 280px;
    max-width: 90%;
    max-height: 90%;
    overflow: hidden;
}

.modal-small {
    min-width: 220px;
    max-width: 320px;
}

.modal-wide {
    min-width: 400px;
    max-width: 500px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(to bottom, #2a221a, #1a1510);
    border-bottom: 1px solid var(--border-copper);
}

#quests-modal .modal-content {
    padding: 12px;
}

.quests-layout {
    display: flex;
    gap: 12px;
    min-height: 420px;
}

.quests-list {
    flex: 0 0 240px;
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid var(--border-copper);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    padding: 8px;
}

.quests-list-item {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px;
    border: 1px solid #3d2e1e;
    border-radius: 6px;
    background: rgba(26, 21, 16, 0.8);
    cursor: pointer;
    margin-bottom: 6px;
}

.quests-list-item-selected {
    border-color: var(--border-gold);
    box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.35);
}

.quests-list-title {
    color: #f0e6d2;
    font-size: 12px;
    font-weight: 700;
}

.quests-list-status {
    color: #aaa;
    font-size: 11px;
    white-space: nowrap;
}

.quests-detail-wrap {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.quests-detail {
    flex: 1 1 auto;
    overflow-y: auto;
    border: 1px solid var(--border-copper);
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.25);
    padding: 10px;
}

.quests-detail h3 {
    color: var(--text-gold);
    margin-bottom: 8px;
    font-size: 14px;
}

.quests-detail h4 {
    color: var(--text-gold);
    margin-top: 10px;
    margin-bottom: 6px;
    font-size: 12px;
}

.quests-desc {
    color: #d4c8b0;
    font-size: 12px;
    line-height: 1.35;
}

.quests-meta {
    color: #aaa;
    font-size: 11px;
    margin-top: 6px;
}

.quests-progress-list {
    padding-left: 16px;
    color: #d4c8b0;
    font-size: 12px;
}

/* LEFT COLUMN */
.game-column-left {
    display: flex;
    flex-direction: column;
    width: 800px;
}

/* CONSOLE */
.console-panel {
    height: 180px;
    width: 100%;
    background: var(--bg-panel);
    border-bottom: 2px solid var(--border-copper);
    display: flex;
    flex-direction: column;
}

.console-history {
    flex: 1;
    overflow-y: scroll;
    padding: 6px;
    margin: 4px;
    border: 1px solid #3d2e1e;
    background: #080604;
    font-family: 'Consolas', monospace;
    font-size: 11px;
    color: #eec;
    text-shadow: 1px 1px 0 #000;
}

.console-history::-webkit-scrollbar {
    width: 6px;
}

.console-history::-webkit-scrollbar-thumb {
    background: var(--border-copper);
    border-radius: 3px;
}

.console-line {
    padding: 1px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}

.console-line.msg-system {
    color: #aaa;
}

.console-line.msg-info {
    color: #ffcc99; /* AO FONTTYPE_INFO */
}

.console-line.msg-local {
    color: #fff;
}

.console-line.msg-global {
    color: #ffcc00;
}

.console-line.msg-private {
    color: #c090ff;
    font-style: italic;
}

.console-line.msg-clan {
    color: #6ec8ff;
}

.console-line.msg-chat-global {
    color: #ffcc00;
}

.console-line.msg-chat-local {
    color: #fff;
}

.console-line.msg-combat {
    color: #ff6b6b;
    font-weight: bold;
}

.console-line.msg-danger {
    color: #ff4444;
    font-weight: bold;
    background: rgba(255, 0, 0, 0.1);
}

.console-line.msg-warning {
    color: #ffa500;
}

.console-line.msg-success {
    color: #4CAF50;
}

.console-line.msg-exp {
    color: #4CAF50;
    font-weight: bold;
}

.console-line.msg-error {
    color: #f44336;
}

.console-input-row {
    height: 26px;
    display: flex;
    border-top: 1px solid var(--border-copper);
    padding: 2px;
    gap: 2px;
    align-items: stretch;
}

.console-chat-mode {
    flex: 0 0 78px;
    order: 2;
    background: #120e0a;
    border: 1px solid #333;
    color: var(--text-gold);
    font-size: 10px;
    padding: 0 2px;
    cursor: pointer;
}

.console-whisper-target {
    flex: 0 0 70px;
    order: 1;
    background: #000;
    border: 1px solid #333;
    color: var(--text-gold);
    padding: 0 4px;
    font-family: 'Consolas', monospace;
    font-size: 10px;
}

.console-whisper-target[hidden] {
    display: none !important;
}

.console-input-row input#console-input {
    flex: 1;
    order: 0;
    background: #000;
    border: 1px solid #333;
    color: var(--text-gold);
    padding: 0 6px;
    font-family: 'Consolas', monospace;
    min-width: 0;
}

.console-input-row input {
    flex: 1;
    background: #000;
    border: 1px solid #333;
    color: var(--text-gold);
    padding: 0 6px;
    font-family: 'Consolas', monospace;
}

.console-input-row button {
    order: 3;
    background: linear-gradient(to bottom, #3a2e22, #1a1510);
    border: 1px solid var(--border-copper);
    color: #ccc;
    cursor: pointer;
    font-size: 10px;
    padding: 0 12px;
    margin-left: 2px;
}

.console-input-row button:hover {
    border-color: var(--border-gold);
    color: var(--text-gold);
}

/* VIEWPORT */
.game-viewport {
    width: 800px;
    height: 600px;
    position: relative;
    background: #000;
}

#game-canvas {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* RIGHT COLUMN (SIDEBAR) */
.game-column-right {
    width: 220px;
    background: var(--bg-panel);
    border-left: 2px solid var(--border-copper);
    display: flex;
    flex-direction: column;
    height: 780px;
}

/* MINIMAP SECTION */
.minimap-section {
    border-bottom: 2px solid var(--border-copper);
    background: var(--bg-panel);
}

.minimap-map-name,
.zone-map-label {
    text-align: center;
    font-size: 11px;
    font-weight: bold;
    color: var(--text-gold);
    padding: 4px;
    background: transparent;
    border-bottom: 1px solid var(--border-copper);
    text-transform: uppercase;
    letter-spacing: 1px;
}

#hud-map-name.zone-map-label {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 4px 4px;
}

#hud-map-name.zone-map-label.is-safe {
    color: #4caf50;
}

#hud-map-name.zone-map-label.is-unsafe {
    color: #f44336;
}

.minimap-panel {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 4px;
    position: relative;
}

#minimap-canvas {
    width: 150px;
    height: 120px;
    border: 1px solid var(--border-gold);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    image-rendering: pixelated;
    background: #000;
}

.minimap-coords {
    position: absolute;
    bottom: 2px;
    right: 6px;
    font-size: 9px;
    color: #888;
    background: rgba(0,0,0,0.7);
    padding: 1px 4px;
    border-radius: 2px;
}

/* CHAR INFO */
.sidebar-char-info {
    padding: 8px;
    border-bottom: 1px solid var(--border-copper);
    text-align: center;
    background: linear-gradient(to bottom, #1f1a15, #14100b);
}

.char-name {
    font-weight: bold;
    color: var(--text-gold);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.char-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 10px;
    color: #aaa;
    margin-bottom: 2px;
    flex-wrap: wrap;
    width: 100%;
}

#hud-char-meta-text {
    text-align: center;
}

.hud-skill-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border-radius: 3px;
    border: 1px solid #4caf50;
    background: linear-gradient(180deg, #2e7d32, #1b5e20);
    color: #b9f6ca;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 8px rgba(76, 175, 80, 0.45);
    animation: hud-skill-plus-pulse 1.6s ease-in-out infinite;
}

.hud-skill-plus:hover {
    border-color: #81c784;
    color: #fff;
    background: linear-gradient(180deg, #43a047, #2e7d32);
}

.hud-skill-plus[hidden] {
    display: none !important;
}

@keyframes hud-skill-plus-pulse {
    0%, 100% { box-shadow: 0 0 4px rgba(76, 175, 80, 0.35); transform: scale(1); }
    50% { box-shadow: 0 0 10px rgba(76, 175, 80, 0.75); transform: scale(1.08); }
}

/* EXP BAR */
.exp-bar-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 4px;
    width: 100%;
}

.exp-label {
    font-size: 9px;
    font-weight: bold;
    color: var(--text-gold);
    width: 22px;
    flex: 0 0 auto;
}

.exp-bar-track {
    flex: 1 1 auto;
    max-width: 140px;
    height: 8px;
    background: #000;
    border: 1px solid #444;
    border-radius: 2px;
    overflow: hidden;
}

.exp-bar-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(to right, #b8860b, #ffd700);
}

.exp-tooltip {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 6px);
    transform: translateX(-50%) translateY(2px);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: rgba(12, 10, 8, 0.96);
    color: #ffd700;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.12s ease, visibility 0.12s ease, transform 0.12s ease;
    z-index: 40;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

.exp-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border: 5px solid transparent;
    border-top-color: rgba(212, 175, 55, 0.55);
}

.exp-bar-container:hover .exp-tooltip,
.exp-bar-container:focus-within .exp-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* TABS */
.sidebar-tabs {
    display: flex;
    border-bottom: 1px solid var(--border-gold);
    margin-top: 4px;
}

.sidebar-tab {
    flex: 1;
    background: #222;
    border: 1px solid #444;
    color: #888;
    padding: 8px 0;
    font-size: 11px;
    cursor: pointer;
    font-weight: bold;
    text-align: center;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    margin: 0 2px;
}

.sidebar-tab-active {
    background: linear-gradient(to bottom, #c5a059, #8b5a2b);
    color: #111;
    border-color: var(--border-gold);
}

.sidebar-tab-contents {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    background: #0d0a08;
    position: relative;
}

.sidebar-tab-content {
    display: none;
    height: 100%;
    padding: 6px;
}

.sidebar-tab-content-active {
    display: block;
}

/* INVENTARIO */
.inventory-grid {
    display: grid;
    /* Grid fijo seguro */
    grid-template-columns: repeat(5, 36px);
    grid-template-rows: repeat(6, 36px);
    gap: 2px;
    padding: 4px 6px;
    justify-content: center;
    /* Centrar grid horizontalmente */
    flex-shrink: 0;

    background: #0d0a08;
    border: 1px solid #222;
    /* Borde sutil del contenedor */
}

.inventory-slot {
    width: 36px;
    height: 36px;
    background: #1a1510;
    border: 1px solid var(--border-gold);
    /* Borde dorado visible */
    border-radius: 4px;
    position: relative;
    cursor: pointer;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
    transition: all 0.1s;
}

.inventory-slot:hover {
    border-color: var(--border-gold-bright);
    box-shadow: 0 0 5px var(--border-gold);
    background: #2a221a;
}

.inventory-grid-slot-selected {
    border-color: var(--text-orange) !important;
    background: #2a1a0a !important;
    box-shadow: inset 0 0 10px rgba(255, 140, 0, 0.5);
}

/* Indicador de item equipado (E) */
.item-equipped-indicator {
    position: absolute;
    top: 1px;
    right: 2px;
    font-size: 9px;
    color: #00ff00;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
}

.inventory-slot canvas {
    width: 100%;
    height: 100%;
    display: block;
    image-rendering: pixelated;
    border-radius: 3px;
}

.item-quantity {
    position: absolute;
    bottom: 1px;
    right: 2px;
    font-size: 10px;
    color: #fff;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
    font-weight: bold;
    pointer-events: none;
    z-index: 10;
}

/* HECHIZOS - Panel completo (solo visible cuando el tab está activo) */
#tab-spells.sidebar-tab-content-active {
    display: flex;
    flex-direction: column;
    height: 100%;
}

#spells-list {
    flex: 1;
    width: 100%;
    min-height: 100px;
    max-height: 160px;
    background: #000;
    color: #eec;
    border: 1px solid #3d2e1e;
    font-size: 12px;
    padding: 4px;
    overflow-y: auto;
}

#spells-list option {
    padding: 4px 6px;
    border-bottom: 1px solid #1a1510;
}

#spells-list option:checked {
    background: #3a2e22;
    color: var(--text-gold);
}

.spells-actions {
    display: flex;
    gap: 4px;
    padding: 8px 4px;
    background: #14100b;
    border-top: 1px solid #3d2e1e;
    flex-shrink: 0;
}

.spells-actions button {
    flex: 1;
    background: linear-gradient(to bottom, #3a2e22, #1a1510);
    border: 1px solid #8b5a2b;
    color: #ccc;
    cursor: pointer;
    padding: 8px 6px;
    font-weight: bold;
    font-size: 11px;
    border-radius: 3px;
    text-transform: uppercase;
}

.spells-actions button:hover {
    border-color: #ffd700;
    color: #ffd700;
}

#btn-spell-cast {
    background: linear-gradient(to bottom, #2a4a3a, #1a2a20);
    border-color: #4a8a6a;
}

#btn-spell-cast:hover {
    border-color: #6aba9a;
    color: #8f8;
}

/* Container para lista + flechas */
.spells-list-container {
    display: flex;
    flex: 1;
    gap: 4px;
}

.spells-list-arrows {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.spell-arrow {
    width: 20px;
    height: 20px;
    background: linear-gradient(to bottom, #3a2e22, #1a1510);
    border: 1px solid #8b5a2b;
    color: #ccc;
    cursor: pointer;
    font-size: 10px;
    border-radius: 2px;
    padding: 0;
    line-height: 1;
}

.spell-arrow:hover {
    border-color: #ffd700;
    color: #ffd700;
}

/* STATS BARS */
.sidebar-stats {
    padding: 8px;
    border-top: 2px solid var(--border-copper);
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #14100b;
    flex-shrink: 0;
}

/* Zona de estados: ataques survivor + buffs (entre inventario y barras) */
.sidebar-status-zone {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
    box-sizing: border-box;
    overflow: hidden;
    background: linear-gradient(to bottom, #1a1510, #0d0a07);
    border-top: 1px solid var(--border-copper);
    border-bottom: 1px solid var(--border-copper);
    flex-shrink: 0;
}

.sidebar-status-zone .buffs-container {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 4px;
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 0;
    background: transparent;
    border-bottom: none;
    overflow-x: auto;
    overflow-y: hidden;
}

/* Survivor attack slots — en zona de estados, solo iconos */
.survivor-attack-slots {
    display: flex;
    gap: 6px;
    padding: 0;
    margin: 0;
    border: none;
    flex-shrink: 0;
    justify-content: flex-start;
    align-items: center;
}

.survivor-attack-slots[hidden] {
    display: none !important;
}

.surv-atk-slot {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    cursor: help;
}

.surv-atk-label {
    display: none !important;
}

.surv-atk-icon-wrap {
    position: relative;
    width: 28px;
    height: 28px;
    border: 2px solid var(--border-gold);
    border-radius: 4px;
    background: linear-gradient(135deg, #2a221a, #14100b);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5);
}

.surv-atk-icon {
    font-size: 13px;
    line-height: 1;
    z-index: 1;
    transition: opacity 0.1s;
}

.surv-atk-sprite {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    pointer-events: none;
}

.surv-atk-sprite[hidden] {
    display: none !important;
}

.surv-atk-sprite canvas {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
}

.surv-atk-slot.is-empty .surv-atk-icon,
.surv-atk-slot.is-empty .surv-atk-sprite {
    opacity: 0.25;
}

.surv-atk-slot.is-ready .surv-atk-icon-wrap {
    border-color: #ffd700;
    box-shadow: 0 0 6px rgba(255, 215, 0, 0.35);
}

.surv-atk-cd {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    transform-origin: bottom;
    transform: scaleY(var(--cd-fill, 0));
    pointer-events: none;
    z-index: 2;
    transition: transform 0.05s linear;
}

.surv-atk-slot.is-ready .surv-atk-cd {
    transform: scaleY(0);
    background: transparent;
}

/* Tooltip de habilidades survivor (estilo item-tooltip / LoL) */
.ability-tooltip {
    position: fixed;
    z-index: 10001;
    background: linear-gradient(135deg, #1a1510 0%, #0d0a07 100%);
    border: 2px solid var(--border-gold);
    border-radius: 6px;
    padding: 12px 14px;
    min-width: 220px;
    max-width: 300px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(197, 160, 89, 0.3);
    pointer-events: none;
    font-size: 12px;
    display: none;
    animation: tooltip-appear 0.15s ease-out;
}

.ability-tooltip.is-visible {
    display: block;
}

.ability-tooltip .tooltip-slot-kind {
    color: #c5a059;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 2px;
}

.ability-tooltip .tooltip-name {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 4px;
    color: #ffe08a;
    text-shadow: 0 0 5px rgba(255, 224, 138, 0.35);
}

.ability-tooltip .tooltip-type {
    color: #888;
    font-size: 11px;
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 1px solid #333;
}

.ability-tooltip .tooltip-desc {
    color: #c8c0b4;
    font-size: 12px;
    line-height: 1.45;
    margin: 0 0 8px;
}

.ability-tooltip .tooltip-stats {
    margin: 8px 0 0;
    padding: 6px 8px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
    line-height: 1.6;
}

.ability-tooltip .tooltip-empty {
    color: #888;
    font-style: italic;
}

.ability-tooltip .stat-cd {
    color: #74c0fc;
}

.ability-tooltip .stat-ready {
    color: #69db7c;
}

.ability-tooltip .stat-blocked {
    color: #ff6b6b;
}

.stat-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 16px;
}

.stat-label {
    width: 35px;
    font-size: 10px;
    font-weight: bold;
    color: #8b5a2b;
    text-align: right;
}

.stat-bar-track {
    flex: 1;
    height: 100%;
    background: #000;
    border: 1px solid #3d2e1e;
    position: relative;
    border-radius: 2px;
}

.stat-bar-fill {
    height: 100%;
    width: 50%;
    transition: width 0.3s;
    border-radius: 1px;
}

.stat-hp .stat-bar-fill {
    background: linear-gradient(to bottom, #e74c3c, #c0392b);
}

.stat-mana .stat-bar-fill {
    background: linear-gradient(to bottom, #3498db, #2980b9);
}

.stat-sta .stat-bar-fill {
    background: linear-gradient(to bottom, #2ecc71, #27ae60);
}

.stat-hunger .stat-bar-fill {
    background: linear-gradient(to bottom, #f39c12, #d35400);
}

.stat-thirst .stat-bar-fill {
    background: linear-gradient(to bottom, #00ced1, #008b8b);
}

.stat-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 9px;
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    font-weight: bold;
    z-index: 2;
    white-space: nowrap;
}

/* BUTTONS BOTTOM */
.sidebar-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px;
    border-top: 1px solid var(--border-copper);
    padding: 6px;
    background: #14100b;
}

/* ORO COMPACTO */
.sidebar-gold-compact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    background: linear-gradient(to bottom, #2a221a, #14100b);
    border-top: 1px solid var(--border-copper);
    border-bottom: 2px solid var(--border-copper);
}

.modal-title {
    color: var(--text-gold);
    font-weight: bold;
    font-family: serif;
    letter-spacing: 1px;
}

.modal-close {
    background: none;
    border: 1px solid #666;
    color: #fff;
    cursor: pointer;
    width: 24px;
    border-radius: 3px;
}

.modal-content {
    padding: 10px;
}

.item-list {
    background: #000;
    border: 1px solid #444;
    height: 150px;
    overflow-y: auto;
    color: #ccc;
}

.item-list-item {
    padding: 3px 6px;
    border-bottom: 1px solid #222;
    cursor: pointer;
}

.item-list-item:hover {
    background: #222;
    color: #fff;
}

.item-list-item.selected {
    background: #444;
    color: var(--text-gold);
}

.modal-footer {
    padding: 8px;
    background: #0d0a08;
    border-top: 1px solid #333;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.error {
    color: #ff6b6b;
    font-size: 11px;
    margin-top: 5px;
}

.hidden {
    display: none !important;
}

/* ============================================================================
   CURSOR DE HECHIZO
   ============================================================================ */

/* Cursor especial cuando el jugador está en modo de lanzar hechizo */
#game-canvas.cursor-spell {
    cursor: crosshair !important;
}

/* Estilo visual para indicar modo hechizo activo */
#game-canvas.cursor-spell::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 2px solid rgba(100, 150, 255, 0.5);
    animation: spell-pulse 1s ease-in-out infinite;
}

@keyframes spell-pulse {
0%, 100% { border-color: rgba(100, 150, 255, 0.3); }
50% { border-color: rgba(100, 150, 255, 0.7); }
}

/* Indicador de hechizo seleccionado en la lista */
#spells-list option:checked {
background: linear-gradient(to right, #3498db, #2980b9);
color: #fff;
}

/* ============================================================================
   CURSOR DE PESCA
   ============================================================================ */

/* Cursor especial cuando el jugador tiene caña equipada */
#game-canvas.cursor-fishing {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="18" font-size="18">🎣</text></svg>') 12 12, pointer !important;
}

/* Fallback si no soporta SVG cursor */
@supports not (cursor: url('test.svg'), pointer) {
  #game-canvas.cursor-fishing {
    cursor: pointer !important;
  }
}

/* Estilo visual para indicar modo pesca activo */
#game-canvas.cursor-fishing::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 2px solid rgba(50, 150, 200, 0.5);
    animation: fishing-pulse 1.5s ease-in-out infinite;
}

@keyframes fishing-pulse {
0%, 100% { border-color: rgba(50, 150, 200, 0.3); }
50% { border-color: rgba(50, 150, 200, 0.7); }
}

/* ============================================================================
   CURSOR DE PUNTERÍA (ARCO + FLECHAS EQUIPADAS)
   ============================================================================ */

#game-canvas.cursor-ranged {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><text y="18" font-size="18">🎯</text></svg>') 12 12, crosshair !important;
}

@supports not (cursor: url('test.svg'), crosshair) {
  #game-canvas.cursor-ranged {
    cursor: crosshair !important;
  }
}

#game-canvas.cursor-ranged::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    border: 2px solid rgba(220, 70, 70, 0.45);
    animation: ranged-pulse 1.2s ease-in-out infinite;
}

@keyframes ranged-pulse {
0%, 100% { border-color: rgba(220, 70, 70, 0.25); }
50% { border-color: rgba(220, 70, 70, 0.65); }
}

/* ============================================================================
   MODAL DE SKILLS
   ============================================================================ */

.skills-modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.85);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s, visibility 0.2s;
}

.skills-modal-overlay.skills-modal-visible {
opacity: 1;
visibility: visible;
}

.skills-modal-container {
background: linear-gradient(135deg, #1a1510 0%, #0d0a07 100%);
border: 2px solid var(--border-gold);
border-radius: 8px;
width: 680px;
max-width: 95vw;
max-height: 90vh;
display: flex;
flex-direction: column;
box-shadow: 0 0 30px rgba(197, 160, 89, 0.3), inset 0 0 20px rgba(0,0,0,0.5);
}

.skills-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid var(--border-copper);
background: linear-gradient(to bottom, #2a221a, #1a1510);
}

.skills-modal-header h2 {
color: var(--text-gold);
font-size: 18px;
margin: 0;
text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

.skills-free-points {
color: var(--text-primary);
font-size: 14px;
}

.skills-free-points span {
color: #4CAF50;
font-weight: bold;
font-size: 16px;
}

.skills-free-points span.has-points {
color: #FFD700;
text-shadow: 0 0 8px rgba(255, 215, 0, 0.6);
animation: pulse-points 1s ease-in-out infinite;
}

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

.skills-modal-close {
background: none;
border: none;
color: var(--text-primary);
font-size: 24px;
cursor: pointer;
padding: 0 8px;
transition: color 0.2s;
}

.skills-modal-close:hover {
color: #ff6666;
}

.skills-modal-content {
display: flex;
gap: 16px;
padding: 16px;
overflow-y: auto;
flex: 1;
}

.skills-column {
flex: 1;
min-width: 0;
}

.skills-column h3 {
color: var(--border-gold);
font-size: 13px;
margin-bottom: 10px;
padding-bottom: 6px;
border-bottom: 1px solid var(--border-copper);
text-transform: uppercase;
letter-spacing: 1px;
}

.skills-list {
display: flex;
flex-direction: column;
gap: 4px;
}

.skill-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 6px 10px;
background: rgba(42, 34, 26, 0.6);
border: 1px solid rgba(139, 90, 43, 0.3);
border-radius: 4px;
transition: background 0.15s, border-color 0.15s;
}

.skill-row:hover {
background: rgba(42, 34, 26, 0.9);
border-color: var(--border-copper);
}

.skill-row.skill-row-disabled {
opacity: 0.4;
pointer-events: none;
}

.skill-name {
color: var(--text-primary);
font-size: 12px;
cursor: help;
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

.skill-controls {
display: flex;
align-items: center;
gap: 6px;
}

.skill-btn-minus,
.skill-btn-plus {
width: 22px;
height: 22px;
border: 1px solid var(--border-copper);
border-radius: 3px;
background: linear-gradient(to bottom, #3a3025, #252015);
color: var(--text-gold);
font-size: 14px;
font-weight: bold;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.15s;
}

.skill-btn-minus:hover:not(:disabled),
.skill-btn-plus:hover:not(:disabled) {
background: linear-gradient(to bottom, #4a4035, #353025);
border-color: var(--border-gold);
transform: scale(1.05);
}

.skill-btn-minus:active:not(:disabled),
.skill-btn-plus:active:not(:disabled) {
transform: scale(0.95);
}

.skill-btn-minus:disabled,
.skill-btn-plus:disabled {
opacity: 0.3;
cursor: not-allowed;
}

.skill-value {
min-width: 30px;
text-align: center;
color: #4CAF50;
font-weight: bold;
font-size: 13px;
}

.skills-modal-footer {
padding: 12px 16px;
border-top: 1px solid var(--border-copper);
background: linear-gradient(to top, #2a221a, #1a1510);
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 16px;
}

.skills-help {
flex: 1;
color: #aaa;
font-size: 11px;
line-height: 1.4;
min-height: 40px;
}

.skills-help strong {
color: var(--text-gold);
}

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

.skills-btn {
padding: 8px 20px;
border: 1px solid var(--border-copper);
border-radius: 4px;
font-size: 12px;
font-weight: bold;
cursor: pointer;
transition: all 0.15s;
}

.skills-btn-cancel {
background: linear-gradient(to bottom, #4a3025, #352015);
color: #ccc;
}

.skills-btn-cancel:hover {
background: linear-gradient(to bottom, #5a4035, #453025);
border-color: #888;
}

.skills-btn-accept {
background: linear-gradient(to bottom, #2a4a25, #1a3515);
color: #4CAF50;
border-color: #4CAF50;
}

.skills-btn-accept:hover {
background: linear-gradient(to bottom, #3a5a35, #2a4525);
box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

/* ============================================================================
   MODAL - INPUTS Y BOTONES GENÉRICOS
   ============================================================================ */

.modal-input {
  width: 100%;
  padding: 10px 12px;
  margin: 8px 0 16px 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
}

.modal-input:focus {
  outline: none;
  border-color: var(--border-gold);
  box-shadow: 0 0 5px rgba(197, 160, 89, 0.3);
}

.modal-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  margin: 8px 0 16px 0;
  background: var(--bg-panel);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 13px;
  resize: vertical;
}

.modal-textarea:focus {
  outline: none;
  border-color: var(--border-gold);
}

.modal-btn {
  padding: 8px 16px;
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  background: linear-gradient(to bottom, #3a3025, #252015);
  color: var(--text-primary);
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.modal-btn:hover {
  background: linear-gradient(to bottom, #4a4035, #353025);
  border-color: var(--border-gold);
}

.modal-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.modal-btn-primary {
  padding: 10px 20px;
  border: 1px solid #4CAF50;
  border-radius: 4px;
  background: linear-gradient(to bottom, #2a4a25, #1a3515);
  color: #4CAF50;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.15s;
}

.modal-btn-primary:hover {
  background: linear-gradient(to bottom, #3a5a35, #2a4525);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.modal-btn-danger {
  border-color: #c44;
  background: linear-gradient(to bottom, #4a2525, #351515);
  color: #f66;
}

.modal-btn-danger:hover {
  background: linear-gradient(to bottom, #5a3535, #452525);
  box-shadow: 0 0 10px rgba(200, 50, 50, 0.3);
}

/* ============================================================================
   PARTY MODAL
   ============================================================================ */

.party-modal-window {
  width: min(380px, 94vw);
  min-width: 300px;
}

.party-invite-window {
  width: min(360px, 94vw);
  min-width: 280px;
}

.party-modal-content,
.party-invite-content {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.party-section {
  padding: 0;
}

.party-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 10px 8px;
  text-align: center;
}

.party-empty-icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 22px;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 220, 140, 0.18), transparent 55%),
    linear-gradient(180deg, #3a2e22 0%, #1a1510 100%);
  border: 1px solid rgba(197, 160, 89, 0.45);
  box-shadow: inset 0 1px 0 rgba(255, 220, 140, 0.12);
}

.party-empty-title {
  margin: 0;
  color: var(--text-gold, #e8c45a);
  font-weight: bold;
  letter-spacing: 0.04em;
}

.party-info-text {
  color: #9a8f7a;
  text-align: center;
  padding: 0 8px;
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  font-style: normal;
}

.party-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(180deg, rgba(42, 34, 26, 0.95), rgba(20, 16, 12, 0.95));
  border: 1px solid rgba(180, 140, 80, 0.35);
  border-radius: 6px;
}

.party-header-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.party-count {
  color: #f0e0c0;
  font-weight: bold;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.party-leader-label {
  color: #9a8f7a;
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-badge {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  background: linear-gradient(to bottom, #c5a059, #8b5a2b);
  color: #1a1208;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: bold;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.party-members {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-right: 2px;
}

.party-member {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  background: linear-gradient(180deg, rgba(30, 24, 18, 0.95), rgba(16, 12, 9, 0.98));
  border: 1px solid rgba(180, 140, 80, 0.28);
  border-radius: 6px;
}

.party-member.is-self {
  border-color: rgba(197, 160, 89, 0.55);
  box-shadow: inset 0 0 0 1px rgba(197, 160, 89, 0.18);
}

.party-member.is-leader .party-member-name {
  color: #f0d78c;
}

.party-member-empty {
  opacity: 0.72;
  border-style: dashed;
  border-color: rgba(180, 140, 80, 0.22);
  background: rgba(0, 0, 0, 0.18);
}

.party-member-empty.is-clickable {
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, opacity 0.12s ease;
}

.party-member-empty.is-clickable:hover {
  opacity: 1;
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(120, 90, 30, 0.16);
}

.party-member-empty-label {
  color: #7a7264;
  font-size: 12px;
  font-style: italic;
}

.party-member-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  color: #1a1208;
  background: linear-gradient(180deg, #d4af37, #8b5a2b);
  border: 1px solid rgba(255, 220, 140, 0.35);
}

.party-member-avatar.is-empty {
  color: #9a8f7a;
  background: rgba(0, 0, 0, 0.35);
  border: 1px dashed rgba(180, 140, 80, 0.35);
  font-size: 16px;
  font-weight: normal;
}

.party-member-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.party-crown {
  color: #e8c45a;
  margin-right: 4px;
  font-size: 11px;
}

.party-you-tag {
  margin-left: 6px;
  font-size: 9px;
  color: #9aa;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.party-member-info {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}

.party-member-name {
  font-weight: bold;
  color: var(--text-gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-member-level {
  flex-shrink: 0;
  font-size: 10px;
  color: #888;
}

.party-member-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.party-member-hp,
.party-member-mana {
  position: relative;
  height: 13px;
  background: #120e0a;
  border: 1px solid #333;
  border-radius: 3px;
  overflow: hidden;
}

.party-bar-fill {
  height: 100%;
  transition: width 0.3s;
}

.party-hp-fill {
  background: linear-gradient(to bottom, #c44, #822);
}

.party-member-hp.is-low .party-hp-fill {
  background: linear-gradient(to bottom, #d4882a, #8a4e12);
}

.party-member-hp.is-critical .party-hp-fill {
  background: linear-gradient(to bottom, #e24a3b, #8a1f18);
}

.party-mana-fill {
  background: linear-gradient(to bottom, #4a6fd4, #243a8a);
}

.party-bar-text {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 9px;
  line-height: 13px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
}

.party-kick-btn {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  padding: 0;
  border: 1px solid #c44;
  border-radius: 5px;
  background: linear-gradient(to bottom, #4a2525, #351515);
  color: #f66;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

.party-kick-btn:hover {
  background: linear-gradient(to bottom, #5a3535, #452525);
}

.party-hint {
  margin: 0;
  color: #7a7264;
  font-size: 10px;
  text-align: center;
  letter-spacing: 0.02em;
}

.party-invite-hint {
  margin-top: 2px;
}

.party-actions {
  display: flex;
  gap: 8px;
  justify-content: stretch;
  padding-top: 10px;
  border-top: 1px solid rgba(180, 140, 80, 0.28);
}

.party-actions .modal-btn,
.party-actions .modal-btn-primary {
  flex: 1;
}

.party-invites {
  margin-top: 2px;
  padding-top: 12px;
  border-top: 1px solid rgba(180, 140, 80, 0.28);
}

.party-invites-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.party-invites h4 {
  margin: 0;
  color: var(--text-gold);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.party-invites-count,
.party-nearby-count {
  min-width: 18px;
  height: 18px;
  padding: 0 6px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: #e24a3b;
  color: #fff;
  font-size: 10px;
  font-weight: bold;
}

.party-invites-count:empty,
.party-nearby-count:empty {
  display: none;
}

.party-invites-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.party-invite-item,
.clan-invite-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  background: linear-gradient(180deg, rgba(30, 24, 18, 0.95), rgba(16, 12, 9, 0.98));
  border: 1px solid rgba(180, 140, 80, 0.3);
  border-radius: 6px;
}

.party-invite-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.party-invite-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.invite-from,
.invite-info {
  flex: 1;
  color: #e8dcc0;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.invite-ttl {
  font-size: 10px;
  color: #9a8f7a;
  font-variant-numeric: tabular-nums;
}

.invite-ttl.is-urgent {
  color: #e24a3b;
  font-weight: bold;
}

.invite-clan-name {
  display: block;
  font-weight: bold;
  color: var(--text-gold);
}

.invite-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.invite-accept {
  padding: 5px 10px;
  background: linear-gradient(to bottom, #2a4a25, #1a3515);
  border: 1px solid #4CAF50;
  border-radius: 4px;
  color: #4CAF50;
  font-size: 11px;
  cursor: pointer;
}

.invite-accept:hover {
  background: linear-gradient(to bottom, #3a5a35, #2a4525);
}

.invite-accept:disabled,
.invite-decline:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.invite-decline {
  padding: 5px 10px;
  background: linear-gradient(to bottom, #4a2525, #351515);
  border: 1px solid #c44;
  border-radius: 4px;
  color: #f66;
  font-size: 11px;
  cursor: pointer;
}

.invite-decline:hover {
  background: linear-gradient(to bottom, #5a3535, #452525);
}

.party-field-label {
  display: block;
  margin-bottom: 6px;
  color: #c9a45a;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.party-invite-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.party-invite-row .modal-input {
  flex: 1;
  min-width: 0;
}

.party-invite-row .modal-btn-primary {
  flex-shrink: 0;
  padding: 8px 14px;
}

/* ============================================================================
   CLAN MODAL
   ============================================================================ */

.clan-section {
  padding: 10px 0;
}

.clan-info-text {
  color: #888;
  text-align: center;
  padding: 20px;
  font-style: italic;
}

.clan-actions-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-bottom: 20px;
}

.clan-requirements {
  background: var(--bg-panel);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  padding: 12px 16px;
}

.clan-requirements p {
  margin-bottom: 8px;
  color: var(--text-gold);
}

.clan-requirements ul {
  list-style: none;
  padding-left: 10px;
}

.clan-requirements li {
  padding: 4px 0;
  color: #aaa;
}

.clan-requirements li::before {
  content: "• ";
  color: var(--text-gold);
}

.clan-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(to bottom, #2a221a, #1a1510);
  border: 1px solid var(--border-gold);
  border-radius: 4px;
  margin-bottom: 12px;
}

.clan-header h3 {
  color: var(--text-gold);
  font-size: 16px;
  margin: 0;
}

.clan-badge {
  background: linear-gradient(to bottom, #c5a059, #8b5a2b);
  color: #000;
  padding: 3px 10px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: bold;
}

.clan-rank-0 { background: linear-gradient(to bottom, #ffd700, #c5a059); }
.clan-rank-1 { background: linear-gradient(to bottom, #c0c0c0, #808080); }
.clan-rank-2 { background: linear-gradient(to bottom, #cd7f32, #8b4513); }
.clan-rank-3 { background: linear-gradient(to bottom, #666, #444); }

.clan-description {
  color: #aaa;
  font-style: italic;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-copper);
  margin-bottom: 12px;
}

.clan-stats {
  display: flex;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-panel);
  border-radius: 4px;
  margin-bottom: 16px;
}

.clan-stats span {
  color: #888;
  font-size: 12px;
}

.clan-members-section h4 {
  color: var(--text-gold);
  margin-bottom: 10px;
}

.clan-members-list {
  max-height: 180px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.clan-member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--bg-panel);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  margin-bottom: 4px;
}

.clan-member-info {
  display: flex;
  gap: 12px;
  align-items: center;
}

.clan-member-name {
  font-weight: bold;
  color: var(--text-primary);
}

.clan-member-name.online {
  color: #4CAF50;
}

.clan-member-name.online::after {
  content: " ●";
  font-size: 8px;
}

.clan-member-rank {
  color: #888;
  font-size: 11px;
}

.clan-member-level {
  color: #666;
  font-size: 10px;
}

.clan-member-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.clan-rank-select {
  padding: 4px 8px;
  background: var(--bg-panel);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  color: var(--text-primary);
  font-size: 11px;
}

.clan-kick-btn {
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid #c44;
  border-radius: 4px;
  background: linear-gradient(to bottom, #4a2525, #351515);
  color: #f66;
  font-size: 11px;
  cursor: pointer;
}

.clan-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  padding-top: 12px;
  border-top: 1px solid var(--border-copper);
}

.clan-invites {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--border-copper);
}

.clan-invites h4 {
  color: var(--text-gold);
  margin-bottom: 10px;
}

/* ============================================================================
   WORK/FISHING/TAME MODALS
   ============================================================================ */

.work-info,
.fishing-info,
.tame-info {
  background: var(--bg-panel);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  padding: 12px 16px;
  margin-bottom: 16px;
}

.work-info p,
.fishing-info p,
.tame-info p {
  padding: 4px 0;
  color: #aaa;
}

.work-recipes,
.tame-pets {
  margin-top: 16px;
}

.work-recipes h4,
.tame-pets h4 {
  color: var(--text-gold);
  margin-bottom: 10px;
}

.fishing-status {
  text-align: center;
  padding: 20px;
  color: var(--text-gold);
  font-style: italic;
}

/* ============================================================================
   NEWS MODAL
   ============================================================================ */

.news-list {
  max-height: 300px;
  overflow-y: auto;
}

.news-item {
  padding: 12px 16px;
  background: var(--bg-panel);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  margin-bottom: 10px;
}

.news-item h4 {
  color: var(--text-gold);
  margin-bottom: 4px;
}

.news-date {
  color: #666;
  font-size: 10px;
  margin-bottom: 8px;
}

.news-item p:last-child {
  color: #aaa;
  line-height: 1.5;
}

/* ============================================================================
   TRADE MODAL - Sistema de Comercio con NPC
   ============================================================================ */

#trade-window-overlay .modal-window {
  min-width: 650px;
  max-width: 750px;
}

.trade-container {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.trade-panel {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-copper);
  border-radius: 6px;
  padding: 12px;
}

.trade-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-copper);
  margin-bottom: 10px;
}

.trade-panel-title {
  color: var(--text-gold);
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.trade-panel-title::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.trade-npc-panel .trade-panel-title::before {
  background: #4CAF50;
  box-shadow: 0 0 6px rgba(76, 175, 80, 0.6);
}

.trade-player-panel .trade-panel-title::before {
  background: #2196F3;
  box-shadow: 0 0 6px rgba(33, 150, 243, 0.6);
}

/* Lista de items de comercio */
.trade-items-list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
}

.trade-item-slot {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1a1510, #0d0a07);
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.trade-item-slot:hover {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, #2a2015, #1a1510);
  transform: scale(1.05);
}

.trade-item-slot.selected {
  border-color: #FFD700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5), inset 0 0 10px rgba(255, 215, 0, 0.1);
}

.trade-item-slot.empty {
  opacity: 0.4;
  cursor: default;
}

.trade-item-slot.empty:hover {
  transform: none;
  border-color: #333;
}

.trade-item-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.trade-item-amount {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  color: #fff;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #000;
  font-weight: bold;
}

/* Info del item seleccionado */
.trade-item-info {
  background: linear-gradient(to bottom, #1a1510, #0d0a07);
  border: 1px solid var(--border-copper);
  border-radius: 6px;
  padding: 12px;
  margin: 12px 16px;
  min-height: 80px;
}

.trade-item-info-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}

.trade-item-name {
  color: var(--text-gold);
  font-weight: bold;
  font-size: 14px;
}

.trade-item-price {
  font-size: 16px;
  font-weight: bold;
  padding: 4px 12px;
  border-radius: 4px;
}

.trade-item-price.buy-price {
  color: #ff6b6b;
  background: rgba(255, 107, 107, 0.1);
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.trade-item-price.sell-price {
  color: #69db7c;
  background: rgba(105, 219, 124, 0.1);
  border: 1px solid rgba(105, 219, 124, 0.3);
}

.trade-item-stats {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.trade-stat {
  color: #aaa;
  font-size: 12px;
}

.trade-stat span {
  color: #fff;
}

.trade-discount {
  color: #4CAF50;
  font-size: 11px;
  margin-left: 8px;
}

/* Footer de comercio */
.trade-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(to top, #1a1510, #0d0a07);
  border-top: 1px solid var(--border-copper);
}

.trade-gold-display {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #FFD700;
  font-weight: bold;
  font-size: 16px;
}

.trade-gold-display::before { display: none; }

.trade-quantity-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.trade-quantity-group label {
  color: #aaa;
  font-size: 13px;
}

.trade-quantity-input {
  width: 70px;
  padding: 8px 10px;
  background: #0d0a07;
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  color: #fff;
  text-align: center;
  font-size: 14px;
  font-weight: bold;
}

.trade-quantity-input:focus {
  outline: none;
  border-color: var(--border-gold);
}

.trade-actions {
  display: flex;
  gap: 10px;
}

.trade-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.trade-btn-buy {
  background: linear-gradient(to bottom, #2d5a2d, #1a3a1a);
  border: 1px solid #4CAF50;
  color: #69db7c;
}

.trade-btn-buy:hover:not(:disabled) {
  background: linear-gradient(to bottom, #3d6a3d, #2a4a2a);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.3);
}

.trade-btn-sell {
  background: linear-gradient(to bottom, #5a3a2d, #3a2a1a);
  border: 1px solid #FF9800;
  color: #FFB74D;
}

.trade-btn-sell:hover:not(:disabled) {
  background: linear-gradient(to bottom, #6a4a3d, #4a3a2a);
  box-shadow: 0 0 10px rgba(255, 152, 0, 0.3);
}

.trade-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   BANK MODAL - Sistema de Banco/Bóveda
   ============================================================================ */

#bank-window-overlay .modal-window {
  min-width: 700px;
  max-width: 800px;
}

.bank-container {
  display: flex;
  gap: 16px;
  padding: 16px;
}

.bank-panel {
  flex: 1;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid var(--border-copper);
  border-radius: 6px;
  padding: 12px;
}

.bank-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-copper);
  margin-bottom: 10px;
}

.bank-panel-title {
  color: var(--text-gold);
  font-weight: bold;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.bank-vault-panel .bank-panel-title::before {
  content: "🏦";
  font-size: 16px;
}

.bank-inventory-panel .bank-panel-title::before {
  content: "🎒";
  font-size: 16px;
}

/* Grid de items del banco */
.bank-items-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  max-height: 280px;
  overflow-y: auto;
  padding: 4px;
}

.bank-item-slot {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #1a1510, #0d0a07);
  border: 1px solid #333;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.bank-item-slot:hover {
  border-color: var(--border-gold);
  transform: scale(1.05);
}

.bank-item-slot.selected {
  border-color: #FFD700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}

.bank-item-slot.empty {
  opacity: 0.4;
  cursor: default;
}

.bank-item-icon {
  width: 32px;
  height: 32px;
  image-rendering: pixelated;
}

.bank-item-amount {
  position: absolute;
  bottom: 2px;
  right: 3px;
  font-size: 9px;
  color: #fff;
  text-shadow: 1px 1px 1px #000;
  font-weight: bold;
}

/* Sección de oro del banco */
.bank-gold-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(to right, rgba(255, 215, 0, 0.05), transparent);
  border: 1px solid rgba(255, 215, 0, 0.2);
  border-radius: 6px;
  margin: 0 16px 12px;
}

.bank-gold-info {
  display: flex;
  gap: 24px;
}

.bank-gold-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bank-gold-label {
  color: #888;
  font-size: 11px;
  text-transform: uppercase;
}

.bank-gold-value {
  color: #FFD700;
  font-weight: bold;
  font-size: 18px;
}

.bank-gold-value.wallet {
  color: #69db7c;
}

.bank-gold-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.bank-gold-input {
  width: 100px;
  padding: 8px 10px;
  background: #0d0a07;
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  color: #FFD700;
  text-align: center;
  font-size: 14px;
}

.bank-gold-btn {
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
}

.bank-deposit-btn {
  background: linear-gradient(to bottom, #2d5a2d, #1a3a1a);
  border: 1px solid #4CAF50;
  color: #69db7c;
}

.bank-withdraw-btn {
  background: linear-gradient(to bottom, #5a2d2d, #3a1a1a);
  border: 1px solid #f44336;
  color: #ff6b6b;
}

/* Footer del banco */
.bank-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 16px;
  background: linear-gradient(to top, #1a1510, #0d0a07);
  border-top: 1px solid var(--border-copper);
}

.bank-quantity-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bank-quantity-group label {
  color: #aaa;
  font-size: 12px;
}

.bank-quantity-input {
  width: 60px;
  padding: 6px 8px;
  background: #0d0a07;
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  color: #fff;
  text-align: center;
}

.bank-btn {
  padding: 10px 24px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
}

.bank-btn-deposit {
  background: linear-gradient(to bottom, #2d5a2d, #1a3a1a);
  border: 1px solid #4CAF50;
  color: #69db7c;
}

.bank-btn-withdraw {
  background: linear-gradient(to bottom, #5a3a2d, #3a2a1a);
  border: 1px solid #FF9800;
  color: #FFB74D;
}

.bank-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ============================================================================
   CRAFTING MODAL - Sistema de Fabricación
   ============================================================================ */

#crafting-window-overlay .modal-window {
  min-width: 500px;
}

.crafting-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 350px;
  overflow-y: auto;
  padding: 8px;
}

.crafting-recipe {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: linear-gradient(135deg, #1a1510, #0d0a07);
  border: 1px solid #333;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
}

.crafting-recipe:hover {
  border-color: var(--border-gold);
  background: linear-gradient(135deg, #2a2015, #1a1510);
}

.crafting-recipe.selected {
  border-color: #FFD700;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.3);
}

.crafting-recipe-icon {
  width: 40px;
  height: 40px;
  background: #0d0a07;
  border: 1px solid #444;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crafting-recipe-info {
  flex: 1;
}

.crafting-recipe-name {
  color: var(--text-gold);
  font-weight: bold;
  margin-bottom: 4px;
}

.crafting-recipe-materials {
  color: #888;
  font-size: 11px;
}

.crafting-recipe-skill {
  color: #4CAF50;
  font-size: 11px;
  padding: 2px 8px;
  background: rgba(76, 175, 80, 0.1);
  border: 1px solid rgba(76, 175, 80, 0.3);
  border-radius: 3px;
}

.crafting-recipe.unavailable {
  opacity: 0.5;
}

.crafting-recipe.unavailable .crafting-recipe-skill {
  color: #f44336;
  background: rgba(244, 67, 54, 0.1);
  border-color: rgba(244, 67, 54, 0.3);
}

/* ============================================================================
   MINIMAP COORDS
   ============================================================================ */
.minimap-panel {
  position: relative;
}

.minimap-coords {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: #aaa;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: monospace;
}

/* ============================================================================
   SIDEBAR GOLD DISPLAY
   ============================================================================ */
.sidebar-gold-display {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 12px;
  background: linear-gradient(135deg, #2a2015, #1a1510);
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  margin: 4px 0;
  cursor: pointer;
  transition: all 0.2s;
}

.sidebar-gold-display:hover {
  background: linear-gradient(135deg, #3a3025, #2a2015);
  border-color: var(--border-gold);
  transform: scale(1.02);
}

.sidebar-gold-display:active {
  transform: scale(0.98);
}

#gold-sprite-canvas {
  flex-shrink: 0;
}

#hud-gold-value {
  color: var(--text-gold);
  font-size: 14px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* ============================================================================
   DROP GOLD MODAL
   ============================================================================ */
.drop-gold-info {
  text-align: center;
  margin-bottom: 16px;
  padding: 12px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
}

.drop-gold-info .gold-amount {
  color: var(--text-gold);
  font-size: 18px;
  font-weight: bold;
}

.drop-gold-input-group {
  margin-bottom: 16px;
}

.drop-gold-input-group label {
  display: block;
  margin-bottom: 6px;
  color: #aaa;
}

.drop-gold-input {
  width: 100%;
  padding: 10px;
  background: #1a1510;
  border: 1px solid var(--border-copper);
  border-radius: 4px;
  color: var(--text-gold);
  font-size: 16px;
  text-align: center;
}

.drop-gold-input:focus {
  outline: none;
  border-color: var(--border-gold);
}

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

.drop-gold-buttons button {
  flex: 1;
}

/* ============================================================================
   ITEM SPRITE STYLES
   ============================================================================ */
.item-sprite-canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.trade-item-icon,
.bank-item-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
}

.trade-item-icon canvas,
.bank-item-icon canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ============================================================================
   DROP ITEM MODAL
   ============================================================================ */
#drop-item-modal {
  z-index: 3000;
  pointer-events: auto;
}

#drop-item-modal .modal-window {
  pointer-events: auto;
}

#drop-item-modal button,
#drop-item-modal input {
  pointer-events: auto;
  cursor: pointer;
}

.drop-item-info {
  margin-bottom: 15px;
}

.drop-item-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  margin-bottom: 10px;
}

.drop-item-preview canvas {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: 1px solid var(--border-gold);
}

#drop-item-name {
  font-weight: bold;
  color: var(--text-gold);
}

.item-amount {
  color: var(--text-gold);
  font-weight: bold;
}

/* ============================================================================
   SISTEMA DE BUFFS/DEBUFFS - Iconos de efectos activos
   ============================================================================ */

.buffs-container {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  height: 40px;
  min-height: 40px;
  max-height: 40px;
  box-sizing: border-box;
  background: linear-gradient(to bottom, #1a1510, #0d0a07);
  border-bottom: 1px solid var(--border-copper);
  overflow-x: auto;
  overflow-y: hidden;
}

.buff-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  background: linear-gradient(135deg, #2a221a, #14100b);
  border: 2px solid #555;
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: help;
  transition: transform 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.buff-icon:hover {
  transform: scale(1.1);
  z-index: 10;
}

.buff-icon.buff-buff {
  border-color: #4488ff;
  box-shadow: 0 0 5px rgba(68, 136, 255, 0.4);
}

.buff-icon.buff-debuff {
  border-color: #ff4444;
  box-shadow: 0 0 5px rgba(255, 68, 68, 0.4);
}

.buff-icon-emoji {
  font-size: 14px;
  line-height: 1;
}

.buff-timer {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  font-size: 8px;
  font-weight: bold;
  padding: 1px 3px;
  border-radius: 2px;
  text-shadow: 1px 1px 1px #000;
}

/* Animaciones de buffs */
.buff-icon-entering {
  animation: buff-enter 0.2s ease-out;
}

.buff-icon-removing {
  animation: buff-exit 0.2s ease-in forwards;
}

.buff-expiring {
  animation: buff-blink 0.5s ease-in-out infinite;
}

@keyframes buff-enter {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes buff-exit {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes buff-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ============================================================================
   SISTEMA DE COOLDOWNS DE HECHIZOS
   ============================================================================ */

/* Indicador visual de cooldown en la lista de hechizos */
#spells-list option.spell-on-cooldown {
  color: #666 !important;
  background: rgba(50, 50, 50, 0.5) !important;
  font-style: italic;
}

/* Overlay de cooldown para slots de hotbar (si se implementa) */
.spell-slot-cooldown {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
  border-radius: 3px;
  pointer-events: none;
}

/* Indicador circular de cooldown */
.cooldown-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cooldown-sweep {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  background: conic-gradient(
    rgba(0, 0, 0, 0.7) var(--cooldown-progress, 0%),
    transparent var(--cooldown-progress, 0%)
  );
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.cooldown-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-shadow: 1px 1px 2px #000;
}

/* ============================================================================
   SISTEMA DE TOOLTIPS DE ITEMS MEJORADO
   ============================================================================ */

.item-tooltip {
  position: fixed;
  z-index: 10000;
  background: linear-gradient(135deg, #1a1510 0%, #0d0a07 100%);
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  padding: 12px 14px;
  min-width: 200px;
  max-width: 280px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 10px rgba(197, 160, 89, 0.3);
  pointer-events: none;
  font-size: 12px;
}

.tooltip-name {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 4px;
  text-shadow: 0 0 5px currentColor;
}

.tooltip-type {
  color: #888;
  font-size: 11px;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #333;
}

.tooltip-amount {
  color: #aaa;
  font-size: 11px;
  margin-bottom: 6px;
}

.tooltip-stats {
  margin: 8px 0;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  line-height: 1.6;
}

.tooltip-stats .stat-damage {
  color: #ff6b6b;
}

.tooltip-stats .stat-defense {
  color: #4dabf7;
}

.tooltip-stats .stat-bonus {
  color: #69db7c;
}

.tooltip-stats .stat-heal {
  color: #51cf66;
}

.tooltip-stats .stat-mana {
  color: #74c0fc;
}

.tooltip-stats .stat-poison {
  color: #94d82d;
}

.tooltip-stats .stat-hunger {
  color: #ffa94d;
}

.tooltip-stats .stat-thirst {
  color: #22b8cf;
}

.tooltip-stats .stat-special {
  color: #da77f2;
}

.tooltip-reqs {
  color: #ffa94d;
  font-size: 11px;
  margin: 6px 0;
}

.tooltip-effects {
  color: #da77f2;
  font-size: 11px;
  margin: 6px 0;
  padding: 4px 6px;
  background: rgba(218, 119, 242, 0.1);
  border-radius: 3px;
  line-height: 1.5;
}

.tooltip-newbie {
  color: #88ff88;
  font-size: 10px;
  font-style: italic;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed #333;
}

.tooltip-crucial {
  color: #ff6b6b;
  font-size: 10px;
  font-style: italic;
}

.tooltip-value {
  color: var(--text-gold);
  font-size: 11px;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid #333;
}

/* Animación de entrada del tooltip */
.item-tooltip {
  animation: tooltip-appear 0.15s ease-out;
}

@keyframes tooltip-appear {
  from {
    opacity: 0;
    transform: translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   INDICADOR DE MODO SEGURO / COMBATE
   ============================================================================ */

.combat-mode-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  pointer-events: none;
  z-index: 100;
}

.combat-mode-safe {
  background: rgba(76, 175, 80, 0.8);
  color: #fff;
  border: 1px solid #4CAF50;
}

.combat-mode-pvp {
  background: rgba(244, 67, 54, 0.8);
  color: #fff;
  border: 1px solid #f44336;
  animation: pvp-pulse 2s ease-in-out infinite;
}

@keyframes pvp-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(244, 67, 54, 0.5); }
  50% { box-shadow: 0 0 15px rgba(244, 67, 54, 0.8); }
}

/* ============================================================================
   SISTEMA PVP - Indicadores de Zona y Facción
   ============================================================================ */

/* Box flotante de zona: desactivado (la zona vive en #hud-map-name) */
.zone-indicator {
  display: none !important;
}

.zone-indicator.zone-safe,
.zone-indicator.zone-combat {
  display: none !important;
}

.zone-indicator.zone-safe .zone-text {
  color: #4CAF50;
}

.zone-indicator.zone-combat {
  border-color: #f44336;
  background: rgba(244, 67, 54, 0.2);
  animation: zone-combat-pulse 2s ease-in-out infinite;
}

.zone-indicator.zone-combat .zone-text {
  color: #f44336;
}

@keyframes zone-combat-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(244, 67, 54, 0.3); }
  50% { box-shadow: 0 0 15px rgba(244, 67, 54, 0.6); }
}

.zone-icon {
  font-size: 16px;
}

.zone-text {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Indicador de Facción */
.faction-indicator {
  margin: 4px 0;
}

.faction-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #fff;
  background: #4CAF50;
}

.faction-indicator.faction-criminal .faction-badge {
  background: #f44336;
  animation: faction-criminal-pulse 1.5s ease-in-out infinite;
}

.faction-indicator.faction-chaos .faction-badge {
  background: linear-gradient(135deg, #9C27B0, #673AB7);
  animation: faction-chaos-pulse 2s ease-in-out infinite;
}

@keyframes faction-criminal-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(244, 67, 54, 0.5); }
  50% { box-shadow: 0 0 10px rgba(244, 67, 54, 0.8); }
}

@keyframes faction-chaos-pulse {
  0%, 100% { box-shadow: 0 0 5px rgba(156, 39, 176, 0.5); }
  50% { box-shadow: 0 0 15px rgba(156, 39, 176, 0.8); }
}

/* Botón de Modo Seguro */
.safe-mode-btn {
  grid-column: span 2;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.2s ease;
}

.safe-mode-btn.safe-mode-on {
  background: linear-gradient(to bottom, #2d5a2d, #1a3a1a) !important;
  border-color: #4CAF50 !important;
  color: #4CAF50 !important;
}

.safe-mode-btn.safe-mode-off {
  background: linear-gradient(to bottom, #5a2d2d, #3a1a1a) !important;
  border-color: #f44336 !important;
  color: #f44336 !important;
  animation: safe-mode-warning 1s ease-in-out infinite;
}

@keyframes safe-mode-warning {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* Modal de Duelo */
.duel-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  animation: duel-modal-appear 0.3s ease-out;
}

.duel-modal.hidden {
  display: none;
}

@keyframes duel-modal-appear {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.duel-modal-content {
  background: linear-gradient(135deg, #1a1510, #0d0a07);
  border: 2px solid #FF9800;
  border-radius: 8px;
  padding: 20px;
  min-width: 300px;
  box-shadow: 0 0 30px rgba(255, 152, 0, 0.4);
}

.duel-modal-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border-copper);
}

.duel-icon {
  font-size: 24px;
}

.duel-title {
  color: #FF9800;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
}

.duel-modal-body {
  color: #ccc;
  margin-bottom: 15px;
}

.duel-modal-body p {
  margin: 8px 0;
}

.duel-timer {
  color: #f44336;
  font-weight: bold;
}

.duel-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.duel-btn {
  padding: 10px 25px;
  border-radius: 4px;
  font-weight: bold;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-transform: uppercase;
}

.duel-btn-accept {
  background: linear-gradient(to bottom, #2d5a2d, #1a3a1a);
  border: 1px solid #4CAF50;
  color: #4CAF50;
}

.duel-btn-accept:hover {
  background: linear-gradient(to bottom, #3d6a3d, #2a4a2a);
  box-shadow: 0 0 10px rgba(76, 175, 80, 0.4);
}

.duel-btn-decline {
  background: linear-gradient(to bottom, #5a2d2d, #3a1a1a);
  border: 1px solid #f44336;
  color: #f44336;
}

.duel-btn-decline:hover {
  background: linear-gradient(to bottom, #6a3d3d, #4a2a2a);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
}

/* Notificación de Criminal */
.criminal-notification {
  position: fixed;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10001;
  animation: criminal-notification-appear 0.5s ease-out, criminal-notification-disappear 0.5s ease-in 4.5s forwards;
}

@keyframes criminal-notification-appear {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes criminal-notification-disappear {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

.criminal-notification-content {
  background: linear-gradient(135deg, #5a2d2d, #3a1a1a);
  border: 2px solid #f44336;
  border-radius: 8px;
  padding: 15px 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  box-shadow: 0 0 30px rgba(244, 67, 54, 0.5);
  animation: criminal-shake 0.5s ease-in-out;
}

@keyframes criminal-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}

.criminal-icon {
  font-size: 28px;
}

.criminal-text {
  color: #f44336;
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(244, 67, 54, 0.5);
}

/* Nombre de jugador con color de facción */
.player-name-citizen {
  color: #4CAF50;
}

.player-name-criminal {
  color: #f44336;
}

.player-name-chaos {
  color: #9C27B0;
}

/* ============================================================================
   MENÚ CONTEXTUAL - Click derecho
   ============================================================================ */

.context-menu {
  position: fixed;
  z-index: 15000;
  min-width: 180px;
  background: linear-gradient(135deg, #1a1510 0%, #0d0a07 100%);
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8), 0 0 15px rgba(197, 160, 89, 0.3);
  padding: 6px 0;
  font-size: 13px;
  user-select: none;
}

.context-menu.hidden {
  display: none;
}

.context-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  color: var(--text-primary);
  cursor: pointer;
  transition: all 0.15s;
  position: relative;
}

.context-menu-item:hover {
  background: linear-gradient(90deg, rgba(197, 160, 89, 0.2), transparent);
  color: var(--text-gold);
}

.context-menu-item.separator {
  height: 1px;
  background: var(--border-copper);
  margin: 4px 10px;
  padding: 0;
  cursor: default;
}

.context-menu-item.separator:hover {
  background: var(--border-copper);
}

.context-menu-item.dangerous {
  color: #ff6b6b;
}

.context-menu-item.dangerous:hover {
  background: linear-gradient(90deg, rgba(255, 107, 107, 0.2), transparent);
  color: #ff4444;
}

.context-menu-item.disabled {
  color: #555;
  cursor: not-allowed;
}

.context-menu-item.disabled:hover {
  background: transparent;
  color: #555;
}

/* Submenús */
.context-menu-item.has-submenu {
  padding-right: 24px;
}

.submenu-arrow {
  font-size: 10px;
  opacity: 0.6;
}

.context-submenu {
  display: none;
  position: absolute;
  left: 100%;
  top: -6px;
  min-width: 140px;
  background: linear-gradient(135deg, #1a1510 0%, #0d0a07 100%);
  border: 2px solid var(--border-gold);
  border-radius: 6px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.7);
  padding: 6px 0;
}

.context-menu-item.has-submenu:hover .context-submenu {
  display: block;
}

/* Header del menú (opcional) */
.context-menu-header {
  padding: 8px 14px;
  color: var(--text-gold);
  font-weight: bold;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--border-copper);
  margin-bottom: 4px;
}

/* Animación de entrada */
.context-menu:not(.hidden) {
  animation: context-menu-appear 0.15s ease-out;
}

@keyframes context-menu-appear {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================================================
   MEJORAS DE ACCESIBILIDAD - Desactivar selección de texto en juego
   ============================================================================ */

#screen-game {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

#screen-game input,
#screen-game textarea {
  user-select: text;
  -webkit-user-select: text;
}

/* Cursor del juego */
#game-canvas {
  cursor: default;
}

#game-canvas.cursor-attack {
  cursor: crosshair;
}

#game-canvas.cursor-talk {
  cursor: help;
}

#game-canvas.cursor-pickup {
  cursor: grab;
}

/* ============================================================================
   SIDEBAR COMPACTA - Nuevos estilos
   ============================================================================ */

/* Oro con icono */
.sidebar-gold-compact .gold-icon {
  width: 16px;
  height: 16px;
  image-rendering: pixelated;
}

.sidebar-gold-compact:hover {
  background: #3a2e22;
}

/* Botón de Combate */
.sidebar-btn-combat {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: linear-gradient(to bottom, #5a2d2d, #3a1a1a);
  border: 1px solid #f44336;
  color: #f44336;
  font-size: 11px;
  padding: 8px 0;
  cursor: pointer;
  font-weight: bold;
  text-transform: uppercase;
  margin: 4px 6px;
  border-radius: 3px;
}

.sidebar-btn-combat:hover {
  background: linear-gradient(to bottom, #6a3d3d, #4a2a2a);
  box-shadow: 0 0 10px rgba(244, 67, 54, 0.4);
}

.sidebar-btn-combat.combat-off {
  background: linear-gradient(to bottom, #2d5a2d, #1a3a1a);
  border-color: #4CAF50;
  color: #4CAF50;
}

.combat-icon {
  font-size: 14px;
}

/* Botones Footer (Opciones y Salir) */
.sidebar-footer-buttons {
  display: flex;
  gap: 4px;
  padding: 6px;
  margin-top: auto;
  background: #0d0a08;
  border-top: 2px solid var(--border-copper);
  flex-shrink: 0;
}

.sidebar-btn-footer {
  flex: 1;
  background: linear-gradient(to bottom, #2a221a, #1a1510);
  border: 1px solid #8b5a2b;
  color: #aaa;
  font-size: 10px;
  padding: 10px 0;
  cursor: pointer;
  border-radius: 3px;
  font-weight: bold;
}

.sidebar-btn-footer:hover {
  color: #ffd700;
  border-color: #c5a059;
  background: #3a2e22;
}

.sidebar-btn-footer.btn-logout {
  color: #d66;
  border-color: #8b0000;
}

.sidebar-btn-footer.btn-logout:hover {
  color: #ff6b6b;
  border-color: #c00;
  background: #3a1a1a;
}
/* ============================================================================
   MODAL DE OPCIONES EXPANDIDO
   ============================================================================ */

.modal-options-expanded {
  width: 560px;
  max-width: 95vw;
}

.options-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(180, 140, 80, 0.35);
}

.options-tab {
  flex: 1;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(180, 140, 80, 0.28);
  color: #a89878;
  padding: 9px 12px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.options-tab:hover {
  background: rgba(120, 90, 30, 0.22);
  color: #e8dcc0;
  border-color: rgba(212, 175, 55, 0.45);
}

.options-tab-active {
  background: rgba(90, 68, 36, 0.55);
  border-color: rgba(212, 175, 55, 0.75);
  color: var(--text-gold, #ffd700);
  box-shadow: inset 0 -2px 0 #d4af37;
}

.options-tab-content {
  display: none;
}

.options-tab-content-active {
  display: block;
}

.options-section {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.options-section-title {
  margin: 0 0 4px;
  color: #c9a45a;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.options-section h4 {
  color: var(--text-gold);
  margin-bottom: 8px;
  font-size: 12px;
}

.options-group {
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(180, 140, 80, 0.28);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.22);
  overflow: hidden;
}

.options-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 14px;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(180, 140, 80, 0.14);
  border-radius: 0;
  min-height: 44px;
}

.options-group .options-row:last-child {
  border-bottom: none;
}

.options-row-toggle {
  min-height: 44px;
}

.options-row label {
  color: #ddd0b4;
  font-size: 12px;
}

.options-row > label[for],
.options-row > label:not(.options-switch) {
  flex: 1;
}

/* Toggle switch uniforme */
.options-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
  cursor: pointer;
}

.options-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.options-switch-slider {
  position: absolute;
  inset: 0;
  background: #2a2218;
  border: 1px solid rgba(180, 140, 80, 0.45);
  border-radius: 999px;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.options-switch-slider::before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 2px;
  background: #8a7a60;
  border-radius: 50%;
  transition: transform 0.15s ease, background 0.15s ease;
}

.options-switch input:checked + .options-switch-slider {
  background: rgba(100, 80, 30, 0.65);
  border-color: #d4af37;
}

.options-switch input:checked + .options-switch-slider::before {
  transform: translateX(18px);
  background: #ffd700;
}

.options-switch input:focus-visible + .options-switch-slider {
  outline: 1px solid #d4af37;
  outline-offset: 2px;
}

/* Sliders uniformes (un solo riel + thumb centrado) */
.options-range,
.options-row input[type="range"],
#options-modal input[type="range"] {
  flex: 0 0 160px;
  width: 160px;
  max-width: 160px;
  height: 22px;
  margin: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  border: none;
  outline: none;
  accent-color: var(--border-gold);
  touch-action: pan-y;
  cursor: pointer;
}

.options-range::-webkit-slider-runnable-track,
.options-row input[type="range"]::-webkit-slider-runnable-track,
#options-modal input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  background: #0d0a08;
  border: 1px solid #3d2e1e;
  border-radius: 999px;
}

.options-range::-webkit-slider-thumb,
.options-row input[type="range"]::-webkit-slider-thumb,
#options-modal input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  margin-top: -6px; /* (16 - 6) / 2  → centra sobre el riel */
  border-radius: 50%;
  background: linear-gradient(to bottom, #c5a059, #8b5a2b);
  border: 1px solid #3d2e1e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.options-range::-moz-range-track,
.options-row input[type="range"]::-moz-range-track,
#options-modal input[type="range"]::-moz-range-track {
  height: 6px;
  background: #0d0a08;
  border: 1px solid #3d2e1e;
  border-radius: 999px;
}

.options-range::-moz-range-thumb,
.options-row input[type="range"]::-moz-range-thumb,
#options-modal input[type="range"]::-moz-range-thumb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: linear-gradient(to bottom, #c5a059, #8b5a2b);
  border: 1px solid #3d2e1e;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.55);
  cursor: pointer;
}

.options-chat-tip {
  margin: 12px 0 0;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  border: 1px dashed rgba(180, 140, 80, 0.3);
  color: #a89878;
  font-size: 11px;
  line-height: 1.4;
}

.options-chat-tip code {
  color: #d4af37;
}

#options-modal input[type="checkbox"] {
  accent-color: var(--border-gold);
}

.faction-indicator {
  display: none !important;
}

.options-keys-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  max-height: 55vh;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #8b5a2b #0d0a08;
  scrollbar-width: thin;
}

.options-keys-list::-webkit-scrollbar {
  width: 10px;
}

.options-keys-list::-webkit-scrollbar-track {
  background: #0d0a08;
  border: 1px solid #3d2e1e;
  border-radius: 8px;
}

.options-keys-list::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #3a2e22, #1a1510);
  border: 1px solid #8b5a2b;
  border-radius: 8px;
}

.options-keys-list::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(to bottom, #4a3a2b, #221a12);
  border-color: #c5a059;
}

.options-keys-category {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 6px 8px;
  background: linear-gradient(to bottom, #2a221a, #1a1510);
  border: 1px solid #8b5a2b;
  border-radius: 4px;
  color: var(--text-gold);
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
}

.options-keys-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px;
  background: #1a1510;
  border: 1px solid #3d2e1e;
  border-radius: 4px;
}

.options-keys-action {
  color: #ccc;
  font-size: 12px;
  line-height: 1.15;
  padding-right: 6px;
}

.options-keys-binding {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.options-keys-key {
  min-width: 70px;
  text-align: center;
  padding: 4px 8px;
  border: 1px solid #3d2e1e;
  border-radius: 4px;
  background: #0d0a08;
  color: var(--text-gold);
  font-size: 12px;
  line-height: 18px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.options-keys-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

.options-keys-hint {
  margin-top: 8px;
  color: #aaa;
  font-size: 11px;
}

.options-keys-status {
  margin-top: 6px;
  font-size: 11px;
}

.options-keys-status[data-kind="ok"] {
  color: #4CAF50;
}

.options-keys-status[data-kind="warn"] {
  color: #ffb74d;
}

.options-keys-status[data-kind="error"] {
  color: #ff6b6b;
}

.options-buttons-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.options-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}

.options-stat-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px;
  background: #1a1510;
  border: 1px solid #3d2e1e;
  border-radius: 4px;
}

.options-stat-label {
  color: #aaa;
  font-size: 11px;
}

.options-stat-value {
  color: var(--text-gold);
  font-weight: bold;
  font-size: 12px;
}

.options-big-btn {
  background: linear-gradient(to bottom, #2a221a, #1a1510);
  border: 1px solid #8b5a2b;
  color: #ccc;
  padding: 16px 12px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  transition: all 0.15s;
}

.options-big-btn:hover {
  border-color: var(--border-gold);
  color: var(--text-gold);
  background: #3a2e22;
}

/* ============================================================================
   MODAL DE TIRAR ORO
   ============================================================================ */

.drop-gold-info {
  text-align: center;
  margin-bottom: 12px;
  padding: 8px;
  background: #1a1510;
  border-radius: 4px;
}

.drop-gold-info .gold-amount {
  color: var(--text-gold);
  font-weight: bold;
  font-size: 14px;
}

.drop-gold-input-group {
  margin-bottom: 12px;
}

.drop-gold-input-group label {
  display: block;
  margin-bottom: 4px;
  color: #aaa;
  font-size: 11px;
}

.drop-gold-input {
  width: 100%;
  background: #000;
  border: 1px solid #3d2e1e;
  color: var(--text-gold);
  padding: 8px;
  font-size: 14px;
  text-align: center;
  border-radius: 4px;
}

.drop-gold-buttons {
  display: flex;
  gap: 8px;
}

.drop-gold-buttons button {
  flex: 1;
}

.drop-gold-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.drop-gold-row input {
  flex: 1;
}

/* ============================================================================
   MODAL DE INACTIVIDAD
   ============================================================================ */

.inactivity-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inactivity-modal.hidden {
  display: none;
}

.inactivity-modal-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.inactivity-modal-content {
  position: relative;
  z-index: 1;
  background: linear-gradient(180deg, #1a1410 0%, #0d0a08 100%);
  border: 2px solid var(--border-gold);
  border-radius: 12px;
  padding: 32px 48px;
  text-align: center;
  box-shadow: 
    0 0 40px rgba(197, 160, 89, 0.3),
    inset 0 1px 0 rgba(255, 215, 0, 0.1);
  animation: modalPulse 2s ease-in-out infinite;
  max-width: 400px;
}

@keyframes modalPulse {
  0%, 100% {
    box-shadow: 
      0 0 40px rgba(197, 160, 89, 0.3),
      inset 0 1px 0 rgba(255, 215, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 0 60px rgba(197, 160, 89, 0.5),
      inset 0 1px 0 rgba(255, 215, 0, 0.2);
  }
}

.inactivity-modal-icon {
  font-size: 48px;
  margin-bottom: 16px;
  animation: iconBounce 1s ease-in-out infinite;
}

@keyframes iconBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.inactivity-modal-title {
  font-size: 24px;
  color: var(--text-gold);
  margin-bottom: 12px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.inactivity-modal-text {
  font-size: 14px;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.inactivity-countdown {
  background: linear-gradient(180deg, #2a1f15 0%, #1a1410 100%);
  border: 1px solid var(--border-copper);
  border-radius: 8px;
  padding: 16px 32px;
  margin: 16px 0;
  display: inline-block;
}

#inactivity-countdown-value {
  font-size: 48px;
  font-weight: bold;
  color: var(--text-gold);
  font-family: 'Courier New', monospace;
  text-shadow: 0 0 10px rgba(255, 204, 0, 0.5);
}

#inactivity-countdown-value.countdown-warning {
  color: #ff8c00;
  text-shadow: 0 0 10px rgba(255, 140, 0, 0.5);
}

#inactivity-countdown-value.countdown-critical {
  color: #ff4444;
  text-shadow: 0 0 15px rgba(255, 68, 68, 0.7);
  animation: countdownCritical 0.5s ease-in-out infinite;
}

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

.inactivity-modal-subtext {
  font-size: 12px;
  color: #888;
  margin-bottom: 20px;
}

.inactivity-modal-btn {
  background: linear-gradient(180deg, #3d6b1e 0%, #2d4f16 100%);
  border: 2px solid #5a9b2f;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  padding: 14px 48px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.inactivity-modal-btn:hover {
  background: linear-gradient(180deg, #4a8024 0%, #3d6b1e 100%);
  border-color: #7cc940;
  transform: translateY(-2px);
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.inactivity-modal-btn:active {
  transform: translateY(0);
  box-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.rpg-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rpg-dialog-overlay.hidden {
  display: none;
}

.rpg-dialog-backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}

.rpg-dialog {
  position: relative;
  z-index: 1;
  width: 380px;
  max-width: 92vw;
  padding: 16px 22px 18px 22px;
  background:
    linear-gradient(145deg,
      rgba(35, 28, 20, 0.95) 0%,
      rgba(25, 20, 15, 0.98) 50%,
      rgba(20, 16, 12, 0.97) 100%);
  border: 2px solid;
  border-image: linear-gradient(180deg,
      rgba(180, 140, 80, 0.6) 0%,
      rgba(120, 90, 50, 0.8) 30%,
      rgba(80, 60, 35, 0.7) 70%,
      rgba(60, 45, 25, 0.5) 100%) 1;
  box-shadow:
    0 0 40px rgba(0, 0, 0, 0.8),
    0 0 80px rgba(0, 0, 0, 0.4),
    inset 0 0 60px rgba(0, 0, 0, 0.5);
}

.rpg-dialog::before {
  content: "";
  display: none;
}

.rpg-dialog-header {
  position: relative;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(100, 80, 50, 0.35);
}

.rpg-dialog-header::before {
  content: "\2014 \2694 \2014";
  display: block;
  text-align: center;
  font-size: 16px;
  color: rgba(160, 130, 80, 0.6);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  letter-spacing: 4px;
  font-family: serif;
  margin-bottom: 6px;
}

.rpg-dialog-title {
  font-family: 'Cinzel', serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.1em;
  text-align: center;
  background: linear-gradient(180deg,
      #d4a855 0%,
      #c9993a 40%,
      #a67c28 70%,
      #8b6520 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}

.rpg-dialog-message {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: rgba(212, 200, 176, 0.95);
  text-align: center;
  line-height: 1.25;
  padding: 6px 6px 10px 6px;
}

.rpg-dialog-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 6px;
}

.rpg-dialog-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  padding: 10px 14px;
  min-width: 120px;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(180deg,
      rgba(90, 70, 45, 0.9) 0%,
      rgba(60, 48, 30, 0.95) 50%,
      rgba(45, 35, 22, 0.9) 100%);
  border: 1px solid rgba(140, 110, 60, 0.5);
  color: #c9b896;
  box-shadow:
      0 2px 8px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 rgba(200, 160, 100, 0.15);
}

.rpg-dialog-btn:hover {
  background: linear-gradient(180deg,
      rgba(110, 85, 55, 0.95) 0%,
      rgba(75, 60, 38, 0.95) 50%,
      rgba(55, 42, 26, 0.9) 100%);
  border-color: rgba(180, 140, 80, 0.6);
  color: #ddd0b5;
  box-shadow:
      0 4px 12px rgba(0, 0, 0, 0.6),
      inset 0 1px 0 rgba(200, 160, 100, 0.2);
}

.rpg-dialog-btn:active {
  transform: translateY(1px);
  box-shadow:
      0 1px 4px rgba(0, 0, 0, 0.5),
      inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

.rpg-dialog-btn.danger {
  border-color: rgba(200, 100, 80, 0.55);
  color: rgba(255, 210, 200, 0.95);
  background: linear-gradient(180deg,
      rgba(120, 55, 45, 0.95) 0%,
      rgba(90, 45, 35, 0.95) 60%,
      rgba(70, 35, 25, 0.95) 100%);
}

.rpg-dialog-btn.danger:hover {
  border-color: rgba(240, 140, 100, 0.7);
  background: linear-gradient(180deg,
      rgba(150, 60, 50, 0.95) 0%,
      rgba(100, 45, 35, 0.95) 100%);
}

/* FIX: Cursor para disparo */
#game-canvas.cursor-crosshair {
    cursor: crosshair !important;
}

/* FIX: Indicador de Equipado 'E' basado en clase .equipped */
.inventory-slot.equipped::after {
    content: "E";
    position: absolute;
    top: 2px;
    right: 3px;
    font-size: 10px;
    color: #00ff00;
    font-weight: bold;
    text-shadow: 1px 1px 0 #000;
    pointer-events: none;
    z-index: 20;
}


/* ========================================= */
/* SCROLLBARS MEDIEVALES (IMPROVED)          */
/* ========================================= */

/* Contenedores específicos */
#trade-npc-list,
#trade-player-list,
.item-list,
.scrollable-medieval,
.console-history {
    scrollbar-width: thin !important;
    scrollbar-color: #ffd700 #1a1a1a !important; /* Firefox */
}

/* Webkit (Chrome, Edge, Safari) */
#trade-npc-list::-webkit-scrollbar, #trade-player-list::-webkit-scrollbar,
.item-list::-webkit-scrollbar,
.scrollable-medieval::-webkit-scrollbar,
.console-history::-webkit-scrollbar {
    width: 10px !important; 
    height: 10px !important;
    background: #0f0f0f !important;
}

/* Track */
#trade-npc-list::-webkit-scrollbar-track,
#trade-player-list::-webkit-scrollbar-track,

.item-list::-webkit-scrollbar-track,
.scrollable-medieval::-webkit-scrollbar-track,
.console-history::-webkit-scrollbar-track {
    background: #0f0f0f !important;
    border-left: 1px solid #333 !important;
    box-shadow: inset 0 0 5px rgba(0,0,0,0.5) !important;
}

/* Thumb */
#trade-npc-list::-webkit-scrollbar-thumb,
#trade-player-list::-webkit-scrollbar-thumb,

.item-list::-webkit-scrollbar-thumb,
.scrollable-medieval::-webkit-scrollbar-thumb,
.console-history::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #b8860b, #daa520, #b8860b) !important;
    border: 1px solid #5c4004 !important;
    border-radius: 4px !important;
}

/* Thumb Hover */
#trade-npc-list::-webkit-scrollbar-thumb:hover,
#trade-player-list::-webkit-scrollbar-thumb:hover,

.item-list::-webkit-scrollbar-thumb:hover,
.scrollable-medieval::-webkit-scrollbar-thumb:hover,
.console-history::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #daa520, #ffd700, #daa520) !important;
    border: 1px solid #8b6914 !important;
    cursor: pointer !important;
}

/* ========================================= */
/* SCROLLBAR LISTA HECHIZOS (LOGIN STYLE)    */
/* ========================================= */

#spells-list {
    scrollbar-width: thin;
    scrollbar-color: #8b6d43 transparent;
}

#spells-list::-webkit-scrollbar {
    width: 6px;
    background: transparent;
}

#spells-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
    border-left: none;
    box-shadow: none;
}

#spells-list::-webkit-scrollbar-thumb {
    background: #8b6d43; /* Bronze oscuro plano y elegante */
    border: 1px solid rgba(140, 110, 60, 0.3);
    border-radius: 3px;
}

#spells-list::-webkit-scrollbar-thumb:hover {
    background: #a08050;
    border-color: rgba(180, 140, 80, 0.5);
    cursor: pointer;
}

/* ICONS UPDATE */
.gold-icon-img {
    width: 24px;
    height: 24px;
    image-rendering: pixelated;
    vertical-align: middle;
}

.gold-icon-small {
    width: 18px;
    height: 18px;
    image-rendering: pixelated;
    vertical-align: middle;
    margin-right: 4px;
}

/* Ajustes específicos para el HUD */
.sidebar-gold-compact .gold-icon-img {
    width: 20px;
    height: 20px;
    margin-right: 6px;
}

/* Ajustes banco */
.bank-gold-item {
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ==========================================================================
   MENÚ AO + MODALES HUB (Fase 1–2)
   ========================================================================== */

.game-column-right {
  position: relative;
}

.game-menu-panel {
  position: absolute;
  right: 8px;
  bottom: 58px;
  width: 178px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px;
  background:
    linear-gradient(180deg, rgba(58, 44, 24, 0.97) 0%, rgba(22, 16, 10, 0.98) 100%);
  border: 2px solid var(--border-copper, #8a6a3c);
  border-radius: 8px;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.65),
    inset 0 1px 0 rgba(255, 220, 140, 0.12);
  z-index: 40;
}

.game-menu-panel[hidden] {
  display: none !important;
}

.game-menu-header {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c9a45a;
  padding: 2px 6px 6px;
  border-bottom: 1px solid rgba(180, 140, 80, 0.35);
  margin-bottom: 4px;
}

.game-menu-item {
  width: 100%;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid rgba(180, 140, 80, 0.28);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.28);
  color: #f0e0c0;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
  position: relative;
}

.game-menu-item:hover {
  background: rgba(160, 120, 50, 0.35);
  border-color: rgba(220, 180, 90, 0.7);
  color: #fff4d6;
}

#btn-game-menu {
  position: relative;
}

#btn-game-menu.menu-open {
  border-color: #d4af37;
  color: #ffd700;
}

.menu-notif-dot {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #e24a3b;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45), 0 0 6px rgba(226, 74, 59, 0.65);
  pointer-events: none;
}

.menu-notif-dot[hidden] {
  display: none !important;
}

.game-menu-item .menu-notif-dot {
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}

.game-menu-item.has-party-invite {
  padding-right: 22px;
}

.zone-indicator {
  display: none !important;
}

.faction-indicator {
  margin-top: 2px;
  margin-bottom: 4px;
}

.faction-badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(70, 120, 70, 0.35);
  border: 1px solid rgba(120, 180, 120, 0.45);
  color: #cfe8cf;
}

#btn-safe-mode {
  display: none !important;
}

.quests-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 12px;
  min-height: 280px;
}

.quests-slots-label {
  font-size: 11px;
  color: #d4af37;
  margin-bottom: 6px;
  font-weight: 600;
}

.quests-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.quests-filter-btn {
  flex: 1 1 auto;
  min-width: 0;
  padding: 4px 6px;
  font-size: 10px;
  border-radius: 4px;
  border: 1px solid rgba(180, 140, 80, 0.35);
  background: rgba(0, 0, 0, 0.25);
  color: #cbb892;
  cursor: pointer;
}

.quests-filter-btn.is-active,
.quests-filter-btn:hover {
  border-color: #d4af37;
  color: #fff4d6;
  background: rgba(120, 90, 30, 0.3);
}

.quests-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 280px;
  overflow: auto;
}

.quests-list-item {
  text-align: left;
  padding: 8px;
  border: 1px solid rgba(180, 140, 80, 0.3);
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.25);
  color: #e8dcc0;
  cursor: pointer;
}

.quests-list-item.active,
.quests-list-item-selected,
.quests-list-item:hover {
  border-color: #d4af37;
  background: rgba(120, 90, 30, 0.25);
}

.quests-list-title {
  font-size: 12px;
  font-weight: 600;
}

.quests-list-status {
  font-size: 10px;
  opacity: 0.85;
  margin-top: 2px;
}

.quests-status-active .quests-list-status { color: #8fd48f; }
.quests-status-completed .quests-list-status { color: #d4af37; }
.quests-status-abandoned .quests-list-status { color: #c08080; }
.quests-status-locked .quests-list-status { color: #888; }

.quests-detail {
  min-height: 180px;
  padding: 8px;
  border: 1px solid rgba(180, 140, 80, 0.25);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
  color: #ddd0b4;
  font-size: 12px;
}

.quests-detail h3 {
  margin: 0 0 6px;
  color: #ffd700;
  font-size: 14px;
}

.quests-detail h4 {
  margin: 10px 0 4px;
  color: #c9a45a;
  font-size: 12px;
}

.quests-desc {
  margin: 6px 0;
  line-height: 1.35;
  opacity: 0.92;
}

.quests-meta {
  font-size: 11px;
  color: #cbb892;
}

.quests-badge {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  margin: 0 0 6px;
}

.quests-badge-active {
  background: rgba(60, 120, 60, 0.35);
  border: 1px solid rgba(120, 180, 120, 0.5);
  color: #b8f0c0;
}

.quests-badge-done {
  background: rgba(120, 90, 30, 0.35);
  border: 1px solid rgba(212, 175, 55, 0.5);
  color: #ffd700;
}

.quests-badge-abandoned {
  background: rgba(100, 40, 40, 0.35);
  border: 1px solid rgba(180, 80, 80, 0.5);
  color: #f0b0b0;
}

.quests-progress-list {
  margin: 0;
  padding-left: 18px;
}

.quests-progress-list li.is-done {
  color: #8fd48f;
}

.world-map-window {
  width: min(980px, 96vw);
  max-width: 980px;
  max-height: min(92vh, 860px);
}

.world-map-layout {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  min-height: 0;
}

.world-map-side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
  max-height: min(78vh, 720px);
}

.world-map-side-block {
  padding: 10px;
  border: 1px solid rgba(180, 140, 80, 0.32);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(40, 30, 16, 0.55), rgba(12, 10, 8, 0.72));
}

.world-map-name {
  color: #ffd700;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.world-map-meta {
  color: #cbb892;
  font-size: 11px;
  margin-top: 3px;
}

.world-map-zone-badge {
  display: inline-flex;
  margin-top: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid rgba(180, 140, 80, 0.35);
  color: #e8dcc0;
  background: rgba(0, 0, 0, 0.28);
}

.world-map-zone-badge.is-safe {
  color: #9be39b;
  border-color: rgba(76, 175, 80, 0.45);
  background: rgba(30, 70, 35, 0.35);
}

.world-map-zone-badge.is-unsafe {
  color: #f0a0a0;
  border-color: rgba(200, 80, 80, 0.45);
  background: rgba(70, 25, 25, 0.35);
}

.world-map-stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.world-map-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.world-map-stat span {
  font-size: 10px;
  color: #a8946a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.world-map-stat strong {
  font-size: 12px;
  color: #f0e4c8;
  font-weight: 600;
  line-height: 1.35;
}

.world-map-side-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.world-map-action-btn {
  width: 100%;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(212, 175, 55, 0.45);
  background: linear-gradient(180deg, rgba(90, 70, 28, 0.55), rgba(40, 30, 12, 0.75));
  color: #ffd700;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.world-map-action-btn:hover {
  border-color: #ffd700;
  background: linear-gradient(180deg, rgba(120, 90, 30, 0.65), rgba(55, 40, 14, 0.8));
}

.world-map-action-back {
  border-color: rgba(140, 170, 200, 0.4);
  color: #cde0f0;
  background: linear-gradient(180deg, rgba(40, 55, 70, 0.55), rgba(18, 24, 32, 0.75));
}

.world-map-action-back:hover {
  border-color: #9ec4e8;
}

.world-map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid rgba(180, 140, 80, 0.22);
  background: rgba(0, 0, 0, 0.22);
  font-size: 10px;
  color: #cbb892;
}

.world-map-legend > div {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.world-map-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}

.world-map-dot.you {
  background: #4caf50;
}

.world-map-dot.other {
  background: #ff5555;
}

.world-map-dot.view {
  background: transparent;
  border: 1px solid #fff;
  border-radius: 2px;
  width: 9px;
  height: 7px;
  box-shadow: none;
}

.world-map-maps-panel {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.world-map-section-title {
  margin: 0;
  color: #d4af37;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.world-map-stage {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.world-map-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid rgba(180, 140, 80, 0.28);
  background: rgba(0, 0, 0, 0.28);
}

.world-map-view-label {
  color: #ffd700;
  font-size: 12px;
  font-weight: 700;
}

.world-map-hover {
  color: #9be39b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  min-height: 1em;
}

.world-map-canvas-wrap {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  border-radius: 10px;
  border: 1px solid rgba(212, 175, 55, 0.4);
  background:
    radial-gradient(ellipse at center, rgba(35, 28, 16, 0.9), rgba(8, 8, 8, 0.98)),
    repeating-linear-gradient(
      0deg,
      transparent,
      transparent 3px,
      rgba(255, 215, 0, 0.015) 3px,
      rgba(255, 215, 0, 0.015) 4px
    );
  box-shadow:
    inset 0 0 40px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.4);
}

.world-map-canvas {
  display: block;
  width: min(100%, 640px);
  height: auto;
  aspect-ratio: 1;
  max-height: min(68vh, 640px);
  border: 1px solid rgba(120, 100, 60, 0.45);
  background: #05070a;
  cursor: crosshair;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
}

.world-map-hint {
  margin: 0;
  color: #a8946a;
  font-size: 11px;
  line-height: 1.4;
  text-align: center;
}

.world-map-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  overflow: auto;
  max-height: min(34vh, 280px);
  padding-right: 2px;
}

.world-map-cell {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 5px;
  border: 1px solid rgba(180, 140, 80, 0.28);
  background: rgba(0, 0, 0, 0.28);
  color: #e8dcc0;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease;
}

.world-map-cell:hover {
  border-color: rgba(220, 180, 90, 0.65);
  background: rgba(80, 60, 20, 0.28);
}

.world-map-cell.is-current {
  border-color: #4caf50;
  box-shadow: inset 0 0 0 1px rgba(76, 175, 80, 0.4);
  background: rgba(30, 60, 30, 0.28);
}

.world-map-cell-id {
  flex: 0 0 auto;
  min-width: 22px;
  font-size: 11px;
  color: #d4af37;
  font-weight: 700;
}

.world-map-cell-name {
  flex: 1;
  font-size: 11px;
  opacity: 0.92;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 820px) {
  .world-map-layout {
    grid-template-columns: 1fr;
  }

  .world-map-side {
    max-height: none;
  }

  .world-map-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-height: 160px;
  }

  .world-map-canvas {
    max-height: min(52vh, 520px);
  }
}

.party-nearby-block {
  margin-top: 4px;
}

.party-nearby-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: #c9a45a;
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}

.party-nearby-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 180px;
  overflow: auto;
  padding-right: 2px;
}

.party-nearby-empty {
  padding: 14px 10px;
  text-align: center;
  color: #7a7264;
  font-size: 12px;
  border: 1px dashed rgba(180, 140, 80, 0.25);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.18);
}

.party-nearby-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid rgba(180, 140, 80, 0.28);
  background: rgba(0, 0, 0, 0.25);
  color: #e8dcc0;
  font-size: 11px;
}

button.party-nearby-row {
  cursor: pointer;
  font: inherit;
}

.party-nearby-row:hover {
  border-color: rgba(212, 175, 55, 0.55);
  background: rgba(120, 90, 30, 0.2);
}

.party-nearby-info {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.party-nearby-avatar {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
  color: #1a1208;
  background: linear-gradient(180deg, #d4af37, #8b5a2b);
}

.party-nearby-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}

.party-nearby-text strong {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.party-nearby-text span,
.party-nearby-row > span {
  opacity: 0.75;
  white-space: nowrap;
  font-size: 10px;
}

.party-nearby-invite {
  flex-shrink: 0;
  padding: 5px 10px;
  border-radius: 4px;
  border: 1px solid #4CAF50;
  background: linear-gradient(to bottom, #2a4a25, #1a3515);
  color: #4CAF50;
  font-size: 11px;
  cursor: pointer;
}

.party-nearby-invite:hover {
  background: linear-gradient(to bottom, #3a5a35, #2a4525);
}

.party-nearby-invite:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.options-chat-help {
  margin: 0;
  padding-left: 18px;
  color: #cbb892;
  font-size: 12px;
  line-height: 1.55;
}

.options-chat-help code {
  color: #ffd700;
  font-size: 11px;
}

/* Ranking styles moved to styles/ranking.css (linked from index.html). */

.clan-invite-panel {
  margin: 8px 0 10px;
  padding: 8px;
  border: 1px solid rgba(180, 140, 80, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.2);
}

.stats-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.stats-panel-card {
  padding: 10px;
  border: 1px solid rgba(180, 140, 80, 0.3);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
}

.stats-panel-card h4 {
  margin: 0 0 8px;
  color: #ffd700;
  font-size: 13px;
}

.stats-panel-wide {
  grid-column: 1 / -1;
}

.stats-panel-skills-action {
  display: flex;
  justify-content: center;
  padding: 12px 10px;
}

.stats-panel-skills-action .modal-btn-primary {
  min-width: 180px;
}

.stats-kv-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
  font-size: 12px;
  color: #ddd0b4;
}

.friends-add-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.friends-add-row .modal-input {
  flex: 1;
}

.friends-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow: auto;
}

.friends-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid rgba(180, 140, 80, 0.28);
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
}

.friends-row.is-online {
  border-color: rgba(76, 175, 80, 0.45);
}

.friends-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.friends-row-info strong {
  color: #f0e0c0;
  font-size: 13px;
}

.friends-status {
  font-size: 11px;
  color: #a89878;
}

.friends-row.is-online .friends-status {
  color: #8fd48f;
}

.friends-row-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

@media (max-width: 700px) {
  .quests-layout,
  .stats-panel-grid {
    grid-template-columns: 1fr;
  }
  .game-menu-panel {
    right: 12px;
    bottom: 72px;
  }
  .friends-row {
    flex-direction: column;
    align-items: stretch;
  }
  .friends-row-actions {
    justify-content: flex-end;
  }
}