:root {
    --bg: #0f172a;
    --panel: rgba(15, 23, 42, 0.92);
    --panel-soft: rgba(30, 41, 59, 0.92);
    --border: rgba(148, 163, 184, 0.24);
    --text: #e5e7eb;
    --muted: #aeb8c8;
    --accent: #f59e0b;
    --accent-2: #38bdf8;
    --danger: #ef4444;
    --ok: #22c55e;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(245, 158, 11, 0.18), transparent 32rem),
        radial-gradient(circle at top right, rgba(56, 189, 248, 0.14), transparent 28rem),
        var(--bg);
    color: var(--text);
    font-family: Segoe UI, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}
.topbar { display:flex; justify-content:space-between; align-items:center; padding:22px 28px 14px; gap:16px; }
.topbar h1 { margin:0; font-size:clamp(1.8rem, 3vw, 3rem); letter-spacing:0.04em; }
.topbar p { margin:4px 0 0; color:var(--muted); }
.status-pill { border:1px solid var(--border); background:rgba(34,197,94,.12); color:#bbf7d0; padding:8px 14px; border-radius:999px; font-weight:700; white-space:nowrap; }
.tabs { display:flex; gap:8px; padding:0 28px 18px; flex-wrap:wrap; }
.tab, button { border:0; border-radius:12px; padding:11px 16px; cursor:pointer; font-weight:700; color:var(--text); background:rgba(51,65,85,.9); }
.tab.active, .primary { background:linear-gradient(135deg, #f59e0b, #ef4444); color:#fff7ed; }
.secondary { background:rgba(71,85,105,.95); }
button:disabled { opacity:.45; cursor:not-allowed; }
button.small { padding:7px 10px; font-size:.85rem; }
main { padding:0 28px 32px; }
.view { display:none; }
.view.active { display:block; }
.panel { background:var(--panel); border:1px solid var(--border); border-radius:22px; padding:20px; box-shadow:0 18px 42px rgba(0,0,0,.28); }
.hero { margin-bottom:18px; }
.hero h2, .section-head h2, .duel-toolbar h2 { margin-top:0; font-size:1.8rem; }
.hero p, .section-head p, .duel-toolbar p, .panel li, .summary-box { color:var(--muted); line-height:1.55; }
.hero-actions, .toolbar-actions, .action-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.grid { display:grid; gap:18px; }
.grid.two { grid-template-columns:repeat(2, minmax(0, 1fr)); }
.section-head, .duel-toolbar { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.filters { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.inline-filters { justify-content:flex-start; margin-bottom:12px; }
input, select { min-height:42px; border:1px solid var(--border); border-radius:12px; padding:0 12px; color:var(--text); background:rgba(15,23,42,.92); max-width:100%; }
option { color:#111827; }
.summary-box code { color:#fef3c7; }
.soft-list { padding-left:22px; }
.card-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:16px; }
.game-card { min-height:360px; background:linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.96)); border:1px solid rgba(226,232,240,.18); border-radius:18px; padding:12px; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:8px; }
.game-card.selectable { cursor:pointer; }
.game-card.selected { outline:3px solid var(--accent); box-shadow:0 0 0 6px rgba(245,158,11,.16); }
.card-image { height:132px; border-radius:14px; background:linear-gradient(135deg, rgba(245,158,11,.16), rgba(56,189,248,.10)); border:1px solid rgba(255,255,255,.08); overflow:hidden; display:flex; align-items:center; justify-content:center; color:rgba(255,255,255,.3); }
.card-image img { width:100%; height:100%; object-fit:cover; display:block; }
.card-top { display:flex; justify-content:space-between; align-items:center; }
.cost { min-width:34px; height:34px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background:rgba(245,158,11,.95); color:#111827; font-weight:900; }
.faction { color:#bfdbfe; font-size:.9rem; }
.card-name { margin:0; font-size:1.05rem; }
.card-type { color:#cbd5e1; font-size:.86rem; }
.stats { display:flex; gap:8px; color:#fef3c7; font-weight:800; }
.ability { color:#dbeafe; font-size:.88rem; line-height:1.35; margin:0; flex:1; }
.dons { display:flex; gap:6px; flex-wrap:wrap; }
.don { font-size:.75rem; border:1px solid rgba(245,158,11,.35); color:#fde68a; border-radius:999px; padding:4px 7px; background:rgba(245,158,11,.08); }
.deck-name-row { display:flex; gap:10px; align-items:center; margin-bottom:18px; flex-wrap:wrap; }
.deck-name-row label { color:var(--muted); }
.deck-name-row input { min-width:min(360px, 100%); flex:1; }
.mini-list { display:flex; flex-direction:column; gap:8px; max-height:640px; overflow:auto; padding-right:4px; }
.mini-row { border:1px solid var(--border); background:rgba(30,41,59,.78); border-radius:14px; padding:10px; display:flex; justify-content:space-between; align-items:center; gap:10px; }
.mini-row strong { display:block; }
.mini-row span { color:var(--muted); font-size:.86rem; }
.deck-summary { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.game-board { display:grid; grid-template-columns:1fr; gap:14px; }
.hidden { display:none !important; }
.player-zone { background:rgba(15,23,42,.76); border:1px solid var(--border); border-radius:22px; padding:16px; }
.player-info { display:flex; justify-content:space-between; gap:10px; color:#fef3c7; font-weight:800; flex-wrap:wrap; }
.pilares { display:flex; gap:8px; margin:10px 0; }
.pilar { border:1px solid var(--border); border-radius:14px; padding:10px 14px; background:rgba(71,85,105,.55); font-weight:800; }
.battlefield, .hand { display:grid; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr)); gap:10px; min-height:104px; }
.battlefield .game-card, .hand .game-card { min-height:280px; }
.battlefield .card-image, .hand .card-image { height:95px; }
.center-panel { position:sticky; top:0; z-index:2; }
.phase-box { display:flex; justify-content:space-between; gap:12px; margin-bottom:14px; align-items:center; }
.phase-box strong { color:#fef3c7; font-size:1.2rem; }
.selection-box { border:1px dashed rgba(226,232,240,.25); border-radius:14px; padding:12px; color:var(--muted); margin-top:12px; }
.log { background:rgba(2,6,23,.62); border:1px solid var(--border); border-radius:14px; padding:12px; margin-top:12px; color:#dbeafe; max-height:170px; overflow:auto; white-space:pre-wrap; font-family:Consolas, monospace; font-size:.9rem; }
details { margin-top:12px; }
summary { cursor:pointer; color:#bfdbfe; font-weight:700; margin-bottom:10px; }
.toast { position:fixed; right:24px; bottom:24px; background:#111827; color:#fff; border:1px solid var(--border); border-radius:16px; padding:14px 16px; box-shadow:0 16px 40px rgba(0,0,0,.4); z-index:10; max-width:420px; }
.toast.error { border-color:rgba(239,68,68,.8); }
.toast.ok { border-color:rgba(34,197,94,.8); }
@media (max-width: 900px) {
    .grid.two { grid-template-columns:1fr; }
    .section-head, .duel-toolbar { align-items:stretch; flex-direction:column; }
    .filters, .toolbar-actions { justify-content:flex-start; }
    .topbar { flex-direction:column; align-items:flex-start; }
}
.don.status { border-color: rgba(56,189,248,.55); color:#bae6fd; background:rgba(56,189,248,.12); }



.social-layout { display:grid; grid-template-columns:minmax(260px, .62fr) minmax(300px, .88fr) minmax(360px, 1.5fr); gap:18px; align-items:start; }
.social-status-card { display:flex; flex-direction:column; gap:12px; }
.social-status-card label { display:flex; flex-direction:column; gap:6px; color:var(--muted); }
.social-summary-box { border:1px solid var(--border); background:rgba(15,23,42,.62); border-radius:16px; padding:14px; color:#dbeafe; font-weight:800; }
.social-online-list { display:flex; flex-direction:column; gap:10px; }
.social-player-card { display:flex; align-items:center; gap:12px; border:1px solid var(--border); background:rgba(30,41,59,.72); border-radius:18px; padding:12px; }
.social-player-card.self { border-color:rgba(56,189,248,.5); background:rgba(56,189,248,.08); }
.social-player-avatar { width:48px; height:48px; border-radius:999px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(226,232,240,.22); }
.social-player-avatar img, .social-player-avatar .avatar-placeholder { width:100%; height:100%; }
.social-player-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.social-player-title { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.social-player-sub { color:var(--muted); font-size:.86rem; }
.social-self-badge { border:1px solid rgba(56,189,248,.45); color:#bae6fd; border-radius:999px; padding:2px 7px; font-size:.75rem; font-weight:800; }
.social-status { width:max-content; border:1px solid rgba(34,197,94,.45); color:#bbf7d0; border-radius:999px; padding:3px 8px; font-size:.78rem; font-weight:800; background:rgba(34,197,94,.08); }
.social-status-looking { border-color:rgba(245,158,11,.5); color:#fde68a; background:rgba(245,158,11,.1); }
.social-status-duel { border-color:rgba(239,68,68,.55); color:#fecaca; background:rgba(239,68,68,.1); }
.social-status-away { border-color:rgba(148,163,184,.55); color:#cbd5e1; background:rgba(148,163,184,.09); }
.social-player-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.social-empty { border:1px dashed rgba(148,163,184,.35); border-radius:16px; padding:18px; color:var(--muted); text-align:center; }

.social-challenges-list { display:flex; flex-direction:column; gap:10px; }
.social-challenge-card { display:flex; justify-content:space-between; gap:10px; align-items:center; border:1px solid var(--border); background:rgba(15,23,42,.72); border-radius:16px; padding:12px; }
.social-challenge-card strong { display:block; color:#e5e7eb; }
.social-challenge-card span { display:block; color:var(--muted); font-size:.84rem; margin-top:3px; }
.social-challenge-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.social-pending-pill { border:1px solid rgba(245,158,11,.4); color:#fde68a !important; background:rgba(245,158,11,.1); border-radius:999px; padding:4px 8px; font-size:.76rem !important; font-weight:800; white-space:nowrap; }
.social-challenge-accepted { border-color:rgba(34,197,94,.45); }
.social-challenge-rejected, .social-challenge-expired { border-color:rgba(148,163,184,.35); opacity:.86; }
.social-chat-overlay { z-index:1400; }
.social-chat-modal { width:min(620px, calc(100vw - 28px)); max-height:min(720px, calc(100vh - 28px)); display:flex; flex-direction:column; }
.social-chat-avatar { width:42px; height:42px; border-radius:999px; overflow:hidden; flex:0 0 auto; border:1px solid rgba(226,232,240,.22); }
.social-chat-avatar img, .social-chat-avatar .avatar-placeholder { width:100%; height:100%; }
.social-chat-messages { min-height:260px; max-height:420px; overflow:auto; display:flex; flex-direction:column; gap:8px; padding:12px; border:1px solid var(--border); border-radius:16px; background:rgba(2,6,23,.55); }
.social-chat-message { max-width:78%; border:1px solid rgba(148,163,184,.25); border-radius:16px; padding:8px 10px; background:rgba(30,41,59,.8); }
.social-chat-message.self { align-self:flex-end; border-color:rgba(56,189,248,.38); background:rgba(56,189,248,.12); }
.social-chat-message.other { align-self:flex-start; }
.social-chat-message span { display:block; color:var(--muted); font-size:.76rem; margin-bottom:3px; }
.social-chat-message p { margin:0; line-height:1.35; }
.social-chat-form { display:flex; gap:8px; margin-top:12px; }
.social-chat-form input { flex:1; }
.social-empty.compact { padding:10px 12px; font-size:.86rem; }

@media (max-width: 1100px) { .social-layout { grid-template-columns:1fr; } .social-player-card { align-items:flex-start; } .social-player-actions { width:100%; justify-content:flex-start; } .social-challenge-card { align-items:flex-start; flex-direction:column; } .social-challenge-actions { justify-content:flex-start; } }

/* Lobby social - bandeja de chats temporales */
.social-chat-inbox-card {
    grid-column: 1 / -1;
}

.social-chat-inbox-list {
    display: grid;
    gap: 10px;
}

.social-chat-inbox-item {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px;
    border: 1px solid rgba(148, 163, 184, 0.25);
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.72);
}

.social-chat-inbox-item.incoming {
    border-color: rgba(14, 165, 233, 0.75);
    box-shadow: 0 0 0 1px rgba(14, 165, 233, 0.18), 0 0 18px rgba(14, 165, 233, 0.12);
}

.social-chat-inbox-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    overflow: hidden;
    border: 1px solid rgba(148, 163, 184, 0.32);
    display: grid;
    place-items: center;
    background: rgba(30, 41, 59, 0.8);
}

.social-chat-inbox-main {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.social-chat-inbox-title {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.social-chat-inbox-preview {
    color: rgba(226, 232, 240, 0.78);
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.social-chat-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #082f49;
    background: #38bdf8;
}

.social-chat-inbox-meta {
    color: rgba(148, 163, 184, 0.9);
    font-size: 0.78rem;
}

.social-chat-error {
    margin-top: 8px;
    color: #fecaca;
    font-size: 0.85rem;
    min-height: 1.1em;
}

@media (max-width: 780px) {
    .social-chat-inbox-item {
        grid-template-columns: auto 1fr;
    }

    .social-chat-inbox-item .social-player-actions {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

/* Fase 4.2 - Avisos visuales y búsqueda de rival en lobby */
.tab[data-view="social"] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.social-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 900;
    color: #450a0a;
    background: #fbbf24;
    box-shadow: 0 0 0 2px rgba(251,191,36,.18), 0 0 18px rgba(251,191,36,.26);
}
.tab.social-tab-has-alerts {
    border: 1px solid rgba(251,191,36,.5);
    box-shadow: 0 0 0 1px rgba(251,191,36,.14), 0 0 20px rgba(251,191,36,.12);
}
.social-head-actions {
    align-items: center;
}
.social-pending-summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(15,23,42,.65);
    border-radius: 999px;
    padding: 6px 11px;
    font-size: .85rem;
    font-weight: 800;
    color: #cbd5e1;
}
.social-pending-summary-alert {
    color: #fde68a;
}
.social-pending-summary-ok {
    color: #bbf7d0;
}
.social-quick-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.social-sound-on {
    border: 1px solid rgba(56,189,248,.55) !important;
    color: #bae6fd !important;
    background: rgba(56,189,248,.14) !important;
}
.social-player-status-looking {
    border-color: rgba(245,158,11,.72);
    background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(30,41,59,.74));
    box-shadow: 0 0 0 1px rgba(245,158,11,.12), 0 0 22px rgba(245,158,11,.08);
}
.social-player-status-duel {
    border-color: rgba(239,68,68,.72);
    background: linear-gradient(135deg, rgba(239,68,68,.13), rgba(30,41,59,.72));
    opacity: .88;
}
.social-player-status-duel .social-player-actions button {
    opacity: .42;
}
.social-status-duel {
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .035em;
    box-shadow: 0 0 14px rgba(239,68,68,.14);
}
.social-status-looking {
    box-shadow: 0 0 14px rgba(245,158,11,.14);
}
.social-chat-inbox-item.incoming,
.social-challenge-card.social-challenge-pending {
    position: relative;
}
.social-chat-inbox-item.incoming::before,
.social-challenge-card.social-challenge-pending::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    pointer-events: none;
    box-shadow: 0 0 26px rgba(56,189,248,.13);
}
@media (max-width: 780px) {
    .social-head-actions {
        align-items: flex-start;
    }
    .social-pending-summary {
        width: 100%;
        justify-content: center;
    }
}

/* =====================
   Galería de ilustraciones
   ===================== */
.illustration-head .filters {
    align-items: center;
}
.illustration-intro {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
.illustration-intro strong {
    color: #fde68a;
    font-size: 1rem;
}
.illustration-intro span {
    color: #cbd5e1;
    font-size: .94rem;
}
.illustration-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    align-items: start;
}
.illustration-card {
    border: 1px solid rgba(148, 163, 184, .22);
    background: linear-gradient(180deg, rgba(15, 23, 42, .96), rgba(10, 16, 32, .92));
    border-radius: 22px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 18px 38px rgba(0, 0, 0, .25);
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.illustration-card:hover,
.illustration-card:focus-visible {
    transform: translateY(-3px);
    border-color: rgba(245, 158, 11, .62);
    box-shadow: 0 0 0 3px rgba(245, 158, 11, .10), 0 22px 46px rgba(0, 0, 0, .35);
    outline: none;
}
.illustration-thumb {
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 270px;
    overflow: hidden;
    background: radial-gradient(circle at top, rgba(245, 158, 11, .16), rgba(15, 23, 42, .94));
}
.illustration-thumb img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transform: translate(var(--cg-card-art-shift-x, 0%), var(--cg-card-art-shift-y, 0%)) scale(var(--cg-card-art-scale, 1));
    transform-origin: center;
}
.illustration-caption {
    min-height: 82px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
    padding: 12px 14px 14px;
    text-align: center;
}
.illustration-caption strong {
    color: #f8fafc;
    font-size: 1.02rem;
    line-height: 1.18;
}
.illustration-caption span {
    color: #cbd5e1;
    font-size: .86rem;
}
.illustration-overlay {
    z-index: 9000;
}
.illustration-modal {
    width: min(1040px, calc(100vw - 28px));
    max-height: min(92vh, 920px);
}
.illustration-modal-head span {
    color: #cbd5e1;
}
.illustration-modal-body {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) 260px;
    gap: 18px;
    align-items: stretch;
}
.illustration-full-art {
    min-height: 440px;
    max-height: 72vh;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .10);
    background: radial-gradient(circle at top, rgba(245, 158, 11, .16), rgba(15, 23, 42, .98));
}
.illustration-full-art img {
    width: 100%;
    height: 100%;
    min-height: 440px;
    max-height: 72vh;
    display: block;
    object-fit: contain;
    transform: translate(var(--cg-card-art-shift-x, 0%), var(--cg-card-art-shift-y, 0%)) scale(var(--cg-card-art-scale, 1));
    transform-origin: center;
}
.illustration-modal-meta {
    border: 1px solid rgba(148, 163, 184, .20);
    border-radius: 18px;
    background: rgba(15, 23, 42, .78);
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-self: stretch;
}
.illustration-modal-meta strong {
    color: #fde68a;
    font-size: 1.05rem;
}
.illustration-modal-meta span {
    color: #cbd5e1;
    line-height: 1.35;
}
.illustration-modal-meta button {
    margin-top: 8px;
}
@media (max-width: 860px) {
    .illustration-grid {
        grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
        gap: 12px;
    }
    .illustration-thumb {
        min-height: 220px;
    }
    .illustration-modal-body {
        grid-template-columns: 1fr;
    }
    .illustration-full-art,
    .illustration-full-art img {
        min-height: 360px;
    }
}
@media (max-width: 560px) {
    .illustration-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
    .illustration-caption {
        min-height: 74px;
        padding: 10px;
    }
    .illustration-caption strong {
        font-size: .92rem;
    }
    .illustration-caption span {
        font-size: .78rem;
    }
}

/* Desafíos online con selección de mazo */
.social-challenge-overlay {
    z-index: 1450;
}
.social-challenge-modal {
    width: min(560px, calc(100vw - 28px));
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.social-challenge-body {
    display: grid;
    gap: 12px;
}
.social-challenge-deck-field {
    display: grid;
    gap: 6px;
    color: var(--muted);
    font-weight: 800;
}
.social-challenge-deck-field select {
    width: 100%;
}
.social-challenge-rival {
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(15,23,42,.65);
    border-radius: 14px;
    padding: 10px 12px;
    color: #dbeafe;
}
.social-challenge-rival.muted {
    color: var(--muted);
}
.social-challenge-error {
    min-height: 1.1em;
    color: #fecaca;
    font-size: .88rem;
}