/* One compact hero for every game. Artwork stays in the banner on mobile. */
.bt-hero { position: relative; display: flex; align-items: center; width: 100%; max-width: 100%; min-height: 176px; box-sizing: border-box; overflow: hidden; isolation: isolate; border: 1px solid #e8c07a25; border-radius: 12px; background: #0b1828; margin-bottom: 20px; }
.bt-hero-copy { position: relative; z-index: 2; padding: 28px 32px; max-width: 70%; }
.bt-hero h1 { font: 800 clamp(28px, 3vw, 38px)/1.15 var(--display); letter-spacing: .025em; margin: 0 0 14px; }
.bt-hero h1 > span { color: var(--gold); }
.bt-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; color: var(--txt-dim); font-size: 12px; line-height: 1.5; }
.bt-hero-meta > span { display: inline-flex; align-items: center; gap: 5px; }
.bt-hero-meta > span + span { border-left: 1px solid #ffffff25; padding-left: 16px; }
.bt-hero-meta .game-rtp { color: var(--gold); font: 600 12px/1.5 var(--num); }
/* Sound and How it works, in the hero, in the same place, on all three games.
   They used to sit in a strip above the hero on two of them and not exist at
   all on the third. */
.bt-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 16px; }
.bt-hero-actions .ha-btn { min-height: 34px; font-size: 10px; letter-spacing: .06em; }
@media (max-width: 700px) {
  /* the art is decoration; the controls are not, so they get the room */
  .bt-hero-copy { max-width: 100%; padding: 20px; }
  .bt-hero-actions { margin-top: 14px; }
  .bt-hero-actions .ha-btn { flex: 1 1 auto; min-height: 40px; }
}
.bt-hero-art { position: absolute; inset: 0 0 0 auto; width: min(100%, 680px); height: 100%; object-fit: cover; object-position: right center; z-index: 1; pointer-events: none; mask-image: linear-gradient(90deg, transparent, #000 38%); }
.ha-cash-previous { border: 1px solid #e8c07a55; background: #e8c07a0a; border-radius: 10px; padding: 14px; margin: 12px 0; font-size: 12px; }
.ha-cash-previous p { color: var(--txt-dim); line-height: 1.65; margin: 8px 0; }
.ha-cash-previous button { min-height: 44px; width: 100%; white-space: normal; }
.jp-hero { background: radial-gradient(ellipse at 77% 95%,#8a592840,transparent 55%),linear-gradient(135deg,#0b1828,#081321); }
.jp-hero .jp-hero-art { width: 38%; object-fit: contain; padding: 8px; mask-image: none; }
.game-hero-token { margin: 0 0 20px; }
.game-hero-token .ha-hero-coin { max-width: none; margin: 0; }
#ha-lobby.is-chest .game-hero-token, #ha-lobby.is-jackpot .game-hero-token { display: none; }
.game-asset-bar { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.game-asset-bar .ha-asset-pick { display: flex; gap: 6px; }
.game-asset-bar .ha-asset-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 78px; padding: 10px 14px; }
.game-asset-bar .ha-coin { width: 18px; height: 18px; object-fit: contain; flex: none; }
.game-asset-bar button:focus-visible, .arena-expand:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.arena-expand { display: inline-flex; gap: 7px; align-items: center; min-height: 44px; white-space: nowrap; }
.arena-expand svg { width: 16px; height: 16px; }
.jp-arena-top { gap: 10px; flex-wrap: wrap; }
.jp-arena-top .arena-expand { margin-left: auto; }
.arena-fullscreen, .ha-duel.arena-fullscreen { position: fixed !important; inset: 0 !important; z-index: 10000 !important; width: 100vw !important; max-width: none !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; border: 0; border-radius: 0; background: #0a111a; padding: max(12px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left)); box-sizing: border-box; overflow: auto; overscroll-behavior: contain; }
.ha-pot-card.arena-fullscreen { display: flex; flex-direction: column; }
#ha-rugpot .ha-pot-card.arena-fullscreen .ha-pot-body { flex: 1; min-height: 0; padding: 0; display: flex; align-items: stretch; }
#ha-rugpot .ha-pot-card.arena-fullscreen .ha-pot-wheelwrap { flex: 1; width: 100%; height: auto; min-height: 0; padding: 0; aspect-ratio: auto; }
#ha-rugpot .ha-pot-card.arena-fullscreen #ha-pot-3d { position: absolute; inset: 0; height: 100%; min-height: 0; }
.ha-duel.arena-fullscreen { display:flex; flex-direction:column; }
.ha-duel.arena-fullscreen .ca-stage { flex: 1 0 230px; height: auto; min-height: 230px; }
.ha-duel.arena-fullscreen .ha-bt-chat { max-height: 160px; flex-shrink: 0; }
.ha-duel.arena-fullscreen .ca-fair-wrap { flex-shrink: 0; }
@media (max-width: 700px) {
  .game-asset-bar { align-items: flex-start; flex-direction: column; gap: 9px; }
  .game-asset-bar .ha-asset-pick { width: 100%; }
  .game-asset-bar .ha-asset-opt { flex: 1; min-width: 0; }
  .jp-arena-top > span { display: none; }
  .jp-rules { flex-wrap: wrap; gap: 10px; white-space: normal; }
  .arena-fullscreen .jp-arena-footer { padding: 10px 4px; }
}
@media (max-width: 540px) {
  .bt-hero { min-height: 136px; margin-bottom: 16px; }
  .bt-hero-copy { padding: 22px 18px; max-width: 100%; }
  .bt-hero h1 { font-size: clamp(23px, 6vw, 28px); margin-bottom: 12px; }
  .bt-hero-meta { gap: 8px 12px; font-size: 11px; }
  .bt-hero-meta > span + span { padding-left: 12px; }
  .bt-hero-meta .game-rtp { font-size: 11px; }
  .bt-hero-art { width: 100%; opacity: .5; mask-image: linear-gradient(90deg, transparent 35%, #000); }
  .jp-hero .jp-hero-art { width: 34%; padding: 6px; opacity: .65; }
}
@media (max-height: 500px) and (orientation: landscape) {
  .ha-duel.arena-fullscreen .ha-bt-head { margin:0; padding:6px 12px; gap:8px; }
  .ha-duel.arena-fullscreen .ha-bt-head .ha-ava, .ha-duel.arena-fullscreen .ha-bt-pot, .ha-duel.arena-fullscreen .ha-bt-chat, .ha-duel.arena-fullscreen .ca-fair-wrap, .ha-duel.arena-fullscreen > .ca-foot { display: none; }
  .ha-duel.arena-fullscreen .ca-stage { min-height: 180px; }
  .ha-pot-card.arena-fullscreen .jp-arena-footer { display: none; }
}
/* The winning rule remains beside the result after the stage header scrolls away. */
.bt-result-rule { margin: 18px 0 12px; padding: 12px 14px; border: 1px solid #9aa45066; border-radius: 8px; color: #dfedae; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.bt-result-rule span { display: block; margin-top: 6px; color: #c5cfda; font-size: 13px; font-weight: 500; letter-spacing: 0; }
.bt-replay-origin { max-width: 440px; font-size: 11px; color: #8f9caa; line-height: 1.6; }
.cb-history-head[data-rule]::after { content: attr(data-rule); color: #dfedae; font-size: 11px; }