/* bots.html */
.bt-page { max-width: 1320px; margin: 0 auto; }
.bt-setup { max-width: 760px; }
.bt-lede { max-width: 64ch; margin: 10px 0 22px; font-size: 15px; }
.bt-form { display: grid; gap: 20px; }
.bt-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.bt-fieldset > legend { padding: 0; margin-bottom: 20px; }   /* legends sit outside the grid, so the gap never reached them */
.bt-options { display: grid; gap: 20px; grid-template-columns: 1fr 1fr; }   /* 20px between each choice */
.bt-levels { grid-template-columns: repeat(4, 1fr); }
.bt-option { position: relative; display: block; cursor: pointer; }
.bt-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bt-option span { display: block; height: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-850); }
.bt-option b { display: block; font: 600 15px var(--sans); color: var(--ivory); }
.bt-option small { display: block; margin-top: 3px; font: 400 14px/1.4 var(--sans); color: var(--slate); }
.bt-option input:checked + span { border-color: var(--brass); background: rgba(201, 162, 75, .1); }
.bt-option input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }
.bt-start { justify-self: start; padding: 13px 28px; }

.bt-game { display: grid; grid-template-columns: auto minmax(320px, 1fr); gap: 24px; align-items: start; }
.bt-board-col { --bt-board: clamp(300px, min(calc(100svh - 190px), calc(100vw - var(--as-side-w) - 48px - 400px - 24px - 30px)), 860px); display: grid; gap: 8px; }
.bt-board-row { display: flex; gap: 8px; }
.bt-board { width: var(--bt-board); }
.bt-evalbar { width: 18px; }
.bt-player { display: flex; align-items: center; gap: 10px; font: 600 15px var(--sans); color: var(--ivory); padding-left: 26px; }
.bt-avatar { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--teal); color: var(--ivory); font: 700 14px var(--sans); }
.bt-avatar.is-bot { background: var(--ink-800); border: 1px solid var(--line); color: var(--brass-bright); }
.bt-thinking { font: 400 14px var(--sans); color: var(--slate); }
.bt-book { margin-left: auto; font: 600 12.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--teal-bright); border: 1px solid var(--teal-dim); border-radius: 999px; padding: 3px 9px; }
.bt-book.is-out { color: var(--slate); border-color: var(--line); }

.bt-panel { display: grid; gap: 14px; max-width: 560px; }
.bt-coach { display: grid; gap: 14px; }
.bt-coach-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.bt-coach-head .ap-card-title { margin: 0; }
.bt-prompt { padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-850); font: 600 15px var(--sans); color: var(--ivory); }
.bt-stuck { justify-self: start; }
.bt-goals { padding: 14px 16px; border-radius: 12px; border-left: 3px solid var(--brass); background: var(--ink-850); }
.bt-goals h3 { margin: 0 0 8px; font: 700 15px var(--sans); color: var(--ivory); }
.bt-goals ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; font: 400 15px/1.5 var(--sans); color: var(--slate); }
.bt-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-height: min(42svh, 420px); overflow-y: auto; }
.bt-msg { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--ink-850); font: 400 15px/1.55 var(--sans); color: var(--ivory); }
.bt-msg .bt-msg-move { font: 600 14px var(--mono); color: var(--slate); margin-right: 6px; }
.bt-msg .ap-grade { margin-right: 6px; vertical-align: 1px; }
.bt-msg.is-book { border-color: var(--teal-dim); }
.bt-msg.is-bad { border-color: #7a3a3a; }
.bt-msg.is-answer { border-style: dashed; }
.bt-msg-actions { margin-top: 8px; display: flex; gap: 8px; }
.bt-chips .ap-chip { font-size: 14px; }
.bt-controls { display: flex; gap: 8px; flex-wrap: wrap; }
.bt-result-title { font: 700 24px/1.25 var(--serif); color: var(--ivory); margin: 6px 0 6px; }
.bt-result-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

@media (max-width: 1050px) {
  .bt-game { grid-template-columns: 1fr; }
  .bt-board-col { --bt-board: min(calc(100vw - 60px), 620px); justify-self: center; }
  .bt-panel { max-width: none; }
}
@media (max-width: 640px) {
  .bt-options, .bt-levels { grid-template-columns: 1fr 1fr; }
  .bt-board-col { --bt-board: calc(100vw - 16px - 26px - 8px); }
  .bt-evalbar { width: 12px; }
  .bt-player { padding-left: 20px; }
}

/* ---------- Robot opponents (v39) ---------- */
.bt-bots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.bt-bot { position: relative; display: block; cursor: pointer; min-width: 0; }
.bt-bot input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bt-bot-card {
  position: relative; display: grid; justify-items: center; text-align: center; gap: 2px; height: 100%; box-sizing: border-box;
  padding: 14px 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--ink-850);
  transition: border-color .15s ease, transform .15s ease, background .15s ease;
}
.bt-bot:hover .bt-bot-card { border-color: var(--brass-dim); transform: translateY(-2px); }
.bt-bot-art { display: block; width: 100%; max-width: 132px; aspect-ratio: 1; margin-bottom: 6px; border-radius: 14px;
  background: radial-gradient(circle at 50% 38%, rgba(201, 162, 75, .16), rgba(201, 162, 75, 0) 68%), var(--ink-900); }
.bt-bot-art .bot-art { display: block; width: 100%; height: 100%; }
.bt-bot-name { font: 700 18px/1.2 var(--sans); color: var(--ivory); }
.bt-bot-elo { font: 600 14px var(--mono); color: var(--brass-bright); font-variant-numeric: tabular-nums; }
.bt-bot-tag { font: 600 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-top: 2px; }
.bt-bot-blurb { margin-top: 6px; font: 400 13.5px/1.4 var(--sans); color: var(--slate); }
.bt-bot input:checked + .bt-bot-card { border-color: var(--brass); background: rgba(201, 162, 75, .09); box-shadow: 0 0 0 1px var(--brass) inset; }
.bt-bot input:checked + .bt-bot-card::after {
  content: "\2713"; position: absolute; top: 10px; right: 10px; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; background: var(--brass); color: #1b1508; font: 800 13px var(--sans);
}
.bt-bot input:focus-visible + .bt-bot-card { outline: 2px solid var(--brass); outline-offset: 3px; }
@media (max-width: 640px) { .bt-bots { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .bt-bot-blurb { font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .bt-bot-card { transition: none; } .bt-bot:hover .bt-bot-card { transform: none; } }
/* In the game: the robot's face instead of the "B" square */
.bt-avatar.has-art { width: 34px; height: 34px; padding: 0; overflow: hidden; background: var(--ink-900); }
.bt-avatar.has-art .bot-art { width: 100%; height: 100%; display: block; }

/* ---------- Robot speech bubble + you (v40) ---------- */
.bt-player-top { position: relative; min-height: 34px; }
.bt-bubble {
  position: absolute; top: 50%; z-index: 6; width: max-content; box-sizing: border-box;
  padding: 7px 12px; border-radius: 12px; border: 1px solid var(--brass);
  background: var(--ink-850); color: var(--ivory); font: 500 14.5px/1.35 var(--sans);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); transform: translateY(-50%);
}
.bt-bubble::before {   /* the tail, pointing at the robot's name */
  content: ""; position: absolute; left: -7px; top: 50%; width: 12px; height: 12px; margin-top: -6px;
  background: var(--ink-850); border-left: 1px solid var(--brass); border-bottom: 1px solid var(--brass); transform: rotate(45deg);
}
.bt-bubble[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .bt-bubble.is-in { animation: bt-pop .22s ease-out; }
  @keyframes bt-pop { from { opacity: 0; transform: translateY(-50%) scale(.9); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
}
.bt-thinking:not([hidden]) ~ .bt-bubble { display: none; }   /* no talking while it thinks */
/* You: the site's logo mark, or your initial when signed in (same as the side menu) */
.bt-avatar-you { width: 34px; height: 34px; border-radius: 50%; overflow: hidden; background: var(--ink-900); border: 1px solid var(--line); }
.bt-avatar-you img { width: 78%; height: 78%; display: block; }
.bt-avatar-you.is-initial { background: var(--teal); border-color: var(--teal); color: var(--ivory); font: 700 16px var(--sans); }
/* Locked bots (access.js botMaxElo) */
.bt-bot.is-locked .bt-bot-card { opacity: .55; }
.bt-bot.is-locked .bt-bot-art { filter: grayscale(.7); }
.bt-bot-lock { display: inline-block; margin-top: 6px; font: 600 11px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--brass-bright); border: 1px solid var(--brass-dim, #8A7038); border-radius: 999px; padding: 2px 8px; }
.bt-bot.is-locked:hover .bt-bot-card { opacity: .75; }

/* ---- End-of-game box on the board (v53) ---- */
#btBoard { position: relative; }
.bt-end { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 6; width: min(86%, 380px); text-align: center;
  background: rgba(18, 21, 26, .94); border: 1px solid var(--line); border-top: 4px solid var(--brass); border-radius: 18px; padding: 22px 20px 18px;
  box-shadow: 0 22px 60px rgba(0, 0, 0, .55); animation: btEndIn .35s ease; }
.bt-end.is-win { border-top-color: var(--brass-bright); }
.bt-end.is-loss { border-top-color: var(--teal); }
.bt-end-title { font: 700 34px/1.1 var(--serif); color: var(--ivory); margin-bottom: 8px; }
.bt-end.is-win .bt-end-title { color: var(--brass-bright); }
.bt-end-text { font: 500 15.5px/1.5 var(--sans); color: var(--ivory); margin: 0 0 8px; }
.bt-end-sub { font: 13.5px/1.45 var(--sans); color: var(--slate); margin: 0 0 14px; }
.bt-end-wait { display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 14.5px var(--sans); color: var(--slate); padding: 10px 0 6px; }
.bt-end-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bt-end-x { position: absolute; top: 6px; right: 8px; width: 32px; height: 32px; border: none; background: none; color: var(--slate-dim); font-size: 22px; cursor: pointer; border-radius: 8px; }
.bt-end-x:hover { color: var(--ivory); background: var(--line-soft); }
.bt-confetti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 7; }
@keyframes btEndIn { from { opacity: 0; transform: translate(-50%, -46%) scale(.96); } to { opacity: 1; transform: translate(-50%, -50%); } }
@media (prefers-reduced-motion: reduce) { .bt-end { animation: none; } }
@media (max-width: 560px) { .bt-end { padding: 16px 14px 14px; } .bt-end-title { font-size: 28px; } .bt-end-text { font-size: 14.5px; } }