/* All views share a reserved region below the complete HUD. */
.phone>.overlay,.phone>.account-overlay{top:var(--popup-offset);bottom:auto;height:var(--popup-space);padding:0 6px;align-items:center;justify-content:center;overflow:hidden}
.start-card,.phone[data-scene=forest] .start-card,.account-panel,.account-panel.wide-panel,#guide-dialog,#install-dialog{
 width:var(--popup-width);height:var(--popup-height);max-width:none;max-height:none;min-height:0;aspect-ratio:auto;padding:0;border:0;border-radius:0;background:none;filter:none;isolation:isolate;
}
#guide-dialog,#install-dialog{position:fixed;left:var(--popup-left);top:calc(var(--popup-top) + (var(--popup-space) - var(--popup-height))/2);margin:0;overflow:hidden}
#guide-dialog::backdrop,#install-dialog::backdrop{background:#001d2866;backdrop-filter:none}
/* Crop the straight middle, keeping the bow, snow and corners at their natural scale. */
.popup-decoration{position:absolute;inset:0;display:flex;flex-direction:column;z-index:-1;pointer-events:none;overflow:hidden}
.popup-decoration i{display:block;width:100%;background-image:url('assets/popup-frame-tall.png');background-repeat:no-repeat;background-size:100% auto;flex:none}
.popup-top{height:calc(var(--popup-width)*.34);background-position:center top}
.popup-decoration .popup-middle{flex:1;min-height:0;background-position:center calc(50% - var(--popup-width)*.03)}
.popup-bottom{height:calc(var(--popup-width)*.28);background-position:center bottom}
.account-panel .panel-body,.card-body,.guide-body,.install-body{position:absolute;inset:calc(var(--popup-width)*.27) 11% calc(var(--popup-width)*.12);min-height:0}
.account-panel:before,.start-card:before{inset:calc(var(--popup-width)*.27) 11% calc(var(--popup-width)*.12)}
.account-panel .panel-close,#guide-close{top:calc(var(--popup-width)*.18);right:8%}
.account-panel .panel-body{justify-content:safe center}
.account-panel[data-view=ranking] .panel-body,.account-panel[data-view=chat] .panel-body{justify-content:flex-start}
.account-panel[data-view=avatars] .panel-body{gap:6px}
.account-panel[data-view=avatars] .avatar-grid{width:min(100%,calc((var(--popup-height) - var(--popup-width)*.39 - 162px)*1.5));grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:6px}
.account-panel[data-view=avatars] .avatar-option{min-width:44px;min-height:44px}
.compact-popup .card-body{gap:4px;justify-content:safe center}
.compact-popup .start-card .eyebrow{display:none}
.compact-popup .start-card h2,.compact-popup .start-card:has(.result-stats:not([hidden])) h2{font-size:28px}
.compact-popup .start-card .play-button{height:44px;min-height:44px}
.compact-popup .start-card .menu-links .minor-button{min-height:44px}
.compact-popup .account-panel[data-view=profile] .avatar-picker-trigger{margin:8px 0;min-height:56px}
.compact-popup .account-panel[data-view=profile] .panel-body{justify-content:flex-start}
.start-card[data-save-state=saving] .card-foot,.start-card[data-save-state=error] .card-foot{display:block}
@media(max-height:440px){
 .phone>.overlay,.phone>.account-overlay{align-items:flex-start}
 .account-panel .panel-body,.card-body,.guide-body,.install-body{overflow:auto}
 .account-panel[data-view=avatars] .avatar-grid{width:min(100%,140px);grid-template-columns:repeat(2,minmax(0,1fr))}
}
.compact-popup .guide-art{display:none}
.compact-popup .install-body>img,.compact-popup #install-copy>p{display:none}
.compact-popup .install-body{gap:6px}
.compact-popup .install-body h2{font-size:20px}
.compact-popup #install-copy ol{margin:4px 0;padding-left:19px}
.compact-popup #install-copy li{margin-bottom:6px}

.compact-popup #guide-content{gap:5px}

/* Keep exceptional error messages and very short viewports reachable inside the frame. */
.card-body{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.compact-popup .start-card .menu-links{margin-top:2px}
.compact-popup .start-card .card-foot{margin-top:2px}
.result-rival p{min-width:0;overflow-wrap:anywhere;flex:1}
@media(max-height:600px){.compact-popup .result-stats{display:none}}

.start-card[data-save-state=saving]:has(.result-stats) .card-foot,.start-card[data-save-state=error]:has(.result-stats) .card-foot{display:block}
/* Landscape and an open keyboard get a compact gold frame, without squashing the illustration. */
.short-popup .start-card,.short-popup .account-panel,.short-popup #guide-dialog,.short-popup #install-dialog{background:linear-gradient(#09563e,#032c26);border:2px solid #edca79;border-radius:18px}
.short-popup .popup-decoration{display:none}
.short-popup .account-panel .panel-body,.short-popup .card-body,.short-popup .guide-body,.short-popup .install-body{inset:14px 24px;overflow:auto}
.short-popup .account-panel .panel-close,.short-popup #guide-close{top:0;right:0;z-index:2}
.short-popup .account-panel[data-view=avatars] .avatar-grid{width:140px}