/* Shared spacing rhythm. Keep typography hierarchy, touch targets and safe areas. */
:root{
  --layout-section-gap:24px;
  --layout-panel-inset:20px;
  --layout-card-inset:16px;
  --layout-grid-gap:12px;
  --layout-form-gap:12px;
}

/* Home and catalog collections. */
#home-view>.section{margin-block:var(--layout-section-gap)}
#home-view .section-head{margin-bottom:12px}
#home-view>.categories{gap:8px;margin-bottom:22px}
#home-view .category{padding-block:12px;gap:8px}
#home-view>.announcement{margin-block:14px 18px}
#home-view>.promo-grid{gap:12px;margin-block:var(--layout-section-gap)}
#home-view .promo{padding:20px;min-height:145px}
#home-view .promo a{margin-top:12px}
#home-view>.sport-banner{margin-block:var(--layout-section-gap);padding:24px}
#home-view>.providers{margin-block:var(--layout-section-gap);padding-block:20px}
.partners-heading{margin-bottom:12px}
.games.home-game-rail{gap:10px;grid-auto-columns:calc((100% - 50px)/6.35)}
.live-games.home-live-rail{gap:10px;grid-auto-columns:calc((100% - 30px)/4.25)}
.page-bar{gap:16px;margin-bottom:20px}
.page-heading,.service-page .page-heading{margin-bottom:20px}
.page-heading h1{margin-bottom:8px}
.page-heading p{line-height:1.65}
.route-tabs{gap:8px;margin-bottom:16px;padding-bottom:5px}
.route-tab{padding:10px 14px}
.catalog-tools{gap:12px;margin-block:16px 14px}
.catalog-grid{gap:14px 10px}
.catalog-load-more{gap:8px;margin-block:22px 8px}
.page-section-title{gap:12px;margin-block:24px 14px}
.page-note{padding:11px 14px;margin-block:16px;line-height:1.7}
.page-empty{padding:36px 20px}
.page-empty p{margin-bottom:18px}
body:not([data-page="home"]) footer{margin-top:32px}
.footer-main{gap:30px;margin-bottom:20px}
.footer-links{gap:32px}
.footer-preview{margin-top:12px}

/* Member pages, settings, tables, account forms and shared panels. */
.ui-panel{padding:var(--layout-panel-inset);margin-bottom:16px}
.ui-panel-flat{padding:16px 0}
.ui-panel h2{margin-bottom:14px}
.ui-panel-heading{gap:12px;margin-bottom:16px}
.ui-panel-heading h2{margin:0}
.ui-panel-heading p{margin-top:4px}
.ui-panel p{line-height:1.7}
.ui-tabs,.member-subnav{margin-bottom:18px;padding-bottom:6px}
.member-subnav .ui-tab{padding-inline:14px}
.ui-form{gap:var(--layout-form-gap)}
.ui-form-columns{gap:12px}
.ui-field{gap:6px}
.ui-code-field{gap:8px}
.ui-form>.btn{margin-top:4px}
.ui-note{margin-block:14px;line-height:1.7}
.ui-status{margin-top:12px}
.ui-preview-note{margin-top:14px}
.ui-setting-row{gap:16px;padding-block:15px}
.ui-setting-row p{margin-top:4px}
.ui-device-row{gap:12px;padding-block:12px}
.ui-device-row p{margin-top:4px}
.ui-task-row{gap:12px;padding-block:16px}
.ui-task-row h3{margin-bottom:5px}
.member-overview{gap:22px;padding:24px;margin-bottom:18px}
.member-identity{gap:14px}
.member-balance{padding-left:22px;gap:6px}
.member-bottom-actions{gap:12px}
.ui-feature-grid,.ui-reward-grid,.ui-provider-grid{gap:var(--layout-grid-gap)}
.ui-feature-grid{margin-bottom:18px}
.ui-feature-card{padding:18px 16px}
.ui-feature-card h3{margin-block:12px 7px}
.ui-feature-card p{line-height:1.65}
.ui-two-columns{gap:16px}
.ui-verification-banner{padding:20px;gap:14px;margin-bottom:18px}
.ui-check-list{margin-block:16px 20px}
.ui-check-list li{margin-block:12px}
.ui-empty{padding:28px 16px}
.ui-empty h3{margin-block:14px 7px}
.ui-summary{gap:12px;margin-block:18px;padding-block:14px}
.ui-summary>div{gap:12px}
.ui-wallet-balance{padding:13px 16px;margin-bottom:18px;gap:10px}
.ui-dialog-links{gap:10px 14px;margin-top:16px}
.ui-record-filters{gap:10px;margin-bottom:16px}
.ui-table th{padding:11px 12px}
.ui-table td{padding:14px 12px}
.ui-table td small{margin-top:4px}
.ui-record-total{margin-top:16px}
.ui-record-amount{margin-block:16px}
.ui-bonus-summary{gap:28px;padding:20px 24px;margin-bottom:18px}
.ui-bonus-summary>div{gap:8px}
.ui-checkin{padding:24px}
.ui-week{gap:8px;margin-block:20px}
.ui-week>div{gap:10px;padding-block:12px}
.ui-avatars{gap:12px;margin-block:12px 20px}
.ui-provider{min-height:116px;padding:20px;gap:16px}

/* Login and flow dialogs keep their inputs usable on small touch screens. */
.service-modal-header{padding:18px 20px 16px;gap:12px}
.service-modal-content{padding:20px}
.service-modal>.ui-preview-note{padding-inline:20px;padding-block:10px 14px}
.service-modal .ui-form,.service-modal .ui-form-columns{gap:12px}
.service-modal .ui-tabs{margin-bottom:16px}
.service-modal .ui-summary{margin-block:16px;padding-block:12px}
.service-modal .ui-wallet-balance{margin-bottom:16px}
.df-stepper{margin-bottom:18px}
.df-lead{margin-bottom:16px;line-height:1.75}
.df-flow-footer{margin-top:18px;padding-top:12px}
.df-result p,.df-mail p,.df-wait p,.df-pair p{line-height:1.75}

/* VIP, reward cards and activity rules. */
.vip-progress-panel{padding:20px;margin-bottom:20px}
.vip-progress-summary{gap:16px;margin-bottom:16px}
.vip-levels-heading{gap:12px;margin-block:20px 12px}
.vip-selected-detail{gap:14px;padding:16px;margin-block:12px 18px}
.vip-selected-detail p{margin-top:5px}
.vip-benefit-matrix{padding:18px 20px 16px;margin-block:20px}
.vip-benefit-matrix-heading{margin-bottom:14px}
.vip-benefit-legend{margin-top:12px}
.reward-grid-expanded{gap:12px}
.reward-grid-expanded>.ui-reward{padding:16px}
.reward-grid-expanded>.ui-reward h3{margin-block:10px 6px}
.reward-grid-expanded>.ui-reward>p{margin-bottom:8px}
.reward-grid-expanded>.ui-reward>.df-reward-unlock{margin-bottom:10px}
.reward-grid-expanded .df-reward-actions{gap:10px}
.campaign-grid,.info-grid{gap:12px}
.campaign-grid>.campaign-illustrated>.campaign-body{padding:14px}
.campaign-grid>.campaign-illustrated .campaign-body h2{margin-block:6px 5px}
.campaign-grid>.campaign-illustrated .campaign-body p{margin-bottom:10px;line-height:1.65}
.campaign-detail-illustrated>div:last-child{padding:24px}
.campaign-rules-inline{padding:24px;margin-block:24px}
.campaign-rules-inline>h2{margin-bottom:16px}
.bonus-condition-heading{gap:12px;margin-bottom:14px}
.bonus-condition-unlock{gap:6px;padding:12px 14px;margin-bottom:18px}
.bonus-condition-section{margin-block:18px}
.bonus-condition-section h3{margin-bottom:10px}
.bonus-condition-table th,.bonus-condition-table td{padding:10px 12px}
.bonus-condition-section ol,.bonus-common-rules ul{line-height:1.8}
.bonus-condition-section li,.bonus-common-rules li{margin-bottom:6px}
.bonus-common-rules{margin-block:18px}
.bonus-condition-actions{gap:12px;margin-top:20px;padding-top:14px}

/* Help, editorial content, referral, downloads and support. */
.help-topic-grid>.info-card{padding:16px}
.help-topic-grid>.info-card>h2{margin-block:8px 6px}
.help-topic-grid>.info-card>p{margin-bottom:10px;line-height:1.65}
.help-contact,.support-desk{padding:20px;gap:20px;margin-top:18px}
.help-contact h2,.support-desk h2{margin-bottom:6px}
.faq-list summary{padding:14px 16px;gap:12px}
.faq-list details p{padding:0 16px 16px;line-height:1.75}
.ui-faq{margin-block:18px;padding-inline:18px}
.ui-faq summary{min-height:54px}
.ui-faq p{margin-bottom:18px;line-height:1.8}
.site-document{padding:22px}
.site-document section{margin-block:16px}
.site-document section p{line-height:1.7}
.site-document section p+p{margin-top:6px}
.site-document .site-document-notice{margin-bottom:16px;line-height:1.7}
.site-document-links{gap:6px 16px;margin-top:16px;padding-top:12px}
.notice-row{padding:18px;gap:16px}
.notice-row h2{margin-block:5px}
.ui-message{padding:18px;gap:12px}
.ui-message h3{margin-bottom:6px}
.ui-message-detail>p{margin-bottom:20px;line-height:1.8}
.ui-vip-hero,.ui-referral-hero{margin-bottom:20px}
.ui-vip-hero>div,.ui-referral-hero>div{padding:28px}
.ui-referral-hero p{line-height:1.75;margin-bottom:18px}
.ui-referral-totals{gap:12px;padding-top:18px;margin-top:18px}
.ui-referral-totals>div{gap:8px}
.referral-feature{padding:32px 20px}
.referral-steps{gap:12px;margin-block:20px}
.referral-steps li{padding:20px}
.install-hero{padding:28px;margin-bottom:20px}
.install-platform-tabs{gap:10px;margin-bottom:18px}
.install-guide-heading{margin-bottom:14px}
.install-step-grid{gap:14px}
.install-step-copy{padding:16px}
.install-guide-note{padding:14px;margin-top:18px}
.ui-step-list{margin-block:18px}
.ui-step-list li{gap:12px;margin-block:16px}
.ui-support-welcome{padding-block:12px 20px}
.ui-support-option{min-height:58px;padding:13px;gap:10px;margin-bottom:8px}
.ui-support-footer{margin-block:20px 8px}
.ui-support-agent{gap:10px;padding-bottom:14px}
.ui-chat-thread{padding-block:16px}
.ui-chat-bubble{padding:13px;line-height:1.75}
.ui-tool-group h2{margin-block:18px 12px}
.ui-resource-preview{padding:32px 20px;margin-bottom:20px}
.info-card{padding:20px}
.game-detail{gap:32px;padding:24px}
.detail-copy dl{margin-block:18px}
.detail-copy dl>div{gap:22px;margin-block:10px}
.detail-actions{gap:10px;margin-top:18px}
.auth-card{padding:28px}
.form-intro{margin-bottom:18px}
.form-field{margin-block:14px}
.form-field>span{margin-bottom:6px}
.df-stats{gap:16px;padding:20px;margin-bottom:18px}
.df-option{padding:16px}
.df-binding-preview{margin-bottom:16px}
.df-binding-group{margin-top:16px;padding-top:16px}
.df-map-intro{padding:18px;margin-bottom:18px}
.df-map-row{gap:18px;padding-block:16px}
.ui-download-hero{padding:28px;gap:20px;margin-bottom:20px}

@media(min-width:761px) and (max-width:1024px){
  .games.home-game-rail{grid-auto-columns:calc((100% - 30px)/4.25)}
  .live-games.home-live-rail{grid-auto-columns:calc((100% - 20px)/3.15)}
  .member-balance{padding:16px 0 0}
}
@media(max-width:760px), (max-width:1024px) and (max-height:500px) and (orientation:landscape){
  :root{--layout-section-gap:20px;--layout-panel-inset:16px;--layout-card-inset:14px;--layout-grid-gap:10px}
  #home-view .section-head{margin-bottom:8px}
  #home-view>.categories{margin-bottom:18px}
  #home-view .category{padding-block:10px}
  #home-view .promo{padding:16px}
  #home-view>.sport-banner{padding:20px}
  #home-view>.providers{padding-block:16px}
  .games.home-game-rail{gap:8px;grid-auto-columns:calc((100% - 16px)/2.65)}
  .live-games.home-live-rail{gap:8px;grid-auto-columns:calc((100% - 8px)/1.8)}
  .page-bar{gap:10px;margin-bottom:12px}
  .page-heading,.service-page .page-heading{margin-bottom:16px}
  .page-heading h1{margin-block:6px 8px}
  .route-tabs{margin-bottom:12px}
  .route-tab{padding-inline:12px;min-height:44px}
  .catalog-tools{gap:10px;margin-block:12px}
  .catalog-grid{gap:12px 10px}
  .catalog-load-more{margin-top:18px}
  .member-overview{padding:18px 16px;gap:16px;margin-bottom:16px}
  .member-balance{padding:16px 0 0}
  .ui-panel-heading{margin-bottom:12px}
  .ui-two-columns{gap:0}
  .ui-feature-card{padding:16px 14px}
  .ui-verification-banner{padding:16px}
  .ui-setting-row{padding-block:14px}
  .ui-table th,.ui-table td{padding:10px}
  .ui-table .text-link{min-height:44px}
  .ui-bonus-summary{padding:16px;gap:16px}
  .ui-checkin{padding:20px 14px}
  .ui-provider{padding:16px 14px;gap:12px}
  .vip-progress-panel{padding:16px;margin-bottom:16px}
  .vip-progress-summary{gap:12px;margin-bottom:14px}
  .vip-levels-heading{margin-block:16px 10px}
  .vip-selected-detail{padding:14px 12px;gap:12px}
  .vip-benefit-matrix{padding:16px 12px;margin-block:18px}
  .reward-grid-expanded>.ui-reward{padding:14px 12px}
  .reward-grid-expanded .df-reward-actions{gap:6px}
  .campaign-grid:has(>.campaign-illustrated){gap:12px}
  .campaign-detail-illustrated>div:last-child{padding:18px 16px}
  .campaign-rules-inline{padding:18px 14px;margin-block:18px}
  .bonus-condition-table th,.bonus-condition-table td{padding:9px 10px}
  .help-topic-grid>.info-card{padding:14px}
  .help-contact,.support-desk{padding:18px 16px;margin-top:16px}
  .faq-list summary{min-height:50px;padding:13px 14px}
  .faq-list details p{padding-inline:14px;padding-bottom:14px}
  .site-document{padding:18px 14px}
  .site-document section{margin-block:18px}
  .site-document-links .text-link{min-height:44px}
  .ui-vip-hero>div,.ui-referral-hero>div{padding:22px 18px}
  .referral-feature{padding:24px 18px}
  .referral-steps li{padding:16px 16px 16px 58px}
  .install-hero{padding:22px 18px}
  .install-step-grid{gap:12px}
  .notice-row,.ui-message{padding:16px 14px;gap:12px}
  .game-detail{padding:18px}
  .detail-copy dl>div{gap:16px}
  .df-stats{padding:16px;gap:14px}
  .service-modal-content{padding:16px max(16px,env(safe-area-inset-right,0px)) 20px max(16px,env(safe-area-inset-left,0px))}
  .service-modal-header{padding:14px max(16px,env(safe-area-inset-right,0px)) 12px max(16px,env(safe-area-inset-left,0px))}
  .service-modal:is(.service-modal-wallet,.service-modal-wide,.service-modal-support) .service-modal-header,.service-modal:has(.df-flow) .service-modal-header{padding-top:calc(14px + env(safe-area-inset-top,0px))}
  .service-modal>.ui-preview-note{padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  dialog.account-modal .account-content{padding-top:16px;padding-bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  dialog.account-modal .account-form,dialog.account-modal .account-actions{gap:12px}
  dialog.account-modal .account-consents{gap:8px}
  dialog.account-modal .account-social{gap:10px}
  dialog.account-modal .account-preview-note{margin-top:14px}
  .footer-main{margin-bottom:18px}
  .footer-links{gap:14px 10px;padding-top:18px}
  .user-bets{margin-block:20px}
}

/* Keep the desktop home banner close to the header after removing the intro strip. */
@media(min-width:761px){body[data-page="home"] .main{padding-top:94px}}

/* Center detail content in a narrower reading column, including its heading. */
@media(min-width:761px){
 .route-page:has(.game-detail),.route-page:has(.campaign-detail-illustrated){width:min(100%,940px);margin-inline:auto}
 .route-page:has(.game-detail)>.page-bar,.route-page:has(.campaign-detail-illustrated)>.page-bar{margin-bottom:14px}
 .route-page:has(.game-detail)>.page-heading,.route-page:has(.campaign-detail-illustrated)>.page-heading{margin-bottom:18px}
 .route-page:has(.game-detail)>.page-heading h1,.route-page:has(.campaign-detail-illustrated)>.page-heading h1{font-size:28px}
 .route-page:has(.campaign-detail-illustrated) .campaign-rules-inline{margin-block:24px;padding:24px}
}