:root {
  color-scheme: dark;
  --bg: #0c1025;
  --card: rgba(255, 255, 255, 0.12);
  --card-strong: rgba(255, 255, 255, 0.18);
  --text: #f8fbff;
  --muted: rgba(248, 251, 255, 0.72);
  --line: rgba(255, 255, 255, 0.18);
  --accent: #ffd166;
  --pink: #ff7aa8;
  --violet: #8f7cff;
  --mint: #7ef0c1;
  --shadow: 0 28px 80px rgba(0, 0, 0, 0.38);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Noto Sans SC", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at 15% 8%, rgba(255, 122, 168, 0.34), transparent 32%),
    radial-gradient(circle at 86% 12%, rgba(126, 240, 193, 0.22), transparent 28%),
    radial-gradient(circle at 62% 78%, rgba(143, 124, 255, 0.36), transparent 34%),
    linear-gradient(135deg, #0b1026 0%, #151935 48%, #241936 100%);
  color: var(--text);
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.42) 1px, transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.24) 1px, transparent 1px);
  background-size: 82px 82px, 136px 136px;
  background-position: 0 0, 40px 30px;
  pointer-events: none;
  opacity: .24;
}

.page-shell {
  width: min(1120px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 44px 0 64px;
  position: relative;
}

.card, .mini-card {
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
  border-radius: 32px;
}

.hero {
  min-height: 560px;
  padding: clamp(28px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 32px;
  align-items: center;
  overflow: hidden;
  position: relative;
}

.hero::after {
  content: "";
  position: absolute;
  width: 360px;
  height: 360px;
  right: -110px;
  bottom: -120px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 209, 102, .45), rgba(255, 122, 168, .1));
  filter: blur(2px);
}

.eyebrow, .section-tag {
  color: var(--accent);
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 13px;
  font-weight: 800;
}

h1 {
  margin: 12px 0 18px;
  font-family: "Nunito", "Noto Sans SC", sans-serif;
  font-size: clamp(48px, 8vw, 92px);
  line-height: .92;
  letter-spacing: -0.06em;
}

h2 {
  margin: 10px 0 12px;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.04em;
}

h3 { margin: 10px 0 8px; font-size: 22px; }

.subtitle {
  margin: 0;
  max-width: 560px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.7;
}

.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }

a { color: inherit; text-decoration: none; }
button, .primary-btn, .secondary-btn {
  border: 0;
  border-radius: 999px;
  padding: 14px 22px;
  font-weight: 800;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  font-family: inherit;
  text-align: center;
}

button:hover, .primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); }

.primary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--accent), #ff8ab6);
  color: #221425;
  box-shadow: 0 16px 34px rgba(255, 138, 182, .32);
}

.secondary-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.14);
  color: var(--text);
  border: 1px solid var(--line);
}

.wide { width: 100%; margin-top: 14px; }
.pulse { animation: pulse 2.4s infinite; }

@keyframes pulse {
  0%, 100% { box-shadow: 0 16px 34px rgba(255, 138, 182, .28); }
  50% { box-shadow: 0 16px 52px rgba(255, 209, 102, .5); }
}

.phone-mock {
  width: min(330px, 100%);
  min-height: 610px;
  margin: 0 auto;
  border: 12px solid rgba(12,16,37,.86);
  border-radius: 48px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.04)),
    radial-gradient(circle at 50% 16%, rgba(255, 209, 102, .22), transparent 34%),
    linear-gradient(180deg, #171b3b, #080b19);
  position: relative;
  padding: 74px 26px 30px;
  text-align: center;
  box-shadow: 0 34px 90px rgba(0,0,0,.55);
  z-index: 1;
  overflow: hidden;
}

.phone-speaker {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 92px;
  height: 26px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #050713;
}

.moon {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  margin: 26px auto;
  border-radius: 50%;
  font-size: 54px;
  background: rgba(255,255,255,.12);
  border: 1px solid var(--line);
}

.phone-title { font-size: 30px; font-weight: 900; margin: 18px 0 8px; }
.phone-text { color: var(--muted); line-height: 1.7; margin: 0; }
.lock-chip {
  margin: 46px auto 0;
  display: inline-flex;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(126, 240, 193, .14);
  color: var(--mint);
  border: 1px solid rgba(126, 240, 193, .35);
  font-weight: 800;
}

.grid { display: grid; gap: 22px; margin-top: 22px; }
.two-col { grid-template-columns: 1fr 1fr; }
.three-col { grid-template-columns: repeat(3, 1fr); }
.quick-start, .install-card, .setup-card, .console, .blueprint { padding: 32px; margin-top: 22px; }
.install-card p, .setup-card p, .mini-card p, .quick-card p, .blueprint p { color: var(--muted); line-height: 1.7; }

.quick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 18px; }
.quick-card {
  padding: 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.quick-card > strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: rgba(255, 209, 102, .2);
  color: var(--accent);
  font-size: 20px;
}
.quick-card.done { background: linear-gradient(135deg, rgba(126,240,193,.12), rgba(255,255,255,.07)); }

.steps { display: grid; gap: 12px; margin-top: 22px; }
.steps div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
}
.steps strong {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 209, 102, .22);
  color: var(--accent);
}
.hint { font-size: 13px; color: rgba(248, 251, 255, .62); }

.check-list { list-style: none; padding: 0; margin: 22px 0; display: grid; gap: 14px; }
.check-list li { color: var(--muted); }
.check-list li::before { content: "✓"; color: var(--mint); margin-right: 10px; font-weight: 900; }
.message-card {
  padding: 22px;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 209, 102, .16), rgba(255, 122, 168, .12));
  border: 1px solid rgba(255, 209, 102, .26);
}
.message-card span { display: block; color: var(--muted); margin-bottom: 8px; }
.message-card strong { font-size: 22px; }

.console-header { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.status-pill {
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(255,255,255,.1);
  color: var(--accent);
  border: 1px solid var(--line);
  font-weight: 800;
  white-space: nowrap;
}
.control-grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 24px; margin-top: 18px; }
.control-panel { display: grid; gap: 12px; }
label { color: var(--muted); font-weight: 700; }
.copy-row { display: flex; gap: 10px; }
input, textarea {
  width: 100%;
  border: 1px solid var(--line);
  color: var(--text);
  background: rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 14px 16px;
  font: inherit;
  outline: none;
}
textarea { min-height: 92px; resize: none; }
.copy-row button { color: #211528; background: var(--mint); }
.timeline { display: grid; gap: 14px; align-content: start; }
.event {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  color: var(--muted);
  border: 1px solid transparent;
}
.event span {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35);
}
.event p { margin: 0; }
.event.active {
  color: var(--text);
  border-color: rgba(126, 240, 193, .36);
  background: rgba(126, 240, 193, .1);
}
.event.active span { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 18px rgba(126,240,193,.74); }

.blueprint-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 16px; }
.blueprint-grid div {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
}
.quick-grid.two-step { grid-template-columns: 1fr 1fr; }
.instant-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; margin-top: 20px; }
.instant-box { display: grid; gap: 12px; }
.instant-note {
  padding: 22px;
  border-radius: 24px;
  background: rgba(255, 209, 102, .08);
  border: 1px solid rgba(255, 209, 102, .2);
}
.instant-note strong { display: block; margin-bottom: 8px; color: var(--accent); }
.mini-card { padding: 24px; }
.mini-card strong { font-size: 19px; }

.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 18px);
  opacity: 0;
  pointer-events: none;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #151935;
  font-weight: 900;
  transition: .24s ease;
  z-index: 20;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 860px) {
  .hero, .two-col, .three-col, .control-grid, .quick-grid, .quick-grid.two-step, .instant-grid, .blueprint-grid { grid-template-columns: 1fr; }
  .hero { min-height: auto; }
  .phone-mock { min-height: 520px; }
  .console-header { flex-direction: column; }
  .copy-row { flex-direction: column; }
}

.dog-wrap {
  position: relative;
  width: 164px;
  height: 150px;
  margin: 24px auto 22px;
  animation: dogFloat 3.4s ease-in-out infinite;
  z-index: 2;
}

@keyframes dogFloat {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-8px) rotate(1deg); }
}

.dog-face {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 142px;
  height: 122px;
  transform: translateX(-50%);
  border-radius: 54px 54px 48px 48px;
  background: linear-gradient(180deg, #f4a64d 0%, #e6862f 58%, #d16d26 100%);
  border: 3px solid rgba(255,255,255,.72);
  box-shadow: inset 0 -10px 0 rgba(118, 56, 15, .12), 0 22px 46px rgba(0,0,0,.28);
}

.dog-ear {
  position: absolute;
  top: 8px;
  width: 58px;
  height: 72px;
  background: linear-gradient(145deg, #f7aa52, #d76c26);
  border: 3px solid rgba(255,255,255,.72);
  border-radius: 18px 48px 20px 48px;
  z-index: 0;
}

.dog-ear.left { left: 8px; transform: rotate(-26deg); }
.dog-ear.right { right: 8px; transform: scaleX(-1) rotate(-26deg); }

.dog-ear::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 16px;
  width: 26px;
  height: 38px;
  border-radius: 14px 28px 14px 28px;
  background: rgba(255, 216, 180, .78);
}

.dog-eye {
  position: absolute;
  top: 48px;
  width: 14px;
  height: 18px;
  border-radius: 50%;
  background: #2a1a13;
  box-shadow: inset 3px 3px 0 rgba(255,255,255,.35);
}
.dog-eye.left { left: 38px; }
.dog-eye.right { right: 38px; }

.dog-brow {
  position: absolute;
  top: 30px;
  width: 26px;
  height: 17px;
  border-radius: 50%;
  background: #fff2d9;
  opacity: .94;
}
.dog-brow.left { left: 28px; transform: rotate(-12deg); }
.dog-brow.right { right: 28px; transform: rotate(12deg); }

.dog-muzzle {
  position: absolute;
  left: 50%;
  bottom: 21px;
  width: 62px;
  height: 42px;
  transform: translateX(-50%);
  border-radius: 46% 46% 52% 52%;
  background: #fff1dc;
}

.dog-nose {
  position: absolute;
  left: 50%;
  bottom: 49px;
  width: 20px;
  height: 14px;
  transform: translateX(-50%);
  border-radius: 50% 50% 58% 58%;
  background: #2a1a13;
  z-index: 2;
}

.dog-mouth {
  position: absolute;
  left: 50%;
  bottom: 33px;
  width: 28px;
  height: 14px;
  transform: translateX(-50%);
  border-bottom: 3px solid #7a3b23;
  border-radius: 0 0 22px 22px;
  z-index: 2;
}

.dog-blush {
  position: absolute;
  top: 72px;
  width: 22px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 125, 144, .42);
}
.dog-blush.left { left: 22px; }
.dog-blush.right { right: 22px; }

.sky-effect {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.floating-celestial {
  position: absolute;
  left: var(--x);
  bottom: -40px;
  font-size: var(--size);
  opacity: 0;
  filter: drop-shadow(0 0 10px rgba(255, 230, 150, .7));
  animation: floatCelestial var(--duration) ease-in forwards;
}

@keyframes floatCelestial {
  0% { transform: translateY(0) rotate(0deg) scale(.72); opacity: 0; }
  12% { opacity: .95; }
  72% { opacity: .92; }
  100% { transform: translateY(-560px) rotate(var(--rotate)) scale(1.14); opacity: 0; }
}

.phone-mock.sleeping {
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.04)),
    radial-gradient(circle at 50% 12%, rgba(255, 209, 102, .32), transparent 30%),
    radial-gradient(circle at 28% 32%, rgba(143, 124, 255, .36), transparent 36%),
    linear-gradient(180deg, #101434, #040611);
}

.phone-mock.sleeping .lock-chip {
  background: rgba(255, 209, 102, .16);
  color: var(--accent);
  border-color: rgba(255, 209, 102, .36);
}

.app-panel { margin-top: 22px; }
.panel-subtitle { margin: 8px 0 0; color: var(--muted); line-height: 1.7; }
.role-switch {
  display: inline-flex;
  gap: 8px;
  margin-top: 22px;
  padding: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 1px solid var(--line);
}
.role-tab {
  padding: 10px 18px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 900;
}
.role-tab.active {
  color: #20172a;
  background: linear-gradient(135deg, var(--accent), #ff8ab6);
}
.app-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 22px;
}
.card-lite {
  padding: 26px;
  border-radius: 26px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}
.card-lite p { color: var(--muted); line-height: 1.7; }
.big-action {
  width: 100%;
  min-height: 64px;
  font-size: 20px;
  margin: 8px 0 12px;
}
.receiver-badge {
  display: inline-flex;
  margin: 12px 0 16px;
  padding: 12px 16px;
  border-radius: 999px;
  background: rgba(126, 240, 193, .12);
  border: 1px solid rgba(126, 240, 193, .3);
  color: var(--mint);
  font-weight: 900;
}
body[data-role="controller"] #receiverCard,
body[data-role="receiver"] #controllerCard {
  opacity: .72;
}
.install-help { margin-top: 22px; }

@media (max-width: 860px) {
  .app-grid { grid-template-columns: 1fr; }
  .role-switch { width: 100%; }
  .role-tab { flex: 1; text-align: center; }
}

/* Receiver pet-only experience */
.receiver-fullscreen {
  display: none;
  position: relative;
  min-height: 100dvh;
  overflow: hidden;
  border-radius: 0;
  isolation: isolate;
}

.receiver-fullscreen.day {
  background: linear-gradient(180deg, #7ed9ff 0%, #d8f5ff 52%, #c9f0b8 100%);
}

.receiver-fullscreen.night {
  background: radial-gradient(circle at 70% 18%, rgba(255, 209, 102, .45), transparent 9%), linear-gradient(180deg, #101434 0%, #1b2050 58%, #14233e 100%);
}

.receiver-sky,
.receiver-stars {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

.receiver-sky::before,
.receiver-sky::after {
  content: "";
  position: absolute;
  width: 160px;
  height: 58px;
  border-radius: 999px;
  background: rgba(255,255,255,.68);
  filter: blur(.2px);
  animation: cloudDrift 18s linear infinite;
}
.receiver-sky::before { left: 8%; top: 16%; }
.receiver-sky::after { left: 62%; top: 28%; transform: scale(.72); animation-duration: 24s; }

.receiver-fullscreen.night .receiver-sky::before,
.receiver-fullscreen.night .receiver-sky::after { opacity: .12; }

@keyframes cloudDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(38px); }
}

.receiver-sun,
.receiver-moon {
  position: absolute;
  left: calc(12% + var(--sun-progress, .6) * 76%);
  top: calc(62% - var(--sun-progress, .6) * 46%);
  width: 92px;
  height: 92px;
  border-radius: 50%;
  z-index: 1;
  transition: left .6s ease-out, top .6s ease-out;
}
.receiver-sun { background: #ffd166; box-shadow: 0 0 60px rgba(255,209,102,.75); }
.receiver-moon {
  background: #ffe8a3;
  box-shadow: 0 0 60px rgba(255,232,163,.7);
  display: none;
  left: 70%;
  top: 18%;
}
.receiver-moon::after { content: ""; position: absolute; width: 70px; height: 70px; border-radius: 50%; background: #101434; right: -8px; top: 4px; }
.receiver-fullscreen.night .receiver-sun { display: none; }
.receiver-fullscreen.night .receiver-moon { display: block; }

.receiver-ground {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -8%;
  height: 30%;
  background: linear-gradient(180deg, #78cd75, #3d945b);
  border-radius: 50% 50% 0 0;
  z-index: 2;
}
.receiver-fullscreen.night .receiver-ground { background: linear-gradient(180deg, #335d54, #183d45); }

.receiver-dog-stage {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  z-index: 3;
}
.game-dog { transform: scale(1.55); }
.game-dog.eat { animation: dogEat .9s ease-in-out; }
.game-dog.play { animation: dogPlay .9s ease-in-out; }

@keyframes dogEat {
  0%, 100% { transform: scale(1.55) translateY(0); }
  50% { transform: scale(1.62) translateY(18px); }
}
@keyframes dogPlay {
  0%, 100% { transform: scale(1.55) rotate(0deg); }
  35% { transform: scale(1.62) rotate(-10deg) translateX(-18px); }
  70% { transform: scale(1.62) rotate(10deg) translateX(18px); }
}

.toy {
  position: absolute;
  font-size: 54px;
  opacity: 0;
  transition: opacity .2s ease;
  z-index: 5;
}
.toy.show { opacity: 1; }
.toy-ball { right: 22%; bottom: 25%; animation: toyBounce 1.4s ease-in-out; }
.toy-food { left: 24%; bottom: 28%; animation: toyBounce 1.3s ease-in-out; }
@keyframes toyBounce {
  0%, 100% { transform: translateY(0) scale(.8); }
  50% { transform: translateY(-42px) scale(1.08); }
}

.pet-actions {
  position: fixed;
  left: 50%;
  bottom: max(28px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  gap: 16px;
  z-index: 8;
  padding: 12px;
  border-radius: 999px;
  background: rgba(255,255,255,.28);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.42);
}
.pet-actions button {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 28px;
  background: rgba(255,255,255,.78);
  color: #1d1830;
}

body[data-role="receiver"] {
  background: #101434;
}
body[data-role="receiver"] .controller-hero,
body[data-role="receiver"] .app-panel,
body[data-role="receiver"] .install-help {
  display: none;
}
body[data-role="receiver"] .page-shell {
  width: 100%;
  padding: 0;
}
body[data-role="receiver"] .receiver-fullscreen {
  display: block;
}
body[data-role="controller"] .receiver-fullscreen {
  display: none;
}
body[data-role="controller"] .app-panel,
body[data-role="controller"] .install-help {
  display: block;
}

/* Real shiba photo cutout */
.real-dog {
  width: min(46vw, 360px);
  height: min(52vw, 420px);
  display: grid;
  place-items: end center;
  margin: 0 auto;
  animation: dogFloat 3.4s ease-in-out infinite;
  filter: drop-shadow(0 28px 34px rgba(40, 34, 23, .28));
  z-index: 4;
}

.real-dog img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

.preview-dog {
  width: 190px;
  height: 230px;
  margin: 18px auto 10px;
}

.game-dog.real-dog {
  width: min(68vw, 430px);
  height: min(78vw, 520px);
  transform: none;
}

.game-dog.real-dog.eat { animation: realDogEat .9s ease-in-out; }
.game-dog.real-dog.play { animation: realDogPlay .9s ease-in-out; }

@keyframes realDogEat {
  0%, 100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(26px) scale(1.04); }
}

@keyframes realDogPlay {
  0%, 100% { transform: translateX(0) rotate(0deg) scale(1); }
  35% { transform: translateX(-22px) rotate(-5deg) scale(1.04); }
  70% { transform: translateX(22px) rotate(5deg) scale(1.04); }
}

.receiver-fullscreen.sleeping .game-dog.real-dog {
  filter: drop-shadow(0 0 28px rgba(255, 209, 102, .42)) drop-shadow(0 26px 34px rgba(0, 0, 0, .32));
}

.real-dog img {
  -webkit-mask-image: radial-gradient(ellipse 62% 86% at 46% 54%, #000 66%, rgba(0,0,0,.86) 78%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 86% at 46% 54%, #000 66%, rgba(0,0,0,.86) 78%, transparent 100%);
}

.real-dog img {
  clip-path: ellipse(43% 48% at 43% 50%);
  -webkit-clip-path: ellipse(43% 48% at 43% 50%);
}

.real-dog img {
  clip-path: circle(34% at 38% 46%);
  -webkit-clip-path: circle(34% at 38% 46%);
  transform: scale(1.18);
  transform-origin: 38% 46%;
  filter: saturate(1.05) contrast(1.02);
}

.pet-actions button {
  width: 72px;
  height: 72px;
  font-size: 34px;
}

.real-dog img {
  clip-path: none;
  -webkit-clip-path: none;
  transform: none;
}

.receiver-dog-stage::after {
  content: "";
  position: absolute;
  right: 19%;
  bottom: 24%;
  width: min(28vw, 210px);
  height: min(22vw, 150px);
  border-radius: 70% 55% 45% 60%;
  background:
    radial-gradient(circle at 28% 62%, #58b96d 0 32%, transparent 33%),
    radial-gradient(circle at 56% 48%, #6ccd7b 0 38%, transparent 39%),
    radial-gradient(circle at 78% 66%, #429a5b 0 34%, transparent 35%);
  filter: drop-shadow(0 12px 12px rgba(25, 91, 52, .18));
  z-index: 5;
  pointer-events: none;
}
.receiver-fullscreen.night .receiver-dog-stage::after {
  background:
    radial-gradient(circle at 28% 62%, #2d6b5a 0 32%, transparent 33%),
    radial-gradient(circle at 56% 48%, #347a61 0 38%, transparent 39%),
    radial-gradient(circle at 78% 66%, #255746 0 34%, transparent 35%);
}

/* Animated real-dog mode */
.real-dog {
  animation: realDogIdle 3.2s ease-in-out infinite;
  will-change: transform, filter;
}
.real-dog img {
  animation: realDogBreath 2.6s ease-in-out infinite;
  will-change: transform;
}
.game-dog.real-dog::before,
.preview-dog.real-dog::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 46%;
  height: 32%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.32), transparent 58%);
  transform: translateX(-50%) rotate(-8deg);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: screen;
}
.game-dog.real-dog::after,
.preview-dog.real-dog::after {
  content: "💤";
  position: absolute;
  right: 8%;
  top: 4%;
  font-size: clamp(26px, 5vw, 42px);
  opacity: 0;
  transform: translateY(12px) scale(.85);
  animation: sleepyBubble 4.8s ease-in-out infinite;
  z-index: 5;
}
.receiver-fullscreen:not(.sleeping) .game-dog.real-dog::after,
.phone-mock:not(.sleeping) .preview-dog.real-dog::after {
  content: "✨";
  opacity: .78;
  animation: sparkleBubble 2.8s ease-in-out infinite;
}
.receiver-fullscreen.sleeping .game-dog.real-dog {
  animation: realDogSleepFloat 4.2s ease-in-out infinite;
}
.receiver-fullscreen.sleeping .game-dog.real-dog img {
  animation: realDogSleep 3.4s ease-in-out infinite;
}

@keyframes realDogIdle {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  45% { transform: translateY(-10px) rotate(1deg); }
  70% { transform: translateY(-4px) rotate(.3deg); }
}
@keyframes realDogBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes realDogSleepFloat {
  0%, 100% { transform: translateY(0) rotate(-.6deg); }
  50% { transform: translateY(-14px) rotate(.6deg); }
}
@keyframes realDogSleep {
  0%, 100% { transform: scale(1); filter: brightness(.96) saturate(.92); }
  50% { transform: scale(1.025); filter: brightness(1.05) saturate(1.05); }
}
@keyframes sleepyBubble {
  0%, 62%, 100% { opacity: 0; transform: translateY(16px) scale(.78); }
  18%, 42% { opacity: .86; transform: translateY(-8px) scale(1); }
}
@keyframes sparkleBubble {
  0%, 100% { opacity: .35; transform: translateY(8px) scale(.82) rotate(0deg); }
  50% { opacity: 1; transform: translateY(-8px) scale(1.12) rotate(12deg); }
}

.game-dog.real-dog.eat { animation: realDogEat 1s ease-in-out; }
.game-dog.real-dog.eat img { animation: realDogMunch .42s ease-in-out 3; }
.game-dog.real-dog.play { animation: realDogPlay 1.1s ease-in-out; }
.game-dog.real-dog.play img { animation: realDogExcited .55s ease-in-out 2; }

@keyframes realDogMunch {
  0%, 100% { transform: scale(1.02) translateY(0); }
  50% { transform: scale(1.08) translateY(10px); }
}
@keyframes realDogExcited {
  0%, 100% { transform: scale(1.02) rotate(0deg); }
  50% { transform: scale(1.09) rotate(-2deg); }
}

/* Final animated photo-pet presentation */
.real-dog {
  width: min(58vw, 360px);
  height: min(58vw, 360px);
  border-radius: 50%;
  padding: 10px;
  background: linear-gradient(145deg, rgba(255,255,255,.72), rgba(255,255,255,.2));
  box-shadow: 0 28px 60px rgba(40, 34, 23, .28), inset 0 0 0 1px rgba(255,255,255,.6);
  overflow: visible;
}
.game-dog.real-dog {
  width: min(70vw, 420px);
  height: min(70vw, 420px);
}
.preview-dog.real-dog {
  width: 190px;
  height: 190px;
}
.real-dog img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 56%;
  border-radius: 50%;
  clip-path: none !important;
  -webkit-clip-path: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none;
  filter: saturate(1.06) contrast(1.02);
  box-shadow: inset 0 0 30px rgba(255,255,255,.18);
}
.receiver-dog-stage::after {
  right: 16%;
  bottom: 23%;
  width: min(32vw, 240px);
  height: min(20vw, 150px);
}

.loop-status {
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--muted);
  line-height: 1.5;
  font-size: 14px;
}

.receiver-fullscreen.sleeping {
  background: radial-gradient(circle at 70% 18%, rgba(255, 209, 102, .52), transparent 10%), linear-gradient(180deg, #101434 0%, #1b2050 58%, #14233e 100%) !important;
}
.receiver-fullscreen.sleeping .receiver-sun { display: none !important; }
.receiver-fullscreen.sleeping .receiver-moon { display: block !important; }
.receiver-fullscreen.sleeping .receiver-ground { background: linear-gradient(180deg, #335d54, #183d45) !important; }


/* v10 cute daytime field + animated Q-shiba */
.receiver-fullscreen.day {
  background:
    radial-gradient(circle at 16% 15%, rgba(255, 255, 255, .72) 0 5%, transparent 5.5%),
    radial-gradient(circle at 78% 18%, rgba(255, 181, 211, .45) 0 8%, transparent 8.5%),
    radial-gradient(circle at 28% 72%, rgba(255, 242, 158, .36) 0 11%, transparent 11.5%),
    linear-gradient(180deg, #8ee6ff 0%, #d9f9ff 45%, #fef0bd 68%, #a9ed9a 100%);
}

.receiver-fullscreen.day::before,
.receiver-fullscreen.day::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

.receiver-fullscreen.day::before {
  left: 7%;
  top: 36%;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 18%, #ff9fc8 0 13%, transparent 14%),
    radial-gradient(circle at 82% 50%, #ffd166 0 13%, transparent 14%),
    radial-gradient(circle at 50% 82%, #ff9fc8 0 13%, transparent 14%),
    radial-gradient(circle at 18% 50%, #ffd166 0 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, #fff7b8 0 17%, transparent 18%);
  opacity: .78;
  animation: flowerSpin 8s linear infinite;
}

.receiver-fullscreen.day::after {
  right: 9%;
  top: 40%;
  width: 68px;
  height: 56px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 126, 180, .78) 0 19%, transparent 20%),
    radial-gradient(circle at 70% 30%, rgba(255, 126, 180, .78) 0 19%, transparent 20%),
    linear-gradient(45deg, rgba(255, 126, 180, .78) 0 50%, transparent 51%);
  transform: rotate(-12deg);
  opacity: .72;
  animation: heartFloat 4.6s ease-in-out infinite;
}

.receiver-fullscreen.day .receiver-sky::before,
.receiver-fullscreen.day .receiver-sky::after {
  background:
    radial-gradient(circle at 20% 62%, #fff 0 24%, transparent 25%),
    radial-gradient(circle at 42% 44%, #fff 0 30%, transparent 31%),
    radial-gradient(circle at 68% 58%, #fff 0 28%, transparent 29%),
    rgba(255, 255, 255, .78);
  box-shadow: 0 16px 28px rgba(91, 176, 215, .12);
}

.receiver-fullscreen.day .receiver-ground {
  height: 34%;
  background:
    radial-gradient(circle at 14% 40%, #ffd166 0 9px, transparent 10px),
    radial-gradient(circle at 22% 62%, #ff8ab6 0 8px, transparent 9px),
    radial-gradient(circle at 70% 42%, #fff4a3 0 8px, transparent 9px),
    radial-gradient(circle at 82% 60%, #ff9fc8 0 7px, transparent 8px),
    linear-gradient(180deg, #aef68d 0%, #61c969 46%, #369858 100%);
  box-shadow: inset 0 24px 40px rgba(255, 255, 255, .18);
}

.receiver-fullscreen.day .receiver-ground::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 14%;
  height: 38px;
  background-image:
    linear-gradient(68deg, transparent 0 45%, rgba(34, 132, 69, .42) 46% 49%, transparent 50%),
    linear-gradient(112deg, transparent 0 45%, rgba(34, 132, 69, .35) 46% 49%, transparent 50%);
  background-size: 28px 38px;
  opacity: .55;
}

.receiver-message {
  position: absolute;
  left: 50%;
  top: clamp(72px, 14vh, 132px);
  transform: translateX(-50%) translateY(8px) scale(.96);
  max-width: min(82vw, 420px);
  padding: 14px 18px;
  border-radius: 24px 24px 24px 8px;
  background: rgba(255, 255, 255, .96);
  color: #5c3b1e;
  box-shadow: 0 16px 34px rgba(92, 70, 35, .18), inset 0 0 0 2px rgba(255,255,255,.9);
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  font-weight: 900;
  font-size: clamp(18px, 4.8vw, 28px);
  line-height: 1.35;
  text-align: center;
  z-index: 8;
  opacity: 0;
  pointer-events: none;
}

.receiver-message::after {
  content: "";
  position: absolute;
  left: 54px;
  bottom: -13px;
  width: 26px;
  height: 26px;
  background: rgba(255, 255, 255, .96);
  transform: rotate(45deg);
  border-radius: 0 0 8px 0;
}

.receiver-message.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
  animation: messagePop .42s ease-out forwards;
}

.q-dog {
  --fur: #f6a34a;
  --fur-dark: #d9782f;
  --cream: #fff0d7;
  --ink: #321f18;
  --blush: #ff91a8;
  width: 210px;
  height: 202px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 26px 28px rgba(77, 75, 39, .22));
  animation: qDogSelfPlay 5.6s ease-in-out infinite;
  z-index: 6;
}

.preview-dog.q-dog {
  width: 174px;
  height: 166px;
  margin: 42px auto 28px;
  transform: scale(.9);
  animation: qDogBounce 3.2s ease-in-out infinite;
}

.game-dog.q-dog {
  width: min(66vw, 330px);
  height: min(62vw, 300px);
  margin-top: 18vh;
}

.q-dog-head,
.q-dog-body,
.q-dog-ear,
.q-dog-tail,
.q-dog-paw,
.q-dog-head span {
  position: absolute;
  display: block;
}

.q-dog-body {
  left: 50%;
  bottom: 3%;
  width: 63%;
  height: 47%;
  transform: translateX(-50%);
  border-radius: 48% 48% 42% 42%;
  background: linear-gradient(180deg, #ffc06b 0%, var(--fur) 52%, var(--fur-dark) 100%);
  box-shadow: inset 0 -10px 0 rgba(105, 56, 22, .12), inset 0 0 0 4px rgba(255,255,255,.42);
}

.q-dog-head {
  left: 50%;
  top: 4%;
  width: 72%;
  height: 66%;
  transform: translateX(-50%);
  border-radius: 45% 45% 48% 48%;
  background: linear-gradient(180deg, #ffbd67 0%, var(--fur) 58%, #e48235 100%);
  box-shadow: inset 0 -12px 0 rgba(103, 50, 18, .1), inset 0 0 0 4px rgba(255,255,255,.55);
  animation: qDogHeadTilt 2.8s ease-in-out infinite;
  transform-origin: 50% 78%;
  z-index: 3;
}

.q-dog-ear {
  top: 0;
  width: 30%;
  height: 40%;
  border-radius: 22% 75% 24% 75%;
  background: linear-gradient(145deg, #ffb75d, #d86f2a);
  box-shadow: inset 0 0 0 4px rgba(255,255,255,.42);
  z-index: 2;
  animation: earWiggle 3s ease-in-out infinite;
}

.q-dog-ear.left { left: 10%; transform: rotate(-24deg); }
.q-dog-ear.right { right: 10%; transform: scaleX(-1) rotate(-24deg); animation-delay: .22s; }
.q-dog-ear::after {
  content: "";
  position: absolute;
  left: 25%;
  top: 22%;
  width: 42%;
  height: 54%;
  border-radius: 40% 80% 36% 78%;
  background: rgba(255, 226, 189, .86);
}

.q-dog-tail {
  right: 6%;
  bottom: 23%;
  width: 34%;
  height: 34%;
  border: 16px solid var(--fur);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform: rotate(26deg);
  transform-origin: 15% 82%;
  animation: tailWag .68s ease-in-out infinite;
  z-index: 1;
}

.q-dog-brow {
  top: 23%;
  width: 20%;
  height: 13%;
  border-radius: 50%;
  background: var(--cream);
}
.q-dog-brow.left { left: 20%; transform: rotate(-12deg); }
.q-dog-brow.right { right: 20%; transform: rotate(12deg); }

.q-dog-eye {
  top: 40%;
  width: 9%;
  height: 12%;
  border-radius: 50%;
  background: var(--ink);
  box-shadow: inset 4px 3px 0 rgba(255,255,255,.5);
  animation: dogBlink 4.6s ease-in-out infinite;
}
.q-dog-eye.left { left: 30%; }
.q-dog-eye.right { right: 30%; }

.q-dog-muzzle {
  left: 50%;
  bottom: 18%;
  width: 44%;
  height: 30%;
  transform: translateX(-50%);
  border-radius: 48% 48% 52% 52%;
  background: var(--cream);
}
.q-dog-nose {
  left: 50%;
  bottom: 34%;
  width: 14%;
  height: 10%;
  transform: translateX(-50%);
  border-radius: 48% 48% 60% 60%;
  background: var(--ink);
  z-index: 4;
}
.q-dog-mouth {
  left: 50%;
  bottom: 25%;
  width: 20%;
  height: 10%;
  transform: translateX(-50%);
  border-bottom: 4px solid #8a4a2d;
  border-radius: 0 0 999px 999px;
  z-index: 4;
}
.q-dog-blush {
  top: 55%;
  width: 14%;
  height: 8%;
  border-radius: 50%;
  background: rgba(255, 145, 168, .56);
}
.q-dog-blush.left { left: 15%; }
.q-dog-blush.right { right: 15%; }

.q-dog-paw {
  bottom: 0;
  width: 24%;
  height: 17%;
  border-radius: 48% 48% 35% 35%;
  background: var(--cream);
  z-index: 4;
  animation: pawTap 1.4s ease-in-out infinite;
}
.q-dog-paw.left { left: 26%; }
.q-dog-paw.right { right: 26%; animation-delay: .7s; }

.q-dog::after {
  content: "✨";
  position: absolute;
  right: -6%;
  top: 8%;
  font-size: clamp(24px, 5vw, 42px);
  animation: sparkleBubble 2.6s ease-in-out infinite;
  z-index: 8;
}

.game-dog.q-dog.eat { animation: qDogEat 1s ease-in-out; }
.game-dog.q-dog.play { animation: qDogPlay 1.1s ease-in-out; }
.receiver-fullscreen.sleeping .game-dog.q-dog { animation: qDogSleep 4.2s ease-in-out infinite; }
.receiver-fullscreen.sleeping .q-dog::after { content: "💤"; }
.receiver-fullscreen.sleeping .q-dog-eye { height: 4%; top: 45%; border-radius: 999px; box-shadow: none; }
.receiver-fullscreen.sleeping .q-dog-tail { animation-duration: 2.8s; opacity: .75; }

@keyframes qDogSelfPlay {
  0%, 100% { transform: translate(-20px, 0) rotate(-2deg); }
  20% { transform: translate(18px, -10px) rotate(2deg); }
  42% { transform: translate(38px, 4px) rotate(4deg); }
  64% { transform: translate(-10px, -12px) rotate(-3deg); }
  82% { transform: translate(-34px, 2px) rotate(-1deg); }
}
@keyframes qDogBounce {
  0%, 100% { transform: translateY(0) scale(.9) rotate(-1deg); }
  50% { transform: translateY(-8px) scale(.92) rotate(1deg); }
}
@keyframes qDogHeadTilt {
  0%, 100% { transform: translateX(-50%) rotate(-1deg); }
  50% { transform: translateX(-50%) rotate(2deg); }
}
@keyframes tailWag {
  0%, 100% { transform: rotate(18deg); }
  50% { transform: rotate(48deg); }
}
@keyframes earWiggle {
  0%, 100% { margin-top: 0; }
  50% { margin-top: 5px; }
}
@keyframes dogBlink {
  0%, 88%, 100% { transform: scaleY(1); }
  92%, 96% { transform: scaleY(.12); }
}
@keyframes pawTap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes qDogEat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  35%, 70% { transform: translate(0, 18px) scale(1.04); }
}
@keyframes qDogPlay {
  0%, 100% { transform: translateX(0) rotate(0) scale(1); }
  25% { transform: translateX(-34px) rotate(-8deg) scale(1.05); }
  58% { transform: translateX(36px) rotate(8deg) scale(1.05); }
}
@keyframes qDogSleep {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}
@keyframes flowerSpin {
  from { transform: rotate(0); }
  to { transform: rotate(360deg); }
}
@keyframes heartFloat {
  0%, 100% { transform: translateY(0) rotate(-12deg) scale(.92); }
  50% { transform: translateY(-18px) rotate(-6deg) scale(1.05); }
}
@keyframes messagePop {
  0% { opacity: 0; transform: translateX(-50%) translateY(12px) scale(.92); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

@media (max-width: 520px) {
  .game-dog.q-dog {
    width: min(76vw, 300px);
    height: min(70vw, 276px);
    margin-top: 16vh;
  }
  .receiver-message {
    top: max(66px, env(safe-area-inset-top));
  }
}


.whatsapp-box {
  margin: 12px 0;
  padding: 14px;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.whatsapp-box label {
  font-size: 13px;
  font-weight: 700;
  color: #25d366;
  opacity: 0.88;
}
.whatsapp-box input {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  padding: 12px 14px;
  color: #fff;
  font-family: inherit;
  font-size: 16px;
}
.whatsapp-box small {
  font-size: 11px;
  opacity: 0.6;
  line-height: 1.4;
}
#sendWhatsapp {
  background: #25d366;
  color: #fff;
  border: none;
}
#sendWhatsapp:active { transform: scale(0.97); }

/* v12 end */
.receiver-dog-stage {
  place-items: end center;
  padding-bottom: 23vh;
}

.game-dog.q-dog {
  margin-top: 0;
}

.receiver-fullscreen.sleeping::before,
.receiver-fullscreen.sleeping::after {
  opacity: 0 !important;
}

@media (max-width: 520px) {
  .receiver-dog-stage {
    padding-bottom: 22vh;
  }
  .game-dog.q-dog {
    margin-top: 0;
  }
}


/* v10: one receiver link, background follows local time even during sleep mode */
.receiver-fullscreen.sleeping.day {
  background:
    radial-gradient(circle at 16% 15%, rgba(255, 255, 255, .72) 0 5%, transparent 5.5%),
    radial-gradient(circle at 78% 18%, rgba(255, 181, 211, .45) 0 8%, transparent 8.5%),
    radial-gradient(circle at 28% 72%, rgba(255, 242, 158, .36) 0 11%, transparent 11.5%),
    linear-gradient(180deg, #8ee6ff 0%, #d9f9ff 45%, #fef0bd 68%, #a9ed9a 100%) !important;
}
.receiver-fullscreen.sleeping.day .receiver-sun { display: block !important; }
.receiver-fullscreen.sleeping.day .receiver-moon { display: none !important; }
.receiver-fullscreen.sleeping.day .receiver-ground {
  background:
    radial-gradient(circle at 14% 40%, #ffd166 0 9px, transparent 10px),
    radial-gradient(circle at 22% 62%, #ff8ab6 0 8px, transparent 9px),
    radial-gradient(circle at 70% 42%, #fff4a3 0 8px, transparent 9px),
    radial-gradient(circle at 82% 60%, #ff9fc8 0 7px, transparent 8px),
    linear-gradient(180deg, #aef68d 0%, #61c969 46%, #369858 100%) !important;
}
.receiver-fullscreen.sleeping.night {
  background: radial-gradient(circle at 70% 18%, rgba(255, 209, 102, .52), transparent 10%), linear-gradient(180deg, #101434 0%, #1b2050 58%, #14233e 100%) !important;
}
.receiver-fullscreen.sleeping.night .receiver-sun { display: none !important; }
.receiver-fullscreen.sleeping.night .receiver-moon { display: block !important; }
.receiver-fullscreen.sleeping.night .receiver-ground { background: linear-gradient(180deg, #335d54, #183d45) !important; }


/* v13: sweeter garden / sunrise beach style + mood check */
.receiver-fullscreen.day {
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 185, 103, .72) 0 9%, transparent 9.6%),
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.78) 0 6%, transparent 6.6%),
    linear-gradient(180deg, #8feaff 0%, #ffe4ae 42%, #ffd7d7 56%, #98edd0 100%) !important;
}
.receiver-fullscreen.day .receiver-ground {
  background:
    radial-gradient(ellipse at 22% 42%, #ff9fc8 0 8px, transparent 9px),
    radial-gradient(ellipse at 34% 58%, #fff09b 0 7px, transparent 8px),
    radial-gradient(ellipse at 70% 42%, #ffb1cf 0 8px, transparent 9px),
    radial-gradient(ellipse at 82% 62%, #fff5ae 0 7px, transparent 8px),
    linear-gradient(180deg, rgba(255,244,196,.78) 0 14%, #86dfb4 15% 42%, #48b985 100%) !important;
}
.receiver-fullscreen.day .receiver-ground::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -28px;
  height: 48px;
  background: linear-gradient(90deg, rgba(255,255,255,.65), rgba(121,218,244,.62), rgba(255,255,255,.65));
  border-radius: 50% 50% 0 0;
  opacity: .72;
}
.receiver-fullscreen.day .toy-ball { animation: toyRoll 4.6s ease-in-out infinite; }
.receiver-fullscreen.day .toy-food { animation: treatBounce 3.4s ease-in-out infinite; }

.mood-panel {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 22px;
  background: rgba(16, 20, 52, .28);
  backdrop-filter: blur(8px);
}
.mood-panel.show { display: flex; }
.mood-card {
  width: min(92vw, 430px);
  padding: 24px;
  border-radius: 32px;
  background: rgba(255,255,255,.94);
  color: #5c331f;
  box-shadow: 0 28px 70px rgba(42, 28, 16, .22);
  text-align: center;
  border: 2px solid rgba(255,255,255,.9);
}
.mood-kicker {
  margin: 0 0 8px;
  color: #ff7aa8;
  font-weight: 900;
  font-size: 13px;
}
.mood-card h3 {
  margin: 0 0 18px;
  font-size: clamp(24px, 6vw, 34px);
  font-weight: 900;
}
.mood-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.mood-options button {
  border: 0;
  border-radius: 18px;
  padding: 13px 10px;
  background: linear-gradient(135deg, #fff0b8, #ffd0df);
  color: #68361e;
  font-weight: 900;
  font-family: inherit;
  box-shadow: 0 10px 20px rgba(255, 122, 168, .18);
}
.mood-options button[data-mood="great"] { grid-column: 1 / -1; }
.mood-follow {
  min-height: 24px;
  margin: 16px 0 0;
  font-weight: 800;
  color: #8a5131;
  line-height: 1.5;
}
@keyframes toyRoll {
  0%, 100% { transform: translateX(-28px) rotate(-18deg); }
  50% { transform: translateX(36px) rotate(18deg); }
}
@keyframes treatBounce {
  0%, 100% { transform: translateY(0) rotate(8deg); }
  50% { transform: translateY(-16px) rotate(-8deg); }
}


/* v14: beach sunrise-to-sunset scene, night fireworks, late-awake tired shiba */
.receiver-fullscreen.day {
  background:
    radial-gradient(circle at calc(12% + var(--sun-progress, .6) * 76%) calc(62% - var(--sun-progress, .6) * 44%), rgba(255, 189, 94, .95) 0 7%, rgba(255, 211, 128, .42) 8%, transparent 16%),
    linear-gradient(180deg, #8ee7ff 0%, #ffd7a5 42%, #ffb8c8 58%, #6ed6e8 59%, #3ab3d4 70%, #ffe0a8 71%, #f5c47b 100%) !important;
}
.receiver-fullscreen.day::before {
  width: 100%;
  height: 34%;
  left: 0;
  top: 58%;
  border-radius: 0;
  background:
    repeating-linear-gradient(170deg, rgba(255,255,255,.58) 0 9px, transparent 10px 34px),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(109, 211, 231, .18));
  animation: beachWave 4.5s ease-in-out infinite;
  opacity: .82;
}
.receiver-fullscreen.day::after {
  right: 8%;
  top: 54%;
  width: 92px;
  height: 82px;
  border-radius: 50% 50% 48% 48%;
  background:
    radial-gradient(circle at 50% 18%, #ff8fb9 0 10%, transparent 11%),
    radial-gradient(circle at 18% 48%, #ffd166 0 10%, transparent 11%),
    radial-gradient(circle at 82% 48%, #ffd166 0 10%, transparent 11%),
    radial-gradient(circle at 50% 78%, #ff8fb9 0 10%, transparent 11%),
    radial-gradient(circle at 50% 50%, #fff7b8 0 16%, transparent 17%);
  animation: flowerSpin 9s linear infinite;
  opacity: .75;
}
.receiver-fullscreen.day .receiver-ground {
  background:
    radial-gradient(ellipse at 16% 56%, rgba(255,255,255,.9) 0 18px, transparent 19px),
    radial-gradient(ellipse at 74% 38%, #ff9fc8 0 8px, transparent 9px),
    linear-gradient(180deg, #ffe2a9 0%, #f3bf72 58%, #d89c57 100%) !important;
}
.receiver-fullscreen.day .receiver-ground::after {
  background: linear-gradient(90deg, rgba(255,255,255,.75), rgba(109,218,235,.7), rgba(255,255,255,.75));
  animation: beachFoam 3.2s ease-in-out infinite;
}
.receiver-fullscreen.night .receiver-stars {
  opacity: 1;
}
.receiver-fullscreen.night .receiver-stars::before,
.receiver-fullscreen.night .receiver-stars::after {
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
  box-shadow:
    0 -42px #ffd166, 30px -30px #ff7aa8, 42px 0 #7ef0c1, 30px 30px #8f7cff,
    0 42px #fff, -30px 30px #ffd166, -42px 0 #ff7aa8, -30px -30px #7ef0c1;
  animation: fireworkBurst 1.9s ease-out infinite;
}
.receiver-fullscreen.night .receiver-stars::before { left: 24%; top: 25%; }
.receiver-fullscreen.night .receiver-stars::after { right: 24%; top: 34%; animation-delay: .75s; }
.receiver-fullscreen.late-awake .q-dog-eye {
  box-shadow: inset 4px 3px 0 rgba(255,255,255,.35), 0 12px 0 rgba(55, 37, 32, .34);
}
.receiver-fullscreen.late-awake .q-dog::after { content: "🥱"; }
.receiver-fullscreen.late-awake .q-dog-head { filter: saturate(.72); }
@keyframes beachWave {
  0%, 100% { transform: translateX(-18px) translateY(0); }
  50% { transform: translateX(18px) translateY(8px); }
}
@keyframes beachFoam {
  0%, 100% { transform: translateX(-24px); opacity: .52; }
  50% { transform: translateX(24px); opacity: .9; }
}
@keyframes fireworkBurst {
  0% { transform: scale(.25); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: scale(1.45); opacity: 0; }
}


/* v14 visual polish: clean beach waves and readable bubbles */
.receiver-message {
  background: rgba(255, 255, 255, .97) !important;
  color: #4b2a18 !important;
  text-shadow: none !important;
}
.receiver-message::after { background: rgba(255, 255, 255, .97) !important; }
.receiver-fullscreen.day::before {
  left: -12% !important;
  right: -12% !important;
  width: auto !important;
  top: 58% !important;
  height: 30% !important;
  background:
    radial-gradient(ellipse at 18% 28%, rgba(255,255,255,.72) 0 12%, transparent 13%),
    radial-gradient(ellipse at 48% 42%, rgba(255,255,255,.56) 0 10%, transparent 11%),
    radial-gradient(ellipse at 78% 30%, rgba(255,255,255,.66) 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(124, 223, 240, .82), rgba(66, 185, 214, .42));
  border-radius: 48% 48% 0 0 !important;
  animation: beachWave 4.5s ease-in-out infinite;
}
.receiver-fullscreen.day .receiver-ground::before {
  opacity: 0 !important;
}
.receiver-fullscreen.day .receiver-ground::after {
  left: -10% !important;
  right: -10% !important;
  width: auto !important;
  top: -24px !important;
  height: 38px !important;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(119,225,238,.65), rgba(255,255,255,.9), transparent) !important;
  border-radius: 999px !important;
}
.receiver-fullscreen.night .receiver-message {
  background: #ffffff !important;
  color: #30180f !important;
  padding: 16px 20px !important;
  line-height: 1.42 !important;
}
.receiver-fullscreen.night .receiver-message::after {
  background: #ffffff !important;
}


/* v14 final beach cleanup: single moving sun, no garden ornaments */
.receiver-fullscreen.day {
  background:
    linear-gradient(180deg, #78d9ff 0%, #bdefff 36%, #ffe2ad 53%, #72d9ea 54%, #35acd2 70%, #ffe5ad 71%, #f4bf74 100%) !important;
}
.receiver-fullscreen.day .receiver-sun {
  display: block !important;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, #fff5a8 0 38%, #ffd166 39% 64%, rgba(255, 209, 102, .18) 65% 100%);
  box-shadow: 0 0 42px rgba(255, 209, 102, .72), 0 0 90px rgba(255, 178, 92, .36);
}
.receiver-fullscreen.day::after {
  width: 72px !important;
  height: 40px !important;
  right: 10% !important;
  top: 30% !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse at 22% 58%, transparent 0 44%, rgba(255,255,255,.9) 45% 52%, transparent 53%),
    radial-gradient(ellipse at 72% 48%, transparent 0 44%, rgba(255,255,255,.9) 45% 52%, transparent 53%) !important;
  opacity: .85 !important;
  transform: rotate(-6deg);
  animation: cloudDrift 12s ease-in-out infinite !important;
}
.receiver-fullscreen.day .receiver-ground {
  background:
    radial-gradient(ellipse at 14% 60%, rgba(255,255,255,.86) 0 17px, transparent 18px),
    radial-gradient(ellipse at 82% 48%, rgba(255,255,255,.66) 0 13px, transparent 14px),
    linear-gradient(180deg, #ffe6b4 0%, #f4c072 58%, #d79a55 100%) !important;
}


/* v15: new scarf shiba image + sunset scene */
.picture-dog {
  width: min(72vw, 380px) !important;
  height: min(86vw, 520px) !important;
  display: grid;
  place-items: end center;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 28px 34px rgba(82, 54, 32, .24));
  animation: qDogSelfPlay 5.6s ease-in-out infinite;
}
.preview-dog.picture-dog {
  width: 188px !important;
  height: 228px !important;
  margin: 26px auto 20px;
  animation: qDogBounce 3.2s ease-in-out infinite;
}
.picture-dog > span {
  display: none !important;
}
.picture-dog .shiba-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  position: relative;
  z-index: 2;
}
.picture-dog::before {
  content: "";
  position: absolute;
  left: 31%;
  top: 34%;
  width: 12%;
  height: 5.5%;
  border-radius: 50%;
  background: rgba(50, 31, 27, .42);
  box-shadow: 125px 0 0 rgba(50, 31, 27, .42);
  filter: blur(4px);
  opacity: 0;
  z-index: 3;
  pointer-events: none;
  transform: rotate(3deg);
}
.receiver-fullscreen.sleeping.late-awake .picture-dog::before {
  opacity: 1;
}
.receiver-fullscreen.late-awake:not(.sleeping) .picture-dog::before {
  opacity: 0 !important;
}
.receiver-fullscreen.late-awake:not(.sleeping) .q-dog::after {
  content: "✨" !important;
}
.receiver-fullscreen.sleeping.late-awake .q-dog::after {
  content: "🥱" !important;
}
.receiver-fullscreen.day.sunset,
.receiver-fullscreen.sleeping.day.sunset {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.72) 0 6%, transparent 6.8%),
    linear-gradient(180deg, #ffb3b3 0%, #ffc07d 31%, #ffd6a6 49%, #f49aa8 50%, #6cc4dc 62%, #2b99bf 72%, #f5b76f 73%, #d78e58 100%) !important;
}
.receiver-fullscreen.day.sunset .receiver-sun,
.receiver-fullscreen.sleeping.day.sunset .receiver-sun {
  top: 42% !important;
  background: radial-gradient(circle, #fff3b0 0 28%, #ffaf5c 29% 62%, rgba(255, 137, 96, .18) 63% 100%) !important;
  box-shadow: 0 0 56px rgba(255, 155, 87, .72), 0 0 120px rgba(255, 105, 122, .36) !important;
}
.receiver-fullscreen.day.sunset::before,
.receiver-fullscreen.sleeping.day.sunset::before {
  background:
    radial-gradient(ellipse at 18% 28%, rgba(255,246,233,.74) 0 12%, transparent 13%),
    radial-gradient(ellipse at 48% 42%, rgba(255,236,218,.58) 0 10%, transparent 11%),
    radial-gradient(ellipse at 78% 30%, rgba(255,246,233,.66) 0 12%, transparent 13%),
    linear-gradient(180deg, rgba(255, 184, 154, .65), rgba(70, 178, 208, .42)) !important;
}
.receiver-fullscreen.day.sunset .receiver-ground,
.receiver-fullscreen.sleeping.day.sunset .receiver-ground {
  background:
    radial-gradient(ellipse at 14% 60%, rgba(255,255,255,.82) 0 17px, transparent 18px),
    radial-gradient(ellipse at 82% 48%, rgba(255,224,190,.58) 0 13px, transparent 14px),
    linear-gradient(180deg, #ffd39a 0%, #eaa964 58%, #bf7948 100%) !important;
}
@media (max-width: 520px) {
  .picture-dog {
    width: min(82vw, 340px) !important;
    height: min(104vw, 470px) !important;
  }
}


/* v16: animated dimensional scarf shiba rebuilt from CSS layers (not a flat image) */
.dimensional-dog {
  transform-style: preserve-3d;
  perspective: 900px;
  filter: drop-shadow(0 26px 26px rgba(94, 58, 34, .26)) drop-shadow(0 8px 0 rgba(255,255,255,.75));
  animation: dimensionalIdle 4.8s ease-in-out infinite !important;
}
.preview-dog.dimensional-dog {
  animation: dimensionalPreviewIdle 3.8s ease-in-out infinite !important;
}
.dimensional-dog::before {
  content: "";
  position: absolute;
  left: 19%;
  right: 19%;
  bottom: -7%;
  height: 12%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(116, 64, 32, .24), transparent 70%);
  filter: blur(5px);
  z-index: 0;
  transform: translateZ(-26px);
}
.dimensional-dog .q-dog-head {
  width: 82%;
  height: 72%;
  top: 0;
  border-radius: 44% 44% 50% 50%;
  background:
    radial-gradient(ellipse at 33% 56%, var(--cream) 0 23%, transparent 24%),
    radial-gradient(ellipse at 67% 56%, var(--cream) 0 23%, transparent 24%),
    radial-gradient(circle at 50% 10%, rgba(255, 210, 116, .92) 0 17%, transparent 18%),
    linear-gradient(180deg, #ffc46c 0%, #f5a044 54%, #df7f34 100%);
  box-shadow:
    inset 0 6px 0 rgba(255,255,255,.38),
    inset 0 -12px 0 rgba(118, 59, 25, .11),
    inset 0 0 0 5px rgba(102, 43, 25, .28),
    0 18px 35px rgba(105, 62, 32, .2);
  animation: dimensionalHead 3.1s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-head::before {
  content: "";
  position: absolute;
  left: 48%;
  top: 17%;
  width: 26%;
  height: 16%;
  transform: translateX(-50%);
  background:
    linear-gradient(70deg, transparent 0 42%, rgba(219, 112, 49, .42) 43% 52%, transparent 53%),
    linear-gradient(90deg, transparent 0 42%, rgba(219, 112, 49, .36) 43% 52%, transparent 53%),
    linear-gradient(110deg, transparent 0 42%, rgba(219, 112, 49, .42) 43% 52%, transparent 53%);
  opacity: .72;
}
.dimensional-dog .q-dog-head::after {
  content: "";
  position: absolute;
  inset: -10% -8%;
  border-radius: 48% 48% 52% 52%;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.38), transparent 18%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.dimensional-dog .q-dog-ear {
  width: 36%;
  height: 46%;
  top: -8%;
  border-radius: 28% 78% 24% 76%;
  background:
    radial-gradient(ellipse at 56% 48%, #fff6dc 0 26%, transparent 27%),
    radial-gradient(ellipse at 62% 52%, #ff8e75 0 14%, transparent 15%),
    linear-gradient(145deg, #ffc46a, #dd702a);
  box-shadow: inset 0 0 0 5px rgba(104, 43, 25, .42), inset 8px 10px 0 rgba(255,255,255,.18);
  animation: dimensionalEar 2.8s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-ear.left { left: 5%; transform: rotate(-22deg) translateZ(-6px); }
.dimensional-dog .q-dog-ear.right { right: 5%; transform: scaleX(-1) rotate(-22deg) translateZ(-6px); }
.dimensional-dog .q-dog-ear::after { display: none; }
.dimensional-dog .q-dog-body {
  left: 50%;
  bottom: -3%;
  width: 62%;
  height: 45%;
  border-radius: 46% 46% 34% 34%;
  background:
    radial-gradient(ellipse at 50% 45%, var(--cream) 0 31%, transparent 32%),
    linear-gradient(180deg, #ffb75d 0%, #ed923c 55%, #d9782f 100%);
  box-shadow: inset 0 7px 0 rgba(255,255,255,.32), inset 0 -10px 0 rgba(91, 49, 26, .1);
  transform: translateX(-50%) rotateX(4deg) translateZ(-22px);
}
.dimensional-dog .q-dog-tail {
  right: -1%;
  bottom: 19%;
  width: 31%;
  height: 31%;
  border-width: 18px;
  border-color: #f2a047;
  border-left-color: transparent;
  border-bottom-color: transparent;
  filter: drop-shadow(0 7px 4px rgba(97, 52, 24, .16));
  animation: dimensionalTail .56s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-brow {
  top: 30%;
  width: 16%;
  height: 10%;
  background: #fff8db;
  filter: blur(.1px);
}
.dimensional-dog .q-dog-eye {
  top: 44%;
  width: 10%;
  height: 13%;
  background: radial-gradient(circle at 70% 25%, #fff 0 14%, transparent 15%), #3a130e;
  box-shadow: 0 3px 0 rgba(118, 47, 26, .12);
  animation: dimensionalBlink 5.1s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-eye.left { left: 29%; }
.dimensional-dog .q-dog-eye.right { right: 29%; }
.dimensional-dog .q-dog-muzzle {
  width: 58%;
  height: 32%;
  bottom: 10%;
  background: linear-gradient(180deg, #fffdf0, #fff2d1);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.8);
}
.dimensional-dog .q-dog-nose {
  bottom: 31%;
  width: 16%;
  height: 11%;
  background: radial-gradient(circle at 60% 25%, rgba(255,255,255,.45) 0 13%, transparent 14%), #42160f;
  box-shadow: 0 6px 0 rgba(67, 31, 20, .16);
}
.dimensional-dog .q-dog-mouth {
  bottom: 19%;
  width: 24%;
  height: 13%;
  border-bottom: 4px solid #74301d;
}
.dimensional-dog .q-dog-blush {
  top: 61%;
  width: 18%;
  height: 9%;
  background:
    linear-gradient(100deg, transparent 0 20%, rgba(255, 126, 103, .78) 21% 28%, transparent 29% 42%, rgba(255, 126, 103, .78) 43% 50%, transparent 51% 64%, rgba(255, 126, 103, .78) 65% 72%, transparent 73%),
    rgba(255, 177, 146, .42);
}
.dimensional-dog .q-dog-blush.left { left: 17%; }
.dimensional-dog .q-dog-blush.right { right: 17%; }
.dimensional-dog .q-dog-paw {
  bottom: -3%;
  width: 20%;
  height: 14%;
  background: linear-gradient(180deg, #fff8dc, #ffe6bc);
  box-shadow: inset 0 -3px 0 rgba(130, 65, 30, .14);
  animation: dimensionalPaw 1.35s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-paw.left { left: 29%; }
.dimensional-dog .q-dog-paw.right { right: 29%; animation-delay: .68s !important; }
.q-dog-scarf {
  left: 10%;
  right: 10%;
  bottom: -5%;
  height: 18%;
  border-radius: 999px 999px 32px 32px;
  background:
    linear-gradient(90deg, transparent 0 15%, rgba(255,255,255,.38) 16% 18%, transparent 19% 38%, rgba(255,255,255,.34) 39% 42%, transparent 43% 64%, rgba(255,255,255,.36) 65% 68%, transparent 69%),
    linear-gradient(0deg, transparent 0 43%, rgba(255,255,255,.28) 44% 49%, transparent 50% 74%, rgba(255,255,255,.22) 75% 80%, transparent 81%),
    linear-gradient(180deg, #ff8a80, #ee695f);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.42), inset 0 -5px 0 rgba(118, 45, 37, .18), 0 8px 12px rgba(114, 48, 40, .13);
  z-index: 7;
  animation: scarfBreath 2.8s ease-in-out infinite;
}
.q-dog-scarf-tail {
  right: 15%;
  bottom: -40%;
  width: 19%;
  height: 42%;
  border-radius: 16px 16px 8px 8px;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(255,255,255,.35) 45% 52%, transparent 53%),
    linear-gradient(180deg, #ff8a80, #e75d57);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.25), inset 0 -4px 0 rgba(99, 37, 34, .14);
  z-index: 6;
  animation: scarfTailSwing 1.9s ease-in-out infinite;
}
.receiver-fullscreen.sleeping .dimensional-dog { animation: dimensionalSleep 4.2s ease-in-out infinite !important; }
.receiver-fullscreen.sleeping .dimensional-dog .q-dog-tail { animation-duration: 2.4s !important; }
.receiver-fullscreen.sleeping .dimensional-dog .q-dog-eye {
  height: 4%;
  top: 49%;
  border-radius: 999px;
  background: #3a130e;
  box-shadow: none;
  animation: none !important;
}
.receiver-fullscreen.sleeping.late-awake .dimensional-dog .q-dog-eye {
  top: 45% !important;
  height: 11% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 70% 25%, rgba(255,255,255,.8) 0 10%, transparent 11%), #35120e !important;
  box-shadow: 0 13px 0 rgba(42, 25, 23, .46), 0 19px 9px rgba(42, 25, 23, .28) !important;
  animation: dimensionalTiredBlink 4.4s ease-in-out infinite !important;
}
.receiver-fullscreen.sleeping.late-awake .dimensional-dog .q-dog-head { filter: saturate(.72) brightness(.92); }
.receiver-fullscreen.sleeping.late-awake .dimensional-dog::after { content: "🥱" !important; }
@keyframes dimensionalIdle {
  0%,100% { transform: translateY(0) rotateY(-7deg) rotateZ(-1deg) scale(1); }
  28% { transform: translateY(-10px) rotateY(7deg) rotateZ(1deg) scale(1.012); }
  58% { transform: translateY(-3px) rotateY(-3deg) rotateZ(.5deg) scale(.996); }
  78% { transform: translateY(-12px) rotateY(5deg) rotateZ(-.6deg) scale(1.01); }
}
@keyframes dimensionalPreviewIdle {
  0%,100% { transform: translateY(0) rotateY(-5deg) scale(.9); }
  50% { transform: translateY(-8px) rotateY(5deg) scale(.92); }
}
@keyframes dimensionalHead {
  0%,100% { transform: translateX(-50%) rotateZ(-1deg) rotateX(0); }
  50% { transform: translateX(-50%) rotateZ(2.2deg) rotateX(5deg); }
}
@keyframes dimensionalEar {
  0%,100% { margin-top: 0; }
  50% { margin-top: 7px; }
}
@keyframes dimensionalTail {
  0%,100% { transform: rotate(16deg) translateZ(-18px); }
  50% { transform: rotate(56deg) translateZ(-18px); }
}
@keyframes dimensionalBlink {
  0%, 87%, 100% { transform: scaleY(1); }
  91%, 95% { transform: scaleY(.16); }
}
@keyframes dimensionalTiredBlink {
  0%, 78%, 100% { transform: scaleY(.78); }
  84%, 90% { transform: scaleY(.18); }
}
@keyframes dimensionalPaw {
  0%,100% { transform: translateY(0) rotateX(0); }
  50% { transform: translateY(5px) rotateX(12deg); }
}
@keyframes scarfBreath {
  0%,100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(2px) scaleX(1.02); }
}
@keyframes scarfTailSwing {
  0%,100% { transform: rotate(-3deg); }
  50% { transform: rotate(5deg) translateY(2px); }
}
@keyframes dimensionalSleep {
  0%,100% { transform: translateY(0) rotateY(-3deg) rotateZ(-.6deg); }
  50% { transform: translateY(-8px) rotateY(3deg) rotateZ(.6deg); }
}


/* v17: make the pet unmistakably a moving shiba dog, not a flat sticker */
.receiver-message,
.receiver-fullscreen.day.sunset .receiver-message {
  background: #ffffff !important;
  color: #30180f !important;
  text-shadow: none !important;
}
.receiver-fullscreen.day.sunset::after,
.receiver-fullscreen.sleeping.day.sunset::after {
  display: none !important;
}
.receiver-fullscreen.day.sunset .receiver-ground::after,
.receiver-fullscreen.sleeping.day.sunset .receiver-ground::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.92), rgba(255,207,174,.7), rgba(255,255,255,.9), transparent) !important;
}
.dimensional-dog {
  --fur: #f39b37;
  --fur-dark: #c96525;
  --cream: #fff6dc;
  --ink: #3b170f;
  width: min(72vw, 340px) !important;
  height: min(70vw, 330px) !important;
  transform-style: preserve-3d;
  perspective: 1100px;
  filter:
    drop-shadow(0 22px 0 rgba(255,255,255,.88))
    drop-shadow(0 32px 28px rgba(92, 52, 28, .28));
  animation: shibaAlive 4.2s ease-in-out infinite !important;
}
.preview-dog.dimensional-dog {
  width: 182px !important;
  height: 178px !important;
  margin: 42px auto 28px;
  animation: shibaPreviewAlive 3.4s ease-in-out infinite !important;
}
.dimensional-dog::before {
  content: "";
  position: absolute;
  left: 22%;
  right: 22%;
  bottom: -8%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(83, 49, 28, .25), transparent 72%);
  filter: blur(6px);
  z-index: 0;
}
.dimensional-dog .q-dog-head {
  left: 50%;
  top: 4%;
  width: 76%;
  height: 68%;
  transform: translateX(-50%);
  border-radius: 44% 44% 50% 50% / 42% 42% 58% 58%;
  background:
    radial-gradient(ellipse at 30% 64%, var(--cream) 0 22%, transparent 23%),
    radial-gradient(ellipse at 70% 64%, var(--cream) 0 22%, transparent 23%),
    radial-gradient(ellipse at 50% 77%, var(--cream) 0 31%, transparent 32%),
    radial-gradient(ellipse at 50% 15%, rgba(255, 213, 119, .9) 0 16%, transparent 17%),
    linear-gradient(180deg, #ffc56d 0%, var(--fur) 54%, var(--fur-dark) 100%);
  box-shadow:
    inset 0 7px 0 rgba(255,255,255,.34),
    inset 0 -10px 0 rgba(101, 45, 21, .13),
    inset 0 0 0 5px rgba(91, 37, 22, .36),
    0 17px 30px rgba(100, 50, 23, .22);
  animation: shibaHeadTilt 3s ease-in-out infinite !important;
  transform-origin: 50% 75%;
  z-index: 5;
}
.dimensional-dog .q-dog-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 18%;
  width: 24%;
  height: 15%;
  transform: translateX(-50%);
  background:
    linear-gradient(68deg, transparent 0 41%, rgba(207, 103, 39, .48) 42% 50%, transparent 51%),
    linear-gradient(90deg, transparent 0 43%, rgba(207, 103, 39, .36) 44% 51%, transparent 52%),
    linear-gradient(112deg, transparent 0 41%, rgba(207, 103, 39, .48) 42% 50%, transparent 51%);
  opacity: .72;
  border-radius: 40%;
}
.dimensional-dog .q-dog-head::after {
  content: "";
  position: absolute;
  left: 9%;
  top: 10%;
  width: 32%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(ellipse at 42% 45%, rgba(255,255,255,.46), transparent 66%);
  pointer-events: none;
  mix-blend-mode: screen;
}
.dimensional-dog .q-dog-ear {
  top: -10%;
  width: 35%;
  height: 49%;
  border-radius: 18% 82% 18% 82%;
  background:
    radial-gradient(ellipse at 56% 53%, #fffbe5 0 30%, transparent 31%),
    radial-gradient(ellipse at 68% 58%, #ff8a74 0 13%, transparent 14%),
    linear-gradient(145deg, #ffc266 0%, #e2762c 100%);
  box-shadow:
    inset 0 0 0 5px rgba(88, 34, 20, .48),
    inset 8px 9px 0 rgba(255,255,255,.18),
    0 6px 10px rgba(74, 35, 20, .12);
  z-index: 2;
  animation: shibaEarTwitch 3.2s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-ear.left { left: 4%; transform: rotate(-28deg) skewY(-5deg); }
.dimensional-dog .q-dog-ear.right { right: 4%; transform: scaleX(-1) rotate(-28deg) skewY(-5deg); animation-delay: .16s !important; }
.dimensional-dog .q-dog-ear::after { display: none !important; }
.dimensional-dog .q-dog-body {
  left: 50%;
  bottom: -2%;
  width: 60%;
  height: 43%;
  transform: translateX(-50%);
  border-radius: 48% 48% 35% 35%;
  background:
    radial-gradient(ellipse at 50% 50%, var(--cream) 0 33%, transparent 34%),
    linear-gradient(180deg, #ffb85f, #e98533 68%, #c76425);
  box-shadow: inset 0 5px 0 rgba(255,255,255,.3), inset 0 -9px 0 rgba(89, 44, 22, .12);
  z-index: 2;
}
.dimensional-dog .q-dog-tail {
  right: -1%;
  bottom: 15%;
  width: 32%;
  height: 32%;
  border: 19px solid #f09a3c;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
  transform-origin: 8% 86%;
  z-index: 1;
  filter: drop-shadow(0 6px 4px rgba(84, 41, 20, .16));
  animation: shibaTailWag .55s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-brow {
  top: 30%;
  width: 17%;
  height: 10%;
  background: #fff9df;
}
.dimensional-dog .q-dog-brow.left { left: 24%; transform: rotate(-12deg); }
.dimensional-dog .q-dog-brow.right { right: 24%; transform: rotate(12deg); }
.dimensional-dog .q-dog-eye {
  top: 45%;
  width: 10%;
  height: 13%;
  border-radius: 50%;
  background: radial-gradient(circle at 66% 24%, #fff 0 13%, transparent 14%), #3b150f;
  box-shadow: 0 3px 0 rgba(107, 43, 24, .16);
  animation: shibaBlink 4.8s ease-in-out infinite !important;
  z-index: 8;
}
.dimensional-dog .q-dog-eye.left { left: 29%; }
.dimensional-dog .q-dog-eye.right { right: 29%; }
.dimensional-dog .q-dog-eye::after {
  content: "";
  position: absolute;
  left: -45%;
  top: 104%;
  width: 190%;
  height: 58%;
  border-radius: 50%;
  background: rgba(45, 29, 25, .48);
  filter: blur(3px);
  opacity: 0;
}
.dimensional-dog .q-dog-muzzle {
  left: 50%;
  bottom: 14%;
  width: 55%;
  height: 31%;
  transform: translateX(-50%);
  border-radius: 52% 52% 58% 58%;
  background: linear-gradient(180deg, #fffdf0, #fff0ce);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.72), 0 -1px 0 rgba(255,255,255,.54);
  z-index: 6;
}
.dimensional-dog .q-dog-nose {
  left: 50%;
  bottom: 33%;
  width: 16%;
  height: 11%;
  transform: translateX(-50%);
  border-radius: 50% 50% 58% 58%;
  background: radial-gradient(circle at 62% 26%, rgba(255,255,255,.46) 0 14%, transparent 15%), #3a140f;
  box-shadow: 0 5px 0 rgba(68, 31, 19, .15);
  z-index: 9;
}
.dimensional-dog .q-dog-mouth {
  left: 50%;
  bottom: 22%;
  width: 24%;
  height: 12%;
  transform: translateX(-50%);
  border-bottom: 4px solid #74301d;
  border-radius: 0 0 999px 999px;
  z-index: 9;
}
.dimensional-dog .q-dog-blush {
  top: 61%;
  width: 18%;
  height: 9%;
  background:
    repeating-linear-gradient(105deg, transparent 0 8px, rgba(255, 116, 94, .75) 9px 13px, transparent 14px 22px),
    rgba(255, 181, 153, .42);
  z-index: 7;
}
.dimensional-dog .q-dog-blush.left { left: 17%; }
.dimensional-dog .q-dog-blush.right { right: 17%; }
.dimensional-dog .q-dog-paw {
  bottom: -3%;
  width: 19%;
  height: 14%;
  border-radius: 45% 45% 35% 35%;
  background: linear-gradient(180deg, #fff7dd, #ffe5bd);
  box-shadow: inset 0 -4px 0 rgba(112, 56, 29, .13);
  z-index: 7;
  animation: shibaPawTap 1.3s ease-in-out infinite !important;
}
.dimensional-dog .q-dog-paw.left { left: 29%; }
.dimensional-dog .q-dog-paw.right { right: 29%; animation-delay: .65s !important; }
.dimensional-dog .q-dog-scarf {
  left: 10%;
  right: 10%;
  bottom: -4%;
  height: 18%;
  border-radius: 999px 999px 34px 34px;
  background:
    linear-gradient(90deg, transparent 0 15%, rgba(255,255,255,.42) 16% 18%, transparent 19% 38%, rgba(255,255,255,.34) 39% 42%, transparent 43% 64%, rgba(255,255,255,.36) 65% 68%, transparent 69%),
    linear-gradient(0deg, transparent 0 43%, rgba(255,255,255,.28) 44% 49%, transparent 50% 74%, rgba(255,255,255,.22) 75% 80%, transparent 81%),
    linear-gradient(180deg, #ff8c80, #ea625b);
  box-shadow: inset 0 3px 0 rgba(255,255,255,.42), inset 0 -5px 0 rgba(103, 37, 34, .18), 0 7px 10px rgba(114, 48, 40, .14);
  z-index: 10;
  animation: shibaScarfBreath 2.6s ease-in-out infinite;
}
.dimensional-dog .q-dog-scarf-tail {
  right: 15%;
  bottom: -39%;
  width: 18%;
  height: 42%;
  border-radius: 16px 16px 8px 8px;
  background:
    linear-gradient(90deg, transparent 0 44%, rgba(255,255,255,.36) 45% 52%, transparent 53%),
    linear-gradient(180deg, #ff8c80, #e75f58);
  box-shadow: inset 0 4px 0 rgba(255,255,255,.24), inset 0 -4px 0 rgba(99, 37, 34, .14);
  z-index: 9;
  animation: shibaScarfSwing 1.8s ease-in-out infinite;
}
.receiver-fullscreen.sleeping .dimensional-dog { animation: shibaSleepFloat 4.1s ease-in-out infinite !important; }
.receiver-fullscreen.sleeping .dimensional-dog .q-dog-eye {
  top: 49%;
  height: 4%;
  border-radius: 999px;
  background: #3b150f;
  box-shadow: none;
  animation: none !important;
}
.receiver-fullscreen.sleeping.late-awake .dimensional-dog .q-dog-eye {
  top: 45% !important;
  height: 12% !important;
  border-radius: 50% !important;
  background: radial-gradient(circle at 66% 24%, rgba(255,255,255,.8) 0 11%, transparent 12%), #35130f !important;
  box-shadow: 0 11px 0 rgba(41, 25, 22, .56), 0 19px 10px rgba(41, 25, 22, .28) !important;
  animation: shibaTiredBlink 4.2s ease-in-out infinite !important;
}
.receiver-fullscreen.sleeping.late-awake .dimensional-dog .q-dog-eye::after { opacity: 1; }
.receiver-fullscreen.late-awake:not(.sleeping) .dimensional-dog .q-dog-eye::after { opacity: 0 !important; }
.receiver-fullscreen.sleeping.late-awake .dimensional-dog .q-dog-head { filter: saturate(.72) brightness(.92); }
.receiver-fullscreen.sleeping.late-awake .dimensional-dog::after { content: "🥱" !important; }
@keyframes shibaAlive {
  0%, 100% { transform: translateY(0) rotateY(-8deg) rotateZ(-1deg) scale(1); }
  30% { transform: translateY(-10px) rotateY(8deg) rotateZ(1deg) scale(1.012); }
  60% { transform: translateY(-2px) rotateY(-3deg) rotateZ(.4deg) scale(.996); }
  78% { transform: translateY(-12px) rotateY(5deg) rotateZ(-.4deg) scale(1.01); }
}
@keyframes shibaPreviewAlive {
  0%, 100% { transform: translateY(0) rotateY(-6deg) scale(.9); }
  50% { transform: translateY(-8px) rotateY(6deg) scale(.92); }
}
@keyframes shibaHeadTilt {
  0%, 100% { transform: translateX(-50%) rotateZ(-1deg) rotateX(0); }
  50% { transform: translateX(-50%) rotateZ(2deg) rotateX(5deg); }
}
@keyframes shibaEarTwitch {
  0%, 100% { margin-top: 0; }
  48% { margin-top: 6px; }
  54% { margin-top: 1px; }
}
@keyframes shibaTailWag {
  0%, 100% { transform: rotate(14deg); }
  50% { transform: rotate(56deg); }
}
@keyframes shibaBlink {
  0%, 87%, 100% { transform: scaleY(1); }
  91%, 95% { transform: scaleY(.16); }
}
@keyframes shibaTiredBlink {
  0%, 78%, 100% { transform: scaleY(.8); }
  84%, 90% { transform: scaleY(.18); }
}
@keyframes shibaPawTap {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}
@keyframes shibaScarfBreath {
  0%, 100% { transform: translateY(0) scaleX(1); }
  50% { transform: translateY(2px) scaleX(1.02); }
}
@keyframes shibaScarfSwing {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(6deg) translateY(2px); }
}
@keyframes shibaSleepFloat {
  0%, 100% { transform: translateY(0) rotateY(-4deg) rotateZ(-.6deg); }
  50% { transform: translateY(-8px) rotateY(4deg) rotateZ(.6deg); }
}
@media (max-width: 520px) {
  .dimensional-dog {
    width: min(82vw, 330px) !important;
    height: min(80vw, 315px) !important;
  }
}


/* v17 polish: remove forehead X and stray sparkle in normal mode */
.dimensional-dog .q-dog-head::before {
  display: none !important;
}
.dimensional-dog.q-dog::after {
  content: "" !important;
  display: none !important;
}
.receiver-fullscreen.sleeping .dimensional-dog.q-dog::after {
  display: block !important;
  content: "💤" !important;
}
.receiver-fullscreen.sleeping.late-awake .dimensional-dog.q-dog::after {
  display: block !important;
  content: "🥱" !important;
}


/* v18: restore dog directly from user's reference image, with subtle breathing motion */
.reference-dog {
  width: min(76vw, 380px) !important;
  height: min(94vw, 560px) !important;
  display: grid;
  place-items: end center;
  margin: 0 auto;
  overflow: visible;
  filter: drop-shadow(0 24px 28px rgba(92, 50, 28, .25));
  animation: referenceDogFloat 4.2s ease-in-out infinite !important;
  transform-origin: 50% 88%;
}
.preview-dog.reference-dog {
  width: 178px !important;
  height: 258px !important;
  margin: 8px auto 8px;
  animation: referencePreviewFloat 3.6s ease-in-out infinite !important;
}
.reference-dog > span {
  display: none !important;
}
.reference-dog .shiba-art {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  display: block;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 82%;
  animation: referenceDogBreath 2.8s ease-in-out infinite;
}
.reference-dog::before,
.reference-dog::after {
  content: "";
  position: absolute;
  opacity: 0;
  pointer-events: none;
  z-index: 4;
}
.reference-dog::before {
  left: 29%;
  top: 33%;
  width: 10%;
  height: 4.8%;
  border-radius: 50%;
  background: rgba(43, 28, 25, .52);
  box-shadow: 92px 0 0 rgba(43, 28, 25, .52);
  filter: blur(4px);
}
.reference-dog::after {
  right: 3%;
  top: 12%;
  content: "" !important;
}
.receiver-fullscreen.sleeping .reference-dog::after {
  content: "💤" !important;
  display: block !important;
  opacity: .9;
  font-size: clamp(26px, 6vw, 48px);
  background: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.18));
  animation: sleepyBubble 4.2s ease-in-out infinite;
}
.receiver-fullscreen.sleeping.late-awake .reference-dog::before {
  opacity: 1;
}
.receiver-fullscreen.sleeping.late-awake .reference-dog::after {
  content: "🥱" !important;
  opacity: .95;
}
.receiver-fullscreen.late-awake:not(.sleeping) .reference-dog::before,
.receiver-fullscreen.late-awake:not(.sleeping) .reference-dog::after {
  opacity: 0 !important;
}
@keyframes referenceDogFloat {
  0%, 100% { transform: translateY(0) rotate(-.6deg) scale(1); }
  35% { transform: translateY(-10px) rotate(.8deg) scale(1.012); }
  70% { transform: translateY(-3px) rotate(-.2deg) scale(1.004); }
}
@keyframes referencePreviewFloat {
  0%, 100% { transform: translateY(0) rotate(-.5deg) scale(.92); }
  50% { transform: translateY(-7px) rotate(.7deg) scale(.94); }
}
@keyframes referenceDogBreath {
  0%, 100% { transform: scale(1); filter: saturate(1.02); }
  50% { transform: scale(1.018); filter: saturate(1.08); }
}
.receiver-fullscreen.sleeping .reference-dog {
  animation: referenceSleepFloat 4.4s ease-in-out infinite !important;
}
.receiver-fullscreen.sleeping .reference-dog .shiba-art {
  animation: referenceSleepBreath 3.2s ease-in-out infinite;
  filter: brightness(.96) saturate(.95);
}
.receiver-fullscreen.sleeping.late-awake .reference-dog .shiba-art {
  filter: brightness(.86) saturate(.82);
}
@keyframes referenceSleepFloat {
  0%, 100% { transform: translateY(0) rotate(-.35deg) scale(1); }
  50% { transform: translateY(-7px) rotate(.35deg) scale(1.006); }
}
@keyframes referenceSleepBreath {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.012); }
}
@media (max-width: 520px) {
  .reference-dog {
    width: min(84vw, 360px) !important;
    height: min(112vw, 520px) !important;
  }
}


/* v18 final polish: stronger readable bubble + visible sleepy eye bags over reference image */
.receiver-message,
.receiver-fullscreen.night .receiver-message,
.receiver-fullscreen.day.sunset .receiver-message {
  background: #ffffff !important;
  color: #2f160d !important;
  text-shadow: none !important;
  opacity: 1 !important;
}
.receiver-message::after,
.receiver-fullscreen.night .receiver-message::after,
.receiver-fullscreen.day.sunset .receiver-message::after {
  background: #ffffff !important;
}
.receiver-fullscreen.sleeping.late-awake .reference-dog::before {
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  background:
    radial-gradient(ellipse at 38% 34%, rgba(38, 24, 22, .72) 0 3.8%, rgba(38, 24, 22, .38) 4.2% 6.8%, transparent 7.4%),
    radial-gradient(ellipse at 62% 34%, rgba(38, 24, 22, .72) 0 3.8%, rgba(38, 24, 22, .38) 4.2% 6.8%, transparent 7.4%);
  box-shadow: none !important;
  filter: blur(1.5px) !important;
  opacity: 1 !important;
  z-index: 5 !important;
}
.receiver-fullscreen.sleeping.late-awake .reference-dog .shiba-art {
  filter: brightness(.9) saturate(.86) !important;
}


/* v18 emergency alignment: eye bags on the reference image eye positions */
.receiver-fullscreen.sleeping.late-awake .reference-dog::before {
  background:
    radial-gradient(ellipse at 39% 29%, rgba(24, 16, 14, .82) 0 4.8%, rgba(24, 16, 14, .46) 5.4% 8.5%, transparent 9.4%),
    radial-gradient(ellipse at 61% 29%, rgba(24, 16, 14, .82) 0 4.8%, rgba(24, 16, 14, .46) 5.4% 8.5%, transparent 9.4%) !important;
  filter: blur(.8px) !important;
  mix-blend-mode: multiply;
}


/* v18 final stacking fix: keep dark circles above the image */
.reference-dog {
  position: relative !important;
}
.reference-dog .shiba-art {
  position: relative !important;
  z-index: 1 !important;
}
.receiver-fullscreen.sleeping.late-awake .reference-dog::before {
  z-index: 20 !important;
  position: absolute !important;
  display: block !important;
}
.receiver-fullscreen.sleeping.late-awake .reference-dog::after {
  z-index: 21 !important;
}


/* v19: smaller reference shiba + larger moon */
.reference-dog {
  width: min(62vw, 310px) !important;
  height: min(78vw, 450px) !important;
}
.preview-dog.reference-dog {
  width: 150px !important;
  height: 218px !important;
}
.receiver-moon {
  width: 132px !important;
  height: 132px !important;
  box-shadow: 0 0 86px rgba(255,232,163,.78), 0 0 150px rgba(255,209,102,.24) !important;
}
.receiver-moon::after {
  width: 98px !important;
  height: 98px !important;
  right: -10px !important;
  top: 6px !important;
}
@media (max-width: 520px) {
  .reference-dog {
    width: min(70vw, 300px) !important;
    height: min(92vw, 430px) !important;
  }
  .receiver-moon {
    width: 118px !important;
    height: 118px !important;
  }
  .receiver-moon::after {
    width: 88px !important;
    height: 88px !important;
  }
}


/* v21: make dog clearly smaller and moon more prominent */
.reference-dog {
  width: min(54vw, 270px) !important;
  height: min(68vw, 390px) !important;
}
.preview-dog.reference-dog {
  width: 132px !important;
  height: 192px !important;
}
.receiver-moon {
  width: 168px !important;
  height: 168px !important;
  right: 7% !important;
  top: 8% !important;
  box-shadow: 0 0 105px rgba(255,232,163,.82), 0 0 190px rgba(255,209,102,.3) !important;
}
.receiver-moon::after {
  width: 126px !important;
  height: 126px !important;
  right: -13px !important;
  top: 8px !important;
}
@media (max-width: 520px) {
  .reference-dog {
    width: min(62vw, 260px) !important;
    height: min(82vw, 370px) !important;
  }
  .receiver-moon {
    width: 146px !important;
    height: 146px !important;
    right: 5% !important;
    top: 8% !important;
  }
  .receiver-moon::after {
    width: 110px !important;
    height: 110px !important;
  }
}


/* v23: soccer play and floating goodnight piano melody */
.receiver-fullscreen.soccer-play .toy-ball {
  opacity: 1 !important;
  font-size: clamp(58px, 14vw, 92px);
  left: 12%;
  right: auto;
  bottom: 18%;
  z-index: 7;
  animation: soccerRunWithDog 4.6s ease-in-out infinite !important;
  filter: drop-shadow(0 12px 10px rgba(34, 28, 18, .24));
}
.receiver-fullscreen.soccer-play .reference-dog {
  animation: referenceDogFootballPlay 2.2s ease-in-out infinite !important;
}
.receiver-fullscreen.soccer-play .receiver-message {
  background: #fffdf7 !important;
  color: #2f160d !important;
}
@keyframes soccerRunWithDog {
  0% { transform: translate(0, 0) rotate(0deg) scale(.9); }
  18% { transform: translate(28vw, -32px) rotate(160deg) scale(1); }
  36% { transform: translate(49vw, 8px) rotate(330deg) scale(.96); }
  56% { transform: translate(34vw, -52px) rotate(520deg) scale(1.08); }
  76% { transform: translate(10vw, 0) rotate(710deg) scale(.94); }
  100% { transform: translate(0, 0) rotate(900deg) scale(.9); }
}
@keyframes referenceDogFootballPlay {
  0%, 100% { transform: translateY(0) translateX(0) rotate(-1deg) scale(.98); }
  24% { transform: translateY(-13px) translateX(-14px) rotate(-4deg) scale(1); }
  50% { transform: translateY(-5px) translateX(16px) rotate(4deg) scale(1.01); }
  76% { transform: translateY(-16px) translateX(8px) rotate(2deg) scale(1.005); }
}
.piano-float {
  position: absolute;
  left: 50%;
  bottom: 24%;
  transform: translateX(-50%);
  z-index: 12;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  color: #2f160d;
  font-weight: 900;
  box-shadow: 0 16px 36px rgba(26, 19, 45, .2);
  animation: pianoFloatUp 4.2s ease-out forwards;
}
.piano-float .note {
  display: inline-block;
  color: #7a5cff;
  animation: noteDance 1.2s ease-in-out infinite;
}
.piano-float .note:nth-child(2) { animation-delay: .15s; color: #ff7aa8; }
.piano-float .note:nth-child(4) { animation-delay: .3s; color: #ffd166; }
.piano-float .note:nth-child(5) { animation-delay: .45s; color: #7ef0c1; }
@keyframes pianoFloatUp {
  0% { opacity: 0; transform: translate(-50%, 22px) scale(.9); }
  12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  74% { opacity: 1; transform: translate(-50%, -86px) scale(1.03); }
  100% { opacity: 0; transform: translate(-50%, -132px) scale(.96); }
}
@keyframes noteDance {
  0%, 100% { transform: translateY(0) rotate(-5deg); }
  50% { transform: translateY(-9px) rotate(7deg); }
}


/* v24: first-open push guide; bottom buttons are pure pet functions */
.push-permission-card {
  position: fixed;
  left: 50%;
  bottom: calc(max(28px, env(safe-area-inset-bottom)) + 104px);
  transform: translateX(-50%);
  z-index: 30;
  width: min(88vw, 360px);
  padding: 16px 18px;
  border-radius: 24px;
  background: rgba(255, 255, 255, .96);
  color: #32190f;
  box-shadow: 0 18px 48px rgba(24, 20, 45, .24);
  border: 1px solid rgba(255,255,255,.7);
  text-align: center;
}
.push-permission-card p {
  margin: 0 0 10px;
  font-weight: 900;
}
.push-permission-card button {
  width: 100%;
  border: 0;
  border-radius: 999px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #7a5cff, #ff7aa8);
  color: white;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(122,92,255,.24);
}
.push-permission-card small {
  display: block;
  margin-top: 8px;
  color: rgba(49, 25, 15, .68);
  line-height: 1.45;
}
.piano-float {
  max-width: min(88vw, 520px);
  white-space: nowrap;
}
@media (max-width: 520px) {
  .piano-float {
    font-size: 13px;
    gap: 6px;
    padding: 10px 12px;
  }
}


/* v26: keep piano floating label above the dog, not under its feet */
.piano-float {
  bottom: 52% !important;
  z-index: 32 !important;
}
@media (max-width: 520px) {
  .piano-float {
    bottom: 54% !important;
  }
}


/* v27: make piano floating label readable */
.piano-float {
  background: #ffffff !important;
  color: #25130d !important;
  border: 1px solid rgba(255,255,255,.92);
  font-size: 16px !important;
  font-weight: 900 !important;
  box-shadow: 0 18px 44px rgba(10, 8, 28, .34) !important;
}
.piano-float .note {
  color: #6b4dff !important;
  text-shadow: none !important;
}


/* v29: touch dog = full-screen floating hearts */
.heart-burst-layer {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 40;
}
.heart-burst-layer span {
  position: absolute;
  bottom: -12vh;
  font-size: clamp(24px, 6vw, 54px);
  transform: translateX(-50%) scale(var(--scale, 1));
  animation: heartFloatFull 4.8s ease-out forwards;
  animation-delay: var(--delay, 0s);
  filter: drop-shadow(0 8px 14px rgba(255, 78, 132, .3));
}
@keyframes heartFloatFull {
  0% { opacity: 0; transform: translate(0, 0) scale(var(--scale, 1)) rotate(-8deg); }
  12% { opacity: 1; }
  58% { opacity: .95; transform: translate(var(--drift, 0), -58vh) scale(calc(var(--scale, 1) * 1.08)) rotate(10deg); }
  100% { opacity: 0; transform: translate(calc(var(--drift, 0) * 1.5), -112vh) scale(calc(var(--scale, 1) * .86)) rotate(22deg); }
}


/* v30: hearts visible immediately across full screen */
.heart-burst-layer span {
  animation-duration: 8.8s !important;
}
@keyframes heartFloatFull {
  0% { opacity: .94; transform: translate(0, 0) scale(var(--scale, 1)) rotate(-8deg); }
  70% { opacity: 1; transform: translate(var(--drift, 0), -46vh) scale(calc(var(--scale, 1) * 1.08)) rotate(10deg); }
  100% { opacity: 0; transform: translate(calc(var(--drift, 0) * 1.5), -90vh) scale(calc(var(--scale, 1) * .86)) rotate(22deg); }
}


/* v32: time-based scenes + richer night fireworks with Even */
.receiver-fullscreen.day.sunrise,
.receiver-fullscreen.sleeping.day.sunrise {
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.86) 0 6%, transparent 6.8%),
    linear-gradient(180deg, #ffd1a8 0%, #ffe3bb 30%, #fff3c9 48%, #82d8ee 49%, #41b8d8 68%, #ffe0a8 69%, #efb56a 100%) !important;
}
.receiver-fullscreen.day.sunrise .receiver-sun,
.receiver-fullscreen.sleeping.day.sunrise .receiver-sun {
  top: 50% !important;
  left: 18% !important;
  background: radial-gradient(circle, #fff6b8 0 32%, #ffb765 33% 65%, rgba(255, 159, 91, .18) 66% 100%) !important;
  box-shadow: 0 0 54px rgba(255, 181, 102, .78), 0 0 120px rgba(255, 136, 102, .34) !important;
}
.receiver-fullscreen.day.sunrise::before,
.receiver-fullscreen.sleeping.day.sunrise::before {
  background:
    radial-gradient(ellipse at 22% 34%, rgba(255,255,255,.74) 0 12%, transparent 13%),
    radial-gradient(ellipse at 58% 32%, rgba(255,244,218,.62) 0 11%, transparent 12%),
    linear-gradient(180deg, rgba(255, 211, 170, .55), rgba(114, 210, 234, .34)) !important;
}
.receiver-fullscreen.night .receiver-stars::before,
.receiver-fullscreen.night .receiver-stars::after {
  opacity: 1 !important;
  width: 150px !important;
  height: 150px !important;
  background:
    radial-gradient(circle, rgba(255,255,255,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 0, #ffd166 0 5px, transparent 6px),
    radial-gradient(circle at 100% 50%, #ff7aa8 0 5px, transparent 6px),
    radial-gradient(circle at 50% 100%, #7ef0c1 0 5px, transparent 6px),
    radial-gradient(circle at 0 50%, #8f7cff 0 5px, transparent 6px),
    radial-gradient(circle at 78% 18%, #fff 0 4px, transparent 5px),
    radial-gradient(circle at 20% 78%, #fff 0 4px, transparent 5px) !important;
  animation: fireworkBurst 1.35s ease-out infinite !important;
}
.receiver-fullscreen.night .receiver-stars::before { left: 12% !important; top: 20% !important; }
.receiver-fullscreen.night .receiver-stars::after { right: 10% !important; top: 25% !important; animation-delay: .42s !important; }
.receiver-fullscreen.night .receiver-sky::after {
  content: "Even" !important;
  position: absolute;
  left: 50%;
  top: 12%;
  transform: translateX(-50%);
  font-family: "Nunito", system-ui, sans-serif;
  font-size: clamp(52px, 14vw, 116px);
  font-weight: 900;
  letter-spacing: .02em;
  color: rgba(255, 234, 168, .92);
  text-shadow: 0 0 18px rgba(255,209,102,.8), 0 0 44px rgba(255,122,168,.38);
  opacity: .95 !important;
  pointer-events: none;
}
.receiver-fullscreen.night .receiver-sky::before {
  opacity: .32 !important;
}


/* v33: reference-style smaller but denser colorful fireworks */
.receiver-fullscreen.night .receiver-stars {
  opacity: 1 !important;
  z-index: 2 !important;
  overflow: hidden;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 32% 11%, rgba(255,209,102,.78) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 16%, rgba(126,240,193,.68) 0 1px, transparent 1.6px),
    radial-gradient(circle at 76% 34%, rgba(255,122,168,.72) 0 1.5px, transparent 2.2px),
    radial-gradient(circle at 18% 42%, rgba(117,219,255,.7) 0 1.2px, transparent 2px),
    radial-gradient(circle at 91% 43%, rgba(255,180,92,.75) 0 1.4px, transparent 2px);
}
.receiver-fullscreen.night .receiver-stars::before,
.receiver-fullscreen.night .receiver-stars::after {
  width: 92px !important;
  height: 92px !important;
  border-radius: 50% !important;
  opacity: .92 !important;
  filter: drop-shadow(0 0 12px rgba(255,255,255,.62)) drop-shadow(0 0 22px rgba(92,215,255,.34));
  background:
    linear-gradient(0deg, transparent 47%, rgba(255,241,178,.95) 49%, transparent 54%),
    linear-gradient(22deg, transparent 48%, rgba(255,135,110,.88) 50%, transparent 54%),
    linear-gradient(45deg, transparent 48%, rgba(255,216,92,.86) 50%, transparent 54%),
    linear-gradient(72deg, transparent 48%, rgba(121,232,255,.88) 50%, transparent 54%),
    linear-gradient(108deg, transparent 48%, rgba(255,122,199,.82) 50%, transparent 54%),
    linear-gradient(138deg, transparent 48%, rgba(132,255,203,.82) 50%, transparent 54%),
    radial-gradient(circle, #fff 0 5px, rgba(255,231,145,.85) 6px 8px, transparent 9px) !important;
  -webkit-mask-image: radial-gradient(circle, transparent 0 10px, #000 11px 45px, transparent 50px);
  mask-image: radial-gradient(circle, transparent 0 10px, #000 11px 45px, transparent 50px);
  animation: fireworkSparkle 1.7s ease-out infinite !important;
}
.receiver-fullscreen.night .receiver-stars::before { left: 7% !important; top: 16% !important; }
.receiver-fullscreen.night .receiver-stars::after { right: 7% !important; top: 19% !important; animation-delay: .48s !important; }
.receiver-fullscreen.night .receiver-sky::before {
  width: 38vw !important;
  height: 22vh !important;
  left: -7% !important;
  top: 2% !important;
  border-radius: 50% !important;
  opacity: .34 !important;
  background:
    radial-gradient(circle at 32% 34%, rgba(255,209,102,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 46% 43%, rgba(255,122,168,.9) 0 2px, transparent 3px),
    radial-gradient(circle at 61% 29%, rgba(126,240,193,.86) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 48%, rgba(124,222,255,.9) 0 2px, transparent 3px),
    linear-gradient(18deg, transparent 48%, rgba(255,209,102,.52) 50%, transparent 53%),
    linear-gradient(-18deg, transparent 48%, rgba(255,122,168,.5) 50%, transparent 53%) !important;
  filter: blur(.1px) drop-shadow(0 0 18px rgba(255,209,102,.35));
  animation: fireworkGlow 2.8s ease-in-out infinite !important;
}
.receiver-fullscreen.night .receiver-sky::after {
  content: "Even" !important;
  left: 50% !important;
  top: 6% !important;
  z-index: 4 !important;
  width: auto !important;
  height: auto !important;
  padding: 0 .16em;
  border-radius: 0 !important;
  background: transparent !important;
  transform: translateX(-50%) rotate(-2deg) !important;
  font-family: "Nunito", "Noto Sans SC", system-ui, sans-serif !important;
  font-size: clamp(44px, 11vw, 88px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: .04em !important;
  color: rgba(255, 242, 172, .96) !important;
  text-shadow:
    0 0 6px rgba(255,255,255,.9),
    0 0 16px rgba(255,209,102,.95),
    0 0 32px rgba(255,122,168,.72),
    0 0 54px rgba(82,211,255,.48) !important;
  opacity: .98 !important;
  animation: evenGlow 2.2s ease-in-out infinite !important;
}
.receiver-fullscreen.night .firework {
  position: absolute;
  display: block;
  width: var(--fw-size, 76px);
  height: var(--fw-size, 76px);
  left: var(--fw-left, 50%);
  top: var(--fw-top, 20%);
  border-radius: 50%;
  opacity: .94;
  transform: translate(-50%, -50%);
  background:
    linear-gradient(0deg, transparent 49%, var(--c1, #ffd166) 50%, transparent 54%),
    linear-gradient(28deg, transparent 49%, var(--c2, #ff7aa8) 50%, transparent 54%),
    linear-gradient(56deg, transparent 49%, var(--c3, #7ef0c1) 50%, transparent 54%),
    linear-gradient(88deg, transparent 49%, var(--c4, #69ddff) 50%, transparent 54%),
    linear-gradient(124deg, transparent 49%, var(--c5, #ffb36b) 50%, transparent 54%),
    linear-gradient(154deg, transparent 49%, var(--c6, #b58cff) 50%, transparent 54%),
    radial-gradient(circle, rgba(255,255,255,.98) 0 3px, rgba(255,230,150,.86) 4px 5px, transparent 6px);
  -webkit-mask-image: radial-gradient(circle, transparent 0 7px, #000 8px 38%, transparent 54%);
  mask-image: radial-gradient(circle, transparent 0 7px, #000 8px 38%, transparent 54%);
  filter: drop-shadow(0 0 8px rgba(255,255,255,.7)) drop-shadow(0 0 18px var(--glow, rgba(255,122,168,.42)));
  animation: fireworkSparkle var(--fw-duration, 1.9s) ease-out infinite;
  animation-delay: var(--fw-delay, 0s);
}
.receiver-fullscreen.night .firework::before,
.receiver-fullscreen.night .firework::after {
  content: "";
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% -3%, var(--c1, #ffd166) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 16%, var(--c2, #ff7aa8) 0 3px, transparent 4px),
    radial-gradient(circle at 103% 50%, var(--c3, #7ef0c1) 0 3px, transparent 4px),
    radial-gradient(circle at 84% 86%, var(--c4, #69ddff) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 103%, var(--c5, #ffb36b) 0 3px, transparent 4px),
    radial-gradient(circle at 15% 86%, var(--c6, #b58cff) 0 3px, transparent 4px),
    radial-gradient(circle at -3% 50%, #ffffff 0 2px, transparent 3px),
    radial-gradient(circle at 14% 15%, #ffffff 0 2px, transparent 3px);
  animation: fireworkDots var(--fw-duration, 1.9s) ease-out infinite;
  animation-delay: var(--fw-delay, 0s);
}
.receiver-fullscreen.night .firework::after {
  inset: -6%;
  transform: rotate(18deg);
  opacity: .62;
  filter: blur(.15px);
}
.receiver-fullscreen.night .fw-one { --fw-left: 27%; --fw-top: 16%; --fw-size: 112px; --fw-delay: .05s; --fw-duration: 2s; --c1:#ffeaa0; --c2:#ff7b8f; --c3:#66f0d4; --c4:#7cdfff; --c5:#ffb35c; --c6:#caa6ff; --glow: rgba(255,209,102,.46); }
.receiver-fullscreen.night .fw-two { --fw-left: 50%; --fw-top: 20%; --fw-size: 104px; --fw-delay: .32s; --fw-duration: 1.8s; --c1:#ffffff; --c2:#5ddcff; --c3:#ff67d4; --c4:#ffe165; --c5:#7fffc9; --c6:#ff9f6e; --glow: rgba(93,220,255,.5); }
.receiver-fullscreen.night .fw-three { --fw-left: 72%; --fw-top: 17%; --fw-size: 98px; --fw-delay: .62s; --fw-duration: 2.1s; --c1:#ff7aa8; --c2:#ffd166; --c3:#9cffd9; --c4:#78dfff; --c5:#ffffff; --c6:#b78cff; --glow: rgba(255,122,168,.5); }
.receiver-fullscreen.night .fw-four { --fw-left: 20%; --fw-top: 37%; --fw-size: 76px; --fw-delay: .78s; --fw-duration: 1.65s; --c1:#ff74ce; --c2:#fff174; --c3:#71f3ff; --c4:#ffb36b; --c5:#aafc7f; --c6:#ffffff; --glow: rgba(255,116,206,.46); }
.receiver-fullscreen.night .fw-five { --fw-left: 61%; --fw-top: 38%; --fw-size: 72px; --fw-delay: 1.02s; --fw-duration: 1.95s; --c1:#7ef0c1; --c2:#ffd166; --c3:#ff7aa8; --c4:#ffffff; --c5:#77d9ff; --c6:#ffac6b; --glow: rgba(126,240,193,.45); }
.receiver-fullscreen.night .fw-six { --fw-left: 82%; --fw-top: 35%; --fw-size: 62px; --fw-delay: 1.22s; --fw-duration: 1.75s; --c1:#f9f4ff; --c2:#ffaf5f; --c3:#70e7ff; --c4:#ff79a8; --c5:#dcff74; --c6:#b58cff; --glow: rgba(255,175,95,.43); }
.receiver-fullscreen.night .fw-seven { --fw-left: 38%; --fw-top: 47%; --fw-size: 58px; --fw-delay: 1.36s; --fw-duration: 1.85s; --c1:#ffd166; --c2:#ffffff; --c3:#ff78d0; --c4:#72e0ff; --c5:#86ffc8; --c6:#ff9b69; --glow: rgba(255,209,102,.42); }
@keyframes fireworkSparkle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.34) rotate(-5deg); }
  16% { opacity: 1; }
  58% { opacity: .94; transform: translate(-50%, -50%) scale(1) rotate(4deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.18) rotate(10deg); }
}
@keyframes fireworkDots {
  0% { opacity: 0; transform: scale(.44); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: scale(1.38); }
}
@keyframes fireworkGlow {
  0%, 100% { opacity: .22; transform: translateX(0) scale(.96); }
  50% { opacity: .45; transform: translateX(18px) scale(1.05); }
}
@keyframes evenGlow {
  0%, 100% { filter: drop-shadow(0 0 2px rgba(255,255,255,.8)); transform: translateX(-50%) rotate(-2deg) scale(1); }
  50% { filter: drop-shadow(0 0 12px rgba(255,209,102,.9)); transform: translateX(-50%) rotate(1deg) scale(1.03); }
}
@media (max-width: 520px) {
  .receiver-fullscreen.night .receiver-sky::after {
    top: 7% !important;
    font-size: clamp(40px, 16vw, 68px) !important;
  }
  .receiver-fullscreen.night .fw-one { --fw-left: 22%; --fw-top: 18%; --fw-size: 86px; }
  .receiver-fullscreen.night .fw-two { --fw-left: 52%; --fw-top: 22%; --fw-size: 84px; }
  .receiver-fullscreen.night .fw-three { --fw-left: 79%; --fw-top: 19%; --fw-size: 74px; }
  .receiver-fullscreen.night .fw-four { --fw-left: 17%; --fw-top: 38%; --fw-size: 62px; }
  .receiver-fullscreen.night .fw-five { --fw-left: 58%; --fw-top: 39%; --fw-size: 58px; }
  .receiver-fullscreen.night .fw-six { --fw-left: 86%; --fw-top: 36%; --fw-size: 52px; }
  .receiver-fullscreen.night .fw-seven { --fw-left: 38%; --fw-top: 49%; --fw-size: 48px; }
}


/* v33 final tuning: clearer Even and denser fireworks away from the moon */
.receiver-fullscreen.night .receiver-sky {
  z-index: 4 !important;
}
.receiver-fullscreen.night .receiver-sky::before {
  z-index: 0 !important;
  pointer-events: none;
}
.receiver-fullscreen.night .receiver-sky::after {
  top: 2.5% !important;
  font-size: clamp(38px, 9.5vw, 74px) !important;
  z-index: 5 !important;
}
.receiver-fullscreen.night .receiver-stars {
  z-index: 2 !important;
}
.receiver-fullscreen.night .fw-one { --fw-left: 18%; --fw-top: 14%; --fw-size: 92px; }
.receiver-fullscreen.night .fw-two { --fw-left: 42%; --fw-top: 17%; --fw-size: 88px; }
.receiver-fullscreen.night .fw-three { --fw-left: 86%; --fw-top: 13%; --fw-size: 64px; }
.receiver-fullscreen.night .fw-four { --fw-left: 13%; --fw-top: 31%; --fw-size: 68px; }
.receiver-fullscreen.night .fw-five { --fw-left: 51%; --fw-top: 34%; --fw-size: 70px; }
.receiver-fullscreen.night .fw-six { --fw-left: 84%; --fw-top: 32%; --fw-size: 58px; }
.receiver-fullscreen.night .fw-seven { --fw-left: 30%; --fw-top: 45%; --fw-size: 54px; }
.receiver-fullscreen.night .fw-eight { --fw-left: 63%; --fw-top: 48%; --fw-size: 50px; --fw-delay: .18s; --fw-duration: 1.65s; --c1:#ff76cf; --c2:#fff07a; --c3:#68e9ff; --c4:#ffae63; --c5:#8dffd2; --c6:#ffffff; --glow: rgba(255,118,207,.44); }
.receiver-fullscreen.night .fw-nine { --fw-left: 7%; --fw-top: 48%; --fw-size: 42px; --fw-delay: .9s; --fw-duration: 1.55s; --c1:#ffffff; --c2:#77dfff; --c3:#ff7a92; --c4:#ffe26d; --c5:#90ffc9; --c6:#be9cff; --glow: rgba(119,223,255,.42); }
.receiver-fullscreen.night .fw-ten { --fw-left: 74%; --fw-top: 49%; --fw-size: 44px; --fw-delay: 1.08s; --fw-duration: 1.75s; --c1:#ffd166; --c2:#ff8ab6; --c3:#7ef0c1; --c4:#ffffff; --c5:#7ddfff; --c6:#ffb36b; --glow: rgba(255,209,102,.42); }
.receiver-fullscreen.night .fw-eleven { --fw-left: 24%; --fw-top: 23%; --fw-size: 46px; --fw-delay: .55s; --fw-duration: 1.6s; --c1:#73e7ff; --c2:#ff7ed0; --c3:#fff19b; --c4:#90ffd2; --c5:#ffffff; --c6:#ffa96f; --glow: rgba(115,231,255,.4); }
.receiver-fullscreen.night .fw-twelve { --fw-left: 57%; --fw-top: 24%; --fw-size: 48px; --fw-delay: 1.28s; --fw-duration: 1.7s; --c1:#ffad62; --c2:#ffffff; --c3:#70f0ff; --c4:#ff7aa8; --c5:#ddff82; --c6:#b58cff; --glow: rgba(255,173,98,.4); }
@media (max-width: 520px) {
  .receiver-fullscreen.night .receiver-sky::after {
    top: 2% !important;
    font-size: clamp(34px, 13vw, 56px) !important;
  }
  .receiver-fullscreen.night .fw-one { --fw-left: 15%; --fw-top: 14%; --fw-size: 72px; }
  .receiver-fullscreen.night .fw-two { --fw-left: 39%; --fw-top: 17%; --fw-size: 70px; }
  .receiver-fullscreen.night .fw-three { --fw-left: 87%; --fw-top: 13%; --fw-size: 50px; }
  .receiver-fullscreen.night .fw-four { --fw-left: 12%; --fw-top: 32%; --fw-size: 56px; }
  .receiver-fullscreen.night .fw-five { --fw-left: 49%; --fw-top: 35%; --fw-size: 56px; }
  .receiver-fullscreen.night .fw-six { --fw-left: 86%; --fw-top: 33%; --fw-size: 46px; }
  .receiver-fullscreen.night .fw-seven { --fw-left: 30%; --fw-top: 47%; --fw-size: 44px; }
  .receiver-fullscreen.night .fw-eight { --fw-left: 63%; --fw-top: 48%; --fw-size: 40px; }
  .receiver-fullscreen.night .fw-nine { --fw-left: 8%; --fw-top: 48%; --fw-size: 34px; }
  .receiver-fullscreen.night .fw-ten { --fw-left: 75%; --fw-top: 49%; --fw-size: 36px; }
  .receiver-fullscreen.night .fw-eleven { --fw-left: 23%; --fw-top: 23%; --fw-size: 38px; }
  .receiver-fullscreen.night .fw-twelve { --fw-left: 57%; --fw-top: 25%; --fw-size: 38px; }
}


/* v33 reference image pass: use the supplied firework texture, then keep extra tiny spark bursts */
.receiver-fullscreen.night .receiver-stars {
  background-image:
    linear-gradient(180deg, rgba(8, 14, 36, .02) 0%, rgba(8, 14, 36, .3) 62%, rgba(8, 14, 36, .72) 100%),
    url("fireworks-reference.png?v=33") !important;
  background-repeat: no-repeat !important;
  background-size: min(118vw, 760px) auto !important;
  background-position: center top !important;
  opacity: .92 !important;
  mix-blend-mode: screen;
}
.receiver-fullscreen.night .firework {
  width: calc(var(--fw-size, 56px) * .62) !important;
  height: calc(var(--fw-size, 56px) * .62) !important;
  opacity: .72 !important;
  mix-blend-mode: screen;
}
.receiver-fullscreen.night .receiver-stars::before,
.receiver-fullscreen.night .receiver-stars::after {
  width: 54px !important;
  height: 54px !important;
  opacity: .64 !important;
}
.receiver-fullscreen.night .fw-one { --fw-left: 16%; --fw-top: 18%; --fw-size: 64px; }
.receiver-fullscreen.night .fw-two { --fw-left: 36%; --fw-top: 20%; --fw-size: 58px; }
.receiver-fullscreen.night .fw-three { --fw-left: 84%; --fw-top: 16%; --fw-size: 46px; }
.receiver-fullscreen.night .fw-four { --fw-left: 12%; --fw-top: 34%; --fw-size: 46px; }
.receiver-fullscreen.night .fw-five { --fw-left: 50%; --fw-top: 38%; --fw-size: 48px; }
.receiver-fullscreen.night .fw-six { --fw-left: 87%; --fw-top: 34%; --fw-size: 38px; }
.receiver-fullscreen.night .fw-seven { --fw-left: 28%; --fw-top: 48%; --fw-size: 36px; }
.receiver-fullscreen.night .fw-eight { --fw-left: 63%; --fw-top: 50%; --fw-size: 34px; }
.receiver-fullscreen.night .fw-nine { --fw-left: 7%; --fw-top: 50%; --fw-size: 30px; }
.receiver-fullscreen.night .fw-ten { --fw-left: 76%; --fw-top: 51%; --fw-size: 30px; }
.receiver-fullscreen.night .fw-eleven { --fw-left: 24%; --fw-top: 26%; --fw-size: 32px; }
.receiver-fullscreen.night .fw-twelve { --fw-left: 58%; --fw-top: 27%; --fw-size: 32px; }
@media (max-width: 520px) {
  .receiver-fullscreen.night .receiver-stars {
    background-size: 142vw auto !important;
    background-position: center 2% !important;
  }
  .receiver-fullscreen.night .firework {
    width: calc(var(--fw-size, 46px) * .56) !important;
    height: calc(var(--fw-size, 46px) * .56) !important;
  }
}


/* v33 final pass 2: transparent reference fireworks repeated as many smaller bursts */
.receiver-fullscreen.night .receiver-stars {
  background-image:
    linear-gradient(180deg, rgba(8, 14, 36, 0) 0%, rgba(8, 14, 36, .18) 58%, rgba(8, 14, 36, .78) 100%),
    url("fireworks-sparks.png?v=33"),
    url("fireworks-sparks.png?v=33"),
    url("fireworks-sparks.png?v=33"),
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.65) 0 1px, transparent 1.6px),
    radial-gradient(circle at 82% 16%, rgba(126,240,193,.68) 0 1px, transparent 1.6px),
    radial-gradient(circle at 18% 42%, rgba(117,219,255,.7) 0 1.2px, transparent 2px) !important;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat !important;
  background-size: 100% 100%, min(68vw, 430px) auto, min(54vw, 350px) auto, min(42vw, 280px) auto, auto, auto, auto !important;
  background-position: center top, 4% 5%, 58% 6%, 30% 28%, 0 0, 0 0, 0 0 !important;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.7) 70%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0%, #000 58%, rgba(0,0,0,.7) 70%, transparent 88%);
}
.receiver-fullscreen.night .firework {
  width: calc(var(--fw-size, 40px) * .42) !important;
  height: calc(var(--fw-size, 40px) * .42) !important;
  opacity: .58 !important;
}
.receiver-fullscreen.night .receiver-sky::after {
  background: rgba(9, 15, 40, .14) !important;
  border-radius: 20px !important;
  padding: .04em .18em .1em !important;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
@media (max-width: 520px) {
  .receiver-fullscreen.night .receiver-stars {
    background-size: 100% 100%, 86vw auto, 72vw auto, 58vw auto, auto, auto, auto !important;
    background-position: center top, -18% 7%, 60% 7%, 20% 30%, 0 0, 0 0, 0 0 !important;
  }
}


/* v33 final pass 3: pure transparent SVG spark fireworks, no photo boxes */
.receiver-fullscreen.night .receiver-stars {
  background-image:
    radial-gradient(circle at 11% 13%, rgba(255,255,255,.7) 0 1px, transparent 1.7px),
    radial-gradient(circle at 18% 26%, rgba(255,209,102,.72) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 10%, rgba(255,122,168,.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 43% 28%, rgba(126,240,193,.7) 0 1px, transparent 1.8px),
    radial-gradient(circle at 63% 14%, rgba(117,219,255,.74) 0 1px, transparent 1.8px),
    radial-gradient(circle at 88% 21%, rgba(255,180,92,.74) 0 1px, transparent 1.8px),
    radial-gradient(circle at 73% 42%, rgba(255,122,199,.66) 0 1px, transparent 1.8px),
    radial-gradient(circle at 24% 49%, rgba(255,255,255,.58) 0 1px, transparent 1.8px) !important;
  background-repeat: no-repeat !important;
  background-size: auto !important;
  background-position: 0 0 !important;
  mix-blend-mode: normal !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.receiver-fullscreen.night .firework {
  width: var(--fw-size, 46px) !important;
  height: var(--fw-size, 46px) !important;
  opacity: .95 !important;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='3.5'%3E%3Cline x1='50' y1='50' x2='50' y2='4' stroke='%23fff6b8'/%3E%3Cline x1='50' y1='50' x2='72' y2='10' stroke='%23ff8a70'/%3E%3Cline x1='50' y1='50' x2='94' y2='28' stroke='%237ee8ff'/%3E%3Cline x1='50' y1='50' x2='96' y2='58' stroke='%23ff7ac8'/%3E%3Cline x1='50' y1='50' x2='82' y2='88' stroke='%23ffd166'/%3E%3Cline x1='50' y1='50' x2='48' y2='98' stroke='%2387ffcc'/%3E%3Cline x1='50' y1='50' x2='18' y2='88' stroke='%23b78cff'/%3E%3Cline x1='50' y1='50' x2='4' y2='60' stroke='%23ffb45f'/%3E%3Cline x1='50' y1='50' x2='8' y2='25' stroke='%23ffffff'/%3E%3Cline x1='50' y1='50' x2='29' y2='9' stroke='%237ef0c1'/%3E%3C/g%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='50' cy='50' r='4'/%3E%3Ccircle cx='50' cy='4' r='2'/%3E%3Ccircle cx='94' cy='28' r='2'/%3E%3Ccircle cx='82' cy='88' r='2'/%3E%3Ccircle cx='18' cy='88' r='2'/%3E%3Ccircle cx='8' cy='25' r='2'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.68)) drop-shadow(0 0 16px var(--glow, rgba(255,122,168,.42))) !important;
  animation: fireworkSparkle var(--fw-duration, 1.9s) ease-out infinite !important;
}
.receiver-fullscreen.night .firework::before,
.receiver-fullscreen.night .firework::after {
  background:
    radial-gradient(circle at 50% -3%, var(--c1, #ffd166) 0 2px, transparent 3px),
    radial-gradient(circle at 86% 16%, var(--c2, #ff7aa8) 0 2px, transparent 3px),
    radial-gradient(circle at 103% 50%, var(--c3, #7ef0c1) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 86%, var(--c4, #69ddff) 0 2px, transparent 3px),
    radial-gradient(circle at 50% 103%, var(--c5, #ffb36b) 0 2px, transparent 3px),
    radial-gradient(circle at 15% 86%, var(--c6, #b58cff) 0 2px, transparent 3px),
    radial-gradient(circle at -3% 50%, #ffffff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 14% 15%, #ffffff 0 1.5px, transparent 2.5px) !important;
}
.receiver-fullscreen.night .receiver-stars::before,
.receiver-fullscreen.night .receiver-stars::after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke-linecap='round' stroke-width='3'%3E%3Cline x1='50' y1='50' x2='50' y2='5' stroke='%23fff6b8'/%3E%3Cline x1='50' y1='50' x2='86' y2='18' stroke='%23ff7aa8'/%3E%3Cline x1='50' y1='50' x2='95' y2='54' stroke='%237ee8ff'/%3E%3Cline x1='50' y1='50' x2='65' y2='94' stroke='%23ffd166'/%3E%3Cline x1='50' y1='50' x2='21' y2='86' stroke='%237ef0c1'/%3E%3Cline x1='50' y1='50' x2='5' y2='44' stroke='%23ffffff'/%3E%3Cline x1='50' y1='50' x2='22' y2='12' stroke='%23b78cff'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.receiver-fullscreen.night .fw-one { --fw-left: 16%; --fw-top: 16%; --fw-size: 72px; }
.receiver-fullscreen.night .fw-two { --fw-left: 38%; --fw-top: 18%; --fw-size: 64px; }
.receiver-fullscreen.night .fw-three { --fw-left: 84%; --fw-top: 15%; --fw-size: 48px; }
.receiver-fullscreen.night .fw-four { --fw-left: 12%; --fw-top: 32%; --fw-size: 54px; }
.receiver-fullscreen.night .fw-five { --fw-left: 51%; --fw-top: 34%; --fw-size: 56px; }
.receiver-fullscreen.night .fw-six { --fw-left: 87%; --fw-top: 32%; --fw-size: 42px; }
.receiver-fullscreen.night .fw-seven { --fw-left: 29%; --fw-top: 46%; --fw-size: 40px; }
.receiver-fullscreen.night .fw-eight { --fw-left: 64%; --fw-top: 47%; --fw-size: 38px; }
.receiver-fullscreen.night .fw-nine { --fw-left: 7%; --fw-top: 48%; --fw-size: 34px; }
.receiver-fullscreen.night .fw-ten { --fw-left: 76%; --fw-top: 48%; --fw-size: 36px; }
.receiver-fullscreen.night .fw-eleven { --fw-left: 24%; --fw-top: 25%; --fw-size: 38px; }
.receiver-fullscreen.night .fw-twelve { --fw-left: 59%; --fw-top: 25%; --fw-size: 38px; }
@media (max-width: 520px) {
  .receiver-fullscreen.night .firework { width: calc(var(--fw-size, 42px) * .82) !important; height: calc(var(--fw-size, 42px) * .82) !important; }
}


/* v33 final pass 4: only thin line-spark fireworks, smaller and denser */
.receiver-fullscreen.night .receiver-sky::before {
  display: none !important;
}
.receiver-fullscreen.night .firework::before,
.receiver-fullscreen.night .firework::after {
  display: none !important;
}
.receiver-fullscreen.night .receiver-stars::before,
.receiver-fullscreen.night .receiver-stars::after {
  width: 38px !important;
  height: 38px !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 0 8px rgba(255,255,255,.72)) !important;
}
.receiver-fullscreen.night .firework {
  width: var(--fw-size, 34px) !important;
  height: var(--fw-size, 34px) !important;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.76)) drop-shadow(0 0 11px var(--glow, rgba(255,122,168,.46))) !important;
}
.receiver-fullscreen.night .fw-one { --fw-left: 14%; --fw-top: 15%; --fw-size: 48px; }
.receiver-fullscreen.night .fw-two { --fw-left: 32%; --fw-top: 17%; --fw-size: 42px; }
.receiver-fullscreen.night .fw-three { --fw-left: 52%; --fw-top: 16%; --fw-size: 44px; }
.receiver-fullscreen.night .fw-four { --fw-left: 85%; --fw-top: 15%; --fw-size: 34px; }
.receiver-fullscreen.night .fw-five { --fw-left: 10%; --fw-top: 29%; --fw-size: 34px; }
.receiver-fullscreen.night .fw-six { --fw-left: 24%; --fw-top: 30%; --fw-size: 38px; }
.receiver-fullscreen.night .fw-seven { --fw-left: 42%; --fw-top: 31%; --fw-size: 36px; }
.receiver-fullscreen.night .fw-eight { --fw-left: 61%; --fw-top: 31%; --fw-size: 34px; }
.receiver-fullscreen.night .fw-nine { --fw-left: 80%; --fw-top: 31%; --fw-size: 31px; }
.receiver-fullscreen.night .fw-ten { --fw-left: 17%; --fw-top: 43%; --fw-size: 30px; }
.receiver-fullscreen.night .fw-eleven { --fw-left: 34%; --fw-top: 45%; --fw-size: 30px; }
.receiver-fullscreen.night .fw-twelve { --fw-left: 52%; --fw-top: 45%; --fw-size: 32px; }
.receiver-fullscreen.night .fw-thirteen { --fw-left: 69%; --fw-top: 44%; --fw-size: 30px; --fw-delay: .2s; --fw-duration: 1.62s; --glow: rgba(255,209,102,.42); }
.receiver-fullscreen.night .fw-fourteen { --fw-left: 88%; --fw-top: 44%; --fw-size: 28px; --fw-delay: .42s; --fw-duration: 1.58s; --glow: rgba(126,240,193,.42); }
.receiver-fullscreen.night .fw-fifteen { --fw-left: 7%; --fw-top: 53%; --fw-size: 24px; --fw-delay: .72s; --fw-duration: 1.68s; --glow: rgba(117,219,255,.42); }
.receiver-fullscreen.night .fw-sixteen { --fw-left: 28%; --fw-top: 54%; --fw-size: 26px; --fw-delay: .95s; --fw-duration: 1.6s; --glow: rgba(255,122,168,.42); }
.receiver-fullscreen.night .fw-seventeen { --fw-left: 58%; --fw-top: 55%; --fw-size: 26px; --fw-delay: 1.18s; --fw-duration: 1.72s; --glow: rgba(183,140,255,.42); }
.receiver-fullscreen.night .fw-eighteen { --fw-left: 82%; --fw-top: 54%; --fw-size: 24px; --fw-delay: 1.36s; --fw-duration: 1.64s; --glow: rgba(255,180,92,.42); }
@media (max-width: 520px) {
  .receiver-fullscreen.night .firework { width: calc(var(--fw-size, 32px) * .86) !important; height: calc(var(--fw-size, 32px) * .86) !important; }
}