/* M4-P2 host in-game material slice, September 24.
   Same approved cropped UI art and palette as lobby-materials.css.
   Scoped to #screenHostGame; game handlers, role semantics and team colors stay intact.
   Nine-slice artwork has solid CSS fallbacks. No publication implied. */
#screenHostGame {
  --lm-panel-art: url('ui-kit-navy-panel.webp');
  --lm-gold-art: url('ui-kit-gold-button.webp');
  --lm-navy-art: url('ui-kit-navy-button.webp');
  --lm-ink: #172a4f;
  --lm-pale: #fff7e5;
  --lm-soft: #dbe5f7;
  --lm-label: #f5dc9a;
  --lm-navy: #17418f;
  --lm-rim: #d9a441;
  --lm-rail: linear-gradient(145deg, #fff2bb 0%, #eac262 27%, #9c631b 58%, #f9d875 79%, #b17b2f 100%);
  --lm-cream: linear-gradient(170deg, #fffdf4, #f4e7cc);
  --lm-ledge: #8a5a14;
  --lm-focus-dark: #ffffff;
  --lm-focus-light: #1452c4;
  --lm-panel-rim: 36px;
}

/* ===== Navy/gold panels: header, welcome banner, both lobby panels ===== */
#screenHostGame :is(header, .knightWelcome, .panel) {
  border: 12px solid var(--lm-rim);
  border-image: var(--lm-panel-art) 72 fill / var(--lm-panel-rim) stretch;
  background: var(--lm-navy) padding-box;
  border-radius: 21px;
  box-shadow: 0 5px 0 #6b4712, 0 14px 30px #0a1a3a59;
  color: var(--lm-pale);
}
#screenHostGame header { padding: 10px 14px; }
#screenHostGame .headerTitle { color: #fff3cf; }
#screenHostGame :is(.sub, .hostEmail) { color: var(--lm-soft); }
#screenHostGame .knightWelcome { padding: 10px 22px; margin: 18px 0; }
#screenHostGame .knightWelcome h1 { color: #fff3cf; text-shadow: 0 2px 0 #0a1f4d; }
#screenHostGame .knightWelcome p { color: var(--lm-soft); }
#screenHostGame .lobbyGrid { gap: 20px; align-items: start; }
#screenHostGame .panel h2 {
  position: relative;
  background: transparent;
  color: #ffe39b;
  border-bottom: 0;
  padding: 12px 14px 12px;
  font-size: 15px;
  letter-spacing: .12em;
}
#screenHostGame .panel h2::after {
  content: "";
  position: absolute; left: 8px; right: 8px; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, #eac262, transparent);
  pointer-events: none;
}
#screenHostGame .connectedCount { color: #a8f0c0; }
#screenHostGame .controls { padding: 12px 12px 14px; }

/* ===== Settings groups and fields on navy ===== */
#screenHostGame .box {
  background: #0b265c8c;
  border: 1px solid #e3b95a73;
  border-radius: 16px;
  color: var(--lm-pale);
  box-shadow: inset 0 1px 0 #ffffff14;
}
#screenHostGame .label { color: var(--lm-label); }
#screenHostGame select {
  border: 2px solid transparent;
  background: var(--lm-cream) padding-box, var(--lm-rail) border-box;
  color: var(--lm-ink);
  border-radius: 12px;
  min-height: 48px;
  box-shadow: inset 0 2px 4px #142c5526;
}
#screenHostGame .themePreview { background: #0a1f4d; border: 1px solid #e3b95a; border-radius: 12px; }

/* Cream room-code inset: live text, tabular digits. */
#screenHostGame .codeBig {
  border: 4px solid transparent;
  background: var(--lm-cream) padding-box, var(--lm-rail) border-box;
  color: var(--lm-ink);
  text-shadow: 0 1px 0 #fff;
  border-radius: 18px;
  box-shadow: inset 0 3px 6px #7a5a2a33, 0 3px 0 var(--lm-ledge), 0 8px 16px #07182d40;
  font-size: clamp(34px, 7vw, 52px);
  font-variant-numeric: tabular-nums;
  padding: 6px 0 6px .2em;
}

/* Cream status boxes (lobby status and the empty-roster notice). */
#screenHostGame .status {
  background: #fff6de;
  color: var(--lm-ink);
  border: 2px solid #e3b95a;
  border-left-width: 6px;
  border-radius: 12px;
}

/* ===== Buttons ===== */
#screenHostGame button { transition: transform .15s ease, filter .15s ease, box-shadow .15s ease; }
#screenHostGame .row > button { flex: 1 1 160px; }
#screenHostGame :is(.qrShowBtn, .tvShowBtn) { width: 100%; margin-top: 12px; }
#screenHostGame #savedRecordStatus { margin-top: 10px; }

/* Gold primary: nine-slice of the approved gold button (slice 56/76 of 494x144). */
#screenHostGame :is(button.ok, button.warn, .qrShowBtn, .tvShowBtn) {
  border: 4px solid #c08a2a !important;
  border-image: var(--lm-gold-art) 56 76 fill / 22px 30px stretch !important;
  background: #f8cf4f padding-box !important;
  color: var(--lm-ink) !important;
  text-shadow: 0 1px 0 #fff8 !important;
  border-radius: 999px;
  box-shadow: var(--lm-state-shadow, 0 4px 0 var(--lm-ledge), 0 9px 16px #07182d4d) !important;
  min-height: 48px;
  padding: 10px 26px;
}
#screenHostGame #btnStartGame {
  display: block;
  width: 100%;
  min-height: 64px;
  margin-top: 16px;
  font-size: 20px;
  letter-spacing: .08em;
  border-image-width: 29px 40px !important;
}

/* Navy secondary: nine-slice of the approved navy button. */
#screenHostGame :is(.mini:not(.danger):not(.logout), button[id="btnNewCode"]) {
  border: 4px solid #c08a2a !important;
  border-image: var(--lm-navy-art) 56 76 fill / 20px 27px stretch !important;
  background: #123c8a padding-box !important;
  color: var(--lm-pale) !important;
  border-radius: 999px;
  box-shadow: var(--lm-state-shadow, 0 3px 0 #6b4712, 0 7px 12px #07182d4d) !important;
  min-height: 44px;
  padding: 8px 20px;
}

/* Destructive: same gold rail, red face, text labels kept. */
#screenHostGame :is(button.danger, button.logout) {
  border: 3px solid transparent !important;
  background: linear-gradient(160deg, #b8424b, #7a2230) padding-box, var(--lm-rail) border-box !important;
  color: #fff !important;
  border-radius: 999px;
  box-shadow: var(--lm-state-shadow, inset 0 2px 1px #ffffff40, inset 0 -3px 2px #3a0a1266, 0 3px 0 #6b4712, 0 7px 12px #07182d4d) !important;
  min-height: 44px;
  padding: 8px 18px;
}

/* Interaction states for every lobby button family. Families read their shadow
   through --lm-state-shadow so these lower-specificity state rules can change it. */
#screenHostGame button:hover:not(:disabled):not([aria-busy="true"]) { filter: brightness(1.07) saturate(1.05); transform: translateY(-1px); }
#screenHostGame button:active:not(:disabled):not([aria-busy="true"]) {
  filter: brightness(.95);
  transform: translateY(3px);
  --lm-state-shadow: 0 1px 0 #6b4712, 0 3px 6px #07182d40;
}
#screenHostGame button:is(:disabled, [aria-busy="true"]) {
  filter: grayscale(.85) brightness(.92);
  opacity: .65;
  cursor: not-allowed;
  transform: none;
  --lm-state-shadow: none;
}
#screenHostGame button[aria-busy="true"] { cursor: progress; }


/* Host game-specific surfaces. No call/state handlers changed. */
#screenHostGame .grid { min-width:0; }
#screenHostGame .grid > * { min-width:0; }
#screenHostGame .row { flex-wrap:wrap; }
#screenHostGame button { overflow-wrap:anywhere; max-width:100%; }
#screenHostGame :is(#btnCall,#btnSpinTeam) {
 border:4px solid #c08a2a!important;
 border-image:var(--lm-gold-art) 56 76 fill / 22px 30px stretch!important;
 background:#f8cf4f padding-box!important;color:var(--lm-ink)!important;
 border-radius:999px;min-height:52px;padding:10px 26px;
 box-shadow:var(--lm-state-shadow,0 4px 0 var(--lm-ledge),0 9px 16px #07182d4d)!important;
}
#screenHostGame #btnBlackoutPause {
 border:4px solid #c08a2a!important;border-image:var(--lm-navy-art) 56 76 fill / 20px 27px stretch!important;
 background:#123c8a!important;color:var(--lm-pale)!important;min-height:48px;
}
#screenHostGame :is(.claimsPanel,.cardsBox,.activeRulesBox) { background:#0b265c8c;border:2px solid #e3b95a;border-radius:16px;padding:12px; }
#screenHostGame :is(.claimsTitle,.claimsSectionTitle,.cardsHeader) { color:#ffe39b; }
#screenHostGame :is(.claimRow,.playerBlock) { overflow-wrap:anywhere; }
#screenHostGame .status .sub { color:var(--lm-ink); }
#screenHostGame .banner { background:#fff1d6;color:#543500;border:2px solid #e3b95a; }
#screenHostGame .board { grid-template-columns:repeat(15,minmax(0,1fr));gap:5px; }
#screenHostGame .board .cell { background:var(--lm-cream);color:var(--lm-ink);border:1px solid #bd9142;box-shadow:inset 0 1px white;cursor:default;transform:none; }
#screenHostGame .board .cell.called { background:linear-gradient(#2f60b2,#123a82);color:white;box-shadow:inset 0 0 0 2px #ffe39b; }
#screenHostGame .bingoCard { background:var(--lm-cream);color:var(--lm-ink);max-width:100%;border-color:#d9a441; }
#screenHostGame .cardCell:not(.called):not(.free):not(.eliminated):not(.rewarded):not(.almost) { background:var(--lm-cream);color:var(--lm-ink);border-color:#bd9142; }
#screenHostGame .cardCell.called:not(.eliminated):not(.rewarded) { background:linear-gradient(#2f60b2,#123a82);color:white;box-shadow:inset 0 0 0 2px #ffe39b; }
#screenHostGame :is(button,input):focus-visible { outline:3px solid white;outline-offset:3px; }
#screenHostGame .soundToggle { min-width:44px;min-height:44px; }
@media(max-width:600px){
 #screenHostGame { --lm-panel-rim:28px; }
 #screenHostGame :is(header,.panel) { border-width:9px; }
 #screenHostGame header { flex-wrap:wrap; }
 #screenHostGame .board { grid-template-columns:repeat(5,minmax(0,1fr)); }
 #screenHostGame .controls { padding:10px; }
}
@media(prefers-reduced-motion:reduce){#screenHostGame button,#screenHostGame .cell {transition:none!important;animation:none!important;transform:none!important;}}
/* Cream host cards require explicit ink for every inherited dark-theme state. */
#screenHostGame .cardTop { color:var(--lm-ink);border-bottom-color:#bd9142; }
#screenHostGame .cardCell.free { background:#173c7b;color:#ffe39b;border-color:#bd9142; }
#screenHostGame .cardCell.almost:not(.eliminated):not(.called) { background:#ffebad;color:#503808; }
#screenHostGame .cardCell.rewarded:not(.eliminated) { background:radial-gradient(circle at 80% 20%,#ffd76a 0 3px,transparent 4px),#173c7b;color:white; }
#screenHostGame .cardCell.eliminated { background:repeating-linear-gradient(135deg,#f3dede 0 6px,#e4c4c6 6px 9px);color:#7a1f2a;opacity:1; }
#screenHostGame .bingoCard .smallTag.red { background:#ffe9e9;color:#8e2630; }
#screenHostGame .bingoCard .smallTag.blue { background:#e4ecff;color:#183c80; }
#screenHostGame .bingoCard .smallTag.white { background:#fff;color:#343d4e; }

/* ===== Integrated audit (Claude, Sep 24): host game gaps found in rendered states ===== */
/* The board panel stretched to the height of the long control column, leaving a large empty navy slab. */
#screenHostGame .grid { align-items: start; }
/* Current-ball panel still used the pre-M4 dark gradient. */
#screenHostGame .bigBall { background: #0b265c; border: 2px solid #e3b95a; box-shadow: inset 0 1px 0 #ffffff14, 0 6px 16px #07182d40; }
/* Sound toggle was a flat 7px square: same round navy/gold icon button as the phone. */
#screenHostGame .soundToggle {
  width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 3px solid transparent !important;
  background: radial-gradient(circle at 35% 30%, #4f86d8, #17418f 60%, #0b2a6b) padding-box, var(--lm-rail) border-box !important;
  box-shadow: 0 3px 0 #6b4712, 0 6px 10px #07182d4d !important;
  display: inline-grid; place-items: center;
}
/* Random Player Spins: 18px checkbox target and grey label (4.0:1). */
#screenHostGame .checkLabel { min-height: 44px; color: #dbe5f7; }
#screenHostGame .checkLabel input[type=checkbox] { width: 22px; height: 22px; accent-color: #d9a441; }
/* Reward tag on cream host cards was mint on cream (1.1:1). */
#screenHostGame .bingoCard .smallTag.reward { background: #e3f5ea; color: #17603a; border-color: #3f8a5a; }
/* Claims panel: Pending and Approved sat side by side in the narrow control column, so
   "Approve" wrapped to "Appr/ove" and the Approved list was clipped. Stack them. */
#screenHostGame .claimsLists { grid-template-columns: minmax(0, 1fr); }
#screenHostGame .claimRow { flex-wrap: wrap; }
#screenHostGame .claimActions { flex: 0 0 auto; flex-wrap: wrap; }
#screenHostGame .claimActions button { min-width: 0; white-space: nowrap; }
/* "🔥 POTENTIAL" alert tag was pale yellow on the cream card (1.1:1). */
#screenHostGame .bingoCard .smallTag.warn { background: #fff1d6; color: #6b3f00; border-color: #d98a1a; }
/* Eliminated card's Restore was a 32px flat gold square: same gold art pill, 44px. */
#screenHostGame .restoreCardBtn {
  border: 4px solid #c08a2a !important;
  border-image: var(--lm-gold-art) 56 76 fill / 18px 24px stretch !important;
  background: #f8cf4f padding-box !important;
  color: var(--lm-ink) !important;
  border-radius: 999px; min-height: 44px; min-width: 0; padding: 8px 16px; font-size: 13px;
}
/* Claim Approve is the affirmative action (PLACEMENT_GUIDE: .ok = gold primary); the generic
   .mini rule had made it navy. Reject stays the red destructive pill. */
#screenHostGame .claimActions button.ok { border-image: var(--lm-gold-art) 56 76 fill / 20px 27px stretch !important; background: #f8cf4f padding-box !important; color: var(--lm-ink) !important; }
/* Active-effects team label was the team colour on a translucent tint of itself over navy
   (red 4.2:1, blue 3.7:1 at 11px). Same readable team chips as the battle toast. */
#screenHostGame .activeRule .ruleTeam { border: 1px solid; }
#screenHostGame .activeRule .ruleTeam.red { background: #ffe9e9; color: #8e2630; border-color: #c0525a; }
#screenHostGame .activeRule .ruleTeam.blue { background: #e4ecff; color: #183c80; border-color: #5b7fc0; }
#screenHostGame .activeRule .ruleTeam.white { background: #fff; color: #343d4e; border-color: #aab3c2; }
/* "All player cards" scroll thumb was white at 10% on the dark track (1.4:1, effectively
   invisible with 40 players). Gold thumb on the navy track. */
#screenHostGame .cardsScroll::-webkit-scrollbar-track { background: #0b265c; }
#screenHostGame .cardsScroll::-webkit-scrollbar-thumb { background: #d9a441; border: 2px solid #0b265c; }
#screenHostGame .cardsScroll::-webkit-scrollbar-thumb:hover { background: #f0c75e; }
/* Eliminated card: the whole card, overlay included, was at 60% opacity under a grey filter,
   so CRY WOLF read 2.7:1 and the Restore action 4.1:1 and looked disabled. The card content
   stays dimmed and grey under the overlay; the overlay itself is full strength (as on phones). */
#screenHostGame .bingoCard.eliminated { opacity: 1; filter: none; }
#screenHostGame .bingoCard.eliminated > :not(.eliminatedOverlay) { opacity: .6; filter: grayscale(.6); }
#screenHostGame .bingoCard.eliminated.cry-wolf > :not(.eliminatedOverlay) { filter: grayscale(.3) sepia(.3); }
#screenHostGame .bingoCard.eliminated.cry-wolf .eliminatedText { color: #ffe39b; }
/* Team pills after the team spin: legacy translucent tints, and the two teams not chosen were
   faded to 40% (2.1:1). Chosen team: bright chip in its own colours with a gold ring; the
   others: navy chips, still readable. The renderer's inline opacity needs !important. */
#screenHostGame #teamPills .pill { opacity: 1 !important; background: #0b265c; border: 1px solid #5b7fc0; color: #dbe5f7; font-size: 13px; padding: 8px 14px; }
#screenHostGame #teamPills .pill.red { border-color: #c0525a; color: #ffd3d3; }
#screenHostGame #teamPills .pill.white { border-color: #aab3c2; color: #f4f4f4; }
#screenHostGame #teamPills .pill.blue { border-color: #5b7fc0; color: #cfe0ff; }
#screenHostGame #teamPills .pill.selected { box-shadow: 0 0 0 2px #ffe39b, 0 3px 8px #07182d66; }
#screenHostGame #teamPills .pill.red.selected { background: #ffe9e9; color: #8e2630; }
#screenHostGame #teamPills .pill.white.selected { background: #fff; color: #343d4e; }
#screenHostGame #teamPills .pill.blue.selected { background: #e4ecff; color: #183c80; }
/* Host "Next action" guidance (Codex art direction, Sep 25): navy with the gold edge of the
   other host panels, a heavier left edge to keep it first in the hierarchy. Its inline style
   sets a 2px currentColor border, hence !important on the border. */
#screenHostGame .status.nextActionBox {
  background: linear-gradient(170deg, #1d4a9a, #0f2f6b);
  color: #fff7e5;
  border: 2px solid #e3b95a !important;
  border-left-width: 6px !important;
  border-radius: 12px;
  box-shadow: inset 0 1px 0 #ffffff26, 0 3px 0 #6b4712, 0 8px 16px #07182d40;
}
#screenHostGame .status.nextActionBox #hostNextAction { color: #ffe39b; }
#screenHostGame .status.nextActionBox .sub { color: #dbe5f7; }