/* ============================================
   FOREST MAGIC — Responsive Breakpoints
   ============================================ */

/* ----- Desktop (1200px+) ----- */
@media (min-width: 1200px) {
    .top-bar {
        margin: var(--space-3) var(--space-6);
        padding: var(--space-3) var(--space-6);
    }

    .info-item {
        min-width: 120px;
    }

    .info-value {
        font-size: var(--font-size-xl);
    }

    .info-label {
        font-size: var(--font-size-xs);
    }

    .btn-spin {
        width: 90px;
        height: 90px;
    }

    .spin-icon {
        width: 36px;
        height: 36px;
    }

    .btn-control {
        width: 64px;
        height: 58px;
    }

    .bottom-bar {
        padding: var(--space-4) var(--space-6);
    }

    .bottom-bar__controls {
        gap: var(--space-5);
    }

    .modal-container {
        max-width: 650px;
    }
}

/* ----- Large Desktop (1440px+) ----- */
@media (min-width: 1440px) {
    .info-item {
        min-width: 140px;
    }

    .info-value {
        font-size: var(--font-size-2xl);
    }

    .btn-spin {
        width: 100px;
        height: 100px;
    }

    .spin-icon {
        width: 40px;
        height: 40px;
    }
}

/* ----- Tablet Landscape (1024px) ----- */
@media (max-width: 1199px) and (min-width: 769px) {
    .top-bar {
        margin: var(--space-2) var(--space-4);
    }

    .info-item {
        min-width: 90px;
    }

    .info-value {
        font-size: var(--font-size-md);
    }

    .btn-spin {
        width: 76px;
        height: 76px;
    }

    .btn-control {
        width: 52px;
        height: 48px;
        font-size: 9px;
    }

    .btn-control svg {
        width: 18px;
        height: 18px;
    }
}

/* ----- Tablet Portrait (768px) ----- */
@media (max-width: 768px) {
    .top-bar {
        margin: var(--space-1) var(--space-2);
        padding: var(--space-2) var(--space-3);
        border-radius: var(--radius-lg);
    }

    .info-display {
        gap: var(--space-3);
    }

    .info-item {
        min-width: 70px;
    }

    .info-label {
        font-size: 9px;
    }

    .info-value {
        font-size: var(--font-size-base);
    }

    .info-divider {
        height: 22px;
    }

    .bottom-bar {
        padding: var(--space-2) var(--space-3);
    }

    .bottom-bar__controls {
        gap: var(--space-2);
    }

    .controls-center {
        gap: var(--space-3);
    }

    .btn-spin {
        width: 70px;
        height: 70px;
    }

    .spin-icon {
        width: 28px;
        height: 28px;
    }

    .btn-control {
        width: 48px;
        height: 44px;
        font-size: 8px;
        border-radius: var(--radius-sm);
    }

    .btn-control svg {
        width: 16px;
        height: 16px;
    }

    .btn-bet {
        width: 36px;
        height: 36px;
        font-size: var(--font-size-md);
    }

    .btn-max-bet {
        width: 40px;
        font-size: 9px;
    }

    .bet-display {
        min-width: 50px;
    }

    .bet-amount {
        font-size: var(--font-size-base);
    }

    .side-menu-panel {
        width: 260px;
    }

    .modal-container {
        max-width: 95%;
        max-height: 85vh;
    }

    .bigwin-title {
        font-size: var(--font-size-3xl);
    }

    .bigwin-amount {
        font-size: 3.5rem;
    }
}

/* ----- Mobile Landscape (640px) ----- */
@media (max-width: 768px) and (orientation: landscape) {
    .top-bar {
        margin: var(--space-1);
        padding: var(--space-1) var(--space-3);
    }

    .info-value {
        font-size: var(--font-size-sm);
    }

    .info-label {
        font-size: 8px;
    }

    .info-divider {
        height: 18px;
    }

    .bottom-bar {
        padding: var(--space-1) var(--space-2);
    }

    .btn-spin {
        width: 56px;
        height: 56px;
    }

    .spin-icon {
        width: 22px;
        height: 22px;
    }

    .btn-control {
        width: 42px;
        height: 38px;
        font-size: 7px;
        gap: 1px;
    }

    .btn-control svg {
        width: 14px;
        height: 14px;
    }

    .controls-left,
    .controls-right {
        flex-direction: row;
        gap: var(--space-1);
    }

    .btn-bet {
        width: 32px;
        height: 32px;
        font-size: var(--font-size-base);
    }

    .bet-controls {
        gap: var(--space-1);
    }

    .bet-display {
        min-width: 44px;
    }

    .bet-amount {
        font-size: var(--font-size-sm);
    }

    .bet-label {
        font-size: 7px;
    }

    .extra-controls {
        flex-direction: row;
        gap: var(--space-1);
    }

    .btn-max-bet {
        width: 36px;
        height: 32px;
        font-size: 8px;
    }

    .bigwin-title {
        font-size: var(--font-size-2xl);
    }

    .bigwin-amount {
        font-size: 2.5rem;
    }

    .modal-container {
        max-height: 90vh;
    }

    .auto-spin-counter {
        margin-top: var(--space-1);
        font-size: var(--font-size-xs);
    }

    .btn-icon {
        width: 34px;
        height: 34px;
    }

    .btn-icon svg {
        width: 18px;
        height: 18px;
    }
}

/* ----- Mobile Portrait (480px) ----- */
@media (max-width: 480px) {
    .top-bar {
        margin: var(--space-1);
        padding: var(--space-1) var(--space-2);
        border-radius: var(--radius-md);
    }

    .top-bar__left .btn-icon,
    .top-bar__right .btn-icon {
        width: 34px;
        height: 34px;
    }

    .top-bar__left .btn-icon svg,
    .top-bar__right .btn-icon svg {
        width: 18px;
        height: 18px;
    }

    .info-display {
        gap: var(--space-2);
    }

    .info-item {
        min-width: 55px;
    }

    .info-label {
        font-size: 8px;
        letter-spacing: 0.08em;
    }

    .info-value {
        font-size: var(--font-size-sm);
    }

    .info-divider {
        height: 20px;
    }

    .bottom-bar {
        padding: var(--space-2);
    }

    .bottom-bar__controls {
        gap: var(--space-1);
    }

    .controls-center {
        gap: var(--space-2);
    }

    .btn-spin {
        width: 64px;
        height: 64px;
    }

    .spin-icon {
        width: 26px;
        height: 26px;
    }

    .btn-control {
        width: 42px;
        height: 40px;
        font-size: 7px;
        gap: 1px;
    }

    .btn-control svg {
        width: 14px;
        height: 14px;
    }

    .btn-control span {
        display: none;
    }

    .btn-bet {
        width: 34px;
        height: 34px;
        font-size: var(--font-size-base);
    }

    .bet-controls {
        gap: var(--space-1);
    }

    .bet-display {
        min-width: 44px;
    }

    .bet-label {
        font-size: 7px;
    }

    .bet-amount {
        font-size: var(--font-size-sm);
    }

    .extra-controls {
        gap: var(--space-1);
    }

    .btn-max-bet {
        width: 36px;
        height: 34px;
        font-size: 8px;
    }

    .side-menu-panel {
        width: 240px;
    }

    .bigwin-title {
        font-size: var(--font-size-2xl);
    }

    .bigwin-amount {
        font-size: 2.5rem;
    }

    .freespins-container {
        padding: var(--space-6) var(--space-5);
    }

    .freespins-title {
        font-size: var(--font-size-xl);
    }

    .freespins-count {
        font-size: var(--font-size-3xl);
    }

    .loading-title {
        font-size: var(--font-size-2xl);
    }

    .loading-spinner {
        width: 60px;
        height: 60px;
    }

    .progress-bar {
        width: 200px;
    }
}

/* ----- Very Small Screens (360px) ----- */
@media (max-width: 360px) {
    .info-item {
        min-width: 48px;
    }

    .info-label {
        font-size: 7px;
    }

    .info-value {
        font-size: 11px;
    }

    .btn-spin {
        width: 58px;
        height: 58px;
    }

    .btn-control {
        width: 38px;
        height: 36px;
    }

    .btn-bet {
        width: 30px;
        height: 30px;
        font-size: var(--font-size-sm);
    }

    .controls-left,
    .controls-right {
        gap: 2px;
    }
}

/* ----- Safe Area (Notch Devices) ----- */
@supports (padding: env(safe-area-inset-top)) {
    .top-bar {
        margin-top: max(var(--space-2), env(safe-area-inset-top));
    }

    .bottom-bar {
        padding-bottom: max(var(--space-3), env(safe-area-inset-bottom));
    }
}

/* ----- High DPI Adjustments ----- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .progress-bar {
        height: 3px;
    }
}

/* ----- Reduced Motion ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .btn-spin {
        animation: none;
    }

    .spin-glow {
        animation: none;
    }
}

/* ----- Hover capable devices only ----- */
@media (hover: none) {
    .btn-primary:hover {
        transform: none;
    }

    .btn-spin:hover {
        transform: none;
    }

    .btn-bet:hover {
        background: rgba(255, 255, 255, 0.08);
        border-color: var(--glass-border-light);
        box-shadow: none;
    }

    .btn-control:hover {
        background: rgba(255, 255, 255, 0.05);
    }
}