:root {
      color-scheme: dark;
      --bg: #050b17;
      --bg-soft: #0b1326;
      --panel: #101c35;
      --panel-2: #162543;
      --text: #dff3ff;
      --muted: #8fa7bf;
      --line: rgba(111, 180, 255, .28);
      --accent: #2bf7ff;
      --accent-hover: #6cfbff;
      --focus: #29f2ff;
      --accent-glow: 0 0 0 1px rgba(43, 247, 255, .45), 0 0 16px rgba(43, 247, 255, .35), 0 0 34px rgba(43, 247, 255, .2);
      --focus-glow: 0 0 0 3px rgba(41, 242, 255, .22), 0 0 26px rgba(41, 242, 255, .25);
      --metal-dark: #0a1224;
      --metal-mid: #1a2b4b;
      --metal-light: #7eaed8;
      --neon-cyan: #6ef7ff;
      --neon-purple: #b98cff;
      --ok: #179d6c;
      --ok-soft: rgba(23, 157, 108, .18);
      --rare-comun: #52d88a;
      --rare-raro: #5da8ff;
      --rare-epico: #b786ff;
      --rare-legendario: #f4c45a;
      --shadow: 0 18px 40px rgba(2, 8, 20, .62);
      --shadow-soft: 0 10px 24px rgba(3, 11, 29, .52);
      --radius: 22px;
      --control-bg: linear-gradient(165deg, rgba(12, 20, 39, .96), rgba(22, 38, 68, .95));
      --control-border: rgba(145, 214, 255, .52);
      --control-shadow: inset 0 1px 0 rgba(189, 232, 255, .08), 0 0 0 1px rgba(31, 78, 131, .3);
      --toon-border: 3px solid color-mix(in srgb, var(--accent) 58%, #dff6ff);
      --toon-shadow: 0 6px 0 rgba(2, 8, 20, .72), 0 14px 0 rgba(2, 8, 20, .42), 0 24px 28px rgba(2, 8, 20, .44);
      --toon-pop: cubic-bezier(.2, .92, .28, 1.18);
      --toon-bg-panel: linear-gradient(160deg, rgba(34, 93, 173, .94), rgba(97, 56, 171, .92));
      --toon-accent-2: #ff5cf2;
    }

    * { box-sizing: border-box; }
    html, body { margin: 0; min-height: 100%; height: 100%; overflow: hidden; }

    body {
      font-family: "Comic Sans MS", "Chalkboard SE", "Marker Felt", "Trebuchet MS", cursive, sans-serif;
      font-size: 15px;
      letter-spacing: .01em;
      background:
        radial-gradient(circle at 10% 10%, rgba(120, 170, 255, .3), transparent 34%),
        radial-gradient(circle at 84% 6%, rgba(43, 247, 255, .22), transparent 36%),
        radial-gradient(circle at 76% 74%, rgba(136, 82, 255, .2), transparent 40%),
        radial-gradient(circle at 18% 92%, rgba(59, 197, 255, .2), transparent 34%),
        radial-gradient(circle at 92% 80%, rgba(255, 168, 130, .18), transparent 32%),
        linear-gradient(180deg, rgba(6, 12, 27, .82), rgba(5, 11, 24, .92)),
        var(--bg);
      color: var(--text);
      line-height: 1.55;
      position: relative;
      isolation: isolate;
    }

    body::before,
    body::after {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: -1;
    }

    body::before {
      background-image:
        radial-gradient(1.2px 1.2px at 7% 16%, rgba(228, 244, 255, .95), transparent 75%),
        radial-gradient(1.5px 1.5px at 18% 66%, rgba(234, 240, 255, .86), transparent 76%),
        radial-gradient(1.1px 1.1px at 34% 32%, rgba(208, 233, 255, .9), transparent 74%),
        radial-gradient(1.4px 1.4px at 51% 22%, rgba(214, 242, 255, .9), transparent 74%),
        radial-gradient(1.2px 1.2px at 64% 76%, rgba(231, 240, 255, .78), transparent 75%),
        radial-gradient(1.3px 1.3px at 81% 43%, rgba(220, 243, 255, .86), transparent 74%),
        radial-gradient(1.4px 1.4px at 94% 72%, rgba(237, 246, 255, .88), transparent 75%),
        radial-gradient(1.8px 1.8px at 13% 45%, rgba(255, 255, 255, .95), transparent 76%),
        radial-gradient(1.6px 1.6px at 44% 86%, rgba(237, 244, 255, .85), transparent 76%),
        radial-gradient(2px 2px at 73% 14%, rgba(245, 250, 255, .95), transparent 78%),
        radial-gradient(1.8px 1.8px at 89% 58%, rgba(240, 247, 255, .84), transparent 77%);
      opacity: .74;
      animation: starsDrift 24s linear infinite;
    }

    body::after {
      background:
        radial-gradient(circle at 85% 18%, rgba(255, 170, 102, .24), rgba(255, 170, 102, .05) 13%, transparent 24%),
        radial-gradient(circle at 86% 18%, rgba(255, 232, 199, .2), transparent 5%),
        radial-gradient(circle at 13% 82%, rgba(124, 219, 255, .21), rgba(124, 219, 255, .05) 12%, transparent 22%),
        radial-gradient(circle at 45% 8%, rgba(204, 137, 255, .16), transparent 20%);
      box-shadow: inset 0 0 120px rgba(84, 173, 255, .08);
      opacity: .62;
    }

    .space-decor {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .space-decor span {
      position: absolute;
      font-size: clamp(1rem, .8rem + 1vw, 1.8rem);
      opacity: .34;
      text-shadow: 0 0 10px rgba(132, 220, 255, .36);
      animation: floatSpace 10s ease-in-out infinite;
    }

    .space-decor span:nth-child(1) { top: 10%; left: 14%; animation-delay: .6s; }
    .space-decor span:nth-child(2) { top: 28%; right: 10%; animation-delay: 2.4s; }
    .space-decor span:nth-child(3) { bottom: 14%; left: 24%; animation-delay: 4.2s; }

    .app { width: 100%; height: 100vh; padding: 12px; }

    .layout {
      display: grid;
      grid-template-columns: 300px minmax(0, 1fr);
      gap: 18px;
      align-items: start;
      height: 100%;
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: calc(100vh - 24px);
      overflow-y: auto;
      overflow-x: hidden;
      background:
        radial-gradient(circle at 20% 12%, rgba(64, 191, 255, .22), transparent 42%),
        radial-gradient(circle at 88% 24%, rgba(147, 126, 255, .2), transparent 36%),
        linear-gradient(160deg, rgba(7, 20, 43, .97), rgba(10, 35, 70, .95));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow), var(--accent-glow), inset 0 0 0 1px rgba(112, 210, 255, .14);
      display: grid;
      gap: 12px;
      align-content: start;
    }

    .sidebar::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      border-radius: inherit;
      background-image:
        radial-gradient(circle, rgba(222, 244, 255, .22) 1px, transparent 1.3px);
      background-size: 34px 34px;
      opacity: .25;
    }

    .title {
      margin: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 6px;
      font-size: clamp(1.1rem, .9rem + 1vw, 1.8rem);
      letter-spacing: .3px;
      font-weight: 900;
      color: #e7fdff;
      text-shadow: 0 0 18px rgba(43, 247, 255, .25);
      filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .35));
    }

    .title-text {
      display: inline-block;
      min-width: 0;
      max-width: 100%;
      text-align: center;
      overflow-wrap: anywhere;
      animation: titleBounce 2.6s ease-in-out infinite;
      transform-origin: center;
    }

    .title-emoji {
      display: inline-block;
      font-size: .9em;
      animation: titleOrbit 2.4s ease-in-out infinite;
      transform-origin: 50% 70%;
    }

    .title-emoji:last-child { animation-delay: 1.2s; }

    .subtitle {
      margin: 6px 0 0;
      color: #c3e8ff;
      line-height: 1.4;
      font-size: .98rem;
    }

    .sidebar-copy {
      position: relative;
      z-index: 1;
      padding: 14px 12px;
      overflow: hidden;
      border-radius: 16px;
      border: 1px solid rgba(120, 214, 255, .24);
      background: linear-gradient(145deg, rgba(6, 26, 56, .88), rgba(15, 48, 90, .56));
      box-shadow: inset 0 0 18px rgba(108, 212, 255, .12);
    }

    .sidebar-nav {
      display: grid;
      gap: 8px;
      position: relative;
      z-index: 1;
      min-width: 0;
    }

    .sidebar-item {
      width: 100%;
      max-width: 100%;
      text-align: left;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 10px;
      font-weight: 700;
      padding: 12px 14px;
      border-radius: 14px;
      border-color: rgba(115, 203, 255, .45);
      background: linear-gradient(165deg, rgba(8, 29, 59, .9), rgba(11, 40, 76, .82));
      box-shadow: inset 0 0 0 1px rgba(95, 189, 255, .18), 0 10px 18px rgba(2, 10, 28, .36);
    }

    .sidebar-item[disabled] {
      cursor: not-allowed;
      opacity: .55;
      transform: none;
    }

    .content {
      min-width: 0;
      display: grid;
      gap: 16px;
      height: calc(100vh - 24px);
      overflow: hidden;
      position: relative;
      z-index: 0;
      border-radius: var(--radius);
    }

    .content > :not(.space-decor) {
      position: relative;
      z-index: 1;
    }
    .sidebar-toggle {
      margin-top: 2px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      border-style: dashed;
      border-color: rgba(126, 220, 255, .52);
      background: linear-gradient(145deg, rgba(15, 46, 84, .9), rgba(9, 31, 62, .88));
      position: relative;
      z-index: 1;
    }

    .sidebar-toggle:hover {
      border-style: solid;
    }

    .sidebar-item-icon {
      width: 30px;
      height: 30px;
      display: inline-grid;
      place-items: center;
      border-radius: 10px;
      font-size: 1rem;
      border: 1px solid rgba(123, 217, 255, .4);
      background: radial-gradient(circle at 22% 20%, rgba(145, 225, 255, .3), rgba(23, 84, 131, .35));
      box-shadow: inset 0 0 10px rgba(91, 191, 255, .2);
      flex-shrink: 0;
    }

    .sidebar-item-text {
      display: grid;
      gap: 2px;
      min-width: 0;
    }

    .sidebar-label {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      font-size: .98rem;
      letter-spacing: .2px;
    }

    .sidebar-hint {
      font-size: .76rem;
      color: rgba(184, 226, 255, .84);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .sidebar-item.active {
      background: linear-gradient(160deg, rgba(13, 60, 104, .95), rgba(21, 83, 130, .9));
      border-color: rgba(115, 236, 255, .95);
      box-shadow: 0 0 24px rgba(56, 204, 255, .32), inset 0 0 0 1px rgba(171, 236, 255, .26);
    }

    .sidebar-item.active .sidebar-item-icon {
      border-color: rgba(155, 241, 255, .9);
      background: radial-gradient(circle at 22% 20%, rgba(193, 246, 255, .46), rgba(40, 128, 178, .52));
      transform: translateY(-1px);
    }

    .layout.sidebar-collapsed { grid-template-columns: 86px minmax(0, 1fr); }
    .layout.sidebar-collapsed .sidebar { padding: 14px 10px; }
    .layout.sidebar-collapsed .sidebar-copy,
    .layout.sidebar-collapsed .sidebar-item-text { display: none; }
    .layout.sidebar-collapsed .sidebar-item { justify-content: center; padding-inline: 6px; }
    .layout.sidebar-collapsed .sidebar-toggle { padding-inline: 8px; }

    button, input, select, textarea {
      border: 1px solid var(--control-border);
      background: var(--control-bg);
      color: var(--text);
      border-radius: 12px;
      padding: 10px 12px;
      font: inherit;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease;
      box-shadow: var(--control-shadow);
    }
    button, select {
      cursor: pointer;
      min-height: 40px;
    }

    button:hover, input:hover, select:hover, textarea:hover {
      transform: translateY(-1px);
      border-color: var(--accent);
      box-shadow: var(--shadow-soft), var(--accent-glow);
      background: linear-gradient(165deg, rgba(16, 29, 56, .96), rgba(31, 52, 90, .94));
    }
    button:active, select:active { transform: translateY(0); box-shadow: inset 0 2px 10px rgba(0, 10, 30, .45); }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: none;
      border-color: var(--focus);
      box-shadow: var(--focus-glow), var(--control-shadow);
    }
    select option {
      background: #0a152b;
      color: #dff3ff;
    }
    select:open,
    select:focus option:checked {
      background: #0f1e3d;
      color: #e7fdff;
    }
    button.active {
      border-color: var(--accent);
      box-shadow: var(--accent-glow), var(--control-shadow);
      background: linear-gradient(165deg, rgba(19, 39, 73, .98), rgba(14, 61, 102, .95));
    }

    .view {
      display: none;
      height: 100%;
      overflow-y: auto;
      overflow-x: hidden;
    }
    .view.active { display: block; animation: fade var(--anim-fade); }
    #viewMap {
      overflow: hidden;
    }

    @keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
    @keyframes floatSpace {
      0%, 100% { transform: translateY(0) rotate(-3deg) scale(1); }
      50% { transform: translateY(-10px) rotate(4deg) scale(1.04); }
    }

    @keyframes titleBounce {
      0%, 100% { transform: translateY(0) rotate(-1deg) scale(1); }
      35% { transform: translateY(-2px) rotate(1deg) scale(1.03); }
      65% { transform: translateY(1px) rotate(-1.5deg) scale(.99); }
    }

    @keyframes titleOrbit {
      0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
      40% { transform: translateY(-2px) rotate(-12deg) scale(1.12); }
      70% { transform: translateY(1px) rotate(10deg) scale(.94); }
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
      gap: 16px;
    }

    .universe-map-shell {
      position: relative;
      width: 100%;
      height: calc(100vh - 24px);
      border: 1px solid rgba(120, 178, 255, .38);
      border-radius: var(--radius);
      box-shadow:
        0 18px 34px rgba(4, 8, 22, .45),
        inset 0 0 0 1px rgba(176, 220, 255, .14);
      overflow: hidden;
      background:
        radial-gradient(circle at 12% 12%, rgba(81, 194, 255, .12), transparent 34%),
        radial-gradient(circle at 88% 16%, rgba(176, 110, 255, .12), transparent 32%),
        rgba(6, 11, 24, 0.95);
      scroll-behavior: smooth;
    }

    #universeMapCanvas {
      position: relative;
      min-width: 100%;
      min-height: 100%;
      background:
        linear-gradient(170deg, rgba(7, 12, 28, .98), rgba(15, 24, 48, .96));
      isolation: isolate;
    }

    .map-nebula-layer,
    .map-stars-layer {
      position: absolute;
      inset: 0;
      pointer-events: none;
    }

    .map-nebula-layer {
      z-index: 0;
      background:
        radial-gradient(circle at 14% 24%, rgba(50, 173, 255, .22), transparent 35%),
        radial-gradient(circle at 84% 16%, rgba(163, 112, 255, .2), transparent 34%),
        radial-gradient(circle at 64% 74%, rgba(75, 217, 255, .14), transparent 38%),
        radial-gradient(circle at 20% 84%, rgba(139, 117, 255, .15), transparent 38%);
      opacity: .92;
    }

    .map-stars-layer {
      z-index: 1;
      opacity: .36;
      background-image:
        radial-gradient(1.5px 1.5px at 8% 18%, rgba(242, 251, 255, .86), transparent 70%),
        radial-gradient(1.6px 1.6px at 26% 72%, rgba(228, 238, 255, .78), transparent 72%),
        radial-gradient(1.2px 1.2px at 38% 32%, rgba(225, 248, 255, .8), transparent 74%),
        radial-gradient(1.4px 1.4px at 57% 82%, rgba(214, 233, 255, .74), transparent 72%),
        radial-gradient(1.8px 1.8px at 72% 24%, rgba(235, 250, 255, .85), transparent 72%),
        radial-gradient(1.4px 1.4px at 88% 66%, rgba(235, 241, 255, .74), transparent 72%),
        radial-gradient(1.2px 1.2px at 94% 38%, rgba(212, 231, 255, .74), transparent 72%);
      animation: starsDrift 24s linear infinite;
    }

    @keyframes starsDrift {
      from { transform: translateY(0); }
      50% { transform: translateY(-6px); }
      to { transform: translateY(0); }
    }

    .map-world {
      position: relative;
      min-width: 100%;
      min-height: 100%;
      z-index: 2;
    }

    .map-links-layer {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      z-index: 2;
      pointer-events: none;
      overflow: visible;
    }

    .map-link-path {
      fill: none;
      stroke: rgba(72, 198, 255, .98);
      stroke-width: var(--link-width, 3.4);
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-dasharray: none;
      filter: drop-shadow(0 0 4px rgba(110, 219, 255, .82)) drop-shadow(0 0 12px rgba(56, 198, 255, .62));
      opacity: .98;
      animation: connectorGlow 1.8s ease-in-out infinite alternate;
    }

    .map-link-path--secondary {
      stroke: rgba(255, 78, 78, .98);
      stroke-width: 2.8;
      stroke-dasharray: none;
      filter: drop-shadow(0 0 4px rgba(255, 102, 102, .9)) drop-shadow(0 0 14px rgba(255, 66, 66, .7));
      opacity: 1;
      animation: connectorGlow 1.4s ease-in-out infinite alternate;
    }

    @keyframes connectorGlow {
      from { opacity: .72; }
      to { opacity: 1; }
    }

    @keyframes connectorFlow {
      from { stroke-dashoffset: 0; }
      to { stroke-dashoffset: -120; }
    }

    .absorption-effect {
      position: absolute;
      left: var(--start-x, 0px);
      top: var(--start-y, 0px);
      width: 26px;
      height: 26px;
      margin-left: -13px;
      margin-top: -13px;
      pointer-events: none;
      z-index: 9;
    }

    .absorption-effect::before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 6px;
      height: var(--path-length, 0px);
      transform-origin: top center;
      transform: translate(-50%, 0) rotate(var(--angle, 0deg));
      background: linear-gradient(180deg, rgba(174, 255, 245, .9), rgba(43, 247, 255, .05));
      box-shadow: 0 0 20px rgba(43, 247, 255, .65);
      border-radius: 999px;
      opacity: .78;
      animation: absorptionBeamFade .75s ease forwards;
    }

    .absorption-effect::after {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      transform: translate(-50%, -50%);
      background: radial-gradient(circle, rgba(222, 254, 255, .98) 0%, rgba(112, 246, 255, .85) 38%, rgba(48, 177, 255, .15) 75%, transparent 100%);
      box-shadow: 0 0 18px rgba(112, 246, 255, .95), 0 0 36px rgba(79, 169, 255, .7);
      animation: absorptionMove .75s cubic-bezier(.16, .84, .36, 1) forwards;
    }

    @keyframes absorptionMove {
      from { transform: translate(-50%, -50%) scale(1); }
      to { transform: translate(calc(-50% + var(--delta-x, 0px)), calc(-50% + var(--delta-y, 0px))) scale(.35); opacity: .15; }
    }

    @keyframes absorptionBeamFade {
      from { opacity: .95; }
      to { opacity: 0; }
    }

    /* --- INICIO NUEVO DISEÑO ORBES ESTELARES --- */
    .universe-node {
      --w: 150px;
      --h: 170px;
      --orb-size: 130px;
      --title-size: 0.95rem;
      position: absolute;
      width: var(--w);
      height: var(--h);
      border: 0;
      box-shadow: none;
      background: transparent;
      z-index: 2;
      cursor: pointer;
      padding: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      animation: none;
      animation-delay: var(--float-delay, 0s);
      transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      min-height: 0;
    }

    @keyframes nodeFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-8px); }
    }

    .universe-node:hover {
      transform: scale(1.15); /* Efecto de crecimiento que pediste */
      z-index: 10; /* Lo trae al frente al hacer hover */
      border-color: transparent;
      box-shadow: none;
      background: transparent;
    }

    .universe-node:active,
    .universe-node:focus-visible {
      border-color: transparent;
      box-shadow: none;
      background: transparent;
    }

    .universe-node--universe {
      --w: 182px;
      --h: 206px;
      --orb-size: 164px;
      --title-size: 1.02rem;
    }

    .universe-node--world {
      --w: 142px;
      --h: 164px;
      --orb-size: 126px;
      --title-size: 0.92rem;
      z-index: 4;
    }

    .universe-node.is-dragging {
      z-index: 12;
    }

    .universe-node.is-drop-target .orb-container {
      border-color: #7effa6;
      box-shadow: 0 0 38px rgba(126, 255, 166, 0.95), inset 0 0 26px rgba(126, 255, 166, 0.45);
      transform: scale(1.05);
    }

    /* El Orbe Circular con efecto Neón */
    .universe-node .orb-container {
      width: var(--orb-size);
      height: var(--orb-size);
      border-radius: 50%; /* Esto hace el círculo perfecto */
      border: 3px solid #00bfff;
      box-shadow: 0 0 18px rgba(0, 191, 255, 0.6), inset 0 0 24px rgba(0, 191, 255, 0.5);
      overflow: hidden;
      position: relative;
      transition: box-shadow 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
      background: rgba(17, 22, 42, 0.95);
      flex-shrink: 0;
    }

    .universe-node:hover .orb-container {
      box-shadow: 0 0 35px rgba(0, 191, 255, 1), inset 0 0 30px rgba(0, 191, 255, 0.8);
      border-color: #ffffff;
    }

    /* La imagen dentro del orbe (no se deforma) */
    .universe-node .universe-cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }

    .universe-node:hover .universe-cover {
      transform: scale(1.12);
    }

    /* Fallback por si la imagen se rompe */
    .universe-node .cover-fallback {
      position: absolute;
      inset: 0;
      display: none;
      align-items: center;
      justify-content: center;
      text-align: center;
      background: linear-gradient(145deg, rgba(89,208,255,.3), rgba(167,139,250,.3));
      color: #eef5ff;
      font-size: 0.75rem;
      padding: 10px;
    }
    
    .universe-node .universe-cover.is-broken + .cover-fallback {
      display: flex;
    }

    /* Textos flotando debajo del orbe */
    .universe-node .node-info {
      margin-top: 12px;
      text-align: center;
      text-shadow: 0 2px 6px rgba(0, 0, 0, 0.9);
      width: 100%;
    }

    .universe-node h3 {
      margin: 0;
      font-size: var(--title-size);
      color: #ffffff;
      letter-spacing: 1px;
      text-transform: uppercase;
      font-weight: 800;
    }

    .map-world-node {
      position: absolute;
      border: 1px solid rgba(118, 188, 255, 0.55);
      background: rgba(9, 21, 44, 0.9);
      color: #d9ecff;
      border-radius: 999px;
      padding: 6px 10px;
      font-size: 0.72rem;
      line-height: 1;
      cursor: pointer;
      z-index: 3;
      max-width: 180px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      box-shadow: 0 0 14px rgba(47, 146, 255, 0.3);
      transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    }

    .map-world-node:hover {
      transform: translateY(-1px);
      border-color: rgba(189, 224, 255, 0.95);
      box-shadow: 0 0 18px rgba(88, 180, 255, 0.45);
    }

    .map-world-node[data-locked="1"] {
      opacity: 0.72;
      border-style: dashed;
    }

    .map-popup {
      position: absolute;
      width: min(300px, 88vw);
      border-radius: 16px;
      border: 1px solid rgba(140, 186, 255, .45);
      background: rgba(16, 26, 50, .98);
      box-shadow: var(--shadow);
      padding: 14px;
      z-index: 8;
      animation: popupIn .18s ease;
    }

    .map-popup form { display: grid; gap: 10px; }
    .map-popup label { display: grid; gap: 4px; color: #d8e8ff; font-size: .85rem; }
    .map-popup input {
      border-color: rgba(114, 203, 255, .42);
      background: linear-gradient(160deg, rgba(9, 20, 42, .96), rgba(20, 39, 71, .95));
      color: #e5f7ff;
      border-radius: 10px;
      padding: 9px 10px;
      font: inherit;
    }
    .cover-mode {
      display: inline-grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid rgba(147, 175, 255, .35);
      background: rgba(255,255,255,.06);
    }
    .cover-mode button {
      padding: 8px 10px;
      border-radius: 9px;
      border-color: transparent;
      background: rgba(255,255,255,.08);
      color: #e5eeff;
      font-weight: 700;
    }
    .cover-mode button.active {
      color: #dcfbff;
      background: rgba(21, 116, 162, .72);
      box-shadow: none;
      border-color: transparent;
    }
    .map-toolbar {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .map-tool-btn {
      position: relative;
      overflow: hidden;
      padding: 8px 14px;
      font-size: .85rem;
      border-radius: 12px;
      font-weight: 800;
      animation: mapToolPulse 1.8s ease-in-out infinite;
    }
    .map-tool-btn::after {
      content: '';
      position: absolute;
      inset: -40% -20%;
      background: linear-gradient(120deg, transparent 22%, rgba(255, 255, 255, .28) 48%, transparent 70%);
      transform: translateX(-135%);
      animation: mapToolShine 2.7s ease-in-out infinite;
      pointer-events: none;
    }
    .map-tool-btn--blackhole {
      animation-duration: 2.1s;
    }
    .map-tool-btn--bigbang {
      box-shadow: 0 0 18px rgba(255, 150, 82, .4);
    }
    .map-tool-btn--blackhole {
      box-shadow: 0 0 18px rgba(118, 96, 255, .42);
      border-color: rgba(165, 147, 255, .7);
    }
    .map-tool-token {
      position: fixed;
      left: 0;
      top: 0;
      z-index: 9999;
      font-size: 38px;
      line-height: 1;
      pointer-events: none;
      transform: translate(-50%, -50%);
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, .5));
      animation: mapTokenFloat .7s ease-in-out infinite alternate;
    }
    .map-tool-token--blackhole {
      animation-name: mapTokenSpin;
      filter: drop-shadow(0 0 12px rgba(144, 120, 255, .75));
    }
    .universe-node.is-tool-target .orb-container {
      border-color: #ffdf8e;
      box-shadow: 0 0 40px rgba(255, 223, 142, .9), inset 0 0 26px rgba(255, 202, 120, .42);
      transform: scale(1.04);
    }
    .universe-node.is-tool-target--danger .orb-container {
      border-color: #ff6767;
      box-shadow: 0 0 42px rgba(255, 89, 89, .92), inset 0 0 26px rgba(255, 91, 91, .45);
    }

    @keyframes mapToolPulse {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-1px) scale(1.03); }
    }

    @keyframes mapToolShine {
      0%, 24% { transform: translateX(-135%); }
      54%, 100% { transform: translateX(135%); }
    }

    @keyframes mapTokenFloat {
      from { transform: translate(-50%, -50%) scale(.95); }
      to { transform: translate(-50%, -50%) scale(1.07); }
    }

    @keyframes mapTokenSpin {
      from { transform: translate(-50%, -50%) rotate(0deg) scale(.95); }
      to { transform: translate(-50%, -50%) rotate(24deg) scale(1.05); }
    }
    .cover-input-group[hidden] { display: none; }
    .map-popup .popup-feedback { min-height: 16px; font-size: .8rem; color: #ffd2d2; margin: 0; }
    .map-popup button[type="submit"] {
      background: var(--accent);
      color: #fff;
      border-color: color-mix(in srgb, var(--accent) 68%, white);
    }
    .map-popup button[type="submit"]:hover { background: var(--accent-hover); }

    @keyframes popupIn {
      from { opacity: 0; transform: translateY(6px) scale(.96); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .universe-node p {
      margin: 4px 0 0;
      font-size: .74rem;
      color: #d4e9ff;
      text-shadow: 0 2px 10px rgba(0, 0, 0, .8);
      letter-spacing: .06em;
      font-weight: 700;
      text-transform: uppercase;
    }

    .completion-badge {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-top: 6px;
      padding: 2px 8px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .28);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: .06em;
      text-transform: uppercase;
    }

    .completion-badge--incomplete {
      background: rgba(255, 133, 133, .12);
      color: #ffd8d8;
      border-color: rgba(255, 133, 133, .35);
    }

    .completion-badge--advanced {
      background: rgba(255, 217, 121, .14);
      color: #fff1c9;
      border-color: rgba(255, 217, 121, .35);
    }

    .completion-badge--complete {
      background: rgba(131, 244, 188, .14);
      color: #dbffe8;
      border-color: rgba(131, 244, 188, .4);
    }

    .completion-track {
      display: block;
      width: 100%;
      height: 7px;
      margin-top: 6px;
      border-radius: 999px;
      overflow: hidden;
      background: rgba(255, 255, 255, .14);
      border: 1px solid rgba(255,255,255,.2);
    }

    .completion-fill {
      display: block;
      height: 100%;
      width: 0;
      border-radius: inherit;
      transition: width .3s ease;
    }

    .completion-fill--incomplete { background: linear-gradient(90deg, #ff7f7f, #ff5252); }
    .completion-fill--advanced { background: linear-gradient(90deg, #ffd36c, #ffb703); }
    .completion-fill--complete { background: linear-gradient(90deg, #52f09f, #00c977); }

    .card {
      background: linear-gradient(158deg, var(--panel), var(--panel-2));
      border: 2px solid color-mix(in srgb, var(--line) 70%, #b8f2ff);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(193, 236, 255, .09), 0 4px 0 rgba(4, 10, 25, .4);
      transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

    .card:hover { transform: translateY(-4px) rotate(-.4deg); border-color: color-mix(in srgb, var(--accent) 68%, black); box-shadow: var(--shadow), var(--accent-glow); }

    .hud-panel {
      background:
        radial-gradient(circle at 14% 12%, rgba(98, 177, 255, .2), transparent 42%),
        radial-gradient(circle at 88% 8%, rgba(176, 118, 255, .15), transparent 44%),
        linear-gradient(160deg, rgba(10, 21, 42, .94), rgba(12, 28, 54, .96));
      border: 2px solid color-mix(in srgb, var(--line) 70%, #b8f2ff);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow-soft), inset 0 0 0 1px rgba(130, 198, 255, .16);
      transition: transform var(--anim-soft), border-color var(--anim-soft), box-shadow var(--anim-soft);
    }

    .hud-panel:hover {
      transform: translateY(-3px) rotate(.35deg);
      border-color: color-mix(in srgb, var(--accent) 52%, white);
      box-shadow: var(--shadow), 0 0 26px rgba(102, 195, 255, .22);
    }

    .stat-card {
      background: linear-gradient(158deg, var(--panel), var(--panel-2));
      border: 2px solid color-mix(in srgb, var(--line) 70%, #b8f2ff);
      border-radius: var(--radius);
      padding: 16px;
      box-shadow: var(--shadow);
      transition: transform var(--anim-soft), border-color var(--anim-soft), box-shadow var(--anim-soft), filter var(--anim-soft);
    }
    .stat-card:hover {
      transform: translateY(-3px);
      border-color: color-mix(in srgb, var(--accent) 58%, white);
      box-shadow: 0 14px 28px rgba(71, 54, 130, .16);
      filter: brightness(1.02);
    }

    .neon-btn {
      border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
      box-shadow: 0 0 0 0 rgba(106,102,246,.35);
      transition: transform var(--anim-soft), border-color var(--anim-soft), box-shadow var(--anim-soft), filter var(--anim-soft), background-color var(--anim-soft);
    }
    .neon-btn:hover {
      border-color: var(--accent);
      box-shadow: var(--glow-ring), 0 8px 22px rgba(106,102,246,.2);
      filter: brightness(1.02);
    }
    .neon-btn--primary {
      background: var(--accent);
      color: #fff;
      border-color: color-mix(in srgb, var(--accent) 68%, white);
      font-weight: 700;
    }
    .neon-btn--primary:hover { background: var(--accent-hover); }

    .terminal-list {
      margin: 0;
      padding: 12px 16px;
      border-radius: 14px;
      background: rgba(13, 25, 45, .9);
      color: #d5e7ff;
      border: 1px solid rgba(131, 173, 255, .32);
      box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
      display: grid;
      gap: 6px;
    }

    .section-title { margin: 0 0 6px; font-size: 1.15rem; letter-spacing: .2px; }
    .section-subtitle { margin: 0; color: var(--muted); font-size: .92rem; }

    .universe-name { margin: 0 0 8px; font-size: 1.05rem; }
    .muted { color: var(--muted); font-size: .95rem; }

    .universe-gallery-layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 16px;
      align-items: start;
    }

    .panel, .sidebar {
      background: linear-gradient(160deg, rgba(16, 30, 56, .95), rgba(11, 22, 43, .96));
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(193, 236, 255, .08), 0 0 0 1px rgba(43, 247, 255, .14);
    }

    .video-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(170px, 190px));
      justify-content: start;
      gap: 18px;
      padding: 10px 6px 16px;
      position: relative;
    }
    .video-grid::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        radial-gradient(1.2px 1.2px at 8% 18%, rgba(228, 243, 255, .72), transparent 72%),
        radial-gradient(1.3px 1.3px at 28% 72%, rgba(217, 240, 255, .66), transparent 72%),
        radial-gradient(1.1px 1.1px at 44% 28%, rgba(219, 245, 255, .65), transparent 72%),
        radial-gradient(1.4px 1.4px at 64% 86%, rgba(233, 247, 255, .62), transparent 74%),
        radial-gradient(1.2px 1.2px at 82% 34%, rgba(210, 236, 255, .62), transparent 72%),
        radial-gradient(1.3px 1.3px at 96% 70%, rgba(222, 247, 255, .62), transparent 74%);
      opacity: .35;
      animation: starsDrift 28s linear infinite;
    }

    .universe-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 16px;
      align-items: stretch;
      margin-bottom: 14px;
      position: relative;
      overflow: hidden;
      background:
        radial-gradient(circle at 14% 20%, rgba(87, 149, 255, .2), transparent 38%),
        radial-gradient(circle at 86% 12%, rgba(138, 104, 255, .18), transparent 40%),
        linear-gradient(150deg, rgba(10, 19, 40, .86), rgba(12, 22, 44, .78));
      box-shadow: var(--shadow), 0 0 0 1px rgba(102, 205, 255, .22), 0 0 40px rgba(61, 152, 255, .2);
    }
    .universe-header::after {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(120deg, transparent 20%, rgba(138, 225, 255, .08) 50%, transparent 80%);
    }

    .universe-hero {
      display: grid;
      grid-template-columns: 150px minmax(0, 1fr);
      gap: 25px;
      align-items: center;
    }

    .universe-meta {
      display: grid;
      gap: 8px;
    }

    .universe-meta .section-title {
      margin: 0;
      font-size: clamp(2rem, 1.65rem + 1.4vw, 3rem);
      letter-spacing: .06em;
      text-transform: uppercase;
      font-weight: 900;
      color: #ffe575;
      background: linear-gradient(180deg, #fff4ad 0%, #ffd54f 42%, #ffbb33 72%, #f7921e 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
        0 1px 0 #fff7cc,
        0 2px 0 #f5a623,
        0 4px 0 #d46a1d,
        0 6px 10px rgba(0, 0, 0, .45),
        0 0 24px rgba(255, 209, 102, .35);
      transform: perspective(600px) rotateX(13deg);
      transform-origin: center;
      filter: drop-shadow(0 8px 12px rgba(30, 12, 0, .35));
    }

    .universe-stat-lines {
      display: grid;
      gap: 2px;
      font-weight: 800;
      letter-spacing: .03em;
      color: #ffe9b3;
      text-shadow: 0 1px 0 rgba(255, 252, 230, .4), 0 3px 8px rgba(6, 10, 20, .55);
    }

    .universe-stat-lines p {
      margin: 0;
      font-size: 1rem;
    }

    .progress-percent {
      margin: 6px 0 0;
      font-size: .95rem;
      font-weight: 900;
      letter-spacing: .06em;
      color: var(--progress-color, #8db8ff);
      text-shadow: 0 0 10px color-mix(in srgb, var(--progress-color, #8db8ff) 65%, transparent);
    }

    .universe-hero img {
      width: 150px;
      height: 150px;
      object-fit: cover;
      border-radius: 50%;
      border: 4px solid #00bfff;
      box-shadow: 0 0 18px rgba(0, 191, 255, 0.6), 
                  inset 0 0 24px rgba(0, 191, 255, 0.5);
      animation: nodeFloat 6s ease-in-out infinite;
      transition: transform 0.4s ease, box-shadow 0.4s ease;
    }

    .universe-header:hover .universe-hero img {
      transform: scale(1.05);
      border-color: #ffffff;
      box-shadow:
        0 0 10px color-mix(in srgb, var(--progress-color, #00bfff) 45%, white),
        0 0 38px color-mix(in srgb, var(--progress-color, #00bfff) 75%, transparent),
        inset 0 0 32px color-mix(in srgb, var(--progress-color, #00bfff) 55%, white);
    }

    .universe-controls {
      display: grid;
      gap: 8px;
      align-content: start;
      justify-items: end;
    }
    .universe-controls .icon-only {
      width: 46px;
      height: 46px;
      border-radius: 12px;
      font-size: 1.2rem;
      padding: 0;
      display: grid;
      place-items: center;
      font-weight: 900;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .45);
    }
    .universe-controls .icon-only.edit {
      color: #e8edf7;
      border-color: rgba(209, 223, 246, .56);
      background: linear-gradient(160deg, rgba(106, 116, 132, .9), rgba(79, 91, 111, .85));
    }
    .universe-controls .icon-only.blackhole {
      color: #d8e5ff;
      border-color: rgba(142, 116, 255, .62);
      background:
        radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 34%),
        radial-gradient(circle at 50% 55%, rgba(13, 10, 26, .96) 0 24%, rgba(72, 33, 145, .95) 46%, rgba(21, 11, 46, .98) 64%);
      box-shadow:
        0 0 0 1px rgba(139, 98, 255, .35),
        0 0 14px rgba(130, 82, 255, .45),
        inset 0 0 20px rgba(60, 22, 141, .58);
    }
    .universe-edit-panel {
      margin-top: 12px;
      display: grid;
      gap: 10px;
      max-width: 420px;
      margin-left: auto;
      background: linear-gradient(165deg, rgba(8, 20, 41, .88), rgba(16, 35, 66, .82));
      border: 1px solid rgba(118, 203, 255, .44);
      box-shadow: inset 0 1px 0 rgba(187, 228, 255, .08), 0 0 22px rgba(76, 166, 255, .2);
    }
    .universe-edit-form {
      display: grid;
      gap: 10px;
    }
    .universe-edit-form label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: .9rem;
    }
    .universe-edit-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .universe-edit-feedback {
      margin: 0;
      min-height: 20px;
      font-size: .88rem;
      color: #ffd2d2;
    }
    .universe-edit-feedback.is-success {
      color: #9ff7c8;
    }
    .universe-toolbar {
      display: flex;
      justify-content: flex-end;
      margin-bottom: 10px;
    }
    .icon-btn {
      width: 42px;
      height: 42px;
      padding: 0;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-size: 1rem;
      font-weight: 700;
    }
    .icon-btn span {
      display: inline-flex;
      transform: translateY(-1px);
    }
    .character-header-main {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }
    .character-header-actions {
      margin-left: auto;
      display: flex;
      gap: 8px;
      align-items: center;
    }
    .character-action-icon {
      width: 36px;
      height: 36px;
      padding: 0;
      border-radius: 10px;
      display: grid;
      place-items: center;
      font-size: 1rem;
      line-height: 1;
    }
    .character-action-icon.danger {
      color: #ffb6b6;
      border-color: #ff7070;
      background: rgba(110, 20, 28, .35);
    }
    .character-action-icon.danger:hover {
      border-color: #ff8e8e;
      background: rgba(130, 28, 37, .5);
      box-shadow: 0 0 0 1px rgba(255, 126, 126, .35), 0 0 18px rgba(255, 102, 102, .25);
    }

    .filter-sidebar {
      position: fixed;
      top: 18px;
      right: 18px;
      width: min(360px, calc(100vw - 36px));
      display: grid;
      gap: 10px;
      z-index: 35;
      transform: translateX(120%);
      opacity: 0;
      pointer-events: none;
      transition: transform .3s ease, opacity .28s ease;
      background: linear-gradient(165deg, rgba(9, 18, 40, .92), rgba(20, 32, 62, .88));
      border: 1px solid rgba(112, 203, 255, .4);
      box-shadow: var(--shadow), 0 0 0 1px rgba(149, 225, 255, .2), 0 0 34px rgba(91, 155, 255, .28);
      backdrop-filter: blur(14px);
    }
    .filter-sidebar.is-open {
      transform: translateX(0);
      opacity: 1;
      pointer-events: auto;
    }
    .filter-sidebar-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .filter-sidebar label {
      display: grid;
      gap: 6px;
      color: var(--muted);
      font-size: .9rem;
    }

    .collection-card {
      --float-y: 0px;
      padding: 0;
      overflow: hidden;
      border-radius: 18px;
      border: 1px solid rgba(93, 176, 255, .4);
      background:
        linear-gradient(175deg, rgba(16, 29, 58, .93), rgba(9, 18, 36, .96));
      transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
      box-shadow: 0 8px 24px rgba(4, 12, 26, .55), inset 0 1px 0 rgba(199, 239, 255, .08);
    }
    .collection-card:hover {
      transform: translateY(-6px) scale(1.02);
      border-color: rgba(113, 225, 255, .86);
      box-shadow: var(--shadow), 0 0 0 1px rgba(98, 221, 255, .45), 0 0 30px rgba(74, 190, 255, .3);
      filter: saturate(1.08);
    }
    .collection-card .card-media {
      position: relative;
    }
    .collection-card .video-thumb {
      width: 100%;
      height: 172px;
      object-fit: cover;
      border: 0;
      margin: 0;
      display: block;
    }
    .collection-card .card-title {
      position: absolute;
      left: 10px;
      right: 10px;
      top: 10px;
      margin: 0;
      font-size: .86rem;
      font-weight: 700;
      background: rgba(4, 11, 22, .76);
      border: 1px solid rgba(109, 172, 255, .4);
      border-radius: 10px;
      padding: 4px 8px;
      backdrop-filter: blur(2px);
    }
    .collection-card .card-footer {
      border-top: 1px solid rgba(98, 168, 255, .3);
      padding: 10px 12px;
      background: rgba(7, 15, 32, .92);
      display: grid;
      gap: 6px;
    }
    .collection-card .meta {
      margin: 0;
      font-size: .84rem;
      color: var(--text);
      line-height: 1.35;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .collection-card .meta small {
      color: var(--muted);
      display: inline-block;
      min-width: 46px;
    }
    .collection-view {
      display: grid;
      gap: 14px;
    }
    .collection-kpi {
      display: grid;
      gap: 8px;
    }
    .collection-kpi-head {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      flex-wrap: wrap;
    }
    .collection-kpi-value {
      font-size: clamp(1.4rem, 1.1rem + .9vw, 2rem);
      font-weight: 800;
      text-shadow: 0 0 16px rgba(43, 247, 255, .25);
    }
    .collection-progress {
      height: 14px;
      border-radius: 999px;
      border: 1px solid rgba(111, 180, 255, .45);
      background:
        repeating-linear-gradient(-45deg, rgba(255, 255, 255, .05) 0 10px, rgba(0, 0, 0, .06) 10px 20px),
        rgba(8, 19, 39, .78);
      overflow: hidden;
      box-shadow: inset 0 0 10px rgba(6, 13, 28, .8), 0 0 14px rgba(255, 255, 255, .1), 0 0 18px rgba(67, 160, 255, .2);
    }
    .collection-progress-bar {
      height: 100%;
      width: var(--collection-progress, 0%);
      background: linear-gradient(90deg, color-mix(in srgb, var(--progress-color, #4b7dff) 65%, #ffffff), var(--progress-color, #4b7dff), color-mix(in srgb, var(--progress-color, #4b7dff) 75%, black));
      background-size: 220% 220%;
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .35),
        0 0 22px color-mix(in srgb, var(--progress-color, #4b7dff) 66%, transparent);
      transition: width .35s ease;
      animation: pulseProgress 3.4s linear infinite;
      position: relative;
    }
    .collection-progress-bar::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
      mix-blend-mode: screen;
    }
    @keyframes pulseProgress {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }

    .universe-view-animated {
      animation: fade .32s ease;
    }

    .neon-action {
      border-radius: 12px;
      border-color: rgba(122, 220, 255, .5);
      background: linear-gradient(155deg, rgba(15, 34, 64, .94), rgba(16, 47, 87, .82));
      box-shadow: inset 0 1px 0 rgba(218, 247, 255, .1), 0 0 0 1px rgba(70, 140, 255, .2);
    }
    .neon-action:hover {
      border-color: rgba(122, 220, 255, .9);
      box-shadow: 0 0 0 1px rgba(122, 220, 255, .45), 0 0 22px rgba(91, 160, 255, .3);
    }
    .collection-character-card {
      position: relative;
    }
    .collection-character-card.locked {
      border-style: solid;
      opacity: 1;
      filter: none;
      border-color: color-mix(in srgb, var(--rarity-color, rgba(130, 186, 255, .7)) 78%, white);
      box-shadow:
        0 12px 26px rgba(2, 10, 30, .62),
        0 0 0 1px color-mix(in srgb, var(--rarity-color, rgba(130, 186, 255, .7)) 42%, transparent),
        0 0 28px color-mix(in srgb, var(--rarity-color, rgba(130, 186, 255, .7)) 26%, transparent);
      background:
        linear-gradient(160deg, color-mix(in srgb, var(--rarity-color, #7db5ff) 20%, rgba(10, 18, 36, .94)), rgba(7, 14, 29, .98));
    }
    .collection-character-card .locked-silhouette {
      width: 100%;
      height: 160px;
      display: grid;
      place-items: center;
      gap: 8px;
      font-size: 2.4rem;
      background:
        radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rarity-color, rgba(121, 151, 190, .28)) 30%, transparent), transparent 56%),
        linear-gradient(180deg, color-mix(in srgb, var(--rarity-color, rgba(27, 41, 69, .9)) 24%, rgba(20, 34, 61, .92)), rgba(8, 14, 29, .96));
      color: rgba(223, 243, 255, .82);
      border-bottom: 1px solid rgba(98, 168, 255, .3);
    }
    .collection-character-card .locked-silhouette .lock-icon {
      font-size: 1.25rem;
      letter-spacing: .04em;
      border-radius: 999px;
      border: 1px solid color-mix(in srgb, var(--rarity-color, rgba(122, 220, 255, .58)) 60%, white);
      padding: 4px 12px;
      background: rgba(3, 8, 20, .66);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
    }
    .collection-character-card.locked .meta {
      color: #abc0d9;
    }
    .collection-character-card .meta {
      white-space: normal;
      overflow-wrap: anywhere;
      text-overflow: initial;
    }
    .collection-character-card .meta.character-name {
      font-size: .98rem;
      font-weight: 800;
      color: #e8f7ff;
      letter-spacing: .02em;
    }
    .collection-character-card.unlocked {
      cursor: pointer;
    }
    .collection-character-card.unlocked:hover {
      transform: translateY(-4px) scale(1.02);
    }
    .collection-character-card.is-newly-unlocked {
      animation: unlockPulse 1.15s ease;
    }
    @keyframes unlockPulse {
      0% { box-shadow: 0 0 0 rgba(43, 247, 255, 0); filter: brightness(.85); }
      45% { box-shadow: 0 0 0 1px rgba(43, 247, 255, .55), 0 0 32px rgba(43, 247, 255, .55); filter: brightness(1.15); }
      100% { box-shadow: var(--shadow-soft); filter: brightness(1); }
    }

    .primary-btn {
      background: linear-gradient(135deg, rgba(23, 103, 153, .9), rgba(43, 247, 255, .52));
      color: #eaffff;
      border-color: color-mix(in srgb, var(--accent) 62%, black);
      font-weight: 700;
      text-shadow: 0 0 14px rgba(43, 247, 255, .35);
    }
    .primary-btn:hover { background: var(--accent-hover); }

    .add-video-form {
      display: grid;
      gap: 8px;
      padding: 12px;
      border-radius: 14px;
      border: 1px dashed color-mix(in srgb, var(--accent) 44%, black);
      background: rgba(8, 20, 43, .7);
      margin-bottom: 14px;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      align-items: end;
    }
    #form-agregar-video { display: none; }
    .add-video-form label { display: grid; gap: 6px; color: var(--muted); font-size: .92rem; }
    .add-video-form input, .add-video-form select { width: 100%; }
    .add-video-form label:first-child,
    .add-video-form .actions {
      grid-column: 1 / -1;
    }
    @media (max-width: 820px) {
      .add-video-form { grid-template-columns: 1fr; }
    }

    .video-card { cursor: pointer; }

    #btn-toggle-video {
      background: linear-gradient(160deg, #30adff, #1f5fda 52%, #153d96);
      border-color: rgba(167, 224, 255, .8);
      box-shadow: inset 0 1px 0 rgba(229, 247, 255, .45), 0 4px 0 rgba(8, 23, 64, .65), 0 10px 20px rgba(35, 93, 199, .35);
      text-shadow: 0 2px 0 rgba(11, 28, 76, .7);
    }
    #btn-add-blocked-character {
      background: linear-gradient(160deg, #a970ff, #7248d7 56%, #3f248e);
      border-color: rgba(222, 192, 255, .82);
      box-shadow: inset 0 1px 0 rgba(248, 236, 255, .42), 0 4px 0 rgba(35, 16, 77, .7), 0 10px 20px rgba(122, 88, 215, .36);
      text-shadow: 0 2px 0 rgba(35, 19, 84, .75);
    }
    .video-card .video-thumb {
      width: 100%;
      height: 150px;
      object-fit: cover;
      border-radius: 12px;
      border: 1px solid var(--line);
      margin-bottom: 10px;
      background: rgba(17, 22, 42, .86);
    }
    .video-card h3 { margin: 0 0 6px; font-size: 1rem; }
    .video-card p { margin: 0; color: var(--muted); font-size: .92rem; }

    .actor-alpha-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 8px;
    }
    .actor-alpha-btn {
      min-width: 34px;
      min-height: 34px;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(145, 219, 255, .48);
      background: linear-gradient(170deg, rgba(15, 35, 68, .92), rgba(12, 26, 52, .9));
      color: #d9f3ff;
      font-weight: 800;
      cursor: pointer;
      transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
    .actor-alpha-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(172, 233, 255, .85);
      box-shadow: 0 0 14px rgba(110, 205, 255, .25);
    }
    .actor-alpha-btn.active {
      border-color: var(--accent);
      box-shadow: var(--accent-glow);
    }
    .actor-gallery {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .actor-card {
      text-align: left;
      min-height: 110px;
      padding: 12px 12px 10px;
      border-radius: 16px;
      border: 1px solid rgba(122, 196, 255, .46);
      background:
        radial-gradient(circle at 14% 12%, rgba(255, 243, 150, .14), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(255, 166, 87, .16), transparent 28%),
        linear-gradient(165deg, rgba(12, 24, 48, .94), rgba(19, 37, 70, .84));
      display: grid;
      grid-template-rows: 1fr auto;
      gap: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease, filter .26s ease;
      box-shadow:
        0 10px 18px rgba(2, 8, 24, .44),
        0 0 0 1px rgba(180, 227, 255, .08) inset;
    }
    .actor-card::after {
      content: '✦';
      position: absolute;
      top: 10px;
      right: 12px;
      font-size: .8rem;
      color: rgba(183, 238, 255, .72);
      text-shadow: 0 0 10px rgba(117, 220, 255, .66);
      opacity: .82;
    }
    .actor-card:hover {
      transform: translateY(-4px) scale(1.012);
      border-color: rgba(146, 224, 255, .85);
      box-shadow:
        0 14px 24px rgba(4, 12, 30, .58),
        0 0 0 1px rgba(190, 235, 255, .24) inset,
        0 0 22px rgba(113, 203, 255, .34);
      filter: saturate(1.08);
    }
    .actor-card.active {
      border-color: var(--accent);
      box-shadow:
        0 18px 28px rgba(4, 12, 31, .62),
        0 0 0 1px rgba(226, 246, 255, .25) inset,
        0 0 30px rgba(102, 212, 255, .48),
        var(--accent-glow);
      background:
        radial-gradient(circle at 12% 10%, rgba(161, 233, 255, .24), transparent 34%),
        linear-gradient(165deg, rgba(15, 35, 69, .96), rgba(16, 62, 104, .84));
      transform: translateY(-4px);
    }
    .actor-card-title {
      margin: 0;
      font-size: clamp(1.2rem, .8rem + 1vw, 1.65rem);
      line-height: 1.05;
      text-align: center;
      color: #ffe26d;
      letter-spacing: .02em;
      text-shadow:
        0 1px 0 rgba(255, 210, 99, .9),
        0 2px 0 rgba(255, 141, 50, .9),
        0 3px 0 rgba(117, 54, 14, .94),
        0 6px 10px rgba(0, 0, 0, .42),
        0 0 18px rgba(255, 188, 82, .36);
      filter: saturate(1.06) contrast(1.05);
    }
    .actor-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      gap: 8px;
    }
    .actor-card-meta {
      margin: 0;
      color: #c4dffa;
      font-size: .74rem;
      font-weight: 700;
      letter-spacing: .02em;
      white-space: nowrap;
    }
    .actor-inline-detail {
      grid-column: 1 / -1;
      position: relative;
      margin-top: 4px;
      padding-top: 8px;
    }
    .actor-inline-detail::before {
      content: '';
      position: absolute;
      top: -8px;
      left: 12px;
      right: 12px;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, rgba(94, 180, 255, .15), rgba(43, 247, 255, .75), rgba(94, 180, 255, .15));
      box-shadow: 0 0 14px rgba(43, 247, 255, .35);
    }
    .actor-detail-grid {
      display: grid;
      gap: 20px;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      align-items: start;
      padding: 14px;
      position: relative;
      isolation: isolate;
      border: 1px solid color-mix(in srgb, var(--metal-light) 64%, rgba(196, 230, 255, .3));
      border-radius: 20px;
      background:
        linear-gradient(138deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, 0) 22%),
        linear-gradient(145deg, var(--metal-dark) 0%, var(--metal-mid) 46%, color-mix(in srgb, var(--metal-light) 24%, var(--metal-mid)) 52%, var(--metal-dark) 100%);
      box-shadow:
        inset 0 0 0 1px rgba(214, 235, 255, .14),
        inset 0 10px 18px rgba(206, 235, 255, .06),
        inset 0 -14px 24px rgba(4, 10, 22, .56),
        0 18px 36px rgba(2, 8, 20, .5),
        0 0 0 1px rgba(9, 23, 46, .54);
      transform: perspective(1400px) rotateX(1.3deg);
      transform-origin: top center;
    }
    .actor-detail-grid::before,
    .actor-detail-grid::after {
      content: "";
      position: absolute;
      pointer-events: none;
      z-index: -1;
      border-radius: inherit;
    }
    .actor-detail-grid::before {
      inset: 0;
      background: linear-gradient(132deg, rgba(255, 255, 255, .28) 0%, rgba(215, 246, 255, .18) 18%, transparent 42%);
      opacity: .75;
      mix-blend-mode: screen;
    }
    .actor-detail-grid::after {
      inset: -12px;
      background:
        radial-gradient(circle at 14% 6%, color-mix(in srgb, var(--neon-cyan) 42%, transparent) 0%, transparent 52%),
        radial-gradient(circle at 86% 100%, color-mix(in srgb, var(--neon-purple) 40%, transparent) 0%, transparent 54%);
      filter: blur(18px);
      opacity: .32;
    }
    .actor-detail-header {
      grid-column: 1 / -1;
      display: grid;
      gap: 10px;
      justify-items: center;
      margin-bottom: 6px;
      padding-bottom: 12px;
      border-bottom: 1px solid color-mix(in srgb, var(--neon-cyan) 58%, rgba(167, 213, 255, .26));
      box-shadow: 0 1px 0 color-mix(in srgb, var(--neon-purple) 36%, transparent);
    }
    .actor-detail-title {
      margin: 6px 0 2px;
      font-size: clamp(1.9rem, 4.8vw, 3.2rem);
      font-weight: 900;
      letter-spacing: .03em;
      line-height: 1.05;
      text-align: center;
      color: #ffe97a;
      text-shadow:
        0 1px 0 rgba(255, 159, 47, .76),
        0 3px 0 rgba(84, 46, 18, .92),
        0 0 16px rgba(255, 229, 90, .34);
    }
    .actor-detail-name {
      display: inline-block;
      background: linear-gradient(180deg, #ffe97a 0%, #ffd23f 52%, #ff9f2f 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: .8px rgba(52, 26, 9, .9);
      text-shadow:
        0 1px 0 rgba(255, 170, 54, .82),
        0 4px 0 rgba(72, 36, 13, .95),
        0 0 12px rgba(255, 235, 120, .45);
      filter: brightness(1.03) contrast(1.04);
      transform-origin: center;
      animation: toonPulse 2.6s ease-in-out infinite;
    }
    @keyframes toonPulse {
      0%, 100% {
        transform: scale(1);
        filter: brightness(1.03) contrast(1.04);
        text-shadow:
          0 1px 0 rgba(255, 170, 54, .8),
          0 4px 0 rgba(72, 36, 13, .94),
          0 0 12px rgba(255, 235, 120, .42);
      }
      50% {
        transform: scale(1.03);
        filter: brightness(1.08) contrast(1.06);
        text-shadow:
          0 1px 0 rgba(255, 176, 64, .9),
          0 4px 0 rgba(77, 40, 16, .98),
          0 0 15px rgba(255, 236, 110, .52);
      }
    }
    .actor-detail-actions {
      margin-top: 0;
      justify-content: flex-end;
      align-items: center;
      width: 100%;
      row-gap: 10px;
    }
    .actor-icon-btn {
      width: 38px;
      height: 38px;
      min-width: 38px;
      min-height: 38px;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: 1.05rem;
      line-height: 1;
    }
    .actor-icon-btn--edit {
      color: #d9f7ff;
      border-color: rgba(150, 229, 255, .75);
    }
    .actor-icon-btn--edit:hover,
    .actor-icon-btn--edit:focus-visible {
      border-color: #6cfbff;
      box-shadow: 0 0 0 1px rgba(108, 251, 255, .45), 0 0 18px rgba(108, 251, 255, .35);
      filter: brightness(1.05);
    }
    .actor-icon-btn--danger {
      color: #ffc8c8;
      border-color: rgba(255, 174, 174, .82);
    }
    .actor-icon-btn--danger:hover,
    .actor-icon-btn--danger:focus-visible {
      border-color: #ff8f8f;
      box-shadow: 0 0 0 1px rgba(255, 143, 143, .42), 0 0 16px rgba(255, 143, 143, .28);
      filter: brightness(1.03);
    }
    @media (max-width: 720px) {
      .actor-detail-grid {
        box-shadow:
          inset 0 0 0 1px rgba(214, 235, 255, .1),
          inset 0 8px 12px rgba(206, 235, 255, .04),
          inset 0 -10px 18px rgba(4, 10, 22, .46),
          0 12px 20px rgba(2, 8, 20, .36);
        transform: perspective(1100px) rotateX(.7deg);
      }
      .actor-detail-grid::after {
        inset: -6px;
        filter: blur(11px);
        opacity: .22;
      }
      .actor-detail-actions {
        justify-content: flex-end;
      }
    }
    .actor-character-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
      gap: 10px;
    }
    .actor-character-item {
      width: 100%;
      list-style: none;
    }
    .actor-blocked-actions {
      margin: 0 0 10px;
    }
    .actor-blocked-actions input {
      max-width: 250px;
      flex: 1 1 200px;
    }
    .actor-character-item .actor-character-card {
      height: 100%;
      border-radius: 14px;
    }
    .actor-character-item .actor-character-card.locked {
      border-style: dashed;
      opacity: .82;
      filter: saturate(.8);
      box-shadow: 0 8px 18px rgba(4, 12, 26, .5), inset 0 1px 0 rgba(210, 228, 255, .08);
    }
    .actor-character-item .actor-character-card.rare-comun {
      --rarity-color: var(--rare-comun);
    }
    .actor-character-item .actor-character-card.rare-raro {
      --rarity-color: var(--rare-raro);
    }
    .actor-character-item .actor-character-card.rare-epico {
      --rarity-color: var(--rare-epico);
    }
    .actor-character-item .actor-character-card.rare-legendario {
      --rarity-color: var(--rare-legendario);
    }
    .actor-character-item .actor-character-card:not(.locked).rare-comun,
    .actor-character-item .actor-character-card:not(.locked).rare-raro,
    .actor-character-item .actor-character-card:not(.locked).rare-epico,
    .actor-character-item .actor-character-card:not(.locked).rare-legendario {
      border-color: color-mix(in srgb, var(--rarity-color, rgba(130, 186, 255, .7)) 72%, white);
      box-shadow:
        0 10px 24px rgba(3, 10, 24, .58),
        0 0 0 1px color-mix(in srgb, var(--rarity-color, rgba(130, 186, 255, .7)) 32%, transparent),
        0 0 24px color-mix(in srgb, var(--rarity-color, rgba(130, 186, 255, .7)) 24%, transparent);
    }
    .actor-panel-title,
    .actor-detail-title {
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    .actor-panel-title::before {
      content: '🌟';
      font-size: 1.05rem;
      filter: drop-shadow(0 0 7px rgba(126, 214, 255, .56));
    }
    .actor-detail-title::before {
      content: '🎭';
      font-size: 1rem;
      display: inline-block;
      transform-origin: center;
      animation: actorIconBob 2.2s ease-in-out infinite;
      filter: drop-shadow(0 1px 0 rgba(96, 56, 21, .82)) drop-shadow(0 0 7px rgba(255, 224, 109, .4));
    }
    @keyframes actorIconBob {
      0%, 100% {
        transform: translateY(0) rotate(-2deg) scale(1);
      }
      50% {
        transform: translateY(-2px) rotate(2deg) scale(1.07);
      }
    }
    @media (max-width: 720px) {
      .actor-detail-title {
        text-shadow:
          0 1px 0 rgba(255, 159, 47, .6),
          0 2px 0 rgba(84, 46, 18, .82),
          0 0 10px rgba(255, 229, 90, .22);
      }
      .actor-detail-name {
        -webkit-text-stroke: .6px rgba(52, 26, 9, .85);
        text-shadow:
          0 1px 0 rgba(255, 170, 54, .72),
          0 2px 0 rgba(72, 36, 13, .88),
          0 0 9px rgba(255, 235, 120, .3);
        animation-duration: 2.9s;
      }
      .actor-detail-title::before {
        filter: drop-shadow(0 1px 0 rgba(96, 56, 21, .7)) drop-shadow(0 0 5px rgba(255, 224, 109, .3));
      }
    }
    .actor-action-btn::after {
      content: ' ✨';
      font-size: .86rem;
    }
    .actor-character-video {
      width: 100%;
      border: 1px solid rgba(111, 180, 255, .4);
      border-radius: 12px;
      overflow: hidden;
      background: rgba(7, 14, 28, .92);
      cursor: pointer;
      padding: 0;
    }
    .actor-character-video img {
      width: 100%;
      aspect-ratio: 9 / 16;
      object-fit: cover;
      display: block;
    }
    .actor-character-video span {
      display: block;
      padding: 6px 10px;
      color: #cde6ff;
      font-size: .86rem;
    }
    .actor-character-link {
      display: block;
      width: 100%;
      text-align: center;
      font-size: .92rem;
      font-weight: 700;
      text-decoration: underline;
      text-underline-offset: 3px;
      padding: 0;
    }
    .actor-character-thumb-empty {
      width: 100%;
      aspect-ratio: 3 / 4;
      border: 1px dashed rgba(111, 180, 255, .35);
      border-radius: 0;
      display: grid;
      place-items: center;
      color: #9fb5cb;
      font-size: .85rem;
      text-align: center;
      padding: 8px;
      background: rgba(7, 14, 28, .55);
    }
    .actor-character-status {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: fit-content;
      margin-left: auto;
      margin-right: auto;
    }
    .actor-locked-note {
      margin: 0;
      color: #9fb5cb;
      font-size: .85rem;
    }

    .video-title {
      margin: 0 0 8px;
      font-size: .92rem;
      color: #acd2ef;
      min-height: 36px;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      padding: 4px 10px;
      font-size: .79rem;
      margin-top: 10px;
      border: 1px solid transparent;
      font-weight: 700;
      letter-spacing: .2px;
    }

    .rare-comun { background: color-mix(in srgb, var(--rare-comun) 16%, rgba(5, 13, 29, .84)); color: var(--rare-comun); border-color: color-mix(in srgb, var(--rare-comun) 42%, rgba(180, 210, 235, .3)); }
    .rare-raro { background: color-mix(in srgb, var(--rare-raro) 16%, rgba(5, 13, 29, .84)); color: var(--rare-raro); border-color: color-mix(in srgb, var(--rare-raro) 42%, rgba(180, 210, 235, .3)); }
    .rare-epico { background: color-mix(in srgb, var(--rare-epico) 16%, rgba(5, 13, 29, .84)); color: var(--rare-epico); border-color: color-mix(in srgb, var(--rare-epico) 42%, rgba(180, 210, 235, .3)); }
    .rare-legendario { background: color-mix(in srgb, var(--rare-legendario) 16%, rgba(5, 13, 29, .84)); color: var(--rare-legendario); border-color: color-mix(in srgb, var(--rare-legendario) 42%, rgba(180, 210, 235, .3)); }
    .rare-bloqueado { background: rgba(126, 144, 175, .14); color: #c6d8ee; border-color: rgba(126, 144, 175, .38); }

    .rarity-highlight {
      margin: 4px 0 14px;
      border-radius: 16px;
      border: 2px solid currentColor;
      padding: 16px 18px;
      text-align: center;
      font-size: clamp(1.1rem, .92rem + .7vw, 1.5rem);
      font-weight: 900;
      letter-spacing: .04em;
      text-transform: uppercase;
      background: linear-gradient(160deg, rgba(7, 14, 28, .88), rgba(8, 18, 36, .82));
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 10px 22px rgba(0, 0, 0, .45);
      text-shadow: 0 0 12px rgba(255, 255, 255, .2);
    }

    .rarity-highlight.rare-comun {
      background: linear-gradient(160deg, rgba(57, 72, 95, .72), rgba(26, 36, 52, .92));
      border-color: rgba(157, 178, 203, .85);
      box-shadow: inset 0 0 0 1px rgba(208, 220, 234, .16), 0 0 0 1px rgba(157, 178, 203, .34), 0 0 24px rgba(157, 178, 203, .28);
      text-shadow: 0 0 10px rgba(157, 178, 203, .55);
    }

    .rarity-highlight.rare-raro {
      background: linear-gradient(160deg, rgba(9, 72, 83, .78), rgba(3, 30, 41, .95));
      border-color: rgba(102, 238, 247, .95);
      box-shadow: inset 0 0 0 1px rgba(184, 253, 255, .2), 0 0 0 1px rgba(102, 238, 247, .45), 0 0 28px rgba(102, 238, 247, .35);
      text-shadow: 0 0 12px rgba(102, 238, 247, .65);
    }

    .rarity-highlight.rare-epico {
      background: linear-gradient(160deg, rgba(82, 46, 148, .78), rgba(35, 18, 67, .95));
      border-color: rgba(197, 143, 255, .95);
      box-shadow: inset 0 0 0 1px rgba(239, 215, 255, .18), 0 0 0 1px rgba(197, 143, 255, .4), 0 0 30px rgba(197, 143, 255, .36);
      text-shadow: 0 0 13px rgba(197, 143, 255, .68);
    }

    .rarity-highlight.rare-legendario {
      background: linear-gradient(160deg, rgba(121, 67, 8, .82), rgba(56, 29, 3, .96));
      border-color: rgba(255, 187, 102, .98);
      box-shadow: inset 0 0 0 1px rgba(255, 226, 187, .2), 0 0 0 1px rgba(255, 187, 102, .44), 0 0 32px rgba(255, 187, 102, .38);
      text-shadow: 0 0 14px rgba(255, 205, 130, .72);
    }

    .actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .detail-grid aside .actions {
      flex-direction: column;
      align-items: stretch;
      margin-top: 16px;
    }

    .player-box {
      margin-top: 14px;
      border: 1px solid var(--line);
      border-radius: 16px;
      overflow: hidden;
      background: rgba(8, 19, 38, .82);
    }

    .holo-card {
      border: 1px solid rgba(130, 196, 255, .4);
      background:
        linear-gradient(160deg, rgba(11, 23, 48, .88), rgba(15, 20, 42, .76)),
        rgba(8, 16, 32, .72);
      backdrop-filter: blur(12px);
      box-shadow:
        0 0 0 1px rgba(84, 184, 255, .22),
        0 14px 34px rgba(5, 10, 24, .65),
        0 0 28px rgba(73, 183, 255, .22);
    }

    .detail-character {
      color: #f5faff;
      font-size: clamp(1.45rem, 1.2rem + .8vw, 2.1rem);
      text-shadow: 0 0 20px rgba(90, 214, 255, .45);
    }

    .detail-meta {
      margin: 0;
      color: #c7ddff;
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      align-items: center;
    }

    .detail-meta strong {
      color: #ecf7ff;
    }

    .video-preview {
      position: relative;
      aspect-ratio: 16 / 9;
      border-radius: 16px;
      overflow: hidden;
      border: 1px solid rgba(110, 195, 255, .5);
      background: rgba(5, 12, 26, .9);
      box-shadow: 0 0 24px rgba(80, 196, 255, .26);
      margin-top: 12px;
    }

    .video-preview img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      filter: saturate(1.08) contrast(1.06);
    }

    .video-preview .preview-overlay {
      position: absolute;
      inset: 0;
      display: grid;
      place-items: center;
      background:
        radial-gradient(circle at 50% 45%, rgba(18, 38, 69, .16), rgba(6, 12, 24, .72)),
        linear-gradient(180deg, rgba(0, 0, 0, 0) 30%, rgba(4, 8, 18, .8) 100%);
    }

    .play-btn {
      width: 74px;
      height: 74px;
      border-radius: 50%;
      border: 1px solid rgba(130, 220, 255, .85);
      background: linear-gradient(145deg, rgba(23, 116, 210, .72), rgba(89, 53, 255, .52));
      box-shadow: 0 0 24px rgba(99, 206, 255, .5);
      color: #fff;
      font-size: 1.7rem;
      font-weight: 800;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .play-btn:hover {
      box-shadow: 0 0 34px rgba(99, 206, 255, .72), 0 0 16px rgba(140, 104, 255, .45);
    }

    .locked-preview {
      width: 100%;
      height: 100%;
      position: relative;
      background:
        radial-gradient(circle at 50% 26%, rgba(255, 255, 255, .12), transparent 42%),
        linear-gradient(180deg, #555d68 0%, #303641 58%, #252b35 100%);
      display: grid;
      place-items: center;
      overflow: hidden;
    }

    .locked-preview::before {
      content: '';
      position: absolute;
      bottom: -18%;
      left: 50%;
      width: 46%;
      height: 58%;
      transform: translateX(-50%);
      background: #0a0d12;
      border-radius: 46% 46% 10% 10% / 52% 52% 8% 8%;
      box-shadow: 0 -18px 0 -8px #0a0d12, 0 18px 26px rgba(0, 0, 0, .35);
    }

    .locked-labels {
      position: relative;
      z-index: 1;
      text-align: center;
      padding: 0 16px;
      text-shadow: 0 4px 14px rgba(0, 0, 0, .65);
    }

    .locked-labels strong {
      display: block;
      font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem);
      letter-spacing: .08em;
      color: #f4f7fb;
      margin-bottom: 6px;
    }

    .locked-labels span {
      display: block;
      font-size: .9rem;
      color: #d7deea;
      opacity: .95;
    }

    .section-note {
      margin: 6px 0 0;
      color: #9cbce4;
      font-size: .9rem;
    }

    iframe { width: 100%; aspect-ratio: 16/9; border: 0; display: block; }

    .index-list { display: grid; gap: 8px; max-height: 460px; overflow: auto; }
    .index-row {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: rgba(13, 26, 49, .86);
      transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
    }
    .index-row:hover { border-color: color-mix(in srgb, var(--accent) 40%, white); transform: translateY(-1px); box-shadow: var(--shadow-soft); }

    .marathon {
      display: grid;
      gap: 12px;
      padding: 16px;
      border-radius: 16px;
      border: 1px solid rgba(112, 202, 255, .42);
      background: linear-gradient(165deg, rgba(8, 23, 48, .95), rgba(12, 33, 66, .9));
      box-shadow: var(--shadow-soft);
      min-height: 0;
    }
    .marathon-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
    }
    .marathon-title {
      margin: 0;
      letter-spacing: .08em;
      font-size: clamp(1.3rem, 1.1rem + .6vw, 1.9rem);
    }
    .marathon-layout {
      display: grid;
      grid-template-columns: minmax(0, 1.7fr) minmax(240px, 1fr);
      gap: 12px;
      min-height: 0;
    }
    .marathon-main {
      display: grid;
      gap: 10px;
      min-height: 0;
    }
    .marathon-player-shell {
      border-radius: 12px;
      overflow: hidden;
      border: 1px solid rgba(109, 201, 255, .3);
      background: rgba(3, 9, 21, .75);
    }
    .marathon-controls {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .marathon-controls .neon-btn {
      width: 100%;
      min-height: 42px;
    }
    .marathon-side {
      border: 1px solid rgba(112, 202, 255, .3);
      border-radius: 12px;
      padding: 10px;
      background: rgba(5, 14, 32, .72);
      display: grid;
      gap: 8px;
      min-height: 0;
    }
    .marathon-playlist-label {
      margin: 0;
      color: #b4dcff;
      font-size: .85rem;
      text-transform: uppercase;
      letter-spacing: .05em;
    }
    .marathon-list {
      margin: 0;
      padding: 0;
      list-style: none;
      display: grid;
      gap: 6px;
      overflow: auto;
      min-height: 0;
      max-height: 420px;
    }
    .marathon-item-btn {
      width: 100%;
      text-align: left;
      border-radius: 10px;
      border: 1px solid rgba(123, 188, 240, .3);
      background: rgba(10, 26, 53, .84);
      color: var(--text);
      padding: 8px 10px;
      display: grid;
      gap: 2px;
      cursor: pointer;
      transition: border-color .2s ease, transform .2s ease, background .2s ease;
    }
    .marathon-item-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(147, 221, 255, .7);
    }
    .marathon-item-btn.active {
      border-color: rgba(111, 246, 255, .95);
      background: linear-gradient(150deg, rgba(20, 54, 95, .98), rgba(28, 64, 118, .95));
      box-shadow: 0 0 0 1px rgba(43, 247, 255, .35);
    }
    .marathon-item-btn small {
      color: var(--muted);
      font-size: .78rem;
    }
    .marathon-empty {
      border: 1px dashed rgba(123, 188, 240, .28);
      border-radius: 10px;
      padding: 14px;
      color: var(--muted);
      background: rgba(5, 14, 32, .4);
    }
    @media (max-width: 1040px) {
      .marathon-layout {
        grid-template-columns: 1fr;
      }
      .marathon-list {
        max-height: 260px;
      }
    }
    @media (max-width: 680px) {
      .marathon-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    details { margin-top: 10px; }
    details summary { cursor: pointer; color: #9dc6e8; }
    .version-list { display: grid; gap: 8px; margin-top: 8px; }

    .achievements { display: grid; gap: 10px; }
    .achievement {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: rgba(13, 27, 52, .9);
      box-shadow: var(--shadow-soft);
    }
    .achievement.done { border-color: color-mix(in srgb, var(--ok) 48%, white); background: var(--ok-soft); }

    .detail-modal {
      position: fixed;
      inset: 0;
      background: rgba(5, 8, 21, .7);
      z-index: 30;
      display: grid;
      place-items: center;
      padding: 18px;
    }
    .detail-content {
      width: min(980px, 100%);
      max-height: calc(100vh - 36px);
      overflow: auto;
      border-radius: 20px;
      border: 1px solid rgba(132, 210, 255, .64);
      background:
        radial-gradient(circle at 10% 8%, rgba(110, 186, 255, .3), transparent 42%),
        radial-gradient(circle at 90% 12%, rgba(101, 255, 245, .2), transparent 40%),
        linear-gradient(155deg, rgba(24, 43, 88, .96), rgba(20, 19, 71, .96) 48%, rgba(7, 20, 46, .98));
      box-shadow:
        0 0 0 1px rgba(125, 223, 255, .26),
        0 18px 42px rgba(3, 7, 24, .74),
        0 0 42px rgba(85, 208, 255, .2);
      padding: 16px;
      display: grid;
      gap: 12px;
    }
    .actor-rename-modal {
      z-index: 40;
    }
    .actor-rename-panel {
      width: min(520px, 100%);
      max-height: min(520px, calc(100vh - 36px));
      display: grid;
      gap: 10px;
    }
    .actor-rename-panel p.validation {
      margin: 0;
      color: #ffb6b6;
      min-height: 1.2em;
      font-size: .9rem;
    }
    .detail-content .holo-card {
      border: 1px solid rgba(130, 214, 255, .52);
      background:
        radial-gradient(circle at 18% 10%, rgba(128, 208, 255, .22), transparent 48%),
        radial-gradient(circle at 86% 14%, rgba(151, 123, 255, .2), transparent 42%),
        linear-gradient(162deg, rgba(10, 32, 68, .88), rgba(22, 24, 74, .82), rgba(12, 18, 46, .9));
      box-shadow:
        0 2px 0 rgba(176, 230, 255, .16) inset,
        0 0 0 1px rgba(133, 206, 255, .16),
        0 16px 30px rgba(5, 8, 28, .72),
        0 0 26px rgba(74, 193, 255, .22);
    }
    .detail-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
      gap: 14px;
    }
    .detail-grid > aside.holo-card {
      position: relative;
      overflow: hidden;
      isolation: isolate;
    }
    .detail-grid > aside.holo-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      pointer-events: none;
      background:
        radial-gradient(2px 2px at 16% 20%, rgba(206, 242, 255, .26), transparent 72%),
        radial-gradient(1.8px 1.8px at 78% 14%, rgba(174, 255, 242, .24), transparent 72%),
        radial-gradient(1.7px 1.7px at 62% 62%, rgba(197, 201, 255, .24), transparent 74%),
        radial-gradient(120px 70px at 78% 78%, rgba(70, 230, 255, .14), transparent 74%);
      opacity: .72;
      z-index: -1;
    }
    .detail-actor-link {
      background: none;
      border: 0;
      color: #7bf6ff;
      cursor: pointer;
      padding: 0;
      font-weight: 700;
      text-decoration: underline;
    }
    .detail-list {
      margin: 0;
      list-style: none;
      padding: 0;
      display: grid;
      gap: 8px;
      color: #e8f6ff;
    }
    .detail-list-soft {
      padding: 0;
      border-radius: 14px;
      border: 0;
      background: none;
      box-shadow: none;
      gap: 8px;
    }
    .detail-list-soft li {
      position: relative;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(127, 204, 255, .45);
      background: linear-gradient(150deg, rgba(22, 48, 88, .8), rgba(34, 24, 86, .7));
      box-shadow:
        inset 0 1px 0 rgba(226, 244, 255, .16),
        0 8px 18px rgba(3, 10, 30, .45),
        0 0 12px rgba(78, 193, 255, .18);
      color: #eef7ff;
      line-height: 1.35;
    }
    .detail-close {
      justify-self: end;
    }
    .detail-content .neon-btn {
      border: 1px solid rgba(127, 219, 255, .65);
      color: #ebf7ff;
      background: linear-gradient(165deg, rgba(28, 74, 132, .9), rgba(40, 30, 112, .86));
      box-shadow:
        0 12px 20px rgba(2, 11, 30, .42),
        0 0 14px rgba(74, 201, 255, .26),
        inset 0 1px 0 rgba(232, 247, 255, .24),
        inset 0 -2px 0 rgba(3, 9, 25, .5);
      transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease, filter .2s ease;
    }
    .detail-content .neon-btn:hover {
      border-color: #8cf8ff;
      box-shadow:
        0 14px 24px rgba(5, 16, 42, .5),
        0 0 22px rgba(112, 246, 255, .34),
        inset 0 1px 0 rgba(238, 250, 255, .3),
        inset 0 -2px 0 rgba(7, 12, 35, .52);
      filter: brightness(1.1);
    }
    .detail-content .neon-btn:active {
      transform: translateY(2px);
      box-shadow:
        0 7px 12px rgba(2, 11, 30, .44),
        0 0 12px rgba(74, 201, 255, .22),
        inset 0 1px 0 rgba(232, 247, 255, .2),
        inset 0 -1px 0 rgba(3, 9, 25, .54);
    }
    .detail-content .neon-btn:focus-visible {
      outline: 2px solid #96fbff;
      outline-offset: 2px;
    }
    .profile-layout { display: grid; gap: 14px; }
    .character-profile-layout {
      animation: fade .3s ease;
    }
    .character-profile-nav {
      margin-bottom: 10px;
    }
    .character-hero {
      border-bottom: 1px solid rgba(111, 180, 255, .28);
      padding-bottom: 20px;
      align-items: start;
      grid-template-columns: 160px minmax(0, 1fr) auto;
      gap: 24px;
    }
    .character-hero__avatar {
      width: 160px;
      height: 160px;
      border-radius: 20px;
      object-fit: cover;
      border: 1px solid rgba(126, 217, 255, .55);
      box-shadow:
        0 0 20px rgba(43, 247, 255, .2),
        inset 0 1px 0 rgba(227, 248, 255, .28);
    }
    .character-hero__content {
      min-width: 0;
      display: grid;
      gap: 12px;
    }
    .character-hero__title {
      font-size: clamp(2.45rem, 1.85rem + 2.2vw, 3.7rem);
      font-family: "Marker Felt", "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", cursive, sans-serif;
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: .03em;
      color: #ffe8b2;
      background:
        repeating-linear-gradient(
          115deg,
          rgba(255, 255, 255, .26) 0 6px,
          rgba(255, 255, 255, .08) 6px 12px,
          rgba(255, 169, 74, .12) 12px 18px
        ),
        linear-gradient(180deg, #fff8d6 0%, #ffe58c 26%, #ffbf62 58%, #ff9444 100%);
      background-size: 260% 100%, 100% 100%;
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      -webkit-text-stroke: 1.1px rgba(30, 12, 4, .78);
      text-shadow:
        0 1px 0 rgba(255, 244, 219, .52),
        0 2px 0 rgba(183, 98, 28, .8),
        0 4px 0 rgba(118, 53, 16, .82),
        0 6px 0 rgba(79, 31, 10, .78),
        0 9px 14px rgba(0, 0, 0, .45),
        0 0 12px rgba(255, 207, 120, .5),
        0 0 26px rgba(255, 145, 70, .42);
      filter: drop-shadow(0 0 10px rgba(255, 186, 82, .36));
      animation: characterNameShimmer 3.4s linear infinite, characterNamePulse 2.6s ease-in-out infinite;
      margin-bottom: 0;
    }
    @keyframes characterNameShimmer {
      0% { background-position: 0% 50%, 0% 50%; }
      100% { background-position: 200% 50%, 0% 50%; }
    }
    @keyframes characterNamePulse {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-1px) scale(1.015); }
    }
    .character-hero__badges {
      display: grid;
      gap: 10px;
      margin-bottom: 6px;
      min-width: 0;
      padding-bottom: 2px;
    }
    .character-hero__badge {
      --badge-glow: rgba(111, 180, 255, .28);
      --badge-top: rgba(190, 222, 255, .3);
      --badge-base: rgba(11, 30, 61, .9);
      --badge-base-2: rgba(5, 14, 32, .92);
      --badge-edge: rgba(166, 219, 255, .34);
      position: relative;
      margin-top: 0;
      font-size: clamp(.9rem, .78rem + .35vw, 1.02rem);
      min-block-size: 48px;
      inline-size: fit-content;
      max-inline-size: min(100%, 560px);
      align-items: center;
      justify-content: flex-start;
      padding: 8px 14px;
      border-radius: 999px;
      border: 1px solid var(--badge-edge);
      background: linear-gradient(180deg, var(--badge-top), transparent 38%), linear-gradient(165deg, var(--badge-base), var(--badge-base-2));
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 0 rgba(2, 8, 24, .56), 0 6px 14px rgba(1, 8, 22, .45), 0 0 18px var(--badge-glow);
      white-space: nowrap;
      text-shadow: 0 0 10px color-mix(in srgb, var(--badge-glow) 76%, white 24%);
      flex: 0 0 auto;
    }
    .character-hero__badge::before {
      content: '';
      position: absolute;
      inset: 1px 5px auto;
      height: 42%;
      border-radius: inherit;
      background: linear-gradient(180deg, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0));
      pointer-events: none;
    }
    .character-hero__badge.rare-comun {
      --badge-glow: color-mix(in srgb, var(--rare-comun) 58%, rgba(120, 214, 165, .35));
      --badge-top: color-mix(in srgb, var(--rare-comun) 36%, rgba(206, 241, 224, .4));
      --badge-base: color-mix(in srgb, var(--rare-comun) 20%, rgba(7, 25, 35, .92));
      --badge-base-2: color-mix(in srgb, var(--rare-comun) 10%, rgba(6, 14, 28, .95));
      --badge-edge: color-mix(in srgb, var(--rare-comun) 55%, rgba(188, 236, 208, .46));
    }
    .character-hero__badge.rare-raro {
      --badge-glow: color-mix(in srgb, var(--rare-raro) 58%, rgba(116, 186, 255, .35));
      --badge-top: color-mix(in srgb, var(--rare-raro) 36%, rgba(214, 236, 255, .42));
      --badge-base: color-mix(in srgb, var(--rare-raro) 20%, rgba(8, 24, 44, .92));
      --badge-base-2: color-mix(in srgb, var(--rare-raro) 10%, rgba(6, 14, 29, .95));
      --badge-edge: color-mix(in srgb, var(--rare-raro) 55%, rgba(186, 222, 255, .48));
    }
    .character-hero__badge.rare-epico {
      --badge-glow: color-mix(in srgb, var(--rare-epico) 60%, rgba(188, 131, 255, .34));
      --badge-top: color-mix(in srgb, var(--rare-epico) 34%, rgba(244, 220, 255, .42));
      --badge-base: color-mix(in srgb, var(--rare-epico) 22%, rgba(24, 13, 48, .92));
      --badge-base-2: color-mix(in srgb, var(--rare-epico) 12%, rgba(11, 8, 27, .95));
      --badge-edge: color-mix(in srgb, var(--rare-epico) 56%, rgba(230, 188, 255, .46));
    }
    .character-hero__badge.rare-legendario {
      --badge-glow: color-mix(in srgb, var(--rare-legendario) 62%, rgba(255, 187, 88, .38));
      --badge-top: color-mix(in srgb, var(--rare-legendario) 34%, rgba(255, 234, 188, .44));
      --badge-base: color-mix(in srgb, var(--rare-legendario) 24%, rgba(57, 27, 6, .92));
      --badge-base-2: color-mix(in srgb, var(--rare-legendario) 12%, rgba(20, 11, 5, .95));
      --badge-edge: color-mix(in srgb, var(--rare-legendario) 56%, rgba(255, 215, 139, .5));
    }
    .character-hero__badge--universes {
      --badge-glow: rgba(123, 215, 255, .26);
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .character-hero__badge--universe-link {
      cursor: pointer;
      transition: transform .14s ease, filter .14s ease, box-shadow .18s ease;
    }
    .character-hero__badge--universe-link:hover {
      transform: translateY(-1px);
      filter: brightness(1.08);
    }
    .character-hero__badge--universe-link:focus-visible {
      outline: none;
      box-shadow: var(--focus-glow), inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -2px 0 rgba(2, 8, 24, .56), 0 6px 14px rgba(1, 8, 22, .45), 0 0 18px var(--badge-glow);
    }
    .character-hero__badge--universe-red {
      --badge-glow: color-mix(in srgb, #ff5c74 62%, rgba(255, 132, 132, .34));
      --badge-top: color-mix(in srgb, #ff9dae 34%, rgba(255, 233, 238, .42));
      --badge-base: color-mix(in srgb, #ff425f 25%, rgba(54, 8, 20, .92));
      --badge-base-2: color-mix(in srgb, #8b1431 22%, rgba(26, 5, 13, .95));
      --badge-edge: color-mix(in srgb, #ffb2bf 54%, rgba(255, 207, 217, .5));
      display: inline-flex;
      inline-size: fit-content;
      max-inline-size: 100%;
      min-block-size: auto;
      align-items: center;
      gap: 0;
    }
    .character-hero__universe-avatar {
      inline-size: .72em;
      block-size: .72em;
      border-radius: 50%;
      object-fit: cover;
      border: .5px solid rgba(255, 237, 241, .68);
      box-shadow: 0 0 1.5px rgba(255, 112, 136, .2);
      flex: 0 0 auto;
    }
    .character-hero__universe-avatar--fallback {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-size: .46rem;
      font-weight: 700;
      color: rgba(255, 239, 242, .9);
      background: radial-gradient(circle at 28% 22%, rgba(255, 207, 216, .84), rgba(255, 104, 129, .6) 44%, rgba(121, 17, 43, .9) 100%);
    }
    .character-hero__universe-name {
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    @keyframes toonBounce {
      0%, 100% { transform: translateY(0) scale(1); }
      50% { transform: translateY(-2px) scale(1.02); }
    }

    @keyframes toonWobble {
      0%, 100% { transform: rotate(0deg); }
      30% { transform: rotate(-1.3deg); }
      65% { transform: rotate(1.15deg); }
    }

    .toon-panel {
      border: var(--toon-border);
      border-radius: 16px;
      background: var(--toon-bg-panel);
      box-shadow: var(--toon-shadow), inset 0 1px 0 rgba(236, 249, 255, .25);
    }

    .toon-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border: 2px solid color-mix(in srgb, var(--toon-accent-2) 55%, #ffe4ff);
      border-radius: 999px;
      background: linear-gradient(170deg, rgba(255, 120, 252, .28), rgba(116, 65, 227, .3));
      box-shadow: 0 4px 0 rgba(37, 9, 68, .48), 0 10px 18px rgba(3, 8, 23, .28);
      padding: 4px 10px;
      font-weight: 700;
      animation: toonWobble 3s ease-in-out infinite;
      transform-origin: center;
    }

    .toon-title {
      text-shadow: 0 2px 0 rgba(5, 16, 36, .8), 0 0 14px rgba(107, 236, 255, .34);
      letter-spacing: .03em;
      animation: toonWobble 4.2s ease-in-out infinite;
      transform-origin: left center;
    }

    .toon-kpi {
      border: var(--toon-border);
      border-radius: 14px;
      background: linear-gradient(165deg, rgba(18, 43, 87, .95), rgba(68, 42, 142, .92));
      box-shadow: var(--toon-shadow);
      animation: toonBounce 2.8s ease-in-out infinite;
      transform-origin: center bottom;
    }

    .toon-btn {
      position: relative;
      border-radius: 12px;
      border: var(--toon-border);
      background: linear-gradient(180deg, rgba(184, 238, 255, .32), rgba(184, 238, 255, 0) 44%), linear-gradient(160deg, rgba(44, 139, 237, .95), rgba(73, 53, 199, .92));
      box-shadow: inset 0 1px 0 rgba(237, 249, 255, .34), inset 0 -3px 0 rgba(4, 14, 33, .56), var(--toon-shadow);
      transform: translateY(0);
      transition: transform .16s var(--toon-pop), box-shadow .18s ease, filter .18s ease, border-color .18s ease;
      overflow: hidden;
      animation: toonBounce 3.8s ease-in-out infinite;
    }
    .toon-btn::before {
      content: '';
      position: absolute;
      inset: 1px 8px auto;
      height: 40%;
      border-radius: 999px;
      background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0));
      pointer-events: none;
    }
    .toon-btn:hover {
      filter: brightness(1.08);
      box-shadow: inset 0 1px 0 rgba(245, 252, 255, .4), inset 0 -3px 0 rgba(4, 14, 33, .54), 0 8px 0 rgba(3, 9, 24, .46), 0 15px 24px rgba(2, 11, 30, .4), 0 0 20px rgba(97, 211, 255, .26);
    }
    .toon-btn:active {
      transform: translateY(3px);
      box-shadow: inset 0 1px 0 rgba(237, 249, 255, .28), inset 0 -1px 0 rgba(4, 14, 33, .56), 0 4px 0 rgba(3, 9, 24, .42), 0 8px 14px rgba(2, 11, 30, .34);
    }
    .toon-btn--primary {
      border-color: rgba(131, 248, 255, .85);
      background: linear-gradient(180deg, rgba(220, 249, 255, .32), rgba(220, 249, 255, 0) 42%), linear-gradient(165deg, rgba(34, 127, 215, .96), rgba(76, 61, 204, .92));
    }
    .toon-btn--danger {
      color: #ffe5e5;
      border-color: rgba(255, 174, 174, .82);
      background: linear-gradient(180deg, rgba(255, 223, 223, .3), rgba(255, 223, 223, 0) 42%), linear-gradient(165deg, rgba(173, 48, 74, .95), rgba(124, 26, 72, .92));
      box-shadow: inset 0 1px 0 rgba(255, 236, 236, .32), inset 0 -3px 0 rgba(36, 5, 21, .55), 0 8px 0 rgba(25, 4, 17, .42), 0 14px 20px rgba(30, 4, 18, .36);
    }
    .character-feedback {
      text-align: center;
      font-size: 1.1rem;
    }
    .profile-section__title {
      font-size: 1.2rem;
      margin-bottom: 14px;
    }
    .locked-note {
      color: #ffb6b6;
    }
    .clickable-card {
      cursor: pointer;
    }
    .profile-section {
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px;
      background: rgba(13, 27, 52, .88);
    }
    .profile-section h4 { margin: 0 0 8px; }
    .profile-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
    .status-pill { border-radius: 999px; padding: 4px 10px; border: 1px solid var(--line); font-size: .85rem; }
    .status-pill.unlocked { border-color: color-mix(in srgb, var(--ok) 50%, white); background: var(--ok-soft); color: #8effcc; }
    .status-pill.locked { border-color: rgba(255, 125, 125, .45); background: rgba(109, 37, 37, .2); color: #ffb6b6; }
    .inline-feedback { min-height: 20px; margin: 6px 0 0; color: #9ff7c8; font-size: .9rem; }
    .character-link {
      border: 0;
      background: none;
      box-shadow: none;
      color: var(--accent);
      padding: 0;
      font-weight: 700;
      text-decoration: underline;
      min-height: auto;
    }
    .mock-shell {
      background:
        radial-gradient(circle at 18% 14%, rgba(110, 225, 255, .16), transparent 36%),
        radial-gradient(circle at 86% 6%, rgba(195, 124, 255, .15), transparent 34%),
        linear-gradient(160deg, rgba(11, 23, 47, .96), rgba(6, 14, 30, .96));
      border: 1px solid rgba(120, 203, 255, .44);
      border-radius: calc(var(--radius) + 2px);
      padding: 18px;
      box-shadow: var(--shadow), inset 0 1px 0 rgba(198, 240, 255, .11), 0 0 38px rgba(70, 150, 255, .2);
      display: grid;
      gap: 14px;
      position: relative;
      overflow: hidden;
    }
    .mock-shell::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(222, 244, 255, .15) 1px, transparent 1.4px);
      background-size: 26px 26px;
      opacity: .38;
    }
    .actors-shell {
      border-radius: calc(var(--radius) + 8px);
      gap: 18px;
      isolation: isolate;
    }
    .actors-shell::before {
      background-image:
        radial-gradient(circle, rgba(233, 247, 255, .16) 1px, transparent 1.4px),
        radial-gradient(circle at 16% 24%, rgba(151, 232, 255, .2), transparent 34%),
        radial-gradient(circle at 82% 78%, rgba(205, 138, 255, .14), transparent 40%);
      background-size: 24px 24px, 100% 100%, 100% 100%;
      opacity: .44;
    }
    .actors-shell::after {
      content: '';
      position: absolute;
      inset: -16% -8% -18%;
      border-radius: 50%;
      pointer-events: none;
      background:
        radial-gradient(ellipse at 68% 20%, rgba(136, 239, 255, .16), transparent 56%),
        radial-gradient(ellipse at 30% 72%, rgba(188, 132, 255, .14), transparent 58%);
      filter: blur(10px);
      opacity: .52;
      z-index: 0;
    }
    .actors-shell > * {
      position: relative;
      z-index: 1;
    }
    .characters-gallery {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(128px, 128px));
      justify-content: start;
      gap: 14px;
      position: relative;
      z-index: 1;
    }
    .character-gallery-card {
      --rarity-glow: rgba(111, 180, 255, .4);
      --float-delay: 0s;
      border: 1.5px solid color-mix(in srgb, var(--rarity-glow) 78%, white 22%);
      border-radius: 16px;
      overflow: hidden;
      background:
        linear-gradient(128deg, rgba(233, 245, 255, .28) 0%, rgba(233, 245, 255, 0) 24%, rgba(150, 198, 240, .12) 39%, rgba(219, 241, 255, .24) 52%, rgba(124, 168, 214, .08) 64%, rgba(12, 20, 42, 0) 82%),
        linear-gradient(152deg, rgba(7, 14, 31, .18) 0%, rgba(7, 14, 31, 0) 36%, rgba(214, 236, 255, .1) 52%, rgba(6, 13, 28, .22) 72%, rgba(6, 12, 26, 0) 100%),
        repeating-linear-gradient(162deg, rgba(222, 239, 255, .055) 0 2px, rgba(29, 46, 78, .035) 2px 4px, rgba(10, 20, 40, 0) 4px 8px),
        linear-gradient(168deg, rgba(39, 60, 96, .97) 0%, rgba(22, 34, 64, .98) 48%, rgba(10, 17, 34, .99) 100%);
      box-shadow:
        0 16px 30px rgba(1, 5, 16, .78),
        0 24px 34px -14px rgba(0, 0, 0, .7),
        0 0 0 1px color-mix(in srgb, var(--rarity-glow) 36%, rgba(243, 249, 255, .52)),
        inset 1px 1px 0 rgba(237, 247, 255, .34),
        inset 0 2px 10px rgba(218, 235, 255, .14),
        inset -2px -3px 14px rgba(5, 12, 28, .62),
        0 10px 20px color-mix(in srgb, var(--rarity-glow) 24%, transparent),
        0 0 20px color-mix(in srgb, var(--rarity-glow) 26%, transparent),
        0 0 34px color-mix(in srgb, var(--rarity-glow) 18%, transparent);
      cursor: pointer;
      text-align: left;
      padding: 0;
      width: 128px;
      min-height: 188px;
      display: flex;
      flex-direction: column;
      position: relative;
      transform-style: preserve-3d;
      transform: translateY(0) scale(1);
      transition: transform .26s ease, box-shadow .3s ease, border-color .25s ease, filter .25s ease;
      animation: none;
      animation-delay: var(--float-delay);
    }
    .character-gallery-card::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      background:
        linear-gradient(138deg, rgba(248, 252, 255, .22) 0%, rgba(248, 252, 255, 0) 28%, rgba(186, 221, 255, .14) 48%, rgba(248, 252, 255, .2) 58%, rgba(248, 252, 255, 0) 78%),
        repeating-linear-gradient(154deg, rgba(221, 237, 255, .04) 0 1px, rgba(7, 15, 34, 0) 1px 4px);
      opacity: .9;
      box-shadow: inset 0 0 0 1px rgba(204, 231, 255, .1);
    }
    .character-gallery-card::after {
      content: '';
      position: absolute;
      inset: -3px;
      border-radius: 18px;
      border: 1.5px solid color-mix(in srgb, var(--rarity-glow) 62%, rgba(228, 244, 255, .72));
      opacity: .7;
      pointer-events: none;
    }
    .character-gallery-card:hover {
      border-color: color-mix(in srgb, var(--rarity-glow) 92%, white 8%);
      transform: translate3d(0, -5px, 0) scale(1.035);
      box-shadow:
        0 24px 34px rgba(2, 7, 19, .84),
        0 34px 38px -16px rgba(0, 0, 0, .74),
        0 0 0 2px color-mix(in srgb, var(--rarity-glow) 72%, white 28%),
        0 0 34px color-mix(in srgb, var(--rarity-glow) 54%, transparent),
        0 0 56px color-mix(in srgb, var(--rarity-glow) 34%, transparent),
        inset 1px 1px 0 rgba(241, 250, 255, .34),
        inset -2px -4px 15px rgba(4, 11, 26, .64);
    }
    .character-gallery-card:hover::after {
      border-color: color-mix(in srgb, var(--rarity-glow) 84%, rgba(238, 248, 255, .82));
      opacity: .95;
    }
    .character-gallery-card:hover h3 {
      color: #ffe57a;
      text-shadow:
        -1px -1px 0 #102142,
        1px -1px 0 #102142,
        -1px 1px 0 #102142,
        1px 1px 0 #102142,
        0 0 10px color-mix(in srgb, var(--rarity-glow) 54%, rgba(255, 238, 170, .74)),
        0 0 22px color-mix(in srgb, var(--rarity-glow) 42%, transparent);
    }
    .character-gallery-card[data-rarity="epico"] {
      border-color: color-mix(in srgb, var(--rarity-glow) 78%, white 22%);
    }
    .character-gallery-card[data-rarity="epico"] .meta,
    .character-gallery-card[data-rarity="epico"] h3 {
      border-color: color-mix(in srgb, var(--rarity-glow) 46%, rgba(230, 241, 255, .22));
    }
    .character-gallery-card[data-rarity="legendario"] {
      border-color: color-mix(in srgb, var(--rarity-glow) 78%, white 22%);
    }
    .character-gallery-card[data-rarity="legendario"] .meta,
    .character-gallery-card[data-rarity="legendario"] h3 {
      border-color: color-mix(in srgb, var(--rarity-glow) 46%, rgba(230, 241, 255, .22));
    }
    .character-gallery-card .character-gallery-media {
      width: 100%;
      aspect-ratio: 3 / 4;
      height: auto;
      object-fit: cover;
      display: block;
      border-bottom: 1px solid rgba(111, 180, 255, .28);
      background: rgba(10, 17, 36, .85);
    }
    .character-gallery-card .character-gallery-media--avatar-fallback {
      position: relative;
      width: 100%;
      aspect-ratio: 3 / 4;
      border-bottom: 1px solid rgba(111, 180, 255, .28);
      background: linear-gradient(180deg, #0b2b66 0%, #061a3f 58%, #030d24 100%);
      overflow: hidden;
      display: block;
    }
    .character-gallery-card .character-gallery-media--avatar-fallback::after {
      content: '';
      position: absolute;
      width: 46%;
      aspect-ratio: 1 / 1;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      border-radius: 50%;
      background: #05070d;
      box-shadow: 0 0 0 1px rgba(0, 0, 0, .65), 0 12px 24px rgba(0, 0, 0, .38);
    }
    .character-gallery-card .indice-card-locked-avatar {
      width: 100%;
      height: auto;
      min-height: 0;
      border-radius: 12px 12px 0 0;
      border-inline: 0;
      border-top: 0;
      border-bottom-style: solid;
      border-bottom-color: rgba(111, 180, 255, .28);
      box-shadow: none;
    }
    .character-gallery-card .meta {
      padding: 8px 9px 10px;
      display: grid;
      gap: 4px;
      background: linear-gradient(180deg, rgba(7, 15, 35, .1), rgba(5, 11, 24, .88) 45%);
      border-top: 1px solid color-mix(in srgb, var(--rarity-glow) 42%, rgba(230, 241, 255, .22));
      position: relative;
      z-index: 1;
    }
    .character-gallery-card h3 {
      margin: 0;
      padding: 2px 1px 4px;
      font-family: "Luckiest Guy", "Bangers", "Baloo 2", "Fredoka", "Comic Sans MS", "Trebuchet MS", cursive, sans-serif;
      font-size: clamp(1rem, .82rem + .6vw, 1.24rem);
      font-weight: 900;
      line-height: 1.08;
      letter-spacing: .01em;
      color: #ffd84a;
      border-bottom: 1px solid color-mix(in srgb, var(--rarity-glow) 46%, rgba(232, 242, 255, .22));
      text-shadow:
        -1px -1px 0 #102142,
        1px -1px 0 #102142,
        -1px 1px 0 #102142,
        1px 1px 0 #102142,
        0 2px 0 rgba(8, 14, 32, .85),
        0 0 10px color-mix(in srgb, var(--rarity-glow) 48%, rgba(255, 223, 118, .65)),
        0 0 20px color-mix(in srgb, var(--rarity-glow) 36%, transparent);
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-clamp: 3;
      overflow: hidden;
      overflow-wrap: anywhere;
      text-wrap: pretty;
      min-height: calc(1.08em * 2);
      max-height: calc(1.08em * 3);
    }
    .character-gallery-card p {
      margin: 0;
      color: #9cc0e6;
      font-size: .75rem;
      line-height: 1.15;
    }
    .character-gallery-card[data-locked="true"] {
      --locked-glow: rgba(166, 190, 255, .22);
      background:
        linear-gradient(160deg, rgba(82, 89, 111, .9), rgba(29, 33, 46, .96));
      border-color: rgba(168, 186, 225, .45);
    }
    .character-gallery-card[data-locked="true"]::before {
      content: '';
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      background:
        radial-gradient(140% 95% at 12% 18%, rgba(177, 195, 255, .24), transparent 56%),
        radial-gradient(120% 110% at 88% 12%, rgba(102, 132, 255, .2), transparent 58%),
        linear-gradient(130deg, rgba(11, 17, 35, .7), rgba(31, 38, 58, .2) 44%, rgba(7, 12, 28, .76)),
        repeating-linear-gradient(180deg, rgba(217, 235, 255, .08) 0 1px, rgba(9, 14, 30, 0) 1px 3px);
      background-size: 150% 150%, 150% 150%, 100% 100%, 100% 6px;
      mix-blend-mode: screen;
      opacity: .9;
      animation: none;
    }
    .character-gallery-card[data-locked="true"] .character-gallery-media--image {
      filter: grayscale(1) brightness(.08) contrast(1.9) saturate(.7) drop-shadow(0 0 10px var(--locked-glow));
      opacity: .9;
      border-bottom-color: rgba(171, 187, 210, .24);
    }
    .character-gallery-card[data-locked="true"] .meta::before {
      content: '🔒';
      position: absolute;
      top: -168px;
      right: 8px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      display: grid;
      place-items: center;
      font-size: .72rem;
      background: rgba(12, 18, 34, .72);
      border: 1px solid rgba(189, 211, 255, .45);
      box-shadow: 0 0 12px rgba(156, 184, 255, .22);
      z-index: 2;
      backdrop-filter: blur(2px);
    }
    .character-gallery-card[data-locked="true"] .meta h3 {
      color: #ffeaa0;
      text-shadow:
        -1px -1px 0 #1c253d,
        1px -1px 0 #1c253d,
        -1px 1px 0 #1c253d,
        1px 1px 0 #1c253d,
        0 2px 0 rgba(8, 10, 19, .9),
        0 0 8px rgba(213, 228, 255, .3);
    }
    .character-gallery-card[data-locked="true"] .meta p {
      color: #c5d0e0;
    }
    @keyframes lockedNebulaShift {
      0% {
        background-position: 0% 0%, 100% 0%, 0 0, 0 0;
        opacity: .78;
      }
      50% {
        background-position: 35% 45%, 60% 30%, 0 0, 0 3px;
        opacity: .94;
      }
      100% {
        background-position: 70% 95%, 20% 75%, 0 0, 0 6px;
        opacity: .82;
      }
    }
    @keyframes cardFloat {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-6px); }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation: none !important;
        transition: none !important;
      }

      html:focus-within,
      .universe-map-shell {
        scroll-behavior: auto;
      }
    }

    .character-preview-popover {
      position: fixed;
      width: min(420px, calc(100vw - 28px));
      border-radius: 22px;
      border: 2px solid color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 70%, #f5fbff 30%);
      background:
        linear-gradient(160deg, rgba(255, 255, 255, .16), transparent 38%),
        radial-gradient(140px 120px at 12% 10%, color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 60%, rgba(255, 255, 255, .24) 40%) 0%, transparent 72%),
        radial-gradient(170px 130px at 88% 0%, rgba(110, 160, 255, .22) 0%, transparent 74%),
        linear-gradient(172deg, rgba(12, 26, 54, .99), rgba(4, 10, 24, .99));
      box-shadow:
        0 28px 48px rgba(2, 7, 19, .86),
        0 0 58px color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 56%, transparent),
        inset 0 1px 0 rgba(239, 247, 255, .24),
        inset 0 -22px 40px rgba(0, 0, 0, .42),
        inset 0 0 0 1px rgba(199, 221, 255, .14);
      overflow: hidden;
      z-index: 60;
      pointer-events: none;
      animation: popupIn .2s ease;
      isolation: isolate;
    }
    .character-preview-popover::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(90px 80px at 8% 8%, rgba(255, 255, 255, .17) 0%, transparent 74%),
        radial-gradient(104px 88px at 94% 12%, rgba(255, 255, 255, .1) 0%, transparent 72%),
        linear-gradient(180deg, rgba(255, 255, 255, .08), transparent 24%, transparent 74%, rgba(0, 0, 0, .34) 100%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 4px),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
      mix-blend-mode: screen;
      opacity: .82;
      pointer-events: none;
    }
    .character-preview-popover::after {
      content: '';
      position: absolute;
      inset: 8px;
      border-radius: 16px 28px 18px 30px;
      border: 1px solid color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 32%, rgba(255, 255, 255, .36));
      box-shadow:
        0 0 24px color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 26%, transparent),
        inset 0 0 0 1px rgba(219, 236, 255, .08),
        inset 0 0 18px rgba(176, 218, 255, .12);
      pointer-events: none;
      opacity: .84;
    }
    .character-preview-popover[data-locked="true"] {
      border-color: color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 60%, #f5f8ff 40%);
      background:
        radial-gradient(2px 2px at 10% 14%, rgba(255, 255, 255, .75) 0, transparent 100%),
        radial-gradient(1.6px 1.6px at 74% 18%, rgba(255, 255, 255, .72) 0, transparent 100%),
        radial-gradient(1.8px 1.8px at 24% 46%, rgba(255, 255, 255, .65) 0, transparent 100%),
        radial-gradient(2px 2px at 88% 40%, rgba(255, 255, 255, .78) 0, transparent 100%),
        radial-gradient(1.4px 1.4px at 60% 70%, rgba(255, 255, 255, .6) 0, transparent 100%),
        linear-gradient(175deg, rgba(6, 8, 14, .995), rgba(1, 2, 6, .995));
      box-shadow:
        0 30px 56px rgba(0, 0, 0, .9),
        0 0 42px color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 42%, transparent),
        inset 0 0 0 1px rgba(255, 255, 255, .08),
        inset 0 -26px 46px rgba(0, 0, 0, .62);
    }
    .character-preview-popover[data-locked="true"]::before {
      background:
        radial-gradient(2px 2px at 12% 14%, rgba(255, 255, 255, .75) 0, transparent 100%),
        radial-gradient(1.8px 1.8px at 82% 22%, rgba(255, 255, 255, .7) 0, transparent 100%),
        radial-gradient(1.6px 1.6px at 26% 58%, rgba(255, 255, 255, .58) 0, transparent 100%),
        radial-gradient(2px 2px at 72% 66%, rgba(255, 255, 255, .62) 0, transparent 100%),
        radial-gradient(100px 76px at 14% 2%, rgba(255, 255, 255, .08), transparent 72%),
        repeating-linear-gradient(180deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 5px);
      opacity: .66;
    }
    .character-preview-popover img {
      width: 100%;
      height: 258px;
      object-fit: cover;
      display: block;
      border-bottom: 2px solid color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 54%, rgba(173, 212, 255, .32));
      background: linear-gradient(180deg, rgba(14, 24, 50, .92), rgba(6, 11, 24, .98));
      filter: saturate(1.12) contrast(1.18);
      box-shadow:
        inset 0 0 0 1px rgba(213, 235, 255, .14),
        inset 0 24px 36px rgba(255, 255, 255, .06),
        inset 0 -28px 38px rgba(0, 0, 0, .44);
    }
    .character-preview-popover .preview-meta {
      padding: 14px 16px 16px;
      display: grid;
      gap: 9px;
    }
    .character-preview-popover h3 {
      margin: 0;
      font-size: 1.34rem;
      font-weight: 800;
      letter-spacing: .018em;
      line-height: 1.14;
      color: #f5f9ff;
      text-shadow:
        0 1px 0 rgba(255, 255, 255, .2),
        0 0 18px color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 46%, rgba(120, 198, 255, .28));
    }
    .character-preview-popover p {
      margin: 0;
      color: #d3e4fa;
      font-size: .91rem;
      line-height: 1.42;
      letter-spacing: .008em;
    }
    .character-preview-popover .preview-field-label {
      color: color-mix(in srgb, var(--preview-rarity, rgba(107, 188, 255, .5)) 48%, #cbddf7 52%);
      font-weight: 800;
      margin-right: 6px;
      font-size: .76rem;
      text-transform: uppercase;
      letter-spacing: .09em;
      opacity: .95;
    }
    .character-preview-popover .preview-field-value {
      color: #edf5ff;
      font-weight: 600;
    }
    .indice-toolbar {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: center;
      justify-content: space-between;
    }
    .indice-filter-row {
      display: grid;
      grid-template-columns: minmax(220px, 1fr) repeat(2, minmax(170px, .55fr));
      gap: 10px;
      margin-top: 12px;
    }
    .indice-group-divider {
      grid-column: 1 / -1;
      margin: 14px 0 2px;
      padding: 6px 10px;
      border-radius: 10px;
      border: 1px solid rgba(111, 180, 255, .2);
      background: rgba(10, 26, 52, .6);
      font-size: .85rem;
      font-weight: 700;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: #cde8ff;
    }
    @media (max-width: 780px) {
      .indice-filter-row {
        grid-template-columns: 1fr;
      }
    }
    .add-character-form {
      border: 1px solid rgba(118, 208, 255, .38);
      border-radius: 14px;
      padding: 12px;
      background: rgba(8, 20, 42, .72);
      display: grid;
      gap: 10px;
    }
    .chip-input-shell {
      min-height: 44px;
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      padding: 8px 10px;
      border: 1px solid var(--control-border);
      border-radius: 12px;
      background: var(--control-bg);
      box-shadow: var(--control-shadow);
    }
    .chip-input-shell:focus-within {
      border-color: var(--focus);
      box-shadow: var(--focus-glow), var(--control-shadow);
    }
    .actor-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid rgba(112, 234, 255, .5);
      background: rgba(22, 70, 104, .7);
      color: #d8f7ff;
      padding: 3px 10px;
      font-size: .85rem;
      line-height: 1.2;
    }
    .actor-chip button {
      border: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
      min-height: auto;
      color: #b8ecff;
      cursor: pointer;
      font-size: .95rem;
      line-height: 1;
    }
    .chip-input-shell input {
      border: 0;
      background: transparent;
      box-shadow: none;
      padding: 0;
      min-height: auto;
      flex: 1;
      min-width: 180px;
    }
    .character-actors-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(154px, 1fr));
      gap: 14px;
      align-items: start;
      perspective: 920px;
    }
    .character-actor-card {
      --card-border-top: rgba(174, 235, 255, .56);
      --card-border-bottom: rgba(12, 30, 66, .92);
      border: 1px solid rgba(118, 194, 255, .46);
      border-radius: 14px;
      overflow: hidden;
      position: relative;
      isolation: isolate;
      background:
        linear-gradient(137deg, rgba(232, 248, 255, .16) 0 16%, rgba(232, 248, 255, 0) 29% 100%),
        linear-gradient(118deg, rgba(116, 216, 255, .14) 0 24%, rgba(12, 30, 58, 0) 44%),
        radial-gradient(circle at 15% 8%, rgba(108, 214, 255, .22), transparent 48%),
        linear-gradient(164deg, rgba(20, 44, 82, .96) 0 34%, rgba(11, 27, 58, .98) 55%, rgba(6, 14, 34, .99));
      box-shadow:
        inset 0 1px 0 rgba(234, 250, 255, .62),
        inset 0 3px 8px rgba(169, 228, 255, .2),
        inset 0 -10px 18px rgba(5, 14, 36, .84),
        inset 3px 0 0 rgba(168, 223, 255, .2),
        inset -3px 0 0 rgba(8, 24, 56, .72),
        0 1px 0 rgba(194, 235, 255, .24),
        0 0 0 1px rgba(72, 154, 230, .4),
        0 18px 34px rgba(2, 8, 24, .65),
        0 26px 48px rgba(1, 6, 18, .46),
        0 0 22px rgba(64, 160, 236, .18);
      text-align: left;
      padding: 0;
      width: 100%;
      min-width: 0;
      transform-style: preserve-3d;
      transition: transform .32s cubic-bezier(.22, .61, .36, 1), border-color .28s ease, box-shadow .32s ease, filter .28s ease;
    }
    .character-actor-card::before,
    .character-actor-card::after {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 0;
    }
    .character-actor-card::before {
      background:
        radial-gradient(128% 92% at 100% 0, rgba(120, 222, 255, .11), transparent 56%),
        linear-gradient(128deg, rgba(218, 247, 255, .28) 10%, rgba(218, 247, 255, 0) 24% 70%, rgba(100, 204, 255, .2) 86%, rgba(100, 204, 255, 0) 100%),
        repeating-linear-gradient(124deg,
          rgba(224, 242, 255, .075) 0 2px,
          rgba(102, 173, 240, .055) 2px 3px,
          rgba(6, 20, 42, 0) 3px 8px);
      mix-blend-mode: screen;
      opacity: .6;
      mask-image: linear-gradient(180deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .86) 22%, rgba(0, 0, 0, .95) 62%, rgba(0, 0, 0, .72));
      -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .52), rgba(0, 0, 0, .86) 22%, rgba(0, 0, 0, .95) 62%, rgba(0, 0, 0, .72));
    }
    .character-actor-card::after {
      inset: -2px;
      border-radius: inherit;
      box-shadow:
        inset 0 1px 0 rgba(224, 247, 255, .38),
        0 0 0 1px rgba(160, 232, 255, .24),
        0 0 18px rgba(74, 177, 255, .2);
      opacity: .76;
    }
    .character-actor-card > * {
      position: relative;
      z-index: 1;
    }
    .character-actor-card img {
      width: 100%;
      aspect-ratio: 3 / 4;
      height: auto;
      object-fit: cover;
      display: block;
      background: rgba(10, 17, 36, .85);
      border-bottom: 1px solid rgba(111, 180, 255, .2);
      transition: filter .26s ease, transform .26s ease, opacity .26s ease;
    }
    .character-actor-card .meta {
      padding: 11px 12px 12px;
      display: grid;
      gap: 6px;
      background:
        linear-gradient(180deg, rgba(190, 233, 255, .08), rgba(9, 26, 50, .36) 28%, rgba(8, 20, 39, .52)),
        repeating-linear-gradient(0deg, rgba(202, 237, 255, .05) 0 1px, rgba(8, 25, 51, .03) 1px 3px);
      border-top: 1px solid rgba(173, 224, 255, .24);
      box-shadow: inset 0 1px 0 rgba(235, 248, 255, .16);
    }
    .character-actor-card h3 {
      --actor-name-fill-start: #eaf8ff;
      --actor-name-fill-mid: #9be4ff;
      --actor-name-fill-end: #66cfff;
      --actor-name-shadow-top: rgba(255, 255, 255, .38);
      --actor-name-shadow-core: rgba(9, 24, 50, .92);
      --actor-name-shadow-glow: rgba(78, 207, 255, .44);
      margin: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      font-family: "Bangers", "Luckiest Guy", "Comic Sans MS", "Chalkboard SE", cursive, sans-serif;
      font-size: 1.1rem;
      font-weight: 780;
      letter-spacing: .035em;
      line-height: 1.08;
      color: #ccf0ff;
      background-image: linear-gradient(178deg, var(--actor-name-fill-start) 0%, var(--actor-name-fill-mid) 52%, var(--actor-name-fill-end) 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
      text-shadow:
        0 1px 0 var(--actor-name-shadow-top),
        0 2px 0 var(--actor-name-shadow-core),
        0 6px 12px rgba(0, 0, 0, .36),
        0 0 10px var(--actor-name-shadow-glow);
    }
    .character-actor-card .actor-name-btn {
      flex: 1;
      min-width: 0;
      text-align: left;
      border: 0;
      background: transparent;
      box-shadow: none;
      border-radius: 8px;
      padding: 2px 4px;
      margin: -2px -4px;
      color: inherit;
      font: inherit;
      font-weight: inherit;
      letter-spacing: inherit;
      text-transform: uppercase;
      text-shadow: inherit;
      cursor: pointer;
      overflow-wrap: anywhere;
      transition: color .2s ease, text-shadow .22s ease, background-color .22s ease, box-shadow .22s ease;
    }
    .character-actor-card .actor-name-btn:hover {
      color: #f1fbff;
      text-shadow:
        0 1px 0 rgba(255, 255, 255, .38),
        0 2px 0 rgba(10, 23, 48, .9),
        0 0 7px rgba(104, 235, 255, .4);
      background: rgba(80, 179, 233, .16);
      box-shadow: inset 0 0 0 1px rgba(179, 233, 255, .32);
    }
    .character-actor-card .actor-name-btn:focus-visible {
      outline: 2px solid rgba(160, 229, 255, .84);
      outline-offset: 1px;
    }
    .character-actor-card p {
      margin: 0;
      color: #c3d8f4;
      font-size: .83rem;
      line-height: 1.3;
    }
    .character-actor-card.unlocked {
      cursor: pointer;
      border-color: rgba(138, 228, 255, .54);
      box-shadow:
        inset 0 1px 0 rgba(234, 250, 255, .64),
        inset 0 4px 10px rgba(188, 237, 255, .22),
        inset 0 -12px 20px rgba(7, 20, 47, .84),
        inset 3px 0 0 rgba(178, 231, 255, .22),
        inset -3px 0 0 rgba(8, 25, 59, .72),
        0 0 0 1px rgba(104, 196, 255, .42),
        0 16px 28px rgba(1, 8, 24, .58),
        0 0 26px rgba(69, 173, 255, .24);
    }
    .character-actor-card.unlocked:hover {
      border-color: rgba(155, 239, 255, .92);
      transform: perspective(980px) rotateX(4deg) translateY(-6px) scale(1.04);
      box-shadow:
        inset 0 1px 0 rgba(236, 250, 255, .74),
        inset 0 6px 14px rgba(188, 236, 255, .28),
        inset 0 -14px 22px rgba(7, 20, 49, .86),
        inset 3px 0 0 rgba(185, 233, 255, .24),
        inset -3px 0 0 rgba(8, 24, 56, .76),
        0 1px 0 rgba(209, 244, 255, .3),
        0 24px 40px rgba(1, 7, 22, .68),
        0 0 30px rgba(74, 184, 255, .32);
    }
    .character-actor-card.unlocked img {
      width: 100%;
      height: auto;
      aspect-ratio: 16 / 10;
      min-height: 120px;
      object-fit: cover;
      object-position: center;
      filter: saturate(1.12) contrast(1.08) brightness(.99);
      image-rendering: auto;
      transform: translateZ(0);
    }
    .character-actor-card.unlocked h3 {
      --actor-name-fill-start: #f8feff;
      --actor-name-fill-mid: #b7f0ff;
      --actor-name-fill-end: #79dcff;
      --actor-name-shadow-top: rgba(255, 255, 255, .44);
      --actor-name-shadow-core: rgba(5, 20, 48, .96);
      --actor-name-shadow-glow: rgba(102, 227, 255, .54);
    }
    .character-actor-card.unlocked p {
      color: #9fbee3;
    }
    .character-actor-card.locked {
      border-style: dashed;
      border-color: rgba(132, 166, 224, .34);
      background:
        linear-gradient(140deg, rgba(190, 228, 255, .06) 0 15%, rgba(190, 228, 255, 0) 30%),
        radial-gradient(circle at 22% 14%, rgba(126, 170, 245, .12), transparent 60%),
        linear-gradient(165deg, rgba(18, 34, 64, .9), rgba(11, 22, 42, .97));
      box-shadow:
        inset 0 1px 0 rgba(195, 225, 255, .18),
        inset 0 -10px 16px rgba(5, 14, 35, .72),
        inset 2px 0 0 rgba(150, 197, 245, .12),
        inset -2px 0 0 rgba(8, 22, 52, .66),
        0 0 0 1px rgba(88, 136, 206, .3),
        0 12px 22px rgba(2, 8, 22, .52);
      filter: grayscale(.42) brightness(.86);
    }
    .character-actor-card .locked-mic {
      aspect-ratio: 16 / 11;
      min-height: 120px;
      width: 100%;
      border-radius: 14px;
      display: grid;
      place-items: center;
      font-size: clamp(2.2rem, 4vw, 3.2rem);
      background: linear-gradient(160deg, rgba(8, 16, 34, .92), rgba(18, 29, 52, .9));
      border: 1px solid rgba(144, 176, 230, .35);
      box-shadow:
        inset 0 1px 0 rgba(226, 242, 255, .14),
        inset 0 -18px 28px rgba(3, 8, 20, .45),
        0 0 18px rgba(124, 170, 255, .22);
      text-shadow: 0 0 10px rgba(153, 208, 255, .38);
    }
    .character-hero__actions {
      display: grid;
      gap: 8px;
      align-self: start;
      justify-items: end;
    }
    .character-hero__icon-btn {
      width: 48px;
      min-width: 48px;
      height: 48px;
      min-height: 48px;
      padding: 0;
      font-size: 1.35rem;
      display: inline-grid;
      place-items: center;
      line-height: 1;
    }
    .character-inline-editor {
      margin-top: 8px;
      padding: 14px;
      border-radius: 14px;
      border: 1px solid rgba(126, 216, 255, .4);
      background: linear-gradient(165deg, rgba(12, 35, 68, .85), rgba(14, 23, 54, .9));
      box-shadow: inset 0 1px 0 rgba(226, 244, 255, .14);
      display: grid;
      gap: 10px;
    }
    .character-inline-editor[hidden] { display: none; }
    .character-inline-editor__grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
    }
    .character-inline-editor label {
      display: grid;
      gap: 4px;
      font-size: .86rem;
      color: #d4ebff;
    }
    .character-inline-editor input {
      width: 100%;
      border-radius: 10px;
      border: 1px solid rgba(132, 208, 255, .5);
      background: rgba(8, 20, 42, .85);
      color: #ecf8ff;
      padding: 8px 10px;
      font: inherit;
    }
    .character-inline-editor__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }
    .character-actor-card.locked h3 {
      --actor-name-fill-start: #fff6b8;
      --actor-name-fill-mid: #ffd96a;
      --actor-name-fill-end: #ffbe46;
      --actor-name-shadow-top: rgba(255, 250, 212, .56);
      --actor-name-shadow-core: rgba(11, 21, 44, .96);
      --actor-name-shadow-glow: rgba(255, 214, 106, .42);
      filter: saturate(1.35) brightness(1.2);
    }
    .character-actor-card .locked-note {
      color: #ff6c7b;
      font-weight: 700;
      font-size: .86rem;
      letter-spacing: .02em;
      text-shadow:
        0 0 7px rgba(255, 61, 87, .55),
        0 0 14px rgba(255, 61, 87, .28);
      background: linear-gradient(92deg, #ff8ea1 0%, #ff465f 48%, #ff9aa9 100%);
      -webkit-background-clip: text;
      background-clip: text;
      -webkit-text-fill-color: transparent;
    }
    .character-actor-card .actor-add-btn {
      width: 26px;
      height: 26px;
      min-height: 26px;
      border-radius: 8px;
      padding: 0;
      display: inline-grid;
      place-items: center;
      font-size: 1rem;
      line-height: 1;
      font-weight: 700;
      border-color: rgba(170, 255, 198, .92);
      background: linear-gradient(160deg, rgba(46, 255, 133, .96), rgba(9, 150, 71, .95));
      color: #f4fff8;
      -webkit-text-fill-color: currentColor;
      text-shadow: 0 0 10px rgba(232, 255, 241, .58);
      box-shadow: inset 0 1px 0 rgba(234, 255, 245, .42), 0 0 10px rgba(66, 255, 152, .5), 0 3px 8px rgba(4, 11, 27, .45);
    }
    .character-actor-card .actor-add-btn:hover {
      border-color: rgba(214, 255, 227, .98);
      background: linear-gradient(160deg, rgba(68, 255, 156, 1), rgba(14, 176, 86, .98));
      box-shadow: inset 0 1px 0 rgba(246, 255, 250, .48), 0 0 16px rgba(71, 255, 163, .82), 0 4px 12px rgba(13, 73, 38, .48);
    }
    .character-actor-card .actor-add-btn:focus-visible {
      outline: 2px solid rgba(236, 255, 243, .95);
      outline-offset: 2px;
      box-shadow: 0 0 0 3px rgba(58, 241, 135, .48), 0 0 14px rgba(71, 255, 163, .75);
    }
    .profile-avatar {
      width: 160px;
      height: 160px;
      border-radius: 20px;
      object-fit: cover;
      box-shadow: 0 0 20px rgba(43, 247, 255, 0.2);
      display: block;
    }
    .profile-avatar--locked {
      position: relative;
      width: 160px;
      height: 160px;
      border-radius: 20px;
      overflow: hidden;
      display: grid;
      place-items: center;
      padding: 14px;
      border: 1px dashed rgba(168, 189, 214, .55);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(0, 0, 0, .35);
      background:
        radial-gradient(circle at 50% 50%, #05070d 0 26%, transparent 27%),
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .08), transparent 42%),
        linear-gradient(180deg, #0e2f67 0%, #081e45 55%, #04132e 100%);
      filter: brightness(.9);
    }
    .profile-avatar--locked.has-custom-image {
      border: 1px solid rgba(144, 214, 255, .55);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      padding: 0;
      place-items: center;
    }
    .profile-avatar--locked.has-custom-image::before {
      background: linear-gradient(rgba(0, 0, 0, .75), rgba(0, 0, 0, .75));
      box-shadow: inset 0 0 34px rgba(0, 0, 0, .88), inset 0 0 0 1px rgba(210, 236, 255, .12);
    }
    .profile-avatar--locked::before {
      content: '';
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 50% 24%, rgba(255, 255, 255, .14), transparent 44%),
        radial-gradient(circle at 50% 50%, transparent 36%, rgba(0, 0, 0, .56) 100%);
      box-shadow: inset 0 0 30px rgba(0, 0, 0, .75), inset 0 0 0 1px rgba(210, 236, 255, .15);
      pointer-events: none;
    }
    .profile-avatar--locked::after {
      content: '';
      position: absolute;
      left: 50%;
      bottom: -16%;
      width: 50%;
      height: 62%;
      transform: translateX(-50%);
      background: #090c12;
      border-radius: 44% 44% 12% 12% / 52% 52% 9% 9%;
      box-shadow: 0 -16px 0 -7px #090c12, 0 16px 24px rgba(0, 0, 0, .38);
      pointer-events: none;
    }
    .profile-avatar--locked .profile-avatar-lock-label {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      gap: 3px;
      border-radius: 14px;
      border: 1px solid rgba(211, 226, 244, .42);
      background: rgba(8, 12, 20, .74);
      color: #f2f6fb;
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
      padding: 8px 12px;
      backdrop-filter: blur(2px);
      text-align: center;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 8px 12px rgba(0, 0, 0, .42);
    }
    .profile-avatar--locked .profile-avatar-lock-label .lock-icon {
      font-size: 1.2em;
      line-height: 1;
    }
    .profile-avatar--locked .profile-avatar-lock-label .lock-text {
      line-height: 1;
    }
    .profile-avatar--locked.has-custom-image .profile-avatar-lock-label {
      margin: auto;
      font-size: 1rem;
      padding: 10px 16px;
      box-shadow: 0 0 12px rgba(0, 0, 0, .45);
    }
    .profile-avatar--locked.has-custom-image::after {
      display: none;
    }
    .profile-avatar--locked.has-custom-image .profile-avatar-lock-label {
      border: 0;
      background: rgba(4, 9, 16, .46);
      padding: 6px 8px;
      font-size: 1.25rem;
      line-height: 1;
      gap: 0;
      box-shadow: 0 0 12px rgba(0, 0, 0, .48);
    }
    .profile-avatar--locked.has-custom-image .profile-avatar-lock-label .lock-icon {
      font-size: 1em;
    }
    .mock-row { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
    .mock-box {
      background: var(--panel-2);
      border: 1px dashed color-mix(in srgb, var(--accent) 32%, var(--line));
      border-radius: 14px;
      padding: 12px;
    }
    .mock-shell--centered {
      min-height: 58vh;
      place-content: center;
    }
    .mock-search-input {
      font-size: 1.15rem;
      padding: 16px;
    }
    .mock-topbar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
    }
    .mock-form-hidden {
      display: none;
      margin-top: 10px;
    }
    .mock-gap-lg {
      margin-top: 20px;
    }
    .mock-gap-md {
      margin-top: 16px;
    }
    .no-margin {
      margin: 0;
    }
    /* Regla de consistencia UI: evita estilos inline en componentes nuevos cuando exista una clase equivalente. */
    .terminal-list {
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      background: #0d1228;
      color: #8fffc4;
      border-radius: 14px;
      border: 1px solid #233159;
      padding: 14px;
      list-style: none;
      margin: 0;
      display: grid;
      gap: 6px;
    }
    .kpi {
      border: 1px solid var(--line);
      border-radius: 12px;
      background: var(--panel);
      padding: 12px;
      box-shadow: var(--shadow-soft);
    }
    .kpi.toon-kpi {
      border: var(--toon-border);
      box-shadow: var(--toon-shadow);
    }
    .theme-toggle {
      width: 52px;
      height: 28px;
      border-radius: 999px;
      background: linear-gradient(155deg, rgba(22, 40, 75, .92), rgba(14, 26, 52, .96));
      position: relative;
      border: 1px solid var(--line);
      box-shadow: inset 0 1px 0 rgba(188, 227, 255, .12);
    }
    .theme-toggle::after {
      content: "";
      position: absolute;
      top: 3px;
      left: 3px;
      width: 20px;
      height: 20px;
      border-radius: 999px;
      background: linear-gradient(145deg, rgba(156, 227, 255, .95), rgba(89, 206, 255, .88));
      box-shadow: 0 0 10px rgba(91, 196, 255, .65);
    }

    @media (max-width: 960px) {
      .layout { grid-template-columns: 1fr; }
      .sidebar {
        position: static;
        height: auto;
      }
      .sidebar-nav {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      }
      .universe-gallery-layout { grid-template-columns: 1fr; }
      .universe-header { grid-template-columns: 1fr; }
      .universe-hero { grid-template-columns: 1fr; }
      .character-hero {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
      }
      .character-hero__content {
        width: 100%;
      }
      .character-hero__badges {
        justify-content: flex-start;
      }
      .video-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        justify-content: stretch;
      }
      .detail-grid { grid-template-columns: 1fr; }
      .detail-grid aside .actions {
        flex-direction: row;
        flex-wrap: wrap;
      }
      .rarity-highlight {
        font-size: 1.05rem;
        padding: 14px 12px;
      }
      .content { height: auto; }
      html, body { overflow: auto; }
    }
    @media (max-width: 720px) {
      .actor-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .actor-gallery { gap: 12px; }
      .actor-card {
        border-radius: 16px;
        box-shadow: 0 8px 14px rgba(4, 10, 25, .36);
      }
      .actor-card:hover,
      .actor-card.active {
        transform: translateY(-2px);
        box-shadow: 0 10px 16px rgba(4, 11, 28, .42), 0 0 14px rgba(104, 196, 255, .24);
      }
      .actor-card-title {
        font-size: clamp(1.02rem, .9rem + 1.2vw, 1.25rem);
      }
      .actor-card-meta {
        font-size: .68rem;
      }
      .actor-character-item {
        border-radius: 14px;
        box-shadow: 0 6px 10px rgba(4, 10, 26, .3);
      }
      .actor-character-item:hover {
        transform: none;
        box-shadow: 0 8px 12px rgba(4, 10, 26, .32);
      }
      .character-hero {
        grid-template-columns: 1fr;
        gap: 14px;
        padding-bottom: 16px;
      }
      .character-hero__avatar {
        width: 138px;
        height: 138px;
      }
      .character-hero__badges {
        gap: 8px;
      }
      .character-hero__actions {
        justify-items: start;
        grid-auto-flow: column;
      }
      .character-hero__badge {
        font-size: .86rem;
        min-block-size: 48px;
        padding: 7px 12px;
      }
      .character-hero__title {
        font-size: clamp(1.85rem, 1.35rem + 2.5vw, 2.55rem);
        letter-spacing: .015em;
        text-shadow:
          1px 0 0 rgba(22, 9, 3, .86),
          -1px 0 0 rgba(22, 9, 3, .86),
          0 1px 0 rgba(22, 9, 3, .86),
          0 -1px 0 rgba(22, 9, 3, .86),
          0 2px 0 rgba(69, 24, 7, .68),
          0 3px 0 rgba(58, 18, 8, .62),
          0 4px 8px rgba(0, 0, 0, .4),
          0 0 10px rgba(255, 164, 88, .34);
      }
      .actors-shell::after {
        filter: blur(4px);
        opacity: .3;
      }
      .character-actors-grid {
        grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
        gap: 10px;
        overflow: visible;
      }
      .character-actor-card::before {
        opacity: .45;
        background:
          radial-gradient(120% 90% at 100% 0, rgba(117, 220, 255, .08), transparent 56%),
          linear-gradient(128deg, rgba(208, 241, 255, .2) 10%, rgba(208, 241, 255, 0) 28% 68%, rgba(98, 196, 255, .14) 84%, rgba(98, 196, 255, 0) 100%),
          repeating-linear-gradient(124deg,
            rgba(224, 242, 255, .045) 0 1px,
            rgba(101, 171, 238, .04) 1px 2px,
            rgba(6, 20, 42, 0) 2px 7px);
      }
      .character-actor-card.unlocked:hover {
        transform: perspective(860px) rotateX(2deg) translateY(-2px) scale(1.015);
      }
    }
    @media (max-width: 520px) {
      .actor-gallery { grid-template-columns: 1fr; }
    }