/* 1. GLOBAL COLOR AND STYLE VARIABLES */
:root {
    /* Define global color and style variables for site-wide consistency */
    
    
    /*  General Color Schemes  */
    --regal-navy: #003171ff;
    --metallic-gold: #ddb11fff;
    --raw-umber: #743903ff;
    --slate-grey: #7c90a0ff;
    --icy-blue: #add9f4ff;


    --color-primary-blue: rgb(0, 59, 136);
    --color-primary-blue-hover: rgb(0, 49, 114);
    --color-primary-gold: #ddb11fff;
    --color-primary-gold-hover: #96750a;
    --color-primary-brown: #743903ff;

    --color-bg-light: #add9f4ff;
    --color-bg-dark: rgb(149, 199, 229);


    /*  Specific Colors  */
    --color-dropdown-base: #7c90a0ff;
    --color-dropdown-hover: rgb(99, 120, 138);
    
    --color-header-text: var(--color-primary-gold);
    --color-header-bg: var(--color-primary-blue);

    --color-timer-start: #76c7ac;

    --color-check-border: black;
    --color-check-bg: white;
    --color-check-bg-checked: var(--color-primary-gold);
    --color-checkmark: red;

    /*  Fonts   */
    --font-serif: 'Georgia', serif;
    --font-size-base: 1.1rem;
    --font-size-med: 1.3rem;
    --font-size-large: 1.6rem;

    --color-font-primary: white;

    --border-radius-lg: 10px;
    --border-radius-med: 6px;

    --header-height: 70px;
    --footer-height: 20px;

    /* Layout sizes - Full Monitor*/
    --height-verse-container: 40vh;
    --height-max-dropdown: 30vh;

    /*  Element Sizes - Small/Mobile  */
    --height-verse-box-mob: 30dvh;

    /*  Element Sizes - Full Monitor  */
    --width-dropdopwn-narrow: 70px;

    --width-button: 50px;
    --height-button: 25px;

    --strike-box-size: 80px;
    --size-base: 7vw;
    --size-runner: 25px;

    /*  Element Sizes - Small/Mobile  */
    --width-button-mob: 28px;
    --height-button-mob: 10px;

    --size-strbox-mob: 30px;
    --size-base-mob: 7dvw;
    --size-runner-mob: 25px;
}

@keyframes flash-red {
    0% {box-shadow: 0 0 10px 2px rgba(255, 0, 0, 0.4);}
    50% {box-shadow: 0 0 10px 4px rgba(255,0,0,0.9);}
    100% {box-shadow: 0 0 10px 2px rgba(255,0,0,0.4);}
}

@keyframes strike-shake-fade {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(0.8);
  }
  10% {
    transform: translate(-20px, -10px) scale(1);
  }
  20% {
    transform: translate(20px, 10px) scale(1);
  }
  30% {
    transform: translate(-15px, 5px) scale(1);
  }
  40% {
    transform: translate(15px, -5px) scale(1);
  }
  50% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(0, 50px) scale(0.5);
  }
}

@keyframes strike-spin-shrink {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
  40% {
    opacity: 1;
    transform: scale(1.1) rotate(360deg);
  }
  100% {
    opacity: 0;
    transform: scale(0) rotate(720deg);
  }
}

/*  2. TYPOGRAPHY AND DEFAULT ELEMENTS */
h1 {
    text-align: center;
    font-size: 2.5rem;
    margin-top: 20px;
}

h2 {
    font-size: 2rem;
    margin: 10px 0;
}

/*  3. REUSABLE CONTROLS (Buttons and Selects) */
button,
select,
#include-exclude-toggle {
    font-size: var(--font-size-base);
    border: none;
    cursor: pointer;
    color:white;
    box-shadow: 0 2px 5px rgba(0,0,0,0.09);
    transition: background-color 0.3s ease, transform 0.1s ease;
    flex-shrink: 0; /* Prevents buttons from shrinking */
    border-radius: var(--border-radius-lg);
    margin: 3px 5px 3px 5px; /* Top, Right, Bottom, Left*/
}

button {
    padding: var(--height-button) var(--width-button);
    font-size: 1.2rem;
    font-weight: 500;
    background-color: var(--color-primary-blue);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Stronger shadow for action buttons */
}

button:hover {
    background-color: var(--color-primary-blue-hover);
    transform: scale(1.05);
}

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

button:disabled {
    background-color: #a9a9a9;
    color: #555;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.7;
    transform: none;
}