/* Click/touch rectangles are never visual boxes. The actual image silhouette
   gets its subtle warm halo in game.js withStationHalo(), following alpha. */
#game .station:hover,
#game .station.next,
#game .station.picked,
#game .station:focus-visible {
  background: transparent !important;
  box-shadow: none !important;
}
#game .station.next::before,
#game .station.next::after {
  content: none !important;
  display: none !important;
}
/* Keyboard focus remains visible as the silhouette halo and readable label,
   rather than the full rectangular hitbox outline. */
#game .station:focus-visible {outline: none !important;}
/* A station name helps discover the tool, but must get out of the way
   as soon as the player presses it. Keep the accessible aria-label. */
#game .station.label-dismissed .label {
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}
/* The peanut dish sits at the bottom edge of the stage. Reuse the exact
   cream/brown station badge styling (as on Nước nóng), but position it under
   the ceramics, inside the scene and without any fade-in hover delay. */
#game #station-peanut {
  min-width: 118px !important;
  min-height: 77px !important;
}
#game #station-peanut .label {
  top: calc(100% - 10px);
  bottom: auto;
  font-size: 16px;
  line-height: 1.25;
  padding: 1px 8px;
  transition: none;
}
#game #station-peanut:hover .label,
#game #station-peanut:focus-visible .label,
#game #station-peanut.next .label {
  transform: translateX(-50%);
}
/* In the rotated portrait layout a generic 120px touch minimum would expand
   each 48px bottle over its neighbors: the Cam target steals Dâu's center.
   Bottles are a tightly spaced row with their own exact per-bottle targets. */
html.portrait-rotated #game .station.bottle-choice {
  min-width: 0 !important;
  min-height: 0 !important;
}
