/* Железобетонные мобильные правила — подключены последними, перекрывают всё */

@media screen and (max-width: 900px) {

    html, body {
        height: auto !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
    }

    #app {
        height: auto !important;
        min-height: 100vh !important;
        grid-template-rows: auto auto auto !important;
    }

    #content {
        display: flex !important;
        flex-direction: column !important;
        gap: 20px !important;
        padding: 0 16px 24px !important;
        overflow: visible !important;
    }

    #player {
        order: 1 !important;
        padding: 8px 0 !important;
        overflow: visible !important;
    }

    #right-panel {
        order: 2 !important;
        min-width: 0 !important;
    }

    #left-panel {
        order: 3 !important;
        min-width: 0 !important;
    }

    #left-panel,
    #right-panel {
        overflow: visible !important;
        width: auto !important;
        min-height: 0 !important;
    }

    #right-panel > .card {
        flex: none !important;
    }

    #cassette-stage {
        height: auto !important;
    }

    #footer {
        display: none !important;
    }

    /* КАССЕТА — просто 100% ширины, никаких формул */
    .cassette {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    .cassette-shell {
        width: 100% !important;
    }

    #play-button {
        width: 76px !important;
        height: 76px !important;
        font-size: 18px !important;
    }
}

/* ДИАГНОСТИКА: если мобильные правила работают, фон кассеты станет красным */
@media screen and (max-width: 900px) {
    .cassette-shell {
    }
}

/* ФИНАЛЬНЫЙ УДАР: кассета строго по экрану */
@media screen and (max-width: 900px) {
    .cassette-shell {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        aspect-ratio: 1000 / 640 !important;
        background: linear-gradient(160deg, rgba(42,56,76,.88), rgba(10,14,22,.94) 70%) !important;
    }
    
    .label-strip {
        height: 14% !important;
    }
    
    .label-hand .hand-line {
        font-size: 18px !important;
    }
    
    .tape-area {
        height: 38% !important;
    }
    
    .reel {
        height: 100% !important;
    }
    
    .cover-window {
        height: 85% !important;
    }
}

/* Кнопка Play всегда видна на мобильном */
@media screen and (max-width: 900px) {
    #player{
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        gap:24px !important;
        overflow:visible !important;
    }
    #player-controls{
        display:flex !important;
        justify-content:center !important;
        margin:0 !important;
        width:100% !important;
    }
    #play-button{
        display:flex !important;
        align-items:center;
        justify-content:center;
        width:76px !important;
        height:76px !important;
    }
}

/* Кнопка поверх всего + очередь без старых наездов */
@media screen and (max-width: 900px) {
    #player-controls{
        position:relative !important;
        z-index:50 !important;
    }
    #right-panel{
        position:static !important;
        transform:none !important;
        margin:0 !important;
    }
    #queue{
        position:static !important;
        margin:0 !important;
    }
    .queue-item{
        position:static !important;
    }
}

/* Плавающая кнопка Play — всегда на экране, поверх всего */
@media screen and (max-width: 900px) {
    #player-controls{
        position:fixed !important;
        left:0 !important;
        right:0 !important;
        bottom:16px !important;
        margin:0 !important;
        display:flex !important;
        justify-content:center !important;
        z-index:999 !important;
        pointer-events:none !important;
    }
    #play-button{
        pointer-events:auto !important;
        box-shadow:0 10px 30px rgba(0,0,0,.5), 0 0 25px rgba(61,168,255,.4) !important;
    }
    body{padding-bottom:90px !important;}
}

/* Клики по громкости и переключателю битрейта на мобильном */
@media screen and (max-width: 900px) {
    #volume-box,
    .quality-selector,
    #onair-box {
        pointer-events: auto !important;
    }
    #volume-slider {
        pointer-events: auto !important;
        touch-action: none;
    }
    .quality-btn {
        pointer-events: auto !important;
    }
}

/* Прогресс-бар целиком на мобильном: canvas не распирает flex */
@media screen and (max-width: 900px) {
    #sine-wrap {
        width: 100% !important;
        box-sizing: border-box !important;
    }
    #sine-canvas {
        min-width: 0 !important;
        flex: 1 1 0 !important;
    }
    #ptime-box {
        flex: none !important;
    }
}

/* Волна по ширине, время под ней: начало слева, конец справа */
@media screen and (max-width: 900px) {
    #sine-wrap {
        display: block !important;
        height: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    #sine-canvas {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 36px !important;
    }
    #ptime-box {
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
        margin-top: 6px !important;
    }
}

/* Очередь не распирает экран: мета сжимается, длинные названия обрезаются */
@media screen and (max-width: 900px) {
    #queue, .queue-item {
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }
    .queue-meta {
        min-width: 0 !important;
        flex: 1 1 auto !important;
        overflow: hidden !important;
    }
    .queue-title, .queue-artist {
        max-width: 100% !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }
}

/* На мобильном скрываем погоду — она распирает layout */
@media screen and (max-width: 900px) {
    #left-panel { display: none !important; }
}

/* Сбрасываем auto-minimum грида и флекса — контент не шире экрана */
@media screen and (max-width: 900px) {
    #app {
        grid-template-columns: minmax(0, 1fr) !important;
    }
    #content, #player, #right-panel, #left-panel {
        min-width: 0 !important;
        max-width: 100% !important;
    }
    #player > * {
        min-width: 0 !important;
    }
    .cassette-shell {
        overflow: hidden !important;
    }
}