/* Open game page, without the handheld shell. */
html, body, .habitat-scene canvas { cursor: url('../assets/cursor-arrow.svg') 4 3, default; }
button, a, label.toggle-row, .habitat button, .habitat-scene canvas { cursor: url('../assets/cursor-hand.svg') 12 3, pointer; }
button:disabled { cursor: url('../assets/cursor-arrow.svg') 4 3, default; }
.screen[data-habitat] .pet { width: 128px; height: 112px; left: calc(50% - 64px); scale: 1; }
.pet canvas { display: block; width: 128px; height: 112px; image-rendering: pixelated; }
.pet--blop .pet__body::after,.pet--spark .pet__body::after { display: none; }
.pet--pixie { --pet: #c99557; --pet-shadow: #956737; }
.pet--blop { --pet: #dfbd79; --pet-shadow: #b68a4b; }
.pet--spark { --pet: #65a5a1; --pet-shadow: #39717b; }
.screen[data-habitat="pixie"] .pet { --pet: #c99557; --pet-shadow: #956737; }
.screen[data-habitat="blop"] .pet { --pet: #dfbd79; --pet-shadow: #b68a4b; }
.screen[data-habitat="spark"] .pet { --pet: #65a5a1; --pet-shadow: #39717b; }
.pet--pixie .pet__ear { background: #658052; box-shadow: inset -6px -6px 0 #405d43; }
.pet--pixie .pet__body::after { position: absolute; left: 39px; top: 8px; width: 8px; height: 14px; content: ""; background: #e4ba62; box-shadow: 12px 0 0 #e4ba62; }
.pet--pixie .pet__cheek { background: #b95d3c; }
.pet.pet--blop .pet__ear { top: 0; height: 64px; width: 42px; background: #dfbd79; box-shadow: inset -7px -5px 0 #bc895b; }
.pet--blop .pet__body::after { position: absolute; bottom: 9px; left: 31px; width: 44px; height: 25px; content: ""; background: #eedca4; clip-path: polygon(15% 0,85% 0,85% 20%,100% 20%,100% 100%,0 100%,0 20%,15% 20%); }
.pet.pet--blop .pet__eye { height: 11px; top: 47px; }
.pet.pet--spark .pet__ear { top: 62px; height: 38px; width: 29px; background: #65a5a1; box-shadow: inset -6px -5px 0 #39717b; }
.pet.pet--spark .pet__ear--left { left: -3px; }.pet.pet--spark .pet__ear--right { right: -3px; }
.pet--spark .pet__body::after { position: absolute; bottom: 8px; left: 29px; width: 48px; height: 17px; content: ""; background: #a6c5b0; }
.pet.pet--spark .pet__foot { width: 45px; height: 19px; background: #39717b; }
.pet.pet--spark .pet__cheek { background: #a6c5b0; }
body { background: #e3d3ab; }
.stars { display: none; }
.start-screen { padding: 24px 18px; }
.game-card { width: min(100%, 620px); padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.page-brand { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 15px; color: #b83e24; font: italic 900 36px Georgia,serif; }
.page-brand span { color: #4c5142; font: italic 13px Georgia,serif; text-align: right; }
.console-display { display: flex; flex-direction: column; aspect-ratio: auto; padding: 0; border: 0; border-radius: 0; background: #73918a; box-shadow: none; overflow: hidden; }
.console-display::before,.console-display::after { display: none; }
.game-card__header { border: 0; padding: 10px 15px; font-size: 10px; }
.icon-button { width: 30px; height: 30px; }
.screen-frame { padding: 0; border: 0; }
.screen { height: auto; aspect-ratio: 16 / 9; min-height: 180px; }
.screen[data-habitat] .pet { scale: 1; bottom: 10%; }
.picker-arrow { width: 34px; height: 42px; font-size: 34px; }
.picker-arrow--left { left: 12px; }.picker-arrow--right { right: 12px; }
.intro { padding: 18px 12px; border: 0; }
.eyebrow { font-size: 10px; }.intro h1 { font-size: 42px; margin-top: 7px; }.tagline { font-size: 14px; margin-top: 10px; }
.pet-dots { margin-top: 15px; gap: 13px; }.pet-dot { width: 11px; height: 11px; }
.actions { padding: 0 24px 22px; border: 0; display: flex; flex-direction: column; gap: 12px; }
.pixel-button { min-height: 42px; font-size: 13px; }
.game-card__footer { padding: 14px 0; font-size: 9px; color: #5f5c4d; }
.birth-screen { inset: 0; }.birth-caption { font-size: 13px; padding: 13px 4px; }.birth-return { min-height: 36px; font-size: 12px; margin: 10px 18px; }
@media(max-width:450px) {
  .start-screen { padding: 16px 12px; }.game-card { padding: 0; border: 0; border-radius: 0; }
  .screen[data-habitat] .pet { scale: .8; }.intro h1 { font-size: 35px; }.page-brand span { font-size: 11px; }
  .birth-screen { inset: 0; }
}

/* Bring the selected friend closer while keeping feet on the ground. */
.screen[data-habitat] .pet { scale: 1.35; }
@media(max-width:450px) { .screen[data-habitat] .pet { scale: 1.15; } }