/* ════════════════════════════════════════════════════════════ 5 Roblox — mobile.css v2.0 MASTERPIECE EDITION Mobile-first responsive — bottom tab bar, clean layout Add AFTER style.css in ════════════════════════════════════════════════════════════ */ html, body { overflow-x: hidden; -webkit-text-size-adjust: 100%; } img, iframe, canvas, video { max-width: 100%; height: auto; } /* Fix iOS input zoom (font-size < 16px triggers zoom) */ input[type="number"], input[type="text"], input[type="file"], select, textarea { font-size: 16px !important; } /* ════════════════════════════════════════════════════════════ BOTTOM TAB BAR — Mobile only ════════════════════════════════════════════════════════════ */ /* Hidden on desktop; shown via media query */ #mobile-bottom-nav { display: none; } /* ════════════════════════════════════════════════════════════ TOUCH DEVICES — Portrait AND Landscape pointer:coarse = أجهزة اللمس (جوال + تابلت) يعمل في الوضعين العمودي والأفقي ════════════════════════════════════════════════════════════ */ @media (pointer: coarse) { :root { --nav-h: 54px; } #navbar { padding: 0 14px; gap: 10px; } .nav-tabs { display: none !important; } .mobile-menu-btn { display: none !important; } .nav-controls { gap: 5px; } .nav-select { font-size: 0.72rem !important; padding: 5px 8px !important; max-width: 90px; } .theme-toggle-btn { width: 32px; height: 32px; font-size: 0.95rem; } /* ── Bottom tab bar ── */ #mobile-bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: var(--bg-glass); backdrop-filter: blur(28px) saturate(1.6); -webkit-backdrop-filter: blur(28px) saturate(1.6); border-top: 1px solid var(--border-lt); z-index: 1001; padding: 0; padding-bottom: env(safe-area-inset-bottom, 0px); } /* Landscape: شريط أصغر لتوفير المساحة */ @media (orientation: landscape) { #mobile-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); } #mobile-bottom-nav .mob-tab { padding: 5px 2px 4px !important; } #mobile-bottom-nav .mob-tab .mob-icon { font-size: 1rem !important; } #mobile-bottom-nav .mob-tab span:last-child { font-size: 0.48rem !important; } #app-wrapper { padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important; } } #mobile-bottom-nav .mob-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px 6px; border: none; background: transparent; color: var(--text-3); font-family: var(--font-ui); font-size: 0.56rem; font-weight: 700; cursor: pointer; transition: color 0.18s; white-space: nowrap; min-width: 0; letter-spacing: 0.02em; } #mobile-bottom-nav .mob-tab .mob-icon { font-size: 1.2rem; line-height: 1; margin-bottom: 1px; } #mobile-bottom-nav .mob-tab.active { color: var(--primary); } #mobile-bottom-nav .mob-tab:active { color: var(--text-1); } /* Padding so content isn't hidden */ #app-wrapper { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); margin-top: var(--nav-h); } /* ── Layout ── */ .main-layout { padding: 14px !important; gap: 12px !important; grid-template-columns: 1fr !important; grid-template-areas: "content" !important; } .sidebar-area { display: none !important; } /* ── Section header ── */ .section-header { padding: 0 0 14px !important; } .section-header h2 { font-size: 1.35rem !important; } .section-header p { font-size: 0.82rem !important; } /* ── Cards ── */ .card { padding: 16px 14px !important; border-radius: var(--r-md) !important; } .card-title { font-size: 0.88rem !important; } /* ── Quick stats ── */ .quick-stats { grid-template-columns: 1fr 1fr 1fr !important; gap: 8px !important; } .stat-pill { padding: 11px 8px !important; } .sp-val { font-size: 0.95rem !important; } .sp-label { font-size: 0.6rem !important; } /* ── Mode pills ── */ .mode-pills { flex-wrap: wrap !important; gap: 6px !important; } .mode-pill { font-size: 0.76rem !important; padding: 6px 11px !important; flex: 1 1 auto; text-align: center; min-width: 0; } /* ── Converter inputs ── */ .field-row, .field-row-3 { grid-template-columns: 1fr !important; gap: 10px !important; } #conv-dir-rtc, #conv-dir-ctr { flex: 1; } /* ── Result panel ── */ .result-panel { padding: 16px !important; } .result-value { font-size: 1.85rem !important; } .result-meta { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } /* ── Fee breakdown ── */ .fee-breakdown { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } /* ── Multi-item table ── */ .totals-table { font-size: 0.73rem !important; min-width: 420px; } /* ── Item rows ── */ .item-row { grid-template-columns: 1fr 48px 80px auto !important; gap: 5px !important; padding: 7px 9px !important; } /* ── DevEx comparison ── */ .comparison-grid { grid-template-columns: 1fr !important; gap: 8px !important; } /* ── Bar chart ── */ .bar-row { grid-template-columns: 52px 1fr 70px !important; gap: 7px !important; font-size: 0.76rem !important; } /* ── Milestone grid ── */ .milestone-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; } /* ── Robux packs ── */ .packs-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .pack-card { padding: 14px 10px !important; } /* ── Analytics upload ── */ .upload-zone { padding: 30px 16px !important; } .upload-title { font-size: 1rem !important; } .upload-sub, .upload-note { font-size: 0.76rem !important; } /* ── Analytics stats ── */ .analytics-stats { grid-template-columns: 1fr 1fr !important; gap: 9px !important; } .analytics-stat { padding: 14px 12px !important; } .as-value { font-size: 1.15rem !important; } /* ── Charts ── */ .chart-canvas-wrap { height: 220px !important; } .chart-canvas-wrap canvas { max-height: 220px; } /* ── Hide large banner ads on mobile ── */ .ad-banner-wrap { display: none !important; } #ad-inline-mid { display: none !important; } /* ── Tooltips — appear above on mobile ── */ .tooltip-content { bottom: calc(100% + 8px) !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; max-width: 200px !important; white-space: normal !important; } } /* ════════════════════════════════════════════════════════════ PORTRAIT فقط — تخصيص إضافي ════════════════════════════════════════════════════════════ */ @media (pointer: coarse) and (orientation: portrait) and (max-width: 768px) { .main-layout { padding: 14px !important; } } /* ════════════════════════════════════════════════════════════ SMALL MOBILE (≤ 480px portrait) ════════════════════════════════════════════════════════════ */ @media (pointer: coarse) and (max-width: 480px) { .quick-stats { grid-template-columns: 1fr 1fr !important; } .packs-grid { grid-template-columns: 1fr 1fr !important; } #mobile-bottom-nav .mob-tab { font-size: 0.5rem !important; padding: 7px 1px 5px !important; } #mobile-bottom-nav .mob-tab .mob-icon { font-size: 1.1rem !important; } .section-header h2 { font-size: 1.2rem !important; } .result-value { font-size: 1.6rem !important; } .nav-select { max-width: 72px !important; font-size: 0.68rem !important; } .sp-val { font-size: 0.85rem !important; } .analytics-stats { grid-template-columns: 1fr !important; } .chart-canvas-wrap { height: 180px !important; } .platform-toggle-wrap { width: 100%; } .platform-toggle-btn { flex: 1; justify-content: center; font-size: 0.75rem !important; padding: 7px 10px !important; } } /* ════════════════════════════════════════════════════════════ 6-TAB BOTTOM NAV FINE-TUNING — كل أجهزة اللمس ════════════════════════════════════════════════════════════ */ @media (pointer: coarse) { #mobile-bottom-nav .mob-tab { font-size: 0.5rem !important; padding: 7px 1px 5px !important; } #mobile-bottom-nav .mob-tab .mob-icon { font-size: 1.15rem !important; } }