/* Cuartito de la mascota (app de celular) */
.room { margin: -4px 0 0; }

.room-scene {
  position: relative;
  height: 300px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--line);
  /* pared + piso de madera */
  background:
    repeating-linear-gradient(90deg, transparent 0 58px, rgba(120, 80, 40, 0.10) 58px 60px) bottom / 100% 34px no-repeat,
    linear-gradient(#e7cfac, #dcc29b) bottom / 100% 34px no-repeat,
    linear-gradient(#fff8ec, #fbeedb);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.room-window {
  position: absolute;
  top: 34px;
  left: 50%;
  width: 120px;
  height: 92px;
  transform: translateX(-50%);
  border: 6px solid #fff;
  border-radius: 8px;
  box-shadow: 0 0 0 2px #e4d4bf;
  background:
    linear-gradient(#fff, #fff) center / 4px 100% no-repeat,
    linear-gradient(#fff, #fff) center / 100% 4px no-repeat,
    linear-gradient(#a9d6f5, #d9efff);
}
.room-dog {
  position: absolute;
  left: 0;
  bottom: 22px;
  image-rendering: pixelated;
  cursor: pointer;
}
.room-glow { display: none; }

/* En el cielo (modo recuerdo): de día, entre nubes */
.room.heaven .room-scene {
  border-color: #cfe0f2;
  background:
    radial-gradient(26px 11px at 16% 24%, #fff 97%, transparent 100%),
    radial-gradient(17px 10px at 22% 19%, #fff 97%, transparent 100%),
    radial-gradient(14px 8px at 11% 27%, #fff 97%, transparent 100%),
    radial-gradient(32px 12px at 74% 16%, #fff 97%, transparent 100%),
    radial-gradient(19px 11px at 81% 11%, #fff 97%, transparent 100%),
    radial-gradient(20px 8px at 50% 38%, rgba(255, 255, 255, 0.8) 97%, transparent 100%),
    radial-gradient(circle at 50% 100%, #fff 0 21px, transparent 22px) bottom left / 44px 34px repeat-x,
    linear-gradient(#fff, #fff) bottom / 100% 16px no-repeat,
    linear-gradient(#b9dcfa, #e4f0fd 62%, #f6f0ff);
}
.room.heaven .room-window { display: none; }
.room.heaven .room-glow {
  display: block;
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 260px;
  height: 120px;
  margin-left: -130px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 70%, rgba(255, 246, 214, 0.75), transparent 65%);
  pointer-events: none;
}
.room.heaven .fx.spark { color: #e0ac2c; }

.room-info { text-align: center; margin-top: 14px; }
.room-info h1 { margin-bottom: 4px; }
.room-note { margin: 10px auto 0; max-width: 420px; font-style: italic; color: var(--memorial); line-height: 1.5; }
.room-hint { text-align: center; margin-top: 8px; }

/* Globo y efectos (igual que en el escritorio) */
.room-fx { position: absolute; inset: 0; pointer-events: none; }
.room-bubble {
  position: absolute;
  transform: translateX(-50%);
  min-width: 170px;
  max-width: 220px;
  padding: 8px 10px;
  background: #fffdf9;
  color: #3a2c25;
  border: 2px solid #3a2c25;
  border-radius: 12px;
  box-shadow: 0 3px 0 rgba(58, 44, 37, 0.25);
  font-size: 13px;
  line-height: 1.3;
  z-index: 2;
}
.room-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -8px;
  width: 10px;
  height: 10px;
  background: #fffdf9;
  border-right: 2px solid #3a2c25;
  border-bottom: 2px solid #3a2c25;
  transform: translateX(-50%) rotate(45deg);
}
.room-bubble .bubble-text { font-weight: 650; }
.room-bubble .bubble-sub { font-size: 11.5px; color: #8a7466; margin-top: 2px; }
.room-bubble .bubble-actions { display: flex; gap: 6px; margin-top: 8px; }
.room-bubble button {
  white-space: nowrap;
  flex: 1;
  font: inherit;
  font-size: 12.5px;
  font-weight: 650;
  padding: 7px 6px;
  border-radius: 9px;
  border: 2px solid #3a2c25;
  background: #ffcf5a;
  color: #3a2c25;
}
.room-bubble button.ghost { background: #fffdf9; }

.fx { position: absolute; font-weight: 700; pointer-events: none; animation: float-up 1.6s ease-out forwards; }
.fx.heart { color: #ef5d78; font-size: 20px; }
.fx.zzz { color: #7b8bb8; font-size: 15px; font-style: italic; animation-duration: 2.6s; }
.fx.zzz.snore { font-size: 18px; }
.fx.spark { color: #f5d77a; font-size: 14px; animation: twinkle 2.4s ease-in-out forwards; }
@keyframes float-up {
  0% { opacity: 0; transform: translate(0, 6px) scale(0.7); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--drift, 8px), -50px) scale(1.1); }
}
@keyframes twinkle {
  0%, 100% { opacity: 0; transform: scale(0.4); }
  50% { opacity: 1; transform: scale(1); }
}

/* Escáner de QR */
.scanner {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 20px;
  gap: 16px;
}
.scanner video { width: min(90vw, 420px); aspect-ratio: 1; object-fit: cover; border-radius: 16px; border: 3px solid #ffcf5a; }
.scanner p { text-align: center; max-width: 340px; margin: 0; }