/* ============================================================ UNIVERSAL RESPONSIVE CSS — responsive.css Fruit Match Game · Telegram Mini App · All Devices ============================================================ HOW TO USE: Add this line AFTER your style.css in your HTML : DEVICE COVERAGE: ✅ iPhone SE (375×667) ✅ iPhone 12/13/14 (390×844) ✅ iPhone 12/13/14 Pro Max (428×926) ✅ iPhone 15 Pro / Dynamic Island (393×852) ✅ iPhone 15 Pro Max (430×932) ✅ iPad Mini (768×1024) ✅ iPad Air / Pro (820–1024px wide) ✅ Android Small (360×640 — Galaxy A series) ✅ Android Normal (393×851 — Pixel 7) ✅ Android Large (412×915 — Galaxy S series) ✅ Android Foldable outer (360×812) ✅ Telegram Mini App (360–430px wide, 500–900px tall) ✅ Desktop (1024px+) ✅ Wide Desktop (1440px+) ============================================================ TABLE OF CONTENTS ----------------- A. CSS Variables Override (per breakpoint) B. Safe Area / Notch / Dynamic Island Fix C. Telegram Mini App Specific D. Tiny Phones (width ≤ 360px, e.g. Galaxy A01) E. iPhone SE / Small Android (361px–390px) F. Normal Phones (391px–430px) G. Large Phones (431px–600px) H. Height Breakpoints (short/tall screens) I. Tablet Portrait (600px–900px) J. Tablet Landscape / Small Desktop (900px–1200px) K. Desktop (1200px+) L. Wide Desktop (1440px+) M. Touch Device Improvements N. Font Scaling (clamp-based fluid type) ============================================================ */ /* ============================================================ A. ROOT OVERRIDES — Fluid spacing tokens ============================================================ */ :root { /* Fluid font scale — works on ALL screen sizes automatically */ --font-h1: clamp(1.5rem, 5vw, 2.4rem); --font-h2: clamp(1.3rem, 4vw, 2rem); --font-h3: clamp(1.1rem, 3vw, 1.5rem); --font-body: clamp(0.85rem, 2.5vw, 1.1rem); --font-small: clamp(0.7rem, 2vw, 0.9rem); --font-hud: clamp(0.95rem, 3vw, 1.5rem); --font-hud-lbl: clamp(0.55rem, 1.8vw, 0.78rem); /* Fluid button/card sizing */ --btn-pad-y: clamp(12px, 3vw, 18px); --btn-pad-x: clamp(14px, 4vw, 24px); --card-gap: clamp(6px, 2vw, 13px); --card-radius: clamp(10px, 3vw, 16px); --grid-pad: clamp(6px, 2vw, 14px); /* Fluid control sizes */ --ctrl-size: clamp(38px, 10vw, 52px); --ctrl-font: clamp(1rem, 3vw, 1.35rem); } /* Apply fluid type everywhere */ h1 { font-size: var(--font-h1); } h2 { font-size: var(--font-h2); } h3 { font-size: var(--font-h3); } p, li, .name, .date { font-size: var(--font-body); } .hud-box div { font-size: var(--font-hud); } .hud-box span { font-size: var(--font-hud-lbl); } /* Fluid card grid */ .cards-grid-large { gap: var(--card-gap); padding: var(--grid-pad); border-radius: clamp(12px, 3vw, 20px); } /* Fluid card radius */ .card { border-radius: var(--card-radius); } /* Fluid buttons */ .btn-primary, .btn-icon { padding: var(--btn-pad-y) var(--btn-pad-x); } /* Fluid control buttons (pause/home/dark mode) */ .btn-game-control, .btn-control { width: var(--ctrl-size); height: var(--ctrl-size); font-size: var(--ctrl-font); } /* ============================================================ B. SAFE AREA / NOTCH / DYNAMIC ISLAND Works on: iPhone X+, iPhone 14 Pro (Dynamic Island), Android with punch-hole camera, Telegram Mini App ============================================================ */ /* Base safe-area padding on the game screen */ #game-screen { padding-top: max(8px, env(safe-area-inset-top)); padding-bottom: max(8px, env(safe-area-inset-bottom)); padding-left: max(8px, env(safe-area-inset-left)); padding-right: max(8px, env(safe-area-inset-right)); } /* Header controls pushed below notch */ .header-controls { top: max(14px, env(safe-area-inset-top, 14px)); right: max(14px, env(safe-area-inset-right, 14px)); } /* Modal overlay accounts for safe areas */ .modal-overlay { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); } /* Toasts above home indicator on iPhone */ .toast { bottom: max(28px, calc(env(safe-area-inset-bottom) + 14px)); } /* ============================================================ C. TELEGRAM MINI APP Telegram opens at fixed widths (360–430px) in a WebView. The viewport height changes when keyboard opens. We use 100dvh (dynamic viewport height) where supported. ============================================================ */ /* Use dynamic viewport height to prevent keyboard overlap */ .screen { height: 100dvh; /* Falls back to 100vh in browsers that don't support dvh */ height: 100vh; /* dvh override — supported in Telegram's Chromium WebView */ @supports (height: 100dvh) { height: 100dvh; } } /* Telegram-specific: prevent overscroll bounce */ html, body { overscroll-behavior: none; overscroll-behavior-y: none; -webkit-overflow-scrolling: touch; } /* Telegram Mini App typically has a colored header. We push content below it using the tg-color-scheme meta. */ body { background-attachment: fixed; /* prevents bg jump on scroll */ } /* Telegram WebView sometimes sets viewport-fit=cover automatically. This ensures we handle that correctly. */ @supports (padding: max(0px)) { #game-screen { padding-top: max(env(safe-area-inset-top, 0px), 8px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 8px); } } /* ============================================================ D. TINY PHONES — width ≤ 360px Galaxy A01, Galaxy A02, old budget Android ============================================================ */ @media screen and (max-width: 360px) { :root { --card-gap: 5px; --grid-pad: 6px; --ctrl-size: 36px; --ctrl-font: 0.9rem; --btn-pad-y: 10px; --btn-pad-x: 12px; } h1 { font-size: 1.45rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; } .menu-grid { max-width: 100%; gap: 10px; } .level-grid { max-width: 100%; gap: 12px; } .btn-level-large { padding: 16px; font-size: 1.3rem; } .btn-level-large small { font-size: 0.85rem; } .hud-box { min-width: 58px; padding: 5px 7px; border-radius: 10px; } #hud { gap: 5px; } .question-mark { font-size: 1.8rem; } .btn-control { width: 36px; height: 36px; } .rank { width: 28px; height: 28px; font-size: 0.8rem; } .name { padding: 0 8px; font-size: 0.85rem; } .score { font-size: 0.9rem; } .scroll-box { padding: 14px; } .modal-content { padding: 18px; } .login-box { padding: 24px 18px; } .profile-header { padding: 18px; } .profile-header h3 { font-size: 1.2rem; } .btn-tab { padding: 12px 10px; font-size: 0.9rem; gap: 6px; } .header-controls { gap: 6px; } } /* ============================================================ E. iPHONE SE / SMALL ANDROID — 361px–390px iPhone SE (375px), Galaxy A32 (360px), Pixel 4a (393px) ============================================================ */ @media screen and (min-width: 361px) and (max-width: 390px) { :root { --card-gap: 8px; --grid-pad: 9px; --ctrl-size: 42px; } .menu-grid { max-width: 340px; } .level-grid { max-width: 320px; } .btn-level-large { padding: 20px; font-size: 1.5rem; } .hud-box { min-width: 72px; padding: 7px 10px; } .modal-content { padding: 24px; } .login-box { padding: 32px 24px; } .profile-actions { gap: 10px; } .btn-tab { padding: 14px 16px; font-size: 0.95rem; } } /* ============================================================ F. NORMAL PHONES — 391px–430px iPhone 12/13/14 (390px), iPhone 14 Plus (428px), Galaxy S21 (360px wide but tall), Pixel 7 (412px) ============================================================ */ @media screen and (min-width: 391px) and (max-width: 430px) { :root { --card-gap: 10px; --grid-pad: 11px; --ctrl-size: 46px; } .menu-grid { max-width: 360px; } .level-grid { max-width: 340px; } .hud-box { min-width: 80px; padding: 8px 12px; } } /* ============================================================ G. LARGE PHONES — 431px–600px iPhone 14 Pro Max (430px), Galaxy S23 Ultra (412px wide), Some Android tablets in portrait ============================================================ */ @media screen and (min-width: 431px) and (max-width: 600px) { :root { --card-gap: 12px; --grid-pad: 12px; --ctrl-size: 50px; } .menu-grid { max-width: 400px; } .level-grid { max-width: 380px; } .cards-grid-large { max-width: 480px; } .hud-box { min-width: 88px; padding: 10px 14px; } } /* ============================================================ H. HEIGHT BREAKPOINTS — Short vs Tall Screens These apply REGARDLESS of width (for phones rotated landscape, Telegram compact mode, etc.) ============================================================ */ /* --- Very short: under 580px tall --- */ /* Galaxy A series landscape, Telegram compact, old phones */ @media screen and (max-height: 579px) { #game-screen { padding-top: 4px; padding-bottom: 4px; } #game-controls-container { padding: 2px 6px; } .cards-grid-large { gap: 4px; padding: 5px; } .hud-box { padding: 3px 6px; min-width: 55px; border-radius: 8px; } .hud-box span { font-size: 0.5rem; margin-bottom: 1px; } .hud-box div { font-size: 0.8rem; } #hud { gap: 5px; margin-top: 2px; margin-bottom: 4px; } #bottom-controls { margin-top: 2px; gap: 8px; } .question-mark { font-size: 1.6rem; } .btn-game-control { width: 34px; height: 34px; font-size: 0.9rem; } h1 { font-size: 1.4rem; margin: 6px 0; } .menu-grid { margin-top: 10px; gap: 10px; } .btn-primary, .btn-icon { padding: 12px 16px; font-size: 1.1rem; } .btn-level-large { padding: 14px; font-size: 1.3rem; } } /* --- Short: 580px–699px tall --- */ /* Most Telegram Mini App heights, compact Android */ @media screen and (min-height: 580px) and (max-height: 699px) { #game-screen { padding-top: 5px; padding-bottom: 5px; } .cards-grid-large { gap: 7px; padding: 8px; } .hud-box { padding: 6px 9px; min-width: 68px; } .hud-box span { font-size: 0.58rem; } .hud-box div { font-size: 0.95rem; } #hud { gap: 7px; margin-top: 4px; } #bottom-controls { margin-top: 5px; gap: 10px; } .btn-game-control { width: 40px; height: 40px; font-size: 1rem; } h1 { font-size: 1.6rem; margin: 10px 0; } .btn-primary, .btn-icon { padding: 14px 18px; } .menu-grid { margin-top: 14px; gap: 12px; } } /* --- Normal: 700px–849px tall --- */ /* iPhone 12/13, Galaxy S21, standard Telegram height */ @media screen and (min-height: 700px) and (max-height: 849px) { .cards-grid-large { gap: 10px; padding: 10px; } .hud-box { padding: 8px 13px; min-width: 78px; } #hud { gap: 9px; margin-top: 6px; margin-bottom: 8px; } } /* --- Tall: 850px–999px --- */ /* iPhone 14 Pro Max, Galaxy S23 Ultra, large Android */ @media screen and (min-height: 850px) and (max-height: 999px) { .cards-grid-large { gap: 12px; padding: 13px; max-width: 460px; } .hud-box { padding: 10px 16px; min-width: 88px; } #hud { gap: 11px; margin-top: 8px; margin-bottom: 10px; } #bottom-controls { margin-top: 12px; } } /* --- Very tall: 1000px+ --- */ /* iPad, desktop browser in a tall window */ @media screen and (min-height: 1000px) { .cards-grid-large { gap: 14px; padding: 16px; max-width: 500px; } .hud-box { padding: 12px 20px; min-width: 100px; } .hud-box div { font-size: 1.6rem; } .hud-box span { font-size: 0.8rem; } #hud { gap: 14px; margin-top: 14px; margin-bottom: 14px; } #bottom-controls { margin-top: 16px; } .btn-game-control { width: 60px; height: 60px; font-size: 1.5rem; } } /* ============================================================ I. TABLET PORTRAIT — 600px–899px wide iPad Mini (768px), Galaxy Tab A (800px), Surface Go (912px) ============================================================ */ @media screen and (min-width: 600px) and (max-width: 899px) { :root { --card-gap: 13px; --grid-pad: 14px; --ctrl-size: 54px; --ctrl-font: 1.3rem; } #game-controls-container { max-width: 540px; padding: 8px 16px; } .cards-grid-large { max-width: 480px; } .menu-grid { max-width: 480px; gap: 18px; } .level-grid { max-width: 440px; gap: 20px; } .btn-level-large { padding: 26px; font-size: 1.8rem; } .btn-primary, .btn-icon { padding: 18px 26px; font-size: 1.3rem; } .hud-box { min-width: 96px; padding: 11px 16px; } #hud { gap: 12px; margin-top: 12px; } #bottom-controls { margin-top: 14px; gap: 18px; } .scroll-box { max-width: 600px; } .rank { width: 40px; height: 40px; font-size: 1.05rem; } .name { font-size: 1.1rem; } .score { font-size: 1.15rem; } .modal-content { max-width: 580px; padding: 40px; } .login-box { max-width: 480px; padding: 48px; } } /* ============================================================ J. TABLET LANDSCAPE / SMALL DESKTOP — 900px–1199px iPad Air landscape, Surface Pro, small laptops ============================================================ */ @media screen and (min-width: 900px) and (max-width: 1199px) { :root { --card-gap: 14px; --grid-pad: 16px; --ctrl-size: 56px; } #game-controls-container { max-width: 580px; padding: 10px 20px; } .cards-grid-large { max-width: 500px; } .menu-grid { max-width: 500px; gap: 20px; } .level-grid { max-width: 460px; } .hud-box { min-width: 100px; padding: 12px 18px; } .hud-box div { font-size: 1.55rem; } .hud-box span { font-size: 0.78rem; } #hud { gap: 14px; margin-top: 14px; } #bottom-controls { margin-top: 16px; gap: 20px; } .scroll-box { max-width: 620px; } .modal-content { max-width: 600px; } } /* ============================================================ K. DESKTOP — 1200px+ Standard laptops, monitors ============================================================ */ @media screen and (min-width: 1200px) { :root { --card-gap: 16px; --grid-pad: 18px; --ctrl-size: 58px; --ctrl-font: 1.4rem; } #game-controls-container { max-width: 620px; padding: 12px 24px; } .cards-grid-large { max-width: 520px; } .menu-grid { max-width: 520px; gap: 22px; } .level-grid { max-width: 480px; gap: 22px; } .btn-primary, .btn-icon { font-size: 1.4rem; } .btn-level-large { padding: 28px; font-size: 1.9rem; } .hud-box { min-width: 108px; padding: 14px 20px; } .hud-box div { font-size: 1.65rem; } .hud-box span { font-size: 0.82rem; } #hud { gap: 16px; } #bottom-controls { gap: 22px; margin-top: 20px; } .btn-game-control { width: 62px; height: 62px; font-size: 1.5rem; } /* Desktop hover improvements */ .card:hover { transform: translateY(-4px) scale(1.03); } .btn-level-large:hover { transform: translateY(-5px); } } /* ============================================================ L. WIDE DESKTOP — 1440px+ 27" monitors, 4K screens, ultrawide ============================================================ */ @media screen and (min-width: 1440px) { #game-controls-container { max-width: 680px; } .cards-grid-large { max-width: 560px; } .menu-grid { max-width: 560px; } .scroll-box { max-width: 700px; } .modal-content { max-width: 660px; } } /* ============================================================ M. TOUCH DEVICE IMPROVEMENTS Prevents 300ms tap delay, improves touch targets ============================================================ */ /* Remove tap delay on all interactive elements */ a, button, input, select, textarea, .card, .btn-control, .btn-game-control, .btn-tab, .btn-primary, .btn-icon, .btn-level-large, .btn-secondary { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* Ensure minimum 44×44px touch targets (Apple HIG requirement) */ .btn-control, .btn-game-control, .modal-close { min-width: 44px; min-height: 44px; } /* Cards: minimum touch target on small screens */ @media screen and (max-width: 430px) { .card { min-width: 44px; min-height: 44px; } } /* Prevent text selection on interactive elements */ .card, button, .hud-box, .rank, .btn-tab { -webkit-user-select: none; user-select: none; } /* Smooth scrolling inside modals on iOS */ .modal-content, .scroll-box { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* Fix 100vh on iOS Safari (address bar collapses) */ .screen { min-height: -webkit-fill-available; } /* ============================================================ N. LANDSCAPE PHONE MODE When phone is rotated — game should still be playable ============================================================ */ @media screen and (orientation: landscape) and (max-height: 500px) { /* Compact layout for landscape phones */ #game-screen { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; padding: 6px; } #game-controls-container { width: auto; flex: 0 0 auto; max-width: none; padding: 4px 8px; } #hud { flex-direction: column; gap: 4px; margin: 0; width: auto; } .hud-box { min-width: 60px; padding: 4px 8px; } #game-board-container { flex: 0 0 auto; width: auto; height: 100%; padding: 0; } .cards-grid-large { width: auto; height: calc(100vh - 20px); aspect-ratio: 1; max-width: none; gap: 5px; padding: 6px; } #bottom-controls { flex-direction: column; margin: 0 0 0 8px; gap: 8px; } .btn-game-control { width: 38px; height: 38px; font-size: 1rem; } /* Hide header controls in landscape to save space */ .header-controls { top: 6px; right: 6px; } .btn-control { width: 36px; height: 36px; font-size: 0.95rem; } } /* ============================================================ ACCESSIBILITY ============================================================ */ /* High contrast mode support */ @media (forced-colors: active) { .card { border: 2px solid ButtonText; } .btn-primary, .btn-icon, .btn-level-large { border: 2px solid ButtonText; } } /* Reduced motion — disable all animations for users who prefer it */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Large text mode — some Android accessibility settings */ @media screen and (min-resolution: 2dppx) and (max-width: 430px) { /* On high-DPI small screens, ensure text doesn't get too large */ .hud-box div { font-size: clamp(0.9rem, 3.5vw, 1.4rem); } .hud-box span { font-size: clamp(0.52rem, 1.8vw, 0.72rem); } }