.bonuses-page { background: #21100d; }
.bonuses-intro { position: relative; isolation: isolate; padding: 28px 24px 18px; border-bottom: 2px solid #95613b; text-align: center; }
.bonuses-intro > picture { position: absolute; inset: 0; z-index: -2; }
.bonuses-intro > picture img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.bonuses-intro::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(18, 8, 6, .8); }
.bonuses-intro h1 { margin: 10px 0; color: #fff0c7; font: 700 54px/1.15 var(--story); }
.bonuses-intro p { max-width: 650px; margin: 0 auto; color: #f3dfc6; font: 400 18px/1.6 var(--ui); }
.bonus-code-bar { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin-top: 12px; color: #f6e5ce; font: 400 16px/1.5 var(--ui); }
.bonus-code-bar code { color: #ffda79; font: 700 19px/1.4 var(--ui); user-select: all; }
.bonus-code-bar button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 9px 14px; border: 1px solid #c99352; border-radius: 4px; color: #ffe9af; background: #301810; cursor: pointer; font: 600 15px/1.5 var(--ui); }
.bonus-code-bar a { color: #ffe19a; text-underline-offset: 4px; min-height: 44px; display: inline-flex; align-items: center; }
.copy-code-status { min-height: 24px; margin-top: 6px !important; font-size: 14px !important; color: #c4e7af !important; }
.bonuses-list-section { padding: 28px 24px 40px; }
.bonuses-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1160px; margin: 0 auto 20px; color: #f1dec4; }
.bonuses-section-heading h2 { margin: 0; color: #ffedbd; font: 700 30px/1.3 var(--story); }
.bonuses-section-heading p { margin: 0; font: 400 16px/1.5 var(--ui); }
.bonus-offer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; width: min(1160px, 100%); margin: 0 auto; }
.offer-card { display: flex; flex-direction: column; min-width: 0; border: 1px solid #ad7943; border-radius: 6px; background: #f3deaf; color: #492619; box-shadow: 0 3px 0 #4a2816; scroll-margin-top: 110px; }
.offer-copy { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.offer-card-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.offer-symbol { display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; border: 1px solid #ad7943; border-radius: 50%; color: #ffde89; background: #683124; font-size: 26px; }
.offer-wager-rewards .offer-symbol, .offer-double-rank-up .offer-symbol { color: #e2f0d7; background: #345b4d; border-color: #345b4d; }
.offer-free-spins .offer-symbol { color: #f6ecdb; background: #852d3a; border-color: #852d3a; }
.offer-leaderboard .offer-symbol { color: #4d2816; background: #edbb5d; }
.offer-label { color: #76442c; font: 700 12px/1.5 var(--ui); text-transform: uppercase; letter-spacing: 0; }
.offer-copy h3 { margin: 0 0 8px; color: #4c2016; font: 700 28px/1.2 var(--story); }
.offer-value { color: #7b3023; font: 800 22px/1.4 var(--ui); }
.offer-description { margin: 10px 0 16px; font: 400 16px/1.5 var(--ui); }
.offer-payout-note { margin: 0 0 16px; color: #7b3023; font: 700 14px/1.5 var(--ui); }
.offer-requirement { display: flex; align-items: flex-start; gap: 8px; margin: auto 0 16px; padding-top: 12px; border-top: 1px solid #c5a16a; font: 600 14px/1.5 var(--ui); color: #3d542f; }
.offer-requirement i { margin-top: 2px; font-size: 19px; flex: 0 0 auto; }
.offer-button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 50px; padding: 12px 16px; border: 2px solid #7f471e; border-radius: 4px; color: #321309; background: #f6b949; box-shadow: inset 0 1px 0 #ffe598, 0 3px 0 #6b3418; font: 700 16px/1.5 var(--ui); text-decoration: none; text-align: center; cursor: pointer; }
.offer-button i { font-size: 21px; flex: 0 0 auto; }
.bonuses-page button.offer-button { font: 700 16px/1.5 var(--ui); }
.offer-button:hover { color: #321309; background: #ffd375; }
.offer-button:active { transform: translateY(2px); box-shadow: inset 0 1px 0 #ffe598, 0 1px 0 #6b3418; }
:is(.offer-button, .offer-close, .bonus-code-bar button, .offer-inline-link):focus-visible { outline: 3px solid #2d6b5d; outline-offset: 4px; }
.bonus-illustrated-offers { display: contents; }
.simple-public .quest-grid .quest-manual { order: 4; }
.bonus-home-link { position: relative; z-index: 2; margin: 22px auto 12px; text-align: center; }
.bonus-home-link a { min-height: 44px; display: inline-flex; align-items: center; gap: 8px; color: #ffdf93; font: 600 16px/1.5 var(--ui); text-underline-offset: 4px; }
.bonus-support { padding: 30px 24px 36px; border-top: 1px solid #9a6c3e; text-align: center; color: #efdcc5; background: #2c1510; font: 400 16px/1.6 var(--ui); }
.bonus-support h2 { margin: 0 0 10px; color: #ffedc0; font: 700 30px/1.3 var(--story); }
.bonus-support p { max-width: 720px; margin: 0 auto 18px; }
.bonus-support a { color: #ffdf93; text-underline-offset: 4px; }
.bonus-support small { display: block; margin-top: 20px; font: 400 14px/1.6 var(--ui); }
.offer-dialog { width: min(600px, calc(100% - 24px)); max-width: none; max-height: min(720px, calc(100dvh - 64px)); margin: auto; padding: 0; overflow: hidden; border: 3px solid #a6743d; border-radius: 6px; background: #f3deaf; color: #492619; box-shadow: 0 20px 80px rgba(0, 0, 0, .5); font: 400 15px/1.45 var(--ui); }
.offer-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.offer-dialog::backdrop { background: rgba(10, 6, 5, .85); }
.offer-dialog-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 16px 20px; background: #321710; border-bottom: 1px solid #a6743d; color: #f6e4cd; }
.offer-dialog-header .offer-label { color: #ffd379; }
.offer-dialog-header h2 { margin: 2px 0 4px; color: #ffedc1; font: 700 28px/1.15 var(--story); }
.offer-dialog-header p { margin: 0; font-size: 13px; }
.offer-dialog-header .offer-payout-note { margin-top: 6px; color: #ffda79; }
.offer-close { flex: 0 0 44px; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #c28e52; border-radius: 4px; color: #ffdda3; background: #452218; cursor: pointer; font-size: 27px; }
.offer-dialog-content { min-height: 0; padding: 12px 20px; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.offer-warning { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; padding: 8px 0; border-block: 1px solid #a83b28; color: #842918; font-size: 14px; font-weight: 700; }
.offer-warning i { flex: 0 0 auto; margin-top: 1px; font-size: 20px; }
.offer-steps { margin: 0; padding: 0; list-style: none; }
.offer-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid #c6a573; }
.offer-steps li:first-child { padding-top: 0; }
.offer-step-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #8b5d33; border-radius: 50%; color: #ffdb7e; background: #642c1d; font-size: 19px; }
.offer-step-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 8px; margin-bottom: 4px; }
.offer-step-number { flex: 0 0 auto; color: #74472e; font-size: 12px; font-weight: 700; }
.offer-steps h3 { margin: 0; color: #492319; font: 700 16px/1.4 var(--ui); }
.offer-steps p { margin: 0; }
.offer-inline-link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 2px; color: #773224; font-weight: 700; text-underline-offset: 4px; }
.offer-rules-toggle { margin-top: 8px; }
.offer-rules-toggle > summary { min-height: 44px; padding: 12px 0; color: #492319; font-weight: 700; cursor: pointer; }
.offer-rules-toggle > summary:focus-visible { outline: 3px solid #2d6b5d; outline-offset: 2px; }
.offer-rules { padding-left: 22px; margin: 0; }
.offer-rules li { margin: 6px 0; }
.offer-dialog-footer { padding: 12px 20px 16px; border-top: 1px solid #a6743d; background: #ead09c; }
.offer-dialog-footer p { margin: 0 0 8px; font-size: 13px; }
@media (max-width: 1100px) {
    .bonus-offer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .bonuses-intro { padding: 24px 16px 16px; }
    .bonuses-intro h1 { font-size: 42px; }
    .bonuses-list-section { padding: 28px 16px 36px; }
    .bonuses-section-heading { align-items: flex-start; flex-direction: column; gap: 6px; }
    .bonus-offer-grid { grid-template-columns: 1fr; gap: 18px; }
    .offer-copy { padding: 20px; }
    .offer-copy h3 { font-size: 28px; }
    .offer-dialog { max-height: calc(100dvh - 24px); }
    .offer-dialog-header, .offer-dialog-content, .offer-dialog-footer { padding: 12px 14px; }
    .offer-dialog-header h2 { font-size: 26px; }
    .offer-steps li { grid-template-columns: 28px minmax(0, 1fr); gap: 10px; }
    .offer-step-icon { width: 28px; height: 28px; font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) { .offer-button:active { transform: none; } }

/* Keep the existing starter claim flow inside a compact, readable surface. */
#bonus-modal { padding: 16px; align-items: center; overflow: hidden; }
#bonus-modal .modal { width: min(560px, 100%); min-height: 0; max-height: min(660px, calc(100dvh - 32px)); border: 2px solid #a6743d; border-radius: 6px; background: #f3deaf; box-shadow: 0 20px 80px rgba(0, 0, 0, .5); overflow: hidden; }
#bonus-modal .modal-frame-art { display: none; }
#bonus-modal .modal-scroll-copy { position: relative; inset: auto; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: inherit; padding: 0; overflow: hidden; color: #492619; }
#bonus-modal .modal-close { top: 12px; right: 14px; width: 44px; height: 44px; border: 1px solid #c28e52; border-radius: 4px; background: #452218; color: #ffdda3; box-shadow: none; cursor: pointer; font: 400 27px/1 var(--ui); }
#bonus-modal .modal-header { padding: 16px 72px 12px 20px; text-align: left; border-bottom: 1px solid #a6743d; background: #321710; }
#bonus-modal .modal-header h2 { color: #ffedc1; font: 700 28px/1.2 var(--story); }
#bonus-modal .modal-header p { margin: 4px 0 0; color: #f6e4cd; font: 400 14px/1.5 var(--ui); }
#bonus-modal .modal-body { min-height: 0; padding: 16px 20px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-gutter: stable; color: #492619; }
#bonus-modal .modal-content-shell { text-align: left; }
#bonus-modal .modal-icon { display: none; }
#bonus-modal .modal-content-shell h3 { margin: 0 0 4px; font: 700 18px/1.4 var(--ui); }
#bonus-modal .modal-content-shell p { max-width: none; color: #492619; font: 400 15px/1.5 var(--ui); }
#bonus-modal .info-box { margin-top: 12px; padding: 8px 12px; border-color: #c5a16a; color: #593421; background: #ecd3a2; font: 400 14px/1.45 var(--ui); }
#bonus-modal .info-box ul { margin: 4px 0 0; }
#bonus-modal .info-box summary { min-height: 28px; padding: 3px 0; color: #492319; font-weight: 700; cursor: pointer; }
#bonus-modal .info-box summary:focus-visible { outline: 3px solid #2d6b5d; outline-offset: 2px; }
#bonus-modal .modal-field { margin-top: 12px; gap: 4px; color: #492319; font: 600 14px/1.5 var(--ui); }
#bonus-modal .modal-input { min-height: 44px; padding: 8px 10px; border-color: #9e6b3f; color: #351a10; background: #fff2cf; font: 400 16px/1.5 var(--ui); }
#bonus-modal .modal-input::placeholder { color: #756147; opacity: 1; }
#bonus-modal .claim-confirm { align-items: flex-start; margin-top: 12px; color: #492619; font: 500 14px/1.5 var(--ui); }
#bonus-modal .claim-confirm input { flex: 0 0 18px; width: 18px; height: 18px; margin: 2px 0 0; }
#bonus-modal .modal-action { width: 100%; min-height: 46px; margin-top: 12px; padding: 10px 14px; border-radius: 4px; font: 700 16px/1.5 var(--ui); cursor: pointer; }
#bonus-modal .claim-submit:disabled { opacity: 1; color: #6b5337; background: #dcc69c; border-color: #a98a5e; box-shadow: none; cursor: not-allowed; }
#bonus-modal .claim-message { margin-top: 8px; color: #593421; font: 400 14px/1.45 var(--ui); }
#bonus-modal .claim-message.success { color: #285b37; }
#bonus-modal .claim-message.error { color: #962f26; }
#bonus-modal .modal-footer { margin: 0; padding: 12px 20px 16px; border-top: 1px solid #a6743d; background: #ead09c; }
#bonus-modal .modal-back, #bonus-modal .modal-next { min-width: 84px; min-height: 44px; padding: 8px 14px; border-radius: 4px; background: #452218; color: #ffedc1; box-shadow: none; font: 600 15px/1.5 var(--ui); cursor: pointer; }
#bonus-modal :is(button, input, a):focus-visible { outline: 3px solid #2d6b5d; outline-offset: 2px; }
@media (max-width: 600px) {
    #bonus-modal { padding: 12px; }
    #bonus-modal .modal { max-height: calc(100dvh - 24px); }
    #bonus-modal .modal-header { padding: 14px 68px 12px 14px; }
    #bonus-modal .modal-header h2 { font-size: 26px; }
    #bonus-modal .modal-body { padding: 12px 14px; }
    #bonus-modal .modal-footer { padding: 12px 14px; }
}
.claim-message .claim-support-link { display: block; min-height: 44px; padding: 12px 4px; color: inherit; text-decoration: underline; text-underline-offset: 3px; font-weight: 700; }