.cf-result-card{display:grid;grid-template-columns:1fr auto;gap:3px 10px;padding:11px 12px;margin:0 0 12px;border:1px solid #d3e1e6;border-radius:12px;background:#f0f6f8;color:#153d57}
.cf-result-label{grid-column:1;font-size:10px;font-weight:700;letter-spacing:.1em;color:#526d7d}
.cf-result-score,#result-summary .cf-result-score{grid-column:1;font-size:34px;line-height:1.15;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.cf-result-message{grid-column:1/-1;font-size:12px!important;line-height:1.35;min-height:4.05em;margin:4px 0 0!important;color:#456171}
.cf-result-exit{grid-column:2;grid-row:1/3;align-self:center;min-height:44px;padding:7px 10px;border:1px solid #c9dbe2;border-radius:10px;background:white;color:#285a78;font:600 12px system-ui;cursor:pointer}
.cf-result-confirmed .cf-result-message{color:#315d25}
.cf-result-menu-exit{display:block;width:100%;min-height:44px;margin-top:8px;padding:9px 12px;border:1px solid #c9dbe2;border-radius:12px;background:#fff;color:#285a78;font:600 14px system-ui;cursor:pointer}
main:not(.results) .cf-result-menu-exit{display:none}
.results #result-summary>div{display:none}
.results #result-summary .cf-result-card{display:grid}
@media(max-height:650px){.cf-result-card{padding:8px 10px;margin-bottom:8px}.cf-result-score,#result-summary .cf-result-score{font-size:29px}}
dialog[aria-labelledby="cargo-game-title"]>div>p[role="status"],dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]>p{min-height:4.05em;line-height:1.35}
dialog[aria-labelledby="cargo-game-title"] ol[aria-busy="true"],#ranking-list[aria-busy="true"]{visibility:hidden}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]{height:calc(100% - 24px);max-height:380px;box-sizing:border-box}
dialog[aria-labelledby="cargo-game-title"]>div>p[role="status"]{height:4.05em;flex-shrink:0;overflow:auto}
dialog[aria-labelledby="cargo-game-title"] .cf-result-exit{display:none}

/* Backing-store resolution must not affect the flex layout. */
dialog[aria-labelledby="cargo-game-title"] canvas[aria-label^="Hra:"]{position:absolute;inset:0;width:100%;height:100%}

/* Leaderboard-only layout. No changes to gameplay or its camera. */
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"],
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]){position:fixed;inset:96px 8px 64px;height:auto;max-height:none;overflow:hidden;padding:10px;background:#fbfdfefa;z-index:5;border:1px solid #cfdfe5;border-radius:16px}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]){bottom:120px}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"])>div{margin:0;width:100%;max-width:none;line-height:1.2}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"] .cf-result-card,
.results #result-summary .cf-result-card{grid-template-columns:1fr auto;gap:2px 8px;padding:6px 8px;margin:0 0 6px;min-height:0}
dialog[aria-labelledby="cargo-game-title"] .cf-result-label,.results .cf-result-label{grid-column:1;grid-row:1;align-self:center}
dialog[aria-labelledby="cargo-game-title"] .cf-result-score,.results #result-summary .cf-result-score{grid-column:2;grid-row:1;font-size:24px;line-height:1}
dialog[aria-labelledby="cargo-game-title"] .cf-result-message,.results #result-summary .cf-result-message{grid-column:1/-1;min-height:0;height:2.7em;margin:0!important;font-size:11px!important;line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"] h3,
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"] h3{font-size:18px;line-height:1.2;margin:4px 0}
dialog[aria-labelledby="cargo-game-title"] [aria-label="Výber rebríčka"]{display:flex;flex-wrap:nowrap;gap:5px;margin:0 0 5px}
dialog[aria-labelledby="cargo-game-title"] [aria-label="Výber rebríčka"] button{min-height:36px;padding:4px 7px;font-size:12px;white-space:nowrap}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"] ol,
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"] ol{margin:0;padding:0;list-style:none}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"] ol li,
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"] ol li{display:flex;align-items:center;gap:8px;min-height:0;height:clamp(18px,3dvh,26px);padding:0;font-size:clamp(11px,1.9dvh,14px);line-height:1.2}
dialog[aria-labelledby="cargo-game-title"] ol li>span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
dialog[aria-labelledby="cargo-game-title"] ol li>strong{flex-shrink:0;margin-left:auto}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]>p,
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"]>p{min-height:0;height:2.6em;margin:4px 0 0;font-size:10px;line-height:1.3;overflow:hidden}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]) [class~="mb-5"]{display:flex;align-items:center;gap:6px;padding:4px;margin:0 0 4px;white-space:nowrap;overflow:hidden}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]) [class~="mb-5"] *{font-size:11px;line-height:1.2;margin:0}
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]) [class~="mb-5"] [aria-hidden],
dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]) [class~="mb-5"] .capitalize{display:none}
main.results #overlay,main.ranking-view #overlay{position:fixed;inset:62px 8px 34px;z-index:6;overflow:hidden;padding:0;background:transparent;align-items:stretch}
main.results #overlay article,main.ranking-view #overlay article{display:flex;flex-direction:column;width:100%;height:100%;max-height:none;max-width:460px;margin:0 auto;padding:8px;overflow:hidden}
main.results #title{font-size:19px;line-height:1.2;margin:0 0 4px;flex-shrink:0}
main.ranking-view #title,main.ranking-view #message,main.ranking-view #tips,main.ranking-view .note,main.ranking-view #start{display:none}
main.results #result-summary{margin:0;flex-shrink:0}
main.results #ranking,main.ranking-view #ranking{flex:1;min-height:0;max-height:none;overflow:hidden;margin:4px 0;padding:6px;display:flex;flex-direction:column}
main.results #ranking h3,main.ranking-view #ranking h3{font-size:17px;line-height:1.2;margin:2px 0}
main.results #ranking-audience,main.ranking-view #ranking-audience{gap:4px;margin:0 0 3px;flex-shrink:0}
main.results #ranking-audience button,main.ranking-view #ranking-audience button{min-height:34px!important;padding:4px 6px!important;font-size:11px!important;white-space:nowrap}
main.results #ranking-status,main.ranking-view #ranking-status{height:2.6em;min-height:0;max-height:2.6em;font-size:10px;line-height:1.3;margin:2px 0;overflow:hidden;flex-shrink:0}
main.results #ranking-list,main.ranking-view #ranking-list{margin:0;padding-left:20px;flex:1;min-height:0;list-style:decimal}
main.results #ranking-list strong,main.ranking-view #ranking-list strong{float:right;white-space:nowrap}
main.results #champion{display:none}
main.ranking-view .champion:not(.hidden){display:flex;align-items:center;gap:6px;max-height:24px;min-height:24px;padding:3px;margin:0 0 3px;overflow:hidden;font-size:10px;white-space:nowrap}
main.results #ranking-list li,main.ranking-view #ranking-list li{height:clamp(17px,2.9dvh,26px);min-height:0;padding:0;font-size:clamp(11px,1.9dvh,14px);line-height:1.3}
main.results #ranking-list li span,main.ranking-view #ranking-list li span{display:inline-block;max-width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
main.results #ranking-pages,main.ranking-view #ranking-pages{display:none}
main.results #start,main.results .cf-result-menu-exit,main.ranking-view #show-ranking{min-height:40px;height:40px;padding:7px;font-size:14px;margin-top:4px;flex-shrink:0}
main.results .ranking-actions,main.ranking-view .ranking-actions{margin:0;flex-shrink:0}
main.results .ranking-actions:has(#ranking-retry.hidden),main.ranking-view .ranking-actions:has(#ranking-retry.hidden){display:none}
@media(max-height:620px){main.results #title{display:none}}
@media(max-height:500px){
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]{top:78px;bottom:60px}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]){top:72px;bottom:108px}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"] ol,dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"] ol,#ranking-list{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,minmax(18px,1fr));grid-template-columns:repeat(2,minmax(0,1fr));column-gap:16px}
 dialog[aria-labelledby="cargo-game-title"] .cf-result-message,.results #result-summary .cf-result-message{height:1.35em;-webkit-line-clamp:1}
 main.results #overlay,main.ranking-view #overlay{inset:54px 8px 25px}
}
@media(max-height:420px){
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]{inset:64px 8px 56px;display:grid;grid-template-columns:minmax(100px,.85fr) minmax(0,1.6fr);grid-template-rows:auto minmax(0,1fr) auto;gap:4px 12px;padding:8px}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]>.cf-result-card{grid-column:1;grid-row:1;margin:0}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]>[aria-label="Výber rebríčka"]{grid-column:1;grid-row:2;align-self:start;flex-wrap:wrap}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]>h3{grid-column:2;grid-row:1}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]>ol{grid-column:2;grid-row:2/4;align-content:start;grid-template-rows:repeat(5,18px)}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]>p{grid-column:1;grid-row:3}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"]){inset:56px 8px 120px;padding:6px}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"])>div{display:grid;grid-template-columns:minmax(100px,.7fr) minmax(0,1.5fr);gap:8px;height:100%}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Ako hrať CargoFlappy"]:has([aria-label="Úvodný rebríček CargoFlappy"])>div>[aria-label="Výber rebríčka"]{grid-column:1;flex-wrap:wrap;align-content:start}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"]{grid-column:2;grid-row:1/3}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"] ol{grid-template-rows:repeat(5,16px)}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"] ol li{height:16px;font-size:10px}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"] h3{font-size:15px;line-height:1.1;margin:0 0 2px}
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Úvodný rebríček CargoFlappy"]>p{font-size:9px;margin:2px 0 0}
 main.results #overlay article{display:grid;grid-template-columns:minmax(130px,.7fr) minmax(0,1.5fr);grid-template-rows:minmax(0,1fr) 40px 40px;gap:4px 10px;padding:6px;max-width:700px}
 main.results #result-summary{grid-column:1;grid-row:1;align-self:center}
 main.results #ranking{grid-column:2;grid-row:1/4;margin:0;padding:4px}
 main.results #start{grid-column:1;grid-row:2;margin:0}
 main.results .cf-result-menu-exit{grid-column:1;grid-row:3;margin:0}
 main.results #ranking-audience button,main.ranking-view #ranking-audience button{min-height:28px!important;padding:3px 4px!important;font-size:10px!important}
 main.results #ranking h3,main.ranking-view #ranking h3{font-size:15px}
 main.results #ranking-status,main.ranking-view #ranking-status{font-size:9px;margin:0}
 main.results #ranking-list,main.ranking-view #ranking-list{grid-template-rows:repeat(5,16px)}
 main.results #ranking-list li,main.ranking-view #ranking-list li{height:16px;font-size:10px;line-height:1.2}
}

/* Keep notifications out of flex sizing: no empty band, no late-message jump. */
dialog[aria-labelledby="cargo-game-title"]>div>p[role="status"]{position:absolute;top:80px;left:12px;right:12px;z-index:4;height:auto!important;min-height:0!important;max-height:3em;margin:0;padding:3px 6px;background:#f4faf9ee;border-radius:6px;overflow:auto;font-size:11px;line-height:1.3}
dialog[aria-labelledby="cargo-game-title"]>div>p[role="status"]:empty{display:none}
/* Size the result sheet to its ten rows, not to all available screen height. */
@media(min-height:501px){
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]{height:fit-content;bottom:auto;max-height:calc(100dvh - 160px)}
 main.results #overlay{align-items:flex-start}
 main.results #overlay article{height:auto;max-height:100%}
 main.results #ranking,main.results #ranking-list{flex:none}
}

/* Center the content-sized result in the actual game area, not the viewport. */
@media(min-height:501px){
 dialog[aria-labelledby="cargo-game-title"] section[aria-label="Top 10 hráčov"]{position:absolute;inset:8px;margin:auto;height:fit-content;max-height:calc(100% - 16px)}
}

/* Save details belong to the result sheet, never over the flying scene. */
dialog[aria-labelledby="cargo-game-title"]>div>p[role="status"],dialog[aria-labelledby="cargo-game-title"]>div>p[role="status"]:empty{display:none!important}