@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Quicksand:wght@400;500;600;700&display=swap');

.domain-protection-message { min-height:100vh; display:grid; place-items:center; padding:24px; background:#e6f2cf; font-family:Quicksand,Arial,sans-serif; color:#4e3b2c; text-align:center; }
.domain-protection-message > div { max-width:520px; padding:30px; border:3px solid #5f844c; border-radius:24px; background:#fffaf0; box-shadow:0 18px 50px rgba(56,77,38,.22); }
.domain-protection-message strong { display:block; color:#345f3b; font:800 2rem 'Baloo 2',cursive; }
.domain-protection-message a { display:inline-block; margin-top:12px; padding:11px 19px; border-radius:999px; background:#d98662; color:#fff; text-decoration:none; font-weight:800; }

:root {
  --sun: #f0bc63;
  --sun-dark: #dc9a2e;
  --terracotta: #d68866;
  --terracotta-dark: #b96b48;
  --olive: #7c9c5e;
  --olive-dark: #5c7a42;
  --leaf: #9dc17e;
  --sky: #8ec2d1;
  --sky-light: #eef6f2;
  --cream: #fbf3e3;
  --brown: #7a5b42;
  --brown-dark: #533c2b;
  --ink: #4a3b2c;
  --white: #fffcf6;
  --shadow: 0 10px 26px rgba(122, 91, 66, 0.16);
  --radius: 20px;
  font-size: 16px;
}

/* Textura de papel/acuarela superpuesta a toda la página */
.paper-grain {
  position: fixed;
  inset: 0;
  z-index: 40;
  pointer-events: none;
  opacity: 0.05;
  mix-blend-mode: multiply;
  background-repeat: repeat;
}

/* Insignia tipo "mancha de acuarela" reutilizable: se aplica como fondo
   detrás de un icono/emoji para que el borde salga irregular, pintado a mano */
.watercolor-badge {
  position: relative;
  isolation: isolate;
}
.watercolor-badge::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: url(#watercolor-wobble);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: 'Quicksand', sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-light) 0%, var(--cream) 40%);
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, .heading {
  font-family: 'Baloo 2', cursive;
  margin: 0;
}

button {
  font-family: inherit;
  cursor: pointer;
}

.hidden { display: none !important; }

/* ---------------- Fondo decorativo ---------------- */
.sky-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.sky-decor .sun {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe08a, var(--sun) 70%);
  box-shadow: 0 0 60px 10px rgba(246, 185, 59, 0.35);
}
.sky-decor .hill {
  position: absolute;
  bottom: -40px;
  left: -10%;
  width: 130%;
  height: 140px;
  background: var(--leaf);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  opacity: 0.35;
}
.sky-decor .hill.hill2 {
  bottom: -70px;
  background: var(--olive);
  opacity: 0.25;
  height: 180px;
}

/* ---------------- Layout general ---------------- */
#app-wrapper {
  position: relative;
  z-index: 1;
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 16px 40px;
}

#cover-forest-bg-game { z-index: -1; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 6px 16px;
}

.topbar .title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.topbar .title .logo-emoji {
  width: 76px;
  height: 76px;
  display: block;
  flex-shrink: 0;
}
.topbar .title h1 {
  font-size: 1.35rem;
  color: var(--brown-dark);
  line-height: 1.1;
}
.topbar .title small {
  display: block;
  font-weight: 600;
  color: var(--olive-dark);
  font-size: 0.75rem;
}

.topbar .actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.user-menu-wrap,
.score-menu-wrap,
.sound-menu-wrap { position: relative; }
.user-menu-wrap #btn-user-menu {
  max-width: 290px;
  gap: 8px;
}
.menu-forest-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
}
.menu-forest-name {
  max-width: 190px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.menu-arrow {
  font-size: 1.25rem;
  line-height: 0.8;
  margin-left: 2px;
  flex-shrink: 0;
}
.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  background: var(--white);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 260px;
}
.user-menu-dropdown button,
.user-menu-dropdown a {
  background: transparent;
  border: none;
  text-align: left;
  padding: 10px 12px;
  border-radius: 10px;
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--brown-dark);
  cursor: pointer;
  text-decoration: none;
  display: block;
}
.user-menu-dropdown button:hover,
.user-menu-dropdown a:hover { background: var(--cream); }
.user-menu-dropdown button.danger { color: #b23b3b; }
.user-menu-dropdown button.danger:hover { background: #fbe3e3; }
.user-menu-dropdown button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  background: #f3eee7;
}

.score-pill {
  background: var(--white);
  border: 2px solid var(--sun);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  color: var(--sun-dark);
  box-shadow: var(--shadow);
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.score-menu-wrap .score-pill {
  cursor: pointer;
  transition: transform 0.12s ease, background 0.12s ease;
}
.score-menu-wrap .score-pill:hover,
.score-menu-wrap .score-pill:focus-visible {
  background: #fff9e8;
  transform: translateY(-1px);
  outline: none;
}
.score-menu-arrow {
  font-size: 0.72rem;
  margin-left: 2px;
  transition: transform 0.15s ease;
}
#btn-score-menu[aria-expanded="true"] .score-menu-arrow { transform: rotate(180deg); }
#score-menu-dropdown { min-width: 240px; }

#btn-sound {
  min-width: 62px;
  justify-content: center;
  gap: 7px;
  padding-left: 14px;
  padding-right: 12px;
}
.sound-menu-arrow {
  font-size: 0.68rem;
  transition: transform 0.15s ease;
}
#btn-sound[aria-expanded="true"] .sound-menu-arrow { transform: rotate(180deg); }
.sound-menu-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 35;
  min-width: 270px;
  padding: 9px;
  border: 2px solid #caa67d;
  border-radius: 14px;
  background: #fffaf2;
  box-shadow: var(--shadow);
}
.sound-menu-title {
  padding: 5px 9px 9px;
  color: var(--brown-dark);
  font-family: 'Baloo 2', cursive;
  font-size: 0.96rem;
  font-weight: 700;
}
.sound-menu-dropdown button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--brown-dark);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  text-align: left;
}
.sound-menu-dropdown button:hover,
.sound-menu-dropdown button:focus-visible {
  background: #f1e2cf;
  outline: none;
}
.sound-setting-option { display: flex; align-items: center; gap: 10px; }
.sound-music-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px;
  align-items: stretch;
  gap: 5px;
}
.sound-menu-dropdown .sound-music-row #btn-toggle-music { min-width: 0; }
.sound-menu-dropdown .sound-music-row #btn-next-track {
  width: 44px;
  justify-content: center;
  padding: 8px;
  background: #eee0c9;
  font-size: 1.1rem;
}
.sound-menu-dropdown .sound-music-row #btn-next-track:hover,
.sound-menu-dropdown .sound-music-row #btn-next-track:focus-visible { background: #ddc6a6; }
.sound-setting-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #dcebd1;
  font-size: 1.18rem;
  line-height: 1;
  transition: background 0.15s ease;
}
.sound-setting-icon::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 50%;
  height: 4px;
  border-radius: 999px;
  background: #d12424;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.92);
  opacity: 0;
  transform: translateY(-50%) rotate(-45deg);
  transition: opacity 0.15s ease;
}
.sound-menu-dropdown button[aria-checked="false"] .sound-setting-icon { background: #eee4de; }
.sound-menu-dropdown button[aria-checked="false"] .sound-setting-icon::after { opacity: 1; }

.btn {
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 700;
  font-size: 0.9rem;
  box-shadow: var(--shadow);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-primary { background: var(--terracotta); color: var(--white); }
.btn-primary:hover { background: var(--terracotta-dark); }
.btn-secondary { background: var(--olive); color: var(--white); }
.btn-secondary:hover { background: var(--olive-dark); }
.recover-forest-button {
  padding: 11px 22px;
  text-decoration: none;
}
.btn-outline {
  background: var(--white);
  color: var(--brown-dark);
  border: 2px solid var(--olive);
}
.btn-ghost {
  background: transparent;
  box-shadow: none;
  color: var(--brown-dark);
  text-decoration: underline;
  padding: 4px 6px;
  font-size: 0.8rem;
}
.btn-danger { color: #b23b3b; display: block; margin: 10px auto 0; }

/* ---------------- Pantalla de intro ---------------- */
#screen-intro, #screen-register, #screen-plots, #screen-goodbye {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: linear-gradient(145deg, #bfe574 0%, #8fc85d 48%, #6dab4e 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.cover-forest-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.cover-forest-bg svg {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
}
.cover-forest-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 252, 231, 0.08) 0 24%, transparent 58%),
    linear-gradient(180deg, rgba(31, 83, 43, 0.04), rgba(31, 83, 43, 0.12));
}

.cover-screen-content {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  margin: auto 0;
}
.cover-screen-content .intro-card { margin: 0 auto; }

.intro-card {
  background:
    radial-gradient(circle at 12% 15%, rgba(124, 156, 94, 0.12), transparent 42%),
    radial-gradient(circle at 90% 85%, rgba(214, 136, 102, 0.12), transparent 46%),
    radial-gradient(circle at 85% 10%, rgba(240, 188, 99, 0.14), transparent 40%),
    var(--white);
  border: 3px solid #f0c75e;
  border-radius: 28px;
  max-width: 560px;
  width: 100%;
  padding: 34px 30px;
  text-align: center;
  box-shadow: 0 22px 58px rgba(42, 78, 42, 0.34), 0 0 0 7px rgba(255, 250, 221, 0.3);
  position: relative;
  z-index: 1;
}
.intro-card::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -34px;
  transform: translateX(-50%);
  width: 154px;
  height: 58px;
  padding: 0 12px;
  border: 2px solid #e7b842;
  border-radius: 999px;
  background-color: #fff8d7;
  background-image: url("img/logo-game.png?v=2.2.0");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 74px auto;
  box-shadow: 0 6px 15px rgba(58, 89, 45, 0.18);
}
.intro-card .intro-emoji-row { min-height: 104px; display:grid; place-items:center; margin-bottom: 6px; }
.intro-card .intro-symbol-logo { width:220px; height:104px; display:block; object-fit:contain; filter:drop-shadow(0 4px 5px rgba(62,48,27,.2)); }
.intro-card .intro-game-logo { width: 210px; height: 138px; object-fit:contain; display: block; margin: 0 auto 6px; filter:drop-shadow(0 5px 7px rgba(62,48,27,.22)); }
.intro-card h1 {
  font-size: 1.9rem;
  color: var(--brown-dark);
  margin-bottom: 6px;
}
.intro-card p {
  color: #5b4a3a;
  line-height: 1.5;
  margin: 14px 0;
  font-size: 0.98rem;
}
.intro-list {
  text-align: left;
  background: var(--cream);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin: 18px 0;
  font-size: 0.9rem;
}
.intro-list li { margin: 6px 0; }
.intro-card .btn-primary {
  font-size: 1.05rem;
  padding: 13px 30px;
  margin-top: 6px;
}
.intro-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.intro-secondary-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.intro-secondary-actions .btn {
  text-decoration: none;
  cursor: pointer;
}
.register-main-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin-top:16px; }
.register-main-actions .btn { width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; }
.register-start-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:14px; }
.register-start-actions .btn { width:100%; min-height:44px; display:flex; align-items:center; justify-content:center; margin:0; }
.register-start-actions .btn:last-child { grid-column:1/-1; width:min(100%,310px); justify-self:center; }

/* ---------------- Registro de participante ---------------- */
#register-form { text-align: left; margin-top: 10px; }
.form-field {
  display: block;
  margin-bottom: 12px;
}
.form-field span {
  display: block;
  font-weight: 700;
  font-size: 0.82rem;
  color: var(--brown-dark);
  margin-bottom: 4px;
}
.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: 2px solid #eee0c8;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.95rem;
  color: var(--brown-dark);
  background: var(--white);
}
.form-field textarea { resize: vertical; min-height: 140px; line-height: 1.45; }
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { outline: none; border-color: var(--olive); }
.age-hint {
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--olive-dark);
  font-weight: 600;
}

.forest-name-status {
  display: block;
  min-height: 1.15em;
  margin-top: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  color: #746250;
}
.forest-name-status.checking { color: #7b633b; }
.forest-name-status.available { color: #376d2d; }
.forest-name-status.taken,
.forest-name-status.error { color: var(--terracotta-dark); }
.form-field input.name-available {
  border-color: #6d9d53;
  box-shadow: 0 0 0 3px rgba(109, 157, 83, .12);
}
.form-field input.name-taken {
  border-color: #c46148;
  box-shadow: 0 0 0 3px rgba(196, 97, 72, .11);
}
.forest-name-input.name-available {
  border-color: #6d9d53;
  box-shadow: 0 0 0 3px rgba(109, 157, 83, .12);
}
.forest-name-input.name-taken {
  border-color: #c46148;
  box-shadow: 0 0 0 3px rgba(196, 97, 72, .11);
}

.settings-card { max-width: 540px; }
.settings-card h2 { margin: 0 42px 8px 0; }
.settings-intro {
  margin: 0 34px 16px 0;
  color: #5b4a3a;
  font-size: .88rem;
  line-height: 1.5;
}
.settings-note {
  margin: 3px 0 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: var(--cream);
  color: #665441;
  font-size: .76rem;
  line-height: 1.45;
}
.settings-newsletter-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 4px 0 14px;
  padding: 12px 13px;
  border: 1px solid #d9c9ad;
  border-radius: 12px;
  background: #fffaf0;
  color: #574634;
  cursor: pointer;
}
.settings-newsletter-choice input {
  width: 19px;
  height: 19px;
  margin: 2px 0 0;
  accent-color: #668f4d;
  flex: 0 0 auto;
}
.settings-newsletter-choice span,
.settings-newsletter-choice small { display: block; }
.settings-newsletter-choice strong { font-size: .84rem; }
.settings-newsletter-choice small {
  margin-top: 4px;
  color: #76634f;
  font-size: .74rem;
  line-height: 1.4;
}
.settings-save-button { width: 100%; justify-content: center; }

.recover-intro { margin:0 0 14px; color:#5b4a3a; font-size:.86rem; line-height:1.5; }
.recover-code-field input {
  height:62px;
  text-align:center;
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:.55em;
  text-indent:.55em;
  color:#355c3d;
}
.recover-code-hint { display:block; margin:-4px 0 8px; color:#786753; font-size:.72rem; text-align:center; }
.recover-forgot-toggle { display:block; margin:13px auto 0; padding:5px; border:0; background:transparent; color:#5c7e45; font-weight:800; text-decoration:underline; cursor:pointer; }
.recover-code-request { margin-top:12px; padding:13px; border:1px solid #d9c8a8; border-radius:13px; background:#fffaf0; }
.recover-code-request p { margin:0 0 10px; color:#675542; font-size:.76rem; line-height:1.42; }
.recover-code-request .btn { width:100%; justify-content:center; }
.recover-code-request .report-status { margin-top:9px; }

.cultural-inspiration-note {
  margin: 10px 0 22px;
  padding: 16px 18px;
  border: 1px solid #b8d2a4;
  border-left: 5px solid #4f8b4d;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(224, 246, 218, .9), rgba(250, 245, 226, .94));
  color: #4c4335;
  line-height: 1.6;
}
.cultural-inspiration-note p { margin: 0 0 10px; }
.cultural-inspiration-note p:last-child { margin-bottom: 0; }
.cultural-inspiration-note .inspiration-disclaimer {
  font-size: .79rem;
  color: #6b5e4d;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.82rem;
  color: #5b4a3a;
  margin: 10px 0;
  cursor: pointer;
}
.form-check input { margin-top: 3px; flex-shrink: 0; }
.form-check a { color: var(--olive-dark); font-weight: 700; }
.form-check.small { font-size: 0.76rem; margin: 8px 0 0; }

.newsletter-note {
  background: var(--cream);
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 0.78rem;
  color: #5b4a3a;
  margin: 6px 0 4px;
  line-height: 1.4;
}
.access-code-registration-note {
  margin:10px 0 12px;
  padding:10px 12px;
  border:1px solid #b8c99e;
  border-radius:11px;
  background:#f2f8e7;
  color:#4c623c;
  font-size:.74rem;
  line-height:1.42;
}

.register-error {
  background: #fbe3da;
  color: var(--terracotta-dark);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  margin: 10px 0;
}

.error-report-intro {
  color: #5b4a3a;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 8px 34px 16px 0;
}
.error-report-privacy {
  padding: 10px 12px;
  border-radius: 11px;
  background: var(--cream);
  color: #6d5947;
  font-size: 0.76rem;
  line-height: 1.45;
  margin: 4px 0 12px;
}
.report-status {
  padding: 10px 12px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 0.84rem;
  font-weight: 700;
}
.report-status.error { background: #fbe3da; color: var(--terracotta-dark); }
.report-status.success { background: #e4f4d8; color: var(--olive-dark); }
#btn-submit-error-report { width: 100%; justify-content: center; }

/* ---------------- Selección de parcela ---------------- */
#screen-plots {
  align-items: stretch;
  padding: 10px 14px;
  overflow: hidden;
}
body.plots-screen-open {
  width: 100%;
  height: 100vh;
  overflow: hidden !important;
}
.plots-screen-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(1180px, 100%);
  height: 100%;
  min-height: 0;
  margin: 0 auto;
}
.plots-card {
  background: var(--white);
  border-radius: 22px;
  max-width: none;
  max-height: none;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 20px 12px;
  text-align: center;
  box-shadow: 0 20px 50px rgba(74, 49, 34, 0.3);
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.plots-close-button {
  position: relative;
  align-self: flex-start;
  margin: 0 0 2px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 7px 14px;
  border: 2px solid #d5b98f;
  border-radius: 999px;
  background: #f6ead6;
  color: var(--brown-dark);
  font-family: 'Quicksand', sans-serif;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(74, 49, 34, 0.18);
}
.plots-close-button:hover { background: #e5d0b0; }
.plots-card h1 { font-size: 1.45rem; color: var(--brown-dark); margin: 0 0 2px; }
.plots-card p { color: #5b4a3a; font-size: 0.82rem; margin: 2px 0; }
.plots-hint { flex: 0 0 auto; font-size: 0.74rem !important; color: #8a7660 !important; margin: 5px 0 0 !important; }

.global-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 8px 0;
}
.global-stats .gs-tile {
  background: var(--cream);
  border-radius: 12px;
  padding: 8px 6px;
}
.global-stats .gs-value { font-family: 'Baloo 2', cursive; font-size: 1.1rem; color: var(--terracotta-dark); }
.global-stats .gs-label { font-size: 0.63rem; color: #8a7660; font-weight: 700; }

.plots-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 0 0 10px;
  color: #6d5947;
  font-size: 0.78rem;
  font-weight: 700;
}
.plots-legend span { display: inline-flex; align-items: center; gap: 7px; }
.plots-legend-dot {
  display: inline-block;
  width: 17px;
  height: 17px;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(74, 49, 34, 0.28);
}
.plots-legend-dot.free { background: var(--olive); }
.plots-legend-dot.taken { background: #d4a62a; }

.plots-map-wrap {
  position: relative;
  flex: 1 1 auto;
  min-height: 210px;
  margin: 6px 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 18% 22%, rgba(103, 126, 64, 0.13), transparent 22%),
    linear-gradient(90deg, #eadfc9 0 50%, #b9dce2 50% 100%);
  border: 2px solid #c6a679;
}
.plots-map-bg {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  min-width: 0;
  height: 100%;
  touch-action: none;
  cursor: grab;
  user-select: none;
}
.plots-map-bg.dragging { cursor: grabbing; }
.plots-map-image {
  filter: url(#plots-map-earth);
}
.plots-map-land-background { fill: #eadfc9; }
.plots-map-sea-background { fill: #b9dce2; }
.plots-map-waves {
  fill: none;
  stroke: rgba(255, 255, 255, 0.7);
  stroke-width: 8;
  stroke-linecap: round;
  opacity: 0.85;
  pointer-events: none;
}
.plots-map-plants {
  fill: #71824b;
  stroke: #526338;
  stroke-width: 7;
  stroke-linecap: round;
  opacity: 0.92;
  pointer-events: none;
}
.plots-map-plants ellipse { stroke-width: 3; }
.plots-zoom-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 5;
  display: grid;
  grid-template-columns: repeat(2, 40px);
  align-items: center;
  overflow: hidden;
  border: 2px solid #b99162;
  border-radius: 12px;
  background: rgba(255, 250, 240, 0.95);
  box-shadow: 0 5px 14px rgba(74, 49, 34, 0.24);
}
.plots-zoom-controls button {
  width: 40px;
  height: 40px;
  border: 0;
  background: #f3e4cc;
  color: var(--brown-dark);
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.plots-zoom-controls button:hover:not(:disabled),
.plots-zoom-controls button:focus-visible { background: #dfc49d; outline: none; }
.plots-zoom-controls button:disabled { opacity: 0.4; cursor: default; }
.plot-marker { cursor: pointer; }
.plot-marker-hit {
  fill: transparent;
  stroke: none;
  pointer-events: all;
}
.plot-marker-dot {
  fill: var(--olive);
  stroke: #fff;
  stroke-width: 4;
  transition: r 0.12s ease;
  pointer-events: none;
}
.plot-marker text {
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  fill: var(--white);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
}
.plot-marker.taken .plot-marker-dot { fill: #d4a62a; }
.plot-marker.taken text { fill: #4e3812; }
.plot-marker.pending { opacity: 0.5; pointer-events: none; }
.plot-marker:hover .plot-marker-dot { r: 34; }
.plot-marker.dense .plot-marker-dot { stroke-width: 2; }
.plot-marker.dense:hover .plot-marker-dot { r: 17; }

.plots-site-footer {
  flex: 0 0 auto;
  width: 100%;
  margin: 0 !important;
  padding: 6px 12px 7px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.plots-site-footer .footer-credits { gap: 18px; margin-bottom: 2px; }
.plots-site-footer .footer-logo { height: 27px; }
.plots-site-footer p { margin: 1px 0; font-size: 0.67rem; line-height: 1.35; }

.view-plot-photo {
  display: block;
  width: 100%;
  max-height: 430px;
  margin: 12px 0;
  object-fit: contain;
  border: 3px solid var(--sun);
  border-radius: 14px;
  background: #edf2e6;
}
.view-plot-empty-photo {
  margin: 12px 0;
  padding: 28px 18px;
  border-radius: 14px;
  background: #edf2e6;
  color: var(--olive-dark);
  text-align: center;
  font-weight: 700;
}
.view-plot-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
}
.view-plot-stat {
  padding: 10px 8px;
  border-radius: 12px;
  background: var(--cream);
  color: #6d5947;
  font-size: 0.72rem;
  text-align: center;
}
.view-plot-stat strong {
  display: block;
  color: var(--olive-dark);
  font-family: 'Baloo 2', cursive;
  font-size: 1rem;
}
.view-plot-last-connection { margin: 6px 0 0; color: #8a7660; font-size: 0.78rem; text-align: center; }

@media (max-width: 600px) {
  .global-stats { grid-template-columns: repeat(2, 1fr); }
  #screen-plots { padding: 7px; }
  .plots-screen-content { gap: 6px; }
  .plots-card { padding: 10px 8px 7px; border-radius: 16px; }
  .plots-close-button { min-height: 30px; padding: 5px 10px; }
  .plots-card h1 { font-size: 1.15rem; }
  .plots-card > p:not(.plots-hint) { font-size: 0.7rem; }
  .global-stats { gap: 4px; margin: 4px 0; }
  .global-stats .gs-tile { padding: 4px; }
  .plots-legend { margin-bottom: 3px; font-size: 0.68rem; gap: 10px; }
  .plots-map-wrap { min-height: 170px; margin: 3px 0; }
  .plots-zoom-controls { right: 7px; bottom: 7px; grid-template-columns: repeat(2, 36px); }
  .plots-zoom-controls button { width: 36px; height: 36px; }
  .plots-site-footer { padding: 4px 7px; }
  .plots-site-footer .footer-logo { height: 22px; }
  .plots-site-footer p { font-size: 0.58rem; }
  .view-plot-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-height: 700px) {
  .plots-card > #plots-description,
  .plots-card > .plots-hint { display: none; }
  .global-stats { margin: 3px 0; }
  .global-stats .gs-tile { padding: 3px 5px; }
  .global-stats .gs-value { font-size: 0.92rem; }
  .plots-card h1 { font-size: 1.15rem; }
}

/* ---------------- Línea temporal anual de 365 días ---------------- */
.season-year-panel {
  margin: 4px 0 12px;
  padding: 10px 14px 9px;
  overflow: hidden;
  border: 2px solid #9a6c45;
  background:
    linear-gradient(rgba(255, 250, 229, 0.94), rgba(232, 211, 169, 0.96)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(104, 72, 42, 0.08) 19px 20px);
  box-shadow: 0 6px 15px rgba(70, 44, 25, 0.18), inset 0 0 0 3px rgba(255, 247, 215, 0.52);
}
.season-year-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}
.season-year-panel .season-year-head h2 {
  margin: 0;
  color: #513721;
  font-size: 0.92rem;
  white-space: nowrap;
}
.season-year-head strong {
  color: #5a422d;
  font-size: 0.72rem;
  text-align: right;
}
/* Bloque derecho de la senda: resumen del día + icono de ayuda que abre la
   ventana de las estaciones (antes era una pestaña propia). */
.season-year-head-right {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.season-help-button {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #8a5b39;
  background: linear-gradient(180deg, #f3ddb4, #dcbb8a);
  color: #513721;
  font-family: 'Baloo 2', cursive;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(83, 55, 33, 0.28);
  transition: transform 0.12s ease, background 0.12s ease;
}
.season-help-button:hover {
  background: linear-gradient(180deg, #ffeecb, #e8caa0);
  transform: translateY(-1px) scale(1.06);
}
.season-help-button:focus-visible {
  outline: 3px solid rgba(83, 113, 61, 0.48);
  outline-offset: 2px;
}

/* Ventana de las estaciones: mismo scroll en tonos marrones que el resto */
.modal-card.seasons-card {
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
.seasons-card::-webkit-scrollbar { width: 11px; height: 11px; }
.seasons-card::-webkit-scrollbar-track { background: #eadbc5; border-radius: 999px; }
.seasons-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a97955, #71492f);
  border: 2px solid #eadbc5;
  border-radius: 999px;
}
.seasons-card::-webkit-scrollbar-thumb:hover { background: #5f3d29; }
.season-timeline-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 0 7px;
  scrollbar-width: thin;
  scrollbar-color: #8a5b39 #dac091;
}
.season-timeline-scroll:focus-visible {
  outline: 3px solid rgba(83, 113, 61, 0.48);
  outline-offset: 2px;
}
.season-timeline-scroll::-webkit-scrollbar { height: 8px; }
.season-timeline-scroll::-webkit-scrollbar-track { border-radius: 999px; background: #dac091; }
.season-timeline-scroll::-webkit-scrollbar-thumb {
  border: 2px solid #dac091;
  border-radius: 999px;
  background: linear-gradient(90deg, #b17d52, #66422b);
}
.season-timeline-track {
  position: relative;
  min-width: 900px;
  padding-top: 24px;
}
.season-timeline-bands,
.season-timeline-days,
.season-timeline-months {
  display: grid;
  grid-template-columns: repeat(365, minmax(0, 1fr));
}
.season-timeline-bands {
  height: 22px;
  overflow: hidden;
  border: 1px solid rgba(72, 48, 29, 0.46);
  border-radius: 8px 8px 0 0;
}
.season-timeline-band {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  overflow: hidden;
  border-right: 1px solid rgba(255, 255, 255, 0.46);
  color: #33251c;
  font-size: 0.54rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.season-timeline-band.season-invierno { background: #bcd8e2; }
.season-timeline-band.season-primavera { background: #a9cf83; }
.season-timeline-band.season-verano { background: #efc85e; }
.season-timeline-band.season-otono { background: #d78f54; }
.season-timeline-days {
  height: 26px;
  border-inline: 1px solid rgba(72, 48, 29, 0.46);
  background: #f8edd2;
}
.season-timeline-day {
  min-width: 0;
  box-shadow: inset -1px 0 rgba(67, 47, 31, 0.28);
}
.season-timeline-day.season-invierno { background: #d8e9ef; }
.season-timeline-day.season-primavera { background: #cde5ad; }
.season-timeline-day.season-verano { background: #f6dc83; }
.season-timeline-day.season-otono { background: #edb47e; }
.season-timeline-day.five-day-mark { box-shadow: inset -1px 0 rgba(48, 31, 20, 0.62); }
.season-timeline-day.month-start { border-left: 2px solid #4f3523; }
.season-timeline-day.current-day {
  position: relative;
  z-index: 2;
  background: #fff;
  box-shadow: 0 0 0 2px #c43f2f, 0 0 8px rgba(196, 63, 47, 0.66);
}
.season-timeline-months {
  min-height: 20px;
  border: 1px solid rgba(72, 48, 29, 0.46);
  border-radius: 0 0 8px 8px;
  background: rgba(255, 250, 229, 0.72);
}
.season-timeline-month {
  display: grid;
  place-items: center;
  min-width: 0;
  border-right: 1px solid rgba(83, 56, 34, 0.24);
  color: #705039;
  font-size: 0.5rem;
  font-weight: 850;
}
.season-timeline-month.current-month { color: #fff; background: #665038; }
.season-timeline-today {
  position: absolute;
  top: 21px;
  bottom: 20px;
  z-index: 5;
  width: 2px;
  transform: translateX(-1px);
  background: #c43f2f;
  box-shadow: 0 0 5px rgba(196, 63, 47, 0.64);
  pointer-events: none;
}
.season-timeline-today::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -1px);
  border: 5px solid transparent;
  border-top-color: #c43f2f;
}
.season-timeline-today span {
  position: absolute;
  top: -21px;
  left: 50%;
  padding: 2px 5px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #c43f2f;
  color: #fff;
  font-size: 0.48rem;
  font-weight: 900;
  white-space: nowrap;
}
.season-year-note {
  margin: 2px 0 0;
  color: #6b513a;
  font-size: 0.61rem;
  text-align: center;
}

/* ---------------- Contenido principal ---------------- */
.game-columns {
  display: block;
  width: 100%;
}

.panel {
  background:
    radial-gradient(circle at 12% 12%, rgba(124, 156, 94, 0.09), transparent 40%),
    radial-gradient(circle at 92% 88%, rgba(214, 136, 102, 0.08), transparent 42%),
    var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px;
}

.panel h2 {
  font-size: 1.05rem;
  color: var(--brown-dark);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.nursery-list {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 2px 4px 12px 0;
  scroll-snap-type: x proximity;
}
#nursery-list,
#special-list {
  min-height: 92px;
  max-height: none;
}
#nursery-list .species-card,
#special-list .species-card {
  flex: 0 0 250px;
  width: 250px;
  scroll-snap-align: start;
}
#special-list .tool-card-wrap {
  position: relative;
  flex: 0 0 250px;
  width: 250px;
  scroll-snap-align: start;
}
#special-list .tool-card-wrap .species-card {
  width: 100%;
  height: 100%;
  flex: none;
}
.tool-card-has-help { padding-right: 42px; }
.tool-help-corner {
  position: absolute;
  top: 7px;
  right: 7px;
  z-index: 3;
  width: 27px;
  height: 27px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 2px solid #8a5a3b;
  border-radius: 50%;
  background: #fff8e9;
  color: #71442d;
  box-shadow: 0 2px 5px rgba(78, 48, 29, 0.24);
  font-family: 'Baloo 2', cursive;
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1;
}
.tool-help-corner:hover,
.tool-help-corner:focus-visible {
  color: #fff;
  background: #8a5a3b;
  outline: 3px solid rgba(184, 126, 80, 0.28);
  transform: scale(1.08);
}

/* Barras de desplazamiento en la paleta marrón del juego. */
#nursery-list,
#special-list {
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
#nursery-list::-webkit-scrollbar,
#special-list::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
#nursery-list::-webkit-scrollbar-track,
#special-list::-webkit-scrollbar-track {
  background: #eadbc5;
  border-radius: 999px;
}
#nursery-list::-webkit-scrollbar-thumb,
#special-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a97955, #71492f);
  border: 2px solid #eadbc5;
  border-radius: 999px;
}
#nursery-list::-webkit-scrollbar-thumb:hover,
#special-list::-webkit-scrollbar-thumb:hover {
  background: #5f3d29;
}

.species-card {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 2px solid #eee0c8;
  border-radius: 14px;
  padding: 8px 10px;
  background: var(--cream);
  text-align: left;
  width: 100%;
  transition: all 0.12s ease;
  position: relative;
}
.species-card:hover:not(.planted) { border-color: var(--olive); transform: translateX(2px); }
.species-card .sp-emoji {
  font-size: 1.6rem;
  width: 38px;
  height: 38px;
  line-height: 38px;
  text-align: center;
  position: relative;
  isolation: isolate;
  flex-shrink: 0;
}
.species-card .species-custom-icon {
  display: block;
  width: 36px;
  height: 36px;
  margin: 1px auto;
  object-fit: contain;
}
.species-card .sp-emoji::before {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  background: radial-gradient(circle at 35% 30%, #fceec9, #f0d9a4 75%);
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: url(#watercolor-wobble);
}
.species-card.planted .sp-emoji::before { background: radial-gradient(circle at 35% 30%, #e4f0d4, #cfe3ae 75%); }
.species-card .sp-info { flex: 1; }
.species-card .sp-name { font-weight: 700; color: var(--brown-dark); font-size: 0.92rem; }
.species-card .sp-sci { font-style: italic; font-size: 0.72rem; color: #8a7660; }
.species-card .sp-tag {
  display: inline-block;
  margin-top: 3px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: #e4efd8;
  color: var(--olive-dark);
}
.species-card.off-season .sp-tag { background: #f4e4d4; color: var(--terracotta-dark); }
.species-card.selected {
  border-color: var(--terracotta);
  background: #fff0e6;
  box-shadow: 0 0 0 3px rgba(217, 114, 76, 0.25);
}
.species-card.planted {
  opacity: 1;
  cursor: pointer;
}
.species-card .sp-check {
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: 0.95rem;
}
.species-card .sp-count {
  position: absolute;
  top: 6px;
  right: auto;
  left: 8px;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--olive);
  color: var(--white);
}

.garden-wrap {
  position: relative;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
  border: 3px solid #9b6b2f;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(38, 24, 15, .28), inset 0 0 0 2px #d6aa55;
}
.garden-wrap > .garden-hint {
  position: absolute;
  top: auto;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 30;
  margin: 0;
}
.garden-hint {
  font-size: 0.82rem;
  color: var(--olive-dark);
  background: #eef6e4;
  border-radius: 10px;
  padding: 8px 12px;
  margin-bottom: 12px;
  min-height: 2.4em;
}
.garden-hint.forest-finalized-hint {
  color: #6b4b28;
  background: #f4eadb;
  border: 1px solid #d4b88d;
  font-weight: 700;
}
body.forest-finalized .species-card:disabled {
  opacity: 0.56;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

#garden3d-wrap { position: relative; }

.game-clock {
  position: absolute;
  top: 5px;
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  z-index: 18;
  box-sizing: border-box;
  width: auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: #fffdf3;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-family: 'Baloo 2', cursive;
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.035em;
  text-shadow: 0 1px 3px rgba(20, 30, 18, 0.88), 0 0 5px rgba(20, 30, 18, 0.46);
  pointer-events: none;
}
.game-clock span { font-size: 0.58rem; line-height: 1; }
.game-clock strong { font-variant-numeric: tabular-nums; }

.life-hud {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 18;
  width: max-content;
  min-width: 125px;
  max-width: min(280px, calc(100% - 16px));
  padding: 5px 6px 6px;
  color: #fff;
  background: rgba(69, 47, 31, 0.88);
  border: 1px solid rgba(255, 244, 216, 0.92);
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(45, 31, 20, 0.3);
  pointer-events: auto;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.life-hud-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5px;
  margin-bottom: 3px;
  font-family: 'Baloo 2', cursive;
  font-size: 0.68rem;
  font-weight: 800;
  line-height: 1.1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);
}
.life-hud-head span {
  min-width: 0;
  overflow: visible;
  white-space: nowrap;
}
.life-hud-head strong { font-size: 0.63rem; }
.life-hud-values { display:flex; align-items:center; gap:5px; }
#diamond-counter { display:inline-flex; align-items:center; gap:2px; min-height:21px; padding:2px 5px; border:1px solid rgba(137,199,234,.72); border-radius:999px; background:rgba(25,55,71,.72); color:#dff7ff; font:800 .62rem/1 'Baloo 2',sans-serif; cursor:pointer; box-shadow:inset 0 0 8px rgba(100,218,255,.18); }
#diamond-counter:hover { background:rgba(38,84,105,.9); transform:translateY(-1px); }
.forest-expansion-card { max-width:720px; }
.forest-expansion-choices { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:20px 0; }
.forest-expansion-choices button { min-height:145px; padding:16px 10px; border:2px solid #caa568; border-radius:18px; background:linear-gradient(160deg,#fff9e8,#e7d2a8); color:#593c29; font:800 1rem/1.2 'Baloo 2',sans-serif; cursor:pointer; box-shadow:0 10px 22px rgba(77,48,28,.14); }
.forest-expansion-choices button span { display:block; margin-bottom:8px; font-size:2.5rem; }
.forest-expansion-choices button:hover { border-color:#6f934e; transform:translateY(-3px); box-shadow:0 15px 28px rgba(77,48,28,.22); }
@media (max-width:640px) { .forest-expansion-choices { grid-template-columns:1fr; } .forest-expansion-choices button { min-height:90px; } }
.life-track-wrap { position: relative; }
.life-track {
  height: 7px;
  overflow: hidden;
  background: #493d31;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 999px;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.32);
}
.life-track:focus-visible {
  outline: 2px solid #fff4d8;
  outline-offset: 2px;
}
.life-hover-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  z-index: 2;
  padding: 1px 5px;
  color: #fffdf3;
  background: #49351f;
  border: 1px solid rgba(255, 244, 216, 0.88);
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(25, 16, 10, 0.28);
  font-family: 'Baloo 2', cursive;
  font-size: 0.55rem;
  font-weight: 800;
  line-height: 1.1;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  white-space: nowrap;
}
.life-track-wrap:hover .life-hover-label,
.life-track-wrap:focus-within .life-hover-label {
  opacity: 1;
  transform: translate(-50%, 0);
}
.life-fill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(180deg, #79df55 0%, #31a73e 56%, #218236 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.42);
  transition: width 0.42s ease;
}
.life-hud.energy-gained {
  transform: scale(1.055);
  box-shadow: 0 0 0 5px rgba(104, 207, 74, 0.24), 0 7px 18px rgba(45, 31, 20, 0.3);
}
.life-hud.energy-spent { animation: life-spent-pulse 0.34s ease; }
@keyframes life-spent-pulse {
  50% { transform: translateX(-4px); box-shadow: 0 0 0 4px rgba(210, 93, 61, 0.22), 0 7px 18px rgba(45, 31, 20, 0.3); }
}

.speech-bubble {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--white);
  border-radius: 18px;
  padding: 18px 38px 14px 18px;
  max-width: 260px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(74, 49, 34, 0.25);
  z-index: 20;
  animation: pop-in 0.2s ease;
}
.speech-bubble::after {
  content: "";
  position: absolute;
  bottom: -12px;
  left: 50%;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top-color: var(--white);
  border-bottom: 0;
}
.speech-bubble p {
  margin: 0 0 10px;
  font-weight: 700;
  color: var(--brown-dark);
  font-size: 0.92rem;
  font-family: 'Baloo 2', cursive;
}
.speech-bubble .btn { padding: 7px 18px; font-size: 0.85rem; }
.visitor-speech {
  z-index: 22;
  border: 3px solid #8c6a43;
  padding-bottom: 16px;
}
.visitor-speech p { margin-bottom: 0; }
.visitor-speech.danger {
  background: #fff0ed;
  border-color: #c8463d;
}
.visitor-speech.danger::after { border-top-color: #fff0ed; }
.visitor-speech.danger p { color: #9c2d28; }
.visitor-speech.success {
  background: #f0f8e9;
  border-color: #5f963d;
}
.participant-praise-speech {
  z-index: 24;
  padding: 10px 15px;
  max-width: 230px;
  border: 2px solid #6e984d;
  background: #f5fbe9;
  pointer-events: none;
}
.participant-praise-speech::after { border-top-color: #f5fbe9; }
.participant-praise-speech p {
  margin: 0;
  color: #416330;
  font-size: 1rem;
}
.visitor-speech.success::after { border-top-color: #f0f8e9; }
.visitor-speech.success p { color: #37662e; }
.speech-close-x {
  position: absolute;
  top: 5px;
  right: 7px;
  width: 27px;
  height: 27px;
  border: none;
  border-radius: 50%;
  background: #eee2d2;
  color: var(--brown-dark);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 25px;
  cursor: pointer;
  z-index: 2;
}
.speech-close-x:hover { background: #dfc9ae; }

.garden-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--brown-dark);
  color: #fff8ec;
  padding: 6px 13px;
  border-radius: 10px;
  font-family: 'Baloo 2', cursive;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  transform: translate(-50%, -135%);
  z-index: 16;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}
.garden-tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--brown-dark);
}
.garden-tooltip.wide {
  white-space: normal;
  text-align: left;
  max-width: 240px;
  line-height: 1.4;
  font-weight: 500;
}
.garden-tooltip.wide b { font-weight: 700; }

.garden-object-info {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:520;
  width:min(360px,calc(100vw - 28px));
  max-height:min(440px,62vh);
  overflow:auto;
  padding:20px 20px 18px;
  border:2px solid #b98b4b;
  border-radius:20px;
  background:linear-gradient(155deg,rgba(255,253,244,.98),rgba(244,235,214,.98));
  color:#543d2c;
  box-shadow:0 18px 45px rgba(49,35,24,.3);
}
.garden-object-info-close { position:absolute; top:8px; right:9px; width:30px; height:30px; display:grid; place-items:center; border:0; border-radius:50%; background:#ead9bd; color:#5b402d; font-size:1.25rem; line-height:1; }
.garden-object-info-emoji { display:block; margin:0 0 5px; font-size:2rem; }
.garden-object-info h3 { margin:0 34px 2px 0; color:#41613c; font-size:1.25rem; }
.garden-object-info p { margin:8px 0 0; font-size:.82rem; line-height:1.48; }
.garden-object-info-scientific { margin-top:1px!important; color:#80705e; font-style:italic; }
.garden-object-info-fact { padding-top:9px; border-top:1px dashed #c9ae85; }

#garden3d-wrap {
  position: relative;
  width: 100%;
  height: 480px;
  border: 0;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, #d9ecdf 0%, #e8dcc0 55%, #c8a877 100%);
  box-shadow: none;
}

.garden-season {
  position: absolute;
  top: 14px;
  left: 50%;
  z-index: 24;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 19px;
  padding: 2px 8px;
  transform: translateX(-50%);
  border: 1px solid rgba(77, 46, 23, 0.82);
  border-radius: 999px;
  background: rgba(255, 246, 214, 0.9);
  color: #4d321e;
  box-shadow: 0 2px 5px rgba(42, 25, 13, 0.3);
  font-size: 0.62rem;
  line-height: 1;
  pointer-events: none;
}
.garden-season span { font-size: 0.72rem; }
.garden-season strong { font-weight: 900; white-space: nowrap; }

#garden3d-wrap .game-clock {
  top: 17px;
  left: 18px;
  right: auto;
  z-index: 23;
  padding: 2px 5px;
  transform: none;
  border: 1px solid rgba(255, 244, 216, 0.7);
  border-radius: 999px;
  background: rgba(65, 44, 27, 0.72);
}
#garden3d-wrap .life-hud { top: 17px; right: 18px; z-index: 23; }

.action-countdown {
  position: absolute;
  left: 50%;
  bottom: 58px;
  z-index: 29;
  display: grid;
  grid-template-columns: auto minmax(120px, 1fr) auto;
  align-items: center;
  gap: 9px;
  width: min(360px, calc(100% - 30px));
  padding: 9px 11px;
  transform: translateX(-50%);
  color: #fff8e8;
  background: rgba(70, 45, 25, 0.92);
  border: 2px solid rgba(240, 207, 139, 0.95);
  border-radius: 13px;
  box-shadow: 0 7px 18px rgba(35, 22, 12, 0.34), inset 0 1px rgba(255, 255, 255, 0.16);
  font-family: 'Baloo 2', cursive;
  pointer-events: none;
  animation: action-countdown-enter 0.22s ease-out;
}
.action-countdown.hidden { display: none; }
.action-countdown-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ead39c;
  color: #4b321f;
  font-size: 1.15rem;
  box-shadow: inset 0 -3px rgba(82, 54, 28, 0.13);
}
.action-countdown-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}
.action-countdown-copy > strong {
  overflow: hidden;
  font-size: 0.79rem;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.action-countdown-track {
  display: block;
  height: 7px;
  overflow: hidden;
  border: 1px solid rgba(255, 246, 221, 0.58);
  border-radius: 999px;
  background: rgba(31, 22, 14, 0.62);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.36);
}
.action-countdown-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #75ac43, #b9df62 70%, #f3e08b);
  box-shadow: 0 0 8px rgba(190, 225, 102, 0.62);
  transition: width 0.22s linear;
}
.action-countdown-value {
  min-width: 42px;
  color: #ffe79d;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.action-countdown-value.action-countdown-finishing {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  animation: action-countdown-finishing-pulse 1s ease-in-out infinite;
}
@keyframes action-countdown-finishing-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}
@keyframes action-countdown-enter {
  from { opacity: 0; transform: translate(-50%, 8px) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

#garden3d-container {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: url("img/cursor-3d-triangle.svg") 3 2, pointer !important;
  touch-action: none;
}
#garden3d-container canvas {
  display: block;
  cursor: url("img/cursor-3d-triangle.svg") 3 2, pointer !important;
}

#garden3d-container.is-action-hover,
#garden3d-container.is-action-hover canvas {
  cursor: url("img/cursor-3d-action.svg") 9 3, pointer !important;
}

#garden3d-container.is-whistle-hover,
#garden3d-container.is-whistle-hover canvas {
  cursor: url("img/cursor-whistle.svg") 5 7, pointer !important;
}

#garden3d-container.is-tool-target-hover,
#garden3d-container.is-tool-target-hover canvas { cursor: none !important; }

.garden-action-gear-cursor {
  position: absolute;
  z-index: 60;
  left: 0;
  top: 0;
  width: 36px;
  height: 34px;
  opacity: 0;
  transform: translate(-8px, -6px) scale(.72);
  transition: opacity .1s ease, transform .1s ease;
  pointer-events: none;
  filter: drop-shadow(1px 2px 2px rgba(31, 22, 13, .72));
}
.garden-action-gear-cursor.visible {
  opacity: 1;
  transform: translate(-8px, -6px) scale(1);
}
.garden-action-gear-cursor span {
  position: absolute;
  display: grid;
  place-items: center;
  color: #fff7d1;
  font-family: Arial, sans-serif;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 0 2px #51351f, 0 0 7px rgba(255, 211, 91, .9);
}
.garden-action-gear-cursor span:first-child {
  left: 0;
  top: 0;
  width: 25px;
  height: 25px;
  font-size: 25px;
  animation: garden-gear-clockwise .85s linear infinite;
}
.garden-action-gear-cursor span:last-child {
  right: 0;
  bottom: 0;
  width: 19px;
  height: 19px;
  color: #cce890;
  font-size: 19px;
  animation: garden-gear-counterclockwise .68s linear infinite;
}
@keyframes garden-gear-clockwise { to { transform: rotate(360deg); } }
@keyframes garden-gear-counterclockwise { to { transform: rotate(-360deg); } }

#garden3d-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  color: var(--olive-dark);
  background: linear-gradient(180deg, #d9ecdf 0%, #e8dcc0 55%, #c8a877 100%);
  pointer-events: none;
}

.garden3d-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 20px;
  color: var(--brown-dark);
  font-weight: 600;
  font-size: 0.9rem;
}

@media (max-width: 760px) {
  #garden3d-wrap { height: 380px; }
  #garden3d-wrap .game-clock { top: 14px; left: 14px; right: auto; width: auto; padding: 2px 4px; font-size: 0.52rem; transform: none; }
  #garden3d-wrap .life-hud { top: 14px; right: 14px; width: max-content; min-width:112px; max-width:min(220px,calc(100% - 28px)); padding: 4px 6px 5px; }
  .garden-season { top: 14px; min-height: 17px; padding: 2px 6px; font-size: 0.55rem; }
  .life-hud-head { font-size: 0.62rem; }
  .life-hud-head strong { font-size: 0.58rem; }
  .life-track { height: 6px; }
  .action-countdown {
    bottom: 54px;
    grid-template-columns: auto minmax(92px, 1fr) auto;
    gap: 7px;
    padding: 7px 9px;
  }
  .action-countdown-icon { width: 28px; height: 28px; font-size: 1rem; }
  .action-countdown-copy > strong { font-size: 0.7rem; }
  .action-countdown-value { min-width: 38px; font-size: 0.86rem; }
  .eutro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------- Modales ---------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(58, 44, 30, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 16px;
}
.modal-card {
  background:
    radial-gradient(circle at 10% 10%, rgba(124, 156, 94, 0.08), transparent 38%),
    radial-gradient(circle at 92% 90%, rgba(214, 136, 102, 0.08), transparent 40%),
    var(--white);
  border-radius: 22px;
  max-width: 520px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 24px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.35);
  position: relative;
  animation: pop-in 0.18s ease;
}
@keyframes pop-in {
  from { transform: scale(0.92); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--cream);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1rem;
  color: var(--brown-dark);
}

.modal-card.wide { max-width: 680px; }

/* Ayuda ilustrada de las charcas y la eutrofización */
.modal-card.eutro-help-card {
  max-width: 980px;
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
.eutro-help-card::-webkit-scrollbar,
.eutro-figure::-webkit-scrollbar { width: 11px; height: 11px; }
.eutro-help-card::-webkit-scrollbar-track,
.eutro-figure::-webkit-scrollbar-track { background: #eadbc5; border-radius: 999px; }
.eutro-help-card::-webkit-scrollbar-thumb,
.eutro-figure::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a97955, #71492f);
  border: 2px solid #eadbc5;
  border-radius: 999px;
}
.eutro-help-card h2 {
  margin: 0 42px 10px 0;
  color: var(--brown-dark);
}
.eutro-lead {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-left: 5px solid #719255;
  border-radius: 10px;
  background: #eef5e8;
  color: #4f493b;
  line-height: 1.5;
}
.eutro-figure {
  overflow-x: auto;
  margin: 0 0 16px;
  padding: 8px;
  border: 2px solid #d9c6a7;
  border-radius: 16px;
  background: #fffaf0;
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
.eutro-figure svg {
  display: block;
  width: 100%;
  min-width: 780px;
  height: auto;
}
.eutro-legend {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #b9cfd0;
  border-radius: 14px;
  background: #eef8f8;
  color: #405c5d;
}
.eutro-legend h3 {
  margin: 0 0 9px;
  color: #355f61;
  font-size: 1rem;
}
.eutro-legend-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}
.eutro-legend-grid span {
  display: block;
  padding: 9px 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.78);
  line-height: 1.35;
}
.eutro-legend-grid b {
  display: inline-grid;
  min-width: 30px;
  min-height: 30px;
  margin-right: 5px;
  place-items: center;
  border: 2px solid #6e999b;
  border-radius: 50%;
  color: #315f61;
  background: #fff;
}
.eutro-steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0 0 16px;
}
.eutro-step {
  position: relative;
  min-height: 134px;
  padding: 42px 11px 11px;
  border: 1px solid #d7c09c;
  border-radius: 14px;
  background: #fbf3e3;
  color: #5c4937;
}
.eutro-step > span {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #7d9b5a;
  color: #fff;
  font-weight: 900;
}
.eutro-step strong,
.eutro-step small { display: block; }
.eutro-step strong { color: #66452f; line-height: 1.2; }
.eutro-step small { margin-top: 6px; line-height: 1.35; }
.eutro-fountain-explainer {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 0 0 16px;
  padding: 15px 17px;
  border: 2px solid #76a9ad;
  border-radius: 15px;
  background: linear-gradient(135deg, #e7f8fa, #f7fcf7);
  color: #425657;
}
.eutro-fountain-icon {
  display: grid;
  width: 64px;
  height: 64px;
  place-items: center;
  border-radius: 18px;
  background: #d8f2f5;
  box-shadow: inset 0 0 0 2px rgba(74, 139, 145, 0.2);
  font-size: 2.25rem;
}
.eutro-fountain-explainer h3 {
  margin: 0 0 7px;
  color: #356b6f;
}
.eutro-fountain-explainer p {
  margin: 7px 0 0;
  line-height: 1.48;
}
.eutro-game-note {
  padding: 14px 16px;
  border: 2px solid #8eb6a0;
  border-radius: 15px;
  background: linear-gradient(135deg, #edf8f2, #f8f5df);
  color: #4b4a3b;
}

/* Ayuda ilustrada de la procesionaria y su trampa física */
.modal-card.processionary-help-card {
  max-width: 880px;
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
.processionary-help-card::-webkit-scrollbar { width: 11px; }
.processionary-help-card::-webkit-scrollbar-track { background: #eadbc5; border-radius: 999px; }
.processionary-help-card::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #a97955, #71492f); border: 2px solid #eadbc5; border-radius: 999px; }
.processionary-help-card h2 { margin: 0 42px 10px 0; color: var(--brown-dark); }
.processionary-lead,
.processionary-balance-note { padding: 12px 14px; border-radius: 12px; background: #f7eedc; color: #5c4936; line-height: 1.48; }
.processionary-season-overview { display:grid; grid-template-columns:minmax(220px,.9fr) 1.25fr; gap:16px; margin:14px 0 18px; align-items:stretch; }
.processionary-species-figure { margin:0; padding:10px; border:2px solid #c6d29c; border-radius:16px; background:#f8f7e9; }
.processionary-species-figure img { display:block; width:100%; height:210px; object-fit:contain; border-radius:10px; }
.processionary-species-figure figcaption { margin-top:7px; color:#685944; font-size:.76rem; line-height:1.35; }
.processionary-calendar { padding:14px; border:1px solid #d7c49e; border-radius:16px; background:#fffaf0; }
.processionary-calendar h3 { margin:0 0 10px; color:var(--brown-dark); }
.processionary-months { display:grid; grid-template-columns:repeat(6,1fr); gap:6px; }
.processionary-months span { display:flex; flex-direction:column; justify-content:center; min-height:48px; padding:5px 3px; border:1px solid #d8cfb5; border-radius:9px; background:#f1eedf; color:#625642; text-align:center; font-size:.72rem; font-weight:800; }
.processionary-months span.watch { background:#f4dfaa; border-color:#d6ad56; color:#6e4a16; }
.processionary-months span.risk { background:#e99a72; border-color:#c75e3f; color:#542619; box-shadow:0 0 0 2px rgba(199,94,63,.12); }
.processionary-months small { margin-top:2px; font-size:.57rem; font-weight:700; line-height:1.05; }
.processionary-calendar > p { margin:10px 0 0; color:#695946; font-size:.77rem; line-height:1.45; }
.processionary-calendar .processionary-sources { font-size:.68rem; }
.processionary-sources a { color:#52713f; font-weight:800; }
.processionary-help-layout { display: grid; grid-template-columns: minmax(190px, .72fr) 1.28fr; gap: 18px; align-items: center; }
.processionary-trap-figure { margin: 0; padding: 10px; border: 2px solid #dfc69e; border-radius: 16px; background: #fff9eb; text-align: center; }
.processionary-trap-figure img { display: block; width: 100%; max-height: 350px; object-fit: contain; border-radius: 10px; }
.processionary-trap-figure figcaption { margin-top: 7px; color: #756047; font-size: .78rem; font-weight: 700; }
.processionary-explanation h3,
.processionary-warning h3,
.processionary-birds-title { color: var(--brown-dark); margin: 0 0 7px; }
.processionary-explanation ol { margin: 0; padding-left: 22px; color: #5d4c39; line-height: 1.55; }
.processionary-explanation p { color: #6c5944; line-height: 1.45; }
.processionary-warning { display: flex; gap: 13px; margin: 16px 0; padding: 14px; border: 2px solid #d77954; border-radius: 14px; background: #fff0e8; color: #793d2d; }
.processionary-warning > span { font-size: 2rem; }
.processionary-warning p { margin: 0; line-height: 1.48; }
.processionary-birds-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.processionary-birds-grid article { padding: 11px 9px; border: 1px solid #d9c59f; border-radius: 12px; background: #f6f2df; text-align: center; }
.processionary-birds-grid span { display: block; font-size: 1.55rem; }
.processionary-birds-grid strong { display: block; color: #4f3c2b; font-size: .82rem; }
.processionary-birds-grid small { display: block; margin-top: 5px; color: #70604d; line-height: 1.35; }
@media (max-width: 700px) {
  .processionary-season-overview { grid-template-columns:1fr; }
  .processionary-months { grid-template-columns:repeat(4,1fr); }
  .processionary-help-layout { grid-template-columns: 1fr; }
  .processionary-birds-grid { grid-template-columns: repeat(2, 1fr); }
}
.eutro-game-note h3 { margin: 0 0 7px; color: #416846; }
.eutro-game-note p { margin: 7px 0 0; line-height: 1.45; }

@media (max-width: 760px) {
  .eutro-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .eutro-legend-grid { grid-template-columns: 1fr; }
  .eutro-fountain-explainer { grid-template-columns: 56px minmax(0, 1fr); padding: 13px; }
  .eutro-fountain-icon { width: 50px; height: 50px; border-radius: 14px; font-size: 1.8rem; }
}

/* Finalización irreversible del bosque */
.finalize-forest-card { max-width: 570px; }
.finalize-forest-card h2 {
  color: var(--brown-dark);
  text-align: center;
  margin: 2px 34px 14px;
}
.finalize-icon {
  text-align: center;
  font-size: 2.8rem;
  margin-bottom: 8px;
}
.finalize-warning {
  background: #fff1e8;
  border: 2px solid #d88968;
  border-radius: 14px;
  padding: 14px 16px;
  color: #70402f;
  margin: 14px 0;
}
.finalize-warning p { margin: 8px 0 0; }
.finalize-check {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  background: #f6ede1;
  border: 1px solid #d8c2a4;
  border-radius: 14px;
  padding: 14px;
  line-height: 1.45;
  color: #5d4634;
  cursor: pointer;
}
.finalize-check input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: #a63f35;
}
.finalize-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.finalize-confirm-button { background: #a63f35; }
.finalize-confirm-button:hover { background: #823027; }
.finalize-confirm-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}
.finalize-status {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #edf5e7;
  color: #456438;
  font-size: 0.88rem;
}
.finalize-status.error { background: #fbe3e3; color: #9b3434; }

/* Ficha de especie */
.modal-card.species-detail-card { max-width: 720px; }
.species-modal-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 12px;
}
.species-modal-head.botanical {
  padding-right: 42px;
  margin-bottom: 10px;
}
.species-modal-head .big-emoji {
  font-size: 3rem;
  width: 76px;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  isolation: isolate;
}
.species-modal-head .big-emoji::before {
  content: "";
  position: absolute;
  inset: -6%;
  z-index: -1;
  background: radial-gradient(circle at 35% 30%, #fceec9, #f0d9a4 75%);
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: url(#watercolor-wobble);
}
.species-modal-head h2 { color: var(--brown-dark); font-size: 1.3rem; }
.species-modal-head .sci { font-style: italic; color: #8a7660; font-size: 0.85rem; }
.species-modal-head .tags { margin-top: 5px; display: flex; gap: 6px; flex-wrap: wrap; }
.tag-pill {
  font-size: 0.7rem;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e4efd8;
  color: var(--olive-dark);
}
.tag-pill.season { background: #fdeacb; color: var(--sun-dark); }

.species-botanical-figure {
  margin: 0 0 16px;
  overflow: hidden;
  border: 2px solid #e5d7bd;
  border-radius: 16px;
  background: #f8f1df;
  box-shadow: 0 8px 22px rgba(91, 74, 58, 0.1);
}
.species-botanical-image {
  display: block;
  width: 100%;
  height: min(400px, 48vh);
  object-fit: contain;
  background: #f7f0df;
}
.species-botanical-figure figcaption {
  padding: 8px 12px;
  border-top: 1px solid #e5d7bd;
  color: #6f604f;
  background: rgba(255, 252, 243, 0.96);
  font-size: 0.76rem;
  font-weight: 700;
  text-align: center;
}

.info-block {
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--cream);
  font-size: 0.9rem;
  line-height: 1.45;
}
.info-block .label {
  font-weight: 700;
  color: var(--terracotta-dark);
  display: block;
  margin-bottom: 3px;
  font-size: 0.82rem;
}
.info-block.eco .label { color: var(--olive-dark); }
.info-block.fun { background: #eaf3fb; }
.info-block.fun .label { color: #3a7ea8; }

.quiz-box {
  margin-top: 16px;
  border-top: 2px dashed #eee0c8;
  padding-top: 14px;
}
.quiz-box h3 {
  font-size: 0.98rem;
  color: var(--brown-dark);
  margin-bottom: 10px;
}
.quiz-options { display: flex; flex-direction: column; gap: 8px; }
.quiz-option {
  text-align: left;
  border: 2px solid #eee0c8;
  border-radius: 12px;
  padding: 9px 12px;
  background: var(--white);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink);
}
.quiz-option:hover:not(:disabled) { border-color: var(--olive); background: #f5faee; }
.quiz-option.correct { border-color: var(--olive); background: #e4f4d8; color: var(--olive-dark); }
.quiz-option.incorrect { border-color: var(--terracotta); background: #fbe3da; color: var(--terracotta-dark); }
.quiz-option:disabled { cursor: default; }

.quiz-feedback {
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  font-size: 0.88rem;
  line-height: 1.4;
}
.quiz-feedback.correct { background: #e4f4d8; color: var(--olive-dark); }
.quiz-feedback.incorrect { background: #fbe3da; color: var(--terracotta-dark); }

.modal-footer-actions {
  margin-top: 16px;
  text-align: right;
}

/* Logros */
#modal-achievements .modal-card {
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
#modal-achievements .modal-card::-webkit-scrollbar {
  width: 11px;
}
#modal-achievements .modal-card::-webkit-scrollbar-track {
  background: #eadbc5;
  border-radius: 999px;
}
#modal-achievements .modal-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a97955, #71492f);
  border: 2px solid #eadbc5;
  border-radius: 999px;
}
#modal-achievements .modal-card::-webkit-scrollbar-thumb:hover {
  background: #5f3d29;
}

.achievements-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 6px;
}
.achv-card {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 14px 12px;
  text-align: center;
  background: var(--cream);
  border: 2px solid #eee0c8;
}
.achv-card .achv-emoji {
  font-size: 1.9rem;
  display: block;
  width: fit-content;
  margin: 0 auto 6px;
  filter: grayscale(1);
  opacity: 0.4;
  position: relative;
  isolation: isolate;
}
.achv-card.unlocked {
  background: #fdf3da;
  border-color: var(--sun);
}
.achv-card.unlocked .achv-emoji { filter: none; opacity: 1; }
.achv-card.unlocked .achv-emoji::before {
  content: "";
  position: absolute;
  inset: -22%;
  z-index: -1;
  background: radial-gradient(circle at 35% 30%, #fdeecb, #f3d391 75%);
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: url(#watercolor-wobble);
}
.achv-card .achv-name { font-weight: 700; font-size: 0.78rem; color: var(--brown-dark); }
.achv-card .achv-desc { font-size: 0.68rem; color: #8a7660; margin-top: 3px; line-height: 1.3; }
.achv-goal-progress { margin-top: 9px; }
.achv-goal-progress-track {
  height: 8px;
  overflow: hidden;
  background: #ded3bf;
  border: 1px solid #bfa88a;
  border-radius: 999px;
  box-shadow: inset 0 1px 2px rgba(69, 47, 31, 0.18);
}
.achv-goal-progress-track span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #758e4f, #4d713a);
}
.achv-goal-progress small {
  display: block;
  margin-top: 3px;
  color: #607143;
  font-size: 0.62rem;
  font-weight: 800;
}
.achv-references {
  display: grid;
  gap: 3px;
  margin-top: 8px;
  font-size: 0.6rem;
  line-height: 1.3;
}
.achv-references strong { color: #70583f; }
.achv-references a { color: #4f6e3c; text-decoration: underline; }
.achv-reward {
  margin-top: 10px;
  padding: 10px;
  text-align: left;
  background: rgba(255, 250, 239, 0.92);
  border: 1px solid #dfc89f;
  border-radius: 12px;
}
.achv-reward-label {
  margin-bottom: 7px;
  color: #8a5c35;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}
.achv-reward-species {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--brown-dark);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.25;
}
.achv-reward-emoji {
  flex: 0 0 auto;
  font-size: 1.35rem;
}
.achv-reward-description,
.achv-reward-benefit {
  margin: 7px 0 0;
  font-size: 0.67rem;
  line-height: 1.4;
}
.achv-reward-description { color: #725f4e; }
.achv-reward-benefit {
  padding: 7px 8px;
  color: #526b3e;
  background: #eef4df;
  border-radius: 9px;
}
.achv-reward-benefit strong { color: #405a2f; }
.achv-card .achv-fauna {
  margin-top: 7px;
  font-size: 0.64rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--olive-dark);
}
.achv-card:not(.unlocked) {
  background: #f3f3f1;
  border-color: #e0e0dc;
}
.achv-card:not(.unlocked) .achv-emoji {
  filter: grayscale(1);
  opacity: 0.2;
}
.achv-card:not(.unlocked) .achv-name { color: #b5b5b1; }
.achv-card:not(.unlocked) .achv-desc { color: #c2c2be; }
.achv-card:not(.unlocked) .achv-goal-progress,
.achv-card:not(.unlocked) .achv-references {
  filter: grayscale(1);
  opacity: 0.45;
}
.achv-card:not(.unlocked) .achv-fauna {
  color: #c2c2be;
  filter: grayscale(1);
  opacity: 0.45;
}
.achv-card:not(.unlocked) .achv-reward {
  background: #ececea;
  border-color: #deded9;
  filter: grayscale(1);
  opacity: 0.55;
}
.achv-card:not(.unlocked) .achv-reward * { color: #b9b9b4 !important; }
.achv-card:not(.unlocked) .achv-reward-benefit { background: #e5e5e2; }
.achv-card:not(.unlocked) .achv-sdg {
  filter: grayscale(1);
  opacity: 0.2;
}
.achv-progress { font-size: 0.8rem; color: var(--olive-dark); margin: 10px 0 0; text-align: center; font-weight: 700; }

/* Insignias de los Objetivos de Desarrollo Sostenible (ODS) */
.achv-sdg { display: flex; justify-content: center; gap: 4px; margin-top: auto; padding-top: 8px; }
.sdg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 700;
  flex-shrink: 0;
}
.sdg-intro {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 2px dashed #eee0c8;
  text-align: center;
}
.sdg-logo { height: 34px; width: auto; margin-bottom: 8px; }
.sdg-intro p { font-size: 0.78rem; color: #5b4a3a; line-height: 1.4; margin: 0 0 10px; }
.sdg-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
}
.sdg-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  color: var(--brown-dark);
  font-weight: 600;
}
.sdg-intro .sdg-more-info {
  margin: 14px 0 0;
}
.sdg-more-info a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 620px;
  padding: 10px 16px;
  border: 2px solid var(--olive);
  border-radius: 999px;
  background: #eef4df;
  color: var(--olive-dark);
  font-size: 0.76rem;
  font-weight: 800;
  line-height: 1.35;
  text-decoration: none;
}
.sdg-more-info a:hover,
.sdg-more-info a:focus {
  background: var(--olive);
  color: #fff;
  outline: none;
}

/* Modal de ayuda ("¿Cómo se juega?") */
#modal-help .modal-card {
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
#modal-help .modal-card::-webkit-scrollbar { width: 11px; }
#modal-help .modal-card::-webkit-scrollbar-track {
  background: #eadbc5;
  border-radius: 999px;
}
#modal-help .modal-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a97955, #71492f);
  border: 2px solid #eadbc5;
  border-radius: 999px;
}
#modal-help .modal-card::-webkit-scrollbar-thumb:hover { background: #5f3d29; }
.help-content { margin-top: 8px; }
.family-rating-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  margin: 6px 0 18px;
  padding: 15px 16px;
  color: #4f493b;
  background: linear-gradient(145deg, #eef6e8, #fffaf0);
  border: 2px solid #8aaa70;
  border-radius: 15px;
}
.family-rating-box .age-guidance-badge-large { width: 58px; height: 68px; }
.family-rating-box .age-guidance-badge-large strong { font-size: 1.9rem; }
.family-rating-box .age-guidance-badge-large small { font-size: 0.5rem; }
.help-content .family-rating-box h3 { margin: 0 0 5px; color: #315f3b; }
.help-content .family-rating-box p { margin: 0 0 7px; font-size: 0.76rem; }
.family-rating-box .rating-disclaimer {
  padding: 6px 8px;
  color: #70583f;
  background: rgba(255, 255, 255, 0.72);
  border-radius: 8px;
}
.rating-more-link {
  color: var(--olive-dark);
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: underline;
}
.help-content h3 {
  font-size: 0.92rem;
  margin: 14px 0 4px;
  color: var(--brown-dark);
}
.help-content h3:first-child { margin-top: 0; }
.help-content p {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #5b4a3a;
  margin: 0;
}

.help-rest-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 9px 0 8px;
}

.help-rest-card {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-width: 0;
  padding: 11px 10px 10px;
  overflow: hidden;
  border: 2px solid #c79c65;
  border-radius: 13px;
  background: linear-gradient(145deg, #fffaf0, #f1e0bf);
  box-shadow: 0 3px 7px rgba(84, 53, 30, 0.13);
}

.help-rest-card::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -20px;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(111, 144, 76, 0.1);
  pointer-events: none;
}

.help-rest-card-hammock { border-color: #ad8157; }
.help-rest-card-fruit { border-color: #bb7764; }
.help-rest-card-water { border-color: #6d9cac; }

.help-rest-icon {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(91, 58, 31, 0.2);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.74);
  font-size: 1.35rem;
  line-height: 1;
  box-shadow: 0 2px 5px rgba(80, 49, 27, 0.13);
}

.help-rest-card h4 {
  margin: 0 0 3px;
  color: #51351f;
  font-family: 'Baloo 2', cursive;
  font-size: 0.88rem;
  line-height: 1.1;
}

.help-content .help-rest-card p {
  color: #64513f;
  font-size: 0.72rem;
  line-height: 1.3;
}

.help-rest-benefit {
  display: block;
  margin-top: 6px;
  padding: 4px 6px;
  border-radius: 7px;
  background: #e1edcf;
  color: #416333;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1.2;
}

.help-content .help-rest-note {
  padding: 8px 10px;
  border-left: 4px solid #8a603d;
  border-radius: 6px 10px 10px 6px;
  background: #f6ecda;
  color: #67482e;
  font-size: 0.75rem;
}

@media (max-width: 760px) {
  .help-rest-grid { grid-template-columns: 1fr; }
  .help-rest-card { padding: 10px; }
}

/* Toasts (logros desbloqueados) */
#toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 300px;
}
.toast {
  background: var(--white);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 5px solid var(--sun);
  animation: toast-in 0.25s ease;
}
@keyframes toast-in {
  from { transform: translateX(40px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
.toast .toast-emoji {
  font-size: 1.6rem;
  position: relative;
  isolation: isolate;
  display: inline-block;
}
.toast .toast-emoji::before {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: -1;
  background: radial-gradient(circle at 35% 30%, #fdeecb, #f3d391 75%);
  border-radius: 42% 58% 65% 35% / 45% 40% 60% 55%;
  filter: url(#watercolor-wobble);
}
.toast .toast-title { font-weight: 700; font-size: 0.82rem; color: var(--brown-dark); }
.toast .toast-desc { font-size: 0.72rem; color: #8a7660; white-space: pre-line; }
.toast.toast-danger {
  background: #fff0ed;
  border: 2px solid #cb4d42;
  border-left-width: 6px;
}
.toast.toast-danger .toast-title { color: #a12e28; }
.toast.toast-danger .toast-desc { color: #7d3b36; }
.toast.toast-danger .toast-emoji::before {
  background: radial-gradient(circle at 35% 30%, #ffd8d1, #efa49a 75%);
}
.toast.toast-success {
  background: #f0f8e9;
  border: 2px solid #659c45;
  border-left-width: 6px;
}
.toast.toast-success .toast-title { color: #37682e; }
.toast.toast-success .toast-desc { color: #4c6844; }
.toast.toast-success .toast-emoji::before {
  background: radial-gradient(circle at 35% 30%, #e6f6cf, #b7db86 75%);
}

/* Celebración final */
.celebration-content { text-align: center; }
.celebration-content .big-trophy { font-size: 3.2rem; }
.celebration-content h2 { font-size: 1.4rem; color: var(--brown-dark); margin: 8px 0; }
.celebration-content p { font-size: 0.92rem; color: #5b4a3a; line-height: 1.5; }
.celebration-stats {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin: 16px 0;
}
.celebration-stats div { text-align: center; }
.celebration-stats .num { font-family: 'Baloo 2', cursive; font-size: 1.5rem; color: var(--terracotta-dark); }
.celebration-stats .lbl { font-size: 0.7rem; color: #8a7660; }

footer.site-footer {
  text-align: center;
  margin-top: 26px;
  font-size: 0.78rem;
  color: #fff;
  text-shadow: 0 1px 3px rgba(31, 45, 25, .72);
}
footer.site-footer a { color: var(--olive-dark); font-weight: 700; text-decoration: none; }
footer.site-footer a:hover { text-decoration: underline; }
.cover-site-footer {
  width: min(100%, 560px);
  margin: 16px auto 0 !important;
  padding: 10px 18px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.cover-site-footer p { margin: 6px 0; }
.cover-site-footer .footer-logo { height: 36px; }
.footer-credits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.footer-logo-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  border-radius: 8px;
}
.footer-logo-link:hover .footer-logo {
  transform: translateY(-2px);
  filter: drop-shadow(0 4px 5px rgba(58, 40, 25, 0.28));
}
.footer-logo-link:focus-visible {
  outline: 3px solid #b7812d;
  outline-offset: 4px;
}
.footer-logo {
  height: 42px;
  width: auto;
  object-fit: contain;
  transition: transform 0.18s ease, filter 0.18s ease;
}
.age-guidance {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: min(100%, 540px);
  margin: 7px auto 9px;
}
.age-guidance-badge {
  display: inline-flex;
  flex: 0 0 auto;
  width: 42px;
  height: 49px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: #fff;
  background: linear-gradient(145deg, #62b34f, #31833c);
  border: 3px solid #fff;
  border-radius: 7px;
  outline: 1px solid #286b32;
  box-shadow: 0 3px 8px rgba(47, 82, 43, 0.24);
  font-family: Arial, sans-serif;
  line-height: 1;
}
.age-guidance-badge strong { font-size: 1.32rem; letter-spacing: -0.06em; }
.age-guidance-badge small {
  margin-top: 3px;
  font-size: 0.42rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}
.age-guidance-copy {
  display: grid;
  gap: 2px;
  margin: 0 !important;
  color: #fff;
  font-size: 0.67rem !important;
  line-height: 1.3;
  text-align: left;
}
.age-guidance-copy strong { color: #426b38; font-size: 0.72rem; }
.age-guidance-copy span { display: block; }
.plots-site-footer .age-guidance { gap: 7px; margin: 2px auto 3px; }
.plots-site-footer .age-guidance-badge { width: 27px; height: 31px; border-width: 2px; border-radius: 5px; }
.plots-site-footer .age-guidance-badge strong { font-size: 0.82rem; }
.plots-site-footer .age-guidance-badge small { margin-top: 1px; font-size: 0.28rem; }
.plots-site-footer .age-guidance-copy { gap: 0; font-size: 0.54rem !important; line-height: 1.15; }
.plots-site-footer .age-guidance-copy strong { font-size: 0.59rem; }
.register-credits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 2px dashed #eee0c8;
}
.register-credits .footer-logo { height: 34px; }

/* ---------------- Impacto ambiental ---------------- */
.env-hud {
  position: absolute;
  top: 10px;
  left: 20px;
  z-index: 23;
  display: grid;
  gap: 3px;
  max-width: 205px;
  color: #fffdf1;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 1px 1px rgba(22, 19, 11, 0.95));
}
.env-hud-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1;
}
.env-hud .env-icon {
  width: 17px;
  flex: 0 0 17px;
  font-size: 0.76rem;
  text-align: center;
}
.env-hud-copy {
  display: flex;
  align-items: baseline;
  min-width: 0;
  gap: 3px;
  white-space: nowrap;
}
.env-hud .env-label {
  color: #f6f0d8;
  font-size: 0.48rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-transform: uppercase;
  opacity: 0.92;
}
.env-hud .env-value {
  color: #fff;
  font-family: 'Baloo 2', cursive;
  font-size: 0.66rem;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 2px #16220f, 0 0 5px rgba(46, 74, 35, 0.75);
}
.env-hud .env-sub {
  overflow: hidden;
  max-width: 58px;
  color: #d9efbd;
  font-size: 0.46rem;
  font-weight: 800;
  text-overflow: ellipsis;
}

.env-season-inline {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
  margin-left: 2px;
  padding-left: 6px;
  border-left: 1px solid rgba(246, 240, 216, 0.72);
  color: #fffdf1;
  font-size: 0.56rem;
  line-height: 1;
  white-space: nowrap;
}
.env-season-inline span { font-size: 0.67rem; }
.env-season-inline strong {
  font-weight: 900;
  text-shadow: 0 1px 2px #16220f, 0 0 5px rgba(46, 74, 35, 0.75);
}
.env-air-sub { margin: 0; line-height: 1; }
#env-air {
  transition: color 0.25s ease, filter 0.25s ease;
}
#env-air.air-polluted .env-value { color: #ffd279; }
#env-air.air-recovering .env-air-sub { color: #bff09a; }
#env-air.air-impact { animation: air-impact-pulse 1.35s ease; }
#env-air.air-clean-pass { animation: air-clean-pulse 1.35s ease; }
@keyframes air-impact-pulse {
  35% { transform: translateX(2px); filter: drop-shadow(0 0 5px rgba(255, 105, 59, 0.95)); }
}
@keyframes air-clean-pulse {
  35% { transform: translateX(2px); filter: drop-shadow(0 0 5px rgba(127, 255, 110, 0.95)); }
}

/* ---------------- Cartas de recompensas ---------------- */
.reward-collection-panel {
  margin-top: 0;
  margin-bottom: 16px;
  overflow: hidden;
}
.reward-collection-title {
  margin: 0 0 12px;
  color: var(--brown-dark);
  font-family: 'Baloo 2', cursive;
  font-size: 1.32rem;
  text-align: center;
}
.reward-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 14px;
}
.reward-cards-empty {
  margin: 4px 0 0;
  color: #806b57;
  font-size: 0.86rem;
  text-align: center;
}
.reward-species-card {
  appearance: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 9px 9px 12px;
  border: 2px solid #b68a58;
  border-radius: 16px;
  background:
    radial-gradient(circle at 90% 8%, rgba(117, 145, 78, 0.12), transparent 27%),
    #fffaf0;
  color: #4f3929;
  box-shadow: 0 5px 13px rgba(91, 60, 38, 0.14);
  font-family: 'Quicksand', sans-serif;
  text-align: left;
}
button.reward-species-card {
  cursor: zoom-in;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
button.reward-species-card:hover {
  transform: translateY(-3px);
  border-color: #825b3d;
  box-shadow: 0 9px 20px rgba(91, 60, 38, 0.22);
}
button.reward-species-card:focus-visible {
  outline: 3px solid rgba(89, 129, 65, 0.46);
  outline-offset: 3px;
}
.reward-species-image {
  width: 100%;
  aspect-ratio: 6 / 5;
  flex: 0 0 auto;
  border: 1px solid rgba(122, 88, 54, 0.28);
  border-radius: 11px;
  background-color: #f7f0df;
  background-image: var(--reward-card-image, url("img/rewards/fauna-reward-atlas.png?v=1.0.0"));
  background-repeat: no-repeat;
  background-position: var(--reward-atlas-x, 0%) var(--reward-atlas-y, 0%);
  background-size: var(--reward-card-image-size, 500% 400%);
  box-shadow: inset 0 0 0 3px rgba(255, 251, 239, 0.7);
}

.garden-zoom-controls {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 34;
  display: grid;
  grid-template-columns: repeat(2, 38px);
  overflow: hidden;
  border: 2px solid rgba(111, 74, 49, 0.9);
  border-radius: 12px;
  background: rgba(255, 248, 225, 0.93);
  box-shadow: 0 4px 12px rgba(45, 29, 17, 0.3);
}
.garden-zoom-controls button {
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  background: #ead4ae;
  color: #4d321f;
  font-family: 'Baloo 2', sans-serif;
  font-size: 1.45rem;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
}
.garden-zoom-controls button + button { border-left: 1px solid rgba(91, 57, 34, 0.35); }
.garden-zoom-controls button:hover,
.garden-zoom-controls button:focus-visible { background: #cfaa76; outline: none; }

@media (max-width: 680px) {
  .garden-zoom-controls { right: 8px; bottom: 8px; grid-template-columns: repeat(2, 34px); }
  .garden-zoom-controls button { width: 34px; height: 34px; font-size: 1.25rem; }
}
.reward-species-card h3 {
  margin: 1px 2px 0;
  color: #68462f;
  font-family: 'Baloo 2', cursive;
  font-size: 1rem;
  line-height: 1.15;
}
.reward-species-card p {
  margin: 0 2px;
  color: #665545;
  font-size: 0.76rem;
  line-height: 1.42;
}
.reward-species-card p strong { color: #45643a; }

.reward-card-reader {
  position: relative;
  width: min(680px, 100%);
  max-height: calc(100vh - 32px);
  padding: 50px 18px 18px;
  overflow-y: auto;
  border: 3px solid #7a5338;
  border-radius: 22px;
  background: linear-gradient(145deg, #ead9bc, #cda879);
  box-shadow: 0 24px 60px rgba(40, 24, 14, 0.46);
  scrollbar-color: #71492f #eadbc5;
  scrollbar-width: thin;
  animation: pop-in 0.18s ease;
}
.reward-card-reader::-webkit-scrollbar { width: 11px; }
.reward-card-reader::-webkit-scrollbar-track { background: #eadbc5; border-radius: 999px; }
.reward-card-reader::-webkit-scrollbar-thumb {
  border: 2px solid #eadbc5;
  border-radius: 999px;
  background: linear-gradient(180deg, #a97955, #71492f);
}
.reward-card-close {
  top: 10px;
  right: 12px;
  z-index: 2;
  border: 2px solid rgba(104, 70, 47, 0.25);
  background: #fff8e9;
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}
#reward-card-large {
  max-width: 520px;
  margin: 0 auto;
}
.reward-species-card-expanded {
  gap: 12px;
  padding: 14px 14px 19px;
  border-width: 3px;
  border-radius: 20px;
  box-shadow: 0 10px 24px rgba(75, 47, 27, 0.23);
}
.reward-species-card-expanded h3 {
  margin-top: 2px;
  font-size: 1.4rem;
}
.reward-species-card-expanded p {
  font-size: 0.94rem;
  line-height: 1.55;
}
.reward-species-card-large { border-radius: 14px; }

/* Expositor de cartas inspirado en cuadernos de campo y expediciones. */
.reward-collection-panel {
  position: relative;
  isolation: isolate;
  padding: 38px 18px 16px;
  border: 3px solid #9b6b2f;
  border-radius: 16px;
  background:
    linear-gradient(rgba(242, 225, 184, 0.94), rgba(224, 198, 145, 0.96)),
    #dfc38e;
  box-shadow: 0 6px 15px rgba(38, 24, 15, .28), inset 0 0 0 2px #d6aa55;
}
.reward-collection-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0.22;
  background:
    repeating-radial-gradient(ellipse at 12% 16%, transparent 0 18px, #886642 19px 20px, transparent 21px 34px),
    repeating-radial-gradient(ellipse at 88% 82%, transparent 0 23px, #6f8054 24px 25px, transparent 26px 43px);
}
.reward-collection-panel::after {
  content: none;
}
.reward-collection-panel > * { position: relative; z-index: 1; }
.reward-expedition-header {
  display: grid;
  justify-items: center;
  padding: 5px 10px 13px;
  text-align: center;
}
.reward-expedition-kicker {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin-bottom: 4px;
  padding: 3px 15px;
  border: 1px solid rgba(82, 55, 34, 0.38);
  border-radius: 3px;
  background: rgba(98, 68, 42, 0.9);
  color: #fff0c7;
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  transform: rotate(-0.7deg);
  box-shadow: 0 3px 7px rgba(58, 38, 23, 0.22);
}
.reward-collection-panel .reward-collection-title {
  justify-content: center;
  margin: 0;
  color: #4e3624;
  font-size: 1.68rem;
  line-height: 1.05;
  letter-spacing: 0.015em;
  text-align: center;
  text-shadow: 0 1px 0 #fff3ce;
}
.reward-expedition-header > p {
  max-width: 680px;
  margin: 6px auto 9px;
  color: #66503b;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-align: center;
}
.reward-expedition-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 5px 11px;
  border: 2px solid rgba(99, 67, 40, 0.27);
  border-radius: 999px;
  background: rgba(255, 247, 216, 0.62);
  box-shadow: inset 0 2px 5px rgba(88, 58, 34, 0.12);
}
.reward-expedition-tools span {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background: linear-gradient(145deg, #f7e6b7, #c9a66c);
  box-shadow: 0 2px 5px rgba(70, 45, 26, 0.22), inset 0 0 0 1px rgba(96, 63, 35, 0.3);
  font-size: 0.95rem;
}
.reward-category-tabs {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 -2px 12px;
  padding: 7px 7px 9px;
  overflow-x: auto;
  overflow-y: hidden;
  border: 2px solid #755136;
  border-radius: 14px;
  background: linear-gradient(180deg, #69482f, #51351f);
  box-shadow: inset 0 4px 9px rgba(27, 17, 10, 0.34), 0 3px 7px rgba(70, 44, 25, 0.2);
  scrollbar-width: thin;
  scrollbar-color: #bb8959 #3e291b;
}
.reward-category-tabs::-webkit-scrollbar,
.reward-cards-grid::-webkit-scrollbar { height: 10px; }
.reward-category-tabs::-webkit-scrollbar-track,
.reward-cards-grid::-webkit-scrollbar-track {
  border-radius: 999px;
  background: #4b3221;
}
.reward-category-tabs::-webkit-scrollbar-thumb,
.reward-cards-grid::-webkit-scrollbar-thumb {
  border: 2px solid #4b3221;
  border-radius: 999px;
  background: linear-gradient(90deg, #c99a68, #8c5d39);
}
.reward-category-tab {
  appearance: none;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 11px;
  border: 2px solid #aa8055;
  border-radius: 9px 9px 5px 5px;
  background: linear-gradient(180deg, #f2dca8, #c9a269);
  color: #4d3523;
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
  box-shadow: 0 3px 5px rgba(28, 17, 9, 0.3), inset 0 1px 0 rgba(255, 250, 222, 0.66);
}
.reward-category-tab span { font-size: 1rem; }
.reward-category-tab b {
  display: grid;
  place-items: center;
  min-width: 21px;
  height: 21px;
  padding: 0 5px;
  border-radius: 999px;
  background: rgba(83, 57, 36, 0.14);
  font-size: 0.67rem;
}
.reward-category-tab:hover { filter: brightness(1.06); transform: translateY(-1px); }
.reward-category-tab.active {
  border-color: #e6c46e;
  background: linear-gradient(180deg, #7c9b58, #496b3e);
  color: #fff9df;
  box-shadow: 0 0 0 2px rgba(237, 207, 124, 0.28), 0 4px 8px rgba(24, 15, 8, 0.4);
}
.reward-category-tab:focus-visible {
  outline: 3px solid #f5dc8c;
  outline-offset: 2px;
}
.reward-cards-grid {
  display: flex;
  align-items: stretch;
  gap: 15px;
  min-height: 445px;
  margin: 0 -3px;
  padding: 8px 5px 15px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #9a6844 #ead3a4;
}
.reward-cards-grid:empty { min-height: 0; padding-block: 0; }
.reward-cards-empty {
  margin: 14px 0 8px;
  padding: 18px;
  border: 2px dashed rgba(96, 66, 39, 0.36);
  border-radius: 13px;
  background: rgba(255, 248, 221, 0.64);
  color: #654b34;
  font-weight: 700;
}
.reward-species-card {
  --reward-accent: #55794b;
  --reward-accent-dark: #304f35;
  position: relative;
  flex: 0 0 238px;
  width: 238px;
  min-width: 238px;
  min-height: 425px;
  gap: 0;
  padding: 9px 8px 12px;
  overflow: hidden;
  scroll-snap-align: start;
  border: 5px solid #6c472d;
  border-radius: 25px 25px 20px 20px;
  background:
    linear-gradient(150deg, rgba(255,255,255,0.14), transparent 28%),
    linear-gradient(180deg, var(--reward-accent), var(--reward-accent-dark));
  box-shadow:
    0 9px 16px rgba(54, 34, 20, 0.3),
    inset 0 0 0 2px #c49a62,
    inset 0 0 0 6px rgba(55, 33, 19, 0.3);
  transform-origin: 50% 90%;
}
.reward-species-card::before,
.reward-species-card::after {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 2px solid #6d4a2c;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #f5db8e, #a46e35 72%);
  color: #5b3b22;
  box-shadow: 0 2px 4px rgba(48, 28, 15, 0.35);
  font-size: 0.7rem;
  pointer-events: none;
}
.reward-species-card::before { content: "✦"; top: 7px; left: 7px; }
.reward-species-card::after {
  content: "🔎";
  top: 7px;
  right: 7px;
  opacity:0;
  transform:scale(.72);
  transition:opacity .15s ease, transform .15s ease;
}
button.reward-species-card:hover::after,
button.reward-species-card:focus-visible::after { opacity:1; transform:scale(1); }
.reward-category-birds { --reward-accent: #668aa0; --reward-accent-dark: #38576b; }
.reward-category-insects { --reward-accent: #9b7b48; --reward-accent-dark: #644b2e; }
.reward-category-mammals { --reward-accent: #8c6a4f; --reward-accent-dark: #563e2d; }
.reward-category-reptiles { --reward-accent: #758b52; --reward-accent-dark: #435634; }
.reward-category-amphibians { --reward-accent: #568479; --reward-accent-dark: #31554f; }
button.reward-species-card:hover {
  transform: translateY(-7px) rotate(-0.5deg) scale(1.018);
  border-color: #4e321f;
  box-shadow: 0 15px 25px rgba(50, 30, 17, 0.38), inset 0 0 0 2px #e0bc78, inset 0 0 0 6px rgba(55, 33, 19, 0.28);
}
.reward-species-image {
  width: calc(100% - 12px);
  aspect-ratio: 6 / 5;
  margin: 7px 6px 0;
  border: 4px solid #d4b16f;
  border-radius: 48% 48% 16px 16px / 28% 28% 16px 16px;
  box-shadow: 0 4px 8px rgba(39, 24, 14, 0.35), inset 0 0 0 2px #6d492d;
}
.reward-species-card h3 {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 1px;
  width: calc(100% - 18px);
  min-height: 49px;
  margin: -7px 9px 7px;
  padding: 6px 8px 5px;
  border: 2px solid #6a4529;
  border-radius: 7px 7px 12px 12px;
  background: linear-gradient(180deg, #efd28d, #bd8c4d);
  color: #3d2a1d;
  box-shadow: 0 3px 7px rgba(41, 24, 13, 0.35), inset 0 1px 0 #fff0bd;
  font-size: 0.95rem;
  line-height: 1.04;
  text-align: center;
}
.reward-species-card h3 span { display: block; }
.reward-species-card h3 small {
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: 0.59rem;
  font-style: italic;
  font-weight: 750;
  line-height: 1.1;
}
.reward-card-facts {
  flex: 1 1 auto;
  margin: 0 5px;
  padding: 10px 9px 9px;
  border: 2px solid rgba(74, 49, 29, 0.7);
  border-radius: 11px 11px 15px 15px;
  background:
    linear-gradient(rgba(255, 249, 221, 0.93), rgba(239, 220, 177, 0.96)),
    repeating-linear-gradient(0deg, transparent 0 18px, rgba(89, 113, 75, 0.12) 19px 20px);
  box-shadow: inset 0 0 11px rgba(106, 73, 39, 0.16);
}
.reward-species-card p {
  margin: 0 0 7px;
  color: #514233;
  font-size: 0.68rem;
  line-height: 1.34;
}
.reward-species-card p:last-child { margin-bottom: 0; }
.reward-species-card p strong {
  display: block;
  margin-bottom: 1px;
  color: var(--reward-accent-dark);
  font-size: 0.69rem;
}
.reward-card-reader {
  width: min(620px, 100%);
  background:
    radial-gradient(circle at 12% 10%, rgba(255, 240, 183, 0.42), transparent 28%),
    repeating-radial-gradient(ellipse at 85% 82%, transparent 0 26px, rgba(78, 94, 60, 0.18) 27px 28px, transparent 29px 46px),
    linear-gradient(145deg, #d8b87a, #8f623e);
}
#reward-card-large {
  width: min(410px, 100%);
  max-width: 410px;
}
.reward-species-card-expanded {
  width: min(410px, 100%);
  min-width: 0;
  min-height: 0;
  padding: 14px 13px 18px;
  border-width: 7px;
  border-radius: 34px 34px 27px 27px;
  cursor: default;
}
.reward-species-card-expanded::before,
.reward-species-card-expanded::after { width: 31px; height: 31px; font-size: 0.9rem; }
.reward-species-card-expanded .reward-species-image { margin-top: 10px; border-width: 5px; }
.reward-species-card-expanded h3 {
  min-height: 62px;
  margin-top: -9px;
  padding: 9px 11px 7px;
  font-size: 1.35rem;
}
.reward-species-card-expanded h3 small { font-size: 0.78rem; }
.reward-species-card-expanded .reward-card-facts { padding: 15px 16px; }
.reward-species-card-expanded p { font-size: 0.9rem; line-height: 1.5; }
.reward-species-card-expanded p strong { font-size: 0.92rem; }

/* ---------------- Bandeja de vivero, herramientas y elementos ---------------- */
.action-dock {
  margin-top: 16px;
  padding-top: 10px;
}
.action-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 0 11px;
  padding: 4px;
  border: 2px solid #d6bea0;
  border-radius: 14px;
  background: #eadbc5;
  box-shadow: inset 0 2px 5px rgba(91, 60, 38, 0.12);
}
.action-tab {
  min-height: 40px;
  padding: 8px 17px;
  border: 0;
  border-radius: 10px;
  color: #65462f;
  background: transparent;
  font-family: 'Baloo 2', cursive;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.1;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}
.action-tab:hover { background: rgba(255, 249, 234, 0.72); }
.action-tab.active {
  color: #fffdf4;
  background: linear-gradient(180deg, #8e694a, #68462f);
  box-shadow: 0 3px 8px rgba(78, 49, 29, 0.28);
}
.action-tab:focus-visible {
  outline: 3px solid rgba(105, 143, 70, 0.42);
  outline-offset: 2px;
}
.action-tab-panel[hidden] { display: none; }
.action-tab-panel { min-width: 0; }
.action-list { width: 100%; }

@media (max-width: 560px) {
  .action-tabs { width: 100%; }
  .action-tab { flex: 1 1 46%; padding-inline: 9px; font-size: 0.82rem; }
}

.palm-weevil-help-layout { display:grid; grid-template-columns:minmax(210px,.78fr) 1.22fr; gap:18px; align-items:center; margin:15px 0; }
.palm-weevil-help-card .processionary-calendar { margin:16px 0; }
@media (max-width:720px) { .palm-weevil-help-layout { grid-template-columns:1fr; } }
.settings-two-column { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.settings-location-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.settings-location-grid .form-field span small { color:#8a7763; font-weight:600; }
@media (max-width:680px) { .settings-two-column,.settings-location-grid { grid-template-columns:1fr; gap:0; } }

.plots-map-wrap { background:linear-gradient(90deg,#c3a06f 0 50%,#b9dce2 50% 100%); }
.plots-map-land-background { fill:#c3a06f; }

/* ---------------- Modal: nombrar el bosque ---------------- */
.forest-name-input {
  width: 100%;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 2px solid #eee0c8;
  font-family: 'Quicksand', sans-serif;
  font-size: 1rem;
  color: var(--brown-dark);
  text-align: center;
}
.forest-name-input:focus { outline: none; border-color: var(--olive); }

/* ---------------- Certificado / impresión ---------------- */
#modal-print .modal-card {
  scrollbar-width: thin;
  scrollbar-color: #8b6042 #eadbc5;
}
#modal-print .modal-card::-webkit-scrollbar {
  width: 11px;
}
#modal-print .modal-card::-webkit-scrollbar-track {
  background: #eadbc5;
  border-radius: 999px;
}
#modal-print .modal-card::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #a97955, #71492f);
  border: 2px solid #eadbc5;
  border-radius: 999px;
}
#modal-print .modal-card::-webkit-scrollbar-thumb:hover {
  background: #5f3d29;
}

.certificate-view-title {
  margin: 0 42px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
  color: var(--brown-dark);
  font-family: 'Baloo 2', cursive;
}
.certificate-view-title img {
  width: 40px;
  height: 40px;
  object-fit: contain;
}
.print-certificate {
  text-align: center;
  padding: 10px 6px;
}
.cert-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 8px;
}
.cert-logo { height: 34px; width: auto; object-fit: contain; }
.cert-logo-game { height: 46px; }
.cert-official-title {
  font-family: 'Baloo 2', cursive;
  font-size: 1.15rem;
  color: var(--olive-dark);
  margin-bottom: 4px;
}
.cert-header .cert-title {
  font-family: 'Baloo 2', cursive;
  font-size: 1.4rem;
  color: var(--brown-dark);
}
.cert-header .cert-subtitle {
  font-size: 0.78rem;
  color: #8a7660;
  margin-top: 2px;
}
.cert-forest-name {
  font-family: 'Baloo 2', cursive;
  font-size: 1.1rem;
  color: var(--terracotta-dark);
  margin: 12px 0;
}
.cert-image {
  width: 100%;
  max-width: 560px;
  border-radius: 14px;
  border: 3px solid var(--sun);
  box-shadow: var(--shadow);
  margin: 6px 0 14px;
}
.cert-stats {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--brown-dark);
  margin-bottom: 10px;
}
.cert-stats b { color: var(--olive-dark); }
.cert-stats .cert-ranking {
  flex-basis: 100%;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 2px;
}
.cert-stats .cert-ranking b {
  color: var(--terracotta-dark);
  font-family: 'Baloo 2', cursive;
  font-size: 1.25rem;
}
.cert-date { font-size: 0.75rem; color: #8a7660; }

.certificate-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  text-align: center;
}
.btn-whatsapp {
  background: #218a55;
  border-color: #218a55;
  color: #fff;
}
.btn-whatsapp:hover { background: #176d42; border-color: #176d42; }
.certificate-email-panel {
  max-width: 610px;
  margin: 18px auto 4px;
  padding: 18px;
  border: 2px solid #e5cfaa;
  border-radius: 16px;
  background: #fffaf0;
  text-align: left;
}
.certificate-email-panel h3 {
  margin: 0 0 4px;
  color: var(--brown-dark);
  font-family: 'Baloo 2', cursive;
}
.certificate-email-panel > p {
  margin: 0 0 14px;
  color: #6f604f;
  font-size: 0.86rem;
}
.certificate-share-field {
  display: block;
  margin-top: 12px;
  color: var(--brown-dark);
  font-size: 0.86rem;
  font-weight: 700;
}
.certificate-share-field span { display: block; margin-bottom: 5px; }
.certificate-share-field input,
.certificate-share-field textarea {
  width: 100%;
  box-sizing: border-box;
  border: 2px solid #e5d7c0;
  border-radius: 11px;
  background: #fff;
  padding: 10px 12px;
  color: var(--brown-dark);
  font: inherit;
  font-weight: 500;
  resize: vertical;
}
.certificate-share-field input:focus,
.certificate-share-field textarea:focus {
  outline: none;
  border-color: var(--olive);
}
.certificate-email-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 14px;
}
.certificate-email-feedback {
  margin-top: 12px;
  padding: 9px 11px;
  border-radius: 10px;
  background: #eaf5e7;
  color: #356232;
  font-size: 0.84rem;
  font-weight: 700;
}
.certificate-email-feedback.error { background: #fff0ec; color: #a33e2c; }

@page {
  size: A4 portrait;
  margin: 10mm;
}

@media print {
  html,
  body {
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }

  /* No basta con ocultar el juego mediante visibility: seguiría reservando
     toda su altura y produciría páginas vacías. Durante la impresión dejamos
     en el flujo exclusivamente el modal del certificado. */
  body > * { display: none !important; }
  body > #modal-print {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #fff !important;
  }
  #modal-print .modal-card {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    animation: none !important;
    background: #fff !important;
  }
  #print-certificate {
    width: 100%;
    max-width: 190mm;
    margin: 0 auto;
    padding: 4mm;
    break-inside: avoid-page;
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  #print-certificate .cert-image {
    width: auto;
    max-width: 100%;
    max-height: 92mm;
    object-fit: contain;
    box-shadow: none;
  }
  .no-print { display: none !important; }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 760px) {
  .game-columns { display: block; }
  .season-year-panel { padding: 8px 9px 7px; }
  .season-year-head { align-items: flex-start; flex-direction: column; gap: 2px; }
  .season-year-head strong { font-size: 0.64rem; text-align: left; }
  .season-timeline-track { min-width: 900px; }
  .season-year-note { font-size: 0.56rem; text-align: left; }
  #nursery-list,
  #special-list { max-height: none; }
  #nursery-list .species-card,
  #special-list .species-card { flex-basis: 225px; width: 225px; }
  #special-list .tool-card-wrap { flex-basis: 225px; width: 225px; }
  .achievements-grid { grid-template-columns: 1fr; }
  .topbar { flex-direction: column; align-items: flex-start; }
  .env-hud { top: 10px; left: 14px; max-width: 160px; gap: 2px; }
  .env-hud .env-icon { width: 15px; flex-basis: 15px; font-size: 0.68rem; }
  .env-hud .env-label { font-size: 0.42rem; }
  .env-hud .env-value { font-size: 0.58rem; }
  .env-hud .env-sub { max-width: 60px; font-size: 0.4rem; }
}

@media (max-width: 420px) {
  .family-rating-box { gap: 10px; padding: 12px; }
  .family-rating-box .age-guidance-badge-large { width: 45px; height: 53px; }
  .age-guidance-copy span { max-width: 220px; }
  .eutro-steps { grid-template-columns: 1fr; }
  .certificate-actions .btn,
  .certificate-email-buttons .btn { width: 100%; }
  .certificate-email-panel { padding: 14px; }
  .species-botanical-image { height: min(300px, 42vh); }
  .reward-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .reward-species-card { padding: 6px 6px 9px; gap: 6px; }
  .reward-species-card h3 { font-size: 0.86rem; }
  .reward-species-card p { font-size: 0.65rem; }
  .reward-card-reader { padding: 46px 9px 9px; }
  .reward-species-card-expanded { padding: 10px 10px 15px; }
  .reward-species-card-expanded h3 { font-size: 1.18rem; }
  .reward-species-card-expanded p { font-size: 0.83rem; }
}

@media (max-width: 620px) {
  .reward-collection-panel { padding: 38px 10px 12px; }
  .reward-expedition-header { padding-inline: 2px; }
  .reward-collection-panel .reward-collection-title { font-size: 1.3rem; }
  .reward-expedition-header > p { font-size: 0.76rem; }
  .reward-expedition-tools { gap: 4px; padding-inline: 7px; }
  .reward-expedition-tools span { width: 24px; height: 24px; font-size: 0.82rem; }
  .reward-category-tabs { margin-inline: 0; }
  .reward-cards-grid { min-height: 410px; gap: 11px; }
  .reward-species-card {
    flex-basis: 218px;
    width: 218px;
    min-width: 218px;
    min-height: 398px;
    padding: 8px 7px 11px;
  }
  .reward-species-card h3 { font-size: 0.87rem; }
  .reward-species-card p { font-size: 0.63rem; }
  .reward-species-card p strong { font-size: 0.65rem; }
  .reward-card-reader { padding: 47px 8px 10px; }
  .reward-species-card-expanded {
    width: min(370px, 100%);
    min-width: 0;
    min-height: 0;
    padding: 11px 10px 15px;
  }
  .reward-species-card-expanded h3 { font-size: 1.15rem; }
  .reward-species-card-expanded h3 small { font-size: 0.7rem; }
  .reward-species-card-expanded p { font-size: 0.82rem; }
  .reward-species-card-expanded p strong { font-size: 0.84rem; }
}

/* ---------------- Baraja del vivero y las herramientas ---------------- */
.action-dock {
  position: relative;
  z-index: 10;
  pointer-events: auto;
  margin-bottom: 18px;
  overflow: hidden;
  border: 3px solid #9b6b2f;
  border-radius: 16px;
  background:
    linear-gradient(115deg, transparent 0 47%, rgba(255, 248, 221, 0.08) 48% 49%, transparent 50%),
    radial-gradient(circle at 13% 16%, rgba(255, 237, 190, 0.24), transparent 27%),
    linear-gradient(145deg, #526746, #304735 68%, #263c2d);
  box-shadow: 0 6px 15px rgba(38, 24, 15, .28), inset 0 0 0 2px #d6aa55;
}

.action-dock::after {
  content: "✦  CUADERNO DE CAMPO  ✦";
  position: absolute;
  top: 13px;
  right: 17px;
  color: rgba(255, 246, 215, 0.55);
  font-size: 0.61rem;
  font-weight: 900;
  letter-spacing: 0.16em;
  pointer-events: none;
}

/* Los dos rótulos de archivo comparten exactamente escala y espaciado. */
.action-dock::after,
.reward-collection-panel::after {
  font-family: 'Quicksand', sans-serif;
  font-size: 0.61rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.16em;
}

.action-dock .action-tabs {
  position: relative;
  z-index: 1;
  width: fit-content;
  max-width: calc(100% - 190px);
  padding: 4px;
  border: 1px solid rgba(255, 242, 205, 0.3);
  border-radius: 13px;
  background: rgba(38, 31, 22, 0.36);
  box-shadow: inset 0 1px 5px rgba(29, 20, 13, 0.27);
}

.action-dock .action-tab {
  border-color: transparent;
  color: #fff6dc;
  background: transparent;
}

.action-dock .action-tab:hover,
.action-dock .action-tab:focus-visible {
  background: rgba(255, 246, 220, 0.13);
}

.action-dock .action-tab.active {
  color: #452f1f;
  border-color: #e5c88c;
  background: linear-gradient(180deg, #fff8df, #e9d09c);
  box-shadow: 0 3px 7px rgba(31, 21, 13, 0.28);
}

.action-dock .action-panel {
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.action-dock .action-list,
.action-dock .species-card,
.action-dock .tool-card-wrap,
.action-dock .tool-help-corner { pointer-events: auto; }

.season-information {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid rgba(255, 242, 205, 0.3);
  border-radius: 14px;
  background: rgba(255, 249, 225, 0.92);
  color: #4b382a;
  box-shadow: inset 0 2px 8px rgba(60, 40, 24, 0.16);
}
.season-current-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 2px solid #8a6844;
  border-radius: 12px;
  background: linear-gradient(135deg, #fff7d9, #e8d3a5);
  box-shadow: 0 3px 8px rgba(64, 42, 25, 0.15);
}
.season-current-icon { flex: 0 0 auto; font-size: 1.65rem; }
.season-current-card div { display: grid; gap: 2px; min-width: 0; }
.season-current-card strong { color: #4e3624; font-size: 0.9rem; }
.season-current-card span:not(.season-current-icon) { color: #785338; font-size: 0.72rem; font-weight: 800; }
.season-current-card small { color: #675544; font-size: 0.64rem; line-height: 1.3; }
.season-cycle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.season-cycle-card {
  --season-accent: #77965b;
  margin: 0;
  padding: 9px 10px;
  border: 2px solid rgba(88, 61, 38, 0.27);
  border-left: 6px solid var(--season-accent);
  border-radius: 11px;
  background: rgba(255, 252, 237, 0.86);
  box-shadow: 0 3px 7px rgba(63, 43, 27, 0.1);
}
.season-cycle-card.season-invierno { --season-accent: #72a5ba; }
.season-cycle-card.season-primavera { --season-accent: #78a853; }
.season-cycle-card.season-verano { --season-accent: #d8a82e; }
.season-cycle-card.season-otono { --season-accent: #c8733e; }
.season-cycle-card.active {
  border-color: var(--season-accent);
  background: #fff9df;
  box-shadow: 0 0 0 3px rgba(111, 142, 78, 0.24), 0 5px 10px rgba(55, 36, 22, 0.15);
}
.season-cycle-card header { display: flex; align-items: center; gap: 7px; }
.season-cycle-card header > span { font-size: 1.25rem; }
.season-cycle-card header div { display: grid; gap: 1px; }
.season-cycle-card header strong { color: #4d3727; font-size: 0.78rem; }
.season-cycle-card header small { color: #8a5c3d; font-size: 0.61rem; font-weight: 800; }
.season-cycle-card p { margin: 6px 0; color: #5f5143; font-size: 0.65rem; line-height: 1.38; }
.season-cycle-card b { display: block; color: #4d673c; font-size: 0.6rem; line-height: 1.3; }
.monthly-temperature-section {
  padding: 9px 10px 10px;
  border: 1px solid rgba(91, 61, 36, 0.24);
  border-radius: 11px;
  background: rgba(236, 220, 183, 0.56);
}
.monthly-temperature-section h3 { margin: 0; color: #503824; font-size: 0.78rem; }
.monthly-temperature-section > p { margin: 2px 0 7px; color: #6e5944; font-size: 0.62rem; }
.monthly-temperature-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 4px;
}
.monthly-temperature-item {
  display: grid;
  gap: 1px;
  place-items: center;
  min-width: 0;
  padding: 5px 2px;
  border: 1px solid rgba(83, 57, 35, 0.23);
  border-radius: 7px;
  background: #fff9e8;
}
.monthly-temperature-item span { color: #7a6049; font-size: 0.52rem; font-weight: 850; }
.monthly-temperature-item strong { color: #a25332; font-size: 0.66rem; }
.monthly-temperature-item.active {
  border-color: #6a7f47;
  background: #657d46;
  box-shadow: 0 3px 7px rgba(56, 69, 38, 0.25);
}
.monthly-temperature-item.active span,
.monthly-temperature-item.active strong { color: #fffbe7; }

#nursery-list,
#special-list {
  min-height: 222px;
  gap: 9px;
  padding: 8px 5px 13px;
  scroll-padding-inline: 5px;
  scrollbar-color: #a6754e #dec49a;
  cursor: grab;
  user-select: none;
  touch-action: pan-x pan-y;
}

#nursery-list.is-pointer-down,
#special-list.is-pointer-down { cursor: grabbing; }

#nursery-list.is-dragging,
#special-list.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}

#nursery-list img,
#special-list img {
  -webkit-user-drag: none;
  user-select: none;
}

#nursery-list::-webkit-scrollbar-track,
#special-list::-webkit-scrollbar-track {
  background: #dec49a;
  border: 1px solid rgba(83, 52, 30, 0.2);
}

#nursery-list::-webkit-scrollbar-thumb,
#special-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #b9875d, #68452f);
  border-color: #dec49a;
}

#nursery-list .species-card.species-deck-card,
#special-list .species-card.species-deck-card,
#treatments-list .species-card.species-deck-card,
#special-list .tool-card-wrap {
  flex: 0 0 112px;
  width: 112px;
  scroll-snap-align: start;
}

.species-card.species-deck-card {
  --action-accent: #547745;
  --action-accent-dark: #2f5032;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  min-height: 205px;
  padding: 5px 5px 7px;
  overflow: hidden;
  border: 2px solid #6f4a31;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255,255,255,0.33), transparent 14% 86%, rgba(91,58,33,0.08)),
    #f8edcf;
  color: #38291f;
  text-align: center;
  box-shadow:
    0 4px 0 #49301f,
    0 7px 10px rgba(26, 18, 11, 0.3),
    inset 0 0 0 1px #e0b96e;
  isolation: isolate;
  transition: transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

.species-card.species-deck-card::before,
.species-card.species-deck-card::after {
  position: absolute;
  z-index: 4;
  top: 6px;
  color: #fff4cd;
  font-size: 0.52rem;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(35, 20, 10, 0.7);
  pointer-events: none;
}

.species-card.species-deck-card::before { content: "✦"; left: 8px; }
.species-card.species-deck-card::after {
  content: "🔎";
  right: 8px;
  opacity: 0;
  transform: scale(.72);
  transition: opacity .15s ease, transform .15s ease;
}
.species-card.species-deck-card:hover::after,
.species-card.species-deck-card:focus-visible::after { opacity:1; transform:scale(1); }
.tool-card-wrap .species-deck-card::after { right: 36px; }

/* La pestaña Extras comparte exactamente la baraja y el desplazamiento de
   Vivero y Herramientas. */
#extras-list {
  min-height: 222px;
  max-height: none;
  gap: 9px;
  padding: 8px 5px 13px;
  scroll-padding-inline: 5px;
  scrollbar-width: thin;
  scrollbar-color: #a6754e #dec49a;
  cursor: grab;
  user-select: none;
  touch-action: pan-x pan-y;
}
#extras-list.is-pointer-down { cursor: grabbing; }
#extras-list.is-dragging { scroll-snap-type:none; cursor:grabbing; }
#extras-list img { -webkit-user-drag:none; user-select:none; }
#extras-list::-webkit-scrollbar { width:11px; height:11px; }
#extras-list::-webkit-scrollbar-track { background:#dec49a; border:1px solid rgba(83,52,30,.2); border-radius:999px; }
#extras-list::-webkit-scrollbar-thumb { background:linear-gradient(180deg,#b9875d,#68452f); border:2px solid #dec49a; border-radius:999px; }
#extras-list .species-card.species-deck-card,
#extras-list .tool-card-wrap { flex:0 0 112px; width:112px; scroll-snap-align:start; }
#extras-list .tool-card-wrap { position:relative; }
#extras-list .tool-card-wrap .species-card.species-deck-card { width:100%; height:100%; flex:none; }

.species-card.species-deck-card:hover {
  z-index: 2;
  border-color: #f0d084;
  transform: translateY(-3px) rotate(-0.35deg) scale(1.018);
  box-shadow:
    0 5px 0 #49301f,
    0 11px 15px rgba(22, 15, 9, 0.36),
    inset 0 0 0 1px #f0d084;
}

.species-card.species-deck-card:focus-visible {
  outline: 4px solid #fff2b5;
  outline-offset: 3px;
}

.species-deck-card .action-card-art {
  position: relative;
  display: block;
  width: 100%;
  height: 112px;
  flex: 0 0 112px;
  overflow: hidden;
  border: 3px solid var(--action-accent-dark);
  border-radius: 8px 8px 18px 8px;
  background: #fffaf0;
  box-shadow: inset 0 0 0 2px rgba(255, 248, 218, 0.7), 0 2px 5px rgba(55, 36, 22, 0.22);
}

.species-deck-card .action-card-art::before {
  content: "";
  position: absolute;
  inset: auto 8px 0;
  height: 7px;
  border-radius: 999px 999px 0 0;
  background: var(--action-accent);
}

.species-deck-card .action-card-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #fffaf0;
  transition: transform 0.25s ease;
}

.species-deck-card .action-card-art.action-card-art-vector {
  display: grid;
  place-items: center;
  padding: 7px;
  background: linear-gradient(145deg, #f5ead0 0%, #dfc998 100%);
}

.action-card-art-vector .fence-repair-icon {
  width: 92%;
  height: 92%;
  margin: 0;
  filter: drop-shadow(0 3px 2px rgba(72, 46, 27, 0.24));
  transition: transform 0.25s ease;
}

.tool-deck-card:hover:not(.planted) .action-card-art-vector .fence-repair-icon {
  transform: scale(1.045) rotate(-1deg);
}

/* Las láminas de herramientas son verticales: cubren el marco completo para
   evitar las franjas blancas laterales que dejaba object-fit: contain. */
.tool-deck-card .action-card-art {
  background: #eee0bd;
}
.tool-deck-card .action-card-art img {
  object-fit: cover;
  object-position: center;
  background: #eee0bd;
  transform: scale(1.07);
}
/* Las cartas de tratamientos deben rellenar el marco con la misma relación de
   aspecto que el resto de cartas (object-fit: cover), en vez de quedar
   "contenidas" con bandas y tamaños distintos entre sí. */
.tool-deck-card .action-card-art img[src*="whistle.svg"],
.tool-deck-card .action-card-art img[src*="palm-weevil-trap.svg"],
#action-panel-treatments .action-card-art img {
  object-fit: cover;
  object-position: center;
  transform: scale(1.07);
  padding: 0;
  background: #eee0bd;
}
#action-panel-treatments .species-deck-card:hover .action-card-art img,
.tool-deck-card:hover .action-card-art img[src*="whistle.svg"],
.tool-deck-card:hover .action-card-art img[src*="palm-weevil-trap.svg"] { transform:scale(1.035); }

.settings-review-fields { margin:14px 0; padding:14px; border:1px solid #e5d2ab; border-radius:16px; background:#fffaf0; }
.settings-review-fields textarea { resize:vertical; min-height:92px; }

.game-reviews-strip {
  position:relative;
  width:min(100%, 1430px);
  margin:16px auto;
  padding:14px 0 16px;
  overflow:hidden;
  border:2px solid rgba(197,151,79,.85);
  border-radius:22px;
  background:rgba(255,250,235,.91);
  box-shadow:0 10px 28px rgba(70,45,25,.16),0 0 0 7px rgba(255,247,217,.24);
}
.game-reviews-strip.is-dismissed { display:none!important; }
.game-reviews-header { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:9px 15px; margin:0 18px 10px; }
.game-reviews-strip h2 { margin:0; color:#513923; text-align:center; font:800 1.08rem/1.2 'Baloo 2',sans-serif; }
.game-review-add-button { padding:7px 14px; border:1px solid #8a5c34; border-radius:999px; color:#fff; background:#7b5130; font:800 .78rem/1 'Baloo 2',sans-serif; cursor:pointer; }
.game-review-add-button:hover { background:#5f3b22; transform:translateY(-1px); }
.game-reviews-close {
  position:absolute;
  top:9px;
  right:11px;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid #cba879;
  border-radius:50%;
  color:#654629;
  background:#f7ead0;
  font:800 1.1rem/1 sans-serif;
  cursor:pointer;
}
.game-reviews-close:hover { color:#fff; background:#7b5130; }
#screen-goodbye {
  flex-direction:column;
  gap:16px;
}
#screen-goodbye > .game-reviews-strip {
  order:1;
  width:min(760px,calc(100% - 24px));
  margin:0 auto;
  z-index:2;
}
#screen-goodbye > .intro-card {
  order:2;
  margin:0 auto;
}
.game-review-modal-card { max-height:min(720px,90vh); overflow:auto; scrollbar-color:#815635 #ead6b5; scrollbar-width:thin; }
.game-review-modal-card::-webkit-scrollbar { width:11px; }
.game-review-modal-card::-webkit-scrollbar-track { background:#ead6b5; border-radius:10px; }
.game-review-modal-card::-webkit-scrollbar-thumb { border:2px solid #ead6b5; border-radius:10px; background:#815635; }
.refuge-help-card { max-width:820px; max-height:88vh; overflow:auto; scrollbar-color:#815635 #ead6b5; }
.refuge-help-layout { display:grid; grid-template-columns:minmax(180px,280px) 1fr; gap:22px; align-items:start; }
.refuge-help-layout img { width:100%; border:2px solid #c99b59; border-radius:18px; background:#fff8e9; box-shadow:0 9px 22px rgba(72,48,28,.14); }
.refuge-help-layout p,.refuge-help-layout li { line-height:1.55; }
.refuge-help-layout h3 { margin:12px 0 5px; color:#41653b; }
@media(max-width:650px){ .refuge-help-layout { grid-template-columns:1fr; } .refuge-help-layout img { max-width:260px; margin:auto; } }
.game-reviews-viewport { overflow:hidden; mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent); }
.game-reviews-track { display:flex; width:max-content; gap:12px; padding:3px 14px; }
.game-reviews-track.is-moving { animation:game-reviews-marquee 45s linear infinite; }
.game-reviews-viewport:hover .game-reviews-track,.game-reviews-viewport:focus-within .game-reviews-track { animation-play-state:paused; }
.game-review-card { width:min(330px,78vw); min-height:118px; padding:13px 15px; flex:0 0 auto; border:1px solid #e1c98e; border-radius:16px; background:#fff; color:#5b4938; box-shadow:0 6px 14px rgba(72,48,28,.11); }
.game-review-card strong { display:block; color:#365c38; font:800 .92rem/1.2 'Baloo 2',sans-serif; }
.game-review-stars { margin:3px 0 5px; color:#fbbc04; letter-spacing:2px; font-size:1rem; }
.game-review-card p { margin:0; font-size:.82rem; line-height:1.4; }
.game-review-empty { width:min(560px,82vw); min-height:auto; text-align:center; }
@keyframes game-reviews-marquee { to { transform:translateX(calc(-50% - 6px)); } }
@media (prefers-reduced-motion:reduce) { .game-reviews-track.is-moving { animation:none; } }
.species-deck-card:hover:not(.planted) .action-card-art img { transform: scale(1.025); }
.tool-deck-card:hover:not(.planted) .action-card-art img { transform: scale(1.11); }

.species-card.species-deck-card .sp-info {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: stretch;
  padding: 0 2px 1px;
}

.species-deck-card .sp-info br { display: none; }

.species-card.species-deck-card .sp-name {
  display: block;
  min-height: 27px;
  margin: -7px 2px 3px;
  padding: 3px 3px;
  position: relative;
  z-index: 3;
  border: 1px solid #e9c77d;
  border-radius: 6px;
  background: linear-gradient(180deg, var(--action-accent), var(--action-accent-dark));
  color: #fffaf0;
  font-family: 'Baloo 2', cursive;
  font-size: 0.68rem;
  font-weight: 900;
  line-height: 1.08;
  text-align: center;
  text-shadow: 0 1px 2px rgba(25, 17, 10, 0.55);
  box-shadow: 0 2px 4px rgba(45, 30, 18, 0.25);
}

.species-card.species-deck-card .sp-sci {
  display: block;
  min-height: 2.1em;
  padding: 0 1px;
  color: #6d5847;
  font-size: 0.51rem;
  line-height: 1.05;
  text-align: center;
}

.species-card.species-deck-card .sp-tag {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  margin: 2px 0 0;
  padding: 3px 3px;
  border: 1px solid rgba(91, 61, 36, 0.24);
  border-radius: 7px;
  background: rgba(255, 251, 235, 0.78);
  color: #4b5235;
  font-size: 0.5rem;
  font-weight: 800;
  line-height: 1.14;
  text-align: center;
}

.species-card.species-deck-card.off-season .sp-tag {
  background: #f2ddc9;
  color: #884e34;
}

.species-card.species-deck-card.selected {
  border-color: #ffe69b;
  background: #fff3d2;
  box-shadow:
    0 6px 0 #775133,
    0 0 0 5px rgba(255, 223, 118, 0.52),
    0 12px 19px rgba(26, 18, 11, 0.38);
  transform: translateY(-3px);
}

.species-card.species-deck-card.planted {
  opacity: 1;
  filter: none;
}

.species-card.species-deck-card .sp-check,
.species-card.species-deck-card .sp-count {
  z-index: 7;
  top: 8px;
  right: 7px;
  min-width: 22px;
  min-height: 20px;
  display: grid;
  place-items: center;
  padding: 2px 4px;
  border: 1px solid #f2d998;
  border-radius: 50%;
  background: var(--action-accent-dark);
  color: #fff8dd;
  box-shadow: 0 2px 4px rgba(42, 28, 17, 0.32);
}
.species-card.species-deck-card .sp-count {
  right:auto;
  left:7px;
}
.species-card.species-deck-card .sp-count.limit-reached {
  border-color:#ffd2c8;
  background:#b62020;
  color:#fff;
  box-shadow:0 0 0 3px rgba(182,32,32,.2),0 2px 4px rgba(42,28,17,.32);
}
.species-card-wrap { position:relative; display:flex; flex:0 0 112px; width:112px; min-height:205px; scroll-snap-align:start; }
.species-card-wrap > .species-card { width:100%; height:100%; }
.species-help-corner { background:#fff6d9; color:#53381f; border-color:#b9853f; }

.action-card-type-arbol { --action-accent: #4f7d45; --action-accent-dark: #2e5234; }
.action-card-type-arbusto { --action-accent: #708348; --action-accent-dark: #465b31; }
.action-card-type-herbacea { --action-accent: #aa6d72; --action-accent-dark: #75434d; }
.action-card-type-cesped { --action-accent: #77a759; --action-accent-dark: #426d3e; }
.action-card-type-charca { --action-accent: #4d8f9d; --action-accent-dark: #315f6c; }
.action-card-type-tool { --action-accent: #a36e3e; --action-accent-dark: #664329; }

#special-list .tool-card-wrap {
  position: relative;
  display: flex;
  min-height: 205px;
}

#special-list .tool-card-wrap .species-card.species-deck-card {
  width: 100%;
  min-height: 205px;
}

.species-card.species-deck-card.tool-card-has-help { padding-right: 7px; }

.tool-card-wrap .tool-help-corner {
  z-index: 9;
  top: 8px;
  right: 7px;
  width: 22px;
  height: 22px;
  border-width: 1px;
  border-color: #f2d998;
  background: #68452f;
  color: #fff8dd;
}

@media (max-width: 760px) {
  .action-dock::after { display: none; }
  .action-dock .action-tabs { width: 100%; max-width: none; }
  .action-dock .action-tab {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 5px;
    font-size: 0.68rem;
    line-height: 1.1;
  }
  .season-information { padding: 7px; }
  .season-cycle-grid { grid-template-columns: 1fr; }
  .monthly-temperature-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  #nursery-list,
  #special-list { min-height: 214px; }
  #nursery-list .species-card.species-deck-card,
  #special-list .species-card.species-deck-card,
  #special-list .tool-card-wrap {
    flex-basis: 108px;
    width: 108px;
  }
  .species-card.species-deck-card,
  #special-list .tool-card-wrap,
  #special-list .tool-card-wrap .species-card.species-deck-card { min-height: 200px; }
  .species-deck-card .action-card-art { height: 108px; flex-basis: 108px; }
  .species-card.species-deck-card .sp-name { font-size: 0.64rem; }
  .species-card.species-deck-card .sp-tag { font-size: 0.47rem; }
}

/* El Archivo de expedición comparte la misma escala que la baraja del vivero.
   Los datos completos siguen disponibles al abrir la carta ampliada. */
.reward-cards-grid {
  min-height: 225px;
  gap: 11px;
}
.reward-cards-grid .reward-species-card {
  flex: 0 0 112px;
  width: 112px;
  min-width: 112px;
  min-height: 205px;
  padding: 5px 5px 7px;
  border-width: 2px;
  border-radius: 12px;
  box-shadow: 0 4px 0 #49301f, 0 7px 10px rgba(26, 18, 11, 0.3), inset 0 0 0 1px #d4ae68;
}
.reward-cards-grid .reward-species-card::before,
.reward-cards-grid .reward-species-card::after {
  top: 6px;
  width: 16px;
  height: 16px;
  border-width: 1px;
  font-size: 0.48rem;
}
.reward-cards-grid .reward-species-card::before { left: 7px; }
.reward-cards-grid .reward-species-card::after { right: 7px; }
.reward-cards-grid .reward-species-image {
  width: 100%;
  height: 112px;
  flex: 0 0 112px;
  aspect-ratio: auto;
  margin: 0;
  border-width: 3px;
  border-radius: 8px 8px 18px 8px;
}
.reward-cards-grid .reward-species-card h3 {
  width: calc(100% - 4px);
  min-height: 35px;
  margin: -7px 2px 3px;
  padding: 4px 3px 3px;
  border-width: 1px;
  border-radius: 6px;
  font-size: 0.64rem;
  line-height: 1.05;
}
.reward-cards-grid .reward-species-card h3 small {
  font-size: 0.45rem;
  line-height: 1.04;
}
.reward-cards-grid .reward-card-facts {
  display: grid;
  flex: 1 1 auto;
  min-height: 28px;
  margin: 0 2px;
  padding: 3px;
  place-items: center;
  border-width: 1px;
  border-radius: 7px;
  text-align: center;
}
.reward-cards-grid .reward-card-facts p { display: none; }
.reward-cards-grid .reward-card-facts::after {
  content: "Pulsa para explorar";
  color: #554332;
  font-size: 0.48rem;
  font-weight: 850;
  line-height: 1.1;
}
.reward-cards-grid button.reward-species-card:hover {
  transform: translateY(-3px) rotate(-0.35deg) scale(1.018);
}

@media (max-width: 760px) {
  .reward-cards-grid .reward-species-card {
    flex-basis: 108px;
    width: 108px;
    min-width: 108px;
    min-height: 200px;
  }
  .reward-cards-grid .reward-species-image { height: 108px; flex-basis: 108px; }
}

/* ---------------- Senda estacional de fantasía ----------------
   El calendario conserva internamente sus 365 días, pero la interfaz enseña
   solo las cuatro etapas, el punto actual y la temperatura del parque. */
.season-year-panel {
  position: relative;
  margin: 5px 0 13px;
  padding: 12px 18px 11px;
  overflow: visible;
  border: 3px solid #9b6b2f;
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% -55%, rgba(255, 220, 126, 0.2), transparent 58%),
    linear-gradient(135deg, #18282c 0%, #2e3c35 50%, #3b2b20 100%);
  box-shadow:
    0 6px 15px rgba(38, 24, 15, 0.3),
    inset 0 0 0 2px #d6aa55,
    inset 0 0 22px rgba(0, 0, 0, 0.34);
}
.season-year-panel::before,
.season-year-panel::after {
  content: "◆";
  position: absolute;
  top: 50%;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  transform: translateY(-50%) rotate(45deg);
  border: 2px solid #e1bb69;
  border-radius: 5px;
  background: #674521;
  color: #f9df91;
  box-shadow: 0 0 0 3px #2d2119, 0 0 10px rgba(246, 198, 92, 0.5);
  font-size: 0.55rem;
}
.season-year-panel::before { left: -13px; }
.season-year-panel::after { right: -13px; }
.season-year-head { margin: 0 4px 8px; }
.season-year-panel .season-year-head h2 {
  color: #ffe39a;
  font-family: 'Baloo 2', cursive;
  font-size: 1rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 2px #100c08, 0 0 9px rgba(255, 210, 101, 0.26);
}
.season-year-head strong {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff4d0;
  font-size: 0.74rem;
  font-weight: 700;
}
.season-year-head strong b { color: #ffd66f; }
.season-summary-icon {
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  border: 1px solid #ecc96f;
  border-radius: 50%;
  background: #593d24;
  box-shadow: inset 0 0 7px rgba(255, 226, 138, 0.35);
  font-size: 1rem;
}
.season-timeline-scroll {
  overflow: visible;
  padding: 0;
  scrollbar-width: none;
}
.season-timeline-scroll::-webkit-scrollbar { display: none; }
.season-timeline-track {
  width: 100%;
  min-width: 0;
  padding: 13px 0 8px;
}
.season-timeline-bands {
  height: 43px;
  overflow: hidden;
  border: 2px solid #e2bb62;
  border-radius: 12px;
  background: #241c17;
  box-shadow: inset 0 0 0 2px rgba(44, 28, 17, 0.58), 0 2px 8px rgba(0, 0, 0, 0.35);
}
.season-timeline-band {
  border-right: 2px solid rgba(255, 241, 188, 0.38);
  color: #fff9df;
  font-family: 'Baloo 2', cursive;
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  text-shadow: 0 2px 2px rgba(25, 17, 10, 0.88);
  box-shadow: inset 0 -9px 14px rgba(42, 29, 19, 0.24), inset 0 8px 12px rgba(255, 255, 255, 0.12);
}
.season-timeline-band.season-invierno { background: linear-gradient(135deg, #6b95ad, #b8d9e4); }
.season-timeline-band.season-primavera { background: linear-gradient(135deg, #4d8a4f, #9ac56c); }
.season-timeline-band.season-verano { background: linear-gradient(135deg, #c8872f, #f0c85a); }
.season-timeline-band.season-otono { background: linear-gradient(135deg, #98502e, #d7863e); }
.season-timeline-days {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 1px;
  display: block;
  height: 6px;
  overflow: hidden;
  border: 1px solid #6c4b25;
  border-radius: 999px;
  background: rgba(19, 14, 11, 0.74);
  box-shadow: none;
}
.season-year-progress {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #c79036, #ffe28a);
  box-shadow: 0 0 7px rgba(255, 216, 102, 0.75);
}
.season-timeline-months { display: none; }
.season-timeline-today {
  top: 7px;
  bottom: 5px;
  width: 3px;
  transform: translateX(-1px);
  border-radius: 999px;
  background: #fff0a6;
  box-shadow: 0 0 4px #5f351e, 0 0 11px #ffdc69;
}
.season-timeline-today::before {
  top: 14px;
  width: 12px;
  height: 12px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 2px solid #fff0aa;
  border-radius: 3px;
  background: #c73e2f;
  box-shadow: 0 0 0 2px #5f2d1f, 0 0 10px #ffd567;
}
.season-timeline-today span {
  top: -11px;
  padding: 3px 8px;
  border: 1px solid #ffe59a;
  background: #743622;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.38);
  color: #fff2bd;
  font-size: 0.54rem;
}
.season-year-note {
  margin: 7px 0 0;
  color: #ddcfac;
  font-size: 0.62rem;
  text-align: center;
}
.garden-season .garden-temperature {
  margin-left: 3px;
  padding-left: 6px;
  border-left: 1px solid rgba(77, 50, 30, 0.35);
  color: #914b27;
  font-size: 0.58rem;
  font-weight: 900;
  white-space: nowrap;
}

@media (max-width: 680px) {
  .season-year-panel { padding: 10px 11px 9px; border-width: 2px; }
  .season-year-panel::before,
  .season-year-panel::after { display: none; }
  .season-year-head { align-items: flex-start; gap: 5px; }
  .season-year-panel .season-year-head h2 { font-size: 0.8rem; }
  .season-year-head strong { gap: 4px; font-size: 0.58rem; }
  .season-summary-icon { width: 22px; height: 22px; font-size: 0.78rem; }
  .season-timeline-track { min-width: 0; }
  .season-timeline-bands { height: 39px; }
  .season-timeline-band { font-size: 0.55rem; }
  .season-year-note { font-size: 0.55rem; }
  .garden-season { gap: 3px; }
  .garden-season .garden-temperature { padding-left: 4px; font-size: 0.49rem; }
}

/* Ajuste final: el archivo se comporta como una bandeja compacta y continua. */
.reward-collection-panel { padding:14px 12px 9px; margin-bottom:10px; }
.reward-expedition-header { padding:0 8px 5px; }
.reward-collection-panel .reward-collection-title { font-size:1.62rem; line-height:1; }
.reward-expedition-header > p { margin:4px auto 5px; font-size:.8rem; }
.reward-category-tabs { margin:0 0 6px; padding:5px 6px 6px; }
.reward-cards-grid { min-height:215px; margin:0; padding:4px 2px 6px; gap:10px; }
.reward-cards-empty { margin:6px 0 2px; padding:12px; }

/* Ajustes visuales compactos de julio de 2026. */
.intro-card::before { display:none; }
.intro-card .intro-game-logo { width:250px; height:164px; margin-top:-8px; }
.intro-card .intro-symbol-logo { width:260px; height:122px; }
.goodbye-game-title { margin:0 0 4px; color:var(--olive-dark); font:800 1.1rem/1.1 'Baloo 2',cursive; }

.register-main-actions { display:flex; justify-content:center; margin-top:16px; }
.register-main-actions .btn { width:min(100%,340px); }
.register-action-divider { display:flex; align-items:center; gap:12px; margin:15px 0 11px; color:#8b735b; font-size:.72rem; font-weight:800; }
.register-action-divider::before,.register-action-divider::after { content:""; height:1px; flex:1; background:linear-gradient(90deg,transparent,#d8c39a); }
.register-action-divider::after { background:linear-gradient(90deg,#d8c39a,transparent); }
.register-start-actions { display:flex; flex-direction:column; align-items:center; gap:9px; margin-top:0; }
.register-start-actions .btn,.register-start-actions .btn:last-child { width:min(100%,340px); min-height:44px; }
.register-entry-actions { display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:10px; margin-top:16px; }
.register-entry-actions .btn { width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; }
.register-choice-or { color:#80694f; font:800 .9rem/1 'Baloo 2',sans-serif; text-transform:lowercase; }
.register-start-actions .btn,.register-start-actions .btn:last-child { background:#fffdf8; color:#563f2d; border:2px solid #78995d; }
.register-start-actions .btn:hover { background:#f7f2e7; }
@media (max-width:680px) { .register-entry-actions { grid-template-columns:1fr; } .register-choice-or { text-align:center; } }

.topbar { flex-wrap:nowrap; padding:2px 4px 5px; min-height:88px; }
.topbar .title { gap:5px; }
.topbar .title .logo-emoji { width:94px; height:82px; object-fit:contain; }
.topbar .title h1 { margin:0; font-size:1.34rem; }
.topbar .actions { gap:7px; }

.season-year-panel { margin:2px 0 10px; padding:8px 18px 7px; }
.season-year-head { margin:0 4px 2px; }
.season-timeline-track { padding:6px 0 7px; }
.season-year-note { margin:3px 0 0; }
.season-timeline-band { background-position:center!important; background-size:cover!important; background-repeat:no-repeat!important; }
.season-timeline-band.season-invierno { background-image:linear-gradient(rgba(44,78,93,.08),rgba(44,78,93,.18)),url("img/seasons/winter.svg"); }
.season-timeline-band.season-primavera { background-image:linear-gradient(rgba(48,90,49,.06),rgba(48,90,49,.17)),url("img/seasons/spring.svg"); }
.season-timeline-band.season-verano { background-image:linear-gradient(rgba(122,72,25,.03),rgba(122,72,25,.18)),url("img/seasons/summer.svg"); }
.season-timeline-band.season-otono { background-image:linear-gradient(rgba(88,43,26,.05),rgba(88,43,26,.2)),url("img/seasons/autumn.svg"); }

/* Segundo halo translúcido sin sustituir el borde dorado existente. */
.season-year-panel,.garden-wrap,.action-dock,.reward-collection-panel {
  outline:6px solid rgba(255,248,220,.25);
  outline-offset:3px;
}

@media (max-width:680px){
  .topbar { flex-wrap:wrap; min-height:0; }
  .topbar .title .logo-emoji { width:76px; height:68px; }
  .intro-card .intro-game-logo { width:220px; height:142px; }
}

@media (max-width:620px) {
  .reward-collection-panel { padding:11px 8px 8px; }
  .reward-expedition-header { padding:0 3px 5px; }
  .reward-cards-grid { min-height:215px; }
  .register-main-actions,.register-start-actions { grid-template-columns:1fr; }
  .register-start-actions .btn:last-child { grid-column:auto; width:100%; }
}