/* ============================================================
   Paragon Board — Grid Rendering & Node Styles
   ============================================================ */

/* --- Grid Container --- */
.pb-grid-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #1A1B1F;
    border: 1px solid #252830;
    border-radius: 8px;
    margin: 12px 0;
    cursor: grab;
    touch-action: none;
    min-height: 400px;
}

.pb-grid-wrap--grabbing {
    cursor: grabbing;
}

.pb-grid {
    position: relative;
    width: 756px;   /* 21 * 36 */
    height: 756px;
    transform-origin: center center;
    transition: none;
    margin: 0 auto;
}

/* Center the grid in the viewport */
.pb-grid-wrap .pb-grid {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--pb-zoom, 0.65));
}

/* --- Zoom Controls --- */
.pb-zoom-controls {
    position: absolute;
    bottom: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
    z-index: 10;
}

.pb-zoom-btn {
    width: 32px;
    height: 32px;
    border: 1px solid #3a3a48;
    background: #1a1a24;
    color: #e0ddd5;
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    cursor: pointer;
    border-radius: 4px;
    user-select: none;
}

.pb-zoom-btn:hover {
    background: #2a2a38;
    border-color: #555;
}

/* --- Grid Cells (visual grid background) --- */
.pb-cell {
    position: absolute;
    border: 1px solid rgba(60, 60, 70, 0.25);
    background: #1a1a1e;
    border-radius: 2px;
    z-index: 0;
    pointer-events: none;
}

/* --- Glyph Radius Cells (red background when glyph is placed) --- */
.pb-cell--in-radius {
    background: rgba(200, 60, 40, 0.25);
    border-color: rgba(200, 60, 40, 0.35);
}

/* --- Allocation Lines (between allocated neighbors) --- */
.pb-alloc-line {
    position: absolute;
    background: rgba(200, 60, 40, 0.6);
    z-index: 1;
    pointer-events: none;
    border-radius: 1px;
}

/* --- Node Base --- */
.pb-node {
    position: absolute;
    border-radius: 50%;
    cursor: default;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* --- Node Icon --- */
.pb-node__icon {
    display: block;
    width: 90%;
    height: 90%;
    object-fit: contain;
    pointer-events: none;
    image-rendering: auto;
}

/* --- Node Sizes (all circular) --- */
.pb-node--normal {
    width: 24px;
    height: 24px;
}

.pb-node--magic {
    width: 24px;
    height: 24px;
}

.pb-node--rare {
    width: 24px;
    height: 24px;
}

.pb-node--legendary {
    width: 24px;
    height: 24px;
}

.pb-node--glyph_socket {
    width: 24px;
    height: 24px;
}

.pb-node--gate {
    width: 24px;
    height: 24px;
}

.pb-node--start {
    width: 24px;
    height: 24px;
}

/* --- Node Colors --- */
.pb-node--normal {
    background: #2e2e2e;
    border: 1px solid #444;
}

.pb-node--magic {
    background: #182840;
    border: 1px solid #35658a;
}

.pb-node--rare {
    background: #302808;
    border: 1px solid #8a7020;
}

.pb-node--legendary {
    background: #2a1800;
    border: 2px solid #FF8C00;
}

.pb-node--glyph_socket {
    background: transparent;
    border: none;
}

.pb-node--glyph_socket.pb-node--glyph-assigned {
    background: transparent;
    border: none;
    overflow: visible;
}

.pb-node--glyph_socket .pb-node__icon--socket-base {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
}

.pb-node--glyph_socket .pb-node__icon--glyph-overlay {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    z-index: 1;
}

.pb-node--gate {
    background: #1c1810;
    border: 1px solid #6a5a30;
}

.pb-node--start {
    background: #15161A;
    border: none;
}

/* --- Allocation States --- */
.pb-node--unallocated {
    opacity: 0.35;
}

.pb-node--allocated {
    opacity: 1;
    outline: 2px solid rgba(200, 60, 40, 0.8);
    outline-offset: 1px;
}

/* --- Allocatable (adjacent, can click) --- */
.pb-node--allocatable {
    cursor: pointer;
}

.pb-node--allocatable:hover {
    outline: 1px solid rgba(200, 200, 200, 0.4);
    outline-offset: 1px;
}

/* --- Allocated + hovering (for deallocation) --- */
.pb-node--allocated:not(.pb-node--gate):not(.pb-node--start) {
    cursor: pointer;
}

/* --- Selected Node (click to inspect) --- */
.pb-node--selected {
    outline: 2px solid #e87000 !important;
    outline-offset: 2px;
    z-index: 8 !important;
}


/* --- Rare Node Threshold States --- */
.pb-node--threshold-met {
    border-color: #ffd700 !important;
}

.pb-node--threshold-unmet {
    border-color: #555 !important;
}

.pb-node--glyph-attr-match {
    box-shadow: 0 0 0 2px #ffffff;
    z-index: 2;
}

/* Search highlight */
.pb-node--search-match {
    outline: 2px solid #ffd700 !important;
    outline-offset: 1px;
    z-index: 15 !important;
    filter: brightness(1.3);
}

/* --- Node Tooltip --- */
.pb-tooltip {
    position: absolute;
    z-index: 200;
    background: #0d0d14;
    border: 1px solid #3a3a48;
    border-radius: 6px;
    padding: 8px 12px;
    pointer-events: none;
    font-size: 12px;
    color: #e0ddd5;
    max-width: 280px;
    white-space: normal;
}

.pb-tooltip__header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 2px;
}

.pb-tooltip__icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
    image-rendering: auto;
}

.pb-tooltip__name {
    font-weight: 600;
    margin-bottom: 2px;
}

.pb-tooltip__name--normal { color: #aaa; }
.pb-tooltip__name--magic { color: #4a90d9; }
.pb-tooltip__name--rare { color: #ffd700; }
.pb-tooltip__name--legendary { color: #c4a24e; }
.pb-tooltip__name--glyph_socket { color: #8b5cf6; }

.pb-tooltip__stat {
    color: #b0ada5;
    font-size: 11px;
}

.pb-tooltip__bonus {
    color: #ffd700;
    font-size: 11px;
    margin-top: 2px;
}

.pb-tooltip__threshold {
    color: #8b5cf6;
    font-size: 11px;
    margin-top: 2px;
    font-style: italic;
}

.pb-tooltip__threshold--met {
    color: #22c55e;
    font-style: normal;
    font-weight: 600;
}

.pb-tooltip__threshold--unmet {
    color: #a0a0a0;
}

.pb-tooltip__divider {
    height: 1px;
    background: #3a3a48;
    margin: 5px 0;
}

.pb-tooltip__attrs {
    font-size: 11px;
    margin-top: 2px;
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.pb-tooltip__glyph-name {
    color: #8b5cf6;
    font-weight: 600;
    font-size: 11px;
}

/* --- Points Bar (Paragon) --- */
.pb-points-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 16px;
    background: #13151a;
    border: 1px solid #252830;
    border-radius: 6px;
    margin-top: 8px;
    font-size: 13px;
    color: #e0ddd5;
}

.pb-points-bar__label {
    color: #7a7870;
}

.pb-points-bar__count {
    font-weight: 600;
    color: #c4a24e;
}

.pb-points-bar__max {
    color: #7a7870;
}

/* --- Entry Gate Selector --- */
.pb-entry-gate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.pb-entry-gate__label {
    font-size: 12px;
    color: #7a7870;
}

.pb-entry-gate__btn {
    padding: 4px 10px;
    font-size: 11px;
    background: #1a1a24;
    border: 1px solid #3a3a48;
    color: #a0a0a0;
    border-radius: 4px;
    cursor: pointer;
    text-transform: capitalize;
}

.pb-entry-gate__btn--active {
    background: #8a7530;
    border-color: #c4a24e;
    color: #fff;
}

.pb-entry-gate__btn:hover:not(.pb-entry-gate__btn--active) {
    background: #2a2a38;
}

/* --- Board Info Bar --- */
.pb-board-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    background: #13151a;
    border: 1px solid #252830;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 12px;
}

.pb-board-info__name {
    color: #c4a24e;
    font-weight: 600;
}

.pb-board-info__points {
    color: #7a7870;
}

/* --- Entry Gate Highlight (on grid) --- */
.pb-node--entry.pb-node--gate {
    z-index: 5;
}

.pb-node--entry.pb-node--start {
    z-index: 5;
}

/* --- Gate Direction Labels --- */
.pb-gate-label {
    position: absolute;
    z-index: 6;
    font-size: 10px;
    font-weight: 600;
    color: #7a7870;
    pointer-events: none;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.pb-gate-label--entry {
    color: #c4a24e;
    font-size: 11px;
}

/* --- No Layout Fallback --- */
.pb-no-layout {
    text-align: center;
    padding: 40px 20px;
    color: #7a7870;
    font-size: 14px;
}

.pb-no-layout__icon {
    font-size: 48px;
    margin-bottom: 12px;
    opacity: 0.3;
}

/* --- Gate Available (click to add board) --- */
.pb-node--gate-available {
    border: 2px dashed rgba(196, 162, 78, 0.6) !important;
    cursor: pointer;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .pb-grid-wrap {
        min-height: 350px;
    }
    .pb-grid-wrap .pb-grid {
        transform: translate(-50%, -50%) scale(var(--pb-zoom, 0.55));
    }
}

@media (max-width: 768px) {
    .pb-grid-wrap {
        min-height: 340px;
    }
    .pb-grid-wrap .pb-grid {
        transform: translate(-50%, -50%) scale(var(--pb-zoom, 0.5));
    }
    .pb-zoom-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 38px;
    }
    .pb-zoom-controls {
        gap: 8px;
        bottom: 8px;
        right: 8px;
    }
    .pb-entry-gate__btn {
        padding: 6px 14px;
        font-size: 13px;
        min-height: 36px;
    }
}