/* Game Journeys styles. Loaded AFTER tailwind.css in index.html so these rules win where needed. All classes are namespaced with `gj-` to avoid collisions. */ /* Basic typography for sanitized rich-text (intro/history/evidence/reveal/alibi). */ .gj-prose p { margin: 0 0 0.6em; } .gj-prose p:last-child { margin-bottom: 0; } .gj-prose ul, .gj-prose ol { margin: 0 0 0.6em 1.2em; } .gj-prose ul { list-style: disc; } .gj-prose ol { list-style: decimal; } .gj-prose li { margin: 0.15em 0; } .gj-prose a { color: #0284c7; text-decoration: underline; } .gj-prose b, .gj-prose strong { font-weight: 700; } .gj-prose img { max-width: 100%; height: auto; display: block; border-radius: 8px; margin: 10px 0; } .gj-prose figure { margin: 10px 0; } .gj-prose figcaption { font-size: 0.78em; opacity: 0.7; text-align: center; margin-top: 4px; } .gj-prose h1, .gj-prose h2, .gj-prose h3, .gj-prose h4 { font-weight: 700; line-height: 1.25; margin: 0.4em 0 0.3em; } .gj-prose h1 { font-size: 1.35em; } .gj-prose h2 { font-size: 1.2em; } .gj-prose h3 { font-size: 1.08em; } .gj-prose blockquote { margin: 0.6em 0; padding: 0.3em 0 0.3em 0.8em; border-left: 3px solid currentColor; opacity: 0.85; } /* Dark-theme variant (game journey screens) */ .gj-prose.gj-dark a { color: #c4b5fd; } /* ---- Then & Now overlay (portaled to , full-screen takeover) ---- */ .gj-overlay { position: fixed; inset: 0; z-index: 2147483000; /* above bottom nav and everything else */ background: #000; display: flex; flex-direction: column; } .gj-overlay-top { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: calc(env(safe-area-inset-top, 0px) + 10px) 14px 10px; background: rgba(0, 0, 0, 0.9); } .gj-overlay-close { border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); color: #fff; font-weight: 700; font-size: 0.85rem; padding: 8px 14px; border-radius: 999px; cursor: pointer; } .gj-overlay-title { font-size: 0.85rem; font-weight: 600; text-align: right; color: rgba(255, 255, 255, 0.9); max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .gj-overlay-hint { flex-shrink: 0; padding: 8px 14px; font-size: 0.74rem; line-height: 1.4; color: rgba(255, 255, 255, 0.85); background: rgba(0, 0, 0, 0.55); text-align: center; } .gj-overlay-stage { position: relative; flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center; } .gj-overlay-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .gj-overlay-img { position: relative; max-width: 92%; max-height: 92%; object-fit: contain; user-select: none; -webkit-user-select: none; will-change: transform, opacity; } .gj-overlay-controls { flex-shrink: 0; padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 16px); background: rgba(0, 0, 0, 0.85); color: #fff; display: flex; flex-direction: column; gap: 12px; } .gj-overlay-slider { display: flex; align-items: center; gap: 10px; font-size: 0.72rem; color: rgba(255, 255, 255, 0.8); } .gj-overlay-slider input[type="range"] { flex: 1; accent-color: #8b5cf6; } .gj-overlay-reset { border: 1px solid rgba(255, 255, 255, 0.4); background: transparent; color: #fff; font-size: 0.7rem; padding: 4px 10px; border-radius: 999px; cursor: pointer; } .gj-overlay-note { font-size: 0.78rem; color: rgba(255, 255, 255, 0.8); text-align: center; line-height: 1.4; } .gj-btn { border: none; border-radius: 12px; padding: 12px 16px; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .gj-btn-light { background: #fff; color: #111827; }