:root {
    --ludo-seat-red: #dc2626;
    --ludo-seat-green: #16a34a;
    --ludo-seat-yellow: #eab308;
    --ludo-seat-blue: #2563eb;
}

.ludo-live-seat--red {
    --ludo-seat: var(--ludo-seat-red);
}

.ludo-live-seat--green {
    --ludo-seat: var(--ludo-seat-green);
}

.ludo-live-seat--yellow {
    --ludo-seat: var(--ludo-seat-yellow);
}

.ludo-live-seat--blue {
    --ludo-seat: var(--ludo-seat-blue);
}

.ludo-live > * + * {
    margin-top: 1.5rem;
}

.ludo-live .fi-badge {
    flex: none;
}

.fi-section.ludo-live-flush:not(.fi-section-not-contained):not(.fi-divided) > .fi-section-content-ctn > .fi-section-content {
    padding: 0;
}

.ludo-live-indicator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.ludo-live-pulse {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex: none;
}

.ludo-live-pulse--on {
    background: var(--success-500);
    animation: ludo-live-pulse 1.6s ease-out infinite;
}

.ludo-live-pulse--off {
    background: var(--danger-500);
}

.ludo-live-pulse--ended {
    background: var(--gray-400);
}

.ludo-live-pulse-label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--gray-500);
    margin-inline-start: 0.375rem;
}

@keyframes ludo-live-pulse {
    from {
        box-shadow: 0 0 0 0 color-mix(in oklab, var(--success-500) 45%, transparent);
    }

    to {
        box-shadow: 0 0 0 0.5rem transparent;
    }
}

.ludo-live .ludo-live-callout {
    box-shadow: none;
}

.ludo-live-row {
    padding: 1rem 1.5rem;
}

.ludo-live-row + .ludo-live-row {
    border-top: 1px solid var(--gray-200);
}

.ludo-live-row:hover {
    background: var(--gray-50);
}

.ludo-live-row__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.75rem;
}

.ludo-live-row__head .ludo-live-row__watch {
    margin-inline-start: auto;
}

.ludo-live-row__seats {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.ludo-live-row .ludo-live-meta {
    margin-top: 0.75rem;
}

.ludo-live-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    letter-spacing: 0.02em;
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
    color: var(--gray-600);
}

a.ludo-live-id {
    color: var(--primary-600);
    text-decoration: none;
}

a.ludo-live-id:hover {
    text-decoration: underline;
}

.ludo-live-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ludo-live-dot {
    display: inline-block;
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    background: var(--ludo-seat);
    box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.1);
    flex: none;
}

.ludo-live-chip__name {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--gray-950);
    white-space: nowrap;
}

.ludo-live-chip--left .ludo-live-chip__name {
    color: var(--gray-400);
    text-decoration: line-through;
}

.ludo-live-chip--current .ludo-live-dot {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--ludo-seat);
}

.ludo-live-turn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    background: var(--gray-50);
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gray-600) 10%, transparent);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--gray-700);
    white-space: nowrap;
}

.ludo-live-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--gray-500);
}

.ludo-live-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.ludo-live-meta__value {
    color: var(--gray-950);
    font-weight: var(--font-weight-medium);
}

.ludo-live-meta--compact {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    gap: 0.375rem 1rem;
}

.ludo-live-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.ludo-live-stat {
    border-radius: var(--radius-xl);
    background: var(--color-white);
    padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1), 0 0 0 1px color-mix(in oklab, var(--gray-950) 5%, transparent);
}

.ludo-live-stat__label {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
}

.ludo-live-stat__value {
    margin-top: 0.5rem;
    font-size: 1.5rem;
    line-height: 2rem;
    font-weight: var(--font-weight-semibold);
    color: var(--gray-950);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2rem;
}

.ludo-live-stat__unit {
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-medium);
    color: var(--gray-500);
}

.ludo-live-stat__placeholder {
    color: var(--gray-400);
}

.ludo-live-dice {
    display: flex;
    gap: 0.375rem;
}

.ludo-live-die {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--gray-300);
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    font-weight: var(--font-weight-semibold);
    font-variant-numeric: tabular-nums;
}

.ludo-live-timer {
    margin-top: 0.75rem;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--gray-100);
    overflow: hidden;
}

.ludo-live-timer__bar {
    height: 100%;
    border-radius: inherit;
    background: var(--primary-500);
    transition: width 0.9s linear;
}

.ludo-live-timer--low .ludo-live-timer__bar {
    background: var(--danger-500);
}

.ludo-live-seat-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: minmax(0, 1fr);
}

.ludo-live-seat-card {
    border-radius: var(--radius-lg);
    background: var(--color-white);
    box-shadow: inset 0 0 0 1px var(--gray-200);
    border-inline-start: 4px solid var(--ludo-seat);
    padding: 1rem;
}

.ludo-live-seat-card--current {
    box-shadow: inset 0 0 0 1px var(--gray-200), 0 0 0 2px color-mix(in oklab, var(--primary-500) 40%, transparent);
}

.ludo-live-seat-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ludo-live-seat-card__pieces {
    margin-top: 0.875rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.ludo-live-piece {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 3.5rem;
}

.ludo-live-piece__token {
    width: 1.75rem;
    height: 1.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--ludo-seat);
    color: var(--color-white);
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    font-weight: var(--font-weight-semibold);
}

.ludo-live-piece--yard .ludo-live-piece__token {
    background: var(--color-white);
    color: var(--ludo-seat);
    box-shadow: inset 0 0 0 2px var(--ludo-seat);
    opacity: 0.75;
}

.ludo-live-piece--corridor .ludo-live-piece__token {
    box-shadow: 0 0 0 3px color-mix(in oklab, var(--ludo-seat) 25%, transparent);
}

.ludo-live-piece--home .ludo-live-piece__token {
    box-shadow: 0 0 0 2px var(--color-white), 0 0 0 4px var(--success-500);
}

.ludo-live-piece__label {
    font-size: var(--text-xs);
    line-height: var(--text-xs--line-height);
    color: var(--gray-500);
    white-space: nowrap;
}

.ludo-live-piece--home .ludo-live-piece__label {
    color: var(--success-600);
    font-weight: var(--font-weight-medium);
}

.ludo-live-log {
    max-height: 32rem;
    overflow-y: auto;
}

.ludo-live-log__row {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.625rem 1.5rem;
}

.ludo-live-log__row + .ludo-live-log__row {
    border-top: 1px solid var(--gray-200);
}

.ludo-live-log__row--latest {
    background: var(--primary-50);
}

.ludo-live-log .ludo-live-log__row .ludo-live-log__revision {
    min-width: 3rem;
    justify-content: center;
    flex: none;
    font-variant-numeric: tabular-nums;
}

.ludo-live-log__text {
    font-size: var(--text-sm);
    line-height: 1.5rem;
    color: var(--gray-950);
}

.ludo-live-log__empty {
    padding: 1.5rem;
    font-size: var(--text-sm);
    line-height: var(--text-sm--line-height);
    color: var(--gray-500);
    text-align: center;
}

.ludo-live--stale .ludo-live-stats,
.ludo-live--stale .ludo-live-seat-grid {
    opacity: 0.6;
}

@media (min-width: 40rem) {
    .ludo-live-seat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 64rem) {
    .ludo-live-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 96rem) {
    .ludo-live-seat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (prefers-reduced-motion: reduce) {
    .ludo-live-pulse--on {
        animation: none;
    }

    .ludo-live-timer__bar {
        transition: none;
    }
}