/* ================= V6: CONTAGEM 3-2-1 + AVATAR 3D ================= */
:root {
  --ct-bg: radial-gradient(120% 90% at 50% 25%, #2A2A30 0%, #0C0C0E 70%);
  --ct-fg: #FFFFFF; --ct-muted: rgba(255,255,255,0.7);
  --ct-track: rgba(255,255,255,0.14); --ct-bar: #FFFFFF;
  --ct-num: linear-gradient(180deg, #FFFFFF 0%, #CFCFD6 100%);
  --ct-glow: rgba(255,255,255,0.10); --ct-chip: rgba(255,255,255,0.10);
  --ct-dot1: #FFFFFF; --ct-dot2: #34C759; --ct-go: #34C759;
}
[data-theme="lilas"] {
  --ct-bg: radial-gradient(120% 90% at 50% 22%, #FFF0FA 0%, #F6DDF5 38%, #E6D2FB 72%, #D9CBF8 100%);
  --ct-fg: #3B2347; --ct-muted: rgba(59,35,71,0.62);
  --ct-track: rgba(255,255,255,0.85); --ct-bar: #C65BDB;
  --ct-num: linear-gradient(160deg, #E879F9 0%, #A855F7 55%, #7C5CF2 100%);
  --ct-glow: rgba(232,121,249,0.35); --ct-chip: rgba(255,255,255,0.72);
  --ct-dot1: #E879F9; --ct-dot2: #8B5CF6; --ct-go: #A855F7;
}
[data-theme="indigo"] {
  --ct-bg: radial-gradient(120% 90% at 50% 22%, #8F95F5 0%, #5D5FE8 60%, #3F40C4 100%);
  --ct-fg: #FFFFFF; --ct-muted: rgba(255,255,255,0.78);
  --ct-track: rgba(255,255,255,0.22); --ct-bar: #FFFFFF;
  --ct-num: linear-gradient(180deg, #FFFFFF 0%, #DCDDFF 100%);
  --ct-glow: rgba(255,255,255,0.18); --ct-chip: rgba(255,255,255,0.16);
  --ct-dot1: #FFFFFF; --ct-dot2: #FFD27A; --ct-go: #FFFFFF;
}

.countdown { background: var(--ct-bg); color: var(--ct-fg); -webkit-backdrop-filter: none; backdrop-filter: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; overflow: hidden; }
.countdown .ct-glow { position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, var(--ct-glow) 0%, transparent 65%); animation: ctBreath 1.8s ease-in-out infinite; pointer-events: none; }
@keyframes ctBreath { 0%, 100% { transform: scale(0.92); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } }
.ct-stage { position: relative; width: 230px; height: 230px; display: grid; place-items: center; transform: scale(0.85); opacity: 0; transition: transform 0.6s var(--spring), opacity 0.3s ease; }
.countdown.show .ct-stage { transform: scale(1); opacity: 1; }
.ct-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ct-track { fill: none; stroke: var(--ct-track); stroke-width: 8; }
.ct-bar { fill: none; stroke: var(--ct-bar); stroke-width: 8; stroke-linecap: round; stroke-dasharray: 615.75; stroke-dashoffset: 615.75; }
.ct-bar.run { animation: ctFill 0.9s linear forwards; }
@keyframes ctFill { from { stroke-dashoffset: 615.75; } to { stroke-dashoffset: 0; } }
.ct-ripple { position: absolute; inset: 14px; border-radius: 50%; border: 3px solid var(--ct-bar); opacity: 0; }
.ct-ripple.wave { animation: ctWave 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) forwards; }
@keyframes ctWave { 0% { transform: scale(0.7); opacity: 0.55; } 100% { transform: scale(1.55); opacity: 0; } }
.ct-num { position: relative; font-size: 120px; font-weight: 500; letter-spacing: -0.05em; line-height: 1; background: var(--ct-num); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ct-num.pop { animation: ctPop 0.7s var(--spring) both; }
@keyframes ctPop { 0% { transform: scale(0.35) translateY(18px); opacity: 0; filter: blur(10px); } 55% { transform: scale(1.12); opacity: 1; filter: blur(0); } 100% { transform: scale(1); opacity: 1; } }
.countdown.go .ct-num { font-size: 76px; letter-spacing: -0.03em; }
.countdown.go .ct-stage { animation: ctGo 0.6s var(--spring); }
@keyframes ctGo { 0% { transform: scale(0.9); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
.countdown.go .ct-track { stroke: var(--ct-go); opacity: 0.35; }
.ct-burst { position: absolute; left: 50%; top: 50%; width: 0; height: 0; }
.ct-burst i { position: absolute; left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 50%; background: var(--ct-dot1); opacity: 0; transform: rotate(var(--a)) translateY(0) scale(0.4); }
.ct-burst i:nth-child(even) { background: var(--ct-dot2); width: 9px; height: 9px; left: -4.5px; top: -4.5px; }
.ct-burst.boom i { animation: ctBoom 0.85s cubic-bezier(0.15, 0.8, 0.25, 1) forwards; }
@keyframes ctBoom { 0% { opacity: 1; transform: rotate(var(--a)) translateY(-60px) scale(0.6); } 70% { opacity: 1; } 100% { opacity: 0; transform: rotate(var(--a)) translateY(calc(-60px - var(--d))) scale(1); } }
.countdown .ct-label { position: relative; margin-top: 28px; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; color: var(--ct-fg); }
.ct-chip { position: relative; margin-top: 12px; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 999px; background: var(--ct-chip); color: var(--ct-fg); font-size: 15px; font-weight: 500; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ct-chip img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: #fff; }
.ct-chip:empty { display: none; }

/* Avatar: só a cabeça 3D flutuando (sem círculo nem foto) */
.avatar, .avatar3d span { display: none; }
.avatar3d { width: 66px; height: 66px; flex: none; margin: -8px -4px -8px -6px; animation: avFloat 4.5s ease-in-out infinite; }
.avatar3d img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(60, 20, 80, 0.22)); }
@keyframes avFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-3px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .avatar3d, .countdown .ct-glow { animation: none; } }

.countdown .ct-num { -webkit-text-fill-color: transparent; }
