/* Copyright (c) 2025-2026 Let's Automate. All rights reserved.
   Unauthorized copying, modification, or distribution is strictly prohibited. */

/* ================================================================
   MOBILE HOST POLISH
   All rules below are scoped under `.mh-polish` so flag-off pages
   render identically to the legacy layout.
   ================================================================ */

/* ── Cast-to-TV header button ────────────────────────────────── */
.mh-polish .mh-cast-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 6px 12px;
  background: rgba(0, 255, 255, 0.12);
  border: 1.5px solid rgba(0, 255, 255, 0.35);
  border-radius: 10px;
  color: var(--neon-cyan);
  font-family: 'Orbitron', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  text-transform: uppercase;
  transition:
    background 0.15s,
    transform 0.1s;
}
.mh-polish .mh-cast-btn:active {
  transform: scale(0.94);
  background: rgba(0, 255, 255, 0.22);
}
.mh-polish .mh-cast-btn:hover {
  background: rgba(0, 255, 255, 0.18);
}
.mh-polish .mh-cast-btn .mh-cast-label {
  display: inline;
}
@media (max-width: 360px) {
  /* On the narrowest phones, hide the label - icon only. */
  .mh-polish .mh-cast-btn .mh-cast-label {
    display: none;
  }
}

/* ── Cast modal ─────────────────────────────────────────────── */
.mh-cast-modal {
  position: fixed;
  inset: 0;
  z-index: 10001;
  background: rgba(10, 10, 18, 0.88);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: mh-cast-fade 0.18s ease-out;
}
@keyframes mh-cast-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.mh-cast-card {
  position: relative;
  background: var(--panel-bg, rgba(15, 15, 30, 0.98));
  border: 2px solid rgba(0, 255, 255, 0.35);
  border-radius: 18px;
  padding: 22px 20px 20px;
  max-width: 380px;
  width: 100%;
  text-align: center;
  box-shadow: 0 10px 60px rgba(0, 255, 255, 0.18);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.mh-cast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.55);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
}
.mh-cast-close:active {
  color: var(--neon-cyan);
}
.mh-cast-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  font-weight: 900;
  color: var(--neon-cyan);
  text-shadow: 0 0 12px rgba(0, 255, 255, 0.35);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.mh-cast-sub {
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.82rem;
  line-height: 1.4;
  margin-bottom: 10px;
}
.mh-cast-code {
  font-family: 'Orbitron', sans-serif;
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--neon-green, #00ff88);
  letter-spacing: 8px;
  padding: 10px 4px;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 12px;
  border: 1px solid rgba(0, 255, 136, 0.25);
  margin-bottom: 12px;
}
.mh-cast-qr-wrap {
  display: flex;
  justify-content: center;
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
  margin-bottom: 12px;
}
.mh-cast-qr-wrap #mh-cast-qr {
  min-width: 180px;
  min-height: 180px;
}
.mh-cast-qr-wrap #mh-cast-qr img {
  display: block;
}
.mh-cast-actions {
  display: flex;
  gap: 8px;
  margin: 10px 0 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.mh-cast-actions button {
  flex: 1 1 auto;
  min-height: 44px;
  padding: 10px 14px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 0.5px;
  min-width: 100px;
}
.mh-cast-btn-primary {
  background: linear-gradient(135deg, var(--neon-cyan), #0088ff);
  color: #0a0a12;
  border: none;
}
.mh-cast-btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}
.mh-cast-btn-primary:active,
.mh-cast-btn-secondary:active {
  transform: scale(0.96);
}
.mh-cast-hint {
  color: rgba(255, 255, 255, 0.4);
  font-size: 0.75rem;
  line-height: 1.4;
  margin-top: 6px;
}

/* ── Sticky state banner ─────────────────────────────────────── */
.mh-polish .mh-state-banner {
  position: sticky;
  top: 0;
  z-index: 95; /* Just below the header z-100 */
  background: rgba(10, 10, 18, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(0, 255, 255, 0.15);
  padding: 8px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 56px;
}
.mh-polish .mh-state-primary {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.mh-polish .mh-state-label {
  font-family: 'Orbitron', sans-serif;
  font-size: 0.58rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.mh-polish .mh-state-value {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.55rem;
  font-weight: 900;
  color: #fff;
  text-shadow: 0 0 10px rgba(0, 255, 255, 0.3);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mh-polish .mh-state-meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: right;
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'Rajdhani', sans-serif;
}
.mh-polish .mh-state-meta span {
  white-space: nowrap;
}
.mh-polish .mh-state-meta span:empty {
  display: none;
}

/* ── Per-game: trim legacy primary surfaces when polish is on ── */
/* Bingo - the large green "NEXT BALL!" button in main content.
   The sticky primary bar replaces it. */
.mh-polish .next-ball-btn {
  display: none !important;
}
/* Music Bingo - the big next-song button. */
.mh-polish .big-btn.next-song {
  display: none !important;
}
/* Slim the big "Current Ball" panel on Bingo: the sticky top banner
   now shows the primary number, so we don't need a second giant copy. */
.mh-polish .current-ball-section {
  padding: 12px;
  margin-bottom: 12px;
}
.mh-polish .current-ball-section .current-ball {
  font-size: 3.4rem;
}
.mh-polish .current-ball-section .current-label {
  display: none;
}

/* Quiz - the primary REVEAL / NEXT buttons are now covered by the sticky
   primary bar. Hide them from the primary action row to prevent two sets
   of primary controls competing for the host's attention. The secondary
   row (Scores, Poll) stays, repositioned above the polish primary bar. */
.mh-polish-quiz #action-bar .action-btn.btn-reveal,
.mh-polish-quiz #action-bar .action-btn.btn-next,
.mh-polish-quiz #action-bar .action-btn.btn-round-preview {
  display: none !important;
}
.mh-polish-quiz #action-bar .action-row.row-primary {
  display: none !important;
}
/* Float the remaining action-bar (row-secondary with Scores + Poll) above
   the polish primary bar so they stack cleanly. */
.mh-polish-quiz #action-bar {
  bottom: calc(180px + env(safe-area-inset-bottom)) !important;
}
/* Quiz needs extra bottom padding so main content clears action-bar + primary */
.mh-polish-quiz {
  padding-bottom: calc(240px + env(safe-area-inset-bottom)) !important;
}
/* Lift the undo pill above the Quiz action-bar */
.mh-polish-quiz .mh-undo-pill {
  bottom: calc(244px + env(safe-area-inset-bottom));
}

/* ── Sticky primary-action bar ───────────────────────────────── */
.mh-polish .mh-primary-bar {
  position: fixed;
  left: 0;
  right: 0;
  /* Sits just above the bottom-nav (90px tall with safe-area) */
  bottom: calc(94px + env(safe-area-inset-bottom));
  z-index: 99;
  padding: 0 14px;
  pointer-events: none; /* only the button receives clicks */
}
.mh-polish .mh-primary-action {
  pointer-events: auto;
  width: 100%;
  min-height: 64px;
  padding: 18px 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1px;
  color: #000;
  background: linear-gradient(135deg, var(--neon-green, #00ff88), #00cc66);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  box-shadow:
    0 8px 24px rgba(0, 255, 136, 0.35),
    0 2px 6px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.12s,
    box-shadow 0.12s;
}
.mh-polish .mh-primary-action:active {
  transform: scale(0.97);
  box-shadow: 0 4px 12px rgba(0, 255, 136, 0.25);
}
.mh-polish .mh-primary-action:disabled {
  opacity: 0.45;
  background: #444;
  box-shadow: none;
  cursor: not-allowed;
}
/* Give the page enough padding so the main content doesn't hide
   underneath the primary action bar. Bottom nav already pads 90px;
   we need another 72pt for the action bar. */
.mh-polish body {
  padding-bottom: calc(170px + env(safe-area-inset-bottom));
}

/* ── Undo pill ───────────────────────────────────────────────── */
.mh-polish .mh-undo-pill {
  position: fixed;
  left: 12px;
  /* Float above the primary-action bar */
  bottom: calc(170px + env(safe-area-inset-bottom));
  z-index: 98;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background: rgba(30, 30, 50, 0.88);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 22px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition:
    transform 0.1s,
    background 0.15s;
}
.mh-polish .mh-undo-pill .mh-undo-icon {
  font-size: 1rem;
  color: var(--neon-cyan);
}
.mh-polish .mh-undo-pill:active {
  transform: scale(0.93);
  background: rgba(0, 255, 255, 0.18);
}
.mh-polish .mh-undo-pill:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ── Richer connection indicator ─────────────────────────────── */
.mh-polish .mh-conn-dot.mh-conn-realtime {
  background: var(--neon-green, #00ff88);
  box-shadow: 0 0 10px var(--neon-green, #00ff88);
  animation: none;
}
.mh-polish .mh-conn-dot.mh-conn-polling {
  background: #ffa500;
  box-shadow: 0 0 10px #ffa500;
  animation: mh-conn-pulse 1.4s ease-in-out infinite;
}
.mh-polish .mh-conn-dot.mh-conn-offline {
  background: #ff4444;
  box-shadow: 0 0 10px #ff4444;
  animation: mh-conn-pulse 0.8s ease-in-out infinite;
}
@keyframes mh-conn-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.4;
  }
}

/* ── Two-tap exit confirmation visual ────────────────────────── */
.mh-polish .bottom-nav-btn.mh-armed {
  background: rgba(255, 102, 0, 0.3) !important;
  border-color: #ff6600 !important;
  color: #ffb066 !important;
  animation: mh-armed-pulse 0.8s ease-in-out infinite;
}
.mh-polish .bottom-nav-btn.mh-armed .mh-confirm-label {
  font-size: 0.62rem;
  margin-left: 4px;
  opacity: 0.85;
}
@keyframes mh-armed-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ── Landscape layout ───────────────────────────────────────── */
@media (orientation: landscape) and (max-height: 500px) {
  .mh-polish .main-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px;
  }
  /* Any child that is just the primary call-to-action, recent-list, or
     setup toggles stays in the right column by default. The per-game
     overrides below refine this for each game. */
  .mh-polish .mh-state-banner {
    padding: 6px 14px;
    min-height: 48px;
  }
  .mh-polish .mh-state-value {
    font-size: 1.3rem;
  }
  .mh-polish .mh-primary-bar {
    padding: 0 14px;
    bottom: calc(82px + env(safe-area-inset-bottom));
  }
  .mh-polish .mh-primary-action {
    min-height: 56px;
    font-size: 1rem;
  }
  .mh-polish .mh-undo-pill {
    bottom: calc(146px + env(safe-area-inset-bottom));
  }
}

/* ── Respect reduced-motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .mh-polish .mh-conn-dot,
  .mh-polish .bottom-nav-btn.mh-armed {
    animation: none !important;
  }
  .mh-cast-modal {
    animation: none;
  }
}

/* ── Accessibility: visible focus on polish additions ────────── */
.mh-polish .mh-cast-btn:focus-visible,
.mh-polish .mh-primary-action:focus-visible,
.mh-polish .mh-undo-pill:focus-visible,
.mh-cast-card button:focus-visible {
  outline: 3px solid var(--neon-cyan);
  outline-offset: 2px;
}

/* ── Battery warning banner ─────────────────────────────────── */
.mh-polish .mh-battery-banner {
  position: fixed;
  left: 12px;
  right: 12px;
  top: calc(env(safe-area-inset-top) + 68px);
  z-index: 9500;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(255, 170, 0, 0.22), rgba(255, 90, 0, 0.18));
  border: 1px solid rgba(255, 170, 0, 0.55);
  border-radius: 12px;
  color: #ffe1a8;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.9rem;
  line-height: 1.3;
  box-shadow: 0 6px 18px rgba(255, 120, 0, 0.25);
  animation: mh-banner-slide 0.32s ease-out;
}
.mh-polish .mh-battery-banner .mh-battery-icon {
  font-size: 1.1rem;
}
.mh-polish .mh-battery-banner .mh-battery-pct {
  font-weight: 700;
  color: #fff;
}
.mh-polish .mh-battery-dismiss {
  margin-left: auto;
  width: 32px;
  height: 32px;
  min-width: 32px;
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
@keyframes mh-banner-slide {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Error toast ─────────────────────────────────────────────── */
.mh-error-toast {
  position: fixed;
  left: 50%;
  bottom: calc(200px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 10002;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  background: rgba(255, 50, 50, 0.92);
  color: #fff;
  border-radius: 12px;
  font-family: 'Rajdhani', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(255, 50, 50, 0.4);
  animation: mh-banner-slide 0.25s ease-out;
  cursor: pointer;
  max-width: calc(100vw - 32px);
}

/* ── Reconnected toast ────────────────────────────────────────── */
.mh-reconnect-toast {
  position: fixed;
  left: 50%;
  top: calc(env(safe-area-inset-top) + 72px);
  transform: translateX(-50%);
  z-index: 10000;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: rgba(0, 255, 136, 0.9);
  color: #001a0d;
  border-radius: 20px;
  font-family: 'Orbitron', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  box-shadow: 0 6px 18px rgba(0, 255, 136, 0.4);
  animation:
    mh-reconnect-pop 0.32s ease-out,
    mh-reconnect-fade 0.4s ease-in 1.8s both;
}
.mh-reconnect-toast .mh-reconnect-icon {
  font-size: 0.9rem;
  font-weight: 900;
}
@keyframes mh-reconnect-pop {
  from {
    transform: translate(-50%, -10px);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}
@keyframes mh-reconnect-fade {
  to {
    opacity: 0;
    transform: translate(-50%, -8px);
  }
}