/* Load last. One presentation frame; no input state or canvas sizing overrides. */
.pf-game [data-pf-controls-source]{display:none!important}
.pf-game .pf-controls-frame{box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(180px,1fr) auto;gap:8px;min-width:0;min-height:280px;height:clamp(280px,calc(100dvh - 200px),760px);width:100%;position:relative}
.pf-game .pf-controls-frame>[data-pf-controls-scene]{grid-column:1/-1!important;grid-row:1!important;align-self:stretch;width:100%!important;height:auto!important;min-width:0!important;min-height:0!important;max-height:none!important;margin:0!important}
.pf-game .pf-controls-frame .pf-controls-keys{display:contents!important}
.pf-game .pf-controls-frame .pf-controls-left,.pf-game .pf-controls-frame .pf-controls-right{display:flex;flex-direction:row;align-items:stretch;justify-content:center;gap:8px;grid-row:2;min-width:0;min-height:0;position:relative;z-index:1}
.pf-game .pf-controls-frame .pf-controls-left{grid-column:1}
.pf-game .pf-controls-frame .pf-controls-right{grid-column:2}
.pf-game .pf-controls-frame [data-pf-key]{position:relative;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 0;gap:3px;width:100%;min-width:64px;min-height:80px;height:auto;grid-column:auto!important;grid-row:auto!important;transform:none!important;margin:0;padding:7px 3px;border:1px solid #bccbbb;border-bottom:4px solid #a9bda5;border-radius:15px;background:#fffaf0;color:#203f3a;font:700 18px/1.2 Arial,'Noto Sans TC',sans-serif;font-size:18px;text-align:center;white-space:normal;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overflow:visible}
.pf-game .pf-controls-frame [data-pf-key] kbd{display:block;font:900 28px/1 Arial,sans-serif;font-size:28px;margin:0}
.pf-game .pf-controls-frame [data-pf-key] :is(span,b){font-size:18px;line-height:1.2}
.pf-game .pf-controls-frame [data-pf-key] small{display:block;font-size:11px;line-height:1.3;font-weight:600;white-space:normal;margin:2px 0 0}
.pf-game .pf-controls-frame [data-pf-key]:is([aria-pressed="true"],.active,.held){background:#f8c18f;border-bottom-color:#d18c53}
.pf-game .pf-controls-frame [data-pf-key]:focus-visible{outline:3px solid #d35f32;outline-offset:2px}
/* Fixed-viewport engines retain their original main/play-surface ancestor. */
.pf-game [data-pf-controls-host="long-jump"],.pf-game [data-pf-controls-host="hurdles"],.pf-game [data-pf-controls-host="pole-vault"],.pf-game [data-pf-controls-host="tower-climb"]{display:block!important;padding:0!important;min-height:0;overflow:auto}
.pf-game [data-pf-controls-host="long-jump"]>.pf-controls-frame,.pf-game [data-pf-controls-host="hurdles"]>.pf-controls-frame,.pf-game [data-pf-controls-host="pole-vault"]>.pf-controls-frame,.pf-game [data-pf-controls-host="tower-climb"]>.pf-controls-frame{height:100%}
.pf-game.pf-high-jump [data-pf-controls-host="high-jump"]{grid-template-rows:auto minmax(280px,1fr) auto;overflow:auto}
.pf-game [data-pf-controls-host="high-jump"]>.pf-controls-frame{height:100%}
/* Longjump alone preserves the established standalone lower-field reveal. */
.pf-game .pf-controls-frame[data-game="long-jump"]{grid-template-rows:minmax(180px,1fr) 96px;padding-bottom:var(--controls-lift,0px)}
html[data-controls-raised="true"] .pf-game .pf-controls-frame[data-game="long-jump"]>[data-pf-controls-scene]{grid-row:1/3!important;margin-bottom:calc(-1 * var(--controls-lift,0px))!important}
@media(min-width:900px){
 .pf-game .pf-controls-frame{grid-template-columns:112px minmax(0,1fr) 112px;grid-template-rows:minmax(208px,1fr)}
 .pf-game .pf-controls-frame>[data-pf-controls-scene]{grid-column:2!important;grid-row:1!important}
 .pf-game .pf-controls-frame .pf-controls-left,.pf-game .pf-controls-frame .pf-controls-right{grid-row:1;flex-direction:column;align-self:center;gap:12px}
 .pf-game .pf-controls-frame .pf-controls-right{grid-column:3}
 .pf-game .pf-controls-frame [data-pf-key]{flex:none;min-height:96px}
 .pf-game .pf-controls-frame[data-game="long-jump"]{grid-template-rows:minmax(208px,1fr);grid-template-columns:var(--side-width,112px) minmax(0,1fr) var(--side-width,112px)}
}

/* Throw prototypes previously capped the common frame at 1160/1200px. */
@media(min-width:900px){.pf-game.pf-shot-put>main,.pf-game.pf-discus>main,.pf-game:is(.pf-shot-put,.pf-discus)>.pf-header{max-width:none;width:100%}}

/* Let the viewport own the budget: header/status take natural space, scene takes the rest. */
.pf-game:is(.pf-shot-put,.pf-discus){height:100dvh;display:flex;flex-direction:column;gap:6px;min-height:0;padding:calc(6px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
.pf-game:is(.pf-shot-put,.pf-discus)>main{display:flex!important;flex-direction:column;flex:1;min-height:0;width:100%;margin:0 auto;gap:4px}
.pf-game:is(.pf-shot-put,.pf-discus) .pf-controls-frame{flex:1;height:auto;min-height:240px}
.pf-game:is(.pf-shot-put,.pf-discus) :is(.mast,.hint,.footnote,.status){flex:none;margin:0;padding:2px 0;font-size:12px;line-height:1.4;min-height:0}
.pf-game.pf-discus main>.controls{padding:0;margin:0;flex:none}
.pf-game.pf-discus #cue{position:static;inset:auto;margin:0;padding:2px 0;font-size:12px;line-height:1.4}
.pf-game.pf-high-jump [data-pf-controls-host="high-jump"]{display:flex!important;flex-direction:column;overflow:auto}
.pf-game.pf-high-jump [data-pf-controls-host="high-jump"]>.pf-controls-frame{flex:1;height:auto;min-height:240px}
.pf-game.pf-high-jump .control-panel{flex:none;gap:3px}
.pf-game:is(.pf-hurdles,.pf-pole-vault){grid-template-rows:auto minmax(0,1fr) auto}
.pf-game:is(.pf-hurdles,.pf-pole-vault)>footer{min-height:0;line-height:1.4}
.pf-game.pf-tower-climb{grid-template-rows:auto minmax(0,1fr);padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}
/* On short screens retain readable controls; allow the host to scroll below this useful scene floor. */
@media(max-height:500px){
 .pf-game .pf-controls-frame{min-height:240px;grid-template-rows:minmax(140px,1fr) auto}
 .pf-game .pf-controls-frame[data-game="long-jump"]{grid-template-rows:minmax(140px,1fr) 96px}
}