/* Shared viewport sizing for the five play modes. */
body #howto {
    --howto-bg: #fff;
    --howto-ink: #18304a;
    --howto-line: #d6e5e8;
    width: min(560px, calc(100vw - 28px));
    max-width: 560px;
    max-height: calc(100dvh - 32px);
    padding: 0;
    border: 1px solid var(--howto-line);
    background: var(--howto-bg);
    color: var(--howto-ink);
    border-radius: 18px;
    overflow: auto;
}
html[data-theme="dark"] body #howto {
    --howto-bg: #1c2b3f;
    --howto-ink: #edf4fc;
    --howto-line: #43556b;
}
body #howto::backdrop { background: #08152899; }
body #howto .howto-header, body #howto .howto-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: var(--howto-bg);
}
body #howto .howto-header { position: sticky; top: 0; border-bottom: 1px solid var(--howto-line); }
body #howto h2 { margin: 0; color: var(--howto-ink); font-size: 1.4rem; }
body #howto .dialog-close { float: none; color: var(--howto-ink); width: 36px; height: 36px; border-radius: 8px; }
body #howto .howto-body { padding: 16px 22px; }
body #howto .howto-body p { margin-top: 0; color: var(--howto-ink); }
body #howto li { margin-block: .7rem; padding-left: .25rem; }
body #howto .howto-footer { justify-content: flex-end; border-top: 1px solid var(--howto-line); }
body #howto .btn-primary { background: #087f86; color: #fff; }
body #howto button:focus-visible { outline: 3px solid #f7b733; outline-offset: 2px; }
body .screen-play:not([hidden]) { padding: 10px clamp(8px, 2vw, 24px) !important; min-height: 0 !important; }
body .screen-play:not([hidden]) .game-top { max-width: 1400px; gap: 10px; flex-wrap: wrap; margin-bottom: 8px !important; }
body .screen-play:not([hidden]) .play-card { max-width: 1400px; padding: clamp(10px, 1.5vw, 18px) !important; }
body .screen-play:not([hidden]) .instruction { gap: 10px !important; }
body .screen-play:not([hidden]) .instruction h2 { font-size: clamp(1.15rem, 2.2vw, 1.8rem) !important; line-height: 1.2 !important; }
body .screen-play:not([hidden]) .instruction .mascot { width: 36px; height: 36px; flex: 0 0 36px; font-size: 1.4rem; }
body .screen-play:not([hidden]) .scene:is(.scene-desktop,.scene-laptop,.scene-puzzle,.scene-maze,.scene-sliding-puzzle) {
    width: min(100%, calc(max(220px, 100dvh - 290px) * 1.3333)) !important;
    max-width: 1180px !important;
    max-height: none !important;
    height: auto !important;
    aspect-ratio: 4 / 3 !important;
    margin: 10px auto 6px !important;
}
body .screen-play:not([hidden]) .scene.scene-isometric-maze {
    width: min(100%, calc(max(220px, 100dvh - 290px) * 1.7778)) !important;
    height: auto !important;
    max-height: none !important;
    margin: 10px auto 6px !important;
}
body .screen-play:is(:fullscreen,.is-fullscreen,.is-fullscreen-fallback):not([hidden]) .scene {
    width: min(100%, calc(max(180px, 100dvh - 210px) * 1.3333)) !important;
    flex: 0 0 auto !important;
}
body .screen-play:is(:fullscreen,.is-fullscreen,.is-fullscreen-fallback):not([hidden]) .scene.scene-isometric-maze {
    width: min(100%, calc(max(180px, 100dvh - 210px) * 1.7778)) !important;
}
@media (max-width:600px) {
    body .screen-play:not([hidden]) .game-top .progress { min-width: 70px; }
    body .screen-play:not([hidden]) .game-top .top-actions { flex-wrap: wrap; }
    body .screen-play:not([hidden]) .scene { border-radius: 12px; }
}