/* ============================================================================ aicam-modern.css — broadcast-grade / arcade reskin for aicam.html (Fan Cam AI, fan mobile). The aicam counterpart of fxcam-modern.css: layered ON TOP of aicam.css, targets real elements only, changes NO ids/markup, and is fully reversible by removing the . No JS behaviour is touched. Every typeface, size and colour is sourced from the per-game JSON theme (--font-family / --secondary-font-family / --font-size / --secondary-font-size / --*-color, set on by the theming block). The values below are only FALLBACKS — the client theme always wins. Tokens live on so they read those body-set vars, exactly like fxcam. ============================================================================ */ body { /* Fallback stack must sit OUTSIDE var() — the themed --font-family is always set, so a stack placed as the var() default is never used. Custom brand fonts often lack accented glyphs (é, à…); the trailing system stack lets those characters fall back instead of dropping (e.g. placeholder "Prénom" rendering as "Pr"). */ --fx-sans: var(--font-family, "Archivo"), system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fx-mono: var(--secondary-font-family, "IBM Plex Mono"), ui-monospace, "SF Mono", Menlo, monospace; --fx-base: var(--font-size, 1rem); --fx-label: var(--secondary-font-size, 0.72rem); --fx-ink: var(--background-color, #0b0e14); --fx-text: var(--primary-color, #eceef2); --fx-amber: var(--secondary-color, #ffb02e); --fx-tally: #ff2e3f; /* semantic LIVE — not themeable */ --fx-ok: #3ddc84; --fx-dim: color-mix(in srgb, var(--fx-text) 55%, transparent); --fx-panel: color-mix(in srgb, var(--fx-ink) 86%, var(--fx-text) 6%); --fx-line: color-mix(in srgb, var(--fx-text) 16%, transparent); --fx-glass: color-mix(in srgb, var(--fx-ink) 58%, transparent); --fx-ink-2: color-mix(in srgb, var(--fx-ink) 92%, var(--fx-text) 4%); --fx-neon: var(--fx-amber); --fx-neon-2: color-mix(in srgb, var(--fx-amber) 40%, #00e5ff); /* cool arcade counter-glow */ color: var(--fx-text); font-family: var(--fx-sans); -webkit-font-smoothing: antialiased; } /* ---- Film overlays (same pair main.css gives fxcam). Fixed, pointer-events none, so they never block a tap. The vignette also carries the amber "house light" glow at the top; it is layered ON TOP of aicam.css's JSON background image rather than replacing it, so per-game backgrounds still show through. */ .grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.032'/%3E%3C/svg%3E"); background-size: 512px; opacity: .7; } .vignette { position: fixed; inset: 0; z-index: 2; pointer-events: none; background: radial-gradient(120% 60% at 50% -8%, color-mix(in srgb, var(--fx-amber) 10%, transparent), transparent 55%), radial-gradient(ellipse at 50% 0%, transparent 50%, rgba(0, 0, 0, .55) 100%); } body.mobile-frame .grain, body.mobile-frame .vignette { width: 430px; left: 50%; transform: translateX(-50%); } /* Inside the desktop phone frame, the logo's 80vw cap (aicam.css) is viewport- wide and breaks out of the 430px frame — clamp it to the frame content box. */ body.mobile-frame #headerLogo { max-width: 100%; } /* ---- Brand wordmark → neon marquee ---- */ .brand { color: var(--fx-text); text-shadow: 0 0 10px color-mix(in srgb, var(--fx-neon) 45%, transparent); } #headerLogo { filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .5)); } /* ---- Join screen: the nickname form becomes a clean glass card ---- */ .stage { background: var(--fx-panel); border: 1px solid var(--fx-line); border-radius: 18px; box-shadow: 0 18px 50px rgba(0, 0, 0, .45); padding: 20px 16px; } .stage h1 { color: var(--fx-text); } .stage p.sub, .consent, .privacy summary, .privacy p { color: var(--fx-dim); } .privacy a { color: var(--fx-amber); } .consent input { accent-color: var(--fx-amber); } input[type=text] { background: var(--fx-ink-2); border: 1px solid var(--fx-line); border-radius: 12px; color: var(--fx-text); /* The name field must use a well-behaved SYSTEM font, NOT the themed brand font (--fx-sans → --font-family). Some client display fonts (e.g. AgencyFB-Bold) ship broken GPOS positioning for accented composite glyphs: any text containing é/à/ê/… gets shattered (placeholder "Votre prénom" renders as "Votre pr", and a fan typing "Rémy" sees it mangled too). A system stack renders accents correctly and keeps the field readable. */ font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Also cap the themed size — games may set --secondary-font-size to jumbotron scale (e.g. 2.5rem), which is oversized for a single-line field. */ font-size: min(var(--secondary-font-size, .75rem), 1.2rem); transition: border-color .2s ease, box-shadow .2s ease; } input[type=text]:focus { outline: none; border-color: var(--fx-amber); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-amber) 22%, transparent); } /* ---- Camera as the hero: arcade CRT with neon bezel, scanlines, inner vignette. STATIC glow — animating box-shadow forces a full repaint every frame and can exhaust the GPU on a busy phone (same rule fxcam follows). ---- */ .cam { border: 2px solid var(--fx-neon) !important; box-shadow: 0 0 14px color-mix(in srgb, var(--fx-neon) 65%, transparent), 0 0 44px color-mix(in srgb, var(--fx-neon) 28%, transparent), inset 0 0 60px rgba(0, 0, 0, .55) !important; } .cam::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: 16px; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px), radial-gradient(120% 100% at 50% 50%, transparent 62%, rgba(0, 0, 0, .4) 100%); } /* LIVE tally wins over the neon bezel (red cabinet light). */ .cam.live { border-color: var(--fx-tally) !important; box-shadow: 0 0 0 2px var(--fx-tally), 0 0 16px var(--fx-tally), 0 0 40px rgba(255, 46, 63, .4), inset 0 0 60px rgba(0, 0, 0, .5) !important; } /* ---- Camera badge → glass state chip; tally + arcade flicker when LIVE ---- */ .cam .badge { font-family: var(--fx-mono); font-size: var(--fx-label); letter-spacing: .18em; text-transform: uppercase; background: var(--fx-glass); border: 1px solid var(--fx-line); color: var(--fx-text); border-radius: 999px; padding: 5px 11px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .cam.live .badge { color: #fff; border-color: rgba(255, 46, 63, .55); background: rgba(255, 46, 63, .16); box-shadow: 0 0 10px var(--fx-tally), 0 0 22px color-mix(in srgb, var(--fx-tally) 45%, transparent); text-shadow: 0 0 8px var(--fx-tally); animation: fxFlicker 4s steps(1) infinite; } /* ---- State panels → glass, neon-edged ---- */ .queue-card, .live-card, .queue-card.ready { background: var(--fx-panel); border: 1px solid var(--fx-line); border-radius: 16px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-neon) 12%, transparent), 0 18px 50px rgba(0, 0, 0, .45); } .live-card { border-color: rgba(255, 46, 63, .5) !important; background: linear-gradient(180deg, rgba(255, 46, 63, .14), var(--fx-panel)) !important; box-shadow: 0 0 0 1px rgba(255, 46, 63, .35), 0 0 34px rgba(255, 46, 63, .25) !important; } .queue-card.ready { border-color: rgba(61, 220, 132, .55) !important; box-shadow: 0 0 0 1px rgba(61, 220, 132, .3), 0 0 30px rgba(61, 220, 132, .22) !important; } /* ---- Broadcast typography for the big/mono lines ---- */ .big { font-family: var(--fx-sans); color: var(--fx-text); text-shadow: 0 0 10px color-mix(in srgb, var(--fx-neon) 35%, transparent); } .live-card .big { color: var(--fx-tally); text-shadow: 0 0 12px var(--fx-tally), 0 0 26px rgba(255, 46, 63, .4); } .queue-card.ready .big { color: var(--fx-ok); text-shadow: 0 0 12px color-mix(in srgb, var(--fx-ok) 55%, transparent); } .mono { font-family: var(--fx-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--fx-dim); } .pulse-dot { background: var(--fx-ok); box-shadow: 0 0 10px color-mix(in srgb, var(--fx-ok) 70%, transparent); } /* Self-view caption (already inline-styled) — keep it on-brand mono. */ #selfViewCap { color: var(--fx-text); text-shadow: 0 0 8px color-mix(in srgb, var(--fx-neon) 40%, transparent); } #selfView, #myVideo { border-radius: 16px; box-shadow: 0 0 0 1px var(--fx-line), 0 10px 40px rgba(0, 0, 0, .5); } /* ---- Chunky glowing arcade CTA (a hard bottom edge = the "cabinet key") ---- */ button.cta { background: rgba(255, 255, 255, .15) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, .3) !important; box-shadow: 0 4px 24px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .1) !important; animation: pulseGlow 3s ease-in-out infinite; } button.cta:active { transform: translateY(4px); box-shadow: 0 2px 0 color-mix(in srgb, var(--fx-neon) 45%, #000), 0 0 14px color-mix(in srgb, var(--fx-neon) 55%, transparent); } button.cta:disabled { box-shadow: none; filter: saturate(.6); opacity: .45; } /* Secondary / text actions → glass + mono ---- */ button.leave { font-family: var(--fx-mono); letter-spacing: .08em; text-transform: uppercase; background: var(--fx-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--fx-line); color: var(--fx-text); border-radius: 999px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fx-neon) 22%, transparent); transition: border-color .2s ease, transform .12s ease; } button.leave:active { transform: scale(.97); } button.leave:hover { border-color: var(--fx-amber); } .text-link { color: var(--fx-dim); } .text-link:hover { color: var(--fx-amber); } /* ---- Motion / arcade flicker ---- */ @keyframes fxFlicker { 0%, 92%, 100% { opacity: 1; } 94% { opacity: .72; } 96% { opacity: 1; } 98% { opacity: .85; } } @media (prefers-reduced-motion: reduce) { .cam, .cam.live .badge { animation: none !important; } }