/* Lock styling for the offline web build. Web-only: never copied into WebPreview/, so the apps are untouched.
   Logical properties throughout, because the payload runs right-to-left in Arabic and Urdu. */
/* NEVER set `position` or a bare `transform` here. .board-mode is `position: absolute` with
   `transform: translate(-50%, -50%)`, and the tiles are placed by left/top percentages — so `position:
   relative` un-anchors them and a bare `transform: scale()` REPLACES the centring translate. Both were done
   in the first version of this file and the Friends tile jumped out of its quadrant into the middle of the
   board. Any transform here must repeat the translate. */
.board-mode-locked {
  cursor: pointer;
  filter: saturate(.55);
  opacity: .82;
  transition: opacity .18s ease, filter .18s ease;
}
.board-mode-locked:hover,
.board-mode-locked:focus-visible {
  opacity: 1;
  filter: saturate(.8);
}
/* The lock is legible before the tap; the tap only explains what the lock already implied. */
.board-mode-locked .bm-status.bm-locked {
  color: #6d5300;
  background: rgba(244, 205, 102, .28);
  border-radius: 999px;
  padding-inline: 8px;
  padding-block: 1px;
  font-style: normal;
  font-weight: 700;
}
.board-mode-locked-open {
  opacity: 1;
  filter: none;
}
.board-mode-locked-open .bm-name {
  font-size: .92em;
  line-height: 1.15;
  text-wrap: balance;
}
.board-mode-locked-open .bm-status.bm-locked {
  background: rgba(244, 205, 102, .5);
  text-wrap: balance;
}
@media (prefers-reduced-motion: reduce) {
  .board-mode-locked { transition: none; }
}