:root {
  --background: transparent;
  --text-color: black;
  --dark-background: transparent;
  --dark-text: white;
  --typing-text: gold;
  --dark-cell-border: rgba(255, 255, 255, 0.5);
  --dark-cell-background: rgba(0, 0, 0, 0.5);
  --dark-given-background: rgba(100, 100, 120, 0.5);
  --dark-bracket-color: rgba(240, 240, 240, 0.5);

  --highlight: linear-gradient(to bottom, var(--highlight-upper-border-active) 0%, var(--highlight-upper-border-active) 15%, var(--highlight-lower-border-active) 85%, var(--highlight-lower-border-active) 100%);
  --highlight-active-upper: linear-gradient(to bottom,  var(--highlight-upper-border-active) 0%, var(--highlight-upper-border-active) 55%, rgba(0, 0, 0, 0) 100%);
  --highlight-active-lower: linear-gradient(to top, var(--highlight-lower-border-active) 0%, var(--highlight-lower-border-active) 55%, rgba(0, 0, 0, 0) 100%);
  --highlight-inactive-both: linear-gradient(to bottom, var(--highlight-upper-border-inactive) 0%, var(--highlight-upper-border-inactive) 15%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, var(--highlight-lower-border-inactive) 85%, var(--highlight-lower-border-inactive) 100%);
  --highlight-inactive-upper: linear-gradient(to bottom,  var(--highlight-upper-border-inactive) 0%, var(--highlight-upper-border-inactive) 15%, rgba(0, 0, 0, 0) 30%);
  --highlight-inactive-lower: linear-gradient(to top, var(--highlight-lower-border-inactive) 0%, var(--highlight-lower-border-inactive) 15%, rgba(0, 0, 0, 0) 30%);
  --highlight-upper-border-active: rgb(100, 149, 237);
  --highlight-upper-border-inactive: rgba(100, 149, 237, 0.9);
  --highlight-lower-border-active: rgb(255, 165, 0);
  --highlight-lower-border-inactive: rgba(255, 165, 0, 0.9);
  --highlight-inactive-incorrect: red;

  --upper-clue-list-background: transparent;
  --lower-clue-list-background: transparent;
  --button-background: gray;
  --button-text-color: white;
  --button-background-dark: black;
  --button-text-color-dark: white;
  
  --cell-border: rgb(70, 70, 70);
  --cell-background: white;
  --cell-fonts: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  --bracket-color: rgba(50, 50, 50, 0.35);
  --cell-size-vw: 5vw;

  --showcase-info-font: 'Trocchi', serif;
  --showcase-info-font-size: 1.4rem;
  --showcase-byline-font-size: 1.0rem;

  --mobile-clue-font-size: 1.2rem;
  --mobile-grid-gap: 4px;
}

/* Mobile Grid Optimization */
@media (max-width: 768px) {
  .cell {
      width: 25px !important;
      height: 25px;
      font-size: 1.2rem;
  }
  #bracketgram {
      grid-gap: 0px;
  }

  #bracketgramHeader::after {
    display: none;
  }

  #buttons-container {
      display: none !important;
  }

}



/*=============
Fonts
=============*/

/* urbanist-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Urbanist';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/urbanist-v15-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* trocchi-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Trocchi';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/trocchi-v17-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* saira-stencil-one-regular - latin */
@font-face {
  font-display: swap;
  font-family: 'Saira Stencil One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/saira-stencil-one-v16-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* 
==============================================================================================================================
bracketgram
==============================================================================================================================
*/

#bracketgram {
  display: grid;
  grid-template-columns: repeat(41, 29px);
  grid-row-gap: 10px;
  width: 0px;
  margin: 0 auto;
  padding-top: 20px;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 20px;
  font-family: var(--cell-fonts);
  position: relative;
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  #bracketgram {
    padding-left: 0px;
  }
}

/* Hide scrollbars for the bracketgram element */
#bracketgram {
  scrollbar-width: none; /* For Firefox */
  -ms-overflow-style: none; /* For Internet Explorer and Edge */
}

#bracketgram::-webkit-scrollbar {
  display: none; /* For Chrome, Safari, and Opera */
}




/* 
==============================================================================================================================
bracketgramContainer
==============================================================================================================================
*/



#bracketgramContainer {
  position: relative;
  width: 1200px;
  padding-top: 30px;
  padding-bottom: 20px;
  margin: 0 auto;
  transition: height 0.3s ease, opacity 0.5s ease;
}

@media (max-width: 768px) {
  #bracketgramContainer {
    width: 90%;
  }

  #bracketgramContainer::before,
  #bracketgramContainer::after {
    display: none;
  }
}

#bracketgramContainer::before,
#bracketgramContainer::after {
  content: '';
  position: absolute;
  top: 20px;
  height: 90%;
  width: 0px; /* Fixed width for the brackets */
  background: none;
  border: 8px solid var(--bracket-color); /* Bracket color */
  transition: transform 1s ease-in-out, left 1s ease-in-out, right 1s ease-in-out;
}

.dark-mode #bracketgramContainer::before,
.dark-mode #bracketgramContainer::after {
  border: 8px solid var(--dark-bracket-color); /* Bracket color */
}

#bracketgramContainer::before, .dark-mode #bracketgramContainer::before {
  left: 0;
  border-right: none; /* Create [ shape */
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;
  transform: scaleY(0);
}

#bracketgramContainer::after, .dark-mode #bracketgramContainer::after {
  right: 0;
  border-left: none; /* Create ] shape */
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  transform: scaleY(0);
}

#bracketgramContainer.scroll-expand-brackets::before,
#bracketgramContainer.scroll-expand-brackets::after {
  height: 60%; /* Expand to full height */
}

#bracketgramContainer.expand-brackets::before,
#bracketgramContainer.expand-brackets::after {
  transform: scaleY(1.05); /* Expand to full height */
}

#bracketgramContainer.expand-brackets-width::before,
#bracketgramContainer.expand-brackets-width::after {
  width: 16px; /* Final thickness of the brackets */
  transition: width 0.3s ease-in-out; /* Smoothly animate the width */
}

#bracketgramContainer.collapse-brackets-width::before,
#bracketgramContainer.collapse-brackets-width::after {
  width: 0px; /* Final thickness of the brackets */
  transition: width 0.3s ease-in-out; /* Smoothly animate the width */
}




/* 
==============================================================================================================================
Headers
==============================================================================================================================
*/

.bracketgramHeader {
  font-family: "Garamond";
  font-weight: 300;
  font-size: 3.5rem;
  letter-spacing: 2px;
  color: white;
  position: relative; /* For positioning the underline */
  display: inline-block; /* Wrap tightly around the text */
  margin-right: 10px;
  z-index: 1; /* Text stays on top */
  transition: transform 1.5s ease;
}

.bracketgramHeader::before {
  content: '';
  position: fixed;
  top: 0;
  left: 50px;
  height: 80px; /* Full height of the header */
  width: 0px; /* Start with no width */
  background-color: rgba(36, 93, 112, 0.95); /* Light blue with transparency */
  border-radius: 5px; /* Optional: Add rounded corners */
  transition: width 1.5s ease, height 1.5s ease; /* Smooth expansion */
  z-index: -2; /* Behind the text and underline */
}

.dark-mode .bracketgramHeader::before {
  content: '';
  position: fixed;
  top: 0;
  left: 50px;
  height: 80px; /* Full height of the header */
  width: 0px; /* Start with no width */
  background-color: rgba(173, 216, 230, 0.15); /* Light blue with transparency */
  border-radius: 5px; /* Optional: Add rounded corners */
  transition: width 1.5s ease, transform 0.3s ease, background-color 1.5s ease; /* Smooth expansion */
  transform-origin: bottom;
  z-index: -2; /* Behind the text and underline */
}

.bracketgramHeader.shift-left {
  transform: translateX(-100px) scale(0.8);
}

.bracketgramHeader.shift-left::before {
  width: 800px; /* Expand the background box to full width */
}

.bracketgramHeader.exit::before {
  height: 60px;
  transform: scaleY(0);
  background-color: black;
}

.bracketgramHeader.shift-up {
  transform: translateY(-450px) scale(0.6);
}

.bracketgramHeader.shift-up::before {
  width: 0px;
}

.bracketgramHeader::after {
  content: '';
  opacity: 0;
  position: absolute;
  left: 0;
  bottom: 7px; /* Place the underline just below the text */
  height: 3px; /* Thickness of the squiggle */
  width: 0%;
  background-image: repeating-linear-gradient(
      90deg,
      red 0%,
      red 25%,
      transparent 25%,
      transparent 50%
  );
  background-size: 20px 3px; /* Squiggle pattern size */
  z-index: -1; /* Underline stays behind the text */
  transition: width 0.9s ease-in, transform 1.5s ease, opacity 1.0s ease;
}

.byline, .title {

  font-family: var(--clue-list-fonts);
  text-align: right;
  white-space: pre;
  font-size: 1.6rem;
  padding-bottom: 1rem;
  min-height: calc(2.8em * 3);

  display: none; /* Initially hidden */
  position: absolute;
  top: 40px;
  color: rgb(255, 255, 255); /* Default color */

  letter-spacing: 0.2em;
  z-index: 10;
}

.byline.visible {
  display: block; /* Make the byline visible */
}

#mainHeader {
  position: absolute; /* Anchor the element to the parent container */
  top: 0px;
  opacity: 1;
  width: auto; /* Extend to full viewport width */
  height: auto; /* Adjust height as needed */
  background-color: rgba(0, 0, 0, 0); /* Fully transparent background */
  left: 0; /* Ensure it starts at the left edge */
  right: 0; /* Ensure it extends to the right edge */
  z-index: 1; /* Position it above other elements, if necessary */
}


/* Mobile Grid Optimization */
@media (max-width: 768px) {

  .bracketgramHeader::before {
    display: none;
  }

  .bracketgramHeader.shift-left {
    transform: translateX(0px) translateY(-35px);
  }

}


/* 
==============================================================================================================================
Body Elements
==============================================================================================================================
*/

html, body {
  user-select: none; /* Prevent text selection */
  -webkit-touch-callout: none; 
  -webkit-user-select: none; /* Safari for iOS */
  -ms-user-select: none; /* Internet Explorer/Edge */
  -moz-user-select: none; /* Firefox */
  touch-action: manipulation; /* Prevent double-tap zoom */
}


body {
  background: var(--background);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
  user-select: none;
  text-align: center;
  margin-top: 120px;
  margin-left: 0px;
  margin-right: 0px;
  overflow: hidden;
}

h1 {
  font-family: 'Urbanist';
  font-style: normal;
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: white;
}

.non-letter {
  display: inline-block;
  width: 0.6em;
  opacity: 1;
  transition: all 0.5s ease;
}
.letter {
  display: inline-block;
  transition: all 0.5s ease;
}

.small-caps {
  transform: scale(0.8, 0.8);
  position: relative;
  top: 0.1em;
  transition: all 0.5s ease;
}
.normal-caps {
  transform: scale(1, 1);
  color: gold;
  top: 0;
}

.showcase-caps {
  transform: scale(1, 1);
  top: 0;
}

.typing-text {
  font-family: Urbanist;
  font-size: 0.6em;
  color: var(--typing-text);
  display: inline-block;
  position: relative;
}

.typing-letter {
  opacity: 0; /* Start invisible */
  transform: scale(0.5); /* Start smaller */
  display: inline-block;
  transition: opacity 0.3s ease, transform 0.3s ease, width 1s ease;
}

.invisible-text {
  visibility: hidden; /* Make invisible but still contribute to layout */
}

.caret {
  color: gold;
  display: inline-block;
  transition: opacity 0.3s ease;
}

.pronounce-button {
  background: transparent;  /* Ensures transparency */
  display: inline-block;     /* Ensures inline-block behavior */
  border: none;              /* Remove the button border */
  padding: 0;                /* Remove any padding */
  cursor: pointer;
  margin-left: 10px;
}

.solution-play-button {
  background: transparent;  /* Ensures transparency */
  border: none;              /* Remove the button border */
  padding: 0;                /* Remove any padding */
  cursor: pointer;
  position: absolute;
  top: 50px;
}

#definition {
  font-family: "Trocchi", serif;
  font-size: 1.4rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: white;
}


.dark-mode {
  background: var(--dark-background);
  color: var(--dark-text);
}



/* 
==============================================================================================================================
Keyboard
==============================================================================================================================
*/

.keyboard-body {
  background: #8a8a8a;
  padding-bottom: 10px;
  gap: 7px; /* Add space between rows */
  padding: 5px 0;
  display: flex; /* Ensure the rows inside it are treated as flex items */
  flex-direction: column; /* Stack the rows vertically */
}

#custom-keyboard {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: none;
  flex-direction: column;
  z-index: 1000;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 1.5%;
}

.key {
  flex: 1; /* Each key takes up equal space in its row */
  max-width: 8%; /* Restrict the key width to 8% of the screen */
  height: 50px; /* Fixed height for keys */
  color: black;
  background: #ddd;
  border: none;
  border-radius: 7px;
  font-size: 16px; /* Base font size */
  display: flex; /* Center content inside the key */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  cursor: pointer;
  overflow: hidden; /* Prevent text overflow */
  transform-origin: center; /* Scale text from the center */
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); /* Subtle drop shadow */
}

.key span {
  display: inline-block;
  transform: scale(1.5); /* Make the text visually larger */
  line-height: 1; /* Ensure the text stays vertically centered */
}

.backspace-key {
  max-width: 14%;
}

.backspace-key span {
  transform: scale(2);
}

.keyboard-spacer {
  opacity: 0;
  pointer-events: none;
}

.key:active {
  background: var(--highlight);
}

/* Arrow Row (Left and Right Arrows) */
.arrow-row {
  display: flex;
  justify-content: center;
  gap: 3%; /* Space between the arrows */
  margin-bottom: 10px; /* Space below the arrows */
}

.arrow-key {
  flex: 1; /* Ensure the arrows take up equal space */
  max-width: 20%; /* Restrict the width of the arrow buttons */
  height: 50px; /* Same height as other keys */
  color: black;
  background: #ddd;
  border: none;
  border-radius: 7px;
  font-size: 20px; /* Larger font size for arrows */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  overflow: hidden;
  box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.3); /* Subtle drop shadow */
}

.arrow-key span {
  display: inline-block;
  transform: scale(1.5); /* Make the arrow text visually larger */
  line-height: 1; /* Ensure the arrow is centered vertically */
}

.arrow-key:active {
  background: var(--highlight);
}



/* 
==============================================================================================================================
Highlights
==============================================================================================================================
*/


.highlight {
  background: var(--highlight);
  border: 2px solid var(--cell-border) !important;
}

.highlightActiveUpper {
  background: var(--highlight-active-upper);
}

.highlightActiveLower {
  background: var(--highlight-active-lower);
}

.highlightInactiveBoth {
  background: var(--highlight-inactive-both);
}

.highlightInactiveUpper {
  background: var(--highlight-inactive-upper);
}

.highlightInactiveLower {
  background: var(--highlight-inactive-lower);
}

.highlightInactiveIncorrect {
  color: var(--highlight-inactive-incorrect) !important;
  border: 1px solid black;
}

.highlight::before, 
.highlightActiveUpper::before, 
.highlightInactiveUpper::before, 
.highlightInactiveBoth::before {
  content: '';
  position: absolute;
  top: -13px; /* Position just above the cell */
  left: -1px;
  width: 29px; /* Full width of the cell */
  height: 12px; /* Height of the line */
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 30%,
    var(--highlight-upper-border-inactive) 100% /* Solid color near the cell */
  );
}

.highlight::after, 
.highlightActiveLower::before, 
.highlightInactiveLower::after, 
.highlightInactiveBoth::after {
  content: '';
  position: absolute;
  bottom: -12px; /* Position just below the cell */
  left: -1px;
  width: 29px; /* Full width of the cell */
  height: 11px; /* Height of the line */
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 30%,
    var(--highlight-lower-border-inactive) 100% /* Solid color near the cell */
  );
}

.highlight::before, .highlightActiveUpper::before {
  left: -2.0px;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 30%,
    var(--highlight-upper-border-active) 100% /* Solid color near the cell */
  );
}

.highlight::after, .highlightActiveLower::after {
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0) 30%,
    var(--highlight-lower-border-active) 100% /* Solid color near the cell */
  );
}

.dark-mode .highlight, .dark-mode .highlightActiveUpper, .dark-mode .highlightActiveLower {
  border-top: 1px solid var(--dark-cell-border) !important;
  border-bottom: 1px solid var(--dark-cell-border) !important;
  border-left: 2px solid var(--dark-cell-border) !important;
  border-right: 2px solid var(--dark-cell-border) !important;
}


/* 
==============================================================================================================================
Clue lists
==============================================================================================================================
*/

#upperClueList {
  visibility: hidden;
  min-height: 23px;
  background-color: var(--upper-clue-list-background);
  padding: 10px 20px;
  margin-bottom: 200px;
  border-radius: 15px;
  width: 0px;
  overflow: hidden; /* Prevent content from overflowing during animation */
  transition: width 0.4s ease-out, color 0.3s; /* Adjust duration and easing as desired */
}

#lowerClueList {
  visibility: hidden;
  min-height: 23px;
  background-color: var(--lower-clue-list-background);
  padding: 10px 20px;
  border-radius: 15px;
  width: 0px;
  overflow: hidden; /* Prevent content from overflowing during animation */
  transition: width 0.4s ease-out; /* Adjust duration and easing as desired */
}

#upperClueList, #lowerClueList {
  display: block;
  height: 30px;
  margin: 0 auto;
  font-family: var(--clue-list-fonts);
  font-size: 20px;
  text-align: center;
  color: var(--text-color);
  max-width: 800px;
}

#upperClueList {
  white-space: normal;
  background-color: var(--upper-clue-list-background);
  padding: 10px 20px;
  border-radius: 15px;
}

#lowerClueList {
  white-space: normal;
  background-color: var(--lower-clue-list-background);
  padding: 10px 20px;
  border-radius: 15px;
}

#upperClueList > div, #lowerClueList > div {
  display: block;
  padding: 5px 10px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.5);
  max-width: 100%;  /* Important - ensures content will wrap within parent */
  box-sizing: border-box;  /* Also helpful */
}


.clue-text {
  display: block; /* Treat as a block for alignment purposes */
  text-align: center; /* Center-align the text */
  line-height: 1.1; /* Adjust line height for multi-line clues */
  white-space: normal;
  word-wrap: break-word;
}


.clue-text.wrapped {
  transform: translateY(-20%);
  font-size: 18px;
}

#upperClueList::before,
#upperClueList::after,
#lowerClueList::before,
#lowerClueList::after {
  content: ''; /* Necessary for pseudo-elements */
  display: block;
  position: absolute; /* Position relative to the parent container */
  opacity: 0;
  width: 0;
  height: 0;
  border-style: solid;
  transition: opacity 0.3s;
}

#upperClueList.chevronsAppear::before,
#upperClueList.chevronsAppear::after,
#lowerClueList.chevronsAppear::before,
#lowerClueList.chevronsAppear::after {
  opacity: 1;
}

#upperClueList::before, #lowerClueList::before {
  left: 8px; /* Adjust position to your preference */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--text-color) transparent transparent;
}

#upperClueList::after, #lowerClueList::after {
  right: 8px; /* Adjust position to your preference */
  top: 50%; /* Center vertically */
  transform: translateY(-50%);
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent var(--text-color);
}

/* Ensure parent containers are positioned relative for the pseudo-elements */
#upperClueList, #lowerClueList {
  position: relative;
  overflow: visible; /* Allow pseudo-elements to be visible outside the container */
}

.dark-mode #upperClueList, .dark-mode #lowerClueList {
  color: var(--dark-text);
}

.dark-mode #upperClueList::before, .dark-mode #lowerClueList::before {
  border-color: transparent var(--dark-text) transparent transparent;
}
.dark-mode #upperClueList::after, .dark-mode #lowerClueList::after { 
  border-color: transparent transparent transparent var(--dark-text);
}


@media (max-width: 768px) {
  #upperClueList, #lowerClueList {
    width: 90% !important;
    white-space: normal !important;
    font-size: var(--mobile-clue-font-size);
    position: relative; /* Ensure top works */
    overflow: hidden; /* Prevent overflow issues */
    text-align: center; /* Center-align the text */
    line-height: 1.1; /* Adjust for multi-line text */
    z-index: 10;
  }

  #upperClueList > div, #lowerClueList > div {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.5);
  }
 
  #upperClueList {
    transform: translateY(30px);   
  }

  #lowerClueList {
    transform: translateY(-36px);   
  }

  .clue-text {
    display: block; /* Ensure it acts like a block element */
    width: 100%; /* Make sure it takes up the full width of the parent container */
    font-size: 4vw; /* Scale the font size relative to the viewport width */
    word-wrap: break-word; /* Allow text to break at word boundaries */
    white-space: normal;   /* Allow wrapping of long words */
    line-height: 1.2; /* Adjust line height for readability */
    vertical-align: middle; /* Vertically align text within its container */
  }
}


/* 
==============================================================================================================================
Buttons
==============================================================================================================================
*/

#buttons-container {
  opacity: 0 !important;
  position: absolute;
  top: 30px;
  right: 50px;
  display: flex;
  flex-direction: column; /* Make elements stack vertically */
  align-items: center;
  gap: 10px; /* Space between dark mode button and theme buttons */
  transition: opacity 2.5s ease;
  z-index: 10;
}

#theme-buttons {
  pointer-events: none;
  display: flex;
  flex-direction: column; /* Arrange buttons in a vertical column */
  align-items: center;
  gap: 5px; /* Space between theme buttons */
  transition: opacity 1.0s ease;
  opacity: 0;
  position: relative;
}


.themeButtonsAppear{
  pointer-events: auto !important;
  transition: opacity 1.0s ease;
  opacity: 1 !important;
}


#darkmode-button {
  display: flex;
  align-items: center;
}

#darkModeContainer {
  position: relative;
  display: inline-block; /* Ensure it wraps around its contents */
}


#darkModeToggle, #brackishToggle, #barbershopToggle, #birthdaypartyToggle {
  z-index: 10;
  padding: 0px 5px;
  font-size: 16px;
  cursor: pointer;
  background-color: var(--button-background);
  color: var(--button-text-color);
  border: none;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s;
  display: inline-block;
  outline: none;
  position: relative;
}

.dark-mode #darkModeToggle, .dark-mode #brackishToggle {
  background-color: var(--button-background-dark);
  color: var(--button-text-color-dark);
}

#darkModeToggle svg {
  fill: var(--icon-color);
  transition: fill 0.3s;
}

.dark-mode #darkModeToggle svg {
  fill: var(--icon-color-dark);
}


#brackishToggle .tooltip, 
#barbershopToggle .tooltip, 
#birthdaypartyToggle .tooltip, 
#darkModeToggle .tooltip {
  z-index: 10;
  visibility: hidden;
  width: auto;
  background-color: black;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 10px 8px;
  position: absolute;
  top: 50%; /* Center tooltip vertically relative to button */
  left: -20px; /* Ensures uniform positioning exactly 10px to the left of the button */
  transform: translateY(-50%); /* Center vertically */
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 16px;
  white-space: nowrap; /* Prevent text wrapping */
}

#brackishToggle:hover .tooltip, #barbershopToggle:hover .tooltip, #birthdaypartyToggle:hover .tooltip, #darkModeToggle:hover .tooltip {
  visibility: visible;
  z-index: 10;
  opacity: 1;
}



/* 
==============================================================================================================================
Cells
==============================================================================================================================
*/

.cell {
  width: 29px;
  height: 39px;
  border: 1px solid var(--cell-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  position: relative;
  font-weight: bold;
  box-sizing: border-box;
  background-color: var(--cell-background);
  opacity: 1;
}

.blacked-out, .given {
  background-color: black;
  pointer-events: none;
}

.given {
  background-color: lightgray;
}

span.cell-text {
  z-index: 1;
  position: relative;
  font-size: 22px;
  color: white;
}

div.clue-number {
  position: absolute;
  left: 1px;
  font-size: 11px;
  color: rgba(50, 50, 50, .7);
  z-index: 0;
}

div.clue-number.upper {
  top: 1px;
}

div.clue-number.lower {
  bottom: 1px;
}

.dark-mode .cell {
  color: var(--dark-text);
  border-color: var(--dark-cell-border);
  background-color: var(--dark-cell-background);
  text-shadow: -1px 0 var(--dark-cell-background), 0 1px var(--dark-cell-background), 1px 0 var(--dark-cell-background), 0 -1px var(--dark-cell-background);
}

.dark-mode .blacked-out {
  background-color: rgba(240, 240, 240, .8);
  pointer-events: none;
}

.dark-mode .given {
  background-color: var(--dark-given-background);
}

.dark-mode div.clue-number {
  color: var(--dark-text);
  text-shadow: -1px 0 var(--dark-cell-background), 0 1px var(--dark-cell-background), 1px 0 var(--dark-cell-background), 0 -1px var(--dark-cell-background);
}



/* 
==============================================================================================================================
Showcase
==============================================================================================================================
*/

#showcaseInstruction {
  display: inline-block;
  opacity: 0; /* Start invisible */
  position: relative;
  font-size: 1.2rem;
  color: rgb(69, 67, 60);
  transform: scaleY(1); /* Normal height */
  transform-origin: top; /* Shrink from the top */
  transition: transform 0.5s ease, opacity 0.5s ease; /* Smooth transition */
}

#showcaseInstruction.fading-out {
  opacity: 0;
}

.dark-mode #showcaseInstruction {
  color: rgb(237, 230, 213);
}

#showcaseInstruction.visible {
  opacity: 0.65 !important;
  animation: pulse 1.5s infinite;
  transition: opacity 0.5s ease; /* Smooth fade-in */
}

#showcaseInstruction.invisible {
  opacity: 1;
  transform: scaleY(0); /* Shrink vertically */
}


@keyframes pulse {
  0% {
      opacity: 1;
      transform: scale(1);
  }
  50% {
      opacity: 0.8;
      transform: scale(1.05);
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}


.showcaseDisplay {

  font-family: "Spline Sans Mono", monospace;
  text-align: center;
  white-space: pre;
  font-size: 1.5rem;
  line-height: 1.5;
  padding: 0 15px; /* Adjust padding to make space for brackets */
  overflow: visible;
  cursor: pointer;
  opacity: 0; /* Initially hidden */
  pointer-events: auto;
  margin: 37px auto 50px auto !important;
  position: relative;
  color: rgb(36, 33, 33); /* Default color */

  letter-spacing: 0.2em;
  z-index: 10;

  transition: width 1s ease;
}

.showcaseDisplay::before,
.showcaseDisplay::after {
  content: ''; /* Empty content to display the brackets */
  position: absolute;
  top: 0px;
  height: 95%; /* Match the height of the element */
  width: 0px; /* Thickness of the brackets */
  background: none; /* No background */
  border: 8px solid rgba(240, 240, 240, 0.15); /* Border color and initial transparency */
  transition: transform 1s ease-in-out, left 1s ease-in-out, right 1s ease-in-out;
}

.showcaseDisplay::before {
  left: 0; /* Position the left bracket */
  border-right: none; /* Remove the right border to create [ shape */
  border-top-left-radius: 6px; /* Optional: round the top-left corner */
  border-bottom-left-radius: 6px; /* Optional: round the bottom-left corner */
  transform: scaleY(0); /* Start hidden */
}

.showcaseDisplay::after {
  right: 0; /* Position the right bracket */
  border-left: none; /* Remove the left border to create ] shape */
  border-top-right-radius: 6px; /* Optional: round the top-right corner */
  border-bottom-right-radius: 6px; /* Optional: round the bottom-right corner */
  transform: scaleY(0); /* Start hidden */
}

.showcaseDisplay.expand-brackets::before,
.showcaseDisplay.expand-brackets::after {
  transform: scaleY(1.1); /* Expand to full height */
  border-color: rgba(240, 240, 240, 0.15); /* Make the brackets visible */
}

.showcaseDisplay.expand-brackets-width::before,
.showcaseDisplay.expand-brackets-width::after {
  width: 16px; /* Final thickness of the brackets */
  transition: width 0.3s ease-in-out; /* Smoothly animate the width */
}

.showcaseInstruction {
  font-family: var(--showcase-info-font);
  font-size: var(--showcase-info-font-size);
  line-height: 1.8;
  margin-bottom: 1.5rem;
  transition: opacity 1s ease;
}

#showcaseInfo {
  position: absolute;
  text-align: right;
  font-family: var(--showcase-info-font);
  font-size: var(--showcase-info-font-size);
  line-height: 1.8;
  color: rgba(240, 240, 240, 0.65);
  opacity: 0; /* Keep hidden initially */
  transition: opacity 1s ease, color 1s ease; /* Smooth fade-in effect */
}

#showcaseInfo .title {
  margin-bottom: 1rem; /* Space below the title */
}

.showcaseByline, .showcaseTitle {
  text-align: right;
  white-space: nowrap; /* Prevent text from wrapping */
}

.showcaseByline {
  font-size: var(--showcase-byline-font-size);
}

@media (max-width: 768px) {
  .showcaseDisplay {
    font-size: 0.9rem;
  }

  .showcaseDisplay::before,
  .showcaseDisplay::after {
    opacity: 0;
  }

  
}