siblings (the score divs aren't the 1st/2nd
divs), so we use the adjacent-sibling trick: every .score defaults to the
home cell; any .score preceded by another .score is the away one. */
.matchinfo.new-layout.input .match.match-card > .score { grid-area: scoreH; }
.matchinfo.new-layout.input .match.match-card > .score + .score { grid-area: scoreA; }
.matchinfo.new-layout.input .match.match-card > .match-card-footer { grid-area: footer; }
.matchinfo.new-layout.input .match.match-card::after {
content: "—";
grid-area: sep;
color: var(--msc-text-muted);
font-family: var(--msc-ff-mono);
font-size: 1.5rem;
align-self: center;
justify-self: center;
}
.matchinfo.new-layout.input .match.match-card .score input.prediction {
width: 3rem !important;
height: 2.75rem !important;
text-align: center !important;
background: var(--msc-bg) !important;
border: 2px solid var(--msc-border-strong) !important;
border-radius: var(--msc-radius-sm) !important;
color: var(--msc-mint-bright) !important;
font-family: var(--msc-ff-mono) !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
padding: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
-moz-appearance: textfield;
}
.matchinfo.new-layout.input .match.match-card .score input.prediction::-webkit-outer-spin-button,
.matchinfo.new-layout.input .match.match-card .score input.prediction::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.matchinfo.new-layout.input .match.match-card .score input.prediction:focus {
outline: none !important;
border-color: var(--msc-mint) !important;
box-shadow: 0 0 0 3px rgba(158, 221, 208, 0.22) !important;
}
.matchinfo.new-layout.input .match.match-card .score input.prediction.saving {
border-color: var(--msc-warning) !important;
color: var(--msc-warning) !important;
}
/* Match-card footer: emphasize the Balón de Oro as the primary action.
Hide the stats-link icon (not useful pre-match) and keep the user-score
text small / muted. Joker dead-center with a clear label below. */
.matchinfo.new-layout.input .match.match-card > .match-card-footer {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 1.5rem;
padding-top: 1.1rem;
padding-bottom: 1.4rem;
margin-top: 0.5rem;
border-top: 1px solid var(--msc-border);
}
/* On the prediction form, the only meaningful action in the footer is the
Balón de Oro. The plugin also renders a stats-link icon and a user-score
text — neither adds value pre-match (no stats yet, score = 0). Hide both
so the joker is dead-center. */
.matchinfo.new-layout.input .match-card-footer .fp-icon:not(:last-child),
.matchinfo.new-layout.input .match-card-footer .user-score {
display: none !important;
}
/* Override the plugin's height:40px / line-height:40px on .match-card-footer
divs so the joker box and its label can stack as two block rows. Higher
specificity than the plugin selector (.input adds one class), so no
!important needed for height/line-height. */
.matchinfo.new-layout.input .match-card-footer .fp-icon:last-child {
flex: 0 0 auto !important;
height: auto;
line-height: 1.2;
text-align: center;
padding: 4px 0 6px;
}
.matchinfo.new-layout.input .match-card-footer .fp-icon:last-child .fp-joker-box {
display: block !important;
margin: 0 auto 6px !important;
}
/* Balón de Oro icon — override plugin's PNG with a gold soccer ball SVG.
Active state (fp-joker): bright gold, soft glow.
Inactive (fp-nojoker): outlined, muted.
Readonly (.readonly): disabled, low opacity. */
.matchinfo.new-layout .fp-joker-box {
width: 36px !important;
height: 36px !important;
border-radius: 999px;
transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
background-position: center !important;
background-size: 28px 28px !important;
background-repeat: no-repeat !important;
}
.matchinfo.new-layout .fp-nojoker {
background-image: url("data:image/svg+xml;utf8,
") !important;
opacity: 0.55;
}
.matchinfo.new-layout .fp-nojoker:hover { opacity: 0.85; transform: scale(1.05); }
.matchinfo.new-layout .fp-joker {
background-image: url("data:image/svg+xml;utf8,
") !important;
box-shadow: 0 0 18px rgba(229, 182, 90, 0.55);
transform: scale(1.05);
}
.matchinfo.new-layout .fp-joker-box.readonly {
opacity: 0.25 !important;
filter: grayscale(80%);
cursor: not-allowed !important;
}
.matchinfo.new-layout .fp-joker-box.readonly:hover { transform: none; opacity: 0.25 !important; }
/* Subtle "1 por fase" hint on hover for nojoker boxes */
.matchinfo.new-layout .fp-nojoker { cursor: pointer; }
/* "Balón de Oro" label, rendered as a block row below the joker box. */
.matchinfo.new-layout.input .match-card-footer .fp-icon:last-child::after {
content: "Balón de Oro";
display: block;
font-family: var(--msc-ff-display);
font-size: 0.7rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--msc-text-muted);
line-height: 1.2;
white-space: nowrap;
transition: color .15s ease, opacity .15s ease;
}
/* When the box is active (.fp-joker), the label glows gold. */
.matchinfo.new-layout.input .match-card-footer .fp-icon:last-child:has(.fp-joker)::after {
color: var(--msc-warning);
font-weight: 700;
text-shadow: 0 0 8px rgba(229, 182, 90, 0.45);
}
/* When this match's joker is blocked (already used in another match of this
phase), the label fades out. */
.matchinfo.new-layout.input .match-card-footer .fp-icon:last-child:has(.readonly)::after {
opacity: 0.25;
}
/* Tab filtering needs an explicit display:none. The default user-agent rule
`[hidden] { display: none }` is too low-specificity to override our
`.matchinfo.new-layout .match.match-card { display: grid }`. */
.matchinfo.new-layout .match-card[hidden],
.matchinfo.new-layout .matchtype[hidden] {
display: none !important;
}
/* =====================================================
PHASE TABS (built by JS in footer.html — see msc-phase-tabs)
Lets users jump between Fase de Grupos / Octavos / Cuartos /
Semifinal / Final without scrolling 104 matches.
===================================================== */
.msc-phase-tabs {
display: flex;
gap: 0.5rem;
margin: 0 0 1.75rem 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--msc-border-strong) transparent;
padding-bottom: 0.5rem;
}
.msc-phase-tabs::-webkit-scrollbar { height: 6px; }
.msc-phase-tabs::-webkit-scrollbar-thumb { background: var(--msc-border-strong); border-radius: 999px; }
.msc-phase-tabs button {
padding: 0.65rem 1.2rem;
background: transparent;
border: 1px solid var(--msc-border);
color: var(--msc-text-muted);
border-radius: var(--msc-radius-md);
cursor: pointer;
white-space: nowrap;
font-family: var(--msc-ff-display);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.06em;
transition: color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
}
.msc-phase-tabs button:hover {
color: var(--msc-mint-bright);
border-color: var(--msc-border-strong);
transform: translateY(-1px);
}
.msc-phase-tabs button.active {
background: var(--msc-surface-2);
color: var(--msc-mint-bright);
border-color: var(--msc-mint);
box-shadow: 0 0 14px rgba(158, 221, 208, 0.22);
}
.msc-phase-tabs button .count {
display: inline-block;
margin-left: 0.4rem;
padding: 0.05rem 0.45rem;
background: var(--msc-bg);
border: 1px solid var(--msc-border);
border-radius: 999px;
font-family: var(--msc-ff-mono);
font-size: 0.7rem;
color: var(--msc-text-muted);
letter-spacing: 0;
}
.msc-phase-tabs button.active .count {
color: var(--msc-mint-bright);
border-color: var(--msc-mint);
}
/* Mobile: keep prediction form usable */
@media (max-width: 600px) {
.matchinfo.new-layout.input .match.match-card {
grid-template-columns: auto auto auto;
grid-template-areas:
"header header header"
"flagH nameH scoreH"
"flagA nameA scoreA"
"footer footer footer";
}
.matchinfo.new-layout.input .match.match-card::after { display: none; }
}
/* Mobile: stack vertically below ~480px */
@media (max-width: 480px) {
.matchinfo.new-layout .match.match-card {
grid-template-columns: auto 1fr;
grid-template-areas:
"header header"
"flagH nameH"
"score score"
"flagA nameA";
gap: 0.5rem 0.6rem;
}
.matchinfo.new-layout .match.match-card > .flag.home,
.matchinfo.new-layout .match.match-card > .flag.away { justify-self: start; }
.matchinfo.new-layout .match.match-card > .home:not(.flag),
.matchinfo.new-layout .match.match-card > .away:not(.flag) { justify-self: start; }
}
/* --- Utility classes ---------------------------------------------------- */
.msc-mono { font-family: var(--msc-ff-mono); }
.msc-muted { color: var(--msc-text-muted); }
.msc-center { text-align: center; }
.msc-stack > * + * { margin-top: 1rem; }
.msc-stack-lg > * + * { margin-top: 2rem; }
/* --- Page-specific: home ------------------------------------------------ */
body.home .msc-hero { padding-block: clamp(4rem, 10vw, 8rem); }
/* --- Page-specific: predict form get more breathing room --------------- */
body.msc-page-predict main.msc-main,
body.msc-page-ranking main.msc-main {
padding-top: 2rem;
}
/* --- Default WP block tweaks ------------------------------------------- */
.wp-block-button__link { font-family: var(--msc-ff-display) !important; }
.wp-block-quote { border-left: 3px solid var(--msc-mint); padding-left: 1.25rem; color: var(--msc-text-muted); font-style: italic; }
.wp-block-separator { border-color: var(--msc-border); margin-block: 2rem; }
.wp-block-image img { border-radius: var(--msc-radius-md); }
/* --- Login page tweak (subtle) ------------------------------------------ */
body.login {
background: var(--msc-bg);
}
/* --- Balón de Oro confirmation modal ------------------------------------ */
body.msc-modal-open { overflow: hidden; }
.msc-modal {
position: fixed;
inset: 0;
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.msc-modal[hidden] { display: none; }
.msc-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(6, 14, 14, 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.msc-modal__panel {
position: relative;
background: var(--msc-surface);
border: 1px solid var(--msc-border-strong);
border-radius: var(--msc-radius-md);
padding: 2.25rem 2rem 1.75rem;
width: 100%;
max-width: 480px;
text-align: center;
box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(229,182,90,0.12);
animation: msc-modal-pop .22s ease-out;
}
@keyframes msc-modal-pop {
from { transform: scale(0.92); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.msc-modal__icon {
width: 64px;
height: 64px;
margin: 0 auto 0.75rem;
background-image: url("data:image/svg+xml;utf8,
");
background-size: contain;
background-repeat: no-repeat;
filter: drop-shadow(0 0 16px rgba(229, 182, 90, 0.5));
}
.msc-modal__title {
font-family: var(--msc-ff-display);
font-size: 1.35rem;
color: var(--msc-mint-bright);
margin: 0 0 1rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.msc-modal__body {
color: var(--msc-text);
line-height: 1.55;
margin: 0 0 1.25rem;
font-size: 0.95rem;
}
.msc-modal__body strong { color: var(--msc-mint-bright); }
.msc-modal__match {
background: var(--msc-bg);
border: 1px solid var(--msc-border);
border-radius: var(--msc-radius-sm);
padding: 0.75rem 1rem;
margin: 0 0 1.25rem;
font-family: var(--msc-ff-display);
font-size: 0.95rem;
letter-spacing: 0.06em;
color: var(--msc-mint);
text-transform: uppercase;
}
.msc-modal__match:empty { display: none; }
.msc-modal__warning {
background: rgba(229, 182, 90, 0.08);
border: 1px solid rgba(229, 182, 90, 0.35);
border-radius: var(--msc-radius-sm);
padding: 0.7rem 1rem;
margin: 0 0 1.25rem;
font-size: 0.85rem;
color: var(--msc-warning);
text-align: left;
}
.msc-modal__warning:empty { display: none; }
.msc-modal__actions {
display: flex;
gap: 0.75rem;
justify-content: center;
flex-wrap: wrap;
}
.msc-modal__actions button {
font-family: var(--msc-ff-display);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.08em;
padding: 0.7rem 1.4rem;
border-radius: var(--msc-radius-sm);
cursor: pointer;
border: 1px solid transparent;
transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.msc-modal__actions button:hover { transform: translateY(-1px); }
.msc-modal__actions [data-action="cancel"] {
background: transparent;
color: var(--msc-text-muted);
border-color: var(--msc-border);
}
.msc-modal__actions [data-action="cancel"]:hover {
color: var(--msc-text);
border-color: var(--msc-border-strong);
}
.msc-modal__actions [data-action="confirm"] {
background: linear-gradient(135deg, #e8b65a 0%, #a37820 100%);
color: #1a1108;
font-weight: 700;
border-color: #a37820;
box-shadow: 0 4px 14px rgba(229, 182, 90, 0.35);
}
.msc-modal__actions [data-action="confirm"]:hover {
box-shadow: 0 6px 20px rgba(229, 182, 90, 0.5);
}
/* --- Lightbox (team / stadium photos) ----------------------------------- */
body.msc-lightbox-open { overflow: hidden; }
.msc-lightbox {
position: fixed;
inset: 0;
background: rgba(6, 14, 14, 0.92);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
padding: 4vmin;
opacity: 0;
transition: opacity .18s ease;
cursor: zoom-out;
}
.msc-lightbox.is-open { opacity: 1; }
.msc-lightbox__img {
max-width: 92vw;
max-height: 88vh;
width: auto;
height: auto;
border-radius: var(--msc-radius-md);
border: 1px solid var(--msc-border-strong);
box-shadow: var(--msc-shadow-md), var(--msc-shadow-glow);
display: block;
transform: scale(0.96);
transition: transform .2s ease;
}
.msc-lightbox.is-open .msc-lightbox__img { transform: scale(1); }
.msc-lightbox__close {
position: absolute;
top: 1.25rem;
right: 1.25rem;
width: 44px;
height: 44px;
border-radius: 999px;
border: 1px solid var(--msc-border-strong);
background: var(--msc-surface);
color: var(--msc-mint-bright);
font-size: 1.6rem;
line-height: 1;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
font-family: var(--msc-ff-body);
transition: background .15s ease, transform .15s ease;
}
.msc-lightbox__close:hover {
background: var(--msc-surface-hover);
transform: scale(1.05);
}
.msc-lightbox__close:focus-visible {
outline: 2px solid var(--msc-mint);
outline-offset: 2px;
}