/* 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.7);
  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;
  /* Dock directly on top of the bottom-nav as one solid bottom cluster. */
  bottom: calc(90px + env(safe-area-inset-bottom));
  z-index: 99;
  padding: 10px 12px;
  /* SOLID toolbar panel (2026-06-04): the bar was transparent with only the
     button drawn, so the actions-grid behind it peeked around NEXT BALL/Undo
     and the whole bottom read as broken. A solid full-bleed panel with a top
     divider makes it a clean docked toolbar and cleanly hides content behind
     it; the page padding below lets that content scroll fully clear. */
  background: rgba(8, 8, 18, 0.98);
  border-top: 1px solid rgba(0, 255, 255, 0.22);
  box-shadow: 0 -10px 26px rgba(0, 0, 0, 0.6);
  pointer-events: auto; /* solid toolbar blocks taps to content behind it */
}
/* When the undo pill docks inside the bar, lay them out as one row: a
   compact undo control on the left and the main action filling the rest. */
.mh-polish .mh-primary-bar--with-undo {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.mh-polish .mh-primary-bar--with-undo .mh-primary-action {
  flex: 1 1 auto;
}
.mh-polish .mh-primary-bar--with-undo .mh-undo-pill {
  position: static;
  inset: auto;
  z-index: auto;
  flex: 0 0 auto;
  align-self: stretch;
  pointer-events: auto;
  border-radius: 14px;
  padding: 8px 18px;
  /* A clear, solid secondary control beside NEXT BALL (was a faded translucent
     pill that vanished over the bright grid tile behind it). */
  min-width: 96px;
  justify-content: center;
  background: #2b2b42;
  color: #f2f2ff;
  border: 1.5px solid rgba(0, 255, 255, 0.5);
  font-size: 0.92rem;
}
.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 {
  /* a11y (deep audit): the old black-on-#444 at 0.45 opacity was 2.16:1 (AA
     critical fail) for the disabled label e.g. "START ROUND". Use light text on
     a muted slab and drop the contrast-crushing opacity - still reads disabled. */
  opacity: 1;
  color: #cfcfcf;
  background: #3a3a44;
  box-shadow: none;
  cursor: not-allowed;
}
/* Setup prompt (e.g. "GENERATE CARDS FIRST"): a calm amber call-to-action
   rather than the loud green "GO" slab, so it reads as a step to complete
   rather than a ready-to-fire control. Single line keeps the bar compact. */
.mh-polish .mh-primary-action--setup {
  background: linear-gradient(135deg, rgba(255, 200, 64, 0.18), rgba(255, 158, 0, 0.13));
  color: #ffd24d;
  border: 1.5px solid rgba(255, 200, 64, 0.55);
  font-size: 0.82rem;
  letter-spacing: 0.3px;
  line-height: 1.12;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.4),
    0 0 16px rgba(255, 200, 64, 0.18);
  animation: mh-setup-glow 2.4s ease-in-out infinite;
}
.mh-polish .mh-primary-action--setup::before {
  content: '🎴';
  margin-right: 8px;
  font-size: 1.05rem;
}
@keyframes mh-setup-glow {
  0%,
  100% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.4),
      0 0 16px rgba(255, 200, 64, 0.18);
  }
  50% {
    box-shadow:
      0 6px 18px rgba(0, 0, 0, 0.4),
      0 0 24px rgba(255, 200, 64, 0.34);
  }
}
/* Give the page enough padding so all content can scroll fully clear of the
   solid bottom cluster: bottom-nav (~90px) + the docked NEXT BALL/Undo toolbar
   (~88px). */
.mh-polish body {
  padding-bottom: calc(190px + 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 {
  /* Legible "nothing to undo yet" state - the old 0.4 opacity disappeared over
     the bright grid tile behind it (a11y + the reported "can't see Undo"). */
  opacity: 1;
  color: #8a8a9c;
  background: #20202c;
  border-color: rgba(255, 255, 255, 0.12);
  cursor: not-allowed;
}
.mh-polish .mh-undo-pill:disabled .mh-undo-icon {
  color: #8a8a9c;
}

/* ── 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,
  .mh-polish .mh-primary-action--setup {
    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);
  }
}