/* ---------------------------------------------------------------- /ask */
.ask-page { padding-bottom: 48px; }
.ask-box { display: flex; gap: 10px; align-items: center; padding: 14px; margin-bottom: 14px; }
.ask-box .ask-input { flex: 1; min-width: 0; font-size: 16px; }
.ask-send { background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: 15px; border: 0; border-radius: 10px; padding: 12px 20px; cursor: pointer; white-space: nowrap; }
.ask-send:hover { background: var(--amber-hover); }
.ask-send:disabled { opacity: .45; cursor: default; }
.ask-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.ask-chip { background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.ask-chip:hover { border-color: var(--petrol); }
.ask-thread { display: flex; flex-direction: column; gap: 26px; }
.ask-turn { display: flex; flex-direction: column; gap: 12px; }
.ask-q { align-self: flex-end; max-width: min(560px, 100%); background: var(--petrol); color: #fff; font-size: 16px; font-weight: 600; border-radius: 14px 14px 4px 14px; padding: 12px 16px; margin: 0; }
.ask-a { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 12px; padding: 16px 18px; }
.ask-a p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--text); }
.ask-match { display: inline-block; background: var(--petrol); color: #fff; font-family: var(--font-mono), ui-monospace, monospace; font-size: 13px; font-weight: 700; border-radius: 6px; padding: 4px 9px; margin-bottom: 8px; }
.ask-guides { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ask-guide { font-size: 14px; font-weight: 600; color: var(--petrol); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; text-decoration: none; }
.ask-guide:hover { border-color: var(--petrol); }
.ask-games { margin-top: 2px; }
.ask-refine { align-self: flex-start; background: none; border: 1px dashed var(--line); color: var(--muted); font-size: 14px; font-weight: 600; border-radius: 10px; padding: 9px 14px; cursor: pointer; }
.ask-refine:hover { color: var(--text); border-color: var(--petrol); }
.ask-thinking { display: flex; gap: 5px; padding: 6px 2px; }
.ask-thinking i { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); animation: ask-blink 1.1s infinite ease-in-out; }
.ask-thinking i:nth-child(2) { animation-delay: .15s; }
.ask-thinking i:nth-child(3) { animation-delay: .3s; }
@keyframes ask-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
.ask-quiz { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 16px; }
.ask-quiz-q p { margin: 0 0 8px; font-size: 16px; font-weight: 600; color: var(--text); }
.ask-quiz-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-opt { background: var(--tint); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; border-radius: 8px; padding: 9px 13px; cursor: pointer; }
.ask-opt:hover { border-color: var(--petrol); }
.ask-opt.on { background: var(--petrol); border-color: var(--petrol); color: #fff; }
.ask-quiz-go { align-self: flex-start; }
.ask-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ask-how-step { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 18px; }
.ask-how-step h3 { margin: 10px 0 6px; font-size: 17px; }
.ask-how-step p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.ask-step-n { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: 14px; }
.ask-note { margin-top: 28px; font-size: 13px; line-height: 1.5; color: var(--faint); }
@media (max-width: 760px) {
  .ask-how-grid { grid-template-columns: 1fr; }
  .ask-box { flex-wrap: wrap; }
  .ask-box .ask-input { flex: 1 1 100%; }
  .ask-send { width: 100%; }
}

/* ---------------------------------------------------------------- /ask: conversation, not a search box */
.ask-hero { text-align: center; max-width: 720px; margin: 0 auto 22px; }
.ask-hero h1 { margin: 0 0 10px; }
.ask-hero p { margin: 0 auto; max-width: 620px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.ask-badge { display: inline-flex; align-items: center; gap: 7px; background: var(--petrol); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .3px; border-radius: 999px; padding: 7px 14px; margin-bottom: 14px; }
.ask-badge svg { width: 15px; height: 15px; }
.ask-panel { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; max-width: 860px; margin: 0 auto 28px; }
.ask-panel-head { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--line); background: var(--tint); }
.ask-who { display: flex; flex-direction: column; line-height: 1.3; }
.ask-who b { font-size: 16px; color: var(--text); }
.ask-who small { font-size: 13px; color: var(--muted); }
.ask-who small::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2f855a; margin-right: 6px; vertical-align: middle; }
.ask-avatar { flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--amber); color: var(--amber-ink); font-size: 13px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.ask-thread { display: flex; flex-direction: column; gap: 18px; padding: 20px 18px; min-height: 120px; max-height: none; }
.ask-turn { display: flex; flex-direction: column; gap: 12px; }
.ask-msg { display: flex; gap: 10px; align-items: flex-start; }
.ask-msg-me { justify-content: flex-end; }
.ask-msg .ask-bubble { background: var(--tint); border-radius: 14px 14px 14px 4px; padding: 13px 16px; max-width: min(620px, 86%); }
.ask-msg-me .ask-bubble { background: var(--petrol); color: #fff; border-radius: 14px 14px 4px 14px; font-weight: 600; }
.ask-msg .ask-bubble p { margin: 0 0 9px; font-size: 16px; line-height: 1.55; color: inherit; }
.ask-msg .ask-bubble p:last-child { margin-bottom: 0; }
.ask-typing .ask-bubble { padding: 15px 16px; }
.ask-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 0 18px 14px; margin: 0; }
.ask-chips-label { font-size: 13px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: .6px; }
.ask-chip { background: var(--card); border: 1px solid var(--line); color: var(--text); font-size: 14px; font-weight: 600; border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.ask-chip:hover { border-color: var(--petrol); }
.ask-composer { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); background: var(--tint); }
.ask-composer .ask-input { flex: 1; min-width: 0; font-size: 16px; border: 1px solid var(--line); background: var(--card); border-radius: 12px; padding: 13px 15px; color: var(--text); }
.ask-composer .ask-input:focus { outline: 2px solid var(--petrol); outline-offset: -1px; }
.ask-send { display: inline-flex; align-items: center; gap: 8px; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: 15px; border: 0; border-radius: 12px; padding: 13px 18px; cursor: pointer; }
.ask-send svg { width: 17px; height: 17px; }
.ask-send:hover { background: var(--amber-hover); }
.ask-games, .ask-refine, .ask-quiz { margin-left: 44px; }
@media (max-width: 760px) {
  .ask-games, .ask-refine, .ask-quiz { margin-left: 0; }
  .ask-msg .ask-bubble { max-width: 100%; }
  .ask-composer { flex-wrap: wrap; }
  .ask-composer .ask-input { flex: 1 1 100%; }
  .ask-send { width: 100%; justify-content: center; }
  .ask-send span { display: inline; }
}

/* ---------------------------------------------------------------- /ask: the console */
.ask-console {
  background: var(--petrol-dark);
  /* Flat dot texture (an SVG, not a gradient) so the dark block has depth without a wash of colour. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.5' cy='1.5' r='1' fill='%23ffffff' fill-opacity='0.05'/%3E%3C/svg%3E");
  border-bottom: 1px solid var(--petrol-line);
  min-height: 72vh;
  display: flex;
  align-items: center;
  padding: 56px 0;
  margin-bottom: 30px;
  text-align: center;
}
.ask-console .container { max-width: 860px; }
.ask-page .ask-console h1 {
  margin: 0 0 16px;
  color: #fff;
  font-size: clamp(32px, 5.4vw, 54px);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: -1.6px;
  line-height: 1.06;
}
.ask-page .ask-console h1 b { font-weight: 600; color: var(--amber); display: block; text-transform: uppercase; }
.ask-console .ask-sub { margin: 0 auto 30px; max-width: 580px; font-size: 17px; line-height: 1.6; color: var(--petrol-text); }
.ask-console .ask-badge { background: rgba(255,255,255,.06); color: #fff; border: 1px solid var(--petrol-line); margin-bottom: 20px; }

/* Dark input on dark ground — the detail that stops it reading as a search bar. */
.ask-console .ask-composer {
  display: flex; align-items: center; gap: 12px;
  background: #0d1526; border: 1px solid var(--petrol-line); border-radius: 16px;
  padding: 9px 9px 9px 18px; max-width: 680px; margin: 0 auto;
  transition: border-color .15s ease;
}
.ask-console .ask-composer:focus-within { border-color: var(--amber); }
.ask-composer-icon { flex: none; display: inline-flex; color: var(--amber); }
.ask-composer-icon svg { width: 19px; height: 19px; }
.ask-console .ask-input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; color: #fff; padding: 14px 0; }
.ask-console .ask-input:focus { outline: none; }
.ask-console .ask-input::placeholder { color: #8395b3; }
.ask-kbd { flex: none; font-family: var(--font-mono), ui-monospace, monospace; font-size: 12px; color: #8395b3; border: 1px solid var(--petrol-line); border-radius: 6px; padding: 4px 8px; }
.ask-console .ask-send { flex: none; width: 48px; height: 48px; padding: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: var(--amber); color: var(--amber-ink); border: 0; cursor: pointer; }
.ask-console .ask-send svg { width: 20px; height: 20px; }
.ask-console .ask-send:hover { background: var(--amber-hover); }

.ask-console .ask-chips { display: flex; flex-wrap: nowrap; gap: 9px; justify-content: center; overflow-x: auto; padding: 20px 2px 4px; margin: 0 auto; max-width: 820px; scrollbar-width: none; }
.ask-console .ask-chips::-webkit-scrollbar { display: none; }
.ask-console .ask-chip { flex: none; background: rgba(255,255,255,.05); border: 1px solid var(--petrol-line); color: #d7dfec; white-space: nowrap; font-weight: 500; }
.ask-console .ask-chip:hover { background: rgba(255,255,255,.1); border-color: var(--amber); color: #fff; }

.ask-stats { display: flex; justify-content: center; gap: 34px; flex-wrap: wrap; margin: 30px 0 0; padding-top: 24px; border-top: 1px solid var(--petrol-line); }
.ask-stats span { display: flex; flex-direction: column; gap: 3px; }
.ask-stats b { font-family: var(--font-mono), ui-monospace, monospace; font-size: 22px; font-weight: 600; color: #fff; }
.ask-stats small { font-size: 13px; color: #8395b3; }
.ask-trust { display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 14px; color: #8395b3; }
.ask-trust i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.ask-page .ask-panel { max-width: 860px; margin: 0 auto 28px; }
.ask-page .ask-panel .ask-thread { padding: 20px 18px; }
@media (max-width: 760px) {
  .ask-console { min-height: 0; padding: 40px 0; }
  .ask-console .ask-chips { justify-content: flex-start; }
  .ask-kbd { display: none; }
  .ask-stats { gap: 22px; }
}

/* Thinking steps and typed answers */
.ask-step { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(3px); }
.ask-step.in { animation: ask-step-in .28s ease forwards; }
.ask-step::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--amber); animation: ask-spin .7s linear infinite; flex: none; }
@keyframes ask-step-in { to { opacity: 1; transform: none; } }
@keyframes ask-spin { to { transform: rotate(360deg); } }
.ask-answer p { margin: 0 0 10px; font-size: 16px; line-height: 1.6; }
.ask-answer p:last-child { margin-bottom: 0; }
.ask-answer strong { font-weight: 700; }

/* ---- the conversation lives inside the dark console, under the box ---- */
.ask-console .ask-thread { max-width: 700px; margin: 22px auto 0; padding: 0; display: flex; flex-direction: column; gap: 16px; text-align: left; }
.ask-console .ask-msg .ask-bubble { background: #0d1526; border: 1px solid var(--petrol-line); color: #e8edf6; }
.ask-console .ask-msg-me .ask-bubble { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.ask-console .ask-answer p, .ask-console .ask-bubble p { color: #e8edf6; }
.ask-console .ask-msg-me .ask-bubble p { color: var(--amber-ink); }
.ask-console .ask-answer strong { color: #fff; }
.ask-console .ask-step { color: #8fa0bb; }
.ask-console .ask-step::before { border-color: var(--petrol-line); border-top-color: var(--amber); }
.ask-console .ask-match { background: var(--amber); color: var(--amber-ink); }
.ask-console .ask-guide { color: #cfd9e8; border-color: var(--petrol-line); background: rgba(255,255,255,.04); }
.ask-console .ask-refine { color: #aebbd0; border-color: var(--petrol-line); }
.ask-console .ask-refine:hover { color: #fff; border-color: var(--amber); }
.ask-console .ask-quiz { background: #0d1526; border-color: var(--petrol-line); }
.ask-console .ask-quiz-q p { color: #fff; }
.ask-console .ask-opt { background: rgba(255,255,255,.05); border-color: var(--petrol-line); color: #d7dfec; }
.ask-console .ask-opt.on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.ask-console .ask-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-top: 4px; }
.ask-console .ask-card .game-card { background: #fff; }

/* Once a question is asked the hero shrinks so the answer sits near the top of the screen. */
.ask-page.is-live .ask-console { min-height: 0; padding: 26px 0 36px; }
.ask-page.is-live .ask-intro { display: none; }
.ask-page.is-live .ask-belt { display: none; }
.ask-page.is-live .ask-console .ask-chips { padding-top: 14px; }

/* ---- the popup --------------------------------------------------------- */
body.ask-modal-open { overflow: hidden; }
.ask-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; }
.ask-modal[hidden] { display: none; }
.ask-modal-backdrop { position: absolute; inset: 0; background: rgba(8, 13, 24, .74); }
.ask-modal-card { position: relative; width: min(760px, 100%); max-height: 86vh; display: flex; flex-direction: column; background: var(--petrol-dark); border: 1px solid var(--petrol-line); border-radius: 20px; overflow: hidden; animation: ask-modal-in .18s ease; }
@keyframes ask-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ask-modal-head { display: flex; align-items: center; gap: 11px; padding: 16px 18px; border-bottom: 1px solid var(--petrol-line); }
.ask-modal-head .ask-who b { color: #fff; font-size: 16px; }
.ask-modal-head .ask-who small { color: #8fa0bb; font-size: 13px; }
.ask-modal-head .ask-who small::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #35c07f; margin-right: 6px; vertical-align: middle; }
.ask-modal-x { margin-left: auto; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--petrol-line); background: rgba(255,255,255,.04); color: #cfd9e8; font-size: 20px; line-height: 1; cursor: pointer; }
.ask-modal-x:hover { background: rgba(255,255,255,.1); color: #fff; }
.ask-modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 18px; }
.ask-modal-body .ask-msg .ask-bubble { background: #0d1526; border: 1px solid var(--petrol-line); color: #e8edf6; }
.ask-modal-body .ask-msg-me .ask-bubble { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.ask-modal-body .ask-bubble p, .ask-modal-body .ask-answer p { color: #e8edf6; }
.ask-modal-body .ask-msg-me .ask-bubble p { color: var(--amber-ink); }
.ask-modal-body .ask-answer strong { color: #fff; }
.ask-modal-body .ask-step { color: #8fa0bb; }
.ask-modal-body .ask-step::before { border-color: var(--petrol-line); border-top-color: var(--amber); }
.ask-modal-body .ask-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; margin-left: 44px; }
.ask-modal-body .ask-refine { color: #aebbd0; border-color: var(--petrol-line); margin-left: 44px; }
.ask-modal-body .ask-refine:hover { color: #fff; border-color: var(--amber); }
.ask-modal-body .ask-quiz { background: #0d1526; border-color: var(--petrol-line); margin-left: 44px; }
.ask-modal-body .ask-quiz-q p { color: #fff; }
.ask-modal-body .ask-opt { background: rgba(255,255,255,.05); border-color: var(--petrol-line); color: #d7dfec; }
.ask-modal-body .ask-opt.on { background: var(--amber); border-color: var(--amber); color: var(--amber-ink); }
.ask-modal-body .ask-guide { color: #cfd9e8; border-color: var(--petrol-line); background: rgba(255,255,255,.04); }
.ask-modal-composer { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--petrol-line); background: #0d1526; }
.ask-modal-composer .ask-input { flex: 1; min-width: 0; background: var(--petrol-dark); border: 1px solid var(--petrol-line); border-radius: 12px; padding: 13px 15px; color: #fff; font-size: 16px; }
.ask-modal-composer .ask-input:focus { outline: none; border-color: var(--amber); }
.ask-modal-composer .ask-send { width: 46px; height: 46px; border-radius: 12px; font-size: 20px; }
@media (max-width: 760px) {
  .ask-modal { padding: 0; }
  .ask-modal-card { width: 100%; max-height: 100%; height: 100%; border-radius: 0; border: 0; }
  .ask-modal-body .ask-games, .ask-modal-body .ask-refine, .ask-modal-body .ask-quiz { margin-left: 0; }
}

/* Phone polish: momentum scrolling, and keep the notch and home bar out of the content. */
.ask-modal-body { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
@media (max-width: 760px) {
  .ask-modal-card { height: 100dvh; max-height: 100dvh; }
  .ask-modal-head { padding-top: calc(16px + env(safe-area-inset-top)); }
  .ask-modal-composer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .ask-modal-body { padding: 16px 14px; gap: 16px; }
  .ask-modal-body .ask-msg .ask-bubble { max-width: 100%; }
  .ask-modal-body .ask-games { grid-template-columns: 1fr; }
  .ask-modal-composer .ask-input { font-size: 16px; /* stops iOS zooming the page on focus */ }
}

/* The scroller must be allowed to shrink, or it grows to fit its content and shoves the
   ask box off the bottom of the screen. */
.ask-modal-card { min-height: 0; }
.ask-modal-body { min-height: 0; }
.ask-modal-head, .ask-modal-composer { flex: 0 0 auto; }

/* On phones the card is pinned to the edges rather than centred: centring relies on the popup box
   and the card resolving to the same height, and vh/dvh disagree often enough to push it off. */
@media (max-width: 760px) {
  .ask-modal { align-items: stretch; justify-content: stretch; }
  .ask-modal-card { position: absolute; inset: 0; width: 100%; height: auto; max-height: none; animation: none; }
}

/* Casinos inside the popup — plainer than the game cards, and never auto-shown. */
.ask-casinos { display: flex; flex-direction: column; gap: 10px; margin-left: 44px; }
.ask-casino { background: #0d1526; border: 1px solid var(--petrol-line); border-radius: 12px; padding: 16px 18px; }

/* Two columns: everything you read on the left, the score and the one action on the right. */
.ask-casino-body { display: grid; grid-template-columns: 1fr 148px; gap: 18px; align-items: start; }
.ask-casino-main { min-width: 0; }
.ask-casino-side { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }
.ask-casino-side .ask-casino-cta { display: block; width: 100%; box-sizing: border-box; padding: 11px 14px; }
.ask-casino-side .ask-casino-licence { margin-top: 0; }
.ask-casino-offer { margin: 0; font-size: 15.5px; font-weight: 700; line-height: 1.4; color: #fff; }
.ask-casino-score { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.ask-casino-score .sr-score-badge { display: flex; align-items: center; justify-content: center; width: 56px; height: 44px; border-radius: 10px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #fff; font-family: var(--font-mono), ui-monospace, monospace; font-size: 19px; font-weight: 700; }
.ask-casino-score .sr-stars { display: flex; gap: 1px; font-size: 12px; line-height: 1; }
.ask-casino-score .sr-stars i { font-style: normal; color: rgba(255,255,255,.22); }
.ask-casino-score .sr-stars i.on { color: var(--amber); }
.ask-casino-score .sr-stars i.half { position: relative; }
.ask-casino-score .sr-stars i.half::before { content: "\2605"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--amber); }
.ask-casino .sr-casino-tags { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 0; }
.ask-casino .sr-tag { font-size: 11.5px; font-weight: 700; color: rgba(255,255,255,.72); background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 6px; padding: 2px 7px; }
.ask-casino .sr-tag.good { color: var(--amber); background: rgba(201,162,39,.14); border-color: rgba(201,162,39,.5); }
.ask-casino-name b { display: block; font-size: 11px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; color: #8fa0bb; margin-bottom: 2px; }

/* Narrow: the action column drops under the text and the button goes full width. */
@media (max-width: 620px) {
  .ask-casino-body { grid-template-columns: 1fr; gap: 14px; }
  .ask-casino-side { align-items: stretch; text-align: left; gap: 10px; }
  .ask-casino-score { flex-direction: row; justify-content: flex-start; align-items: center; gap: 10px; }
  .ask-casino-score .sr-stars { font-size: 14px; }
  .ask-casino-side .ask-casino-cta { text-align: center; }
}
.ask-casino-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.ask-casino-logo { width: 44px; height: 44px; object-fit: contain; border-radius: 8px; background: rgba(255,255,255,.06); flex: none; }
.ask-casino-name { font-size: 17px; font-weight: 700; color: #fff; display: flex; flex-direction: column; }
.ask-casino-name small { font-size: 14px; font-weight: 600; color: var(--amber); margin-top: 2px; }
.ask-casino-text { margin: 9px 0 0; font-size: 14.5px; line-height: 1.55; color: #cfd9e8; }
.ask-casino-cta { display: inline-block; background: var(--amber); color: var(--amber-ink); font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 9px; text-decoration: none; }
.ask-casino-cta.is-soon { background: transparent; border: 1px dashed var(--petrol-line); color: #8fa0bb; font-weight: 600; }
.ask-casino-licence, .ask-casino-terms { display: block; margin-top: 7px; font-size: 12px; line-height: 1.5; color: #8fa0bb; }
.ask-casino-terms { padding-top: 10px; margin-top: 12px; border-top: 1px solid var(--petrol-line); }
.ask-casino-rg { margin: 12px 0 0 44px; font-size: 13px; font-weight: 600; color: #cfd9e8; }
.ask-refine-casino { border-style: solid; border-color: var(--amber); color: var(--amber); }
.ask-refine-casino:hover { background: var(--amber); color: var(--amber-ink); }
@media (max-width: 760px) { .ask-casinos, .ask-casino-rg { margin-left: 0; } }

/* The quiet strip on the console, visible before anyone asks. */
/* Real-money strip — a plain card, not a banner: it has to read as information, not an ad. */
.ask-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  width: 100%; max-width: 680px; margin: 16px auto 0; box-sizing: border-box;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-left: 3px solid var(--amber);
  border-radius: 12px; padding: 14px 18px; cursor: pointer; text-align: left; text-decoration: none;
  font: inherit; transition: border-color .15s ease, background .15s ease;
}
.ask-strip:hover { background: rgba(255,255,255,.07); border-color: rgba(201,162,39,.5); border-left-color: var(--amber); }
.ask-strip-text { display: block; min-width: 0; }
.ask-strip-text b { display: block; font-size: 15.5px; font-weight: 700; color: #fff; }
.ask-strip-text small { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.62); }
.ask-strip-go { flex: none; display: inline-flex; align-items: center; gap: 7px; background: var(--amber); color: var(--amber-ink); font-size: 14.5px; font-weight: 800; white-space: nowrap; border-radius: 10px; padding: 11px 18px; }
.ask-strip:hover .ask-strip-go { background: var(--amber-hover, #d8ae2a); }
@media (max-width: 560px) {
  .ask-strip { flex-direction: column; align-items: flex-start; gap: 10px; }
  .ask-strip-go { align-self: stretch; justify-content: center; padding: 12px 16px; }
}

/* Editor's pick and the casino suggestion chip inside the assistant. */
.ask-casino.is-pick { border-color: var(--amber); position: relative; padding-top: 22px; }
.ask-casino-flag { position: absolute; top: -11px; left: 16px; background: var(--amber); color: var(--amber-ink); font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; border-radius: 999px; padding: 5px 12px; }
.ask-casino-why { margin: 8px 0 0; font-size: 14px; line-height: 1.5; color: var(--amber); }
.ask-chip-casino { background: rgba(201,162,39,.12) !important; border-color: rgba(201,162,39,.5) !important; color: var(--amber) !important; font-weight: 700 !important; }

/* A promotion under an answer. Deliberately quieter than the answer itself: the ad promised an
   assistant, so the assistant speaks first and the offer sits below it. */
.ask-promo { margin: 12px 0 0 44px; background: rgba(201,162,39,.07); border: 1px solid rgba(201,162,39,.4); border-radius: 12px; overflow: hidden; }
.ask-promo-img { display: block; width: 100%; height: auto; }
.ask-promo-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 17px; }
.ask-promo-body { min-width: 0; }
.ask-promo-title { display: block; font-size: 16.5px; font-weight: 800; color: #fff; line-height: 1.3; }
.ask-promo-text { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: #cfd9e8; }
.ask-promo-cta { flex: none; display: inline-block; background: var(--amber); color: var(--amber-ink); font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 10px; text-decoration: none; white-space: nowrap; }
.ask-promo-cta:hover { background: var(--amber-hover, #d8ae2a); }
.ask-promo-terms { display: block; padding: 0 17px 13px; font-size: 11.5px; line-height: 1.5; color: #8fa0bb; }
@media (max-width: 620px) {
  .ask-promo { margin-left: 0; }
  .ask-promo-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .ask-promo-cta { text-align: center; }
}

/* "Play it for real at …" under a game in an answer.
   Styled as the card's own buttons rather than as a banner: it is the next step from the answer
   they asked for, so it should look like the other things you can do with that game. */
.ask-play-at { display: block; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--line); }
.ask-play-at-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.ask-play-at-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; }
.ask-play-at-link { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 6px; border-radius: 10px; border: 1px solid var(--petrol); background: var(--petrol); color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; text-align: center; }
.ask-play-at-link + .ask-play-at-link { background: #fff; color: var(--petrol); }
.ask-play-at-link:hover { opacity: .92; }
.ask-play-at-link + .ask-play-at-link:hover { background: var(--tint); opacity: 1; }

/* One handoff for the whole answer: text left, the casinos right, on a single line. */
.ask-playbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 12px 0 0 44px; padding: 12px 15px; background: rgba(201,162,39,.08); border: 1px solid rgba(201,162,39,.35); border-radius: 12px; }
.ask-playbar-label { font-size: 14.5px; font-weight: 700; color: #fff; }
.ask-playbar-row { display: flex; gap: 8px; flex: none; }
.ask-playbar-link { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 18px; border-radius: 10px; background: var(--amber); color: var(--amber-ink); font-size: 14.5px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.ask-playbar-link + .ask-playbar-link { background: transparent; color: var(--amber); border: 1px solid rgba(201,162,39,.55); }
.ask-playbar-link:hover { opacity: .92; }
@media (max-width: 760px) {
  .ask-playbar { margin-left: 0; flex-direction: column; align-items: stretch; gap: 10px; }
  .ask-playbar-row { display: grid; grid-template-columns: 1fr 1fr; }
}

/* ------------------------------------------------------------------ the floating launcher */
/* A pill in the corner that opens the assistant's own panel. The panel reuses .ask-panel, so
   it inherits every answer style the page already has and nothing is drawn twice. */
.sr-float {
  position: fixed; z-index: 9998; bottom: 18px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
}
.sr-float.is-in { opacity: 1; transform: none; }
/* A display rule of our own beats the browser's [hidden], so say it again here. */
.sr-float[hidden], .sr-float-panel[hidden] { display: none !important; }
.sr-float-right { right: 18px; align-items: flex-end; }
.sr-float-left { left: 18px; align-items: flex-start; }
.sr-float-pill {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--petrol); color: #fff; font-size: 15.5px; font-weight: 700; cursor: pointer;
  box-shadow: 0 10px 28px rgba(12, 22, 40, .3);
}
.sr-float-pill:hover { background: var(--petrol-hover, #16233c); }
.sr-float-arrow { color: var(--amber); font-weight: 800; }
.sr-float.is-open .sr-float-pill { display: none; }

.sr-float-panel {
  width: min(420px, calc(100vw - 32px));
  max-height: min(640px, calc(100vh - 100px));
  display: flex; flex-direction: column; margin: 0;
  box-shadow: 0 24px 60px rgba(12, 22, 40, .28);
}
.sr-float-panel .ask-panel-head { flex: none; }
.sr-float-x { margin-left: auto; background: transparent; border: 0; color: var(--muted); font-size: 22px; line-height: 1; padding: 0 2px; cursor: pointer; }
.sr-float-x:hover { color: var(--text); }

/* The box you type in stays at the bottom; the conversation takes the rest and scrolls. */
.sr-float-body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 0; overflow: hidden; }
.sr-float-body .ask-thread { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.sr-float-body .ask-chips { flex: none; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.sr-float-body .ask-chips::-webkit-scrollbar { display: none; }
.sr-float-body .ask-chip { flex: none; white-space: nowrap; }
.sr-float-body .ask-composer { flex: none; }
.sr-float-body .ask-games { grid-template-columns: 1fr; margin-left: 0; }
.sr-float-body .ask-refine, .sr-float-body .ask-quiz { margin-left: 0; }
.sr-float-body .ask-msg .ask-bubble { max-width: 100%; }

@media (max-width: 760px) {
  .sr-float { left: 12px; right: 12px; bottom: 12px; align-items: stretch; }
  .sr-float-pill { justify-content: center; }
  .sr-float-panel { width: 100%; max-height: calc(100vh - 86px); }
}

/* The optional second line under "Play it for real at" — smaller and grey, so it reads as a
   note rather than another label competing with the buttons. */
.ask-play-at-head { display: block; margin-bottom: 8px; }
.ask-play-at-head .ask-play-at-label { margin-bottom: 0; }
.ask-play-at-sub { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--muted); }
.ask-playbar .ask-play-at-head { margin-bottom: 9px; }
.ask-console .ask-play-at-sub { color: #9fb0c9; }

/* The offer lines, above the buttons. The buttons stay plain names. */
.ask-play-at-offers { margin: 0 0 9px; }
.ask-play-at-offers p { margin: 0 0 3px; font-size: 13px; line-height: 1.4; color: var(--text); }
.ask-play-at-offers p:last-child { margin-bottom: 0; }
.ask-play-at-offers b { font-weight: 700; }
.ask-console .ask-play-at-offers p { color: #d7dfec; }

/* In an answer the artwork is scene-setting, not the point — a 4:3 block pushes the numbers and
   the buttons below the fold on a phone. Only inside answers; the grids elsewhere are untouched. */
html body .ask-card .game-card .thumb { aspect-ratio: 16 / 7; }
/* Play free and Review in two columns, matching the casino row underneath. The theme stacks
   them in a narrow card; in an answer there is room for both and the card reads shorter. */
html body .ask-card .game-card .game-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---- the two-column answer card (optional, Control → Ask AI) ----------------------------- */
/* Numbers left, buttons right; offers left, casinos right. A container query, not a page one:
   the same card is full width inside the chat and a narrow grid column on a desktop answer, and
   below about 330px the two columns collide. The card measures itself. */
.ask-card { container-type: inline-size; }

@container (min-width: 330px) {
  html body .ask-card.ask-compact .game-card .game-card-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(104px, .65fr); column-gap: 14px; align-items: start; }
  html body .ask-card.ask-compact .game-card .game-card-title,
  html body .ask-card.ask-compact .game-card .game-card-provider,
  html body .ask-card.ask-compact .game-card .card-plays,
  html body .ask-card.ask-compact .game-card .ask-play-at { grid-column: 1 / -1; }
  html body .ask-card.ask-compact .game-card .card-specs { grid-column: 1; grid-row: 3; margin-bottom: 0; }
  /* !important only here, and only inside an answer card. The site's own Additional CSS forces
     two columns on .game-actions below 767px with !important of its own, which in this narrow
     column leaves two 51px buttons sitting on top of each other. Nothing but !important beats
     !important, and the rest of the site keeps its two-column actions untouched. */
  html body .ask-card.ask-compact .game-card .game-actions { grid-column: 2; grid-row: 3; grid-template-columns: 1fr !important; gap: 8px; margin-top: 0; padding-top: 0; align-self: center; }
  html body .ask-card.ask-compact .game-card .card-plays { grid-row: 4; }
  html body .ask-card.ask-compact .game-card .ask-play-at { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(104px, .65fr); column-gap: 14px; align-items: start; }
  html body .ask-card.ask-compact .game-card .ask-play-at-head { grid-column: 1; grid-row: 1; }
  /* No offer text written yet: there is nothing for a left column to hold, so this block drops
     out of the two-column layout entirely — label on its own line, both casinos side by side
     across the full width. Tidier than a centred label beside empty space, and shorter. */
  html body .ask-card.ask-compact .game-card .ask-play-at:not(.has-offers) { display: block; }
  html body .ask-card.ask-compact .game-card .ask-play-at:not(.has-offers) .ask-play-at-row { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  html body .ask-card.ask-compact .game-card .ask-play-at-offers { grid-column: 1; grid-row: 2; }
  html body .ask-card.ask-compact .game-card .ask-play-at-row { grid-column: 2; grid-row: 1 / span 2; grid-template-columns: 1fr; gap: 8px; align-content: center; }
}

/* Whatever else is in play, a button in that column wraps rather than spilling over its edge. */
html body .ask-card.ask-compact .game-card .game-actions > a,
html body .ask-card.ask-compact .game-card .ask-play-at-row > a { white-space: normal; min-width: 0; }