/* =============================================
   QUANTUM BUTTON V2.0.0 — SCREENS.CSS
   Full responsive design + accessibility
   ============================================= */

/* =============================================
   SCALE WRAPPER — The core responsive system
   Everything is designed at 412×915 (Pixel 7)
   and scaled to fit any screen automatically.
   ============================================= */

#scale-wrapper {
    width: 412px;
    height: 915px;
    transform-origin: center center;
    position: relative;
    overflow: visible;
}

#app-container {
    width: 100%;
    height: 100%;
    position: relative;
}

/* =============================================
   SECTION 1: SAFE AREA (iPhone notch / Dynamic Island / Samsung nav bar)
   ============================================= */

/* Tell the game container to respect the notch on iPhones */
#app-container {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

/* B8 FIX: Splash, tutorial & onboarding use absolute inset-0 which bypasses
   the container's safe-area padding. Add bottom padding directly so Samsung
   on-screen nav buttons (back, circle, lines) don't cover content. */
#screen-splash,
#screen-tutorial,
#screen-onboarding {
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 24px);
}

/* =============================================
   SECTION 8: DESKTOPS (1025px+ wide)
   Examples: Laptops, monitors, TVs
   ============================================= */

@media (min-width: 1025px) {
    /* Add a glow effect around the game container so it doesn't look lost */
    #app-container {
        border-left: 1px solid rgba(0, 243, 255, 0.15) !important;
        border-right: 1px solid rgba(0, 243, 255, 0.15) !important;
        box-shadow:
            0 0 40px rgba(0, 243, 255, 0.08),
            0 0 80px rgba(0, 243, 255, 0.04),
            20px 0 60px rgba(0, 243, 255, 0.03),
            -20px 0 60px rgba(0, 243, 255, 0.03) !important;
    }

    /* Style the body background to be more interesting than plain black */
    body {
        background:
            radial-gradient(circle at 50% 0%, #1a0b2e 0%, #000000 50%),
            repeating-linear-gradient(
                0deg,
                transparent,
                transparent 100px,
                rgba(0, 243, 255, 0.02) 100px,
                rgba(0, 243, 255, 0.02) 101px
            ),
            repeating-linear-gradient(
                90deg,
                transparent,
                transparent 100px,
                rgba(0, 243, 255, 0.02) 100px,
                rgba(0, 243, 255, 0.02) 101px
            ) !important;
    }
}

/* =============================================
   SECTION 9: LARGE MONITORS (1440px+ wide)
   Examples: 27" monitors, ultrawide, TVs
   ============================================= */

@media (min-width: 1440px) {
    /* Stronger glow on very large screens */
    #app-container {
        box-shadow:
            0 0 60px rgba(0, 243, 255, 0.1),
            0 0 120px rgba(0, 243, 255, 0.05),
            40px 0 80px rgba(0, 243, 255, 0.04),
            -40px 0 80px rgba(0, 243, 255, 0.04) !important;
    }
}

/* =============================================
   SECTION 10: LANDSCAPE ORIENTATION (phones rotated sideways)
   ============================================= */

@media (orientation: landscape) and (max-height: 500px) {
    /* Landscape phone — very tight vertical space */
    /* Make all screens scrollable so nothing gets cut off */
    #screen-menu {
        overflow-y: auto !important;
    }
    #screen-results {
        overflow-y: auto !important;
    }
    #screen-splash {
        overflow-y: auto !important;
    }

    /* Profile card ultra-compact */
    #screen-menu .mx-4.p-2 {
        padding: 0.2rem 0.35rem !important;
    }
    #screen-menu .mx-4.p-2 .w-12.h-12 {
        width: 1.75rem !important;
        height: 1.75rem !important;
    }
    #menu-name-display {
        font-size: 0.75rem !important;
    }

    /* XP bar slimmer */
    #screen-menu .w-full.mt-2 {
        margin-top: 0.15rem !important;
    }
    #xp-bar {
        height: 3px !important;
    }

    /* Mode selector horizontal scroll */
    #mode-selector {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        overflow-y: auto !important;
        max-height: 40vh !important;
    }
    #mode-selector button {
        padding: 0.25rem 0.5rem !important;
        margin-bottom: 0.1rem !important;
        flex: 0 0 48% !important;
    }
    #mode-selector button .text-2xl {
        font-size: 0.85rem !important;
    }

    /* Bottom bar minimal */
    .grid-cols-6 button {
        height: 2rem !important;
    }
    .grid-cols-6 button .text-lg {
        font-size: 0.75rem !important;
    }
    .grid-cols-6 button .text-\[8px\] {
        font-size: 6px !important;
    }

    /* Hide non-essential elements */
    #ad-banner {
        height: 1.5rem !important;
    }
    #go-pro-btn {
        max-height: 2rem !important;
    }
    #go-pro-btn .text-\[10px\] {
        display: none !important;
    }
    #avatar-display-area {
        display: none !important;
    }
    #btn-open-leaderboard {
        display: none !important;
    }

    /* Splash screen compact landscape */
    #screen-splash img {
        width: 4rem !important;
        height: 4rem !important;
        margin-bottom: 0.25rem !important;
    }
    #screen-splash h1 {
        font-size: 1.75rem !important;
    }
    #screen-splash .mb-8 {
        margin-bottom: 0.25rem !important;
    }
    #splash-tip {
        display: none !important;
    }

    /* Game HUD compact landscape */
    #game-hud {
        height: 3.5rem !important;
        padding-top: 0.25rem !important;
    }
    #hud-score, #hud-streak {
        font-size: 1.1rem !important;
    }
    #hud-time {
        font-size: 1.5rem !important;
    }
    #btn-abort-game {
        width: 2.5rem !important;
        height: 2.25rem !important;
    }
    #btn-abort-game .text-xl {
        font-size: 0.85rem !important;
    }

    /* Streak phrase */
    #streak-phrase {
        font-size: 1.5rem !important;
        top: 8% !important;
    }

    /* Results landscape */
    #screen-results h2 {
        font-size: 1.75rem !important;
        margin-bottom: 0.15rem !important;
    }
    #screen-results .grid-cols-2 {
        gap: 0.5rem !important;
        margin-bottom: 0.25rem !important;
    }
    #screen-results .text-4xl {
        font-size: 1.25rem !important;
    }
    #screen-results .w-72 {
        width: 12rem !important;
    }
    #btn-share-montage {
        display: none !important;
    }
    #btn-tiktok-clip {
        display: none !important;
    }
}

/* Landscape on tablets — more room, less aggressive */
@media (orientation: landscape) and (min-height: 501px) and (max-height: 800px) {
    #screen-menu {
        overflow-y: auto !important;
    }

    #mode-selector {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    #mode-selector button {
        flex: 0 0 48% !important;
    }
}

/* =============================================
   SECTION 12: COOKIE CONSENT BANNER RESPONSIVE
   ============================================= */

@media (min-width: 768px) {
    #cookie-consent-banner > div {
        max-width: 600px !important;
    }
    #cookie-consent-banner p {
        font-size: 14px !important;
    }
    #cookie-consent-banner button {
        font-size: 14px !important;
        padding: 10px 28px !important;
    }
}

/* =============================================
   SECTION 13: TOAST NOTIFICATIONS RESPONSIVE
   ============================================= */

@media (max-width: 349px) {
    #toast-container {
        top: 4rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
}

@media (min-width: 768px) {
    #toast-container {
        top: 6rem !important;
    }
}

/* =============================================
   SECTION 14: AD OVERLAY RESPONSIVE
   ============================================= */

@media (max-width: 349px) {
    #ad-overlay .w-\[320px\] {
        width: 280px !important;
    }
}

@media (min-width: 768px) {
    #ad-overlay .w-\[320px\] {
        width: 400px !important;
        min-height: 300px !important;
    }
    #ad-skip-btn {
        font-size: 1rem !important;
        padding: 0.75rem 2rem !important;
    }
}

/* =============================================
   SECTION 15: TUTORIAL PAGES RESPONSIVE
   ============================================= */

@media (max-height: 600px) {
    .tutorial-page {
        padding: 1rem !important;
    }
    .tutorial-page .text-6xl {
        font-size: 2.5rem !important;
        margin-bottom: 0.5rem !important;
    }
    .tutorial-page .text-3xl {
        font-size: 1.5rem !important;
    }
    #tut-practice-area {
        height: 8rem !important;
    }
}

@media (max-width: 349px) {
    .tutorial-page .text-3xl {
        font-size: 1.25rem !important;
    }
    .tutorial-page .mb-6 {
        margin-bottom: 0.75rem !important;
    }
}

/* =============================================
   SECTION 16: PRINT STYLES (if someone prints the page)
   ============================================= */

@media print {
    body {
        background: white !important;
        color: black !important;
    }
    #app-container {
        border: none !important;
        box-shadow: none !important;
        max-width: 100% !important;
    }
    .scanlines, .vignette, #fire-layer, #frost-layer, #mythic-layer {
        display: none !important;
    }
}

/* =============================================
   SECTION 17: ACCESSIBILITY — COLOR BLIND MODE
   ============================================= */

/* Protanopia/Deuteranopia friendly (red-green color blindness) */
.color-blind-mode {
    filter: none !important;
}

/* Replace green with blue (distinguishable from red) */
.color-blind-mode .text-green-400,
.color-blind-mode .text-green-500,
.color-blind-mode .bg-green-400,
.color-blind-mode .bg-green-500,
.color-blind-mode .border-green-400,
.color-blind-mode .border-green-500 {
    --tw-text-opacity: 1;
    color: rgb(59 130 246 / var(--tw-text-opacity)) !important;
}

/* Replace red with orange (distinguishable from green-turned-blue) */
.color-blind-mode .text-red-400,
.color-blind-mode .text-red-500,
.color-blind-mode .text-red-600,
.color-blind-mode .bg-red-400,
.color-blind-mode .bg-red-500,
.color-blind-mode .bg-red-600,
.color-blind-mode .border-red-400,
.color-blind-mode .border-red-500,
.color-blind-mode .border-red-600 {
    --tw-text-opacity: 1;
    color: rgb(251 146 60 / var(--tw-text-opacity)) !important;
}

/* Also catch Tailwind background variants for red/green */
.color-blind-mode .bg-green-400,
.color-blind-mode .bg-green-500 {
    background-color: rgb(59 130 246) !important;
}
.color-blind-mode .bg-red-400,
.color-blind-mode .bg-red-500,
.color-blind-mode .bg-red-600 {
    background-color: rgb(251 146 60) !important;
}
.color-blind-mode .border-green-400,
.color-blind-mode .border-green-500 {
    border-color: rgb(59 130 246) !important;
}
.color-blind-mode .border-red-400,
.color-blind-mode .border-red-500,
.color-blind-mode .border-red-600 {
    border-color: rgb(251 146 60) !important;
}

/* Override neon colors that use CSS custom properties or inline styles */
.color-blind-mode .text-neon-gold {
    color: #fbbf24 !important; /* Keep gold as-is — it's distinguishable */
}

/* Bottom nav: override red-themed 1v1 button to orange */
.color-blind-mode #btn-multiplayer {
    border-color: rgba(251, 146, 60, 0.4) !important;
    background: linear-gradient(to bottom, rgba(251, 146, 60, 0.15), black) !important;
}
.color-blind-mode #btn-multiplayer .text-red-400 {
    color: rgb(251 146 60) !important;
}

/* Visual indicator that color blind mode is active */
.color-blind-mode #screen-menu::after {
    content: "CB";
    position: fixed;
    bottom: 4px;
    right: 4px;
    font-size: 8px;
    color: rgba(59, 130, 246, 0.5);
    font-family: monospace;
    pointer-events: none;
    z-index: 9999;
}

/* High contrast rarity colors for devil skin */
.color-blind-mode .skin-robot-devil {
    background: radial-gradient(circle at 30% 30%, #ffcc80, #ff9800) !important;
    border-color: #ff9800 !important;
}

/* Add shape symbols after rarity labels so color isn't the only indicator */
.color-blind-mode [data-rarity="COMMON"]::after { content: " ●"; }
.color-blind-mode [data-rarity="UNCOMMON"]::after { content: " ■"; }
.color-blind-mode [data-rarity="RARE"]::after { content: " ◆"; }
.color-blind-mode [data-rarity="SUPER"]::after { content: " ★"; }
.color-blind-mode [data-rarity="ULTRA"]::after { content: " ✦"; }
.color-blind-mode [data-rarity="MYTHIC"]::after { content: " ✶"; }

/* =============================================
   SECTION 18: ACCESSIBILITY — HIGH CONTRAST MODE
   ============================================= */

.high-contrast-mode {
    filter: contrast(1.2) !important;
}

.high-contrast-mode .bg-gray-900 {
    background-color: #000 !important;
}

.high-contrast-mode .text-gray-400,
.high-contrast-mode .text-gray-500 {
    color: #fff !important;
}

/* =============================================
   SECTION 19: REDUCED MOTION PREFERENCE
   For users who have "Reduce motion" turned on in their device settings
   ============================================= */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    .animate-pulse, .animate-bounce, .animate-spin-slow {
        animation: none !important;
    }
}

/* =============================================
   D1 FIX: MODE BUTTON SPACING (all screens)
   ============================================= */

/* Base: tighter mode cards for all phones */
#mode-selector {
    padding: 0.375rem 0.75rem !important;
    gap: 0.375rem !important;
}

#mode-selector .mode-card {
    padding: 0.625rem 0.75rem !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

/* Very short phones: ultra-compact mode cards */
@media (max-height: 650px) {
    #mode-selector {
        padding: 0.25rem 0.5rem !important;
        gap: 0.25rem !important;
    }
    #mode-selector .mode-card {
        padding: 0.4rem 0.625rem !important;
    }
}

/* Tall phones (750px+): more breathing room */
@media (min-height: 750px) {
    #mode-selector {
        padding: 0.5rem 1rem !important;
        gap: 0.5rem !important;
    }
    #mode-selector .mode-card {
        padding: 0.75rem 1rem !important;
    }
}

/* =============================================
   D1 FIX: BOTTOM ACTION BAR (all screens)
   ============================================= */

/* Base: ensure buttons are always tappable (44px min) */
#screen-menu .grid-cols-6 {
    gap: 0.25rem !important;
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
}

#screen-menu .grid-cols-6 button {
    height: 3.5rem !important;
    min-height: 44px !important;
}

#screen-menu .grid-cols-6 button .text-lg {
    font-size: 1.1rem !important;
    margin-bottom: 0.125rem !important;
}

#screen-menu .grid-cols-6 button .text-\[8px\] {
    font-size: 7px !important;
    line-height: 1.2 !important;
}

/* Short phones: slightly smaller action buttons */
@media (max-height: 650px) {
    #screen-menu .grid-cols-6 button {
        height: 2.75rem !important;
        min-height: 40px !important;
    }
    #screen-menu .grid-cols-6 button .text-lg {
        font-size: 1rem !important;
    }
}

/* Very small phones (narrow): tighter grid */
@media (max-width: 349px) {
    #screen-menu .grid-cols-6 {
        gap: 0.125rem !important;
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
    }
    #screen-menu .grid-cols-6 button {
        height: 2.5rem !important;
    }
    #screen-menu .grid-cols-6 button .text-lg {
        font-size: 0.9rem !important;
    }
    #screen-menu .grid-cols-6 button .text-\[8px\] {
        font-size: 6px !important;
    }
}

/* =============================================
   D1 FIX: TEXT TRUNCATION
   ============================================= */

/* Player name: always show full name up to container width */
#menu-name-display {
    font-size: clamp(0.8rem, 3.5vw, 1.125rem) !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Coin display: prevent wrapping */
#menu-coin-display {
    font-size: clamp(10px, 2.5vw, 13px) !important;
    white-space: nowrap !important;
    padding: 0.25rem 0.5rem !important;
}

/* XP text: scale down on small screens */
#xp-text {
    font-size: clamp(7px, 1.8vw, 8px) !important;
}

/* Rank badge: prevent overflow */
#btn-open-leaderboard .text-sm {
    font-size: clamp(0.65rem, 2.5vw, 0.875rem) !important;
    white-space: nowrap !important;
}

/* =============================================
   D1 FIX: PROFILE CARD RESPONSIVE
   ============================================= */

/* Make the profile card tighter on small screens */
@media (max-width: 374px) {
    #screen-menu .mx-4 {
        margin-left: 0.375rem !important;
        margin-right: 0.375rem !important;
    }
    #menu-avatar-img {
        width: 2.25rem !important;
        height: 2.25rem !important;
    }
}

/* =============================================
   D1 FIX: AD BANNER / MEGA SPIN / GO PRO SIZING
   ============================================= */

#top-zone {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    margin-bottom: 0.375rem !important;
}

#ad-banner {
    height: 3rem !important;
}

body.is-pro #mega-spin-btn {
    height: 3.25rem !important;
    min-height: 3.25rem !important;
    max-height: 3.25rem !important;
}

#go-pro-btn {
    max-height: 4rem !important;
    min-height: 3rem !important;
}

@media (max-height: 700px) {
    #ad-banner {
        height: 2.25rem !important;
    }
    body.is-pro #mega-spin-btn {
        height: 2.75rem !important;
        min-height: 2.75rem !important;
        max-height: 2.75rem !important;
    }
    #go-pro-btn {
        max-height: 3rem !important;
    }
}

/* =============================================
   D1 FIX: SETTINGS BUTTON IN TICKER BAR
   ============================================= */

#btn-settings {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

/* =============================================
   D1 FIX: BOTTOM ZONE SPACING
   ============================================= */

#bottom-zone {
    padding-bottom: 0.25rem !important;
    min-height: 0 !important;
}

/* Hide the "Developed by" text on short phones to save space */
@media (max-height: 700px) {
    #bottom-zone a[href*="spencer-the-gathering"] {
        display: none !important;
    }
}

/* =============================================
   FIX: MARCH 11 — Splash + Menu Responsive Fixes
   Targets: iPhone SE (375×667), iPhone 12 Pro (390×844),
            Samsung S8 (360×740)
   ============================================= */

/* --- SPLASH SCREEN: Scale down on short screens --- */
@media (max-height: 700px) {
    #screen-splash img {
        width: 7rem !important;
        height: 7rem !important;
        margin-bottom: 0.5rem !important;
    }
    #screen-splash h1 {
        font-size: 2.75rem !important;
        line-height: 1.1 !important;
    }
    #screen-splash .tracking-\[0\.5em\] {
        margin-bottom: 0.75rem !important;
        font-size: 9px !important;
    }
    #splash-tip {
        margin-bottom: 0.25rem !important;
        font-size: 9px !important;
    }
    #btn-press-start {
        margin-bottom: 0.75rem !important;
        padding: 0.375rem 1.5rem !important;
    }
    #btn-press-start .text-xl {
        font-size: 1rem !important;
    }
    #btn-start-google {
        width: 3rem !important;
        height: 3rem !important;
    }
    #btn-start-google svg {
        width: 1.25rem !important;
        height: 1.25rem !important;
    }
}

/* Even shorter screens (iPhone SE height = 667px) */
@media (max-height: 670px) {
    #screen-splash img {
        width: 5.5rem !important;
        height: 5.5rem !important;
    }
    #screen-splash h1 {
        font-size: 2.25rem !important;
    }
    #splash-tip {
        display: none !important;
    }
    #btn-press-start {
        margin-bottom: 0.5rem !important;
    }
}

/* --- MENU: Tighter profile card on S8 (360px wide, 740px tall) --- */
@media (max-width: 370px) {
    #screen-menu .mx-3 {
        margin-left: 0.375rem !important;
        margin-right: 0.375rem !important;
    }
    #menu-avatar-img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
    #btn-edit-profile {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }
}

/* --- MENU: Bottom action buttons — ensure proper sizing on S8 --- */
@media (max-width: 370px) and (max-height: 750px) {
    #screen-menu .grid-cols-6 {
        gap: 0.125rem !important;
    }
    #screen-menu .grid-cols-6 button {
        height: 3rem !important;
    }
    #screen-menu .grid-cols-6 button .text-lg {
        font-size: 1rem !important;
    }
    #screen-menu .grid-cols-6 button .text-\[8px\] {
        font-size: 6.5px !important;
    }
}

/* --- MENU: Mode cards on iPhone 12 Pro (390×844) and S8 (360×740) --- */
@media (min-height: 700px) and (max-height: 850px) {
    #mode-selector {
        padding: 0.25rem 0.75rem !important;
        gap: 0.375rem !important;
    }
    #mode-selector .mode-card {
        padding: 0.5rem 0.75rem !important;
    }
}

/* --- AD BANNER / TOP ZONE: Less padding on cramped screens --- */
@media (max-height: 750px) {
    #top-zone {
        padding-left: 0.25rem !important;
        padding-right: 0.25rem !important;
        margin-bottom: 0.25rem !important;
        margin-top: 0.125rem !important;
    }
}

/* Make sure settings cog is clickable above ticker text */
#btn-settings {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.9) 30%, rgba(0,0,0,1) 100%);
    padding-left: 0.75rem;
}