.pickem-dashboard-card,
.pickem-workspace-header,
.pickem-status-strip,
.pickem-leaderboard-preview,
.pickem-frame-shell,
.pickem-setup-state {
    --pickem-ink: #102d36;
    --pickem-teal: #0b8f95;
    --pickem-cyan: #34c7cf;
    --pickem-lime: #c8f169;
}

.pickem-dashboard-card {
    position: relative;
    display: grid;
    grid-template-areas: "copy intro score action";
    grid-template-columns: minmax(280px, 1fr) minmax(128px, 156px) auto auto;
    align-items: center;
    gap: clamp(.875rem, 2vw, 1.5rem);
    margin: 0 0 1.5rem;
    padding: clamp(1rem, 1.75vw, 1.35rem);
    overflow: hidden;
    color: #eefcfc;
    /* Layer order: lime glow, faded gridiron (yard lines + numbers, one SVG
       so they stay aligned), base turf gradient. */
    background:
        radial-gradient(circle at 84% 10%, rgba(200, 241, 105, .16), transparent 28%),
        url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201200%20260'%3E%20%3Cg%20stroke%3D'%23ffffff'%20stroke-opacity%3D'0.028'%20stroke-width%3D'2'%3E%20%3Cline%20x1%3D'60'%20y1%3D'0'%20x2%3D'60'%20y2%3D'260'%2F%3E%3Cline%20x1%3D'180'%20y1%3D'0'%20x2%3D'180'%20y2%3D'260'%2F%3E%20%3Cline%20x1%3D'300'%20y1%3D'0'%20x2%3D'300'%20y2%3D'260'%2F%3E%3Cline%20x1%3D'420'%20y1%3D'0'%20x2%3D'420'%20y2%3D'260'%2F%3E%20%3Cline%20x1%3D'540'%20y1%3D'0'%20x2%3D'540'%20y2%3D'260'%2F%3E%3Cline%20x1%3D'660'%20y1%3D'0'%20x2%3D'660'%20y2%3D'260'%2F%3E%20%3Cline%20x1%3D'780'%20y1%3D'0'%20x2%3D'780'%20y2%3D'260'%2F%3E%3Cline%20x1%3D'900'%20y1%3D'0'%20x2%3D'900'%20y2%3D'260'%2F%3E%20%3Cline%20x1%3D'1020'%20y1%3D'0'%20x2%3D'1020'%20y2%3D'260'%2F%3E%3Cline%20x1%3D'1140'%20y1%3D'0'%20x2%3D'1140'%20y2%3D'260'%2F%3E%20%3C%2Fg%3E%20%3Cg%20fill%3D'%23ffffff'%20fill-opacity%3D'0.03'%20font-family%3D'Arial%20Black%2CArial%2Csans-serif'%20font-size%3D'46'%20font-weight%3D'900'%20text-anchor%3D'middle'%3E%20%3Ctext%20x%3D'180'%20y%3D'225'%3E10%3C%2Ftext%3E%3Ctext%20x%3D'300'%20y%3D'225'%3E20%3C%2Ftext%3E%3Ctext%20x%3D'420'%20y%3D'225'%3E30%3C%2Ftext%3E%20%3Ctext%20x%3D'540'%20y%3D'225'%3E40%3C%2Ftext%3E%3Ctext%20x%3D'660'%20y%3D'225'%3E50%3C%2Ftext%3E%3Ctext%20x%3D'780'%20y%3D'225'%3E40%3C%2Ftext%3E%20%3Ctext%20x%3D'900'%20y%3D'225'%3E30%3C%2Ftext%3E%3Ctext%20x%3D'1020'%20y%3D'225'%3E20%3C%2Ftext%3E%3Ctext%20x%3D'1140'%20y%3D'225'%3E10%3C%2Ftext%3E%20%3C%2Fg%3E%20%3C%2Fsvg%3E"),
        linear-gradient(120deg, #102d36, #0a4a51);
    background-size: auto, 100% 100%, auto;
    background-repeat: no-repeat;
    border: 1px solid rgba(52, 199, 207, .32);
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(5, 31, 38, .18);
}

.pickem-dashboard-copy {
    position: relative;
    z-index: 1;
    grid-area: copy;
}

.pickem-touchdown-intro {
    position: relative;
    grid-area: intro;
    width: min(100%, 156px);
    aspect-ratio: 1;
    justify-self: center;
    margin-block: -.75rem;
    pointer-events: none;
}

.pickem-touchdown-video,
.pickem-touchdown-fallback {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.pickem-touchdown-fallback {
    display: none;
}

.pickem-touchdown-video.is-complete {
    display: none;
}

.pickem-touchdown-fallback.is-visible {
    display: block;
}

/* The character itself is the replay target, with no visible button chrome. */
.pickem-animation-media {
    position: absolute;
    inset: 0;
}

.is-internal-toast .pickem-animation-media {
    overflow: hidden;
}

.is-internal-toast .pickem-touchdown-video,
.is-internal-toast .pickem-touchdown-fallback {
    object-fit: cover;
}

.pickem-animation-control {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    border-radius: 8px;
    appearance: none;
    background: transparent;
    cursor: pointer;
    pointer-events: auto;
}

.pickem-animation-control:focus-visible {
    outline: 2px solid #eefcfc;
    outline-offset: 2px;
}

.is-internal-toast.is-playing .pickem-touchdown-video { display: block; }
.is-internal-toast.is-playing .pickem-touchdown-fallback:not(.is-visible) { display: none; }

.pickem-dashboard-card.needs-picks::before,
.pickem-status-strip.needs-picks::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--pickem-lime);
}

.pickem-eyebrow {
    display: inline-block;
    margin-bottom: .35rem;
    color: var(--pickem-cyan);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.pickem-dashboard-copy h2,
.pickem-workspace-header h1 {
    margin: 0;
    color: inherit;
    font-weight: 800;
    letter-spacing: -.035em;
}

.pickem-dashboard-copy p,
.pickem-workspace-header p {
    margin: .4rem 0 0;
    color: rgba(238, 252, 252, .72);
}

.pickem-progress {
    width: min(440px, 100%);
    height: 6px;
    margin-top: .8rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
}

.pickem-progress > span {
    display: block;
    width: var(--pickem-progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--pickem-cyan), var(--pickem-lime));
}

.pickem-dashboard-score {
    grid-area: score;
    min-width: 100px;
    text-align: center;
}

.pickem-dashboard-score span,
.pickem-dashboard-score small {
    display: block;
    color: rgba(238, 252, 252, .66);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
}

.pickem-dashboard-score strong {
    display: block;
    color: var(--pickem-lime);
    font-size: 2rem;
    line-height: 1.05;
}

.pickem-dashboard-action,
.pickem-secondary-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    padding: .7rem 1rem;
    color: #082e35;
    font-weight: 800;
    text-decoration: none;
    background: var(--pickem-lime);
    border-radius: 12px;
    transition: transform .18s ease, box-shadow .18s ease;
}

.pickem-dashboard-action {
    grid-area: action;
}

.pickem-dashboard-action:hover,
.pickem-secondary-action:hover {
    color: #082e35;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(200, 241, 105, .2);
}

.pickem-launch-card.needs-picks {
    border-color: rgba(200, 241, 105, .6) !important;
    box-shadow: inset 0 3px 0 #c8f169;
}

.pickem-ball-icon {
    transform: rotate(-8deg);
}

.pickem-workspace {
    width: min(1540px, 100%);
    margin: 0 auto;
}

.pickem-workspace-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: clamp(1.25rem, 3vw, 2rem);
    color: #eefcfc;
    background:
        radial-gradient(circle at 86% 20%, rgba(52, 199, 207, .25), transparent 30%),
        linear-gradient(120deg, #102d36, #0b5d63);
    border: 1px solid rgba(52, 199, 207, .28);
    border-radius: 20px;
}

.pickem-workspace-header h1 {
    font-size: clamp(1.8rem, 4vw, 3rem);
}

.pickem-status-strip {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto auto minmax(210px, .7fr);
    gap: 1.25rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: 1rem 1.25rem;
    color: var(--pickem-ink);
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(16, 45, 54, .12);
    border-radius: 16px;
    box-shadow: 0 12px 35px rgba(16, 45, 54, .08);
}

.pickem-status-strip.is-muted { opacity: .82; }
.pickem-status-primary > span,
.pickem-status-metric > span,
.pickem-status-message > span {
    display: block;
    color: #60767d;
    font-size: .78rem;
}
.pickem-status-primary > strong,
.pickem-status-metric > strong,
.pickem-status-message > strong { display: block; }
.pickem-status-metric { min-width: 70px; text-align: center; }
.pickem-status-metric strong { color: var(--pickem-teal); font-size: 1.45rem; }
.pickem-status-strip .pickem-progress { background: #dbe8e9; }

.pickem-leaderboard-preview {
    margin-bottom: 1rem;
    color: var(--pickem-ink);
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(16, 45, 54, .12);
    border-radius: 16px;
}

.pickem-leaderboard-preview summary {
    display: flex;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    font-weight: 800;
    cursor: pointer;
}

.pickem-leaderboard-preview summary span { color: #60767d; font-size: .8rem; }
.pickem-leaderboard-preview ol { margin: 0; padding: 0 1.25rem 1rem; list-style: none; }
.pickem-leaderboard-preview li {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    gap: .75rem;
    padding: .65rem .75rem;
    border-top: 1px solid rgba(16, 45, 54, .08);
}
.pickem-leaderboard-preview li.is-you { background: rgba(52, 199, 207, .1); border-radius: 10px; }
.pickem-leaderboard-preview li small { color: var(--pickem-teal); }
.pickem-leader-rank { color: var(--pickem-teal); font-weight: 800; }

.pickem-frame-shell {
    overflow: hidden;
    background: #071b22;
    border: 1px solid rgba(52, 199, 207, .35);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(5, 31, 38, .22);
}

.pickem-frame-toolbar {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .65rem 1rem;
    color: #ccebed;
    font-size: .75rem;
    background: #0d343d;
}
.pickem-frame-toolbar i {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .45rem;
    background: var(--pickem-lime);
    border-radius: 50%;
    box-shadow: 0 0 0 4px rgba(200, 241, 105, .12);
}
.pickem-frame-toolbar strong { color: var(--pickem-lime); }
.pickem-frame {
    display: block;
    width: 100%;
    height: max(760px, calc(100dvh - 190px));
    border: 0;
    background: #081f27;
}

.pickem-setup-state {
    padding: 2rem;
    color: var(--pickem-ink);
    text-align: center;
    background: rgba(255, 255, 255, .95);
    border: 1px dashed rgba(16, 45, 54, .25);
    border-radius: 16px;
}

@media (max-width: 1180px) {
    .pickem-dashboard-card {
        grid-template-areas:
            "copy intro score"
            "action action action";
        grid-template-columns: minmax(0, 1fr) minmax(120px, 148px) auto;
    }
    .pickem-dashboard-action { justify-self: stretch; }
}

@media (max-width: 900px) {
    .pickem-dashboard-card {
        grid-template-areas:
            "copy intro"
            "score intro"
            "action action";
        grid-template-columns: minmax(0, 1fr) minmax(112px, 136px);
    }
    .pickem-status-strip { grid-template-columns: 1fr 1fr; }
    .pickem-status-primary,
    .pickem-status-message { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
    .pickem-dashboard-card {
        grid-template-areas:
            "copy intro"
            "score intro"
            "action action";
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: .75rem 1rem;
        padding: 1rem;
    }
    .pickem-touchdown-intro {
        width: 112px;
        margin: 0;
    }
    .pickem-workspace-header { align-items: stretch; flex-direction: column; }
    .pickem-dashboard-score { text-align: left; }
    .pickem-secondary-action { width: 100%; }
    .pickem-status-strip { grid-template-columns: 1fr 1fr; }
    .pickem-leaderboard-preview li { grid-template-columns: 36px 1fr; }
    .pickem-leaderboard-preview li > :last-child { grid-column: 2; }
    .pickem-frame { height: max(680px, calc(100dvh - 140px)); }
}

.nav-pickem-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.9rem;
    color: #00a19a;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    background: rgba(0, 161, 154, 0.1);
    /* Highlighter-lime border: literal #c8f169 because --pickem-lime is scoped
       to the pickem dashboard components, not the navbar. */
    border: 1px solid rgba(200, 241, 105, 0.45);
    border-radius: 8px;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.nav-pickem-btn:hover,
.nav-pickem-btn:focus-visible {
    color: #00a19a;
    background: rgba(0, 161, 154, 0.18);
    border-color: #c8f169;
}

.nav-pickem-btn.active {
    color: #ffffff;
    background: #00a19a;
    border-color: #00a19a;
}

.nav-pickem-btn.active:hover,
.nav-pickem-btn.active:focus-visible {
    color: #ffffff;
    background: #008b85;
    border-color: #008b85;
}

@media (prefers-reduced-motion: reduce) {
    .pickem-dashboard-action,
    .pickem-secondary-action { transition: none; }
    .pickem-touchdown-video { display: none; }
    .pickem-touchdown-fallback { display: block; }
}