*,
      *::before,
      *::after {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      html,
      body {
        height: 100%;
        min-height: 100vh;
        background:
          radial-gradient(
            ellipse at 18% 28%,
            rgba(70, 22, 170, 0.28) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse at 82% 72%,
            rgba(22, 50, 190, 0.2) 0%,
            transparent 55%
          ),
          radial-gradient(
            ellipse at 50% 50%,
            rgba(40, 10, 100, 0.15) 0%,
            transparent 70%
          ),
          #060213;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        color: #fff;
        overflow: hidden;
      }

      /* ══════════════════════════════
       TOP NAV
    ══════════════════════════════ */
      .topnav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 58px;
        z-index: 100;
        display: flex;
        align-items: center;
        gap: 0;
        padding: 0 24px;
        background: rgba(6, 3, 20, 0.82);
        border-bottom: 1px solid rgba(180, 130, 255, 0.14);
        backdrop-filter: blur(18px);
      }

      .nav-logo {
        display: flex;
        align-items: center;
        gap: 9px;
        text-decoration: none;
        flex-shrink: 0;
      }
      .nav-logo-ico {
        font-size: 22px;
        filter: drop-shadow(0 0 10px rgba(255, 180, 30, 0.7));
      }
      .nav-logo-name {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 16px;
        font-weight: 900;
        letter-spacing: 2.5px;
        /* Animated flowing gradient — game palette: gold → purple → blue → gold */
        background: linear-gradient(
          90deg,
          #ffd700,
          #ffb020,
          #ffe066,
          #c88cff,
          #7744ee,
          #4488ff,
          #ffe066,
          #ffd700
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: logo-flow 7s linear infinite;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
      }
      @keyframes logo-flow {
        0% {
          background-position: 0% center;
        }
        100% {
          background-position: 300% center;
        }
      }

      .nav-center {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 4px;
      }
      .nav-link {
        display: flex;
        align-items: center;
        padding: 7px 14px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        color: transparent;
        -webkit-text-stroke: 1.2px rgba(190, 170, 240, 0.45);
        text-decoration: none;
        cursor: pointer;
        transition:
          -webkit-text-stroke-color 0.18s,
          color 0.18s,
          background 0.18s;
        border: none;
        background: none;
      }
      .nav-link:hover {
        -webkit-text-stroke-color: rgba(215, 200, 255, 0.85);
        background: rgba(180, 140, 255, 0.07);
      }
      .nav-link.active {
        color: #ffd700;
        -webkit-text-stroke: 1px rgba(180, 130, 0, 0.5);
        background: none;
        border: none;
      }

      .nav-right {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
        height: 36px;
      }

      /* ── HIVE balance pill ── */
      .hive-bal {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 18px;
        background: rgba(20, 14, 4, 0.7);
        border: 1.5px solid rgba(200, 150, 30, 0.45);
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 700;
        color: rgba(255, 195, 60, 0.95);
        box-shadow:
          0 0 16px rgba(200, 130, 20, 0.12),
          inset 0 1px 0 rgba(255, 200, 60, 0.08);
        height: 36px;
      }

      /* ── User badge ── */
      .nav-user-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 5px 14px 5px 6px;
        background: rgba(12, 8, 32, 0.75);
        border: 1.5px solid rgba(130, 100, 220, 0.35);
        border-radius: 999px;
        font-size: 13.5px;
        font-weight: 600;
        color: rgba(200, 185, 245, 0.88);
        box-shadow:
          0 0 14px rgba(100, 70, 200, 0.1),
          inset 0 1px 0 rgba(180, 150, 255, 0.06);
        height: 36px;
      }
      .nav-avatar {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        object-fit: cover;
        border: 1.5px solid rgba(150, 120, 255, 0.4);
        background: rgba(80, 50, 160, 0.3);
        flex-shrink: 0;
      }

      /* ── Exit button ── */
      .btn-exit {
        padding: 9px 20px;
        background: rgba(180, 20, 20, 0.22);
        border: 1.5px solid rgba(220, 50, 50, 0.45);
        border-radius: 10px;
        color: rgba(255, 100, 100, 0.9);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s;
        letter-spacing: 0.3px;
        height: 36px;
      }
      .btn-exit:hover {
        background: rgba(220, 40, 40, 0.32);
        border-color: rgba(255, 70, 70, 0.6);
        color: #ff8888;
        box-shadow: 0 0 14px rgba(220, 40, 40, 0.2);
      }

      /* ══════════════════════════════
       LOBBY MAIN
    ══════════════════════════════ */
      .lobby-wrap {
        position: relative;
        z-index: 2;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .lobby-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 6px;
        text-transform: uppercase;
        margin-bottom: 32px;
        position: relative;
        /* Animated gradient — same game palette */
        background: linear-gradient(
          90deg,
          #ffd700,
          #ffb020,
          #ffe066,
          #c88cff,
          #7744ee,
          #4488ff,
          #ffe066,
          #ffd700
        );
        background-size: 300% auto;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        animation: logo-flow 7s linear infinite;
        /* Subtle glow behind the text */
        filter: drop-shadow(0 0 18px rgba(180, 130, 255, 0.35));
      }
      /* Decorative lines flanking the title */
      .lobby-title::before,
      .lobby-title::after {
        content: "";
        position: absolute;
        top: 50%;
        width: 40px;
        height: 1px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(200, 150, 255, 0.45)
        );
      }
      .lobby-title::before {
        right: calc(100% + 14px);
        transform: scaleX(-1);
      }
      .lobby-title::after {
        left: calc(100% + 14px);
      }

      .banners-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
        max-width: 420px;
        align-items: start;
      }

      .vs-col {
        display: none;
      }
      .vs-badge {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 20px;
        font-weight: 900;
        color: rgba(210, 180, 255, 0.28);
        text-shadow: 0 0 20px rgba(180, 100, 255, 0.5);
        letter-spacing: 2px;
      }

      /* ══════════════════════════════
       BANNER
    ══════════════════════════════ */
      .banner {
        position: relative;
        border-radius: 20px;
        border: 1.5px solid rgba(120, 80, 255, 0.25);
        padding: 22px 22px 12px;
        overflow: visible;
        display: flex;
        flex-direction: column;
        cursor: pointer;
        z-index: 1;
        transition:
          border-color 0.35s,
          box-shadow 0.35s,
          transform 0.35s,
          z-index 0s;
      }
      .banner:hover {
        z-index: 10;
      }
      .banner::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        border-radius: 20px 20px 0 0;
      }

      /* ── Preview (always visible) ── */
      .banner-preview {
        display: flex;
        flex-direction: column;
      }

      /* ── Expand (slides in on hover) ── */
      .banner-expand {
        overflow: hidden;
        max-height: 0;
        opacity: 0;
        transition:
          max-height 0.42s cubic-bezier(0.4, 0, 0.2, 1),
          opacity 0.3s ease;
      }
      .banner:hover .banner-expand {
        max-height: 340px;
        opacity: 1;
      }

      /* ── AI hover ── */
      .banner-ai:hover {
        border-color: rgba(175, 120, 255, 0.9);
        box-shadow:
          0 0 70px rgba(130, 80, 255, 0.42),
          0 0 26px rgba(130, 80, 255, 0.22),
          0 24px 68px rgba(0, 0, 0, 0.65);
        transform: translateY(-5px);
      }

      /* ── PvP hover ── */
      .banner-pvp:hover {
        border-color: rgba(255, 180, 50, 0.85);
        box-shadow:
          0 0 70px rgba(225, 155, 30, 0.38),
          0 0 26px rgba(225, 155, 30, 0.2),
          0 24px 68px rgba(0, 0, 0, 0.65);
        transform: translateY(-5px);
      }

      /* AI banner theme */
      .banner-ai {
        background: linear-gradient(
          160deg,
          rgba(18, 10, 48, 0.96),
          rgba(12, 7, 36, 0.95),
          rgba(8, 4, 24, 0.98)
        );
        border-color: rgba(110, 70, 255, 0.28);
      }
      .banner-ai::before {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(120, 80, 255, 0.7),
          transparent
        );
      }

      /* PvP banner theme */
      .banner-pvp {
        background: linear-gradient(
          160deg,
          rgba(36, 18, 6, 0.96),
          rgba(28, 14, 4, 0.95),
          rgba(18, 8, 2, 0.98)
        );
        border-color: rgba(200, 130, 28, 0.25);
      }
      .banner-pvp::before {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(220, 150, 30, 0.65),
          transparent
        );
      }

      /* ── Banner sphere art ── */
      .banner-sphere {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 0 auto 22px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .sph-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        border: 2px solid transparent;
      }

      /* AI sphere rings — purple/blue */
      .banner-ai .sph-ring.r1 {
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-top-color: rgba(120, 80, 255, 0.65);
        border-right-color: rgba(120, 80, 255, 0.2);
        border-bottom-color: rgba(80, 140, 255, 0.5);
        border-left-color: transparent;
        animation: spin-cw 9s linear infinite;
      }
      .banner-ai .sph-ring.r2 {
        width: 112px;
        height: 112px;
        margin: -56px 0 0 -56px;
        border: 2px solid transparent;
        border-top-color: transparent;
        border-right-color: rgba(80, 155, 255, 0.75);
        border-bottom-color: transparent;
        border-left-color: rgba(80, 155, 255, 0.35);
        animation: spin-ccw 5.5s linear infinite;
      }
      .banner-ai .sph-ring.r3 {
        width: 74px;
        height: 74px;
        margin: -37px 0 0 -37px;
        border: 1.5px solid transparent;
        border-top-color: rgba(180, 130, 255, 0.85);
        border-right-color: rgba(180, 130, 255, 0.2);
        border-bottom-color: rgba(180, 130, 255, 0.5);
        border-left-color: rgba(180, 130, 255, 0.2);
        animation: spin-cw 3s linear infinite;
      }
      .banner-ai .sph-core {
        position: relative;
        z-index: 1;
        font-size: 34px;
        filter: drop-shadow(0 0 22px rgba(130, 90, 255, 0.9));
        animation: ico-float 5s ease-in-out infinite;
      }

      /* PvP sphere rings — gold/orange */
      .banner-pvp .sph-ring.r1 {
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-top-color: rgba(220, 150, 30, 0.65);
        border-right-color: rgba(220, 150, 30, 0.2);
        border-bottom-color: rgba(255, 180, 50, 0.5);
        border-left-color: transparent;
        animation: spin-cw 9s linear infinite;
      }
      .banner-pvp .sph-ring.r2 {
        width: 112px;
        height: 112px;
        margin: -56px 0 0 -56px;
        border: 2px solid transparent;
        border-top-color: transparent;
        border-right-color: rgba(255, 100, 50, 0.7);
        border-bottom-color: transparent;
        border-left-color: rgba(255, 100, 50, 0.3);
        animation: spin-ccw 5.5s linear infinite;
      }
      .banner-pvp .sph-ring.r3 {
        width: 74px;
        height: 74px;
        margin: -37px 0 0 -37px;
        border: 1.5px solid transparent;
        border-top-color: rgba(255, 210, 60, 0.9);
        border-right-color: rgba(255, 210, 60, 0.2);
        border-bottom-color: rgba(255, 210, 60, 0.5);
        border-left-color: rgba(255, 210, 60, 0.2);
        animation: spin-cw 3s linear infinite;
      }
      .banner-pvp .sph-core {
        position: relative;
        z-index: 1;
        font-size: 34px;
        filter: drop-shadow(0 0 22px rgba(255, 180, 40, 0.9));
        animation: ico-float 5s ease-in-out infinite;
      }

      @keyframes spin-cw {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes spin-ccw {
        to {
          transform: rotate(-360deg);
        }
      }
      @keyframes ico-float {
        0%,
        100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-5px);
        }
      }

      /* ── Banner text ── */
      .banner-type-badge {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 3px 10px;
        border-radius: 999px;
        font-size: 9.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
        align-self: flex-start;
      }
      .banner-ai .banner-type-badge {
        background: rgba(110, 70, 255, 0.18);
        border: 1px solid rgba(130, 90, 255, 0.35);
        color: rgba(190, 160, 255, 0.85);
      }
      .banner-pvp .banner-type-badge {
        background: rgba(200, 130, 28, 0.15);
        border: 1px solid rgba(220, 150, 30, 0.32);
        color: rgba(255, 200, 80, 0.85);
      }

      .banner-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: 1.5px;
        margin-bottom: 10px;
      }
      .banner-ai .banner-title {
        color: rgba(210, 195, 255, 0.95);
      }
      .banner-pvp .banner-title {
        color: rgba(255, 215, 100, 0.95);
      }

      .banner-desc {
        font-size: 12px;
        color: rgba(165, 148, 210, 0.6);
        line-height: 1.65;
        margin-bottom: 24px;
      }

      /* ── Config section ── */
      .cfg-divider {
        height: 1px;
        margin-bottom: 10px;
      }
      .banner-ai .cfg-divider {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(110, 70, 255, 0.35),
          transparent
        );
      }
      .banner-pvp .cfg-divider {
        background: linear-gradient(
          90deg,
          transparent,
          rgba(200, 130, 28, 0.32),
          transparent
        );
      }

      .cfg-row {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 14px;
        flex-wrap: wrap;
      }
      .cfg-lbl {
        font-size: 9.5px;
        text-transform: uppercase;
        letter-spacing: 1.3px;
        font-weight: 700;
        width: 60px;
        flex-shrink: 0;
      }
      .banner-ai .cfg-lbl {
        color: rgba(150, 115, 255, 0.6);
      }
      .banner-pvp .cfg-lbl {
        color: rgba(210, 150, 40, 0.6);
      }

      /* ── Format pill tooltip (rendered at body level via JS) ── */
      .fmt-wrap {
        display: inline-flex;
      }

      #fmt-tooltip {
        position: fixed;
        z-index: 9999;
        background: rgba(10, 6, 28, 0.97);
        border: 1px solid rgba(160, 120, 255, 0.35);
        border-radius: 10px;
        padding: 10px 14px;
        width: 192px;
        pointer-events: none;
        opacity: 0;
        transition:
          opacity 0.15s ease,
          transform 0.15s ease;
        transform: translateY(-4px);
        box-shadow:
          0 10px 32px rgba(0, 0, 0, 0.6),
          0 0 18px rgba(130, 80, 255, 0.14);
        white-space: normal;
      }
      #fmt-tooltip.visible {
        opacity: 1;
        transform: translateY(0);
      }
      #fmt-tooltip::before {
        content: "";
        position: absolute;
        bottom: 100%;
        left: var(--arrow-left, 50%);
        transform: translateX(-50%);
        border: 5px solid transparent;
        border-bottom-color: rgba(160, 120, 255, 0.55);
      }
      .fmt-tip-name {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1px;
        color: rgba(210, 190, 255, 0.95);
        margin-bottom: 5px;
        display: block;
      }
      .fmt-tip-desc {
        font-size: 11px;
        color: rgba(160, 145, 210, 0.72);
        line-height: 1.55;
        display: block;
      }
      .fmt-tip-win {
        margin-top: 6px;
        padding-top: 6px;
        border-top: 1px solid rgba(140, 100, 255, 0.18);
        font-size: 10.5px;
        color: rgba(140, 210, 130, 0.85);
        display: block;
        font-weight: 600;
      }

      .pills {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
      }

      .pill {
        padding: 6px 14px;
        border-radius: 999px;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 11.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        border: 1.5px solid;
      }
      .banner-ai .pill {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(110, 75, 255, 0.28);
        color: rgba(170, 148, 225, 0.58);
      }
      .banner-ai .pill:hover {
        border-color: rgba(150, 105, 255, 0.5);
        color: rgba(200, 180, 255, 0.82);
      }
      .banner-ai .pill.active {
        background: rgba(110, 70, 255, 0.22);
        border-color: rgba(165, 115, 255, 0.72);
        color: rgba(225, 210, 255, 0.96);
        box-shadow: 0 0 12px rgba(110, 70, 255, 0.3);
      }
      .banner-pvp .pill {
        background: rgba(255, 255, 255, 0.03);
        border-color: rgba(200, 130, 28, 0.26);
        color: rgba(210, 170, 80, 0.55);
      }
      .banner-pvp .pill:hover:not(:disabled) {
        border-color: rgba(230, 155, 38, 0.48);
        color: rgba(240, 195, 90, 0.82);
      }
      .banner-pvp .pill.active {
        background: rgba(200, 130, 28, 0.2);
        border-color: rgba(235, 165, 40, 0.68);
        color: rgba(255, 220, 100, 0.96);
        box-shadow: 0 0 12px rgba(200, 130, 28, 0.28);
      }
      .pill:disabled {
        opacity: 0.42;
        cursor: not-allowed;
      }

      /* ── Action buttons ── */
      .btn-action {
        width: 100%;
        padding: 12px;
        border-radius: 13px;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 1.8px;
        cursor: pointer;
        transition: all 0.18s;
        position: relative;
        overflow: hidden;
      }
      .btn-action::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 255, 255, 0.09),
          transparent
        );
        transform: translateX(-100%);
        animation: btn-shim 3.5s ease-in-out infinite;
      }
      @keyframes btn-shim {
        0% {
          transform: translateX(-100%);
        }
        50%,
        100% {
          transform: translateX(150%);
        }
      }

      .btn-start {
        background: linear-gradient(
          135deg,
          rgba(110, 65, 230, 0.85),
          rgba(75, 40, 195, 0.85)
        );
        border: 1.5px solid rgba(145, 100, 255, 0.5);
        color: #fff;
        margin-top: 10px;
      }
      .btn-start:hover {
        background: linear-gradient(
          135deg,
          rgba(130, 78, 248, 0.92),
          rgba(90, 52, 220, 0.92)
        );
        box-shadow: 0 8px 32px rgba(105, 60, 220, 0.42);
        transform: translateY(-2px);
      }

      .btn-find {
        background: linear-gradient(
          135deg,
          rgba(195, 120, 18, 0.8),
          rgba(155, 88, 12, 0.8)
        );
        border: 1.5px solid rgba(225, 150, 28, 0.45);
        color: #fff;
        margin-top: 10px;
      }
      .btn-find:hover:not(:disabled) {
        background: linear-gradient(
          135deg,
          rgba(220, 140, 22, 0.88),
          rgba(178, 105, 15, 0.88)
        );
        box-shadow: 0 8px 32px rgba(200, 120, 20, 0.38);
        transform: translateY(-2px);
      }
      .btn-find:disabled {
        opacity: 0.45;
        cursor: not-allowed;
        transform: none;
      }

      .btn-soon-badge {
        position: absolute;
        top: -10px;
        right: 14px;
        background: rgba(255, 140, 30, 0.92);
        color: #fff;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 9px;
        font-weight: 800;
        padding: 3px 9px;
        border-radius: 999px;
        text-transform: uppercase;
        letter-spacing: 1px;
      }

      /* ══════════════════════════════
         SETTINGS OVERLAY
      ══════════════════════════════ */
      /* ── Settings view ── */
      #view-settings {
        height: 100vh;
        padding-top: 58px;
        box-sizing: border-box;
        overflow-y: auto;
      }
      #view-settings::-webkit-scrollbar {
        width: 4px;
      }
      #view-settings::-webkit-scrollbar-track {
        background: transparent;
      }
      #view-settings::-webkit-scrollbar-thumb {
        background: rgba(200, 160, 60, 0.25);
        border-radius: 4px;
      }

      .sv-wrap {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
        padding: 28px 16px 48px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .sv-page-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 15px;
        font-weight: 700;
        color: rgba(255, 220, 100, 0.9);
        letter-spacing: 1px;
        padding-bottom: 14px;
        border-bottom: 1px solid rgba(255, 200, 60, 0.14);
      }

      .stg-content {
        overflow-y: auto;
        padding: 20px 22px 24px;
        display: flex;
        flex-direction: column;
        gap: 24px;
      }
      .stg-section {
        display: flex;
        flex-direction: column;
        gap: 10px;
      }
      .stg-section-title {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: rgba(255, 210, 80, 0.65);
        border-bottom: 1px solid rgba(255, 200, 60, 0.12);
        padding-bottom: 6px;
      }
      .stg-section-desc {
        font-size: 12px;
        color: rgba(200, 210, 255, 0.55);
        line-height: 1.5;
      }
      /* Payout pills */
      .stg-payout-pills {
        display: flex;
        gap: 10px;
      }
      .stg-pill {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        padding: 14px 10px;
        border-radius: 12px;
        border: 1.5px solid rgba(255, 255, 255, 0.1);
        background: rgba(255, 255, 255, 0.04);
        cursor: pointer;
        transition: all 0.18s;
        color: rgba(200, 210, 255, 0.65);
      }
      .stg-pill:hover {
        border-color: rgba(255, 200, 60, 0.3);
        background: rgba(255, 200, 60, 0.06);
      }
      .stg-pill.active {
        border-color: rgba(255, 200, 60, 0.55);
        background: rgba(255, 200, 60, 0.1);
        color: rgba(255, 230, 130, 0.95);
      }
      .stg-pill-ico {
        font-size: 22px;
      }
      .stg-pill-name {
        font-size: 12px;
        font-weight: 700;
        color: inherit;
      }
      .stg-pill-pct {
        font-size: 10px;
        color: rgba(180, 200, 255, 0.5);
        font-weight: 600;
      }
      .stg-pill.active .stg-pill-pct {
        color: rgba(255, 210, 80, 0.7);
      }
      .stg-note {
        font-size: 10.5px;
        color: rgba(180, 190, 230, 0.4);
        line-height: 1.6;
        padding: 8px 10px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05);
      }
      .stg-save-row {
        display: flex;
        align-items: center;
        gap: 10px;
      }
      .stg-saved-badge {
        font-size: 10.5px;
        color: rgba(100, 220, 100, 0.8);
        opacity: 0;
        transition: opacity 0.3s;
      }
      .stg-saved-badge.show {
        opacity: 1;
      }
      /* About */
      .stg-about {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 14px 16px;
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.06);
      }
      .stg-about-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 12.5px;
        color: rgba(200, 210, 255, 0.6);
      }
      .stg-about-row a {
        color: rgba(255, 200, 80, 0.8);
        text-decoration: none;
        font-weight: 600;
        transition: color 0.15s;
      }
      .stg-about-row a:hover {
        color: rgba(255, 220, 120, 1);
      }
      .stg-version {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 20px;
        background: rgba(255, 200, 60, 0.12);
        border: 1px solid rgba(255, 200, 60, 0.22);
        color: rgba(255, 210, 80, 0.85);
        letter-spacing: 0.4px;
        margin-left: 8px;
      }

      /* ══════════════════════════════
       MATCH SEARCH OVERLAY
    ══════════════════════════════ */
      .search-overlay {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgba(4, 2, 16, 0.84);
        backdrop-filter: blur(8px);
        display: none;
        align-items: center;
        justify-content: center;
      }
      .search-overlay.open {
        display: flex;
      }

      .search-panel {
        background: linear-gradient(
          160deg,
          rgba(18, 10, 5, 0.97),
          rgba(28, 14, 4, 0.94)
        );
        border: 1.5px solid rgba(220, 150, 40, 0.35);
        border-radius: 22px;
        padding: 44px 40px 38px;
        width: 360px;
        text-align: center;
        animation: panel-in 0.3s cubic-bezier(0.22, 0.68, 0, 1.15) both;
        position: relative;
      }
      .search-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(
          90deg,
          transparent,
          rgba(255, 180, 40, 0.8),
          rgba(255, 120, 30, 0.6),
          transparent
        );
        border-radius: 22px 22px 0 0;
      }
      @keyframes panel-in {
        from {
          opacity: 0;
          transform: scale(0.88) translateY(14px);
        }
        to {
          opacity: 1;
          transform: none;
        }
      }

      /* Arcane rings */
      .arcane-rings {
        position: relative;
        width: 160px;
        height: 160px;
        margin: 0 auto 28px;
      }
      .arc-ring {
        position: absolute;
        top: 50%;
        left: 50%;
        border-radius: 50%;
        border: 2px solid transparent;
      }
      .arc-ring.a1 {
        width: 160px;
        height: 160px;
        margin: -80px 0 0 -80px;
        border-top-color: rgba(220, 150, 30, 0.7);
        border-right-color: rgba(220, 150, 30, 0.15);
        border-bottom-color: rgba(255, 180, 50, 0.5);
        border-left-color: transparent;
        animation: spin-cw 3s linear infinite;
      }
      .arc-ring.a2 {
        width: 118px;
        height: 118px;
        margin: -59px 0 0 -59px;
        border-top-color: transparent;
        border-right-color: rgba(255, 100, 50, 0.75);
        border-bottom-color: transparent;
        border-left-color: rgba(255, 100, 50, 0.3);
        animation: spin-ccw 2.2s linear infinite;
      }
      .arc-ring.a3 {
        width: 78px;
        height: 78px;
        margin: -39px 0 0 -39px;
        border-top-color: rgba(255, 210, 60, 0.95);
        border-right-color: rgba(255, 210, 60, 0.2);
        border-bottom-color: rgba(255, 210, 60, 0.55);
        border-left-color: rgba(255, 210, 60, 0.2);
        animation: spin-cw 1.5s linear infinite;
      }
      .arc-center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 42px;
        height: 42px;
        margin: -21px 0 0 -21px;
        border-radius: 50%;
        background: radial-gradient(
          circle,
          rgba(220, 140, 30, 0.35),
          rgba(160, 80, 10, 0.15)
        );
        box-shadow:
          0 0 22px rgba(255, 170, 30, 0.55),
          inset 0 0 14px rgba(220, 140, 30, 0.3);
        animation: pulse-c 2s ease-in-out infinite;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
      }
      @keyframes pulse-c {
        0%,
        100% {
          box-shadow:
            0 0 22px rgba(255, 170, 30, 0.55),
            inset 0 0 14px rgba(220, 140, 30, 0.3);
        }
        50% {
          box-shadow:
            0 0 38px rgba(255, 190, 40, 0.85),
            inset 0 0 22px rgba(220, 150, 30, 0.5);
        }
      }

      .search-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: rgba(255, 210, 100, 0.95);
        margin-bottom: 8px;
      }
      .search-sub {
        font-size: 11px;
        color: rgba(200, 160, 90, 0.55);
        margin-bottom: 6px;
      }
      .search-config-tag {
        display: inline-block;
        padding: 4px 12px;
        background: rgba(180, 100, 20, 0.18);
        border: 1px solid rgba(220, 150, 40, 0.32);
        border-radius: 999px;
        font-size: 11px;
        color: rgba(255, 200, 100, 0.8);
        margin-bottom: 24px;
      }
      .search-dots span {
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 170, 40, 0.75);
        margin: 0 3px;
        animation: dot-pulse 1.4s ease-in-out infinite;
      }
      .search-dots span:nth-child(2) {
        animation-delay: 0.2s;
      }
      .search-dots span:nth-child(3) {
        animation-delay: 0.4s;
      }
      @keyframes dot-pulse {
        0%,
        80%,
        100% {
          transform: scale(0.6);
          opacity: 0.4;
        }
        40% {
          transform: scale(1.1);
          opacity: 1;
        }
      }

      .btn-cancel {
        margin-top: 28px;
        padding: 9px 28px;
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid rgba(150, 100, 220, 0.25);
        border-radius: 10px;
        color: rgba(175, 155, 220, 0.6);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
      }
      .btn-cancel:hover {
        background: rgba(200, 80, 80, 0.12);
        border-color: rgba(220, 80, 80, 0.35);
        color: rgba(255, 130, 130, 0.8);
      }

      /* ── toast ── */
      .toast {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(20px);
        background: rgba(18, 10, 42, 0.95);
        border: 1.5px solid rgba(180, 130, 255, 0.35);
        border-radius: 12px;
        padding: 12px 22px;
        font-size: 13px;
        color: rgba(210, 190, 255, 0.9);
        z-index: 300;
        opacity: 0;
        transition:
          opacity 0.2s,
          transform 0.2s;
        white-space: nowrap;
        pointer-events: none;
      }
      .toast.show {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
      }

      /* responsive */
      @media (max-width: 700px) {
        .banners-grid {
          grid-template-columns: 1fr;
        }
        .vs-col {
          padding-top: 0;
        }
        .vs-badge {
          display: none;
        }
      }

      .gr-chapter {
        display: none;
      }
      .gr-chapter.active {
        display: block;
      }

      /* Chapter headings */
      .gr-ch-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: #ffd700;
        letter-spacing: 2px;
        margin-bottom: 18px;
        padding-bottom: 10px;
        border-bottom: 1px solid rgba(220, 175, 60, 0.2);
      }
      .gr-section-title {
        font-size: 12px;
        font-weight: 700;
        color: rgba(200, 160, 60, 0.85);
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin: 20px 0 10px;
      }
      .gr-p {
        font-size: 13px;
        color: rgba(210, 200, 240, 0.78);
        line-height: 1.7;
        margin-bottom: 10px;
      }
      .gr-hl {
        color: #ffd700;
        font-weight: 700;
      }
      .gr-hl-purple {
        color: #c88cff;
        font-weight: 700;
      }
      .gr-hl-green {
        color: #66ee88;
        font-weight: 700;
      }

      /* Tip cards */
      .gr-tips {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 10px;
      }
      .gr-tip {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        background: rgba(220, 175, 60, 0.05);
        border: 1px solid rgba(220, 175, 60, 0.14);
        border-radius: 10px;
        padding: 11px 14px;
        font-size: 13px;
        color: rgba(210, 200, 240, 0.78);
        line-height: 1.6;
      }
      .gr-tip-ico {
        font-size: 18px;
        flex-shrink: 0;
        margin-top: 1px;
      }

      /* Arena diagram */
      .gr-arena {
        display: grid;
        grid-template-columns: 1fr 48px 1fr;
        gap: 10px;
        margin: 18px 0;
        align-items: center;
      }
      .gr-arena-side {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
      }
      .gr-arena-cell {
        aspect-ratio: 1;
        border-radius: 7px;
        border: 1px solid rgba(220, 175, 60, 0.22);
        background: rgba(220, 175, 60, 0.05);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        font-weight: 700;
        color: rgba(200, 160, 60, 0.65);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        letter-spacing: 0.3px;
      }
      .gr-arena-cell.front {
        border-color: rgba(100, 200, 100, 0.4);
        background: rgba(100, 200, 100, 0.07);
        color: rgba(100, 220, 110, 0.85);
      }
      .gr-arena-cell.mid {
        border-color: rgba(100, 150, 255, 0.35);
        background: rgba(100, 150, 255, 0.06);
        color: rgba(130, 170, 255, 0.8);
      }
      .gr-arena-cell.back {
        border-color: rgba(180, 100, 255, 0.3);
        background: rgba(180, 100, 255, 0.06);
        color: rgba(190, 130, 255, 0.75);
      }
      .gr-arena-vs {
        text-align: center;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 14px;
        font-weight: 900;
        color: rgba(200, 160, 60, 0.5);
      }
      .gr-arena-legend {
        display: flex;
        gap: 14px;
        justify-content: center;
        margin-top: 8px;
        font-size: 11px;
        flex-wrap: wrap;
      }
      .gr-arena-legend span {
        display: flex;
        align-items: center;
        gap: 5px;
        color: rgba(200, 180, 240, 0.6);
      }
      .gr-arena-legend .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
      }

      /* Hero table */
      .gr-hero-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 6px;
      }
      .gr-hero-card {
        display: flex;
        gap: 14px;
        background: rgba(220, 175, 60, 0.04);
        border: 1px solid rgba(220, 175, 60, 0.16);
        border-radius: 12px;
        padding: 12px 14px;
        align-items: flex-start;
      }
      .gr-hero-ico {
        font-size: 26px;
        text-align: center;
        flex-shrink: 0;
        width: 36px;
        padding-top: 2px;
      }
      .gr-hero-info {
        flex: 1;
        min-width: 0;
      }
      .gr-hero-top {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 4px;
      }
      .gr-hero-name {
        font-weight: 700;
        font-size: 13px;
        color: rgba(255, 240, 200, 0.9);
      }
      .gr-hero-role {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 999px;
        letter-spacing: 0.6px;
        text-transform: uppercase;
      }
      .role-tank {
        background: rgba(255, 165, 40, 0.13);
        border: 1px solid rgba(255, 165, 40, 0.35);
        color: #ffaa44;
      }
      .role-dps {
        background: rgba(255, 100, 80, 0.13);
        border: 1px solid rgba(255, 100, 80, 0.3);
        color: #ff9977;
      }
      .role-support {
        background: rgba(100, 200, 100, 0.15);
        border: 1px solid rgba(100, 200, 100, 0.35);
        color: #66ee88;
      }
      .gr-hero-abi {
        font-size: 12px;
        color: rgba(255, 210, 80, 0.85);
        margin-bottom: 3px;
        font-weight: 600;
      }
      .gr-hero-tip {
        font-size: 12px;
        color: rgba(200, 185, 230, 0.62);
        line-height: 1.5;
      }

      /* Strategy tips */
      .gr-strategy-tip {
        background: rgba(180, 130, 255, 0.06);
        border-left: 3px solid rgba(180, 130, 255, 0.4);
        border-radius: 0 8px 8px 0;
        padding: 10px 14px;
        font-size: 13px;
        color: rgba(210, 200, 240, 0.78);
        line-height: 1.6;
        margin-bottom: 8px;
      }
      .gr-warning {
        background: rgba(255, 180, 30, 0.07);
        border: 1px solid rgba(255, 180, 30, 0.25);
        border-radius: 10px;
        padding: 12px 16px;
        font-size: 13px;
        color: rgba(255, 210, 120, 0.85);
        line-height: 1.6;
        margin-top: 14px;
      }

      .hh-empty {
        padding: 24px 12px;
        text-align: center;
        color: rgba(255, 255, 255, 0.28);
        font-size: 13px;
      }
      /* ── search timer & queue ── */
      .search-timer {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 22px;
        font-weight: 700;
        color: rgba(255, 200, 80, 0.9);
        letter-spacing: 2px;
        margin: 18px 0 6px;
        text-shadow: 0 0 14px rgba(255, 160, 30, 0.5);
      }
      .search-queue {
        font-size: 11px;
        color: rgba(190, 140, 70, 0.55);
        margin-bottom: 20px;
      }
      /* ── found state ── */
      .search-overlay.found .arcane-rings {
        filter: drop-shadow(0 0 28px rgba(80, 255, 140, 0.65));
      }
      .search-overlay.found .arc-ring.a1 {
        border-top-color: rgba(80, 255, 140, 0.85);
        border-bottom-color: rgba(60, 200, 110, 0.6);
      }
      .search-overlay.found .arc-ring.a2 {
        border-right-color: rgba(80, 255, 140, 0.8);
        border-left-color: rgba(60, 200, 110, 0.4);
      }
      .search-overlay.found .arc-ring.a3 {
        border-top-color: rgba(255, 230, 60, 1);
        border-bottom-color: rgba(255, 190, 40, 0.7);
      }
      .search-found-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: 2px;
        color: rgba(80, 255, 140, 0.95);
        animation: flash-found 0.5s ease-in-out 3;
        margin-bottom: 8px;
      }
      @keyframes flash-found {
        0%,
        100% {
          opacity: 1;
        }
        50% {
          opacity: 0.3;
        }
      }
      /* ── payment states ── */
      .search-overlay.paying .arcane-rings {
        filter: drop-shadow(0 0 28px rgba(255, 180, 30, 0.7));
      }
      .search-overlay.paying .arc-ring.a1 {
        border-top-color: rgba(255, 200, 60, 0.9);
        border-bottom-color: rgba(200, 140, 20, 0.6);
      }
      .search-overlay.paying .arc-ring.a2 {
        border-right-color: rgba(255, 200, 60, 0.8);
        border-left-color: rgba(200, 140, 20, 0.4);
      }
      .search-overlay.paying .arc-ring.a3 {
        border-top-color: rgba(255, 255, 100, 1);
        border-bottom-color: rgba(220, 180, 30, 0.7);
      }
      #pay-status {
        display: none;
        margin: 10px 0 4px;
        font-size: 12px;
        color: rgba(255, 210, 90, 0.9);
        letter-spacing: 0.5px;
        min-height: 18px;
        text-align: center;
      }
      #pay-countdown {
        font-size: 11px;
        color: rgba(255, 160, 60, 0.85);
        letter-spacing: 0.4px;
        margin: 2px 0 6px;
        text-align: center;
        transition: color 0.3s;
      }
      #pay-countdown.urgent {
        color: rgba(255, 60, 60, 1);
        font-weight: bold;
        animation: pulse-urgent 0.6s ease-in-out infinite alternate;
      }
      @keyframes pulse-urgent {
        from {
          opacity: 0.7;
        }
        to {
          opacity: 1;
        }
      }
      #pay-steps {
        display: none;
        flex-direction: column;
        gap: 5px;
        margin: 8px 0 14px;
        width: 100%;
        max-width: 220px;
      }
      .pay-step {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: rgba(180, 140, 70, 0.6);
        transition: color 0.3s;
      }
      .pay-step.done {
        color: rgba(80, 220, 120, 0.9);
      }
      .pay-step.active {
        color: rgba(255, 210, 90, 1);
      }
      .pay-step.error {
        color: rgba(255, 90, 90, 0.9);
      }
      .pay-step-icon {
        font-size: 13px;
        width: 16px;
        text-align: center;
      }
      #pay-error {
        display: none;
        margin: 8px 0;
        font-size: 11px;
        color: rgba(255, 90, 90, 0.9);
        text-align: center;
        max-width: 220px;
      }
      #btn-send-wager {
        margin: 10px 0 6px;
        padding: 10px 28px;
        background: linear-gradient(
          135deg,
          rgba(255, 180, 30, 0.22),
          rgba(255, 130, 20, 0.14)
        );
        border: 1px solid rgba(255, 180, 30, 0.6);
        border-radius: 10px;
        color: rgba(255, 220, 100, 1);
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        letter-spacing: 0.5px;
        animation: flash-found 0.6s ease-in-out 3;
        transition:
          background 0.2s,
          transform 0.1s;
      }
      #btn-send-wager:hover {
        background: linear-gradient(
          135deg,
          rgba(255, 180, 30, 0.38),
          rgba(255, 130, 20, 0.22)
        );
        transform: scale(1.03);
      }
      #btn-send-wager:active {
        transform: scale(0.97);
      }
      #btn-retry-pay {
        display: none;
        margin-top: 6px;
        padding: 7px 22px;
        background: rgba(255, 180, 30, 0.15);
        border: 1px solid rgba(255, 180, 30, 0.45);
        border-radius: 8px;
        color: rgba(255, 210, 90, 0.9);
        font-size: 12px;
        cursor: pointer;
        letter-spacing: 0.5px;
      }
      #btn-retry-pay:hover {
        background: rgba(255, 180, 30, 0.28);
      }

      /* ══════════════════════════════
         VIEW SYSTEM + WIKI LAYOUT
      ══════════════════════════════ */
      .lv {
        display: none;
      }
      .lv.active {
        display: flex;
        flex-direction: column;
      }

      #view-home {
        align-items: center;
        min-height: 100vh;
        padding: 80px 24px 40px;
      }

      #view-grimoire {
        height: 100vh;
        padding-top: 58px;
        box-sizing: border-box;
        overflow: hidden;
      }

      .wiki-layout {
        display: flex;
        width: 100%;
        height: 100%;
        max-width: 1200px;
        margin: 0 auto;
      }

      .wiki-sidebar {
        width: 230px;
        min-width: 180px;
        flex-shrink: 0;
        border-right: 1px solid rgba(255, 255, 255, 0.07);
        overflow-y: auto;
        padding: 20px 0 32px;
      }
      .wiki-sidebar::-webkit-scrollbar {
        width: 3px;
      }
      .wiki-sidebar::-webkit-scrollbar-thumb {
        background: rgba(180, 130, 255, 0.25);
        border-radius: 2px;
      }

      .wiki-category {
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        color: rgba(255, 255, 255, 0.3);
        padding: 18px 20px 7px;
        pointer-events: none;
        user-select: none;
      }

      .wiki-item {
        display: block;
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        border-left: 3px solid transparent;
        color: rgba(190, 175, 230, 0.55);
        font-size: 13px;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-weight: 500;
        padding: 9px 18px;
        cursor: pointer;
        transition: all 0.14s;
        line-height: 1.4;
      }
      .wiki-item:hover {
        color: rgba(215, 205, 255, 0.85);
        background: rgba(255, 255, 255, 0.03);
      }
      .wiki-item.active {
        color: #c88cff;
        border-left-color: #c88cff;
        background: rgba(200, 130, 255, 0.08);
        font-weight: 600;
      }

      .wiki-search-wrap {
        padding: 8px 14px 4px;
      }
      .wiki-search-wrap input {
        width: 100%;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(180, 130, 255, 0.22);
        border-radius: 8px;
        padding: 7px 10px;
        color: rgba(255, 240, 200, 0.9);
        font-size: 12px;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        outline: none;
        transition: border-color 0.18s;
      }
      .wiki-search-wrap input:focus {
        border-color: rgba(180, 130, 255, 0.5);
      }
      .wiki-search-wrap input::placeholder {
        color: rgba(255, 255, 255, 0.25);
      }

      .wiki-content {
        flex: 1;
        overflow-y: auto;
        padding: 32px 44px 48px;
        min-width: 0;
      }
      .wiki-content::-webkit-scrollbar {
        width: 5px;
      }
      .wiki-content::-webkit-scrollbar-thumb {
        background: rgba(180, 130, 255, 0.25);
        border-radius: 3px;
      }

      /* Mobile wiki */
      @media (max-width: 700px) {
        #view-grimoire {
          height: auto;
          overflow: visible;
        }
        .wiki-layout {
          flex-direction: column;
        }
        .wiki-sidebar {
          width: 100%;
          border-right: none;
          border-bottom: 1px solid rgba(255, 255, 255, 0.07);
          overflow-x: auto;
          overflow-y: visible;
          display: flex;
          flex-wrap: wrap;
          gap: 2px;
          padding: 10px 12px;
          align-items: center;
        }
        .wiki-category {
          display: none;
        }
        .wiki-item {
          border-left: none;
          border-bottom: 2px solid transparent;
          padding: 6px 12px;
          font-size: 12px;
          white-space: nowrap;
        }
        .wiki-item.active {
          border-left-color: transparent;
          border-bottom-color: #c88cff;
          background: rgba(200, 130, 255, 0.1);
        }
        .wiki-content {
          padding: 20px 18px 32px;
        }
        .wiki-search-wrap {
          width: 100%;
        }
      }

      /* ══════════════════════════════
         FORMATION VIEW  (vertical / mobile-first)
      ══════════════════════════════ */
      #view-formation {
        height: 100vh;
        padding-top: 58px;
        box-sizing: border-box;
        overflow: hidden;
      }

      .fv-wrap {
        max-width: 520px;
        width: 100%;
        margin: 0 auto;
        height: 100%;
        display: flex;
        flex-direction: column;
        padding: 0 16px;
      }

      /* ── Hero browser frame (top ~58%) ── */
      .fv-hero-frame {
        flex: 0 0 58%;
        display: flex;
        flex-direction: column;
        min-height: 0;
        padding: 12px 0 8px;
        border-bottom: 1px solid rgba(140, 100, 255, 0.12);
      }

      .fv-filter-bar {
        display: flex;
        gap: 6px;
        align-items: center;
        flex-shrink: 0;
        margin-bottom: 10px;
      }
      .fv-search {
        flex: 1;
        min-width: 80px;
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid rgba(140, 100, 255, 0.22);
        border-radius: 8px;
        padding: 7px 10px;
        color: rgba(225, 215, 255, 0.88);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 12px;
        outline: none;
        transition: border-color 0.15s;
      }
      .fv-search:focus {
        border-color: rgba(190, 138, 255, 0.55);
      }
      .fv-search::placeholder {
        color: rgba(138, 118, 195, 0.32);
      }
      .fv-role-btn {
        padding: 6px 10px;
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid rgba(140, 100, 255, 0.22);
        border-radius: 7px;
        color: rgba(180, 160, 220, 0.6);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 11px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
      }
      .fv-role-btn.active {
        background: rgba(140, 100, 255, 0.18);
        border-color: rgba(170, 128, 255, 0.5);
        color: #c8aaff;
      }
      .fv-role-btn:hover:not(.active) {
        border-color: rgba(140, 100, 255, 0.38);
        background: rgba(140, 100, 255, 0.08);
      }

      .fv-hero-scroll {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
      }
      .fv-hero-scroll::-webkit-scrollbar {
        width: 4px;
      }
      .fv-hero-scroll::-webkit-scrollbar-track {
        background: transparent;
      }
      .fv-hero-scroll::-webkit-scrollbar-thumb {
        background: rgba(140, 100, 255, 0.3);
        border-radius: 4px;
      }

      #form-hero-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        padding: 2px 0 8px;
      }
      .form-hero-card {
        background: rgba(255, 255, 255, 0.04);
        border: 1.5px solid rgba(140, 100, 255, 0.18);
        border-radius: 10px;
        padding: 10px 6px 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.15s;
        position: relative;
        user-select: none;
      }
      .form-hero-card:hover:not(.fhc-disabled) {
        border-color: rgba(170, 128, 255, 0.65);
        background: rgba(140, 100, 255, 0.12);
        box-shadow: 0 0 14px rgba(140, 100, 255, 0.35);
      }

      /* Deck-editing mode: suppress hover glow and detail interactions */
      #form-hero-grid.fhc-editing-mode
        .form-hero-card:hover:not(.fhc-disabled) {
        transform: none;
        box-shadow: none;
        border-color: rgba(140, 100, 255, 0.18);
        background: rgba(255, 255, 255, 0.04);
      }
      /* ── Info button on hero card ── */
      .fhc-info-btn {
        position: absolute;
        top: 5px;
        left: 5px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(8, 5, 22, 0.72);
        border: 1px solid rgba(170, 140, 255, 0.6);
        color: rgba(210, 190, 255, 0.95);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 9px;
        font-weight: 700;
        font-style: normal;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.15s;
        z-index: 1;
        line-height: 1;
        -webkit-tap-highlight-color: transparent;
      }
      .fhc-info-btn:hover {
        background: rgba(140, 100, 255, 0.35);
        color: rgba(210, 190, 255, 0.95);
      }
      /* Hide info button in deck-editing mode */
      #form-hero-grid.fhc-editing-mode .fhc-info-btn {
        opacity: 0;
        pointer-events: none;
      }
      .form-hero-card.fhc-selected {
        border-color: rgba(80, 210, 110, 0.55);
        background: rgba(50, 180, 70, 0.1);
      }
      .form-hero-card.fhc-selected::after {
        content: "✓";
        position: absolute;
        top: 5px;
        right: 6px;
        width: 16px;
        height: 16px;
        border-radius: 50%;
        background: rgba(8, 20, 10, 0.78);
        border: 1.5px solid rgba(80, 210, 110, 0.7);
        font-size: 10px;
        color: #6eed88;
        font-weight: 700;
        line-height: 16px;
        text-align: center;
        display: block;
      }
      .form-hero-card.fhc-addable::after {
        content: "+";
        position: absolute;
        top: 3px;
        right: 6px;
        font-size: 17px;
        font-weight: 700;
        color: rgba(120, 200, 255, 0.85);
        line-height: 1;
      }
      .form-hero-card.fhc-disabled {
        opacity: 0.35;
        cursor: not-allowed;
      }
      .form-hc-portrait {
        width: 100%;
        height: 76px;
        border-radius: 8px;
        overflow: hidden;
        position: relative;
        background-color: rgba(100, 80, 160, 0.15);
        background-image: var(--portrait-url, none);
        background-size: cover;
        background-position: center 10%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 4px;
        flex-shrink: 0;
      }
      .form-hc-ico {
        font-size: 28px;
        line-height: 1;
        position: relative;
        z-index: 1;
      }
      .form-hc-name {
        font-size: 11px;
        font-weight: 600;
        color: rgba(220, 210, 240, 0.88);
        line-height: 1.3;
      }
      .form-hc-role {
        font-size: 10px;
        margin-top: 2px;
      }

      /* ── Deck slots area (bottom, position context for slide panel) ── */
      .fv-decks-area {
        flex: 1;
        position: relative;
        overflow: hidden;
        display: flex;
        flex-direction: column;
      }

      .fv-decks-frame {
        flex: 1;
        display: flex;
        gap: 10px;
        align-items: flex-start;
        padding: 12px 0 0;
      }

      .fv-deck-card {
        flex: 1;
        background: rgba(255, 255, 255, 0.03);
        border: 1.5px solid rgba(140, 100, 255, 0.2);
        border-radius: 14px;
        padding: 12px 8px 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.18s;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 5px;
        min-height: 100px;
        user-select: none;
        position: relative;
      }
      .fv-deck-card:hover {
        border-color: rgba(170, 128, 255, 0.45);
        background: rgba(140, 100, 255, 0.08);
        transform: translateY(-2px);
      }
      .fv-deck-card.fdc-active {
        border-color: rgba(170, 128, 255, 0.65);
        background: rgba(140, 100, 255, 0.14);
      }

      .fv-tab-star {
        position: absolute;
        top: 8px;
        right: 9px;
        font-size: 16px;
        line-height: 1;
        cursor: pointer;
        transition:
          color 0.2s,
          text-shadow 0.2s;
        color: rgba(140, 100, 255, 0.25);
        z-index: 1;
      }
      .fv-tab-star.starred {
        color: #ffd700;
        text-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
      }
      .fv-tab-star:hover {
        color: rgba(255, 215, 0, 0.6);
      }
      .fv-tab-name {
        font-size: 12px;
        font-weight: 700;
        color: rgba(210, 200, 235, 0.85);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
      }
      .fv-tab-count {
        font-size: 10px;
        color: rgba(140, 100, 255, 0.55);
      }
      .fv-tab-icons {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        flex: 1;
      }
      /* Card stack visual (Rumble-style deck icon) */
      .fv-deck-stack {
        position: relative;
        width: 36px;
        height: 48px;
      }
      .fds-card {
        position: absolute;
        inset: 0;
        border-radius: 6px;
        border: 1.5px solid rgba(140, 100, 255, 0.3);
        background: rgba(100, 80, 160, 0.13);
        transition: border-color 0.2s, background 0.2s;
      }
      .fds-card.c3 { transform: rotate(-8deg) translate(-4px, 6px); opacity: 0.4; }
      .fds-card.c2 { transform: rotate(-3deg) translate(-2px, 3px); opacity: 0.7; }
      .fds-card.c1 { transform: rotate(2deg); }
      .fv-deck-stack.full .fds-card {
        border-color: rgba(80, 210, 110, 0.5);
        background: rgba(50, 180, 70, 0.13);
      }
      .fdc-active .fv-deck-stack .fds-card {
        border-color: rgba(170, 128, 255, 0.65);
        background: rgba(140, 100, 255, 0.22);
      }
      .fv-deck-card:hover .fds-card {
        border-color: rgba(170, 128, 255, 0.5);
        background: rgba(140, 100, 255, 0.18);
      }
      .fv-tab-empty {
        font-size: 9px;
        color: rgba(140, 100, 255, 0.3);
        font-style: italic;
      }

      /* ── Slide-up editing panel ── */
      .fv-slide-panel {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        background: rgba(8, 4, 24, 0.98);
        border: 1.5px solid rgba(140, 100, 255, 0.28);
        border-radius: 16px 16px 0 0;
        display: flex;
        flex-direction: column;
        transform: translateY(110%);
        transition: transform 0.32s cubic-bezier(0.34, 1.06, 0.64, 1);
        z-index: 10;
        padding: 14px 14px 14px;
        box-shadow: 0 -8px 32px rgba(100, 60, 220, 0.2);
      }
      .fv-slide-panel.open {
        transform: translateY(0);
      }

      .fv-slide-header {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 10px;
        flex-shrink: 0;
      }
      .fv-slide-name {
        flex: 1;
        background: rgba(255, 255, 255, 0.06);
        border: 1.5px solid rgba(140, 100, 255, 0.28);
        border-radius: 8px;
        padding: 8px 12px;
        color: rgba(225, 215, 255, 0.9);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 13px;
        font-weight: 600;
        outline: none;
        transition: border-color 0.15s;
      }
      .fv-slide-name:focus {
        border-color: rgba(190, 138, 255, 0.6);
      }
      .fv-slide-name::placeholder {
        color: rgba(138, 118, 195, 0.35);
      }

      .fv-done-btn {
        padding: 8px 20px;
        background: linear-gradient(135deg, #1a8a2e, #15701f);
        border: 1.5px solid rgba(40, 200, 70, 0.45);
        border-radius: 8px;
        color: #fff;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
        letter-spacing: 0.5px;
      }
      .fv-done-btn:hover {
        background: linear-gradient(135deg, #22a838, #1a8a2e);
        box-shadow: 0 4px 16px rgba(30, 180, 60, 0.35);
      }
      .fv-done-btn:disabled {
        opacity: 0.42;
        cursor: default;
        box-shadow: none;
      }

      .fv-slide-label {
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        color: rgba(170, 138, 255, 0.5);
        font-weight: 700;
        margin-bottom: 8px;
        flex-shrink: 0;
      }

      .fv-slide-slots {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        gap: 6px;
        flex: 1;
        min-height: 0;
      }

      .fv-slot-cell {
        min-height: 0;
        background: rgba(255, 255, 255, 0.03);
        border: 1.5px dashed rgba(140, 100, 255, 0.2);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        cursor: default;
        position: relative;
        transition: all 0.15s;
        user-select: none;
      }
      .fv-slot-cell.filled {
        border-style: solid;
        border-color: rgba(170, 128, 255, 0.45);
        background: rgba(140, 100, 255, 0.12);
        cursor: pointer;
      }
      .fv-slot-cell.filled:hover {
        border-color: rgba(255, 80, 80, 0.55);
        background: rgba(200, 40, 40, 0.09);
      }
      .fv-slot-cell.filled:hover::after {
        content: "✕";
        position: absolute;
        top: 2px;
        right: 4px;
        font-size: 8px;
        color: rgba(255, 100, 100, 0.8);
      }
      .fv-slot-cell.has-portrait {
        background-image: var(--portrait-url);
        background-size: cover;
        background-position: center 10%;
        font-size: 0;
        transition: border-color 0.15s;
      }
      .fv-slot-cell.has-portrait:hover {
        background-image: var(--portrait-url);
        background-size: cover;
        background-position: center 10%;
      }
      .fv-slot-empty-hint {
        color: rgba(140, 100, 255, 0.2);
        font-size: 14px;
      }

      @media (max-width: 480px) {
        .fv-wrap {
          padding: 0 10px;
        }
        .fv-hero-frame {
          flex: 0 0 52%;
        }
        .fv-filter-bar {
          gap: 4px;
        }
        .fv-role-btn {
          padding: 5px 7px;
          font-size: 10px;
        }
        #form-hero-grid {
          gap: 6px;
        }
        .fv-slide-slots {
          gap: 5px;
        }
        .form-hc-portrait {
          height: 58px;
        }
        .fv-deck-stack {
          width: 28px;
          height: 38px;
        }
        .fv-deck-card {
          min-height: 80px;
          padding: 10px 6px 10px;
        }
      }

      /* ═══════════════════════════════════════════════
         LOBBY LAYOUT REDESIGN — RESPONSIVE (no mobile.css)
         ═══════════════════════════════════════════════ */

      /* TopNav: right-align items only, no logo space */
      .topnav {
        justify-content: flex-end;
      }
      .nav-center {
        display: none !important;
      }
      .nav-logo {
        display: none !important;
      }

      /* Lobby wrap: fixed between topnav (58px) and bottom nav (60px) */
      .lobby-wrap {
        position: fixed !important;
        top: 58px;
        bottom: 60px;
        left: 0;
        right: 0;
        overflow: hidden;
        min-height: unset !important;
        display: block !important;
      }

      /* Each view fills the lobby-wrap */
      .lv {
        width: 100%;
        height: 100%;
      }
      .lv.active {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;
      }

      /* Scrollable, centered column container */
      .view-scroll {
        flex: 1;
        overflow-y: auto;
        overflow-x: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .view-scroll::-webkit-scrollbar {
        width: 4px;
      }
      .view-scroll::-webkit-scrollbar-track {
        background: transparent;
      }
      .view-scroll::-webkit-scrollbar-thumb {
        background: rgba(180, 130, 255, 0.22);
        border-radius: 4px;
      }

      /* Centered column within scroll */
      .view-col {
        width: 100%;
        max-width: 420px;
        padding: 16px 16px 24px;
        display: flex;
        flex-direction: column;
        align-items: stretch;
      }

      /* ── Bottom navigation (always visible) ── */
      .mobile-bottom-tabs {
        display: flex !important;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: rgba(6, 3, 20, 0.97);
        border-top: 1px solid rgba(180, 130, 255, 0.14);
        backdrop-filter: blur(18px);
        z-index: 100;
        align-items: stretch;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      .mbt-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        background: none;
        border: none;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
        padding: 4px 0;
        color: rgba(190, 170, 240, 0.45);
        transition: color 0.15s;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
      }
      .mbt-tab:hover {
        color: rgba(210, 190, 255, 0.7);
      }
      .mbt-tab.active {
        color: #ffd700;
      }
      .mbt-ico {
        font-size: 18px;
        line-height: 1;
      }
      .mbt-tab.active .mbt-ico {
        filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.55));
      }
      .mbt-lbl {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }

      /* ── Duel view title ── */
      .duel-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 3px;
        text-transform: uppercase;
        text-align: center;
        color: rgba(200, 180, 255, 0.5);
        margin-bottom: 14px;
        padding-top: 4px;
      }

      /* ── Cards: always expanded, full-width, no hover lift ── */
      .banner-expand {
        max-height: none !important;
        opacity: 1 !important;
        transition: none !important;
      }
      .banner {
        width: 100%;
        margin-bottom: 14px;
        cursor: default;
      }
      .banner-ai:hover,
      .banner-pvp:hover {
        transform: none !important;
      }

      /* ── Banner title row with info icon ── */
      .banner-title-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 6px;
        flex-wrap: wrap;
      }
      .banner-title-row .banner-title {
        margin-bottom: 0;
      }
      /* Override align-self: flex-start so badge centers in the row */
      .banner-title-row .banner-type-badge {
        align-self: center;
        margin-bottom: 0;
      }
      .banner-title-row .info-trigger {
        flex-shrink: 0;
      }

      /* ── Info icon tooltip trigger ── */
      .info-trigger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        font-size: 11px;
        font-style: normal;
        cursor: pointer;
        flex-shrink: 0;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        background: rgba(140, 100, 255, 0.18);
        border: 1px solid rgba(140, 100, 255, 0.38);
        color: rgba(180, 155, 255, 0.75);
        transition: all 0.15s;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-weight: 700;
      }
      .info-trigger:hover,
      .info-trigger.tip-active {
        background: rgba(140, 100, 255, 0.35);
        color: rgba(210, 190, 255, 0.95);
      }
      .banner-pvp .info-trigger {
        background: rgba(200, 140, 30, 0.18);
        border-color: rgba(220, 160, 40, 0.38);
        color: rgba(255, 200, 100, 0.75);
      }
      .banner-pvp .info-trigger:hover,
      .banner-pvp .info-trigger.tip-active {
        background: rgba(200, 140, 30, 0.35);
        color: rgba(255, 220, 130, 0.95);
      }

      /* ── Sphere rings: scaled down slightly ── */
      .banner .sph-ring.r1 {
        width: 132px;
        height: 132px;
        margin: -66px 0 0 -66px;
      }
      .banner .sph-ring.r2 {
        width: 98px;
        height: 98px;
        margin: -49px 0 0 -49px;
      }
      .banner .sph-ring.r3 {
        width: 65px;
        height: 65px;
        margin: -32px 0 0 -32px;
      }
      .banner .sph-core {
        font-size: 30px;
      }

      /* ── Description tooltip popup ── */
      #desc-tooltip {
        position: fixed;
        z-index: 9999;
        background: rgba(10, 6, 28, 0.97);
        border: 1px solid rgba(160, 120, 255, 0.3);
        border-radius: 12px;
        padding: 12px 14px 14px;
        width: 260px;
        max-width: calc(100vw - 32px);
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.15s ease;
        box-shadow:
          0 12px 36px rgba(0, 0, 0, 0.65),
          0 0 20px rgba(130, 80, 255, 0.12);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
      }
      #desc-tooltip.visible {
        opacity: 1;
      }

      .tip-title {
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.6px;
        color: rgba(220, 205, 255, 0.95);
        margin-bottom: 4px;
      }
      .tip-body {
        font-size: 11px;
        line-height: 1.6;
        color: rgba(175, 158, 230, 0.72);
        margin-bottom: 10px;
      }
      .tip-section {
        font-size: 10px;
        font-weight: 700;
        letter-spacing: 0.5px;
        color: rgba(200, 175, 255, 0.55);
        text-transform: uppercase;
        margin-bottom: 5px;
        padding-bottom: 4px;
        border-bottom: 1px solid rgba(160, 120, 255, 0.14);
      }
      .tip-section + .tip-section,
      .tip-rows + .tip-section {
        margin-top: 9px;
      }
      .tip-rows {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      .tip-row {
        display: flex;
        align-items: baseline;
        gap: 8px;
        font-size: 11px;
        line-height: 1.5;
        color: rgba(185, 168, 240, 0.8);
      }
      .tip-key {
        font-size: 10px;
        font-weight: 800;
        padding: 1px 6px;
        border-radius: 5px;
        background: rgba(140, 100, 255, 0.15);
        border: 1px solid rgba(140, 100, 255, 0.25);
        color: rgba(200, 178, 255, 0.9);
        flex-shrink: 0;
        letter-spacing: 0.3px;
      }
      #desc-tooltip[data-theme="pvp"] .tip-key {
        background: rgba(220, 150, 30, 0.15);
        border-color: rgba(220, 150, 30, 0.28);
        color: rgba(255, 205, 100, 0.9);
      }
      #desc-tooltip[data-theme="pvp"] .tip-section {
        border-bottom-color: rgba(220, 150, 30, 0.14);
        color: rgba(220, 185, 100, 0.5);
      }
      #desc-tooltip[data-theme="pvp"] {
        border-color: rgba(220, 150, 30, 0.28);
      }

      /* ── Override old view heights for new fixed layout ── */
      #view-home {
        min-height: unset !important;
        padding: 0 !important;
        align-items: stretch !important;
      }
      #view-grimoire,
      #view-formation {
        height: 100% !important;
        padding-top: 0 !important;
        box-sizing: border-box !important;
      }
      #view-settings {
        height: 100% !important;
        padding-top: 0 !important;
        overflow-y: auto !important;
      }

      /* ═══════════════════════════════════════
         HF SELECT — Custom floating dropdown
         ═══════════════════════════════════════ */

      .hf-select {
        display: inline-block;
      }

      .hf-sel-trigger {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: 8px;
        border: 1.5px solid;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        transition: all 0.15s;
        white-space: nowrap;
        background: rgba(255, 255, 255, 0.04);
        -webkit-tap-highlight-color: transparent;
        min-width: 62px;
      }
      /* AI card theme */
      .banner-ai .hf-sel-trigger {
        border-color: rgba(140, 100, 255, 0.35);
        color: rgba(200, 180, 255, 0.88);
      }
      .banner-ai .hf-sel-trigger:hover,
      .banner-ai .hf-select.sel-open .hf-sel-trigger {
        border-color: rgba(165, 115, 255, 0.65);
        color: rgba(225, 210, 255, 0.96);
        background: rgba(110, 70, 255, 0.15);
        box-shadow: 0 0 10px rgba(110, 70, 255, 0.2);
      }
      /* PvP card theme */
      .banner-pvp .hf-sel-trigger {
        border-color: rgba(220, 150, 30, 0.35);
        color: rgba(255, 200, 100, 0.88);
      }
      .banner-pvp .hf-sel-trigger:hover,
      .banner-pvp .hf-select.sel-open .hf-sel-trigger {
        border-color: rgba(235, 165, 40, 0.65);
        color: rgba(255, 220, 120, 0.96);
        background: rgba(200, 130, 28, 0.15);
        box-shadow: 0 0 10px rgba(200, 130, 28, 0.18);
      }
      .hf-sel-value {
        flex: 1;
      }
      .hf-sel-chevron {
        font-size: 10px;
        opacity: 0.6;
        transition: transform 0.2s;
        flex-shrink: 0;
      }
      .hf-select.sel-open .hf-sel-chevron {
        transform: rotate(180deg);
      }

      /* Floating dropdown panel — body-level, position:fixed */
      #hf-float-dd,
      .hf-float-dd {
        position: fixed;
        z-index: 9998;
        display: none;
        flex-direction: column;
        background: rgba(10, 6, 28, 0.98);
        border: 1.5px solid rgba(140, 100, 255, 0.32);
        border-radius: 10px;
        padding: 4px;
        box-shadow:
          0 10px 32px rgba(0, 0, 0, 0.65),
          0 0 20px rgba(130, 80, 255, 0.12);
        backdrop-filter: blur(12px);
      }
      /* React inline-dropdown variant (position:absolute inside hf-select) */
      .hf-select .hf-float-dd {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
      }
      #hf-float-dd.dd-open,
      .hf-float-dd.dd-open {
        display: flex;
        animation: hf-dd-in 0.14s ease both;
      }
      #hf-float-dd[data-theme="pvp"] {
        border-color: rgba(220, 150, 30, 0.32);
        box-shadow:
          0 10px 32px rgba(0, 0, 0, 0.65),
          0 0 20px rgba(200, 130, 28, 0.12);
      }
      @keyframes hf-dd-in {
        from {
          opacity: 0;
          transform: translateY(-4px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      /* Dropdown option items */
      .hf-sel-opt {
        width: 100%;
        text-align: left;
        background: none;
        border: none;
        border-radius: 7px;
        padding: 10px 14px;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 12.5px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.12s;
        color: rgba(190, 175, 240, 0.65);
        white-space: nowrap;
        -webkit-tap-highlight-color: transparent;
      }
      .hf-sel-opt:hover {
        background: rgba(140, 100, 255, 0.12);
        color: rgba(215, 200, 255, 0.92);
      }
      .hf-sel-opt.active {
        color: #ffd700;
        background: rgba(255, 215, 0, 0.08);
        font-weight: 700;
      }
      #hf-float-dd[data-theme="pvp"] .hf-sel-opt:hover {
        background: rgba(200, 130, 28, 0.12);
        color: rgba(255, 215, 120, 0.92);
      }
      /* PvP banner golden theme for React inline dropdown */
      .banner-pvp .hf-float-dd {
        border-color: rgba(220, 150, 30, 0.45);
        box-shadow:
          0 10px 32px rgba(0, 0, 0, 0.65),
          0 0 20px rgba(200, 130, 28, 0.18);
      }
      .banner-pvp .hf-float-dd .hf-sel-opt {
        color: rgba(255, 200, 100, 0.7);
      }
      .banner-pvp .hf-float-dd .hf-sel-opt:hover {
        background: rgba(200, 130, 28, 0.12);
        color: rgba(255, 215, 120, 0.95);
      }
      .banner-pvp .hf-float-dd .hf-sel-opt.active {
        color: #ffb830;
        background: rgba(255, 180, 30, 0.1);
      }

      /* ══════════════════════════════════════════
         GRIMOIRE — MOBILE-FIRST RESPONSIVE LAYOUT
         ══════════════════════════════════════════ */

      /* Mobile chapter bar (hidden on desktop) */
      .gr-mobile-bar {
        display: none;
        flex-shrink: 0;
        padding: 10px 12px;
        background: rgba(6, 3, 20, 0.92);
        border-bottom: 1px solid rgba(220, 175, 60, 0.15);
      }
      .gr-topics-btn {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: rgba(220, 175, 60, 0.07);
        border: 1.5px solid rgba(220, 175, 60, 0.22);
        border-radius: 10px;
        padding: 9px 14px;
        color: rgba(255, 215, 100, 0.9);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
      }
      .gr-topics-btn:active {
        background: rgba(220, 175, 60, 0.13);
      }
      .gr-topics-btn-left {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
      }
      .gr-topics-btn-label {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .gr-topics-chevron {
        font-size: 11px;
        opacity: 0.6;
        flex-shrink: 0;
        transition: transform 0.2s;
      }

      /* Full-screen topics overlay (position: fixed — bypasses lobby-wrap overflow) */
      .gr-topics-overlay {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 500;
        background: rgba(4, 2, 14, 0.72);
        backdrop-filter: blur(4px);
        align-items: flex-end;
      }
      .gr-topics-overlay.open {
        display: flex;
      }

      /* Bottom-sheet panel */
      .gr-topics-panel {
        width: 100%;
        background: rgba(8, 5, 22, 0.99);
        border-top: 1.5px solid rgba(220, 175, 60, 0.2);
        border-radius: 20px 20px 0 0;
        max-height: 72vh;
        overflow-y: auto;
        animation: gr-panel-up 0.26s cubic-bezier(0.22, 0.68, 0, 1.12) both;
      }
      @keyframes gr-panel-up {
        from {
          transform: translateY(100%);
          opacity: 0;
        }
        to {
          transform: translateY(0);
          opacity: 1;
        }
      }
      .gr-topics-panel::-webkit-scrollbar {
        width: 3px;
      }
      .gr-topics-panel::-webkit-scrollbar-thumb {
        background: rgba(220, 175, 60, 0.2);
        border-radius: 3px;
      }

      /* Panel header */
      .gr-tp-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px 20px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.07);
        position: sticky;
        top: 0;
        background: rgba(8, 5, 22, 0.99);
        z-index: 1;
      }
      .gr-tp-title {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        color: rgba(255, 215, 100, 0.85);
      }
      .gr-tp-close {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50%;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        color: rgba(200, 185, 255, 0.7);
        font-size: 13px;
        -webkit-tap-highlight-color: transparent;
        transition: background 0.15s;
      }
      .gr-tp-close:hover {
        background: rgba(255, 80, 80, 0.18);
        color: #ff8888;
      }

      /* Overlay group headers */
      .gr-tp-group {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.8px;
        color: rgba(255, 255, 255, 0.28);
        padding: 14px 20px 5px;
        pointer-events: none;
        user-select: none;
      }

      /* Overlay chapter items */
      .gr-tp-item {
        display: flex;
        align-items: center;
        width: 100%;
        background: none;
        border: none;
        border-left: 3px solid transparent;
        color: rgba(200, 185, 240, 0.62);
        font-size: 14px;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-weight: 500;
        padding: 13px 20px;
        cursor: pointer;
        text-align: left;
        -webkit-tap-highlight-color: transparent;
        transition: all 0.12s;
      }
      .gr-tp-item:hover,
      .gr-tp-item:active {
        background: rgba(255, 255, 255, 0.04);
      }
      .gr-tp-item.active {
        color: #ffd700;
        border-left-color: rgba(255, 215, 0, 0.55);
        background: rgba(255, 215, 0, 0.05);
        font-weight: 600;
      }

      /* Desktop: sidebar visible, mobile bar hidden */
      @media (min-width: 641px) {
        .gr-mobile-bar {
          display: none !important;
        }
        .gr-topics-overlay {
          display: none !important;
        }
      }

      /* Mobile: sidebar hidden, mobile bar shown */
      @media (max-width: 640px) {
        .gr-mobile-bar {
          display: flex;
          flex-direction: column;
        }
        #view-grimoire .wiki-sidebar {
          display: none !important;
        }
        #view-grimoire .wiki-layout {
          flex-direction: column;
          overflow: hidden;
        }
        #view-grimoire .wiki-content {
          padding: 18px 14px 32px;
        }

        /* Arena: horizontal scroll when narrow */
        .gr-arena-wrap {
          overflow-x: auto;
          padding-bottom: 6px;
          -webkit-overflow-scrolling: touch;
          margin: 0 -4px;
          padding-left: 4px;
          padding-right: 4px;
        }
        .gr-arena {
          min-width: 290px;
          margin: 10px 0;
        }
      }

      /* ── Nav right: shrink gracefully on narrow screens ── */
      @media (max-width: 430px) {
        .hive-bal {
          padding: 5px 10px;
          font-size: 11.5px;
          gap: 5px;
        }
        .nav-user-badge {
          padding: 3px 8px 3px 4px;
          font-size: 11.5px;
          gap: 5px;
        }
        .nav-avatar {
          width: 22px;
          height: 22px;
        }
        .btn-exit {
          padding: 5px 11px;
          font-size: 11.5px;
        }
        .nav-right {
          gap: 5px;
        }
      }
      @media (max-width: 330px) {
        .hive-bal {
          padding: 4px 8px;
          font-size: 10px;
          gap: 4px;
        }
        .nav-user-badge {
          padding: 3px 6px 3px 4px;
          font-size: 10px;
          gap: 4px;
        }
        .nav-avatar {
          width: 20px;
          height: 20px;
        }
        .btn-exit {
          padding: 4px 8px;
          font-size: 10px;
        }
        .nav-right {
          gap: 4px;
        }
      }

      /* ══════════════════════════════
         HERO DETAIL PANELS
      ══════════════════════════════ */

      /* Shared backdrop */
      .hf-detail-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 800;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
      }
      .hf-detail-backdrop.hf-open {
        opacity: 1;
        pointer-events: auto;
      }

      /* Desktop right-side drawer */
      .hf-hero-drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: 340px;
        background: rgba(8, 4, 24, 0.99);
        border-left: 1.5px solid rgba(140, 100, 255, 0.3);
        box-shadow: -12px 0 48px rgba(0, 0, 0, 0.65);
        z-index: 801;
        display: flex;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform 0.25s cubic-bezier(0.34, 1.06, 0.64, 1);
        overflow: hidden;
      }
      .hf-hero-drawer.hf-open {
        transform: translateX(0);
      }

      /* On mobile the drawer is never shown — bottom sheet takes over */
      @media (max-width: 640px) {
        .hf-hero-drawer {
          display: none !important;
        }
      }

      /* Mobile bottom sheet */
      .hf-hero-sheet {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 65vh;
        background: rgba(8, 4, 24, 0.99);
        border-top: 1.5px solid rgba(140, 100, 255, 0.3);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.65);
        z-index: 801;
        display: flex;
        flex-direction: column;
        transform: translateY(100%);
        transition: transform 0.28s ease;
        overflow: hidden;
        padding-bottom: env(safe-area-inset-bottom, 0px);
      }
      .hf-hero-sheet.hf-open {
        transform: translateY(0);
      }
      .hf-sheet-handle {
        width: 36px;
        height: 4px;
        background: rgba(140, 100, 255, 0.3);
        border-radius: 2px;
        margin: 10px auto 0;
        flex-shrink: 0;
      }

      /* On desktop the sheet is never shown — drawer takes over */
      @media (min-width: 641px) {
        .hf-hero-sheet {
          display: none !important;
        }
      }

      /* ── Shared inner content (used by both drawer and sheet) ── */
      .hf-detail-scroll {
        flex: 1;
        overflow-y: auto;
        padding: 18px 20px 24px;
      }
      .hf-detail-scroll::-webkit-scrollbar {
        width: 4px;
      }
      .hf-detail-scroll::-webkit-scrollbar-track {
        background: transparent;
      }
      .hf-detail-scroll::-webkit-scrollbar-thumb {
        background: rgba(140, 100, 255, 0.3);
        border-radius: 4px;
      }

      /* Close button row */
      .hf-detail-close-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px 8px;
        flex-shrink: 0;
        border-bottom: 1px solid rgba(140, 100, 255, 0.1);
      }
      .hf-detail-close-btn {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.1);
        color: rgba(200, 190, 240, 0.7);
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.15s;
        -webkit-tap-highlight-color: transparent;
      }
      .hf-detail-close-btn:hover {
        background: rgba(140, 100, 255, 0.18);
        color: rgba(220, 210, 255, 0.95);
      }

      /* Hero header (icon + name) */
      .hf-detail-hero-header {
        display: flex;
        align-items: center;
        gap: 12px;
      }
      .hf-detail-ico {
        font-size: 36px;
        line-height: 1;
        flex-shrink: 0;
      }
      .hf-detail-hero-name {
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 16px;
        font-weight: 700;
        color: rgba(240, 230, 255, 0.95);
        letter-spacing: 0.5px;
      }
      .hf-detail-role-wrap {
        margin-top: 14px;
      }

      /* Skill section */
      .hf-detail-section-label {
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: rgba(140, 100, 255, 0.6);
        margin-bottom: 6px;
        margin-top: 16px;
      }
      .hf-detail-skill-name {
        font-size: 13px;
        font-weight: 700;
        color: rgba(255, 210, 80, 0.9);
        margin-bottom: 4px;
      }
      .hf-detail-skill-desc {
        font-size: 12px;
        color: rgba(195, 180, 235, 0.65);
        line-height: 1.55;
      }

      /* Stats 2x2 grid */
      .hf-detail-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        margin-top: 4px;
      }
      .hf-detail-stat {
        background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(140, 100, 255, 0.14);
        border-radius: 8px;
        padding: 8px 10px;
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .hf-stat-label {
        font-size: 9px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: rgba(140, 100, 255, 0.55);
      }
      .hf-stat-value {
        font-size: 15px;
        font-weight: 700;
        color: rgba(230, 220, 255, 0.92);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
      }

      /* Level 2 expand button */
      .hf-detail-l2-btn {
        width: 100%;
        margin-top: 16px;
        padding: 8px 14px;
        border-radius: 8px;
        background: rgba(140, 100, 255, 0.08);
        border: 1px solid rgba(140, 100, 255, 0.22);
        color: rgba(180, 155, 255, 0.8);
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 11px;
        font-weight: 700;
        cursor: pointer;
        text-align: left;
        transition: all 0.15s;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .hf-detail-l2-btn:hover {
        background: rgba(140, 100, 255, 0.15);
        border-color: rgba(140, 100, 255, 0.4);
      }
      .hf-l2-chevron {
        font-size: 10px;
        transition: transform 0.2s ease;
      }
      .hf-l2-chevron.expanded {
        transform: rotate(180deg);
      }

      /* Level 2 stats table */
      .hf-detail-l2 {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
      }
      .hf-detail-l2.expanded {
        max-height: 400px;
      }
      .hf-detail-l2-table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
        font-family:
          Inter,
          Segoe UI,
          Arial,
          sans-serif;
        font-size: 11px;
      }
      .hf-detail-l2-table th {
        text-align: left;
        padding: 4px 6px;
        color: rgba(140, 100, 255, 0.6);
        font-size: 9px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        border-bottom: 1px solid rgba(140, 100, 255, 0.14);
      }
      .hf-detail-l2-table td {
        padding: 5px 6px;
        color: rgba(210, 200, 240, 0.8);
        border-bottom: 1px solid rgba(255, 255, 255, 0.04);
      }
      .hf-detail-l2-table tr:last-child td {
        border-bottom: none;
      }
      .hf-detail-l2-table td:first-child {
        color: rgba(140, 100, 255, 0.7);
        font-weight: 700;
      }