/* ===== Mobile layout (consumed by MobileGameView / MobilePlayerSetup) ===== */

/* ---- In-game ---- */
.mob-game {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 8px) calc(env(safe-area-inset-right) + 10px)
           calc(env(safe-area-inset-bottom) + 8px) calc(env(safe-area-inset-left) + 10px);
  gap: 8px; min-height: 0;
}

.mob-scoreboard {
  flex: none; display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 7px 10px; border-radius: 14px; cursor: pointer;
  border: 1.5px solid rgba(255,255,255,.14);
  background: linear-gradient(90deg, rgba(34,211,238,.14), rgba(255,45,111,.14));
  color: #fff; font-family: 'Nunito', system-ui, sans-serif;
}
.mob-scoreboard:active { filter: brightness(1.15); }
.mob-sb-side { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 0; opacity: .55; transition: opacity .2s; }
.mob-sb-side.right { justify-content: flex-end; }
.mob-sb-side.on { opacity: 1; }
.mob-sb-ava { width: 34px; height: 34px; flex: none; }
.mob-sb-meta { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.mob-sb-meta.right { align-items: flex-end; }
.mob-sb-name { font-weight: 800; font-size: 13px; max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mob-sb-score { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 20px; color: #fff; }
.mob-sb-mid { flex: none; text-align: center; font-size: 10px; font-weight: 900; color: #ffd23f; letter-spacing: .5px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.mob-sb-grip { color: rgba(255,255,255,.4); font-size: 11px; }

.mob-board-area { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
/* Board keeps a fixed 7:6 ratio (deterministic height) so the flex:1 cells fill exactly and never
   overflow; width/height both fit the available area; max-height is the safety net. */
.mob-board-area > * {
  width: min(100%, calc((100dvh - 200px) * 7 / 6));
  max-width: 100%;
  aspect-ratio: 7 / 6;
  max-height: 100%;
}

.mob-narrator { flex: none; display: flex; justify-content: center; }
.mob-narrator > * { margin-top: 0 !important; }
.mob-narrator :where(span) { white-space: normal !important; }

/* ---- Action sheet ---- */
.mob-scrim { position: absolute; inset: 0; z-index: 40; background: rgba(4,3,10,.5); animation: pop .15s ease; }
.mob-sheet {
  position: absolute; z-index: 41; left: 10px; right: 10px;
  bottom: calc(env(safe-area-inset-bottom) + 10px);
  background: #161031; border: 1px solid rgba(255,255,255,.2); border-radius: 16px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px;
  box-shadow: 0 -12px 30px rgba(0,0,0,.6); animation: slideUp .25s ease;
}
.mob-sheet-grip { width: 38px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); margin: 0 auto 4px; }
.mob-sheet-item { cursor: pointer; text-align: left; font-weight: 800; font-size: 16px; color: #fff;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 11px; padding: 13px 14px; }
.mob-sheet-item:disabled { opacity: .4; }
.mob-sheet-item.cancel { text-align: center; color: rgba(255,255,255,.6); background: transparent; border-color: transparent; }

/* ---- Mobile setup ---- */
.mob-setup { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column;
  padding: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-right) + 12px)
           calc(env(safe-area-inset-bottom) + 10px) calc(env(safe-area-inset-left) + 12px);
  gap: 10px; min-height: 0; animation: slideUp .4s ease; }
.mob-setup-head { flex: none; display: flex; align-items: center; justify-content: space-between; }
.mob-setup-title { font-weight: 700; font-size: 20px; }
.mob-tabs { flex: none; display: flex; gap: 8px; }
.mob-tab { flex: 1; cursor: pointer; font-weight: 900; font-size: 13px; padding: 9px; border-radius: 11px;
  background: rgba(255,255,255,.05); border: 1.5px solid rgba(255,255,255,.12); color: rgba(255,255,255,.55); }
.mob-tab.on { background: rgba(34,211,238,.18); border-color: #22d3ee; color: #bdf3fb; }
.mob-setup-body { flex: 1; min-height: 0; overflow: auto; display: flex; justify-content: center; }
.mob-setup-body > * { width: 100%; max-width: 460px; }
.mob-setup-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.mob-warn { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  background: rgba(255,45,111,.16); border: 1.5px solid #ff2d6f; color: #ffd0de; font-weight: 800; font-size: 13px; }
.mob-play { cursor: pointer; width: 100%; max-width: 460px; padding: 15px; border-radius: 999px; border: none;
  background: linear-gradient(180deg,#ffd23f,#f5a700); box-shadow: 0 6px 0 #c98800; color: #1a1030;
  font-weight: 700; font-size: 24px; letter-spacing: 1px; }
.mob-play:disabled { background: rgba(255,255,255,.12); box-shadow: none; color: rgba(255,255,255,.5); opacity: .6; }

.mob-cpu-box { flex: none; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 460px;
  padding: 8px 12px; border-radius: 14px;
  background: rgba(255,210,63,.12); border: 1.5px solid rgba(255,210,63,.5); }
.mob-cpu-row { display: flex; align-items: center; gap: 10px; }
.mob-cpu-box-label { flex: none; font-weight: 900; font-size: 12px; color: #ffd23f; letter-spacing: .5px; }
.mob-cpu-box .cpu-level-sel { flex: 1; margin-top: 0; }
.mob-cpu-box .starter-toggle { margin-top: 0; }

/* ---- Simple screens / modals on small viewports ---- */
@media (max-width: 767px), (orientation: landscape) and (max-height: 480px) {
  .modal-card { max-width: 92vw !important; max-height: 88dvh !important; overflow: auto !important; }
}