/** * Shared Breakpoints System * * Standardized responsive CSS custom properties for all games. * Phase 27.8 - Consolidating mobile breakpoints. * * DEVICE CATEGORIES: * 1. Small Phone Portrait: ≤480px width, portrait orientation * 2. Phone Landscape: ≤500px height, landscape orientation * 3. Large Phone/Small Tablet: 481-768px * 4. Tablet: 769-1024px * 5. Desktop: >1024px * * USAGE: * 1. Import this file in your game's * 2. Use the CSS custom properties in your styles * 3. Properties automatically adjust at each breakpoint * * Example: * .my-header h1 { font-size: var(--header-title-size); } * .my-subtitle { display: var(--subtitle-display); } */ /* ============================================ BASE VALUES (Desktop/Default) ============================================ */ :root { /* Layout */ --page-overflow-x: hidden; --page-overflow-y: auto; --content-padding: 20px; --container-gap: 20px; /* Header sizing */ --header-padding: 15px 20px; --header-gap: 15px; --header-title-size: 1.8rem; --header-subtitle-size: 0.9rem; --subtitle-display: block; --home-btn-size: 1.8rem; --home-btn-padding: 6px 10px; /* Stats panel */ --stats-padding: 10px 20px; --stats-gap: 30px; --stat-label-size: 0.9rem; --stat-value-size: 1.4rem; --stat-min-width: 50px; /* Setup panel */ --setup-padding: 30px; --setup-title-size: 1.4rem; --setup-max-width: 500px; /* Buttons */ --btn-padding: 14px 30px; --btn-font-size: 1.1rem; --btn-emoji-size: 1.8rem; --btn-name-size: 0.9rem; --btn-desc-size: 0.75rem; /* Cards/Grid */ --card-gap: 12px; --card-border-radius: 12px; --card-border-width: 3px; --card-icon-size: 2.5rem; --card-name-size: 0.65rem; /* Overlays */ --overlay-emoji-size: 4rem; --overlay-title-size: 2rem; --overlay-stats-size: 1.2rem; /* Game area */ --game-container-padding: 15px; --game-flex-direction: column; } /* ============================================ 1. SMALL PHONE - PORTRAIT Max width 480px, portrait orientation ============================================ */ @media (max-width: 480px) and (orientation: portrait) { :root { /* Layout */ --page-overflow-x: hidden; --page-overflow-y: hidden; --content-padding: 8px; --container-gap: 8px; /* Header - compact */ --header-padding: 6px 10px; --header-gap: 8px; --header-title-size: 1.3rem; --header-subtitle-size: 0.75rem; --subtitle-display: none; --home-btn-size: 1.5rem; --home-btn-padding: 4px 6px; /* Stats - smaller */ --stats-padding: 6px 10px; --stats-gap: 15px; --stat-label-size: 0.8rem; --stat-value-size: 1rem; --stat-min-width: 40px; /* Setup - full width */ --setup-padding: 15px; --setup-title-size: 1.1rem; --setup-max-width: 100%; /* Buttons - smaller */ --btn-padding: 10px 18px; --btn-font-size: 0.85rem; --btn-emoji-size: 1.3rem; --btn-name-size: 0.7rem; --btn-desc-size: 0.6rem; /* Cards - tighter */ --card-gap: 6px; --card-border-radius: 8px; --card-border-width: 2px; --card-icon-size: 2rem; --card-name-size: 0.5rem; /* Overlays */ --overlay-emoji-size: 3rem; --overlay-title-size: 1.5rem; --overlay-stats-size: 1rem; /* Game area */ --game-container-padding: 6px; --game-flex-direction: column; } } /* ============================================ 2. PHONE - LANDSCAPE Max height 500px, landscape orientation ============================================ */ @media (max-height: 500px) and (orientation: landscape) { :root { /* Layout - horizontal focus */ --page-overflow-x: hidden; --page-overflow-y: hidden; --content-padding: 5px; --container-gap: 10px; /* Header - minimal height */ --header-padding: 4px 15px; --header-gap: 10px; --header-title-size: 1.1rem; --header-subtitle-size: 0.7rem; --subtitle-display: none; --home-btn-size: 1.2rem; --home-btn-padding: 3px 6px; /* Stats - inline style */ --stats-padding: 4px 15px; --stats-gap: 20px; --stat-label-size: 0.75rem; --stat-value-size: 0.95rem; --stat-min-width: 35px; /* Setup - compact */ --setup-padding: 15px; --setup-title-size: 1rem; --setup-max-width: 400px; /* Buttons - smaller */ --btn-padding: 8px 15px; --btn-font-size: 0.8rem; --btn-emoji-size: 1.2rem; --btn-name-size: 0.65rem; --btn-desc-size: 0.55rem; /* Cards - compact */ --card-gap: 5px; --card-border-radius: 6px; --card-border-width: 2px; --card-icon-size: 1.5rem; --card-name-size: 0.45rem; /* Overlays */ --overlay-emoji-size: 2.5rem; --overlay-title-size: 1.3rem; --overlay-stats-size: 0.9rem; /* Game area - side by side */ --game-container-padding: 5px; --game-flex-direction: row; } } /* ============================================ 3. LARGE PHONE / SMALL TABLET 481-768px width ============================================ */ @media (min-width: 481px) and (max-width: 768px) { :root { /* Slightly reduced from desktop */ --content-padding: 15px; --header-title-size: 1.5rem; --setup-max-width: 450px; --btn-padding: 12px 25px; } } /* ============================================ UTILITY CLASSES Common patterns used across games ============================================ */ /* Hide on small screens */ .hide-on-mobile { display: var(--subtitle-display); } /* Body overflow control */ .responsive-overflow { overflow-x: var(--page-overflow-x); overflow-y: var(--page-overflow-y); } /* Flex direction that changes in landscape */ .responsive-flex { flex-direction: var(--game-flex-direction); } /* Standard game container padding */ .responsive-padding { padding: var(--content-padding); } /* Standard gap */ .responsive-gap { gap: var(--container-gap); }