.page-head { display: flex; flex-direction: column; gap: 10px; padding: 20px 4px 0; }
.pick { gap: 14px; }
.pick__teams { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pick__teams > div { display: flex; flex-direction: column; gap: 6px; }
.pick__team { display: flex; align-items: center; gap: 10px; }
.pick__ai { display: none; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--c-accent-soft); }
.pick[data-picked] .pick__ai { display: flex; animation: fade-up var(--t-slow) var(--ease-out); }
.pick__wait { font-size: 13px; color: var(--c-text-2); }
.pick[data-picked] .pick__wait { display: none; }
@keyframes fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.bar-row { display: grid; grid-template-columns: 64px minmax(0,1fr) 56px; align-items: center; gap: 12px; }
.bar { height: 10px; border-radius: 5px; background: var(--c-track); overflow: hidden; }
.bar span { display: block; height: 100%; border-radius: 5px; }
.res { display: flex; align-items: center; gap: 12px; min-height: 52px; border-top: 1px solid var(--c-line); }
.res:first-child { border-top: 0; }
.mark { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.mark::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--c-accent); }
.mark--miss { color: var(--c-text-2); font-weight: 500; }
.mark--miss::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c-text-2); }
@media (min-width: 1024px) { .page-head { padding: 0; max-width: 720px; } }