/* =========================================================
   Krykna SWTOR — Skill Tree Frontend
   Compact vertical column, larger icons, clustered nodes
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;600;700&family=Exo+2:wght@300;400;600&display=swap');

:root {
    --st-void:       #040608;
    --st-bg:         #070b11;
    --st-bg-panel:   #0a0f18;
    --st-bg-node:    #0c1220;
    --st-border:     #162035;
    --st-border-hi:  #1e3050;
    --st-gold:       #c8a84b;
    --st-gold-glow:  rgba(200,168,75,.5);
    --st-gold-dim:   rgba(200,168,75,.08);
    --st-cyan:       #00d4ff;
    --st-cyan-glow:  rgba(0,212,255,.5);
    --st-cyan-dim:   rgba(0,212,255,.07);
    --st-cyan-mid:   rgba(0,212,255,.2);
    --st-text:       #c8cdd8;
    --st-text-dim:   #3a4558;
    --st-text-mid:   #6a7888;
    --st-font-head:  'Rajdhani', sans-serif;
    --st-font-body:  'Exo 2', sans-serif;
    --node-size:     68px;
    --node-size-sm:  56px;
    --node-gap:      6px;
    --tree-max-w:    420px;
}

/* ── Wrapper — compact, self-sizing ──────────────────────── */

.krykna-skill-tree {
    display: inline-block;         /* shrink to content width */
    max-width: var(--tree-max-w);
    width: 100%;
    background: var(--st-bg);
    border: 1px solid var(--st-border-hi);
    border-radius: 4px;
    overflow: hidden;
    margin: 1em 0;
    font-family: var(--st-font-body);
    user-select: none;
    position: relative;
    isolation: isolate;
    vertical-align: top;
}

/* Scanlines */
.krykna-skill-tree::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,.07) 2px,
        rgba(0,0,0,.07) 4px
    );
    pointer-events: none;
    z-index: 1;
}

/* Ambient glow corners */
.krykna-skill-tree::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg, rgba(0,212,255,.04) 0%, transparent 40%),
        linear-gradient(315deg, rgba(200,168,75,.03) 0%, transparent 35%);
    pointer-events: none;
    z-index: 0;
}

/* ── Header ───────────────────────────────────────────────── */

.krykna-skill-tree__header {
    text-align: center;
    padding: 12px 16px 10px;
    background:
        linear-gradient(180deg, rgba(0,212,255,.05) 0%, transparent 100%),
        linear-gradient(180deg, #0d1625 0%, var(--st-bg) 100%);
    border-bottom: 1px solid var(--st-border-hi);
    position: relative;
    z-index: 2;
}

.krykna-skill-tree__header::before,
.krykna-skill-tree__header::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 18%;
    height: 1px;
}
.krykna-skill-tree__header::before {
    left: 10px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,.3));
}
.krykna-skill-tree__header::after {
    right: 10px;
    background: linear-gradient(270deg, transparent, rgba(0,212,255,.3));
}

.krykna-skill-tree__spec-title {
    font-family: var(--st-font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--st-cyan);
    text-shadow:
        0 0 8px var(--st-cyan-glow),
        0 0 20px rgba(0,212,255,.2);
    position: relative;
}

/* ── Body ─────────────────────────────────────────────────── */

.krykna-skill-tree__body {
    padding: 10px 14px 18px 18px;
    position: relative;
    z-index: 2;
}

/* ── Row ──────────────────────────────────────────────────── */

.krykna-skill-tree__row {
    display: grid;
    /* level label | center nodes | side node — tight columns */
    grid-template-columns: 28px 1fr auto;
    align-items: center;
    gap: 0 8px;
    min-height: calc(var(--node-size) + 12px);
    position: relative;
}

/* Vertical connector thread between rows */
.krykna-skill-tree__row + .krykna-skill-tree__row {
    margin-top: -1px;
}

/* ── Level label ──────────────────────────────────────────── */

.krykna-skill-tree__level-cell {
    text-align: right;
    padding-right: 4px;
}

.krykna-skill-tree__level-label {
    font-family: var(--st-font-head);
    font-size: 10px;
    font-weight: 600;
    color: var(--st-text-dim);
    letter-spacing: .04em;
    line-height: 1;
}

/* ── Central cell ─────────────────────────────────────────── */

.krykna-skill-tree__central-cell {
    display: flex;
    align-items: center;
    gap: var(--node-gap);
    justify-content: center;
    position: relative;
}

.krykna-skill-tree__row-empty  { height: var(--node-size); }

/* Empty slots and gaps match node size so grid stays aligned */
.krykna-skill-tree__empty-slot,
.krykna-skill-tree__slot-gap {
    width: var(--node-size);
    height: var(--node-size);
    flex-shrink: 0;
}

/* Choice bracket */
.krykna-skill-tree__choice-bracket {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 76%;
    border: 1px solid var(--st-cyan-mid);
    border-left: none;
    border-radius: 0 3px 3px 0;
    pointer-events: none;
}

/* ── Side cell ────────────────────────────────────────────── */

.krykna-skill-tree__side-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid var(--st-border-hi);
    padding-left: 14px;
    margin-left: 6px;
    width: calc(var(--node-size-sm) + 20px);
    flex-shrink: 0;
}

/* ── Nodes ────────────────────────────────────────────────── */

.krykna-st-node {
    position: relative;
    width: var(--node-size);
    height: var(--node-size);
    border: 1px solid var(--st-border-hi);
    border-radius: 3px;
    background: var(--st-bg-node);
    cursor: default;
    flex-shrink: 0;
    overflow: hidden;
    transition: border-color .2s, box-shadow .2s, transform .15s;
}

/* Corner cut highlight */
.krykna-st-node::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,212,255,.04) 0 14px, transparent 14px);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    transition: opacity .2s;
}

.krykna-st-node:hover { transform: scale(1.07); z-index: 3; }
.krykna-st-node:hover::before { opacity: 1; }

.krykna-st-node__inner {
    width: 100%;
    height: 100%;
}

.krykna-st-node__icon {
    width: calc(100% - 1px);
    height: calc(100% - 1px);
    margin: 0.5px;
    object-fit: cover;
    display: block;
    opacity: .22;
    filter: grayscale(55%) brightness(.75);
    transition: opacity .2s, filter .2s;
}

/* ── Active ───────────────────────────────────────────────── */

.krykna-st-node--active .krykna-st-node__icon {
    opacity: 1;
    filter: none;
}

.krykna-st-node--active {
    border-color: var(--st-cyan);
    box-shadow:
        0 0 0 1px rgba(0,212,255,.12),
        0 0 10px rgba(0,212,255,.3),
        inset 0 0 10px rgba(0,212,255,.05);
}

.krykna-st-node--active::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(0,212,255,.08) 0 14px, transparent 14px);
}

@keyframes st-pulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,212,255,.12), 0 0 10px rgba(0,212,255,.3),  inset 0 0 10px rgba(0,212,255,.05); }
    50%       { box-shadow: 0 0 0 1px rgba(0,212,255,.22), 0 0 18px rgba(0,212,255,.45), inset 0 0 14px rgba(0,212,255,.08); }
}
.krykna-st-node--active { animation: st-pulse 3s ease-in-out infinite; }

/* ── Required / gold ──────────────────────────────────────── */

.krykna-st-node--required {
    border-color: var(--st-gold);
    animation: none !important;
    box-shadow:
        0 0 0 1px rgba(200,168,75,.18),
        0 0 8px rgba(200,168,75,.25),
        inset 0 0 8px rgba(200,168,75,.05);
}
.krykna-st-node--required .krykna-st-node__icon { opacity: 1; filter: none; }
.krykna-st-node--required::before {
    opacity: 1;
    background: linear-gradient(135deg, rgba(200,168,75,.07) 0 14px, transparent 14px);
}

/* ── Passive / side ───────────────────────────────────────── */

.krykna-st-node--passive {
    width: var(--node-size-sm);
    height: var(--node-size-sm);
    background: #080c14;
    border-color: #1a2030;
}
.krykna-st-node--passive .krykna-st-node__icon { opacity: 1; filter: none; }

.krykna-st-node--passive.krykna-st-node--active,
.krykna-st-node--passive.krykna-st-node--required {
    border-color: var(--st-gold);
    box-shadow: 0 0 8px rgba(200,168,75,.28);
    animation: none;
}

/* ── Type dot ─────────────────────────────────────────────── */

.krykna-st-node::after {
    content: '';
    position: absolute;
    bottom: 4px;
    right: 4px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--st-text-dim);
    z-index: 2;
    transition: background .2s, box-shadow .2s;
}
.krykna-st-node--type-Active::after  { background: var(--st-cyan); opacity: .7; }
.krykna-st-node--type-Passive::after { background: var(--st-gold); opacity: .6; }
.krykna-st-node--active::after       { background: var(--st-cyan); opacity: 1; box-shadow: 0 0 5px var(--st-cyan); }
.krykna-st-node--required::after     { background: var(--st-gold); opacity: 1; box-shadow: 0 0 5px var(--st-gold); }
.krykna-st-node--passive::after      { width: 4px; height: 4px; bottom: 3px; right: 3px; }

/* ── Tooltip ──────────────────────────────────────────────── */

.krykna-st-tooltip {
    position: fixed;
    z-index: 99999;
    width: 280px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(8px) scale(.97);
    transition: opacity .16s ease, transform .16s ease;
    font-family: var(--st-font-body);
    background: linear-gradient(145deg, rgba(10,18,36,.97) 0%, rgba(4,8,16,.99) 100%);
    border: 1px solid var(--st-cyan);
    border-radius: 3px;
    box-shadow:
        0 0 0 1px rgba(0,212,255,.07),
        0 8px 28px rgba(0,0,0,.9),
        0 0 16px rgba(0,212,255,.07),
        inset 0 1px 0 rgba(0,212,255,.1);
    overflow: hidden;
}

.krykna-st-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.krykna-st-tooltip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--st-cyan) 30%, var(--st-gold) 70%, transparent);
}

.krykna-st-tooltip__header {
    padding: 12px 14px 8px;
    background: linear-gradient(90deg, rgba(0,212,255,.06) 0%, transparent 70%);
    border-bottom: 1px solid rgba(0,212,255,.1);
}

.krykna-st-tooltip__name {
    display: block;
    font-family: var(--st-font-head);
    font-size: .95rem;
    font-weight: 700;
    color: var(--st-gold);
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: 4px;
    text-shadow: 0 0 8px rgba(200,168,75,.25);
}

.krykna-st-tooltip__level {
    display: block;
    font-size: .7rem;
    font-weight: 600;
    color: var(--st-cyan);
    letter-spacing: .08em;
    text-transform: uppercase;
    opacity: .85;
}

.krykna-st-tooltip__type {
    display: inline-block;
    font-size: .66rem;
    color: var(--st-text-mid);
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 4px;
    padding: 1px 5px;
    border: 1px solid var(--st-border-hi);
    border-radius: 2px;
    background: rgba(255,255,255,.025);
}

.krykna-st-tooltip__desc {
    padding: 10px 14px 12px;
    font-size: .8rem;
    line-height: 1.58;
    color: var(--st-text);
    opacity: .88;
}

/* ── Responsive ───────────────────────────────────────────── */

@media ( max-width: 480px ) {
    :root {
        --node-size:    54px;
        --node-size-sm: 44px;
        --tree-max-w:   340px;
    }
    .krykna-skill-tree__row { grid-template-columns: 22px 1fr auto; gap: 0 4px; }
    .krykna-skill-tree__body { padding: 6px 8px 10px; }
    .krykna-skill-tree__spec-title { font-size: .9rem; letter-spacing: .14em; }
    .krykna-st-tooltip { width: 230px; }
}