/* Welcome + menu screens. Sizes use container units (cqw/cqh) so the admin preview
   matches the TV exactly at any size. */
.mb-screen { position: absolute; inset: 0; overflow: hidden; container-type: size; }
.mb-bg { position: absolute; inset: 0; }
.mb-bg-img { position: absolute; inset: 0; background-size: cover; }
.mb-bg-map { position: absolute; left: -4%; top: -4%; width: 108%; height: 108%; }
.mb-bg-shade { position: absolute; inset: 0; }

.mb-title { position: absolute; left: 0; right: 0; transform: translateY(-50%); text-align: center; color: var(--c-title, #fff);
  text-shadow: 0 2px 14px rgba(0,0,0,.55); font-family: Montserrat, "Segoe UI", Arial, sans-serif; z-index: 2; }
.mb-title .l1 { font-weight: 600; font-size: calc(7.6cqw * var(--s, 1)); letter-spacing: .06em; line-height: 1; }
.mb-title .l2 { font-weight: 500; font-size: calc(2.4cqw * var(--s, 1)); letter-spacing: .42em; padding-left: .42em; margin-top: .2em; }
.mb-hint { position: absolute; left: 0; right: 0; text-align: center; color: var(--c-title, #fff); opacity: .8; font-size: 1.4cqw; z-index: 2;
  animation: mb-breathe 3.2s ease-in-out infinite; }
@keyframes mb-breathe { 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .mb-hint { animation: none } }

.mb-tiles { z-index: 2; }
.mb-tiles.auto { position: absolute; left: 0; right: 0; top: var(--row-y, 64%); transform: translateY(-50%);
  display: flex; justify-content: center; gap: 2.2cqw; flex-wrap: wrap; }
.mb-tiles.custom { position: absolute; inset: 0; pointer-events: none; }
.mb-tiles.custom .mb-tile { position: absolute; transform: translate(-50%, -50%); pointer-events: auto; }
.mb-tile { width: calc(var(--w) * 1cqw); aspect-ratio: 1 / 1.05; background: var(--tile-bg); color: var(--tile-ink);
  border: 0; border-radius: var(--tile-radius, 10px); display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--w) * .05cqw); box-shadow: 0 1cqw 3cqw rgba(0,0,0,.4); cursor: pointer; font: inherit; padding: 0 calc(var(--w) * .05cqw); transition: transform .1s; }
.mb-tile:active { transform: scale(.97); }
.mb-tiles.custom .mb-tile:active { transform: translate(-50%, -50%) scale(.97); }
.mb-tile svg { width: 34%; height: auto; opacity: .85; }
.mb-tile span { font-family: Montserrat, "Segoe UI", Arial, sans-serif; font-weight: 600; font-size: calc(var(--w) * .095cqw * var(--fs, 1)); letter-spacing: .03em; text-align: center; line-height: 1.15; }
/* No icons: the button hugs its label */
.mb-tile.text-only { width: auto; aspect-ratio: auto; white-space: nowrap; font-size: calc(1.7cqw * var(--fs, 1));
  padding: calc(.7em * var(--pad, 1)) calc(1.6em * var(--pad, 1)); }
.mb-tile.text-only span { font-size: 1em; }

/* Phones / portrait screens: stack the tiles no matter how they're arranged on the TV */
@container (orientation: portrait) {
  .mb-title { top: 18% !important; }
  .mb-title .l1 { font-size: 11cqw; }
  .mb-title .l2 { font-size: 4cqw; }
  .mb-tiles.auto, .mb-tiles.custom { position: absolute; inset: auto 0 6% 0; top: auto; transform: none; display: flex; flex-direction: column;
    align-items: center; gap: 3cqw; pointer-events: auto; }
  .mb-tiles.custom .mb-tile, .mb-tiles .mb-tile { position: static; transform: none; width: 78cqw; aspect-ratio: auto; height: 16cqh; max-height: 120px; flex-direction: row; gap: 5cqw; }
  .mb-tile svg { width: auto; height: 55%; }
  .mb-tile span { font-size: calc(5.5cqw * var(--fs, 1)); }
  .mb-tile.text-only { height: auto; font-size: calc(5.5cqw * var(--fs, 1)); padding: calc(.8em * var(--pad, 1)) 1em; white-space: normal; }
  .mb-hint { font-size: 4.5cqw; }
}