/* ═══════════════════════════════════════════════════════════════════════════ S.A.F — THE COIN GAME | coin.css Loaded in via: Complements the inline game styles already in index.html. Contains: overlay polish, result-stats box, scroll-area fix, mobile tweaks. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Overlay background texture ─────────────────────────────────────────── */ #coin-game-overlay::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( -45deg, rgba(201,168,76,0.012) 0px, rgba(201,168,76,0.012) 1px, transparent 1px, transparent 48px ); pointer-events: none; z-index: 0; } #coin-game-canvas { position: relative; z-index: 1; } /* ── Result panel — centred (overrides the bottom-40px in the inline block) */ #coin-result-panel { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95); bottom: auto; z-index: 9850; max-width: 360px; width: calc(100% - 48px); opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } #coin-result-panel.active { opacity: 1; transform: translate(-50%, -50%) scale(1); animation: coinResultPop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; } @keyframes coinResultPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4) rotate(-4deg); } 55% { opacity: 1; transform: translate(-50%, -50%) scale(1.05) rotate(1.5deg); } 75% { transform: translate(-50%, -50%) scale(0.97) rotate(-0.5deg); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); } } /* ── Result stats grid ──────────────────────────────────────────────────── */ .coin-result-stats { background: rgba(201,168,76,0.05); border: 1px solid rgba(201,168,76,0.18); border-radius: 12px; padding: 14px 18px; margin-bottom: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; } .crs-row { display: flex; justify-content: space-between; align-items: center; font-family: 'DM Sans', sans-serif; font-size: 12px; color: rgba(200,185,160,0.65); } .crs-row b { font-family: 'Cinzel', Georgia, serif; font-size: 14px; font-weight: 700; color: #c9a84c; text-shadow: 0 0 10px rgba(201,168,76,0.25); } /* ── Close button — ensure it sits above the canvas ────────────────────── */ .coin-game-close-btn { z-index: 9900; } /* ── Result panel backdrop blur ─────────────────────────────────────────── */ #coin-result-panel { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* ── Game lobby card — bottom bar accent ───────────────────────────────── */ .game-lobby-card { transition: border-color 0.25s ease, box-shadow 0.25s ease; } .game-lobby-card:hover { border-color: rgba(201,168,76,0.38); box-shadow: 0 12px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(201,168,76,0.15); } /* ── Game mode button — active glow fix ─────────────────────────────────── */ .game-mode-btn.active { box-shadow: 0 0 0 1px rgba(201,168,76,0.35), 0 8px 28px rgba(201,168,76,0.22), inset 0 1px 0 rgba(201,168,76,0.12); } .gmb-title { transition: color 0.2s; } /* ── Canvas crisp rendering ─────────────────────────────────────────────── */ #coin-game-canvas { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } /* ── Prevent body scroll bleed-through on iOS ───────────────────────────── */ #coin-game-overlay.active { overscroll-behavior: none; touch-action: none; } /* ── Stats panel — ensure above canvas but below close btn ─────────────── */ #coin-stats-panel { z-index: 9850 !important; } /* ── Mobile: result panel takes full width ──────────────────────────────── */ @media (max-width: 520px) { #coin-result-panel { width: calc(100% - 28px); padding: 22px 20px; max-width: none; } .coin-result-stats { grid-template-columns: 1fr; gap: 8px; } .coin-result-msg { font-size: 20px; } }