/* Opponent picker (#botPick, bot-picker.js) and the unlock reveal in the match-final dialog. */
:root { --top-tier: #b4372f; --top-tier-glow: rgba(227,178,60,.55); }

.bot-pick h1 { font-size: 1.4rem; margin: 0 0 12px; }
.bot-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 0 0 14px; }

.bot-card {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; cursor: pointer;
  border: 2px solid var(--line); border-radius: 12px; background: var(--bg2); min-height: 88px;
}
.bot-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.bot-card:has(.bot-input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.bot-card:has(.bot-input:focus-visible) { outline: 3px solid var(--gold); outline-offset: 2px; }
.bot-card:hover { border-color: var(--line-strong); }
.bot-card:has(.bot-input:checked):hover { border-color: var(--gold); }

.bot-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bot-name { font-weight: 700; font-size: 1.05rem; }
.bot-level {
  align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line-strong); border-radius: 999px; padding: 1px 8px;
}
.bot-intro { color: var(--muted); font-size: .88rem; line-height: 1.3; }
.bot-card.level-7 .bot-level { color: var(--text); background: var(--top-tier); border-color: var(--gold); letter-spacing: .12em; }

/* the mark: initial in a ring, seven strength pips */
.bot-mark { flex: 0 0 auto; width: 56px; height: 63px; }
.bot-ring { fill: var(--card); stroke: var(--line-strong); stroke-width: 2; }
.bot-initial { fill: var(--text); font: 700 26px var(--font); }
.bot-pip { fill: var(--line); }
.bot-pip.on { fill: var(--gold); }
.bot-card:has(.bot-input:checked) .bot-ring { stroke: var(--gold); }
.bot-mark.level-7 .bot-ring { stroke: var(--gold); fill: #3a1512; }
.bot-mark.level-7 .bot-pip.on { fill: var(--top-tier); stroke: var(--gold); stroke-width: .8; }

/* locked: dark silhouette, "???" and the hint how to unlock */
.bot-card.is-locked { cursor: not-allowed; background: #120d0a; border-style: dashed; }
.bot-card.is-locked .bot-name { color: var(--muted); letter-spacing: .2em; }
.bot-mark.locked .bot-ring { fill: #000; stroke: #3a2c20; }
.bot-mark.locked .bot-initial { fill: #5a4a3a; }
.bot-card.is-locked .bot-locked-hint { color: var(--text); font-style: italic; }

.bot-pick-actions { margin-top: 4px; }
#btnBotStart { flex: 1 1 220px; }

/* the reveal: only inside the match final (other dialogs reuse #ovCard) */
.ov-unlock { margin: 6px auto 14px; padding: 12px 14px; border: 1px solid var(--gold); border-radius: 12px; background: #120d0a; max-width: 340px; }
.result-card:not([data-kind="final"]) .ov-unlock { display: none; }
.ov-unlock-mark .bot-mark { display: block; margin: 0 auto 4px; width: 64px; height: 72px; }
.ov-unlock-title { margin: 0; font-weight: 800; font-size: 1.15rem; color: var(--gold); letter-spacing: .02em; }
.ov-unlock-line { margin: 2px 0 0; color: var(--text); font-style: italic; }

@media (prefers-reduced-motion: no-preference) {
  .ov-unlock:not([hidden]) .bot-mark { animation: bot-light-up 1.6s ease-out both; }
  .ov-unlock:not([hidden]) .ov-unlock-title, .ov-unlock:not([hidden]) .ov-unlock-line { animation: bot-reveal-text .9s ease-out .7s both; }
  .bot-card.is-fresh { animation: bot-fresh 1.8s ease-out both; }
}
@keyframes bot-light-up {
  0% { filter: brightness(0); }
  55% { filter: brightness(0) drop-shadow(0 0 0 transparent); }
  100% { filter: brightness(1) drop-shadow(0 0 10px var(--top-tier-glow)); }
}
@keyframes bot-reveal-text { from { opacity: 0; transform: translateY(4px); } }
@keyframes bot-fresh { 0% { box-shadow: 0 0 0 0 var(--top-tier-glow); } 40% { box-shadow: 0 0 22px 6px var(--top-tier-glow); } }

@media (max-width: 520px) {
  .bot-cards { grid-template-columns: 1fr; }
}

/* large controls: bigger targets and text, one column */
.big-ui .bot-cards { grid-template-columns: 1fr; gap: 12px; }
.big-ui .bot-card { min-height: 104px; padding: 12px 16px; }
.big-ui .bot-name { font-size: 1.3rem; }
.big-ui .bot-intro { font-size: 1.05rem; }
.big-ui .bot-level { font-size: .9rem; }
.big-ui .bot-mark { width: 64px; height: 72px; }
.big-ui .bot-card:has(.bot-input:focus-visible) { outline: 5px solid var(--gold); outline-offset: 3px; box-shadow: 0 0 0 10px #000; }

@media (forced-colors: active) {
  .bot-card:has(.bot-input:checked) { outline: 3px solid Highlight; }
  .bot-card.is-locked { border-color: GrayText; }
}