/* The arena keeps the exact physics ratio; scenery fills the complete screen. */
.arena-space{flex:1;min-height:0;width:100%;display:grid;place-items:center;position:relative}
.arena-space>.arena-wrap{box-sizing:content-box;flex:none;margin:0;min-height:0;max-width:none;aspect-ratio:10/17}
@media(max-width:600px),(display-mode:standalone){
 html,body{height:100%;min-height:0;overflow:hidden;overscroll-behavior:none;background:#052821}
 .layout{height:100vh;height:100dvh;min-height:0;width:100%;padding:0;display:flex;align-items:stretch;justify-content:center}
 .phone{width:100%;height:100%;min-height:0;max-height:none;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
 .world{inset:0}.game-header{background:linear-gradient(#04352c55,#04352c22)}
 .account-overlay,.phone>.overlay{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}
 .account-panel,.account-panel.wide-panel,.start-card,.phone[data-scene=forest] .start-card{width:min(100%,420px,calc((100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px)*.6666667))}
}
.account-panel[data-view=avatars] .avatar-grid{width:100%;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:10px}
.account-panel[data-view=avatars] .avatar-option{width:100%;height:auto;min-width:44px;min-height:44px;aspect-ratio:1;padding:3px}
.account-panel[data-view=avatars] .panel-body{gap:10px;justify-content:safe center}
.account-panel[data-view=avatars] .avatar-current{font-size:17px;line-height:1.3}
.account-panel[data-view=avatars] .avatar-pages{font-size:16px;flex-shrink:0}
.account-panel[data-view=avatars] .play-button{height:50px;min-height:50px;font-size:18px}
@media(max-width:350px){.account-panel[data-view=avatars] .panel-body{gap:5px}.account-panel[data-view=avatars] .avatar-grid{gap:6px}.account-panel[data-view=avatars] .avatar-current{font-size:16px}.account-panel[data-view=avatars] .play-button{height:44px;min-height:44px}}
@media(max-height:440px){
 .account-panel[data-view=avatars]{width:min(94vw,440px);height:calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 16px);aspect-ratio:auto;background:radial-gradient(ellipse at top,#125c42,#032d27);border:2px solid #edcc83;border-radius:22px}
 .account-panel[data-view=avatars] .panel-body{inset:12px 20px;gap:4px}
 .account-panel[data-view=avatars] .avatar-grid{width:min(100%,150px,calc(100dvh - 190px));grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:6px}
 .account-panel[data-view=avatars] .avatar-option{padding:2px}.account-panel[data-view=avatars] .avatar-current{font-size:16px}
 .account-panel[data-view=avatars] .play-button{height:44px;min-height:44px}
}
/* Preserve the proportions of the illustrated HUD instead of stretching it. */
.stat.timer,.stat.combo,.stat.main-score{background-size:contain}
.timer strong{font-size:clamp(18px,5.8vw,26px);line-height:1.1}
.rival{background:none;isolation:isolate}
.rival:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border:solid transparent;border-width:16px 29px;border-image:url('assets/hud-rival.webp') 60 110 60 110 fill / 16px 29px / 0 stretch}
/* Keep Safari's top-layer dialogs measurable even with absolutely positioned content. */
#install-dialog{height:min(141vw,600px,94svh);filter:none}
.arena-wrap{container-type:inline-size}
@container(max-width:280px){
 .letter-collection{gap:3px;padding:4px 5px}
 .letter-collection>span{width:18px;height:23px;font-size:13px}
 .letter-collection>b{font-size:11px}
 .arena-top{left:8px;right:8px;font-size:10px;letter-spacing:0}
 .super-banner strong{font-size:28px}.super-banner>span{font-size:14px}
}

/* Fixed inset fills the standalone app's drawable viewport. */
@media(display-mode:standalone){
 .layout{position:fixed;inset:0;height:100%;min-height:0}
 .phone{height:100%;width:100%}
 .menu-utility{grid-template-columns:1fr}
}
/* Modals dim the scene without blurring the status-bar background. */
.overlay,.account-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}

#guide-dialog{height:min(141vw,630px,96svh);filter:none}

.ios-standalone .phone{padding-bottom:max(16px,env(safe-area-inset-bottom))}
@media(min-height:700px){.ios-standalone .phone{padding-bottom:max(34px,env(safe-area-inset-bottom))}}
.phone{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.phone input,.phone textarea,.phone [contenteditable]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}