/* ==============================================
   pmt.moe -- Pixel Art RPG Personal Homepage
   Colors: #0D0221, #150535, #3EEBBE, #FFD166,
           #FF6B9D, #E8E6F0, #A9A4C2, #4A3F6B
   Fonts: Silkscreen, DotGothic16, Press Start 2P
   ============================================== */

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

html {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #3EEBBE #0D0221;
}

body {
    background: #0D0221;
    color: #E8E6F0;
    font-family: 'DotGothic16', sans-serif;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
    image-rendering: pixelated;
    overflow-x: hidden;
}

/* ---- Pixel Font Anti-Aliasing Kill ---- */
.title-text,
.room-heading,
.press-start,
.card-title,
.bubble-label,
[data-tooltip]::after {
    font-smooth: never;
    -webkit-font-smoothing: none;
    -moz-osx-font-smoothing: unset;
}

/* ---- Scroll Snap Container ---- */
#scroll-container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: thin;
    scrollbar-color: #3EEBBE #0D0221;
}

/* ---- Room (Section) Base ---- */
.room {
    position: relative;
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    overflow: hidden;
    background: #0D0221;
}

.room-crt {
    background: #150535;
}

.room-sky {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 70%;
}

.room-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px 60px 20px 80px;
}

/* ---- Sparkle Particles ---- */
#sparkles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 100;
    overflow: hidden;
}

.sparkle {
    position: absolute;
    bottom: -20px;
    width: 4px;
    height: 4px;
    background: #FFD166;
    animation: sparkle-rise 6s steps(12) infinite;
}

.sparkle::before,
.sparkle::after {
    content: '';
    position: absolute;
    background: #FFD166;
}

.sparkle::before {
    width: 4px;
    height: 12px;
    top: -4px;
    left: 0;
}

.sparkle::after {
    width: 12px;
    height: 4px;
    top: 0;
    left: -4px;
}

@keyframes sparkle-rise {
    0% {
        transform: translateY(0);
        opacity: 0;
    }
    10% {
        opacity: 1;
    }
    80% {
        opacity: 1;
    }
    100% {
        transform: translateY(-110vh);
        opacity: 0;
    }
}

/* ---- Sidebar Navigation ---- */
#sidebar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
    background: rgba(13, 2, 33, 0.7);
    border-right: 2px solid #4A3F6B;
}

.nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: transform 0.1s steps(2);
    position: relative;
    image-rendering: pixelated;
}

.nav-icon:hover {
    transform: scale(2);
}

.nav-icon:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
    background: rgba(13, 2, 33, 0.92);
    border: 2px solid #3EEBBE;
    color: #E8E6F0;
    font-family: 'Silkscreen', monospace;
    font-size: 0.7rem;
    padding: 4px 8px;
    white-space: nowrap;
    image-rendering: auto;
    letter-spacing: 0.08em;
}

.pixel-icon {
    image-rendering: pixelated;
    display: block;
}

/* ---- Starfield ---- */
.starfield {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.starfield::before {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        20px 40px 0 0 #E8E6F0,
        80px 120px 0 0 #E8E6F0,
        150px 30px 0 0 #A9A4C2,
        220px 180px 0 0 #E8E6F0,
        300px 70px 0 0 #A9A4C2,
        380px 200px 0 0 #E8E6F0,
        450px 50px 0 0 #E8E6F0,
        520px 160px 0 0 #A9A4C2,
        600px 90px 0 0 #E8E6F0,
        680px 220px 0 0 #E8E6F0,
        750px 40px 0 0 #A9A4C2,
        820px 170px 0 0 #E8E6F0,
        900px 100px 0 0 #E8E6F0,
        980px 250px 0 0 #A9A4C2,
        1050px 60px 0 0 #E8E6F0,
        1120px 190px 0 0 #E8E6F0,
        1200px 130px 0 0 #A9A4C2,
        40px 300px 0 0 #E8E6F0,
        130px 350px 0 0 #A9A4C2,
        250px 380px 0 0 #E8E6F0,
        370px 310px 0 0 #E8E6F0,
        490px 360px 0 0 #A9A4C2,
        560px 290px 0 0 #E8E6F0,
        640px 340px 0 0 #E8E6F0,
        730px 390px 0 0 #A9A4C2,
        810px 320px 0 0 #E8E6F0,
        900px 370px 0 0 #E8E6F0,
        1000px 300px 0 0 #A9A4C2,
        1100px 350px 0 0 #E8E6F0,
        60px 450px 0 0 #E8E6F0,
        190px 480px 0 0 #A9A4C2,
        310px 430px 0 0 #E8E6F0,
        430px 490px 0 0 #E8E6F0,
        550px 440px 0 0 #A9A4C2,
        670px 470px 0 0 #E8E6F0,
        790px 440px 0 0 #E8E6F0,
        910px 490px 0 0 #A9A4C2,
        1030px 450px 0 0 #E8E6F0,
        1150px 480px 0 0 #E8E6F0;
    animation: starfield-drift 20s steps(40) infinite;
}

.starfield::after {
    content: '';
    position: absolute;
    width: 2px;
    height: 2px;
    background: transparent;
    box-shadow:
        35px 80px 0 0 #A9A4C2,
        110px 20px 0 0 #E8E6F0,
        185px 150px 0 0 #E8E6F0,
        260px 60px 0 0 #A9A4C2,
        340px 130px 0 0 #E8E6F0,
        410px 10px 0 0 #E8E6F0,
        480px 110px 0 0 #A9A4C2,
        570px 40px 0 0 #E8E6F0,
        650px 140px 0 0 #E8E6F0,
        730px 80px 0 0 #A9A4C2,
        800px 10px 0 0 #E8E6F0,
        880px 150px 0 0 #E8E6F0,
        950px 30px 0 0 #A9A4C2,
        1040px 120px 0 0 #E8E6F0,
        1130px 50px 0 0 #E8E6F0,
        55px 240px 0 0 #E8E6F0,
        160px 270px 0 0 #A9A4C2,
        280px 220px 0 0 #E8E6F0,
        400px 260px 0 0 #E8E6F0,
        510px 230px 0 0 #A9A4C2,
        620px 250px 0 0 #E8E6F0,
        740px 270px 0 0 #E8E6F0,
        850px 240px 0 0 #A9A4C2,
        960px 210px 0 0 #E8E6F0,
        1080px 260px 0 0 #E8E6F0;
    animation: starfield-drift 28s steps(40) infinite reverse;
}

.starfield-dense::before {
    box-shadow:
        20px 40px 0 0 #E8E6F0,
        80px 120px 0 0 #E8E6F0,
        150px 30px 0 0 #A9A4C2,
        220px 180px 0 0 #E8E6F0,
        300px 70px 0 0 #A9A4C2,
        380px 200px 0 0 #E8E6F0,
        450px 50px 0 0 #E8E6F0,
        520px 160px 0 0 #A9A4C2,
        600px 90px 0 0 #E8E6F0,
        680px 220px 0 0 #E8E6F0,
        750px 40px 0 0 #A9A4C2,
        820px 170px 0 0 #E8E6F0,
        900px 100px 0 0 #E8E6F0,
        980px 250px 0 0 #A9A4C2,
        1050px 60px 0 0 #E8E6F0,
        1120px 190px 0 0 #E8E6F0,
        1200px 130px 0 0 #A9A4C2,
        40px 300px 0 0 #E8E6F0,
        130px 350px 0 0 #A9A4C2,
        250px 380px 0 0 #E8E6F0,
        370px 310px 0 0 #E8E6F0,
        490px 360px 0 0 #A9A4C2,
        560px 290px 0 0 #E8E6F0,
        640px 340px 0 0 #E8E6F0,
        730px 390px 0 0 #A9A4C2,
        810px 320px 0 0 #E8E6F0,
        900px 370px 0 0 #E8E6F0,
        1000px 300px 0 0 #A9A4C2,
        1100px 350px 0 0 #E8E6F0,
        60px 450px 0 0 #E8E6F0,
        190px 480px 0 0 #A9A4C2,
        310px 430px 0 0 #E8E6F0,
        430px 490px 0 0 #E8E6F0,
        550px 440px 0 0 #A9A4C2,
        670px 470px 0 0 #E8E6F0,
        790px 440px 0 0 #E8E6F0,
        910px 490px 0 0 #A9A4C2,
        1030px 450px 0 0 #E8E6F0,
        1150px 480px 0 0 #E8E6F0,
        100px 550px 0 0 #FFD166,
        250px 520px 0 0 #3EEBBE,
        400px 560px 0 0 #FFD166,
        550px 530px 0 0 #3EEBBE,
        700px 570px 0 0 #FFD166,
        850px 510px 0 0 #3EEBBE,
        1000px 540px 0 0 #FFD166,
        1150px 580px 0 0 #3EEBBE,
        50px 620px 0 0 #E8E6F0,
        200px 640px 0 0 #E8E6F0,
        350px 600px 0 0 #A9A4C2,
        500px 650px 0 0 #E8E6F0,
        650px 610px 0 0 #E8E6F0,
        800px 660px 0 0 #A9A4C2,
        950px 630px 0 0 #E8E6F0,
        1100px 650px 0 0 #E8E6F0;
}

@keyframes starfield-drift {
    0% { transform: translateY(0); }
    100% { transform: translateY(-30px); }
}

/* ---- Title Screen (Room 0) ---- */
#title-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0D0221;
}

.title-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

.title-text {
    font-family: 'Silkscreen', monospace;
    font-size: clamp(3rem, 12vw, 8rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 40px;
    image-rendering: pixelated;
}

.letter {
    display: inline-block;
    animation: letter-float 2s steps(4) infinite;
}

.letter:nth-child(1) { animation-delay: 0s; }
.letter:nth-child(2) { animation-delay: 0.15s; }
.letter:nth-child(3) { animation-delay: 0.3s; }
.letter:nth-child(4) { animation-delay: 0.45s; }
.letter:nth-child(5) { animation-delay: 0.6s; }
.letter:nth-child(6) { animation-delay: 0.75s; }
.letter:nth-child(7) { animation-delay: 0.9s; }

@keyframes letter-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.press-start {
    font-family: 'Press Start 2P', monospace;
    font-size: clamp(0.7rem, 1.2vw, 0.9rem);
    color: #FFD166;
    letter-spacing: 0.12em;
    animation: blink-text 1s steps(2) infinite;
    cursor: pointer;
}

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

/* ---- Floor Tiles ---- */
.floor {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30%;
    z-index: 1;
    image-rendering: pixelated;
}

/* Wooden Plank Floor */
.floor-wood {
    background:
        repeating-linear-gradient(
            90deg,
            #5C4033 0px, #5C4033 30px,
            #4A3328 30px, #4A3328 32px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px, transparent 14px,
            #3A2318 14px, #3A2318 16px
        );
    background-color: #5C4033;
    border-top: 4px solid #4A3F6B;
}

.floor-wood::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 60px,
            rgba(74, 63, 107, 0.3) 60px,
            rgba(74, 63, 107, 0.3) 64px
        );
}

/* Stone Floor */
.floor-stone {
    background:
        repeating-linear-gradient(
            90deg,
            #4A3F6B 0px, #4A3F6B 30px,
            #3A2F5B 30px, #3A2F5B 32px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px, transparent 28px,
            #2A1F4B 28px, #2A1F4B 32px
        );
    background-color: #4A3F6B;
    border-top: 4px solid #A9A4C2;
}

.floor-stone::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        repeating-linear-gradient(
            90deg,
            transparent 0px,
            transparent 62px,
            rgba(169, 164, 194, 0.15) 62px,
            rgba(169, 164, 194, 0.15) 64px
        );
}

/* Metal/Workshop Floor */
.floor-metal {
    background:
        repeating-linear-gradient(
            90deg,
            #1A0E3E 0px, #1A0E3E 24px,
            #150535 24px, #150535 26px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0px, transparent 22px,
            #0D0221 22px, #0D0221 24px
        );
    background-color: #1A0E3E;
    border-top: 4px solid #3EEBBE;
}

/* ---- Dialogue Boxes ---- */
.dialogue-box {
    max-width: 680px;
    width: 90%;
    background: rgba(13, 2, 33, 0.88);
    border: 3px solid #4A3F6B;
    border-radius: 4px;
    padding: 24px 28px;
    position: relative;
    box-shadow:
        inset 2px 2px 0 rgba(232, 230, 240, 0.1),
        inset -2px -2px 0 rgba(0, 0, 0, 0.3),
        0 4px 0 rgba(0, 0, 0, 0.4);
    margin-top: auto;
    margin-bottom: 10vh;
    z-index: 5;
}

.dialogue-box::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    border: 1px solid rgba(74, 63, 107, 0.5);
    border-radius: 2px;
    pointer-events: none;
}

.dialogue-inner {
    display: flex;
    align-items: flex-end;
    gap: 4px;
}

.dialogue-text {
    font-family: 'DotGothic16', sans-serif;
    font-size: clamp(0.95rem, 1.8vw, 1.15rem);
    line-height: 1.85;
    color: #E8E6F0;
    flex: 1;
}

/* Blinking Cursor */
.cursor-blink {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #3EEBBE;
    animation: cursor-blink 500ms steps(2) infinite;
    flex-shrink: 0;
    margin-bottom: 2px;
}

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

/* ---- Room Headings ---- */
.room-heading {
    font-family: 'Silkscreen', monospace;
    font-size: clamp(1.5rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #E8E6F0;
    margin-bottom: 24px;
    text-align: center;
}

/* ---- Pixel Door (Room 1) ---- */
.pixel-door {
    width: 64px;
    height: 80px;
    transform: scale(4);
    image-rendering: pixelated;
    margin-bottom: 60px;
    position: relative;
}

.door-frame {
    width: 100%;
    height: 100%;
    background: #4A3F6B;
    border: 2px solid #A9A4C2;
    position: relative;
}

.door-panel {
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 0;
    background: #150535;
    border: 1px solid #A9A4C2;
    animation: door-open 6s steps(4) infinite;
}

.door-knob {
    position: absolute;
    top: 50%;
    right: 8px;
    width: 4px;
    height: 4px;
    background: #FFD166;
    z-index: 2;
}

@keyframes door-open {
    0%, 70% { transform: scaleX(1); transform-origin: left; }
    80%, 90% { transform: scaleX(0.3); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}

/* ---- Bookshelf (Room 2) ---- */
.pixel-bookshelf {
    background: #2A1F4B;
    border: 3px solid #4A3F6B;
    padding: 8px 12px;
    margin-bottom: 30px;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    gap: 4px;
    box-shadow: inset 2px 2px 0 rgba(0,0,0,0.3);
}

.shelf-row {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    min-height: 32px;
}

.book {
    image-rendering: pixelated;
    border: 1px solid rgba(0,0,0,0.3);
    animation: book-idle 6s steps(2) infinite;
}

.book:nth-child(3) {
    animation-delay: 2s;
}

.book:nth-child(6) {
    animation-delay: 4s;
}

@keyframes book-idle {
    0%, 85% { transform: translateY(0); }
    90% { transform: translateY(-3px); }
    95% { transform: translateY(-3px); }
    100% { transform: translateY(0); }
}

.shelf-plank {
    height: 4px;
    background: #4A3F6B;
    border-top: 1px solid #A9A4C2;
    border-bottom: 1px solid #2A1F4B;
}

/* Floating Book Pages */
.floating-pages {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.page-sprite {
    position: absolute;
    bottom: 30%;
    width: 8px;
    height: 10px;
    background: #E8E6F0;
    image-rendering: pixelated;
    animation: page-float 8s steps(16) infinite;
}

.page-sprite::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 3px;
    background: #A9A4C2;
}

@keyframes page-float {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% { opacity: 1; }
    80% { opacity: 1; }
    100% {
        transform: translateY(-50vh) rotate(15deg);
        opacity: 0;
    }
}

/* ---- Inventory Grid (Room 3) ---- */
.inventory-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 780px;
    width: 90%;
    margin-bottom: 20px;
}

.inventory-card {
    background: rgba(13, 2, 33, 0.85);
    border: 2px solid #4A3F6B;
    padding: 16px;
    text-align: center;
    transition: transform 0.1s steps(2), box-shadow 0.1s steps(2);
    cursor: pointer;
    image-rendering: auto;
    box-shadow:
        inset 1px 1px 0 rgba(232, 230, 240, 0.08),
        inset -1px -1px 0 rgba(0, 0, 0, 0.2);
}

.inventory-card:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 2px #3EEBBE;
    border-color: #3EEBBE;
}

.card-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.card-icon .pixel-icon {
    image-rendering: pixelated;
    width: 32px;
    height: 32px;
}

.card-title {
    font-family: 'Silkscreen', monospace;
    font-size: 0.75rem;
    color: #3EEBBE;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.card-desc {
    font-family: 'DotGothic16', sans-serif;
    font-size: 0.8rem;
    color: #A9A4C2;
    line-height: 1.6;
}

/* ---- Rooftop (Room 4) ---- */
#rooftop {
    background: #0D0221;
}

.rooftop-content {
    position: relative;
    justify-content: flex-end;
    padding-bottom: 8vh;
}

.rooftop-heading {
    color: #FFD166;
    margin-bottom: 30px;
}

/* Pixel Moon */
.pixel-moon {
    position: absolute;
    top: 8vh;
    right: 12vw;
    width: 96px;
    height: 96px;
    transform: scale(3);
    transform-origin: top right;
    image-rendering: pixelated;
    z-index: 1;
}

.moon-surface {
    width: 100%;
    height: 100%;
    background: #FFD166;
    border-radius: 50%;
    position: relative;
    animation: moon-phase 4s steps(2) infinite;
}

.moon-crater {
    position: absolute;
    border-radius: 50%;
    background: rgba(13, 2, 33, 0.25);
}

.crater-1 {
    width: 16px;
    height: 16px;
    top: 20px;
    left: 25px;
}

.crater-2 {
    width: 10px;
    height: 10px;
    top: 50px;
    left: 55px;
}

.crater-3 {
    width: 12px;
    height: 12px;
    top: 60px;
    left: 20px;
}

@keyframes moon-phase {
    0%, 49% { filter: brightness(1); }
    50%, 100% { filter: brightness(0.85); }
}

/* Satellite Dish */
.satellite-dish {
    position: absolute;
    bottom: 35%;
    left: 10%;
    image-rendering: pixelated;
}

.dish-base {
    width: 8px;
    height: 24px;
    background: #4A3F6B;
    margin: 0 auto;
}

.dish-arm {
    width: 4px;
    height: 16px;
    background: #A9A4C2;
    margin: 0 auto;
    transform: rotate(-30deg);
    transform-origin: bottom center;
}

.dish-bowl {
    width: 32px;
    height: 16px;
    background: #A9A4C2;
    border-radius: 50% 50% 0 0;
    margin: 0 auto -8px;
    border: 2px solid #4A3F6B;
    border-bottom: none;
}

/* Radio Tower */
.radio-tower {
    position: absolute;
    bottom: 30%;
    right: 8%;
    image-rendering: pixelated;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tower-base {
    width: 24px;
    height: 40px;
    background: linear-gradient(to top, #4A3F6B, #A9A4C2);
    background-size: 4px 4px;
    clip-path: polygon(30% 100%, 70% 100%, 60% 0%, 40% 0%);
}

.tower-mid {
    width: 8px;
    height: 20px;
    background: #A9A4C2;
}

.tower-top {
    width: 4px;
    height: 16px;
    background: #A9A4C2;
}

.tower-light {
    width: 6px;
    height: 6px;
    background: #FF6B9D;
    border-radius: 50%;
    animation: tower-blink 2s steps(2) infinite;
}

@keyframes tower-blink {
    0%, 49% { opacity: 1; box-shadow: 0 0 8px #FF6B9D; }
    50%, 100% { opacity: 0.3; box-shadow: none; }
}

/* Social Bubbles */
.social-bubbles {
    display: flex;
    gap: 20px;
    margin-bottom: 24px;
    z-index: 5;
    flex-wrap: wrap;
    justify-content: center;
}

.speech-bubble {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    background: rgba(13, 2, 33, 0.85);
    border: 2px solid #4A3F6B;
    text-decoration: none;
    transition: border-color 0.1s steps(2), transform 0.1s steps(2);
    position: relative;
    image-rendering: auto;
}

.speech-bubble::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 12px;
    width: 8px;
    height: 8px;
    background: rgba(13, 2, 33, 0.85);
    border-right: 2px solid #4A3F6B;
    border-bottom: 2px solid #4A3F6B;
    transform: rotate(45deg);
}

.speech-bubble:hover {
    border-color: #3EEBBE;
    transform: translateY(-4px);
}

.speech-bubble:hover::after {
    border-color: #3EEBBE;
}

.bubble-label {
    font-family: 'Press Start 2P', monospace;
    font-size: 0.55rem;
    color: #A9A4C2;
    letter-spacing: 0.08em;
}

.speech-bubble:hover .bubble-label {
    color: #3EEBBE;
}

/* ---- Dither Transition Overlay ---- */
.dither-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 300;
    pointer-events: none;
    background: #0D0221;
    opacity: 0;
}

.dither-overlay.active {
    animation: dither-in-out 0.8s steps(8) forwards;
}

@keyframes dither-in-out {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* ---- Typewriter Effect ---- */
.typewriter-active .dialogue-text {
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    animation: typewriter 2s steps(60) forwards;
}

@keyframes typewriter {
    0% { width: 0; }
    100% { width: 100%; }
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    #sidebar {
        display: none;
    }

    .room-content {
        padding: 20px;
    }

    .inventory-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .pixel-door {
        transform: scale(2.5);
        margin-bottom: 40px;
    }

    .pixel-moon {
        transform: scale(2);
    }

    .dialogue-box {
        margin-bottom: 5vh;
        padding: 16px 20px;
    }

    .social-bubbles {
        gap: 12px;
    }

    .speech-bubble {
        padding: 8px 14px;
    }
}

@media (max-width: 480px) {
    .inventory-grid {
        grid-template-columns: 1fr;
    }

    .title-text {
        font-size: clamp(2rem, 15vw, 4rem);
    }

    .pixel-door {
        transform: scale(2);
    }

    .pixel-moon {
        transform: scale(1.5);
        right: 5vw;
    }
}