/* =============================================================================
 * pantheon.css — Visual pantheon family tree
 * Dark heavens canvas with medallion nodes, typed edges, and modal editors.
 * ========================================================================== */

.pantheon-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.pantheon-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    font-size: 0.85rem;
    color: var(--dnd-dark);
    opacity: 0.9;
}

.legend-item { display: inline-flex; align-items: center; gap: 0.35rem; }

.legend-line {
    display: inline-block;
    width: 26px;
    height: 0;
    border-top: 2px solid;
}
.legend-line.rel-ally    { border-color: #6fbf73; }
.legend-line.rel-consort { border-color: #e08bb1; }
.legend-line.rel-kin     { border-color: #a98be0; border-top-style: dashed; }
.legend-line.rel-rival   { border-color: #e0b45c; border-top-style: dashed; }
.legend-line.rel-enemy   { border-color: #d05454; border-top-style: dotted; }

.pantheon-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- Canvas --- */
.pantheon-canvas {
    position: relative;
    width: 100%;
    min-height: 68vh;
    border: 2px solid var(--dnd-border);
    border-radius: 12px;
    overflow: hidden;
    background:
        radial-gradient(1px 1px at 12% 22%, #ffffff88 50%, transparent 51%),
        radial-gradient(1px 1px at 34% 68%, #ffffff66 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 58% 14%, #ffffff77 50%, transparent 51%),
        radial-gradient(1px 1px at 76% 44%, #ffffff55 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 90% 78%, #ffffff66 50%, transparent 51%),
        radial-gradient(1px 1px at 22% 88%, #ffffff55 50%, transparent 51%),
        radial-gradient(ellipse at 50% 0%, #3a2c18 0%, #241a10 45%, #17100a 100%);
}

.pantheon-edges {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.pantheon-edge,
.pantheon-edge-label { pointer-events: auto; }

.pantheon-edge { opacity: 0.85; }
.pantheon-edge:hover { opacity: 1; filter: brightness(1.3); }

.pantheon-edge-label {
    font-size: 11px;
    font-style: italic;
    text-anchor: middle;
    paint-order: stroke;
    stroke: #17100a;
    stroke-width: 3px;
    user-select: none;
}

.pantheon-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--dnd-parchment);
    opacity: 0.8;
    z-index: 3;
}

.pantheon-hint {
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--dnd-dark);
    opacity: 0.75;
    font-style: italic;
}

/* --- God nodes --- */
.pantheon-node {
    position: absolute;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    z-index: 2;
    user-select: none;
    touch-action: none;
    transition: filter 0.15s ease;
}
.pantheon-node:hover { filter: brightness(1.2); z-index: 4; }
.pantheon-node.dragging { z-index: 6; filter: brightness(1.35); }

.node-medallion {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid var(--dnd-gold);
    background: #241a10f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    pointer-events: none;
}

.tier-lesser .node-medallion {
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    border-width: 2px;
    background: #241a10d0;
}

.node-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
    pointer-events: none;
    max-width: 130px;
    text-align: center;
}

.node-name {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--dnd-parchment);
    text-shadow: 0 1px 3px #000, 0 0 8px #000;
}

.tier-lesser .node-name { font-size: 0.72rem; }

.node-epithet {
    font-size: 0.68rem;
    font-style: italic;
    color: var(--dnd-parchment);
    opacity: 0.75;
    text-shadow: 0 1px 3px #000;
}

.node-badge {
    position: absolute;
    top: -6px;
    right: -14px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 1px 6px;
    border-radius: 8px;
    pointer-events: none;
}
.node-badge.gm  { background: var(--dnd-burgundy); color: var(--dnd-parchment); }
.node-badge.own { background: var(--dnd-gold); color: #241a10; }

.pantheon-node.is-gm-only .node-medallion { border-style: dashed; }

/* --- Modals --- */
.pantheon-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.pantheon-modal-card {
    position: relative;
    background: var(--dnd-parchment);
    color: #2c1810;
    border: 3px solid var(--dnd-border);
    border-radius: 10px;
    padding: 1.5rem;
    width: 100%;
    max-width: 580px;
    max-height: 86vh;
    overflow-y: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

body[data-theme="winter"] .pantheon-modal-card,
body[data-theme="forest"] .pantheon-modal-card {
    background: #1c2126;
    color: #e6f2fb;
}

.pantheon-modal-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    background: none;
    border: none;
    font-size: 1.6rem;
    cursor: pointer;
    color: inherit;
    line-height: 1;
}

.pantheon-modal-card h3 { margin-top: 0; font-family: 'Cinzel', serif; }

/* --- Forms --- */
.pantheon-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin: 1rem 0;
}

.pantheon-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 0.85rem;
    font-weight: 600;
}

.pantheon-form-wide { grid-column: 1 / -1; }

.pantheon-form-grid input,
.pantheon-form-grid select,
.pantheon-form-grid textarea {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--dnd-border);
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.7);
    color: inherit;
    font-family: inherit;
    font-size: 0.9rem;
}

body[data-theme="winter"] .pantheon-form-grid input,
body[data-theme="winter"] .pantheon-form-grid select,
body[data-theme="winter"] .pantheon-form-grid textarea,
body[data-theme="forest"] .pantheon-form-grid input,
body[data-theme="forest"] .pantheon-form-grid select,
body[data-theme="forest"] .pantheon-form-grid textarea {
    background: #12161a;
    border-color: var(--dnd-border);
}

.pantheon-form-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    margin-top: 0.5rem;
}

/* --- God detail --- */
.god-detail-header {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding-bottom: 0.75rem;
    border-bottom: 3px solid var(--dnd-gold);
    margin-bottom: 0.75rem;
}

.god-detail-icon { font-size: 2.4rem; }
.god-detail-header h3 { margin: 0; }
.god-epithet { margin: 0.1rem 0 0; font-style: italic; opacity: 0.8; }

.god-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.god-chip {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 10px;
    border: 1px solid var(--dnd-border);
    border-radius: 12px;
    background: rgba(139, 115, 85, 0.15);
}
.god-chip.tier-greater { border-color: var(--dnd-gold); color: #8a6a10; }
.god-chip.tier-lesser  { border-color: var(--dnd-border); opacity: 0.85; }
.god-chip.gm { border-color: var(--dnd-burgundy); color: var(--dnd-burgundy); }

body[data-theme="winter"] .god-chip.tier-greater,
body[data-theme="forest"] .god-chip.tier-greater { color: var(--dnd-gold); }
body[data-theme="winter"] .god-chip.gm,
body[data-theme="forest"] .god-chip.gm { color: #ff9ba8; }

.god-description { font-size: 0.92rem; line-height: 1.5; margin-bottom: 0.75rem; }

.god-rel-list { list-style: none; padding: 0; margin: 0 0 0.75rem; }
.god-rel-list li { padding: 0.3rem 0; display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }

.rel-chip {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 8px;
    border: 1px solid;
    border-radius: 10px;
}

.rel-god-link { color: var(--dnd-burgundy); font-weight: 600; }
body[data-theme="winter"] .rel-god-link, body[data-theme="forest"] .rel-god-link { color: #9fc8ff; }
.rel-label { font-size: 0.8rem; font-style: italic; opacity: 0.75; }

.god-detail-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    padding-top: 0.75rem;
    border-top: 1px solid var(--dnd-border);
}

.god-creator { font-size: 0.78rem; font-style: italic; opacity: 0.7; margin-right: auto; }

/* --- Small + danger buttons (not in style.css) --- */
.btn-small {
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
}

.btn-danger {
    background: var(--dnd-burgundy);
    color: var(--dnd-parchment);
    border: 1px solid #d32f2f;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
}
.btn-danger:hover { filter: brightness(1.2); }
.btn-danger.btn-small { padding: 0.3rem 0.7rem; font-size: 0.82rem; }

/* --- God portrait --- */
.god-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--dnd-gold);
    flex-shrink: 0;
    background: #241a10;
}
.god-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- God lore blocks --- */
.god-blocks {
    max-height: 40vh;
    overflow-y: auto;
    margin: 0.75rem 0;
    scrollbar-width: thin;
}
.god-block-section {
    background: rgba(139, 115, 85, 0.08);
    border: 1px solid var(--dnd-border);
    border-radius: 8px;
    margin-bottom: 0.6rem;
    padding: 0.6rem 0.8rem;
}
.god-block-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}
.god-block-title {
    font-family: 'Cinzel', serif;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--dnd-burgundy);
}
.god-block-vis-gm_only,
.god-block-vis-admin_only {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 8px;
    background: var(--dnd-burgundy);
    color: var(--dnd-parchment);
}
.god-block-vis-player {
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 8px;
    background: #2e7d32;
    color: white;
}
.god-block-actions {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
}
.god-block-body {
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--dnd-dark);
}
.god-rel-heading {
    margin: 0.5rem 0 0.25rem;
    font-family: 'Cinzel', serif;
    font-size: 0.95rem;
}

/* Tiny buttons for block edit/delete */
.btn-tiny {
    background: none;
    border: 1px solid var(--dnd-border);
    border-radius: 4px;
    cursor: pointer;
    padding: 1px 4px;
    font-size: 0.75rem;
    line-height: 1;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.btn-tiny:hover { opacity: 1; }
.btn-tiny-danger:hover { background: var(--dnd-burgundy); color: white; border-color: var(--dnd-burgundy); }

body[data-theme="winter"] .god-block-title,
body[data-theme="forest"] .god-block-title { color: #9fc8ff; }
body[data-theme="winter"] .god-block-vis-gm_only { background: #8b0000; }

/* --- Deity card grid --- */
.pantheon-deities-section {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--dnd-gold);
}
.pantheon-deities-title {
    font-family: 'Cinzel', serif;
    font-size: 1.4rem;
    color: var(--dnd-gold);
    margin-bottom: 0.25rem;
}
.pantheon-deities-subtitle {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-bottom: 1rem;
}
.deity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
}
.deity-card {
    text-align: center;
    padding: 1rem;
}
.deity-card .npc-card-portrait {
    width: 80px;
    height: 80px;
    margin: 0 auto 0.5rem;
}
.badge-deity {
    background: var(--dnd-gold);
    color: #241a10;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 8px;
    border-radius: 10px;
    display: inline-block;
    margin-top: 0.25rem;
}

@media (max-width: 640px) {
    .pantheon-form-grid { grid-template-columns: 1fr; }
    .pantheon-canvas { min-height: 56vh; }
    .node-epithet { display: none; }
}

/* Feature 5 responsive (2026-08-06) */
@media (max-width: 480px) {
    .pantheon-toolbar { flex-wrap: wrap; gap: 0.5rem; }
    .pantheon-canvas { min-height: 48vh; }
    .pantheon-legend { flex-wrap: wrap; gap: 0.3rem 0.7rem; font-size: 0.8rem; }
}