/* Phone frame size — width fixed, height taller for less vertical cramping */ :root { --shell-width: 390px; --shell-height: 920px; --shell-padding: 8px; } /* Desktop: centered phone frame */ html { height: 100%; overflow: hidden; background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 55%, #0f172a 100%); } body { margin: 0; min-height: 100%; height: 100%; overflow: hidden; display: flex; justify-content: center; align-items: center; padding: var(--shell-padding); box-sizing: border-box; } #mobile-shell { position: relative; width: var(--shell-width); height: min(var(--shell-height), calc(100vh - var(--shell-padding) * 2)); max-width: calc(100vw - var(--shell-padding) * 2); max-height: calc(100vh - var(--shell-padding) * 2); border-radius: 28px; overflow: hidden; background: #000; isolation: isolate; transform: translateZ(0); box-shadow: 0 0 0 10px #1f2937, 0 0 0 11px #374151, 0 25px 60px rgba(0, 0, 0, 0.55); } #flutter_app { position: relative; width: 100%; height: 100%; overflow: hidden; } /* Keep every Flutter layer clipped to the phone shell */ #mobile-shell flt-glass-pane, #mobile-shell flt-semantics-host, #mobile-shell flt-scene-host, #mobile-shell flutter-view, #flutter_app flt-glass-pane, #flutter_app flt-semantics-host, #flutter_app flt-scene-host, #flutter_app flutter-view, #flutter_app canvas { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; transform: none !important; } /* Fallback if Flutter still attaches layers to */ body > flt-glass-pane, body > flt-semantics-host, body > flt-scene-host, body > flutter-view { position: fixed !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; width: var(--shell-width) !important; height: min(var(--shell-height), calc(100vh - var(--shell-padding) * 2)) !important; max-width: calc(100vw - var(--shell-padding) * 2) !important; max-height: calc(100vh - var(--shell-padding) * 2) !important; border-radius: 28px; overflow: hidden !important; } /* Real phones: use full screen, no frame */ @media (max-width: 480px) { html { background: #000; } body { padding: 0; align-items: stretch; } #mobile-shell { width: 100%; height: 100dvh; max-width: none; max-height: none; border-radius: 0; box-shadow: none; background: transparent; } body > flt-glass-pane, body > flt-semantics-host, body > flt-scene-host, body > flutter-view { left: 0 !important; top: 0 !important; transform: none !important; width: 100% !important; height: 100dvh !important; max-width: none !important; max-height: none !important; border-radius: 0; } }