/* One character rig keeps every playable Peblet, its face and its accessories
   on the same child-sized scale across the village and job scenes. */
:root {
  /* A playable Peblet should look able to walk through the painted doors.
     At iPad size this is about 146px of visible character inside a 187px rig. */
  --peblet-visual-height: clamp(84px, 19.5vmin, 164px);
  --peblet-frame-size: clamp(108px, 25vmin, 210px);
}

.peblet-rig {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 100%;
  pointer-events: none;
}

.peblet-rig > img {
  position: absolute;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
}

/* Sprite measurements are made against a centred transparent canvas. The
   player artwork must use that same origin or wide/short variants can lose
   their feet below the rig even though their alpha frame is complete. */
.peblet-rig > img[data-sprite-frame] {
  object-position: 50% 50% !important;
}

/* Home keeps its roomy scene for a pet and furniture, while the character
   inside it now uses the same frame as every other page. */
.character-stage .peblet-stack {
  z-index: 4;
  inset: auto !important;
  left: 54% !important;
  bottom: 8% !important;
  width: var(--peblet-frame-size);
  height: var(--peblet-frame-size);
  margin-left: calc(var(--peblet-frame-size) / -2);
  transform: none !important;
}

.character-stage.has-pet .peblet-stack {
  transform: translateX(18%) !important;
}

.character-stage .peblet-rig {
  animation: sharedPebletBreathe 3.7s ease-in-out infinite;
}

.character-stage .peblet-preview {
  animation: none !important;
}

/* A chosen expression must keep the child's chosen stone colour. The
   renderer sets one texture-preserving filter token on every player sprite;
   scene-specific shadows are appended here instead of replacing that tint. */
.character-stage .peblet-preview[data-peblet-profile] {
  filter: var(--peblet-colour-filter, brightness(1)) drop-shadow(0 19px 11px rgba(44,25,12,.3)) !important;
}

.option-image-frame > img[data-peblet-profile] {
  filter: var(--peblet-colour-filter, brightness(1)) drop-shadow(0 4px 3px rgba(71,42,23,.12)) !important;
}

/* Accessories are percentages of this rig, so resizing the Peblet can never
   leave a hat, glasses or companion accessory behind. */
.character-stage .accessory-layer,
.bank-teller-accessory,
.village-accessory {
  transform-origin: 50% 100%;
}

.bank-teller {
  width: var(--peblet-frame-size) !important;
  height: var(--peblet-frame-size) !important;
  top: auto !important;
  bottom: 45% !important;
  overflow: visible !important;
}

.bank-teller-stack {
  width: 100% !important;
  height: 100% !important;
  animation: sharedPebletBreathe 4.6s ease-in-out infinite;
}

#bank-teller-image {
  animation: none !important;
  /* Sprite measurements are based on a centred transparent canvas. Keeping
     the landscape artwork centred reveals its feet instead of pushing them
     below the rig and behind the counter. */
  object-position: 50% 50% !important;
}

#bank-teller-image[data-peblet-profile] {
  filter: var(--peblet-colour-filter, brightness(1)) drop-shadow(0 10px 7px rgba(31,25,18,.28)) !important;
}

.village-player {
  width: var(--peblet-frame-size) !important;
  height: var(--peblet-frame-size) !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

#village-player-image[data-peblet-profile] {
  filter: var(--peblet-colour-filter, brightness(1)) !important;
}

/* Home chooser thumbnails use the same silhouette normaliser as the stage. */
.option-image-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 61px;
  margin: auto;
}

.option-image-frame > img {
  display: block;
  width: 100%;
  height: 61px;
  margin: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 3px rgba(71,42,23,.12));
}

.option-image-frame > img[data-sprite-frame] {
  position: absolute;
  margin: 0;
}

/* Customer PNGs have different transparent borders. These canvas heights
   make their visible bodies match the shared Peblet visual-height token. */
.bank-customer #customer[data-sprite="sunny"],
.cafe-customer img[data-sprite="sunny"],
.post-customer img[data-sprite="sunny"],
.farm-customer img[data-sprite="sunny"],
.wind-customer img[data-sprite="sunny"],
.weather-customer img[data-sprite="sunny"] { --customer-canvas-h: clamp(144px, 34.66vmin, 275px); }

.bank-customer #customer[data-sprite="maple"],
.cafe-customer img[data-sprite="maple"],
.post-customer img[data-sprite="maple"],
.farm-customer img[data-sprite="maple"],
.wind-customer img[data-sprite="maple"],
.weather-customer img[data-sprite="maple"] { --customer-canvas-h: clamp(128px, 30.91vmin, 245px); }

.bank-customer #customer[data-sprite="flint"],
.cafe-customer img[data-sprite="flint"],
.post-customer img[data-sprite="flint"],
.farm-customer img[data-sprite="flint"],
.wind-customer img[data-sprite="flint"],
.weather-customer img[data-sprite="flint"] { --customer-canvas-h: clamp(159px, 38.35vmin, 304px); }

.bank-customer #customer[data-sprite="dune"],
.cafe-customer img[data-sprite="dune"],
.post-customer img[data-sprite="dune"],
.farm-customer img[data-sprite="dune"],
.wind-customer img[data-sprite="dune"],
.weather-customer img[data-sprite="dune"] { --customer-canvas-h: clamp(162px, 39.05vmin, 310px); }

.bank-customer #customer[data-sprite="cloud"],
.cafe-customer img[data-sprite="cloud"],
.post-customer img[data-sprite="cloud"],
.farm-customer img[data-sprite="cloud"],
.wind-customer img[data-sprite="cloud"],
.weather-customer img[data-sprite="cloud"] { --customer-canvas-h: clamp(155px, 37.37vmin, 296px); }

@keyframes sharedPebletBreathe {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-5px) scale(1.012); }
}

@media (max-width: 820px) {
  .character-stage.has-pet .peblet-stack { transform: translateX(12%) !important; }
  .bank-teller { left: 2% !important; }
}

@media (prefers-reduced-motion: reduce) {
  .character-stage .peblet-rig,
  .bank-teller-stack { animation: none !important; }
}