.game-window--dino{max-width:640px}
.game-canvas-wrap--dino{aspect-ratio:2/1;background:var(--bg-alt)}
#dinoCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}

.game-card-banner--dino{position:relative}
.game-card-banner--dino::after{
  content:'';position:absolute;left:0;right:0;bottom:26px;height:2px;
  background:var(--accent);opacity:.5;
}
.game-card-dino{
  position:absolute;left:24%;bottom:27px;z-index:2;
  width:38px;height:38px;border-radius:10px;
  background:var(--accent-bright);box-shadow:0 0 22px rgba(143,227,168,.55);
  animation:game-card-dino-hop 2.4s ease-in-out infinite;
  animation-delay:-3s;
}
@keyframes game-card-dino-hop{
  0%{transform:translateY(0) scaleY(1)}
  6%{transform:translateY(-30px) scaleY(1.05)}
  24%{transform:translateY(-30px) scaleY(1.02)}
  32%{transform:translateY(0) scaleY(0.9)}
  50%{transform:translateY(0) scaleY(1)}
  58%{transform:translateY(-30px) scaleY(1.05)}
  76%{transform:translateY(-30px) scaleY(1.02)}
  84%{transform:translateY(0) scaleY(0.9)}
  100%{transform:translateY(0) scaleY(1)}
}
.game-card-bug{
  position:absolute;bottom:27px;left:105%;width:15px;height:11px;
  border-radius:50%;background:var(--warn);opacity:.85;
  animation:game-card-bug-run 2.4s linear infinite;
}
.game-card-bug--1{animation-delay:0s}
.game-card-bug--2{animation-delay:-1.2s}
@keyframes game-card-bug-run{
  from{left:105%}
  to{left:-15%}
}

@media (max-width:520px){
  .game-window--dino{max-width:none}
}

@media (prefers-reduced-motion: reduce){
  .game-card-dino{animation:none}
  .game-card-bug{animation:none}
}