@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

:root
{
    --size: 5vmin;
    --gap: 1vmin;
    --padding: 1vmin;
    --game-info-padding: 4vmin;
    --drawn-numbers: 0;

    --font-color: white;
    --title-color: white;
    --background-color: black;
    --ticket-number-background-color: rgb(25, 25, 25);
    --ticket-background-color: black;
    --secondary-color: rgb(35, 35, 35);
    --button-color: grey;
    --strike-color: crimson;
    --border-color: white;

    --indicator-color: black;

    --border-left-color: var(--secondary-color);
    --button-disabled-color: var(--ticket-number-background-color);

    --ticket-number-box-shadow: 'none';
    --claimed-ticket-number-box-shadow: 'none';
    --claimed-ticket-color: 'white';
    --claimed-ticket-background-color: '#BB3979';

    --close-button-background-color: var(--ticket-number-background-color);
}

*
{
    font-family: "Quicksand", sans-serif !important;
}

/* SCROLLBARS NONE */
* {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}

*::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

*::selection
{
    background-color: transparent;
    color: inherit;
}

.gap  { gap: 3vmin; }
.gap2 { gap: 5vmin; }

.alignCenter { align-items: center; }
.justifyCenter { justify-content: center; }

.displayNone { display: none; }

.hShake {
	animation-name: hShake;
	animation-duration: 0.25s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

.vShake {
	animation-name: vShake;
	animation-duration: 0.25s;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

@keyframes hShake {
	0% {
		transform: translateX(0em);
	}

	25% {
		transform: translateX(0.5em);
	}

	50% {
		transform: translateX(-0.5em);
	}

	75% {
		transform: translateX(0.5em);
	}

	100% {
		transform: translateX(0em);
	}
}

@keyframes vShake {
	0% {
		transform: translateY(0em);
	}

	25% {
		transform: translateY(0.5em);
	}

	50% {
		transform: translateY(-0.5em);
	}

	75% {
		transform: translateY(0.5em);
	}

	100% {
		transform: translateY(0em);
	}
}

.rainbow {
	animation-name: rainbowAni;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-fill-mode: both;
}

@keyframes rainbowAni {
	0% {
		border-color: white;
	}

	20% {
		border-color: red;
	}

	40% {
		border-color: blue;
	}

	60% {
		border-color: green;
	}

    80% {
		border-color: yellow;
	}

	100% {
		border-color: white;
	}
}

.strike
{
    text-decoration: line-through;
}

body
{
    overflow-x: hidden;
    margin: 0; padding: 0;
    background-color: var(--background-color); color: var(--font-color);
    width: 100vw; height: 100vh;
    font-size: 2vmin; font-family: monospace;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
}

.title
{
    font-size: 8vmin;
    font-weight: bold;
    text-transform: lowercase;
    color: var(--title-color);
}

.title:hover { cursor: pointer; }

.log
{
    color: var(--font-color); 
    padding: 1vmin 2vmin; border-radius: 0;
    border: 1.5vmin solid transparent;
    border-left-color: var(--border-left-color);
}

.mainMenuDiv
{
    /* border: 0.1vmin solid aqua; */
    padding: 1vmin;
    /* width: calc(100% - 4vmin); */
    /* gap: 1vmin; */
    align-items: center;

}

.mainMenuDiv button:disabled
{
    color: var(--button-disabled-color) !important;
    cursor: not-allowed !important;
}

.mainMenuDiv input::placeholder
{
    color: var(--font-color);
    opacity: 0.5;
}

.mainMenuDiv button,
.mainMenuDiv input
{
    font-size: 5vmin;
    padding: 1vmin 1.5vmin;
    text-transform: lowercase;
    outline: none;
    border: none;
    border-radius: 0;
    background-color: transparent;
    color: var(--button-color);

    transition: all 0.25s, color 0s;
}

.mainMenuDiv input::selection
{
    background-color: var(--font-color) !important;
    color: var(--background-color) !important;
}

.username
{
    width: 20vmin;
    text-align: center;
}

.gameID
{
    width: 15vmin;
    text-align: center;
}

.mainMenuDiv input
{
    flex-grow: 0;
    color: var(--font-color);
    border-bottom: 0.5vmin solid transparent;
}

.mainMenuDiv button:hover
{
    color: var(--font-color);
    cursor: pointer;
}

.mainMenuDiv input:hover, .mainMenuDiv input:focus
{
    border-bottom-color: var(--font-color);
}

#ticketsDiv
{
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 4em 0em;

    display: flex;
    justify-content: flex-start;
    align-items: center;

    flex-direction: column;

    overflow: scroll;
}

.housie-ticket
{
    display: grid;
    background-color: var(--ticket-background-color);

    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(9, 1fr);

    grid-template-areas: 
    "n1-1 n1-2 n1-3 n1-4 n1-5 n1-6 n1-7 n1-8 n1-9"
    "n2-1 n2-2 n2-3 n2-4 n2-5 n2-6 n2-7 n2-8 n2-9"
    "n3-1 n3-2 n3-3 n3-4 n3-5 n3-6 n3-7 n3-8 n3-9";

    border-radius: 2vmin;
    border: 0.25vmin dashed var(--border-color);
    padding: var(--padding);

    gap: var(--gap);

    justify-content: space-around;
    align-content: space-around;
    justify-items: center;
    align-items: center;
    align-self: center;
    width: fit-content;
}

.claimed-ticket-number
{
    background-color: var(--claimed-ticket-background-color) !important;
    color: var(--claimed-ticket-color) !important;
    box-shadow: var(--claimed-ticket-number-box-shadow) !important;

    text-decoration: line-through;
    text-decoration-color: var(--strike-color);
    text-decoration-thickness: 1vmin;
    /* text-decoration-skip-ink: auto; */
    /* text-decoration-style: wavy; */
}

.claimed-ticket-number:hover
{
    cursor: not-allowed !important;
}

.housie-ticket-number
{
    width:  var(--size);
    height: var(--size);
    background-color: var(--ticket-number-background-color);

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

    border-radius: 1vmin;

    padding: 2vmin;
    margin: 0;
    font-size: var(--size);

    transition: all 0.25s, color 0s;

    box-shadow: var(--ticket-number-box-shadow);
}

.housie-ticket-number:hover
{
    cursor: pointer;
}

.housie-ticket-number::selection
{
    color: inherit;
    background-color: transparent;
}

.n1-1 { grid-area: n1-1; } 
.n1-2 { grid-area: n1-2; } 
.n1-3 { grid-area: n1-3; } 
.n1-4 { grid-area: n1-4; } 
.n1-5 { grid-area: n1-5; } 
.n1-6 { grid-area: n1-6; } 
.n1-7 { grid-area: n1-7; } 
.n1-8 { grid-area: n1-8; } 
.n1-9 { grid-area: n1-9; } 
.n2-1 { grid-area: n2-1; } 
.n2-2 { grid-area: n2-2; } 
.n2-3 { grid-area: n2-3; } 
.n2-4 { grid-area: n2-4; } 
.n2-5 { grid-area: n2-5; } 
.n2-6 { grid-area: n2-6; } 
.n2-7 { grid-area: n2-7; } 
.n2-8 { grid-area: n2-8; } 
.n2-9 { grid-area: n2-9; } 
.n3-1 { grid-area: n3-1; } 
.n3-2 { grid-area: n3-2; } 
.n3-3 { grid-area: n3-3; } 
.n3-4 { grid-area: n3-4; } 
.n3-5 { grid-area: n3-5; } 
.n3-6 { grid-area: n3-6; } 
.n3-7 { grid-area: n3-7; } 
.n3-8 { grid-area: n3-8; }
.n3-9 { grid-area: n3-9; }

#copyright
{
    text-align: center;
    font-size: calc(var(--size)/3);
}

.drawNumbersScroller
{
    width: 60vmin;
    overflow: scroll;
}

.drawn-numbers-div
{
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
}

.drawn-number
{
    font-size: var(--size);
    width:  calc(2 * var(--size));
    height: calc(2 * var(--size));
    
    color: var(--button-color);
    border: 0.5vmin solid transparent;

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

    text-align: center;
    border-radius: 0.5vmin;
    z-index: 1;
}

.drawn-number:last-child
{
    color: var(--font-color);
    font-size: var(--size);
    width:  calc(2 * var(--size));
    height: calc(2 * var(--size));

    border-top-color: var(--font-color);

    position: sticky;
    position: -webkit-sticky;
    left: 0;
    z-index: 2;

    background-color: var(--background-color);
}

.topArea
{
    align-items: center;
}

.topArea, .middleArea, .bottomArea
{
    width: 100%;
    gap: 1vmin;
    justify-content: space-evenly;
    position: relative;
}

.notification
{
    position: absolute; z-index: 5;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    background-color: var(--background-color);
    color: var(--font-color);
    font-size: var(--size);
}

.gameInfoDiv
{
    text-transform: lowercase;
    position: absolute; z-index: 6;
    top: 0; left: 0;
    padding: var(--game-info-padding);
    width: calc(100% - 2 * var(--game-info-padding)); 
    height: calc(100% - 2 * var(--game-info-padding)); 
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3vmin);
    -webkit-backdrop-filter: blur(3vmin);
    color: var(--font-color);
    font-size: var(--size);
    overflow-y: scroll;
    overflow-wrap: anywhere;
    gap: var(--game-info-padding);
}

.infoItem
{
    padding: 1vmin 2.5vmin;
    background-color: var(--ticket-number-background-color);
    color: var(--font-color);
}

.infoFlex
{
    align-items: center;
    white-space: nowrap;
    overflow-x: scroll;
    width: 100%;
}

.closeInfoButton
{
    position: sticky;
    position: -webkit-sticky;
    width: fit-content;
    align-self: self-end;

    color: var(--button-color);
    background-color: var(--close-button-background-color) !important;

    right: 0; top: 0;
}

.reaminingNumbersIndicator, .reaminingNumbersIndicator::after
{
    background-color: transparent;
    width: var(--size);
    height: var(--size);
    position: relative;
    border: none;
    border-radius: 50%;
    margin: 0; padding: 0;
    background-color: var(--indicator-color);
    z-index: 1;
    transition: all 0.25s;
}

.reaminingNumbersIndicator::after
{
    z-index: 2;
    transform: scale(calc(var(--drawn-numbers)/87));
    content: ' ';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-color: transparent;
    background-color: var(--ticket-number-background-color);
}

.numberNotification
{
    text-transform: lowercase !important;
    width: 100% !important;
    display: flex !important;
    justify-content: flex-start !important;
    white-space: nowrap !important;
}

.qrcode
{
    width: 50%;
}