/* ==============================================
   gabs.games - Arcade Pixel Art Experience
   ============================================== */

/* --- CSS Custom Properties --- */
:root {
    --arcade-void: #0A0A1E;
    --cartridge-slate: #1A1A3A;
    --phosphor-white: #F0F0E8;
    --coin-gold: #FFD700;
    --coin-dark: #B8960A;
    --power-green: #39FF14;
    --potion-magenta: #FF2D7B;
    --mana-cyan: #00E5FF;
    --campfire-ember: #FF6B2B;
    --forest-floor: #2D5A1E;
    --desert-sand: #C2A35A;
    --moonlight-blue: #B8C4E0;
    --scroll-progress: 0;
}

/* --- Reset & Base --- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow: hidden;
    height: 100vh;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

body {
    background: var(--arcade-void);
    color: var(--phosphor-white);
    font-family: 'Silkscreen', cursive;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    font-smooth: never;
    overflow-x: scroll;
    overflow-y: hidden;
    height: 100vh;
    width: 100vw;
}

/* --- Scan Lines Overlay --- */
#scanlines {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(10, 10, 30, 0.15) 2px,
        rgba(10, 10, 30, 0.15) 3px
    );
    z-index: 10000;
    pointer-events: none;
}

/* --- Progress Bar --- */
#progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--cartridge-slate);
    z-index: 9999;
    border-bottom: 1px solid var(--coin-gold);
}

#progress-fill {
    height: 100%;
    width: 0%;
    background: var(--power-green);
    transition: width 0.1s steps(20);
    image-rendering: pixelated;
    background-image: repeating-linear-gradient(
        to right,
        var(--power-green) 0px,
        var(--power-green) 4px,
        transparent 4px,
        transparent 5px
    );
    background-size: 5px 100%;
}

#progress-text {
    position: fixed;
    top: 6px;
    right: 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 10px;
    color: var(--power-green);
    z-index: 9999;
}

/* --- Scroll Arrow --- */
#scroll-arrow {
    position: fixed;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9998;
    animation: pulse-arrow 1s steps(2) infinite;
}

#scroll-arrow.hidden {
    display: none;
}

.arrow-pixel {
    display: block;
    width: 0;
    height: 0;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 16px solid var(--mana-cyan);
}

@keyframes pulse-arrow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.2; }
}

/* --- Scroll Container --- */
#scroll-container {
    display: flex;
    flex-direction: row;
    width: 500vw;
    height: 100vh;
    scroll-snap-type: x mandatory;
}

.zone {
    min-width: 100vw;
    height: 100vh;
    position: relative;
    overflow: hidden;
    background: var(--arcade-void);
    scroll-snap-align: start;
}

.zone-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.zone-heading {
    font-family: 'Silkscreen', cursive;
    font-size: 28px;
    color: var(--phosphor-white);
    text-align: center;
    margin-bottom: 40px;
    letter-spacing: 4px;
    position: absolute;
    top: 40px;
    z-index: 10;
}

/* ==============================================
   ZONE 1: Insert Coin
   ============================================== */

.zone-1-content {
    gap: 30px;
}

/* Coin */
#coin {
    width: 80px;
    height: 80px;
    cursor: pointer;
    perspective: 200px;
    z-index: 5;
}

#coin-inner {
    width: 100%;
    height: 100%;
    position: relative;
    animation: coin-rotate 1.2s steps(8) infinite;
    transform-style: preserve-3d;
}

.coin-face {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    backface-visibility: hidden;
}

.coin-front {
    background: radial-gradient(circle at 35% 35%, var(--coin-gold) 0%, var(--coin-dark) 100%);
    border: 3px solid var(--coin-dark);
    display: flex;
    align-items: center;
    justify-content: center;
}

.coin-letter {
    font-family: 'Silkscreen', cursive;
    font-size: 36px;
    color: var(--coin-dark);
    font-weight: 700;
}

.coin-highlight {
    position: absolute;
    top: 8px;
    left: 12px;
    width: 4px;
    height: 4px;
    background: var(--phosphor-white);
}

.coin-side {
    background: var(--coin-dark);
    border-radius: 50%;
    transform: rotateY(180deg);
    border: 3px solid #8B7000;
}

@keyframes coin-rotate {
    0%   { transform: rotateY(0deg); }
    12.5%  { transform: rotateY(45deg); }
    25%  { transform: rotateY(90deg); }
    37.5%  { transform: rotateY(135deg); }
    50%  { transform: rotateY(180deg); }
    62.5%  { transform: rotateY(225deg); }
    75%  { transform: rotateY(270deg); }
    87.5%  { transform: rotateY(315deg); }
    100% { transform: rotateY(360deg); }
}

#coin.shattered #coin-inner {
    animation: none;
    opacity: 0;
}

/* Coin Particles */
#coin-particles {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 6;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--coin-gold);
    animation: particle-fly 0.8s steps(6) forwards;
}

@keyframes particle-fly {
    0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translate(var(--px), var(--py)) scale(0);
        opacity: 0;
    }
}

/* Domain Title */
#domain-title {
    font-family: 'Silkscreen', cursive;
    font-size: 48px;
    color: var(--phosphor-white);
    letter-spacing: 6px;
    display: flex;
    gap: 2px;
}

.title-letter, .title-dot {
    display: inline-block;
    animation: bounce-in 0.3s steps(4) both;
    animation-delay: calc(var(--i) * 0.12s);
}

.title-dot {
    color: var(--coin-gold);
}

@keyframes bounce-in {
    0% {
        transform: translateY(-40px);
        opacity: 0;
    }
    50% {
        transform: translateY(8px);
        opacity: 1;
    }
    75% {
        transform: translateY(-4px);
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

#insert-coin-label {
    font-family: 'Press Start 2P', cursive;
    font-size: 11px;
    color: var(--coin-gold);
    letter-spacing: 3px;
    animation: blink-label 1.5s steps(2) infinite;
    margin-top: 10px;
}

@keyframes blink-label {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==============================================
   ZONE 2: Select Your World
   ============================================== */

.zone-2-content {
    padding: 40px;
}

#diorama-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 30px;
    width: 540px;
    height: 540px;
    transform: rotate(45deg);
}

.diorama-card {
    width: 240px;
    height: 240px;
    perspective: 600px;
    cursor: pointer;
    transform: rotate(-45deg);
    transition: transform 0s;
}

.diorama-card.near-center {
    transform: rotate(-45deg) scale(1.15);
}

.card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0s;
}

.diorama-card:hover .card-inner {
    transform: rotateY(180deg);
}

.card-front, .card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border: 2px solid var(--moonlight-blue);
    background: var(--cartridge-slate);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.card-back {
    transform: rotateY(180deg);
    background: var(--arcade-void);
    border-color: var(--potion-magenta);
}

.card-back span {
    font-family: 'Silkscreen', cursive;
    font-size: 24px;
    color: var(--potion-magenta);
    letter-spacing: 4px;
}

/* Diorama Scenes */
.diorama-scene {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

/* Forest */
.forest-scene {
    background: linear-gradient(to bottom, var(--arcade-void) 0%, #0D1A0D 100%);
}

.tree {
    position: absolute;
    bottom: 40px;
    width: 24px;
}

.tree::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    height: 20px;
    background: #5C3A1E;
}

.tree::after {
    content: '';
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 16px solid transparent;
    border-right: 16px solid transparent;
    border-bottom: 28px solid var(--forest-floor);
    animation: sway-tree 2s steps(4) infinite alternate;
}

.tree-1 { left: 30px; }
.tree-2 { left: 100px; height: 50px; }
.tree-3 { left: 170px; }

.forest-ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: var(--forest-floor);
}

@keyframes sway-tree {
    0% { transform: translateX(-50%) skewX(0deg); }
    100% { transform: translateX(-50%) skewX(3deg); }
}

/* Ocean */
.ocean-scene {
    background: linear-gradient(to bottom, var(--arcade-void) 0%, #0A1A3A 100%);
}

.wave {
    position: absolute;
    width: 100%;
    height: 8px;
    background: var(--mana-cyan);
    opacity: 0.6;
    animation: wave-bob 1.5s steps(4) infinite alternate;
}

.wave-1 { bottom: 80px; animation-delay: 0s; }
.wave-2 { bottom: 60px; opacity: 0.4; animation-delay: 0.3s; }
.wave-3 { bottom: 40px; opacity: 0.3; animation-delay: 0.6s; }

.water {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 40px;
    background: #0044AA;
}

@keyframes wave-bob {
    0% { transform: translateY(0) scaleX(1); }
    100% { transform: translateY(-6px) scaleX(0.95); }
}

/* City */
.city-scene {
    background: var(--arcade-void);
}

.building {
    position: absolute;
    bottom: 30px;
    background: var(--cartridge-slate);
    border: 1px solid #2A2A4A;
}

.building-1 { left: 20px; width: 50px; height: 100px; }
.building-2 { left: 90px; width: 40px; height: 140px; }
.building-3 { left: 150px; width: 60px; height: 80px; }

.building::after {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: var(--coin-gold);
    top: 10px;
    left: 10px;
    animation: flicker-light 2s steps(2) infinite;
    box-shadow:
        14px 0 0 var(--coin-gold),
        0 16px 0 var(--mana-cyan),
        14px 16px 0 var(--coin-gold),
        0 32px 0 var(--coin-gold),
        14px 32px 0 var(--mana-cyan);
}

.city-ground {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #1A1A2E;
}

@keyframes flicker-light {
    0%, 80% { opacity: 1; }
    85%, 90% { opacity: 0.2; }
    95%, 100% { opacity: 1; }
}

/* Cave */
.cave-scene {
    background: linear-gradient(to bottom, #0A0A12 0%, var(--cartridge-slate) 100%);
}

.stalactite {
    position: absolute;
    top: 0;
    width: 12px;
    height: 40px;
    background: linear-gradient(to bottom, #3A3A5A, #2A2A4A);
    clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.stalactite-1 { left: 40px; height: 50px; }
.stalactite-2 { left: 110px; height: 35px; }
.stalactite-3 { left: 170px; height: 45px; }

.cave-floor {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: #2A2A4A;
}

.drip {
    position: absolute;
    top: 50px;
    left: 46px;
    width: 4px;
    height: 4px;
    background: var(--mana-cyan);
    border-radius: 50%;
    animation: drip-fall 3s steps(8) infinite;
}

@keyframes drip-fall {
    0% { transform: translateY(0); opacity: 1; }
    80% { transform: translateY(120px); opacity: 1; }
    100% { transform: translateY(120px); opacity: 0; }
}

/* ==============================================
   ZONE 3: The Overworld
   ============================================== */

.zone-overworld {
    min-width: 150vw;
}

.zone-3-content {
    position: relative;
    width: 100%;
    height: 100%;
    justify-content: flex-end;
    align-items: stretch;
}

#landscape {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60%;
    overflow: hidden;
}

.tile-layer {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 100%;
    display: flex;
    align-items: flex-end;
}

.background-layer {
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        var(--forest-floor) 0%,
        var(--forest-floor) 20%,
        var(--desert-sand) 35%,
        var(--desert-sand) 50%,
        #0044AA 65%,
        #0044AA 75%,
        #4A4A6A 85%,
        #4A4A6A 100%
    );
    opacity: 0.3;
}

.midground-layer {
    width: 100%;
    height: 70%;
    background:
        /* Trees - forest area */
        radial-gradient(ellipse 20px 30px at 5%, var(--forest-floor) 50%, transparent 50%),
        radial-gradient(ellipse 18px 25px at 10%, var(--forest-floor) 50%, transparent 50%),
        radial-gradient(ellipse 22px 32px at 15%, var(--forest-floor) 50%, transparent 50%),
        /* Cacti - desert area */
        radial-gradient(ellipse 8px 30px at 38%, var(--desert-sand) 50%, transparent 50%),
        radial-gradient(ellipse 8px 28px at 48%, var(--desert-sand) 50%, transparent 50%),
        /* Waves - ocean area */
        radial-gradient(ellipse 40px 8px at 65%, var(--mana-cyan) 40%, transparent 40%),
        radial-gradient(ellipse 35px 6px at 72%, var(--mana-cyan) 40%, transparent 40%),
        /* Mountains */
        linear-gradient(135deg, transparent 88%, #6A6A8A 88%, #6A6A8A 92%, transparent 92%),
        linear-gradient(135deg, transparent 92%, #5A5A7A 92%, #5A5A7A 96%, transparent 96%);
    background-repeat: no-repeat;
    background-position: bottom;
    opacity: 0.6;
}

.foreground-layer {
    width: 100%;
    height: 40%;
    background: linear-gradient(
        to right,
        var(--forest-floor) 0%,
        var(--forest-floor) 22%,
        var(--desert-sand) 30%,
        var(--desert-sand) 52%,
        #003388 60%,
        #003388 77%,
        #3A3A5A 82%,
        #3A3A5A 100%
    );
}

/* Ground dithering tile pattern */
.foreground-layer::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        repeating-linear-gradient(
            to right,
            transparent 0px,
            transparent 8px,
            rgba(10, 10, 30, 0.2) 8px,
            rgba(10, 10, 30, 0.2) 16px
        ),
        repeating-linear-gradient(
            to bottom,
            transparent 0px,
            transparent 8px,
            rgba(10, 10, 30, 0.15) 8px,
            rgba(10, 10, 30, 0.15) 16px
        );
}

/* Sprite Character */
#sprite-character {
    position: absolute;
    bottom: 42%;
    left: 10%;
    z-index: 20;
    width: 16px;
    height: 32px;
}

#sprite-body {
    width: 16px;
    height: 32px;
    position: relative;
    image-rendering: pixelated;
    /* Pixel art character using box-shadow */
    background: transparent;
    box-shadow:
        /* Head */
        6px 0px 0 0 var(--phosphor-white),
        8px 0px 0 0 var(--phosphor-white),
        10px 0px 0 0 var(--phosphor-white),
        4px 2px 0 0 var(--phosphor-white),
        6px 2px 0 0 var(--phosphor-white),
        8px 2px 0 0 var(--phosphor-white),
        10px 2px 0 0 var(--phosphor-white),
        12px 2px 0 0 var(--phosphor-white),
        4px 4px 0 0 var(--phosphor-white),
        6px 4px 0 0 var(--phosphor-white),
        8px 4px 0 0 var(--mana-cyan),
        10px 4px 0 0 var(--phosphor-white),
        12px 4px 0 0 var(--mana-cyan),
        4px 6px 0 0 var(--phosphor-white),
        6px 6px 0 0 var(--phosphor-white),
        8px 6px 0 0 var(--phosphor-white),
        10px 6px 0 0 var(--phosphor-white),
        12px 6px 0 0 var(--phosphor-white),
        /* Scarf */
        4px 8px 0 0 var(--potion-magenta),
        6px 8px 0 0 var(--potion-magenta),
        8px 8px 0 0 var(--potion-magenta),
        10px 8px 0 0 var(--potion-magenta),
        12px 8px 0 0 var(--potion-magenta),
        14px 8px 0 0 var(--potion-magenta),
        14px 10px 0 0 var(--potion-magenta),
        /* Body */
        6px 10px 0 0 var(--phosphor-white),
        8px 10px 0 0 var(--phosphor-white),
        10px 10px 0 0 var(--phosphor-white),
        6px 12px 0 0 var(--phosphor-white),
        8px 12px 0 0 var(--phosphor-white),
        10px 12px 0 0 var(--phosphor-white),
        6px 14px 0 0 var(--phosphor-white),
        8px 14px 0 0 var(--phosphor-white),
        10px 14px 0 0 var(--phosphor-white),
        4px 16px 0 0 var(--phosphor-white),
        6px 16px 0 0 var(--phosphor-white),
        8px 16px 0 0 var(--phosphor-white),
        10px 16px 0 0 var(--phosphor-white),
        12px 16px 0 0 var(--phosphor-white),
        /* Legs */
        4px 18px 0 0 var(--phosphor-white),
        6px 18px 0 0 var(--phosphor-white),
        10px 18px 0 0 var(--phosphor-white),
        12px 18px 0 0 var(--phosphor-white),
        4px 20px 0 0 var(--phosphor-white),
        6px 20px 0 0 var(--phosphor-white),
        10px 20px 0 0 var(--phosphor-white),
        12px 20px 0 0 var(--phosphor-white);
    animation: sprite-idle 1s steps(2) infinite;
}

#sprite-character.walking #sprite-body {
    animation: sprite-walk 0.4s steps(4) infinite;
}

@keyframes sprite-idle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

@keyframes sprite-walk {
    0%, 100% { transform: translateY(0) translateX(0); }
    25% { transform: translateY(-2px) translateX(1px); }
    50% { transform: translateY(0) translateX(2px); }
    75% { transform: translateY(-2px) translateX(1px); }
}

/* Dialogue Boxes */
.dialogue-box {
    position: absolute;
    top: 20%;
    left: var(--dx, 30vw);
    background: var(--cartridge-slate);
    border: 2px solid var(--moonlight-blue);
    border-radius: 4px;
    padding: 16px 20px;
    max-width: 280px;
    z-index: 25;
    opacity: 0;
    transition: opacity 0.1s steps(2);
}

.dialogue-box.visible {
    opacity: 1;
}

.dialogue-box::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 16px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--potion-magenta);
}

.dialogue-text {
    font-family: 'Silkscreen', cursive;
    font-size: 14px;
    color: var(--phosphor-white);
    line-height: 1.6;
}

.dialogue-cursor {
    display: inline-block;
    width: 6px;
    height: 12px;
    background: var(--power-green);
    margin-left: 2px;
    animation: blink-cursor 0.6s steps(2) infinite;
    vertical-align: middle;
}

@keyframes blink-cursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* ==============================================
   ZONE 4: Inventory
   ============================================== */

.zone-4-content {
    padding: 40px;
}

#inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    grid-template-rows: repeat(2, 120px);
    gap: 20px;
    align-items: center;
    justify-content: center;
}

.inv-slot {
    width: 120px;
    height: 120px;
    background: var(--cartridge-slate);
    border: 2px solid #2A2A5A;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
}

.inv-slot:hover {
    border-color: var(--coin-gold);
    transform: translateY(-4px);
    transition: transform 0s;
}

.inv-slot.bounce-active {
    animation: inv-bounce 0.3s steps(4);
}

@keyframes inv-bounce {
    0% { transform: translateY(0); }
    25% { transform: translateY(-8px); }
    50% { transform: translateY(-4px); }
    75% { transform: translateY(-6px); }
    100% { transform: translateY(-4px); }
}

.offset-slot {
    transform: translateY(30px);
}

.offset-slot:hover {
    transform: translateY(26px);
}

.offset-slot.bounce-active {
    animation: inv-bounce-offset 0.3s steps(4);
}

@keyframes inv-bounce-offset {
    0% { transform: translateY(30px); }
    25% { transform: translateY(22px); }
    50% { transform: translateY(26px); }
    75% { transform: translateY(24px); }
    100% { transform: translateY(26px); }
}

.inv-icon {
    width: 32px;
    height: 32px;
    margin-bottom: 8px;
    image-rendering: pixelated;
}

.inv-label {
    font-family: 'Silkscreen', cursive;
    font-size: 10px;
    color: var(--phosphor-white);
    letter-spacing: 2px;
}

/* Inventory Icons via box-shadow pixel art */
.wrench-icon {
    background: transparent;
    box-shadow:
        0px 0px 0 2px var(--mana-cyan),
        4px 0px 0 2px var(--mana-cyan),
        8px 4px 0 2px var(--mana-cyan),
        12px 8px 0 2px var(--mana-cyan),
        16px 12px 0 2px var(--mana-cyan),
        20px 16px 0 2px var(--mana-cyan),
        0px 8px 0 2px var(--mana-cyan),
        4px 4px 0 2px var(--mana-cyan);
}

.book-icon {
    background: transparent;
    box-shadow:
        4px 0px 0 2px var(--coin-gold),
        8px 0px 0 2px var(--coin-gold),
        12px 0px 0 2px var(--coin-gold),
        16px 0px 0 2px var(--coin-gold),
        4px 4px 0 2px var(--phosphor-white),
        8px 4px 0 2px var(--phosphor-white),
        12px 4px 0 2px var(--phosphor-white),
        16px 4px 0 2px var(--phosphor-white),
        4px 8px 0 2px var(--phosphor-white),
        8px 8px 0 2px var(--phosphor-white),
        12px 8px 0 2px var(--phosphor-white),
        16px 8px 0 2px var(--phosphor-white),
        4px 12px 0 2px var(--phosphor-white),
        8px 12px 0 2px var(--phosphor-white),
        12px 12px 0 2px var(--phosphor-white),
        16px 12px 0 2px var(--phosphor-white),
        4px 16px 0 2px var(--coin-gold),
        8px 16px 0 2px var(--coin-gold),
        12px 16px 0 2px var(--coin-gold),
        16px 16px 0 2px var(--coin-gold),
        0px 0px 0 2px var(--coin-dark),
        0px 4px 0 2px var(--coin-dark),
        0px 8px 0 2px var(--coin-dark),
        0px 12px 0 2px var(--coin-dark),
        0px 16px 0 2px var(--coin-dark);
}

.compass-icon {
    background: transparent;
    box-shadow:
        8px 0px 0 2px var(--power-green),
        12px 0px 0 2px var(--power-green),
        4px 4px 0 2px var(--cartridge-slate),
        8px 4px 0 2px var(--phosphor-white),
        12px 4px 0 2px var(--phosphor-white),
        16px 4px 0 2px var(--cartridge-slate),
        0px 8px 0 2px var(--cartridge-slate),
        4px 8px 0 2px var(--phosphor-white),
        8px 8px 0 2px var(--power-green),
        12px 8px 0 2px var(--phosphor-white),
        16px 8px 0 2px var(--phosphor-white),
        20px 8px 0 2px var(--cartridge-slate),
        4px 12px 0 2px var(--cartridge-slate),
        8px 12px 0 2px var(--phosphor-white),
        12px 12px 0 2px var(--phosphor-white),
        16px 12px 0 2px var(--cartridge-slate),
        8px 16px 0 2px var(--power-green),
        12px 16px 0 2px var(--power-green);
}

.heart-icon {
    background: transparent;
    box-shadow:
        4px 0px 0 2px var(--potion-magenta),
        8px 0px 0 2px var(--potion-magenta),
        12px 0px 0 2px var(--potion-magenta),
        16px 0px 0 2px var(--potion-magenta),
        0px 4px 0 2px var(--potion-magenta),
        4px 4px 0 2px #FF6699,
        8px 4px 0 2px var(--potion-magenta),
        12px 4px 0 2px var(--potion-magenta),
        16px 4px 0 2px var(--potion-magenta),
        20px 4px 0 2px var(--potion-magenta),
        0px 8px 0 2px var(--potion-magenta),
        4px 8px 0 2px var(--potion-magenta),
        8px 8px 0 2px var(--potion-magenta),
        12px 8px 0 2px var(--potion-magenta),
        16px 8px 0 2px var(--potion-magenta),
        20px 8px 0 2px var(--potion-magenta),
        4px 12px 0 2px var(--potion-magenta),
        8px 12px 0 2px var(--potion-magenta),
        12px 12px 0 2px var(--potion-magenta),
        16px 12px 0 2px var(--potion-magenta),
        8px 16px 0 2px var(--potion-magenta),
        12px 16px 0 2px var(--potion-magenta);
}

.bolt-icon {
    background: transparent;
    box-shadow:
        12px 0px 0 2px var(--coin-gold),
        16px 0px 0 2px var(--coin-gold),
        8px 4px 0 2px var(--coin-gold),
        12px 4px 0 2px var(--coin-gold),
        4px 8px 0 2px var(--coin-gold),
        8px 8px 0 2px var(--coin-gold),
        12px 8px 0 2px var(--coin-gold),
        16px 8px 0 2px var(--coin-gold),
        8px 12px 0 2px var(--coin-gold),
        12px 12px 0 2px var(--coin-gold),
        4px 16px 0 2px var(--coin-gold),
        8px 16px 0 2px var(--coin-gold);
}

.clock-icon {
    background: transparent;
    box-shadow:
        8px 0px 0 2px var(--mana-cyan),
        12px 0px 0 2px var(--mana-cyan),
        4px 4px 0 2px var(--mana-cyan),
        16px 4px 0 2px var(--mana-cyan),
        0px 8px 0 2px var(--mana-cyan),
        8px 8px 0 2px var(--phosphor-white),
        12px 8px 0 2px var(--phosphor-white),
        20px 8px 0 2px var(--mana-cyan),
        0px 12px 0 2px var(--mana-cyan),
        8px 12px 0 2px var(--phosphor-white),
        20px 12px 0 2px var(--mana-cyan),
        4px 16px 0 2px var(--mana-cyan),
        16px 16px 0 2px var(--mana-cyan),
        8px 20px 0 2px var(--mana-cyan),
        12px 20px 0 2px var(--mana-cyan);
}

/* Tooltip */
#inv-tooltip {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    max-width: 320px;
}

#inv-tooltip.hidden {
    display: none;
}

.tooltip-text {
    font-family: 'Nunito', sans-serif;
    font-size: 15px;
    font-weight: 300;
    color: var(--moonlight-blue);
    line-height: 1.6;
}

/* ==============================================
   ZONE 5: Save Point
   ============================================== */

.zone-5-content {
    position: relative;
}

#star-field {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.star {
    position: absolute;
    width: 2px;
    height: 2px;
    border-radius: 0;
    animation: twinkle var(--dur, 3s) steps(2) infinite;
    animation-delay: var(--delay, 0s);
}

@keyframes twinkle {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Campfire */
#campfire {
    position: relative;
    width: 80px;
    height: 80px;
    z-index: 10;
}

#campfire-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(255, 107, 43, 0.15) 0%,
        rgba(255, 107, 43, 0.05) 40%,
        transparent 70%
    );
    animation: glow-pulse 3s ease-in-out infinite;
    z-index: -1;
    pointer-events: none;
}

@keyframes glow-pulse {
    0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1.15); opacity: 1; }
}

.flame {
    position: absolute;
    bottom: 20px;
    background: var(--campfire-ember);
    border-radius: 0;
}

.flame-1 {
    left: 30px;
    width: 8px;
    height: 24px;
    animation: flame-flicker-1 0.4s steps(3) infinite;
}

.flame-2 {
    left: 40px;
    width: 10px;
    height: 32px;
    background: var(--coin-gold);
    animation: flame-flicker-2 0.5s steps(3) infinite;
}

.flame-3 {
    left: 52px;
    width: 8px;
    height: 20px;
    animation: flame-flicker-3 0.35s steps(3) infinite;
}

.ember {
    position: absolute;
    width: 3px;
    height: 3px;
    background: var(--campfire-ember);
    border-radius: 0;
}

.ember-1 {
    bottom: 50px;
    left: 35px;
    animation: ember-rise 2s steps(8) infinite;
}

.ember-2 {
    bottom: 45px;
    left: 50px;
    animation: ember-rise 2.5s steps(8) infinite 0.8s;
}

@keyframes flame-flicker-1 {
    0% { height: 24px; }
    33% { height: 20px; }
    66% { height: 28px; }
    100% { height: 24px; }
}

@keyframes flame-flicker-2 {
    0% { height: 32px; }
    33% { height: 36px; }
    66% { height: 28px; }
    100% { height: 32px; }
}

@keyframes flame-flicker-3 {
    0% { height: 20px; }
    33% { height: 24px; }
    66% { height: 16px; }
    100% { height: 20px; }
}

@keyframes ember-rise {
    0% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-60px) translateX(10px); opacity: 0; }
}

.logs {
    position: absolute;
    bottom: 10px;
    left: 20px;
    width: 50px;
    height: 12px;
    background: #5C3A1E;
    border-radius: 0;
    box-shadow:
        5px 6px 0 0 #4A2E16,
        -3px 4px 0 0 #5C3A1E;
}

#save-title {
    font-family: 'Silkscreen', cursive;
    font-size: 36px;
    color: var(--phosphor-white);
    letter-spacing: 6px;
    margin-top: 40px;
    z-index: 10;
    text-shadow: 0 0 20px rgba(255, 107, 43, 0.3);
}

#save-subtitle {
    font-family: 'Nunito', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: var(--moonlight-blue);
    margin-top: 16px;
    z-index: 10;
    line-height: 1.6;
}

/* ==============================================
   Responsive: Mobile Vertical
   ============================================== */

@media (max-width: 768px) {
    body {
        overflow-x: hidden;
        overflow-y: scroll;
    }

    #scroll-container {
        flex-direction: column;
        width: 100vw;
        height: auto;
    }

    .zone {
        min-width: 100vw;
        min-height: 100vh;
        scroll-snap-align: start;
    }

    .zone-overworld {
        min-width: 100vw;
        min-height: 150vh;
    }

    #progress-bar {
        top: auto;
        bottom: 0;
        left: auto;
        right: 0;
        width: 4px;
        height: 100%;
    }

    #progress-fill {
        width: 100%;
        height: 0%;
    }

    #progress-text {
        top: auto;
        bottom: 8px;
        right: 12px;
    }

    #scroll-arrow {
        right: auto;
        bottom: 20px;
        left: 50%;
        top: auto;
        transform: translateX(-50%) rotate(90deg);
    }

    #domain-title {
        font-size: 28px;
    }

    #diorama-grid {
        width: 300px;
        height: 300px;
        gap: 15px;
    }

    .diorama-card {
        width: 130px;
        height: 130px;
    }

    #inventory-grid {
        grid-template-columns: repeat(2, 100px);
        grid-template-rows: repeat(3, 100px);
    }

    .inv-slot {
        width: 100px;
        height: 100px;
    }

    .offset-slot {
        transform: translateX(30px);
    }

    .offset-slot:hover {
        transform: translateX(30px) translateY(-4px);
    }
}