/* =====================================================
   Football Pool — Shortcode Overrides
   World Cup 2026 Quiniela | Royale Studios

   Enqueue after 'pool-css':
   wp_enqueue_style('fp-overrides', get_stylesheet_directory_uri() . '/fp-overrides.css', ['pool-css'], '1.0');
   ===================================================== */


/* =====================================================
   1. PLUGIN RESET
   Neutralize raw plugin defaults before re-styling.
   ===================================================== */

div.ranking {
    border: none;
    padding: 0;
    margin: 0;
    max-width: 100%;
}

table.ranking,
table.pool-ranking,
table.matchinfo,
table.statistics,
table.prediction-table-questions,
table.gamesbox {
    border: none;
    border-collapse: collapse;
}

.group-ranking th.wins,  .group-ranking td.wins,
.group-ranking th.draws, .group-ranking td.draws,
.group-ranking th.losses,.group-ranking td.losses,
.group-ranking th.plays, .group-ranking td.plays,
.group-ranking th.points,.group-ranking td.points,
.group-ranking th.team,  .group-ranking td.team,
.group-ranking th.goals, .group-ranking td.goals {
    background-color: transparent;
}

table.matchinfo td a,
div.bonus a img,
div.bonus .bonus-card-footer .question-stats-link a,
div.bonus .bonus-card-footer .points a,
.matchinfo.new-layout .match-card-footer .fp-icon a,
.matchinfo.new-layout .match-card-footer .fp-icon a img {
    -webkit-box-shadow: none;
    box-shadow: none;
}


/* =====================================================
   2. POOL RANKING — [fp-user-ranking]
   ===================================================== */

table.pool-ranking,
table.ranking-shortcode {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-radius: 16px;
    --fp-ease: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    color: var(--fp-text);
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
    border-radius: var(--fp-radius);
    overflow: hidden;
    box-shadow: var(--fp-shadow-rest);
}

table.pool-ranking.ranking-page {
    max-width: 100%;
}

/* Header */
table.pool-ranking thead tr th {
    background-color: var(--fp-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: left;
    border: none;
    white-space: nowrap;
}

/* Rows */
table.pool-ranking tbody tr td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--fp-border);
    vertical-align: middle;
    color: var(--fp-text);
    border-left: none;
    border-right: none;
}

table.pool-ranking tbody tr:last-child td {
    border-bottom: none;
}

table.pool-ranking tbody tr:nth-child(even) td {
    background-color: rgba(246, 249, 252, 0.7);
}

/* Current user row */
table.pool-ranking tr.currentuser td,
#rankingsbox table.pool-ranking tr.currentuser td {
    background-color: var(--fp-accent-soft);
    font-weight: 700;
    color: var(--fp-primary);
}

table.pool-ranking tr.currentuser td a,
table.pool-ranking tr.currentuser td a:visited,
table.pool-ranking tr.currentuser td a:hover {
    color: var(--fp-primary);
    font-weight: 700;
}

/* Rank number */
table.pool-ranking td.user-rank {
    text-align: center;
    width: 36px;
    font-size: 12px;
    font-weight: 700;
    color: var(--fp-primary);
    letter-spacing: 0.02em;
}

/* Top 3 */
table.pool-ranking tbody tr:nth-child(1) td.user-rank { color: var(--fp-secondary); }
table.pool-ranking tbody tr:nth-child(2) td.user-rank { color: #94a3b8; }
table.pool-ranking tbody tr:nth-child(3) td.user-rank { color: #b45309; }

/* Score column */
table.pool-ranking td.score {
    text-align: right;
    padding-right: 16px;
    font-weight: 700;
    font-size: 15px;
    color: var(--fp-primary);
    letter-spacing: -0.02em;
}

td.num-predictions,
td.ranking.score {
    text-align: right;
}

/* Avatar */
.pool-ranking .avatar,
#sidebar .widget div.football-pool-widget .pool-ranking .avatar,
.widget div.football-pool-widget .pool-ranking .avatar {
    padding: 0 8px 0 0;
    vertical-align: middle;
}

.pool-ranking .avatar img {
    border-radius: 9999px;
    width: 28px;
    height: 28px;
    object-fit: cover;
}

span.username {
    color: var(--fp-primary);
    font-weight: 700;
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    table.pool-ranking {
        transition: none;
    }
}


/* =====================================================
   3. GROUP STANDINGS — [fp-group]
   ===================================================== */

div.ranking {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-radius: 16px;

    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-rest);
    overflow: hidden;
    margin-bottom: 24px;
    padding: 0;
}

div.ranking h2 {
    margin: 0;
    padding: 10px 16px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #ffffff;
    background-color: var(--fp-primary);
}

table.ranking {
    border: none;
    border-collapse: collapse;
    width: 100%;
}

table.ranking th {
    background-color: var(--fp-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 10px;
    border: none;
    font-style: normal;
}

table.ranking td {
    padding: 9px 10px;
    font-size: 13px;
    color: var(--fp-text);
    border-bottom: 1px solid var(--fp-border);
    text-align: center;
}

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

table.ranking tbody tr:nth-child(even) td {
    background-color: rgba(246, 249, 252, 0.7);
}

/* Team column */
.group-ranking td.team,
.group-ranking th.team {
    text-align: left;
    font-weight: 600;
    color: var(--fp-primary);
    width: auto;
    padding-left: 14px;
}

/* Points column */
.group-ranking td.points,
.group-ranking th.points {
    font-weight: 700;
    color: var(--fp-primary);
    font-size: 14px;
}

.group-ranking td.plays,
.group-ranking th.plays {
    font-weight: 600;
}

.group-ranking td.goals,
.group-ranking th.goals {
    font-size: 11px;
    padding: 9px 6px;
}

/* Qualifying accent — left border on top 2 */
table.ranking.group-ranking tbody tr:nth-child(1) td.team,
table.ranking.group-ranking tbody tr:nth-child(2) td.team {
    border-left: 3px solid var(--fp-accent);
}


/* =====================================================
   4. CLASSIC MATCH TABLE — [fp-matches], [fp-predictionform]
   ===================================================== */

/* Outer wrapper: turn the table into a card */
table.matchinfo {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-radius: 16px;
    --fp-ease: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    border-spacing: 0;
    border-collapse: collapse;
    border: none;
    width: 100%;
    max-width: 100%;
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
    border-radius: var(--fp-radius);
    overflow: hidden;
    box-shadow: var(--fp-shadow-rest);
}

/* Date / section header rows */
table.matchinfo .matchdate,
table.matchinfo th {
    background-color: var(--fp-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 9px 14px;
    line-height: 1.4;
    vertical-align: middle;
    border: none;
}

table.matchinfo th.username {
    text-align: left;
    max-width: 200px;
}

/* Body cells */
table.matchinfo td {
    padding: 10px 8px;
    border: none;
    border-bottom: 1px solid var(--fp-border);
    font-size: 14px;
    vertical-align: middle;
    color: var(--fp-text);
}

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

table.matchinfo tbody tr:nth-child(even) td {
    background-color: rgba(246, 249, 252, 0.6);
}

/* Match type label */
table.matchinfo .matchtype {
    background-color: var(--fp-accent);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border: none;
}

/* Team names */
table.matchinfo td.home {
    text-align: right;
    font-weight: 700;
    color: var(--fp-primary);
    letter-spacing: -0.01em;
    padding-right: 8px;
}

table.matchinfo td.away {
    text-align: left;
    font-weight: 700;
    color: var(--fp-primary);
    letter-spacing: -0.01em;
    padding-left: 8px;
}

/* Score display */
table.matchinfo td.score {
    text-align: center;
    font-weight: 800;
    font-size: 18px;
    color: var(--fp-primary);
    letter-spacing: -0.03em;
    padding: 10px 6px;
}

table.matchinfo td.match-hyphen {
    text-align: center;
    color: #94a3b8;
    font-weight: 300;
}

table.matchinfo td.time {
    text-align: left;
    font-size: 11px;
    font-weight: 500;
    color: var(--fp-text);
    padding-left: 14px;
    white-space: nowrap;
    opacity: 0.7;
}

table.matchinfo td.flag {
    text-align: center;
    padding: 6px 4px;
}

table.matchinfo td.user-score {
    text-align: center;
    min-width: 40px;
    font-size: 12px;
    color: var(--fp-text);
}

/* Stats icon */
table.matchinfo td.matchstats {
    text-align: right;
    vertical-align: middle;
    padding-right: 14px;
}

table.matchinfo td.matchstats a img {
    max-height: 32px;
    opacity: 0.5;
    transition: opacity var(--fp-ease);
}

@media (hover: hover) {
    table.matchinfo td.matchstats a:hover img {
        opacity: 1;
    }
}

/* Linked bonus question rows */
table.matchinfo tr.linked-question td {
    background-color: rgba(246, 249, 252, 0.9);
    padding: 10px 14px;
    border-top: 1px solid var(--fp-border);
}

@media (max-width: 639px) {
    table.matchinfo td.time,
    table.matchinfo td.flag {
        display: none;
    }

    table.matchinfo td.home,
    table.matchinfo td.away {
        font-size: 13px;
        padding: 8px 4px;
    }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    table.matchinfo td.matchstats a img {
        transition: none;
    }
}


/* =====================================================
   5. NEW-LAYOUT MATCH CARDS — [fp-predictionform] flex
   ===================================================== */

.matchinfo.new-layout {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-shadow-active:
        0 2px 4px rgba(11, 64, 101, 0.10),
        0 16px 32px rgba(0, 117, 190, 0.22);
    --fp-radius: 16px;
    --fp-ease: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    /* Strip original flex/table styles */
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

/* Section type label — spans full grid row */
.matchinfo.new-layout .matchtype {
    grid-column: 1 / -1;
    background-color: var(--fp-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 8px 14px;
    border-radius: 8px;
    margin-bottom: 4px;
}

/* ============================================
   CARD
   ============================================ */

/* Override pool.css `width: 50%` which was for flex layout — in grid, 50% = 50% of cell, not card */
.matchinfo.new-layout .home,
.matchinfo.new-layout .away,
.matchinfo.new-layout .score {
    width: 100% !important;
}

/* Flag container: fill cell so justify-content: center works; cap the image itself */
.matchinfo.new-layout .flag {
    width: 100% !important;
    max-width: none !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 8px 0 4px !important;
}

.matchinfo.new-layout .flag img {
    width: 56px !important;
    height: auto !important;
    max-width: none !important;
    display: block !important;
}

.matchinfo.new-layout .match-card {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    width: 100% !important;
    min-width: 0;
    padding: 0 12px 14px;
    background: linear-gradient(180deg, var(--fp-bg-start) 0%, var(--fp-bg-end) 100%);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-rest);
    overflow: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--fp-ease),
        border-color var(--fp-ease),
        box-shadow var(--fp-ease);
    margin: 0;
}

/* Corner glow */
.matchinfo.new-layout .match-card::before {
    content: '';
    position: absolute;
    top: -28px;
    right: -28px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--fp-accent-soft) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Brand divider spans both columns */
.matchinfo.new-layout .match-card::after {
    content: '';
    display: block;
    grid-column: 1 / -1;
    width: 32px;
    height: 3px;
    margin: 10px auto 8px;
    background: linear-gradient(90deg, var(--fp-accent) 0%, var(--fp-secondary) 100%);
    border-radius: 2px;
    transition: width var(--fp-ease);
}

/* Active state — mobile hero interaction */
.matchinfo.new-layout .match-card:active {
    transform: scale(0.97);
    border-color: var(--fp-accent);
    box-shadow: var(--fp-shadow-active);
}

.matchinfo.new-layout .match-card:active::after {
    width: 48px;
}

/* Hover — desktop only */
@media (hover: hover) {
    .matchinfo.new-layout .match-card:hover {
        transform: translateY(-3px);
        border-color: var(--fp-accent);
        box-shadow: var(--fp-shadow-active);
    }

    .matchinfo.new-layout .match-card:hover::after {
        width: 52px;
    }
}

/* Card header (date + time) — full bleed, spans both grid columns */
.matchinfo.new-layout .match-card-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% + 24px);
    margin: 0 -12px 12px;
    padding: 8px 14px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background-color: rgba(246, 249, 252, 0.9);
    border-bottom: 1px solid var(--fp-border);
}

.matchinfo.new-layout .match-card-header span {
    flex: 1;
}

.matchinfo.new-layout .match-card-header .matchdate {
    font-weight: 700;
    color: var(--fp-primary);
    font-size: 10px;
    background: none;
    padding: 0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: inherit;
}

.matchinfo.new-layout .match-card-header .time {
    text-align: right;
    color: var(--fp-text);
    font-size: 10px;
    opacity: 0.7;
}

/* Team flags */
.matchinfo.new-layout .flag {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 0 4px;
}

/* Team names — :not(.flag) prevents double-styling .flag.home / .flag.away */
.matchinfo.new-layout .match-card > .home:not(.flag),
.matchinfo.new-layout .match-card > .away:not(.flag) {
    font-weight: 700;
    font-size: 14px;
    color: var(--fp-primary);
    text-align: center;
    padding: 4px 0 2px;
    letter-spacing: -0.015em;
    line-height: 1.2;
}

/* Score / input area */
/* Score cell — actual match result (tournament/matches view) */
.matchinfo.new-layout .score {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--fp-primary);
    letter-spacing: -0.04em;
    line-height: 1;
    padding: 8px 0;
}

/* When score is pre-match (empty text node only), collapse vertical space */
.matchinfo.new-layout:not(.input) .score:not(:has(> *:not(:empty))) {
    padding: 0;
    min-height: 0;
}

/* Score cell in prediction form — reset for input context */
.matchinfo.new-layout.input .score {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0;
    padding: 6px 0 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.matchinfo.new-layout .score input.prediction {
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    width: min(80px, 100%);
    padding: 8px 4px;
    border: 2px solid var(--fp-border);
    border-radius: 10px;
    background: var(--fp-bg-start);
    color: var(--fp-primary);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color var(--fp-ease),
        box-shadow var(--fp-ease);
}

.matchinfo.new-layout .score input.prediction:focus {
    border-color: var(--fp-accent);
    box-shadow: 0 0 0 3px var(--fp-accent-soft);
}

.matchinfo.new-layout .score input.prediction:focus-visible {
    outline: 2px solid var(--fp-accent);
    outline-offset: 2px;
}

.matchinfo.new-layout .score span.actual-score,
.matchinfo.new-layout .score div.actual-score {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--fp-text);
    opacity: 0.65;
    margin-top: 3px;
    letter-spacing: 0;
    line-height: 1.2;
}

/* Card footer — spans both grid columns */
.matchinfo.new-layout .match-card-footer {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
}

.matchinfo.new-layout .match-card-footer div {
    flex: 1;
    align-items: center;
    height: auto;
    line-height: 1.4;
    vertical-align: middle;
}

.matchinfo.new-layout .match-card-footer .user-score {
    flex: 3;
    font-size: 11px;
    color: var(--fp-text);
    opacity: 0.75;
}

/* Pie chart stats icon — small and subtle, hidden when empty */
.matchinfo.new-layout .match-card-footer .fp-icon {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
}
.matchinfo.new-layout .match-card-footer .fp-icon:empty {
    display: none !important;
}
.matchinfo.new-layout .match-card-footer .fp-icon img.pie-chart-icon {
    width: 18px;
    height: 18px;
    opacity: 0.45;
    display: block;
    transition: opacity var(--fp-ease);
}
@media (hover: hover) {
    .matchinfo.new-layout .match-card-footer .fp-icon:hover img.pie-chart-icon {
        opacity: 0.85;
    }
}

/* Linked bonus question */
.matchinfo.new-layout .linked-question {
    width: 100%;
    background-color: rgba(246, 249, 252, 0.9);
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    margin-bottom: 0;
    padding: 12px 14px;
}

.matchinfo.new-layout .linked-question p.bonus {
    background-color: inherit;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 639px) {
    .matchinfo.new-layout {
        grid-template-columns: 1fr;
    }

    .matchinfo.new-layout .match-card > .home:not(.flag),
    .matchinfo.new-layout .match-card > .away:not(.flag) {
        font-size: 15px;
    }
}

@media (min-width: 640px) {
    .matchinfo.new-layout {
        gap: 14px;
    }

    .matchinfo.new-layout .match-card {
        padding: 0 14px 16px;
    }

    .matchinfo.new-layout .match-card-header {
        width: calc(100% + 28px);
        margin: 0 -14px 14px;
    }
}

@media (min-width: 1024px) {
    .matchinfo.new-layout {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .matchinfo.new-layout .match-card,
    .matchinfo.new-layout .match-card::after,
    .matchinfo.new-layout .score input.prediction {
        transition: none;
    }

    .matchinfo.new-layout .match-card:hover,
    .matchinfo.new-layout .match-card:active {
        transform: none;
    }

    .matchinfo.new-layout .match-card:hover::after,
    .matchinfo.new-layout .match-card:active::after {
        width: 32px;
    }
}


/* =====================================================
   6. PREDICTION INPUTS & SAVING STATE
   ===================================================== */

.fp-prediction-form input.prediction {
    width: 52px;
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    padding: 6px 4px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: #ffffff;
    color: var(--e-global-color-primary, #0B4065);
    outline: none;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        box-shadow   220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.fp-prediction-form input.prediction:focus {
    outline: none;
    border-color: var(--e-global-color-accent, #0075BE);
    box-shadow: 0 0 0 3px rgba(0, 117, 190, 0.10);
}

.fp-prediction-form input.prediction:focus-visible {
    outline: 2px solid var(--e-global-color-accent, #0075BE);
    outline-offset: 2px;
}

.fp-form input.prediction.saving,
.fp-form div.bonus.saving {
    background-color: rgba(250, 195, 63, 0.07);
    border: 2px dashed var(--e-global-color-secondary, #FAC33F);
    color: var(--e-global-color-primary, #0B4065);
}

.fp-form input.prediction.saving:focus,
.fp-form div.bonus.saving:focus {
    outline: none;
}

div.buttonblock {
    margin: 16px 0 40px;
}

@media (prefers-reduced-motion: reduce) {
    .fp-prediction-form input.prediction {
        transition: none;
    }
}


/* =====================================================
   7. BONUS / EXTRA QUESTIONS
   ===================================================== */

div.bonus {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-ease: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    box-shadow: var(--fp-shadow-rest);
    margin-bottom: 14px;
    padding: 14px 16px;
    width: 100%;
}

div.bonus > p {
    font-weight: 600;
    color: var(--fp-primary);
    margin: 0 0 10px;
    font-size: 14px;
    letter-spacing: -0.01em;
}

div.bonus.userview {
    margin-top: 12px;
    padding-bottom: 14px;
}

div.bonus.userview span {
    color: var(--fp-text);
}

div.bonus.userview p.question {
    font-weight: 700;
    color: var(--fp-primary);
}

div.bonus ul.multi-select {
    list-style: none;
    margin: 0;
    padding: 0;
}

div.bonus ul.multi-select label {
    margin-bottom: 8px;
    display: block;
}

div.bonus .answer {
    padding: 6px 10px;
    margin: 0 0 2px;
    border-radius: 8px;
}

div.bonus.open .bonus-ajax-loader {
    padding: 0;
    margin: 0;
    min-height: 24px;
    max-height: 24px;
}

div.bonus .bonus-card-footer {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 0 0;
    border-top: 1px solid var(--fp-border);
    margin-top: 12px;
}

div.bonus .bonus-card-footer div {
    flex: 4;
    flex-flow: row;
    margin-right: 0;
}

div.bonus .bonus-card-footer .points,
div.bonus .bonus-card-footer .closing-time {
    color: var(--fp-text);
    font-size: 11px;
    font-weight: 500;
    opacity: 0.65;
}

div.bonus .bonus-card-footer .points {
    text-align: right;
}

div.bonus .bonus-card-footer .question-stats-link {
    text-align: right;
    flex-basis: content;
    flex-grow: 1;
}

div.bonus .bonus-card-footer .question-stats-link a,
div.bonus .bonus-card-footer .points a {
    -webkit-box-shadow: none;
    box-shadow: none;
    margin-left: 10px;
}

div.bonus .bonus-card-footer .question-stats-link a img,
div.bonus .bonus-card-footer .points a img {
    max-height: 30px;
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: 0.5;
    transition: opacity var(--fp-ease);
}

@media (hover: hover) {
    div.bonus .bonus-card-footer .question-stats-link a:hover img,
    div.bonus .bonus-card-footer .points a:hover img {
        opacity: 1;
    }
}

span.extra {
    font-size: 11px;
    color: var(--fp-text);
    opacity: 0.65;
}

span.reminder {
    color: #94a3b8;
    font-weight: 600;
}

@media (max-width: 639px) {
    div.bonus div.bonus-card-footer {
        display: block;
    }

    div.bonus div.bonus-card-footer div,
    div.bonus div.bonus-card-footer .bonus div.closing-time,
    div.bonus div.bonus-card-footer .bonus div.points {
        display: block;
        padding: 0;
        text-align: inherit;
    }
}

@media (prefers-reduced-motion: reduce) {
    div.bonus .bonus-card-footer .question-stats-link a img,
    div.bonus .bonus-card-footer .points a img {
        transition: none;
    }
}


/* =====================================================
   8. MATCH SCORES SHORTCODE — [fp-match-scores]
   ===================================================== */

.shortcode.fp-match-scores,
.shortcode.fp-scores {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-radius: 16px;

    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-rest);
    margin-bottom: 24px;
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
}

table.shortcode.fp-match-scores,
table.shortcode.fp-scores {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

/* Header */
table.shortcode.fp-match-scores thead th,
table.shortcode.fp-scores thead th {
    background-color: var(--fp-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: center;
    border: none;
    white-space: nowrap;
}

table.shortcode.fp-match-scores thead th.player-name,
table.shortcode.fp-scores thead th.player-name {
    text-align: left;
}

/* Body */
table.shortcode.fp-match-scores tbody td,
table.shortcode.fp-scores tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--fp-border);
    text-align: center;
    vertical-align: middle;
}

table.shortcode.fp-match-scores tbody tr:last-child td,
table.shortcode.fp-scores tbody tr:last-child td {
    border-bottom: none;
}

table.shortcode.fp-match-scores tbody tr:nth-child(even) td,
table.shortcode.fp-scores tbody tr:nth-child(even) td {
    background-color: rgba(246, 249, 252, 0.6);
}

table.shortcode.fp-match-scores tbody td.player-name,
table.shortcode.fp-scores tbody td.player-name {
    text-align: left;
    font-weight: 700;
    color: var(--fp-primary);
    letter-spacing: -0.01em;
}

/* Score state badges */
.shortcode .fp-match-scores td.score.full,
.shortcode .fp-scores td.score.full,
table.shortcode.fp-match-scores td.score.full,
table.shortcode.fp-scores td.score.full {
    background-color: rgba(250, 195, 63, 0.15);
    color: #78580d;
    font-weight: 700;
}

.shortcode .fp-match-scores td.score.toto,
.shortcode .fp-scores td.score.toto,
table.shortcode.fp-match-scores td.score.toto,
table.shortcode.fp-scores td.score.toto {
    background-color: var(--fp-accent-soft);
    color: var(--fp-accent);
    font-weight: 600;
}

.shortcode .fp-match-scores td.score.goal-bonus,
.shortcode .fp-scores td.score.goal-bonus {
    background-color: rgba(250, 195, 63, 0.07);
}

.shortcode .fp-match-scores .not-a-valid-prediction span,
.shortcode .fp-scores .not-a-valid-prediction span {
    display: none;
}

.shortcode .fp-match-scores .score.both span.user-score,
.shortcode .fp-scores .score.both span.user-score {
    vertical-align: super;
    font-size: 75%;
    font-weight: 700;
    color: var(--fp-accent);
}

td.score.total-score {
    font-weight: 800;
    color: var(--fp-primary);
    font-size: 15px;
    letter-spacing: -0.02em;
    background-color: rgba(246, 249, 252, 0.8);
}


/* =====================================================
   9. QUESTION SCORES SHORTCODE — [fp-question-scores]
   ===================================================== */

.shortcode.fp-question-scores {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-radius: 16px;

    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-rest);
    margin-bottom: 24px;
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
}

table.shortcode.fp-question-scores {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

table.shortcode.fp-question-scores thead th {
    background-color: var(--fp-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 10px 14px;
    text-align: center;
    border: none;
}

table.shortcode.fp-question-scores thead th.player-name {
    text-align: left;
}

table.shortcode.fp-question-scores tbody td {
    padding: 9px 12px;
    border-bottom: 1px solid var(--fp-border);
    text-align: center;
    vertical-align: middle;
}

table.shortcode.fp-question-scores tbody tr:last-child td {
    border-bottom: none;
}

table.shortcode.fp-question-scores tbody tr:nth-child(even) td {
    background-color: rgba(246, 249, 252, 0.6);
}

table.shortcode.fp-question-scores tbody td.player-name {
    text-align: left;
    font-weight: 700;
    color: var(--fp-primary);
}

/* Correct / wrong */
table.shortcode.fp-question-scores td .correct,
table.prediction-table-questions td .correct {
    color: #15803d;
    font-weight: 700;
}

table.shortcode.fp-question-scores td .wrong,
table.prediction-table-questions td .wrong {
    color: #b91c1c;
    font-weight: 600;
}

/* Hidden elements */
.shortcode .fp-question-scores .question .question-id {
    display: none;
}

.shortcode .fp-question-scores .question .question-nr::before {
    content: "Q ";
    color: var(--e-global-color-accent, #0075BE);
    font-weight: 700;
}

.shortcode .fp-question-scores tr.question-text {
    display: none;
}

table.prediction-table-questions td,
table.prediction-table-questions th {
    padding: 8px 12px;
}

table.prediction-table-questions span.points-awarded {
    display: none;
}


/* =====================================================
   10. COUNTDOWN — [fp-countdown]
   ===================================================== */

.shortcode .countdown-shortcode.block {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    max-width: 480px;
    margin: 0 auto 24px;
    padding: 32px 24px;
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
    border: 1px solid var(--fp-border);
    border-radius: 16px;
    box-shadow: var(--fp-shadow-rest);
    color: var(--fp-primary);
    position: relative;
    overflow: hidden;
}

/* Corner glow */
.shortcode .countdown-shortcode.block::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 160px;
    height: 160px;
    background: radial-gradient(circle, var(--fp-accent-soft) 0%, transparent 65%);
    pointer-events: none;
}


/* =====================================================
   11. USER LIST — [fp-user-list]
   ===================================================== */

ol.fp-user-list {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-shadow-active:
        0 2px 4px rgba(11, 64, 101, 0.10),
        0 16px 32px rgba(0, 117, 190, 0.22);
    --fp-ease: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

ol.fp-user-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
    border: 1px solid var(--fp-border);
    border-radius: 12px;
    box-shadow: var(--fp-shadow-rest);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition:
        border-color var(--fp-ease),
        box-shadow var(--fp-ease),
        transform var(--fp-ease);
}

ol.fp-user-list li::marker {
    content: none !important;
}

/* Corner glow */
ol.fp-user-list li::before {
    content: '';
    position: absolute;
    top: -28px;
    right: -28px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--fp-accent-soft) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

ol.fp-user-list li br {
    display: none !important;
}

ol.fp-user-list li:active {
    transform: scale(0.97);
    border-color: var(--fp-accent);
    box-shadow: var(--fp-shadow-active);
}

@media (hover: hover) {
    ol.fp-user-list li:hover {
        transform: translateY(-2px);
        border-color: var(--fp-accent);
        box-shadow: var(--fp-shadow-active);
    }
}

ol.fp-user-list li:focus-visible {
    outline: 2px solid var(--fp-accent);
    outline-offset: 2px;
}

.fp-user-list-row .user-avatar img {
    border-radius: 9999px;
    width: 36px;
    height: 36px;
    object-fit: cover;
}

.fp-user-list-row .user-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--fp-primary);
    letter-spacing: -0.01em;
}

@media (min-width: 640px) {
    ol.fp-user-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (min-width: 1024px) {
    ol.fp-user-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
    }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    ol.fp-user-list li {
        transition: none;
    }

    ol.fp-user-list li:active,
    ol.fp-user-list li:hover {
        transform: none;
    }
}


/* =====================================================
   12. STATISTICS / CHARTS — [fp-stats-settings]
   ===================================================== */

table.statistics {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);

    width: 100%;
    max-width: 520px;
    border-collapse: collapse;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--fp-shadow-rest);
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
}

table.statistics th {
    background-color: var(--fp-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 16px;
    vertical-align: middle;
    border: none;
}

table.statistics td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--fp-border);
    color: var(--fp-text);
    font-size: 13px;
}

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

table.statistics tbody tr:nth-child(even) td {
    background-color: rgba(246, 249, 252, 0.7);
}

table.statistics td.result {
    text-align: center;
    font-weight: 700;
    color: var(--fp-primary);
    font-size: 14px;
    letter-spacing: -0.02em;
}

div.statistics {
    float: right;
    margin-left: 12px;
}

a.statistics {
    display: block;
    width: 48px;
    height: 48px;
    text-indent: -9999px;
    opacity: 0.5;
    transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
    a.statistics:hover {
        opacity: 1;
    }
}

/* Charts grid */
.charts-container {
    --fp-border:       #e5e7eb;
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 16px;
    margin-bottom: 24px;
}

.charts-container .chart-wrapper {
    flex: 1;
    flex-basis: calc(50% - 8px);
    min-width: 240px;
}

.chart {
    background: linear-gradient(180deg, var(--fp-bg-start), var(--fp-bg-end));
    border: 1px solid var(--fp-border);
    border-radius: 16px;
    box-shadow: var(--fp-shadow-rest);
    padding: 16px;
    margin-bottom: 0;
    position: relative;
    overflow: hidden;
}

/* Corner glow */
.chart::before {
    content: '';
    position: absolute;
    top: -28px;
    right: -28px;
    width: 120px;
    height: 120px;
    background: radial-gradient(circle, rgba(0, 117, 190, 0.10) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

span.charts-settings-switch {
    float: right;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@media (hover: hover) {
    span.charts-settings-switch:hover {
        opacity: 1;
    }
}

span.charts-settings-text::before {
    content: "ajustes";
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--e-global-color-text, #4D4D4D);
}

#fp-charts-settings {
    display: none;
    margin-bottom: 16px;
}

/* User selector */
.user-selector ol {
    margin: 0;
    padding: 0;
    display: block;
    overflow: auto;
    width: 100%;
    height: 150px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    list-style: none;
}

.user-selector ol li {
    padding: 6px 10px;
    font-size: 13px;
    cursor: pointer;
}

.user-selector ol li.selected {
    background-color: rgba(0, 117, 190, 0.10);
    color: var(--e-global-color-primary, #0B4065);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    a.statistics,
    span.charts-settings-switch {
        transition: none;
    }
}


/* =====================================================
   13. TOAST NOTIFICATIONS
   ===================================================== */

#fp-toasts {
    --fp-primary: var(--e-global-color-primary, #0B4065);
    --fp-accent:  var(--e-global-color-accent,  #0075BE);
    --fp-ease:    220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    min-height: 0;
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 360px;
    max-width: calc(100vw - 40px);
    z-index: 10;
}

#fp-toasts .toast {
    background: #ffffff;
    border-left: 4px solid #cbd5e1;
    border-radius: 12px;
    box-shadow:
        0 4px 6px rgba(11, 64, 101, 0.10),
        0 24px 48px rgba(11, 64, 101, 0.18);
    color: var(--fp-primary);
    cursor: default;
    margin-bottom: 12px;
    opacity: 0;
    position: relative;
    padding: 12px 40px 12px 16px;
    transform: translateY(15%);
    transition:
        opacity var(--fp-ease),
        transform var(--fp-ease);
    width: 100%;
    will-change: opacity, transform;
    z-index: 1100;
    font-size: 14px;
    line-height: 1.5;
}

#fp-toasts .toast.success {
    background: rgba(21, 128, 61, 0.05);
    border-left-color: #15803d;
    color: #14532d;
}

#fp-toasts .toast.warning {
    background: rgba(250, 195, 63, 0.08);
    border-left-color: var(--e-global-color-secondary, #FAC33F);
    color: #78580d;
}

#fp-toasts .toast.info {
    background: rgba(0, 117, 190, 0.06);
    border-left-color: var(--fp-accent);
    color: var(--fp-primary);
}

#fp-toasts .toast.error {
    background: rgba(185, 28, 28, 0.05);
    border-left-color: #b91c1c;
    color: #7f1d1d;
}

#fp-toasts .toast.show {
    opacity: 1;
    transform: translateY(0);
}

#fp-toasts .toast.hide {
    height: 0;
    margin: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    transition: all var(--fp-ease);
}

#fp-toasts .toast .close {
    cursor: pointer;
    font-size: 18px;
    height: 20px;
    width: 20px;
    margin-top: -10px;
    position: absolute;
    right: 14px;
    top: 50%;
    opacity: 0.4;
    line-height: 1;
    transition: opacity var(--fp-ease);
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
    #fp-toasts .toast .close:hover {
        opacity: 1;
    }
}

@media (max-width: 639px) {
    #fp-toasts {
        right: 10px;
        bottom: 10px;
        max-width: calc(100vw - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    #fp-toasts .toast {
        transition: none;
    }

    #fp-toasts .toast .close {
        transition: none;
    }
}


/* =====================================================
   14. WIDGETS
   ===================================================== */

.widget div.football-pool-widget {
    --fp-primary:   var(--e-global-color-primary,   #0B4065);
    --fp-secondary: var(--e-global-color-secondary, #FAC33F);
    --fp-accent:    var(--e-global-color-accent,    #0075BE);
    --fp-text:      var(--e-global-color-text,      #4D4D4D);
    --fp-border:    #e5e7eb;
    --fp-bg-start:  #ffffff;
    --fp-bg-end:    #f6f9fc;

    padding: 0;
    margin: 0;
}

.widget div.football-pool-widget form {
    margin: 0;
    padding: 0;
}

.widget div.football-pool-widget h3 {
    width: auto;
    margin: 0 0 8px;
    padding: 8px 12px;
    color: #ffffff;
    background-color: var(--fp-primary);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    line-height: 1.6;
    vertical-align: middle;
    border-radius: 8px;
}

.widget div.football-pool-widget h3 a,
.widget div.football-pool-widget h3 a:link,
.widget div.football-pool-widget h3 a:visited,
.widget div.football-pool-widget h3 a:hover,
.widget div.football-pool-widget h3 a:active {
    color: #ffffff;
    text-decoration: none;
}

.widget div.football-pool-widget label,
.widget div.football-pool-widget p {
    font-size: 13px;
    color: var(--fp-text);
}

.widget div.football-pool-widget div {
    padding: 0 0 6px;
}

.widget div.football-pool-widget p,
.widget div.football-pool-widget div div {
    padding: 0 8px;
}

/* Widget ranking table */
table.pool-ranking.ranking-widget {
    font-size: 12px;
}

li.widget div.football-pool-widget div.ranking {
    float: none;
    border: none;
    width: auto;
    padding: 0 8px;
    margin: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
}

li.widget div.football-pool-widget div.ranking h2 {
    display: none;
}

li.widget div.football-pool-widget div.ranking th {
    font-size: 10px;
}

/* Games box */
table.gamesbox {
    width: 100%;
    border-collapse: collapse;
}

table.gamesbox td {
    padding: 4px 6px;
    font-size: 12px;
    color: var(--fp-text);
    border-bottom: 1px solid var(--fp-border);
}

table.gamesbox td.score {
    white-space: nowrap;
    font-weight: 700;
    color: var(--fp-primary);
}

.widget_footballpoollastgameswidget div.football-pool-widget p,
.widget_footballpool-rankingwidget div.football-pool-widget p {
    padding: 3px 4px;
    margin: 0;
    font-size: 12px;
}

/* Shoutbox */
.widget_footballpoolshoutboxwidget div.wrapper {
    height: 240px;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    margin: 0 0 12px;
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    padding: 4px 8px;
}

.widget_footballpoolshoutboxwidget textarea {
    width: 100%;
    border: 1px solid var(--fp-border);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--fp-text);
}

.widget_footballpoolshoutboxwidget a.name {
    font-weight: 700;
    color: var(--fp-primary);
}

.widget_footballpoolshoutboxwidget span.date {
    font-size: 10px;
    float: right;
    color: var(--fp-text);
    opacity: 0.55;
}

.widget_footballpoolshoutboxwidget span.notice {
    font-size: 12px;
    opacity: 0.65;
}

.widget_footballpoolshoutboxwidget p {
    font-size: 13px;
    margin: 0 0 4px;
    line-height: 1.4;
}

.widget_footballpoolshoutboxwidget hr {
    margin: 4px 0 6px;
    border: none;
    border-top: 1px dashed var(--fp-border);
    height: 1px;
}

#sidebar ul .widget_footballpoolnextpredictionwidget p a,
ul li.widget_footballpoolnextpredictionwidget div.football-pool-widget a {
    display: inline;
    color: var(--fp-accent);
    font-weight: 600;
}

@media (max-width: 639px) {
    .widget div.football-pool-widget table.pool-ranking.ranking-widget {
        font-size: 100%;
    }

    .widget div.football-pool-widget p,
    .widget div.football-pool-widget td {
        font-size: 120%;
    }

    .widget div.football-pool-widget .wrapper.fp-shoutbox p {
        font-size: 130%;
    }

    .widget div.football-pool-widget span.notice {
        font-size: 100%;
    }
}


/* =====================================================
   15. NOTICES
   ===================================================== */

.fp-notice {
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
    display: block;
}

.fp-notice.updated {
    background: rgba(0, 117, 190, 0.06);
    border-left: 4px solid var(--e-global-color-accent, #0075BE);
    color: var(--e-global-color-primary, #0B4065);
    box-shadow: none;
}

.fp-notice.error {
    background: rgba(185, 28, 28, 0.05);
    border-left: 4px solid #b91c1c;
    color: #7f1d1d;
    box-shadow: none;
}


/* =====================================================
   16. JOKER BUTTONS
   ===================================================== */

table.matchinfo .fp-joker,
table.matchinfo .fp-nojoker {
    cursor: pointer;
    min-width: 30px;
    min-height: 24px;
    display: inline-block;
    opacity: 0.6;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
    transition: opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

table.matchinfo .fp-joker {
    opacity: 1;
}

.matchinfo.new-layout .fp-joker,
.matchinfo.new-layout .fp-nojoker {
    background-repeat: no-repeat;
    background-size: contain;
    background-position-y: center;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    opacity: 0.6;
    -webkit-tap-highlight-color: transparent;
    transition:
        opacity 220ms cubic-bezier(0.2, 0.8, 0.2, 1),
        transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.matchinfo.new-layout .fp-joker {
    background-image: url(images/joker-active.png);
    opacity: 1;
}

.matchinfo.new-layout .fp-nojoker {
    background-image: url(images/joker-inactive.png);
}

.matchinfo.new-layout .fp-joker:active,
.matchinfo.new-layout .fp-nojoker:active {
    transform: scale(0.90);
}

@media (hover: hover) {
    .matchinfo.new-layout .fp-nojoker:hover {
        opacity: 1;
    }
}

.matchinfo.new-layout .fp-joker.saving,
.matchinfo.new-layout .fp-nojoker.saving {
    background-image: url(images/joker-ajax-loader.gif);
    background-size: 36px 36px;
    opacity: 0.8;
    cursor: wait;
}

.matchinfo.new-layout .closed .fp-joker,
.matchinfo.new-layout .closed .fp-nojoker,
.matchinfo.new-layout .fp-joker.readonly,
.matchinfo.new-layout .fp-nojoker.readonly {
    cursor: default;
    opacity: 0.3;
}

table.matchinfo .fp-joker.joker-ajax-loader,
table.matchinfo .fp-nojoker.joker-ajax-loader {
    background-size: 20px 20px;
    cursor: wait;
}

.fp-form .bonus.saving .bonus-ajax-loader::after,
.fp-form .match-card.saving .user-score::after {
    content: url(images/predictions-ajax-loader.png);
}

@media (prefers-reduced-motion: reduce) {
    .matchinfo.new-layout .fp-joker,
    .matchinfo.new-layout .fp-nojoker,
    table.matchinfo .fp-joker,
    table.matchinfo .fp-nojoker {
        transition: none;
    }

    .matchinfo.new-layout .fp-joker:active,
    .matchinfo.new-layout .fp-nojoker:active {
        transform: none;
    }
}


/* =====================================================
   17. TEAM LIST — ol.football-pool.team-list
   Plugin HTML: <ol class="football-pool team-list">
                  <li class="[favorite]"><a href="..."><img class="team-photo thumb">Name</a><br>Bio</li>
   ===================================================== */

ol.football-pool.team-list {
    --fp-primary:      var(--e-global-color-primary,   #0B4065);
    --fp-secondary:    var(--e-global-color-secondary, #FAC33F);
    --fp-accent:       var(--e-global-color-accent,    #0075BE);
    --fp-text:         var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-accent-ring:  rgba(0, 117, 190, 0.22);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-shadow-active:
        0 2px 4px rgba(11, 64, 101, 0.10),
        0 16px 32px rgba(0, 117, 190, 0.22);
    --fp-radius: 16px;
    --fp-ease: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

ol.football-pool.team-list li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}

ol.football-pool.team-list li::marker {
    content: none !important;
}

ol.football-pool.team-list li br {
    display: none !important;
}

/* CARD — the <a> is the card */
ol.football-pool.team-list a {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--fp-primary);
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.015em;
    line-height: 1.25;
    padding: 0 10px 14px;
    background: linear-gradient(180deg, var(--fp-bg-start) 0%, var(--fp-bg-end) 100%);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-rest);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--fp-ease),
        border-color var(--fp-ease),
        box-shadow var(--fp-ease);
}

/* Corner glow */
ol.football-pool.team-list a::before {
    content: '';
    position: absolute;
    top: -28px;
    right: -28px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--fp-accent-soft) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Brand divider */
ol.football-pool.team-list a::after {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    margin: 10px auto 8px;
    background: linear-gradient(90deg, var(--fp-accent) 0%, var(--fp-secondary) 100%);
    border-radius: 2px;
    transition: width var(--fp-ease);
}

/* Team photo — full-bleed 4:3 */
ol.football-pool.team-list .team-photo,
ol.football-pool.team-list img.team-photo {
    display: block !important;
    width: calc(100% + 20px) !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 -10px !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f3f4f6;
    border: 0;
    border-radius: 0;
    transform-origin: center bottom;
    transition: transform var(--fp-ease);
}

/* Active — mobile primary interaction */
ol.football-pool.team-list a:active {
    transform: scale(0.97);
    border-color: var(--fp-accent);
    box-shadow: var(--fp-shadow-active);
}

ol.football-pool.team-list a:active::after { width: 48px; }

/* Hover — desktop only */
@media (hover: hover) {
    ol.football-pool.team-list a:hover {
        transform: translateY(-3px);
        border-color: var(--fp-accent);
        box-shadow: var(--fp-shadow-active);
    }

    ol.football-pool.team-list a:hover::after { width: 52px; }

    ol.football-pool.team-list a:hover .team-photo {
        transform: scale(1.04);
    }
}

/* Focus ring */
ol.football-pool.team-list a:focus-visible {
    outline: 2px solid var(--fp-accent);
    outline-offset: 2px;
}

/* Responsive */
@media (min-width: 640px) {
    ol.football-pool.team-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }

    ol.football-pool.team-list a {
        font-size: 14px;
        padding: 0 12px 14px;
    }

    ol.football-pool.team-list .team-photo,
    ol.football-pool.team-list img.team-photo {
        width: calc(100% + 24px) !important;
        margin: 0 -12px !important;
    }
}

@media (min-width: 1024px) {
    ol.football-pool.team-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }

    ol.football-pool.team-list a {
        font-size: 15px;
        padding-bottom: 16px;
    }
}

@media (max-width: 360px) {
    ol.football-pool.team-list {
        gap: 10px;
    }

    ol.football-pool.team-list a {
        font-size: 12px;
        padding: 0 8px 12px;
    }

    ol.football-pool.team-list .team-photo,
    ol.football-pool.team-list img.team-photo {
        width: calc(100% + 16px) !important;
        margin: 0 -8px !important;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    ol.football-pool.team-list a,
    ol.football-pool.team-list .team-photo,
    ol.football-pool.team-list a::after {
        transition: none;
    }

    ol.football-pool.team-list a:active,
    ol.football-pool.team-list a:hover {
        transform: none;
    }

    ol.football-pool.team-list a:hover .team-photo {
        transform: none;
    }
}


/* =====================================================
   18. STADIUM LIST — div.football-pool.stadium-list
   Plugin HTML: <div class="football-pool stadium-list">
                  <div><a href="..."><img class="stadium-photo thumb"></a><h2><a>Name</a></h2><p>Bio</p></div>
   ===================================================== */

div.football-pool.stadium-list {
    --fp-primary:      var(--e-global-color-primary,   #0B4065);
    --fp-secondary:    var(--e-global-color-secondary, #FAC33F);
    --fp-accent:       var(--e-global-color-accent,    #0075BE);
    --fp-text:         var(--e-global-color-text,      #4D4D4D);
    --fp-bg-start:     #ffffff;
    --fp-bg-end:       #f6f9fc;
    --fp-border:       #e5e7eb;
    --fp-accent-soft:  rgba(0, 117, 190, 0.10);
    --fp-shadow-rest:
        0 1px 2px rgba(11, 64, 101, 0.05),
        0 8px 20px rgba(11, 64, 101, 0.07);
    --fp-shadow-active:
        0 2px 4px rgba(11, 64, 101, 0.10),
        0 16px 32px rgba(0, 117, 190, 0.22);
    --fp-radius: 16px;
    --fp-ease: 220ms cubic-bezier(0.2, 0.8, 0.2, 1);

    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 0;
    padding: 0;
}

div.football-pool.stadium-list > div {
    padding: 0 12px 14px;
    background: linear-gradient(180deg, var(--fp-bg-start) 0%, var(--fp-bg-end) 100%);
    border: 1px solid var(--fp-border);
    border-radius: var(--fp-radius);
    box-shadow: var(--fp-shadow-rest);
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition:
        transform var(--fp-ease),
        border-color var(--fp-ease),
        box-shadow var(--fp-ease);
}

/* Corner glow */
div.football-pool.stadium-list > div::before {
    content: '';
    position: absolute;
    top: -28px;
    right: -28px;
    width: 100px;
    height: 100px;
    background: radial-gradient(circle, var(--fp-accent-soft) 0%, transparent 65%);
    pointer-events: none;
    z-index: 0;
}

/* Brand divider */
div.football-pool.stadium-list > div::after {
    content: '';
    display: block;
    width: 32px;
    height: 3px;
    margin: 10px auto 8px;
    background: linear-gradient(90deg, var(--fp-accent) 0%, var(--fp-secondary) 100%);
    border-radius: 2px;
    transition: width var(--fp-ease);
}

/* Full-bleed image link */
div.football-pool.stadium-list > div > a:first-child {
    display: block;
    width: calc(100% + 24px);
    margin: 0 -12px;
    line-height: 0;
}

div.football-pool.stadium-list > div > a:first-child img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    background: #f3f4f6;
    border: 0;
    border-radius: 0;
    transform-origin: center bottom;
    transition: transform var(--fp-ease);
}

div.football-pool.stadium-list > div h2 {
    margin: 10px 0 4px;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--fp-primary);
    letter-spacing: -0.015em;
    line-height: 1.25;
    position: relative;
    z-index: 1;
}

div.football-pool.stadium-list > div h2 a,
div.football-pool.stadium-list > div h2 a:visited {
    color: var(--fp-primary);
    text-decoration: none;
}

div.football-pool.stadium-list > div p {
    margin: 0;
    padding: 0;
    font-size: 12px;
    color: var(--fp-text);
    opacity: 0.75;
    position: relative;
    z-index: 1;
}

/* Active */
div.football-pool.stadium-list > div:active {
    transform: scale(0.97);
    border-color: var(--fp-accent);
    box-shadow: var(--fp-shadow-active);
}

div.football-pool.stadium-list > div:active::after { width: 48px; }

/* Hover — desktop only */
@media (hover: hover) {
    div.football-pool.stadium-list > div:hover {
        transform: translateY(-3px);
        border-color: var(--fp-accent);
        box-shadow: var(--fp-shadow-active);
    }

    div.football-pool.stadium-list > div:hover::after { width: 52px; }

    div.football-pool.stadium-list > div:hover > a:first-child img {
        transform: scale(1.04);
    }
}

/* Responsive */
@media (min-width: 640px) {
    div.football-pool.stadium-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
    }
}

@media (min-width: 1024px) {
    div.football-pool.stadium-list {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    div.football-pool.stadium-list > div,
    div.football-pool.stadium-list > div::after,
    div.football-pool.stadium-list > div > a:first-child img {
        transition: none;
    }

    div.football-pool.stadium-list > div:active,
    div.football-pool.stadium-list > div:hover {
        transform: none;
    }

    div.football-pool.stadium-list > div:hover > a:first-child img {
        transform: none;
    }
}


/* =====================================================
   19. MISC
   ===================================================== */

.nopointer { cursor: default !important; }
label { cursor: pointer; }
td.numeric { text-align: right; }

img.team-photo.thumb,
img.stadium-photo.thumb {
    max-width: 150px;
    border: 0;
    cursor: pointer;
    border-radius: 8px;
}

img.team-photo {
    max-width: 300px;
    border: 0;
    cursor: pointer;
    border-radius: 8px;
}

img.stadium-photo {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.14);
    display: block;
    max-width: min(640px, 100%);
    height: auto;
}

table.team.info {
    margin-top: 10px;
    border: none;
}

table.team.info tr,
table.team.info tr td,
table.team.info tr th {
    border: none;
    vertical-align: top;
    text-align: left;
}

table.team.info tr th {
    padding: 0 20px 12px 0;
    font-weight: 600;
    color: var(--e-global-color-primary, #0B4065);
    font-size: 13px;
}

table.team.info tr td {
    padding: 0 0 12px;
    font-size: 13px;
    color: var(--e-global-color-text, #4D4D4D);
}


/* =====================================================
   20. TEAM DETAIL PAGE — /teams/?team=N
   ===================================================== */

h3.football-pool.team.name {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--e-global-color-primary, #0B4065);
    margin: 4px 0 24px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--e-global-color-secondary, #FAC33F);
    display: inline-block;
}

h3.football-pool.team.name a {
    color: inherit;
    text-decoration: none;
}

table.football-pool.team.info {
    width: 100%;
    max-width: 640px;
    border-collapse: collapse;
    margin: 0 0 28px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow:
        0 1px 3px rgba(11, 64, 101, 0.07),
        0 6px 18px rgba(11, 64, 101, 0.08);
}

table.football-pool.team.info tbody tr {
    border-bottom: 1px solid #e5e7eb;
    vertical-align: middle;
}

table.football-pool.team.info tbody tr:last-child {
    border-bottom: none;
}

table.football-pool.team.info tr th {
    padding: 14px 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #9ca3af;
    background: #f9fafb;
    white-space: nowrap;
    width: 110px;
    vertical-align: middle;
    text-align: left;
    border: none;
}

table.football-pool.team.info tr td {
    padding: 14px 20px;
    font-size: 14px;
    color: var(--e-global-color-text, #4D4D4D);
    vertical-align: middle;
    text-align: left;
    border: none;
    background: #ffffff;
}

table.football-pool.team.info tr td a {
    color: var(--e-global-color-primary, #0B4065);
    text-decoration: none;
    font-weight: 500;
}

@media (hover: hover) {
    table.football-pool.team.info tr td a:hover {
        text-decoration: underline;
    }
}

/* Stadium list → inline chips */
table.football-pool.team.info ol.football-pool.stadium-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

table.football-pool.team.info ol.football-pool.stadium-list li {
    background: rgba(0, 117, 190, 0.08);
    border-radius: 6px;
    padding: 4px 10px;
}

table.football-pool.team.info ol.football-pool.stadium-list li a {
    font-size: 13px;
    font-weight: 500;
    color: var(--e-global-color-primary, #0B4065);
    text-decoration: none;
}

/* Flag / team photo in detail context */
table.football-pool.team.info img.team-photo {
    width: auto;
    max-width: 220px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
    display: block;
    cursor: pointer;
}

@media (max-width: 480px) {
    h3.football-pool.team.name {
        font-size: 1.6rem;
    }

    table.football-pool.team.info,
    table.football-pool.team.info tr th,
    table.football-pool.team.info tr td {
        display: block;
        width: 100%;
    }

    table.football-pool.team.info tr th {
        padding: 12px 16px 4px;
        border-bottom: none;
        background: #f9fafb;
    }

    table.football-pool.team.info tr td {
        padding: 4px 16px 12px;
    }

    table.football-pool.team.info tbody tr {
        border-bottom: 1px solid #e5e7eb;
    }
}


/* =====================================================
   21. STADIUM DETAIL PAGE — /stadiums/?stadium=N
   ===================================================== */

/* Stadium name heading */
.page-content > h1 {
    font-size: 2rem;
    font-weight: 800;
    font-style: normal;
    letter-spacing: -0.025em;
    color: var(--e-global-color-primary, #0B4065);
    margin: 4px 0 20px;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--e-global-color-secondary, #FAC33F);
    display: inline-block;
}

/* Bio / description paragraph */
p.stadium.bio {
    font-size: 14px;
    line-height: 1.7;
    color: var(--e-global-color-text, #4D4D4D);
    margin: 0 0 20px;
    max-width: 640px;
}

/* Remove default paragraph margin around the photo */
.page-content > p:has(> img.stadium-photo) {
    margin: 0 0 28px;
    line-height: 0;
}

@media (max-width: 480px) {
    .page-content > h1 {
        font-size: 1.6rem;
    }

    img.stadium-photo {
        max-width: 100%;
    }
}


/* =====================================================
   22. SHARED — TEAM & STADIUM DETAIL PAGES
   "partidos" h4 heading + back-link
   ===================================================== */

/* "partidos" section heading */
.page-content > h4 {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--e-global-color-primary, #0B4065);
    margin: 0 0 16px;
    padding: 0 0 8px;
    border-bottom: 2px solid var(--e-global-color-secondary, #FAC33F);
    display: inline-block;
}

/* Back-link: "ver todos los equipos" / "ver todos los estadios" */
.page-content > p:last-child {
    margin-top: 24px;
}

.page-content > p:last-child > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--e-global-color-primary, #0B4065);
    text-decoration: none;
    border: 1.5px solid var(--e-global-color-primary, #0B4065);
    border-radius: 8px;
    padding: 7px 14px;
    transition: background 180ms ease, color 180ms ease;
}

.page-content > p:last-child > a::before {
    content: "←";
    font-size: 14px;
    line-height: 1;
}

@media (hover: hover) {
    .page-content > p:last-child > a:hover {
        background: var(--e-global-color-primary, #0B4065);
        color: #ffffff;
    }
}

/* =====================================================
   N. STATISTICS — /statistics/?view=matchpredictions
   table.matchinfo.statistics reutiliza el mismo markup que
   el listado de partidos, pero aquí home/away son numeros
   (la prediccion del usuario) y .score son PUNTOS, no el
   marcador del partido. Estas reglas re-balancean ese caso
   especial sin afectar a las otras vistas.
   ===================================================== */

/* 1) Reemplazar visualmente el header "marcador" por "Puntos".
      El .po de espanol traduce 'score' como "marcador", que
      semanticamente es el resultado del partido; en esta vista
      en cambio son los puntos ganados por la prediccion. */
table.matchinfo.statistics thead th:last-child {
    font-size: 0;
    line-height: 0;
}

table.matchinfo.statistics thead th:last-child::before {
    content: "Puntos";
    display: inline-block;
    font-size: 11px;
    line-height: 1.4;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

/* 2) Header un poco mas alto. Las reglas globales aplican
      padding: 9px 14px; subimos el padding vertical. */
table.matchinfo.statistics thead th {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
}

/* 3) Compactar las celdas de prediccion (home / hyphen / away).
      Hay reglas previas en este mismo archivo (lineas 385/393)
      y en pool.css que matchean por table.matchinfo td.home /
      td.away — algunas con padding asimetrico. Forzamos con
      !important + px fijos para no depender de la cascada.
      Total del grupo "prediccion" ~50px (era ~210px). */
table.matchinfo.statistics td.home,
table.matchinfo.statistics td.away {
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    padding: 10px 2px !important;
    text-align: center !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: var(--fp-primary, #0B4065) !important;
}

table.matchinfo.statistics td.match-hyphen {
    width: 10px !important;
    min-width: 10px !important;
    max-width: 10px !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
    text-align: center !important;
    color: #94a3b8 !important;
    font-weight: 300 !important;
}

/* 4) Columna de puntos (.score) — el header dice "Puntos".
      Ancho ~20% mayor que la version anterior y centrada. */
table.matchinfo.statistics td.score {
    width: 80px !important;
    min-width: 80px !important;
    text-align: center !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 10px 6px !important;
}

table.matchinfo.statistics thead th:last-child {
    width: 80px !important;
    min-width: 80px !important;
}

/* 5) Username absorbe TODO el ancho sobrante. */
table.matchinfo.statistics th.username,
table.matchinfo.statistics td:first-child {
    width: auto !important;
    text-align: left !important;
    padding-left: 14px !important;
}

/* 6) Movil: misma logica, valores mas compactos. */
@media (max-width: 767px) {
    table.matchinfo.statistics td.home,
    table.matchinfo.statistics td.away {
        width: 18px !important;
        min-width: 18px !important;
        max-width: 18px !important;
        font-size: 16px !important;
    }

    table.matchinfo.statistics td.match-hyphen {
        width: 8px !important;
        min-width: 8px !important;
        max-width: 8px !important;
    }

    table.matchinfo.statistics td.score,
    table.matchinfo.statistics thead th:last-child {
        width: 64px !important;
        min-width: 64px !important;
        font-size: 14px !important;
    }

    table.matchinfo.statistics thead th {
        padding-top: 13px !important;
        padding-bottom: 13px !important;
    }
}

body.page-id-442 table, body.page-id-442 #chart1-wrapper { 
    margin:0 auto;
}

body.page-id-442 .page-content { 
    text-align:center;
}

body.page-id-442 form h2 {
    display:none;
}