/* ═══════════════════════════════════════════════════ COMMI #3 — Boss Pong Battle (grafik.php only) Design: black base, white type, single gold accent ═══════════════════════════════════════════════════ */ /* Hide everything on mobile / tablet */ @media (max-width: 1023px) { .c3-boss-menu, .c3-pong-overlay, .c3-result-screen { display: none !important; } } /* Scroll lock while an overlay is open — must sit on BOTH and , body alone doesn't stop page scroll */ html.c3-scroll-lock, body.c3-scroll-lock { overflow: hidden; } /* ── Green dot clickability hint ── */ #commi3-dot { cursor: pointer; transition: transform 0.2s ease, box-shadow 0.3s ease !important; } #commi3-dot:hover { transform: scale(1.7) !important; box-shadow: 0 0 18px #2ecc71, 0 0 40px rgba(46,204,113,0.6) !important; animation: none !important; } #commi3-dot.collected-glow { box-shadow: 0 0 12px rgba(255,215,0,0.8), 0 0 28px rgba(255,215,0,0.35) !important; } /* ══════════════════════════════════════════════════ SHARED OVERLAY BASE ══════════════════════════════════════════════════ */ .c3-boss-menu, .c3-pong-overlay, .c3-result-screen { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; background: rgba(10, 10, 10, 0.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-family: 'Inter', sans-serif; transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .c3-boss-menu.open, .c3-pong-overlay.open, .c3-result-screen.open { opacity: 1; pointer-events: all; } /* The arena sits on near-solid black */ .c3-pong-overlay { background: rgba(8, 8, 9, 0.97); } /* ── Shared button primitives ── */ .c3-pill-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 34px; border: none; border-radius: 999px; background: #ffffff; color: #0b0b0d; font-family: 'Inter', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .c3-pill-btn:hover { transform: scale(1.045); box-shadow: 0 0 0 1px rgba(255,255,255,0.25), 0 8px 40px rgba(255,255,255,0.22); } .c3-ghost-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 30px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: transparent; color: rgba(255,255,255,0.72); font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease; } .c3-ghost-btn:hover { border-color: rgba(255,255,255,0.35); color: #ffffff; background: rgba(255,255,255,0.05); } /* ══════════════════════════════════════════════════ 1. BOSS MENU — split card ══════════════════════════════════════════════════ */ .c3-menu-card { position: relative; display: grid; grid-template-columns: 320px 1fr; grid-template-rows: minmax(0, 1fr); width: min(880px, calc(100vw - 64px)); max-height: calc(100vh - 56px); background: #101010; border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; overflow: hidden; box-shadow: 0 40px 120px rgba(0,0,0,0.7); } .c3-boss-menu.open .c3-menu-card { animation: c3CardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes c3CardIn { from { opacity: 0; transform: scale(0.94) translateY(14px); } to { opacity: 1; transform: scale(1) translateY(0); } } .c3-menu-close { position: absolute; top: 18px; right: 18px; z-index: 5; width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.6); cursor: pointer; transition: border-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1); } .c3-menu-close:hover { border-color: rgba(255,255,255,0.4); color: #ffffff; transform: rotate(90deg); } /* ── LEFT: boss showcase ── */ .c3-showcase { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 44px 28px; background: radial-gradient(circle at 50% 38%, rgba(255,215,0,0.07), transparent 62%), #0b0b0d; border-right: 1px solid rgba(255,255,255,0.08); text-align: center; overflow: hidden; } .c3-showcase-badge { padding: 7px 16px; border: 1px solid rgba(255,215,0,0.35); border-radius: 999px; color: #ffd700; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; background: rgba(255,215,0,0.06); } .c3-boss-stage { position: relative; width: 190px; height: 190px; display: flex; align-items: center; justify-content: center; } .c3-boss-aura { position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, rgba(255,215,0,0.22), rgba(255,215,0,0.05) 55%, transparent 72%); animation: c3AuraPulse 3.2s ease-in-out infinite; } @keyframes c3AuraPulse { 0%, 100% { transform: scale(0.92); opacity: 0.7; } 50% { transform: scale(1.08); opacity: 1; } } .c3-boss-orbit { position: absolute; border-radius: 50%; border: 1px solid rgba(255,215,0,0.28); } .c3-boss-orbit-1 { inset: 8px; border-style: dashed; animation: c3OrbitSpin 22s linear infinite; } .c3-boss-orbit-2 { inset: 0; border-color: rgba(255,255,255,0.08); border-top-color: rgba(255,215,0,0.5); animation: c3OrbitSpin 9s linear infinite reverse; } @keyframes c3OrbitSpin { to { transform: rotate(360deg); } } .c3-boss-avatar { position: relative; z-index: 2; width: 108px; height: 108px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #161616; border: 1px solid rgba(255,215,0,0.3); box-shadow: 0 0 46px rgba(255,215,0,0.22), inset 0 0 24px rgba(255,215,0,0.06); } .c3-boss-menu.open .c3-boss-avatar { animation: c3BossDrop 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both; } @keyframes c3BossDrop { from { opacity: 0; transform: translateY(-26px) scale(0.85); } to { opacity: 1; transform: translateY(0) scale(1); } } .c3-boss-avatar img { width: 62px; height: auto; filter: drop-shadow(0 0 12px rgba(255,215,0,0.4)); } .c3-boss-ringwave { position: absolute; inset: 41px; border-radius: 50%; border: 1px solid rgba(255,215,0,0.7); opacity: 0; pointer-events: none; } .c3-boss-menu.open .c3-boss-ringwave { animation: c3RingWave 1s cubic-bezier(0.16, 1, 0.3, 1) 0.55s; } @keyframes c3RingWave { 0% { opacity: 0.9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.85); } } .c3-boss-particles { position: absolute; inset: -20px; pointer-events: none; } .c3-menu-particle { position: absolute; border-radius: 50%; animation: c3ParticleFloat 6s ease-in-out infinite; } @keyframes c3ParticleFloat { 0%, 100% { transform: translateY(0); opacity: 0; } 25% { opacity: 1; } 50% { transform: translateY(-34px); opacity: 0.55; } 75% { opacity: 0.9; } } .c3-boss-name { margin: 2px 0 0; color: #ffffff; font-size: 1.5rem; font-weight: 200; letter-spacing: 0.02em; } .c3-boss-taunt { margin: 0; color: rgba(255,255,255,0.55); font-size: 0.85rem; font-style: italic; line-height: 1.55; } .c3-boss-rule { display: inline-flex; align-items: center; gap: 7px; margin-top: 4px; color: rgba(255,255,255,0.4); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } /* ── RIGHT: setup ── */ .c3-setup { display: flex; flex-direction: column; gap: 20px; padding: 40px 36px 32px; overflow-y: auto; min-height: 0; } .c3-setup-block { display: flex; flex-direction: column; gap: 10px; } .c3-setup-label { color: rgba(255,255,255,0.45); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } /* Sinn cards */ .c3-sinn-grid { display: flex; flex-direction: column; gap: 8px; } .c3-sinn-card { position: relative; display: grid; grid-template-columns: 40px 1fr 118px; align-items: center; gap: 14px; padding: 10px 40px 10px 12px; background: #161616; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; cursor: pointer; text-align: left; font-family: 'Inter', sans-serif; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease; } .c3-sinn-card:hover { transform: translateY(-2px); border-color: rgba(255,255,255,0.2); background: #1a1a1a; } .c3-sinn-card.active { border-color: rgba(255,215,0,0.65); background: linear-gradient(120deg, rgba(255,215,0,0.09), rgba(255,215,0,0.02) 55%), #161616; box-shadow: 0 0 24px rgba(255,215,0,0.14), inset 0 0 0 1px rgba(255,215,0,0.12); } .c3-sinn-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.75); transition: color 0.3s ease, border-color 0.3s ease; } .c3-sinn-card.active .c3-sinn-icon { color: #ffd700; border-color: rgba(255,215,0,0.4); } .c3-sinn-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .c3-sinn-name { color: #ffffff; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .c3-sinn-ability { color: rgba(255,255,255,0.45); font-size: 0.68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .c3-sinn-stats { display: flex; flex-direction: column; gap: 4px; } .c3-stat { display: grid; grid-template-columns: 42px 1fr; align-items: center; gap: 7px; } .c3-stat-name { color: rgba(255,255,255,0.32); font-size: 0.52rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; } .c3-stat-bar { height: 3px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; } .c3-stat-fill { display: block; width: var(--v, 50%); height: 100%; border-radius: 2px; background: rgba(255,255,255,0.4); transition: background 0.3s ease; } .c3-sinn-card.active .c3-stat-fill { background: linear-gradient(90deg, #ccaa00, #ffd700); } .c3-sinn-check { position: absolute; top: 50%; right: 12px; transform: translateY(-50%) scale(0.4); width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(135deg, #fff6b3, #ffd700 55%, #ccaa00); color: #0b0b0d; opacity: 0; transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .c3-sinn-card.active .c3-sinn-check { opacity: 1; transform: translateY(-50%) scale(1); } /* Difficulty — segmented control */ .c3-diff-seg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; padding: 5px; background: #161616; border: 1px solid rgba(255,255,255,0.08); border-radius: 999px; } .c3-diff-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 8px; border: none; border-radius: 999px; background: transparent; color: rgba(255,255,255,0.5); font-family: 'Inter', sans-serif; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: background 0.3s cubic-bezier(0.16,1,0.3,1), color 0.3s ease; } .c3-diff-btn:hover { color: rgba(255,255,255,0.85); } .c3-diff-btn.active { background: #ffffff; color: #0b0b0d; } .c3-diff-flames { display: inline-flex; align-items: center; gap: 1px; color: currentColor; } .c3-diff-flames svg { display: block; } .c3-diff-name { white-space: nowrap; } /* Start button */ .c3-start-btn { display: flex; align-items: center; justify-content: center; gap: 11px; margin-top: 2px; padding: 17px 34px; border: none; border-radius: 999px; background: #ffffff; color: #0b0b0d; font-family: 'Inter', sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .c3-start-btn:hover { transform: scale(1.03); box-shadow: 0 0 0 1px rgba(255,255,255,0.3), 0 10px 44px rgba(255,255,255,0.25), 0 0 60px rgba(255,215,0,0.12); } .c3-start-btn:active { transform: scale(0.99); } /* ── Compact menu for small desktop displays ── Below ~760px viewport height the full-size card no longer fits (e.g. 1280x720 / 1366x768 laptops): shrink showcase + paddings, right column scrolls. */ @media (max-height: 760px) { .c3-menu-card { max-height: calc(100vh - 32px); } .c3-showcase { gap: 10px; padding: 26px 22px; } .c3-boss-stage { width: 140px; height: 140px; } .c3-boss-avatar { width: 84px; height: 84px; } .c3-boss-avatar img { width: 48px; } .c3-boss-aura { inset: 16px; } .c3-boss-ringwave { inset: 28px; } .c3-boss-name { font-size: 1.25rem; } .c3-boss-taunt { font-size: 0.78rem; } .c3-setup { gap: 14px; padding: 24px 26px 22px; } .c3-sinn-grid { gap: 6px; } .c3-sinn-card { padding: 8px 36px 8px 10px; } .c3-start-btn { padding: 14px 30px; } } @media (max-height: 600px) { .c3-menu-card { max-height: calc(100vh - 20px); } .c3-showcase { padding: 18px 20px; } .c3-boss-stage { display: none; } .c3-boss-name { margin-top: 8px; } } /* Narrow desktop windows: slimmer showcase column */ @media (max-width: 1200px) { .c3-menu-card { grid-template-columns: 280px 1fr; } } /* ══════════════════════════════════════════════════ 2. ARENA / GAME OVERLAY ══════════════════════════════════════════════════ */ .c3-canvas { position: absolute; inset: 0; width: 100%; height: 100%; } /* Arena frame + glowing corners (canvas walls sit at 14px) */ .c3-arena-frame { position: absolute; inset: 8px; border: 1px solid rgba(255,255,255,0.08); border-radius: 20px; pointer-events: none; transition: border-color 0.5s ease, box-shadow 0.5s ease; } .c3-arena-frame.matchball { border-color: rgba(255,215,0,0.4); animation: c3MatchPulse 1.6s ease-in-out infinite; } @keyframes c3MatchPulse { 0%, 100% { box-shadow: inset 0 0 32px rgba(255,215,0,0.05), 0 0 0 rgba(255,215,0,0); } 50% { box-shadow: inset 0 0 60px rgba(255,215,0,0.13), 0 0 30px rgba(255,215,0,0.12); } } .c3-corner { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(255,255,255,0.3); filter: drop-shadow(0 0 6px rgba(255,255,255,0.35)); } .c3-arena-frame.matchball .c3-corner { border-color: rgba(255,215,0,0.75); filter: drop-shadow(0 0 8px rgba(255,215,0,0.55)); } .c3-corner-tl { top: -1px; left: -1px; border-right: none; border-bottom: none; border-top-left-radius: 20px; } .c3-corner-tr { top: -1px; right: -1px; border-left: none; border-bottom: none; border-top-right-radius: 20px; } .c3-corner-bl { bottom: -1px; left: -1px; border-right: none; border-top: none; border-bottom-left-radius: 20px; } .c3-corner-br { bottom: -1px; right: -1px; border-left: none; border-top: none; border-bottom-right-radius: 20px; } /* ── HUD ── */ .c3-hud { position: absolute; top: 26px; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-start; gap: 48px; pointer-events: none; z-index: 3; } .c3-hud-side { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 92px; } .c3-hud-label { color: rgba(255,255,255,0.45); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; } .c3-hud-boss .c3-hud-label { color: rgba(255,215,0,0.6); } .c3-hud-score { color: #ffffff; font-size: 3.4rem; font-weight: 200; line-height: 1; font-variant-numeric: tabular-nums; } .c3-hud-boss .c3-hud-score { background: linear-gradient(180deg, #fff6b3, #ffd700 60%, #ccaa00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .c3-hud-score.bump { animation: c3ScoreBump 0.32s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes c3ScoreBump { 0% { transform: scale(1); } 35% { transform: scale(1.28); } 100% { transform: scale(1); } } .c3-hud-mid { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 18px; } .c3-hud-vs { color: rgba(255,255,255,0.28); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.3em; } .c3-matchball-tag { padding: 4px 12px; border: 1px solid rgba(255,215,0,0.5); border-radius: 999px; color: #ffd700; font-size: 0.56rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; transform: translateY(-4px); transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); animation: none; } .c3-matchball-tag.show { opacity: 1; transform: translateY(0); animation: c3TagPulse 1.6s ease-in-out infinite; } @keyframes c3TagPulse { 0%, 100% { box-shadow: 0 0 0 rgba(255,215,0,0); } 50% { box-shadow: 0 0 16px rgba(255,215,0,0.35); } } .c3-pip-row { display: flex; gap: 6px; margin-top: 4px; } .c3-pip { width: 7px; height: 7px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.22); background: transparent; transition: background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.16,1,0.3,1); } .c3-pip.filled { background: linear-gradient(135deg, #fff6b3, #ffd700); border-color: rgba(255,215,0,0.8); box-shadow: 0 0 10px rgba(255,215,0,0.55); transform: scale(1.15); } /* ── Countdown ── */ .c3-countdown { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #ffffff; font-size: 7.5rem; font-weight: 100; letter-spacing: 0.04em; opacity: 0; pointer-events: none; z-index: 4; text-shadow: 0 0 60px rgba(255,255,255,0.3); } .c3-countdown.show { animation: c3Count 0.62s cubic-bezier(0.16, 1, 0.3, 1); } @keyframes c3Count { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); } 22% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 74% { opacity: 1; transform: translate(-50%, -50%) scale(0.97); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); } } /* ── Point banner ── */ .c3-point-banner { position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%) translateY(18px); padding: 13px 34px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.14); background: rgba(10,10,10,0.85); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0; pointer-events: none; z-index: 4; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .c3-point-banner.show { opacity: 1; transform: translate(-50%, -50%) translateY(0); } .c3-point-banner.player { color: #ffffff; box-shadow: 0 0 40px rgba(255,255,255,0.12); } .c3-point-banner.boss { color: #ffd700; border-color: rgba(255,215,0,0.4); box-shadow: 0 0 40px rgba(255,215,0,0.14); } /* ── Power-up activation banner ── */ .c3-pu-banner { position: absolute; top: 42%; left: 50%; transform: translate(-50%, -50%) scale(0.85); display: flex; align-items: center; gap: 12px; padding: 12px 26px; border-radius: 999px; border: 1px solid rgba(255,215,0,0.45); background: rgba(10,10,10,0.88); color: #fff6b3; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0; pointer-events: none; z-index: 4; box-shadow: 0 0 34px rgba(255,215,0,0.18); } .c3-pu-banner svg { width: 19px; height: 19px; color: #ffd700; } .c3-pu-banner.show { animation: c3PuBanner 1.3s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes c3PuBanner { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); } 14% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); } 22% { transform: translate(-50%, -50%) scale(1); } 78% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.96); } } /* ── Power-up HUD slot ── */ .c3-powerup-hud { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%) translateY(12px); display: flex; align-items: center; gap: 13px; padding: 11px 20px 11px 12px; border-radius: 999px; border: 1px solid rgba(255,215,0,0.35); background: rgba(16,16,16,0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; pointer-events: none; z-index: 3; transition: opacity 0.35s ease, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .c3-powerup-hud.has-powerup { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: all; cursor: pointer; } .c3-powerup-hud.armed { box-shadow: 0 0 26px rgba(255,215,0,0.2); } .c3-powerup-hud.denied { animation: c3Denied 0.3s ease; } @keyframes c3Denied { 0%, 100% { transform: translateX(-50%); } 30% { transform: translateX(calc(-50% - 6px)); } 65% { transform: translateX(calc(-50% + 6px)); } } .c3-pu-icon { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,215,0,0.09); border: 1px solid rgba(255,215,0,0.4); color: #ffd700; } .c3-pu-icon svg { width: 19px; height: 19px; } .c3-pu-info { display: flex; flex-direction: column; gap: 2px; } .c3-pu-name { color: #ffffff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; } .c3-pu-key { color: rgba(255,255,255,0.42); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; } .c3-pu-key kbd { display: inline-block; padding: 1px 7px; border: 1px solid rgba(255,255,255,0.22); border-bottom-width: 2px; border-radius: 5px; background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.75); font-family: 'Inter', sans-serif; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.1em; } .c3-pu-active-bar { display: none; width: 74px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1); overflow: hidden; } .c3-pu-progress { display: block; width: 100%; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #ccaa00, #ffd700, #fff6b3); box-shadow: 0 0 8px rgba(255,215,0,0.6); } /* ── Hint + quit ── */ .c3-pong-hint { position: absolute; bottom: 30px; left: 34px; color: rgba(255,255,255,0.3); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; pointer-events: none; z-index: 3; } .c3-pong-quit { position: absolute; bottom: 24px; right: 30px; padding: 11px 24px; border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; background: rgba(16,16,16,0.7); color: rgba(255,255,255,0.55); font-family: 'Inter', sans-serif; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; z-index: 3; transition: border-color 0.3s ease, color 0.3s ease; } .c3-pong-quit:hover { border-color: rgba(255,255,255,0.4); color: #ffffff; } /* ── Pause panel (ESC) ── */ .c3-pause-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(10,10,10,0.9); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; pointer-events: none; z-index: 6; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .c3-pause-panel.open { opacity: 1; pointer-events: all; } .c3-pause-card { display: flex; flex-direction: column; align-items: center; gap: 10px; width: min(400px, calc(100vw - 64px)); padding: 44px 40px 36px; background: #101010; border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; text-align: center; box-shadow: 0 40px 120px rgba(0,0,0,0.7); } .c3-pause-panel.open .c3-pause-card { animation: c3CardIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) both; } .c3-pause-card h3 { margin: 0; color: #ffffff; font-size: 1.6rem; font-weight: 200; } .c3-pause-card p { margin: 0 0 16px; color: rgba(255,255,255,0.5); font-size: 0.86rem; } .c3-pause-card .c3-pill-btn { width: 100%; } .c3-pause-card .c3-ghost-btn { width: 100%; } /* ══════════════════════════════════════════════════ 3. RESULT SCREENS ══════════════════════════════════════════════════ */ .c3-result-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(480px, calc(100vw - 64px)); padding: 52px 44px 42px; background: #101010; border: 1px solid rgba(255,255,255,0.08); border-radius: 24px; text-align: center; box-shadow: 0 40px 120px rgba(0,0,0,0.7); } .c3-result-screen.open .c3-result-card { animation: c3CardIn 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; } .c3-win .c3-result-card { border-color: rgba(255,215,0,0.25); box-shadow: 0 40px 120px rgba(0,0,0,0.7), 0 0 80px rgba(255,215,0,0.08); } .c3-lose .c3-result-icon { color: rgba(255,255,255,0.5); } .c3-result-icon { display: flex; align-items: center; justify-content: center; width: 84px; height: 84px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.03); color: rgba(255,255,255,0.65); margin-bottom: 6px; } .c3-result-icon-gold { border-color: rgba(255,215,0,0.4); background: radial-gradient(circle at 50% 32%, rgba(255,215,0,0.16), rgba(255,215,0,0.03)); color: #ffd700; box-shadow: 0 0 44px rgba(255,215,0,0.22); animation: c3TrophyFloat 3s ease-in-out infinite; } @keyframes c3TrophyFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .c3-result-label { color: rgba(255,255,255,0.4); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; } .c3-result-label-gold { color: #ffd700; } .c3-result-card h2 { margin: 0; color: #ffffff; font-size: 2rem; font-weight: 200; letter-spacing: 0.01em; } .c3-result-card p { margin: 0 0 18px; color: rgba(255,255,255,0.55); font-size: 0.9rem; line-height: 1.6; } .c3-result-actions { display: flex; gap: 10px; width: 100%; justify-content: center; } .c3-claim-btn { display: inline-flex; align-items: center; justify-content: center; padding: 16px 40px; border: none; border-radius: 999px; background: linear-gradient(120deg, #fff6b3, #ffd700 48%, #ccaa00); color: #0b0b0d; font-family: 'Inter', sans-serif; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 34px rgba(255,215,0,0.28); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .c3-claim-btn:hover { transform: scale(1.045); box-shadow: 0 10px 48px rgba(255,215,0,0.42); } /* Win confetti */ .c3-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .c3-confetti-piece { position: absolute; top: -3%; border-radius: 1px; opacity: 0; animation: c3ConfettiFall 3.6s linear infinite; } @keyframes c3ConfettiFall { 0% { opacity: 0; transform: translateY(0) rotate(0deg); } 6% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(108vh) rotate(660deg); } }