/* M4-P2 utility screens (local; pending Codex review): join QR dialog and the
   phone reveal board. Saved-game/recovery controls already use the lobby, access
   and host-game materials; only one spacing fix is added for them here.
   The QR image is never decorated, rounded, stretched or overlapped: its dark
   inset matches the QR service background (#ffffff) and its padding is the quiet
   zone (at least 4 modules at every width). */

/* ===== Join QR dialog ===== */
/* Scrolls when taller than the screen; the top and Close stay reachable on phones. */
#qrModal { align-items: flex-start; overflow-y: auto; overscroll-behavior: contain; padding: 12px; background: rgba(4, 12, 28, .88); }
#qrModal .qrModalContent {
  margin: auto;
  width: 100%;
  max-width: 440px;
  border: 10px solid #d9a441;
  border-image: url('ui-kit-navy-panel.webp') 72 fill / 30px stretch;
  background: #17418f padding-box;
  border-radius: 20px;
  box-shadow: 0 5px 0 #6b4712, 0 16px 30px #07182d66;
  padding: 22px 20px;
  color: #fff7e5;
}
#qrModal .qrModalContent h2 { color: #ffe39b; text-shadow: 0 2px #0a1f4d; margin: 0 48px 18px; overflow-wrap: anywhere; }
#qrModal .qrCloseBtn {
  top: 10px; right: 10px;
  width: 44px; height: 44px; min-width: 44px; padding: 0;
  border: 3px solid transparent !important;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #4f86d8, #17418f 60%, #0b2a6b) padding-box,
              linear-gradient(145deg, #fff2bb, #eac262 27%, #9c631b 58%, #f9d875 79%, #b17b2f) border-box !important;
  color: #fff7e5 !important;
  box-shadow: 0 3px 0 #6b4712, 0 6px 10px #07182d4d !important;
  font-size: 18px;
}
#qrModal .qrCodeContainer {
  aspect-ratio: 1 / 1;
  min-height: 0;
  width: 100%;
  max-width: 360px;
  margin: 0 auto 18px;
  padding: 11%;
  background: #ffffff;
  border: 2px solid #e3b95a;
  border-radius: 16px;
  box-sizing: border-box;
}
#qrModal .qrCodeImg { width: 100%; max-width: 280px; height: auto; aspect-ratio: 1 / 1; border-radius: 0; }
#qrModal .qrLoading { color: #173153; text-align: center; overflow-wrap: anywhere; }
#qrModal .qrDivider { margin: 16px 0; }
#qrModal .qrDivider::before, #qrModal .qrDivider::after { background: linear-gradient(90deg, transparent, #eac262); }
#qrModal .qrDivider::after { background: linear-gradient(90deg, #eac262, transparent); }
#qrModal .qrDivider span, #qrModal .qrLabel { color: #f5dc9a; }
#qrModal .qrRoomCode {
  display: inline-block;
  min-width: min(100%, 260px);
  padding: 4px 16px 4px calc(16px + .15em);
  border: 4px solid transparent;
  border-radius: 16px;
  background: linear-gradient(170deg, #fffdf4, #f4e7cc) padding-box,
              linear-gradient(145deg, #fff2bb, #eac262 27%, #9c631b 58%, #f9d875 79%, #b17b2f) border-box;
  color: #172a4f;
  font-size: clamp(32px, 10vw, 46px);
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 3px 6px #7a5a2a33, 0 3px 0 #8a5a14;
  box-sizing: border-box;
}
#qrModal .qrCopyBtn {
  border: 4px solid #c08a2a !important;
  border-image: url('ui-kit-gold-button.webp') 56 76 fill / 22px 30px stretch !important;
  background: #f8cf4f padding-box !important;
  color: #172a4f !important;
  border-radius: 999px;
  box-shadow: 0 4px 0 #8a5a14, 0 9px 16px #07182d4d !important;
  min-height: 48px;
  padding: 10px 26px;
  font-weight: 800;
}
#qrModal .qrInstructions { background: #0b265c8c; border: 1px solid #e3b95a73; border-radius: 14px; }
#qrModal .qrInstructions p, #qrModal .qrInstructions ol { color: #e5ecf5; }
#qrModal button:focus:not(:focus-visible) { outline: none; }
#qrModal button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#qrModal button:hover { filter: brightness(1.07); }
#qrModal button:active { transform: translateY(2px); }

/* ===== Saved-game controls =====
   The buttons already use the lobby/host-game materials. Only spacing: the host
   game-record message sat inside the Download button's ledge shadow. */
#screenHostGame #gameRecordStatus { margin-top: 12px; }

/* ===== Reveal board (players' phones; host-triggered) =====
   Display cells, not buttons: cream = not called, navy with gold ring = called,
   the same meaning as the host board, TV board and marked phone cells. */
#revealModal .revealContent { max-width: 640px; width: calc(100vw - 24px); }
#revealModal .revealStats { flex-wrap: wrap; gap: 8px 20px; }
#revealModal .statCalled { color: #ffe39b; }
#revealModal .statUncalled { color: #dbe5f7; }
#revealModal .revealBoardGrid {
  grid-template-columns: repeat(15, minmax(0, 1fr));
  gap: 4px;
  padding: 10px;
  background: #0b265c;
  border: 1px solid #e3b95a;
  border-radius: 12px;
}
#revealModal .revealCell {
  aspect-ratio: auto;
  min-height: 30px;
  min-width: 0;
  background: #fff6de;
  color: #172a4f;
  border: 1px solid #bd9142;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
#revealModal .revealCell.called { background: linear-gradient(#2f60b2, #123a82); color: #fff; border-color: #123a82; box-shadow: inset 0 0 0 2px #ffe39b; }
#revealModal .revealLegend { color: #e5ecf5; flex-wrap: wrap; gap: 8px 20px; }
#revealModal .legendDot { background: #fff6de; border: 1px solid #bd9142; }
#revealModal .legendDot.called { background: linear-gradient(#2f60b2, #123a82); border-color: #123a82; box-shadow: inset 0 0 0 2px #ffe39b; }
#revealModal .gameModalTitle { color: #ffe39b; text-shadow: 0 2px #0a1f4d; }
#revealModal .legendDot { width: 18px; height: 18px; border-radius: 5px; }
#revealModal .revealLetters { display: none; }
#revealModal .gameModalBtn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Phones: the classic B-I-N-G-O layout (five columns of fifteen) with readable
   numerals, scrolling inside the dialog instead of spilling sideways. */
@media (max-width: 560px) {
  #revealModal .revealLetters {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 0 11px 4px;
    color: #ffe39b;
    font-weight: 900;
    text-align: center;
  }
  #revealModal .revealBoardGrid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-template-rows: repeat(15, auto);
    grid-auto-flow: column;
  }
  #revealModal .revealCell { min-height: 34px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #qrModal, #qrModal *, #revealModal, #revealModal * { animation: none !important; transition: none !important; }
}

/* ===== Called-ball chips and the called-ball animation (integrated audit, Sep 24) =====
   Ball colours and letter ranges are unchanged. White numbers on the light green and
   light blue balls measured 2.2-3.7:1 on host history chips, phone balls and TV
   "last 3" chips: green now uses dark ink like the white and gold balls; blue and red
   keep white ink on a slightly deeper shade of the same colour. */
:is(#screenHostGame .chip, #playerContainer .smallBallCircle, #playerContainer .bigBallCircle, #screenTVDisplay .tvLastChip).ball-green { color: #0f2a1a; text-shadow: 0 1px 0 #ffffff66; }
:is(#screenHostGame .chip, #playerContainer .smallBallCircle, #playerContainer .bigBallCircle, #screenTVDisplay .tvLastChip).ball-blue { background: radial-gradient(circle at 30% 30%, #3a7ed4, #1459ad 45%, #0a3570 100%); color: #fff; }
:is(#screenHostGame .chip, #playerContainer .smallBallCircle, #playerContainer .bigBallCircle, #screenTVDisplay .tvLastChip).ball-red { background: radial-gradient(circle at 30% 30%, #cf4a54, #a91f2a 45%, #680c14 100%); color: #fff; }
/* The big called-ball animation had white numbers on a white-centred ball (1.3-2.0:1 on
   light balls). Navy numbers with a light halo read on every ball colour and theme. */
.ball-slide-ball :is(.ball-slide-letter, .ball-slide-number) { color: #172a4f; text-shadow: 0 1px 0 #ffffffb3, 0 0 10px #ffffff8c; }
/* M4-P5: the called ball's letter and number keep one plain display face in every theme (a
   seasonal display font such as Halloween's Nosifer never reaches the numerals). */
.ball-slide-ball :is(.ball-slide-letter, .ball-slide-number) { font-family: 'Bebas Neue', 'Impact', sans-serif; }

/* Round icon-only buttons (host and phone sound toggles, QR close) use the approved
   ui-kit round navy/gold button art (7 KB derivative). The CSS navy disc and gold rail
   underneath stay as the fallback if the image does not load. */
:is(#screenHostGame .soundToggle, #playerContainer .playerSoundToggle, #qrModal .qrCloseBtn) {
  background: url('ui-kit-round-button.webp') center / 100% 100% no-repeat border-box,
              radial-gradient(circle at 35% 30%, #4f86d8, #17418f 60%, #0b2a6b) padding-box,
              linear-gradient(145deg, #fff2bb, #eac262 27%, #9c631b 58%, #f9d875 79%, #b17b2f) border-box !important;
  color: #fff7e5 !important;
}