/* Bot or Not. Loaded ON TOP of style.css, never instead of it — type, buttons
   and the velvet panel still come from the platform sheet.

   Two things this file inherits from style.css and has to work around, both
   documented in raid.css for the same reason:
     * a global `input, textarea, select { width: 100% }`
     * `.card` centring everything through the shell grid
   And one rule of its own: NO backdrop-filter. Same call as the raid — it is
   the main mobile perf risk and buys nothing here. */

.game-card { padding: 30px 26px 34px; }

/* Every screen and every togglable pane in the game is driven by the `hidden`
   attribute — and an author `display` beats the UA sheet's
   `[hidden] { display: none }`. Both this file and style.css set `display` on
   things that toggle, so without this rule the veil sits over card one, the
   reveal pane never closes, and Undo shows on the first card. It is one line
   and it is load-bearing for the whole state machine. */
.bon [hidden] { display: none !important; }

.bon {
  --bon-bot: var(--danger);
  --bon-not: var(--ok);
  --bon-face: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
}

.bon-screen { animation: bon-in .28s ease both; }
@keyframes bon-in { from { opacity: 0; transform: translateY(8px); } }

.bon-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Intro ---------------------------------------------------------------- */

.bon-kicker {
  margin: 0 0 6px;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink-bright);
}
.bon-title {
  margin: 0 0 18px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(2.6rem, 11vw, 4.2rem);
  font-weight: 600; line-height: .95; letter-spacing: .01em;
}
.bon-or {
  display: inline-block; margin: 0 .28em;
  font-size: .38em; font-style: italic; letter-spacing: .06em;
  color: var(--pink-bright); vertical-align: middle;
}
.bon-lede { margin: 0 0 12px; font-size: 1.02rem; line-height: 1.6; color: var(--ink); }
.bon-lede-sub { color: var(--muted); }
.bon-smallprint {
  margin: 22px 0 0; padding: 0; list-style: none;
  font-size: .84rem; line-height: 1.7; color: var(--muted);
}
.bon-smallprint li::before { content: "✦ "; color: var(--pink-line); }

/* --- Buttons -------------------------------------------------------------- */

.bon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  width: auto; min-height: 52px; padding: 14px 26px;
  border: 1px solid var(--pink-line); border-radius: 999px;
  background: var(--bon-face); color: var(--ink);
  font: inherit; font-weight: 700; letter-spacing: .04em;
  cursor: pointer; transition: transform .12s ease, border-color .2s ease;
}
.bon-btn:hover { border-color: var(--pink); }
.bon-btn:active { transform: translateY(1px); }
.bon-btn:focus-visible { outline: 2px solid var(--pink-bright); outline-offset: 3px; }
.bon-btn-go {
  margin-top: 18px;
  background: linear-gradient(180deg, var(--pink-bright), var(--pink));
  border-color: transparent; color: #1a0511;
}
.bon-btn-ghost { background: transparent; }
.bon-hint { font-weight: 400; opacity: .6; font-size: .82em; letter-spacing: 0; }

/* --- HUD ------------------------------------------------------------------ */

.bon-hud {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 14px; min-height: 32px;
}
.bon-progress { margin: 0; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.bon-of { opacity: .5; }
.bon-pips { display: flex; gap: 5px; flex: 1 1 auto; flex-wrap: wrap; }
.bon-pip { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .16); }
.bon-pip.is-right { background: var(--bon-not); }
.bon-pip.is-wrong { background: var(--bon-bot); }
.bon-pip.is-skip { background: var(--muted); opacity: .5; }
.bon-undo {
  flex: 0 0 auto; width: auto;
  padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: .8rem; cursor: pointer;
}
.bon-undo:hover { color: var(--ink); border-color: var(--pink-line); }

/* --- The card ------------------------------------------------------------- */

.bon-stage { position: relative; min-height: 232px; display: grid; }
.bon-card {
  grid-area: 1 / 1;
  padding: 26px 24px;
  border: 1px solid var(--pink-line); border-radius: 22px;
  background:
    var(--bon-face),
    linear-gradient(180deg, #22101c, #190b15);
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}
.bon-card:active { cursor: grabbing; }
.bon-card.is-settled { cursor: default; }
.bon-card-meta {
  margin: 0 0 14px;
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.bon-card-body {
  font-size: 1.06rem; line-height: 1.62;
  white-space: pre-wrap; word-break: break-word;
}
.bon-card-body mark {
  background: rgba(255, 46, 154, .22);
  color: var(--ink);
  border-bottom: 2px solid var(--pink);
  border-radius: 3px; padding: 0 2px;
}

/* Drag feedback. The card leans and the verdict word fades up behind it, so
   the answer is legible before you commit to it. */
.bon-verdict {
  grid-area: 1 / 1; place-self: center;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(3rem, 14vw, 5rem); font-weight: 600; letter-spacing: .04em;
  opacity: 0; pointer-events: none; transition: opacity .1s linear;
}
.bon-verdict.show-bot { color: var(--bon-bot); }
.bon-verdict.show-not { color: var(--bon-not); }

/* --- Veil ----------------------------------------------------------------- */

.bon-veil {
  grid-area: 1 / 1; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 28px 24px; text-align: center;
  border: 1px dashed var(--pink-line); border-radius: 22px;
  background: linear-gradient(180deg, #1d0d18, #140a11);
}
.bon-veil-tag {
  margin: 0; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--pink-bright);
}
.bon-veil-copy { margin: 0; max-width: 34ch; color: var(--muted); line-height: 1.6; }
.bon-veil-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* --- Answers -------------------------------------------------------------- */

.bon-answers {
  display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center;
  margin-top: 18px;
}
.bon-btn-bot, .bon-btn-not { width: 100%; font-size: 1.05rem; }
.bon-btn-bot { border-color: rgba(255, 111, 142, .5); }
.bon-btn-bot:hover { border-color: var(--bon-bot); }
.bon-btn-not { border-color: rgba(118, 226, 171, .45); }
.bon-btn-not:hover { border-color: var(--bon-not); }
.bon-btn-icon { font-size: .9em; opacity: .8; }
.bon-unsure {
  width: auto; padding: 8px 12px;
  border: 0; background: none; color: var(--muted);
  font: inherit; font-size: .82rem; text-decoration: underline;
  text-underline-offset: 3px; cursor: pointer;
}
.bon-unsure:hover { color: var(--ink); }

/* --- Reveal --------------------------------------------------------------- */

.bon-reveal { margin-top: 20px; animation: bon-in .24s ease both; }
.bon-result {
  margin: 0 0 14px;
  font-size: 1.15rem; font-weight: 800; letter-spacing: .02em;
}
/* Never colour alone (spec 6.2) — the icon and the word carry it too. */
.bon-result.is-right { color: var(--bon-not); }
.bon-result.is-wrong { color: var(--bon-bot); }
.bon-result.is-skip  { color: var(--muted); }

.bon-flags { margin: 0 0 16px; display: grid; gap: 10px; }
.bon-flag {
  padding: 12px 14px;
  border-left: 2px solid var(--pink);
  background: rgba(255, 46, 154, .07);
  border-radius: 0 12px 12px 0;
}
.bon-flag-span { margin: 0 0 4px; font-weight: 700; font-size: .95rem; }
.bon-flag-span::before { content: "“"; } .bon-flag-span::after { content: "”"; }
.bon-flag-why { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--muted); }
.bon-explain { margin: 0 0 4px; font-size: 1rem; line-height: 1.65; }
.bon-caution {
  margin: 12px 0 0; padding: 10px 14px;
  border: 1px dashed var(--line); border-radius: 12px;
  font-size: .9rem; line-height: 1.55; color: var(--muted);
}
.bon-caution::before { content: "Still worth saying — "; color: var(--pink-bright); }

/* --- Template reveal ------------------------------------------------------ */

.bon-interstitial { text-align: center; }
.bon-interstitial-title {
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 600;
}
.bon-tiles { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); margin-bottom: 22px; }
.bon-tile {
  padding: 12px 14px; text-align: left;
  border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, .03);
  font-size: .84rem; line-height: 1.5; color: var(--muted);
}
.bon-punchline {
  margin: 0 0 20px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.5rem, 5vw, 2.1rem); color: var(--pink-bright);
}
.bon-skeleton {
  margin: 0 0 20px; padding: 0; list-style: none;
  display: grid; gap: 8px; text-align: left;
}
.bon-skeleton li { padding: 10px 14px; border-radius: 12px; background: rgba(255, 255, 255, .03); }
.bon-skeleton b { display: block; color: var(--ink); font-size: .95rem; }
.bon-skeleton span { font-size: .9rem; line-height: 1.5; color: var(--muted); }
.bon-interstitial .bon-explain { text-align: left; white-space: pre-line; }

/* --- Results -------------------------------------------------------------- */

.bon-score {
  margin: 4px 0 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(4rem, 20vw, 7rem); font-weight: 600; line-height: 1;
  color: var(--pink-bright);
  /* Cormorant defaults to old-style figures, which drop the 1 and 2 below the
     baseline and make "/12" read as "/I2" at this size. */
  font-variant-numeric: lining-nums;
}
.bon-score-of { font-size: .3em; color: var(--muted); letter-spacing: .04em; }
.bon-rank {
  margin: 6px 0 6px;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.6rem, 6vw, 2.3rem); font-weight: 600;
}
.bon-rank-sub { margin: 0 0 24px; color: var(--muted); line-height: 1.6; }

.bon-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 26px; }
.bon-stat {
  padding: 16px 14px; text-align: center;
  border: 1px solid var(--line); border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}
.bon-stat-bad { border-color: rgba(255, 111, 142, .35); }
.bon-stat-num {
  margin: 0; font-family: "Cormorant Garamond", Georgia, serif;
  font-size: clamp(1.9rem, 8vw, 2.6rem); font-weight: 600; line-height: 1;
  font-variant-numeric: lining-nums;
}
.bon-stat-bad .bon-stat-num { color: var(--bon-bot); }
.bon-stat-label { margin: 4px 0 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.bon-stat-detail { margin: 8px 0 0; font-size: .82rem; line-height: 1.45; color: var(--muted); }

.bon-breakdown { margin-bottom: 22px; }
.bon-breakdown-h {
  margin: 0 0 10px; font-size: .74rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--pink-bright);
}
.bon-breakdown-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.bon-breakdown-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 9px 14px; border-radius: 10px; background: rgba(255, 255, 255, .03);
  font-size: .92rem;
}
.bon-breakdown-list b { color: var(--muted); font-weight: 500; font-variant-numeric: tabular-nums; }
.bon-breakdown-note { margin: 10px 0 0; font-size: .85rem; line-height: 1.55; color: var(--muted); }
.bon-unsure-note { margin: 0 0 22px; font-size: .9rem; color: var(--muted); }

.bon-landing {
  padding: 18px 20px; margin-bottom: 22px;
  border: 1px solid var(--pink-line); border-radius: 18px;
  background: rgba(255, 46, 154, .05);
}
.bon-landing p { margin: 0 0 10px; font-size: .95rem; line-height: 1.6; }
.bon-landing p:last-child { margin-bottom: 0; }
.bon-landing-links { display: flex; gap: 18px; flex-wrap: wrap; }
.bon-link { color: var(--pink-bright); text-decoration: underline; text-underline-offset: 3px; }
.bon-link:hover { color: var(--ink); }

.bon-again { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bon-again .bon-btn { margin-top: 0; }
.bon-copied { font-size: .85rem; color: var(--ok); }

@media (max-width: 520px) {
  .bon-answers { grid-template-columns: 1fr 1fr; }
  .bon-unsure { grid-column: 1 / -1; order: 3; }
  .bon-stats { grid-template-columns: 1fr; }
}

/* Motion is decoration here — every state is reachable without it. */
@media (prefers-reduced-motion: reduce) {
  .bon-screen, .bon-reveal { animation: none; }
  .bon-card { transition: none !important; }
  .bon-verdict { transition: none; }
}