:root {

    --bg: #071018;

    --bg2: #0d1c29;

    --gold: #d9b15f;

    --gold-light: #f0d48a;

    --text: #f4ead1;

    --muted: #aeb8c2;

    --panel: rgba(8, 18, 27, .94);

}


* {
    box-sizing: border-box;
}


html,
body {

    width: 100%;

    height: 100%;

    margin: 0;

    overflow: hidden;

}


body {

    background:

        radial-gradient(
            circle at 50% 20%,
            rgba(47, 140, 255, .12),
            transparent 34%
        ),

        radial-gradient(
            circle at 50% 100%,
            rgba(217, 177, 95, .08),
            transparent 42%
        ),

        linear-gradient(
            135deg,
            var(--bg),
            var(--bg2)
        );

    color: var(--text);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

}


/*
 * Full viewport
 */

#page {

    position: relative;

    width: 100%;

    height: 100dvh;

    display: grid;

    place-items: center;

    overflow: hidden;

    padding: 20px;

}


/*
 * Main application
 */

#app {

    width: min(
        100%,
        1050px
    );

    transform-origin:
        center center;

}


/*
 * Main RuneFest panel
 */

.card {

    position: relative;

    width: 100%;

    min-height: 520px;

    padding:
        clamp(30px, 5vh, 70px)
        clamp(24px, 6vw, 90px);

    background:

        linear-gradient(
            180deg,
            rgba(255,255,255,.025),
            transparent 20%
        ),

        var(--panel);

    border:
        1px solid
        rgba(217,177,95,.65);

    box-shadow:

        0 0 0 5px
        rgba(217,177,95,.07),

        0 18px 70px
        rgba(0,0,0,.55);

    text-align: center;

}


.card::before,
.card::after {

    content: "";

    position: absolute;

    inset: 10px;

    pointer-events: none;

    border:
        1px solid
        rgba(217,177,95,.18);

}


/*
 * Decorative lines
 */

.ornament {

    height: 1px;

    width: 72%;

    margin:
        0 auto;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold),
            transparent
        );

    opacity: .75;

}


.ornament.top {

    margin-bottom:
        clamp(20px, 3vh, 38px);

}


.ornament.bottom {

    margin-top:
        clamp(24px, 4vh, 42px);

}


/*
 * Logo
 */

.logo-wrap {

    min-height:
        clamp(100px, 18vh, 180px);

    display: grid;

    place-items: center;

}


#runefestLogo {

    max-width:
        min(75%, 500px);

    max-height:
        clamp(90px, 18vh, 170px);

    width: auto;

    height: auto;

    object-fit: contain;

}


.logo-fallback {

    font-weight: 900;

    font-size:
        clamp(42px, 7vw, 82px);

    letter-spacing: .08em;

    color:
        var(--gold-light);

    text-shadow:

        0 3px 0 #5b3e12,

        0 0 22px
        rgba(217,177,95,.25);

}


.logo-fallback span {

    color: #fff1bd;

}


/*
 * Question
 */

h1 {

    margin:
        clamp(12px, 2vh, 22px)
        0 4px;

    font-size:
        clamp(28px, 5vw, 58px);

    line-height: 1.05;

    letter-spacing: .02em;

    text-shadow:
        0 3px 12px #000;

}


/*
 * YES / NO
 */

.answer {

    color:
        var(--gold-light);

    font-size:
        clamp(20px, 3vw, 34px);

    font-weight: 700;

    letter-spacing: .22em;

    margin:
        10px 0 20px;

}


/*
 * Countdown
 */

.countdown {

    display: flex;

    align-items: center;

    justify-content: center;

    gap:
        clamp(7px, 1.5vw, 18px);

    margin: 0 auto;

}


.time-box {

    min-width:
        clamp(65px, 10vw, 125px);

}


.time-box strong {

    display: block;

    font-family:
        "Trebuchet MS",
        Arial,
        sans-serif;

    font-size:
        clamp(34px, 6vw, 70px);

    line-height: .95;

    color: #fff;

    font-variant-numeric:
        tabular-nums;

    text-shadow:
        0 3px 15px
        rgba(0,0,0,.65);

}


.time-box span {

    display: block;

    margin-top: 8px;

    color: var(--muted);

    text-transform: uppercase;

    letter-spacing: .13em;

    font:
        700
        clamp(9px, 1.2vw, 13px)
        /1
        Arial,
        sans-serif;

}


.colon {

    align-self: flex-start;

    padding-top:
        clamp(4px, 1vh, 10px);

    color: var(--gold);

    font:
        700
        clamp(25px, 4vw, 48px)
        /1
        Arial,
        sans-serif;

}


/*
 * Status message
 *
 * Larger than the original version.
 */

.status-text {

    min-height: 32px;

    margin:
        18px 0 12px;

    color:
        var(--gold-light);

    font:
        700
        clamp(17px, 2.2vw, 25px)
        /1.3
        Arial,
        sans-serif;

}


/*
 * Buttons
 */

.buttons {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 10px;

    max-width: 850px;

    margin: 0 auto;

}


.buttons a {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-height: 42px;

    padding:
        10px 20px;

    border:
        1px solid
        rgba(217,177,95,.7);

    background:
        linear-gradient(
            #172b3b,
            #0c1924
        );

    color:
        var(--text);

    text-decoration: none;

    font:
        700
        14px
        Arial,
        sans-serif;

    transition:
        transform .15s ease,
        border-color .15s ease;

}


.buttons a:hover {

    transform:
        translateY(-2px);

    border-color:
        var(--gold-light);

}


/*
 * Year selector
 *
 * IMPORTANT:
 * This is outside #app so it is not affected
 * by the viewport scaling transform.
 */

.year-picker {

    position: fixed;

    z-index: 1000;

    top: 18px;

    right: 20px;

    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--muted);

    font:
        11px
        Arial,
        sans-serif;

}


.year-picker select {

    min-width: 145px;

    min-height: 34px;

    padding:
        5px 28px 5px 9px;

    border:
        1px solid
        rgba(217,177,95,.6);

    border-radius: 3px;

    background: #0b1822;

    color: var(--text);

    font:
        700
        12px
        Arial,
        sans-serif;

    cursor: pointer;

}


.year-picker select:focus {

    outline: none;

    border-color:
        var(--gold-light);

    box-shadow:
        0 0 0 2px
        rgba(217,177,95,.15);

}


/*
 * Footer
 */

footer {

    margin-top: 12px;

    text-align: center;

    color: #75818b;

    font:
        10px
        Arial,
        sans-serif;

    letter-spacing: .08em;

}


/*
 * Short screens
 */

@media (max-height: 700px) {

    #page {
        padding: 12px;
    }

    .card {

        min-height: 0;

        padding-top: 22px;

        padding-bottom: 22px;

    }

    .logo-wrap {
        min-height: 85px;
    }

    .answer {
        margin-bottom: 12px;
    }

    .status-text {

        margin:
            10px 0 8px;

    }

    .ornament.top {
        margin-bottom: 12px;
    }

    .ornament.bottom {
        margin-top: 15px;
    }

}


/*
 * Mobile
 */

@media (max-width: 600px) {

    .year-picker label {
        display: none;
    }

    .year-picker {

        top: 10px;

        right: 10px;

    }

    .year-picker select {

        min-width: 130px;

    }

    #page {
        padding: 10px;
    }

    .card {

        padding-left: 14px;

        padding-right: 14px;

    }

    .time-box {
        min-width: 52px;
    }

}