/* * GameGuessr — mobile game UI layer (see public/js/game_mobile.js). * Only applies under html.ggm (touch phones). Every rule is prefixed with * "html.ggm body" so it outranks the legacy per-page !important overrides. * * State classes on : * ggm-port / ggm-land orientation * ggm-looking player is dragging the panorama (HUD retracts) * ggm-immersive HUD hidden by the eye button * ggm-typing / ggm-kb input focused / virtual keyboard open * ggm-map / ggm-map-min map phase / map sheet collapsed * ggm-result map validated, "next" button shown * ggm-reveal answer card (#gameInfo) shown * ggm-dock-off guess dock hidden between rounds */ html.ggm { --ggm-safe-t: env(safe-area-inset-top, 0px); --ggm-safe-b: env(safe-area-inset-bottom, 0px); --ggm-safe-l: env(safe-area-inset-left, 0px); --ggm-safe-r: env(safe-area-inset-right, 0px); --ggm-edge: 10px; --ggm-pill-h: 36px; --ggm-top: calc(var(--ggm-safe-t) + var(--ggm-edge)); --ggm-row2: calc(var(--ggm-top) + var(--ggm-pill-h) + 8px); --ggm-left: calc(var(--ggm-safe-l) + var(--ggm-edge)); --ggm-right: calc(var(--ggm-safe-r) + var(--ggm-edge)); --ggm-bottom: calc(var(--ggm-safe-b) + var(--ggm-edge)); --ggm-tool: 40px; --ggm-tools-top: var(--ggm-row2); --ggm-cta-h: 56px; --ggm-map-b: calc(var(--ggm-safe-b) + 8px + var(--ggm-cta-h) + 8px); --ggm-map-h: min(58vh, calc(var(--ggm-h, 100vh) - var(--ggm-safe-t) - 190px)); --ggm-map-w: min(50vw, 540px); --ggm-glass: rgba(18, 9, 42, 0.74); --ggm-glass-strong: rgba(14, 6, 34, 0.9); --ggm-border: rgba(167, 139, 250, 0.32); --ggm-glow: 0 0 18px rgba(124, 58, 237, 0.35), 0 6px 18px rgba(0, 0, 0, 0.45); --ggm-grad: linear-gradient(135deg, #7c3aed, #a855f7); --ggm-ease: cubic-bezier(0.22, 1, 0.36, 1); } html.ggm.ggm-has-level { --ggm-tools-top: calc(var(--ggm-row2) + 38px); } html.ggm body { -webkit-tap-highlight-color: transparent; overscroll-behavior: none; } /* ── Panorama: always full-bleed ──────────────────────────────────────── */ html.ggm body #viewer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: var(--ggm-h, 100vh) !important; } html.ggm body #viewer canvas { touch-action: none; } /* ── Top HUD ──────────────────────────────────────────────────────────── */ html.ggm body #quitBtn, html.ggm body #roundNumber, html.ggm body #scoreDisplay, html.ggm body #levelIndicator, html.ggm body #streakIndicator, html.ggm body #helpBtn, html.ggm body #ggm-tools { transition: opacity 0.3s ease, transform 0.35s var(--ggm-ease) !important; } html.ggm body #quitBtn { top: var(--ggm-top) !important; left: var(--ggm-left) !important; height: var(--ggm-pill-h) !important; padding: 0 14px !important; border-radius: 999px !important; box-sizing: border-box !important; z-index: 960 !important; touch-action: manipulation !important; } html.ggm body #quitBtn .quit-logo { height: 0.95rem !important; width: auto !important; } html.ggm body #roundNumber { top: var(--ggm-top) !important; right: var(--ggm-right) !important; left: auto !important; height: var(--ggm-pill-h) !important; line-height: calc(var(--ggm-pill-h) - 3px) !important; padding: 0 12px !important; font-size: 0.85rem !important; letter-spacing: 1px !important; border-radius: 999px !important; box-sizing: border-box !important; z-index: 950 !important; } /* Timer ring: keep the SVG geometry (page scripts rely on it), only scale the box */ html.ggm body #timer-circle-container { top: calc(var(--ggm-top) - 4px) !important; left: 50% !important; transform: translateX(-50%) scale(var(--ggm-timer-scale, 0.46)) !important; transform-origin: 50% 0 !important; z-index: 950 !important; transition: transform 0.35s var(--ggm-ease), opacity 0.4s ease, box-shadow 0.9s ease, border-color 0.9s ease !important; } @media (max-width: 900px) { html.ggm { --ggm-timer-scale: 0.92; } } html.ggm.ggm-looking body #timer-circle-container, html.ggm.ggm-immersive body #timer-circle-container { transform: translateX(-50%) scale(calc(var(--ggm-timer-scale, 0.46) * 0.8)) !important; } html.ggm body #scoreDisplay { top: var(--ggm-row2) !important; left: var(--ggm-left) !important; font-size: 0.8rem !important; padding: 5px 12px !important; letter-spacing: 1px !important; border-radius: 999px !important; animation: none !important; } html.ggm body #levelIndicator { top: var(--ggm-row2) !important; right: var(--ggm-right) !important; font-size: 0.75rem !important; padding: 5px 12px !important; letter-spacing: 1px !important; border-radius: 999px !important; animation: none !important; } html.ggm body #streakIndicator { position: fixed !important; top: var(--ggm-row2) !important; left: calc(var(--ggm-left) + 4px) !important; z-index: 940 !important; } html.ggm.ggm-has-score body #streakIndicator { top: calc(var(--ggm-row2) + 34px) !important; } html.ggm body #streakFlame { font-size: 1.9rem !important; } html.ggm body #streakNumber { font-size: 0.95rem !important; } /* ── Tools column (rotate / fullscreen / immersive) ───────────────────── */ #ggm-tools { display: none; } html.ggm #ggm-tools { position: fixed; top: var(--ggm-tools-top); right: var(--ggm-right); z-index: 960; display: flex; flex-direction: column; gap: 8px; } html.ggm .ggm-tool { width: var(--ggm-tool); height: var(--ggm-tool); padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid var(--ggm-border); background: var(--ggm-glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ggm-glow); color: #e9d5ff; touch-action: manipulation; transition: transform 0.2s var(--ggm-ease), background 0.2s ease, border-color 0.2s ease; } html.ggm .ggm-tool svg, html.ggm #ggm-map-toggle svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } html.ggm .ggm-tool:active { transform: scale(0.9); } html.ggm #ggm-rotate svg { transition: transform 0.4s var(--ggm-ease); } html.ggm #ggm-rotate.is-land svg { transform: rotate(-90deg); } html.ggm #ggm-eye.is-on { background: var(--ggm-grad); border-color: rgba(233, 213, 255, 0.6); color: #fff; } /* Help toggle lives under the tools column */ html.ggm body #helpBtn { top: calc(var(--ggm-tools-top) + var(--ggm-tools-n, 3) * (var(--ggm-tool) + 8px) + 2px) !important; right: var(--ggm-right) !important; left: auto !important; bottom: auto !important; padding: 7px 12px !important; font-size: 0.72rem !important; letter-spacing: 0.5px !important; border-radius: 999px !important; z-index: 945 !important; transform: none !important; touch-action: manipulation !important; } html.ggm body #helpBtn:hover { transform: none !important; } /* No tools column (script not started yet): take its place */ html.ggm:not(.ggm-ready) body #helpBtn { top: var(--ggm-tools-top) !important; } /* ── Guess dock ───────────────────────────────────────────────────────── */ html.ggm body #overlay { --ggm-dock-x: 0px; --ggm-dock-y: 0px; position: fixed !important; top: auto !important; left: var(--ggm-left) !important; right: var(--ggm-right) !important; bottom: var(--ggm-bottom) !important; width: auto !important; max-width: none !important; box-sizing: border-box !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; padding: 8px !important; border-radius: 20px !important; background: var(--ggm-glass) !important; border: 1px solid var(--ggm-border) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--ggm-glow) !important; transform: translate(var(--ggm-dock-x), var(--ggm-dock-y)) !important; animation: none !important; z-index: 900 !important; transition: transform 0.38s var(--ggm-ease), opacity 0.3s ease, bottom 0.18s ease-out !important; } /* Keyboard open: pin the dock to the bottom of the *visible* area (works for iOS panning, Android resize-content and resize-visual alike) */ html.ggm.ggm-pin body #overlay { top: calc(var(--ggm-vv-bottom, 100vh) - var(--ggm-dock-h, 64px) - 6px) !important; bottom: auto !important; } html.ggm body #overlay.hide { --ggm-dock-y: 24px; } html.ggm.ggm-dock-off body #overlay, html.ggm.ggm-reveal body #overlay { --ggm-dock-y: 24px; opacity: 0 !important; pointer-events: none !important; } /* Row layout, so the campaign hint sits next to the input even if the script never moved it out of #guessContainer */ html.ggm body #guessContainer { order: 1; flex: 1 1 auto !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; width: auto !important; margin: 0 !important; z-index: 1001 !important; } html.ggm body #guessInput { flex: 1 1 0 !important; min-width: 0 !important; width: 100% !important; height: 46px !important; min-height: 46px !important; padding: 0 14px !important; box-sizing: border-box !important; font-size: 16px !important; /* < 16px makes iOS zoom on focus */ font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important; border-radius: 14px !important; } html.ggm body #lives { order: 2; flex: 0 0 auto !important; width: auto !important; max-width: 42% !important; position: static !important; left: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; padding: 4px 8px !important; gap: 3px !important; flex-wrap: wrap !important; align-self: center !important; border-radius: 12px !important; box-sizing: border-box !important; } html.ggm body .life { width: 20px !important; height: 20px !important; margin: 0 !important; } /* Text counters that some modes put in #lives (speedrun, game of the day) */ html.ggm body #lives > span, html.ggm body #lives > div { font-size: 0.72rem !important; line-height: 1.25 !important; white-space: nowrap; } /* Feedback message floats above the dock as a toast */ html.ggm body #message { position: absolute !important; left: 50% !important; bottom: calc(100% + 10px) !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100vw - 40px) !important; min-height: 0 !important; margin: 0 !important; padding: 6px 14px !important; box-sizing: border-box !important; font-size: 0.95rem !important; line-height: 1.3 !important; text-align: center !important; border-radius: 999px; background: var(--ggm-glass-strong); border: 1px solid var(--ggm-border); pointer-events: none; } html.ggm body #message:empty { display: none !important; } html.ggm body #coin-plusone { top: auto !important; bottom: calc(100% + 48px) !important; } /* Autocomplete sits above the input, never taller than the visible area */ html.ggm body .suggestions-list { bottom: calc(100% + 16px) !important; border-radius: 14px !important; border-bottom: 1.5px solid rgba(167, 139, 250, 0.3) !important; max-height: min(200px, calc(var(--ggm-vvh, 100vh) - var(--ggm-dock-h, 64px) - 90px)) !important; font-size: 1rem !important; -webkit-overflow-scrolling: touch; } html.ggm body .suggestion-item { min-height: 44px !important; padding: 11px 14px !important; box-sizing: border-box !important; } /* Campaign hint: round icon button inside the dock (moved there by game_mobile.js), its result shown as a toast above the dock */ html.ggm body #overlay #hintArea { order: 2; position: static !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; transform: none !important; flex: 0 0 auto !important; margin: 0 !important; pointer-events: auto !important; } html.ggm body #overlay #hintBtn { position: relative !important; width: 46px !important; height: 46px !important; min-height: 0 !important; padding: 0 !important; border-radius: 14px !important; font-size: 0 !important; line-height: 0 !important; overflow: hidden !important; transform: none !important; touch-action: manipulation !important; } html.ggm body #overlay #hintBtn::before { content: '💡'; font-size: 1.35rem; line-height: 46px; } html.ggm body #overlay #hintBtn[data-locked="1"]::before { content: '🔒'; } html.ggm body #overlay #hintBtn::after { display: none !important; } html.ggm body #overlay #hintBtn:disabled { opacity: 0.4 !important; filter: grayscale(0.6); } html.ggm body #overlay #hintVipLabel { display: none !important; } html.ggm body #overlay #hintResult { position: absolute !important; left: 50% !important; bottom: calc(100% + 10px) !important; transform: translateX(-50%) !important; width: max-content !important; max-width: calc(100vw - 40px) !important; margin: 0 !important; padding: 7px 14px !important; box-sizing: border-box !important; border-radius: 999px !important; background: var(--ggm-grad) !important; border: 1px solid rgba(233, 213, 255, 0.45) !important; color: #fff !important; font-size: 0.9rem !important; line-height: 1.3 !important; text-align: center !important; box-shadow: var(--ggm-glow) !important; pointer-events: none; } /* Keep the feedback message above a visible hint */ html.ggm body #overlay:has(#hintResult[style*="block"]) #message { bottom: calc(100% + 54px) !important; } html.ggm body #overlay #lives { order: 3; } /* Campaign "see the panorama" eye next to Next, and the boss-round one */ html.ggm body #nextBtnWrap { margin-top: 6px !important; } html.ggm body #nextBtnWrap #nextBtn { min-width: min(58vw, 230px) !important; margin-top: 0 !important; } html.ggm body #toggleInfoBtn { right: -54px !important; } html.ggm body #bossToggleBtn { left: calc(var(--ggm-safe-l) + 16px) !important; right: auto !important; bottom: calc(var(--ggm-map-b) + var(--ggm-map-h) - 48px) !important; top: auto !important; width: 40px !important; height: 40px !important; transform: none !important; } html.ggm.ggm-land body #bossToggleBtn { left: calc(100vw - var(--ggm-safe-r) - var(--ggm-map-w)) !important; top: calc(var(--ggm-top) + 6px) !important; bottom: auto !important; } /* ── Retract while dragging / immersive mode ──────────────────────────── */ html.ggm.ggm-looking body #overlay, html.ggm.ggm-immersive body #overlay { --ggm-dock-y: calc(100% + var(--ggm-bottom) + 12px); opacity: 0 !important; pointer-events: none !important; } html.ggm.ggm-looking body #quitBtn, html.ggm.ggm-looking body #roundNumber, html.ggm.ggm-looking body #scoreDisplay, html.ggm.ggm-looking body #levelIndicator, html.ggm.ggm-looking body #streakIndicator, html.ggm.ggm-looking body #helpBtn, html.ggm.ggm-looking body #ggm-tools { opacity: 0.22 !important; } html.ggm.ggm-immersive body #quitBtn, html.ggm.ggm-immersive body #roundNumber, html.ggm.ggm-immersive body #scoreDisplay, html.ggm.ggm-immersive body #levelIndicator, html.ggm.ggm-immersive body #streakIndicator, html.ggm.ggm-immersive body #helpBtn { opacity: 0 !important; pointer-events: none !important; } html.ggm.ggm-immersive body #quitBtn { transform: translateY(-10px) !important; } html.ggm.ggm-immersive #ggm-rotate, html.ggm.ggm-immersive #ggm-fs { opacity: 0; pointer-events: none; transform: scale(0.6); } /* Small handle to bring the HUD back from immersive mode */ #ggm-peek { display: none; } html.ggm #ggm-peek { position: fixed; left: 50%; bottom: var(--ggm-bottom); z-index: 905; display: flex; align-items: center; justify-content: center; width: 96px; height: 34px; padding: 0; border: 0; background: transparent; transform: translate(-50%, 60px); opacity: 0; pointer-events: none; transition: transform 0.38s var(--ggm-ease), opacity 0.3s ease; touch-action: manipulation; } html.ggm #ggm-peek span { width: 54px; height: 6px; border-radius: 999px; background: rgba(233, 213, 255, 0.75); box-shadow: 0 0 12px rgba(168, 85, 247, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6); } html.ggm.ggm-looking:not(.ggm-dock-off) #ggm-peek, html.ggm.ggm-immersive:not(.ggm-dock-off) #ggm-peek { transform: translate(-50%, 0); opacity: 1; } html.ggm.ggm-immersive:not(.ggm-dock-off) #ggm-peek { pointer-events: auto; } /* ── Typing: keep only what matters ───────────────────────────────────── */ html.ggm.ggm-typing body #helpBtn, html.ggm.ggm-typing body #streakIndicator { opacity: 0 !important; pointer-events: none !important; } /* ── Between rounds ───────────────────────────────────────────────────── */ html.ggm.ggm-dock-off body #helpBtn, html.ggm.ggm-dock-off #ggm-eye, html.ggm.ggm-dock-off #ggm-coach { opacity: 0 !important; pointer-events: none !important; } /* The countdown screen already covers the tools; only hide them on end screens, and only once the dock is gone too (never mid-round). */ html.ggm.ggm-start #ggm-coach, html.ggm.ggm-end.ggm-dock-off #ggm-tools, html.ggm.ggm-end.ggm-dock-off #ggm-coach, html.ggm.ggm-end.ggm-dock-off #ggm-peek, html.ggm.ggm-end.ggm-dock-off #ggm-map-toggle { opacity: 0 !important; pointer-events: none !important; } /* ── Map phase: bottom sheet (portrait) ───────────────────────────────── */ html.ggm body #mobile-map-toggle { display: none !important; } html.ggm body #minimap { position: fixed !important; top: auto !important; left: calc(var(--ggm-safe-l) + 8px) !important; right: calc(var(--ggm-safe-r) + 8px) !important; bottom: var(--ggm-map-b) !important; width: auto !important; max-width: none !important; height: var(--ggm-map-h) !important; max-height: none !important; transform: none !important; border-radius: 18px !important; border: 1.5px solid var(--ggm-border) !important; box-shadow: 0 -6px 30px rgba(0, 0, 0, 0.5), 0 0 22px rgba(124, 58, 237, 0.3) !important; z-index: 2000 !important; touch-action: none !important; /* Campaign fades the map to 0.45 until mouse hover (desktop only) */ opacity: 1 !important; transition: transform 0.42s var(--ggm-ease) !important; } html.ggm.ggm-map-min body #minimap { transform: translateY(calc(100% + var(--ggm-map-b) + 10px)) !important; } html.ggm body #valider-coord, html.ggm body #custom-next-btn { position: fixed !important; top: auto !important; left: calc(var(--ggm-safe-l) + 8px) !important; right: calc(var(--ggm-safe-r) + 8px) !important; bottom: calc(var(--ggm-safe-b) + 8px) !important; width: auto !important; max-width: none !important; height: var(--ggm-cta-h) !important; margin: 0 !important; padding: 0 !important; transform: none !important; border-radius: 16px !important; border: 1.5px solid rgba(192, 132, 252, 0.5) !important; background: var(--ggm-grad) !important; color: #fff !important; font-family: 'Lilita One', cursive !important; font-size: 1.2rem !important; font-weight: 600 !important; letter-spacing: 1px !important; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important; box-shadow: 0 0 22px rgba(124, 58, 237, 0.55), 0 8px 20px rgba(0, 0, 0, 0.45) !important; z-index: 2100 !important; touch-action: manipulation !important; } html.ggm body #valider-coord:active, html.ggm body #custom-next-btn:active { filter: brightness(1.15); } /* Map / panorama switch */ #ggm-map-toggle { display: none; } html.ggm.ggm-map #ggm-map-toggle { position: fixed; right: calc(var(--ggm-safe-r) + 16px); bottom: calc(var(--ggm-map-b) + var(--ggm-map-h) - 46px); z-index: 2050; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px 0 11px; border-radius: 999px; border: 1.5px solid var(--ggm-border); background: var(--ggm-glass-strong); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--ggm-glow); color: #e9d5ff; font-family: 'Lilita One', cursive; font-size: 0.85rem; letter-spacing: 1px; touch-action: manipulation; transition: bottom 0.42s var(--ggm-ease), right 0.42s var(--ggm-ease), background 0.2s ease; } html.ggm.ggm-map.ggm-map-min #ggm-map-toggle { bottom: var(--ggm-map-b); right: calc(var(--ggm-safe-r) + 8px); background: var(--ggm-grad); color: #fff; } /* Score bar after validating on the map */ html.ggm body #score-bar-container { top: calc(var(--ggm-top) + 48px) !important; left: 50% !important; transform: translateX(-50%) !important; width: min(86vw, 420px) !important; max-width: none !important; height: auto !important; } /* Tools and help are noise while placing the marker */ html.ggm.ggm-map body #helpBtn, html.ggm.ggm-map #ggm-eye { opacity: 0 !important; pointer-events: none !important; } /* ── Answer card ──────────────────────────────────────────────────────── */ html.ggm body #gameInfo { top: 50% !important; width: calc(100vw - var(--ggm-safe-l) - var(--ggm-safe-r) - 32px) !important; max-width: 460px !important; max-height: calc(var(--ggm-h, 100vh) - var(--ggm-safe-t) - var(--ggm-safe-b) - 110px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 8px 4px !important; box-sizing: border-box !important; } html.ggm body #gameName { font-size: clamp(1.2rem, 5.5vw, 1.75rem) !important; line-height: 1.15 !important; margin-bottom: 12px !important; } html.ggm body #gameCover { width: auto !important; max-width: min(56vw, 220px) !important; max-height: 34vh !important; object-fit: contain; margin-bottom: 12px !important; } html.ggm body #gameDetails { font-size: 0.95rem !important; line-height: 1.45 !important; margin-bottom: 12px !important; } html.ggm body #nextBtn { min-width: min(78vw, 300px) !important; min-height: 52px !important; margin-top: 6px !important; padding: 0 28px !important; font-size: 1.15rem !important; border-radius: 999px !important; touch-action: manipulation !important; } html.ggm body #nextBtn:hover, html.ggm body #nextBtn:focus { transform: none !important; } html.ggm body #nextBtn:active { transform: scale(0.97) !important; } /* ── LANDSCAPE ────────────────────────────────────────────────────────── */ html.ggm.ggm-land { --ggm-pill-h: 32px; --ggm-tool: 36px; --ggm-cta-h: 50px; --ggm-edge: 8px; } /* Dock: one compact row, centered */ html.ggm.ggm-land body #overlay { --ggm-dock-x: -50%; left: 50% !important; right: auto !important; width: min(560px, calc(100vw - var(--ggm-safe-l) - var(--ggm-safe-r) - 220px)) !important; padding: 6px !important; border-radius: 18px !important; } html.ggm.ggm-land body #guessInput { height: 42px !important; min-height: 42px !important; } html.ggm.ggm-land body .life { width: 18px !important; height: 18px !important; } html.ggm.ggm-land body #helpBtn { padding: 6px 10px !important; } /* Keyboard open in landscape: only the dock and a small timer survive */ html.ggm.ggm-land.ggm-typing body #quitBtn, html.ggm.ggm-land.ggm-typing body #roundNumber, html.ggm.ggm-land.ggm-typing body #scoreDisplay, html.ggm.ggm-land.ggm-typing body #levelIndicator, html.ggm.ggm-land.ggm-typing #ggm-tools { opacity: 0 !important; pointer-events: none !important; } html.ggm.ggm-land.ggm-kb body #timer-circle-container { top: calc(var(--ggm-vv-top, 0px) + 4px) !important; left: calc(var(--ggm-safe-l) + 34px) !important; transform: translateX(-50%) scale(calc(var(--ggm-timer-scale, 0.46) * 0.72)) !important; } html.ggm.ggm-land.ggm-kb body #overlay { width: min(620px, calc(100vw - var(--ggm-safe-l) - var(--ggm-safe-r) - 24px)) !important; } html.ggm.ggm-land body .suggestions-list { max-height: min(180px, calc(var(--ggm-vvh, 100vh) - var(--ggm-dock-h, 56px) - 24px)) !important; } /* Map phase: side panel on the right, panorama stays visible on the left */ html.ggm.ggm-land body #minimap { top: var(--ggm-top) !important; left: auto !important; right: calc(var(--ggm-safe-r) + 8px) !important; bottom: calc(var(--ggm-safe-b) + 8px + var(--ggm-cta-h) + 8px) !important; width: var(--ggm-map-w) !important; height: auto !important; } html.ggm.ggm-land.ggm-map-min body #minimap { transform: translateX(calc(100% + var(--ggm-safe-r) + 20px)) !important; } html.ggm.ggm-land body #valider-coord, html.ggm.ggm-land body #custom-next-btn { left: auto !important; right: calc(var(--ggm-safe-r) + 8px) !important; width: var(--ggm-map-w) !important; font-size: 1.1rem !important; } html.ggm.ggm-land.ggm-map #ggm-map-toggle { bottom: auto; top: calc(var(--ggm-top) + 8px); right: calc(var(--ggm-safe-r) + 16px); } html.ggm.ggm-land.ggm-map.ggm-map-min #ggm-map-toggle { top: auto; bottom: calc(var(--ggm-safe-b) + 8px + var(--ggm-cta-h) + 8px); right: calc(var(--ggm-safe-r) + 8px); } html.ggm.ggm-land.ggm-map:not(.ggm-map-min) body #roundNumber { right: calc(var(--ggm-safe-r) + var(--ggm-map-w) + 18px) !important; } html.ggm.ggm-land.ggm-map #ggm-tools { top: auto; right: auto; left: var(--ggm-left); bottom: var(--ggm-bottom); } html.ggm.ggm-land body #score-bar-container { left: calc((100vw - var(--ggm-map-w) - var(--ggm-safe-r) - 8px) / 2) !important; width: min(38vw, 340px) !important; } /* Answer card: cover on the left, details on the right */ /* Stay between the left pills and the right tools column */ html.ggm.ggm-land body #gameInfo { width: min(660px, calc(100vw - var(--ggm-safe-l) - var(--ggm-safe-r) - 290px)) !important; max-width: none !important; max-height: calc(var(--ggm-h, 100vh) - var(--ggm-safe-t) - var(--ggm-safe-b) - 24px) !important; text-align: left !important; } html.ggm.ggm-land body #gameInfo::after { content: ''; display: block; clear: both; } html.ggm.ggm-land body #gameCover { float: left; max-width: 24vw !important; max-height: calc(var(--ggm-h, 100vh) - var(--ggm-safe-t) - var(--ggm-safe-b) - 48px) !important; margin: 0 20px 0 0 !important; } html.ggm.ggm-land body #gameName { font-size: clamp(1.1rem, 3.2vw, 1.6rem) !important; margin-bottom: 8px !important; } html.ggm.ggm-land body #gameDetails { font-size: 0.9rem !important; margin-bottom: 8px !important; } html.ggm.ggm-land body #nextBtn { min-width: 0 !important; min-height: 46px !important; } /* ── Rotate hint ──────────────────────────────────────────────────────── */ #ggm-rotate-hint { display: none; } html.ggm #ggm-rotate-hint { position: fixed; inset: 0; z-index: 1000010; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(6, 2, 18, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } html.ggm #ggm-rotate-hint.show { opacity: 1; pointer-events: auto; } html.ggm .ggm-rh-card { max-width: 300px; padding: 26px 22px 20px; border-radius: 22px; text-align: center; background: var(--ggm-glass-strong); border: 1.5px solid var(--ggm-border); box-shadow: var(--ggm-glow); transform: translateY(14px) scale(0.96); transition: transform 0.4s var(--ggm-ease); } html.ggm #ggm-rotate-hint.show .ggm-rh-card { transform: none; } html.ggm .ggm-rh-phone { width: 44px; height: 74px; margin: 4px auto 18px; border: 3px solid #c4b5fd; border-radius: 10px; position: relative; box-shadow: 0 0 18px rgba(168, 85, 247, 0.55); animation: ggmRotatePhone 2.2s var(--ggm-ease) infinite; } html.ggm .ggm-rh-phone span { position: absolute; left: 50%; bottom: 6px; width: 12px; height: 3px; margin-left: -6px; border-radius: 2px; background: #c4b5fd; } html.ggm #ggm-rotate-hint.to-portrait .ggm-rh-phone { animation-name: ggmRotatePhoneBack; } @keyframes ggmRotatePhone { 0%, 15% { transform: rotate(0deg); } 55%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0deg); } } @keyframes ggmRotatePhoneBack { 0%, 15% { transform: rotate(-90deg); } 55%, 85% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } } html.ggm .ggm-rh-text { margin: 0 0 18px; color: #f3e8ff; font-family: 'Lilita One', cursive; font-size: 1.1rem; letter-spacing: 0.5px; line-height: 1.35; } html.ggm .ggm-rh-ok { min-width: 120px; height: 44px; border-radius: 999px; border: 1.5px solid rgba(192, 132, 252, 0.5); background: var(--ggm-grad); color: #fff; font-family: 'Lilita One', cursive; font-size: 1rem; letter-spacing: 1px; } /* ── First-visit coach mark ───────────────────────────────────────────── */ html.ggm #ggm-coach { position: fixed; top: calc(var(--ggm-tools-top) + 2px); right: calc(var(--ggm-right) + var(--ggm-tool) + 12px); z-index: 961; max-width: min(230px, 60vw); padding: 9px 13px; border-radius: 14px; background: var(--ggm-grad); color: #fff; font-family: 'Lilita One', cursive; font-size: 0.85rem; letter-spacing: 0.4px; line-height: 1.3; box-shadow: var(--ggm-glow); opacity: 0; transform: translateX(10px); transition: opacity 0.35s ease, transform 0.35s var(--ggm-ease); } html.ggm #ggm-coach::after { content: ''; position: absolute; top: 13px; right: -6px; border: 6px solid transparent; border-right: 0; border-left-color: #a855f7; } html.ggm #ggm-coach.show { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.ggm body #overlay, html.ggm body #minimap, html.ggm #ggm-map-toggle, html.ggm #ggm-peek, html.ggm .ggm-rh-phone { transition-duration: 0.01s !important; animation: none !important; } }