/* ============================================================================
   Aoe2MG Core — Medieval/Dark theme
   Variables y clases compartidas para el header, dashboard y futuros plugins
   de minijuego. Estilo coherente con el sitio legacy (marrón #72604a,
   naranja #fcab59, fondo oscuro).
   ============================================================================ */

:root {
    /* Paleta */
    --aoe2mg-bg:           #1a1410;
    --aoe2mg-bg-alt:       #221a14;
    --aoe2mg-panel:        #2b211a;
    --aoe2mg-panel-2:      #362820;
    --aoe2mg-border:       #4a3a2d;
    --aoe2mg-text:         #f1e6d2;
    --aoe2mg-text-muted:   #b5a48a;
    --aoe2mg-accent:       #fcab59;
    --aoe2mg-accent-dim:   #c9843d;
    --aoe2mg-brown:        #72604a;
    --aoe2mg-danger:       #c14a3a;
    --aoe2mg-success:      #6ea34a;

    /* Tipografía */
    --aoe2mg-font-body:    "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;
    --aoe2mg-font-display: "Georgia", "Times New Roman", serif;

    /* Espaciado y radios */
    --aoe2mg-radius:       6px;
    --aoe2mg-radius-lg:    10px;
    --aoe2mg-gap:          16px;
    --aoe2mg-shadow:       0 4px 14px rgba(0, 0, 0, 0.45);
}

.aoe2mg-header,
.aoe2mg-dashboard {
    font-family: var(--aoe2mg-font-body);
    color: var(--aoe2mg-text);
    box-sizing: border-box;
}

.aoe2mg-header *,
.aoe2mg-dashboard *,
.aoe2mg-header *::before,
.aoe2mg-dashboard *::before,
.aoe2mg-header *::after,
.aoe2mg-dashboard *::after {
    box-sizing: border-box;
}

/* ============================================================================
   Header
   ============================================================================ */
.aoe2mg-header {
    background: linear-gradient(180deg, var(--aoe2mg-panel) 0%, var(--aoe2mg-bg-alt) 100%);
    border-bottom: 1px solid var(--aoe2mg-border);
    box-shadow: var(--aoe2mg-shadow);
    position: relative;
    z-index: 100;
}

.aoe2mg-header__inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 22px;
}

.aoe2mg-header__brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--aoe2mg-text);
    text-decoration: none;
    font-family: var(--aoe2mg-font-display);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.aoe2mg-header__brand:hover {
    color: var(--aoe2mg-accent);
}

.aoe2mg-header__logo {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: var(--aoe2mg-radius);
}

.aoe2mg-header__title {
    color: var(--aoe2mg-accent);
}

.aoe2mg-header__nav {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-left: 12px;
    flex: 1 1 auto;
}

.aoe2mg-header__navlink {
    color: var(--aoe2mg-text-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    padding: 6px 4px;
    border-bottom: 2px solid transparent;
    transition: color 120ms ease, border-color 120ms ease;
}

.aoe2mg-header__navlink:hover {
    color: var(--aoe2mg-accent);
}

.aoe2mg-header__navlink.is-current {
    color: var(--aoe2mg-accent);
    border-bottom-color: var(--aoe2mg-accent);
}

.aoe2mg-header__user {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.aoe2mg-header__login {
    background: var(--aoe2mg-accent);
    color: #1a1410;
    padding: 8px 18px;
    border-radius: var(--aoe2mg-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background 120ms ease;
}

.aoe2mg-header__login:hover {
    background: var(--aoe2mg-accent-dim);
}

.aoe2mg-header__pill {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--aoe2mg-panel-2);
    border: 1px solid var(--aoe2mg-border);
    border-radius: 999px;
    padding: 4px 4px 4px 14px;
}

.aoe2mg-header__pill-name {
    font-size: 13px;
    color: var(--aoe2mg-text);
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.aoe2mg-header__pill-action {
    background: var(--aoe2mg-brown);
    color: var(--aoe2mg-text);
    padding: 4px 10px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}

.aoe2mg-header__pill-action:hover {
    background: var(--aoe2mg-accent);
    color: #1a1410;
}

@media (max-width: 720px) {
    .aoe2mg-header__inner {
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 12px;
    }
    .aoe2mg-header__nav {
        order: 3;
        flex-basis: 100%;
        margin-left: 0;
        overflow-x: auto;
    }
}

/* ============================================================================
   Dashboard
   ============================================================================ */
.aoe2mg-dashboard {
    max-width: 1180px;
    margin: 32px auto;
    padding: 0 22px;
}

.aoe2mg-dashboard__head {
    margin-bottom: 22px;
    text-align: center;
}

.aoe2mg-dashboard__title {
    font-family: var(--aoe2mg-font-display);
    font-size: 32px;
    color: var(--aoe2mg-accent);
    margin: 0 0 6px 0;
}

.aoe2mg-dashboard__sub {
    color: var(--aoe2mg-text-muted);
    margin: 0;
    font-size: 15px;
}

.aoe2mg-dashboard__empty {
    background: var(--aoe2mg-panel);
    border: 1px dashed var(--aoe2mg-border);
    border-radius: var(--aoe2mg-radius-lg);
    padding: 28px;
    color: var(--aoe2mg-text-muted);
    text-align: center;
}

.aoe2mg-dashboard__games {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--aoe2mg-gap);
}

.aoe2mg-dashboard__games--grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.aoe2mg-dashboard__games--list {
    grid-template-columns: 1fr;
}

.aoe2mg-dashboard__game {
    background: var(--aoe2mg-panel);
    border: 1px solid var(--aoe2mg-border);
    border-radius: var(--aoe2mg-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: transform 120ms ease, border-color 120ms ease;
}

.aoe2mg-dashboard__game:hover {
    transform: translateY(-2px);
    border-color: var(--aoe2mg-accent-dim);
}

.aoe2mg-dashboard__game-icon {
    width: 64px;
    height: 64px;
    background: var(--aoe2mg-panel-2);
    border: 1px solid var(--aoe2mg-border);
    border-radius: var(--aoe2mg-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.aoe2mg-dashboard__game-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aoe2mg-dashboard__game-initial {
    font-family: var(--aoe2mg-font-display);
    font-size: 28px;
    color: var(--aoe2mg-accent);
    font-weight: 700;
}

.aoe2mg-dashboard__game-body {
    flex: 1 1 auto;
}

.aoe2mg-dashboard__game-title {
    font-family: var(--aoe2mg-font-display);
    font-size: 20px;
    color: var(--aoe2mg-text);
    margin: 0 0 4px 0;
}

.aoe2mg-dashboard__game-desc {
    color: var(--aoe2mg-text-muted);
    font-size: 14px;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.aoe2mg-dashboard__game-status {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--aoe2mg-brown);
    color: var(--aoe2mg-text);
}

.aoe2mg-dashboard__game-status--ready     { background: var(--aoe2mg-success); color: #0d1a08; }
.aoe2mg-dashboard__game-status--migrating { background: var(--aoe2mg-accent);  color: #1a1410; }
.aoe2mg-dashboard__game-status--planned   { background: var(--aoe2mg-brown);   color: var(--aoe2mg-text); }

.aoe2mg-dashboard__game-action {
    margin-top: auto;
}

.aoe2mg-dashboard__btn {
    display: inline-block;
    background: var(--aoe2mg-accent);
    color: #1a1410;
    padding: 10px 22px;
    border-radius: var(--aoe2mg-radius);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    transition: background 120ms ease;
}

.aoe2mg-dashboard__btn:hover {
    background: var(--aoe2mg-accent-dim);
}

.aoe2mg-dashboard__btn.is-disabled {
    background: var(--aoe2mg-panel-2);
    color: var(--aoe2mg-text-muted);
    cursor: not-allowed;
}

.aoe2mg-dashboard__game-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.aoe2mg-dashboard__game-badge--guests {
    background: rgba(59, 130, 246, 0.2);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.4);
}
.aoe2mg-dashboard__game-badge--registered {
    background: rgba(245, 158, 11, 0.15);
    color: #fde047;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
/* Meta de cada card del dashboard (antes inline en dashboard.php) */
.aoe2mg-dashboard__game-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}