* { box-sizing: border-box; }
body { margin: 0; overflow: hidden; background: #8ed7f4; font-family: sans-serif; transition: background .8s ease; }
.world { position: relative; width: 100vw; height: 100vh; overflow: hidden; }
.sky { position: absolute; inset: 0 0 28%; background: #80d2ef; transition: background .8s ease; }
.celestial { position: absolute; top: 9%; left: 9%; width: clamp(52px, 7vw, 88px); transition: opacity .8s ease, transform .8s ease; }
.sun { fill: #ffd35e; stroke: #ffd35e; stroke-width: 7; stroke-linecap: round; } .moon { left: 10%; fill: #f3f1ce; opacity: 0; transform: translateY(15px); }
.cloud { position: absolute; width: clamp(110px, 15vw, 190px); fill: #fff; opacity: .62; filter: drop-shadow(0 4px 0 #ffffff40); animation: drift 19s linear infinite; }
.cloud-one { top: 10%; left: 13%; } .cloud-two { top: 27%; right: 15%; width: clamp(75px, 10vw, 125px); animation-delay: -7s; }
.hud { position: absolute; z-index: 3; top: 24px; right: 24px; width: 164px; height: 164px; padding: 16px; display: grid; align-content: center; justify-items: center; gap: 12px; border: 0; border-radius: 18px; background: #ffffffb8; }
.hud-row { display: grid; width: max-content; justify-items: start; gap: 2px; } .hud-label { color: #36576a; font-size: 12px; font-weight: 800; letter-spacing: .04em; } .meter { display: flex; gap: 9px; } .meter svg { width: 18px; height: 18px; filter: drop-shadow(0 1px 0 #6f453733); } .health svg { fill: #ef5c65; } .health svg.is-empty { opacity: .18; } .hunger svg { fill: #bd7446; } .hunger svg path:last-child { fill: #f0b362; }
.hunger svg.is-empty { opacity: .18; }
.affection svg { fill: #f2bd4a; } .affection svg.is-empty { opacity: .18; }
.grass { position: absolute; inset: 72% 0 0; background: #5bad4a; border-top: 8px solid #93d878; transition: background .8s ease, border-color .8s ease; }
.grass::before { content: ""; position: absolute; inset: -13px 0 auto; height: 15px; background: repeating-linear-gradient(110deg, transparent 0 10px, #5aad4c 11px 13px, transparent 14px 22px); }
.pet { position: absolute; left: 42%; bottom: 19%; width: clamp(130px, 18vw, 205px); padding: 0; border: 0; outline: 0; background: transparent; cursor: grab; touch-action: none; transition: left 1.1s ease-in-out; }
.pet img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border: 0; box-shadow: none; user-select: none; -webkit-user-drag: none; filter: drop-shadow(0 8px 4px #2f673355); }
.pet.walking img { animation: waddle .32s ease-in-out infinite alternate; }
.pet.facing-left { transform: scaleX(-1); }
.pet.jumping { animation: jump .6s cubic-bezier(.28,.84,.55,1) both; pointer-events: none; }
.pet.spinning { animation: spin .7s ease-in-out both; pointer-events: none; }
.pet.dragging { z-index: 6; cursor: grabbing; transition: none; }
.pet.falling { z-index: 6; transition: top var(--fall-duration, .45s) cubic-bezier(.3, .05, .75, .2); }
.pet.hurt img { animation: hurt-flash .62s ease-out; }
.debug-panel, .feature-panel { position: absolute; z-index: 4; bottom: 18px; display: grid; gap: 7px; padding: 11px; border-radius: 10px; background: #ffffffc4; color: #38515b; font-size: 12px; font-weight: 700; }
.debug-panel { left: 18px; } .feature-panel { right: 18px; }
.debug-panel button, .feature-panel button { padding: 7px 9px; border: 0; border-radius: 6px; background: #38515b; color: white; cursor: pointer; font: inherit; }
.feature-panel button { display: flex; align-items: center; justify-content: center; gap: 5px; } .feature-panel button svg { width: 15px; height: 15px; fill: #ef6f71; stroke: #ef6f71; stroke-width: 1.5; }
body.is-night { background: #17284d; } body.is-night .sky { background: #263f76; } body.is-night .sun { opacity: 0; transform: translateY(15px); } body.is-night .moon { opacity: 1; transform: translateY(0); } body.is-night .cloud { fill: #aeb8d4; opacity: .25; } body.is-night .grass { background: #376e41; border-top-color: #528b57; }
/* DEBUG ONLY: preview classes always win over the browser-clock state. */
body.debug-force-night { background: #17284d; } body.debug-force-night .sky { background: #263f76; } body.debug-force-night .sun { opacity: 0; transform: translateY(15px); } body.debug-force-night .moon { opacity: 1; transform: translateY(0); } body.debug-force-night .cloud { fill: #aeb8d4; opacity: .35; } body.debug-force-night .grass { background: #376e41; border-top-color: #528b57; }
body.debug-force-day { background: #8ed7f4; } body.debug-force-day .sky { background: #80d2ef; } body.debug-force-day .sun { opacity: 1; transform: translateY(0); } body.debug-force-day .moon { opacity: 0; transform: translateY(15px); } body.debug-force-day .cloud { fill: #fff; opacity: .62; } body.debug-force-day .grass { background: #5bad4a; border-top-color: #93d878; }
@keyframes waddle { to { transform: rotate(3deg) translateY(-2px); } }
@keyframes jump { 45% { translate: 0 -105px; } 100% { translate: 0 0; } }
@keyframes spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes hurt-flash { 0%, 100% { filter: drop-shadow(0 8px 4px #2f673355); } 15%, 70% { filter: drop-shadow(0 8px 4px #8c1d1d66) sepia(1) saturate(10) hue-rotate(310deg) brightness(1.05); } 42% { filter: drop-shadow(0 8px 4px #8c1d1d66) sepia(1) saturate(10) hue-rotate(310deg) brightness(1.25); } }
@keyframes drift { from { translate: 0 0; } 50% { translate: 55px 2px; } to { translate: 0 0; } }
@media (max-width: 600px) { .sky { inset-bottom: 33%; } .grass { inset-top: 67%; } .pet { bottom: 22%; width: 150px; } .hud { top: 13px; right: 13px; width: 145px; height: 145px; padding: 13px; } .meter { gap: 2px; } .meter svg { width: 17px; height: 17px; } }