@import url('./bullseye_font.css');
@import url('./jetbrains_mono_font.css');
@import url('./space_grotesk.css');

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;

    margin: 0;
    padding: 0;
}

#background {
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;

    background: linear-gradient(to top, #12c2e9, #c471ed, #f64f59);

    filter: blur(5px) hue-rotate(0deg);

    animation: rainbow infinite 10s linear;
}

#game {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
}

@keyframes rainbow {
    0% {
        filter: blur(5px) hue-rotate(0deg);
    }
    100% {
        filter: blur(5px) hue-rotate(360deg);
    }
}

#flash-message {
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;

    display: flex;
    justify-content: center;
    align-items: center;
    
    font-size: 10em;
    font-weight: bold;

    opacity: 0;

    transition: opacity 0.5s;

    pointer-events: none;

    z-index: 1000;
}

#flash-message-text {
    width: 100%;
    text-align: center;
}

#flash-message-text > span {
    opacity: 0;

    transition: opacity 0.1s;

    display: inline-block;

    /* Fake text outline via text-shadow */
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

#flash-message-text > span.line-break {
    display: block;
    height: 0;
}

.active {
    opacity: 1 !important;
}

#crosshair {
    position: fixed;
    transform: translate(-50%, -50%);

    width: 75px;
    height: 75px;

    border: 5px solid white;
    border-radius: 50%;

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.5s;

    z-index: 999;
    filter: drop-shadow(2px 4px 6px black);
}

/* AFTER pseudo-element */
#crosshair::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 10px;
    height: 10px;

    background-color: white;

    border-radius: 50%;
}

.dart {
    position: fixed;
    transform: translate(-50%, -50%) scale(0.75);
    filter: drop-shadow(2px 4px 6px black);

    width: 50px;
    height: 50px;

    background-color: dodgerblue;
    border-radius: 50%;
    border: 1px solid black;

    pointer-events: none;

    z-index: 998;

    animation: shrink 0.5s;
}

.dart::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 10px;
    height: 10px;

    background-color: rgba(255, 255, 255, 0.5);

    border-radius: 50%;
}

@keyframes shrink {
    0% {
        transform: translate(-50%, -50%) scale(100);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.75);
    }
}

#scores {
    position: fixed;
    top: 0;
    right: 0;

    padding: 20px;

    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5em;
    font-weight: bold;

    border: 1px solid white;
    border-top: none;
    border-right: none;
    border-bottom-left-radius: 10px;

    display: flex;
    flex-direction: row;

    z-index: 995;
}

#scores > div {
    margin-right: 20px;

    padding: 25px;

    border-radius: 10px;

    cursor: pointer;
}

#scores > div:last-child {
    margin-right: 0;
}

.skip-button {
    background-color: black;
}

.dialogue {
    position: fixed;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;

    text-align: center;
    font-size: 60px;

    z-index: 5000;

    padding-top: 21.7%;
}

.dialogue button {
    font-size: 40px;
    padding: 20px;
    margin: 20px;
    border: 5px solid black;
    border-radius: 25px;
    background: white;
    cursor: pointer;
}

.dialogue.custom-dialogue {
    padding-top: 0;
}

#game-speed {
    position: fixed;
    bottom: 0;
    right: 0;

    padding: 20px 20px 10px;

    font-family: 'JetBrains Mono', monospace;
    font-size: 2.5em;
    font-weight: bold;

    border: 1px solid white;
    border-bottom: none;
    border-right: none;
    border-top-left-radius: 10px;

    display: flex;
    flex-direction: row;

    z-index: 995;
}

.team {
    border: 10px dashed transparent;
}

.current {
    border-color: gold;
}

.charity-score {
    position: fixed;
    top: 50%;
    right: 0;

    padding: 20px;
    padding-bottom: 10px;

    border: 1px solid white;
    border-right: none;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;

    display: flex;
    flex-direction: column;
    z-index: 995;

    justify-content: center;
    align-items: center;

    font-size: 7.5em;

    transform: translate(0, -50%);
    
    opacity: 1;
    
    animation: appear 0.5s;
}

@keyframes appear {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

#board-canvas,#scores,#game-speed,.charity-score,.dialogue,#flash-message,#current-round, #title {
    background: rgba(50, 50, 50, 0.35);
    filter: drop-shadow(4px 8px 12px black);
    color: white;
}

#board-canvas {
    background: none;
    
    opacity: 0;
    
    transition: opacity 0.5s;
}

#title {
    position: fixed;
    top: 0;
    left: 0;

    padding: 20px;

    font-family: 'Bullseye', sans-serif;
    font-size: 5em;
    font-weight: bold;

    text-align: center;
    
    border: 1px solid white;
    border-top: none;
    border-left: none;
    border-bottom-right-radius: 10px;

    z-index: 995;
    opacity: 1;

    transition: opacity 0.5s;
}

#title h6 {
    margin: 0px;
    padding: 0px;
}

.dialogue table {
    margin: auto;
    border: 1px solid white;
    border-collapse: collapse;
}

.dialogue table td, .dialogue table th {
    padding: 10px;
    border: 1px solid white;
    border-collapse: collapse;
}

#click-me {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    display: flex;
    flex-direction: column;
    
    justify-content: center;
    align-items: center;
    text-align: center;
    
    font-size: 5em;
    
    color: white;
    background: rgba(0,0,0,0.95);
}