/* Global: blocks zoom, elastic scroll, selection and browser gestures. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: #8fd3f4;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body { position: fixed; inset: 0; }

#app { position: absolute; inset: 0; }

.view { position: absolute; inset: 0; overflow: hidden; }
.view[hidden] { display: none; }

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }

img, svg { -webkit-user-drag: none; }

/* Dance of the completed dino (js/victory.js, in any view). */
.vx-dance {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: vx-dance 0.6s ease-in-out 4;
}
/* Paper label with the dino's name (js/victory.js), stuck on with tape. */
.vx-name {
  position: absolute;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + max(48px, 7vh));
  z-index: 5;
  padding: 0.06em 0.45em 0.14em;
  background: var(--c-paper);
  border: 3px solid var(--c-ink);
  border-radius: 14px;
  box-shadow: 0 5px 0 var(--c-ink);
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 54px; /* js/victory.js fits it to the name and the screen */
  line-height: 1.1;
  color: var(--c-earth);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) rotate(-2deg);
}
.vx-name::before {
  content: '';
  position: absolute;
  left: 50%;
  top: -0.3em;
  width: 1.7em;
  height: 0.54em;
  background: url('../ui/tape_2.webp') center / 100% 100% no-repeat;
  transform: translateX(-50%) rotate(4deg);
}
.vx-name.vx-on { animation: vx-name-in var(--t-settle) var(--ease-settle) forwards; }
@keyframes vx-name-in {
  0%   { opacity: 0; transform: translateX(-50%) translateY(24px) rotate(-9deg) scale(0.7); }
  40%  { opacity: 1; }
  100% { opacity: 1; transform: translateX(-50%) rotate(-2deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vx-name.vx-on { animation: vx-name-fade 160ms linear forwards; }
  @keyframes vx-name-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
}

@keyframes vx-dance {
  0%, 100% { transform: translateY(0) rotate(0deg) scale(1, 1); }
  20%      { transform: translateY(-7%) rotate(-3deg) scale(0.98, 1.03); }
  50%      { transform: translateY(0) rotate(0deg) scale(1.05, 0.95); }
  70%      { transform: translateY(-7%) rotate(3deg) scale(0.98, 1.03); }
}

/* Version in the bottom-right corner of the map: small and faint (js/main.js). */
.app-version {
  display: none;
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); /* TEMP: above the iPad strip */
  z-index: 5;
  font-size: 11px;
  color: var(--c-ink);
  opacity: 0.35;
  pointer-events: none;
}
#map-view:not([hidden]) ~ .app-version { display: block; }