/* Wager features: the Play step (house bot / a person / a friend), the questions list, the free play page, the
   bot mark, the "burned" result, the stake picker, the "Get chips" link and the WHERE IT GOES rows. Owner: SITE. Theme tokens only (site/styles.css :root); no colours of its own
   beyond tints of those tokens. Loaded after ticket.css. */

/* ---- the story in one breath, between the hero and the picker: a line flanked by two short reeded bars ---- */
.story-line {
  display: flex; align-items: center; justify-content: center; gap: 12px; margin: 18px 0 2px; text-align: center;
  font-family: var(--font-ui); font-weight: 700; font-size: 16px; letter-spacing: .04em; color: var(--gold-3);
}
.story-line::before, .story-line::after {
  content: ""; flex: 0 1 44px; height: 8px; min-width: 12px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 1.5px, transparent 1.5px 5px); opacity: .8;
}

/* ---- 3. Play: two sides of the coin. Gold calls the house bot, ice finds a person. ---- */
.play-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
.btn.play-choice { width: 100%; flex-direction: column; gap: 6px; min-height: 78px; padding: 15px 14px 12px; text-align: center; }
.play-choice .play-main { font-family: var(--font-display); font-weight: 800; font-size: 17px; line-height: 1.1; letter-spacing: .08em; text-transform: uppercase; }
.play-choice small { font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; }
.btn.play-choice.person.gold {
  color: var(--ice); border-color: var(--ice-2);
  background: repeating-linear-gradient(90deg, rgba(223,233,245,.5) 0 1.5px, transparent 1.5px 5px) top left / 100% 5px no-repeat,
    linear-gradient(180deg, rgba(223,233,245,.13), rgba(223,233,245,.03)), var(--panel);
}
.btn.play-choice.person.gold:hover { border-color: var(--ice); box-shadow: 0 10px 30px -12px rgba(223,233,245,.6); }
.btn.play-choice.person.gold small { color: var(--ice-2); }
.btn.play-choice[disabled] { opacity: .55; }
.play-step .play-line {
  margin: 12px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--gold); color: var(--text); font-size: 15px; line-height: 1.45;
}
.play-step .play-third { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin: 12px 0 0; }
.play-q { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; color: var(--gold-3); font-weight: 700; font-size: 15px; letter-spacing: .04em; text-underline-offset: 4px; }
.play-q::before {
  content: "?"; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold-2); font-family: var(--font-mono); font-size: 13px; font-weight: 700; text-decoration: none;
}
@media (min-width: 620px) {
  .play-choices { grid-template-columns: 1fr 1fr; gap: 30px; }
  .play-choices.solo { grid-template-columns: 1fr; }
  /* the split between the two sides: one thin diagonal hairline in the gap */
  .play-choices:not(.solo) { position: relative; }
  .play-choices:not(.solo)::after {
    content: ""; position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, var(--gold), var(--ice)); opacity: .7;
    transform: rotate(18deg); pointer-events: none;
  }
}

/* ---- the questions (How it works): black glass rows with one cut corner, a mono number and a plus that opens ---- */
.faq { display: grid; gap: 8px; scroll-margin-top: 70px; }
.faq-item {
  --c: 10px; --dd: calc(var(--c) * .7071);
  border: 1px solid var(--line-soft); color: var(--text);
  background:
    linear-gradient(135deg, transparent calc(var(--dd) - .3px), var(--gold) calc(var(--dd) - .3px), var(--gold) calc(var(--dd) + 1.2px), transparent calc(var(--dd) + 1.2px)) top left / 36px 36px no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,0) 60%), var(--panel);
  background-origin: border-box;
  clip-path: polygon(var(--c) 0, 100% 0, 100% 100%, 0 100%, 0 var(--c));
}
.faq-item[open] {
  border-color: var(--line);
  background:
    linear-gradient(135deg, transparent calc(var(--dd) - .3px), var(--gold) calc(var(--dd) - .3px), var(--gold) calc(var(--dd) + 1.2px), transparent calc(var(--dd) + 1.2px)) top left / 36px 36px no-repeat,
    repeating-linear-gradient(90deg, rgba(244,180,12,.7) 0 1.5px, transparent 1.5px 5px) top left / 100% 4px no-repeat,
    linear-gradient(108deg, rgba(244,180,12,.1), rgba(244,180,12,.02) 60%, rgba(223,233,245,.05)), var(--panel);
  background-origin: border-box;
}
.faq-item > summary {
  list-style: none; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 14px 14px 14px 16px; min-height: 52px;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after { content: "+"; font-family: var(--font-mono); font-weight: 700; font-size: 22px; line-height: 1; color: var(--gold-2); width: 22px; text-align: center; }
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item > summary:hover .faq-q { color: var(--gold-3); }
.faq-item > summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -4px; }
.faq-n { font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .1em; color: var(--gold); }
.faq-q { font-family: var(--font-ui); font-weight: 700; font-size: 17px; line-height: 1.25; color: var(--text); }
.faq-a { margin: 0; padding: 0 16px 16px 46px; font-size: 16px; line-height: 1.5; color: var(--text); }
@media (max-width: 480px) { .faq-a { padding-left: 16px; } }

/* ---- #/cashier on free chips: one friendly line under the coin ---- */
.ticket.free-play { margin-top: 18px; padding: 30px 18px 26px; background: var(--cut-a), var(--cut-b), var(--reed), var(--split), var(--glass); background-origin: border-box; }
.ticket.free-play::before {
  content: ""; display: block; width: 64px; height: 64px; margin: 0 auto 14px; background: url(/favicon.svg) center / contain no-repeat;
  filter: drop-shadow(0 8px 18px rgba(244,180,12,.45));
}
.ticket.free-play h1 { color: var(--gold-2); margin-bottom: 8px; }
.free-play-line { font-size: 18px; font-weight: 600; line-height: 1.4; margin: 0; }

/* ---- the header: one currency ---- */
.chip-pill.chips-free { border-color: var(--gold); color: var(--gold-3); white-space: nowrap; }

/* ---- a house bot on the ice side of the versus header ---- */
.versus .who.bot { display: flex; align-items: center; justify-content: flex-end; gap: 7px; white-space: nowrap; letter-spacing: .03em; }
.bot-mark {
  flex: none; display: inline-block; padding: 2px 5px 1px; border: 1px solid var(--ice-2); border-radius: 2px;
  font-family: var(--font-mono); font-weight: 700; font-size: 10px; line-height: 1.3; letter-spacing: .14em; color: var(--ice);
  background: rgba(223,233,245,.08);
}
.versus .who.bot::before { display: none; } /* the bot mark stands where a player's dot would */

/* ---- the result when the house bot won: the stake was burned, not paid ---- */
.rt-burned {
  display: inline-block; margin-left: 12px; padding: 4px 9px 3px; border: 1px solid var(--gold); border-radius: 2px; vertical-align: middle;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; line-height: 1.2; letter-spacing: .18em; color: var(--gold-3);
  background: linear-gradient(180deg, rgba(244,180,12,.22), rgba(244,180,12,.06)); text-shadow: none;
}
@media (max-width: 480px) { .versus .who.bot { font-size: 15px; } .bot-mark { font-size: 9px; letter-spacing: .1em; } }

/* the house bot rule under the match ticket's figures: room above it */
.ticket.stub > .note { margin-top: 12px; }

/* ---- "Get chips": the small gold link beside the offer line and under the stake picker (only when the shop is open) ---- */
.get-chips {
  display: inline-flex; align-items: center; min-height: 28px; padding: 3px 10px 2px; border: 1px solid var(--gold-3); border-radius: 2px;
  font-family: var(--font-mono); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: var(--gold-ink); background: linear-gradient(180deg, var(--gold-3), var(--gold));
}
.get-chips:hover { box-shadow: 0 6px 18px -8px rgba(244,180,12,.9); }

/* ---- 2. Pick a stake: tidy buttons, the number over its unit. Seven of them sit in one row on a desktop and as
   four over three on a phone; nothing scrolls sideways. The picked one is lit in gold (styles.css). ---- */
.stakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; }
.stakes .stake { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 0; min-height: 58px; padding: 9px 2px 8px; line-height: 1; }
.stake .stake-n { font-family: var(--font-mono); font-weight: 700; font-size: 18px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.stake .stake-u { font-family: var(--font-ui); font-weight: 700; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }
.stake[aria-pressed="true"] .stake-u { color: var(--gold-ink); }
.stakes.n7 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.stakes.n7 .stake { grid-column: span 3; }
.stakes.n7 .stake:nth-child(n+5) { grid-column: span 4; }
@media (min-width: 620px) {
  .stakes.n7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .stakes.n7 .stake, .stakes.n7 .stake:nth-child(n+5) { grid-column: auto; }
}
.stake-short {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 10px 0 0; padding: 9px 12px;
  border-left: 3px solid var(--gold); background: rgba(244,180,12,.08); font-size: 15px; font-weight: 600; color: var(--text);
}

/* ---- WHERE IT GOES: two short passes, a gold stub for chips and an ice stub for SOL ---- */
.strip.goes { padding: 14px; }
.goes-rows { display: grid; gap: 10px; margin: 0; }
.goes-row {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); align-items: stretch;
  border: 1px solid var(--line); border-radius: 2px; background: linear-gradient(180deg, rgba(255,255,255,.05), transparent), var(--panel-2);
}
.goes-row dt {
  display: grid; place-items: center; padding: 10px 4px; border-right: 1px dashed var(--gold);
  font-family: var(--font-display); font-weight: 800; font-size: 13px; letter-spacing: .08em; color: var(--gold-ink);
  background: linear-gradient(180deg, var(--gold-3), var(--gold) 70%);
}
.goes-row.sol { border-color: var(--ice-2); }
.goes-row.sol dt { border-right-color: var(--ice-2); color: var(--ice); background: linear-gradient(180deg, rgba(223,233,245,.2), rgba(223,233,245,.06)); }
.goes-row dd { margin: 0; padding: 11px 12px; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--text); }

/* the three figures under the picker stay on one line each on a phone ("0.475 chips") */
@media (max-width: 480px) { .sums b { font-size: 14px; white-space: nowrap; } }