html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  min-height: -webkit-fill-available;
  overflow-x: hidden;
  overflow-y: visible;
  background: #fefeef;
  box-sizing: border-box;
}

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

table {
  border-collapse: collapse;
  width: 100%;
  height: 100%;
  min-width: 612px;
  min-height: 608px;
  border: 4px solid black;
}
td {
  min-width: 204px;
  min-height: 304px;
  text-align: center;
  background-color: #fefeef;
  position: relative;
}
.container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  display: inline-block;
  cursor: pointer;
}

/* Desktop Skip button: spins the tent around its vertical axis to reveal
   the tent behind it -- see skipTentWithSpin() in carnival.js. Perspective
   lives on the grid cell (the .container's parent) so the rotateY looks
   like an actual 3D flip instead of just squashing horizontally.

   Two explicit phases (JS-sequenced), not one fixed-duration @keyframes
   animation: the reveal (tent-flip-in) only ever starts once the new tent's
   content has actually been written into the DOM. A single fixed-duration
   animation ran on its own clock regardless of how long the async content
   refresh took, so it could (and did) un-flip back to face-forward while
   still showing the PREVIOUS tent, then pop to the new one late. */
#tentGrid td {
  perspective: 1200px;
}
.container.tent-flip-out {
  transition: transform 0.3s ease-in;
  transform: rotateY(90deg);
}
.container.tent-flip-in {
  transition: transform 0.3s ease-out;
  transform: rotateY(0deg);
}
.img-gold-tent,
.img-tent {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 11;
}
.button {
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translate(-50%, 0);
  background: gold;
  color: black;
  font-size: 22px;
  z-index: 12;
  text-align: center;
  padding: 3px 6px;
  border: 1px solid black;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
}
.cost {
  position: absolute;
  right: 4%;
  top: 32%;
  background: gold;
  color: black;
  font-size: 22px;
  text-align: center;
  padding: 3px 6px;
  border: 2px solid black;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 21;
  pointer-events: auto;
}
.rules {
  position: absolute;
  left: 2%;
  top: 32%;
  background: gold;
  color: black;
  font-size: 22px;
  text-align: center;
  padding: 3px 6px;
  border: 2px solid black;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 21;
  pointer-events: auto;
}
.ttcomplete {
  position: absolute;
  left: 2%;
  bottom: 2%;
  background: gold;
  color: black;
  font-size: 22px;
  text-align: center;
  padding: 3px 6px;
  border: 2px solid black;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  z-index: 21;
  pointer-events: auto;
}
.closed {
  position: absolute;
  left: 50%;
  top: 60%;
  transform: translate(-50%, 0) rotate(-40deg);
  background: gold;
  color: black;
  font-size: 28px;
  z-index: 22;
  text-align: center;
  padding: 3px 6px;
  border: 2px solid black;
  border-radius: 1px;
  white-space: nowrap;
}
.other-image {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, 0);
  width: 250px;
  border-radius: 10px;
  z-index: 1;
}
.word-buckets-clock {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, 40px);
  width: 84px;
  height: 84px;
  z-index: 17;
  pointer-events: none;
}
.wb-clock-dial {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid black;
  background: conic-gradient(gold 0deg, rgba(0, 0, 0, 0.55) 0deg 360deg);
}
.wb-clock-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #000;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 16px;
  font-weight: bold;
  white-space: nowrap;
}
.user-text {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, 0);
  color: black;
  font-size: 20px;
  z-index: 1;
}
.welcome-username {
  font-size: 23px;
  font-weight: bold;
}
.welcome-spacer {
  height: 10px;
}
.tent-swipe-arrows {
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translate(-50%, 0);
  display: flex;
  align-items: center;
  gap: 90px;
  z-index: 1;
  pointer-events: none;
}
.tent-swipe-arrow {
  font-size: 56px;
  font-weight: bold;
  color: black;
}
.other-text {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translate(-50%, 0);
  color: black;
  font-size: 20px;
  z-index: 1;
}
.heart-tooltip {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 16;
}
.heart-overlay {
  width: 65px;
  height: auto;
  display: block;
}
.tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: gold;
  color: #000;
  text-align: center;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 55%;
  left: 45%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 18px;
}
.heart-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.wins-tooltip {
  position: absolute;
  right: 4%;
  bottom: 2%;
  z-index: 21;
}
.winsremaining {
  background: gold;
  color: black;
  font-size: 22px;
  text-align: center;
  padding: 3px 6px;
  border: 2px solid black;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
}
.wins-tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: gold;
  color: #000;
  text-align: center;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: -20px;
  left: 12%;
  transform: translate(-60%, -70%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 18px;
}
.wins-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
#tentCarousel {
  display: none;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  background: #fefeef;
  touch-action: pan-x;
}
#carouselWrapper {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.28s cubic-bezier(.2,.9,.2,1);
  will-change: transform;
  touch-action: pan-x;
}
.carousel-item {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}
.hidden {
  display: none;
}
.clock-container {
  position: fixed;
  top: -2px;
  left: 49.5%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1000;
}
.digital-clock {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: black;
  font-size: 18px;
  font-weight: bold;
  white-space: nowrap;
  z-index: 1001;
}
@media (max-width: 700px) {
  table#tentGrid {
    display: none;
  }
  #tentCarousel {
    display: block;
  }
  /* #tentCarousel is an ID selector (specificity 1-0-0), which beats the
     plain .hidden class (0-1-0) above regardless of DOM/source order --
     so JS adding class="hidden" was never actually hiding it on phone.
     That's the real reason the carousel was visible (and animating
     through every intermediate build/populate/position step) the whole
     time on load, not a transition-timing race. This ID+class override
     restores .hidden's ability to win. */
  #tentCarousel.hidden {
    display: none;
  }
  table {
    min-width: 0;
    min-height: 0;
  }
  td {
    min-width: 0;
    min-height: 0;
  }
  .container {
    min-width: 0;
    min-height: 0;
  }
  .clock-container {
    position: fixed;
    top: 25px;
    left: 49.5%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1000;
  }
  .digital-clock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: black;
    font-size: 27px;
    font-weight: bold;
    white-space: nowrap;
    z-index: 1001;
  }
}
.rules-tooltip {
  position: absolute;
  left: 2%;
  top: 32%;
  z-index: 21;
}
.rules-tooltip .tooltiptext {
  visibility: hidden;
  width: 140px;
  height: 20px;
  background-color: gold;
  color: #000;
  text-align: top;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 99;
  top: 25px;
  left: 45%;
  transform: translate(50%, 50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 18px;
}
.rules-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.ttcomplete-tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: gold;
  color: #000;
  text-align: center;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 99;
  bottom: 60px;
  left: 50%;
  transform: translate(50%, 50%);
  opacity: 1;
  transition: opacity 0.3s;
  font-size: 18px;
}
.ttcomplete-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.cost-tooltip {
  position: absolute;
  right: 4%;
  top: 32%;
  z-index: 99;
}
.cost-tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  height: 20px;
  background-color: gold;
  color: #000;
  text-align: center;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 999;
  top: 70px;
  left: 22%;
  transform: translate(-70%, -100%);
  opacity: 1;
  transition: opacity 0.3s;
  font-size: 18px;
}
.cost-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
/* Same slot the other tents' cost-tooltip occupies -- the main/festival
   tent has no entry cost, so this fills that visual position instead. */
.profile-tooltip {
  position: absolute;
  right: 4%;
  top: 32%;
  z-index: 99;
  transform: translateX(15px);
}
.profile-tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  height: 20px;
  background-color: gold;
  color: #000;
  text-align: center;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 999;
  top: 70px;
  left: 22%;
  transform: translate(-70%, -100%);
  opacity: 1;
  transition: opacity 0.3s;
  font-size: 18px;
}
.profile-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.profile-avatar {
  width: 69px;
  height: 69px;
  border-radius: 50%;
  border: 2px solid black;
  color: white;
  font-size: 30px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.ttcomplete-tooltip {
  position: absolute;
  left: 2%;
  bottom: 2%;
  z-index: 21;
}

/* Peek button - appears 12px above maxplays button, rotated 90 degrees */
.peek-tooltip {
  position: absolute;
  right: 0%;
  bottom: calc(2% + 60px); /* 40px above the winsremaining button (estimated button height ~28px + 12px gap) */
  z-index: 21;
}
.peek {
  background: gold;
  color: black;
  font-size: 16px;
  text-align: center;
  padding: 3px 8px;
  border: 2px solid black;
  border-radius: 8px;
  cursor: help;
  white-space: nowrap;
  pointer-events: auto;
  transform: rotate(90deg);
  transform-origin: center center;
}
.peek:hover {
  background-color: #ffed4e;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.8);
}
.peek-tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: gold;
  color: #000;
  text-align: center;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 1;
  top: -20px;
  left: 12%;
  transform: translate(-60%, -70%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 18px;
}
.peek-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/////////////////////////////////////
//RANKING STYLES BELOW
////////////////////////////////////

/* === Rankings modal isolated styles === */
.rankings-modal {
  background-color: #fefeef;
  font-family: Arial, sans-serif;
  padding: 10px;
  text-align: center;
  perspective: 1000px;
}

/* Headline */
.rankings-modal h2 {
  color: black;
  text-shadow: 2px 2px 0 gold;
  margin-bottom: 10px;
}

/* Table container */
.rankings-modal table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  border-spacing: 0;
}

/* Cells */
.rankings-modal th,
.rankings-modal td {
  border: 1px solid #111;
  padding: 10px;
  text-align: center;
  vertical-align: middle;
  background: #fefeef;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

/* Header */
.rankings-modal th {
  background-color: gold;
  color: black;
  font-weight: bold;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Emphasize key columns */
.rankings-modal #leaderboard tbody td:nth-child(1),
.rankings-modal #leaderboard tbody td:nth-child(3) {
  font-size: 1.3em;
  font-weight: 500;
  color: #000;
}

/* --- Animation & highlight effects --- */
.rankings-modal tr.pop-out {
  transform: translateZ(80px) scale(1.07);
  box-shadow: 0 18px 30px rgba(0,0,0,0.35);
  z-index: 50;
  position: relative;
}
.rankings-modal tr.slide-down {
  transform: translateY(36px);
}
.rankings-modal tr.settle {
  transform: translateZ(0) scale(1);
  box-shadow: none;
}
.rankings-modal tr.pop-out td {
  background-color: #fff8d6;
}
.rankings-modal tr.moving {
  position: relative;
  z-index: 10;
  background: #fffbea !important;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  border-left: 4px solid #ffeb3b;
}
.rankings-modal tr.moving-up {
  background: #ffD700 !important;
  border-left: 4px solid #ffD700 !important;
  font-weight: 600;
  animation: pulseGlow 2.2s ease-in-out;
}
.rankings-modal tr.moving-up td:first-child {
  color: #ffD700;
  font-weight: 800;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 6px 16px rgba(255, 215, 0, 0.2); }
  50% { box-shadow: 0 8px 24px rgba(255, 215, 0, 0.8); }
}
.rankings-modal tr.highlight { background: #fffacd !important; transition: background .2s; }
.rankings-modal tr.pop-out { transform: translateY(-8px) scale(0.96); opacity: .7; transition: transform .12s ease, opacity .12s ease; }
.rankings-modal tr.slide-down { transform: translateY(100%); transition: transform .18s ease-out; }
.rankings-modal tr.settle { transform: translateY(0) scale(1); opacity: 1; transition: transform .2s ease-out, opacity .2s ease-out; }

/* Rankings tooltip - left side, halfway between rules (top:32%) and ttcomplete (bottom:2%) */
.rankings-tooltip {
  position: absolute;
  left: 0%;
  top: 59%;
  z-index: 21;
}
.rankings-tooltip .tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: gold;
  color: #000;
  text-align: center;
  border-radius: 6px;
  border: 2px solid black;
  padding: 5px;
  position: absolute;
  z-index: 99;
  top: -20px;
  left: 120%;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  font-size: 18px;
}
.rankings-tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.rankings-btn {
  background-color: #007BFF;
  color: white;
  border: 2px solid black;
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 14px;
  cursor: pointer;
  pointer-events: auto;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transition: background-color 0.2s;
}
.rankings-btn:hover {
  background-color: #0056b3;
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.6);
}

.brain-link {
  position: absolute;
  top: 3%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 12;

  width: 80px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #222;
  border: 4px solid #bbb;
  border-radius: 50%;

  overflow: hidden;
  cursor: pointer;
}

.brain-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.brain-link:hover .brain-image {
  transform: scale(1.4);
}