#introScreen, #resultScreen { background: rgba(6, 9, 14, 0.78); backdrop-filter: blur(3px); }
.dc-intro, .dc-result { display: flex; flex-direction: column; align-items: center; gap: 2.6cqh; padding: 0 8cqw; }
.dc-ring { position: relative; width: 30cqw; height: 30cqw; }
.dc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dc-ring circle { fill: rgba(15, 23, 42, 0.8); stroke: var(--primary); stroke-width: 5; stroke-dasharray: 4 8; filter: drop-shadow(0 0 6px var(--primary)); animation: spinDash 8s linear infinite; }
@keyframes spinDash { to { stroke-dashoffset: -240; } }
.dc-ring-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 11cqw; font-weight: 800; }
.dc-ring-num small { font-size: 0.5em; color: var(--accent); }
.dc-title { font-size: 14cqw; line-height: 0.95; font-weight: 800; letter-spacing: -0.02em; }
.gt-badge { font-size: 3cqw; }
.dc-sub { font-size: 4.4cqw; max-width: 26ch; }
.dc-sub b { color: var(--accent); }
.dc-legend { display: flex; gap: 5cqw; font-size: 3.3cqw; color: var(--text-muted); font-family: var(--font-mono); }
.dc-legend > span { display: flex; align-items: center; gap: 0.6em; }
.dc-chip { width: 1.3em; height: 1.3em; border-radius: 0.35em; display: inline-block; border: 2px solid; }
.dc-chip.good { border-color: var(--primary); background: rgba(56, 189, 248, 0.15); box-shadow: 0 0 10px var(--primary-glow); }
.dc-chip.bad { border-color: var(--danger); background: rgba(248, 113, 113, 0.15); box-shadow: 0 0 10px rgba(248, 113, 113, 0.5); }
.dc-play { font-size: 5cqw; margin-top: 1cqh; }

.dc-bravo { font-size: 12cqw; font-weight: 800; line-height: 1; }
.dc-filled { font-size: 4.6cqw; }
.dc-dial { position: relative; width: 52cqw; height: 52cqw; }
.dc-dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dc-dial .track { fill: rgba(15, 23, 42, 0.85); stroke: rgba(255, 255, 255, 0.08); stroke-width: 10; }
.dc-dial .bar { fill: none; stroke: url(#none) var(--primary); stroke: var(--primary); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 540; stroke-dashoffset: 540; filter: drop-shadow(0 0 8px var(--primary)); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1); }
.dc-dial > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.dc-dial b { font-size: 18cqw; line-height: 1; }
.dc-dial span { font-family: var(--font-mono); color: var(--accent); font-size: 3.6cqw; }
.dc-best { color: var(--text-muted); font-size: 3.6cqw; font-family: var(--font-mono); }
.dc-best b { color: var(--text-main); }
.dc-result [data-contact] { font-size: 3.2cqw; }
.dc-cta { color: var(--text-muted); font-size: 3.4cqw; max-width: 34ch; }
#againBtn { font-size: 3.4cqw; }