html,
body {
    width: 100%;
    height: 100%;
}

/* Remove default browser spacing */
body {
    margin: 0;
    overflow: hidden;
    background-color: black;
    position: relative;
}

/* Fullscreen Background Image */
.background {
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    z-index: 0;
    transition: filter 0.95s ease, transform 0.95s ease;
}

.mist-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 1;
    background:
        radial-gradient(120vw 54vh at 52% 102%, rgba(198, 188, 168, 0.2) 0%, rgba(104, 96, 88, 0.06) 54%, rgba(0, 0, 0, 0) 100%),
        linear-gradient(to top, rgba(116, 108, 98, 0.2) 0%, rgba(84, 76, 68, 0.09) 28%, rgba(0, 0, 0, 0) 65%);
    transition: opacity 0.7s ease;
}

.smoke-layer {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
    transition: opacity 0.7s ease;
}

.title-layer {
    position: fixed;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    transition: opacity 0.55s ease;
}

.title-stack {
    position: absolute;
    left: 50%;
    top: 47%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: min(86vw, 1043px);
    max-width: 1043px;
    max-height: min(44vh, 520px);
    transform: translate(-50%, -50%);
}

.main-title {
    width: 100%;
    height: auto;
    transform: translateY(14px) scale(0.985);
    opacity: 0;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
    animation:
        title-reveal 1.8s ease-out 0.25s forwards,
        title-float 8.5s ease-in-out 2.1s infinite;
}

.main-title-wrap {
    position: relative;
    width: 100%;
}

.main-title-blood {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(-9px);
    pointer-events: none;
    mix-blend-mode: multiply;
    background:
        radial-gradient(18% 34% at 12% 74%, rgba(129, 16, 16, 0.92) 0%, rgba(104, 10, 10, 0) 82%),
        radial-gradient(20% 34% at 30% 79%, rgba(134, 20, 20, 0.9) 0%, rgba(100, 9, 9, 0) 82%),
        radial-gradient(24% 36% at 55% 81%, rgba(141, 24, 24, 0.9) 0%, rgba(96, 8, 8, 0) 82%),
        radial-gradient(20% 34% at 76% 78%, rgba(127, 15, 15, 0.9) 0%, rgba(100, 9, 9, 0) 82%),
        radial-gradient(16% 32% at 91% 73%, rgba(126, 18, 18, 0.9) 0%, rgba(100, 10, 10, 0) 82%),
        linear-gradient(
            to bottom,
            rgba(96, 7, 8, 0) 0%,
            rgba(112, 12, 13, 0) 56%,
            rgba(130, 17, 18, 0.85) 84%,
            rgba(82, 8, 8, 0.95) 100%
        );
    -webkit-mask-image: url("./img/Title.png");
    mask-image: url("./img/Title.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    transition: opacity 0.75s ease, transform 0.75s ease;
}

.main-title-drips {
    position: absolute;
    left: 0;
    right: 0;
    top: 72%;
    height: 34%;
    pointer-events: none;
    opacity: 0;
    transform: translateY(-6px);
}

.main-title-drips::before,
.main-title-drips::after {
    content: "";
    position: absolute;
    top: 0;
    border-radius: 999px;
    background: linear-gradient(to bottom, rgba(145, 25, 26, 0.96), rgba(96, 8, 8, 0.96));
    box-shadow: 0 0 5px rgba(80, 0, 0, 0.48);
}

.main-title-drips::before {
    left: 27%;
    width: 1.2%;
    height: 72%;
    box-shadow:
        86px 6px 0 -2px rgba(145, 25, 26, 0.95),
        184px 12px 0 -1px rgba(145, 25, 26, 0.95),
        336px -4px 0 -1px rgba(145, 25, 26, 0.95),
        522px 8px 0 -1px rgba(145, 25, 26, 0.95);
}

.main-title-drips::after {
    left: 41%;
    width: 1.45%;
    height: 92%;
    box-shadow:
        130px 10px 0 -1px rgba(145, 25, 26, 0.95),
        264px 8px 0 -2px rgba(145, 25, 26, 0.95),
        422px -3px 0 -1px rgba(145, 25, 26, 0.95);
}

body.intro-blood .main-title {
    filter:
        sepia(1)
        saturate(4.2)
        hue-rotate(-36deg)
        brightness(0.84)
        contrast(1.22)
        drop-shadow(0 6px 14px rgba(72, 0, 0, 0.75));
}

body.intro-blood .main-title-blood {
    opacity: 0.95;
    transform: translateY(0);
    animation: blood-shift 2.7s ease-out forwards;
}

body.intro-blood .main-title-drips {
    opacity: 0.95;
    transform: translateY(0);
    animation: blood-drip 2.9s ease-out forwards;
}

.sub-title {
    width: min(56.2%, 586px);
    height: auto;
    margin-top: calc(clamp(4px, 0.9vh, 10px) + 50px);
    opacity: 0;
    transform: translateY(10px);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
    animation: subtitle-reveal 1.2s ease-out 1.95s forwards;
}

.underline-stroke-wrap {
    width: min(73.8%, 770px);
    margin-top: clamp(8px, 1.2vh, 14px);
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    filter: drop-shadow(0 2px 7px rgba(0, 0, 0, 0.35));
    animation:
        underline-appear 0.01s linear 1.05s forwards,
        underline-stroke 1.5s ease-out 1.05s forwards;
}

.decor-underline {
    width: 100%;
    height: auto;
    display: block;
}

.tap-hint {
    position: absolute;
    left: 50%;
    bottom: clamp(56px, 12vh, 138px);
    width: min(63vw, 766px);
    max-width: 766px;
    max-height: min(10vh, 92px);
    height: auto;
    opacity: 0;
    transform: translate(-50%, 8px);
    filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.42));
    animation:
        tap-reveal 1.1s ease-out 2.55s forwards,
        tap-breathe 3.6s ease-in-out 3.9s infinite;
}

.smoke-index-panel {
    --smoke-index-level: 64;
    --smoke-index-accent: rgba(199, 147, 78, 0.92);
    --smoke-panel-x: 0px;
    --smoke-panel-y: 12px;
    --smoke-panel-tilt: -1.6deg;
    position: absolute;
    right: clamp(18px, 2.7vw, 42px);
    top: clamp(18px, 3.2vh, 34px);
    width: min(24vw, 320px);
    padding: 12px 14px 11px;
    border: 1px solid rgba(176, 132, 76, 0.4);
    border-radius: 12px;
    background:
        linear-gradient(180deg, rgba(53, 35, 24, 0.11), rgba(12, 8, 7, 0) 38%),
        radial-gradient(circle at 18% 15%, rgba(255, 227, 182, 0.08), rgba(255, 227, 182, 0) 34%),
        linear-gradient(180deg, rgba(22, 15, 12, 0.58), rgba(10, 7, 6, 0.66));
    box-shadow:
        0 12px 24px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 228, 180, 0.05),
        inset 0 0 0 1px rgba(84, 56, 30, 0.2);
    backdrop-filter: blur(1.2px);
    pointer-events: none;
    opacity: 0;
    transform: translate(var(--smoke-panel-x), var(--smoke-panel-y)) rotate(var(--smoke-panel-tilt));
    animation:
        smoke-index-reveal 1s ease-out 2.05s forwards,
        smoke-index-hover 6.8s ease-in-out 3.35s infinite;
}

.smoke-index-panel::before {
    content: "";
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(201, 159, 97, 0.1);
    border-radius: 9px;
}

.smoke-index-panel::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    top: 8px;
    height: 1px;
    background: linear-gradient(90deg, rgba(212, 170, 104, 0), rgba(212, 170, 104, 0.38), rgba(212, 170, 104, 0));
}

.smoke-index-header,
.smoke-index-readout,
.smoke-index-track,
.smoke-index-scale {
    position: relative;
    z-index: 1;
}

.smoke-index-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.smoke-index-kicker,
.smoke-index-source,
.smoke-index-value-wrap,
.smoke-index-label {
    margin: 0;
}

.smoke-index-kicker {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(11px, 0.72vw, 13px);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(230, 201, 152, 0.84);
}

.smoke-index-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 234, 206, 0.96), rgba(165, 49, 32, 0.94) 72%);
    box-shadow: 0 0 0 3px rgba(88, 21, 16, 0.24), 0 0 12px rgba(143, 39, 23, 0.38);
    animation: smoke-index-dot 1.9s ease-in-out infinite;
}

.smoke-index-source {
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(11px, 0.78vw, 13px);
    font-style: italic;
    color: rgba(212, 181, 129, 0.76);
    text-align: right;
}

.smoke-index-readout {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.smoke-index-value-wrap {
    display: inline-flex;
    align-items: end;
    gap: 4px;
    line-height: 1;
}

.smoke-index-value {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(34px, 2.9vw, 46px);
    line-height: 0.9;
    letter-spacing: 0.02em;
    color: var(--smoke-index-accent);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.56),
        0 0 16px var(--smoke-index-accent);
}

.smoke-index-unit {
    padding-bottom: 4px;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(12px, 0.82vw, 14px);
    letter-spacing: 0.08em;
    color: rgba(220, 187, 133, 0.74);
}

.smoke-index-label {
    max-width: 46%;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(16px, 1.05vw, 19px);
    line-height: 1.05;
    font-style: italic;
    text-align: right;
    color: rgba(238, 212, 170, 0.86);
}

.smoke-index-track {
    margin-top: 10px;
    height: 18px;
    border: 1px solid rgba(186, 143, 84, 0.48);
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(12, 8, 6, 0.9), rgba(28, 18, 13, 0.96));
    overflow: hidden;
    box-shadow:
        inset 0 1px 0 rgba(255, 236, 206, 0.05),
        inset 0 -2px 5px rgba(0, 0, 0, 0.3);
}

.smoke-index-track::before {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: inherit;
    background:
        linear-gradient(
            90deg,
            rgba(208, 193, 165, 0.42) 0%,
            rgba(199, 148, 84, 0.54) 34%,
            rgba(143, 78, 42, 0.66) 68%,
            rgba(92, 20, 16, 0.82) 100%
        );
}

.smoke-index-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255, 228, 190, 0.16) 0 1px,
            transparent 1px calc(25% - 1px),
            rgba(255, 228, 190, 0.2) calc(25% - 1px) 25%
        );
    opacity: 0.84;
}

.smoke-index-fill {
    position: absolute;
    inset: 4px auto 4px 4px;
    width: max(14px, calc(var(--smoke-index-level) * 1%));
    border-radius: 999px;
    background:
        linear-gradient(
            90deg,
            rgba(229, 216, 191, 0.95) 0%,
            rgba(223, 180, 106, 0.98) 32%,
            rgba(166, 93, 49, 0.98) 68%,
            rgba(116, 24, 19, 0.98) 100%
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 245, 223, 0.28),
        0 0 16px var(--smoke-index-accent);
}

.smoke-index-fill::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 247, 229, 0.26), rgba(255, 247, 229, 0));
}

.smoke-index-marker {
    position: absolute;
    left: calc(var(--smoke-index-level) * 1%);
    top: 50%;
    width: 11px;
    height: 11px;
    border: 1px solid rgba(255, 239, 213, 0.82);
    border-radius: 2px;
    background: radial-gradient(circle at 35% 32%, rgba(255, 248, 231, 0.98), var(--smoke-index-accent) 70%, rgba(84, 21, 17, 0.98));
    box-shadow:
        0 0 0 4px rgba(10, 7, 6, 0.56),
        0 0 16px var(--smoke-index-accent);
    transform: translate(-50%, -50%) rotate(45deg);
}

.smoke-index-marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -7px;
    width: 1px;
    height: 6px;
    background: rgba(245, 225, 190, 0.78);
    transform: translateX(-50%) rotate(-45deg);
    transform-origin: center bottom;
}

.smoke-index-scale {
    margin-top: 6px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(8px, 0.56vw, 10px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(208, 178, 127, 0.72);
}

.smoke-index-scale span:nth-child(2),
.smoke-index-scale span:nth-child(3) {
    text-align: center;
}

.smoke-index-scale span:last-child {
    text-align: right;
}

body.intro-blood .smoke-index-panel {
    border-color: rgba(121, 31, 19, 0.5);
    box-shadow:
        0 14px 28px rgba(0, 0, 0, 0.34),
        0 0 0 1px rgba(122, 24, 18, 0.12),
        inset 0 1px 0 rgba(255, 216, 186, 0.05),
        inset 0 0 0 1px rgba(98, 25, 18, 0.24);
}

body.intro-blood .smoke-index-live-dot {
    box-shadow: 0 0 0 3px rgba(101, 20, 16, 0.3), 0 0 14px rgba(167, 34, 24, 0.46);
}

.screen-one {
    position: fixed;
    inset: 0;
    z-index: 4;
    background: #0e0b09;
    opacity: 0;
    transform: translateY(22px);
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.68s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen-two {
    position: fixed;
    inset: 0;
    z-index: 5;
    background: #0b0706;
    opacity: 0;
    transform: translateY(18px) scale(1.01);
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.72s ease, transform 0.82s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen-three {
    position: fixed;
    inset: 0;
    z-index: 6;
    background: #0a0705;
    opacity: 0;
    transform: translateY(18px) scale(1.01);
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.72s ease, transform 0.82s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen-four {
    position: fixed;
    inset: 0;
    z-index: 7;
    background: #090604;
    opacity: 0;
    transform: translateY(18px) scale(1.01);
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.72s ease, transform 0.82s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.screen-three-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.9) saturate(0.95);
    opacity: 0.56;
    transform: scale(1.02);
    transition:
        opacity 1.02s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        transform 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        filter 1.05s ease;
}

.screen-three-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.three-kicker,
.three-subtitle {
    opacity: 0;
}

.three-kicker {
    position: absolute;
    top: 6.1%;
    left: 50%;
    width: min(78vw, 980px);
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translate(-50%, 12px);
    transition: opacity 0.56s ease 0.12s, transform 0.7s ease 0.12s;
    z-index: 2;
}

.three-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(196, 151, 89, 0),
        rgba(215, 170, 106, 0.86),
        rgba(196, 151, 89, 0)
    );
}

.three-kicker h2 {
    margin: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(27px, 2.5vw, 40px);
    line-height: 0.98;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e4c58a;
    white-space: nowrap;
}

.three-subtitle {
    position: absolute;
    top: 13.8%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, 10px);
    font-family: "Times New Roman", Georgia, serif;
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 24px);
    line-height: 1.15;
    color: #ddbe85;
    white-space: nowrap;
    transition: opacity 0.52s ease 0.22s, transform 0.66s ease 0.22s;
    z-index: 2;
}

.three-hotspots {
    position: absolute;
    inset: 0;
    z-index: 2;
}

.three-hotspot {
    position: absolute;
    width: clamp(186px, 14.5vw, 248px);
    height: clamp(118px, 10.8vh, 164px);
    border: 0;
    border-radius: 18px;
    background: transparent;
    cursor: pointer;
    opacity: 0;
    transform: translate(-50%, -50%) translateY(10px);
    box-shadow: none;
    transition:
        opacity 0.56s ease,
        transform 0.68s ease,
        border-color 0.26s ease,
        box-shadow 0.26s ease,
        background 0.26s ease;
    -webkit-tap-highlight-color: transparent;
}

.three-hotspot:nth-child(1) { transition-delay: 0.18s; }
.three-hotspot:nth-child(2) { transition-delay: 0.25s; }
.three-hotspot:nth-child(3) { transition-delay: 0.32s; }

.three-hotspot:hover,
.three-hotspot:focus-visible,
.three-hotspot.is-active {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.three-hotspot:focus-visible {
    outline: 2px solid rgba(246, 210, 147, 0.9);
    outline-offset: 2px;
}

.scroll-panel {
    position: absolute;
    left: 50%;
    top: 47%;
    width: min(76vw, 920px);
    padding: clamp(18px, 2vh, 24px) clamp(18px, 2vw, 30px);
    border: 1px solid rgba(109, 70, 35, 0.74);
    background:
        radial-gradient(circle at 0 8px, rgba(118, 77, 41, 0.34) 0 2.8px, rgba(255, 243, 214, 0) 3.2px) left top / 10px 22px repeat-y,
        radial-gradient(circle at 100% 12px, rgba(118, 77, 41, 0.34) 0 2.8px, rgba(255, 243, 214, 0) 3.2px) right top / 10px 24px repeat-y,
        radial-gradient(150% 90% at 50% -8%, rgba(255, 243, 214, 0.74), rgba(255, 243, 214, 0) 62%),
        radial-gradient(120% 85% at 50% 112%, rgba(146, 92, 47, 0.2), rgba(146, 92, 47, 0) 72%),
        repeating-linear-gradient(
            0deg,
            rgba(120, 80, 43, 0.08) 0 1px,
            rgba(120, 80, 43, 0) 1px 5px
        ),
        linear-gradient(
            to bottom,
            rgba(247, 227, 189, 0.97) 0%,
            rgba(229, 196, 143, 0.95) 52%,
            rgba(205, 165, 109, 0.94) 100%
        );
    color: #2e1a0f;
    box-shadow:
        0 24px 42px rgba(0, 0, 0, 0.52),
        0 0 0 1px rgba(74, 46, 21, 0.24),
        inset 0 0 0 1px rgba(251, 232, 197, 0.55),
        inset 0 18px 28px rgba(255, 240, 211, 0.22),
        inset 0 -14px 24px rgba(112, 70, 35, 0.12);
    border-radius: 8px 6px 10px 7px;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -46%) scale(0.95);
    transition: opacity 0.36s ease, transform 0.46s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 3;
    max-height: min(54vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(113, 68, 32, 0.72) rgba(209, 171, 112, 0.22);
}

.scroll-panel::before {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    height: 14px;
    background: linear-gradient(to right, rgba(157, 114, 64, 0.76), rgba(233, 198, 140, 0.82), rgba(157, 114, 64, 0.76));
    border: 1px solid rgba(101, 64, 30, 0.48);
    box-shadow:
        inset 0 1px 2px rgba(255, 239, 208, 0.32),
        0 2px 6px rgba(46, 27, 12, 0.18);
}

.scroll-panel::before {
    top: -12px;
    border-radius: 999px 999px 3px 3px;
}

.scroll-panel::after {
    content: none;
}

.scroll-panel.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

.scroll-close {
    position: absolute;
    right: 10px;
    top: 8px;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(96, 21, 18, 0.82);
    border-radius: 50%;
    background:
        radial-gradient(circle at 28% 24%, rgba(255, 194, 182, 0.52), rgba(255, 194, 182, 0) 38%),
        radial-gradient(circle at 70% 70%, rgba(89, 10, 10, 0.95), rgba(64, 7, 7, 0.96));
    color: rgba(255, 235, 209, 0.92);
    font-family: "Times New Roman", Georgia, serif;
    font-size: 24px;
    line-height: 1;
    display: grid;
    place-items: center;
    cursor: pointer;
    box-shadow:
        0 7px 14px rgba(0, 0, 0, 0.36),
        inset 0 1px 1px rgba(255, 224, 214, 0.34),
        inset 0 -4px 8px rgba(48, 5, 5, 0.46);
    text-shadow: 0 1px 1px rgba(48, 8, 8, 0.46);
    transform: rotate(-7deg);
    transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.scroll-close::before {
    content: "";
    position: absolute;
    inset: 6px;
    border: 1px dashed rgba(255, 220, 197, 0.36);
    border-radius: 50%;
}

.scroll-close:hover {
    transform: rotate(-4deg) scale(1.04);
    box-shadow:
        0 9px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 224, 214, 0.38),
        inset 0 -4px 8px rgba(48, 5, 5, 0.5);
}

.scroll-close:focus-visible {
    outline: 2px solid rgba(255, 222, 168, 0.92);
    outline-offset: 2px;
}

.scroll-kicker {
    margin: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(15px, 1vw, 20px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(92, 54, 27, 0.9);
    text-shadow: 0 1px 0 rgba(255, 234, 201, 0.44);
}

.scroll-era {
    margin: clamp(6px, 0.8vh, 10px) 0 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(13px, 0.9vw, 17px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(96, 57, 29, 0.88);
    text-shadow: 0 1px 0 rgba(255, 236, 206, 0.42);
}

.scroll-title {
    margin: clamp(4px, 0.7vh, 8px) 0 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(30px, 2.4vw, 44px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #432615;
    text-shadow: 0 1px 0 rgba(255, 233, 199, 0.4);
}

.scroll-copy {
    margin: clamp(10px, 1.2vh, 14px) 0 0;
    display: grid;
    gap: clamp(8px, 1vh, 12px);
}

.scroll-copy p {
    margin: 0;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(18px, 1.3vw, 24px);
    line-height: 1.26;
    color: #462818;
    text-shadow: 0 1px 0 rgba(255, 237, 208, 0.28);
}

.scroll-copy p.is-lead {
    font-size: clamp(19px, 1.36vw, 25px);
    line-height: 1.24;
}

.scroll-copy p.is-lead::first-letter {
    float: left;
    margin: 1px 7px 0 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(34px, 2.5vw, 48px);
    line-height: 0.86;
    color: #6c3d1f;
}

.scroll-section-title {
    margin: clamp(4px, 0.8vh, 10px) 0 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(118, 72, 35, 0.42);
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(18px, 1.2vw, 24px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5a321a;
}

.scroll-stats {
    margin: clamp(10px, 1.2vh, 14px) 0 0;
    padding: 0;
    list-style: none;
}

.scroll-stats li {
    position: relative;
    margin: 0;
    padding: clamp(5px, 0.8vh, 8px) 0 clamp(5px, 0.8vh, 8px) 24px;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(17px, 1.2vw, 23px);
    line-height: 1.18;
    color: #452818;
}

.scroll-stats li + li {
    border-top: 1px dashed rgba(118, 73, 37, 0.24);
}

.scroll-stats li::before {
    content: "\2022";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #6f3e1f;
}

.scroll-panel::-webkit-scrollbar {
    width: 10px;
}

.scroll-panel::-webkit-scrollbar-track {
    background: rgba(214, 176, 118, 0.24);
    border-radius: 999px;
}

.scroll-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(122, 75, 38, 0.82), rgba(91, 55, 27, 0.86));
    border: 1px solid rgba(78, 43, 20, 0.48);
    border-radius: 999px;
}

.three-back-btn {
    position: absolute;
    top: clamp(14px, 2.2vh, 26px);
    left: clamp(12px, 1.5vw, 22px);
    z-index: 4;
}

.screen-four-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.8) saturate(0.94);
    opacity: 0.54;
    transform: scale(1.02);
    transition:
        opacity 1.02s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        transform 1.12s cubic-bezier(0.22, 1, 0.36, 1) 0.06s,
        filter 1.05s ease;
}

.screen-four-accent {
    position: absolute;
    z-index: 1;
    height: auto;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    filter:
        sepia(0.44)
        saturate(0.78)
        brightness(0.72)
        contrast(1.05)
        drop-shadow(0 12px 24px rgba(0, 0, 0, 0.34));
    mix-blend-mode: screen;
    transition:
        opacity 0.88s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
        transform 0.96s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
        filter 0.4s ease;
    -webkit-mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 78%);
    mask-image: radial-gradient(circle at center, rgba(0, 0, 0, 1) 48%, rgba(0, 0, 0, 0) 78%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.screen-four-cap-art {
    top: clamp(90px, 15vh, 190px);
    left: clamp(10px, 2vw, 30px);
    width: clamp(320px, 31vw, 520px);
}

.screen-four-blades-art {
    left: clamp(22px, 2vw, 40px);
    bottom: clamp(28px, 5vh, 72px);
    width: clamp(360px, 32vw, 560px);
    transition-delay: 0.3s;
}

.screen-four-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: #e6c890;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.four-kicker,
.four-subtitle,
.legacy-panel,
.four-hotspot {
    opacity: 0;
}

.four-kicker {
    position: absolute;
    top: 6.1%;
    left: 50%;
    width: min(78vw, 980px);
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translate(-50%, 12px);
    transition: opacity 0.56s ease 0.12s, transform 0.7s ease 0.12s;
    z-index: 2;
}

.four-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(196, 151, 89, 0),
        rgba(215, 170, 106, 0.86),
        rgba(196, 151, 89, 0)
    );
}

.four-kicker h2 {
    margin: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(27px, 2.5vw, 40px);
    line-height: 0.98;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e4c58a;
    white-space: nowrap;
}

.four-subtitle {
    position: absolute;
    top: 13.8%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, 10px);
    font-family: "Times New Roman", Georgia, serif;
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 24px);
    line-height: 1.15;
    color: #ddbe85;
    text-align: center;
    white-space: nowrap;
    transition: opacity 0.52s ease 0.22s, transform 0.66s ease 0.22s;
    z-index: 2;
}

.four-hotspots {
    position: absolute;
    inset: 0;
    z-index: 3;
}

.four-hotspot {
    position: absolute;
    width: clamp(54px, 4vw, 66px);
    height: clamp(54px, 4vw, 66px);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    transform: translate(-50%, -50%) translateY(10px) scale(0.94);
    transition:
        opacity 0.56s ease,
        transform 0.68s ease,
        filter 0.26s ease;
    -webkit-tap-highlight-color: transparent;
}

.four-hotspot:nth-child(1) { transition-delay: 0.18s; }
.four-hotspot:nth-child(2) { transition-delay: 0.25s; }
.four-hotspot:nth-child(3) { transition-delay: 0.32s; }
.four-hotspot:nth-child(4) { transition-delay: 0.39s; }

.four-hotspot-pulse,
.four-hotspot-core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

.four-hotspot-pulse {
    border: 1px solid rgba(238, 190, 117, 0.6);
    background: radial-gradient(circle, rgba(241, 198, 130, 0.16), rgba(241, 198, 130, 0) 68%);
    animation: legacy-ping 2.8s ease-out infinite;
}

.four-hotspot-core {
    inset: 11px;
    border: 1px solid rgba(248, 205, 141, 0.9);
    background:
        radial-gradient(circle at 32% 30%, rgba(255, 239, 207, 0.82), rgba(255, 239, 207, 0) 44%),
        radial-gradient(circle at 50% 50%, rgba(185, 124, 55, 0.98), rgba(102, 60, 27, 0.98));
    box-shadow:
        0 0 0 1px rgba(111, 70, 33, 0.3),
        0 0 16px rgba(231, 179, 96, 0.34);
}

.four-hotspot-label {
    position: absolute;
    left: 50%;
    bottom: calc(100% + 10px);
    padding: 7px 12px;
    border: 1px solid rgba(201, 158, 95, 0.56);
    background: linear-gradient(to bottom, rgba(31, 22, 17, 0.94), rgba(12, 9, 8, 0.96));
    color: #f0d39d;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(12px, 0.92vw, 15px);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.34),
        inset 0 0 0 1px rgba(118, 89, 52, 0.26);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 8px);
    transition: opacity 0.22s ease, transform 0.26s ease;
}

.four-hotspot:hover,
.four-hotspot:focus-visible,
.four-hotspot.is-active {
    filter: drop-shadow(0 0 12px rgba(242, 191, 105, 0.34));
}

.four-hotspot:hover .four-hotspot-label,
.four-hotspot:focus-visible .four-hotspot-label,
.four-hotspot.is-active .four-hotspot-label {
    opacity: 1;
    transform: translate(-50%, 0);
}

.four-hotspot.is-active .four-hotspot-pulse {
    border-color: rgba(249, 213, 146, 0.82);
    animation-duration: 2.05s;
}

.four-hotspot.is-active .four-hotspot-core {
    box-shadow:
        0 0 0 1px rgba(111, 70, 33, 0.4),
        0 0 22px rgba(243, 194, 110, 0.46);
}

.four-hotspot:focus-visible {
    outline: 2px solid rgba(246, 210, 147, 0.92);
    outline-offset: 3px;
}

.legacy-panel {
    position: absolute;
    right: clamp(18px, 4.4vw, 72px);
    bottom: clamp(32px, 7.6vh, 86px);
    width: min(36vw, 500px);
    padding: clamp(16px, 2vh, 22px) clamp(18px, 2vw, 26px);
    border: 1px solid rgba(109, 70, 35, 0.74);
    background:
        radial-gradient(circle at 0 8px, rgba(118, 77, 41, 0.34) 0 2.8px, rgba(255, 243, 214, 0) 3.2px) left top / 10px 22px repeat-y,
        radial-gradient(circle at 100% 12px, rgba(118, 77, 41, 0.34) 0 2.8px, rgba(255, 243, 214, 0) 3.2px) right top / 10px 24px repeat-y,
        radial-gradient(150% 90% at 50% -8%, rgba(255, 243, 214, 0.72), rgba(255, 243, 214, 0) 62%),
        linear-gradient(
            to bottom,
            rgba(247, 227, 189, 0.96) 0%,
            rgba(229, 196, 143, 0.94) 52%,
            rgba(205, 165, 109, 0.94) 100%
        );
    color: #2f1b10;
    box-shadow:
        0 24px 42px rgba(0, 0, 0, 0.42),
        0 0 0 1px rgba(74, 46, 21, 0.24),
        inset 0 0 0 1px rgba(251, 232, 197, 0.55),
        inset 0 18px 28px rgba(255, 240, 211, 0.22),
        inset 0 -14px 24px rgba(112, 70, 35, 0.12);
    border-radius: 8px 6px 10px 7px;
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    transition: opacity 0.56s ease 0.42s, transform 0.72s ease 0.42s;
    max-height: min(54vh, 620px);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(113, 68, 32, 0.72) rgba(209, 171, 112, 0.22);
}

.legacy-panel-kicker {
    margin: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(15px, 1vw, 20px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(92, 54, 27, 0.9);
    text-shadow: 0 1px 0 rgba(255, 234, 201, 0.44);
}

.legacy-panel-title {
    margin: clamp(4px, 0.7vh, 8px) 0 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(30px, 2.4vw, 42px);
    line-height: 0.95;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #432615;
    text-shadow: 0 1px 0 rgba(255, 233, 199, 0.4);
}

.legacy-panel-era {
    margin: clamp(6px, 0.8vh, 10px) 0 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(13px, 0.9vw, 17px);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(96, 57, 29, 0.88);
    text-shadow: 0 1px 0 rgba(255, 236, 206, 0.42);
}

.legacy-panel-copy {
    margin: clamp(10px, 1.2vh, 14px) 0 0;
    display: grid;
    gap: clamp(8px, 1vh, 12px);
}

.legacy-panel-copy p {
    margin: 0;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(18px, 1.3vw, 24px);
    line-height: 1.24;
    color: #462818;
    text-shadow: 0 1px 0 rgba(255, 237, 208, 0.28);
}

.legacy-panel-section {
    margin: clamp(8px, 1vh, 12px) 0 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(118, 72, 35, 0.42);
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(18px, 1.2vw, 24px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #5a321a;
}

.legacy-panel-stats {
    margin: clamp(10px, 1.2vh, 14px) 0 0;
    padding: 0;
    list-style: none;
}

.legacy-panel-stats li {
    position: relative;
    margin: 0;
    padding: clamp(5px, 0.8vh, 8px) 0 clamp(5px, 0.8vh, 8px) 24px;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(17px, 1.2vw, 23px);
    line-height: 1.18;
    color: #452818;
}

.legacy-panel-stats li + li {
    border-top: 1px dashed rgba(118, 73, 37, 0.24);
}

.legacy-panel-stats li::before {
    content: "\2022";
    position: absolute;
    left: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: #6f3e1f;
}

.legacy-panel::-webkit-scrollbar {
    width: 10px;
}

.legacy-panel::-webkit-scrollbar-track {
    background: rgba(214, 176, 118, 0.24);
    border-radius: 999px;
}

.legacy-panel::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, rgba(122, 75, 38, 0.82), rgba(91, 55, 27, 0.86));
    border: 1px solid rgba(78, 43, 20, 0.48);
    border-radius: 999px;
}

.four-back-btn {
    position: absolute;
    top: clamp(14px, 2.2vh, 26px);
    left: clamp(12px, 1.5vw, 22px);
    z-index: 4;
}

.screen-two-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.92) saturate(0.96);
    opacity: 0.52;
    transform: scale(1.018);
    transition:
        opacity 1.02s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
        transform 1.16s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
        filter 1.1s ease;
}

.screen-two-corner {
    --sx: 0px;
    --sy: 10px;
    --delay: 0.24s;
    --corner-opacity: 0.68;
    position: absolute;
    z-index: 1;
    height: auto;
    display: block;
    pointer-events: none;
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0.96);
    filter: saturate(1.08) contrast(1.04) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.48));
    transition:
        opacity 0.86s cubic-bezier(0.22, 1, 0.36, 1) var(--delay),
        transform 0.98s cubic-bezier(0.22, 1, 0.36, 1) var(--delay);
}

.screen-two-cap {
    top: clamp(48px, 6.8vh, 94px);
    left: clamp(-10px, 0.2vw, 10px);
    width: clamp(300px, 31vw, 510px);
    --sx: -12px;
    --sy: 10px;
    --delay: 0.22s;
    --corner-opacity: 0.66;
}

.screen-two-blades {
    left: clamp(2px, 0.9vw, 16px);
    bottom: clamp(108px, 15vh, 190px);
    width: clamp(308px, 32vw, 520px);
    --sx: -10px;
    --sy: 12px;
    --delay: 0.3s;
    --corner-opacity: 0.6;
}

.screen-two-gambling {
    bottom: clamp(16px, 2.4vh, 32px);
    right: clamp(8px, 1.6vw, 24px);
    width: clamp(300px, 32vw, 520px);
    --sx: 12px;
    --sy: 11px;
    --delay: 0.28s;
    --corner-opacity: 0.67;
}

.screen-two-copy {
    position: absolute;
    inset: 0;
    z-index: 2;
    color: #e5c88e;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.72);
}

.two-kicker,
.two-subtitle,
.zone-label,
.crime-panel,
.territory-panel {
    opacity: 0;
}

.two-kicker {
    position: absolute;
    top: 6.2%;
    left: 50%;
    width: min(78vw, 980px);
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translate(-50%, 12px);
    transition: opacity 0.56s ease 0.14s, transform 0.7s ease 0.14s;
}

.two-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(196, 151, 89, 0),
        rgba(215, 170, 106, 0.86),
        rgba(196, 151, 89, 0)
    );
}

.two-kicker h2 {
    margin: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(27px, 2.5vw, 40px);
    line-height: 0.98;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e4c58a;
    white-space: nowrap;
}

.two-kicker h2 span {
    font-size: 0.62em;
    opacity: 0.96;
}

.two-subtitle {
    position: absolute;
    top: 13.8%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, 10px);
    font-family: "Times New Roman", Georgia, serif;
    font-style: italic;
    font-size: clamp(16px, 1.4vw, 24px);
    line-height: 1.15;
    color: #ddbe85;
    white-space: nowrap;
    transition: opacity 0.52s ease 0.28s, transform 0.66s ease 0.28s;
}

.zone-label {
    position: absolute;
    display: inline-block;
    padding: 0;
    border: 0;
    background: none;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(22px, 1.72vw, 30px);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(234, 202, 143, 0.78);
    text-shadow:
        0 2px 6px rgba(0, 0, 0, 0.78),
        0 0 8px rgba(163, 117, 59, 0.2);
    pointer-events: none;
    transform: translateY(8px);
    transition:
        opacity 0.56s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
        color 0.36s ease,
        text-shadow 0.36s ease;
}

.zone-label.is-active {
    color: rgba(249, 219, 157, 0.98);
    text-shadow:
        0 2px 7px rgba(0, 0, 0, 0.84),
        0 0 14px rgba(245, 181, 78, 0.54);
    animation: zone-breathe 2.9s ease-in-out infinite;
}

.zone-south { left: 16%; top: 34%; transition-delay: 0.34s; }
.zone-red { left: 41.5%; top: 29.2%; transition-delay: 0.4s; }
.zone-brooklyn { left: 43.3%; top: 42.8%; transition-delay: 0.46s; }

.crime-panel {
    position: absolute;
    right: 4.4%;
    top: 20.3%;
    width: min(32vw, 420px);
    border: 1px solid rgba(189, 144, 85, 0.46);
    background: linear-gradient(to bottom, rgba(13, 10, 8, 0.56), rgba(10, 8, 7, 0.84));
    padding: clamp(12px, 1.55vh, 18px) clamp(12px, 1.2vw, 16px);
    transform: translateY(14px);
    transition: opacity 0.56s ease 0.56s, transform 0.7s ease 0.56s;
}

.crime-panel h3 {
    margin: 0 0 clamp(8px, 1vh, 12px);
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(28px, 2.2vw, 38px);
    line-height: 1;
    letter-spacing: 0.035em;
    text-transform: uppercase;
    color: #ebca8e;
}

.crime-panel ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.crime-panel li {
    margin: 0;
    padding: clamp(8px, 1.04vh, 12px) 0;
}

.crime-panel li + li {
    border-top: 1px solid rgba(176, 135, 80, 0.34);
}

.crime-panel strong {
    display: block;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(22px, 1.6vw, 30px);
    line-height: 1.02;
    color: #e7c88f;
}

.crime-panel span {
    display: block;
    margin-top: 4px;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(14px, 1vw, 18px);
    line-height: 1.15;
    color: #d9ba84;
}

.territory-panel {
    position: absolute;
    left: 50%;
    bottom: 8.6%;
    width: min(90vw, 1100px);
    padding: clamp(12px, 1.7vh, 18px) clamp(12px, 1.3vw, 18px);
    border: 1px solid rgba(177, 134, 80, 0.42);
    background: linear-gradient(to bottom, rgba(12, 10, 8, 0.52), rgba(7, 6, 5, 0.74));
    transform: translate(-50%, 12px);
    transition: opacity 0.58s ease 0.7s, transform 0.72s ease 0.7s;
}

.two-zone-title {
    margin: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(22px, 1.6vw, 30px);
    line-height: 1;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #eccb8f;
}

.two-zone-text {
    margin: clamp(8px, 1vh, 12px) 0 0;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(15px, 1.05vw, 20px);
    line-height: 1.25;
    color: #ddbf88;
    max-width: 72ch;
}

.two-actions {
    margin-top: clamp(10px, 1.3vh, 14px);
    display: flex;
    gap: clamp(8px, 1vw, 14px);
    flex-wrap: wrap;
}

.two-btn {
    position: relative;
    padding: clamp(10px, 1.1vh, 13px) clamp(14px, 1.3vw, 20px);
    min-width: clamp(170px, 15vw, 220px);
    border: 1px solid rgba(196, 151, 92, 0.56);
    background: linear-gradient(to bottom, rgba(33, 24, 19, 0.85), rgba(14, 10, 9, 0.92));
    color: #e7c98f;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(14px, 0.96vw, 18px);
    letter-spacing: 0.045em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.62);
    box-shadow: inset 0 0 0 1px rgba(120, 90, 52, 0.34);
    transition:
        transform 0.26s ease,
        border-color 0.26s ease,
        box-shadow 0.26s ease,
        background 0.26s ease,
        color 0.26s ease;
}

.two-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        rgba(255, 226, 160, 0) 0%,
        rgba(255, 226, 160, 0.28) 42%,
        rgba(255, 226, 160, 0) 84%
    );
    transform: translateX(-138%);
    transition: transform 0.56s ease;
}

.two-btn:hover {
    transform: translateY(-2px) scale(1.012);
    border-color: rgba(236, 191, 123, 0.9);
    box-shadow:
        0 8px 14px rgba(0, 0, 0, 0.38),
        inset 0 0 0 1px rgba(185, 135, 72, 0.48),
        0 0 16px rgba(236, 185, 102, 0.24);
}

.two-btn:hover::before {
    transform: translateX(150%);
}

.two-btn.is-active {
    border-color: rgba(233, 189, 120, 0.95);
    background: linear-gradient(to bottom, rgba(114, 77, 36, 0.9), rgba(56, 37, 17, 0.96));
    color: #ffe1a8;
}

.two-btn-ghost {
    min-width: clamp(130px, 10vw, 160px);
    background: linear-gradient(to bottom, rgba(26, 20, 17, 0.74), rgba(12, 10, 8, 0.9));
}

.two-btn-chevron {
    width: clamp(54px, 3.8vw, 62px);
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    background:
        radial-gradient(circle at 30% 24%, rgba(238, 194, 128, 0.2), rgba(238, 194, 128, 0) 54%),
        linear-gradient(to bottom, rgba(34, 24, 19, 0.92), rgba(13, 10, 8, 0.96));
}

.two-btn-chevron-icon {
    width: clamp(20px, 1.35vw, 24px);
    height: clamp(20px, 1.35vw, 24px);
    fill: none;
    stroke: currentColor;
    stroke-width: 2.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
    transition: transform 0.22s ease;
}

.two-btn-chevron:hover .two-btn-chevron-icon {
    transform: translateX(-2px);
}

.two-btn:focus-visible {
    outline: 2px solid rgba(246, 210, 147, 0.92);
    outline-offset: 2px;
}

.screen-one-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.screen-one-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.85;
    animation: network-sway 8.2s ease-in-out infinite;
}

.screen-one-copy {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    color: #e7c98d;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65);
}

.copy-kicker,
.copy-kicker-sub,
.copy-title,
.copy-subtitle,
.copy-right-panel,
.copy-footnote,
.copy-actions {
    opacity: 0;
}

.copy-kicker {
    position: absolute;
    top: 4.5%;
    left: 50%;
    width: min(74vw, 900px);
    display: flex;
    align-items: center;
    gap: 14px;
    transform: translate(-50%, 12px);
    transition: opacity 0.55s ease 0.12s, transform 0.7s ease 0.12s;
}

.copy-rule {
    flex: 1;
    height: 2px;
    background: linear-gradient(
        to right,
        rgba(191, 145, 84, 0),
        rgba(211, 166, 104, 0.85),
        rgba(191, 145, 84, 0)
    );
}

.copy-kicker h2 {
    margin: 0;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(22px, 2.35vw, 36px);
    line-height: 0.96;
    letter-spacing: 0.045em;
    color: #debc82;
    text-transform: uppercase;
    white-space: nowrap;
}

.copy-kicker-sub {
    position: absolute;
    top: 8.5%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, 10px);
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(9px, 0.82vw, 13px);
    letter-spacing: 0.11em;
    color: #d3b276;
    white-space: nowrap;
    transition: opacity 0.48s ease 0.22s, transform 0.64s ease 0.22s;
}

.copy-title {
    position: absolute;
    top: 10.5%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, 12px);
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(36px, 3.95vw, 62px);
    line-height: 0.98;
    letter-spacing: 0.025em;
    text-transform: uppercase;
    color: #ebcb94;
    white-space: nowrap;
    transition: opacity 0.54s ease 0.34s, transform 0.68s ease 0.34s;
}

.copy-subtitle {
    position: absolute;
    top: 16.2%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, 10px);
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(17px, 1.7vw, 26px);
    line-height: 1.1;
    font-style: italic;
    color: #e4c58f;
    white-space: nowrap;
    transition: opacity 0.5s ease 0.46s, transform 0.64s ease 0.46s;
}

.copy-right-panel {
    position: absolute;
    right: 6.1%;
    top: 38%;
    width: min(35vw, 516px);
    transform: translateY(14px);
    transition: opacity 0.56s ease 0.6s, transform 0.7s ease 0.6s;
}

.copy-points {
    margin: 0;
    padding: 0;
    list-style: none;
}

.copy-points li {
    position: relative;
    margin: 0;
    padding: clamp(9px, 1.35vh, 13px) 0 clamp(9px, 1.35vh, 13px) 28px;
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(28px, 2.2vw, 38px);
    line-height: 1.05;
    color: #e8c98f;
}

.copy-points li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-46%);
    color: #f0c67e;
}

.copy-code {
    margin-top: clamp(16px, 2vh, 24px);
    border: 1px solid rgba(183, 139, 82, 0.44);
    background: linear-gradient(to bottom, rgba(9, 8, 7, 0.42), rgba(18, 14, 11, 0.66));
    padding: clamp(10px, 1.4vh, 16px) clamp(12px, 1.1vw, 16px);
}

.copy-code h3 {
    margin: 0 0 clamp(8px, 1.1vh, 12px);
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(33px, 2.55vw, 44px);
    line-height: 1;
    letter-spacing: 0.03em;
    color: #ebc98b;
    text-transform: uppercase;
}

.copy-code h3 span {
    font-size: 0.66em;
    opacity: 0.95;
}

.copy-code ul {
    margin: 0;
    padding-left: 20px;
}

.copy-code li {
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(25px, 1.76vw, 31px);
    line-height: 1.16;
    color: #e2c38e;
}

.copy-footnote {
    position: absolute;
    left: 7%;
    bottom: 15.8%;
    margin: 0;
    transform: translateY(12px);
    font-family: "Times New Roman", Georgia, serif;
    font-size: clamp(25px, 1.98vw, 35px);
    line-height: 1.14;
    color: #ddbc84;
    transition: opacity 0.54s ease 0.7s, transform 0.66s ease 0.7s;
}

.copy-footnote strong {
    color: #f0cc8f;
}

.copy-actions {
    position: absolute;
    left: 50%;
    bottom: 5.2%;
    display: flex;
    gap: clamp(10px, 1.2vw, 18px);
    transform: translate(-50%, 12px);
    pointer-events: auto;
    transition: opacity 0.58s ease 0.84s, transform 0.72s ease 0.84s;
}

.screen-btn {
    position: relative;
    padding: clamp(10px, 1.25vh, 14px) clamp(16px, 1.6vw, 24px);
    min-width: clamp(190px, 17vw, 260px);
    border: 1px solid rgba(196, 152, 92, 0.55);
    background: linear-gradient(to bottom, rgba(33, 24, 19, 0.82), rgba(16, 12, 10, 0.9));
    color: #e6c88f;
    font-family: "Impact", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
    font-size: clamp(18px, 1.34vw, 24px);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    cursor: pointer;
    overflow: hidden;
    border-radius: 2px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.62);
    box-shadow: inset 0 0 0 1px rgba(120, 90, 52, 0.35);
    transition:
        transform 0.28s ease,
        border-color 0.28s ease,
        box-shadow 0.28s ease,
        background 0.28s ease,
        color 0.28s ease;
}

.screen-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        rgba(255, 220, 160, 0) 0%,
        rgba(255, 220, 160, 0.28) 44%,
        rgba(255, 220, 160, 0) 88%
    );
    transform: translateX(-140%);
    transition: transform 0.56s ease;
}

.screen-btn:hover {
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(236, 191, 123, 0.9);
    box-shadow:
        0 10px 16px rgba(0, 0, 0, 0.42),
        inset 0 0 0 1px rgba(185, 135, 72, 0.5),
        0 0 18px rgba(236, 185, 102, 0.25);
    background: linear-gradient(to bottom, rgba(50, 36, 26, 0.92), rgba(23, 16, 12, 0.95));
}

.screen-btn:hover::before {
    transform: translateX(150%);
}

.screen-btn:focus-visible {
    outline: 2px solid rgba(246, 210, 147, 0.9);
    outline-offset: 2px;
}

.screen-btn-primary {
    background: linear-gradient(to bottom, rgba(108, 75, 36, 0.9), rgba(51, 35, 18, 0.95));
    border-color: rgba(221, 173, 104, 0.86);
    color: #f0d29a;
}

.screen-btn-primary:hover {
    color: #ffe2ae;
}

.line-base {
    fill: none;
    stroke: rgba(248, 184, 78, 0.43);
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: drop-shadow(0 0 5px rgba(225, 165, 60, 0.4));
}

.line-glow {
    fill: none;
    stroke: rgba(255, 217, 132, 0.9);
    stroke-width: 1.3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 10 46;
    animation:
        line-flow 4.7s linear infinite,
        line-breathe 2.9s ease-in-out infinite;
    filter: drop-shadow(0 0 7px rgba(255, 185, 72, 0.72));
}

.line-node {
    --bx: 1.2px;
    --by: -1.1px;
    transform-box: fill-box;
    transform-origin: center;
    animation: node-group-sway 4.8s ease-in-out infinite;
    animation-delay: var(--d);
}

.line-spark {
    fill: none;
    stroke: rgba(255, 226, 160, 0.98);
    stroke-width: 2.35;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 1.6 220;
    stroke-dashoffset: 0;
    filter: drop-shadow(0 0 8px rgba(255, 204, 108, 0.95));
    animation:
        spark-run var(--dur) linear infinite,
        line-breathe 2.1s ease-in-out infinite;
    animation-delay: var(--sd), calc(var(--sd) * 0.2);
}

.node-halo {
    fill: rgba(255, 196, 101, 0.15);
    transform-box: fill-box;
    transform-origin: center;
    animation: node-halo-pulse 2.9s ease-in-out infinite;
    animation-delay: var(--d);
}

.node-core {
    fill: rgba(255, 211, 132, 0.95);
    filter: drop-shadow(0 0 6px rgba(255, 190, 82, 0.85));
    transform-box: fill-box;
    transform-origin: center;
    animation: node-core-pulse 2.9s ease-in-out infinite;
    animation-delay: var(--d);
}

body.screen1-active .background {
    transform: scale(1.03);
    filter: brightness(0.54) saturate(0.88);
}

body.screen1-active .mist-layer {
    opacity: 0.48;
}

body.screen1-active .smoke-layer {
    opacity: 0.2;
}

body.screen1-active .title-layer {
    opacity: 0;
}

body.screen1-active .screen-one {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

body.screen2-active .screen-one {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
}

body.screen2-active .screen-two {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

body.screen2-active .screen-two-image {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.94) saturate(0.98);
}

body.screen2-active .screen-two-corner {
    opacity: var(--corner-opacity);
    transform: translate(0, 0) scale(1);
}

body.screen2-active .two-kicker {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen2-active .two-subtitle {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen2-active .zone-label {
    opacity: 1;
    transform: translateY(0);
}

body.screen2-active .crime-panel {
    opacity: 1;
    transform: translateY(0);
}

body.screen2-active .territory-panel {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen3-active .screen-one {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
}

body.screen3-active .screen-two {
    opacity: 0;
    transform: translateY(-14px) scale(1);
    pointer-events: none;
}

body.screen3-active .screen-three {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

body.screen3-active .screen-three-image {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.92) saturate(0.97);
}

body.screen3-active .three-kicker {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen3-active .three-subtitle {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen3-active .three-hotspot {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(0);
}

body.screen4-active .screen-one {
    opacity: 0;
    transform: translateY(-14px);
    pointer-events: none;
}

body.screen4-active .screen-two {
    opacity: 0;
    transform: translateY(-14px) scale(1);
    pointer-events: none;
}

body.screen4-active .screen-three {
    opacity: 0;
    transform: translateY(-14px) scale(1);
    pointer-events: none;
}

body.screen4-active .screen-four {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

body.screen4-active .screen-four-image {
    opacity: 1;
    transform: scale(1);
    filter: brightness(0.86) saturate(0.97);
}

body.screen4-active .screen-four-accent {
    opacity: 0.58;
    transform: translateY(0) scale(1);
}

body.screen4-active .four-kicker {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen4-active .four-subtitle {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen4-active .four-hotspot {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0) scale(1);
}

body.screen4-active .legacy-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
}

body.screen1-active .copy-kicker {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen1-active .copy-kicker-sub {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen1-active .copy-title {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen1-active .copy-subtitle {
    opacity: 1;
    transform: translate(-50%, 0);
}

body.screen1-active .copy-right-panel,
body.screen1-active .copy-footnote {
    opacity: 1;
    transform: translateY(0);
}

body.screen1-active .copy-actions {
    opacity: 1;
    transform: translate(-50%, 0);
}

.mist-band {
    position: absolute;
    left: -35vw;
    width: 170vw;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(194, 186, 170, 0.2) 0%,
        rgba(128, 120, 108, 0.1) 34%,
        rgba(74, 70, 66, 0) 74%
    );
    filter: blur(26px);
    will-change: transform, opacity;
    animation-name: mist-drift;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

.mist-far {
    top: 38vh;
    height: 22vh;
    opacity: 0.12;
    animation-duration: 28s;
}

.mist-mid {
    top: 56vh;
    height: 30vh;
    opacity: 0.16;
    animation-duration: 24s;
    animation-delay: -7s;
}

.mist-near {
    top: 70vh;
    height: 40vh;
    opacity: 0.23;
    filter: blur(34px);
    animation-duration: 20s;
    animation-delay: -11s;
}

@media (max-width: 1100px) {
    .title-stack {
        width: min(82vw, 820px);
        max-width: 820px;
        max-height: min(34vh, 320px);
    }

    .tap-hint {
        width: min(58vw, 480px);
        max-width: 480px;
        max-height: min(6.2vh, 56px);
    }

    .smoke-index-panel {
        right: clamp(14px, 2.2vw, 28px);
        top: clamp(14px, 2.6vh, 24px);
        width: min(30vw, 290px);
        max-width: 290px;
        max-height: 152px;
        overflow: hidden;
    }

    .copy-right-panel {
        max-width: min(41vw, 480px);
        max-height: min(38vh, 360px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .crime-panel {
        max-width: min(32vw, 420px);
        max-height: min(44vh, 420px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .territory-panel {
        max-width: min(90vw, 960px);
        max-height: min(28vh, 260px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .scroll-panel {
        max-width: min(76vw, 880px);
        max-height: min(52vh, 560px);
    }

    .legacy-panel {
        max-width: min(34vw, 460px);
        max-height: min(48vh, 500px);
    }

    .copy-right-panel {
        right: 4.5%;
        width: min(41vw, 480px);
    }

    .copy-footnote {
        width: 62vw;
    }

    .copy-actions {
        width: min(94vw, 840px);
        justify-content: center;
    }

    .screen-btn {
        min-width: clamp(170px, 26vw, 240px);
    }
}

@media (max-width: 820px) {
    .title-stack {
        width: min(90vw, 560px);
        max-width: 560px;
        max-height: min(24vh, 220px);
    }

    .tap-hint {
        width: min(76vw, 330px);
        max-width: 330px;
        max-height: min(5.4vh, 40px);
    }

    .smoke-index-panel {
        left: auto;
        right: 12px;
        top: 12px;
        bottom: auto;
        width: min(56vw, 220px);
        max-width: 220px;
        max-height: 126px;
        padding: 10px 11px 9px;
        overflow: hidden;
        --smoke-panel-x: 0px;
        --smoke-panel-y: 12px;
        --smoke-panel-tilt: 0deg;
    }

    .smoke-index-readout {
        gap: 8px;
        margin-top: 6px;
    }

    .smoke-index-kicker {
        font-size: 9px;
    }

    .smoke-index-source {
        font-size: 9px;
    }

    .smoke-index-value {
        font-size: clamp(24px, 6vw, 30px);
    }

    .smoke-index-unit {
        font-size: 10px;
    }

    .smoke-index-track {
        height: 16px;
    }

    .smoke-index-label {
        max-width: 44%;
        font-size: 12px;
    }

    .smoke-index-scale {
        gap: 4px;
        font-size: 7px;
    }

    .copy-kicker {
        top: 5.4%;
        width: 92vw;
    }

    .copy-kicker-sub {
        top: 11%;
    }

    .copy-title {
        top: 15%;
    }

    .copy-subtitle {
        top: 24.3%;
    }

    .copy-right-panel {
        left: 50%;
        right: auto;
        top: 43%;
        width: min(93vw, 700px);
        max-width: min(93vw, 620px);
        max-height: min(25vh, 220px);
        padding: 10px 12px;
        border: 1px solid rgba(168, 125, 72, 0.34);
        background: linear-gradient(to bottom, rgba(12, 10, 8, 0.54), rgba(8, 7, 6, 0.68));
        transform: translate(-50%, 14px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.screen1-active .copy-right-panel {
        transform: translate(-50%, 0);
    }

    .copy-footnote {
        left: 50%;
        bottom: 19%;
        width: 90vw;
        text-align: center;
        transform: translate(-50%, 12px);
    }

    body.screen1-active .copy-footnote {
        transform: translate(-50%, 0);
    }

    .copy-actions {
        bottom: 5.4%;
        gap: 8px;
        width: 94vw;
    }

    .screen-btn {
        min-width: 0;
        flex: 1 1 30%;
    }

    .two-kicker {
        top: 4.4%;
        width: 92vw;
    }

    .two-subtitle {
        top: 11.8%;
        width: 88vw;
        text-align: center;
        white-space: normal;
    }

    .three-kicker {
        top: 4.4%;
        width: 92vw;
    }

    .three-subtitle {
        top: 11.8%;
        width: 88vw;
        text-align: center;
        white-space: normal;
    }

    .four-kicker {
        top: 4.4%;
        width: 92vw;
    }

    .four-subtitle {
        top: 11.8%;
        width: 88vw;
        white-space: normal;
    }

    .screen-four-cap-art {
        top: clamp(88px, 14vh, 150px);
        left: clamp(-18px, 0vw, 6px);
        width: clamp(190px, 40vw, 290px);
    }

    .screen-four-blades-art {
        left: clamp(-8px, 0vw, 10px);
        bottom: clamp(150px, 23vh, 250px);
        width: clamp(200px, 44vw, 310px);
    }

    .four-hotspot {
        width: clamp(46px, 11vw, 58px);
        height: clamp(46px, 11vw, 58px);
    }

    .four-hotspot-label {
        font-size: 11px;
        padding: 6px 10px;
    }

    .zone-label {
        font-size: clamp(16px, 2.6vw, 23px);
    }

    .zone-south { left: 8%; top: 35%; }
    .zone-red { left: 39%; top: 29%; }
    .zone-brooklyn { left: 39%; top: 44%; }

    .crime-panel {
        right: 50%;
        top: 54%;
        width: min(92vw, 620px);
        max-width: min(92vw, 620px);
        max-height: min(24vh, 220px);
        transform: translate(50%, 14px);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    body.screen2-active .crime-panel {
        transform: translate(50%, 0);
    }

    .territory-panel {
        width: 94vw;
        max-width: 94vw;
        max-height: min(29vh, 250px);
        bottom: 3.2%;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .two-btn {
        min-width: 0;
        flex: 1 1 48%;
    }

    .two-btn-chevron {
        width: clamp(50px, 12vw, 58px);
        flex: 0 0 auto;
    }

    .screen-two-cap {
        top: clamp(56px, 8.6vh, 90px);
        left: clamp(-8px, 0.4vw, 6px);
        width: clamp(182px, 42vw, 276px);
        --corner-opacity: 0.56;
    }

    .screen-two-blades {
        left: clamp(2px, 1.2vw, 8px);
        bottom: clamp(150px, 22vh, 230px);
        width: clamp(186px, 43vw, 284px);
        --corner-opacity: 0.54;
    }

    .screen-two-gambling {
        bottom: clamp(14px, 2.2vh, 26px);
        right: clamp(4px, 1.8vw, 10px);
        width: clamp(185px, 46vw, 300px);
        --corner-opacity: 0.57;
    }

    .three-hotspot {
        width: clamp(120px, 24vw, 176px);
        height: clamp(80px, 11vh, 118px);
        border-radius: 12px;
    }

    .scroll-panel {
        top: 46%;
        width: min(92vw, 620px);
        max-width: min(92vw, 620px);
        padding: 16px 16px 18px;
        max-height: min(54vh, 420px);
    }

    .scroll-close {
        width: 38px;
        height: 38px;
        top: 6px;
        right: 8px;
        font-size: 22px;
    }

    .scroll-title {
        font-size: clamp(24px, 5.8vw, 34px);
    }

    .scroll-copy p {
        font-size: clamp(16px, 3.7vw, 20px);
    }

    .scroll-stats li {
        font-size: clamp(15px, 3.4vw, 18px);
        padding-left: 18px;
    }

    .three-back-btn {
        top: 10px;
        left: 8px;
    }

    .four-back-btn {
        top: 10px;
        left: 8px;
    }

    .legacy-panel {
        left: 50%;
        right: auto;
        bottom: 4.6%;
        width: min(92vw, 620px);
        max-width: min(92vw, 620px);
        max-height: min(34vh, 260px);
        transform: translate(-50%, 14px) scale(0.98);
    }

    body.screen4-active .legacy-panel {
        transform: translate(-50%, 0) scale(1);
    }
}

.smoke-puff {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle at 33% 31%,
        rgba(212, 212, 212, 0.82) 0%,
        rgba(160, 160, 160, 0.44) 32%,
        rgba(112, 112, 112, 0.3) 55%,
        rgba(60, 60, 60, 0) 100%
    );
    mix-blend-mode: lighten;
    filter: blur(var(--start-blur));
    transform: translate(-50%, 0) scale(0.34);
    animation-name: smoke-rise;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
    will-change: transform, opacity, filter;
}

@keyframes smoke-rise {
    0% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.34);
        filter: blur(var(--start-blur));
    }

    10% {
        opacity: var(--base-opacity);
    }

    36% {
        opacity: var(--mid-opacity);
        transform: translate(calc(-50% + var(--drift-mid)), var(--rise-mid))
            scale(var(--mid-scale));
    }

    68% {
        opacity: var(--late-opacity);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--drift)), var(--rise)) scale(var(--end-scale));
        filter: blur(var(--end-blur));
    }
}

@keyframes mist-drift {
    0% {
        transform: translateX(-3vw) translateY(0) scale(1);
    }

    50% {
        transform: translateX(4vw) translateY(-1vh) scale(1.04);
    }

    100% {
        transform: translateX(10vw) translateY(-2.1vh) scale(1.08);
    }
}

@keyframes title-reveal {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(0.985);
        filter: blur(1.5px) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.65));
    }

    100% {
        opacity: 0.96;
        transform: translateY(0) scale(1);
        filter: blur(0) drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
    }
}

@keyframes title-float {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes subtitle-reveal {
    0% {
        opacity: 0;
        transform: translateY(10px);
        filter: blur(1.2px) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
    }

    100% {
        opacity: 0.94;
        transform: translateY(0);
        filter: blur(0) drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
    }
}

@keyframes underline-appear {
    to {
        opacity: 0.98;
    }
}

@keyframes underline-stroke {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

@keyframes tap-reveal {
    0% {
        opacity: 0;
        transform: translate(-50%, 8px);
    }

    100% {
        opacity: 0.9;
        transform: translate(-50%, 0);
    }
}

@keyframes tap-breathe {
    0% {
        opacity: 0.84;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.84;
    }
}

@keyframes smoke-index-reveal {
    0% {
        opacity: 0;
        transform: translate(var(--smoke-panel-x), var(--smoke-panel-y)) rotate(var(--smoke-panel-tilt));
    }

    100% {
        opacity: 0.78;
        transform: translate(var(--smoke-panel-x), 0) rotate(var(--smoke-panel-tilt));
    }
}

@keyframes smoke-index-hover {
    0%,
    100% {
        transform: translate(var(--smoke-panel-x), 0) rotate(var(--smoke-panel-tilt));
    }

    50% {
        transform: translate(var(--smoke-panel-x), -4px) rotate(calc(var(--smoke-panel-tilt) + 0.4deg));
    }
}

@keyframes smoke-index-dot {
    0%,
    100% {
        opacity: 0.72;
        transform: scale(0.9);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes zone-breathe {
    0% {
        color: rgba(240, 210, 150, 0.9);
        text-shadow:
            0 2px 7px rgba(0, 0, 0, 0.82),
            0 0 10px rgba(245, 181, 78, 0.32);
    }

    50% {
        color: rgba(255, 225, 164, 1);
        text-shadow:
            0 2px 7px rgba(0, 0, 0, 0.84),
            0 0 18px rgba(255, 198, 102, 0.56);
    }

    100% {
        color: rgba(240, 210, 150, 0.9);
        text-shadow:
            0 2px 7px rgba(0, 0, 0, 0.82),
            0 0 10px rgba(245, 181, 78, 0.32);
    }
}

@keyframes blood-shift {
    0% {
        background-position: 0 0, 0 0, 0 0, 0 0, 0 0, 0 -7px;
    }

    100% {
        background-position: 0 2px, 0 4px, 0 8px, 0 6px, 0 3px, 0 0;
    }
}

@keyframes blood-drip {
    0% {
        transform: translateY(-7px);
        opacity: 0;
    }

    35% {
        opacity: 0.96;
    }

    100% {
        transform: translateY(8px);
        opacity: 0.96;
    }
}

@keyframes line-flow {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: -186;
    }
}

@keyframes line-breathe {
    0% {
        opacity: 0.6;
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0.6;
    }
}

@keyframes network-sway {
    0% {
        transform: translate(0, 0) scale(1);
    }

    50% {
        transform: translate(0.9px, -1.1px) scale(1.002);
    }

    100% {
        transform: translate(0, 0) scale(1);
    }
}

@keyframes spark-run {
    0% {
        stroke-dashoffset: 0;
        opacity: 0.28;
    }

    16% {
        opacity: 0.96;
    }

    84% {
        opacity: 0.96;
    }

    100% {
        stroke-dashoffset: -240;
        opacity: 0.28;
    }
}

@keyframes node-halo-pulse {
    0% {
        opacity: 0.22;
        transform: translate(0, 0) scale(0.9);
    }

    50% {
        opacity: 0.5;
        transform: translate(calc(var(--bx) * 0.65), calc(var(--by) * 0.65)) scale(1.11);
    }

    100% {
        opacity: 0.22;
        transform: translate(0, 0) scale(0.9);
    }
}

@keyframes node-core-pulse {
    0% {
        opacity: 0.72;
        transform: translate(0, 0) scale(0.96);
    }

    50% {
        opacity: 1;
        transform: translate(var(--bx), var(--by)) scale(1.06);
    }

    100% {
        opacity: 0.72;
        transform: translate(0, 0) scale(0.96);
    }
}

@keyframes node-group-sway {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(calc(var(--bx) * 0.35), calc(var(--by) * 0.35));
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes legacy-ping {
    0% {
        opacity: 0.18;
        transform: scale(0.82);
    }

    55% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        transform: scale(1.34);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mist-band {
        animation: none;
    }

    .main-title {
        animation: none;
        opacity: 0.96;
        transform: translateY(0);
        filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.55));
    }

    .sub-title {
        animation: none;
        opacity: 0.94;
        transform: translateY(0);
        filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.45));
    }

    .underline-stroke-wrap {
        animation: none;
        opacity: 0.98;
        clip-path: inset(0 0 0 0);
    }

    .tap-hint {
        animation: none;
        opacity: 0.9;
        transform: translate(-50%, 0);
    }

    .smoke-index-panel {
        animation: none;
        opacity: 0.78;
        transform: translate(var(--smoke-panel-x), 0) rotate(var(--smoke-panel-tilt));
    }

    .smoke-index-live-dot {
        animation: none;
    }

    .screen-one-lines,
    .line-glow,
    .line-spark,
    .line-node,
    .node-halo,
    .node-core,
    .zone-label.is-active {
        animation: none;
    }

    .main-title-blood,
    .main-title-drips {
        animation: none;
    }

    .background,
    .mist-layer,
    .smoke-layer,
    .title-layer,
    .screen-one,
    .screen-two,
    .screen-two-image,
    .screen-two-corner,
    .screen-three,
    .screen-three-image,
    .screen-four,
    .screen-four-image,
    .screen-four-accent,
    .four-hotspot,
    .three-hotspot,
    .scroll-panel {
        transition: none;
    }

    .copy-kicker,
    .copy-kicker-sub,
    .copy-title,
    .copy-subtitle,
    .copy-right-panel,
    .copy-footnote,
    .copy-actions,
    .three-kicker,
    .three-subtitle,
    .four-kicker,
    .four-subtitle,
    .legacy-panel {
        transition: none;
    }

    .four-hotspot-pulse {
        animation: none;
    }
}