:root {
  --ink: #111;
  --paper: #f4efe3;
  --albero: #f2c230;
  --navy: #1b3a6b;
  --display: Impact, "Haettenschweiler", "Arial Narrow Bold", "Arial Black", sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; overflow: hidden; background: var(--paper); }

body {
  /* trama de puntos de cómic */
  background-image: radial-gradient(rgba(17, 17, 17, .13) 1.4px, transparent 1.6px);
  background-size: 9px 9px;
  font-family: var(--display);
  color: var(--ink);
}

#scene { position: fixed; inset: 0; height: 100dvh; overflow: hidden; }

#street { position: absolute; inset: 0; width: 100%; height: 100%; }
.cohone #street { /* se fija en JS vía preserveAspectRatio */ }

/* ---------- bocadillo ---------- */
.bubble {
  position: absolute;
  top: 3dvh; left: 0; right: 0; margin: 0 auto;
  width: min(84vw, 780px);
  padding: 2.4dvh 4vw 2.8dvh;
  background: #fff;
  border: 5px solid var(--ink);
  border-radius: 50% / 42%;
  box-shadow: 8px 8px 0 var(--ink);
  text-align: center;
  text-transform: uppercase;
  line-height: .95;
  letter-spacing: .01em;
  word-break: break-word;
  animation: pop .45s cubic-bezier(.2, 1.6, .4, 1) both;
  transform-origin: 14% 100%;
}
.cohone .bubble { transform-origin: 86% 100%; }

/* cola del bocadillo: apunta a quien grita */
.bubble::before, .bubble::after {
  content: ""; position: absolute; width: 0; height: 0; border-style: solid;
}
.bubble::before { /* contorno */
  top: calc(100% - 8px); left: 9%;
  border-width: 56px 50px 0 10px;
  border-color: var(--ink) transparent transparent transparent;
}
.bubble::after { /* relleno */
  top: calc(100% - 14px); left: calc(9% + 7px);
  border-width: 46px 38px 0 6px;
  border-color: #fff transparent transparent transparent;
}
.cohone .bubble::before { left: auto; right: 9%; border-width: 56px 10px 0 50px; }
.cohone .bubble::after  { left: auto; right: calc(9% + 7px); border-width: 46px 6px 0 38px; }

#shout { display: block; }

/* el grito: crece y vibra justo antes de cambiar de dominio */
.bubble.yell { animation: yell .09s linear infinite; }
.bubble.yell::before, .bubble.yell::after { filter: none; }

@keyframes pop {
  0%   { transform: scale(.15) rotate(-5deg); opacity: 0; }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
@keyframes yell {
  0%   { transform: scale(1.1) translate(0, 0); }
  25%  { transform: scale(1.12) translate(-6px, 4px) rotate(-.7deg); }
  50%  { transform: scale(1.1) translate(5px, -4px) rotate(.7deg); }
  75%  { transform: scale(1.13) translate(-4px, -3px) rotate(-.4deg); }
  100% { transform: scale(1.1) translate(0, 0); }
}

/* ---------- escena ---------- */
.speaker { animation: bob 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
.yelling .speaker { animation: lean .12s linear infinite; }
@keyframes bob  { 50% { transform: translateY(-5px) rotate(.6deg); } }
@keyframes lean { 50% { transform: translateY(-4px) rotate(2.5deg) scale(1.03); } }

.dog { animation: bark .35s steps(2) infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes bark { 50% { transform: translateY(-5px); } }

.wave { animation: wave 1.4s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 100%; }
@keyframes wave { 50% { transform: translateY(-3px); } }

.shutter { transform-box: fill-box; transform-origin: left center; animation: shut 4.5s ease-in-out infinite; }
@keyframes shut { 0%, 35% { transform: scaleX(.05); } 55%, 90% { transform: scaleX(1); } 100% { transform: scaleX(.05); } }

.gull { animation: fly 22s linear infinite; }
@keyframes fly { from { transform: translateX(-200px); } to { transform: translateX(2200px); } }

/* ---------- detalles discretos ---------- */
#foot {
  position: absolute; left: 0; right: 0; bottom: max(1.2dvh, env(safe-area-inset-bottom));
  text-align: center; padding: 0 4vw;
  font-family: Georgia, "Times New Roman", serif; font-style: italic;
  letter-spacing: .04em; color: var(--paper);
}
#tag { font-size: clamp(10px, 1.6vw, 14px); opacity: .8; }
#firma { margin-top: .3em; font-size: clamp(10px, 1.4vw, 12px); opacity: .6; }
#firma a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
#firma a:hover { opacity: 1; color: var(--albero); }
#count {
  position: absolute; right: 3vw; top: 1.2dvh;
  font: 400 clamp(10px, 1.4vw, 13px) Georgia, serif; font-style: italic;
  opacity: .45;
}

@media (prefers-reduced-motion: reduce) {
  .bubble, .bubble.yell, .speaker, .yelling .speaker, .dog, .wave, .shutter, .gull { animation: none !important; }
  .shutter { transform: scaleX(1); }
  .gull { display: none; }
}