:root {
      color-scheme: dark;
      --bg: #111;
      --panel-bg: #181818;
      --accent: #f266a1;
      --accent-soft: #ffb3d6;
      --text: #eee;
      --muted: #999;
      --danger: #ff5c5c;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      --overlay-center-spot: rgba(0,0,0,0.12);
      --overlay-middle-falloff: rgba(0,0,0,0.7);
      --overlay-edge: rgba(0,0,0,0.88);
      --candle-core: rgba(255, 102, 0, 0.55);
      --candle-mid: rgba(252, 199, 27, 0.3);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: radial-gradient(circle at top, #222 0, #050505 60%);
      color: var(--text);
      height: 100vh;
      display: flex;
      overflow: hidden;
    }

    #app { display: flex; width: 100%; height: 100%; }

    /* Canvas area */
    #canvas-container {
      position: relative;
      flex: 1 1 auto;
      background: #000 url("../img/QiBackgroundTile.png") repeat;
      overflow: hidden;
      user-select: none;
      
    }

    #titleArcSvg {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 4;
    }

    #ambientOverlay {
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: radial-gradient(circle at 35% 25%, var(--overlay-center-spot) 0%, var(--overlay-middle-falloff) 95%, var(--overlay-edge) 100%);
      mix-blend-mode: multiply;
      opacity: 0.5;
      animation: ambientPulse 9s ease-in-out infinite;
      z-index: 2;
    }

    #candleFlicker {
      position: absolute;
      width: 900px;
      height: 900px;
      bottom: -120px;
      right: -500px;
      pointer-events: none;
      background: radial-gradient(
        circle,
        var(--candle-core) 0%,
        rgba(255, 180, 40, 0.35) 25%,
        var(--candle-mid) 65%,
        rgba(0, 0, 0, 0) 100%
      );
      mix-blend-mode: screen;
      filter: blur(100px);
      opacity: 0.75;
      animation: candleFlicker 6.8s ease-in-out infinite;
      z-index: 3;
    }

    #mandalaCanvas {
      width: 100%;
      height: 100%;
      display: block;
      background: transparent; /* so back image + tiled bg show through */
      cursor: grab;
    }
    #mandalaCanvas.dragging { cursor: grabbing; }

    /* Side panel */
    #side-panel {
      width: 360px;
      max-width: 360px;
      flex: 0 0 auto;
      background: linear-gradient(180deg, #141414, #050505);
      border-left: 1px solid #333;
      display: flex;
      flex-direction: column;
      padding: 10px 12px;
      gap: 10px;
      overflow: hidden;
    }

    h1 {
      font-size: 1.2rem;
      margin: 0 0 4px;
      font-family: "Eagle Lake", cursive;
      color: var(--accent-soft);
      text-align: center;
    }

    h2 {
      font-size: 0.95rem;
      margin: 8px 0 4px;
      color: var(--accent-soft);
      border-bottom: 1px solid #333;
      padding-bottom: 2px;
    }

    label { font-size: 0.82rem; color: var(--muted); }

    select, input[type="text"], button {
      width: 100%;
      font-size: 0.85rem;
      margin-top: 4px;
      margin-bottom: 6px;
      padding: 4px 6px;
      border-radius: 4px;
      border: 1px solid #444;
      background: #101010;
      color: var(--text);
    }

    button {
      cursor: pointer;
      background: #222;
      border: 1px solid #555;
      transition: background 0.15s, border-color 0.15s, transform 0.05s;
    }
    button:hover { background: #333; border-color: var(--accent); }
    button:active { transform: scale(0.97); }

    #sigilSelect.glowing {
      border-color: #ffd78a;
      box-shadow: 0 0 8px rgba(255, 201, 120, 0.5), 0 0 20px rgba(255, 201, 120, 0.25);
      animation: glowPulse 4.5s ease-in-out infinite;
    }

    #sigilSelectLabel.glowing {
      color: #ffe7be;
      text-shadow: 0 0 6px rgba(255, 210, 140, 0.7);
      animation: glowPulseText 4.5s ease-in-out infinite;
    }

    .btn-primary {
      background: radial-gradient(circle at top, #ff6da8 0, #b43f7c 55%, #531834 100%);
      border-color: #ff9fcd;
      color: #fff;
    }
    .btn-primary:hover {
      background: radial-gradient(circle at top, #ff8bbb 0, #c54a89 55%, #5e1939 100%);
    }

    .btn-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
    .btn-toggle[data-active="true"] {
      background: #303030;
      border-color: var(--accent);
      box-shadow: 0 0 6px rgba(242, 102, 161, 0.5);
    }

    .row { display: flex; gap: 6px; margin-bottom: 4px; }
    .row > * { flex: 1 1 0; }

    #scroller { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; }

    .small-text { font-size: 0.78rem; color: var(--muted); }

    .pill {
      display: inline-block; padding: 2px 6px; border-radius: 999px; background: #1b1b1b;
      border: 1px solid #333; font-size: 0.75rem; margin-right: 4px; margin-bottom: 3px;
    }
    .pill.domain { border-color: #f56565; color: #fed7d7; }
    .pill.hybrid { border-color: #63b3ed; color: #bee3f8; }
    .pill.subdomain { border-color: #68d391; color: #c6f6d5; }
    .pill.subhybrid { border-color: #d6bcfa; color: #e9d8fd; }
    .pill.center { border-color: #f6e05e; color: #faf089; }

    #log {
      font-size: 0.74rem; color: var(--muted); background: #080808; border-radius: 4px;
      padding: 4px 6px; max-height: 80px; overflow-y: auto; border: 1px solid #222; white-space: pre-line;
    }

    input[type="file"] { font-size: 0.7rem; }

    /* Codex overlay */
    #codexOverlay {
      position: fixed; inset: 0;
      background: radial-gradient(circle at center, rgba(19, 3, 238, 0.185), rgba(0,0,0,0.98));
      display: flex; align-items: center; justify-content: center; z-index: 50;
    }
    #codexOverlay.hidden { display: none !important; }

    #codexBook {
      width: 80vw; max-width: 1100px; height: 80vh; max-height: 700px;
      background: radial-gradient(circle at top, #3b2a1a, #1c120a);
      border-radius: 16px; box-shadow: 0 0 40px rgba(0,0,0,0.9);
      border: 2px solid #caa46a; padding: 10px 16px 16px; display: flex; flex-direction: column; position: relative; overflow: hidden;
    }

    .codex-header {
      display: flex; align-items: center; justify-content: space-between;
      font-family: "Eagle Lake", cursive; color: #f6e0b5;
      border-bottom: 2px solid rgba(0,0,0,0.4); padding-bottom: 6px; margin-bottom: 8px;
    }
    .codex-title { font-size: 1.3rem; letter-spacing: 0.06em; }

    #closeCodexBtn {
      background: #3a2818; border-radius: 999px; padding: 2px 10px; font-size: 0.8rem;
      border: 1px solid #caa46a; color: #f6e0b5; cursor: pointer;
    }

    .codex-pages {
      flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; min-height: 0;
    }

    .codex-page {
      background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,0.03),
        rgba(255,255,255,0.03) 1px,
        transparent 1px,
        transparent 22px
      );
      border-radius: 12px; padding: 8px 10px; box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
      overflow: hidden; display: flex; flex-direction: column;
    }

    .codex-page h3 {
      font-family: "Eagle Lake", cursive; font-size: 1rem; color: #f9e5c1;
      margin: 0 0 4px; border-bottom: 1px solid rgba(0,0,0,0.4); padding-bottom: 4px;
    }

    .codex-scroll { flex: 1 1 auto; overflow-y: auto; padding-right: 4px; }

    .codex-section h4 {
      font-size: 0.8rem; text-transform: uppercase; color: #f0d9aa;
      margin: 8px 0 2px; border-bottom: 1px dashed rgba(0,0,0,0.4);
    }

    .codex-entry { margin: 4px 0 6px; padding: 4px 6px; border-radius: 6px; background: rgba(0,0,0,0.25); }

    .codex-link {
      display: inline-flex; align-items: center; gap: 4px; font-size: 0.85rem; font-weight: 600;
      font-family: "Eagle Lake", cursive; background: none; border: none; color: #ffe7c4; cursor: pointer; padding: 0; text-align: left;
      width: auto;
    }
    .codex-desc .codex-link { font-size: 0.72rem; }
    .codex-link:hover { text-shadow: 0 0 4px rgba(255,231,196,0.7); }

    .codex-desc { font-size: 0.75rem; color: #f1e0c0; opacity: 0.85; margin-top: 2px; }
    .codex-desc.indent { margin-left: 18px; }
    .codex-field-label {
      font-weight: 700;
      font-size: 0.85rem;
      color: #ffeccd;
      margin-right: 4px;
    }
    .codex-subdomain-list {
      list-style: disc;
      margin: 2px 0 4px 26px;
      padding-left: 12px;
    }
    .codex-subdomain-list li { margin: 0; padding: 0; }
    .hybrid-combos { margin-left: 18px; display: flex; flex-direction: column; gap: 2px; }
    .hybrid-combos .hybrid-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 4px;
    }
    .hybrid-combos .hybrid-line .codex-link { margin: 0; }

    .codex-sigil-entry { display: block; position: relative; }
    .codex-sigil-entry::after { content: ""; display: block; clear: both; }
    .codex-sigil-header { margin-bottom: 4px; }
    .codex-entry { position: relative; }
    .sigil-thumb {
      position: relative;
      z-index: 10;
      cursor: pointer;
      float: right;
      width: 90px;
      height: 90px;
      margin-left: 10px;
      margin-bottom: 6px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.12);
      background: radial-gradient(circle at center, #151015, #050308);
    }
    .codex-desc,
    .codex-link,
    .codex-desc.indent { position: relative; z-index: 1; }

    .filter-row {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      gap: 6px;
      margin: 4px 0 6px;
    }
    .filter-row select,
    .filter-row input {
      width: 100%;
    }

    #titleArcSvg text { filter: drop-shadow(0 2px 2px rgba(0,0,0,.7)); }

    .hidden { display: none !important; }

    body.sigil-selected #sigil-title-text {
      animation: titlePulse 8s ease-in-out infinite;
    }

    body.ambient-disabled #ambientOverlay,
    body.ambient-disabled #candleFlicker {
      opacity: 0;
      animation: none;
    }

    @keyframes glowPulse {
      0% { box-shadow: 0 0 6px rgba(255, 201, 120, 0.3); }
      50% { box-shadow: 0 0 16px rgba(255, 230, 170, 0.65); }
      100% { box-shadow: 0 0 6px rgba(255, 201, 120, 0.3); }
    }

    @keyframes glowPulseText {
      0% { text-shadow: 0 0 4px rgba(255, 210, 140, 0.4); }
      50% { text-shadow: 0 0 12px rgba(255, 230, 200, 0.9); }
      100% { text-shadow: 0 0 4px rgba(255, 210, 140, 0.4); }
    }

    @keyframes ambientPulse {
      0% { opacity: 0.35; }
      50% { opacity: 0.6; }
      100% { opacity: 0.35; }
    }

    @keyframes candleFlicker {
      0% { transform: scale(0.95) translate(25px, -5px); opacity: 0.6; }
      25% { transform: scale(1.05) translate(-5px, 5px); opacity: 0.85; }
      55% { transform: scale(0.98) translate(10px, -2px); opacity: 0.7; }
      100% { transform: scale(1.03) translate(-15px, 6px); opacity: 0.9; }
    }

    @keyframes titlePulse {
      0% { filter: drop-shadow(0 0 3px rgba(255,215,160,0.5)); }
      50% { filter: drop-shadow(0 0 12px rgba(255,255,200,0.9)); }
      100% { filter: drop-shadow(0 0 3px rgba(255,215,160,0.5)); }
    }