/* Display normalization belongs to the game, never to shared plate artwork. */
/* Phone/tablet presentation order; game state and the desktop order stay intact. */
@media (max-width: 1280px) {
  #license-plate-game .license-plate-scoreboard { order: -2; }
  #license-plate-game .plate-wall-celebration { order: -1; }
}
#license-plate-game .license-plate-tile[aria-pressed="false"] .license-plate-claim {
  color: #e8c982;
}

#license-plate-game .license-plate-tile[aria-pressed="true"] .license-plate-claim {
  color: #f4d99b;
}

#license-plate-game .license-plate-tile.has-plate-art {
  grid-template-rows: auto auto;
  align-content: center;
}

#license-plate-game .license-plate-game-viewport {
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  width: min(100%, 240px);
  aspect-ratio: 7 / 4;
  padding: 4%;
  min-width: 0;
}

@media (prefers-reduced-motion: no-preference) {
  #license-plate-game .license-plate-tile.is-newly-spotted {
    animation: license-plate-game-gold-pulse 750ms ease-out;
  }

  #license-plate-game .is-newly-spotted .license-plate-game-viewport::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    border-radius: 6px;
    background: linear-gradient(110deg, transparent 42%, rgba(255, 243, 206, .5) 50%, transparent 58%);
    background-size: 300% 100%;
    animation: license-plate-game-headlight-sweep 750ms ease-out both;
  }
}

@keyframes license-plate-game-gold-pulse {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30% { box-shadow: inset 0 0 0 2px #f4d99b, 0 0 14px rgba(244, 217, 155, .5); }
}

@keyframes license-plate-game-headlight-sweep {
  0% { background-position: 100% 0; opacity: 0; }
  20% { opacity: 1; }
  80% { opacity: 1; }
  100% { background-position: 0% 0; opacity: 0; }
}

#license-plate-game .license-plate-game-viewport > .license-plate-art {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* Its taller canvas has transparent top/bottom margins; retain the source PNG. */
#license-plate-game .license-plate-game-viewport > .license-plate-art[src$="/north-dakota.png"] {
  transform: scale(1.18);
}