/* ============================================================
   THE RULEBOOK — Core Five  |  styles.css
   ============================================================ */

/* Global reset for a full-screen single-page experience.
   If you later add scrolling content below the map, remove
   "overflow: hidden" from body. */
html, body { margin: 0; padding: 0; }
body { background: #0a0908; overflow: hidden; }


    .rb-core-five-module {
      --bg: #0a0908;
      --gold: #c9a84c;
      --gold-light: #e8c96a;
      --cream: #f0e6d0;
      --rust: #b5451b;
      --sage: #5a7a5e;
      --lavender: #8a7fa8;
      --muted: #5a5550;
      --panel: #131210;
      --border: rgba(201,168,76,0.15);

      /*
        Make the module span the entire viewport width and height by fixing
        it to the viewport. This breaks out of GoDaddy's section container
        even when it has a max‑width or overflow restrictions. Negative
        margins are no longer required.
      */
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      width: 100vw;
      height: 100vh;
      margin: 0;
      background: var(--bg);
      color: var(--cream);
      font-family: 'Space Mono', 'Courier New', monospace;
      overflow: hidden;
      isolation: isolate;
    }

    .rb-core-five-module *,
    .rb-core-five-module *::before,
    .rb-core-five-module *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* BACKGROUND VIDEO (Vimeo, cover-fit) + SCRIM (sit behind everything) */
    .rb-cf-bg-video {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }
    /* Cover-fit: the 16:9 player is scaled to always overflow the box in both
       directions and centered, so there are never letterbox bars. */
    .rb-cf-bg-frame {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100vw;
      height: 56.25vw;       /* 16:9 derived from width */
      min-width: 177.78vh;   /* 16:9 derived from height (covers tall/narrow) */
      min-height: 100vh;
      border: 0;
      pointer-events: none;
    }
    .rb-cf-bg-scrim {
      position: absolute;
      inset: 0;
      z-index: 1;
      background: linear-gradient(to bottom, rgba(10,9,8,0.80), rgba(10,9,8,0.60) 45%, rgba(10,9,8,0.84));
      pointer-events: none;
    }

    /* Grain overlay (subtle, on top, never blocks clicks) */
    .rb-core-five-module::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
      pointer-events: none;
      z-index: 30;
      opacity: 0.35;
    }

    #rb-core-five-header {
      position: absolute;
      top: 0; left: 0; right: 0;
      padding: 16px 26px;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      z-index: 20;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(to bottom, rgba(10,9,8,0.95), transparent);
      pointer-events: none;
      /* Reserve space on the right for the IMDb badge so the names don't overlap it */
      padding-right: 120px;
    }
    #rb-core-five-header h2 {
      /* Use a web‑safe serif font reminiscent of the poster title */
      font-family: Georgia, "Times New Roman", serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--gold);
    }
    #rb-core-five-header p {
      font-size: 9px;
      letter-spacing: 0.2em;
      color: var(--muted);
      text-transform: uppercase;
      text-align: right;
    }

    /* IMDb link styling (top right corner) */
    #rb-imdb-link {
      position: absolute;
      top: 16px;
      right: 20px;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }
    /* Yellow IMDb badge recreated in CSS */
    #rb-imdb-link .imdb-logo {
      display: inline-block;
      background: #f5c518;
      color: #000;
      font-family: 'Arial Black', Arial, sans-serif;
      font-weight: 700;
      font-size: 10px;
      padding: 3px 6px;
      border-radius: 2px;
    }
    #rb-imdb-link:hover .imdb-logo {
      background: #f9d84b;
    }

    /* Credits tag at the bottom */
    #rb-core-five-credits {
      position: absolute;
      bottom: 18px;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      white-space: nowrap;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 9px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--muted);
      pointer-events: none;
    }

    /* When the panel is open, hide the IMDb link to prevent overlap */
    .rb-core-five-module.panel-open #rb-imdb-link {
      display: none;
    }

    /* Responsive overrides for narrow / mobile screens */
    .rb-core-five-module.is-narrow #rb-core-five-header {
      /* Reset right padding on small screens */
      padding-right: 18px;
    }
    .rb-core-five-module.is-narrow #rb-imdb-link {
      top: 12px;
      right: 18px;
    }
    .rb-core-five-module.is-narrow #rb-imdb-link .imdb-logo {
      font-size: 8px;
      padding: 2px 4px;
    }
    .rb-core-five-module.is-narrow #rb-core-five-credits {
      bottom: 12px;
      font-size: 7.5px;
      letter-spacing: 0.18em;
    }

    #rb-core-five-canvas {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
    }
    #rb-core-five-svg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 5;
    }

    .rb-cf-node {
      position: absolute;
      transform: translate(-50%, -50%);
      cursor: pointer;
      z-index: 10;
    }
    .rb-cf-node-inner {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 7px;
      transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .rb-cf-node:hover .rb-cf-node-inner { transform: scale(1.08); }

    .rb-cf-node-ring {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      background: var(--panel);
      transition: border-color 0.3s, box-shadow 0.3s;
    }
    .rb-cf-node:hover .rb-cf-node-ring,
    .rb-cf-node.rb-cf-active .rb-cf-node-ring {
      border-color: var(--gold);
      box-shadow: 0 0 28px rgba(201,168,76,0.3), 0 0 56px rgba(201,168,76,0.1);
    }
    .rb-cf-node.rb-cf-active .rb-cf-node-ring::after {
      content: '';
      position: absolute;
      inset: -4px;
      border-radius: 50%;
      border: 1px solid var(--gold);
      animation: rb-cf-pulse 2s ease-out infinite;
    }
    @keyframes rb-cf-pulse {
      0% { transform: scale(1); opacity: 0.5; }
      100% { transform: scale(1.5); opacity: 0; }
    }

    .rb-cf-node-initial {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 22px;
      font-weight: 700;
      color: var(--cream);
    }
    /* Profile photo fills the ring and sits over the letter. If it fails to load, the letter shows. */
    .rb-cf-node-photo {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    .rb-cf-node-name {
      font-size: 9px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--muted);
      white-space: nowrap;
      transition: color 0.2s;
    }
    .rb-cf-node:hover .rb-cf-node-name,
    .rb-cf-node.rb-cf-active .rb-cf-node-name { color: var(--gold-light); }

    .rb-cf-node-role {
      font-size: 7.5px;
      letter-spacing: 0.06em;
      color: var(--muted);
      white-space: nowrap;
      font-style: italic;
      opacity: 0.55;
    }

    .rb-cf-node[data-id="tyrese"] .rb-cf-node-ring { border-color: rgba(201,168,76,0.35); }
    .rb-cf-node[data-id="tyrese"] .rb-cf-node-initial { color: var(--gold-light); }
    .rb-cf-node[data-id="imani"]  .rb-cf-node-ring { border-color: rgba(201,168,76,0.35); }
    .rb-cf-node[data-id="imani"]  .rb-cf-node-initial { color: var(--gold-light); }
    .rb-cf-node[data-id="k"]      .rb-cf-node-ring { border-color: rgba(90,122,94,0.35); }
    .rb-cf-node[data-id="k"]      .rb-cf-node-initial { color: #8ab88e; }
    .rb-cf-node[data-id="kelsi"]  .rb-cf-node-ring { border-color: rgba(181,69,27,0.35); }
    .rb-cf-node[data-id="kelsi"]  .rb-cf-node-initial { color: #d4856a; }
    .rb-cf-node[data-id="nathan"] .rb-cf-node-ring { border-color: rgba(138,127,168,0.35); }
    .rb-cf-node[data-id="nathan"] .rb-cf-node-initial { color: #b0a8c8; }

    .rb-cf-node.rb-cf-dimmed { opacity: 0.15; }

    #rb-core-five-panel {
      position: absolute;
      right: 0; top: 0; bottom: 0;
      width: 320px;
      max-width: 86%;
      background: var(--panel);
      border-left: 1px solid var(--border);
      z-index: 40;
      transform: translateX(100%);
      transition: transform 0.4s cubic-bezier(0.4,0,0.2,1);
      overflow-y: auto;
      padding: 64px 24px 36px;
      -webkit-overflow-scrolling: touch;
    }
    #rb-core-five-panel.rb-cf-open { transform: translateX(0); }

    #rb-core-five-panel-close {
      position: absolute;
      top: 16px; right: 16px;
      background: none;
      border: 1px solid var(--border);
      color: var(--muted);
      width: 30px; height: 30px;
      /* Use a common sans-serif font for the close icon so characters like × display correctly */
      font-family: Arial, sans-serif;
      font-size: 12px;
      cursor: pointer;
      transition: border-color 0.2s, color 0.2s;
      display: flex; align-items: center; justify-content: center;
      z-index: 2;
    }
    #rb-core-five-panel-close:hover { border-color: var(--gold); color: var(--gold); }

    #rb-core-five-panel-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 27px;
      font-weight: 700;
      color: var(--cream);
      margin-bottom: 3px;
      line-height: 1.1;
    }
    #rb-core-five-panel-subtitle {
      font-size: 8.5px;
      letter-spacing: 0.18em;
      color: var(--gold);
      text-transform: uppercase;
      margin-bottom: 22px;
    }

    .rb-cf-panel-section { margin-bottom: 18px; }
    .rb-cf-panel-label {
      font-size: 7.5px;
      letter-spacing: 0.25em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 5px;
      border-bottom: 1px solid var(--border);
      padding-bottom: 4px;
    }
    .rb-cf-panel-text {
      font-size: 11px;
      line-height: 1.75;
      color: rgba(240,230,208,0.72);
    }
    .rb-cf-panel-tags {
      display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px;
    }
    .rb-cf-tag {
      font-size: 7.5px;
      letter-spacing: 0.1em;
      padding: 3px 8px;
      border: 1px solid var(--border);
      color: var(--muted);
      text-transform: uppercase;
    }

    .rb-cf-conn-item {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-bottom: 10px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--border);
    }
    .rb-cf-conn-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
    .rb-cf-conn-dot {
      width: 22px; height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: flex; align-items: center; justify-content: center;
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 10px;
      flex-shrink: 0;
      margin-top: 1px;
    }
    .rb-cf-conn-name {
      font-size: 9px;
      letter-spacing: 0.1em;
      color: var(--gold-light);
      text-transform: uppercase;
      margin-bottom: 2px;
    }
    .rb-cf-conn-type {
      font-size: 7.5px;
      letter-spacing: 0.08em;
      font-style: italic;
      color: var(--muted);
      text-transform: none;
    }
    .rb-cf-conn-desc {
      font-size: 10px;
      color: rgba(240,230,208,0.6);
      line-height: 1.55;
    }

    #rb-core-five-legend {
      position: absolute;
      bottom: 14px; left: 14px;
      z-index: 15;
      display: flex;
      flex-direction: column;
      gap: 6px;
      pointer-events: auto;
      padding: 9px 13px;
      border: 1px solid transparent;
      border-radius: 2px;
      transition: background 0.3s ease, border-color 0.3s ease;
    }
    #rb-core-five-legend .rb-cf-legend-head,
    #rb-core-five-legend .rb-cf-legend-item { transition: color 0.3s ease; }
    #rb-core-five-legend:hover { background: rgba(10,9,8,0.78); border-color: var(--border); }
    #rb-core-five-legend:hover .rb-cf-legend-head { color: var(--gold); }
    #rb-core-five-legend:hover .rb-cf-legend-item { color: var(--cream); }
    .rb-cf-legend-head {
      font-size: 7px; letter-spacing: 0.2em; text-transform: uppercase;
      color: var(--muted); margin-bottom: 2px;
    }
    .rb-cf-legend-item {
      display: flex; align-items: center; gap: 8px;
      font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--muted);
    }

    #rb-core-five-hint {
      position: absolute;
      bottom: 44px; right: 22px;
      font-size: 8px;
      letter-spacing: 0.1em;
      color: var(--muted);
      text-align: right;
      z-index: 15;
      line-height: 1.8;
      pointer-events: none;
    }
    #rb-core-five-copyright {
      position: absolute;
      bottom: 18px; right: 22px;
      font-family: Georgia, "Times New Roman", serif;
      font-size: 8px;
      letter-spacing: 0.14em;
      color: var(--muted);
      text-align: right;
      white-space: nowrap;
      z-index: 15;
      pointer-events: none;
    }
    .rb-core-five-module.is-narrow #rb-core-five-copyright { display: none; }

    #rb-core-five-edge-tooltip {
      position: absolute;
      background: rgba(19,18,16,0.97);
      border: 1px solid var(--border);
      padding: 9px 13px;
      font-size: 9px;
      letter-spacing: 0.05em;
      color: var(--cream);
      pointer-events: none;
      z-index: 25;
      display: none;
      max-width: 210px;
      line-height: 1.55;
    }
    #rb-core-five-edge-tooltip .rb-cf-et-pair {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 12px;
      color: var(--gold-light);
      margin-bottom: 3px;
    }

    .rb-cf-edge { pointer-events: stroke; cursor: pointer; stroke-linecap: round; transition: stroke-opacity 0.45s ease, stroke-width 0.3s ease; }
    .rb-cf-edge-core    { stroke: rgba(201,168,76,0.65); }
    .rb-cf-edge-tension { stroke: rgba(181,69,27,0.6); }
    .rb-cf-edge-support { stroke: rgba(90,122,94,0.6); stroke-dasharray: 5 4; }
    .rb-cf-edge-foil    { stroke: rgba(100,100,100,0.55); stroke-dasharray: 6 4; }
    .rb-cf-edge-mirror  { stroke: rgba(138,127,168,0.5); stroke-dasharray: 2 6; }
    .rb-cf-edge:hover   { stroke-opacity: 1 !important; stroke-width: 2.5 !important; }
    /* Focus states when a character is selected */
    .rb-cf-edge-on  { stroke-opacity: 1 !important; stroke-width: 2.4 !important; }
    .rb-cf-edge-off { stroke-opacity: 0.07 !important; }

    /* NARROW / MOBILE (JS-driven class, reliable inside the iframe) */
    .rb-core-five-module.is-narrow #rb-core-five-header { padding: 14px 18px; }
    .rb-core-five-module.is-narrow #rb-core-five-header p { display: none; }
    .rb-core-five-module.is-narrow .rb-cf-node-ring { width: 52px; height: 52px; }
    .rb-core-five-module.is-narrow .rb-cf-node-initial { font-size: 18px; }
    .rb-core-five-module.is-narrow .rb-cf-node-role { display: none; }
    .rb-core-five-module.is-narrow #rb-core-five-legend { display: none; }
    .rb-core-five-module.is-narrow #rb-core-five-hint { display: none; }
    .rb-core-five-module.is-narrow #rb-core-five-panel {
      right: 0; left: 0; bottom: 0; top: auto;
      width: 100%;
      max-width: 100%;
      height: auto;
      max-height: 74%;
      border-left: none;
      border-top: 1px solid var(--border);
      transform: translateY(100%);
      padding: 44px 20px 28px;
    }
    .rb-core-five-module.is-narrow #rb-core-five-panel.rb-cf-open { transform: translateY(0); }