/* ── RESET & BASE ─────────────────────────────────────────────────────── */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    :root {
        --bg: #05081a;
        --panel-bg: rgba(6, 10, 32, 0.70);
        --panel-bd: rgba(120, 180, 255, 0.22);
        --text: #b8d4f0;
        --text-dim: #6080a8;
        --accent: #80c8ff;
        --font: 'Courier New', Courier, monospace;
    }

    html,
    body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        background:
            radial-gradient(ellipse at 25% 38%, rgba(28, 48, 120, 0.50) 0%, transparent 55%),
            radial-gradient(ellipse at 73% 64%, rgba(55, 15, 100, 0.38) 0%, transparent 52%),
            radial-gradient(ellipse at 58% 12%, rgba(10, 20, 80, 0.32) 0%, transparent 42%),
            var(--bg);
        color: var(--text);
        font-family: var(--font);
        font-size: 11px;
    }

    /* ── SCANLINES ────────────────────────────────────────────────────────── */
    body::after {
        content: '';
        position: fixed;
        inset: 0;
        background: repeating-linear-gradient(180deg,
                transparent, transparent 3px,
                rgba(0, 0, 20, 0.025) 3px, rgba(0, 0, 20, 0.025) 4px);
        pointer-events: none;
        z-index: 900;
    }

    body.perf-lite::after {
        display: none;
    }

    /* ── SVG CANVAS ───────────────────────────────────────────────────────── */
    svg#graph {
        display: block;
        width: 100vw;
        height: 100vh;
    }

    /* ── PANELS ───────────────────────────────────────────────────────────── */
    .panel {
        position: fixed;
        background: var(--panel-bg);
        border: 1px solid var(--panel-bd);
        backdrop-filter: blur(6px);
        padding: 12px 15px;
        z-index: 100;
    }

    body.perf-lite .panel {
        backdrop-filter: none;
    }

    /* top-left: title + status + legend */
    #hud {
        top: 14px;
        left: 14px;
        min-width: 220px;
        max-width: 270px;
    }

    #hud-title {
        font-size: 10px;
        letter-spacing: .22em;
        color: var(--accent);
        text-transform: uppercase;
        text-shadow: 0 0 10px var(--accent);
        margin-bottom: 10px;
    }

    #status {
        color: var(--text-dim);
        line-height: 1.7;
        margin-bottom: 6px;
        min-height: 18px;
    }

    #repo-link {
        margin-bottom: 10px;
    }

    #repo-link a {
        color: var(--accent);
        font-size: 10px;
        letter-spacing: .12em;
        text-decoration: none;
    }

    #repo-link a:hover {
        text-decoration: underline;
    }

    #status.ok {
        color: #5a9970;
    }

    #status.warn {
        color: #cc7733;
    }

    #status.err {
        color: #cc3333;
    }

    #legend {
        display: none;
        margin-top: 10px;
    }

    .leg-head {
        font-size: 9px;
        letter-spacing: .15em;
        color: var(--text-dim);
        margin: 8px 0 5px;
    }

    .leg-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
        line-height: 1.4;
    }

    .leg-dot {
        flex-shrink: 0;
        width: 11px;
        height: 11px;
        border-radius: 50%;
    }

    .leg-dash {
        flex-shrink: 0;
        width: 26px;
        height: 2px;
    }

    /* top-right: search */
    #search-panel {
        top: 14px;
        right: 14px;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 320px;
    }

    #search-label {
        color: var(--text-dim);
        font-size: 10px;
        letter-spacing: .12em;
    }

    #search-input {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(100, 170, 255, .28);
        color: var(--accent);
        font-family: var(--font);
        font-size: 11px;
        outline: none;
        width: 170px;
        padding: 3px 0;
        letter-spacing: .05em;
    }

    #sound-toggle-btn {
        white-space: nowrap;
        padding: 4px 8px;
    }

    #search-input::placeholder {
        color: var(--text-dim);
    }

    /* bottom-right: controls hint */
    #controls {
        bottom: 14px;
        right: 14px;
        color: var(--text-dim);
        line-height: 1.9;
        font-size: 10px;
    }

    /* ── TOOLTIP ──────────────────────────────────────────────────────────── */
    #tooltip {
        position: fixed;
        background: rgba(5, 10, 30, 0.94);
        border: 1px solid rgba(100, 170, 255, .38);
        color: var(--text);
        font-family: var(--font);
        font-size: 11px;
        padding: 9px 13px;
        max-width: 300px;
        line-height: 1.6;
        z-index: 800;
        pointer-events: none;
        display: none;
    }

    #tooltip .tt-name {
        color: var(--accent);
        font-weight: bold;
        margin-bottom: 3px;
    }

    #tooltip .tt-spec {
        font-size: 9px;
        color: var(--text-dim);
        margin-bottom: 5px;
    }

    #tooltip .tt-slug {
        font-size: 9px;
        color: #70b8e0;
    }

    /* ── D3 NODE / LINK STYLES ────────────────────────────────────────────── */
    .link {
        fill: none;
        stroke-width: 1.25;
        opacity: .58;
        stroke-linecap: round;
        stroke-linejoin: round;
        mix-blend-mode: screen;
    }

    body.perf-lite .link {
        mix-blend-mode: normal;
    }

    .link-glow {
        pointer-events: none;
    }

    .link.hub {
        opacity: .42;
        stroke-width: .85;
    }

    .link.internal {
        opacity: .72;
        stroke-width: 1.25;
    }

    .link.xref {
        opacity: .92;
        stroke-width: 1.7;
        stroke-dasharray: 6 3;
    }

    .link.tref {
        opacity: .82;
        stroke-width: 1.45;
        stroke-dasharray: none;
    }

    .link.external {
        opacity: .52;
        stroke-width: 1.1;
        stroke-dasharray: 2 5;
    }

    .node {
        cursor: pointer;
    }

    .node text {
        font-family: var(--font);
        font-size: 23px;
        fill: #90b8d8;
        pointer-events: none;
    }

    .node.term text {
        pointer-events: auto;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }

    .node.hub text {
        font-size: 12px;
        font-weight: bold;
        letter-spacing: .04em;
        fill: #ffffff;
    }

    .node.external text {
        fill: #6a5030;
        font-size: 8px;
    }

    /* ── GAME PANEL ───────────────────────────────────────────────────────── */
    #game-panel {
        bottom: 14px;
        left: 14px;
        min-width: 200px;
        max-width: 245px;
    }

    #game-title {
        font-size: 10px;
        letter-spacing: .22em;
        color: #ffaa22;
        text-transform: uppercase;
        text-shadow: 0 0 10px #ffaa2299;
        margin-bottom: 8px;
    }

    #game-desc {
        color: var(--text-dim);
        font-size: 10px;
        line-height: 1.7;
        margin-bottom: 8px;
    }

    #game-info {
        margin-bottom: 8px;
    }

    .game-row {
        display: flex;
        gap: 6px;
        margin-bottom: 3px;
        line-height: 1.5;
        align-items: baseline;
    }

    .game-lbl {
        font-size: 9px;
        color: var(--text-dim);
        letter-spacing: .10em;
        flex-shrink: 0;
        width: 48px;
    }

    .game-row span:last-child {
        color: var(--text);
        font-size: 10px;
        word-break: break-word;
    }

    #game-moves,
    #game-optimal {
        color: #ffaa22 !important;
        font-weight: bold;
    }

    #game-result {
        font-size: 11px;
        min-height: 16px;
        margin-bottom: 6px;
        line-height: 1.6;
    }

    .game-score-line {
        font-size: 9px;
        color: var(--text-dim);
    }

    #game-actions {
        display: flex;
        gap: 6px;
    }

    .game-btn {
        background: transparent;
        border: 1px solid rgba(255, 170, 34, .35);
        color: #ffaa22;
        font-family: var(--font);
        font-size: 9px;
        letter-spacing: .10em;
        padding: 4px 9px;
        cursor: pointer;
        text-transform: uppercase;
    }

    .game-btn:hover {
        background: rgba(255, 170, 34, .12);
        border-color: #ffaa22;
        text-shadow: 0 0 8px #ffaa22;
    }

    .help-modal {
        position: fixed;
        inset: 0;
        display: none;
        align-items: center;
        justify-content: center;
        background: rgba(2, 8, 14, 0.82);
        z-index: 1050;
        padding: 20px;
    }

    .help-modal[aria-hidden="false"] {
        display: flex;
    }

    .help-modal-card {
        width: min(640px, 100%);
        max-height: min(90vh, 720px);
        overflow: auto;
        background: rgba(3, 8, 15, 0.98);
        border: 1px solid rgba(255, 170, 34, .25);
        box-shadow: 0 0 40px rgba(255, 170, 34, .12);
        padding: 22px 24px;
    }

    .help-modal-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-bottom: 18px;
    }

    #help-modal-title {
        font-size: 12px;
        letter-spacing: .12em;
        color: #ffaa22;
        text-transform: uppercase;
    }

    .help-close-btn {
        background: transparent;
        border: 1px solid rgba(255, 255, 255, .18);
        color: #fff;
        font-family: var(--font);
        font-size: 14px;
        width: 32px;
        height: 32px;
        cursor: pointer;
        line-height: 1;
        display: grid;
        place-items: center;
    }

    .help-close-btn:hover {
        border-color: #ffaa22;
        color: #ffaa22;
    }

    .help-modal-content {
        color: var(--text);
        font-size: 11px;
        line-height: 1.65;
    }

    .help-modal-content p,
    .help-modal-content ul,
    .help-modal-content table {
        margin-bottom: 12px;
    }

    .help-modal-content strong {
        color: #ffffff;
    }

    .help-modal-content ul {
        padding-left: 18px;
    }

    .help-modal-content table {
        width: 100%;
        border-collapse: collapse;
        margin-bottom: 14px;
    }

    .help-modal-content th,
    .help-modal-content td {
        padding: 8px 10px;
        border: 1px solid rgba(255, 255, 255, .08);
        text-align: left;
        vertical-align: top;
    }

    .help-modal-content th {
        color: #ffaa22;
        font-size: 10px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .help-modal-content td {
        color: var(--text-dim);
        font-size: 10px;
    }

    /* ── WELCOME MODAL ────────────────────────────────────────────────────── */
    #welcome-modal-title {
        font-size: 13px;
        letter-spacing: .14em;
        color: var(--accent);
        text-transform: uppercase;
        text-shadow: 0 0 10px var(--accent);
    }

    #welcome-actions {
        margin-top: 18px;
        text-align: right;
    }

    #welcome-ok-btn {
        font-size: 11px;
        letter-spacing: .12em;
        padding: 8px 22px;
    }

    /* ── GAME NODE STATES ─────────────────────────────────────────────────── */
    @keyframes game-pulse {
        0%, 100% { opacity: 1; }
        50%       { opacity: 0.5; }
    }

    .node.game-current > circle {
        stroke: var(--accent) !important;
        stroke-width: 3px !important;
        filter: url(#glow-lg) !important;
        animation: game-pulse 1.2s ease-in-out infinite;
    }

    .node.game-target > circle {
        stroke: #ff4455 !important;
        stroke-width: 3px !important;
        filter: url(#glow-lg) !important;
        animation: game-pulse 0.9s ease-in-out infinite;
    }

    .node.game-reachable > circle {
        stroke: #ffaa22 !important;
        stroke-width: 2px !important;
    }

    .node.game-visited > circle {
        stroke: #2a5538 !important;
        stroke-width: 1.5px !important;
    }

    .node.game-path > circle {
        stroke: #ffe066 !important;
        stroke-width: 2px !important;
        filter: url(#glow-md) !important;
    }

    /* tooltip game hints */
    .tt-game {
        margin-top: 5px;
        font-size: 9px;
        letter-spacing: .08em;
    }

    .tt-game.game-ok  { color: #ffaa22; }
    .tt-game.game-tgt { color: #ff4455; }
    .tt-game.game-cur { color: var(--accent); }
    .tt-game.game-no  { color: #665544; }