/* ===================================
   SPLASH SCREEN RESPONSIVE STYLES
   =================================== */

/* Wrapper for splash content - enables responsive sizing */
.splash-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-align: center;
}

/* Stagger-in animation - each direct child fades/slides up in sequence
   instead of the whole splash appearing at once. Delays are assigned by
   class below so the spacer divs between categories (no class) don't
   throw off the ordering. */
.splash-content > div {
    opacity: 0;
    transform: translateY(24px);
    animation: splash-stagger-in 0.5s ease-out forwards;
}

@keyframes splash-stagger-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.splash-content > .splash-cat-1-special,
.splash-content > .splash-cat-1 {
    animation-delay: 2s;
}

.splash-content > .splash-cat-2 {
    animation-delay: 3.5s;
}

.splash-content > .splash-cat-3 {
    animation-delay: 5s;
}

.splash-content > .splash-points,
.splash-content > .splash-halftime-1,
.splash-content > .splash-final {
    animation-delay: 6.5s;
}

.splash-content > .splash-halftime-2 {
    animation-delay: 8s;
}

/* Category 1 - Special (Halftime/Final) */
.splash-cat-1-special {
    /* font-size set by JavaScript */
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0;
}

/* Category 1 - Regular rounds */
.splash-cat-1 {
    /* font-size set by JavaScript */
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0;
}

/* Category 2 */
.splash-cat-2 {
    /* font-size set by JavaScript */
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0;
}

/* Category 3 */
.splash-cat-3 {
    /* font-size set by JavaScript */
    font-weight: bold;
    line-height: 1.2;
    margin: 10px 0;
}

/* Points available - regular rounds */
.splash-points {
    /* font-size set by JavaScript */
    font-weight: 1000;
    line-height: 1.3;
    margin: 20px 0;
}

/* Halftime - line 1 */
.splash-halftime-1 {
    /* font-size set by JavaScript */
    font-weight: 900;
    line-height: 1.2;
    margin: 10px 0;
}

/* Halftime - line 2 */
.splash-halftime-2 {
    /* font-size set by JavaScript */
    line-height: 1.2;
    margin: 10px 0;
}

/* Final question instructions */
.splash-final {
    /* font-size set by JavaScript */
    line-height: 1.4;
    margin: 20px 0;
    max-width: 90%;
}