/* ============================================================ OneHint — shared mobile stylesheet Loaded by every game's . ALL rules live inside @media (max-width: 900px) so desktop layouts are untouched. ============================================================ */ /* -------------------------------------------------------- */ /* Phone + small tablet (portrait phones, narrow tablets) */ /* -------------------------------------------------------- */ @media (max-width: 900px) { /* iOS dynamic viewport height — use 100dvh instead of 100vh so the URL bar doesn't crop the layout. dvh is supported on iOS 15.4+, Chrome 108+, Android Chrome, Samsung Internet. */ html, body { min-height: 100dvh; } /* Safe-area awareness for notched phones (iPhone X+). Apply to so we don't clobber each game's own body padding. With viewport-fit=cover the content extends under the notch; these insets pull it back. */ html { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); box-sizing: border-box; } /* iOS tap highlight + callout cleanup */ * { -webkit-tap-highlight-color: transparent; } button, .pill, .btn-fullscreen, .icon-btn, .zoom-btn, .header-track-select, .track-next-btn, .card-cta, .game-card, a.game-card { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; /* skip 300 ms double-tap zoom delay */ } /* Prevent iOS Safari from zooming when a form control gains focus */ input:not([type="range"]):not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: 16px !important; } /* Prevent pull-to-refresh / overscroll bounce on game pages */ body { overscroll-behavior: contain; } /* Make every interactive control comfortably tappable. 44 px is Apple's HIG minimum; 40 px works well in dense UIs. */ button:not(.scr-dot), .pill, select, .btn-fullscreen, .icon-btn, .zoom-btn, .header-track-select, .track-next-btn, .card-cta { min-height: 40px; } /* ---- Geo-game shared widgets (flag_liker, pin_the_flag, map_liker, geo_liker) — make small UI more readable ---- */ .pill { font-size: 0.78rem !important; padding: 7px 11px !important; } .stat-label { font-size: 0.62rem !important; } .stat-val { font-size: 1.1rem !important; } .filter-label { font-size: 0.65rem !important; } /* Geo-game header: zero out desktop-only side padding & let it wrap */ header { padding-left: 12px !important; padding-right: 12px !important; flex-wrap: wrap !important; gap: 10px !important; margin-bottom: 12px !important; padding-bottom: 10px !important; } /* Filter rows: tighter spacing on phones */ .filter-row { gap: 5px !important; } /* Logo: slightly smaller so the header doesn't crowd the stage */ .logo { font-size: 1.25rem !important; } /* Soften the giant decorative radial glows — they cover too much area on phones and slow paints. */ body::before, body::after { width: 300px !important; height: 300px !important; top: -120px !important; left: -120px !important; } body::after { top: auto !important; left: auto !important; bottom: -120px !important; right: -120px !important; } /* Canvas: never overflow viewport on mobile. Most marble games already set this in their own CSS, but pin it down here as a guarantee. */ canvas { max-width: 100% !important; max-height: 100dvh !important; height: auto; } /* hint_the_marble_race uses .wrap as a 2-column flex (canvas | side panel); wrap it on mobile. */ .wrap { flex-wrap: wrap !important; justify-content: center !important; } .panel { width: 100% !important; max-width: 100% !important; } } /* -------------------------------------------------------- */ /* Pure phone (≤ 560 px) — tighter still */ /* -------------------------------------------------------- */ @media (max-width: 560px) { /* Icon buttons: 40 px square minimum for thumb taps */ .btn-fullscreen, .icon-btn { width: 40px !important; height: 40px !important; font-size: 1.15rem !important; } /* Stat row: tighten gaps so 3-4 stats fit on a 360 px wide screen */ .stats { gap: 10px !important; } /* Compress headers */ .header, header { padding-top: 8px; padding-bottom: 8px; } } /* -------------------------------------------------------- */ /* Landscape phone (≤ 500 px tall) — very limited height */ /* -------------------------------------------------------- */ @media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) { /* Hide stat labels to save vertical space */ .stat-label { display: none !important; } /* Slimmer header padding */ header, .header { padding-top: 4px !important; padding-bottom: 4px !important; } .logo { font-size: 1.05rem !important; } } /* -------------------------------------------------------- */ /* Pseudo-fullscreen mode (iOS Safari fallback) */ /* Triggered by mobile.js when the real Fullscreen API is */ /* unavailable (iPhone Safari). Locks the body to the */ /* visible viewport so the URL bar can't push content */ /* around, but still lets users scroll inside the game. */ /* -------------------------------------------------------- */ body.pseudo-fs { position: fixed; inset: 0; width: 100vw; height: 100dvh; margin: 0 !important; overflow: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; z-index: 9999; } body.pseudo-fs canvas { max-width: 100vw !important; max-height: 100dvh !important; } /* ============================================================ Shared "Home / Start Over" button (.btn-home-start) - Compact size by default (smaller than other pills in the filter row, since it's a navigation aid, not a play action). - On mobile (≤ 900px) collapses to just the 🏠 icon by hiding the .bhs-text span. Saves crowded header space on phones. - The button itself keeps a tap-friendly min-width of 40px. ============================================================ */ /* Pin the Home/Start-Over button right next to the ← OneHint.org back-home pill at the top-left of the viewport — matching its size and style exactly so both nav pills look like siblings. */ /* Home button — on DESKTOP it stays in its original inline location inside the filter row / header (no fixed positioning, no overlap with the page title or back-home pill). Only on MOBILE it becomes a small fixed pill next to the ← back-home arrow (handled in the @media block below). */ .btn-home-start { font-family: 'DM Sans', sans-serif !important; font-weight: 600 !important; font-size: 0.78rem !important; text-transform: none !important; letter-spacing: 0 !important; padding: 6px 14px !important; border-radius: 8px !important; border: 1.5px solid var(--accent, #1f8f6b) !important; background: transparent !important; color: var(--accent, #1f8f6b) !important; cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; } .btn-home-start:hover { background: var(--accent, #1f8f6b) !important; color: #fff !important; } /* The "← OneHint.org" pill is NOT a sticky/fixed nav — make it scroll away with the page so it doesn't hover over content the user is scrolling through. position:absolute keeps the top:12 / left:14 anchor at document-top, but lets the element scroll out of view normally with the body. */ .back-home { position: absolute !important; } /* DESKTOP overlap fixes: even at scroll 0 the back-home pill sits at top:12 / left:14, so the start-screen overlay content and the in-game header need enough top/left padding to avoid clipping under it. */ @media (min-width: 901px) { .screen { padding-top: 60px !important; } header { padding-left: 180px !important; } } .btn-home-start:hover { background: var(--accent-h, #17755a) !important; transform: translateY(-1px); } @media (max-width: 900px) { /* On MOBILE only, fix the home button next to the small ← back- home arrow pill at the top-left of the viewport. Icon-only. */ .btn-home-start { position: fixed !important; top: max(6px, env(safe-area-inset-top, 0px)) !important; left: calc(max(6px, env(safe-area-inset-left, 0px)) + 38px) !important; width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 22px !important; min-height: 22px !important; max-height: 22px !important; padding: 0 !important; margin: 0 !important; font-size: 12px !important; line-height: 22px !important; text-align: center !important; border: none !important; border-radius: 6px !important; color: #fff !important; background: var(--accent, #1f8f6b) !important; box-shadow: 0 2px 8px rgba(0,0,0,0.18) !important; z-index: 9998 !important; display: inline-block !important; overflow: hidden !important; } /* Hide the "Home" / "Start" text on phones — icon only. */ .btn-home-start .bhs-text { display: none !important; } }