@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Rubik+Mono+One&display=swap');
:root{
    --width: 1000px;
    --padding: calc(50vw - var(--width) / 2);
    --font: "Inter", sans-serif;
}

*, *::before, *::after{
    box-sizing: border-box;
}

body{
    margin: 0;
    font-family: var(--font);
}

nav{
    height: 72px;
    background: linear-gradient(145deg, rgba(0,174,243,1) 0%, rgba(0,174,243,1) 50%, rgba(232,27,35,1) 50%, rgba(232,27,35,1) 100%);
    padding: 10px var(--padding);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#nav_gradient{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    z-index: 1;
    height: 72px;
}

nav .title{
    font-size: 28px;
    font-weight: 900;
    color: white;
    line-height: 1;
}

nav .description{
    font-size: 14px;
    font-weight:300;
    color: white;
    font-style: italic;
    text-transform: uppercase;
}

#exit{
    font-size: 18px;
    font-weight: 600;
    border: none;
    padding: 10px 10px;
    border-radius: 4px;
    background: white;
    display: flex;
    column-gap: 5px;
    cursor: pointer;
    transition: 0.2s opacity;
}

#exit:hover{
    opacity: 0.9;
}

#exit:active{
    opacity: 0.7;
}

#nav_left{
    display: flex;
    align-items: center;
    padding: 20px 0;
    column-gap: 7px;
}

nav .logo{
    font-size: 24px;
    aspect-ratio: 1;
    background: white;
    padding: 10px;
    border-radius: 100%;
    color: rgb(0, 101, 138);
}

section#intro{
    margin-top: 50px;
    padding: 0 var(--padding);
}

section#intro h1{
    font-size: 30px;
    font-weight: 800;
    margin: 0;
}

section#intro p{
    font-size: 16px;
}

#content{
    height: 500px;
    width: 950px;
    display: block;
    background: whitesmoke;
    position: absolute;
    left: calc(var(--padding) + 12px);
    overflow: hidden;
}

#container{
    margin: 30px auto;
    width: fit-content;
}

/* SCENE: STAGE */
#Begin_Turn{
    cursor: pointer;
    user-select: none;
    transition: 0.2s;
    z-index: 100;
}

#Begin_Turn rect{
    fill: #af5288;
}

#Begin_Turn:hover{
    opacity: 0.8;
}

#Begin_Turn text{
    fill: white;
}

.dbtitle{
    font-family: var(--font);
    font-weight: 600;
    font-size: 16px;
}

.dbevidence{
    font-family: var(--font);
    font-weight: 200;
    font-size: 14px;
}

#Box1Wrapper, #Box2Wrapper, #Box3Wrapper, #Box4Wrapper, #Box5Wrapper, #DBTvAd, #DBReplaceCard, #DBTwitter, #DBPlayCard, #DBSpeech{
    cursor: pointer;
    fill: white;
    transition: 0.2s;
}

:is(#Box1Wrapper, #Box2Wrapper, #Box3Wrapper, #Box4Wrapper, #Box5Wrapper):hover rect{
    fill: #f6f6f6;
}

:is(#DBTvAd, #DBReplaceCard, #DBTwitter, #DBPlayCard, #DBSpeech):hover > rect{
    fill: #f6f6f6;
}

#DB rect{
    transition: 0.2s;
}

#DB rect.highlight, #DB g.highlight > rect{
    fill: lightgoldenrodyellow;
}

svg:has(#Phone){
    position: absolute;
    animation: 2s raise2 linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34
    16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%,
    0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) forwards;

    z-index: 100;
}

.character{
    position: absolute;
    scale: 0.7;
}

svg:has(#TV) {
    position: absolute;
    animation: 2s raise linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%,
    0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) forwards;

    width: 643px;
    height: 470px;

    z-index: 100;
}

svg:has(.card){
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    height: 450px;
}

@keyframes raise{
    from{
        left: 153px;
        top: 520px;
    }

    to{
        top: 25px;
        left: 153px;
    }
}

@keyframes raise2{
    from{
        left: 50px;
        top: 520px;
        rotate: -30deg;
    }

    to{
        top: 20px;
        left: 100px;
        rotate: 0deg;
    }
}

@keyframes mask{
    from{
        opacity: 0;
    }

    to{
        opacity: 0.7;
    }
}

@keyframes pulse{
    0%{
        stroke-width: 0px;
        stroke: white;
    }

    100%{
        stroke-width: 5px;
        stroke: yellow;
    }
}

svg:has(#Mask){
    position: absolute;
    left: 0;
    top: 0;
    z-index: 99;
}

svg:has(#Mask):not(.noanimation){
    animation: 2s mask linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%,
    0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) forwards;
}

#TV.negative path[stroke="white"]{
    animation: 2s pulse linear(0 0%, 0.22 2.1%, 0.86 6.5%, 1.11 8.6%, 1.3 10.7%, 1.35 11.8%, 1.37 12.9%, 1.37 13.7%, 1.36 14.5%, 1.32 16.2%, 1.03 21.8%, 0.94 24%, 0.89 25.9%, 0.88 26.85%, 0.87 27.8%, 0.87 29.25%, 0.88 30.7%, 0.91 32.4%, 0.98 36.4%, 1.01 38.3%, 1.04 40.5%, 1.05 42.7%, 1.05 44.1%, 1.04 45.7%, 1 53.3%, 0.99 55.4%, 0.98 57.5%, 0.99 60.7%, 1 68.1%, 1.01 72.2%, 1 86.7%, 1 100%);
    animation-iteration-count: infinite;
}

foreignObject#TV_Text {
    font-size: 24px;
    font-weight: 600;
}

#Cloud1, #Cloud2, #Cloud3{
    position: relative;
    animation: 5s cloudmove linear;
    animation-iteration-count: infinite;
}

.character:hover{
    z-index: 100 !important;
    cursor: pointer;
    filter: drop-shadow(0px 0px 5px #fffd84);
}

.close{
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1001;
    color: white;
    background: #ff6060;
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    height: 35px;
    width: 35px;
    cursor: pointer;
    transition: 0.2s;
}

.close:hover{
    opacity: 0.8;
}

.close:active{
    opacity: 0.5;
}

#ResponseText{
    font-size: 14px;
}

#TwitterText{
    transform: translateY(-15px);
}

.announcements {
    font-size: 36px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    font-weight: 900;
    color: #ffa6a6;
    animation: in 2s ease;
    text-align: center;
    z-index: 500;
}

.results_modal {
    position: absolute;
    width: calc(100% - 40px);
    height: calc(100% - 40px);
    overflow: auto;
    top: 20px;
    left: 20px;
    z-index: 501;
    background: white;
    padding: 20px;
    font-size: 16px;
    white-space: pre-wrap;
    line-height: 28px;
    font-weight: 200;
}

#TwitterText{
    font-size: 12px;
}

#VictorCARD{
    animation: 2s vin linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%,
    0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) forwards;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}

#CreatureCARD{
    animation: 2s cin linear(0 0%, 0 1.8%, 0.01 3.6%, 0.03 6.35%, 0.07 9.1%, 0.13 11.4%, 0.19 13.4%, 0.27 15%, 0.34 16.1%, 0.54 18.35%, 0.66 20.6%, 0.72 22.4%, 0.77 24.6%, 0.81 27.3%, 0.85 30.4%, 0.88 35.1%, 0.92 40.6%, 0.94 47.2%,
    0.96 55%, 0.98 64%, 0.99 74.4%, 1 86.4%, 1 100%) forwards;
    animation-delay: 1s;
    transform: translateX(560px);
}

svg:not(#Opening):has(#CreatureCARD){
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1000;
}

svg:not(#Opening):has(#VictorCARD){
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}


@keyframes vin{
    from{
        display: block;
        transform: translateX(-550px);
    }
    to{
        transform: translateX(0px);
    }
}

@keyframes cin{
    from{
        display: block;
        transform: translateX(560px);
    }
    to{
        transform: translateX(0px);
    }
}

@keyframes in{
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


@keyframes cloudmove{
    0%{
        transform: translate(-100px, 0);
    }
    50%{
        transform: translate(80px, 0);
    }
    100%{
        transform: translate(-100px, 0);
    }
}

@media (max-width: 1220px){
    :root{
        --width: calc(100vw - 20px);
    }
}