/* A five-year-old should not need instructions to reach the fun. */
.picture-mode .brand > span:not(.brand-flower),
.picture-mode .brand-sub,
.picture-mode .desktop-label,
.picture-mode #count,
.picture-mode #location,
.picture-mode #hint,
.picture-mode #keyboardHint,
.picture-mode .joy-label {
  display: none !important;
}
.picture-mode .topbar {
  gap: 12px;
}
.picture-mode .topbar nav {
  gap: 8px;
}
.picture-mode .topbar .round,
.picture-mode .topbar .pill {
  width: 48px;
  height: 48px;
  min-width: 48px;
  padding: 0;
  border-radius: 50%;
}
.picture-mode .topbar svg {
  width: 26px;
  height: 26px;
}
.picture-mode .brand {
  height: 48px;
  width: 48px;
  justify-content: center;
  background: #fff9eddd;
  border-radius: 50%;
}
.picture-mode .brand-flower {
  font-size: 0;
}
.picture-mode .brand-flower::before {
  content: "🏡";
  font-size: 29px;
  line-height: 1;
}
.picture-mode #loading p,
.picture-mode #loading small {
  display: none;
}
.picture-mode .loading-flower {
  font-size: 90px;
}
.picture-mode #welcome {
  background: linear-gradient(0deg, #dbe7c54a, transparent 45%);
}
.picture-mode .welcome-copy {
  left: 50%;
  top: auto;
  bottom: 15%;
  transform: translateX(-50%);
}
.picture-mode .welcome-copy .eyebrow,
.picture-mode #welcome h1,
.picture-mode #welcome p,
.picture-mode .welcome-foot,
.picture-mode .welcome-badge,
.picture-mode .start-words {
  display: none;
}
.picture-mode #start {
  padding: 0;
  width: 108px;
  height: 108px;
  border: 5px solid #fff8df;
  border-radius: 50%;
  justify-content: center;
  background: #447b58;
  box-shadow:
    0 9px 35px #22483330,
    0 0 0 12px #fff7da38;
}
.play-symbol {
  width: 54px;
  height: 54px;
  stroke: none;
  fill: #fff9dd;
  display: block;
}
.picture-mode #start .play-symbol {
  width: 61px;
  height: 61px;
}
.picture-mode #start:hover {
  background: #619865;
}
body:not(.picture-mode) #start .play-symbol {
  width: 22px;
  height: 22px;
}
body:not(.picture-mode) #start {
  gap: 16px;
}
.picture-mode #toolbar {
  gap: 10px;
  bottom: max(22px, env(safe-area-inset-bottom));
}
.picture-mode .tools {
  gap: 5px;
  padding: 7px;
  border-radius: 25px;
}
.picture-mode .tool {
  min-width: 58px;
  height: 58px;
  padding: 12px;
  border-radius: 18px;
  justify-content: center;
}
.picture-mode .tool > span:not([data-icon]) {
  display: none;
}
.picture-mode .tool svg {
  width: 32px;
  height: 32px;
}
.picture-mode .tool[data-tool="pet"] svg {
  color: #c87580;
}
.picture-mode .tool[data-tool="feed"] svg {
  color: #c68041;
}
.picture-mode .tool[data-tool="bubble"] svg {
  color: #608ea1;
}
.picture-mode .tool[data-tool="sing"] svg {
  color: #9980b0;
}
.picture-mode .tool.selected {
  background: #e5edda;
  box-shadow: inset 0 0 0 2px #6d9b6d66;
}
.picture-mode .photo {
  width: 48px;
  height: 48px;
}
.picture-mode .photo svg {
  width: 26px;
  height: 26px;
}
.picture-mode #animalName,
.picture-mode #animalAction {
  display: none;
}
.picture-mode #animalLabel {
  padding: 7px 12px;
  min-width: 45px;
  border-radius: 50%;
}
.picture-mode #animalLabel::after {
  content: "♡";
  font: 30px Georgia;
  color: #c67582;
  line-height: 1;
}
.picture-mode #toast {
  min-width: 0;
  width: auto;
  padding: 10px 17px;
  top: 88px;
  border-radius: 35px;
}
.picture-mode #toastText {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.picture-mode #toastIcon {
  font-size: 34px;
  line-height: 1;
}
.toast-portrait {
  width: 66px;
  height: 66px;
  display: block;
  border-radius: 50%;
}
.picture-mode #lookHint {
  font-size: 0;
  right: 40px;
  bottom: 160px;
  pointer-events: none;
}
.picture-mode #lookHint span {
  font-size: 38px;
}
.picture-mode #lookHint::before {
  content: "☝️";
  font-size: 30px;
  animation: look-finger 2.7s ease-in-out infinite;
}
.picture-mode #lookHint.touched {
  opacity: 0.25;
}
.picture-mode #lookHint.touched::before {
  display: none;
}
.picture-mode #joystick {
  bottom: 130px;
}
.picture-mode #joystick:not(.touched) .joy-ring::after {
  content: "☝️";
  position: absolute;
  left: 33px;
  top: 31px;
  font-size: 27px;
  pointer-events: none;
  animation: walk-finger 2.8s ease-in-out infinite;
}
@keyframes walk-finger {
  0%,
  100% {
    transform: translateY(8px);
    opacity: 0.5;
  }
  45%,
  70% {
    transform: translateY(-18px);
    opacity: 1;
  }
}
@keyframes look-finger {
  0%,
  100% {
    transform: translateX(-13px);
  }
  50% {
    transform: translateX(13px);
  }
}
.picture-mode dialog .eyebrow,
.picture-mode dialog h2,
.picture-mode .modal-intro,
.picture-mode .map-caption,
.picture-mode .saved-note,
.picture-mode .save-words {
  display: none;
}
.picture-mode dialog {
  padding: 20px;
}
.picture-mode .modal-header > div {
  flex: 1;
}
.picture-mode .modal-header > div::before {
  font-size: 39px;
}
.picture-mode #journal .modal-header > div::before {
  content: "🐾";
}
.picture-mode #map .modal-header > div::before {
  content: "🗺️";
}
.picture-mode #postcard .modal-header > div::before {
  content: "📷";
}
.picture-mode .close {
  width: 48px;
  height: 48px;
  font-size: 31px;
}
.reading-toggle {
  font-family: Georgia, serif;
  font-size: 17px;
  margin-right: 9px;
  background: #eeefdf;
  box-shadow: none;
}
.picture-mode .journal-tabs {
  margin-top: 15px;
  gap: 18px;
}
.picture-mode .journal-tabs button {
  font-size: 0;
  min-width: 78px;
  padding: 7px 10px 12px;
}
.picture-mode .journal-tabs span {
  display: none;
}
.picture-mode [data-tab="friends"]::before {
  content: "🐾";
  font-size: 30px;
}
.picture-mode [data-tab="places"]::before {
  content: "🌳";
  font-size: 30px;
}
.picture-mode .friend-card h3,
.picture-mode .friend-card p {
  display: none;
}
.picture-mode .friend-card {
  min-height: 115px;
  padding: 12px 4px;
}
.picture-mode .friend-art.has-portrait {
  width: min(84px, 100%);
  height: auto;
  aspect-ratio: 1;
  margin-bottom: 8px;
}
.picture-mode .friend-art:not(.has-portrait) {
  font-size: 40px;
  height: 57px;
  margin: 5px 0 9px;
}
.picture-mode .friend-card.locked .friend-art {
  filter: grayscale(1);
  opacity: 0.6;
}
.picture-mode .friend-hearts {
  font-size: 14px;
  letter-spacing: 2px;
}
.picture-mode .place-card {
  grid-column: span 1;
  display: flex;
  justify-content: center;
}
.picture-mode .place-card > div {
  display: none;
}
.picture-mode .place-card .friend-art {
  font-size: 46px;
}
.picture-mode #mapCanvas {
  touch-action: manipulation;
  cursor: pointer;
}
.picture-mode #mapPlaces {
  margin-top: 15px;
  gap: 9px;
}
.picture-mode #mapPlaces button {
  min-width: 65px;
  min-height: 60px;
  padding: 8px 14px;
  border-radius: 19px;
  font-size: 34px;
}
.picture-mode .destination-name {
  display: none;
}
.destination-picture {
  display: inline-block;
  margin-right: 5px;
}
.picture-mode .destination-picture {
  margin: 0;
}
.picture-mode #savePhoto {
  min-width: 80px;
  min-height: 55px;
  justify-content: center;
}
.picture-mode #savePhoto > span:last-child {
  font-size: 32px;
}
.picture-mode #wishBtn {
  font-size: 0 !important;
  min-width: 65px;
  height: 58px;
  top: 100px;
}
.picture-mode #wishBtn::after {
  content: "🏮 ✨";
  font-size: 28px;
}
.picture-mode #wishBtn:disabled::after {
  content: "✨";
  font-size: 28px;
}
@media (max-width: 370px) {
  .picture-mode .topbar {
    left: 12px;
    right: 12px;
  }
  .picture-mode .topbar nav {
    gap: 5px;
  }
  .picture-mode .topbar .round,
  .picture-mode .topbar .pill {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }
  .picture-mode .tool {
    min-width: 49px;
    width: 49px;
    height: 55px;
    padding: 9px;
  }
  .picture-mode .tools {
    gap: 3px;
  }
  .picture-mode #toolbar {
    gap: 6px;
  }
  .picture-mode .photo {
    width: 44px;
    height: 44px;
  }
}
@media (max-height: 520px) {
  .picture-mode #welcome .welcome-copy {
    bottom: 13%;
  }
  .picture-mode #start {
    width: 88px;
    height: 88px;
  }
  .picture-mode #joystick {
    bottom: 30px;
  }
  .picture-mode #lookHint {
    bottom: 55px;
  }
  .picture-mode #toast {
    top: 75px;
  }
  .picture-mode #wishBtn {
    top: 90px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .picture-mode #lookHint::before,
  .picture-mode .joy-ring::after {
    animation: none !important;
  }
}

/* Keep affection cues small enough not to hide little faces. */
.picture-mode #animalLabel {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}
.picture-mode #animalLabel::after {
  font-size: 26px;
  text-shadow:
    0 1px 3px #fff9ed,
    0 -1px 3px #fff9ed;
}

/* Broad lower-left gesture area. The floating ring is visual feedback only. */
.floating-controls #joystick {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  width: 112px;
  height: 112px;
  gap: 0;
  transition: opacity 0.16s;
  z-index: 6;
}
.floating-controls #joystick.engaged {
  opacity: 1;
  visibility: visible;
}
.floating-controls #joystick .joy-ring {
  width: 112px;
  height: 112px;
  background: #fff9e735;
  border: 2px solid #fffbea99;
}
.floating-controls #joystick #joyKnob {
  width: 42px;
  height: 42px;
  left: 33px;
  top: 33px;
}
.floating-controls #joystick .joy-label,
.floating-controls #joystick .joy-arrow,
.floating-controls #joystick .joy-ring::after {
  display: none !important;
}
.movement-area-cue {
  pointer-events: none;
  left: 3%;
  width: 44%;
  height: 29%;
  bottom: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, #fff7dd20, transparent 70%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff8e7;
  text-shadow: 0 1px 8px #24473b;
  transition: opacity 0.5s;
}
.movement-area-cue > span {
  font-size: 30px;
  animation: walk-finger 2.8s ease-in-out infinite;
}
.movement-area-cue > i {
  font-style: normal;
  font-size: 37px;
}
.movement-area-cue.used {
  opacity: 0;
}
.floating-controls #lookHint {
  right: auto;
  left: 71%;
  bottom: 28%;
  transform: translateX(-50%);
  pointer-events: none;
}
.floating-controls #lookHint.touched {
  opacity: 0;
}
@media (pointer: fine) {
  .movement-area-cue {
    display: none !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .movement-area-cue > span {
    animation: none !important;
  }
}