/**
 * BOLANDILA Interactive Game Template
 * Responsive CSS
 *
 * Role of this file:
 * - Mobile-first refinements
 * - Small-screen adjustments
 * - Landscape protection
 * - Touch-friendly sizing
 * - Prevents horizontal scroll and layout breaking
 */

/*
|--------------------------------------------------------------------------
| General mobile adjustments
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .game-stage {
        width: 100vw;
        height: calc(100vw * 16 / 9);
        max-height: 100dvh;
    }

    .text-box {
        max-height: var(--text-box-max-height-mobile);
        padding: var(--text-box-padding-mobile);
    }

    .game-button {
        min-height: 46px;
        padding: 11px 18px;
        font-size: 17px;
    }

    .button-group {
        gap: 9px;
    }

    .modal-box {
        width: 86%;
        max-height: 72vh;
        padding: 20px 16px;
    }

    .modal-title {
        font-size: 26px;
    }

    .banner-box {
        font-size: 16px;
    }
}

/*
|--------------------------------------------------------------------------
| Very small phones
|--------------------------------------------------------------------------
*/

@media (max-width: 380px) {
    .game-title {
        top: 5%;
        left: 7%;
        right: 7%;
        font-size: 23px;
    }

    .screen-block {
        width: 88%;
    }

    .screen-block.is-top-under-title {
        top: 14%;
    }

    .screen-block.is-center {
        width: 88%;
    }

    .screen-block.is-bottom {
        bottom: 5.5%;
    }

    .text-box {
        font-size: 16px;
        max-height: 32vh;
    }

    .game-button {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 16px;
    }

    .restart-button {
        width: 38px;
        height: 38px;
    }

    .restart-button img {
        width: 20px;
        height: 20px;
    }

    .modal-box {
        width: 88%;
        padding: 18px 15px;
    }

    .modal-title {
        font-size: 24px;
    }
}

/*
|--------------------------------------------------------------------------
| Tall phones
|--------------------------------------------------------------------------
*/

@media (min-aspect-ratio: 9 / 18) and (max-width: 520px) {
    .screen-block.is-bottom {
        bottom: 7%;
    }

    .screen-block.is-bottom-high {
        bottom: 14%;
    }

    .text-box {
        max-height: 36vh;
    }
}

/*
|--------------------------------------------------------------------------
| Short phones / limited vertical space
|--------------------------------------------------------------------------
*/

@media (max-height: 690px) and (max-width: 520px) {
    .game-title {
        top: 4.5%;
        font-size: 23px;
    }

    .screen-block.is-top-under-title {
        top: 13%;
    }

    .screen-block.is-bottom {
        bottom: 4.5%;
    }

    .screen-block.is-bottom-high {
        bottom: 10%;
    }

    .text-box {
        max-height: 30vh;
        padding: 14px 14px;
        font-size: 16px;
    }

    .game-button {
        min-height: 42px;
        padding: 9px 15px;
        font-size: 16px;
    }

    .button-group {
        gap: 8px;
    }
}

/*
|--------------------------------------------------------------------------
| Landscape protection
|--------------------------------------------------------------------------
*/

@media (orientation: landscape) and (max-height: 560px) {
    .game-shell {
        align-items: center;
        justify-content: center;
    }

    .game-stage {
        height: 100dvh;
        width: calc(100dvh * 9 / 16);
        max-width: 100vw;
    }

    .game-title {
        top: 4%;
        font-size: 21px;
    }

    .screen-block.is-top-under-title {
        top: 13%;
    }

    .screen-block.is-bottom {
        bottom: 4%;
    }

    .screen-block.is-center {
        width: 84%;
    }

    .text-box {
        max-height: 34vh;
        padding: 13px 14px;
        font-size: 15px;
    }

    .game-button {
        min-height: 38px;
        padding: 8px 14px;
        font-size: 15px;
    }

    .restart-button {
        width: 36px;
        height: 36px;
    }

    .restart-button img {
        width: 19px;
        height: 19px;
    }
}

/*
|--------------------------------------------------------------------------
| Desktop refinements
|--------------------------------------------------------------------------
*/

@media (min-width: 900px) {
    .game-stage {
        border-left: 1px solid rgba(246, 200, 76, 0.10);
        border-right: 1px solid rgba(246, 200, 76, 0.10);
    }

    .game-title {
        font-size: 34px;
    }

    .text-box {
        font-size: 19px;
    }

    .game-button {
        font-size: 19px;
    }
}

/*
|--------------------------------------------------------------------------
| Large desktop
|--------------------------------------------------------------------------
*/

@media (min-width: 1400px) {
    .game-stage {
        box-shadow:
            0 0 90px rgba(0, 0, 0, 0.82),
            0 0 48px rgba(246, 200, 76, 0.12);
    }
}

/*
|--------------------------------------------------------------------------
| Level 2 responsive drones
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .level-2-drones {
        top: 36%;
        left: 5%;
        right: 5%;
        gap: 2%;
    }

    .level-2-drones .game-item {
        width: 31%;
    }
}

@media (max-height: 690px) and (max-width: 520px) {
    .level-2-drones {
        top: 34%;
    }
}

/*
|--------------------------------------------------------------------------
| Carousel responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .carousel-stage {
        top: 10%;
        left: 6%;
        width: 88%;
    }

    .carousel-visual {
        width: 78%;
    }

    .carousel-item {
        width: 66%;
    }

    .carousel-arrow {
        width: 38px;
        height: 38px;
        font-size: 27px;
    }

    .carousel-description {
        margin-top: 10px;
    }
}

@media (max-height: 690px) and (max-width: 520px) {
    .carousel-stage {
        top: 19%;
    }

    .carousel-visual {
        width: 66%;
    }

    .carousel-description .text-box {
        max-height: 22vh;
    }
}

/*
|--------------------------------------------------------------------------
| Multi-select grid responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .items-grid {
        gap: 12px;
    }

    .game-item {
        border-radius: 15px;
    }
}

@media (max-height: 690px) and (max-width: 520px) {
    .items-grid {
        gap: 9px;
    }
}

/*
|--------------------------------------------------------------------------
| Drag/drop responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .drag-drop-stage {
        top: 30%;
        left: 5%;
        width: 90%;
        gap: 18px;
    }

    .draggable-items,
    .drop-slots {
        gap: 2.5%;
    }

    .draggable-item,
    .drop-slot {
        width: 30%;
    }
}

@media (max-height: 690px) and (max-width: 520px) {
    .drag-drop-stage {
        top: 28%;
        gap: 14px;
    }
}

/*
|--------------------------------------------------------------------------
| Quiz responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .quiz-answers {
        gap: 9px;
    }

    .quiz-answer {
        min-height: 42px;
        padding: 10px 12px;
        font-size: 16px;
    }
}

@media (max-height: 690px) and (max-width: 520px) {
    .quiz-answer {
        min-height: 38px;
        padding: 8px 11px;
        font-size: 15px;
    }
}

/*
|--------------------------------------------------------------------------
| Reward responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .reward-button-wrap {
        left: 7%;
        bottom: 6%;
        width: 86%;
    }
}

@media (max-height: 690px) and (max-width: 520px) {
    .reward-button-wrap {
        bottom: 4.5%;
    }
}

/*
|--------------------------------------------------------------------------
| Level 6 scale markers responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .scale-marker {
        width: 21px;
        height: 32px;
    }

    .scale-marker::after {
        bottom: -8px;
        border-left-width: 6px;
        border-right-width: 6px;
        border-top-width: 9px;
    }
}

@media (max-width: 380px) {
    .scale-marker {
        width: 19px;
        height: 30px;
    }
}

/*
|--------------------------------------------------------------------------
| Banner responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .banner-box {
        max-height: 34vh;
    }

    .banner-close {
        width: 26px;
        height: 26px;
        font-size: 17px;
    }

    .banner-box.has-close {
        padding-right: 38px;
    }
}

@media (max-height: 690px) and (max-width: 520px) {
    .banner-box {
        max-height: 28vh;
    }
}

/*
|--------------------------------------------------------------------------
| Debugger responsive behavior
|--------------------------------------------------------------------------
*/

@media (max-width: 520px) {
    .debugger-panel {
        max-height: 60%;
        font-size: 11px;
        padding: 10px;
    }
}

/*
|--------------------------------------------------------------------------
| Devices without hover
|--------------------------------------------------------------------------
*/

@media (hover: none) {
    .game-button:hover,
    .restart-button:hover,
    .game-item:hover,
    .carousel-arrow:hover,
    .quiz-answer:hover,
    .banner-close:hover {
        transform: none;
        filter: none;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced motion reinforcement
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    .background-blur-fill,
    .stage-background,
    .stage-overlay,
    .screen-content,
    .game-button,
    .game-item,
    .restart-button,
    .carousel-item,
    .scale-marker {
        transition: none !important;
    }
}