/* Opt-in layout for the six standalone CW trainers/games. MorseChat uses
   its own layout. Keep each game's existing colours and console typography. */
@media (max-width: 640px) {
    .app-header { gap: 6px; padding-bottom: 8px; margin-bottom: 8px; }
    .app-header h1 { font-size: 1.08rem; }
    .sidebar-scroll { gap: 6px 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .sidebar-scroll > .arcade-sep,
    .sidebar-scroll > .conn-row,
    .sidebar-scroll > .conn-text,
    .sidebar-scroll > .arcade-title-row .arcade-title { display: none; }
    .sidebar-scroll > .arcade-title-row {
        grid-column: 3; grid-row: 3;
        justify-content: flex-end; min-height: 44px;
    }
    .sidebar-scroll > .arcade-title-row:not(:has(button)) { display: none; }
    .sidebar-scroll > .arcade-primary { grid-column: 1 / 3; grid-row: 3; margin: 0; }
    .sidebar-scroll > .arcade-stat { min-width: 0; gap: 2px; }
    .arcade-stat .cap { font-size: .62rem; letter-spacing: 0; }
    .arcade-stat .val { font-size: 1.2rem; line-height: 1.15; }
    .sidebar-scroll > #leaderboard-eligibility {
        grid-column: 1 / 3; grid-row: 4;
        min-height: 0; height: auto; padding: 5px 6px;
        font-size: .62rem; line-height: 1.35;
    }
    .sidebar-scroll .leaderboard-status-title,
    .sidebar-scroll .eligibility-title { font-size: .58rem; letter-spacing: 0; }
    .sidebar-scroll .leaderboard-status-detail,
    .sidebar-scroll .eligibility-detail { font-size: .6rem; white-space: normal; }
    .sidebar-scroll > .mobile-fold-toggle { grid-column: 3; grid-row: 4; font-size: .65rem; letter-spacing: 0; }
    .console-chrome { height: 28px; padding: 4px 8px; }
    .chrome-status { font-size: .55rem; }
    .settings-panel { position: fixed; inset: 0; z-index: 50; padding: 12px; }
    .settings-panel > .arcade-title-row { position: sticky; top: -12px; background: inherit; z-index: 1; }
    .box-dock { padding-inline: 8px; }
    .box-status select { min-width: 0; max-width: 100%; width: 100%; }
    .network-key-field { flex-wrap: wrap; max-width: 100%; }
    .box-secret-input { min-width: 0; max-width: 100%; }
    .game-hidden-input { font-size: 16px; }
    .app:has(.training-grid) { padding: 10px; }
    .app-nav { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; gap: 2px; }
    .app-nav > * { flex: 0 0 auto; white-space: nowrap; min-height: 44px; }
    .nav-switch { display: flex; align-items: center; }
    .training-grid { gap: 8px; min-width: 0; }
    .side-panel, .train-main { min-width: 0; padding: 12px; }
    .phone-training-details > summary { min-height: 44px; padding-block: 12px; cursor: pointer; font-size: .85rem; }
    .side-panel h3 { margin-bottom: 4px; }
    .landing-info { margin-top: 0; }
    .btn-row button, .imt-btn, .side-panel input, .side-panel select { min-height: 44px; }
    .os-score-panel { max-height: calc(100dvh - 20px); overflow-y: auto; }
    .os-consent-dialog { max-height: calc(100dvh - 24px); }
    .os-consent-backdrop { padding: 12px; }

    /* During a Balloon Burst run, keep the score, Stop, whole playfield and
       current input surface together. A soft keyboard resizes this viewport. */
    body.balloon-playing { height: var(--cw-viewport-height, 100dvh); min-height: 0; overflow: hidden; }
    .balloon-playing .app { flex: 1 1 0; min-height: 0; padding: 4px 4px 0; }
    .balloon-playing .app-header,
    .balloon-playing .legal-footer,
    .balloon-playing .box-dock { display: none; }
    .balloon-playing .game-shell { min-height: 0; overflow: hidden; }
    .balloon-playing .canvas-wrap { flex: 1 1 0; min-height: 0; }
    .balloon-playing .sidebar-scroll { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 4px; }
    .balloon-playing .sidebar-scroll > * { display: none; }
    .balloon-playing .sidebar-scroll > .arcade-stat:has(#val-score, #val-level, #val-stuck) { display: flex; grid-row: 1; grid-column: auto; }
    .balloon-playing .sidebar-scroll > .arcade-primary { display: block; grid-row: 1; grid-column: 4; font-size: .72rem; min-height: 44px; padding: 4px; }
    .balloon-playing #paddle-dock-slot { flex: 0 0 auto; }
    .balloon-playing.balloon-listen #paddle-dock-slot { display: none; }
    .balloon-playing .paddle-dock { margin: 4px; border-radius: 8px; }
    .balloon-playing .pd-body { padding: 6px; }
    .balloon-playing .pd-zones { height: 84px; }
    .balloon-playing .pd-settings { display: none; }
}
@media (min-width: 641px) {
    .phone-training-details > summary { display: none; }
}