/* Build Y - Matchday Centre */

.build-y-homepage {
    text-align: center;
}

.build-y-homepage .rot-hero,
.build-y-homepage .rot-hero h1,
.build-y-homepage .rot-hero p,
.build-y-homepage .rot-card,
.build-y-homepage .rot-card h2,
.build-y-homepage .rot-card h3,
.build-y-homepage .rot-card h4,
.build-y-homepage .rot-card p {
    text-align: center !important;
}

.build-y-homepage .homepage-hero-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 18px;
}

.build-y-homepage .homepage-hero-buttons .btn,
.build-y-homepage .homepage-hero-buttons .rot-btn {
    margin: 0 !important;
}

.build-y-homepage .rot-stat {
    display: block;
    text-align: center !important;
    margin: 8px auto !important;
}

.build-y-match-row > [class*="col-"] {
    display: flex;
}

.build-y-match-row .rot-card {
    width: 100%;
}

.build-y-next-fixture-card,
.build-y-matchday-card {
    min-height: 430px;
}

.homepage-fixture-title {
    font-size: 1.15rem;
    font-weight: 900;
    color: #001f5c;
    margin-bottom: 8px;
}

.homepage-fixture-details {
    display: grid;
    gap: 8px;
    max-width: 460px;
    margin: 12px auto 0;
}

.homepage-fixture-details div {
    background: #f4f7fb;
    border-left: 5px solid #0038A8;
    border-radius: 10px;
    padding: 9px 10px;
    text-align: center;
}

.homepage-fixture-details strong {
    display: block;
    color: #001f5c;
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    margin-bottom: 3px;
}

.homepage-fixture-details span {
    display: block;
    font-weight: 800;
}

.build-y-card-title {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.build-y-card-title span {
    font-size: 1.8rem;
}

.build-y-card-title h3 {
    margin: 0;
}

.build-y-countdown-holder {
    margin-bottom: 14px;
}

.build-y-countdown-holder .rot-countdown {
    justify-content: center !important;
}

.build-y-countdown-holder .rot-countdown-box {
    min-width: 78px;
}

.build-y-centre-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    margin: 14px 0;
}

.build-y-centre-grid div {
    background: #f4f7fb;
    border-left: 5px solid #0038A8;
    border-radius: 11px;
    padding: 10px 8px;
}

.build-y-centre-grid small {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-weight: 900;
    color: #001f5c;
    margin-bottom: 4px;
}

.build-y-centre-grid strong {
    display: block;
    font-weight: 900;
    color: #001f5c;
    overflow-wrap: anywhere;
}

.build-y-progress-box {
    background: #eef4ff;
    border-radius: 12px;
    padding: 12px;
    margin-top: 12px;
    border: 1px solid #c8d8f2;
}

.build-y-progress-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-weight: 900;
    color: #001f5c;
    margin-bottom: 8px;
}

.build-y-progress-bar {
    height: 12px;
    background: #dbe4f0;
    border-radius: 999px;
    overflow: hidden;
}

.build-y-progress-bar div {
    height: 100%;
    background: linear-gradient(90deg, #0038A8, #d6001c);
    border-radius: 999px;
}

.build-y-progress-box small {
    display: block;
    margin-top: 6px;
    color: #001f5c;
    font-weight: 800;
}

.build-y-user-status {
    margin-top: 12px;
    border-radius: 12px;
    padding: 10px 12px;
    font-weight: 900;
}

.build-y-user-status.predicted {
    background: #e8f1ff;
    color: #001f5c;
    border: 1px solid #0038A8;
}

.build-y-user-status.not-predicted {
    background: #fff4d4;
    color: #4a3500;
    border: 1px solid #f8c400;
}

html.rot-dark-mode .homepage-fixture-title,
html.rot-dark-mode .homepage-fixture-details strong,
html.rot-dark-mode .homepage-fixture-details span,
html.rot-dark-mode .build-y-centre-grid small,
html.rot-dark-mode .build-y-centre-grid strong,
html.rot-dark-mode .build-y-progress-top,
html.rot-dark-mode .build-y-progress-box small {
    color: #ffffff !important;
}

html.rot-dark-mode .homepage-fixture-details div,
html.rot-dark-mode .build-y-centre-grid div,
html.rot-dark-mode .build-y-progress-box {
    background: #132642 !important;
    border-color: #28456f !important;
}

html.rot-dark-mode .build-y-user-status.predicted {
    background: #102a4d !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .build-y-homepage .homepage-hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .build-y-homepage .homepage-hero-buttons .btn,
    .build-y-homepage .homepage-hero-buttons .rot-btn,
    .build-y-homepage .homepage-next-steps .btn {
        width: 100%;
    }

    .homepage-stat-card {
        padding: 12px 8px !important;
    }

    .homepage-stat-card h3 {
        font-size: .85rem !important;
        margin-bottom: 5px !important;
    }

    .homepage-stat-card .rot-stat {
        font-size: 1.4rem !important;
    }

    .build-y-next-fixture-card,
    .build-y-matchday-card {
        min-height: auto;
    }

    .build-y-centre-grid {
        grid-template-columns: 1fr;
    }

    .build-y-countdown-holder .rot-countdown {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 8px !important;
    }

    .build-y-countdown-holder .rot-countdown-box {
        width: 100% !important;
        min-width: 0 !important;
    }

    .build-y-progress-top {
        display: block;
        text-align: center;
    }
}
@media (max-width:768px){

    /* Gap below Prize Banner */
    .rot-prize-banner{
        margin-bottom:20px !important;
    }

    /* Welcome box */
    .rot-hero{

        margin-top:20px !important;
        margin-left:auto;
        margin-right:auto;

        text-align:center;

        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .rot-hero h1{
        width:100%;
        text-align:center;
        margin-bottom:15px;
    }

    .rot-hero p{
        max-width:320px;
        margin:0 auto 20px;
        text-align:center;
    }

    .homepage-hero-buttons{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .homepage-hero-buttons .btn,
    .homepage-hero-buttons .rot-btn{
        width:90%;
        max-width:340px;
    }

}
.homepage-prize-banner{
    margin-bottom:20px;
}

/* =========================================================
   Homepage welcome banner and sponsor-width alignment
   ========================================================= */

.homepage-prize-banner {
    display: block;
    width: 100%;
    margin: 0 auto 22px;
}

.sp30-sponsor-section {
    width: min(1200px, calc(100% - 28px)) !important;
    max-width: 1200px !important;
    margin: 40px auto 24px !important;
    padding: 22px !important;
    box-sizing: border-box;
    border-radius: 18px;
}

.sp30-sponsor-section .sp30-tier {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.sp30-sponsor-section .sp30-tier-grid {
    width: 100%;
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center !important;
    align-items: stretch;
    gap: 14px;
}

.sp30-sponsor-section .sp30-sponsor-card {
    width: min(100%, 360px) !important;
    max-width: 360px !important;
    min-height: 150px;
    margin: 0 !important;
    padding: 14px !important;
    box-sizing: border-box;
    border-radius: 15px;
}

.sp30-sponsor-section .sp30-logo-box {
    width: 100%;
    height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
}

.sp30-sponsor-section .sp30-logo-box img {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 180px !important;
    max-height: 66px !important;
    object-fit: contain !important;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .homepage-prize-banner {
        margin-bottom: 18px !important;
    }

    .build-y-homepage .rot-hero {
        width: 100%;
        margin: 0 auto 22px !important;
        padding-left: 16px;
        padding-right: 16px;
        text-align: center !important;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .build-y-homepage .rot-hero h1,
    .build-y-homepage .rot-hero p {
        width: 100%;
        text-align: center !important;
    }

    .build-y-homepage .rot-hero p {
        max-width: 340px;
        margin: 0 auto 20px;
    }

    .build-y-homepage .homepage-hero-buttons {
        width: 100%;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 9px;
    }

    .build-y-homepage .homepage-hero-buttons .btn,
    .build-y-homepage .homepage-hero-buttons .rot-btn {
        width: 100% !important;
        max-width: 340px;
        margin: 0 auto !important;
    }

    .sp30-sponsor-section {
        width: calc(100% - 18px) !important;
        margin: 26px auto 20px !important;
        padding: 14px !important;
    }

    .sp30-sponsor-section .sp30-tier-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 9px;
    }

    .sp30-sponsor-section .sp30-sponsor-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0;
        min-height: 132px;
        padding: 9px !important;
    }

    .sp30-sponsor-section .sp30-logo-box {
        height: 58px;
    }

    .sp30-sponsor-section .sp30-logo-box img {
        max-width: 112px !important;
        max-height: 48px !important;
    }
}

@media (max-width: 350px) {
    .sp30-sponsor-section .sp30-tier-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   Homepage dashboard section — desktop layout from reference
   Scope: welcome, stats, next fixture and countdown only
   ========================================================= */

.build-y-homepage > .rot-hero {
    width: 100%;
    margin: 0 0 30px;
    padding: 54px 36px 38px;
    border-radius: 24px;
    border-bottom: 5px solid #d6001c;
    background: linear-gradient(135deg, #123fa0 0%, #062761 100%);
    color: #ffffff;
    box-shadow: 0 12px 28px rgba(0, 31, 92, .17);
    text-align: left !important;
    display: block;
}

.build-y-homepage > .rot-hero > h1 {
    width: 100%;
    margin: 0 0 14px;
    color: #ffffff !important;
    text-align: left !important;
    font-size: clamp(2rem, 3vw, 2.55rem);
    line-height: 1.1;
}

.build-y-homepage > .rot-hero > p {
    width: 100%;
    max-width: 820px;
    margin: 0 0 22px;
    color: #ffffff !important;
    text-align: left !important;
    font-size: 1rem;
    line-height: 1.5;
}

.build-y-homepage > .rot-hero .homepage-hero-buttons {
    width: 100%;
    margin: 0 0 12px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.build-y-homepage > .rot-hero .homepage-hero-buttons .btn,
.build-y-homepage > .rot-hero .homepage-hero-buttons .rot-btn {
    width: auto !important;
    min-width: 0;
    margin: 0 !important;
    padding: 9px 16px;
}

.build-y-homepage > .rot-hero .homepage-stats-row {
    width: 100%;
    margin: 0 !important;
    padding-top: 0;
}

.build-y-homepage > .rot-hero .homepage-stats-row > [class*="col-"] {
    display: flex;
}

.build-y-homepage > .rot-hero .homepage-stat-card {
    width: 100%;
    min-height: 138px;
    margin: 0 !important;
    padding: 24px 14px !important;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    border-top: 5px solid #0d46bd;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: none;
    text-align: center !important;
}

.build-y-homepage > .rot-hero .homepage-stat-card h3 {
    margin: 0 0 8px !important;
    color: #001f5c !important;
    font-size: 1.1rem !important;
    line-height: 1.2;
    text-align: center !important;
}

.build-y-homepage > .rot-hero .homepage-stat-card .rot-stat {
    margin: 0 auto !important;
    color: #0038a8;
    font-size: 1.9rem !important;
    line-height: 1;
    text-align: center !important;
}

/* Two equal cards under the welcome panel */
.build-y-homepage > .build-y-match-row {
    margin-bottom: 28px;
    align-items: stretch;
}

.build-y-homepage > .build-y-match-row > [class*="col-"] {
    display: flex;
}

.build-y-homepage > .build-y-match-row .rot-card {
    width: 100%;
    min-height: 382px;
    margin: 0;
    padding: 24px 22px;
    border-top: 5px solid #0038a8;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 31, 92, .12);
}

.build-y-homepage > .build-y-match-row .rot-card > h3,
.build-y-homepage > .build-y-match-row .build-y-card-title h3 {
    margin: 0 0 14px;
    color: #001f5c;
    font-size: 1.38rem;
    line-height: 1.2;
    text-align: center !important;
}

/* Next Fixture card */
.build-y-homepage .build-y-next-fixture-card .rot-fixture-teams {
    margin: 2px auto 10px;
    justify-content: center;
    text-align: center;
}

.build-y-homepage .build-y-next-fixture-card .homepage-fixture-details {
    width: 100%;
    max-width: none;
    margin: 10px auto 0;
    gap: 0;
}

.build-y-homepage .build-y-next-fixture-card .homepage-fixture-details > div {
    width: 100%;
    margin: 0;
    padding: 7px 10px;
    border: 0;
    border-left: 5px solid #0038a8;
    border-radius: 0;
    background: #eef3fb;
    text-align: center !important;
}

.build-y-homepage .build-y-next-fixture-card .homepage-fixture-details > div:nth-child(even) {
    background: #e7eef9;
}

.build-y-homepage .build-y-next-fixture-card .homepage-fixture-details strong {
    margin-bottom: 2px;
    color: #07162f;
    font-size: .9rem;
    text-transform: none;
    letter-spacing: 0;
}

.build-y-homepage .build-y-next-fixture-card .homepage-fixture-details span {
    color: #334155;
    font-weight: 400;
}

/* Countdown card */
.build-y-homepage .build-y-matchday-card {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.build-y-homepage .build-y-matchday-card .build-y-card-title {
    width: 100%;
    margin-bottom: 12px;
}

.build-y-homepage .build-y-countdown-holder {
    width: 100%;
    margin: 0 auto 22px;
}

.build-y-homepage .build-y-countdown-holder .rot-countdown {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 10px !important;
}

.build-y-homepage .build-y-countdown-holder .rot-countdown-box {
    width: 86px !important;
    min-width: 86px !important;
    padding: 12px 8px !important;
    border-radius: 14px;
}

.build-y-homepage .build-y-countdown-holder .rot-countdown-box strong {
    font-size: 1.8rem;
    line-height: 1;
}

.build-y-homepage .build-y-countdown-details {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    text-align: center;
}

.build-y-homepage .build-y-countdown-fixture {
    margin: 0 auto 18px;
    text-align: center !important;
}

.build-y-homepage .build-y-countdown-fixture > span {
    display: block;
    margin-bottom: 3px;
}

.build-y-homepage .build-y-countdown-fixture .rot-fixture-teams-inline {
    display: inline-flex !important;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    width: auto;
    margin: 0 auto 3px;
}

.build-y-homepage .build-y-progress-summary {
    margin: 0 auto 18px;
    padding: 0;
    border: 0 !important;
    background: transparent !important;
    text-align: center;
}

.build-y-homepage .build-y-progress-summary strong {
    display: block;
    margin-bottom: 6px;
    color: #07162f;
    font-size: 1rem;
}

.build-y-homepage .build-y-progress-summary p,
.build-y-homepage .build-y-user-summary {
    margin: 0;
    color: #334155;
    text-align: center !important;
    font-weight: 400;
}

.build-y-homepage .build-y-user-summary {
    padding: 0;
    border: 0 !important;
    background: transparent !important;
}

/* Mobile retains the approved centred layout */
@media (max-width: 900px) {
    .build-y-homepage > .rot-hero {
        margin-bottom: 24px;
        padding: 34px 16px 24px;
        text-align: center !important;
    }

    .build-y-homepage > .rot-hero > h1,
    .build-y-homepage > .rot-hero > p {
        text-align: center !important;
    }

    .build-y-homepage > .rot-hero > p {
        max-width: 360px;
        margin-left: auto;
        margin-right: auto;
    }

    .build-y-homepage > .rot-hero .homepage-hero-buttons {
        display: grid;
        grid-template-columns: 1fr;
        justify-content: center;
        width: 100%;
        max-width: 340px;
        margin: 0 auto 14px;
    }

    .build-y-homepage > .rot-hero .homepage-hero-buttons .btn,
    .build-y-homepage > .rot-hero .homepage-hero-buttons .rot-btn {
        width: 100% !important;
    }

    .build-y-homepage > .rot-hero .homepage-stats-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .build-y-homepage > .rot-hero .homepage-stats-row > [class*="col-"] {
        width: 100%;
        padding: 0;
    }

    .build-y-homepage > .rot-hero .homepage-stat-card {
        min-height: 104px;
        padding: 13px 8px !important;
    }

    .build-y-homepage > .build-y-match-row {
        gap: 14px;
    }

    .build-y-homepage > .build-y-match-row .rot-card {
        min-height: auto;
    }

    .build-y-homepage .build-y-countdown-holder .rot-countdown {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px !important;
        max-width: 390px;
        margin: 0 auto;
    }

    .build-y-homepage .build-y-countdown-holder .rot-countdown-box {
        width: 100% !important;
        min-width: 0 !important;
        padding: 10px 4px !important;
    }
}

@media (max-width: 390px) {
    .build-y-homepage > .rot-hero {
        padding-left: 12px;
        padding-right: 12px;
    }

    .build-y-homepage .build-y-countdown-holder .rot-countdown {
        gap: 6px !important;
    }

    .build-y-homepage .build-y-countdown-holder .rot-countdown-box strong {
        font-size: 1.4rem;
    }

    .build-y-homepage .build-y-countdown-holder .rot-countdown-box span {
        font-size: .7rem;
    }
}