/* M4-P2 event screens. Explicit surface selectors; no rule changes, clocks or text baked into art. */
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.tvDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content,.playerWinnerScreen,.tvOverlayCard,.tvRight,.tvLeft) {
 --ev-ink:#172a4f;--ev-pale:#fff7e5;--ev-rail:linear-gradient(145deg,#fff2bb,#eac262 27%,#9c631b 58%,#f9d875 79%,#b17b2f);
 border:10px solid #d9a441;border-image:url('ui-kit-navy-panel.webp') 72 fill / 30px stretch;
 background:#17418f padding-box;color:var(--ev-pale);border-radius:20px;
 box-shadow:0 5px 0 #6b4712,0 16px 30px #07182d66;min-width:0;box-sizing:border-box;
}
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.tvDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content) { max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;overscroll-behavior:contain;padding:24px; }
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.tvDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content,.playerWinnerScreen) :is(h1,h2,h3,.choiceTitle,.battleChoiceTitle,.duelGameTitle2,.playerDuelGameTitle,.tvDuelGameTitle,.victoryTitle){color:#ffe39b;text-shadow:0 2px #0a1f4d;overflow-wrap:anywhere;}
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.tvDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content) :is(p,.choiceDescription,.battleChoiceDesc,.duelGameDesc2,.playerDuelGameDesc,.tvDuelGameDesc,.gameModalMessage,.contestantCard,.playerDuelStatus,.duelFighterMeta2){color:#e5ecf5;}
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.tvDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content) button,.tvFullscreenBtn {
 border:4px solid #c08a2a!important;border-image:url('ui-kit-navy-button.webp') 56 76 fill / 20px 27px stretch!important;
 background:#123c8a padding-box!important;color:#fff7e5!important;min-height:44px;max-width:100%;padding:10px 20px;border-radius:999px;
 box-shadow:0 3px 0 #6b4712,0 8px 12px #07182d50!important;white-space:normal;overflow-wrap:anywhere;
}
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content) :is(button.primary,.duelSpinBtn,.playerDuelBtn,.gameModalBtn.confirm,.victoryClose,.spinModalBtn,.teamSelectConfirm){
 border-image-source:url('ui-kit-gold-button.webp')!important;background:#f8cf4f padding-box!important;color:#172a4f!important;text-shadow:none;
}
:is(.choiceContent,.duelContent,.gameModalContent) :is(button.danger,.duelRemoveBtn){
 border-image:none!important;border:3px solid #eac262!important;background:linear-gradient(#aa3643,#792432)!important;color:white!important;
}
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content) button:disabled {filter:grayscale(.85);opacity:.65!important;transform:none!important;box-shadow:none!important;}
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content) :is(button,input,select):focus-visible,.tvFullscreenBtn:focus-visible {outline:3px solid white;outline-offset:3px;}
:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select){background:#fff6de;color:#172a4f;border:2px solid #d9a441;border-radius:10px;min-height:44px;max-width:100%;box-sizing:border-box;}
:is(.choiceContent,.battleChoiceContent) :is(.targetCard,.teammateCard){background:#fff6de;color:#172a4f;border:3px solid #d9a441;border-radius:16px;overflow-wrap:anywhere;}
:is(.choiceContent,.battleChoiceContent) :is(.targetPlayerName,.targetCardLabel,.teammateName){color:#172a4f;}
:is(.duelContent,.playerDuelCard,.tvDuelCard) :is(.contestant,.duelFighter2,.playerDuelFighter,.tvDuelFighter){background:#0b265c;border:2px solid #e3b95a;border-radius:14px;min-width:0;overflow-wrap:anywhere;}
:is(.duelContent,.playerDuelCard,.tvDuelCard) :is(.contestantName,.duelFighterName2,.playerDuelName,.tvDuelName){color:#fff7e5;overflow-wrap:anywhere;}
:is(.duelContent,.playerDuelCard) button.selected {outline:3px solid #ffe39b;outline-offset:3px;box-shadow:inset 0 0 0 3px white!important;}
:is(.choiceContent,.battleChoiceContent) .battleChoiceTargets {max-height:48dvh;overflow:auto;}
.playerWinnerScreen {width:calc(100% - 24px);max-width:760px;min-height:0;margin:24px auto;padding:40px 24px;text-align:center;overflow-wrap:anywhere;}
.playerWinnerScreen p,.victoryWinner {color:#fff7e5;overflow-wrap:anywhere;}
:is(.victoryContent,.victory-content) .victoryClose {position:relative;z-index:2;}
/* TV keeps the big balls and original B/I/N/G/O colors; frames and board cells share materials. */
#screenTVDisplay .tvRoomCode {background:#fff6de;color:#172a4f;border:3px solid #d9a441;border-radius:14px;text-shadow:none;}
#screenTVDisplay :is(.tvJoinHint,.tvMiniTips,.tvMetaLine,.tvLastLabel,.tvJoinUrl){color:#e5ecf5;}
#screenTVDisplay .tvNum {background:#fff6de;color:#172a4f;border:1px solid #ba914b;}
#screenTVDisplay .tvNum.called {background:#173c7b;color:white;box-shadow:inset 0 0 0 2px #ffe39b;}
#screenTVDisplay :is(.tvActiveRules,.tvWinnerBanner,.arenaCallTitle){border:2px solid #d9a441;background:#0b265c;color:#ffe39b;border-radius:12px;}
#screenTVDisplay :is(.tvOverlayStatus,.tvOverlayWinner){color:#fff7e5;overflow-wrap:anywhere;}
@media(max-width:600px){
 :is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content){padding:14px;border-width:8px;border-image-width:24px;}
 :is(.duelVS2,.playerDuelVS,.tvDuelVS){gap:8px;}
 :is(.duelControlsRow2,.duelStartRow,.gameModalButtons,.playerDuelChestRow){flex-wrap:wrap;}
}
@media(prefers-reduced-motion:reduce){:is(.choiceContent,.battleChoiceContent,.duelContent,.playerDuelCard,.tvDuelCard,.gameModalContent,.spinModalContent,.playerTeamSelection,.victoryContent,.victory-content,.playerWinnerScreen) *{animation:none!important;transition:none!important;}}

/* Team choice identity stays red/white/blue within the shared gold frame. */
.playerTeamSelection .teamSelectBtn.red {background:#8e2630!important;color:white!important;border-image:none!important;}
.playerTeamSelection .teamSelectBtn.blue {background:#183c80!important;color:white!important;border-image:none!important;}
.playerTeamSelection .teamSelectBtn.white {background:#fff6de!important;color:#172a4f!important;border-image:none!important;}
.playerTeamSelection .teamSelectBtn.selected {outline:3px solid #ffe39b;outline-offset:3px;}
.playerTeamSelection {width:calc(100% - 24px);margin:12px auto;}
/* Higher-specificity existing TV rules also reset border-image via border shorthand. */
#screenTVDisplay :is(.tvLeft,.tvRight,.tvOverlayCard) {
 border:8px solid #d9a441;border-image:url('ui-kit-navy-panel.webp') 72 fill / 24px stretch;
 background:#17418f padding-box;box-shadow:0 5px 0 #6b4712,0 16px 30px #07182d66;
}
#duelModal .contestantRow2 {display:grid;grid-template-columns:30px minmax(0,1fr) 44px;gap:8px;}
#duelModal .contestantInfo {min-width:0;}
#duelModal .duelRemoveBtn {width:44px;min-width:44px;padding:4px!important;}
#duelModal .duelTitle {font-size:clamp(26px,7vw,48px);}
#duelModal .duelModeRow {flex-wrap:wrap;}
#duelModal .duelModeBtn {flex:1 1 160px;}
#duelModal .contestantRow2 {grid-template-columns:48px minmax(0,1fr) 44px;gap:10px;}
#duelModal .contestantNumber {width:44px;height:44px;min-width:44px;}
@media(max-width:600px){
 #duelModal .duelContestantsHeader {flex-direction:column;align-items:stretch;gap:10px;}
 #duelModal .duelContestantsActions {width:100%;}
 #duelModal .duelContestantsActions button {flex:1 1 150px;}
}

.victory-content :is(.winner-name,.winner-card,.victory-subtitle,.victory-tagline){color:#fff7e5;overflow-wrap:anywhere;text-shadow:none;}
.victory-content .victory-title {font-size:clamp(36px,10vw,80px);color:#ffe39b;}
.victory-content .winner-name {font-size:clamp(24px,7vw,52px);}
.battleChoiceContent .targetCardHeader {display:flex;gap:10px;align-items:center;}
.battleChoiceContent .targetPlayerName {flex:1;min-width:0;overflow-wrap:anywhere;}
.battleChoiceContent .targetTeamBadge {flex:0 0 auto;white-space:nowrap;letter-spacing:.03em;}
.battleChoiceContent .targetTeamBadge.red {background:#ffe4e4;color:#8e2630;}
.battleChoiceContent .targetTeamBadge.blue {background:#e4ecff;color:#183c80;}
.battleChoiceContent .targetTeamBadge.white {background:white;color:#343d4e;}
.victory-content .victory-subtitle {font-size:18px;letter-spacing:.15em;}

/* Claude review, September 24 (fixes found in independent review of this slice). */
/* 1. Tall host card-choice buttons inherited the 999px pill radius: attack/sacrifice cards
      rendered as ovals that clipped the mini card and squeezed the header. */
.choiceContent .choiceCardBtn { border-radius: 16px; }
/* 2. Team tags on the red attack cards measured 4.28:1; use the solid host-card chips. */
.choiceContent .choiceCardBtn .smallTag.red { background:#ffe9e9;color:#8e2630;border-color:#c0525a; }
.choiceContent .choiceCardBtn .smallTag.blue { background:#e4ecff;color:#183c80;border-color:#5b7fc0; }
.choiceContent .choiceCardBtn .smallTag.white { background:#fff;color:#343d4e;border-color:#aab3c2; }
/* 3. The victory title's pulsing gold glow sat behind gold letters on the navy panel
      (2.63:1 incl. glow; 1.66:1 before this slice) and spilled onto CHAMPION (4.27:1).
      Keep the pop-in; replace the glow with a dark depth shadow. */
.victory-content .victory-title { text-shadow: 0 3px 0 #6b4712, 0 8px 18px #07182dcc; animation: victoryTitlePulse .5s ease-out; }
/* 4. CHAMPION's old -10px margin let it touch the BINGO! letters; give it a small gap. */
.victory-content .victory-subtitle { margin-top: 4px; }

/* ===== Integrated audit (Claude, Sep 24): event gaps found in rendered states ===== */
/* Phone battle targets: the old :hover rules replaced the cream card with a see-through
   tint, so a tapped (sticky-hover) card showed navy text on navy (1.48:1). */
.battleChoiceContent :is(.targetCard, .teammateCard):is(:hover, :active, .red:hover, .white:hover, .blue:hover, .trade:hover, .sacrifice:hover) { background: #fffdf4; border-color: #ffe39b; box-shadow: 0 0 0 3px #ffe39b66; }
.battleChoiceContent .targetCardCount { color: #45536a; }
.battleChoiceContent #battleTimerText, .battleChoiceContent .battleChoiceTimer { color: #ffb4a8; }
.battleChoiceContent .noTargets { color: #dbe5f7; }
/* Muted grey (#a4a7b7) on navy measured 4.0:1 in host choices, spin results and the phone spin prompt. */
.choiceContent :is(.choicePlayerLabel, .choicePlayerCards), .gameModalContent .spinHint { color: #dbe5f7; }
.spinModalContent .spinTimeSubtitle { color: #dbe5f7 !important; } /* old rule is !important */
.choiceContent .choicePlayerBtn.danger .choicePlayerCards { color: #ffe3e3; }
/* The old target :hover scaled the card by 2%, which made the target list scroll sideways. */
.battleChoiceContent :is(.targetCard, .teammateCard):hover { transform: translateY(-1px); }
/* Wheel result (host, full-screen overlay): the segment colour as text measured 2.8:1 for
   purple on the dark overlay. Cream letters; the segment colour stays as the inline glow. */
.resultValue { color: #fff7e5 !important; }
/* Host duel: the 300px Start button overflowed the 320px dialog; tiny safety checkbox and slider. */
#duelModal .duelContent button { min-width: 0; }
#duelModal #duelStartBtn { width: 100%; max-width: 100%; }
#duelModal .duelToggle { min-height: 44px; padding: 6px 14px; }
#duelModal .duelToggle input[type=checkbox] { width: 22px; height: 22px; accent-color: #d9a441; }
#duelModal .duelProxyRange { min-height: 44px; min-width: 0; }
/* K.O. confetti and the victory card's decorative glows are wider than their dialogs;
   they made the dialog scroll sideways. Content itself wraps. */
#duelModal .duelContent, .victory-content { overflow-x: hidden; }
/* TV legibility from across the room: board numerals were 18px in 65px cells and the
   "last 3" balls 60px with 16px text at 1080p. Bigger numerals in the same row height
   (the TV auto-scaler keeps the whole layout on screen); rules text 12px -> 16px. */
#screenTVDisplay .tvNum { font-size: 26px; padding: 6px 0; line-height: 1.2; font-variant-numeric: tabular-nums; }
#screenTVDisplay .tvLastChip { width: 88px; height: 88px; min-width: 88px; font-size: 24px; padding: 0; }
#screenTVDisplay .tvActiveRule { font-size: 16px; padding: 8px 12px; }
/* Battle-effect announcement toast (host/TV/phone) still used the old dark card, and its
   team name was the raw team colour on dark (red ~2.6:1). Navy/gold panel; the team
   shows as a readable chip in its own colours. */
.battle-effect-toast { border: 8px solid #d9a441; border-image: url('ui-kit-navy-panel.webp') 72 fill / 24px stretch; background: #17418f padding-box; box-shadow: 0 5px 0 #6b4712, 0 12px 24px #07182d66; max-width: calc(100vw - 24px); }
.battle-effect-toast .effect-toast-name { color: #ffe39b; }
.battle-effect-toast .effect-toast-team { display: inline-block; margin-top: 4px; padding: 2px 10px; border-radius: 999px; border: 1px solid; }
.battle-effect-toast .effect-toast-team.team-red { background: #ffe9e9; color: #8e2630 !important; border-color: #c0525a; }
.battle-effect-toast .effect-toast-team.team-blue { background: #e4ecff; color: #183c80 !important; border-color: #5b7fc0; }
.battle-effect-toast .effect-toast-team.team-white { background: #fff; color: #343d4e !important; border-color: #aab3c2; }
.battle-effect-toast .effect-toast-team.team-all { background: #fff6de; color: #172a4f !important; border-color: #d9a441; }
/* TV active-effect team label was an inline 10px at 80% opacity (9px tall at 720p).
   Same readable team chip as the battle toast; the inline style needs !important. */
#screenTVDisplay .tvActiveRule > span:nth-child(3) { font-size: 13px !important; opacity: 1 !important; padding: 2px 10px; border-radius: 999px; border: 1px solid #d9a441; background: #fff6de; color: #172a4f; }
#screenTVDisplay .tvActiveRule.red > span:nth-child(3) { background: #ffe9e9; color: #8e2630; border-color: #c0525a; }
#screenTVDisplay .tvActiveRule.blue > span:nth-child(3) { background: #e4ecff; color: #183c80; border-color: #5b7fc0; }
#screenTVDisplay .tvActiveRule.white > span:nth-child(3) { background: #fff; color: #343d4e; border-color: #aab3c2; }
/* TV claim announcement (BINGO awaiting review / approved / CRY WOLF) is created with an inline
   legacy dark style (#151525 with a thin gold line). Same navy/gold panel art as the battle
   toast; !important only because the style is inline. */
#tvClaimAnnouncement { border: 10px solid #d9a441 !important; border-image: url('ui-kit-navy-panel.webp') 72 fill / 28px stretch !important; background: #17418f padding-box !important; color: #fff7e5 !important; box-shadow: 0 6px 0 #6b4712, 0 16px 32px #07182d80; font-weight: 800; text-shadow: 0 2px 0 #07182d; }
/* Phone SPIN TIME prompt (Codex art direction, Sep 25): approved navy/gold/cream in place of
   the legacy magenta/cyan neon. Same markup, trigger, timing and button; the ring centre is
   the approved round kit disc. Every motion here stops under reduced motion, including the
   ring pseudo-elements that the shared reduced-motion rule (which matches elements) misses. */
.playerSpinModal.spinTimeAnimation { background: radial-gradient(circle at 50% 42%, #17418fe6, #07182df5 72%); }
.spinTimeAnimation .spinTimeCircle { background: url('ui-kit-round-button.webp') center / 84% 84% no-repeat; }
.spinTimeAnimation .spinTimeCircle::before { border-color: transparent; border-top-color: #ffe39b; border-right-color: #d9a441; border-bottom-color: #fff7e5; }
.spinTimeAnimation .spinTimeCircle::after { border-color: transparent; border-top-color: #d9a441; border-bottom-color: #ffe39b; }
.spinTimeAnimation .spinTimeTitle { color: #ffe39b !important; text-shadow: 0 2px 0 #07182d, 0 0 14px #f3ca6680; animation: lmSpinGlow 1.2s ease-in-out infinite alternate; }
@keyframes lmSpinGlow { from { text-shadow: 0 2px 0 #07182d, 0 0 10px #f3ca6655; } to { text-shadow: 0 2px 0 #07182d, 0 0 22px #f3ca66aa; } }
@media (prefers-reduced-motion: reduce) {
  .spinTimeAnimation :is(.spinTimeCircle, .spinTimeIcon, .spinTimeTitle, .spinTimeLightning, .spinModalBtn),
  .spinTimeAnimation .spinTimeCircle::before, .spinTimeAnimation .spinTimeCircle::after { animation: none !important; }
}