:root {
    --bg: #0a0d0a;
    --surface: #121712;
    --surface-2: #182018;
    --border: #243024;
    --green: #19e08b;
    --green-2: #0f9d58;
    --text: #e8f3e8;
    --muted: #8a978a;
    --win: #19e08b;
    --loss: #ef5350;
    --pending: #ffb300;
    --refund: #9aa39a;
    --radius: 12px;
    --content-width: 960px;
}

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

/* The geometry is forced: this utility is applied to controls that also carry
   their own sizing rules, and a hidden control that keeps its width still
   occupies space and can widen the document. */
.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    min-height: 0 !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: var(--bg);
    background-image:
        radial-gradient(55% 45% at 85% 6%, rgba(25, 224, 139, 0.10), transparent 70%),
        radial-gradient(95% 60% at 50% -5%, var(--surface), transparent 60%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

a {
    color: var(--green);
    text-decoration: none;
}

a:hover {
    color: var(--text);
}

.page {
    width: 100%;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 24px 16px 64px;
    flex: 1 0 auto;
}

.page--auth {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 40px;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--surface-2);
    color: var(--text);
    transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
    transform: translateY(-1px);
    color: var(--text);
}

.btn:active {
    transform: translateY(0) scale(0.97);
}

.like-btn:active,
.lang-switch__btn:active,
.social__link:active {
    transform: scale(0.95);
}

.btn--ghost {
    background: transparent;
}

.btn--ghost:hover {
    border-color: var(--green-2);
}

.btn--primary {
    background: linear-gradient(135deg, var(--green), var(--green-2));
    border-color: transparent;
    color: #06120c;
    box-shadow: 0 0 0 rgba(25, 224, 139, 0);
}

.btn--primary:hover {
    color: #06120c;
    box-shadow: 0 6px 24px rgba(25, 224, 139, 0.28);
}

.pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.pill--active {
    background: rgba(25, 224, 139, 0.12);
    color: var(--green);
    border: 1px solid rgba(25, 224, 139, 0.4);
}

.brand-accent {
    color: var(--green);
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(10, 13, 10, 0.78);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
    transition: transform 0.22s ease;
}

/* Tucked away on the way down, back on any upward move. The tab strips follow
   through --mc-sticky-top, which the sticky-header module keeps in step. */
.site-header.is-tucked {
    transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
    .site-header {
        transition: none;
    }
}

.site-header__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 12px 16px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
}

.site-header__inner--minimal {
    display: flex;
    justify-content: center;
}

.site-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cta-short {
    display: none;
}

.site-header__brand {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    text-align: center;
}

.site-header__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.lang-switch {
    display: inline-flex;
    gap: 4px;
}

.lang-switch__btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: transparent;
    color: inherit;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0.65;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

.lang-switch__btn:hover {
    opacity: 1;
    border-color: var(--green-2);
}

.lang-switch__btn--active {
    display: none;
}

.lang-switch__flag {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    display: block;
}

.user-menu {
    position: relative;
}

.user-menu__toggle {
    max-width: none;
}

.user-menu__email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 280px;
}

.user-menu__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 180px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 6px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.user-menu__item {
    display: block;
    padding: 10px 12px;
    border-radius: 8px;
    color: var(--text);
}

.user-menu__item:hover {
    background: var(--surface-2);
    color: var(--green);
}

.user-menu__caret {
    font-size: 1.5rem;
    line-height: 1;
}

.nav-burger {
    display: none;
}

.flash-stack {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: max-content;
    max-width: min(92vw, 460px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.flash {
    pointer-events: auto;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
    animation: flash-in 0.25s ease;
}

.flash.is-leaving {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

@keyframes flash-in {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.auth-resend {
    margin: 0 0 14px;
}

.auth-resend__btn {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--green);
    text-decoration: underline;
    cursor: pointer;
}

.flash {
    padding: 12px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 0.95rem;
}

.flash-success {
    border-color: rgba(25, 224, 139, 0.4);
    color: var(--green);
}

.flash-error {
    border-color: rgba(239, 83, 80, 0.4);
    color: var(--loss);
}

.flash-info,
.flash-dev {
    border-color: rgba(255, 179, 0, 0.4);
    color: var(--pending);
}

.hero {
    text-align: center;
    padding: 56px 0 32px;
}

.hero__logo {
    font-size: clamp(3rem, 12vw, 5.5rem);
    font-weight: 900;
    letter-spacing: -0.04em;
    margin: 0;
    line-height: 1;
}

.hero__logo .brand-accent {
    text-shadow: 0 0 30px rgba(25, 224, 139, 0.5);
}

.hero__slogan {
    margin: 16px 0 0;
    color: var(--muted);
    font-size: clamp(1rem, 3vw, 1.3rem);
}

.hero .btn {
    margin-top: 28px;
}


.section-heading {
    font-size: 1.4rem;
    margin: 0 0 16px;
}

.back-link {
    display: inline-block;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: 0.9rem;
}

.back-link:hover {
    color: var(--green);
}

.ticket-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.feed-state {
    text-align: center;
    color: var(--muted);
    padding: 24px 0;
}

.feed-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.ticket {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
}

.ticket--pending {
    border-color: rgba(255, 179, 0, 0.35);
    box-shadow: inset 0 0 0 1px rgba(255, 179, 0, 0.06);
}

.ticket__top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.badge--win {
    background: rgba(25, 224, 139, 0.14);
    color: var(--win);
}

.badge--loss {
    background: rgba(239, 83, 80, 0.14);
    color: var(--loss);
}

.badge--pending {
    background: rgba(255, 179, 0, 0.14);
    color: var(--pending);
}

.badge--refund {
    background: rgba(154, 163, 154, 0.14);
    color: var(--refund);
}

.ticket__live {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--pending);
    letter-spacing: 0.05em;
}

.ticket__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.ticket__link:hover .ticket__description {
    text-decoration: underline;
}

.ticket__description {
    margin: 0 0 14px;
    font-size: 1.05rem;
}

.bets {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bet {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}

.bet__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.bet__title {
    font-weight: 600;
}

.bet__pick {
    color: var(--muted);
    font-size: 0.9rem;
}

.bet__meta {
    text-align: right;
    flex-shrink: 0;
}

.bet__odds {
    display: block;
    font-weight: 700;
    color: var(--green);
}

.bet__start {
    display: block;
    color: var(--muted);
    font-size: 0.8rem;
}

.ticket__summary {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 0.85rem;
    font-weight: 600;
}

.chip--ok {
    background: rgba(15, 157, 88, 0.12);
    border-color: rgba(15, 157, 88, 0.4);
    color: #0f7a45;
}

.chip--danger {
    background: rgba(200, 45, 45, 0.12);
    border-color: rgba(200, 45, 45, 0.4);
    color: #b02a2a;
}

.admin-note {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.8rem;
    color: var(--muted);
}

.ticket__actions {
    margin-bottom: 14px;
}

.like-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.like-btn:hover {
    border-color: var(--green-2);
    color: var(--text);
}

.like-btn.is-active {
    border-color: rgba(25, 224, 139, 0.5);
    color: var(--green);
}

.like-btn__heart {
    font-size: 1.05rem;
    line-height: 1;
}

.comments {
    margin: 18px -18px -18px;
    padding: 16px 18px;
    background: rgba(0, 0, 0, 0.18);
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius) var(--radius);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.comments__header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.comments__title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.comments__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
}

.comments__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.comment {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}

.comment__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.comment__author {
    font-weight: 600;
    font-size: 0.9rem;
}

.comment__date {
    color: var(--muted);
    font-size: 0.8rem;
}

.comment__text {
    font-size: 0.95rem;
    word-break: break-word;
}

.comment-form {
    display: flex;
    gap: 8px;
}

.comment-form__error {
    color: var(--loss);
    font-size: 0.85rem;
    margin: 4px 0 0;
}

.comment-form__input {
    flex: 1;
    min-width: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 1rem;
}

.comment-form__input:focus {
    border-color: var(--green-2);
    box-shadow: 0 0 0 3px rgba(25, 224, 139, 0.12);
}

.comments__login {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.comments__more {
    display: inline-block;
    margin: 4px 0 12px;
    font-size: 0.9rem;
    color: var(--green);
    font-weight: 600;
}

.site-footer {
    border-top: 1px solid var(--border);
    background: var(--surface);
    margin-top: 48px;
}

.site-footer__inner {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 32px 16px;
}

.social {
    display: flex;
    gap: 14px;
    justify-content: center;
    margin-bottom: 28px;
}

.social__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.08s ease;
}

.social__link:hover {
    color: var(--green);
    border-color: var(--green-2);
    transform: translateY(-2px);
}

.site-footer__cols {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.site-footer__col--right {
    text-align: right;
}

.footer-brand {
    font-weight: 700;
}

.footer-mail {
    color: var(--muted);
    font-size: 0.9rem;
}

.footer-mail:hover {
    color: var(--green);
}

.footer-secure {
    color: var(--muted);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.footer-responsible {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border, rgba(255, 255, 255, 0.08));
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.stripe-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 8px;
    background: #635bff;
    color: #fff;
    font-weight: 800;
    font-style: italic;
    letter-spacing: -0.02em;
    text-decoration: none;
}

.stripe-badge:hover {
    color: #fff;
    opacity: 0.9;
}

/* settings */
.settings-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px;
    margin-bottom: 16px;
}

.settings-card__title {
    margin: 0 0 14px;
    font-size: 1.1rem;
}

.settings-field {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 0;
}

.settings-field__label {
    color: var(--muted);
}

.settings-subs {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-sub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    flex-wrap: wrap;
}

.settings-sub__main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-sub__title {
    font-weight: 600;
}

.settings-sub__dates {
    color: var(--muted);
    font-size: 0.85rem;
}

.settings-sub__meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.settings-sub__price {
    font-weight: 700;
    color: var(--green);
}

.settings-sub__state {
    font-size: 0.85rem;
    font-weight: 600;
}

.settings-sub__state--active {
    color: var(--green);
}

.settings-sub__state--inactive {
    color: var(--muted);
}

.settings-sub__renewal-box {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.settings-sub__renewal {
    color: var(--pending);
    font-size: 0.85rem;
    font-weight: 600;
}

.settings-field__value {
    word-break: break-word;
    text-align: right;
}

.settings-form {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.settings-form__label {
    display: block;
    margin-bottom: 8px;
    font-size: 0.9rem;
    color: var(--muted);
}

.settings-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
}

.settings-input:focus {
    border-color: var(--green-2);
    box-shadow: 0 0 0 3px rgba(25, 224, 139, 0.12);
}

.settings-form__hint {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.settings-toggle {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.settings-form__save {
    margin-top: 18px;
}

.settings-toggle__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-width: 0;
}

.settings-toggle__title {
    font-weight: 600;
}

.settings-toggle__desc {
    font-size: 0.82rem;
    color: var(--muted);
}

.switch {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 48px;
    height: 28px;
    cursor: pointer;
}

.switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.switch__slider {
    position: absolute;
    inset: 0;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: background 0.18s, border-color 0.18s;
}

.switch__slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--muted);
    transition: transform 0.18s, background 0.18s;
}

.switch input:checked + .switch__slider {
    background: rgba(25, 224, 139, 0.18);
    border-color: var(--green-2);
}

.switch input:checked + .switch__slider::before {
    transform: translateX(20px);
    background: var(--green);
}

.switch input:focus-visible + .switch__slider {
    box-shadow: 0 0 0 3px rgba(25, 224, 139, 0.12);
}

.settings-push__status {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--muted);
}

.settings-push__status--ok {
    color: var(--green);
}

.settings-push__status--error {
    color: var(--pending);
}

.push-help {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--muted);
}

.push-help summary {
    cursor: pointer;
    color: var(--green);
    font-weight: 600;
}

.push-help__steps {
    margin: 8px 0 0;
    padding-left: 18px;
    line-height: 1.6;
}

/* admin */
.is-admin {
    --content-width: 1440px;
}

.admin {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.admin-nav__link {
    display: block;
    padding: 10px 12px;
    border-radius: 10px;
    color: var(--text);
    border: 1px solid transparent;
}

.admin-nav__link:hover {
    background: var(--surface-2);
    color: var(--green);
}

.admin-nav__link.is-active {
    background: var(--surface-2);
    border-color: var(--border);
    color: var(--green);
}

.admin-content {
    min-width: 0;
    overflow-x: auto;
}

.admin-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-head .section-heading {
    margin: 0;
}

.admin-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

.admin-stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 14px;
    text-align: center;
    color: var(--text);
}

.admin-stat:hover {
    border-color: var(--green-2);
    color: var(--text);
}

.admin-stat__value {
    font-size: 1.7rem;
    font-weight: 800;
    color: var(--green);
}

.admin-stat__label {
    margin-top: 4px;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.admin-table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: 0.9rem;
}

.admin-table th,
.admin-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.admin-table th {
    color: var(--muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.admin-table tr:last-child td {
    border-bottom: none;
}

.admin-table__desc {
    max-width: 280px;
}

.admin-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
}

.pagination__info {
    color: var(--muted);
    font-size: 0.9rem;
}

.admin-inline-form {
    display: inline;
    margin: 0;
}

.btn--sm {
    padding: 5px 10px;
    font-size: 0.8rem;
}

.btn--danger {
    background: rgba(239, 83, 80, 0.12);
    border-color: rgba(239, 83, 80, 0.4);
    color: var(--loss);
}

.btn--danger:hover {
    color: var(--loss);
    border-color: var(--loss);
}

.admin-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 640px;
}

.admin-form__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
}

.admin-form label {
    display: block;
    margin-bottom: 4px;
    color: var(--muted);
    font-size: 0.85rem;
}

.admin-form input[type="text"],
.admin-form input[type="email"],
.admin-form input[type="number"],
.admin-form input[type="datetime-local"],
.admin-form textarea,
.admin-form select {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
}

.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus {
    border-color: var(--green-2);
    box-shadow: 0 0 0 3px rgba(25, 224, 139, 0.12);
}

.admin-form__actions {
    display: flex;
    gap: 10px;
}

.admin-collection {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.admin-collection__item {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (max-width: 720px) {
    body {
        background-attachment: scroll;
    }

    .admin {
        grid-template-columns: 1fr;
    }

    .admin-nav {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .user-menu__email {
        display: none;
    }

    .nav-desktop {
        display: none;
    }

    .nav-burger {
        display: block;
    }

    .site-header__left .btn {
        font-size: 0.85rem;
    }

    .site-header__left .pill {
        font-size: 0.78rem;
        padding: 6px 10px;
    }

    .cta-long {
        display: none;
    }

    .cta-short {
        display: inline;
    }

    .site-header__left .btn,
    .site-header__right .btn,
    .user-menu__toggle {
        min-height: 44px;
    }

    .lang-switch__label {
        display: none;
    }

    .lang-switch__btn {
        padding: 10px;
        min-width: 40px;
        min-height: 44px;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .site-footer__cols {
        flex-direction: column;
    }

    .site-footer__col--right {
        text-align: left;
    }

    .bet {
        flex-direction: column;
        align-items: flex-start;
    }

    .bet__meta {
        text-align: left;
    }

    .site-header__inner {
        gap: 8px;
        padding: 10px 12px;
    }

    .site-header__left .btn,
    .site-header__right .btn {
        padding: 8px 10px;
        font-size: 0.82rem;
    }

    .site-header__brand {
        font-size: 1.2rem;
    }

    .comment-form {
        flex-direction: column;
    }

    .comment-form__input {
        width: 100%;
    }

    .comment-form__submit {
        width: 100%;
        justify-content: center;
    }
}

/* auth */
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 36px 32px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    text-align: center;
}

.auth-logo {
    display: inline-block;
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: var(--text);
    margin-bottom: 18px;
}

.auth-logo:hover {
    color: var(--text);
}

.auth-title {
    margin: 0 0 6px;
    font-size: 1.5rem;
}

.auth-subtitle {
    margin: 0 0 24px;
    color: var(--muted);
    font-size: 0.95rem;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: left;
    margin-bottom: 18px;
}

.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.auth-form label {
    color: var(--muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.auth-input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
}

.auth-input:focus {
    border-color: var(--green-2);
    box-shadow: 0 0 0 3px rgba(25, 224, 139, 0.12);
}

.auth-field--check {
    flex-direction: row;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
}

.auth-field--check input[type="checkbox"] {
    margin-top: 3px;
    accent-color: var(--green);
}

.auth-field--check label {
    flex: 1;
    font-weight: 400;
    line-height: 1.45;
}

.auth-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--muted);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 18px 0;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}

.auth-google {
    width: 100%;
    justify-content: center;
}

.auth-google__icon {
    width: 18px;
    height: 18px;
}

.auth-alt {
    margin: 20px 0 0;
    color: var(--muted);
    font-size: 0.95rem;
}

.auth-terms {
    margin: 18px 0 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.auth-card .flash {
    text-align: left;
    margin-bottom: 14px;
}

.auth-card .flash-dev a {
    word-break: break-all;
}

@media (max-width: 480px) {
    .auth-card {
        padding: 28px 20px;
    }
}

.legal {
    max-width: 760px;
    margin: 0 auto;
    color: var(--text);
}

.legal__head {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border);
}

.legal__title {
    margin: 0 0 8px;
    font-size: 1.8rem;
}

.legal__meta {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.legal__notice {
    background: var(--surface-2);
    border: 1px solid var(--pending);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 32px;
    font-size: 0.92rem;
    line-height: 1.6;
}

.legal__section {
    margin-bottom: 28px;
}

.legal__section h2 {
    font-size: 1.15rem;
    margin: 0 0 12px;
    color: var(--green);
}

.legal__section p {
    margin: 0 0 10px;
    font-size: 0.95rem;
    line-height: 1.65;
}

.legal__contact {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
}

.legal__contact li {
    padding: 2px 0;
    font-size: 0.95rem;
}

.legal__download {
    margin-top: 32px;
}

.switch input:disabled + .switch__slider {
    opacity: 0.45;
    cursor: not-allowed;
}

.feed-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
    padding: 36px 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.feed-locked__text {
    margin: 0;
    max-width: 420px;
    color: var(--muted);
    line-height: 1.6;
}

.feed-locked__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.settings-members-only {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: var(--radius);
}

.settings-members-only__title {
    font-weight: 600;
}

.settings-members-only__text {
    font-size: 0.88rem;
    color: var(--muted);
}

.settings-members-only .btn {
    margin-top: 4px;
}

.info-guide__intro {
    font-size: 1.02rem;
    line-height: 1.7;
    margin: 0 0 28px;
}

.info-guide__cta {
    margin-top: 8px;
}

.info-steps {
    list-style: none;
    counter-reset: info-step;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.info-step {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
}

.info-step__title {
    display: block;
    font-weight: 600;
    color: var(--green);
    margin-bottom: 4px;
}

.info-step p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.info-example {
    background: rgba(25, 224, 139, 0.07);
    border: 1px solid rgba(25, 224, 139, 0.3);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin: 0 0 12px;
}

.info-example__label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--green);
    margin-bottom: 6px;
}

.info-example p {
    margin: 0 0 6px;
    font-size: 0.95rem;
    line-height: 1.6;
}

.info-example p:last-child {
    margin-bottom: 0;
}

body.has-modal {
    overflow: hidden;
}

.welcome-modal {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.welcome-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 8, 5, 0.72);
    backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.welcome-modal.is-open .welcome-modal__backdrop {
    opacity: 1;
}

.welcome-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 28px 24px 24px;
    text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(12px) scale(0.98);
    opacity: 0;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.welcome-modal.is-open .welcome-modal__dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

.welcome-modal__close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    border-radius: 8px;
}

.welcome-modal__close:hover {
    color: var(--text);
}

.welcome-modal__title {
    margin: 0 0 10px;
    font-size: 1.5rem;
}

.welcome-modal__lead {
    margin: 0 0 18px;
    color: var(--text);
    line-height: 1.6;
}

.welcome-modal__trial {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid var(--green-2);
    border-radius: var(--radius);
    background: rgba(25, 224, 139, 0.09);
    color: var(--green);
    font-size: 0.94rem;
    font-weight: 600;
    line-height: 1.5;
}

.welcome-modal__cta {
    width: 100%;
    justify-content: center;
    font-size: 1.02rem;
}

.welcome-modal__login {
    margin: 14px 0 0;
    font-size: 0.92rem;
    color: var(--muted);
}

.welcome-modal__after {
    margin: 16px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    line-height: 1.6;
    color: var(--muted);
}

.results-intro {
    margin: -8px 0 20px;
    max-width: 640px;
    color: var(--muted);
    font-size: 0.95rem;
    line-height: 1.6;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 28px;
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.pagination__link,
.pagination__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 600;
    transition: transform 0.08s ease, border-color 0.2s ease, color 0.2s ease;
}

.pagination__link:hover,
.pagination__nav:hover {
    border-color: var(--green-2);
    color: var(--green);
}

.pagination__link:active,
.pagination__nav:active {
    transform: scale(0.95);
}

.pagination__link--active,
.pagination__link--active:hover {
    background: linear-gradient(135deg, var(--green), var(--green-2));
    border-color: transparent;
    color: #06120c;
    cursor: default;
}

/* stats */
.stats-summary {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 8px;
}

.stats-note {
    margin: 0 0 12px;
    color: var(--muted);
    font-size: 0.9rem;
}

.stats-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0 0 28px;
    color: var(--muted);
    font-size: 0.85rem;
}

.stats-legend__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.stats-legend .cal-day {
    width: 18px;
    height: 18px;
    aspect-ratio: auto;
}

.stats-calendar {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.cal-month {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 18px 16px;
}

.cal-month__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px 16px;
    margin-bottom: 14px;
}

.cal-month__title {
    margin: 0;
    font-size: 1.1rem;
}

.cal-month__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cal-chip {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.8rem;
    color: var(--text);
    white-space: nowrap;
}

.cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    margin-bottom: 6px;
}

.cal-weekday {
    text-align: center;
    color: var(--muted);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.cal-day {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
}

.cal-day[tabindex] {
    cursor: pointer;
}

.cal-day[tabindex]:focus-visible {
    outline: 2px solid var(--green);
    outline-offset: 2px;
}

.cal-day__tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 2px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    z-index: 5;
}

.cal-day:hover .cal-day__tip,
.cal-day:focus .cal-day__tip,
.cal-day:focus-within .cal-day__tip {
    display: block;
}

.cal-day.cal-day--positive-1 {
    background: color-mix(in srgb, var(--green) 24%, var(--surface-2));
    color: var(--text);
}

.cal-day.cal-day--positive-2 {
    background: color-mix(in srgb, var(--green) 45%, var(--surface-2));
    color: var(--text);
}

.cal-day.cal-day--positive-3 {
    background: color-mix(in srgb, var(--green) 70%, var(--surface-2));
    color: #06120c;
}

.cal-day.cal-day--positive-4 {
    background: var(--green);
    color: #06120c;
}

.cal-day.cal-day--negative-1 {
    background: color-mix(in srgb, #e0556b 24%, var(--surface-2));
    color: var(--text);
}

.cal-day.cal-day--negative-2 {
    background: color-mix(in srgb, #e0556b 45%, var(--surface-2));
    color: var(--text);
}

.cal-day.cal-day--negative-3 {
    background: color-mix(in srgb, #e0556b 70%, var(--surface-2));
    color: #1a0508;
}

.cal-day.cal-day--negative-4 {
    background: #e0556b;
    color: #1a0508;
}

.cal-day--positive {
    background: var(--green);
    color: #06120c;
}

.cal-day--negative {
    background: #e0556b;
    color: #1a0508;
}

.cal-day--neutral {
    background: var(--surface-2);
    color: var(--muted);
}

.cal-blank {
    aspect-ratio: 1;
}

.stats-widget {
    margin: 28px 0 48px;
}

.stats-widget__link {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    color: inherit;
}

.stats-widget__link:hover {
    border-color: var(--green);
}

.stats-widget__label {
    color: var(--muted);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.stats-widget__days {
    display: flex;
    gap: 6px;
}

.stats-widget__days .cal-day {
    flex: 1;
    aspect-ratio: 1;
    max-width: 48px;
    font-size: 0.72rem;
}

/* The top-level division of the site, not a pair of buttons: underlined tabs
   read as "which product am I in" without competing with the pill strips that
   navigate inside a tool page. */
.product-switch {
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0 16px 4px;
    display: flex;
    justify-content: center;
    gap: 2px;
}

/* The brand row's own bottom padding would otherwise read as a gap between the
   logo and the division right under it. */
.site-header:has(.product-switch) .site-header__inner {
    padding-bottom: 2px;
}

.product-switch__tab {
    padding: 2px 10px 5px;
    border-bottom: 2px solid transparent;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.product-switch__tab:hover {
    color: var(--text);
}

.product-switch__tab--active {
    border-bottom-color: var(--green);
    color: var(--green);
}

.chooser {
    text-align: center;
    padding: 40px 0 24px;
}

.chooser__heading {
    font-size: clamp(1.8rem, 6vw, 2.6rem);
    font-weight: 800;
    margin: 0;
}

.chooser__lead {
    margin: 12px auto 32px;
    max-width: 44ch;
    color: var(--muted);
}

.chooser__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.chooser__card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 28px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-align: left;
}

.chooser__card:hover {
    border-color: var(--green-2);
    color: var(--text);
}

.chooser__card--primary {
    border-color: var(--green-2);
    background: var(--surface-2);
}

.chooser__badge {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(25, 224, 139, 0.14);
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chooser__title {
    font-size: 1.4rem;
    font-weight: 800;
}

.chooser__claim {
    color: var(--muted);
    font-size: 0.92rem;
}

.chooser__cta {
    margin-top: auto;
    padding-top: 12px;
    color: var(--green);
    font-weight: 700;
}

.chooser__pricing {
    display: inline-block;
    margin-top: 28px;
    color: var(--muted);
    font-size: 0.9rem;
}

.chooser__pricing:hover {
    color: var(--green);
}

/* The heading used to stand alone on a phone screen, which read as the whole
   page — the first card and its button have to start before the fold. */
.pricing {
    padding: 14px 0 0;
}

.pricing__heading {
    font-size: clamp(1.8rem, 6vw, 2.4rem);
    font-weight: 800;
    margin: 0;
    text-align: center;
}

.pricing__lead {
    max-width: 46ch;
    margin: 8px auto 18px;
    color: var(--muted);
    text-align: center;
}

.pricing__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    align-items: stretch;
}

.pricing__note {
    margin: 28px auto 0;
    max-width: 60ch;
    color: var(--muted);
    font-size: 0.85rem;
    text-align: center;
}

.plan-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.plan-card--featured {
    border-color: var(--green-2);
    background: var(--surface-2);
}

.plan-card__badge {
    align-self: flex-start;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(25, 224, 139, 0.14);
    color: var(--green);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.plan-card__badge--value {
    background: rgba(255, 179, 0, 0.14);
    color: var(--pending);
}

.plan-card__title {
    font-size: 1.25rem;
    font-weight: 800;
    margin: 0;
}

.plan-card__claim {
    margin: 0;
    color: var(--muted);
    font-size: 0.9rem;
}

.plan-card__price {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 4px;
}

.plan-card__amount {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--green);
}

.plan-card__period {
    color: var(--muted);
    font-size: 0.85rem;
}

.plan-card__features {
    margin: 8px 0 0;
    padding: 0 0 0 18px;
    color: var(--text);
    font-size: 0.9rem;
}

.plan-card__features li {
    margin-bottom: 6px;
}

.plan-card__savings {
    margin: 0;
    color: var(--pending);
    font-size: 0.85rem;
    font-weight: 600;
}

.plan-card__cta,
.plan-card__owned {
    margin-top: auto;
    align-self: stretch;
    text-align: center;
}

.plan-card__unavailable {
    margin-top: auto;
    color: var(--muted);
    font-size: 0.85rem;
}

.mc-hero {
    text-align: center;
    padding: 48px 0 24px;
}

.mc-hero__heading {
    font-size: clamp(1.9rem, 7vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin: 0;
}

.mc-hero__lead {
    margin: 16px auto 0;
    max-width: 62ch;
    color: var(--muted);
    font-size: clamp(0.95rem, 2.6vw, 1.1rem);
}

.mc-hero__lead--flush {
    margin-left: 0;
}

.mc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 24px 0 28px;
}

.mc-sports {
    margin-top: 40px;
}

.mc-sports__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
}

.mc-sport-card {
    padding: 18px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.mc-sport-card__title {
    margin: 0 0 6px;
    font-size: 1.05rem;
    font-weight: 800;
}

.mc-sport-card__description {
    margin: 0 0 8px;
    font-size: 0.9rem;
}

.mc-sport-card__leagues {
    margin: 0;
    color: var(--muted);
    font-size: 0.82rem;
}

.mc-note {
    margin-top: 20px;
    color: var(--muted);
    font-size: 0.8rem;
    text-align: center;
}

@media (max-width: 720px) {
    .pricing__grid {
        grid-template-columns: 1fr;
    }

    .pricing__heading {
        font-size: clamp(1.5rem, 5.4vw, 1.9rem);
    }

    .chooser__grid,
    .mc-sports__grid {
        grid-template-columns: 1fr;
    }
}

.admin-subheading {
    margin-top: 32px;
}

.admin-error-cell {
    max-width: 320px;
    color: var(--loss);
    font-size: 0.8rem;
    overflow-wrap: anywhere;
}

.mc-breadcrumb {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
    color: var(--muted);
    font-size: 0.78rem;
}

.mc-hero__heading--compact {
    font-size: clamp(1.15rem, 3.6vw, 1.5rem);
    margin: 0 0 10px;
}

.mc-paywall {
    text-align: center;
    padding: 48px 0;
}

.mc-paywall__heading {
    font-size: clamp(1.6rem, 5vw, 2.2rem);
    margin: 0 0 12px;
}

.mc-paywall__lead {
    max-width: 52ch;
    margin: 0 auto 28px;
    color: var(--muted);
}

.mc-paywall__preview {
    display: grid;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto 28px;
}

.mc-paywall__row {
    height: 18px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2), var(--surface));
    filter: blur(2px);
    opacity: 0.7;
}

.mc-locked {
    margin-top: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--surface);
    text-align: left;
}

.mc-locked__bar {
    display: flex;
    gap: 6px;
    padding: 8px;
    overflow-x: auto;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    scrollbar-width: none;
}

.mc-locked__bar::-webkit-scrollbar {
    display: none;
}

.mc-locked__tab {
    flex: none;
    padding: 7px 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--muted);
    white-space: nowrap;
}

.mc-locked__panel {
    position: relative;
    padding: 18px;
}

.mc-locked__rows {
    display: grid;
    gap: 12px;
    padding: 4px 0 22px;
}

.mc-locked__row {
    height: 20px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--surface-2), var(--border), var(--surface-2));
    filter: blur(3px);
    opacity: 0.75;
}

.mc-locked__row:nth-child(2) {
    width: 82%;
}

.mc-locked__row:nth-child(3) {
    width: 64%;
}

.mc-locked__row:nth-child(4) {
    width: 74%;
}

.mc-locked__offer {
    position: relative;
    text-align: center;
    padding: 4px 0 6px;
}

.mc-locked__heading {
    font-size: clamp(1.1rem, 3.4vw, 1.35rem);
    font-weight: 800;
    margin: 0 0 6px;
}

.mc-locked__lead {
    max-width: 46ch;
    margin: 0 auto 16px;
    color: var(--muted);
    font-size: 0.92rem;
}

.mc-locked__note {
    margin: 10px 0 0;
    font-size: 0.8rem;
    color: var(--muted);
}

.mc-locked__login {
    margin: 6px 0 0;
    font-size: 0.86rem;
    color: var(--muted);
}

.mc-market {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
}

.mc-market__title {
    margin: 0 0 10px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.mc-market__grid {
    display: grid;
    grid-template-columns: auto 1fr 1fr;
    gap: 6px 14px;
    align-items: baseline;
}

.mc-market__head {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.mc-market__label {
    font-weight: 800;
    color: var(--muted);
}

.mc-market__value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.mc-market__value--model {
    color: var(--green);
}

.mc-market__note {
    margin: 10px 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--muted);
}

.mc-frozen {
    border-left: 3px solid var(--pending);
}

.mc-frozen__score {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
    margin: 0 0 6px;
}

.mc-frozen__label {
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.mc-frozen__value {
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mc-frozen__outcome {
    font-size: 0.86rem;
    color: var(--muted);
}

.mc-frozen__said {
    margin: 0 0 12px;
    font-size: 0.92rem;
    color: var(--green);
    font-weight: 700;
}

.mc-frozen__grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px 14px;
    padding: 10px 0 0;
    border-top: 1px solid var(--border);
}

.mc-frozen__key {
    font-size: 0.88rem;
    color: var(--muted);
}

.mc-frozen__num {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mc-frozen__note {
    margin: 10px 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--muted);
}

.mc-fixtures {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px;
}

.mc-fixtures__link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 12px;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-2);
    text-decoration: none;
    color: var(--text);
}

.mc-fixtures__link:hover {
    border-color: var(--green);
}

.mc-fixtures__teams {
    font-weight: 700;
}

.mc-fixtures__when {
    font-size: 0.8rem;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.mc-featured__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 8px;
}

.mc-featured__when {
    font-size: 0.85rem;
    color: var(--muted);
}

.mc-featured__teams {
    margin: 0 0 12px;
    font-size: clamp(1.15rem, 3.8vw, 1.5rem);
}

.mc-featured__sample {
    margin: 12px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--muted);
}

.mc-hero__note {
    margin: 12px 0 0;
    font-size: 0.85rem;
    color: var(--muted);
}

.mc-landing-trust {
    margin-top: 26px;
}

.mc-plain-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 10px;
    color: var(--muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

.mc-plain-list li {
    padding-left: 16px;
    position: relative;
}

.mc-plain-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
}

.mc-sport-card__leagues a {
    color: var(--muted);
    text-decoration: none;
}

.mc-sport-card__leagues a:hover {
    color: var(--green);
    text-decoration: underline;
}

.mc-leagues__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.mc-leagues__list li {
    padding: 10px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.9rem;
}

.mc-leagues__country {
    color: var(--muted);
}

.mc-leagues__list a {
    color: var(--text);
    text-decoration: none;
}

.mc-leagues__list a:hover,
.mc-leagues__list a:focus-visible {
    color: var(--green);
    text-decoration: underline;
}

.mc-hero--home {
    margin-top: 8px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.mc-reasons {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: grid;
    gap: 3px;
    color: var(--muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.mc-reasons li::before {
    content: '· ';
}

.mc-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 10px 12px;
    align-items: end;
    padding: 14px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 14px;
}

.mc-picker__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--muted);
}

.mc-picker select,
.mc-limit__line input {
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text);
    font-size: 0.95rem;
}

.mc-model,
.mc-board {
    margin-bottom: 12px;
    padding: 14px;
    background: linear-gradient(180deg, var(--surface), var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgb(0 0 0 / 40%);
}

.mc-board > .section-heading,
.mc-model > .section-heading,
.mc-board__head .section-heading {
    margin: 0 0 10px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--green);
}

.mc-board--accent {
    border-color: var(--green);
    box-shadow: 0 0 12px rgb(25 224 139 / 18%);
}

.mc-board--warn {
    border-left: 3px solid var(--pending);
}

.mc-board--warn > .section-heading {
    color: var(--pending);
}

.mc-boards {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}

.mc-boards--2 {
    grid-template-columns: repeat(2, 1fr);
}

.mc-boards--3 {
    grid-template-columns: repeat(3, 1fr);
}

.mc-boards > .mc-board {
    margin-bottom: 0;
}

@media (max-width: 820px) {
    .mc-boards--2,
    .mc-boards--3 {
        grid-template-columns: 1fr;
    }
}

.mc-board--split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

@media (max-width: 820px) {
    .mc-board--split {
        grid-template-columns: 1fr;
    }
}

/* Written as both <p> and <div> across the sports; without the reset the
   paragraphs carry the browser's 1em and the same board is 43px taller in
   football than in hockey. */
.mc-stat-big {
    margin: 0 0 2px;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.mc-stat-sub {
    margin-top: 4px;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--muted);
}

.mc-subgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.mc-subcard {
    padding: 10px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.mc-subcard__title {
    margin: 0 0 5px;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.mc-verdict {
    margin-bottom: 10px;
    padding: 8px 11px;
    background: rgb(25 224 139 / 8%);
    border: 1px solid var(--border);
    border-left: 3px solid var(--green);
    border-radius: 8px;
    font-size: 0.88rem;
}

.mc-probbar {
    display: flex;
    height: 26px;
    margin: 10px 0 5px;
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: hidden;
}

.mc-probbar__seg {
    display: flex;
    align-items: center;
    padding: 0 9px;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
}

.mc-probbar__seg--a {
    justify-content: flex-start;
    background: linear-gradient(90deg, #0f9d58, #19e08b);
}

.mc-probbar__seg--b {
    justify-content: flex-end;
    background: linear-gradient(90deg, #7a4b52, #b9666f);
}

.mc-probrow {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 0.74rem;
    color: var(--muted);
}

.mc-pill {
    display: inline-block;
    padding: 4px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--green);
}

.mc-streak {
    display: flex;
    gap: 5px;
    align-items: center;
    flex-wrap: wrap;
}

.mc-streak__name {
    min-width: 120px;
    font-weight: 600;
}

.mc-streak__rate {
    margin-left: 6px;
    font-size: 0.78rem;
    color: var(--muted);
}

.mc-matchup {
    margin-bottom: 12px;
    text-align: center;
}

.mc-matchup__title {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    margin: 0;
    font-size: clamp(0.98rem, 2.8vw, 1.2rem);
    font-weight: 800;
}

.mc-matchup__side--a {
    color: var(--green);
}

.mc-matchup__side--b {
    color: #e0949c;
}

.mc-matchup__vs {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--muted);
}

.mc-matchup__context {
    margin: 5px 0 0;
    font-size: 0.78rem;
    color: var(--muted);
}

.mc-verdict-pick {
    display: flex;
    gap: 10px;
    align-items: baseline;
    flex-wrap: wrap;
}

.mc-verdict-pick__name {
    font-size: 1rem;
    font-weight: 800;
}

.mc-verdict-pick__value {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.mc-probbar__seg--draw {
    justify-content: center;
    background: linear-gradient(90deg, #3a423a, #4c574c);
}

.mc-probrow__item--a {
    color: var(--green);
}

.mc-probrow__item--b {
    color: #e0949c;
}

.mc-note-inline--warn {
    padding: 10px 12px;
    background: rgb(255 179 0 / 8%);
    border-left: 3px solid var(--pending);
    border-radius: 8px;
    color: var(--text);
}

.mc-outcome__cell.is-favourite {
    border-color: var(--green);
    box-shadow: 0 0 12px rgb(25 224 139 / 18%);
}

.mc-details {
    margin-bottom: 12px;
}

.mc-details > summary {
    padding: 9px 13px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.mc-details[open] > summary {
    margin-bottom: 10px;
}

.mc-outcome {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.mc-outcome--two {
    grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 560px) {
    .mc-outcome,
    .mc-outcome--two {
        grid-template-columns: 1fr;
    }
}

.mc-outcome__cell {
    padding: 11px 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.mc-outcome__label {
    display: block;
    color: var(--muted);
    font-size: 0.78rem;
}

.mc-outcome__value {
    display: block;
    margin-top: 3px;
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--green);
    font-variant-numeric: tabular-nums;
}

.mc-inline-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 4px 20px;
    margin: 10px 0 0;
    font-size: 0.82rem;
}

.mc-inline-stats div {
    display: flex;
    gap: 6px;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.mc-inline-stats dt {
    color: var(--muted);
}

.mc-inline-stats dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.mc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.mc-table th,
.mc-table td {
    padding: 5px 9px;
    border-bottom: 1px solid var(--border);
    text-align: left;
}

.mc-table td {
    font-variant-numeric: tabular-nums;
}

.mc-table th {
    color: var(--muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.mc-scores {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
}

.mc-scores li {
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
}

.mc-scores__score {
    display: block;
    font-weight: 800;
}

.mc-scores__prob {
    display: block;
    color: var(--green);
    font-size: 0.85rem;
}

.mc-limit {
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid var(--border);
}

.mc-limit__title {
    margin: 0 0 8px;
    font-size: 0.92rem;
}

.mc-limit__scopes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
}

.mc-limit__scope {
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.mc-limit__head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 0.8rem;
}

.mc-limit__label {
    font-weight: 600;
}

.mc-limit__expected {
    color: var(--muted);
}

.mc-limit__form {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.mc-limit__line input {
    width: 90px;
}

.mc-limit__probs {
    display: flex;
    gap: 12px;
    font-weight: 700;
}

.mc-limit__over {
    color: var(--green);
}

.mc-limit__under {
    color: var(--muted);
}

.mc-limit__meta,
.mc-note-inline {
    margin: 6px 0 0;
    color: var(--muted);
    font-size: 0.76rem;
}

/* Two or more paragraphs of prose in a row stop being an annotation and start
   being a wall, so they fold. One paragraph stays where it is. */
.mc-howto {
    margin: 6px 0 0;
}

.mc-howto > summary {
    color: var(--muted);
    font-size: 0.76rem;
    cursor: pointer;
}

.mc-howto[open] > summary {
    margin-bottom: 4px;
}

.mc-series {
    display: flex;
    gap: 8px;
    align-items: baseline;
    margin-top: 6px;
    font-size: 0.8rem;
}

.mc-series__label {
    color: var(--muted);
    min-width: 90px;
}

.mc-series__value {
    display: inline-block;
    min-width: 22px;
    padding: 1px 4px;
    border-radius: 4px;
    background: var(--surface-2);
    text-align: center;
}

.mc-series__value--venue {
    background: rgba(25, 224, 139, 0.16);
    color: var(--green);
}

/* Counts behind a line: broad first, then narrower, recoloured by how often
   the slice actually beat the line that is on screen. */
.mc-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
}

.mc-chips__label {
    font-size: 11px;
    color: var(--muted);
    min-width: 90px;
}

.mc-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
}

.mc-chip b {
    color: var(--text);
    font-weight: 700;
}

.mc-chip__muted {
    color: var(--muted);
}

.mc-chip--hot {
    border-color: var(--green-2);
    background: rgba(25, 224, 139, 0.12);
}

.mc-chip--hot b {
    color: var(--green);
}

.mc-chip--cold {
    border-color: rgba(233, 108, 108, 0.45);
    background: rgba(233, 108, 108, 0.10);
}

.mc-chip--thin {
    opacity: 0.55;
}

.mc-evidence__subheading {
    margin: 12px 0 5px;
    font-size: 0.85rem;
}

.mc-form {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mc-form__row {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.8rem;
}

.mc-form__badge {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    font-weight: 800;
    font-size: 0.75rem;
}

.mc-form__badge--w {
    background: rgba(25, 224, 139, 0.18);
    color: var(--win);
}

.mc-form__badge--d {
    background: rgba(154, 163, 154, 0.18);
    color: var(--refund);
}

.mc-form__badge--l {
    background: rgba(239, 83, 80, 0.18);
    color: var(--loss);
}

.mc-form__date {
    flex: 0 0 auto;
    color: var(--muted);
    min-width: 66px;
    font-variant-numeric: tabular-nums;
}

.mc-form__teams {
    flex: 1 1 auto;
}

.mc-form__score {
    font-weight: 700;
}

.mc-fixtures {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mc-fixtures li a {
    display: flex;
    gap: 12px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.85rem;
}

.mc-fixtures li a:hover {
    color: var(--green);
}

.mc-fixtures__date {
    color: var(--muted);
    min-width: 80px;
}

.mc-fixtures__league {
    color: var(--muted);
    min-width: 110px;
}

.mc-muted {
    color: var(--muted);
}

@media (max-width: 720px) {
    .mc-board--split,
    .mc-leagues__list {
        grid-template-columns: 1fr;
    }
}

/* An editable line: the number, the steppers, and everything it prices. */

.mc-line__form {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
}

.mc-line__step {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text);
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.mc-line__step:hover {
    border-color: var(--green-2);
    color: var(--green);
}

.mc-line__value input {
    width: 68px;
    text-align: center;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.mc-line__reset {
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
}

.mc-line__reset:hover {
    color: var(--green);
}

.mc-line--live .mc-line__reset {
    visibility: hidden;
}

.mc-line--live.mc-line--edited .mc-line__reset {
    visibility: visible;
}

.mc-line--edited .mc-line__value input {
    border-color: var(--green-2);
    color: var(--green);
}

.mc-line__probs {
    display: flex;
    gap: 8px;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
}

.mc-line__pill {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    padding: 3px 9px;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
}

.mc-line__pill:hover {
    border-color: var(--green-2);
    color: var(--text);
}

.mc-line__pill.is-picked {
    border-color: var(--green-2);
    color: var(--green);
}

.mc-line__meta {
    margin: 5px 0 0;
    font-size: 11px;
    color: var(--muted);
}

/* Team switcher above the possession line: one payload, mirrored client-side. */
.mc-line__flip {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.mc-line__flip-btn {
    padding: 4px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.mc-line__flip-btn:hover {
    border-color: var(--green-2);
    color: var(--text);
}

.mc-line__flip-btn.is-picked {
    border-color: var(--green-2);
    color: var(--green);
}

/* Type-ahead in front of the long team and player lists. */
.mc-picker__search {
    position: relative;
}

.mc-picker__input {
    width: 100%;
}

.mc-picker__list {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 4px;
    list-style: none;
    max-height: 260px;
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.mc-picker__item {
    padding: 6px 8px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
}

.mc-picker__item:hover,
.mc-picker__item.is-active {
    background: var(--surface-2);
    color: var(--green);
}

/* A player line: who, the line itself, and the numbers it rests on beside it. */
.mc-kill {
    padding: 9px 0;
    border-top: 1px solid var(--border);
}

.mc-kill__body {
    display: grid;
    grid-template-columns: 1fr 1.6fr 1.4fr;
    gap: 12px;
    align-items: start;
}

.mc-kill__name {
    font-weight: 700;
    display: block;
}

.mc-kill__meta {
    font-size: 11px;
    color: var(--muted);
}

.mc-kill__line .mc-line {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

.mc-kill__basis {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.mc-kill__basis div {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.mc-kill__basis dt {
    color: var(--muted);
}

.mc-kill__basis dd {
    margin: 0;
    font-weight: 600;
}

/* One count per line: stacked they read as a list the eye can run down instead
   of six chips wrapping across the column. */
.mc-kill__line .mc-chips {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.mc-kill__line .mc-chips__label {
    align-self: flex-start;
}

/* A folded card has to answer without being opened: who, where the line sits,
   which way it leans and how strongly — enough to choose a player from ten. */
.mc-kill__summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 3px 10px;
    padding: 2px 0;
    cursor: pointer;
    font-variant-numeric: tabular-nums;
}

.mc-kill__summary-name {
    font-weight: 700;
}

.mc-kill__summary .mc-kill__team {
    display: inline;
}

.mc-kill__summary-average,
.mc-kill__summary-pick {
    font-size: 12px;
    color: var(--muted);
}

.mc-kill__summary-pick b {
    color: var(--text);
}

.mc-fold > summary {
    list-style: none;
}

/* An open card already carries the average, the pills and the tier below, so
   the row above stops repeating them and keeps only who it is. */
.mc-kill[open] > .mc-kill__summary .mc-kill__summary-average,
.mc-kill[open] > .mc-kill__summary .mc-kill__summary-pick,
.mc-kill[open] > .mc-kill__summary [data-mc-signal-tier] {
    display: none;
}

.mc-fold > summary::-webkit-details-marker {
    display: none;
}

.mc-fold > summary::after {
    content: '▾';
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
}

.mc-fold[open] > summary::after {
    content: '▴';
}

/* What a phone hides behind a tap has room on a wide screen, so there every
   fold is open. The card's handle is a phone-only affordance and is not drawn
   at all; the signal's handle is its own head and stays. The width is published
   as a property because the script reads it back to decide which folds to open
   — the media query below is its only other reader. */
:root {
    --mc-fold-open-from: 861px;
}

@media (min-width: 861px) {
    .mc-kill > summary {
        display: none;
    }
}

/* The line can be moved from the collapsed row, so the buttons sit inside the
   summary. They stop the click from reaching it, or every nudge would also
   open the card. */
.mc-kill__summary-step {
    min-width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

.mc-signal__fold > summary {
    cursor: pointer;
}

.mc-signal__fold[open] > summary {
    margin-bottom: 2px;
}

@media (max-width: 860px) {
    .mc-kill__body {
        grid-template-columns: 1fr;
    }

    .mc-kill__line .mc-chips {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

/* The line itself is the thing the reader touches, so it reads as a control
   rather than as a form field on a page: dark, framed, and lit when moved. */
.mc-line {
    border: 1px solid var(--border);
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(0, 0, 0, 0.14));
    padding: 8px 10px;
    margin-top: 8px;
}

.mc-line__value input {
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 4px 7px;
    font-size: 14px;
}

.mc-line__value input {
    -moz-appearance: textfield;
    appearance: textfield;
}

.mc-line__value input::-webkit-outer-spin-button,
.mc-line__value input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mc-line--edited {
    border-color: var(--green-2);
    box-shadow: 0 0 0 1px rgba(25, 224, 139, 0.18) inset;
}

.mc-line__probs {
    font-size: 13.5px;
}

/* Which team a player belongs to, at a glance. */
.mc-kill {
    border-left: 3px solid transparent;
    padding-left: 10px;
}

.mc-kill--a {
    border-left-color: #4d8bf0;
}

.mc-kill--b {
    border-left-color: #e0645a;
}

.mc-kill__team {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
}

.mc-kill--a .mc-kill__team {
    color: #7fb0f5;
}

.mc-kill--b .mc-kill__team {
    color: #f09189;
}

.mc-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.mc-table--compact td,
.mc-table--compact th {
    padding: 4px 7px;
    font-size: 0.78rem;
}

.mc-table--compact th {
    font-size: 0.7rem;
}

.mc-table tr.is-win td:first-child {
    border-left: 3px solid var(--green-2);
}

.mc-table tr.is-loss td:first-child {
    border-left: 3px solid rgba(233, 108, 108, 0.6);
}

.mc-table tr.is-recommended {
    background: rgb(25 224 139 / 10%);
}

.mc-table tr.is-recommended td:first-child {
    border-left: 3px solid var(--green);
}

.mc-table td.is-good {
    color: var(--green);
    font-weight: 700;
}

/* The conditions behind a player line, spanning the whole row under it. */
.mc-signal {
    grid-column: 1 / -1;
    margin-top: 8px;
    padding: 8px 10px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.mc-signal--t1 {
    border-color: #4a7bd0;
    background: rgb(74 123 208 / 8%);
}

.mc-signal--t2 {
    border-color: #d9a441;
    background: rgb(217 164 65 / 10%);
}

.mc-signal--t3 {
    border-color: var(--green);
    background: rgb(25 224 139 / 14%);
}

.mc-signal__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.mc-signal__tier {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--border);
    color: var(--text);
    font-size: 10px;
    font-weight: 800;
    cursor: help;
}

.mc-signal__tier--t1 {
    background: #4a7bd0;
    color: #fff;
}

.mc-signal__tier--t2 {
    background: #d9a441;
    color: #10130f;
}

.mc-signal__tier--t3 {
    background: var(--green);
    color: #10130f;
}

.mc-signal__bound {
    font-size: 11px;
    color: var(--muted);
    cursor: help;
}

.mc-signal__met {
    margin-left: auto;
    font-size: 11px;
    color: var(--muted);
    cursor: help;
}

.mc-signal__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 6px;
}

.mc-sig-chip {
    padding: 1px 8px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--muted);
    font-size: 10.5px;
    line-height: 1.7;
}

.mc-sig-chip.is-on {
    border-color: rgb(25 224 139 / 50%);
    background: rgb(25 224 139 / 12%);
    color: var(--green);
}

.mc-sig-chip--lever {
    border-color: var(--green);
    background: rgb(25 224 139 / 10%);
    color: var(--text);
    font-weight: 700;
}

.mc-sig-chip--warn {
    border-color: rgb(255 179 0 / 50%);
    background: rgb(255 179 0 / 12%);
    color: var(--pending);
    font-weight: 700;
}

/* The draft as a board: one row per role, the two players who face each other
   side by side. */
.mc-roles {
    display: grid;
    gap: 12px;
}

.mc-roles__head {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 8px 58px;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

@media (max-width: 720px) {
    .mc-roles__head {
        display: none;
    }
}

.mc-kill__badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 999px;
    border: 1px solid;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    cursor: help;
    vertical-align: middle;
}

.mc-kill__badge--top {
    color: var(--green);
    border-color: rgb(25 224 139 / 45%);
    background: rgb(25 224 139 / 12%);
}

.mc-kill__badge--edge {
    color: var(--pending);
    border-color: rgb(255 179 0 / 45%);
    background: rgb(255 179 0 / 10%);
}

.mc-role {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    background: var(--surface);
}

.mc-role__tag {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 8px;
}

.mc-role__sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.mc-role__side {
    border-left: 3px solid transparent;
    padding-left: 10px;
}

@media (max-width: 860px) {
    .mc-role__sides {
        grid-template-columns: 1fr;
    }
}

/* The draft board: both sides, five roles each. */
.mc-draft__sides {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.mc-draft__side {
    border-left: 3px solid transparent;
    padding-left: 12px;
}

.mc-draft__slot {
    display: grid;
    grid-template-columns: 70px 1fr 1.4fr;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--border);
}

.mc-draft__slot .mc-role__tag {
    margin: 0;
}

.mc-draft__actions {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    margin-top: 14px;
    flex-wrap: wrap;
}

.mc-draft__score {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.mc-draft__score input {
    width: 56px;
    text-align: center;
}

@media (max-width: 860px) {
    .mc-draft__sides {
        grid-template-columns: 1fr;
    }

    .mc-draft__slot {
        grid-template-columns: 60px 1fr;
    }

    /* Three cells in two columns puts the champion picker in the 60px role
       column; it needs the whole row instead. */
    .mc-draft__slot .mc-picker__field {
        grid-column: 1 / -1;
    }
}

.mc-board__tools {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}

.mc-edge-toggle {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 0.8rem;
    color: var(--muted);
    cursor: pointer;
}

.mc-edge-toggle__count {
    padding: 1px 7px;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--green);
}

.mc-tabs {
    margin-bottom: 12px;
}

.mc-tabs__bar {
    position: sticky;
    top: var(--mc-sticky-top, 0px);
    z-index: 20;
    transition: top 0.22s ease;
    display: flex;
    gap: 5px;
    margin: 0 0 10px;
    padding: 6px 0;
    overflow-x: auto;
    scrollbar-width: none;
    background: rgba(10, 13, 10, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.mc-tabs__bar::-webkit-scrollbar {
    display: none;
}

/* The strip inside a board does NOT pin. Two pinned rows over each other eat
   most of a phone's screen and make it unclear which one a tap belongs to, so
   the inner one scrolls away with its board. */
.mc-tabs__bar--nested {
    position: static;
    z-index: auto;
    margin-bottom: 10px;
    padding: 6px 0;
    background: none;
    backdrop-filter: none;
    border-bottom: none;
}

/* The scrollbar is hidden, so an overflowing strip fades at the edge it can
   still be scrolled toward — the class is set from the script, which is the
   only thing that can measure it. */
.mc-tabs__bar.is-scrollable {
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}

.mc-tabs__bar.is-scrollable.is-scrolled-end {
    mask-image: none;
}

.mc-tabs__tab {
    flex: 0 0 auto;
    padding: 6px 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--muted);
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.mc-tabs__bar--nested .mc-tabs__tab {
    padding: 5px 10px;
    font-size: 0.74rem;
}

.mc-tabs__tab:hover {
    color: var(--text);
    border-color: var(--green-2);
}

.mc-tabs__tab.is-active {
    background: rgba(25, 224, 139, 0.14);
    border-color: var(--green);
    color: var(--green);
}

.mc-tabs__panel:focus {
    outline: none;
}

.mc-tabs__panel > .mc-board:last-child,
.mc-tabs__panel > .mc-boards:last-child {
    margin-bottom: 0;
}

.mc-collapse {
    margin-bottom: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.mc-collapse > summary {
    padding: 9px 13px;
    color: var(--muted);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.mc-collapse > summary::-webkit-details-marker {
    display: none;
}

.mc-collapse > summary::before {
    content: '▸ ';
    color: var(--green);
}

.mc-collapse[open] > summary::before {
    content: '▾ ';
}

.mc-collapse > summary:hover {
    color: var(--text);
}

.mc-collapse .mc-picker {
    margin-bottom: 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
}

.mc-collapse .mc-picker + .mc-picker {
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 560px) {
    /* Full-bleed strip: the negative margin has to match the page gutter
       exactly, or the bar pushes the document wider than the viewport. */
    .mc-tabs__bar {
        margin-left: calc(-1 * var(--mc-gutter, 16px));
        margin-right: calc(-1 * var(--mc-gutter, 16px));
        padding-left: var(--mc-gutter, 16px);
        padding-right: var(--mc-gutter, 16px);
    }

}

.mc-scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.mc-scroll + .mc-scroll {
    margin-top: 12px;
}

@media (max-width: 720px) {
    .mc-scroll > .mc-table {
        width: max-content;
        min-width: 100%;
    }

    .mc-scroll > .mc-table td {
        white-space: nowrap;
    }

    /* Numbers must not break, but the headers are where the width comes from:
       most of these tables put a full team or athlete name in a th, and two of
       those nowrapped is what pushes a four-column board past two screens. */
    .mc-scroll > .mc-table th {
        white-space: normal;
        overflow-wrap: break-word;
        max-width: 14ch;
    }
}

.mc-board > :last-child,
.mc-subcard > :last-child {
    margin-bottom: 0;
}

.mc-subcard {
    display: flex;
    flex-direction: column;
}

.mc-subcard > .mc-stat-sub:last-child {
    margin-top: auto;
    padding-top: 6px;
}

.mc-limit__head {
    flex-wrap: wrap;
    align-items: baseline;
}

.mc-tabs__panel.mc-limit {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.mc-tabs__panel > .mc-limit__title {
    display: none;
}

.mc-limit__scope .mc-line__probs,
.mc-kill__line .mc-line__probs {
    gap: 10px;
}

.mc-limit__scope .mc-line__pill,
.mc-kill__line .mc-line__pill {
    flex: 1 1 0;
    justify-content: center;
}

.page--match-checker {
    --mc-gutter: 16px;
    padding: 14px var(--mc-gutter) 40px;
}


.page--match-checker .section-heading {
    margin-top: 0;
}

/* Form controls in the picker: one shape for the native selects, the type-ahead
   input and the number fields, so a row of them reads as a single control bar. */
.mc-picker__field > span {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--muted);
}

.mc-picker select,
.mc-picker__field select,
.mc-picker__input,
.mc-draft__score input {
    width: 100%;
    min-height: 38px;
    padding: 8px 11px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 9px;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.mc-picker select,
.mc-picker__field select {
    appearance: none;
    padding-right: 32px;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 17px) calc(50% + 2px), calc(100% - 12px) calc(50% + 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.mc-picker select:hover,
.mc-picker__field select:hover,
.mc-picker__input:hover {
    border-color: var(--green-2);
}

.mc-picker select:focus,
.mc-picker__field select:focus,
.mc-picker__input:focus,
.mc-line__value input:focus,
.mc-draft__score input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgb(25 224 139 / 15%);
}

.mc-picker__input {
    padding-left: 31px;
    padding-right: 32px;
    text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%238a978a' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='4.2'/%3E%3Cpath d='M10.3 10.3 14 14' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px 50%;
    background-size: 15px 15px;
}

.mc-picker__input::placeholder {
    color: var(--muted);
    opacity: 0.75;
}

.mc-picker__clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--muted);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.mc-picker__clear:hover {
    background: var(--surface-2);
    color: var(--text);
}

.mc-picker__list {
    margin-top: 6px;
    padding: 5px;
    border-radius: 11px;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.mc-picker__item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 0.85rem;
    line-height: 1.3;
}

.mc-picker__item b {
    color: var(--green);
    font-weight: 700;
}

.mc-picker__item.is-active b {
    color: inherit;
}

.mc-picker__name {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc-picker__hint {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}

.mc-picker__empty {
    padding: 9px 10px;
    color: var(--muted);
    font-size: 0.82rem;
}

/* A club crest, a team logo or a champion portrait. Sources are third-party and
   about a third of them are missing, so the monogram is the layout — the image
   sits on top of it and simply does not paint when the URL is dead. */
.mc-crest {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--crest-size, 22px);
    height: var(--crest-size, 22px);
    border-radius: 6px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: calc(var(--crest-size, 22px) * 0.42);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    overflow: hidden;
    vertical-align: middle;
}

.mc-crest__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 2px;
    background: var(--surface-2);
}

.mc-crest--lg {
    --crest-size: 30px;
    border-radius: 8px;
}

.mc-crest--sm {
    --crest-size: 18px;
    border-radius: 5px;
}

.mc-matchup__side,
.mc-team {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    max-width: 100%;
}

/* "Colorado Avalanche (doma)" has to be able to break on a 360px screen, so the
   name wraps rather than being clipped — only the picker list, where every row
   is one line, gets the ellipsis treatment. */
.mc-team__name {
    min-width: 0;
    overflow-wrap: anywhere;
}

.mc-paywall__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

/* Grid and flex children default to min-width:auto, so one unbreakable cell
   inside a board makes the board itself wider than the track it sits in and
   the whole page scrolls sideways. The scrollers inside handle the overflow. */
.mc-boards > *,
.mc-subgrid > *,
.mc-limit__scopes > *,
.mc-board--split > *,
.mc-outcome > *,
.mc-kill__body > *,
.mc-role__sides > *,
.mc-draft__sides > *,
.mc-draft__slot > * {
    min-width: 0;
}

/* A lopsided record (1-19) gives the short segment less room than its own
   padding, so it refuses to shrink and the bar lies about the split. */
.mc-probbar__seg {
    min-width: 0;
    overflow: hidden;
}

/* Structural hooks the markup uses; they own their children's layout rather
   than any box of their own. */
.mc-kill__player,
.mc-series__values {
    min-width: 0;
}

.mc-limit__series {
    margin-top: 6px;
}

.mc-series__empty {
    color: var(--muted);
    font-size: 0.78rem;
}

.mc-splitline {
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.mc-splitline b {
    color: var(--text);
}

/* The feed's empty state is a full-page notice; inside a board it is one line
   in a list, so it loses the 24px of air it has on the ticket feed. */
.page--match-checker .feed-state {
    padding: 6px 0;
    text-align: left;
    color: var(--muted);
    font-size: 0.8rem;
}

/* For the few tables whose width comes from prose in the body cells rather
   than from the headers, the cells wrap too and the table stops scrolling. */
@media (max-width: 720px) {
    .mc-scroll > .mc-table--wrap {
        width: 100%;
    }

    .mc-scroll > .mc-table--wrap td {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

@media (max-width: 720px) {
    .page--match-checker {
        --mc-gutter: 12px;
    }

    .mc-picker {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .mc-picker select,
    .mc-picker__field select,
    .mc-picker__input {
        min-height: 42px;
        font-size: 16px;
    }

    .mc-picker__list {
        max-height: 46vh;
    }

    .mc-picker__item {
        padding: 9px 8px;
        font-size: 0.88rem;
    }
}

@media (max-width: 560px) {
    .mc-tabs__bar {
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .mc-board,
    .mc-model {
        padding: 12px;
    }

    .mc-matchup__title {
        gap: 6px;
    }

    .mc-limit__head {
        flex-direction: column;
        gap: 2px;
    }

    .mc-line__form {
        gap: 4px;
    }

    .mc-line__step {
        width: 34px;
        height: 34px;
    }

    .mc-kill__basis div {
        gap: 6px;
    }

    /* The long pair wraps inside its own cell; letting the row wrap instead
       drops the score to a new line hard against the left margin. */
    .mc-form__teams {
        min-width: 0;
        overflow-wrap: break-word;
    }

    /* The density pass above is tuned for a desktop column. On a phone the
       smallest annotations fall under the ~11px that stays comfortably
       readable, so they get a floor back — the headline numbers stay small,
       which is what was actually too big. */
    .mc-chip,
    .mc-chips__label,
    .mc-line__meta,
    .mc-kill__meta,
    .mc-kill__team,
    .mc-role__tag,
    .mc-signal__bound,
    .mc-signal__met {
        font-size: 12px;
    }

    .mc-sig-chip,
    .mc-signal__tier {
        font-size: 11px;
    }

    .mc-stat-sub {
        font-size: 0.78rem;
    }

    .mc-table,
    .mc-table--compact td,
    .mc-table--compact th {
        font-size: 0.85rem;
    }

    /* Touch targets: the tab strip is the page navigation once it is pinned,
       and the pills below every line are submit buttons. */
    .mc-tabs__tab {
        min-height: 38px;
        padding: 8px 14px;
    }

    .mc-tabs__bar--nested .mc-tabs__tab {
        min-height: 34px;
    }

    .mc-line__pill {
        min-height: 34px;
        align-items: center;
    }

    .mc-line__reset {
        min-width: 34px;
        min-height: 34px;
    }
}

.mc-insight {
    margin-bottom: 12px;
    padding: 14px;
    background: linear-gradient(180deg, var(--surface), var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgb(0 0 0 / 40%);
}

.mc-insight > .section-heading {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--green);
}

.mc-insight__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0;
}

.mc-insight__cell {
    padding: 12px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.mc-insight__label {
    margin: 0 0 6px;
    color: var(--muted);
    font-size: 0.78rem;
    line-height: 1.3;
}

.mc-insight__value {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.mc-insight__note {
    margin: 12px 0 0;
    color: var(--muted);
    font-size: 0.78rem;
}

.mc-compare {
    margin-bottom: 12px;
    padding: 14px;
    background: linear-gradient(180deg, var(--surface), var(--bg));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 30px rgb(0 0 0 / 40%);
}

.mc-compare > .section-heading {
    margin: 0 0 12px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--green);
}

.mc-compare__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mc-compare__row {
    display: grid;
    grid-template-columns: minmax(110px, 1fr) 2fr auto;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px solid var(--border);
}

.mc-compare__row:last-child {
    border-bottom: 0;
}

.mc-compare__name {
    color: var(--text);
    font-size: 0.9rem;
    text-decoration: none;
}

.mc-compare__name:hover {
    color: var(--green);
}

.mc-compare__bar {
    display: block;
    height: 6px;
    background: var(--surface-2);
    border-radius: 3px;
    overflow: hidden;
}

.mc-compare__bar > span {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, var(--green-2), var(--green));
}

.mc-compare__value {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .mc-compare__row {
        grid-template-columns: 1fr auto;
    }

    .mc-compare__bar {
        display: none;
    }
}