/* Hub: header + island map + "Meet the gang" strip, all inside ONE screen (no page scroll)
   at 390x844 and at 1280x800. The map is a size container so places scale with it. */

body.hub { background: #2a9de8; overflow: hidden; }
.hub-shell {
  height: 100vh; height: 100dvh; min-height: 560px;
  display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto;
  max-width: 1400px; margin: 0 auto;
}

/* ---------- Header ---------- */
.hub-header {
  display: flex; align-items: center; gap: 8px;
  padding: max(12px, var(--sa-t)) max(10px, var(--sa-r)) 6px max(10px, var(--sa-l));
  background: var(--yellow);
  border-bottom: 5px solid var(--ink);
  position: relative; z-index: 5;
}
.hub-header .brand img { display: block; width: 48px; height: 48px; filter: drop-shadow(2px 2px 0 var(--ink)); }
.hub-logo { flex: 1 1 auto; font-size: clamp(24px, 7vw, 44px); --stroke: 6px; text-shadow: 0 4px 0 var(--ink); line-height: 1; }
.hub-logo .l { color: #fff; }
.hub-logo .l:nth-child(3n+2) { color: var(--cyan); }
.hub-logo .l:nth-child(3n) { color: var(--pink); }
.hub-logo .arc .l { color: var(--lime); }
.hub-logo .arc .l:nth-child(2n) { color: var(--orange); }

/* ---------- Map ---------- */
.map {
  position: relative; overflow: hidden;
  container-type: size;
  border-bottom: 5px solid var(--ink);
}
.map-bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.trail.landscape { display: none; }

.deco { position: absolute; pointer-events: none; }
.cloud {
  width: 70px; height: 24px; border-radius: 999px; background: #fff;
  box-shadow: inset 0 -5px 0 #d9ecfa; border: 3px solid #9cc9e6;
  animation: drift 26s linear infinite;
}
.cloud::before { content: ''; position: absolute; left: 14px; top: -16px; width: 32px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid #9cc9e6; border-bottom: 0; }
.cloud.c1 { top: 3%; left: 2%; }
.cloud.c2 { top: 48%; left: 74%; scale: .8; animation-duration: 34s; animation-delay: -12s; }
@keyframes drift { 0% { translate: -30px 0; } 50% { translate: 30px 0; } 100% { translate: -30px 0; } }
.palm { width: 11cqmin; height: auto; }
.palm.p1 { left: 3%; top: 40%; }
.palm.p2 { right: 8%; top: 60%; }
.boat { width: 13cqmin; left: 4%; bottom: 2%; animation: rock 3s ease-in-out infinite; }
@keyframes rock { 0%, 100% { rotate: -6deg; translate: 0 0; } 50% { rotate: 6deg; translate: 0 -4px; } }

/* A place: art box + wooden sign. Anchor = center of the art box. */
.place {
  --w: min(40cqw, 26cqh);
  position: absolute; left: var(--x); top: var(--y);
  width: var(--w);
  translate: -50% -50%;
  display: block; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit; text-decoration: none;
  cursor: pointer; z-index: 2;
  -webkit-tap-highlight-color: transparent;
}
.place .art { position: relative; display: block; width: 100%; aspect-ratio: 200 / 160; }
.place .bldg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 5px 0 rgba(26,20,32,.25)); }
.place:hover .art, .place:focus-visible .art, .place.on .art { animation: wiggle .5s ease-in-out; }
.place:focus-visible { outline: 4px dashed #fff; outline-offset: 4px; border-radius: 12px; }
@keyframes wiggle { 25% { rotate: -3deg; scale: 1.05; } 75% { rotate: 3deg; scale: 1.05; } }

.tent .tent-art { position: absolute; left: 50%; bottom: -6%; height: 132%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 5px 0 rgba(26,20,32,.25)); }
.tent .wizard-mini { position: absolute; right: -18%; bottom: -8%; height: 78%; width: auto; max-width: none; animation: peek 2.6s ease-in-out infinite; transform-origin: 50% 100%; }
.cabin .cabin-art { position: absolute; left: 50%; bottom: -4%; height: 112%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 5px 0 rgba(26,20,32,.25)); }
.cabin .santa-mini { position: absolute; left: -16%; bottom: -12%; height: 56%; width: auto; max-width: none; animation: hop 1.8s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes hop { 0%, 70%, 100% { translate: 0 0; scale: 1 1; } 80% { translate: 0 -8%; scale: .95 1.06; } 90% { translate: 0 0; scale: 1.05 .94; } }
@keyframes smoke { from { opacity: .9; translate: 0 0; } to { opacity: 0; translate: 6px -16px; } }
.outhouse .stink path { animation: stink 1.6s ease-in-out infinite; }
.outhouse .stink path + path { animation-delay: -.8s; }
@keyframes stink { 0%, 100% { translate: 0 0; opacity: .9; } 50% { translate: 0 -6px; opacity: .4; } }
/* Outhouse: real art (H05). The ajar frame creaks open now and then as the idle, and fully on hover/focus/tap/featured
   while live. The code-drawn SVG is a fallback only (js/hub.js adds .art-fail if outhouse.webp fails to load). */
.outhouse .out-art { position: absolute; left: 50%; bottom: -4%; height: 118%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 5px 0 rgba(26,20,32,.25)); }
.outhouse .out-live { opacity: 0; animation: out-creak 3.6s ease-in-out infinite; }
.outhouse:not(.soon):hover .out-live, .outhouse:not(.soon):focus-visible .out-live, .outhouse:not(.soon).on .out-live, .outhouse:not(.soon).featured .out-live { opacity: 1; animation: none; }
.outhouse.soon .out-live { display: none; }
.outhouse .out-fallback, .outhouse.art-fail .out-art { display: none; }
.outhouse.art-fail .out-fallback { display: block; }
@keyframes out-creak { 0%, 60%, 100% { opacity: 0; } 68%, 84% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .outhouse .out-live { animation: none; } }
html.kw-reduce .outhouse .out-live { animation: none; }
.hatchery .puff circle { animation: smoke 2.8s ease-out infinite; }
.hatchery .puff circle + circle { animation-delay: -1.4s; }
/* Hatchery: real art (H06). The active frame glows in now and then as the idle, and fully on hover/focus/tap/featured
   while live. The code-drawn SVG is a fallback only (js/hub.js adds .art-fail if hatchery.webp fails to load). */
.hatchery .hatch-art { position: absolute; left: 50%; bottom: -4%; height: 112%; width: auto; max-width: none; translate: -50% 0; filter: drop-shadow(0 5px 0 rgba(26,20,32,.25)); }
.hatchery .hatch-live { opacity: 0; animation: hatch-glow 3.2s ease-in-out infinite; }
.hatchery:not(.soon):hover .hatch-live, .hatchery:not(.soon):focus-visible .hatch-live, .hatchery:not(.soon).on .hatch-live, .hatchery:not(.soon).featured .hatch-live { opacity: 1; animation: none; }
.hatchery.soon .hatch-live { display: none; }
.hatchery .hatch-fallback, .hatchery.art-fail .hatch-art { display: none; }
.hatchery.art-fail .hatch-fallback { display: block; }
@keyframes hatch-glow { 0%, 55%, 100% { opacity: 0; } 70%, 85% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .hatchery .hatch-live { animation: none; } }
html.kw-reduce .hatchery .hatch-live { animation: none; }

.place .sign {
  position: relative; z-index: 3;
  display: block; margin: -4% auto 0; width: max-content; max-width: 112%;
  font: 400 clamp(13px, 4.2cqmin, 21px)/1 var(--logo); letter-spacing: .3px; text-transform: uppercase; text-align: center;
  color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill;
  background: #a86c34; border: 3px solid var(--ink); border-radius: 8px;
  padding: 5px 9px 3px; box-shadow: 3px 3px 0 var(--ink), inset 0 -4px 0 #8a5a2b;
  rotate: -2deg;
}
.place:nth-of-type(2n) .sign { rotate: 2deg; }
.place .sign small { display: block; font: 400 clamp(10px, 2.8cqmin, 14px)/1 var(--comic); letter-spacing: 1px; color: var(--yellow); -webkit-text-stroke: 3px var(--ink); margin-top: 2px; }

.place .flag {
  position: absolute; z-index: 4; left: -6%; top: -4%;
  font: 400 clamp(10px, 2.8cqmin, 14px) var(--comic); letter-spacing: 1px; text-transform: uppercase;
  background: var(--pink); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  border: 3px solid var(--ink); border-radius: 8px; padding: 3px 7px 1px; rotate: -8deg;
  box-shadow: 2px 2px 0 var(--ink);
  animation: bob 1.6s ease-in-out infinite;
}
.place .tape {
  position: absolute; z-index: 4; left: 50%; top: 40%; translate: -50% -50%; rotate: -12deg;
  white-space: nowrap;
  font: 400 clamp(12px, 3.6cqmin, 18px) var(--comic); letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--ink);
  padding: 3px 10px 1px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 12px, #ffd21f 12px 24px);
  border: 3px solid var(--ink);
  box-shadow: 2px 3px 0 rgba(26,20,32,.4);
}
/* Placeholder marker: shown while ART PENDING. Off by default: SHOW_ART_PENDING in js/config.js, or ?art=1. */
.place .pending {
  position: absolute; z-index: 4; right: -4%; top: 4%;
  font: 800 9px/1 var(--body); letter-spacing: .5px; text-transform: uppercase;
  color: var(--ink); background: #fffdf4; border: 2px dashed var(--ink); border-radius: 6px;
  padding: 3px 4px; rotate: 6deg; opacity: .9;
}
.hide-pending .place .pending { display: none; }
.place:not(.soon) .tape { display: none; }

/* Tooltip tags (v1 game-card tags, now on the map) */
.map-tip {
  position: absolute; z-index: 10;
  width: min(250px, 70cqw);
  background: var(--paper); border: 4px solid var(--ink); border-radius: 16px;
  box-shadow: 5px 5px 0 var(--ink);
  padding: 10px 10px 10px; text-align: center;
  animation: tipin .18s ease-out;
}
@keyframes tipin { from { scale: .7; opacity: 0; } }
.map-tip h3 { margin: 0 0 6px; font: 400 18px/1.05 var(--logo); text-transform: uppercase; }
.map-tip .tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 8px; }
.map-tip .tags span { font: 400 13px var(--comic); letter-spacing: 1px; text-transform: uppercase; background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; padding: 2px 8px 0; }
.map-tip .tags span:first-child { background: var(--pink); color: #fff; }
.map-tip p { margin: 0 0 8px; font-size: 13px; line-height: 1.3; }
.map-tip .btn { font-size: 17px; min-height: 44px; padding: 9px 16px 6px; }
.map-tip a.text { font-size: 13px; }
.map-tip.soon-card .soon-badge { font-size: 14px; margin-bottom: 6px; }

/* ---------- Meet the gang ---------- */
.gang {
  position: relative;
  background: var(--purple);
  background-image: repeating-conic-gradient(#8a44ff 0 10deg, transparent 10deg 20deg);
  background-position: 50% 120%; background-size: 200% 300%;
  padding: 4px 6px 0;
  border-bottom: 5px solid var(--ink);
}
.gang-title { margin: 0 0 -2px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.gang-title .toon { font-size: clamp(20px, 5.6vw, 28px); -webkit-text-stroke: 5px var(--ink); text-shadow: 0 3px 0 var(--ink); }
.burst-tag {
  font: 400 15px var(--comic); letter-spacing: 1px; text-transform: uppercase;
  background: var(--pink); color: #fff; -webkit-text-stroke: 3px var(--ink); paint-order: stroke fill;
  border: 3px solid var(--ink); border-radius: 10px; padding: 3px 8px 1px; rotate: 6deg;
  box-shadow: 2px 2px 0 var(--ink);
}
.lineup { position: relative; height: clamp(62px, 16vw, 124px); display: flex; max-width: 980px; margin: 0 auto; }
.lineup canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lineup button {
  flex: 1 1 0; min-width: 0; position: relative; z-index: 1;
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 12px;
}
.lineup button:focus-visible { outline: 3px dashed #fff; outline-offset: -3px; }
.gang-tip {
  position: absolute; z-index: 10; bottom: calc(100% - 6px); left: 50%; translate: -50% 0;
  width: max-content; max-width: calc(100% - 20px);
  background: #fff; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink);
  padding: 6px 10px 6px; text-align: center; font-size: 13px; line-height: 1.25;
  animation: tipin .15s ease-out;
}
.gang-tip b { display: block; font: 400 16px var(--logo); text-transform: uppercase; }
.gang-tip q { display: block; font: 400 17px var(--comic); letter-spacing: .5px; quotes: '\201C' '\201D'; }
.gang-tip a { display: inline-flex; align-items: center; gap: 4px; margin-top: 3px; font: 400 13px var(--comic); letter-spacing: 1px; text-transform: uppercase; }

.hub-foot {
  font-size: 11px; text-align: center; color: #fff; background: var(--ink);
  padding: 4px max(8px, var(--sa-r)) max(4px, var(--sa-b)) max(8px, var(--sa-l));
}

/* Portrait (Task 3a): the hatchery sits lowest on the island, so pin its bottom (the Egg Pops sign) above the
   FEATURED pill bar (bottom 10px + ~31px tall) instead of centring it at --y, where the bar covered the subtitle. */
@media (max-aspect-ratio: 5/4) {
  .place.hatchery { top: auto; bottom: 50px; translate: -50% 0; }
}

/* ---------- Landscape / desktop: same island, left-to-right trail ---------- */
@media (min-aspect-ratio: 5/4) {
  .trail.portrait { display: none; }
  .trail.landscape { display: inline; }
  .place { --w: min(21cqw, 46cqh); left: var(--lx); top: var(--ly); }
  .palm.p1 { left: 46%; top: 6%; }
  .palm.p2 { right: 4%; top: 70%; }
  .cloud.c2 { top: 8%; left: 60%; }
  .boat { width: 7cqmin; }
  .hub-header .brand img { width: 56px; height: 56px; }
}
}

/* Short phones (e.g. 375x667): drop sign subtitles (the tooltip carries them) so places don't collide */
@media (max-height: 720px) and (max-aspect-ratio: 5/4) {
  .place .sign small { display: none; }
  .place .sign { white-space: nowrap; }
  .place .pending { font-size: 8px; }
}

/* ---------- Seasonal skin (js/config.js SEASON, ?season=) — code-drawn only, no images ---------- */
.season-deco { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.season-deco .bat {
  position: absolute;
  width: 34px; height: 14px; animation: bat-flap .5s ease-in-out infinite alternate, bob 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -.17s);
}
.season-deco .bat::before, .season-deco .bat::after {     /* two scalloped wings around a round body */
  content: ''; position: absolute; top: 0; width: 16px; height: 12px; background: #2a1d38;
  border-radius: 90% 10% 60% 40% / 80% 20% 80% 20%;
}
.season-deco .bat::before { left: 0; }
.season-deco .bat::after { right: 0; transform: scaleX(-1); }
.season-deco .pumpkin {
  position: absolute;
  width: 34px; height: 26px; border-radius: 50%; border: 3px solid var(--ink);
  background: radial-gradient(ellipse at 35% 35%, #ffb04a, #f07a12 60%, #c95a06);
  box-shadow: inset 8px 0 0 -5px rgba(0,0,0,.18), inset -8px 0 0 -5px rgba(0,0,0,.18);
}
.season-deco .pumpkin::before { content: ''; position: absolute; left: 50%; top: -9px; width: 5px; height: 8px; margin-left: -2px; background: #3d7a2a; border: 2px solid var(--ink); border-radius: 2px; }
.season-deco .pumpkin::after {   /* jack-o'-lantern face: two triangle eyes + a grin, all borders */
  content: ''; position: absolute; left: 50%; top: 55%; width: 14px; height: 5px; margin-left: -7px;
  border-bottom: 3px solid var(--ink); border-radius: 0 0 50% 50%;
}
.season-deco .lights {
  position: absolute; left: 0; right: 0; top: 0; height: 26px; display: flex; justify-content: space-around;
  border-top: 2px solid #1d5c2e; border-radius: 0 0 50% 50% / 0 0 18px 18px;
}
.season-deco .lights i {
  width: 10px; height: 15px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 2px solid var(--ink);
  animation: twinkle 1.2s steps(2) infinite; animation-delay: calc(var(--i) * -.3s);
}
.season-deco .snow {
  position: absolute; top: -10px;
  width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px rgba(26,20,32,.25);
  animation: snow-fall 7s linear infinite; animation-delay: calc(var(--i) * -.9s);
}
@keyframes bat-flap { to { transform: scaleY(.55); } }
@keyframes twinkle { 50% { filter: brightness(.55); } }
@keyframes snow-fall { to { transform: translate(18px, calc(100cqh + 20px)); } }

.place.featured { z-index: 3; }
.featured-hero {
  position: absolute; z-index: 5; left: 50%; bottom: 10px; translate: -50% 0; max-width: 92%;
  display: flex; align-items: center; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 400 clamp(12px, 3.4cqmin, 17px) var(--comic); color: var(--ink); text-decoration: none;
  background: var(--yellow); border: 3px solid var(--ink); border-radius: 999px; padding: 5px 14px 3px;
  box-shadow: 3px 3px 0 var(--ink);
}
.featured-hero .lbl { text-transform: uppercase; letter-spacing: 1px; background: var(--pink); color: #fff; border-radius: 999px; padding: 1px 7px; }
.featured-hero b { font-weight: 400; overflow: hidden; text-overflow: ellipsis; min-width: 0; padding: 0 5px 2px 1px; margin-right: -2px; }   /* v7: padding keeps the last glyph of "FORTUNE FRENZY" from being clipped by the ellipsis box */
.featured-hero .star { color: var(--pink); }
.season-halloween .featured-hero { background: #ff9b2f; }
.season-fartmas .featured-hero { background: #e9fbff; }
@media (prefers-reduced-motion: reduce) {
  .season-deco *, .season-deco *::before, .season-deco *::after { animation: none !important; }
  .season-deco .snow { top: var(--y); }
}
html.kw-reduce .season-deco *, html.kw-reduce .season-deco *::before, html.kw-reduce .season-deco *::after { animation: none !important; }
html.kw-reduce .season-deco .snow { top: var(--y); }

/* ---------- Attract mode (js/hub.js): body.attract after ~8 s idle. Code-drawn, no images, no sound ---------- */
.attract-fx { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity .4s; }
.attract .attract-fx { opacity: 1; }
.attract-fx .sparkle {               /* four-point toon star: two crossed diamonds with an ink edge */
  position: absolute; width: 18px; height: 18px; scale: 0;
  background: var(--yellow); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  filter: drop-shadow(0 0 1.5px var(--ink)) drop-shadow(0 0 1px var(--ink));
}
.attract .attract-fx .sparkle { animation: sparkle 1.6s ease-in-out infinite; animation-delay: calc(var(--i) * -.37s); }
.attract-fx .marquee {
  position: absolute; left: 0; right: 0; top: 30px; overflow: hidden; white-space: nowrap;
  background: var(--ink); color: var(--yellow); border-block: 3px solid var(--yellow);
  font: 400 clamp(13px, 3.6cqmin, 19px) var(--comic); letter-spacing: 1px; text-transform: uppercase; padding: 4px 0 2px;
}
.attract-fx .marquee span { display: inline-block; padding-left: 100%; }
.attract .attract-fx .marquee span { animation: marquee 16s linear infinite; }
.attract .place .art { animation: attract-bob 1.1s ease-in-out infinite; }
.attract .place:nth-of-type(2n) .art { animation-delay: -.55s; }
@keyframes sparkle { 0%, 100% { scale: 0; rotate: 0deg; } 50% { scale: 1; rotate: 45deg; } }
@keyframes marquee { to { transform: translateX(-100%); } }
@keyframes attract-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7%); } }
@media (prefers-reduced-motion: reduce) {
  .attract .attract-fx .sparkle, .attract .attract-fx .marquee span, .attract .place .art { animation: none !important; }
  .attract-fx .sparkle { scale: .8; }
  .attract-fx .marquee span { padding-left: 8px; }
  .attract-fx { transition: none; }
}
html.kw-reduce .attract .attract-fx .sparkle, html.kw-reduce .attract .attract-fx .marquee span, html.kw-reduce .attract .place .art { animation: none !important; }
html.kw-reduce .attract-fx .sparkle { scale: .8; }
html.kw-reduce .attract-fx .marquee span { padding-left: 8px; }
html.kw-reduce .attract-fx { transition: none; }

/* ---------- Phones held sideways (Task F): the island fills the screen under a slim header, and the
   page scrolls down to "Meet the gang" instead of clipping it (the 560 px minimum doesn't fit 390 px). ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  body.hub { overflow-x: hidden; overflow-y: auto; }
  .hub-shell { height: auto; min-height: 0; grid-template-rows: auto calc(100dvh - 60px) auto auto; }
  .hub-header { padding-top: max(6px, var(--sa-t)); padding-bottom: 4px; }
  .hub-header .brand img { width: 40px; height: 40px; }
  .hub-logo { font-size: clamp(20px, 7vh, 30px); --stroke: 5px; text-shadow: 0 3px 0 var(--ink); }
  .gang { padding-left: var(--sa-l); padding-right: var(--sa-r); }
}

/* Narrow phones (Task F): header buttons never push the page wider than the screen (iOS would zoom out) */
@media (max-width: 430px) {
  .hub-header { gap: 4px; }
  .hub-logo { min-width: 0; }
  .hub-header .hs-open { padding: 5px 6px; font-size: 13px; }
  .hub-header .sound-group { gap: 4px; }
  .hub-header .sound-toggle { min-width: 40px; padding: 4px 6px; }
}
/* Side insets on a narrow screen eat ~90px: the buttons wrap under the logo rather than widen the page */
@media (max-width: 430px) {
  .hub-header { flex-wrap: wrap; justify-content: flex-end; row-gap: 4px; }
}

@media (min-aspect-ratio: 5/4) {
  /* v8: the island's sand ends at ~95% of the map height; the pill used to straddle it. Compact, it now sits in the
     water strip under the island (the water band is only ~22px tall at 1280x800). */
  .featured-hero { bottom: 1px; font-size: 12px; line-height: 1; gap: 5px; padding: 2px 12px 1px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
  .featured-hero .lbl { padding: 2px 7px 1px; line-height: 1; }
  .featured-hero b { padding-bottom: 1px; }
}   /* v9: closes the v8 landscape block above (it used to run to the end of the file) */

/* v9: approved Egg Pops dino peeking from the Hatchery, like the wizard and Santa minis (js/hub.js rotates it). */
.hatchery .dino-mini { position: absolute; left: -20%; bottom: -10%; height: 66%; width: auto; max-width: none; z-index: 1;
  animation: dino-peek 3s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(0 4px 0 rgba(26,20,32,.25)); }
.hatchery .dino-mini.swap { animation: dino-pop .35s ease-out; }
.hatchery .dino-mini.fail { display: none; }
@keyframes dino-peek { 0%, 60%, 100% { translate: 0 0; rotate: 0deg; } 70% { translate: 0 -6%; rotate: -4deg; } 80% { translate: 0 0; rotate: 3deg; } }
@keyframes dino-pop { from { scale: .55; } 70% { scale: 1.08; } to { scale: 1; } }
@media (prefers-reduced-motion: reduce) { .hatchery .dino-mini, .hatchery .dino-mini.swap { animation: none; } }
html.kw-reduce .hatchery .dino-mini, html.kw-reduce .hatchery .dino-mini.swap { animation: none; }