/* Madryn Dino: usa los carteles de Madryn Cubos (cubos.css); acá, el marcador propio, la cuenta, la ayuda de los gestos */
.dn-top {
  position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--safe-top) + 8px) 12px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; transition: padding-top .3s ease;
}
.dn-ui.ready .dn-top { padding-top: calc(var(--safe-top) + 58px); }      /* en "listo" el botón Volver ocupa esa esquina */
.dn-dist { display: flex; flex-direction: column; align-items: flex-start; color: #fff; line-height: 1; }
.dn-dist b {
  font-family: var(--display); font-weight: 400; font-size: 36px; letter-spacing: .01em; font-variant-numeric: tabular-nums;
  text-shadow: 0 3px 0 rgba(10, 40, 70, .55), 0 0 14px rgba(10, 40, 70, .35);
}
.dn-dist .cb-score {
  margin-top: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(11, 53, 84, .8); font-size: 13px; font-weight: 700;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .14);
}

/* el dino que se acerca: su cara y cinco luces */
.dn-chase { display: flex; align-items: center; gap: 7px; padding: 4px 6px 4px 9px; border-radius: 999px; background: rgba(11, 53, 84, .72); box-shadow: 0 3px 0 rgba(0, 0, 0, .15); }
.dn-pips { display: flex; gap: 3px; }
.dn-pips i { width: 8px; height: 17px; border-radius: 4px; background: rgba(255, 255, 255, .22); transition: background .2s ease, transform .2s ease; }
.dn-pips i.on { background: #FFC93C; }
.dn-chase.near .dn-pips i.on { background: #FF8A3D; }
.dn-ui.danger .dn-pips i.on { background: #FF4B4B; transform: scaleY(1.15); }
.dn-face { display: block; width: 46px; height: 46px; border-radius: 50%; background: #FFF4E6; box-shadow: 0 0 0 3px #F86A26; }
.dn-face svg { display: block; width: 100%; height: 100%; }
.dn-face .f-mad { display: none; }
.dn-chase.near .dn-face .f-mad { display: inline; }
.dn-chase.near .dn-face .f-calm { display: none; }
.dn-chase.near .dn-face { animation: dnGrr .26s ease-in-out infinite alternate; }
.dn-chase.far .dn-face { box-shadow: 0 0 0 3px rgba(255, 255, 255, .8); }
@keyframes dnGrr { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.08); } }

/* el camino hasta el refugio */
.dn-road {
  position: absolute; left: 14px; right: 14px; top: calc(var(--safe-top) + 72px); height: 9px; border-radius: 999px;
  background: rgba(11, 53, 84, .5); box-shadow: 0 2px 0 rgba(0, 0, 0, .12); transition: top .3s ease;
}
.dn-ui.ready .dn-road { top: calc(var(--safe-top) + 122px); }
.dn-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; border-radius: inherit; background: linear-gradient(90deg, #FFE07A, #FFC93C); transform: scaleX(0); transform-origin: left center; }
.dn-me {
  position: absolute; top: 50%; left: 0; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; overflow: hidden;
  background: #fff; box-shadow: 0 0 0 2.5px #FFC93C, 0 3px 0 rgba(0, 0, 0, .2);
}
.dn-me img { display: block; width: 100%; height: 100%; object-fit: cover; }
.dn-goal { position: absolute; right: -8px; top: 50%; width: 26px; height: 26px; margin-top: -15px; }
.dn-goal svg { display: block; width: 100%; height: 100%; }

/* el esqueleto que vas juntando (los 4 huesos) */
.dn-bones {
  position: absolute; left: 12px; bottom: calc(var(--safe-bottom) + 16px); display: flex; align-items: center; gap: 8px;
  padding: 6px 10px 6px 12px; border-radius: 999px; background: rgba(11, 53, 84, .78); color: #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, .15);
}
.dn-bones-t { font-size: 12px; font-weight: 700; }
.dn-bones-i { display: flex; gap: 3px; }
.dn-bones-i i { display: block; width: 26px; height: 13px; }
.dn-bones-i svg { display: block; width: 100%; height: 100%; fill: rgba(255, 255, 255, .22); }
.dn-bones-i i.on svg { fill: #FFF4DC; filter: drop-shadow(0 0 3px rgba(255, 224, 140, .9)); }
.dn-bones-i i.got { animation: dnGot .45s cubic-bezier(.34, 1.56, .64, 1); }
.dn-bones.fail { opacity: .55; }
.dn-bones.fail .dn-bones-t { text-decoration: line-through; }
@keyframes dnGot { 0% { transform: scale(.4); } 60% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* turbo de mate */
.dn-turbo {
  position: absolute; right: 12px; bottom: calc(var(--safe-bottom) + 14px); display: flex; align-items: center; gap: 6px;
  padding: 5px 12px 5px 6px; border-radius: 999px; background: #3FAE49; color: #fff; box-shadow: 0 4px 0 #23802E;
  animation: dnTurbo .5s ease-in-out infinite alternate;
}
.dn-turbo i { display: block; width: 32px; height: 32px; }
.dn-turbo i svg { display: block; width: 100%; height: 100%; }
.dn-turbo span { display: flex; flex-direction: column; gap: 3px; }
.dn-turbo b { font-size: 15px; font-weight: 800; line-height: 1; }
.dn-turbo em { display: block; width: 64px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.dn-turbo u { display: block; height: 100%; background: #fff; transform-origin: left center; }
@keyframes dnTurbo { to { transform: translateY(-3px); } }

/* líneas de velocidad con el turbo: rayas finitas desde el centro, que no tocan el medio de la pantalla */
.dn-speed {
  position: absolute; inset: -8%; pointer-events: none; opacity: 0; transition: opacity .35s ease;
  background:
    repeating-conic-gradient(from 3deg at 50% 44%, rgba(255, 255, 255, 0) 0deg 7.1deg, rgba(255, 255, 255, .7) 7.4deg 7.8deg, rgba(255, 255, 255, 0) 8.1deg 13.3deg),
    repeating-conic-gradient(from 0deg at 50% 44%, rgba(225, 255, 210, 0) 0deg 9.6deg, rgba(225, 255, 210, .55) 9.9deg 10.2deg, rgba(225, 255, 210, 0) 10.5deg 17.9deg);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, transparent 0 46%, #000 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, transparent 0 46%, #000 100%);
}
.dn-ui.turbo .dn-speed { opacity: .5; animation: dnSpeed .16s steps(3) infinite; }
.dn-ui.outro .dn-speed { opacity: 0; animation: none; }
@keyframes dnSpeed { from { transform: rotate(0deg) scale(1); } to { transform: rotate(5deg) scale(1.03); } }

/* bordes rojos cuando el dino está encima */
.dn-vig { position: absolute; inset: 0; box-shadow: inset 0 0 90px 10px rgba(255, 60, 40, .55); opacity: 0; transition: opacity .25s ease; }
.dn-ui.danger .dn-vig { opacity: 1; animation: dnVig .55s ease-in-out infinite alternate; }
.dn-ui.outro .dn-vig { opacity: 0; animation: none; }
@keyframes dnVig { from { opacity: .45; } to { opacity: 1; } }

/* cuenta de largada */
.dn-count {
  position: absolute; left: 0; right: 0; top: 30%; text-align: center; pointer-events: none; opacity: 0;
  font-family: var(--display); font-size: 128px; line-height: 1; color: #fff; text-shadow: 0 7px 0 rgba(10, 40, 70, .38), 0 0 34px rgba(255, 255, 255, .45);
}
.dn-count.c3 { color: #FF6B4A; } .dn-count.c2 { color: #FFA53C; } .dn-count.c1 { color: #FFD23F; }
.dn-count.on { animation: dnCount .66s cubic-bezier(.2, .9, .3, 1.15) both; }
@keyframes dnCount {
  0% { opacity: 0; transform: scale(2.2); } 18% { opacity: 1; transform: scale(.9); } 30% { transform: scale(1.06); }
  42% { transform: scale(1); } 74% { opacity: 1; } 100% { opacity: 0; transform: scale(.72); }
}

/* el dino duerme (en la elección de personaje) */
.dn-zzz {
  position: absolute; left: 0; top: 0; font-family: var(--display); font-size: 26px; line-height: 1; color: #fff;
  text-shadow: 0 2px 0 rgba(10, 40, 70, .45); will-change: transform;
}
.dn-zzz, .dn-zzz small { display: inline-block; animation: dnZ 2.4s ease-in-out infinite; }
.dn-zzz small { font-size: .72em; margin-left: 2px; animation-delay: -.8s; }
.dn-zzz small + small { font-size: .55em; animation-delay: -1.6s; }
@keyframes dnZ { 0%, 100% { translate: 0 0; opacity: .55; } 50% { translate: 4px -8px; opacity: 1; } }

/* los botones de abajo: carril a la izquierda, agacharse y saltar a la derecha (quedan siempre; los nombres se van solos) */
.dn-pads {
  position: absolute; left: 12px; right: 12px; bottom: calc(var(--safe-bottom) + 16px); display: flex; align-items: flex-end; justify-content: space-between;
  pointer-events: none; transition: opacity .35s ease, transform .35s ease;
}
.dn-pg { display: flex; gap: 8px; }
.dn-b {
  position: relative; width: 66px; height: 66px; padding: 0; border: 0; border-radius: 22px; display: grid; place-items: center; color: #fff;
  background: rgba(11, 53, 84, .42); box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .62), 0 4px 0 rgba(10, 40, 70, .22);
  pointer-events: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
  transition: transform .09s ease, background .09s ease, box-shadow .09s ease; font: inherit;
}
.dn-b svg { width: 34px; height: 34px; fill: none; stroke: #fff; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 0 rgba(10, 40, 70, .4)); }
.dn-b small {
  position: absolute; left: 50%; bottom: calc(100% + 7px); transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 999px;
  background: rgba(11, 53, 84, .78); font-size: 12px; font-weight: 700; line-height: 1.2; box-shadow: 0 2px 0 rgba(0, 0, 0, .14); transition: opacity .45s ease, transform .45s ease;
}
.dn-ui.playing .dn-b { pointer-events: auto; }
.dn-b.on { background: rgba(255, 255, 255, .5); box-shadow: inset 0 0 0 2.5px #fff, 0 1px 0 rgba(10, 40, 70, .22); transform: translateY(3px) scale(.95); }
.dn-ui.ready .dn-pads { opacity: .55; }
.dn-ui.helped .dn-b small { opacity: 0; transform: translate(-50%, 6px); }
.dn-ui.outro .dn-pads { opacity: 0; transform: translateY(24px); }
.dn-ui.outro .dn-b { pointer-events: none; }
@media (max-width: 350px) { .dn-b { width: 58px; height: 58px; border-radius: 19px; } .dn-pg { gap: 6px; } }
@media (min-width: 700px) { .dn-pads { left: max(24px, calc(50% - 300px)); right: max(24px, calc(50% - 300px)); } }

/* carteles propios */
.cb-own .cb-bn.mate { font-size: 24px; background: #3FAE49; box-shadow: 0 4px 0 #23802E; }
.cb-own .cb-bn.go { font-size: 34px; }

/* todo el escenario es la zona de los gestos (el botón de pausa queda encima) */
.dn-zone { position: absolute; inset: 0; pointer-events: none; touch-action: none; }
.dn-ui.playing .dn-zone { pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  .dn-chase.near .dn-face, .dn-turbo, .dn-zzz, .dn-zzz small { animation: none !important; }
  .dn-ui.danger .dn-vig { animation: none; opacity: .8; }
  .dn-ui.turbo .dn-speed { animation: none; opacity: .3; }
  .dn-count.on { animation-duration: .01s; }
}