/*
  The room card is sized differently from every station card: bigger, and
  capped by height rather than width, since it's the site's front door and
  meant to read as the biggest visual element on the page (see CLAUDE.md).
  The wrapper is inline-block so it shrinks to the <img>'s actual rendered
  box, which is what lets the absolutely-positioned nav overlay line up with
  it exactly via inset: 0.
*/
.room-card {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.room-art {
  display: block;
  max-height: 960px;
  max-width: 100%;
  width: auto;
  height: auto;
}

.room-nav {
  position: absolute;
  inset: 0;
}

/*
  Invisible by design — these are buried easter eggs, not a menu. The only
  affordances are the ones every link already has natively: a pointer cursor
  and the site's existing dashed focus ring on keyboard :focus-visible. No
  hover state, no border, no background, ever.
*/
.room-hotspot {
  position: absolute;
  display: block;
}

.room-hotspot-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
  ?debug=1 verification mode only — draws each region so the fetch -> parse
  -> percentage pipeline can be checked against where the artist actually
  placed the rects in the SVG. Same magenta convention as the game's own
  debug overlay (public/games/cable-wrangler/debug.js): a color that never
  appears anywhere else, so debug output can't be mistaken for real UI.
*/
.room-hotspot--debug {
  outline: 1px dashed #ff2df1;
  background: rgba(255, 45, 241, 0.15);
}

.room-hotspot--debug .room-hotspot-label {
  position: static;
  display: block;
  width: auto;
  height: auto;
  padding: 2px 4px;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
  font-size: 8px;
  color: #ff2df1;
  background: rgba(24, 24, 24, 0.8);
}