@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');body, html {
    height: 100%;
    margin: 0;
    background-color: #333;
    font-family: sans-serif;
    overflow: hidden;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}.scene {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}:root { --door-w: 240px; --gap: calc(var(--door-w) * 0.75); }
.wall {
    flex: 3;
    background: 
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(0,0,0,0.05) 0%, transparent 50%),
        linear-gradient(to bottom, #a1e1c6, #81c1b6, #6bb3a8);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    box-shadow: inset 0 10px 30px rgba(0,0,0,0.2), inset 0 -5px 20px rgba(0,0,0,0.1);
}.wall::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background:
        radial-gradient(20px at 50% 100%, transparent 50%, #e3785e 51%);
    background-size: 40px 40px;
}.floor {
    flex: 1;
    background-color: #7d7d7d; /* Lighter asphalt gray */
    background-image:
        linear-gradient(to right, rgba(136,136,136,0.9) 0 2px, transparent 2px),
        radial-gradient(ellipse at center, #8d8d8d, #6d6d6d);
    background-size: 2px 100%, auto;
    background-position: center top, center;
    background-repeat: no-repeat, no-repeat;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

.floor::before {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% - var(--gap));
    width: 2px;
    height: 140%;
    background-color: rgba(136,136,136,0.7);
    transform-origin: top center;
    transform: translateX(-50%) rotate(8deg);
    box-shadow:
        calc(-1 * var(--gap)) 0 0 0 rgba(136,136,136,0.7),
        calc(-2 * var(--gap)) 0 0 0 rgba(136,136,136,0.6);
}

.floor::after {
    content: '';
    position: absolute;
    top: 0;
    left: calc(50% + var(--gap));
    width: 2px;
    height: 140%;
    background-color: rgba(136,136,136,0.7);
    transform-origin: top center;
    transform: translateX(-50%) rotate(-8deg);
    box-shadow:
        calc(1 * var(--gap)) 0 0 0 rgba(136,136,136,0.7),
        calc(2 * var(--gap)) 0 0 0 rgba(136,136,136,0.6);
}
.door-frame {
    position: relative;
    width: var(--door-w);
    height: calc(var(--door-w) * 1.625);
    max-width: 90vw;
    max-height: 70vh;
    background-image: url('img/pixel_art_small.png');
    background-size: 100% 100%;
    background-position: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.8);
    border-radius: 50% 50% 0 0 / 31% 31% 0 0; /* Responsive arch */
    overflow: hidden;
}

.door-frame::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: calc(var(--door-w) * 0.125);
    background: radial-gradient(ellipse at center, rgba(255, 255, 100, 0.8), transparent 70%);
    filter: blur(15px);
    animation: flickering-glow 2s infinite ease-in-out;
}

@keyframes flickering-glow {
    0%, 100% {
        opacity: 0.7;
        transform: translateX(-50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scale(1.1);
    }
}

.door-container {
    perspective: 1000px;
    z-index: 0;
    position: relative;
    width: 100%;
    height: 100%;
}
.door {
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, #8a5a2a, #a06b3e, #8a5a2a);
    border: 5px solid #5c3a1a;
    border-radius: 50% 50% 0 0 / 31% 31% 0 0; /* Match frame arch */
    box-sizing: border-box; /* Keep width including border */
    box-shadow: 0 5px 35px rgba(0,0,0,0.6), inset 0 0 15px rgba(0,0,0,0.7);
    position: relative;
    transform-style: preserve-3d;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    transform-origin: left;
    transform: rotateY(0deg);
    transition: transform 0.3s ease;
    z-index: 100;
}
.door-container:hover .door { transform: rotateY(60deg); }
.note {
    width: 50%;
    height: auto;
    background-color: #fdf5e6;
    padding: 5%;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2);
    text-align: center;
    font-family: 'Kalam', cursive;
    transform: rotate(-5deg) translateZ(15px);
    position: absolute;
    top: 20%;
    transform-origin: 50% 0%;
    animation: paper-sway 6s infinite ease-in-out;
    transition: transform 0.3s ease;
    border: 1px solid #ddd;
}.note:hover {
    transform: rotate(-3deg) translateZ(20px) scale(1.05); /* Lifts and enlarges slightly */
}@keyframes paper-sway {
    0%, 100% {
        transform: rotate(-5deg) rotateZ(0deg) translateZ(15px);
    }
    50% {
        transform: rotate(-5deg) rotateZ(2.5deg) translateZ(15px);
    }
}.tape {
    position: absolute;
    top: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 20%;
    height: 10px;
    background-color: rgba(255, 255, 224, 0.5);
}.note .handwritten {
    color: #000;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
}.door-knob {
    width: 25px;
    height: 25px;
    background: radial-gradient(circle, #f0e68c, #daa520, #b8860b);
    border-radius: 50%;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) translateZ(15px);
}.doormat {
    width: 250px;
    height: 60px;
    background-color: #5D4037;
    border: 2px solid #4E342E;
    border-radius: 5px;
    margin-top: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: #BCAAA4;
    transform: perspective(100px) rotateX(15deg) skewX(-20deg);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}.speech-bubble {
    position: absolute;
    bottom: 170px; /* Raised to align with dog top */
    right: 16%; /* Aligned better with the dog */
    width: 150px;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    font-family: 'Kalam', cursive;
    font-size: 1.1rem;
    color: #333;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    animation: fadeIn 1s ease-in-out 5s forwards;
    z-index: 10;
}.speech-bubble::after {
    content: '';
    position: absolute;
    top: 100%; /* At the bottom of the bubble */
    right: 30px; /* Positioned on the right to point at the dog */
    border-width: 15px 10px 0; /* Downward pointing triangle */
    border-style: solid;
    border-color: #fff transparent transparent;
}@keyframes fadeIn {
    from {
        opacity: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        visibility: visible;
    }
}/* Environment Styling */
.window {
    position: absolute;
    z-index: 1;
    width: 120px;
    height: 180px;
    background: 
        radial-gradient(circle at 30% 20%, rgba(255,255,255,0.3) 0%, transparent 50%),
        linear-gradient(135deg, #87ceeb, #98d8f0, #87ceeb);
    border: 10px solid #f0f0f0;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    bottom: 200px;
    box-shadow: 
        inset 0 0 15px rgba(0,0,0,0.2),
        inset 0 0 30px rgba(135,206,235,0.3),
        0 5px 15px rgba(0,0,0,0.1);
}.left-window { left: 5%; }
.right-window { right: 5%; }.plant {
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 15%;
    transform: translateY(-50%);
    width: 4vw;
    height: 12vh;
    min-width: 60px;
    min-height: 120px;
    max-width: 100px;
    max-height: 200px;
}.plant::after {
    content: ''; /* Pot */
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(75% * 1.5);
    height: calc(28% * 1.5);
    min-width: 68px;
    min-height: 53px;
    max-width: 113px;
    max-height: 83px;
    background-color: #d2691e;
    border-radius: 5px 5px 10px 10px;
    z-index: 2; /* pot above leaves */
}
.leaf {
    position: absolute;
    width: 5vw;
    height: 5vw;
    min-width: 40px;
    min-height: 40px;
    max-width: 70px;
    max-height: 70px;
    background-color: #2e8b57;
    border-radius: 50%;
    transform-origin: bottom center;
    animation: leaf-sway 4s infinite ease-in-out;
    bottom: calc(28% * 1.5);
    z-index: 1;
}
.leaf1 { bottom: calc(28% * 1.5 + 4px); left: 30%; background-color: #3cb371; animation-delay: 0s; }
.leaf2 { bottom: calc(28% * 1.5 + 6px); left: 50%; animation-delay: 0.5s; }
.leaf3 { bottom: calc(28% * 1.5 + 2px); left: 70%; background-color: #228b22; animation-delay: 1s; }@keyframes leaf-sway {
    0%, 100% {
        transform: rotate(0deg) translateX(0);
    }
    50% {
        transform: rotate(5deg) translateX(5px);
    }
}
.door-container::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 98%;
    width: 30px;
    height: 100%;
    background: linear-gradient(to top, rgba(241, 196, 15, 0.5), transparent);
    filter: blur(10px);
    transform: skewX(-10deg);
    transform-origin: left bottom;
    animation: glow 3s infinite ease-in-out;
}/* Dog styles */
:root {
    --color-fur: #ffb141;
    --color-fur-dark: #F5832C;
    --color-spot: #F9584C;
    --color-snout: #544258;
    --color-collar: #3EAB6C;
    --duration: .7s;
    --semi-duration: calc(var(--duration) / 2);
    --easing: cubic-bezier(.5, 0, .5, 1);
    --stagger: calc(-1 * var(--semi-duration) / 2);
}.dog {
    z-index: 10;
    height: 300px;
    width: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    right: 5%;
    top: 55%;
    transform: translateY(-50%) scale(0.4);
}
.dog * {
    position: absolute;
    will-change: transform;
}
.dog:before {
    content: '';
    position: absolute;
    bottom: 13.3333333333%;
    left: 0;
    width: 100%;
    height: 3.3333333333%;
    background-color: #D3D1D1;
    border-radius: 2px;
    animation: shadow calc(1 * var(--semi-duration)) infinite;
}
.torso {
    width: 56.6666666667%;
    height: 33.3333333333%;
    animation: torso var(--semi-duration) both infinite;
}
.fur {
    position: absolute;
    overflow: hidden;
}
.fur:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    left: 0;
    background-color: var(--color, var(--color-fur));
    transform-origin: center bottom;
}
.torso > .fur {
    height: 100%;
    width: 185px;
    border-top-left-radius: 40px;
    transform-origin: left center;
    transform: rotate(-20deg) translateY(10px);
    z-index: 1;
}
.torso > .fur:after {
    height: 100%;
    width: 100%;
    border-bottom-left-radius: 200px 85px;
    border-bottom-right-radius: 100px;
}
.torso .spot {
    width: 120px;
    height: 120px;
    bottom: 40px;
    left: -20px;
    border-radius: 50%;
    background-color: var(--color-spot);
    z-index: 1;
    animation: spot var(--duration) calc(-1 * var(--semi-duration)) both infinite;
}
.torso .spot:after {
    content: '';
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background-color: inherit;
    position: absolute;
    bottom: -10px;
    right: 5px;
}
.neck {
    width: 50%;
    height: 100px;
    right: -5px;
    bottom: calc(100% - 10px);
    transform-origin: center bottom;
    transform: rotate(15deg);
    z-index: 2;
}
.neck > .fur {
    border-bottom-left-radius: 10px;
    height: 100%;
    width: 100%;
}
.neck > .fur:before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    height: 50px;
    width: 100%;
    background-color: var(--color-fur-dark);
    z-index: 1;
    transform-origin: right bottom;
    transform: rotate(15deg);
}
.head {
    height: 80%;
    width: 145%;
    left: -2%;
    bottom: 50%;
    transform-origin: left center;
    z-index: 2;
    animation: head var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
}
.head > .fur {
    height: 100%;
    width: 100%;
    border-bottom-right-radius: 80px;
}
.head > .fur:before {
    content: '';
    position: absolute;
    top: -80%;
    left: -30%;
    width: 100%;
    height: 0;
    padding-top: 100%;
    background-color: var(--color-spot);
    z-index: 1;
    border-radius: 50%;
}
.snout {
    --color: var(--color-snout);
    width: 25%;
    height: 0;
    padding-top: 25%;
    background-color: var(--color);
    top: 0;
    right: -5px;
    border-bottom-left-radius: 100%;
    z-index: 1;
}
.ears {
    bottom: 40%;
    height: 100%;
    width: 30%;
    left: 0;
    z-index: -1;
}
.ear {
    --color: var(--color-spot);
    width: 100%;
    height: 100%;
    bottom: 0;
    left: 0;
    transform-origin: left bottom;
    transform: rotate(-10deg);
    animation: ear-front calc(var(--duration) / 2) infinite;
}
.ear:before {
    content: '';
    position: absolute;
    height: 25px;
    width: 15px;
    z-index: 2;
    top: -2px;
    right: -7px;
    border-top-left-radius: 100%;
    border-width: 2px;
    border-color: transparent;
    border-style: solid;
    border-left: 2px solid var(--color-snout);
    transform-origin: bottom left;
    animation: ear-mark var(--semi-duration) calc(-1 * var(--semi-duration)) infinite;
}
.ear > .fur {
    border-top-left-radius: 100%;
    height: 100%;
    width: 100%;
}
.ear:nth-child(2) {
    left: 15px;
    bottom: 5px;
    transform: rotate(-5deg);
    --color: var(--color-fur);
    z-index: -1;
    animation: ear-back calc(var(--duration) / 2) infinite both;
}
.eye {
    --size: 6%;
    --color: var(--color-snout);
    width: var(--size);
    height: 0;
    padding: var(--size);
    left: 35%;
    top: 20%;
    border-radius: 50%;
    background-color: var(--color);
    z-index: 1;
}
.eye:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--color);
    z-index: 1;
}
.eye:after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: -50%;
    top: -50%;
    border-top-left-radius: 100%;
    border-width: 2px;
    border-color: var(--color);
    border-style: solid;
    border-bottom-color: var(--color-spot);
    border-right-color: var(--color-spot);
    transform: scale(1.25);
    z-index: 0;
}
.collar {
    width: calc(100% + 10px);
    height: 15%;
    background-color: var(--color-collar);
    left: -5px;
    bottom: 30px;
    border-radius: 5px;
    animation: collar var(--semi-duration) calc(var(--semi-duration) / 4) infinite;
    z-index: 2;
}
.collar:after {
    content: '';
    width: 18%;
    height: 120%;
    border-radius: 50%;
    background: var(--color-snout);
    position: absolute;
    right: 0%;
    top: 110%;
    transform-origin: center top;
    animation: tag var(--semi-duration) infinite both;
}
.torso > .legs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.leg {
    position: absolute;
    height: 65px;
    width: 45px;
    background-color: var(--color);
    transform-origin: center 5px;
    animation: leg infinite var(--duration) var(--delay, 0s);
}
.leg > .fur {
    width: 144.4444444444%;
    height: 100%;
}
.leg > .fur:after {
    width: 45px;
    bottom: 0;
    top: initial;
    transform: rotate(15deg);
}
.leg-inner {
    position: absolute;
    height: 65%;
    width: 100%;
    top: calc(100%);
    transform-origin: center top;
}
.leg-inner:before {
    content: "";
    width: 45px;
    height: 45px;
    background-color: var(--color);
    position: absolute;
    border-radius: 50%;
    top: -22.5px;
}
.leg > .leg-inner {
    animation: leg-inner infinite var(--duration) calc(var(--delay));
    transform: rotate(90deg);
}
.leg-inner > .fur {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
}
.leg-inner > .fur:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150%;
    top: 0;
    left: 0;
    background-color: var(--color);
    transform-origin: center top;
    transform: rotate(15deg);
}
.legs > .leg {
    bottom: 5px;
    --color: var(--color-fur);
}
.legs > .leg:nth-child(1), .legs .leg:nth-child(3) {
    right: 15px;
}
.legs > .leg:nth-child(3), .legs > .leg:nth-child(4) {
    --color: var(--color-fur-dark);
    z-index: -1;
}
.legs > .leg:nth-child(1), .legs .leg:nth-child(4) {
    --delay: 0s;
}
.legs > .leg:nth-child(2), .legs > .leg:nth-child(3) {
    --delay: calc(-1 * var(--duration) / 2 )
    ;
}
.legs > .leg:nth-child(2) {
    left: 0;
}
.legs > .leg:nth-child(4) {
    left: 0;
}
.tail {
    height: 15px;
    width: 20px;
    background-color: var(--color);
    border-top-right-radius: 10px 100%;
    border-top-left-radius: 10px 100%;
    animation: tail var(--semi-duration) infinite;
}
.torso > .tail {
    --color: var(--color-spot);
    bottom: calc(100% - 15px);
    left: 0;
    transform-origin: center bottom;
    transform: rotate(-45deg);
}
.tail > .tail {
    bottom: calc(90%);
    transform-origin: bottom left;
    transform: rotate(-10deg) translateY(50%) scaleX(0.8) scaleY(0.9);
    animation: tail-inner var(--semi-duration) var(--stagger) infinite;
}@keyframes glow {
    50% { opacity: 0.9; }
}@keyframes shadow {
    from, to {
        transform: scaleX(0.75);
    }
    45%, 55% {
        transform: scaleX(0.5);
    }
}
@keyframes torso {
    from, to {
        transform: none;
    }
    50% {
        transform: translateY(15%);
    }
}
@keyframes spot {
    from, 66%, to {
        transform: none;
    }
    33% {
        transform: translateX(10px);
    }
}
@keyframes head {
    from, to {
        transform: rotate(-10deg);
    }
    50% {
        transform: rotate(-15deg);
    }
}
@keyframes ear-front {
    50% {
        transform: rotate(-15deg);
    }
}
@keyframes ear-mark {
    from, to {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(25deg);
    }
}
@keyframes ear-back {
    from, to {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-10deg);
    }
}
@keyframes collar {
    from, to {
        transform: none;
    }
    50% {
        transform: translateY(-25%);
    }
}
@keyframes tag {
    from, to {
        transform: rotate(-15deg);
    }
    50% {
        transform: rotate(-15deg) scaleY(1.5);
    }
}
@keyframes leg {
    from, to {
        transform: none;
    }
    33% {
        transform: rotate(-55deg);
    }
    66% {
        transform: rotate(-20deg);
    }
}
@keyframes leg-inner {
    from, to {
        transform: none;
    }
    33% {
        transform: rotate(70deg);
    }
    76% {
        transform: none;
    }
}
@keyframes tail {
    from, to {
        transform: rotate(-45deg) translateX(-15%);
    }
    50% {
        transform: rotate(-25deg) translateX(15%);
    }
}
@keyframes tail-inner {
    from, to {
        transform: rotate(-10deg) translateY(50%) scaleX(0.8) scaleY(0.9);
    }
    50% {
        transform: rotate(5deg) translateY(50%) scaleX(0.8) scaleY(0.9);
    }
}/* Media Queries */
@media (max-width: 600px) {
    /* Drive all sizing from --door-w so frame and door stay aligned */
    :root { --door-w: 180px; --gap: calc(var(--door-w) * 0.75); }
    /* Keep door closed by default on touch devices; open on press/focus */
    .door { transform: rotateY(0deg); }
    .door-container:hover .door,
    .door-container:active .door,
    .door-link:focus .door,
    .door-link:active .door,
    .door-container:focus-within .door { transform: rotateY(55deg); }
    .doormat { width: 200px; height: 50px; font-size: 1.2rem; }
    .note .handwritten { font-size: 0.7rem; }
    .speech-bubble { width: 120px; padding: 10px; font-size: 0.8rem; }
    .window {
        display: block;
        width: 80px;
        height: 120px;
        bottom: 12vh; /* raise into view */
        opacity: 0.95;
    }
    .left-window { left: -16px; }
    .right-window { right: -16px; }
    .plant { left: 10%; top: 50%; transform: translateY(-50%); width: 3vw; height: 10vh; min-width: 50px; min-height: 80px; }
    .plant .leaf { width: 6vw; height: 6vw; min-width: 36px; min-height: 36px; }
    .dog { right: 1%; top: 50%; transform: translateY(-50%) scale(0.3); }
}