:root {
    --vault-black: #090A12;
    --cartridge-indigo: #1B1F5C;
    --treaty-parchment: #F3DCA6;
    --seal-vermilion: #E94B35;
    --hologram-mint: #3FFFCB;
    --royalty-violet: #9A5CFF;
    --coin-gold: #D8A928;
    --approval-green: #5BE870;
    --ink: rgba(9, 10, 18, .88);
}

/* Typography compliance tokens from DESIGN.md: Mono**. MonoX clarity instead overused mono-led tech palette. Sans** SansX readable explanations notes. Accent */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--vault-black);
    color: var(--treaty-parchment);
    font-family: "IBM Plex Sans", inter, sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 12%, rgba(154, 92, 255, .18), transparent 26rem),
        radial-gradient(circle at 12% 72%, rgba(63, 255, 203, .12), transparent 34rem),
        linear-gradient(rgba(243, 220, 166, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(243, 220, 166, .025) 1px, transparent 1px);
    background-size: auto, auto, 32px 32px, 32px 32px;
    mix-blend-mode: screen;
    z-index: 2;
}

h1, h2, h3, .spine-title, .spine-tab, .diegetic-button, .stamp-head, .approval-stamp, .certificate-label { font-family: "Bungee", "IBM Plex Sans", sans-serif; }
h1, h2, h3, p { margin-top: 0; }
h2 { font-size: clamp(2.3rem, 6vw, 5.8rem); line-height: .95; letter-spacing: .02em; text-shadow: 0 0 18px rgba(216, 169, 40, .25); }
h3 { color: var(--seal-vermilion); letter-spacing: .03em; }
p { font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.7; }
.fraunces, blockquote { font-family: "Fraunces", serif; }

.license-spine {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 92px;
    z-index: 10;
    background: linear-gradient(180deg, #1B1F5C, #090A12 65%);
    border-right: 3px solid var(--coin-gold);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 10px;
    box-shadow: 12px 0 40px rgba(0, 0, 0, .45);
}

.spine-title {
    writing-mode: vertical-rl;
    color: var(--coin-gold);
    font-size: .72rem;
    letter-spacing: .24em;
    margin-bottom: 18px;
}

.spine-tab {
    width: 76px;
    min-height: 62px;
    margin: 5px 0;
    color: var(--treaty-parchment);
    text-decoration: none;
    font-size: .56rem;
    display: grid;
    place-items: center;
    text-align: center;
    background: rgba(243, 220, 166, .08);
    border: 1px solid rgba(216, 169, 40, .42);
    clip-path: polygon(0 0, 86% 0, 100% 50%, 86% 100%, 0 100%);
    transition: transform .25s ease, background .25s ease, color .25s ease;
}

.spine-tab span { display: block; font-family: "IBM Plex Mono", monospace; color: var(--hologram-mint); }
.spine-tab.active, .spine-tab:hover { background: var(--coin-gold); color: var(--vault-black); transform: translateX(10px); }
.spine-tab.active span, .spine-tab:hover span { color: var(--cartridge-indigo); }

.license-questline { margin-left: 92px; }
.scene {
    min-height: 100vh;
    position: relative;
    display: grid;
    align-items: center;
    padding: clamp(36px, 7vw, 96px);
    isolation: isolate;
    overflow: hidden;
}

.scene::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px dashed rgba(243, 220, 166, .23);
    pointer-events: none;
    clip-path: polygon(0 0, 98% 0, 100% 8%, 100% 100%, 2% 100%, 0 92%);
}

.vault-gate { place-items: center; background: radial-gradient(circle at 50% 45%, rgba(27, 31, 92, .92), #090A12 68%); }
.shelf-grid {
    position: absolute;
    inset: -10%;
    opacity: .18;
    background-image:
        linear-gradient(120deg, transparent 0 42%, rgba(243, 220, 166, .16) 43% 45%, transparent 46%),
        repeating-linear-gradient(90deg, rgba(243, 220, 166, .18) 0 3px, transparent 3px 78px),
        repeating-linear-gradient(0deg, rgba(243, 220, 166, .15) 0 3px, transparent 3px 110px);
    transform: perspective(700px) rotateX(58deg) translateY(-18%);
}

.license-slab {
    width: min(980px, 88vw);
    min-height: 560px;
    padding: clamp(28px, 6vw, 68px);
    background:
        radial-gradient(circle at 78% 22%, rgba(63, 255, 203, .24), transparent 12rem),
        linear-gradient(135deg, rgba(243, 220, 166, .13), transparent 22%),
        var(--cartridge-indigo);
    border: 5px solid var(--coin-gold);
    border-radius: 26px 26px 72px 26px;
    box-shadow: 0 44px 90px rgba(0, 0, 0, .66), inset 0 0 0 10px rgba(9, 10, 18, .46);
    transform: rotate(-3deg);
    transition: transform .18s ease-out;
}

.slab-notch { position: absolute; right: 36px; top: 28px; width: 140px; height: 42px; background: var(--vault-black); border: 2px solid rgba(216,169,40,.65); border-radius: 0 0 18px 18px; }
.serial-strip, .validation-code { font-family: "IBM Plex Mono", monospace; color: var(--approval-green); letter-spacing: .16em; font-size: .78rem; animation: blinkCode 2.4s steps(2, end) infinite; }
.license-slab h1 { font-size: clamp(3.1rem, 10vw, 8.7rem); line-height: .9; color: transparent; -webkit-text-stroke: 2px var(--treaty-parchment); text-shadow: 8px 8px 0 rgba(9,10,18,.52), 0 0 34px rgba(216,169,40,.28); margin: 34px 0 20px; }
.engraved-copy { max-width: 680px; font-family: "Fraunces", serif; font-size: clamp(1.22rem, 2vw, 1.75rem); color: rgba(243, 220, 166, .86); }

.orbit-rings { position: absolute; width: min(900px, 80vw); aspect-ratio: 1.35; border: 1px dashed rgba(63,255,203,.28); border-radius: 50%; animation: orbitFrame 18s linear infinite; }
.territory-seal { position: absolute; width: 54px; height: 54px; display: grid; place-items: center; border-radius: 15px; background: #F3DCA6; color: #090A12; font-family: "Bungee"; box-shadow: 0 0 28px rgba(63,255,203,.4); }
.seal-a { left: 8%; top: 20%; } .seal-b { right: 14%; top: 10%; } .seal-c { right: 2%; bottom: 22%; } .seal-d { left: 18%; bottom: 4%; }

.holo-seal {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: "Bungee";
    color: #090A12;
    background: conic-gradient(from var(--foil-angle, 0deg), #3FFFCB, #9A5CFF, #D8A928, #5BE870, #3FFFCB);
    box-shadow: 0 0 45px rgba(63,255,203,.45), inset 0 0 0 12px rgba(255,255,255,.22), inset 0 0 0 20px rgba(9,10,18,.16);
    position: relative;
    overflow: hidden;
}
.holo-seal::before { content: ""; position: absolute; inset: 12px; border-radius: inherit; border: 2px dotted rgba(9,10,18,.55); background: repeating-conic-gradient(rgba(255,255,255,.2) 0 4deg, transparent 4deg 8deg); mix-blend-mode: overlay; }
.holo-seal span { position: relative; z-index: 1; }
.holo-seal.mega { width: min(46vw, 430px); height: min(46vw, 430px); font-size: clamp(1rem, 2.6vw, 2rem); margin: auto; }

.diegetic-button {
    border: 0;
    background: var(--seal-vermilion);
    color: var(--treaty-parchment);
    padding: 16px 24px;
    margin: 20px 0;
    box-shadow: 8px 8px 0 var(--vault-black), inset 0 -6px 0 rgba(9,10,18,.24);
    transform: rotate(-1.5deg);
    cursor: pointer;
}
.diegetic-button:hover { background: var(--approval-green); color: var(--vault-black); transform: rotate(1deg) translateY(-3px); }
.vault-clause, .grant-clause { display: inline-block; padding: 14px 18px; border: 1px solid rgba(216,169,40,.48); background: rgba(9,10,18,.34); }

.intake-gate { grid-template-columns: 1fr 1fr; gap: 36px; background: linear-gradient(135deg, #090A12 0 42%, #1B1F5C 42% 100%); }
.gate-arch { border: 4px solid var(--coin-gold); border-radius: 48% 48% 12px 12px; min-height: 560px; padding: 90px 48px 48px; background: radial-gradient(circle at 50% 0, rgba(91,232,112,.24), transparent 21rem), rgba(9,10,18,.48); }
.gate-light { width: 28px; height: 28px; background: var(--approval-green); border-radius: 50%; display: block; margin-bottom: 28px; box-shadow: 0 0 30px var(--approval-green); animation: pulse 1.8s infinite; }
.cartridge-rack { display: grid; gap: 22px; transform: rotate(3deg); }
.cartridge { min-height: 118px; padding: 22px 22px 22px 120px; position: relative; background: var(--treaty-parchment); color: var(--ink); border: 4px solid var(--vault-black); box-shadow: 12px 12px 0 rgba(216,169,40,.52); font-family: "IBM Plex Mono"; }
.cartridge::before { content: ""; position: absolute; left: 20px; top: 18px; bottom: 18px; width: 74px; background: repeating-linear-gradient(90deg, #D8A928 0 8px, #090A12 8px 12px); }
.cartridge b { font-family: "Bungee"; font-size: 2rem; display: block; color: var(--cartridge-indigo); }
.stamp-machine { position: absolute; right: 12%; bottom: 12%; width: 180px; height: 220px; }
.stamp-handle { width: 40px; height: 120px; margin: auto; background: var(--coin-gold); border-radius: 18px 18px 0 0; }
.stamp-head { height: 72px; display: grid; place-items: center; background: var(--seal-vermilion); color: var(--treaty-parchment); border: 5px solid var(--vault-black); transform: rotate(-7deg); }
.stamp-machine.stamp-now { animation: stampDrop .7s cubic-bezier(.2,1.7,.35,.84); }
.clause-document { background: var(--treaty-parchment); color: var(--ink); padding: 34px; border: 3px solid var(--coin-gold); position: relative; box-shadow: -12px 14px 0 rgba(9,10,18,.35); }
.paper-corner { position: absolute; right: 0; top: 0; border-left: 45px solid var(--coin-gold); border-bottom: 45px solid transparent; }

.rights-labyrinth { background: radial-gradient(circle at 70% 30%, rgba(154,92,255,.22), transparent 24rem), #090A12; }
.labyrinth-board { max-width: 1050px; padding: clamp(28px, 5vw, 70px); background: linear-gradient(45deg, rgba(27,31,92,.88), rgba(9,10,18,.76)); border: 3px double var(--coin-gold); clip-path: polygon(0 7%, 8% 0, 100% 0, 100% 88%, 92% 100%, 0 100%); }
.clause-flips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 34px; }
.flip-card { min-height: 220px; border: 0; background: transparent; color: inherit; position: relative; transform-style: preserve-3d; transition: transform .6s ease; cursor: pointer; }
.flip-card.flipped { transform: rotateY(180deg); }
.flip-card span { position: absolute; inset: 0; display: grid; place-items: center; padding: 22px; backface-visibility: hidden; border: 3px solid var(--coin-gold); background: var(--treaty-parchment); color: var(--ink); font-family: "Bungee"; }
.flip-card .back { transform: rotateY(180deg); font-family: "Fraunces"; font-size: 1.12rem; }
.npc-notary { position: absolute; right: 9%; bottom: 12%; display: grid; justify-items: center; gap: 8px; color: var(--hologram-mint); font-family: "IBM Plex Mono"; }
.npc-notary span { width: 72px; height: 92px; background: linear-gradient(#1B1F5C, #090A12); border-radius: 50% 50% 12px 12px; border: 2px solid var(--coin-gold); }

.territory-table { background: linear-gradient(160deg, #1B1F5C, #090A12 70%); }
.map-scroll { width: min(1120px, 100%); padding: clamp(24px, 5vw, 60px); background: var(--treaty-parchment); color: var(--ink); border: 10px solid var(--coin-gold); box-shadow: 24px 24px 0 rgba(9,10,18,.44); transform: rotate(-1.4deg); }
.territory-map { width: 100%; margin-top: 20px; filter: drop-shadow(0 14px 0 rgba(27,31,92,.22)); }
.region { fill: rgba(27,31,92,.18); stroke: #1B1F5C; stroke-width: 5; transition: fill .45s ease, filter .45s ease; }
.region.glowing { fill: rgba(63,255,203,.62); filter: drop-shadow(0 0 14px #3FFFCB); }
.route { fill: none; stroke: #E94B35; stroke-width: 8; stroke-dasharray: 16 16; stroke-linecap: round; }
.map-node { fill: #D8A928; stroke: #090A12; stroke-width: 4; }
.map-button { position: absolute; right: 10%; bottom: 12%; }

.seal-chamber { place-items: center; background: radial-gradient(circle, rgba(63,255,203,.12), transparent 24rem), linear-gradient(90deg, #090A12, #1B1F5C, #090A12); text-align: center; }
.seal-plinth { max-width: 820px; padding: 44px; border: 2px solid rgba(243,220,166,.3); background: rgba(9,10,18,.45); transition: transform .18s ease-out; }
.seal-plinth p { font-size: clamp(1.2rem, 2.2vw, 1.8rem); color: rgba(243,220,166,.86); }

.royalty-river { background: #090A12; }
.river-ledger { width: min(1080px, 100%); }
.coin-river { position: relative; height: 260px; margin-top: 36px; border-top: 4px dashed rgba(63,255,203,.36); border-bottom: 4px dashed rgba(154,92,255,.36); border-radius: 50%; overflow: hidden; }
.coin { position: absolute; width: 38px; height: 38px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #F3DCA6, #D8A928 55%, #9A5CFF); color: #090A12; display: grid; place-items: center; font-family: "Bungee"; animation: driftCoin var(--speed) linear infinite; top: var(--top); animation-delay: var(--delay); box-shadow: 0 0 18px rgba(216,169,40,.45); }
.ledger-strip { position: absolute; right: 4%; top: 18%; width: 230px; display: grid; grid-template-columns: 1fr; gap: 8px; background: var(--treaty-parchment); color: var(--ink); padding: 22px; font-family: "IBM Plex Mono"; border: 3px solid var(--coin-gold); }
.ledger-strip b { font-family: "Bungee"; color: var(--seal-vermilion); }

.final-grant { place-items: center; background: radial-gradient(circle at 50% 50%, rgba(216,169,40,.18), transparent 30rem), #1B1F5C; }
.certificate { width: min(940px, 92vw); min-height: 620px; position: relative; display: grid; place-items: center; }
.cert-strip { position: absolute; inset: 0; background: var(--treaty-parchment); border: 4px solid var(--coin-gold); transform: translateY(80px); opacity: 0; transition: transform .8s ease, opacity .8s ease; }
.strip-one { clip-path: polygon(0 0, 100% 0, 94% 36%, 3% 30%); }
.strip-two { clip-path: polygon(3% 31%, 94% 36%, 100% 72%, 0 68%); transition-delay: .15s; }
.strip-three { clip-path: polygon(0 68%, 100% 72%, 100% 100%, 0 100%); transition-delay: .3s; }
.certificate.assembled .cert-strip { transform: translateY(0); opacity: 1; }
.cert-content { position: relative; z-index: 1; width: 78%; padding: 46px; color: var(--ink); text-align: center; border: 2px dashed rgba(9,10,18,.28); opacity: 0; transform: scale(.95); transition: opacity .7s ease .65s, transform .7s ease .65s; }
.certificate.assembled .cert-content { opacity: 1; transform: scale(1); }
.certificate-label { color: var(--seal-vermilion); letter-spacing: .22em; }
.cert-content h2 { color: var(--cartridge-indigo); text-shadow: none; }

.approval-stamp { position: fixed; z-index: 30; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-18deg) scale(2.6); color: var(--seal-vermilion); border: 9px solid var(--seal-vermilion); padding: 18px 28px; opacity: 0; pointer-events: none; mix-blend-mode: multiply; }
.approval-stamp.show { animation: bigStamp .72s cubic-bezier(.2,1.65,.32,.95); }
.stamped { position: relative; }
.stamped::after { content: "APPROVED"; position: absolute; right: 16px; bottom: 6px; font-family: "Bungee"; color: rgba(233,75,53,.8); border: 4px solid rgba(233,75,53,.78); padding: 8px 12px; transform: rotate(-10deg); }

@keyframes orbitFrame { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: .45; transform: scale(.82); } }
@keyframes blinkCode { 50% { opacity: .55; } }
@keyframes stampDrop { 0% { transform: translateY(-80px); } 55% { transform: translateY(40px); } 100% { transform: translateY(0); } }
@keyframes bigStamp { 0% { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(3.8); } 45% { opacity: .9; transform: translate(-50%, -50%) rotate(-18deg) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-18deg) scale(1.25); } }
@keyframes driftCoin { from { left: -48px; transform: translateY(0) rotate(0deg); } 50% { transform: translateY(65px) rotate(360deg); } to { left: calc(100% + 48px); transform: translateY(-25px) rotate(720deg); } }

@media (max-width: 860px) {
    .license-spine { width: 64px; }
    .license-questline { margin-left: 64px; }
    .spine-tab { width: 50px; font-size: .46rem; min-height: 52px; }
    .intake-gate { grid-template-columns: 1fr; }
    .clause-flips { grid-template-columns: 1fr; }
    .ledger-strip { position: relative; right: auto; top: auto; margin-top: 24px; width: 100%; }
    .scene { padding: 28px; }
    .license-slab { min-height: auto; }
}