/* =============================================================================
   MaeloRO 25/09/2026 — portada (index.php): retoque visual "3D"
   -----------------------------------------------------------------------------
   Se carga DESPUES del CSS principal de la portada y solo cambia aspecto:
   relieve en botones y pildoras, profundidad en tarjetas y paneles, luz superior
   en la barra fija y el pie. No toca ids, clases, textos ni JS.
   Para desactivar: quitar la linea <link rel="stylesheet" href="home-3d.css"> de index.php.
   ============================================================================= */

:root {
    --h3d-edge: rgba(255,255,255,.10);
    --h3d-edge-soft: rgba(255,255,255,.05);
    --h3d-gold-glow: rgba(255,215,0,.22);
    --h3d-violet-glow: rgba(182,156,255,.22);
    --h3d-card: inset 0 1px 0 var(--h3d-edge), 0 2px 4px rgba(0,0,0,.45), 0 18px 40px -16px rgba(0,0,0,.9);
    --h3d-card-hover: inset 0 1px 0 rgba(255,255,255,.14), 0 4px 8px rgba(0,0,0,.45), 0 26px 50px -16px rgba(0,0,0,.95), 0 0 30px -6px var(--h3d-violet-glow);
    --h3d-bevel-gold: inset 0 2px 0 rgba(255,255,255,.60), inset 0 -3px 0 rgba(120,80,30,.35), inset 0 0 0 1px rgba(120,80,30,.25), 0 10px 22px -8px rgba(0,0,0,.75), 0 0 22px var(--h3d-gold-glow);
    --h3d-bevel-gold-hover: inset 0 2px 0 rgba(255,255,255,.70), inset 0 -3px 0 rgba(120,80,30,.35), inset 0 0 0 1px rgba(120,80,30,.25), 0 18px 34px -10px rgba(0,0,0,.85), 0 0 34px rgba(255,215,0,.34);
    --h3d-pill: inset 0 1px 0 var(--h3d-edge), inset 0 -1px 0 rgba(0,0,0,.35), 0 6px 16px -6px rgba(0,0,0,.8);
}

/* ---------- barra superior: cristal con luz arriba y sombra abajo ---------- */
.top-bar {
    box-shadow: inset 0 1px 0 var(--h3d-edge), 0 12px 34px -16px rgba(0,0,0,.95), 0 1px 0 rgba(182,156,255,.14);
}
.btn-nav {
    box-shadow: var(--h3d-bevel-gold);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.btn-nav:hover { transform: translateY(-1px); box-shadow: var(--h3d-bevel-gold-hover); filter: saturate(1.08) }
.btn-nav:active { transform: translateY(0) scale(.98); box-shadow: inset 0 3px 6px rgba(0,0,0,.35), 0 0 16px var(--h3d-gold-glow) }

/* ---------- botones grandes (PLAY / REGISTER / DISCORD / FORUM) ---------- */
.btn {
    box-shadow: var(--h3d-bevel-gold);
    text-shadow: 0 1px 0 rgba(255,255,255,.35);
}
.btn:hover { box-shadow: var(--h3d-bevel-gold-hover) }
.btn:active { transform: translateY(0) scale(.98); box-shadow: inset 0 3px 8px rgba(0,0,0,.35), 0 0 18px var(--h3d-gold-glow) }

/* ---------- pildoras de estado y jugadores online ---------- */
.server-item {
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 55%), rgba(9,7,20,.78);
    box-shadow: var(--h3d-pill), 0 0 16px rgba(182,156,255,.12);
    transition: transform .18s ease, box-shadow .18s ease;
}
.server-item:hover { transform: translateY(-1px); box-shadow: var(--h3d-pill), 0 0 22px rgba(182,156,255,.24) }
.status-dot { box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 8px currentColor }
.online-pill {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%), rgba(127,240,200,.10);
    box-shadow: var(--h3d-pill), 0 0 16px rgba(127,240,200,.14);
}
.online-pill-dot { box-shadow: 0 0 0 2px rgba(0,0,0,.35), 0 0 8px currentColor }

/* ---------- tarjetas: castillos / raid / exp ---------- */
.info-col {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 45%), rgba(255,255,255,.035);
    box-shadow: var(--h3d-card);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.info-col:hover { transform: translateY(-3px); box-shadow: var(--h3d-card-hover); border-color: rgba(182,156,255,.34) }
.info-row { border-bottom-color: rgba(255,255,255,.07) }

/* ---------- paneles grandes (Welcome, features, pasos) ---------- */
.feature {
    box-shadow: var(--h3d-card), 0 0 40px -12px var(--h3d-violet-glow);
}
.feature::before {
    content: ''; position: absolute; left: 10%; right: 10%; top: 0; height: 1px; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,.55), rgba(182,156,255,.7), rgba(255,215,0,.55), transparent);
}
.feature-mini {
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 50%), rgba(255,255,255,.035);
    box-shadow: var(--h3d-card);
}
.feature-mini:hover { transform: translateY(-4px); box-shadow: var(--h3d-card-hover); border-color: rgba(182,156,255,.4) }
.feature-mini-icon, .step-num {
    box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 8px 18px -6px rgba(0,0,0,.8), 0 0 18px var(--h3d-violet-glow);
}

/* ---------- ventanas de cuenta (login, registro, donaciones, tickets) ---------- */
.panel-card {
    box-shadow: inset 0 1px 0 var(--h3d-edge), 0 0 0 1px rgba(0,0,0,.6), 0 40px 90px -24px rgba(0,0,0,.95), 0 14px 40px -10px var(--h3d-violet-glow);
}
.panel-action-btn {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -2px 0 rgba(0,0,0,.25), 0 8px 18px -6px rgba(0,0,0,.75);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.panel-action-btn:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.34), inset 0 -2px 0 rgba(0,0,0,.25), 0 14px 26px -8px rgba(0,0,0,.85) }
.panel-action-btn:active { transform: translateY(0) scale(.98) }
.panel-card input, .panel-card select, .panel-card textarea {
    box-shadow: inset 0 2px 4px rgba(0,0,0,.45), inset 0 0 0 1px rgba(0,0,0,.2);
}
.booster-cta-btn {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.30), inset 0 -2px 0 rgba(0,0,0,.25), 0 10px 22px -8px rgba(0,0,0,.8), 0 0 20px rgba(114,124,245,.30);
    transition: transform .18s ease, box-shadow .18s ease;
}
.booster-cta-btn:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 16px 30px -10px rgba(0,0,0,.9), 0 0 28px rgba(114,124,245,.45) }

/* ---------- pie ---------- */
footer { box-shadow: inset 0 1px 0 var(--h3d-edge-soft), 0 -18px 40px -24px rgba(0,0,0,.9) }

/* ---------- movil: sin "lift" (no hay hover) y sombras mas cortas ---------- */
@media (max-width: 700px) {
    .info-col:hover, .feature-mini:hover, .server-item:hover { transform: none }
    .feature { box-shadow: var(--h3d-card) }
}
@media (prefers-reduced-motion: reduce) {
    .btn, .btn-nav, .server-item, .info-col, .feature-mini, .panel-action-btn, .booster-cta-btn { transition: none }
}