/* ================================================================== * * @jamunlabs/gameu-shell-v1 — controller.css * * V2 phone-controller chrome stylesheet for the gameu platform. * * * * Sibling to lobby.css in the same package; both load on top of * * @jamunlabs/gameu-sdk's gameu-theme-v1.css. This sheet uses the * * theme's design tokens (--gameu-cyan, --gameu-halftone-color, * * --gameu-navy, --gameu-yellow, fonts) and never redefines them. * * Load the theme first; this sheet will not render correctly * * without it. * * * * Sections (in source order): * * 1. Page-init reset (html, body — halftone bg, zoom suppression) * * 2. Decorative corner z-stacking override * * 3. Root layout container (#root flex column) * * 4. Status banner (#status — connecting/error chrome) * * 5. Gesture pad surface (#pad — recognizer-owned region) * * * * This package does NOT ship per-template render styles. Today * * those live in `crates/gameu-runtime/src/join/render.ts` as inline * * `style.cssText` strings; their migration into class-based styles * * is a planned follow-up. See CONTRIBUTING.md. * * ================================================================== */ /* ============================================================ 1. PAGE-INIT RESET — halftone stage + zoom suppression ============================================================ `touch-action: pan-x pan-y` on body suppresses pinch-zoom (per spec, `manipulation` actually means `pan-x pan-y pinch-zoom` — it ALLOWS pinch-zoom, contrary to the comment that used to live here). Form elements (input, button) still receive native focus / soft-keyboard / click events because those go through the click event path, not touch-action. The gesture pad (#pad) overrides to `none` for itself so the recognizer owns all gestures inside the pad — child widgets opt back in via inline touch-action. Q182: cyan halftone stage from the theme. Replaces the prior #0b1020 dark navy. The .gameu-corner siblings on render yellow lightning bolts in three corners. */ html, body { margin: 0; padding: 0; height: 100%; background: var(--gameu-cyan, #0FB7E8); background-image: radial-gradient(circle at 14px 14px, var(--gameu-halftone-color, rgba(255,243,150,0.32)) 1.6px, transparent 2px), radial-gradient(circle at 0 0, var(--gameu-halftone-color-faint, rgba(255,243,150,0.14)) 1px, transparent 2px); background-size: 22px 22px, 14px 14px; color: var(--gameu-navy, #11173F); font-family: var(--gameu-font-display, 'Lilita One', system-ui, sans-serif); overflow: hidden; touch-action: pan-x pan-y; -webkit-tap-highlight-color: transparent; /* iOS Safari: pin the page; some Safari versions still respond * to trackpad / two-finger zoom even with the viewport meta + * touch-action set. The gesturestart preventDefault in the page * boot script kills that path; this declaration is the * belt-and-suspenders. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* ============================================================ 2. DECORATIVE CORNER ACCENTS — z-stacking ============================================================ The phone variant is mounted as siblings of the root. Behind the interactive layer so taps still reach the gesture pad. */ body > .gameu-corner { z-index: 0; } /* ============================================================ 3. ROOT LAYOUT — #root flex column ============================================================ */ #root { position: relative; z-index: 2; display: flex; flex-direction: column; height: 100%; } /* ============================================================ 4. STATUS BANNER — connecting / error transient surface ============================================================ Hidden by default; the V2 shell flips display:flex when the shell is in a transient connecting / error state. */ #status { padding: 8px 14px; color: var(--gameu-navy); background: var(--gameu-yellow); border-bottom: 4px solid var(--gameu-navy); font-family: var(--gameu-font-button); font-size: 12px; letter-spacing: 1.5px; display: none; } /* ============================================================ 5. GESTURE PAD — recognizer-owned region ============================================================ The recognizer owns gesture taps inside the pad surface itself; interactive child elements (form input, picker buttons) opt back in by setting inline touch-action + pointer-events themselves. */ #pad { flex: 1; position: relative; background: transparent; touch-action: none; }