/* Chicken's own look, on the game template (static/game.css styles the shell): one wide, short canvas stage (static/
   chicken.js draws the road, the pads, the traffic and the chicken). The frame takes the road's height instead of the
   window's: the road is about half as tall as it is wide (400 to 440 px; 300 on a phone), as wide and short as a road is. */

.gm[data-game="chicken"] { height: auto; }
.gm[data-game="chicken"] .gm-play { min-height: 0; }
.ck-stage { position: relative; flex: 1 0 auto; width: 100%; aspect-ratio: 2.08 / 1; min-height: 400px; max-height: 440px; overflow: hidden; }
/* the panel scrolls beside the road (the Auto rules) instead of stretching the frame */
@media (min-width: 900px) { .gm[data-game="chicken"] .gm-panel { contain: size; } }
.ck-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
.ck-cv:focus-visible { box-shadow: inset 0 0 0 1.5px rgb(216 165 72 / .7); }
@media (max-width: 899px) {
  .ck-stage { aspect-ratio: auto; height: 300px; min-height: 300px; }
}