/* Required mobile installation is separate from the orientation lock. */
html.mobile-install-required .game,html.mobile-install-required .orientation-guard{display:none!important}
html.mobile-install-required body{display:block;margin:0;padding:0;overflow:hidden;height:100dvh;min-height:0}
#install-layer{height:100dvh;min-height:0;box-sizing:border-box;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));overflow:hidden}
.install-card{display:flex;flex-direction:column;width:680px;max-width:100%;height:auto;max-height:100%;min-height:0;overflow:hidden;padding:0;grid-template-columns:none}
.install-scroll{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:26px;overflow:auto;overscroll-behavior:contain;min-height:0;padding:28px 30px 20px;scrollbar-width:thin;scrollbar-color:#626b76 #1b2026;flex:1 1 auto}
.install-intro{min-width:0}
.install-intro .install-emblem{width:40px;height:40px;margin:0 0 14px}
.install-intro h2{font-size:32px;margin:12px 0}
.install-intro>p{font-size:11px;line-height:1.8;color:#a7afb9;margin:0}
.install-scroll .install-steps{grid-column:auto;grid-row:auto;margin:10px 0 0;gap:17px;min-width:0}
.install-footer{flex-shrink:0;padding:14px 30px 16px;border-top:1px solid #ffffff15;background:#181d23}
.install-footer .install-native{width:100%;margin:0 0 12px;min-height:44px;grid-column:auto;grid-row:auto;align-self:stretch;display:flex;justify-content:space-between}
.install-footer .install-fine{margin:0;padding:0;border:0;font-size:10px;line-height:1.6;color:#929aa5}
.install-success{margin-top:14px;padding:12px;border:1px solid #f2b84b55;background:#f2b84b0c;color:#e9c47e;font-size:11px;line-height:1.7}
.cache-link{font-size:10px;line-height:1.5;color:#929aa5;text-decoration:underline;text-underline-offset:3px;padding:7px 0 0;min-height:30px}
.cache-link:hover{color:var(--gold)}
.cache-link:disabled,.cache-reset-button:disabled{opacity:.5;cursor:wait}
.cache-status{font-size:10px;line-height:1.6;color:var(--gold);margin:5px 0 0}
.cache-status:empty{display:none}
.cache-section{border-top:1px solid #ffffff1c;margin-top:24px;padding-top:15px}
.cache-section .cache-reset-button{width:100%;color:var(--gold)}
.cache-section .note{margin-bottom:0}
/* Scroll only the tutorial copy, keeping its title bar and actions visible. */
.tutorial-card{--tutorial-top:100px;--tutorial-bottom:113px;display:flex;flex-direction:column;top:auto;bottom:var(--tutorial-bottom);max-height:calc(100% - var(--tutorial-top) - var(--tutorial-bottom));min-height:0;padding:0;overflow:hidden}
.tutorial-card .tutorial-top{flex-shrink:0;margin:0;padding:13px 20px 0;align-items:center}
.tutorial-top button{white-space:nowrap;min-height:32px;flex-shrink:0}
.tutorial-top .eyebrow{min-width:0;line-height:1.6}
.tutorial-scroll{overflow:auto;overscroll-behavior:contain;min-height:0;flex:1 1 auto;padding:0 23px 4px;scrollbar-width:thin;scrollbar-color:#626b76 #1b2026}
.tutorial-scroll>p{font-size:12px;line-height:1.85;color:#b9c0c9;margin:0}
.tutorial-card .tutorial-bottom{flex-shrink:0;margin:12px 0 0;padding:12px 20px 15px;background:#191e25;gap:12px}
.tutorial-bottom .primary{white-space:normal;text-align:left;flex-shrink:1;min-width:0;min-height:42px}
.tutorial-progress{flex-shrink:0}
@media(max-width:540px), (orientation:portrait){
 .install-card{width:420px}
 .install-scroll{display:block;padding:23px 24px 18px}
 .install-intro .install-emblem{width:35px;height:35px;margin-bottom:12px}
 .install-intro h2{font-size:30px;margin:10px 0}
 .install-scroll .install-steps{margin-top:22px;gap:14px}
 .install-steps strong{font-size:11px}
 .install-steps small{font-size:10px;line-height:1.7}
 .install-footer{padding:13px 24px}
 .install-footer .install-fine{font-size:9px}
}
@media(orientation:landscape) and (max-height:600px), (orientation:landscape) and (hover:none) and (pointer:coarse){
 .tutorial-card{--tutorial-top:calc(68px + env(safe-area-inset-top));--tutorial-bottom:calc(80px + env(safe-area-inset-bottom));padding:0}
 .tutorial-card .tutorial-top{padding:7px 17px 0}
 .tutorial-scroll{padding:0 18px 2px}
 .tutorial-scroll>p{font-size:11px;line-height:1.7}
 .tutorial-card .tutorial-bottom{padding:9px 17px 10px;margin-top:8px}
 .tutorial-card .tutorial-bottom .primary{min-height:38px}
 .install-card{width:680px;padding:0;display:flex}
 .install-scroll{padding:18px 24px 12px;gap:24px}
 .install-intro .install-emblem{width:30px;height:30px;margin-bottom:9px}
 .install-intro h2{font-size:28px;margin:8px 0}
 .install-footer{padding:9px 24px 10px}
 .install-scroll .install-steps{margin:2px 0 0;gap:11px}
 .install-steps strong{font-size:11px}
 .install-steps small{font-size:9px;line-height:1.6}
}
@media(orientation:landscape) and (max-height:360px){
 .tutorial-card{padding:0}
 .tutorial-card .tutorial-top{padding-top:3px}
 .tutorial-scroll>p{font-size:10px;line-height:1.6}
 .tutorial-card .tutorial-bottom{margin-top:5px;padding-top:6px;padding-bottom:7px}
 .tutorial-card .tutorial-bottom .primary{min-height:34px}
}

/* Let the prologue use the screen height instead of squeezing it between HUD bars. */
.tutorial-card{--tutorial-top:20px;--tutorial-bottom:20px;width:460px;min-height:min(430px,calc(100% - 40px))}
.tutorial-scroll-cue{flex-shrink:0;display:block;padding:6px 20px;color:var(--gold);font-size:10px;text-align:center;background:#f2b84b08;border-top:1px solid #f2b84b20;min-height:28px}
.tutorial-scroll-cue[hidden]{display:none}
@media(orientation:landscape) and (max-height:600px), (orientation:landscape) and (hover:none) and (pointer:coarse){
 .tutorial-card{--tutorial-top:calc(12px + env(safe-area-inset-top));--tutorial-bottom:calc(12px + env(safe-area-inset-bottom));height:calc(100% - var(--tutorial-top) - var(--tutorial-bottom));min-height:0;width:460px;max-width:calc(100% - 36px - env(safe-area-inset-left) - env(safe-area-inset-right))}
 .tutorial-card .tutorial-top{padding-top:6px}
 .tutorial-scroll{padding:0 20px 4px}
 .tutorial-card h2{margin:11px 0;font-size:30px}
 .tutorial-card .tutorial-bottom{margin-top:5px;padding:8px 18px 10px}
 .tutorial-scroll>p{font-size:12px;line-height:1.7}
}
@media(orientation:landscape) and (max-height:360px){
 .tutorial-card{--tutorial-top:calc(8px + env(safe-area-inset-top));--tutorial-bottom:calc(8px + env(safe-area-inset-bottom))}
 .tutorial-card h2{font-size:27px;margin:8px 0}
 .tutorial-scroll>p{font-size:11px;line-height:1.65}
 .tutorial-card .tutorial-bottom{padding-top:7px;padding-bottom:7px}
}