/* ============================================================
   OCEANFALL — CSS Base
   Variables globales, reset, tipografía y componentes comunes
   ============================================================ */

/* ── Variables CSS (tema por defecto: Costa del Amanecer) ── */
:root {
    /* Colores base */
    --color-bg:         #0a0f1e;
    --color-surface:    #12192e;
    --color-panel:      #1a2540;
    --color-border:     #2a3a5e;
    --color-wood:       #5c3d1e;
    --color-wood-light: #8b6330;
    --color-parchment:  #f5ead6;
    --color-ink:        #2c1a0e;

    /* Colores de juego */
    --color-gold:       #d4a837;
    --color-gold-light: #f0c84a;
    --color-ocean:      #1a6b9c;
    --color-ocean-deep: #0d3d5c;
    --color-danger:     #8b1a1a;
    --color-success:    #1a6b3a;
    --color-warning:    #8b6914;
    --color-abyss:      #1a0d2e;
    --color-corruption: #4a0d6e;
    --color-nfc:        #00c9a7;

    /* Rarezas de loot */
    --rarity-common:    #9e9e9e;
    --rarity-rare:      #1565c0;
    --rarity-epic:      #6a1b9a;
    --rarity-legendary: #d4a837;
    --rarity-cursed:    #b71c1c;
    --rarity-abyssal:   #4a148c;
    --rarity-ancestral: #00acc1;

    /* Tipografía */
    --font-main:    'Georgia', 'Times New Roman', serif;
    --font-ui:      system-ui, -apple-system, sans-serif;
    --font-mono:    'Courier New', monospace;

    /* Espaciado */
    --spacing-xs:   0.25rem;
    --spacing-sm:   0.5rem;
    --spacing-md:   1rem;
    --spacing-lg:   1.5rem;
    --spacing-xl:   2rem;

    /* Bordes */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;

    /* Transiciones */
    --transition:   0.2s ease;
    --transition-slow: 0.4s ease;
}

/* ── Reset ───────────────────────────────────────────────── */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    overflow: hidden; /* El scroll es dentro del escritorio */
}

body {
    background-color: var(--color-bg);
    color: var(--color-parchment);
    font-family: var(--font-main);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--color-gold);
    text-decoration: none;
    transition: color var(--transition);
}
a:hover { color: var(--color-gold-light); }

img { max-width: 100%; display: block; }

/* ── El Escritorio del Capitán (contenedor raíz) ─────────── */
#captain-desk {
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(ellipse at top, #1a2f4a 0%, var(--color-bg) 60%);
    overflow: hidden;
}

/* ── Header de estado ─────────────────────────────────────── */
#desk-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: rgba(10, 20, 40, 0.9);
    border-bottom: 1px solid var(--color-border);
    backdrop-filter: blur(4px);
    z-index: 100;
    flex-shrink: 0;
}

.captain-name {
    font-size: 1rem;
    font-weight: bold;
    color: var(--color-gold);
}
.captain-title {
    font-size: 0.75rem;
    color: var(--color-parchment);
    opacity: 0.7;
    margin-left: var(--spacing-sm);
}
.ship-status {
    font-size: 0.85rem;
    color: var(--color-ocean);
}
.gold-display {
    font-size: 1rem;
    color: var(--color-gold);
    font-weight: bold;
    margin-right: var(--spacing-sm);
}
.btn-logout {
    color: var(--color-parchment);
    opacity: 0.5;
    font-size: 1.1rem;
    padding: var(--spacing-xs);
}
.btn-logout:hover { opacity: 1; color: var(--color-danger); }

/* ── Contenido principal ─────────────────────────────────── */
#desk-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: var(--spacing-md);
    scrollbar-width: thin;
    scrollbar-color: var(--color-border) transparent;
}

/* ── Botones ─────────────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    transition: background var(--transition), transform var(--transition);
    letter-spacing: 0.03em;
}
.btn:hover    { transform: translateY(-1px); }
.btn:active   { transform: translateY(0); }
.btn-primary  { background: var(--color-ocean); color: #fff; }
.btn-primary:hover { background: #1e80b8; color: #fff; }
.btn-secondary { background: var(--color-panel); color: var(--color-parchment); border: 1px solid var(--color-border); }
.btn-secondary:hover { background: var(--color-border); color: var(--color-parchment); }
.btn-nfc      { background: var(--color-nfc); color: #000; }
.btn-nfc:hover { background: #00e5bf; color: #000; }
.btn-full     { width: 100%; }
.btn-sm       { padding: var(--spacing-xs) var(--spacing-md); font-size: 0.8rem; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 99px;
    font-size: 0.7rem;
    font-family: var(--font-ui);
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.badge-active { background: var(--color-success); color: #fff; }
.badge-port   { background: var(--color-ocean-deep); color: var(--color-ocean); border: 1px solid var(--color-ocean); }

/* ── Alertas ─────────────────────────────────────────────── */
.alert {
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: 0.9rem;
}
.alert-error   { background: rgba(139, 26, 26, 0.3); border: 1px solid var(--color-danger); color: #ff8a8a; }
.alert-success { background: rgba(26, 107, 58, 0.3); border: 1px solid var(--color-success); color: #8affb8; }
.alert-info    { background: rgba(26, 107, 156, 0.2); border: 1px solid var(--color-ocean); color: #8acfff; }

/* ── Formularios (Auth) ──────────────────────────────────── */
.auth-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100%;
    padding: var(--spacing-xl) var(--spacing-md);
    gap: var(--spacing-lg);
}

.auth-logo {
    text-align: center;
}
.game-title {
    font-size: 2.5rem;
    color: var(--color-gold);
    text-shadow: 0 0 20px rgba(212, 168, 55, 0.4);
    letter-spacing: 0.1em;
}
.game-subtitle {
    color: var(--color-parchment);
    opacity: 0.6;
    font-size: 0.9rem;
    margin-top: var(--spacing-xs);
}

.auth-card {
    width: 100%;
    max-width: 400px;
    background: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
}

.auth-form { display: flex; flex-direction: column; gap: var(--spacing-md); }

.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}
.form-group label {
    font-size: 0.85rem;
    color: var(--color-parchment);
    opacity: 0.8;
    font-family: var(--font-ui);
}
.form-group input {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    color: var(--color-parchment);
    font-family: var(--font-main);
    font-size: 1rem;
    transition: border-color var(--transition);
    width: 100%;
}
.form-group input:focus {
    outline: none;
    border-color: var(--color-ocean);
}
.form-hint { font-size: 0.75rem; color: var(--color-parchment); opacity: 0.5; }
.optional   { opacity: 0.5; font-size: 0.8rem; }

.auth-divider {
    text-align: center;
    color: var(--color-border);
    margin: var(--spacing-md) 0;
    font-size: 0.8rem;
}

.nfc-section { text-align: center; }
.nfc-hint    { font-size: 0.85rem; color: var(--color-parchment); opacity: 0.7; margin-bottom: var(--spacing-sm); }
.nfc-sub     { font-size: 0.75rem; color: var(--color-nfc); opacity: 0.7; margin-top: var(--spacing-xs); }

.auth-links  { text-align: center; margin-top: var(--spacing-md); font-size: 0.85rem; }

/* ── Estado vacío ────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: var(--spacing-lg);
    color: var(--color-parchment);
    opacity: 0.5;
}
.empty-state p { margin-bottom: var(--spacing-sm); }

/* ── Barras de progreso ──────────────────────────────────── */
.bar {
    height: 4px;
    border-radius: 2px;
    transition: width var(--transition-slow);
}
.hp-bar         { background: var(--color-success); }
.stress-bar     { background: var(--color-warning); }
.corruption-bar { background: var(--color-corruption); }

/* ── Responsivo Mobile-First ─────────────────────────────── */
@media (max-width: 480px) {
    .game-title { font-size: 2rem; }
    .auth-card  { padding: var(--spacing-lg); }
    #desk-header { padding: var(--spacing-xs) var(--spacing-sm); }
    .captain-title { display: none; }
}