/* identidade visual por modo, só na home com o PeePee vivo: carinho = o fundo da loja em uso, porrada = inferno */
.scene::before,
.scene::after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.app.petting .scene > .sun,
.app.petting .scene > .cloud,
.app.petting .scene > .stars {
  display: none;
}
.app.petting .embers i {
  background: #fff6c8;
  box-shadow: none;
}
.app.petting .stage svg {
  filter: drop-shadow(0 0 22px rgba(255, 240, 170, 0.9));
}
.app.petting .hint {
  color: #4a2a63;
  text-shadow:
    0 0 2px #fff,
    0 0 4px #fff,
    0 0 7px #fff,
    0 0 12px #fff;
}
/* cenário da porrada: .hl (matadouro) fica dentro da .scene, atrás da ilha, e só aparece nesse modo */
.deco {
  position: absolute;
  inset: 0;
  display: none;
  pointer-events: none;
  overflow: hidden;
}
.deco > *,
.hl .bld > * {
  position: absolute;
}
.deco svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.app.hell .hl {
  display: block;
}
/* carinho: a interface vira vidro perolado com letra escura */
.app.petting #s-home,
.app.petting .topbar {
  --ink2: #5a4473;
}
.app.petting .topbar {
  color: #4a2a63;
}
.app.petting #s-home .glass,
.app.petting .nav {
  background: rgba(255, 255, 255, 0.66);
  color: #4a2a63;
  border-color: rgba(255, 255, 255, 0.95);
  box-shadow:
    inset 0 1px 0 #fff,
    0 8px 26px rgba(255, 150, 200, 0.35),
    0 0 0 3px rgba(255, 255, 255, 0.3);
}
.app.petting #s-home .bar {
  background: rgba(124, 99, 151, 0.2);
}
.app.petting .me .h {
  background: conic-gradient(
    #e89b00 calc(var(--hud-level-progress, 0) * 1%),
    rgba(124, 99, 151, 0.28) 0
  );
}
.app.petting .hud-avatar-picture {
  background: #fff;
}
.app.petting .me .streak,
.app.petting .me .lv {
  background: #fff;
  border-color: rgba(124, 99, 151, 0.3);
}
.app.petting .streak,
.app.petting .lv,
.app.petting .topbar .chipc,
.app.petting .topbar .iconbtn {
  background: rgba(255, 255, 255, 0.8);
}
.app.petting .streak {
  color: #c2410c;
}
.app.petting .topbar .chipc > svg {
  color: #b97a00;
}
.app.petting .streak.tier-0 {
  color: #6b6578;
}
.app.petting .streak .stk-sh {
  color: #2f62c0;
}
.app.petting .lv {
  color: #8a5a00;
}
.app.petting .nav button {
  color: rgba(74, 42, 99, 0.6);
}
.app.petting .nav button.on {
  background: linear-gradient(180deg, #ffe9a8, #ffc2dc);
  color: #4a2a63;
  box-shadow: 0 0 14px rgba(255, 170, 210, 0.8);
}