/* Keep sound and pause together above the game. */
header.with-header-actions{height:auto;min-height:94px;align-items:center}
.header-actions{display:flex;flex-direction:column;gap:6px;align-items:stretch;margin-left:auto;flex-shrink:0}
header .header-actions button{min-width:80px;width:100%;height:44px;min-height:44px;padding:0 12px;font-size:12px;line-height:1.2}
header .header-actions .pause{font-size:20px}
.controls>.primary{width:100%}
.game .bottom{flex-direction:column;align-items:stretch}
.game .bottom #place{width:100%;min-height:48px}
.game .bottom #combo{text-align:center}

/* A shared portrait shell keeps the primary actions on one baseline. */
.game,.arcade{display:flex;flex-direction:column;min-height:1040px}
.game>.controls,.arcade>.controls,.game>.bottom{margin-top:auto;padding-top:12px;flex-shrink:0}
.controls>.primary,.game .bottom #place,.game .bottom #start{height:56px;min-height:56px;width:100%;margin:0}
.game>footer,.arcade>footer{height:36px;min-height:36px;flex-shrink:0;margin-top:12px;margin-bottom:0;align-items:center}
.arcade>footer{margin-top:2px}
.game:has(.bottom)>footer{margin-top:5px}
@media(min-width:481px){.game:has(.bottom)>footer{margin-top:-2px}}
.game>#combo{text-align:center;font-size:11px}
.game:has(#overlay:not([hidden])) .bottom #place{display:none}
.game:has(#overlay[hidden]) .bottom #start{display:none}

/* Consistent compact headings and full-width playing surfaces. */
.game,.arcade{padding-top:12px;padding-inline:16px;row-gap:0}
.game>footer,.arcade>footer,.game:has(.bottom)>footer{margin-top:12px}
header.with-header-actions{height:94px;min-height:94px;margin:0;flex-shrink:0}
header.with-header-actions .edition{font-size:10px;letter-spacing:.12em}
.game>.heading,.arcade>.heading{height:44px;min-height:44px;margin:14px 0 12px;display:flex;align-items:center;flex-shrink:0}
.heading .eyebrow,.heading .tag,.heading #game-number{display:none}
.game .heading h1,.arcade .heading h1{font-size:34px!important;line-height:1.1!important;white-space:nowrap;margin:0;letter-spacing:-.06em}
.game>.scores,.arcade>.scoreboard{height:72px;min-height:72px;padding:10px 0;margin:0;box-sizing:border-box;flex-shrink:0;border-top:1px solid #332b3e}
.game>.instrument{width:100%;max-width:none;margin:8px 0 12px}
.instrument .dial svg{transform:none!important}
.game>.stage,.arcade>.stage{width:100%;max-width:none!important;margin:0;flex:none;aspect-ratio:400/430}
.game .board-wrap{width:100%;max-width:none;margin-inline:0}
@media(max-width:359px){header.with-header-actions .edition{display:none}}

/* Two compact rows keep Give up directly beneath Pause. */
header .header-actions.with-game-menu{display:grid;grid-template-columns:104px 80px;gap:6px}
.with-game-menu #sound{grid-column:1;grid-row:1}
.with-game-menu #pause{grid-column:2;grid-row:1}
.with-game-menu #view-leaderboard{grid-column:1;grid-row:2}
.with-game-menu #give-up{grid-column:2;grid-row:2}
header:has(.with-game-menu) .edition{display:none}
header .header-actions #give-up,header .header-actions #view-leaderboard{background:#191c27;color:#f7f8fc;border:1px solid #465068;border-radius:8px}
.kcx-end-dialog{width:min(400px,calc(100vw - 32px));box-sizing:border-box;border:1px solid #65718d;border-radius:14px;padding:24px;background:#10131d;color:#f8f9fc;font:16px/1.5 Montserrat,Arial,sans-serif}
.kcx-end-dialog h2{font-size:24px;margin:0 0 12px;line-height:1.2}
.kcx-end-dialog button{min-height:44px;margin:8px 8px 0 0;padding:10px 14px;border:1px solid #65718d;border-radius:8px;background:#1b2233;color:#fff;font:700 14px Montserrat,Arial,sans-serif}
.kcx-end-dialog::backdrop,dialog.kcx-leaderboard::backdrop{background:#000b}