* {
  box-sizing: border-box;
}

/* Fingers can slide what scrolls, but never zoom the page (the game has its own zoom, js/main.js). */
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: pan-x pan-y;
  background: #F5EBDD;
  color: #4A3428;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}

#title-screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 16px;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(143, 168, 138, 0.35), transparent 45%),
    radial-gradient(circle at 80% 85%, rgba(200, 102, 74, 0.25), transparent 45%),
    #F5EBDD;
}

#title-screen[hidden] {
  display: none;
}

h1 {
  margin: 0;
  font-size: clamp(2.4rem, 8vw, 5rem);
  color: #C8664A;
  text-shadow: 3px 3px 0 #B07A4F33;
}

.subtitle {
  margin: 0;
  font-size: clamp(1.1rem, 3.5vw, 1.6rem);
  color: #4A3428;
}

#play-button {
  margin-top: 12px;
  padding: 14px 48px;
  font: inherit;
  font-size: 1.5rem;
  font-weight: 700;
  color: #F5EBDD;
  background: #8FA88A;
  border: 4px solid #4A3428;
  border-radius: 999px;
  box-shadow: 0 6px 0 #4A3428;
  cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s, background 0.2s;
}

#play-button:hover {
  background: #C8664A;
}

#play-button:active {
  transform: translateY(4px);
  box-shadow: 0 2px 0 #4A3428;
}

/* js/main.js gives it the size of the window. Fingers on it never scroll, zoom or select text. */
#game {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game[hidden] {
  display: none;
}

/* Round button that opens and closes the panel; always visible in the top left corner. */
#menu-toggle {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  color: #F5EBDD;
  background: #B07A4F;
  border: 3px solid #4A3428;
  border-radius: 50%;
  box-shadow: 0 3px 0 #4A3428;
  cursor: pointer;
}

#menu-toggle[hidden],
#sound-toggle[hidden],
#zoom-reset[hidden] {
  display: none;
}

#menu-toggle:hover,
#sound-toggle:hover,
#zoom-reset:hover {
  background: #C8664A;
}

#menu-toggle:active,
#sound-toggle:active,
#zoom-reset:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #4A3428;
}

/* The sound button sits right of the ☰ button, with the same look. */
#sound-toggle {
  position: fixed;
  top: 16px;
  left: 68px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  background: #B07A4F;
  border: 3px solid #4A3428;
  border-radius: 50%;
  box-shadow: 0 3px 0 #4A3428;
  cursor: pointer;
}

/* With zoom, the 🔍 button goes back to the whole place; it sits right of the sound button, with the same look. */
#zoom-reset {
  position: fixed;
  top: 16px;
  left: 120px;
  z-index: 2;
  width: 44px;
  height: 44px;
  padding: 0;
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  background: #B07A4F;
  border: 3px solid #4A3428;
  border-radius: 50%;
  box-shadow: 0 3px 0 #4A3428;
  cursor: pointer;
}

/* With the phone standing up: a soft sign at the top that asks to turn it, with ✕ to close it. */
#rotate-hint {
  position: fixed;
  top: 70px;
  left: 50%;
  z-index: 8;
  display: flex;
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100vw - 32px);
  padding: 6px 6px 6px 16px;
  font-weight: 700;
  color: #4A3428;
  background: rgba(245, 235, 221, 0.95);
  border: 3px solid #8FA88A;
  border-radius: 999px;
  box-shadow: 0 3px 0 #6F9460;
  transform: translateX(-50%);
}

#rotate-hint[hidden] {
  display: none;
}

#rotate-close {
  flex: none;
  width: 44px;
  height: 44px;
  font: inherit;
  font-weight: 700;
  color: #F5EBDD;
  background: #8FA88A;
  border: 3px solid #4A3428;
  border-radius: 50%;
  cursor: pointer;
}

/* The panel sits just below the round button. */
#selection-panel {
  position: fixed;
  top: 68px;
  left: 16px;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  background: #F5EBDD;
  border: 3px solid #4A3428;
  border-radius: 16px;
  box-shadow: 0 4px 0 #4A3428;
  pointer-events: none;
  transform-origin: top left;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0s;
}

#selection-panel[hidden] {
  display: none;
}

/* Closed: it fades and shrinks toward the button, then hides so it can not be clicked. */
#selection-panel.closed {
  opacity: 0;
  transform: translateY(-10px) scale(0.9);
  visibility: hidden;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}

#clock {
  font-size: 1rem;
  font-weight: 700;
  color: #4A3428;
}

#coins {
  font-size: 1rem;
  font-weight: 700;
  color: #B07A4F;
}

#selection-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #C8664A;
}

#selection-hint {
  font-size: 0.9rem;
  color: #4A3428;
}

#selection-hint[hidden] {
  display: none;
}

#needs {
  display: grid;
  gap: 6px;
  margin-top: 10px;
}

#needs[hidden] {
  display: none;
}

.need-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.need-label {
  width: 7.5em;
  font-size: 0.95rem;
}

.need-track {
  width: 140px;
  height: 14px;
  background: #EAD9C4;
  border: 2px solid #4A3428;
  border-radius: 999px;
  overflow: hidden;
}

.need-fill {
  height: 100%;
  border-radius: 999px;
}

/* One line of Amistad for each one: the other one and the neighbors. */
#friendship {
  margin-top: 8px;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: pre-line;
  color: #4A3428;
}

#friendship[hidden] {
  display: none;
}

#social-menu,
#gift-menu {
  position: fixed;
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #F5EBDD;
  border: 3px solid #4A3428;
  border-radius: 16px;
  box-shadow: 0 4px 0 #4A3428;
}

#social-menu[hidden],
#gift-menu[hidden] {
  display: none;
}

/* The menu to pick who gets a gift goes over the backpack. */
#gift-menu {
  z-index: 5;
}

#social-menu button,
#gift-menu button {
  padding: 6px 16px;
  font: inherit;
  font-weight: 700;
  color: #F5EBDD;
  background: #8FA88A;
  border: 3px solid #4A3428;
  border-radius: 999px;
  cursor: pointer;
}

#social-menu button:hover,
#gift-menu button:hover {
  background: #C8664A;
}

/* "📖 Palabra del día" for Professor Hoot, golden; faded once it was done today. */
#social-menu button[data-type="lesson"] {
  background: #E2B44B;
  color: #4A3428;
}

#social-menu button[data-type="lesson"]:hover:not(:disabled) {
  background: #C8664A;
  color: #F5EBDD;
}

#social-menu button:disabled {
  opacity: 0.5;
  cursor: default;
}

#seed-menu,
#cook-menu,
#picnic-menu {
  position: fixed;
  display: grid;
  gap: 6px;
  padding: 10px;
  background: #F5EBDD;
  border: 3px solid #4A3428;
  border-radius: 16px;
  box-shadow: 0 4px 0 #4A3428;
}

#seed-menu[hidden],
#cook-menu[hidden],
#picnic-menu[hidden],
#cook-menu button[hidden] {
  display: none;
}

#seed-menu button,
#cook-menu button,
#picnic-menu button {
  display: grid;
  padding: 5px 16px;
  font: inherit;
  text-align: left;
  color: #F5EBDD;
  background: #8FA88A;
  border: 3px solid #4A3428;
  border-radius: 14px;
  cursor: pointer;
}

#seed-menu button:hover:not(:disabled),
#cook-menu button:hover:not(:disabled),
#picnic-menu button:hover:not(:disabled) {
  background: #C8664A;
}

#seed-menu button:disabled,
#cook-menu button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.seed-name {
  font-weight: 700;
}

.seed-price {
  font-size: 0.85em;
}

#backpack,
#goals,
#diary,
#valley-map {
  position: fixed;
  right: 16px;
  bottom: 16px;
  width: min(460px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: 10px 12px 12px;
  background: #F5EBDD;
  border: 3px solid #4A3428;
  border-radius: 16px;
  box-shadow: 0 4px 0 #4A3428;
}

#backpack[hidden],
#goals[hidden],
#diary[hidden],
#valley-map[hidden] {
  display: none;
}

/* Over the selected one (or what it covered when it opened), the goals window lets it be seen; with the mouse or a finger on it, it looks as always. */
#goals {
  transition: opacity 0.25s;
}

#goals.see-through:not(:hover):not(.touched) {
  opacity: 0.3;
}

.backpack-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 1.15rem;
  color: #C8664A;
}

#backpack-close,
#goals-close,
#diary-close,
#map-close {
  width: 32px;
  height: 32px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: #F5EBDD;
  background: #B07A4F;
  border: 3px solid #4A3428;
  border-radius: 999px;
  cursor: pointer;
}

#backpack-list {
  display: grid;
  gap: 6px;
}

.backpack-empty {
  margin: 6px 0;
  text-align: center;
  color: #4A3428;
}

.backpack-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 8px;
  background: #FFFDF8;
  border: 2px solid #EAD9C4;
  border-radius: 12px;
}

.backpack-name {
  flex: 1 1 auto;
  font-weight: 700;
}

.backpack-price {
  font-size: 0.9rem;
  color: #B07A4F;
  font-weight: 700;
}

.backpack-row button {
  padding: 3px 10px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  color: #F5EBDD;
  background: #8FA88A;
  border: 2px solid #4A3428;
  border-radius: 999px;
  cursor: pointer;
}

.backpack-row .eat-button {
  background: #B07A4F;
}

.backpack-row .gift-button {
  background: #C8664A;
}

.backpack-row .gift-button:hover:not(:disabled) {
  background: #B07A4F;
}

.backpack-row button:hover:not(:disabled),
#backpack-close:hover,
#goals-close:hover,
#diary-close:hover,
#map-close:hover {
  background: #C8664A;
}

.backpack-row button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.coin-pop {
  position: fixed;
  transform: translate(-50%, -100%);
  font-size: 1.3rem;
  font-weight: 700;
  color: #F5EBDD;
  -webkit-text-stroke: 1px #4A3428;
  text-shadow: 0 2px 0 #4A3428;
  white-space: nowrap;
  pointer-events: none;
  animation: coin-pop 1.2s ease-out forwards;
}

@keyframes coin-pop {
  from {
    opacity: 1;
    margin-top: 0;
  }
  to {
    opacity: 0;
    margin-top: -50px;
  }
}

#word-tag {
  position: fixed;
  left: 0;
  top: 0;
  padding: 4px 10px;
  font-size: 0.95rem;
  white-space: nowrap;
  color: #4A3428;
  background: #F5EBDD;
  border: 2px solid #4A3428;
  border-radius: 10px;
  box-shadow: 0 3px 0 #4A3428;
  pointer-events: none;
}

#word-tag .word-sub {
  font-size: 0.78rem;
  opacity: 0.85;
}

#word-tag .word-sub[hidden] {
  display: none;
}

#word-tag[hidden] {
  display: none;
}

.word-say {
  color: #9A8676;
  font-size: 0.85em;
}

.panel-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.character-button,
#backpack-button,
#goals-button,
#diary-button,
#map-button,
#decorate-button,
#pause-button,
#reset-button {
  padding: 6px 16px;
  font: inherit;
  font-weight: 700;
  color: #F5EBDD;
  background: #B07A4F;
  border: 3px solid #4A3428;
  border-radius: 999px;
  box-shadow: 0 3px 0 #4A3428;
  cursor: pointer;
  pointer-events: auto;
}

#reset-button {
  background: #8FA88A;
}

.character-button.selected {
  background: #C8664A;
}

.character-button:hover,
#backpack-button:hover,
#goals-button:hover,
#diary-button:hover,
#map-button:hover,
#decorate-button:hover,
#pause-button:hover:not(:disabled),
#reset-button:hover {
  background: #C8664A;
}

/* While Modo decorar is on, its button stays lit and Pausa can not be used. */
#decorate-button.on {
  background: #C8664A;
}

#pause-button:disabled {
  opacity: 0.5;
  cursor: default;
}

.character-button:active,
#backpack-button:active,
#goals-button:active,
#diary-button:active,
#map-button:active,
#decorate-button:active,
#pause-button:active:not(:disabled),
#reset-button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #4A3428;
}

/* The goals window: one row per character, with its goal, a little bar and the goals already met. */
#goals {
  width: min(400px, calc(100vw - 32px));
}

#goals-list {
  display: grid;
  gap: 6px;
}

.goal-row {
  display: grid;
  gap: 3px;
  padding: 6px 10px;
  background: #FFFDF8;
  border: 2px solid #EAD9C4;
  border-radius: 12px;
}

.goal-name {
  font-weight: 700;
  color: #C8664A;
}

.goal-now {
  font-weight: 700;
}

.goal-track {
  height: 10px;
  background: #EAD9C4;
  border: 2px solid #4A3428;
  border-radius: 999px;
  overflow: hidden;
}

.goal-fill {
  height: 100%;
  background: #E2B44B;
  border-radius: 999px;
  transition: width 0.3s ease;
}

.goal-met {
  font-size: 0.85rem;
  color: #9A8676;
}

/* The big "¡Meta cumplida!" sign, at the top in the middle (and "🗺️ ¡Zona descubierta!" and "🧰 ¡Tesoro encontrado!" the same way). */
#goal-sign,
#zone-sign,
#treasure-sign {
  position: fixed;
  top: 18px;
  left: 50%;
  z-index: 6;
  max-width: calc(100vw - 32px);
  padding: 12px 22px;
  font-size: clamp(1rem, 3.2vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  color: #4A3428;
  background: #F5EBDD;
  border: 4px solid #E2B44B;
  border-radius: 999px;
  box-shadow: 0 5px 0 #B8862E;
  transform: translateX(-50%);
  pointer-events: none;
  animation: goal-sign 0.35s ease-out;
}

#goal-sign[hidden],
#zone-sign[hidden],
#treasure-sign[hidden],
.treasure-word[hidden] {
  display: none;
}

/* The treasure sign has two lines: what was found, and below, smaller, the secret word. */
#treasure-sign {
  border-radius: 28px;
}

.treasure-word {
  margin-top: 4px;
  font-size: 0.8em;
  color: #C8664A;
}

@keyframes goal-sign {
  from {
    opacity: 0;
    transform: translateX(-50%) scale(0.6);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) scale(1);
  }
}

/* The Mapa del valle: an old parchment drawn on a canvas, as wide as the window lets it be. */
#valley-map {
  width: min(360px, calc(100vw - 32px));
}

#map-canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 32 / 25;
}

/* "🧰 Tesoros: N/6", below the map. */
.map-treasures {
  margin-top: 4px;
  font-weight: 700;
  text-align: center;
}

/* The Diario de palabras: how many words, then "🎓 Del profe" and "🔍 Descubiertas", with a scroll when there are many. */
#diary {
  width: min(400px, calc(100vw - 32px));
  max-height: min(520px, calc(100vh - 32px));
}

.diary-count {
  margin-bottom: 6px;
  font-weight: 700;
}

#diary-list {
  display: grid;
  gap: 6px;
}

.diary-section {
  margin-top: 4px;
  font-weight: 700;
  color: #C8664A;
}

.diary-row {
  display: grid;
  gap: 2px;
  padding: 5px 10px;
  background: #FFFDF8;
  border: 2px solid #EAD9C4;
  border-radius: 12px;
}

.diary-example {
  font-size: 0.85rem;
  color: #6E5A4A;
}

/* "📖 ¡Palabra nueva!" floating up by the cursor. */
.word-pop {
  position: fixed;
  z-index: 7;
  transform: translate(-50%, -100%);
  padding: 2px 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: #4A3428;
  background: #F5EBDD;
  border: 2px solid #E2B44B;
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  animation: word-pop 1.6s ease-out forwards;
}

@keyframes word-pop {
  0% {
    opacity: 0;
    margin-top: 6px;
  }
  15% {
    opacity: 1;
    margin-top: 0;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    margin-top: -36px;
  }
}

/* The question of the word of the day: at the bottom in the middle, with its 3 answers. */
#lesson-quiz {
  position: fixed;
  bottom: 18px;
  left: 50%;
  z-index: 6;
  max-width: calc(100vw - 32px);
  padding: 12px 18px;
  text-align: center;
  color: #4A3428;
  background: #F5EBDD;
  border: 4px solid #E2B44B;
  border-radius: 20px;
  box-shadow: 0 5px 0 #B8862E;
  transform: translateX(-50%);
}

#lesson-quiz[hidden] {
  display: none;
}

#lesson-quiz p {
  margin: 0 0 10px;
  font-size: 1.2rem;
  font-weight: 700;
}

.lesson-answers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.lesson-answers button {
  padding: 6px 16px;
  font: inherit;
  font-weight: 700;
  color: #F5EBDD;
  background: #B07A4F;
  border: 3px solid #4A3428;
  border-radius: 999px;
  box-shadow: 0 3px 0 #4A3428;
  cursor: pointer;
}

.lesson-answers button:hover {
  background: #C8664A;
}

.lesson-answers button:active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #4A3428;
}

/* Modo decorar: the sign at the top with its buttons, and the question before putting everything back. */
#decorate-bar,
#decorate-ask {
  position: fixed;
  left: 50%;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  max-width: calc(100vw - 32px);
  padding: 10px 18px;
  color: #4A3428;
  background: #F5EBDD;
  border: 3px solid #4A3428;
  border-radius: 20px;
  box-shadow: 0 4px 0 #4A3428;
  transform: translateX(-50%);
}

#decorate-bar {
  top: 16px;
  right: 16px;
  left: auto;
  flex-direction: column;
  gap: 8px;
  transform: none;
}

#decorate-ask {
  top: 50%;
  flex-direction: column;
  transform: translate(-50%, -50%);
}

#decorate-ask p {
  margin: 0;
  font-weight: 700;
  text-align: center;
}

#decorate-bar[hidden],
#decorate-ask[hidden] {
  display: none;
}

.decorate-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.decorate-buttons button {
  padding: 6px 14px;
  font: inherit;
  font-weight: 700;
  color: #F5EBDD;
  background: #B07A4F;
  border: 3px solid #4A3428;
  border-radius: 999px;
  box-shadow: 0 3px 0 #4A3428;
  cursor: pointer;
}

.decorate-buttons button:hover:not(:disabled) {
  background: #C8664A;
}

.decorate-buttons button:active:not(:disabled) {
  transform: translateY(2px);
  box-shadow: 0 1px 0 #4A3428;
}

.decorate-buttons button:disabled {
  opacity: 0.5;
  cursor: default;
}

/* On narrower screens the sign goes to the bottom in the middle, in one row when it fits,
   away from the ☰ and 🔊 buttons and the panel. */
@media (max-width: 1100px) {
  #decorate-bar {
    top: auto;
    right: auto;
    bottom: 8px;
    left: 50%;
    flex-direction: row;
    width: max-content;
    padding: 6px 14px;
    transform: translateX(-50%);
  }
}

/* Wide screens: the open panel is a narrow column on the left, and the house and the city are drawn beside it
   (js/main.js; CONFIG.panelColumn has the same width). */
@media (min-width: 1000px) {
  #selection-panel {
    width: 340px;
  }
}

/* Small screens: narrower need bars so the panel fits. */
@media (max-width: 420px) {
  .need-track {
    width: 100px;
  }

  #friendship {
    font-size: 0.8rem;
  }
}

@media (max-width: 420px) {
  #goal-sign,
  #zone-sign,
  #treasure-sign {
    top: 70px;
    border-radius: 18px;
  }

  .goal-row {
    padding: 5px 8px;
    font-size: 0.9rem;
  }
}

@media (max-height: 560px) {
  #friendship {
    margin-top: 4px;
    font-size: 0.8rem;
    line-height: 1.2;
  }
}

/* ---------- Small screens (phones): js/ui.js adds the "small" class on touch screens whose shorter side is small ---------- */

/* Nothing gets selected when a finger is held. */
html.small body {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* The panel is a drawer that slides up from the bottom, at most 45 % of the height, and slides inside with a finger. */
html.small #selection-panel {
  top: auto;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: none;
  max-height: 45vh;
  max-height: 45dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  padding: 10px 16px 14px;
  border-width: 3px 0 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -3px 0 #4A3428;
  pointer-events: auto;
  transform: translateY(0);
  transition: transform 0.3s ease, visibility 0s linear 0s;
}

html.small #selection-panel.closed {
  opacity: 1;
  transform: translateY(105%);
  transition: transform 0.3s ease, visibility 0s linear 0.3s;
}

html.small .need-track {
  width: 120px;
}

/* With the phone lying down, the drawer has two columns: who is selected on the left, the buttons on the right. */
@media (orientation: landscape) {
  html.small #selection-panel:not([hidden]) {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    align-content: start;
    column-gap: 20px;
  }

  html.small #selection-panel > * {
    grid-column: 1;
  }

  html.small #selection-panel > .panel-buttons {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-content: flex-start;
    margin-top: 0;
  }
}

html.small #friendship {
  font-size: 0.85rem;
}

/* Every button at least 44 × 44, with room between them. */
html.small button {
  min-width: 44px;
  min-height: 44px;
}

html.small .panel-buttons,
html.small .decorate-buttons,
html.small .lesson-answers {
  gap: 10px;
}

html.small #social-menu,
html.small #gift-menu,
html.small #seed-menu,
html.small #cook-menu,
html.small #picnic-menu {
  gap: 8px;
}

html.small .backpack-row {
  gap: 8px;
}

html.small .backpack-row button {
  padding: 4px 12px;
  font-size: 0.9rem;
}

html.small #backpack-close,
html.small #goals-close,
html.small #diary-close,
html.small #map-close {
  width: 44px;
  height: 44px;
  flex: none;
}

/* The little windows and the menus fit on the screen, and slide inside with a finger when they are long. */
html.small #backpack,
html.small #goals,
html.small #diary,
html.small #valley-map {
  right: 8px;
  bottom: 8px;
  width: min(460px, calc(100vw - 16px));
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html.small #social-menu,
html.small #gift-menu,
html.small #seed-menu,
html.small #cook-menu,
html.small #picnic-menu {
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  max-height: calc(100dvh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

html.small #seed-menu button,
html.small #cook-menu button,
html.small #picnic-menu button {
  padding: 6px 14px;
}

/* The question of the word of the day and the Modo decorar sign go above the drawer; the sign in rows, inside the screen. */
html.small #lesson-quiz {
  bottom: calc(var(--drawer, 0px) + 8px);
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
  padding: 8px 12px;
}

html.small #lesson-quiz p {
  margin-bottom: 6px;
  font-size: 1.05rem;
}

html.small #decorate-bar {
  top: auto;
  right: auto;
  bottom: calc(var(--drawer, 0px) + 8px);
  left: 50%;
  flex-direction: row;
  width: max-content;
  max-width: calc(100vw - 16px);
  padding: 6px 10px;
  gap: 4px 10px;
  transform: translateX(-50%);
}

html.small #decorate-bar > b {
  font-size: 0.9rem;
  text-align: center;
}

html.small .decorate-buttons button {
  padding: 4px 12px;
}

html.small #decorate-ask {
  max-width: calc(100vw - 16px);
  max-height: calc(100vh - 16px);
  overflow-y: auto;
}

/* The "¡Meta cumplida!" sign goes below the round buttons, away from the drawer. */
html.small #goal-sign,
html.small #zone-sign,
html.small #treasure-sign {
  top: 68px;
  max-width: calc(100vw - 16px);
  padding: 8px 16px;
  border-radius: 18px;
}