/* ==================== PC / DESKTOP FIT-TO-VIEWPORT ==================== */
        /* Scales the whole main-screen so it always fits vertically on desktop   */
        @media (min-width: 951px) {
            body {
                position: relative;
                padding: 0;
                overflow: hidden;
                height: 100vh;
                min-height: 100vh;
            }
            .main-screen {
                position: absolute;
                top: 50%;
                left: 50%;
                margin: 0;
                transform: translate(-50%, -50%) scale(var(--fit-scale, 1));
                transform-origin: center center;
                will-change: transform;
            }
        }
 /* ==================== MOBILE MODE ==================== */
        @media (max-width: 950px) {
            html, body {
                overflow-x: hidden;
                overflow-y: auto;
                height: auto;
                min-height: 100vh;
                min-height: 100dvh;
                -webkit-text-size-adjust: 100%;
            }
            body {
                padding: max(8px, env(safe-area-inset-top)) 8px max(12px, env(safe-area-inset-bottom)) 8px;
                align-items: center;
                justify-content: center;
                font-size: 1rem;
            }
            .main-screen {
                width: 100%;
                max-width: 100%;
                padding: 8px 8px 14px 8px;
                border-radius: 12px;
                border-width: 2px;
                margin-top: auto;
                margin-bottom: auto;
            }
            .main-screen::before { display: none; }
            .header-section {
                gap: 6px;
                margin-left: 0;
                padding: 0 4px;
                justify-content: space-between;
                flex-wrap: nowrap;
            }
            .logo-box { margin-left: 0; }
            .logo-box img { width: 40px; height: 62px; }
            .app-title { margin-left: 0; flex: 1 1 auto; }
            .zeriab-text { font-size: 1.35rem; margin-left: 0; margin-top: 5px; margin-bottom: -6px; letter-spacing: 1px; }
            .flamenco-script { font-size: 2.3rem; margin-left: 0; margin-top: -6px; }
            .header-lang-switcher { margin-right: 0; width: 38px; height: 38px; flex-shrink: 0; }
            .header-lang-switcher .lang-flag-img, #currentFlagIcon { width: 38px !important; height: 38px !important; }
            .flag-wrapper { width: 38px; height: 38px; }
            .control-panel { padding: 8px 4px; border-radius: 10px; }
            .beat-box { padding: 4px; margin-bottom: 10px; border-width: 2px; border-radius: 10px; }
            .beat-visualization { gap: 3px; }
            .beat-light { width: 20px; height: 32px; border-radius: 5px; }
            .bpm-screen { height: auto; min-height: auto; padding: 10px 10px; border-width: 2px; }
            .tv-frames-row {
                display: flex;
                flex-direction: column;
                gap: 6px;
                flex-wrap: nowrap;
                align-items: stretch;
            }
            #rhythmTv, #bpmTv, #timerTv {
                width: 100%;
                flex: none;
                min-width: 0;
                border-radius: 12px;
                margin-bottom: 0;
            }
            #bpmTv { order: 1; }
            #timerTv { order: 2; }
            #rhythmTv { order: 3; }
            #rhythmTv .tv-frame-inner, #bpmTv .tv-frame-inner, #timerTv .tv-frame-inner {
                height: auto;
                min-height: 72px;
                padding: 6px 4px;
                min-width: 0;
                max-width: none;
                width: 100%;
            }
            .rhythm-label-top, .bpm-label-top, .timer-label-top { font-size: 0.58rem; letter-spacing: 1px; margin-bottom: 2px; }
            .rhythm-name { font-size: 1.1rem; min-width: 0; max-width: 100%; padding: 2px 4px; word-break: break-word; text-overflow: clip; overflow: visible; }
            .setting-row { margin-top: 4px; justify-content: center; }
            .setting-icon { font-size: 0.55rem; width: 12px; }
            .setting-value { font-size: 0.7rem; padding: 2px 4px; min-width: 0 !important; }
            .bpm-number { font-size: 2.6rem; }
            .tempo-marking-inside { font-size: 0.65rem; padding: 2px 5px; margin-top: -4px; min-width: 0 !important; }
            .timer-display-new { font-size: 1.6rem; letter-spacing: 1px; }
            .timer-wrapper .icon-btn#resetTimerIconBtn { width: 22px; height: 22px; font-size: 0.8rem; margin-top: 4px; }
            .shift-controls-row { margin-left: 0; }
            .shift-title-clickable { font-size: 0.8rem; padding: 3px 6px; margin-left: auto; margin-right: auto; max-width: 100%; gap: 4px; min-height: auto; margin-bottom: 10px; }
            .shift-status-badge { font-size: 0.6rem; padding: 2px 5px; }
            .bpmpIcon-playPauseTriangleBtn-bpmDownIcon-row { margin-left: 0; gap: 12px; flex-wrap: wrap; justify-content: center; padding: 0 4px; }
            #bpmUpIcon, #bpmDownIcon { width: 28px !important; height: 28px !important; margin-top: 12px !important; font-size: 1.6rem !important; }
            #playPauseTriangleBtn { width: 58px !important; height: 58px !important; font-size: 1.6rem !important; margin-top: 12px !important; }
            #playPauseTriangleBtn::after { border-width: 7px; top: -9px; left: -9px; right: -9px; bottom: -9px; }
            #playPauseTriangleBtn::before { border-width: 2px; top: -4px; left: -4px; right: -4px; bottom: -4px; }
            .menu-dots-btn { margin-left: 50px; margin-right: -180px;width: 32px; height: 32px; margin-top: 12px; font-size: 1.2rem; }
            .action-stack { bottom: auto; top: 100%; margin-top: 6px; padding: 6px; gap: 6px; min-width: 40px; }
            .action-stack .icon-btn { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
            .simple-copyright { font-size: 0.58rem; margin-top: 14px; padding: 4px; line-height: 1.6; max-width: 100%; }
            .footer-links { margin-top: 12px;margin-bottom: -5px; padding-top: 2px; }
            .footer-links a { font-size: 1rem; margin: 0 7px; }
            .favorites-dropdown, .share-dropdown, .autoshift-modal { width: 90%; max-width: 100%; padding: 14px; max-height: 90vh; border-width: 2px; }
            .confirm-modal, .tip-modal { width: 80% !important; max-width: 340px; padding: 18px; }
            .favorites-title { font-size: 1rem; }
            .modal-shift-value-num { font-size: 1rem; }
            .modal-shift-item-single { padding: 6px 10px; gap: 6px; }
            .modal-tv-screen { min-width: 0; }
            .autoshift-title { font-size: 1rem; }
            .lang-dropdown { min-width: 200px; max-width: 240px; max-height: 60vh; }
            .lang-item { font-size: 0.85rem; padding: 9px 12px; }
            .dropdown-menu, .sound-dropdown, .beat-dropdown, .fav-presets-dropdown { min-width: 200px; max-width: 260px; max-height: 50vh; }
            .dropdown-item, .sound-item, .beat-item { padding: 9px 12px; font-size: 0.85rem; }
            .autoshift-input { font-size: 16px; }
            #promptInput { font-size: 16px !important; }
            .delete-popup { bottom: 60px; max-width: 92vw; }
            .delete-popup-content { padding: 12px 14px; font-size: 0.82rem; gap: 8px; white-space: normal; }
            .delete-popup-btn { padding: 6px 14px; font-size: 0.8rem; }
            .ok-autoshift-btn { font-size: 0.9rem; padding: 10px; }
            .autoshift-label { font-size: 0.75rem; }
            .spinner-btn { width: 24px; height: 18px; font-size: 0.7rem; }
            .icon-btn { width: 44px; height: 44px; font-size: 1.4rem; }
            #saveSessionFloppyBtn, #favoritesBtn, #shareProgressBtn, #favoritePresetsStarBtn { width: 40px !important; height: 40px !important; font-size: 1rem !important; }
        }
        @media (max-width: 380px) {
            .bpm-number { font-size: 2.2rem; }
            .rhythm-name { font-size: 1rem; }
            .timer-display-new { font-size: 1.4rem; }
            .beat-light { width: 16px; height: 26px; }
            .beat-visualization { gap: 2px; }
            .zeriab-text { font-size: 1.15rem; }
            .flamenco-script { font-size: 1.9rem; }
            .logo-box img { width: 32px; height: 50px; }
            .setting-value { font-size: 0.65rem; }
            .shift-title-clickable { font-size: 0.8rem; }
            #playPauseTriangleBtn { width: 52px !important; height: 52px !important; }
            .rhythm-label-top, .bpm-label-top, .timer-label-top { font-size: 0.52rem; }
            #rhythmTv .tv-frame-inner, #bpmTv .tv-frame-inner, #timerTv .tv-frame-inner {
                min-height: 64px;
                padding: 5px 3px;
            }
        }
        @media (max-width: 1200px) and (orientation: landscape) and (max-height: 500px) {
            body { padding: 4px; font-size: 0.9rem; }
            .main-screen { width: 100%; max-width: 100%; padding: 6px; }
            .beat-light { width: 16px; height: 26px; }
            .bpm-screen { height: auto; min-height: auto; }
            .tv-frames-row {
                flex-direction: row;
                gap: 4px;
            }
            #rhythmTv, #bpmTv, #timerTv {
                width: 33%;
                flex: 1 1 0;
                order: unset;
            }
            #rhythmTv .tv-frame-inner, #bpmTv .tv-frame-inner, #timerTv .tv-frame-inner {
                height: 68px;
                min-height: 68px;
            }
            .bpm-number { font-size: 2rem; }
            .logo-box img { width: 34px; height: 52px; }
            .zeriab-text { font-size: 1.2rem; }
            .flamenco-script { font-size: 2rem; }
        }
		/* ==================== AUTO-SHIFT MODAL — FIT TO SCREEN ==================== */

/* 1. Let the overlay scroll instead of cutting content off */
.autoshift-modal-overlay {
    padding: 12px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 2. Constrain the modal itself */
.autoshift-modal {
    width: min(94vw, 480px);
    max-width: 480px;
    max-height: calc(100vh  - 24px);
    max-height: calc(100dvh - 24px);   /* modern mobile browsers */
    overflow-y: auto;
    padding: 14px 16px;
    margin: auto;                       /* keeps it centered when overlay scrolls */
    box-sizing: border-box;
}

/* 3. Slim down the header */
.autoshift-header   { margin-bottom: 10px; gap: 12px; }
.autoshift-title    { font-size: 1.25rem; white-space: normal; }

/* 4. Shrink the "TV" readout */
.modal-shift-tv-frame  { margin-bottom: 10px; }
.modal-tv-set          { padding: 8px; }
.modal-tv-screen       { min-width: 0; padding: 4px 6px; }
.modal-shift-label     { font-size: 0.85rem; margin-bottom: 8px; letter-spacing: 1px; }
.modal-shift-tv-values { gap: 8px; margin-bottom: 8px; }
.modal-shift-item-single { padding: 6px 12px; gap: 8px; border-radius: 20px; }
.modal-shift-value-num   { font-size: 1.25rem; }
.modal-shift-value-unit  { font-size: 0.7rem; }
.modal-value-divider     { font-size: 1rem; }
.modal-direction-toggle  { width: 32px; height: 32px; font-size: 1.25rem; }
.modal-shift-status      { font-size: 0.85rem; padding-top: 8px; }

/* 5. Shrink the three input rows */
.autoshift-field   { margin: 10px 0; }
.autoshift-label   { font-size: 0.85rem; margin-bottom: 4px; padding-left: 2px; }
.autoshift-input   { padding: 10px 44px 10px 12px; font-size: 1rem;
                     border-width: 2px; border-radius: 10px; }
.spinner-buttons   { right: 8px; gap: 3px; }
.spinner-btn       { width: 25px; height: 16px; font-size: 0.85rem; }

/* 6. Shrink the buttons */
.ok-autoshift-btn        { padding: 10px; font-size: 1rem;
                           margin-top: 12px; margin-bottom: 6px; }
#closeAutoShiftBtn       { margin-top: 4px !important; }

/* 7. Cap the preset list so it can't push the modal down */
.shift-presets-list { max-height: 150px; overflow-y: auto; }
/* ==================== TOAST — FULLY HIDE WHEN NOT SHOWN ==================== */

.toast {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(120px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

.toast.show {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s;
}