.room-navigator {
  display: flex;
  gap: .32rem;
  margin: .25rem 0 .65rem;
  padding: .28rem;
  overflow-x: auto;
  scrollbar-width: thin;
  background: #31232d;
  border: 2px solid #4b3541;
  border-radius: 11px;
}
.room-navigator button {
  position: relative;
  flex: 0 0 auto;
  min-width: 55px;
  display: grid;
  grid-template-columns: 21px 1fr;
  align-items: center;
  gap: .28rem;
  padding: .36rem .42rem;
  color: #3a2932;
  background: #fff5d8;
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
}
.room-navigator button > span {
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  color: #fff8dc;
  background: #654355;
  border-radius: 6px;
  font: 900 .68rem/1 Georgia, serif;
}
.room-navigator button strong { font-size: .66rem; }
.room-navigator button i {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 8px;
  height: 8px;
  background: #d04e46;
  border: 2px solid #fff5d8;
  border-radius: 50%;
  opacity: 0;
  transform: scale(.5);
  transition: opacity .15s ease, transform .15s ease;
}
.room-navigator button.has-alert i { opacity: 1; transform: scale(1); }
.room-navigator button.selected {
  color: #fff9e6;
  background: #7b3d4c;
  border-color: #2b2027;
  box-shadow: inset 0 -3px #c99654;
}
.room-navigator button.selected > span { color: #2b2027; background: #f5c85d; }
.coach-strip {
  margin: .55rem 0 !important;
  padding: .55rem .62rem;
  color: #513b43;
  background: #fff8df;
  border-left: 5px solid #c58b43;
  border-radius: 7px;
  font-size: .72rem !important;
  font-weight: 800;
  line-height: 1.35 !important;
}
.staff-card { grid-template-columns: 24px 39px 1fr; min-height: 54px; }
.staff-portrait {
  width: 38px;
  height: 38px;
  overflow: visible;
  filter: drop-shadow(0 2px 0 rgba(43, 32, 39, .25));
}
.staff-card.selected .staff-portrait { transform: scale(1.08) rotate(-2deg); }
.bell-banner {
  position: absolute;
  z-index: 96;
  left: 50%;
  top: 14px;
  max-width: min(620px, calc(100% - 2rem));
  padding: .62rem 1rem .62rem 2.5rem;
  color: #fff9e4;
  background: #4b3441;
  border: 3px solid #f2c65a;
  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(20, 12, 20, .45);
  font-weight: 1000;
  font-size: .78rem;
  letter-spacing: .03em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -18px) scale(.96);
  transition: opacity .18s ease, transform .18s ease;
}
.bell-banner::before {
  content: "";
  position: absolute;
  left: .7rem;
  top: 50%;
  width: 18px;
  height: 18px;
  background: #f2c65a;
  border: 3px solid #2b2027;
  border-radius: 50% 50% 46% 46%;
  transform: translateY(-58%);
}
.bell-banner.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bell-banner.bell-incident { background: #783b3e; border-color: #ffbd65; }
.bell-banner.bell-warning { background: #75532e; }
.bell-banner.bell-success { background: #3e6845; border-color: #bfe889; }
.input-mode-chip {
  position: absolute;
  z-index: 72;
  left: 14px;
  bottom: 12px;
  max-width: calc(100% - 28px);
  padding: .34rem .58rem;
  color: #f8e7bd;
  background: rgba(31, 25, 36, .84);
  border: 1px solid rgba(242, 198, 90, .65);
  border-radius: 7px;
  font-size: .58rem;
  font-weight: 900;
  letter-spacing: .07em;
  pointer-events: none;
}
.castle-stage.danger-pulse::after {
  content: "";
  position: absolute;
  z-index: 70;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 7px rgba(236, 87, 73, .56), inset 0 0 80px rgba(236, 87, 73, .24);
  animation: castle-danger-pulse .65s ease-out 2;
}
@keyframes castle-danger-pulse {
  0% { opacity: .15; }
  45% { opacity: 1; }
  100% { opacity: .22; }
}
.sound-button[aria-pressed="false"] { opacity: .72; text-decoration: line-through; }
body[data-input-mode="gamepad"] .room-navigator button:focus-visible,
body[data-input-mode="gamepad"] .staff-card:focus-visible,
body[data-input-mode="gamepad"] .job-button:focus-visible { outline-color: #f2c65a; }
@media (prefers-reduced-motion: reduce) {
  .bell-banner, .room-navigator button i { transition: none; }
  .castle-stage.danger-pulse::after { animation: none; opacity: .65; }
}
@media (orientation: landscape) and (max-height: 520px) {
  .room-navigator { margin-bottom: .35rem; }
  .room-navigator button { min-width: 46px; grid-template-columns: 18px 1fr; padding: .26rem .3rem; }
  .room-navigator button > span { width: 18px; height: 18px; }
  .coach-strip { margin: .3rem 0 !important; padding: .38rem .5rem; font-size: .64rem !important; }
  .input-mode-chip { left: 8px; bottom: 7px; font-size: .52rem; }
  .bell-banner { top: 7px; font-size: .68rem; padding-top: .45rem; padding-bottom: .45rem; }
}
@media (max-width: 650px) {
  .input-mode-chip { display: none; }
  .bell-banner { border-radius: 12px; }
}