/* for the future */


:root {
    --background-color: rgba(4, 16, 48, 0.63);
    --cherry: rgb(244, 182, 194);
    --darkerCherry: rgb(231, 138, 167);
    --darkestCherry: rgb(129, 45, 72);
    --white: rgb(255, 255, 255);
    --infoBackground: rgba(40, 3, 25, 0.7);
    --lighterCherry: rgb(254, 218, 226);
    --maruRed: rgb(212, 7, 0);
    --maruRedTransparent: rgba(212, 7, 0, 0.4);
    --lighterMaruRed: rgb(242, 101, 96);
    --lighterMaruRedTransparenct: rgba(242, 101, 96, 0.4);
    --batsuBlue: rgb(0, 18, 212);
    --batsuBlueTransparent: rgba(0, 18, 212, 0.4);
    --lighterBatsuBlue: rgb(100, 110, 230);
    --lighterBatusBlueTransparent: rgba(100, 110, 230, 0.4);
}

html {
  scrollbar-width: none;          /* Modern standard: Hides scrollbar for Firefox and Chrome */
  -ms-overflow-style: none;       /* Hides scrollbar for Internet Explorer and Edge */
}

body {
    font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 24px; font-style: normal;
    background: #000000;
    background-image: linear-gradient(rgba(73, 17, 255, 0.2), rgba(95, 46, 255, .2)), url('images/webiteBackground.png');
    background-repeat: repeat;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    padding: 1.25rem 1rem 2rem;
    animation: scrollDiagonal 60s linear infinite, switchImages 1s linear infinite;
}

.page-header {
    width: 90%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 4rem;
    padding: 0.15rem 1.1rem 0.15rem;
    background: rgba(40, 3, 29, 0.8);
    border-radius: 1rem;
    border: 0.4rem solid rgba(40, 3, 29, 0.8);
    margin-top: 4rem;
    background-clip: padding-box;
    box-shadow: 0 6px 18px rgba(40, 3, 29, .7);
    
}

.top-nav {
    width: 100%;
    height: 3rem;
    margin: 0.5rem -1rem 1rem;
    border-radius: .6rem;
    border: .3rem solid white;
    overflow: hidden;
    position: sticky;
    z-index: 100;
    top: 1rem;
    padding-bottom: 3rem;
    background: linear-gradient(135deg, #f4b6c2 0%, #e78aa7 100%);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    border: 4rem solid linear-gradient(135deg, #f4b6c2 0%, #e78aa7 100%);
}


.top-nav button {
  background-color: #ffbaf7;
  color: rgb(0, 0, 0);
  border: .2rem dashed white;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: 'Courier New', Courier, monospace;
}

@keyframes switchImages {
    0%, 49% {
        background-image: linear-gradient(var(--background-color), var(--background-color)), url(images/webiteBackground1.png);
    }
    50%, 100% {
        background-image: linear-gradient(var(--background-color), var(--background-color)), url(images/webiteBackground2.png);
    }
}

@keyframes scrollDiagonal {
    0% {
        background-position:0 0;
    }
    100% {
        background-position: 1920px 1080px;
    }
}

h1 {
    padding-top: 1rem;
    padding-bottom:1rem;  
    padding-right: 3rem;
    padding-left: 1rem;
    text-align: left;
    font-size: 2.25rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.25rem;
}

.display-box {
    display:flex;
    border-radius: .6rem;
    justify-content:  start;
    gap: 1rem;
    background-color: rgba(255, 139, 240, 0.4);
    padding-left: .5rem;
    padding-right: .5rem;
    border: .3rem dashed rgba(255, 255, 255, 1);
}

.display-box h2, h3{
    padding-left: 1rem;
    background-image: linear-gradient(45deg, rgb(255, 155, 250), rgb(255, 255, 255));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; 
    color: transparent;
    display: inline-block;
    font-style: italic;
    padding-right: 1rem;
    animation: colorFrames 10s ease infinite;
    background-size: 200%;
    -webkit-text-stroke: 1px rgba(255, 255, 255, 0.5);
}

.display-box label {
    color: var(--lighterCherry);
    font-size: 1.5rem;
}

@keyframes colorFrames {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

.info-box {
  background: var(--infoBackground);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(40, 3, 25, .7);
  border: 0.3rem solid rgba(40, 3, 25, 0.7);
  background-clip: padding-box;
}





.deck-select {
    background-color: black;
}

.timer-row {
    display: inline-flex;
    align-items: center;
    gap: var(--timer-image-offset, 24px);
    margin: 1rem 0 1.5rem;
}

#timer-display {
    font-size: 2rem;
    -webkit-text-stroke: 1px black;
    font-weight: bold;
    min-width: 90px;
    text-align: center;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

#start-match-btn {
    color: var(--lighterMaruRed);
}

#end-match-btn {
    color: var(--lighterBatsuBlue);
}
 /* images to fit */
.timer-side-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transform: scale(2);
}

.sakura-image{
    width: 24px;
    height: 24px;
    object-fit: contain;
    transform: scale(2);
}

.category-image {
    width: 48px;
    height: 48px;
    object-fit: contain;
    transform: scale(2);
}

#answer-type-icon {
    width: 64px;
    height: 64px;
    object-fit: contain;
    transform: scale(1.5);
}

.category-container {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin: 1rem 0;
}

div {
    margin: 0.5rem 0;
    font-size: 2rem;
}


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


.title-banner {
    display: block;
    width: min(80vw, 760px);
    max-width: 100%;
    height: auto;
}



.nav-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 24px; font-style: normal;
}

.nav-links a {
    color: #5a1633;
    text-decoration: none;
    font-weight: 700;
    padding: 0.2rem 1rem;
    font-size: 1.5rem;
    border-radius: 999px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.nav-links a:hover,
.nav-links a.active {
    background: rgba(255,255,255,0.5);
    color: #2f0718;
}

.page-content {
    width: 100%;
    height: auto;
    max-width: 850px;
    text-align: center;
    display: block;
    background-color: rgb(255, 120, 113);
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
    margin-bottom: 3rem;
    border-radius: .6rem;
    box-shadow: 0 6px 18px rgba(216, 91, 91, .7);
    border: 0.4rem solid rgba(216, 91, 91, .5);

    background-clip: padding-box;

    
}


.page-content-two {
    width: 100%;
    max-width: 10000rem;
    text-align: center;
    background-color: #ffa9e2;
    border: .2rem solid #ffffff;
    border-radius: .6rem;
}

.deck-header-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
    gap: 0.75rem;
    padding-top: 0.75rem;
}

.deck-header-row .sakura-image {
    justify-self: center;
}

.deck-header-row h2 {
    margin: 0;
    color: rgb(255, 250, 192);
    font-size: 2rem;
    font-style: italic;
    border-radius: .6rem;
    text-align: center;
    justify-self: center;
}


#deckSearch {
    background-color: rgb(89, 106, 214);
    width: 75%;
    height: 3rem;
    border: .2rem solid rgb(255, 255, 255);
    border-radius: .6rem;
    color: #f4acf1;     
    font-size: 1.2rem;    
    font-style: normal;  
    font-weight: bold;    
    letter-spacing: 1px;  
    opacity: 1;  
    margin-bottom: 1rem;
    margin-top: 0.8rem;
}


input::placeholder {
  color: #f4acf1;     
  font-size: auto;    
  font-style: italic;  
  font-weight: bold;    
  letter-spacing: 1px;  
  opacity: .5;           
}

.basicContainer {
    display: flex;
    gap: .5rem;
    width: 100%
}

.basicFlexDiv {
    display:flex; 
    gap: 10px;
    padding-bottom: 1rem;
    align-items: stretch;
}

#deckList {
    margin-top: 2rem;
    width: 50%;
    min-height: 31rem;
    max-height: 31rem;
    height: 31rem;
    border: 3px solid rgb(255, 122, 117);
    border-radius: 10px;
    background-color: #6c0c32;
    scrollbar-width: none;
    color: #ffd0a9;     
    font-size: 2rem;    
    font-weight: bold;    
    letter-spacing: 1px;     
    flex: 1;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0.75rem 0.5rem;
    box-sizing: border-box;
    overflow: hidden;
}

#deckListOne {
    margin-top: 2rem;
    width: 50%;
    min-height: 31rem;
    max-height: 31rem;
    height: 31rem;
    border: 3px solid rgb(255, 122, 117);
    border-radius: 10px;
    background-color: #6c0c32;
    scrollbar-width: none;
    color: #ffd0a9;     
    font-size: 2rem;    
    font-weight: bold;      
    flex: 1;
    text-align: center;
    justify-content: center;
}

#deckList p {
    font-size: 2rem;
    color: rgb(255, 255, 255);
    width: 100%;
    margin: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
}

#deckListOne option {
    margin-top: 0.35rem;
    margin-left: 0.6rem;
    margin-right: 0.6rem;
    margin-bottom: 0.1rem;
    padding-top: 0.35rem;
    padding-bottom: 0.25rem;
    font-style: bold;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: #e46f98;
    text-align: center;
    border: 3px dashed;
    border-radius: 1rem;
    font-size: 1.4rem;
    font-style: italic;
    line-height: 1.2;
    min-height: 2.2rem;
    height: auto;
}

#deckList button {
    width: 90%;
    max-height: 6rem;
    height: auto;
    flex: 0 0 auto;
    background-color: #100442;
    color: rgb(242, 177, 200);
    border: 3px dashed;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2rem;
    padding: 0rem 0.5rem;
    margin: 0;
    font-style: italic;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.display-box button {
    width: 50%;
    max-height: 6rem;
    height: auto;
    flex: 0 0 auto;
    background-color: var(--infoBackground);
    color: var(--cherry);
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 2rem;
    padding: 0rem 0.5rem;
    margin: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;

}


#game-area {
    background: #180310;
    padding: 40px;
    border-radius: 20px;
    width: 100%;
    box-shadow: 0 5px 20px rgba(143, 16, 39, 0.881);
    border: .2rem solid #ffffff;
    text-align: center;
    align-items: center;
}

.bigList {
    text-align: left;
    letter-spacing: 0.1rem;
}

#category-display {
    font-size: 2.5rem;
    color: #0a016c;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 2rem;
    letter-spacing: 2px;
    -webkit-text-stroke: 1px rgb(255, 255, 255);
}

#timer-display {
    font-size: 3rem;
    font-weight: bold;
    color: #ffd54f;
    font-variant-numeric: tabular-nums;
}

#question-display {
    font-size: 1.8rem;
    line-height: 1.4;
    margin: 25px 0;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

hr { 
    height: 1rem
}

#answer-display {

    font-size: 1.5rem;
    font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    color: #ffd13b;
    background: #1a2744;
    padding: 15px;
    border-radius: 10px;
    margin: 15px 0;
    border-left: 4px solid #ffd13b;
    display: none; /* Hidden */
}

#score-display {
    font-size: 2.5rem;
    color: #ffffff;
    margin: 15px 0;
    font-style: bold;
    font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    background-color: rgb(33, 39, 140);
    width: 100%;
    border: .2rem solid rgb(255, 199, 199);
    border-radius: .6rem;

}

button {
    padding: 12px 30px;
    margin: 8px;
    font-size: 1rem;
    font-weight: bold;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.2s, opacity 0.2s;
    border: .3rem solid
}

button:hover {
    transform: scale(1.01);
}

button:active {
    transform: scale(0.95);
}

#reveal-btn {
    background: #ae0d0d;
    color: #ffffff;
    outline: 1px solid hsl(244, 100%, 78%);
}

#uploadButton {
    background-color: #ffbaf7;
    color: rgb(0, 0, 0);
    padding: 10px 20px;
    border: .2rem dashed white;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s ease;
    font-family: 'Courier New', Courier, monospace
}


#correct-btn {
    background: #310af3;
    color: white;
}

#wrong-btn {
    background: #f0110d;
    color: white;
}

#next-btn {
    background: #ffa726;
    color: #0a0e1a;
}

button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


p {
    font-size: 1.4rem;
    text-align: center;
    font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 24px; font-style: normal;
}

.page-content-two p {
    text-align: center;
    font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 24px; font-style: normal;
}


li {
    font-size: 1.4rem;
    list-style-type: none;
    color: var(--lighterCherry);
    font-family: Tahoma, Verdana, Segoe, sans-serif; font-size: 24px; font-style: normal;
}

form {
    padding-bottom:1rem;
    margin-top: 3rem;
}

.info-box input {
    border: .2rem dashed var(--darkerCherry);
    background-color: black;
    color: var(--darkerCherry);
}

.info-box input::placeholder {
    color: var(--darkerCherry);
    font-style: italic;
    font-size: auto;
}

.info-box p {
    padding-left: .5rem;
    text-align: left;
}


input {
    font-family: 'Courier New', Courier, monospace;
}

/* Target the "Choose File" button directly */
input[type="file"]::file-selector-button {
  background-color: #ffbaf7;
  color: rgb(0, 0, 0);
  padding: 10px 20px;
  border: .2rem dashed white;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: 'Courier New', Courier, monospace
}


/* Add a hover effect */
input[type="file"]::file-selector-button:hover {
  background-color: #ca95ff;
}

#uploadButton:hover {
    background-color:rgb(rgb(65, 255, 129), green, blue);
}

#submit-btn {
  background-color: #ffbaf7;
  color: rgb(0, 0, 0);
  border: .2rem dashed white;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease;
  font-family: 'Courier New', Courier, monospace
}

a {
    color: var(--darkerCherry);
}

/* GAME AREA */

.game-box {
    display:flex;
    border-radius: .6rem;
    gap: 1rem;
    background-color: rgba(139, 255, 139, 0.4);
    padding-left: 1%;
    padding-right: 1rem;
    border: .3rem dashed rgba(255, 255, 255, 1);
    width: 100%;
    height: auto;
    padding-bottom: 1rem;
    padding-top: 1rem;
}

#teams-panel {
  position: relative;
  background: var(--darkestCherry);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(40, 3, 25, .7);
  border: 0.3rem solid rgba(40, 3, 25, 0.7);
  background-clip: padding-box;
  width: 25%;
  text-align: center;
  color: var(--lighterMaruRed);
}

#teams-panel h2 {
    color: var(--lighterMaruRed);
    -webkit-text-stroke: 1px white;
}

.team-info {
    background-color: var(--lighterCherry);
    border: 3px solid white;
}



.team-info h3{
    font-size: 1.5rem;
    -webkit-text-stroke: 1px black;
}

.player-list {

}

.player-list li {
    color: black;
    font-size: 1.3rem;
    width: 100%;
    font-family: Tahoma, Geneva, Verdana, sans-serif;
}

.game-panel {
  background-color: rgba(204, 255, 175, 0.895);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(40, 3, 25, .7);
  border: 0.3rem solid rgba(255, 255, 255, 1);
  background-clip: padding-box;
  width: 75%;
  color: var(--lighterMaruRed);
  height: auto;
}

.game-panel h2 {
    margin-top: 0rem;
    margin-bottom: 0rem;
    padding-top: 1rem;
    padding-bottom: 0rem;
    padding-left: 1rem;
    color: var(--maruRed);
    -webkit-text-stroke: 1px white;
}


#current-category {
    color: var(--lighterBatsuBlue);
    font-size: 2rem;
    margin-bottom: 1rem;
}

#current-question {
    color: var(--lighterMaruRed);
    font-size: 2rem;
    margin-bottom: 2rem;
}

#answer-area {

    justify-content: center;
    padding-top: 1rem;
    overflow: hidden;

    border-radius: .6rem;
}

#answer-area input {
    color: black;
    font-style: italic;
    font-size: 1.5rem;
    width: 90%;
    margin-left: 5%;
    margin-right: 5%;
    border: .3rem dashed black;
    height: 3rem;
}


#answer-area input::placeholder {
    color: black;
    font-style: italic;
    font-size: 1rem;
}

#question-image {
    border: .3rem solid black;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

#question-image-area {
    background-color: rgba(0, 0, 0, 0.5);
    padding: .5rem;
}

.question-div {
    display:flex; 
    gap: 3rem; 
    align-items:center; 
    width:90%; 
    margin-left: 5%; 
    margin-right: 5%;
}

#buzzer-btn {
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
    width: 90%;
    font-size: 2rem;
    font-style: italic;
    color: var(--darkestCherry);
    background-color: var(--lighterMaruRedTransparenct);
}


/* Hey hello this is the mobile space*/
@media (max-width: 700px) {
    .basicFlexDiv {
        flex-direction: column;
        gap: 0.75rem;
    }

    #deckList,
    #deckListOne {
        width: 100%;
        min-height: 18rem;
        max-height: 22rem;
        height: 22rem;
        margin-top: 1rem;
    }

    #deckListOne option {
        font-size: 1.1rem;
        margin-left: 0.3rem;
        margin-right: 0.3rem;
    }

    h2 {
        font-size: 1.4rem;
    }

    .page-content p {
        font-size: 1.1rem;
    }

    .display-box {
        width: 100%;
        text-align: center;
    }

    .display-box p {
        font-size: 1.1rem;

    }

    .page-header {
        width: 100%;
    }
    .top-nav {
        height: auto;
        padding-bottom: 0rem;
    }

    #current-category {
        font-size: 1.3rem;
    }

    #current-question {
        font-size: 1.2rem;
    }

    #timer-display { 
        font-size: 1.6rem;
    }

    .game-box {
        display: block;
        justify-content: center;
    }

    .game-panel {
        width: 90%;
        margin-left: 5%;
        margin-right: 5%;
    }

    #teams-panel{
        width: 100%;
    }
    .sakura-image{
        width: 24px;
        height: 24px;
        object-fit: contain;
        transform: scale(1);
    }

    .category-image {
        width: 48px;
        height: 48px;
        object-fit: contain;   
        transform: scale(1.5);
    }

    #answer-type-icon {         
        width: 48px;
        height: 48px;  
        object-fit: contain;
        transform: scale(1.5);
    }       

    .question-div {
        display:flex; 
        gap: 1rem; 
        align-items:center; 
        width:90%; 
        margin-left: 5%; 
        margin-right: 5%;
    }

}