/* Small-device and old Safari fallbacks; change these rules without a framework. */
dialog:not([open]){display:none}
.legacy-dialog-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(12,5,10,.76);z-index:998}
dialog.legacy-dialog[open]{display:block;position:fixed;z-index:999;top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);margin:0;width:calc(100% - 32px);max-width:460px;max-height:80vh;overflow:auto;-webkit-overflow-scrolling:touch}
.dialog-open{overflow:hidden}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,a,input,select{-webkit-tap-highlight-color:transparent}
img,svg{max-width:100%}
.game-stage,.play-panel,.stage-heading>div,.mode-tab>span{min-width:0}
.no-flex-gap .stage-tools>*+*,.no-flex-gap .header-actions>*+*,.no-flex-gap .control-bar>*+*{margin-left:8px}
.no-flex-gap .gate-layout>*,.no-flex-gap .gate-adjustment-content>*{margin-bottom:12px}
.no-flex-gap .demo-coach li+li{margin-left:7px}
@supports not (width:clamp(1px,2vw,3px)) {
  .gate-animation .poker-demo-card-back b{font:500 10px/1.2 serif}
  .gate-animation .poker-demo-corner b{font-size:17px}
  .gate-animation .poker-demo-corner i{font-size:13px}
  .gate-animation .poker-demo-pips i{font-size:13px}
  .gate-animation .poker-demo-result strong{font:500 23px/1.25 "Songti SC",serif}
  .gate-animation .classic-demo-paid[data-large-number=true]>strong{font-size:16px}
  .arcade-lobby .game-feature-scene>.video-feature-play{padding:14px!important}
  .arcade-lobby .game-feature-scene .feature-choice-value{font:bold 14px/1.2 Arial,sans-serif}
}
@supports not (width:min(10px,100%)) {
  .gate-animation .classic-demo-paid{max-width:250px;width:100%}
  .arcade-lobby .classic-line-panel{width:100%;max-width:650px}
  .arcade-lobby .video-candy-tubes i{width:70px;max-width:100%}
  .arcade-lobby .video-bonus-wheel{width:90%;max-width:360px}
}
@media(max-width:760px){
  .site-header,.gate-preview .site-header,.gate-preview main,.safari-preview main{padding-left:14px;padding-right:14px}
  .stage-heading{flex-wrap:wrap}.stage-tools{max-width:100%;flex-wrap:wrap}
  .stage-heading h2{white-space:normal!important;overflow-wrap:break-word}
  .mobile-play-bar{padding-bottom:12px;padding-bottom:calc(12px + env(safe-area-inset-bottom))}
  .site-header{padding-top:12px;padding-top:calc(12px + env(safe-area-inset-top))}
  input[type=number],input[type=search],input[type=text],select{font-size:16px!important}
  .mode-tab{overflow-wrap:break-word;word-break:normal}
  .classic-demo-cabinet,.video-demo-root{box-shadow:inset 0 1px 1px #ffe6b733}
  .video-demo-lit .video-demo-symbol,.classic-demo-window{filter:none!important}
  .classic-demo-window>svg,.video-demo-strip{backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .mobile-play-bar,.video-demo-modal{-webkit-backdrop-filter:none;backdrop-filter:none}
  .no-flex-gap .header-actions>*+*{margin-left:6px}
}
@media(max-width:375px){
  .gate-preview .gate-header .brand{font-size:14px}.brand small{font-size:8px}
  .header-actions{flex-wrap:wrap;justify-content:flex-end}
  .safari-preview .stage-tools{gap:5px}.safari-preview #stage-play-button{min-width:85px}
  .gate-preview[data-page=gate-demo] .gate-intro h1{font-size:27px}
  .meters strong{font-size:18px!important}.meters>div{min-width:0}
}
@media(max-height:480px) and (orientation:landscape){
  .mobile-play-bar{position:static!important}.gate-main,.safari-preview main{padding-bottom:16px}
  dialog.legacy-dialog[open]{max-height:90vh}
}

/* Current three-page flow: iPhone 6 through XS Max. Keep these overrides here. */
.no-flex-gap .brand>span+span,.no-flex-gap .header .brand>div{margin-left:8px}
.no-flex-gap .locale-bar label select{margin-left:6px}
.no-flex-gap .locale-bar>small{margin-left:6px}
.no-flex-gap .wallet-box>button{margin-left:12px}
.no-flex-gap .topup-presets>button+button{margin-left:7px}
.no-flex-gap .search-box>input{margin-left:8px}
.no-flex-gap .step-button>.step-copy{margin-left:10px}
.no-flex-gap .menu-row>.menu-icon{margin-right:10px}
.no-flex-gap .timeline>span+span{margin-left:6px}
html[dir=rtl].no-flex-gap .brand>span+span,html[dir=rtl].no-flex-gap .header .brand>div{margin-left:0;margin-right:8px}
html[dir=rtl].no-flex-gap .locale-bar label select,html[dir=rtl].no-flex-gap .locale-bar>small{margin-left:0;margin-right:6px}
@media(max-width:760px){
  .header.locale-host{padding-top:12px;padding-top:calc(12px + env(safe-area-inset-top))}
  .gate-animation .brand-mark,.arcade-lobby .brand-mark{flex-shrink:0}
  .gate-animation .animation-topline{flex-wrap:wrap}
  .gate-animation .animation-controls>p{min-width:0;overflow-wrap:break-word}
  .gate-animation .animation-controls>button{min-height:44px;flex-shrink:0}
  .gate-animation .rules-heading{flex-wrap:wrap}
  .no-flex-gap .arcade-lobby .lobby-intro>.wallet-box{margin-top:17px}
  .no-flex-gap .arcade-lobby .lobby-toolbar>.search-box{margin-top:12px}
  .arcade-lobby .game-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;column-gap:10px;align-items:center;padding-left:12px;padding-right:12px}
  .arcade-lobby .game-bar>div{min-width:0;overflow-wrap:break-word;word-wrap:break-word}
  .arcade-lobby .game-bar strong{display:block;overflow-wrap:break-word;word-wrap:break-word}
  .arcade-lobby .game-bar>button{min-width:66px;max-width:108px;white-space:normal;line-height:1.4;padding:9px 10px}
  .arcade-lobby .game-bar>button.gold-button{min-width:110px;max-width:140px}
  .arcade-lobby .denomination-heading span{overflow-wrap:break-word;word-wrap:break-word}
  body.arcade-lobby.playing-game .lobby-main{padding-bottom:130px;padding-bottom:calc(130px + env(safe-area-inset-bottom))}
  .arcade-lobby .category-tabs button,.arcade-lobby .topup-presets button,.arcade-lobby #back-to-lobby{min-height:44px}
  .arcade-lobby .lobby-footer{overflow-wrap:break-word}
}
@media(max-height:480px) and (orientation:landscape){
  .gate-animation .site-header,.guide-control-panel{position:static}
  .arcade-lobby .game-bar{position:static;display:flex;justify-content:center}
  .no-flex-gap .arcade-lobby .game-bar>*+*{margin-left:12px}
  body.arcade-lobby.playing-game .lobby-main{padding-bottom:20px}
  .site-header,.header,.gate-animation .site-header,.gate-animation-main,.guide-layout,.lobby-main{padding-left:14px;padding-right:14px;padding-left:calc(14px + env(safe-area-inset-left));padding-right:calc(14px + env(safe-area-inset-right))}
}