* { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; transition: background-color 80ms linear; } /* Konec show – pomalý fade do černé (2 s). Třída se přidá na . */ body.show-ended { background-color: #000 !important; transition: background-color 2s ease-out; } /* ------------------------------------------------------------------------- Waiting screen – fanoušek dorazil před naplánovaným startem show. Jemné sinusoidní pulzování pozadí (#000 ↔ #1a1a1a) přes CSS animaci. ------------------------------------------------------------------------- */ #waiting-screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.6rem; background: #000; color: rgba(255,255,255,0.6); font-family: sans-serif; text-align: center; animation: waiting-pulse 3s ease-in-out infinite; } #waiting-screen.hidden { display: none; } #waiting-text { font-size: 1.4rem; letter-spacing: 0.04em; } #waiting-countdown { font-size: 3.4rem; font-weight: bold; font-variant-numeric: tabular-nums; letter-spacing: 0.05em; } @keyframes waiting-pulse { 0% { background-color: #000000; } 50% { background-color: #1a1a1a; } 100% { background-color: #000000; } } /* ------------------------------------------------------------------------- Goodbye screen – show s koncovou podmínkou (počet opakování / čas) doběhla. Poděkování + CTA zpět na homepage. Jemný fade-in přes opacity. ------------------------------------------------------------------------- */ #goodbye-screen { position: fixed; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; background: #000; color: rgba(255,255,255,0.85); font-family: sans-serif; text-align: center; animation: goodbye-in 1.5s ease-out both; } #goodbye-screen.hidden { display: none; } #goodbye-title { font-size: 2rem; font-weight: bold; letter-spacing: 0.04em; } #goodbye-text { font-size: 1.1rem; line-height: 1.5; opacity: 0.7; max-width: 28rem; } #goodbye-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.6rem; padding: 0.7rem 1.6rem; border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; background: rgba(255,255,255,0.1); color: #fff; font-size: 1rem; font-weight: bold; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 150ms, border-color 150ms; } #goodbye-cta:active { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.7); } @keyframes goodbye-in { from { opacity: 0; } to { opacity: 1; } } /* ------------------------------------------------------------------------- Winner screen – "zlaté odhalení" pro vylosovaného výherce. Překryje vše (z-index nad goodbye/controls), zobrazí se od claimu a zůstává do konce show. ------------------------------------------------------------------------- */ #winner-screen { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem; padding: 2rem; text-align: center; color: #3a2a00; font-family: sans-serif; background: radial-gradient(circle at 50% 35%, #fff6cf 0%, #ffd84d 38%, #f5a623 100%); animation: winner-in 0.6s ease-out both, winner-glow 2.2s ease-in-out infinite; } #winner-screen.hidden { display: none; } #winner-title { font-size: 2.4rem; font-weight: 900; letter-spacing: 0.04em; text-shadow: 0 2px 0 rgba(255,255,255,0.5); } #winner-sub { font-size: 1.05rem; opacity: 0.8; max-width: 22rem; } #winner-code { margin-top: 0.4rem; padding: 0.6rem 1.4rem; border-radius: 12px; background: rgba(0,0,0,0.82); color: #ffe66d; font-size: 2.6rem; font-weight: bold; letter-spacing: 0.12em; font-variant-numeric: tabular-nums; } @keyframes winner-in { from { opacity: 0; transform: scale(0.92); } to { opacity: 1; transform: scale(1); } } @keyframes winner-glow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.12); } } /* Atribut `hidden` musí přebít autorské `display: …` (jinak ho každé takové pravidlo umlčí – např. `#sponsor-cta` níž svítilo jako PRÁZDNÉ tlačítko, když sponzor neměl odkaz). Stejné pravidlo má i admin Dashboard/play.latte. */ [hidden] { display: none !important; } /* ------------------------------------------------------------------------- Sponsor screen – reklamní/sponzorský blok na konci show (jen pro NEvýherce). Nahrazuje goodbye. z-index mezi goodbye (10) a winner (20). ------------------------------------------------------------------------- */ #sponsor-screen { position: fixed; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2rem; background: #000; color: rgba(255,255,255,0.9); font-family: sans-serif; text-align: center; animation: goodbye-in 1.2s ease-out both; } #sponsor-screen.hidden { display: none; } #sponsor-ended-note { font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; } #sponsor-title { font-size: 1.8rem; font-weight: bold; letter-spacing: 0.03em; } #sponsor-image { max-width: min(88vw, 520px); max-height: 50vh; object-fit: contain; border-radius: 10px; } #sponsor-text { font-size: 1.05rem; line-height: 1.5; opacity: 0.8; max-width: 30rem; } #sponsor-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0.4rem; padding: 0.7rem 1.6rem; border: 1px solid rgba(255,255,255,0.4); border-radius: 8px; background: rgba(255,255,255,0.1); color: #fff; font-size: 1rem; font-weight: bold; text-decoration: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 150ms, border-color 150ms; } #sponsor-cta:active { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.7); } /* Status / titulek fáze / časy – ukotveno dole, těsně NAD názvem scénáře. */ #overlay { position: fixed; left: 0; right: 0; bottom: calc(2.5rem + env(safe-area-inset-bottom, 0)); display: flex; flex-direction: column; align-items: center; color: rgba(255,255,255,0.9); font-family: sans-serif; text-align: center; gap: 0.4rem; pointer-events: none; } #status { font-size: 1.1rem; font-weight: bold; letter-spacing: 0.05em; text-shadow: 0 1px 4px rgba(0,0,0,0.8); } #debug { font-size: 0.72rem; opacity: 0.55; line-height: 1.6; text-shadow: 0 1px 3px rgba(0,0,0,0.9); } #phase-label { font-size: 0.9rem; opacity: 0.7; text-shadow: 0 1px 3px rgba(0,0,0,0.9); } /* ------------------------------------------------------------------------- Název show – nenápadný šedý titulek u dolního okraje. Žádné ovládací prvky; fullscreen se zapíná klepnutím kamkoli na plochu (app.js). pointer-events vypnuté, aby ani přes název neprošel klik jinam než na dokument. ------------------------------------------------------------------------- */ #show-name { position: fixed; left: 0; right: 0; bottom: calc(0.7rem + env(safe-area-inset-bottom, 0)); text-align: center; font-family: sans-serif; font-size: 0.8rem; letter-spacing: 0.03em; color: rgba(255,255,255,0.35); text-shadow: 0 1px 3px rgba(0,0,0,0.8); pointer-events: none; user-select: none; } /* ------------------------------------------------------------------------- Fullscreen tlačítko – velký, hodně průhledný terč uprostřed plochy (bez šedého pruhu). Ikonka se přepíná expand ↔ collapse (app.js onFullscreenChange). Klepnutí kamkoli na plochu fullscreen taky zapne; tohle je viditelný ovladač i cesta ven. z-index 5 = nad barevnou plochou, ale POD pomocnými obrazovkami (waiting/ended/winner/sponsor mají opaque inset:0), takže je přes ně schované a nepřekrývá jejich vycentrovaný obsah. ------------------------------------------------------------------------- */ #fullscreen-btn { position: fixed; left: 50%; bottom: calc(6rem + env(safe-area-inset-bottom, 0)); transform: translateX(-50%); z-index: 5; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; background: rgba(0,0,0,0.15); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); color: rgba(255,255,255,0.7); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: background 150ms, color 150ms, border-color 150ms; } #fullscreen-btn:active { background: rgba(0,0,0,0.3); border-color: rgba(255,255,255,0.4); color: #fff; } #fullscreen-btn.active { border-color: rgba(255,255,255,0.35); color: #fff; }