/* #region Styles*/
:root {
  /* Authentic Colors from BLR Design Centre Website */
  --primary-beige: #e2d6cb;
  --primary-dark-blue: #41378f;
  --primary-yellow: #f59f40;
  --primary-red: #ec4029;
  --primary-green: #499a85;
  --primary-grey: #413c3f;
  --primary-purple: #c47ac0;
  --background-beige: #edecd1;
  --gameboard-beige: #f5f5dc;

  /* Category Colors */
  --culture-color: #ec4029;
  --urbanism-color: #fcb900;
  --ecology-color: #41378f;
  --governance-color: #499a85;

  /* Neutral Colors */
  --bg-light: #f5f5f5;
  --bg-white: #ffffff;
  --text-dark: #333333;
  --text-light: #666666;
  --secondary-grey: #777677;

  /* Responsive Spacing Scale (rem-based) */
  --spacing-xs: 0.3125rem;    /* 5px */
  --spacing-sm: 0.625rem;     /* 10px */
  --spacing-md: 1.25rem;      /* 20px */
  --spacing-lg: 2.5rem;       /* 40px */
  --spacing-xl: 3.125rem;     /* 50px */

  /* Border Radius */
  --radius-sm: 0.3125rem;     /* 5px */
  --radius-md: 0.625rem;      /* 10px */

  /* Fluid Typography */
  --font-size-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);          /* 12-14px */
  --font-size-sm: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);            /* 14-16px */
  --font-size-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);            /* 16-18px */
  --font-size-md: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);           /* 18-20px */
  --font-size-lg: clamp(1.25rem, 1.1rem + 0.75vw, 1.875rem);          /* 20-30px */
  --font-size-xl: clamp(1.5rem, 1.25rem + 1.25vw, 3.125rem);          /* 24-50px */
  --font-size-2xl: clamp(1.75rem, 1.4rem + 1.3vw, 3.3rem);          /* 28-60px */

  /* Responsive Dimensions */
  --team-height: clamp(5rem, 7.5vw, 7.5rem);                           /* 80-140px */
  --badge-width: clamp(6.25rem, 9.375vw, 9.375rem);                    /* 100-150px */
  --badge-height: clamp(6.67rem, 10vw, 10rem);                         /* 107-160px */
  --tile-width: clamp(3.75rem, 5.625vw, 5.625rem);                     /* 60-90px */
  --tile-height: clamp(5.42rem, 8.125vw, 8.125rem);                    /* 87-130px */
  --button-height: clamp(2.5rem, 3.125vw, 3.125rem);                   /* 40-50px */
}

/* Typography */
h1 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: var(--font-size-2xl);
  font-style: normal;
  font-variation-settings: "wdth" 75;
  color: var(--primary-grey);
  text-transform: uppercase;
  line-height: 1.2;
}

h2 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: var(--font-size-xl);
  font-style: normal;
  font-variation-settings: "wdth" 75;
  color: var(--primary-grey);
  text-transform: uppercase;
  line-height: 1.2;
}

h3 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-size: var(--font-size-lg);
  font-variation-settings: "wdth" 87.5;
  color: var(--primary-grey);
  line-height: 1.3;
}

h4 {
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 467;
  font-style: normal;
  font-variation-settings: "wdth" 75;
  font-size: var(--font-size-base);
  line-height: 1.4;
}

img {
  border-radius: 0;
  max-width: 100%;
  height: auto;
}

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

html {
  font-size: 100%; /* 16px base, allows user browser settings to work */
}

html,
body {
  height: 100%;
  width: 100%;
  font-family: "Roboto", sans-serif;
  background-color: var(--background-beige);
  overflow: hidden;
  position: relative;
  z-index: -2;
}

#background_img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  opacity: 0.05;
}

/* #endregion */

/* #region startscreen */
#start-screen{
  height: 100vh;
  display: flex;
  flex-direction: column;
  grid-row: 1fr 1fr 1fr;
  justify-content: space-between;
  padding: 30px;
  align-items: center;
}
#start-screen.hidden {
  display: none;
}

#main_logo {
  max-width: clamp(9.375rem, 12.5vw, 12.5rem);
}

#start-screen-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 70vh;
  box-sizing: border-box;
  gap: 10px;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-1.25rem); /* -20px */
  }
  100% {
    transform: translateY(0px);
  }
}

/* ===== Maja Maadi Button ===== */
.maja_maadi_button {
  width: 600px;
  height: 12rem;
  position: relative;
  border: none;
  background: none;
  cursor: pointer;

}

/* Stack button images */
.maja_maadi_button_default,
.maja_maadi_button_hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Fast animation (1s) */
.maja_maadi_button_default {
  opacity: 1;
  animation: fadeDefault 1s infinite;}

.maja_maadi_button_hover {
  opacity: 0;
  animation: fadeHover 1s infinite;
}

@keyframes fadeDefault {
  0%,
  49% {
    opacity: 1;}
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes fadeHover {
  0%,
  49% {
    opacity: 0;
  }
  50%,
  100% {
    opacity: 1;
  }}


.title-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--spacing-xs);
    margin-bottom: 5%;
        margin-TOP: 2.5%;
}

.title-group h1 {
  letter-spacing: 0.05em;
  margin: 0;
}

.title-group h3 {
  margin: 0;
  font-style: italic;
}

#game-buttons {
  display: flex;
  gap: var(--spacing-md);
  flex-direction: row;
  align-items: center;
}

.game-action-button {
  padding: clamp(0.1rem, 1vw, 1rem) clamp(0.5rem, 1.5vw, 3.75rem);
  font-size: clamp(0.5rem, 1vw, 1.5rem);
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  background-color: transparent;
  border: 0.1875rem solid var(--primary-purple);
  color: var(--primary-purple);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: var(--radius-sm);
  min-width: clamp(6rem, 5vw, 6rem);
}

.game-action-button:hover {
  background-color: var(--primary-purple);
  color: white;
  transform: scale(1.05);
}

.game-action-button:active {
  transform: scale(0.98);
}

#logo-stack {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5vw;
  margin-top: var(--spacing-md);
  flex-wrap: wrap;
}

.sub_logo {
  height: clamp(1.875rem, 3.125vw, 3.125rem);
  max-width: clamp(9.375rem, 12.5vw, 12.5rem);
}

/* #endregion */

/* #region game-board */
#game-board-wrapper {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

#game-board {
  display: grid;
  width: 100%;
  max-width: 1500px;
  height: 100%;
  max-height: 864px;
  padding: 30px;
  box-sizing: border-box;
  grid-template-columns: 220px 1fr;
  grid-template-rows: 80px 1fr;
  gap: 15px;
}

#game-board.hidden {
  display: none;
}

/* Timer */
#timer-container {
  padding: var(--spacing-xs);
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  gap: var(--spacing-md);
  align-items: center;
}

#timer-countdown {
  grid-column: 1;
  grid-row: 1;
  font-family: "Roboto", sans-serif;
  font-weight: 900;
  font-size: clamp(2.5rem, 3.75vw, 3.75rem);
  color: var(--primary-red);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: text;
  outline: none;
  border-radius: var(--radius-sm);
  padding: 0.25rem 0.5rem;
  transition: background-color 0.2s ease;
}

#timer-countdown:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

#timer-countdown:focus {
  background-color: rgba(0, 0, 0, 0.1);
}

#timer-countdown.timer-blink {
  animation: blink 0.5s infinite;
}

@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

#timer-buttons {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#timer-buttons sl-button {
  width: 80%;
  height: 14px;
  --sl-input-height-medium: 14px;
  font-size: 5px;
  background: transparent;

  border-radius: 0px;

  text-transform: uppercase;

  text-align: center;        /* center text */
  justify-content: center;   /* center flex content */
}


#timer-buttons sl-button::part(base) {
  width: 80%;
  justify-content: center;
  text-transform: uppercase;
  border: 1px solid var(--secondary-grey);
  background: transparent;
  border-radius: 0px;
  text-align: center;

  transition: background 0.2s ease, color 0.2s ease;
}

#timer-buttons sl-button::part(base):hover {
  background: var(--primary-purple);
  color: white;
  border-color: var(--primary-purple);
}

/* Timeline */
#timeline-container {
  grid-column: 2;
  grid-row: 1;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  position: relative;
}

.timeline-line {
  position: absolute;
  top: 50px;
  left: var(--spacing-md);
  right: var(--spacing-md);
  height: 0.25rem;
  background-color: var(--primary-purple);
  transform: translateY(-50%);
  z-index: 1;
}

.timeline-buttons {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  padding: 0;
  position: relative;
  z-index: 2;
}

.timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-sm);
  transform: translateY(-10px);
}

.timeline-button {
  width: clamp(1.5rem, 1.875vw, 1.875rem);
  height: clamp(1.5rem, 1.875vw, 1.875rem);
  border-radius: 50%;
  background-color: transparent;
  border: 0.1875rem solid var(--bg-white);
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.timeline-button:hover {
  transform: scale(1.15);
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
}

.timeline-button:active {
  transform: scale(1.05);
}

.timeline-button.active {
  background-color: var(--primary-purple);
  box-shadow: 0 0.25rem 0.75rem rgba(230, 64, 245, 0.5);
  transform: scale(1.2);
}

.timeline-label {
  font-family: "Roboto", sans-serif;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--primary-grey);
  text-align: center;
  line-height: 1.2;
}

/* #region Teams counter */
#teams-counter-container {
  width: 100%;
  height: 100%;
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.team-item {
  display: grid;
  grid-template-columns: 7% 74% 18%;
  width: 100%;
  height: fit-content;
  justify-content: center;
  align-items: flex-start;
  border-radius: var(--radius-md);
  position: relative;
  gap: 2%
}

.team-order-number {
  margin-top: 0.125rem;
  width: 100%;
  height: clamp(2rem, 2.5vw, 2.5rem);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--primary-grey);
  font-size: var(--font-size-md);
  font-weight: 700;
  text-align: center;
  font-family: 'Roboto', sans-serif;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
  border: none;
  -moz-appearance: textfield;
}

.team-order-number::-webkit-outer-spin-button,
.team-order-number::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}

.team-order-number:hover {
  background-color: var(--primary-purple);
  color: white;
  transform: scale(1.1);
}

.team-order-number:focus {
  border-color: var(--primary-green);
  background-color: white;
}

.team-label {
  display: grid;
  grid-template-rows: auto 1fr;
  width: 100%;
  height: fit-content;
  justify-content: center;
  align-items: center;
  background-color: var(--gameboard-beige);
  border-color: var(--primary-grey);
  box-shadow: 0 0.25rem 0.75rem rgba(245, 159, 64, 0.4);
  border-radius: var(--radius-md);
  padding: 10px;
}

.team-name {
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  line-height: 1.5em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.score {
  text-align: center;
  font-size: 45px;
  font-weight: 700;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.team-label.active-team {
  border: 0.3125rem solid;
  border-color: var(--primary-purple);
  box-shadow: 0 0.25rem 0.75rem rgba(245, 159, 64, 0.4);

}

.team-label.selectable {
  cursor: pointer;
  transition: all 0.2s ease;
}

.team-label.selectable:hover:not(.team-completed) {
  background-color: rgba(196, 122, 192, 0.2);
  transform: scale(1.03);
  box-shadow: 0 0.125rem 0.5rem rgba(196, 122, 192, 0.3);
}

.team-label.team-completed {
  opacity: 0.4;
  filter: grayscale(80%);
  cursor: not-allowed !important;
}

.team-label.selected-for-floor {
  background-color: var(--primary-green);
  border-color: var(--primary-grey);
  box-shadow: 0 0.25rem 0.75rem rgba(73, 154, 133, 0.5);
  transform: scale(1.08);
}

.score-controls {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  justify-content: center;
  align-items: center;
}

sl-icon-button.score-up {
  color: var(--primary-green);
  font-size: var(--font-size-md);
}

sl-icon-button.score-down {
  color: var(--primary-red);
  font-size: var(--font-size-md);
}

/* #endregion */

/* #region Question container */
#question-container {
  grid-column: 2;
  grid-row: 2;
  background-color: var(--gameboard-beige);
  box-shadow: 0 0.25rem 0.75rem rgba(245, 159, 64, 0.4);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-md);
}

#question-grid {
  width: 100%;
  display: grid;
  grid-template-columns: 140px repeat(4, 1fr);
  grid-template-rows: repeat(4, 140);
  column-gap: var(--spacing-md);
  row-gap: var(--spacing-sm);
  flex: 1;
  align-items: center;
  justify-content: center;
}

.tile-option {
  display: flex;
  gap: var(--spacing-xs);
  width: fit-content;
  justify-self: center;
}

.category-label {
  width: 140px;
  height: 140px;
  max-height: var(--badge-height);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  font-weight: 700;
  text-transform: uppercase;
  font-size: var(--font-size-md);
}

.category-label span {
  text-align: center;
  flex-shrink: 0;
}

.category-icon {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border-radius: 0;
}

.category-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* #region tiles */
sl-button.question-tile {
  width: var(--tile-width);
  height: var(--tile-height);
  --sl-input-height-medium: var(--tile-height);
  --sl-spacing-medium: 0;
  --sl-input-border-radius-medium: 0;
  --sl-input-border-width: 0.1875rem;
  --sl-input-border-color: white;
  --sl-input-border-color-hover: white;
  --sl-input-border-color-focus: white;
  --sl-focus-ring-width: 0;
}

sl-button.question-tile::part(base) {
  width: var(--tile-width);
  height: var(--tile-height);
  padding: 0;
  border: 0.1875rem solid white;
  border-radius: var(--radius-md);
  transition: transform 0.3s ease;
  transform-style: preserve-3d;
}

sl-button.question-tile:hover::part(base) {
  transform: rotateY(15deg);
  background-color: var(--primary-purple) !important;
}

sl-button.question-tile::part(base):active {
  opacity: 1;
}

sl-button.question-tile.cat-c::part(base) {
  background-color: var(--primary-red);
}

sl-button.question-tile.cat-u::part(base) {
  background-color: var(--primary-yellow);
}

sl-button.question-tile.cat-e::part(base) {
  background-color: var(--primary-dark-blue);
}

sl-button.question-tile.cat-g::part(base) {
  background-color: var(--primary-green);
}

sl-button.question-tile.inactive-tile::part(base) {
  opacity: 0.3;
  filter: grayscale(50%);
  cursor: not-allowed;
}

sl-button.question-tile.active-tile::part(base) {
  opacity: 1;
  cursor: pointer;
}

sl-button.question-tile.answered::part(base) {
  opacity: 0.2;
  filter: grayscale(100%);
  cursor: not-allowed;
}

/* #endregion */

/* Question Display Area */
#question-display {
  width: 100%;
  height: 100%;
  background-color: var(--gameboard-beige);
  display: grid;
  grid-template-columns: 140px 1fr;
  grid-template-rows: 30% 30% 30% 10%;
  transition: background-color 0.3s ease;
}

#question-display.floor-mode {
  background-color: rgba(196, 122, 192, 0.15);
  box-shadow: inset 0 0 1.25rem rgba(196, 122, 192, 0.3);
}

.question-category-badge {
    width: 140px;
    min-height: 200px;
    /* max-height: var(--badge-height); */
    /* display: flex; */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    color: white;
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--font-size-sm);
    text-align: center;
}

.qd-badge-icon {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
}

.qd-badge-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

#qd-location-badge {
  cursor: pointer;
}

#qd-location-badge:not(.hidden-row):hover {
  transform: scale(0.9);
}

.question-content-box {
  padding: 5px 15px;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  overflow-y: auto;
}

.question-content-box h3 {
  margin: 0;
  font-size: var(--font-size-md);
  font-weight: 700;
  color: var(--text-dark);
}

.question-content-box p {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--text-dark);
}

#qd-answer-content p {
  display: none;
}

#qd-answer-content.revealed p {
  display: block;
}

#qd-answer-content:not(.revealed) {
  cursor: pointer;
  transition: all 0.2s ease;
}

#qd-answer-content:not(.revealed):hover {
  background-color: rgba(196, 122, 192, 0.1);
  box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.15);
}

#qd-answer-content:not(.revealed)::after {
  content: "Click to reveal";
  display: block;
  text-align: center;
  color: var(--primary-purple);
  font-style: italic;
  font-size: var(--font-size-xs);
  margin-top: var(--spacing-sm);
}

#qd-clue-status {
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--primary-purple);
  margin-top: var(--spacing-sm);
}

#qd-badges-container {
  grid-column: 1;
  grid-row: 1 / 4;
  display: flex;
  flex-direction: column;
}

#qd-question-content {
  grid-column: 2;
  grid-row: 1;
}

#qd-answer-content {
  grid-column: 2;
  grid-row: 2;
}

#qd-spacer {
  grid-column: 2;
  grid-row: 3;
}

#qd-buttons {
  grid-column: 1 / -1;
  grid-row: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.25rem, 2.5vw, 2.5rem);
  flex-wrap: wrap;
}

.hidden-row {
  display: none;
}

#qd-buttons sl-button::part(base) {
  width: clamp(9rem, 11.25vw, 11.25rem);
  height: var(--button-height);
  font-size: var(--font-size-md);
  font-weight: 700;
  font-family: 'Roboto', sans-serif;
  text-transform: uppercase;
  border-radius: 0;
  background-color: transparent;
  --sl-input-height-medium: var(--button-height);
}

#qd-undo::part(base), #qd-back::part(base) {
  background-color: transparent;
  border: 0.125rem solid var(--secondary-grey);
  color: var(--secondary-grey);
  transition: all 0.25s ease;
}

#qd-undo::part(base):hover, #qd-back::part(base):hover {
  background-color: var(--secondary-grey);
  border: 0.125rem solid white;
  color: white;
}

#qd-correct::part(base) {
  background-color: transparent;
  border: 0.125rem solid var(--primary-green);
  color: var(--primary-green);
  transition: all 0.25s ease;
}

#qd-correct::part(base):hover {
  background-color: var(--primary-green);
  color: white;
  border-color: white;
}

#qd-wrong::part(base) {
  background-color: transparent;
  border: 0.125rem solid var(--primary-red);
  color: var(--primary-red);
  transition: all 0.25s ease;
}

#qd-wrong::part(base):hover {
  background-color: var(--primary-red);
  color: white;
  border-color: white;
}

#question-display.hidden {
  display: none;
}

#question-grid.hidden {
  display: none;
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
}

.question-header h3 {
  margin: 0;
}

#show-clue {
  --sl-input-height-small: clamp(1.875rem, 2.25vw, 2.25rem);
  font-size: var(--font-size-base);
}

#show-clue sl-icon {
  font-size: var(--font-size-sm);
}

#show-clue::part(base) {
  background-color: var(--primary-purple);
  border-color: var(--primary-purple);
  color: white;
}

#show-clue::part(base):hover {
  background-color: transparent;
  color: var(--primary-purple);
}

#show-clue.clue-used::part(base) {
  background-color: var(--secondary-grey);
  border-color: var(--secondary-grey);
  opacity: 0.6;
  cursor: not-allowed;
}

/* #endregion */

/* #region Overlays */
#clue-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.342);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: var(--spacing-md);
  padding-top: calc(var(--spacing-md) + 100px);
  padding-left: calc(var(--spacing-md) + 50px);
}

#location-overlay,
#shuffle-overlay,
#floor-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.342);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: var(--spacing-md);
}

#clue-overlay.hidden,
#location-overlay.hidden,
#shuffle-overlay.hidden,
#floor-overlay.hidden {
  display: none;
}

#clue-overlay-content {
  position: relative;
  width: min(40%, 30rem);
  height: min(40vh, 25rem);
  background-color: white;
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

#clue-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.close-overlay {
  position: absolute;
  height: clamp(2rem, 2.5vw, 2.5rem);
  width: clamp(2rem, 2.5vw, 2.5rem);
  top: var(--spacing-sm);
  right: var(--spacing-sm);
  font-size: clamp(2rem, 2.5vw, 2.5rem);
  font-weight: bold;
  color: var(--primary-grey);
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.close-overlay:hover {
  color: var(--primary-red);
}

/* Location Overlay */
#location-overlay-content {
  position: relative;
  background-color: var(--gameboard-beige);
  border: 0.5rem solid var(--primary-purple);
  padding: 30px;
  border-radius: 0;
  max-width: 56.25rem;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
}

#location-overlay-content h2 {
  text-align: center;
  color: var(--primary-purple);
  margin-bottom: var(--spacing-xl);
}

#location-overlay-content h3 {
  color: var(--primary-grey);
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-md);
}

#location-team-selection,
#location-bid-selection,
#location-result-selection {
  margin-bottom: var(--spacing-xl);
}

#location-teams,
#location-bids,
#location-results {
  display: flex;
  gap: clamp(0.938rem, 1.875vw, 1.875rem);
  flex-wrap: wrap;
  justify-content: center;
  margin: var(--spacing-lg);
}

.location-bid-btn {
  padding: clamp(0.625rem, 0.938vw, 0.938rem) clamp(1.25rem, 1.563vw, 1.563rem);
  font-size: clamp(1.5rem, 1.875vw, 1.875rem);
  font-weight: 700;
  font-family: 'Roboto';
  letter-spacing: 0.1em;
  background-color: transparent;
  border: 0.3125rem solid var(--primary-red);
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0;
  min-width: clamp(6.25rem, 9.375vw, 9.375rem);
  color: var(--primary-red);
}

.location-team-btn {
  color: var(--primary-purple);
  padding: clamp(0.938rem, 1.25vw, 1.25rem) clamp(0.625rem, 0.938vw, 0.938rem);
  font-size: var(--font-size-xs);
  font-weight: 700;
  border: 0.0625rem solid var(--primary-purple);
  background-color: transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: 0.0625rem;
  text-transform: uppercase;
  min-width: 6.25rem;
}

.location-result-btn {
  padding: clamp(0.625rem, 0.938vw, 0.938rem) clamp(1.25rem, 1.563vw, 1.563rem);
  font-size: var(--font-size-sm);
  font-weight: 700;
  border: 0.1875rem solid var(--primary-grey);
  background-color: white;
  cursor: pointer;
  transition: all 0.2s ease;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.location-bid-btn:hover {
  background-color: var(--primary-red);
  color: white;
  border: 0.0625rem solid white;
  transform: scale(1.05);
}

.location-team-btn:hover {
  background-color: var(--primary-purple);
  color: white;
  transform: scale(1.05);
}

.location-team-btn.selected {
  background-color: var(--primary-green);
  color: white;
  border-color: var(--primary-green);
}

.location-bid-btn.selected {
  background-color: var(--primary-red);
  color: white;
  border-color: var(--primary-red);
}

#location-identified {
  background-color: transparent;
  color: var(--primary-green);
  border-color: var(--primary-green);
  border-radius: 0;
}

#location-identified:hover {
  background-color: var(--primary-green);
  color: white;
  transform: scale(1.05);
}

#location-wrong {
  background-color: transparent;
  color: var(--primary-red);
  border-color: var(--primary-red);
  border-radius: 0;
}

#location-wrong:hover {
  background-color: var(--primary-red);
  color: white;
  transform: scale(1.05);
}

/* Floor Overlay Styling */
#floor-overlay-content {
  position: relative;
  background-color: var(--gameboard-beige);
  border: 0.5rem solid var(--primary-purple);
  padding: clamp(2rem, 5vw, 4rem);
  border-radius: 0;
  max-width: 56.25rem;
  width: 100%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
}

#floor-overlay-content h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 900;
  color: var(--primary-purple);
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#floor-overlay-content h2 {
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: var(--primary-red);
  margin: 0;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* #endregion */

/* #region Shuffle Overlay */
#shuffle-overlay-content {
  background-color: var(--background-beige);
  padding: clamp(1.25rem, 2.5vw, 2.5rem);
  border-radius: var(--radius-md);
  max-width: 56.25rem;
  width: 100%;
  position: relative;
  box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.5);
  max-height: 90vh;
  overflow-y: auto;
}

#shuffle-overlay-content h2 {
  text-align: center;
  margin-bottom: var(--spacing-lg);
  color: var(--primary-grey);
  font-size: clamp(1.5rem, 1.75vw, 1.75rem);
}

#shuffle-cards-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: clamp(18.75rem, 25vw, 25rem);
  margin-bottom: var(--spacing-md);
  transform-style: preserve-3d;
  position: relative;
}

.shuffle-card {
  position: absolute;
  height: clamp(16rem, 20vw, 20rem);
  width: auto;
  aspect-ratio: 7/8;
  background: url('/collateral/png/1x/shuffle-card-back.png') center/contain no-repeat;
  background-size: 100% 100%;
  border-radius: 1px;
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}

.shuffle-card.stack-animation {
  animation: rotateCard 1.5s ease-in-out infinite;
}

@keyframes rotateCard {
  0% { transform: translateZ(0.0625rem); }
  33.33% { transform: rotate(-4deg) scale(0.9) translate(-15%, -5%); }
  66.67% { transform: rotate(4deg) scale(0.9) translate(15%, -5%); }
  100% { transform: translateZ(0.0625rem); }
}

.shuffle-card.card-1 { animation-delay: -1s; }
.shuffle-card.card-2 { animation-delay: -0.5s; }
.shuffle-card.card-3 { animation-delay: 0s; }

.shuffle-card h3 {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: var(--spacing-sm);
  position: relative;
  z-index: 1;
}

.shuffle-card p {
  font-size: 8px;
  color: white;
  text-align: center;
  position: relative;
  z-index: 1;
}

#selected-shuffle-card {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: var(--spacing-lg);
}

#selected-shuffle-card .shuffle-card.selected {
  width: clamp(14rem, 17.5vw, 17.5rem);
  height: clamp(16rem, 20vw, 20rem);
  background: url('/collateral/png/1x/shuffle-card-back.png') center/cover no-repeat;
  box-shadow: 0 0.625rem 1.875rem rgba(177, 90, 194, 0.5);
  animation: card-reveal 0.5s ease-out;
}

/* Fullscreen card selection animation */
.shuffle-card-fullscreen-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.199);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.shuffle-card-fullscreen-overlay.active {
  opacity: 1;
  pointer-events: all;
}

.shuffle-card-fullscreen-wrapper {
  perspective: 1000px;
  width: clamp(20rem, 40vw, 35rem);
  height: clamp(23rem, 46vw, 40rem);
}

.shuffle-card-fullscreen {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  animation: flipAndGrow 1.2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes flipAndGrow {
  0% {
    transform: scale(0.3) rotateY(180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.1) rotateY(90deg);
  }
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

.shuffle-card-fullscreen-content {
  width: 100%;
  height: 100%;
  background: white;
  border-radius: 0px;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.6);
  border: 1rem solid var(--primary-purple);
  position: relative;
  overflow: hidden;
}

.shuffle-card-fullscreen-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.2;
  animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.2; }
  50% { transform: scale(1.1); opacity: 0.3; }
}

.shuffle-selection-announcement {
  font-family: "Roboto", sans-serif;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 900;
  color: white;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: var(--spacing-xl);
  position: relative;
  z-index: 1;
  animation: bounceIn 0.8s ;
  text-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.5);
}

@keyframes bounceIn {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.shuffle-card-fullscreen-content .shuffle-icon {
  width: 250px;
  height: 250px;
  object-fit: contain;
  position: relative;
  z-index: 1;
  animation: slideInUp 0.6s ease 0.6s both;
}

.shuffle-card-fullscreen-content h3 {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-family: 'Roboto','sans-serif';
  font-weight: 700;
  color: var(--primary-purple);
  text-align: center;
  margin-bottom: var(--spacing-lg);
  position: relative;
  z-index: 1;
  animation: slideInUp 0.6s ease 0.8s both;

}

.shuffle-card-fullscreen-content p {
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  color: var(--primary-purple);
  font-weight: 600;
  text-align: center;
  line-height: 1.6;
  position: relative;
  z-index: 1;
  animation: slideInUp 0.6s ease 1s both;
  max-width: 90%;

}

@keyframes slideInUp {
  0% {
    transform: translateY(2rem);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}



@keyframes sparkle {
  0%, 100% {
    top: 10%;
    left: 10%;
    transform: scale(0) rotate(0deg);
    opacity: 0;
  }
  50% {
    top: 15%;
    left: 15%;
    transform: scale(1) rotate(180deg);
    opacity: 0.8;
  }
}

/* Return to badge animation */
.shuffle-card-returning {
  animation: shrinkAndReturn 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes shrinkAndReturn {
  0% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(0.1) rotateY(180deg);
    opacity: 0;
  }
}

@keyframes card-reveal {
  0% {
    transform: scale(0.5) rotateY(180deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotateY(0deg);
    opacity: 1;
  }
}

#selected-shuffle-card .shuffle-card.selected h3 {
  font-size: var(--font-size-lg);
  margin-bottom: var(--spacing-md);
}

#selected-shuffle-card .shuffle-card.selected p {
  font-size: var(--font-size-sm);
}

#qd-shuffle-badge:not(.hidden-row):hover {
  transform: scale(0.8);
  cursor: pointer;

}

#qd-shuffle-badge.used {
  cursor: default;
  border: 0.1875rem solid var(--primary-orange);
}

#qd-shuffle-badge.used:hover {
  transform: none;
  box-shadow: none;
}

.shuffle-card-display {
  width: 100%;
  height: 180px;
  background: white;
  border-radius: 0px;
  border: 3px solid var(--primary-purple);
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  gap: 0;
  box-shadow: 0 0.1rem 0.1rem rgba(0, 0, 0, 0.3);
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
}

.shuffle-card-display:hover {
  transform: scale(1.05);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.4);
}

.shuffle-card-display .shuffle-icon {
  height: 50%;
  width: auto;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

.shuffle-card-display h3 {
  font-size:16px;
  font-weight: 800;
  color: var(--primary-purple);
  text-align: center;
  margin: 0;
  position: relative;
  z-index: 1;
  height: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}

.shuffle-card-display p {
  display: none;
  font-size: 15px;
  font-weight:600;
  color: var(--primary-purple);
  text-align: center;
  text-transform: capitalize;
  line-height: 1.3;
padding: 35px 5px 5px 5px;

  flex: 1;
}

/* When card is toggled to show description */
.shuffle-card-display.show-description .shuffle-icon,
.shuffle-card-display.show-description h3 {
  display: none;
}

.shuffle-card-display.show-description p {
  display: block;
}

.shuffle-badge-stack {
  width: 90%;
  min-height: var(--badge-height);
  max-height: var(--badge-height);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
  position: relative;
}

.shuffle-badge-stack .shuffle-card {
  position: absolute;
  height: clamp(7.92rem, 9.375vw, 9.375rem);
  width: auto;
  aspect-ratio: 7/8;
  background: url('/collateral/png/1x/shuffle-card-back.png') center/contain no-repeat;
  background-size: 100% 100%;
  border-radius: var(--radius-md);
  padding: clamp(0.625rem, 0.938vw, 0.938rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  overflow: hidden;
}


.shuffle-badge-stack .shuffle-card h3 {
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: white;
  text-align: center;
  margin-bottom: var(--spacing-xs);
  position: relative;
  z-index: 1;
}

.shuffle-badge-stack .shuffle-card p {
  font-size: clamp(0.625rem, 0.688vw, 0.688rem);
  color: white;
  text-align: center;
  line-height: 1.3;
  position: relative;
  z-index: 1;
}

/* #endregion */

/* #region Rapid Fire Display */

/* Rapid Fire Title Screen */
#rf-title-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-xl);
}

#rf-title-screen.hidden {
  display: none;
}

#rf-title-screen h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  color: var(--primary-purple);
  text-align: center;
  margin: 0;
}

#rf-title-screen p {
  font-size: var(--font-size-lg);
  color: var(--primary-grey);
  text-align: center;
  margin: 0;
}

/* Rapid Fire Question Screen */
#rf-question-screen {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: auto 1fr 1fr auto;
  gap: 10px;
  align-items: center;
  padding: var(--spacing-lg);
}

#rf-question-screen.hidden {
  display: none;
}

#rf-header {
  grid-row: 1;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--spacing-sm);
}

.rf-close-btn {
  grid-column: 3;
  justify-self: end;
  font-size: clamp(2rem, 3vw, 3rem);
  color: var(--primary-purple);
  transition: all 0.2s ease;
}

.rf-close-btn:hover {
  color: var(--primary-yellow);
  transform: scale(1.1);
}

/* Rapid Fire Score Screen */
#rf-score-screen {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  padding: var(--spacing-xl);
}

#rf-score-screen.hidden {
  display: none;
}

#rf-score-screen h1 {
  font-size: clamp(2rem, 4vw, 4rem);
  color: var(--primary-green);
  text-align: center;
  margin: 0;
}

#rf-score-details {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
}

#rf-score-details h2 {
  font-size: clamp(1.5rem, 3vw, 3rem);
  color: var(--primary-purple);
  text-align: center;
  margin: 0;
}

#rf-score-details p {
  font-size: var(--font-size-xl);
  color: var(--primary-grey);
  text-align: center;
  margin: 0;
  font-weight: 700;
}

#rf-next-instruction {
  font-size: var(--font-size-lg);
  color: var(--primary-grey);
  text-align: center;
  margin: 0;
  font-style: italic;
}

/* Team label in rapid fire selection mode */
.team-label.rf-team-selection-mode {
  cursor: pointer;
  animation: pulse-purple 1.5s ease-in-out infinite;
}

@keyframes pulse-purple {
  0%, 100% {
    box-shadow: 0 0.25rem 0.75rem rgba(196, 122, 192, 0.4);
  }
  50% {
    box-shadow: 0 0.5rem 1.5rem rgba(196, 122, 192, 0.8);
    transform: scale(1.02);
  }
}

/* Active team during rapid fire */
.team-label.rf-active-team {
  border: 0.3125rem solid var(--primary-purple);
  box-shadow: 0 0.5rem 1.5rem rgba(196, 122, 192, 0.8);
  transform: scale(1.05);
}

#rf-question-counter {
  grid-column: 2;
  justify-self: center;
  font-family: "Roboto", sans-serif;
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  font-weight: 700;
  color: var(--primary-purple);
  text-align: center;
}

#rf-question-content {
  grid-row: 2;
  padding: 25px;
  font-size: 25px;
  font-weight: 500;
  font-family: 'Roboto','sans-serif';
  color: var(--primary-grey);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  border-radius: var(--radius-md);
  box-shadow: 0 0.25rem 0.75rem rgba(0, 0, 0, 0.1);
}

#rf-answer-content {
  grid-row: 3;
  padding: var(--spacing-lg);
  font-size: var(--font-size-md);
  font-weight: 400;
  color: var(--primary-green);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(73, 154, 133, 0.1);
  border: 0.125rem solid var(--primary-green);
  border-radius: var(--radius-md);
  box-shadow: 0 0.25rem 0.75rem rgba(73, 154, 133, 0.2);
}

#rf-answer-content.hidden {
  display: none;
}

#rf-controls {
  grid-row: 4;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
}

.rf-nav-btn {
  font-size: 60px;
  color: var(--primary-purple);
  transition: all 0.2s ease;
}

.rf-nav-btn:hover:not([disabled]) {
  color: var(--primary-yellow);
  transform: scale(1.1);
}

.rf-nav-btn[disabled] {
  color: var(--secondary-grey);
  opacity: 0.3;
  cursor: not-allowed;
}

.rf-check-btn {
  font-size: 60px;
  color: var(--primary-green);
  transition: all 0.2s ease;
}

.rf-check-btn:hover {
  color: var(--primary-yellow);
  transform: scale(1.15);
}

.rf-wrong-btn {
  font-size: 60px;
  color: var(--primary-red);
  transition: all 0.2s ease;
}

.rf-wrong-btn:hover {
  color: var(--primary-yellow);
  transform: scale(1.15);
}

#rf-end-round {
  --sl-color-primary-600: var(--primary-purple);
  --sl-color-primary-700: #6b21a8;
  font-size: var(--font-size-base);
  font-weight: 700;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
}

#rf-end-round:hover {
  transform: scale(1.05);
}

/* #endregion */

/* #region Responsive Media Queries */
@media (max-width: 75rem) { /* 1200px */
  #game-board {
    grid-template-columns: minmax(10rem, 18%) 1fr;
  }
}

@media (max-width: 62rem) { /* 992px */
  #game-board {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto 1fr;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
  }

  #timer-container {
    grid-column: 1;
    grid-row: 1;
  }

  #timeline-container {
    grid-column: 1;
    grid-row: 2;
  }

  #teams-counter-container {
    grid-column: 1;
    grid-row: 3;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
  }

  .team-item {
    min-width: 45%;
    max-width: 48%;
  }

  #question-container {
    grid-column: 1;
    grid-row: 4;
  }

  #question-grid {
    grid-template-columns: auto repeat(2, 1fr);
  }

  #question-display {
    grid-template-columns: auto 1fr;
    grid-template-rows: repeat(3, auto) auto;
  }
}

@media (max-width: 48rem) { /* 768px */
  #question-grid {
    grid-template-columns: 1fr;
    row-gap: var(--spacing-md);
  }

  .tile-option {
    flex-direction: column;
    width: 100%;
    align-items: center;
  }

  .category-label {
    width: 100%;
    height: auto;
    flex-direction: row;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm);
  }

  .category-icon {
    width: clamp(2.5rem, 4vw, 4rem);
    height: clamp(2.5rem, 4vw, 4rem);
  }

  #question-display {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
  }

  #qd-badges-container {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    justify-content: center;
    gap: var(--spacing-sm);
  }

  #qd-question-content {
    grid-column: 1;
    grid-row: 2;
  }

  #qd-answer-content {
    grid-column: 1;
    grid-row: 3;
  }

  #qd-spacer {
    grid-column: 1;
    grid-row: 4;
    display: none;
  }

  #qd-buttons {
    grid-column: 1;
    grid-row: 5;
  }

  .team-item {
    min-width: 100%;
    max-width: 100%;
  }

  /* Start screen adjustments for tablets */
  #start-animation {
    width: clamp(15rem, 50vw, 25rem);
    height: clamp(7.5rem, 25vw, 12.5rem);
  }
}

@media (max-width: 30rem) { /* 480px */
  /* Start screen adjustments for mobile */
  #start-animation {
    width: 80vw;
    height: 40vw;
    max-width: 18.75rem; /* 300px */
    max-height: 9.375rem; /* 150px */
    margin-bottom: var(--spacing-sm);
  }

  @keyframes floatBounce {
    0%, 100% {
      transform: translateY(0) scale(1);
    }
    25% {
      transform: translateY(-0.313rem) scale(1.01); /* -5px reduced bounce */
    }
    50% {
      transform: translateY(-0.625rem) scale(1.02); /* -10px reduced bounce */
    }
    75% {
      transform: translateY(-0.313rem) scale(1.01); /* -5px reduced bounce */
    }
  }
  #qd-buttons {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  #qd-buttons sl-button::part(base) {
    width: 100%;
  }

  #location-teams,
  #location-bids,
  #location-results {
    flex-direction: column;
  }

  .location-team-btn,
  .location-bid-btn,
  .location-result-btn {
    width: 100%;
  }

  /* Fullscreen card adjustments for mobile */
  .shuffle-card-fullscreen-wrapper {
    width: 90vw;
    height: auto;
    aspect-ratio: 4/5;
  }

  .shuffle-selection-announcement {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
    margin-bottom: var(--spacing-md);
  }

  .shuffle-card-fullscreen-content h3 {
    font-size: clamp(1.25rem, 4.5vw, 2rem);
  }

  .shuffle-card-fullscreen-content p {
    font-size: clamp(0.875rem, 3.5vw, 1.125rem);
  }

  .shuffle-card-fullscreen-content::after {
    font-size: 2rem;
  }
}

/* #endregion */

/* #region Theme Toggle Button */
#theme-toggle {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.theme-btn {
  padding: 0.35rem 1rem;
  font-size: var(--font-size-xs);
  font-family: 'Roboto', sans-serif;
  font-weight: 500;
  background: transparent;
  border: 1.5px solid var(--primary-grey);
  color: var(--primary-grey);
  border-radius: 2rem;
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.theme-btn.active {
  opacity: 1;
  background: var(--primary-grey);
  color: var(--background-beige);
}
/* #endregion */

/* #region Dark Theme */
[data-theme="dark"] {
  --primary-beige: #2e2b3a;
  --primary-dark-blue: #9b8fe8;
  --primary-yellow: #f5a623;
  --primary-red: #ff5a45;
  --primary-green: #5bbfa3;
  --primary-grey: #e8e0d8;
  --primary-purple: #d49ed0;
  --background-beige: #12111a;
  --gameboard-beige: #1c1b28;
  --bg-light: #2a2938;
  --bg-white: #1e1d2b;
  --text-dark: #e8e8e8;
  --text-light: #a8a8c0;
  --secondary-grey: #8888a0;
}

[data-theme="dark"] body {
  background-color: var(--background-beige);
  color: var(--text-dark);
}

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 {
  color: var(--primary-grey);
}

[data-theme="dark"] #timer-countdown {
  color: var(--primary-grey);
  border-color: var(--primary-grey);
}

[data-theme="dark"] .question-content-box,
[data-theme="dark"] #qd-question-content,
[data-theme="dark"] #qd-answer-content {
  background-color: var(--gameboard-beige);
  border-color: rgba(255,255,255,0.1);
}

[data-theme="dark"] .timeline-marker {
  background-color: var(--gameboard-beige);
  color: var(--primary-grey);
  border-color: rgba(255,255,255,0.15);
}

[data-theme="dark"] .team-item {
  background-color: var(--gameboard-beige);
}

[data-theme="dark"] .shuffle-card-fullscreen-overlay {
  background: rgba(0, 0, 0, 0.85);
}

[data-theme="dark"] .shuffle-card-fullscreen {
  background-color: var(--gameboard-beige);
}

[data-theme="dark"] #rf-score-screen,
[data-theme="dark"] #rapid-fire-screen {
  background-color: var(--background-beige);
}

[data-theme="dark"] #clue-overlay {
  background: rgba(0, 0, 0, 0.9);
}
/* #endregion */