.menu-footer {
  position: absolute;
  bottom: 0;
  display: flex;
  width: 100%;
  height: 15%;
  background: none;
  z-index: 20;

  background: #181b46;
  border-top: 1cqh solid #e720b8;
}

.menu-footer-hidden {
  bottom: -10%;
}

/* The .create-earth-button rules stood here. The button itself is gone —
   making soil is the radial menu's earth segment now (see
   views/partials/flower-container.html). */

@keyframes moisture-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-3px) rotate(-4deg); }
  30% { transform: translateX(3px) rotate(4deg); }
  45% { transform: translateX(-2px) rotate(-2deg); }
  60% { transform: translateX(2px) rotate(2deg); }
  75% { transform: translateX(-1px) rotate(-1deg); }
}

.watering-can-float-text {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 2cqh;
  color: white;
  pointer-events: none;
  text-shadow: 0 0 4px #000;
  animation: floatUp 1.5s ease-out forwards;
}

@keyframes floatUp {
  0% { opacity: 1; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(calc(-50% - 5cqh)); }
}

.watering-exit-zone {
  cursor: pointer !important;
}

.watering-overlay {
  position: absolute;
  top: 7%;
  left: 10%;
  right: 0;
  bottom: 15%;
  z-index: 40;
  cursor:
    url("/images/cursors/watering-can.svg") 29 9,
    crosshair;
}

.watering-overlay.pouring {
  cursor:
    url("/images/cursors/watering-can-pour.svg") 30 20,
    crosshair;
}

.menu-footer-button-active {
  height: 9cqh !important;
  margin-top: 0.5cqh !important;
  padding-top: 0.5cqh !important;
  opacity: 1 !important;
  cursor: default !important;
}

.menu-footer-button {
  display: block;
  width: 90%;
  margin-left: 5%;
  height: 9cqh;
  color: white;
  background: none;
  border: none;

  .footer-lock-icon {
    display: none;
  }

  &:hover {
    cursor: pointer;
    filter: brightness(1.2);
  }
  &:active {
    transform: translateY(0.5cqh);
    box-shadow: none !important;
  }
  &:disabled {
    cursor: not-allowed;
    filter: none;
    .footer-lock-icon {
      display: inline-block;
    }
  }
}

.menu-footer-button-container {
  border-radius: 1cqh;
  position: relative;
  overflow: hidden;
  display: block;
  width: 18.3%;
  margin: 2% 0.7%;
}

/* Dim the entire footer op cell (icon, count, and button) when the operation
   is locked, signaled by a disabled .menu-footer-button inside. */
.menu-footer-button-container:has(.menu-footer-button:disabled) {
  filter: brightness(0.5);
}

/* The chip above each footer button: the element that operation earns, on a
   colour-coded background, sitting beside that element's count
   (.menu-footer-element-text). Also the target the end-game tally flies its
   earned elements to — see ELEMENT_ICON_DATA in end-game-menu.js. */
.menu-footer-element-icon {
  display: block;
  width: 20%;
  height: 30%;
  padding: 0 5%;
  top: 1cqh;
}

.menu-footer-element-text {
  font-weight: 600;
  display: inline-block;
  width: 70%;
  position: absolute;
  font-size: 2.7cqh;
  text-align: center;
  top: 0.2cqh;
  right: 0;
}

.menu-footer-element-text-small {
  font-size: 2cqh;
  top: 0.6cqh;
}

.menu-footer-button-math {
  border-radius: 3cqh;
  height: 5cqh;
  position: absolute;
  bottom: 7%;
}

#menu-footer-earth-icon {
  background-color: var(--earth-color);
}

#menu-footer-air-icon {
  background-color: var(--air-color);
}

/* The water and fire element glyphs are tall and narrow, so at the shared
   .menu-footer-element-icon size they stand a head above the earth and wind
   chips. These two shrink and pad to bring all four back to one line. */
#menu-footer-water-icon {
  background-color: var(--water-color);
  height: 20%;
  padding: 5%;
}

#menu-footer-fire-icon {
  background-color: var(--fire-color);
  height: 20%;
  padding: 5%;
}

#menu-footer-add-container {
  background-color: var(--earth-color-shadow);
}

#menu-footer-sub-container {
  background-color: var(--air-color-shadow);
}

#menu-footer-mul-container {
  background-color: var(--water-color-shadow);
}

#menu-footer-div-container {
  background-color: var(--fire-color-shadow);
}

#menu-footer-add {
  background-color: var(--earth-color);
  box-shadow: 0 0.5cqh 0 0 var(--earth-color-shadow);
}

#menu-footer-sub {
  background-color: var(--air-color);
  box-shadow: 0 0.5cqh 0 0 var(--air-color-shadow);
}

#menu-footer-mul {
  background-color: var(--water-color);
  box-shadow: 0 0.5cqh 0 0 var(--water-color-shadow);
}

#menu-footer-div {
  background-color: var(--fire-color);
  box-shadow: 0 0.5cqh 0 0 var(--fire-color-shadow);
}

/* The old dungeon button, repurposed as the way into the garden. Still wearing
   the dungeon's purple — there is no garden colour token, and inventing one is
   a palette decision rather than a wiring one. */
#menu-footer-garden {
  /* Load-bearing: .footer-lock-icon is absolutely positioned at left:50%, so
     it needs this tile to be its containing block. Without it the padlock
     resolves against .menu-footer — the only positioned ancestor — and lands
     centred on the whole footer bar instead of on this button. The math
     buttons get away with omitting it only because .menu-footer-button-math
     is itself absolute. */
  position: relative;
  border-radius: 1cqh;
  background-color: var(--dungeon-color);
  box-shadow: 0 0.5cqh 0 0 var(--dungeon-color-shadow);
  width: 18.3%;
  margin: 3.5% 0.7%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .button-disable dims and blocks the tile; this is what puts the padlock on
   it, matching the locked math buttons. The base rule that hides the icon
   lives on .menu-footer-button, so this needs the id to outrank it. */
#menu-footer-garden.button-disable .footer-lock-icon {
  display: inline-block;
}

.menu-footer-meter {
  width: 18.3%;
  height: 2.5cqh;
  display: block;
  position: absolute;
  bottom: 2cqh;
  border-radius: 0.5cqh;
  margin: 0 0.7%;
  background-color: #e720b8;
  overflow: hidden;
}

.menu-footer-meter-disabled {
  opacity: 0.5;
}

.menu-footer-meter-icon {
  height: 2cqh;
  position: absolute;
  top: 0.3cqh;
  left: 10%;
  z-index: 1;
}

.menu-footer-meter-text {
  position: absolute;
  font-size: 2cqh;
  width: 100%;
  text-align: center;
  top: 0;
  left: 0;
}

.menu-footer-meter-treasure {
  height: 2cqh;
  position: absolute;
  top: 0.3cqh;
  right: 10%;
}

.menu-footer-meter-sub {
  left: 19.7%;
}

.menu-footer-meter-mul {
  left: 39.4%;
}

.menu-footer-meter-div {
  left: 59.1%;
}

.menu-footer-icon {
  margin: 0 auto 0 auto;
  display: block;
  height: 7cqh;
  fill: white;
}

.menu-footer-text {
  display: block;
  font-size: 2cqh;
  text-align: center;
}

.footer-lock-icon {
  position: absolute;
  width: 4cqh;
  left: 50%;
  transform: translateX(-50%);
  top: 1cqh;
}

/* The glyph inside each footer button: the maths operation it plays. */
.menu-footer-button-op-icon {
  height: 3.5cqh;
  display: block;
  width: 50%;
  margin-left: 25%;
  margin-top: 0;
  fill: white;
}

/* The minus is the one wide, short glyph in the set — at the shared width it
   is width-constrained where + × ÷ are height-constrained, so it renders a
   third wider than its neighbours. Narrow its box to match them. */
.menu-footer-button-op-icon-sub {
  width: 30%;
  margin-left: 35%;
}

#menu-header {
  position: absolute;
  display: block;
  background: #181b46;
  z-index: 20;
  width: 100%;
  height: 7%;

  border-bottom: 1cqh solid #e720b8;
}

.menu-header-element-icon-container {
  position: absolute;
  height: 100%;
  width: 30%;
  left: 0;
  top: 0;
}

.menu-header-element-icon {
  display: block;
  position: absolute;
  top: 25%;
  max-height: 50%;
  left: 10%;
  left: 0.2cqw;
  pointer-events: none;
}

.menu-header-icon {
  height: 2.6cqh;
  float: left;
  pointer-events: none;
}

.menu-header-button {
  display: inline-block;
  color: white;
  z-index: 10;
  height: 10cqh;

  &:hover {
    cursor: pointer;
  }

  &:disabled {
    opacity: 0.5;
    cursor: not-allowed;

    .menu-header-element-text {
      display: none;
    }

    .menu-header-element-lock-icon {
      display: block;
    }
  }
}

.menu-header-button-active {
  animation: menu-header-button-pulse 2s infinite;
}

@keyframes menu-header-button-pulse {
  0% {
    box-shadow: inset 0 0 1cqh #66666699;
  }
  50% {
    box-shadow: inset 0 0 2cqh #9e42b0ff;
  }
  100% {
    box-shadow: inset 0 0 1cqh #66666699;
  }
}

.menu-header-element-button {
  position: absolute;
  top: 8cqh;
  width: 16%;
  height: 4.2cqh;
  border: none;
  font-weight: 600;
  border-radius: 1cqh;
  overflow-y: hidden;

  &:disabled {
    .menu-header-element-icon-container {
      width: 30% !important;
    }
  }
  &:active {
    margin-top: 0.2cqh;
  }
  &:hover {
    .menu-header-element-icon-container {
      transition: 0.2s;
      width: 100%;
    }
  }
}

/* .menu-header-element-text {
  font-weight: 600;
  position: absolute;
  font-size: 2.7vh;
  text-align: center;
  right: 0;
  pointer-events: none;
  top: 0.6vh;
  width: 70%;
} */

/* #menu-header-earth {
  left: 2%;
  background-color: var(--earth-color-shadow);

  .menu-header-element-icon-container {
    background-color: var(--earth-color);
  }
}

#menu-header-air {
  left: 21.8%;
  background-color: var(--air-color-shadow);
  .menu-header-element-icon-container {
    background-color: var(--air-color);
  }
}

#menu-header-water {
  left: 41.6%;
  background-color: var(--water-color-shadow);
  .menu-header-element-icon-container {
    background-color: var(--water-color);
  }
  .menu-header-element-icon {
    left: 1vb;
  }
}

#menu-header-fire {
  left: 61.8%;
  background-color: var(--fire-color-shadow);
  .menu-header-element-icon-container {
    background-color: var(--fire-color);
  }
  .menu-header-element-icon {
    left: 1vb;
  }
} */

.menu-header-element-lock-icon {
  display: none;
  height: 3cqh;
  position: absolute;
  z-index: 10;
  left: 160%;
  top: 10%;
}

/* .streak-button {
  top: 15vb;
  right: 1%;
}

#streak-button-text {
  display: inline;
  position: absolute;
  font-size: 2.5vb;
  text-align: center;
  top: 4vb;
  left: 0;
  width: 100%;
  z-index: 10;
}

#streak-button-active-marker {
  position: absolute;
  width: 4vb;
  height: 4vb;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 10;
  border-radius: 50%;
} */

#menu-sidebar {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  height: 100%;
  z-index: 19;
  width: 10%;
  padding-top: 9.75cqh;
  background-color: #383a5a;
  transition:
    left 0.3s,
    width 0.25s;
  overflow: hidden;
}

#menu-sidebar:hover {
  width: 35%;
}

#menu-sidebar:hover .sidebar-label {
  opacity: 1;
}

.menu-sidebar-button {
  display: flex;
  align-items: center;
  border: none;
  fill: white;
  font-size: 4cqh;
  width: 100%;
  padding: 1.4cqh 1.2cqw;
  opacity: 0.8;
  text-decoration: none;
  color: white;

  -webkit-filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(3px 3px 2px rgba(0, 0, 0, 0.7));

  svg {
    width: 7cqw;
    min-width: 7cqw;
    height: 7cqw;
  }

  &:hover {
    cursor: pointer;
    opacity: 1;
  }
}

.sidebar-label {
  font-family: "Outfit", sans-serif;
  font-size: 2.5cqh;
  font-weight: 600;
  margin-left: 1.5cqh;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.menu-sidebar-button.button-disable {
  opacity: 0.5;
}

.menu-sidebar-button-bottom {
  position: absolute;
  bottom: 23%;
}

#sidebar-streak-text {
  position: absolute;
  left: 1.2cqw;
  top: 52%;
  transform: translateY(-50%);
  width: 7cqw;
  text-align: center;
  font-size: 2cqw;
  pointer-events: none;
}

.quests-button {
  top: 27cqh;
  right: 1%;
}

.treasure-button {
  top: 15cqh;
  right: 1%;
}

#treasure-button-text {
  display: inline;
  position: absolute;
  font-size: 2.5cqh;
  text-align: center;
  top: 4cqh;
  left: 0;
  width: 100%;
  z-index: 10;
}

#treasure-button {
  position: relative;
}

#treasure-button-active-marker {
  position: absolute;
  width: 1.8cqh;
  height: 1.8cqh;
  bottom: 1.2cqh;
  left: 4.5cqh;
  background-color: red;
  z-index: 10;
  border-radius: 50%;
  display: none;
  pointer-events: none;
}

/* #settings-button {
  bottom: 13vh;
  left: 1%;
} */

#inventory-button {
  bottom: 13cqh;
  right: 1%;

  .inventory-button-icon {
  }
}

#achievements-button {
  bottom: 25cqh;
  right: 1%;
}

#menu-header-energy-icon {
  top: 0.2cqh;
  height: 2cqh;
  position: absolute;
  left: 2.5%;
}

#menu-header-energy {
  position: absolute;
  display: inline-block;
  width: 19%;
  height: 2cqh;
  top: 5.25cqh;
  left: 1%;
  background-color: #2b1d14;
}

#menu-header-energy-text {
  position: absolute;
  font-size: 1.75cqh;
  width: 97.5%;
  text-align: right;
  color: goldenrod;
}

#menu-header-energy-text-regen {
  position: absolute;
  font-size: 1.25cqh;
  top: 0.5cqh;
  left: 3cqh;
  width: 90%;
  text-align: left;
  color: grey;
}

#menu-header-energy-bar {
  position: absolute;
  display: inline-block;
  width: 78%;
  height: 2.25cqh;
  top: 7.25cqh;
  left: 1%;
  background-color: #2b1d14;
}

#menu-header-energy-bar-container {
  position: absolute;
  display: inline-block;
  width: 98%;
  top: 0.5cqh;
  height: 1.25cqh;
  left: 1%;
  background-color: #000;
}

#menu-header-energy-bar-fill {
  position: absolute;
  display: inline-block;
  margin-left: 0.5%;
  width: 99%;
  height: 0.8cqh;
  top: 0.25cqh;
  background-color: goldenrod;
  transition: 0.3s;
}

#menu-header-name {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 1cqh;
  width: 58%;
  height: 4.25cqh;
  top: 1.5cqh;
  left: 2%;
  text-align: left;
  font-size: 4cqh;
  font-weight: 400;
  cursor: pointer;
}

.menu-header-user-icon {
  height: 4cqh;
  width: 4cqh;
  fill: white;
  flex-shrink: 0;
}

.menu-header-currency-container {
  height: 100%;
  display: block;
  background-color: #383a5a;
  width: 18%;
  right: 0;
  position: absolute;
}

#menu-header-stars {
  position: absolute;
  /* Stars hidden — gems shown in the header slot instead. Reversed for the
     simplified game below, which earns and spends stars and never mints a
     gem. Both sit in the same slot, so it is a straight swap. */
  display: none;
  width: 90%;
  height: 4.25cqh;
  top: 1.5cqh;
  right: 6%;
  z-index: 100;
}

#menu-header-stars-text {
  position: absolute;
  font-size: 3cqh;
  margin-top: 0.5cqh;
  width: 97.5%;
  text-align: right;
}

#menu-header-gems {
  position: absolute;
  display: inline-block;
  width: 90%;
  height: 4.25cqh;
  top: 1.5cqh;
  right: 6%;
  z-index: 100;
}

#menu-header-gems-text {
  position: absolute;
  font-size: 3cqh;
  width: 97.5%;
  text-align: right;
}

.menu-header-gems-icon {
  position: absolute;
  height: 3.4cqh;
  left: 4%;
  top: 0.1cqh;
  fill: white;
}

.menu-header-stars-icon {
  position: absolute;
  height: 4.5cqh;
  left: 2.5%;
  fill: white;
}

/* The simplified game's header carries neither currency.

   It used to show stars — they were what the Daily Star paid out and what a
   garden plot cost. The daily treasure is disabled, which was their only
   source, so the readout could ony ever have said 0. Gems stay hidden as they
   are in the full game's header rule above; they are synthesized as 0 here and
   never move.

   Both are still in the markup and still updated by user-data.js, so bringing
   either back is this one rule. */
body.simple-mode #menu-header-stars,
body.simple-mode #menu-header-gems {
  display: none;
}

/* ...and with nothing in it, the panel it sat on is just a grey rectangle in
   the corner. The container keeps its place in the layout — the full game and
   the garden still put a currency there — it simply stops painting. */
body.simple-mode .menu-header-currency-container {
  background-color: transparent;
}

#profile-menu {
  display: none;
}

#treasure-window-container {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 75vh;
  width: 100%;
  height: 100%;
  margin: auto;
  font-size: 4cqh;
  /* Container creates its own stacking context above the header (z=100)
     and other floating UI so the backdrop reliably blocks them. */
  z-index: 1000;
}

/* Full-viewport panel behind the treasure dialog. Blocks pointer events
   so footer/shelf/canvas/header controls can't be clicked while the dialog
   is open. DOM-ordered before .bordered-window so the dialog stacks on top. */
.treasure-window-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

#treasure-streak-label {
  text-align: center;
  font-size: 3cqh;
  opacity: 0.8;
  margin-bottom: 1cqh;
}

.streak-pulse {
  animation: streakPulse 0.5s ease-in-out 2;
}

@keyframes streakPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.3); color: #ffd700; }
}

/* The day's star reward behind its four-part lock. The two children are
   stacked, not laid out in flow: the stars fill the box and the lock bars sit
   on top of them, so a bar retracting genuinely reveals what it was covering. */
#treasure-star-vault {
  position: relative;
  height: 22cqh;
  margin: 2cqh 0 1cqh;
}

#treasure-star-vault-stars {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  gap: 0.5cqh;
  padding: 0 3cqh;
}

.treasure-vault-star {
  width: 5cqh;
  height: 5cqh;
  fill: #ffffff;
}

/* Today's star, still to be earned: drawn as an outline in the place it will
   fill. Written against both classes so it outranks the fill above. */
.treasure-vault-star.treasure-vault-star-pending {
  fill: transparent;
  stroke: #ffffff;
  stroke-width: 1.5;
  opacity: 0.65;
  cursor: pointer;
}

/* The crow's line, shown when a lock or the empty star is tapped. Holds its
   height whether or not it is speaking, so the window does not jump. */
.treasure-crow-text {
  min-height: 4cqh;
  margin: 0 auto;
  max-width: 80%;
  text-align: center;
  font-weight: 700;
  font-size: 2.8cqh;
  line-height: 1.15;
  color: #ffffff;
  text-shadow: 0 0.25cqh 0.5cqh rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: opacity 200ms ease;
}

.treasure-crow-text.is-showing {
  opacity: 1;
}

.treasure-vault-star-count {
  align-self: center;
  font-size: 3.4cqh;
  margin-left: 0.8cqh;
  color: #ffffff;
}

/* Collect, ringed by its four locks. The locks are absolutely placed at the
   four compass points around a centred button — centred with auto margins
   rather than a translate, so the .open transform below is free to move them
   without knocking them off-centre. */
#treasure-collect {
  position: relative;
  height: 24cqh;
  margin: 1cqh 0 2cqh;
}

#treasure-collect-locks {
  position: absolute;
  inset: 0;
  /* The layer itself is inert so the button underneath keeps its whole hit
     area; the individual locks take their own clicks. */
  pointer-events: none;
}

/* A square tile carrying its element, with the padlock laid over the top while
   the round is unplayed. Overlaid rather than set beside it so the tile stays
   square and the element stays the thing you recognise. */
.treasure-collect-lock {
  position: absolute;
  width: 6cqh;
  height: 6cqh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(58, 48, 38, 0.94);
  border: 0.25cqh solid rgba(0, 0, 0, 0.45);
  border-radius: 0.8cqh;
  transition:
    background-color 0.45s ease,
    border-color 0.45s ease;
  /* A shut lock answers a tap; an open one has nothing left to ask for. */
  pointer-events: auto;
  cursor: pointer;
}

.treasure-collect-lock:nth-child(1) {
  top: 0;
  left: 50%;
  margin-left: -3cqh;
}

.treasure-collect-lock:nth-child(2) {
  right: 0;
  top: 50%;
  margin-top: -3cqh;
}

.treasure-collect-lock:nth-child(3) {
  bottom: 0;
  left: 50%;
  margin-left: -3cqh;
}

.treasure-collect-lock:nth-child(4) {
  left: 0;
  top: 50%;
  margin-top: -3cqh;
}

.treasure-collect-lock-element {
  width: 3.6cqh;
  height: 3.6cqh;
  fill: #ffffff;
  /* Dimmed while shut so the padlock over it stays legible. */
  opacity: 0.45;
  transition: opacity 0.45s ease;
}

.treasure-collect-lock-padlock {
  position: absolute;
  width: 2.6cqh;
  height: 2.6cqh;
  fill: #ffffff;
  transition: opacity 0.3s ease;
  /* Reads over the element beneath it. */
  filter: drop-shadow(0 0 0.4cqh rgba(0, 0, 0, 0.9));
}

/* Won today: the padlock goes and the tile lights up in its element's colour,
   with the element itself at full strength. It stays put — an open lock is the
   record that the round is done, not something to hide. */
.treasure-collect-lock.open {
  pointer-events: none;
}

.treasure-collect-lock.open .treasure-collect-lock-padlock {
  opacity: 0;
}

.treasure-collect-lock.open .treasure-collect-lock-element {
  opacity: 1;
}

.treasure-collect-lock-earth.open {
  background-color: var(--earth-color);
  border-color: var(--earth-color-shadow);
}

.treasure-collect-lock-air.open {
  background-color: var(--air-color);
  border-color: var(--air-color-shadow);
}

.treasure-collect-lock-water.open {
  background-color: var(--water-color);
  border-color: var(--water-color-shadow);
}

.treasure-collect-lock-fire.open {
  background-color: var(--fire-color);
  border-color: var(--fire-color-shadow);
}

#treasure-collect-button {
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -3.5cqh 0 0 -9cqh;
  width: 18cqh;
  height: 7cqh;
}

/* Locked: still readable, so the ring explains why rather than the button
   simply looking broken. */
#treasure-collect-button:disabled {
  opacity: 0.45;
  cursor: default;
}

#treasure-chest-display {
  position: relative;
  height: 36cqh;
  margin: 3cqh 0;
}

#treasure-chest-top,
#treasure-chest-bottom,
#treasure-chest-prompt,
#treasure-reward-icons {
  pointer-events: none;
}

#treasure-chest-top,
#treasure-chest-bottom {
  width: 18cqh;
  height: 18cqh;
  fill: currentColor;
  position: absolute;
  left: 50%;
  top: 8cqh;
  transform: translateX(-50%);
}

#treasure-chest-top {
  z-index: 1;
  transition: top 0.3s ease-out;
}

#treasure-chest-display.unlockable {
  cursor: pointer;
}

#treasure-chest-display.unlockable #treasure-chest-top,
#treasure-chest-display.unlockable #treasure-chest-bottom {
  animation: chest-pulse 3s ease-in-out infinite;
}

#treasure-chest-display.unlockable #treasure-chest-top.chest-top-open {
  animation: chest-pulse-open 3s ease-in-out infinite;
}

@keyframes chest-pulse-open {
  0% { transform: translateX(-50%) rotate(-15deg) scale(1); }
  10% { transform: translateX(-50%) rotate(-15deg) scale(1.12); }
  20% { transform: translateX(-50%) rotate(-15deg) scale(1); }
  30% { transform: translateX(-50%) rotate(-15deg) scale(1.08); }
  40% { transform: translateX(-50%) rotate(-15deg) scale(1); }
  50% { transform: translateX(-52%) rotate(-18deg) scale(1); }
  55% { transform: translateX(-48%) rotate(-12deg) scale(1); }
  60% { transform: translateX(-51%) rotate(-17deg) scale(1); }
  65% { transform: translateX(-49%) rotate(-13deg) scale(1); }
  70% { transform: translateX(-50%) rotate(-15deg) scale(1); }
  100% { transform: translateX(-50%) rotate(-15deg) scale(1); }
}

@keyframes chest-pulse {
  0% { transform: translateX(-50%) scale(1); }
  10% { transform: translateX(-50%) scale(1.12); }
  20% { transform: translateX(-50%) scale(1); }
  30% { transform: translateX(-50%) scale(1.08); }
  40% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-52%) rotate(-3deg) scale(1); }
  55% { transform: translateX(-48%) rotate(3deg) scale(1); }
  60% { transform: translateX(-51%) rotate(-2deg) scale(1); }
  65% { transform: translateX(-49%) rotate(2deg) scale(1); }
  70% { transform: translateX(-50%) rotate(0deg) scale(1); }
  100% { transform: translateX(-50%) scale(1); }
}

#treasure-chest-prompt {
  text-align: center;
  font-size: 2.5cqh;
  width: 100%;
  display: none;
  opacity: 1;
  transition: opacity 0.3s;
}

#treasure-chest-prompt.fading {
  opacity: 0;
}

#treasure-reward-icons {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 8.5cqh;
  display: flex;
  gap: 1cqh;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s;
}

#treasure-reward-icons img {
  width: 6cqh;
  height: 6cqh;
}

#treasure-return-message {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 4cqh;
  display: none;
}

.treasure-rewards-list {
  display: none;
  position: absolute;
  top: 27cqh;
  bottom: 0;
  left: 4cqh;
  right: 4cqh;
  overflow-y: auto;
  text-align: center;
  font-size: 2.75cqh;
  line-height: 1.4;
}

.treasure-rewards-list-row {
  padding: 0.25cqh 0;
}

#treasure-close-button {
  display: none;
  margin: 0 auto;
}

.profile-menu-button {
  position: absolute;
  margin-left: 10%;
  width: 80%;
  height: 8cqh;
}

#profile-menu-profile-button {
  top: 35cqh;
}

#profile-menu-sound-button {
  top: 45cqh;
}

.elements-menu-button-text {
  margin: 0 4cqh;
}

.bordered-window {
  position: relative;
  z-index: 20;
  width: 80%;
  height: 70%;
  margin: 15%;
  background-color: #181b46;
}

.bordered-window-body {
  position: relative;
  top: 2cqh;
  margin: 2cqh;
  padding: 2cqh;
  width: calc(100% - 8cqh);
  height: calc(100% - 8cqh);
  border: solid 1px white;
}

.bordered-window-close-button {
  position: relative;
  float: right;
  top: 1.5cqh;
  right: 3cqh;
  font-size: 4cqh;
  color: #fff;
  cursor: pointer;
  z-index: 2;
}

.bordered-window-heading {
  display: block;
  width: 100%;
  font-size: 5cqh;
  text-align: center;
  font-weight: 600;
}

/* ── Account window ────────────────────────────────────────────────────────
   Opened by tapping the player's name in the header (account-menu.js). Mirrors
   the treasure window's geometry so the two read as the same kind of thing:
   a panel over a blocking backdrop, above the header's stacking context. */
#account-window-container {
  display: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 75vh;
  width: 100%;
  height: 100%;
  margin: auto;
  font-size: 4cqh;
  z-index: 1000;
}

.account-window-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
}

/* The panel itself is sized by its CONTENT rather than by the shared
   .bordered-window's fixed 70% height.

   This window has three panes of very different heights — a question with two
   buttons, a two-field form, a single line of "check your email" — and a fixed
   box leaves a pool of dead space under the short ones. Auto height ends the
   box where the content ends, and centring it means a short pane and a tall
   one both sit in the same place instead of growing downward from a pinned
   top edge.

   Scoped to this window on purpose: the treasure window shares those classes
   and wants its fixed geometry. */
#account-window-container .bordered-window {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  width: 80%;
  height: auto;
  margin: 0 auto;
  transform: translateY(-50%);
}

#account-window-container .bordered-window-body {
  top: 0;
  height: auto;
  /* More room at the foot than the head: the last thing in every pane is a
     link or a button, and it needs air under it to read as finished rather
     than clipped. */
  padding: 3cqh 2cqh 4cqh;
}

/* Space under the heading, so it reads as a title rather than the first line
   of the paragraph beneath it. */
#account-window-container .bordered-window-heading {
  margin-bottom: 4cqh;
}


.account-blurb {
  font-size: 3cqh;
  line-height: 1.4;
  opacity: 0.85;
  margin: 0 0 3cqh;
  text-align: center;
}

/* Full width so the two fields read as one form. 16px minimum on the font size
   is not a style choice: iOS Safari zooms the whole page in on focus when an
   input is smaller than that, and the play area is aspect-locked, so the zoom
   leaves the player looking at a corner of their own garden. */
.account-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 2cqh;
  padding: 1.5cqh 2cqh;
  border: 0.25cqh solid rgba(255, 255, 255, 0.25);
  border-radius: 0.5cqh;
  background-color: rgba(0, 0, 0, 0.35);
  color: #f7f3ec;
  font-family: inherit;
  font-size: max(16px, 3.2cqh);
}

.account-input::placeholder {
  color: rgba(247, 243, 236, 0.5);
}

.account-button {
  width: 100%;
  margin-top: 1cqh;
  font-size: 3.5cqh;
}

.account-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  filter: none;
}

/* Empty until the server says something is wrong, so it holds no space when
   there is nothing to say. */
.account-error:not(:empty) {
  margin-bottom: 2cqh;
  color: #ff8a8a;
  font-size: 3cqh;
  text-align: center;
}

.account-switch {
  margin-top: 3cqh;
  font-size: 3cqh;
  text-align: center;
  text-decoration: underline;
  opacity: 0.8;
  cursor: pointer;
}

.account-switch:hover {
  opacity: 1;
}

/* The policy link inside the account window — quieter than the actions above
   it, but present wherever an address is asked for. */
.account-policy-link {
  display: block;
  margin-top: 2cqh;
  font-size: 2.6cqh;
  text-align: center;
  color: inherit;
  opacity: 0.6;
}

.account-policy-link:hover {
  opacity: 0.9;
}

/* The address a confirmation is waiting on, set apart from the sentence that
   explains it. */
.account-pending-address {
  font-weight: 600;
  opacity: 1;
}