html,
body {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background: var(--light-colour); /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #cfdef3,
    #e0eafc
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  overflow: hidden;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

.largerFont {
  font-size: 2vmin !important;
  font-weight: 300 !important;
}

/* ------------------------------- START SCREEN ------------------------------ */

.hidden-card-start-screen {
  position: absolute;
  width: fit-content;
  height: 90vh;
  height: 90svh;
  background-color: var(--light-colour);
  padding: 3vmin;
  border-radius: 1vmin;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  z-index: 1000;
}

.hidden-card-start-screen .gameTitle {
  font-size: 3vmin;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 2vmin;
  color: var(--dark-colour);
}

.hidden-card-start-screen .instructions {
  font-size: 2vmin;
  font-weight: 400;
  text-align: center;
  color: var(--grey-colour);
  margin-bottom: 2vmin;
}

.hidden-card-start-screen .horizontalDivider {
  margin-top: 2vmin;
  margin-bottom: 2vmin;
}

.hidden-card-start-screen button#start-game {
  width: 100%;
}

.hidden-card-start-screen button#start-game p {
  font-size: 3vmin;
}

/* Team count selection buttons */
.team-count-buttons {
  display: flex;
  width: 100%;
  gap: 2vmin;
  margin-bottom: 2vmin;
  align-items: center;
  justify-content: space-between;
}

.team-count-btn.active {
  background-color: var(--dark-colour) !important;
  border-color: var(--yellow-colour);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.team-count-btn.active p {
  color: var(--white-colour) !important;
}

/* Team input fields */
#team-inputs-container {
  display: flex;
  flex-direction: column;
  gap: 1vmin;
}

.team-setup {
  display: flex;
  flex-direction: column;
  background-color: rgba(0, 0, 0, 0.025);
  padding: 1vmin 2vmin;
  border-radius: 1vmin;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 1);
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.team-setup.inactive {
  opacity: 0.1;
  background-color: rgba(0, 0, 0, 0.01);
  pointer-events: none;
}

.team-label {
  font-size: 1.25vmin;
  font-weight: 700;
  text-align: left;
  color: var(--dark-colour);
  text-transform: uppercase;
}

.team-name-input {
  padding: 1vmin 2vmin;
  font-size: 2vmin;
  border: 1px solid var(--grey-colour);
  border-radius: 0.5vmin;
  text-align: center;
  font-family: inherit;
  transition: border-color 0.2s ease;
}

.team-name-input:focus {
  outline: none;
  border-color: var(--yellow-colour);
}

.team-name-input:disabled {
  cursor: not-allowed;
  background-color: rgba(0, 0, 0, 0.02);
}

/* ---------------------------------- BOARD --------------------------------- */

.hiddenCardHolder {
  width: 100%;
  height: 100%;
  display: grid;
  align-items: start;
  justify-items: center;
  grid-template-columns: auto;
  grid-template-rows: 85vh 15vh;
  grid-template-rows: 85vh 15svh;
  position: absolute;
  background-color: transparent;
  margin-top: 2vmin;
}

.boardEnvelopes {
  width: min(
    99vw,
    160vh
  ); /* grow as wide as possible, but stop if height would exceed viewport */
  aspect-ratio: 2 / 1; /* 4 columns of 3:2 cards → board is 2:1 overall */
  padding: 1vmin;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr); /* 3 rows of equal height */
  gap: 0.5vmin;
  background-color: rgba(0, 0, 0, 0.1);
  user-select: none;
  align-self: end;
  margin-bottom: 1vmin;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

/* Envelope holder - container for card and envelope */
.envelope-holder {
  width: 100%; /* fill the column */
  height: 100%; /* fill the row */
  position: relative;
  cursor: pointer;
}

/* Card - sits underneath the envelope */
.card {
  position: absolute;
  top: 0.5%;
  left: 0.25%;
  width: 99.5%;
  height: 99.5%;
  background-color: var(--light-colour);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1vmin;
  border-top: 1px solid #fff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  z-index: 0;
}

.card p {
  color: var(--black-colour);
  font-size: 2.5vmin;
  font-weight: 300;
  padding: 0.5vmin 1vmin;
  border-radius: 0.5vmin;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  text-wrap: balance;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Envelope - sits on top of the card with transparent cutout window */
.envelope {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.5) 0 0.1vmin 0.1vmin,
    rgba(0, 0, 0, 0.3) 0 0.35vmin 0.1vmin -0.15vmin,
    rgba(255, 255, 255, 0.3) 0 0.2vmin 0 inset,
    rgba(0, 0, 0, 0.2) 0 -0.15vmin 0 inset;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1vmin;

  /* Create small transparent window cutout on right edge using SVG mask */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,40 L 97.5,40 L 97.5,60 L 100,60 L 100,100 L 0,100 Z' fill='black'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M 0,0 L 100,0 L 100,40 L 97.5,40 L 97.5,60 L 100,60 L 100,100 L 0,100 Z' fill='black'/%3E%3C/svg%3E");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.envelope:hover {
  filter: brightness(1.05);
}

/* Row 1 - Teal/Green envelopes */
.envelope.row-1 {
  background-color: #16a085;
}

/* Row 2 - Orange envelopes */
.envelope.row-2 {
  background-color: #e67e22;
}

/* Row 3 - Red envelopes */
.envelope.row-3 {
  background-color: #c0392b;
}

.envelope p {
  color: var(--white-colour);
  font-size: 3.5vmin;
  font-weight: 300;
  padding: 0.5vmin 1vmin;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  text-wrap: balance;
  display: flex;
  align-items: center;
  justify-content: center;
  /* text-shadow: 0 0.1vmin 0 rgba(0, 0, 0, 0.3); */
}

/* Row-specific p background colors - only when envelope has an image */
.envelope.row-1.has-image p {
  background-color: color-mix(in srgb, #16a085 95%, transparent);
}

.envelope.row-2.has-image p {
  background-color: color-mix(in srgb, #d35400 95%, transparent);
}

.envelope.row-3.has-image p {
  background-color: color-mix(in srgb, #c0392b 95%, transparent);
}

.envelope.row-3.has-image p:hover {
  filter: brightness(1.05);
}

/* --------------------------------- CORNER --------------------------------- */

.envelope .feedback-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 12.5%;
  height: auto;
  pointer-events: none;
  transform-origin: top left;
  z-index: 10;
  border-top: 0.2vmin solid rgba(255, 255, 255, 0.05);
  border-left: 0.2vmin solid transparent;
  transition: transform 0.2s ease;
}

.envelope:hover .feedback-corner {
  transform: scale(1.5);
}

.envelope .feedback-corner .corner-text {
  font-size: 2.5vmin;
  font-weight: 700;
  fill: var(--light-colour);
}

/* -------------------------------- INFO BAR -------------------------------- */

.info-bar {
  width: 85%;
  height: 90%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-text {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: 15vh;
  max-height: 15svh;
  align-self: start;
  padding: 1vmin 3vmin;
  font-size: 4vmin;
  font-weight: 500;
  color: var(--grey-colour);
  text-align: center;
  text-wrap: balance;
  background-color: var(--light-colour);
  border-radius: 1vmin;
  box-shadow: rgba(255, 255, 255, 1) 0 0.3vmin 0 inset,
    rgba(0, 0, 0, 0.2) 0 -0.3vmin 0 inset;
  user-select: none;
}

/* Award buttons */
.award-buttons {
  display: flex;
  gap: 2vmin;
  opacity: 0;
  margin-left: 5vmin;
}

.simpleButton {
  min-width: 12.5vmin;
}
.simpleButton p {
  font-size: 2vmin !important;
}
.award-buttons .simpleButton p {
  font-size: 3vmin !important;
  font-weight: 500;
}

.simpleButton svg {
  width: 5vmin !important;
  padding: 0;
  margin: 0;
}

/* ------------------------------- SCOREBOARD -------------------------------- */

.scoreboard-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100svh;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}

.scoreboard-panel {
  background-color: var(--light-colour);
  padding: 3vmin 2vmin;
  border-radius: 1vmin;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 8px 16px -4px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  width: 90%;
  max-width: 750px;
  max-height: 95vh;
  max-height: 95svh;
  overflow-y: auto;
}

.scoreboard-panel h2 {
  font-size: 3vmin;
  font-weight: 900;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 3vmin;
  color: var(--black-colour);
}

.scoreboard-content {
  display: flex;
  flex-direction: column;
  gap: 2vmin;
  margin-bottom: 4vmin;
}

.score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 1vmin 3vmin;
  border-radius: 0.5vmin;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 1);
}

.score-row.winner {
  background-color: var(--yellow-colour);
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}

.score-row .team-name {
  font-size: 2.5vmin;
  font-weight: 300;
  color: var(--grey-colour);
}

.score-row .team-score {
  font-size: 3.5vmin;
  font-weight: 900;
  color: var(--black-colour);
}

.scoreboard-buttons {
  display: flex;
  gap: 2vmin;
  justify-content: center;
}

.scoreboard-buttons .simpleButton {
  flex: 1;
}

.flip-in-hor-top {
  -webkit-animation: flip-in-hor-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
    both;
  animation: flip-in-hor-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes flip-in-hor-top {
  0% {
    -webkit-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}
@keyframes flip-in-hor-top {
  0% {
    -webkit-transform: rotateX(-80deg);
    transform: rotateX(-80deg);
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(0);
    transform: rotateX(0);
    opacity: 1;
  }
}