:root {
        --accent: #f57e20;
        --accent-dim: #F5AA71;
        --accent-glow: #f57e208c;
        --accent-dark: #6b3510;
        --text-highlight: #864411;
        --map-hover: #311906;
        --dark: #9eb7e1;
        --dark2: #d5deea;
        --dark3: #7c9dcf;
        --mid: #6b8dc4;
        --text: #1c1008;
        --text-dim: #3d2410;
        --black: #16161d;
        --greytext: #979797;
        --line: #F5A020;
        --line-w: 3px;
        --buttonbg: #060e1ab3;
      }

      /* --- CUSTOM STAR3000 FONTS --- */
      @font-face {
        font-family: 'Star3000';
        src: url('Fonts/Star3000.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-Small';
        src: url('Fonts/Star3000 Small.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-Large';
        src: url('Fonts/Star3000 Large.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-ExtraLarge';
        src: url('Fonts/Star3000 Extra Large.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-Heavy';
        src: url('Fonts/Star3000 Heavy.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-LargeHeavy';
        src: url('Fonts/Star3000 Large Heavy.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-SmallHeavy';
        src: url('Fonts/Star3000 Small Heavy.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-Extended';
        src: url('Fonts/Star3000 Extended.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-ExtendedHeavy';
        src: url('Fonts/Star3000 Extended Heavy.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-Outline';
        src: url('Fonts/Star3000 Outline.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-LargeOutline';
        src: url('Fonts/Star3000 Large Outline.ttf') format('truetype');
      }

      @font-face {
        font-family: 'Star3000-SmallOutline';
        src: url('Fonts/Star3000 Small Outline.ttf') format('truetype');
      }
      
      @font-face {
        font-family: 'JP-CRT';
        src: url('Fonts/BestTen-CRT.otf') format('truetype');
      }

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

      /* ─── LOADING ─────────────────────────────────── */
      #loading {
        position: fixed;
        inset: 0;
        background: var(--dark);
        z-index: 9999;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        transition: opacity .8s
      }

      #loading .load-logo {
        font-family: 'Star3000-SmallHeavy', serif;
        font-size: 3.8rem;
        letter-spacing: .5em;
        color: var(--accent);
        text-transform: uppercase;
        margin-bottom: 2rem;
        animation: pulsate 1.5s ease-in-out infinite
      }

      #loading .load-bar-wrap {
        width: 280px;
        height: 2px;
        background: rgba(255, 255, 255, .08);
        transition: opacity .4s
      }

      #loading .load-bar {
        height: 100%;
        background: var(--accent);
        width: 0%;
        transition: width .05s
      }

      #loading .load-pct {
        margin-top: .6rem;
        font-size: .75rem;
        letter-spacing: .3em;
        color: var(--accent);
        font-family: 'Star3000-Small', serif;
        transition: opacity .4s
      }

      #enter-btn {
        width: 400px;
        margin-top: 0;
        padding: 10px 40px;
        background: var(--buttonbg);
        border: var(--line-w) solid var(--accent-dim);
        color: var(--accent);
        font-family: 'Star3000', serif;
        font-size: 1.1rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        cursor: pointer;
        position: absolute;
        opacity: 0;
        transition: opacity .6s, background .3s, color .3s, box-shadow .3s;
        pointer-events: none
      }

      #enter-btn:hover {
        background: var(--accent);
        color: var(--text-highlight);
        box-shadow: 0 0 18px var(--accent-glow), 0 0 40px var(--accent-glow)
      }

      #enter-btn.visible {
        opacity: 1;
        pointer-events: all
      }

      @keyframes pulsate {

        0%,
        100% {
          opacity: .6
        }

        50% {
          opacity: 1
        }
      }

      /* ─── SCROLL INDICATOR ────────────────────────── */
      .scroll-dot {
        width: 1px;
        height: 60px;
        background: linear-gradient(to bottom, transparent, var(--accent), transparent);
        display: block;
        margin: 0 auto;
        animation: scrollDrop 2s ease-in-out infinite
      }

      @keyframes scrollDrop {
        0% {
          transform: scaleY(0) translateY(-30px);
          opacity: 0
        }

        50% {
          transform: scaleY(1) translateY(0);
          opacity: 1
        }

        100% {
          transform: scaleY(0) translateY(30px);
          opacity: 0
        }
      }

      .swipe-hint {
        position: fixed;
        bottom: 32px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 300;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        transition: opacity .5s
      }

      .swipe-hint span {
        font-family: 'Star3000-SmallHeavy', serif;
        font-size: .9rem;
        letter-spacing: .4em;
        color: var(--text-dim);
        text-transform: uppercase
      }

      /* ─── NAV ─────────────────────────────────────── */
      #nav {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 300;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 22px 48px;
        background: linear-gradient(to bottom, rgba(158, 183, 225, .85), transparent)
      }

      .nav-logo {
        font-family: 'Star3000-Small', serif;
        font-size: 1.5rem;
        letter-spacing: .2em;
        color: var(--black);
        text-transform: uppercase;
        text-decoration: none;
        cursor: pointer
      }

      .nav-logo span {
        color: var(--text-highlight)
      }

      /* ─── SIDE NAV ────────────────────────────────── */
      #side-nav {
        position: fixed;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 300;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px
      }

      .side-nav-item {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        padding: 5px 0;
        group: true
      }

      .side-nav-item .snav-line {
        width: 18px;
        height: 1px;
        background: var(--text-dim);
        transition: width .25s, background .25s;
        flex-shrink: 0
      }

      .side-nav-item.active .snav-line {
        width: 32px;
        background: var(--accent)
      }

      .side-nav-item:hover .snav-line {
        width: 28px;
        background: rgba(245, 126, 32, .6)
      }

      .side-nav-item .snav-dot {
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: var(--text-dim);
        transition: background .25s, transform .25s;
        flex-shrink: 0
      }

      .side-nav-item.active .snav-dot {
        background: var(--accent);
        transform: scale(1.4)
      }

      .side-nav-item:hover .snav-dot {
        background: rgba(245, 126, 32, .7)
      }

      /* ─── PAGE CONTAINER ──────────────────────────── */
      #fullpage {
        width: 1920px;
        height: 953px;
        position: relative;
        overflow: hidden;
        isolation: isolate;
      }

      .section {
        width: 1920px;
        height: 953px;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        pointer-events: none;
        transition: opacity .8s ease, transform .8s ease;
        transform: translateY(40px);
        z-index: 0;
      }

      .section.active {
        opacity: 1;
        pointer-events: all;
        transform: translateY(0);
        z-index: 5
      }

      .section.exit-up {
        transform: translateY(-40px);
        opacity: 0
      }

      /* ─── PAGE LABEL ──────────────────────────────── */
      .page-label {
        position: absolute;
        right: 80px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 8px;
        z-index: 10
      }

      .page-label .lbl-en {
        font-family: 'Cinzel', serif;
        font-size: .65rem;
        letter-spacing: .3em;
        color: var(--text-highlight);
        text-transform: uppercase
      }

      .page-label .lbl-num {
        font-family: 'Cinzel', serif;
        font-size: 3rem;
        font-weight: 700;
        color: var(--accent-dark);
        opacity: .65;
        line-height: 1
      }

      .page-label .lbl-total {
        font-size: .6rem;
        letter-spacing: .2em;
        color: var(--text-dim)
      }

      /* ─── BOTTOM BOX ──────────────────────────────── */
      .bot-box {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 80px;
        z-index: 10;
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        padding: 0 48px 20px
      }

      .bot-box .title-name {
        font-family: 'Cinzel', serif;
        font-size: .65rem;
        letter-spacing: .5em;
        color: var(--accent);
        opacity: .5;
        text-transform: uppercase
      }

      .bot-scroll {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 6px
      }

      .bot-scroll span {
        font-size: .55rem;
        letter-spacing: .25em;
        color: var(--text-dim)
      }

      /* ─── SECTION 1: INTRO ─────────────────────────── */
      #secINTRO {
        background: var(--dark)
      }

      .intro-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden
      }

      .intro-bg::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(158, 183, 225, .6) 0%, rgba(158, 183, 225, .2) 50%, rgba(158, 183, 225, .5) 100%)
      }

      .intro-bg-canvas {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 80% 60% at 65% 45%, rgba(245, 126, 32, .10) 0%, transparent 70%),
          radial-gradient(ellipse 40% 40% at 20% 80%, rgba(245, 126, 32, .05) 0%, transparent 60%),
          linear-gradient(160deg, #9eb7e1 0%, #d5deea 40%, #9eb7e1 100%)
      }

      .section-grid {
        position: absolute;
        inset: 0;
        background-image: linear-gradient(var(--grid-color, rgba(245, 126, 32, .04)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color, rgba(245, 126, 32, .04)) 1px, transparent 1px);
        background-size: 80px 80px;
        mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 30%, transparent 100%);
        pointer-events: none;
        z-index: 2
      }

      #secINTRO .section-grid {
        --grid-color: rgba(80, 80, 80, .12)
      }

      #secCHARA .section-grid {
        --grid-color: rgba(80, 80, 80, .12)
      }

      #secWORLD .section-grid {
        --grid-color: rgba(80, 80, 80, .12)
      }

      #secMEDIA .section-grid {
        --grid-color: rgba(80, 80, 80, .12)
      }

      #secNARR .section-grid {
        --grid-color: rgba(80, 80, 80, .12)
      }

      #secFOOT .section-grid {
        --grid-color: rgba(80, 80, 80, .12)
      }

      #secMAP .section-grid {
        --grid-color: rgba(80, 80, 80, .12)
      }

      .intro-content {
        position: relative;
        z-index: 3;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100%;
        padding: 0 10% 80px
      }

      .intro-sub {
        font-family: 'Star3000', serif;
        font-size: .9rem;
        letter-spacing: .5em;
        color: var(--text-highlight);
        text-transform: uppercase;
        margin-bottom: 1.2rem;
        opacity: 0;
        animation: fadeUp .8s .6s forwards
      }

      .intro-title {
        font-family: 'Star3000-Large', serif;
        font-size: 5.5rem;
        font-weight: 700;
        line-height: 1.6;
        color: var(--black);
        text-transform: uppercase;
        margin-bottom: 1rem;
        opacity: 0;
        animation: fadeUp .8s .8s forwards
      }

      .intro-title-wrap {
        display: flex;
        flex-direction: column;
      }

      .stacked-line {
        position: relative;
        display: inline-block;
        line-height: 1.6;
      }

      .intro-title-wrap .layer-fill {
        font-family: 'Star3000-Large', serif;
        font-size: 5.5rem;
        color: var(--greytext);
        display: block;
        text-transform: uppercase;
      }

      .intro-title-wrap .layer-outline {
        font-family: 'Star3000-LargeOutline', serif;
        font-size: 5.5rem;
        color: var(--black);
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        text-transform: uppercase;
      }

      .intro-tagline {
        font-family: 'Star3000-Small', serif;
        font-style: italic;
        font-size: 1.25rem;
        color: var(--text-dim);
        margin-bottom: 2.5rem;
        max-width: 800px;
        opacity: 0;
        animation: fadeUp .8s 1s forwards;
        line-height: 1.5
      }

      .intro-btns {
        display: flex;
        gap: 16px;
        opacity: 0;
        animation: fadeUp .8s 1.2s forwards
      }

      .btn-primary {
        padding: 12px 32px;
        border: var(--line-w) solid var(--accent-dim);
        color: var(--accent);
        font-family: 'Star3000', serif;
        font-size: 1.1rem;
        letter-spacing: .2em;
        text-transform: uppercase;
        cursor: pointer;
        background: var(--buttonbg);
        position: relative;
        overflow: hidden;
        transition: color .3s
      }

      .btn-primary::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--accent);
        transform: scaleX(0);
        transform-origin: left;
        transition: transform .3s
      }

      .btn-primary:hover::before {
        transform: scaleX(1)
      }

      .btn-primary:hover {
        color: var(--black)
      }

      .btn-primary span {
        position: relative;
        z-index: 1
      }

      .intro-ornament {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        opacity: .9
      }

      .intro-ornament svg {
        width: 380px;
        height: auto
      }

      .intro-ornament-group {
        position: absolute;
        right: 5%;
        top: 50%;
        transform: translateY(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        animation: glitchIdle 7s steps(1) infinite
      }

      .intro-ornament-group .intro-ornament {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        opacity: .9
      }

      .intro-ornament-tagline {
        margin-top: 18px;
        text-align: center
      }

      .intro-ornament-tagline p {
        font-family: 'Star3000', serif;
        font-style: italic;
        font-size: 1rem;
        color: var(--black);
        opacity: .75;
        margin-bottom: .25rem;
        letter-spacing: .02em
      }

      .intro-ornament-tagline span {
        font-size: .6rem;
        letter-spacing: .4em;
        color: var(--accent);
        text-transform: uppercase;
        opacity: .65
      }

      @keyframes glitchIdle {

        0%,
        100% {
          transform: translateY(-50%) translate(0, 0) skewX(0deg);
          opacity: .9;
          filter: none
        }

        92% {
          transform: translateY(-50%) translate(0, 0) skewX(0deg);
          opacity: .9;
          filter: none
        }

        92.5% {
          transform: translateY(-50%) translate(-4px, 1px) skewX(-4deg);
          opacity: .75;
          filter: hue-rotate(20deg) saturate(2)
        }

        93% {
          transform: translateY(-50%) translate(5px, -2px) skewX(3deg);
          opacity: 1;
          filter: hue-rotate(-15deg) brightness(1.4)
        }

        93.3% {
          transform: translateY(-50%) translate(-3px, 3px) skewX(0deg);
          opacity: .6;
          filter: none
        }

        93.6% {
          transform: translateY(-50%) translate(4px, 0px) skewX(5deg);
          opacity: 1;
          filter: hue-rotate(30deg)
        }

        94% {
          transform: translateY(-50%) translate(0, 0) skewX(0deg);
          opacity: .9;
          filter: none
        }

        96% {
          transform: translateY(-50%) translate(0, 0) skewX(0deg);
          opacity: .9;
          filter: none
        }

        96.3% {
          transform: translateY(-50%) translate(6px, 2px) skewX(-2deg);
          opacity: .8;
          filter: brightness(1.6) hue-rotate(-20deg)
        }

        96.6% {
          transform: translateY(-50%) translate(-2px, -1px) skewX(0deg);
          opacity: 1;
          filter: none
        }

        97% {
          transform: translateY(-50%) translate(0, 0) skewX(0deg);
          opacity: .9;
          filter: none
        }
      }

      @keyframes mapGlitch {
        0% {
          transform: rotate(var(--r, 0deg)) translate(0, 0) skewX(0deg);
          filter: none;
        }

        10% {
          transform: rotate(var(--r, 0deg)) translate(-4px, 2px) skewX(-5deg);
          filter: hue-rotate(20deg) brightness(1.5);
          clip-path: inset(10% 0 80% 0);
        }

        20% {
          transform: rotate(var(--r, 0deg)) translate(5px, -3px) skewX(4deg);
          filter: hue-rotate(-15deg) saturate(3);
          clip-path: inset(60% 0 20% 0);
        }

        30% {
          transform: rotate(var(--r, 0deg)) translate(-3px, 1px) skewX(0deg);
          filter: brightness(0.5);
          clip-path: inset(30% 0 50% 0);
        }

        40% {
          transform: rotate(var(--r, 0deg)) translate(6px, 0px) skewX(6deg);
          filter: hue-rotate(40deg) brightness(1.8);
          clip-path: inset(0);
        }

        50% {
          transform: rotate(var(--r, 0deg)) translate(-2px, 3px) skewX(-3deg);
          filter: none;
          clip-path: inset(70% 0 5% 0);
        }

        60% {
          transform: rotate(var(--r, 0deg)) translate(4px, -1px) skewX(2deg);
          filter: hue-rotate(-30deg) brightness(1.3);
          clip-path: inset(0);
        }

        70% {
          transform: rotate(var(--r, 0deg)) translate(0, 0) skewX(0deg);
          filter: none;
        }

        100% {
          transform: rotate(var(--r, 0deg)) translate(0, 0) skewX(0deg);
          filter: none;
          clip-path: inset(0);
        }
      }

      .map-svg.glitching {
        animation: mapGlitch 0.2s steps(1) forwards;
      }

      @keyframes fadeUp {
        from {
          opacity: 0;
          transform: translateY(24px)
        }

        to {
          opacity: 1;
          transform: translateY(0)
        }
      }

      /* ─── SECTION 3: CHARACTER ────────────────────── */
      #secCHARA {
        background: var(--dark2)
      }

      .char-bg {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(245, 126, 32, .08) 0%, transparent 70%), linear-gradient(160deg, #9eb7e1 0%, #d5deea 100%)
      }

      .char-content {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 190px 80px 48px
      }

      .section-title {
        margin-bottom: 32px;
      }

      .section-title .t-cn {
        font-family: 'Star3000-Small';
        font-size: 1.2rem;
        letter-spacing: .1em;
        color: var(--text);
        text-transform: uppercase;
      }

      .section-title .stacked-line {
        position: relative;
        display: inline-block;
      }

      .section-title .t-en {
        font-family: 'Star3000', serif;
        font-size: 3.2rem;
        color: var(--greytext);
        display: block;
      }

      .section-title .t-ln {
        font-family: 'Star3000-Outline', serif;
        font-size: 3.2rem;
        color: var(--black);
        position: absolute;
        top: 0;
        left: 0;
        display: block;
      }

      /* faction tabs */
      .faction-tabs {
        display: flex;
        gap: 5px;
        margin-bottom: 3px;
      }

      .faction-tab {
        font-family: 'Star3000-Large', serif;
        font-size: .8rem;
        letter-spacing: .2em;
        color: var(--accent);
        cursor: pointer;
        padding: 8px 20px;
        border: var(--line-w) solid var(--accent-dim);
        background: var(--buttonbg);
        transition: all .3s;
      }

      .faction-tab.active,
      .faction-tab:hover {
        color: var(--black);
        border-color: var(--text-highlight);
        background: var(--accent);
        box-shadow: 0 0 18px var(--accent-glow), 0 0 40px var(--accent-glow)
      }

      /* character viewer */
      .char-viewer {
        border: var(--line-w) solid var(--line);
        background: linear-gradient(to bottom, #ddd2c9 0%, transparent 80%);
        display: flex;
        gap: 0;
        align-items: stretch;
        height: 460px;
        position: relative
      }

      .spawned-asset {
        position: absolute;
        width: 10%;
        height: auto;
        pointer-events: none;
        z-index: 8;
        animation: assetSpawn .3s ease forwards
      }

      @keyframes assetSpawn {
        0% {
          transform: rotate(var(--r, 0deg)) translate(0, 0) skewX(0deg) scale(0.6);
          filter: none;
        }

        10% {
          transform: rotate(var(--r, 0deg)) translate(-4px, 2px) skewX(-5deg);
          filter: hue-rotate(20deg) brightness(1.5);
          clip-path: inset(10% 0 80% 0);
        }

        20% {
          transform: rotate(var(--r, 0deg)) translate(5px, -3px) skewX(4deg) scale(0.1);
          filter: hue-rotate(-15deg) saturate(3);
          clip-path: inset(60% 0 20% 0);
        }

        30% {
          transform: rotate(var(--r, 0deg)) translate(-3px, 1px) skewX(0deg);
          filter: brightness(0.5);
          clip-path: inset(30% 0 50% 0);
        }

        40% {
          transform: rotate(var(--r, 0deg)) translate(6px, 0px) skewX(6deg);
          filter: hue-rotate(40deg) brightness(1.8);
          clip-path: inset(0);
        }

        50% {
          transform: rotate(var(--r, 0deg)) translate(-2px, 3px) skewX(-3deg) scale(1.1);
          filter: none;
          clip-path: inset(70% 0 5% 0);
        }

        60% {
          transform: rotate(var(--r, 0deg)) translate(4px, -1px) skewX(2deg);
          filter: hue-rotate(-30deg) brightness(1.3);
          clip-path: inset(0);
        }

        70% {
          transform: rotate(var(--r, 0deg)) translate(0, 0) skewX(0deg) scale(0.6);
          filter: none;
        }

        100% {
          transform: var(--asset-rot) scale(1);
          filter: none;
          clip-path: inset(0);
        }
      }

      .char-portrait-area {
        position: relative;
        width: 340px;
        flex-shrink: 0;
        display: flex;
        align-items: flex-end;
        justify-content: center
      }

      .char-portrait-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(to top, var(--accent-dim) 0%, transparent 60%);
        z-index: 1
      }

      .char-portrait-frame {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        top: 0;
        border: var(--line-w) solid var(--text-highlight);
        z-index: 3;
        pointer-events: none
      }

      .char-portrait-frame::before {
        content: '';
        position: absolute;
        top: 12px;
        right: 12px;
        width: 24px;
        height: 24px;
        border-top: var(--line-w) solid var(--accent);
        border-right: var(--line-w) solid var(--accent)
      }

      .char-portrait-frame::after {
        content: '';
        position: absolute;
        bottom: 12px;
        left: 12px;
        width: 24px;
        height: 24px;
        border-bottom: var(--line-w) solid var(--accent);
        border-left: var(--line-w) solid var(--accent)
      }

      .char-swiper {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 2
      }

      .char-swiper .swiper-wrapper {
        height: 100%
      }

      .char-swiper .swiper-slide {
        height: 100%;
        opacity: 0 !important;
        transition: opacity .5s ease !important;
        pointer-events: none;
        display: flex;
        align-items: center;
        justify-content: center
      }

      .char-swiper .swiper-slide-active {
        opacity: 1 !important;
        pointer-events: auto
      }

      .char-silhouette-inner {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center
      }

      .char-portrait-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block
      }

      .char-silhouette-inner .placeholder-fig {
        width: 160px;
        height: 340px;
        background: linear-gradient(to bottom, rgba(245, 126, 32, .15), rgba(245, 126, 32, .05));
        clip-path: polygon(20% 0%, 80% 0%, 95% 15%, 95% 100%, 5% 100%, 5% 15%);
        position: relative;
        overflow: hidden
      }

      .char-silhouette-inner .placeholder-fig::after {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg, transparent, transparent 8px, rgba(245, 126, 32, .03) 8px, rgba(245, 126, 32, .03) 9px)
      }

      /* char info */
      .char-info-area {
        flex: 1;
        padding: 24px 32px;
        display: flex;
        flex-direction: row;
        gap: 24px;
        position: relative;
        overflow: hidden;
        min-width: 0
      }

      .char-info-area::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 1px;
        height: 100%;
        background: var(--accent);
        opacity: .3
      }

      .char-info-left {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
        overflow: hidden
      }

      .char-name {
        display: block;
        font-family: 'Star3000', serif;
        font-size: 2.2rem;
        color: var(--accent-dim);
        letter-spacing: .05em;
        line-height: 1
      }
      
      .char-name-outline{
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        font-family: 'Star3000-Outline', serif;
        font-size: 2.2rem;
        color: var(--black);
        letter-spacing: .05em;
        line-height: 1
      }

      .char-name-sub {
        font-family: 'JP-CRT';
        font-size: 1.2rem;
        letter-spacing: .35em;
        color: var(--black);
        margin-top: 4px;
        text-transform: uppercase
      }

      .char-role {
        display: flex;
        gap: 10px;
        align-items: center;
        margin: 12px 0
      }

      .char-role-badge {
        background: var(--accent-glow);
        padding: 3px 12px;
        border: var(--line-w) solid var(--text-highlight);
        font-size: .8rem;
        letter-spacing: .2em;
        color: var(--accent-dark);
        text-transform: uppercase;
        font-family: 'Star3000-SmallHeavy', serif
      }

      .char-desc {
        font-family: 'Star3000', serif;
        font-size: 1.05rem;
        line-height: 1.7;
        color: var(--text);
        max-width: 600px
      }

      .char-desc p {
        margin-bottom: .5rem
      }

      .char-stat-row {
        display: flex;
        gap: 24px;
        margin-top: 16px;
        padding-top: 16px;
        border-top: var(--line-w) solid var(--line)
      }

      .char-stat {
        display: flex;
        flex-direction: column;
        gap: 4px
      }

      .char-stat-label {
        font-family: 'Star3000-SmallHeavy', serif;
        font-size: 0.9rem;
        letter-spacing: .1em;
        color: var(--accent-dark);
      }

      .char-stat-val {
        font-family: 'Star3000', serif;
        font-size: 1rem;
        color: var(--black)
      }

      .char-deco-label {
        position: absolute;
        bottom: 16px;
        right: 16px;
        font-family: 'Star3000-Heavy', serif;
        font-size: 3rem;
        color: var(--accent-dark);
        opacity: .25;
        line-height: 1;
        letter-spacing: .02em
      }

      /* item panel */
      .char-item-panel {
        width: 520px;
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-left: var(--line-w) solid var(--line);
        padding-left: 24px;
        margin-right: 30px
      }

      .char-item-frame {
        flex: 1;
        border: var(--line-w) solid var(--line);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(245, 126, 32, .03);
        overflow: hidden;
        transition: border-color .3s;
        min-height: 0
      }

      .char-item-frame::before {
        content: '';
        position: absolute;
        top: 8px;
        right: 8px;
        width: 16px;
        height: 16px;
        border-top: var(--line-w) solid var(--accent);
        border-right: var(--line-w) solid var(--accent);
        opacity: .5
      }

      .char-item-frame::after {
        content: '';
        position: absolute;
        bottom: 8px;
        left: 8px;
        width: 16px;
        height: 16px;
        border-bottom: var(--line-w) solid var(--accent);
        border-left: var(--line-w) solid var(--accent);
        opacity: .5
      }

      .char-item-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        height: 100%;
        padding: 16px
      }

      .char-item-placeholder .item-glyph {
        font-size: 2.4rem;
        opacity: .25;
        line-height: 1
      }

      .char-item-placeholder .item-hint {
        font-size: .5rem;
        letter-spacing: .3em;
        color: var(--text-dim);
        text-transform: uppercase;
        text-align: center
      }

      .char-item-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 16px;
        opacity: .75;
        transition: opacity .3s
      }

      .char-item-img:hover {
        opacity: 1
      }

      .char-item-meta {
        flex-shrink: 0
      }

      .char-item-name {
        font-family: 'Star3000-SmallHeavy', serif;
        font-size: 0.9rem;
        letter-spacing: .1em;
        color: var(--accent-dark);
        text-transform: uppercase
      }

      .char-item-type {
        font-family: 'Star3000', serif;
        font-size: 1rem;
        color: var(--black);
        margin-top: 3px
      }

      /* thumbnail row */
      .char-thumbs {
        display: flex;
        gap: 6px;
        margin-top: 16px;
        align-items: center;
        flex-wrap: wrap
      }

      .char-thumb-btn {
        width: 52px;
        height: 68px;
        border: var(--line-w) solid var(--line);
        cursor: pointer;
        transition: all .25s;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 4px;
        background: var(--dark3);
        position: relative;
        overflow: hidden;
        flex-shrink: 0
      }

      .char-thumb-btn::after {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--accent);
        opacity: 0;
        transition: opacity .25s
      }

      .char-thumb-btn.active {
        border-color: var(--accent)
      }

      .char-thumb-btn.active::after {
        opacity: .1
      }

      .char-thumb-btn:hover {
        border-color: rgba(245, 126, 32, .5)
      }

      .char-thumb-btn .thumb-abbr {
        font-family: 'Cinzel', serif;
        font-size: .55rem;
        letter-spacing: .1em;
        color: var(--text-dim);
        position: relative;
        z-index: 1;
        text-transform: uppercase
      }

      .char-thumb-btn.active .thumb-abbr {
        color: var(--text-highlight)
      }

      /* ─── SECTION 4: BACKSTORY ────────────────────── */
      #secWORLD {
        background: var(--dark)
      }

      .world-bg {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 50% 60% at 30% 50%, rgba(245, 126, 32, .07) 0%, transparent 70%), linear-gradient(180deg, #9eb7e1 0%, #d5deea 100%)
      }

      .world-content {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        align-items: center;
        gap: 0;
        padding: 80px 0 80px
      }

      .world-slider-area {
        flex: 1;
        height: 560px;
        position: relative;
        overflow: visible;
        padding: 0 48px
      }

      .world-swiper {
        overflow: hidden !important
      }

      .world-swiper .swiper-wrapper {
        height: 100%;
        width: 100%
      }

      .world-swiper .swiper-slide {
        opacity: 0 !important;
        transition: opacity .6s ease !important;
        pointer-events: none;
        width: 100% !important;
        height: 100% !important;
        display: flex;
        flex-direction: row
      }

      .world-swiper .swiper-slide-active {
        opacity: 1 !important;
        pointer-events: auto
      }

      .world-slide {
        display: flex;
        flex-direction: row;
        gap: 48px;
        align-items: center;
        height: 100%;
        width: 100%
      }

      .world-slide-img {
        width: 600px;
        height: 400px;
        flex-shrink: 1;
        position: relative
      }

      .world-slide-img::before {
        content: '';
        position: absolute;
        top: -8px;
        left: -8px;
        width: 48px;
        height: 48px;
        border-top: 2px solid var(--accent);
        border-left: 2px solid var(--accent)
      }

      .world-slide-img::after {
        content: '';
        position: absolute;
        bottom: -8px;
        right: -8px;
        width: 48px;
        height: 48px;
        border-bottom: 2px solid var(--accent);
        border-right: 2px solid var(--accent)
      }

      .world-img-placeholder {
        width: 100%;
        height: 100%;
        background: linear-gradient(135deg, var(--dark3), var(--mid));
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 12px
      }

      .world-img-placeholder .img-icon {
        width: 64px;
        height: 64px;
        border: var(--line-w) solid var(--line);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--text-dim);
        font-size: 1.4rem
      }

      .world-img-placeholder span {
        font-size: .6rem;
        letter-spacing: .3em;
        color: var(--text-dim);
        text-transform: uppercase
      }

      .world-slide-info {
        flex: 1
      }

      .world-slide-info .info-tit p {
        font-family: 'Cinzel', serif;
        font-size: 1.8rem;
        font-weight: 700;
        color: var(--black)
      }

      .world-slide-info .info-tit span {
        font-size: .65rem;
        letter-spacing: .4em;
        color: var(--text-highlight);
        text-transform: uppercase
      }

      .world-slide-info .info-body {
        font-family: 'Crimson Text', serif;
        font-size: 1.05rem;
        line-height: 1.75;
        color: var(--text);
        margin-top: 16px;
        max-width: 720px
      }

      .world-slide-info .info-body p {
        margin-bottom: .6rem
      }

      .world-nav {
        display: flex;
        gap: 12px;
        margin-top: 0
      }

      .world-nav button {
        width: 40px;
        height: 40px;
        border: var(--line-w) solid var(--line);
        background: transparent;
        color: var(--text-dim);
        cursor: pointer;
        font-size: 1rem;
        transition: all .25s;
        display: flex;
        align-items: center;
        justify-content: center
      }

      .world-nav button:hover {
        border-color: var(--accent);
        color: var(--accent)
      }

      .world-bottom-row {
        display: flex;
        align-items: center;
        margin-top: 16px;
        padding: 0 48px;
        gap: 0
      }

      .world-dots-row {
        width: 380px;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        gap: 8px
      }

      .world-dot {
        width: 24px;
        height: 2px;
        background: var(--text-dim);
        cursor: pointer;
        transition: all .25s
      }

      .world-dot.active {
        background: var(--accent);
        width: 40px
      }

      .world-bottom-row .world-nav {
        margin-left: 48px
      }

      /* ─── SECTION 5: MAP ───────────────────────── */
      #secMAP {
        background: var(--dark)
      }

      .map-bg {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 80% at 70% 50%, rgba(245, 126, 32, .08) 0%, transparent 70%), linear-gradient(160deg, #9eb7e1 0%, #d5deea 100%)
      }

      .map-content {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 72px 160px 60px 48px
      }

      .map-container {
        position: relative;
        flex: 1;
        min-height: 0;
        margin-top: 12px
      }

      .map-world-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
        transform-origin: center center;
        position: relative
      }

      .map-control-btn {
        position: absolute;
        overflow: hidden;
        top: 20px;
        left: 20px;
        z-index: 15;
        padding: 12px 32px;
        background: var(--buttonbg);
        border: var(--line-w) solid var(--accent);
        color: var(--accent);
        font-family: 'Star3000';
        font-size: 1.1rem;
        letter-spacing: 0.2em;
        cursor: pointer;
        transition: color 0.3s ease;
      }

      .map-control-btn:hover {
        background: var(--accent);
        color: var(--black);
        box-shadow: 0 0 15px var(--accent-glow);
      }

      .map-svg {
        transform-origin: center;
        transition: none;
      }

      .map-svg.rotated {
        transform: rotate(180deg);
      }

      .map-world-wrap svg {
        width: 100%;
        height: 100%;
        display: block
      }

      .map-region {
        cursor: pointer;
        pointer-events: all !important;
        transition: transform 0.3s ease;
      }

      .map-region path {
        fill-opacity: 1 !important;
        transition: fill 0.3s, filter 0.3s, stroke 0.3s;
      }

      .map-region:hover path {
        stroke: var(--map-hover);
        stroke-width: 3.0px;
        filter: drop-shadow(0 0 10px var(--accent-glow)) drop-shadow(0 0 60px var(--text-highlight));
      }

      .map-region.active path {
        stroke: var(--map-hover);
        stroke-width: 3.0px;
        filter: drop-shadow(0 0 10px var(--accent-glow)) drop-shadow(0 0 60px var(--text-highlight));
      }

      .map-label {
        position: fixed;
        transform: translate(12px, -50%);
        font-family: 'Star3000-Small';
        font-size: 1.2rem;
        letter-spacing: .2em;
        color: var(--black);
        text-transform: uppercase;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity .2s;
        background: rgba(158, 183, 225, .7);
        padding: 3px 8px;
        border: 1px solid var(--line)
      }

      .map-region:hover~.map-label,
      .map-label.visible {
        opacity: 1
      }

      /* ── MAP OVERLAY ── */
      .map-overlay {
        position: absolute;
        inset: 0;
        z-index: 200;
        display: none;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity .4s ease;
      }

      .map-overlay.open {
        display: flex;
        opacity: 1;
        pointer-events: all
      }

      .map-overlay-backdrop {
        position: absolute;
        inset: 0;
        backdrop-filter: blur(6px);
        background: rgba(6, 14, 26, .72);
        overflow: hidden;
      }

      .map-overlay-backdrop::before {
        content: '';
        position: absolute;
        inset: 0;
        background: repeating-linear-gradient(0deg, transparent, transparent 3px, rgba(0, 0, 0, .18) 3px, rgba(0, 0, 0, .18) 4px);
        pointer-events: none;
        z-index: 1;
        animation: scanlines 8s linear infinite
      }

      .map-overlay-backdrop::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 80px;
        background: linear-gradient(to bottom, transparent, rgba(245, 126, 32, .04), transparent);
        animation: scanbeam 4s linear infinite;
        z-index: 2;
        pointer-events: none
      }

      @keyframes scanlines {
        0% {
          background-position: 0 0
        }

        100% {
          background-position: 0 80px
        }
      }

      @keyframes scanbeam {
        0% {
          top: -80px
        }

        100% {
          top: 100%
        }
      }

      .map-dossier {
        position: relative;
        z-index: 10;
        width: 1600px;
        height: 780px;
        border: var(--line-w) solid var(--line);
        background: var(--dark2) linear-gradient(to bottom, #ddd2c9 0%, transparent 80%);
        backdrop-filter: blur(2px);
        display: flex;
        flex-direction: column;
        animation: dossierIn .35s ease both;
      }

      @keyframes dossierIn {
        from {
          transform: translateY(24px) scale(.97);
          opacity: 0
        }

        to {
          transform: translateY(0) scale(1);
          opacity: 1
        }
      }

      .map-dossier-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 20px;
        border-bottom: var(--line-w) solid var(--line);
        background: var(--dark)
      }

      .map-dossier-region {
        font-family: 'Star3000-Heavy', serif;
        font-size: 1.1rem;
        letter-spacing: .2em;
        color: var(--text-highlight);
      }

      .map-dossier-close {
        background: var(--buttonbg);
        border: var(--line-w) solid var(--accent);
        color: var(--accent);
        font-family: 'Star3000-SmallHeavy', serif;
        font-size: 1rem;
        padding: 4px 14px;
        cursor: pointer;
        transition: background .2s, color .2s
      }

      .map-dossier-close:hover {
        background: var(--accent);
        color: var(--dark);
        border-color: var(--accent)
      }

      .map-dossier-viewer {
        display: flex;
        gap: 0;
        flex: 1;
        min-height: 0;
        position: relative;
      }

      /* Left panel — country info (swiper) */
      .map-country-left {
        flex: 1;
        padding: 24px 28px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-width: 0;
        overflow: hidden;
        position: relative;
      }

      .map-country-swiper {
        width: 100%;
        height: 100%;
        overflow: hidden
      }

      .map-country-swiper .swiper-wrapper {
        height: 100%
      }

      .map-country-swiper .swiper-slide {
        height: 100%;
        opacity: 0 !important;
        transition: opacity .4s ease !important;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        justify-content: space-between
      }

      .map-country-swiper .swiper-slide-active {
        opacity: 1 !important;
        pointer-events: auto
      }

      .map-country-name {
        font-family: 'Cinzel', serif;
        font-size: 1.6rem;
        font-weight: 700;
        color: var(--black);
        letter-spacing: .04em;
        line-height: 1.1;
        margin-bottom: 4px
      }

      .map-country-sub {
        font-family: 'Cinzel', serif;
        font-size: .6rem;
        letter-spacing: .3em;
        color: var(--text-highlight);
        text-transform: uppercase;
        margin-bottom: 12px
      }

      .map-country-badge {
        display: inline-block;
        padding: 3px 12px;
        border: var(--line-w) solid var(--text-highlight);
        font-size: .55rem;
        letter-spacing: .2em;
        color: var(--text-highlight);
        text-transform: uppercase;
        font-family: 'Cinzel', serif;
        margin-bottom: 14px
      }

      .map-country-desc {
        font-family: 'Star3000';
        font-size: .95rem;
        line-height: 1.65;
        color: var(--text);
        margin-bottom: auto
      }

      .map-country-stats {
        display: flex;
        gap: 20px;
        padding-top: 16px;
        border-top: 1px solid rgba(107, 53, 16, .25)
      }

      .map-country-stat {
        display: flex;
        flex-direction: column;
        gap: 3px
      }

      .map-country-stat-label {
        font-size: .5rem;
        letter-spacing: .3em;
        color: var(--text-dim);
        text-transform: uppercase
      }

      .map-country-stat-val {
        font-family: 'Cinzel', serif;
        font-size: .75rem;
        color: var(--black)
      }

      .map-country-deco {
        position: absolute;
        bottom: 12px;
        right: 16px;
        font-family: 'Star3000-Heavy';
        font-size: 2rem;
        color: var(--accent-dark);
        opacity: .25;
        line-height: 1;
        pointer-events: none
      }

      /* Right panel — regional map (static) */
      .map-region-panel {
        flex-shrink: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
        border-left: var(--line-w) solid var(--line);
        padding: 24px 20px;
        width: auto;
        min-width: 200px;
        max-width: 520px;
      }

      .map-region-frame {
        border: var(--line-w) solid var(--line);
        background: #ddd2c9;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden;
        width: auto;
        height: auto;
      }
      
      .map-region-frame-wrap {
        flex: 1;
        min-height: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }

      .map-region-frame:hover {
        opacity: 1;
      }

      .map-region-frame::before {
        content: '';
        position: absolute;
        top: 10px;
        right: 10px;
        width: 18px;
        height: 18px;
        border-top: var(--line-w) solid var(--accent);
        border-right: var(--line-w) solid var(--accent)
      }

      .map-region-frame::after {
        content: '';
        position: absolute;
        bottom: 10px;
        left: 10px;
        width: 18px;
        height: 18px;
        border-bottom: var(--line-w) solid var(--accent);
        border-left: var(--line-w) solid var(--accent)
      }

      .map-region-placeholder {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        opacity: .5
      }

      .map-region-glyph {
        font-size: 2rem;
        color: var(--accent)
      }

      .map-region-hint {
        font-family: 'Cinzel', serif;
        font-size: .5rem;
        letter-spacing: .3em;
        color: var(--text-dim);
        text-transform: uppercase
      }

      .map-region-meta {
        display: flex;
        flex-direction: column;
        gap: 4px
      }

      .map-region-meta-name {
        font-family: 'Star3000-SmallHeavy';
        font-size: 1.5rem;
        color: var(--accent-dark)
      }

      .map-region-meta-type {
        font-family: 'Star3000-LargeHeavy';
        font-size: 1.5rem;
        letter-spacing: .1em;
        color: var(--black);
      }

      /* Country tabs */
      .map-country-tabs {
        display: flex;
        align-items: center;
        gap: 3px;
        padding: 10px 20px;
        border-top: var(--line-w) solid var(--line);
        overflow-x: auto;
        flex-shrink: 0;
      }

      .map-country-tab {
        font-family: 'Star3000-Small', serif;
        font-size: .8rem;
        letter-spacing: .2em;
        color: var(--accent);
        cursor: pointer;
        padding: 8px 20px;
        border: var(--line-w) solid var(--accent-dim);
        background: var(--buttonbg);
        transition: all .3s;
        white-space: nowrap;
        flex-shrink: 0
      }

      .map-country-tab.active,
      .map-country-tab:hover {
        color: var(--black);
        border-color: var(--text-highlight);
        background: var(--accent);
        box-shadow: 0 0 18px var(--accent-glow), 0 0 40px var(--accent-glow)
      }
      
      /* ── GREATEST GAME PANEL ── */
      .gg-panel {
        margin: 0;
        margin-top: 40px;
        width: 80%;
        align-self: center;
        border: var(--line-w) solid var(--line);
        flex-shrink: 0;
      }
      
      .gg-title {
        font-family: 'Star3000-SmallHeavy', serif;
        font-size: 1.1rem;
        letter-spacing: 0.3em;
        color: var(--black);
        text-transform: uppercase;
        background: var(--accent);
        padding: 6px 12px;
        text-align: center;
      }
      
      .gg-body {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px 8px;
        gap: 30px;
        background: rgba(245, 126, 32, 0.04);
      }
      
      /* BARS */
      .gg-bars {
        display: flex;
        gap: 10px;
        align-items: center;
        flex-shrink: 0;
      }
      
      .gg-bars-left {
        flex-direction: row-reverse;
      }
      
      .gg-bars-right {
        flex-direction: row;
      }
      
      .gg-bar {
        width: 60px;
        height: 20px;
        border: var(--line-w) solid var(--line);
        background: rgba(245, 126, 32, 0.08);
        transition: background 0.3s, border-color 0.3s;
      }
      
      .gg-bar-active-a {
        background: #4a9eff;
        border-color: #2277cc;
        box-shadow: 0 0 8px rgba(74, 158, 255, 0.5);
      }
      
      .gg-bar-active-b {
        background: #ff6b9d;
        border-color: #cc3366;
        box-shadow: 0 0 8px rgba(255, 107, 157, 0.5);
      }
      
      /* CENTRE ICON */
      .gg-centre {
        flex: 0;
        flex-shrink: 0;
        display:flex;
        align-items: center;
        justify-content: center;
      }
      
      .gg-icon-frame {
        width: 150px;
        border: var(--line-w) solid var(--line);
        background: rgba(245, 126, 32, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
      }
      
      .gg-icon-frame::before {
        content: '';
        position: absolute;
        top: 6px;
        right: 6px;
        width: 12px;
        height: 12px;
        border-top: var(--line-w) solid var(--accent);
        border-right: var(--line-w) solid var(--accent);
      }
      
      .gg-icon-frame::after {
        content: '';
        position: absolute;
        bottom: 6px;
        left: 6px;
        width: 12px;
        height: 12px;
        border-bottom: var(--line-w) solid var(--accent);
        border-left: var(--line-w) solid var(--accent);
      }
      
      .gg-icon-placeholder {
        font-size: 2rem;
        color: var(--accent);
        opacity: 0.3;
      }
      
      @keyframes gg-pulsate-slow {
        0%, 100% { opacity: 1; box-shadow: 0 0 4px currentColor; }
        50%       { opacity: 0.5; box-shadow: 0 0 12px currentColor; }
      }
      
      @keyframes gg-pulsate-med {
        0%, 100% { opacity: 1; box-shadow: 0 0 6px currentColor; }
        50%       { opacity: 0.4; box-shadow: 0 0 16px currentColor; }
      }
      
      @keyframes gg-pulsate-fast {
        0%, 100% { opacity: 1; box-shadow: 0 0 8px currentColor; }
        50%       { opacity: 0.3; box-shadow: 0 0 20px currentColor; }
      }
      
      @keyframes gg-glitch {
        0%, 100% {
          transform: skewX(0deg);
          filter: none;
        }
        10% {
          transform: skewX(-1deg);
          filter: hue-rotate(20deg) brightness(1.6);
        }
        20% {
          transform: skewX(1deg);
          filter: hue-rotate(-15deg) saturate(3);
        }
        30% {
          transform: skewX(0deg);
          filter: brightness(0.4);
        }
        40% {
          transform: skewX(1deg);
          filter: hue-rotate(40deg) brightness(1.8);
        }
        50% {
          transform: skewX(-1deg);
          filter: none;
        }
        60% {
          transform: skewX(1deg);
          filter: hue-rotate(-30deg) brightness(1.3);
        }
        70% {
          transform: skewX(0deg);
          filter: none;
        }
      }

      /* ─── SECTION 6: MEDIA ────────────────────────── */
      #secMEDIA {
        background: var(--dark2)
      }

      .media-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, #d5deea 0%, #9eb7e1 100%)
      }

      .media-content {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 10px 190px 60px 48px;
        pointer-events: inherit
      }

      .media-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
        margin-top: 16px
      }

      .media-card {
        position: relative;
        border: var(--line-w) solid var(--line);
        overflow: hidden;
        cursor: pointer;
        transition: border-color .3s
      }

      .media-card:hover {
        border-color: var(--accent)
      }

      .media-card-inner {
        aspect-ratio: 16/9;
        background: var(--dark3);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        overflow: hidden
      }

      .media-card-inner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(245, 126, 32, .08), transparent)
      }

      .media-card .play-btn {
        width: 36px;
        height: 36px;
        border: var(--line-w) solid var(--accent);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--accent);
        font-size: .85rem;
        transition: all .3s;
        z-index: 2;
        position: relative
      }

      .media-card:hover .play-btn {
        background: var(--accent);
        color: var(--dark)
      }

      .media-card-label {
        padding: 6px 10px;
        background: var(--dark2)
      }

      .media-card-label p {
        font-family: 'Cinzel', serif;
        font-size: .58rem;
        letter-spacing: .15em;
        color: var(--text);
        text-transform: uppercase
      }

      .media-card-label span {
        font-size: .5rem;
        color: var(--text-dim)
      }

      .media-card-num {
        position: absolute;
        top: 6px;
        right: 8px;
        font-family: 'Cinzel', serif;
        font-size: .5rem;
        letter-spacing: .2em;
        color: var(--accent);
        z-index: 2
      }

      /* ─── SECTION 7: FEATURES ─────────────────────── */
      #secNARR {
        background: var(--dark)
      }

      .feat-bg {
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(245, 126, 32, .06) 0%, transparent 70%), linear-gradient(180deg, #9eb7e1 0%, #d5deea 100%)
      }

      .feat-content {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 80px 190px 80px 48px
      }

      .feat-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
        margin-top: 40px;
        border: var(--line-w) solid var(--line)
      }

      .feat-card {
        padding: 32px 28px;
        border-right: var(--line-w) solid var(--line);
        position: relative;
        cursor: pointer;
        overflow: hidden;
        transition: background .3s
      }
      
      .feat-card .text-hover {
        display: none;
      }
      
      /* When the card is hovered: */
      /* 1. Hide the default text */
      .feat-card:hover .text-default {
        display: none;
      }
      
      /* 2. Show the hover text */
      .feat-card:hover .text-hover {
        display: block; /* or block, depending on your layout */
      }

      .feat-card:last-child {
        border-right: none
      }

      .feat-card::before {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 0;
        background: linear-gradient(to top, var(--accent-dim), transparent);
        transition: height .4s
      }

      .feat-card:hover::before {
        height: 100%
      }

      .feat-card .feat-num {
        font-family: 'Cinzel', serif;
        font-size: .6rem;
        letter-spacing: .3em;
        color: var(--text-highlight);
        margin-bottom: 16px
      }

      .feat-card .feat-icon {
        width: 48px;
        height: 48px;
        border: var(--line-w) solid var(--line);
        margin-bottom: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color .3s
      }

      .feat-card:hover .feat-icon {
        border-color: var(--accent)
      }

      .feat-card .feat-icon svg {
        width: 24px;
        height: 24px;
        stroke: var(--text-dim);
        transition: stroke .3s
      }

      .feat-card:hover .feat-icon svg {
        stroke: var(--accent)
      }

      .feat-card .feat-title {
        font-family: 'Cinzel', serif;
        font-size: 1rem;
        color: var(--black);
        margin-bottom: 12px;
        letter-spacing: .05em
      }

      .feat-card .feat-body {
        font-family: 'Crimson Text', serif;
        font-size: .95rem;
        line-height: 1.65;
        color: var(--text-dim)
      }

      /* ─── SECTION 8: FOOTER ───────────────────────── */
      #secFOOT {
        background: var(--dark2)
      }

      .footer-bg {
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, #d5deea, #7c9dcf)
      }

      .footer-content {
        position: relative;
        z-index: 3;
        height: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 80px 48px
      }

      .footer-ornament {
        opacity: .85;
        animation: glitchIdle 7s steps(1) infinite
      }

      .footer-ornament svg {
        width: 120px;
        height: auto
      }

      .footer-tagline p {
        font-family: 'Crimson Text', serif;
        font-style: italic;
        font-size: 1.6rem;
        color: var(--black);
        margin-bottom: .4rem
      }

      .footer-tagline span {
        font-size: .7rem;
        letter-spacing: .5em;
        color: var(--text-highlight);
        text-transform: uppercase
      }

      .footer-links {
        display: flex;
        gap: 32px;
        margin: 32px 0;
        list-style: none
      }

      .footer-links a {
        font-family: 'Cinzel', serif;
        font-size: .6rem;
        letter-spacing: .2em;
        color: var(--text-dim);
        text-decoration: none;
        text-transform: uppercase;
        transition: color .3s
      }

      .footer-links a:hover {
        color: var(--accent)
      }

      .footer-divider {
        width: 240px;
        height: 1px;
        background: var(--line);
        margin: 0 auto 24px
      }

      .footer-copy {
        font-size: .6rem;
        letter-spacing: .2em;
        color: var(--text-dim)
      }

      /* ─── ITEM IMAGE LIGHTBOX ─────────────────────── */
      .char-item-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 12px;
        opacity: .85;
        transition: opacity .25s, transform .25s;
        cursor: zoom-in;
        display: block
      }

      .char-item-img:hover {
        opacity: 1;
        transform: scale(1.05)
      }

      #imgLightbox {
        position: fixed;
        inset: 0;
        z-index: 9998;
        background: rgba(6, 14, 26, .92);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s;
        cursor: zoom-out
      }

      #imgLightbox.open {
        opacity: 1;
        pointer-events: all
      }

      #imgLightbox img {
        max-width: 80vw;
        max-height: 85vh;
        object-fit: contain;
        border: var(--line-w) solid var(--line);
        box-shadow: 0 0 60px rgba(245, 126, 32, .15)
      }

      #imgLightbox .lb-name {
        position: absolute;
        bottom: 28px;
        left: 50%;
        transform: translateX(-50%);
        font-family: 'Cinzel', serif;
        font-size: .65rem;
        letter-spacing: .3em;
        color: var(--text-dim);
        text-transform: uppercase;
        white-space: nowrap
      }

      /* ─── UTILITIES ───────────────────────────────── */
      .hidden {
        display: none !important
      }

      /* ─── PAPER TEXTURE ───────────────────────────── */
      #paper-texture {
        position: absolute;
        inset: 0;
        z-index: 6;
        background: url('Img/paperBG.jpg') center/cover repeat;
        opacity: 0.70;
        mix-blend-mode: screen;
        pointer-events: none
      }

      /* ─── RESOLUTION SCALING ──────────────────────────────── */
      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
        margin: 0;
        padding: 0;
        background: var(--dark);
      }

      #scale-root {
        width: 1920px;
        height: 953px;
        transform-origin: top left;
        position: fixed;
        top: 0;
        left: 0;
      }

      /* ─── PHONE HATE ───────────────────────────── */
      #phone-prompt {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 99999;
        background: rgba(6, 14, 26, .92);
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 24px;
      }

      #phone-prompt .phone-text {
        font-family: 'Star3000-LargeHeavy';
        font-size: 1.9rem;
        letter-spacing: 0.4em;
        color: var(--accent-dim);
        text-transform: uppercase;
        text-align: center;
        animation: pulsate 1.0s ease-in-out infinite
      }

      #phone-prompt .phone-text2 {
        font-family: 'Star3000-Small';
        font-size: 0.8rem;
        letter-spacing: 0.2em;
        color: var(--accent-glow);
        text-transform: uppercase;
        text-align: center;
      }

      @media (max-width: 1024px) and (pointer: coarse) {
        #phone-prompt {
          display: flex !important;
        }

        #scale-root {
          display: none !important;
        }
      }