/* ═══════════════════════════════════════════════════════════
   JARDIM URBANO — style.css (v4 — Final)
   E1: Apartamento      → bege / madeira / verde
   E2: Jardim Condomínio → concreto / ferro / verde
   E3: A Rua             → asfalto / chuva / cinza
   E4: O Retorno         → dourado / quente / vivo
═══════════════════════════════════════════════════════════ */

:root {
  --wall:          #e8d5b4;
  --floor:         #b87c48;
  --floor-dark:    #9a6030;
  --wood:          #7a5230;
  --wood-dark:     #5a3818;
  --wood-light:    #c8946a;
  --concrete:      #b0aa9e;
  --concrete-dark: #8a8278;
  --concrete-light:#d0cbbf;
  --iron:          #3a3a3a;
  --tile-light:    #cdc8be;
  --tile-dark:     #b0ab9e;
  --condo-floor:   #9a9488;
  --condo-sky:     #c8d8e8;
  --planter-gray:  #7a7870;
  --asphalt:       #2a2a2e;
  --asphalt-wet:   #1e1e24;
  --sidewalk:      #7a7870;
  --sidewalk-light:#9a9890;
  --sky-storm:     #3a3e4a;
  --sky-storm-low: #282c36;
  --building-1:    #4a4e58;
  --building-2:    #3a3e48;
  --building-3:    #525660;
  --building-4:    #3e4250;
  --win-lit:       #f0d878;
  --win-dark:      #2a2e38;
  --pole-color:    #2a2c30;
  --lamp-warm:     #f8e090;
  --rain-color:    rgba(180,210,240,0.55);
  --green-dark:    #3a7030;
  --green-mid:     #4e8c40;
  --green-light:   #6aaa56;
  --green-pale:    #a8d490;
  --ipe-yellow:    #f0c020;
  --ipe-yellow-d:  #c89010;
  --manaca-purple: #8858c8;
  --manaca-lilac:  #b890e8;
  --quaresmeira:   #d060a0;
  --jabuti-fruit:  #2a1a4a;
  --iris-purple:   #7060c8;
  --iris-yellow:   #e8d030;
  --guaivira-blue: #4878d8;
  --guaivira-pale: #80a8f0;
  --inga-green:    #3a6828;
  --inga-pod:      #5a3818;
  --taboa-brown:   #6a4020;
  --taboa-cattail: #5a3010;
  --taboa-green:   #4a7030;
  /* Estágio 4 */
  --afternoon-gold:#f0c060;
  --afternoon-glow:#f8d880;
  --wall-warm:     #f0dfc0;
  --text-dark:     #1e1e1e;
  --text-mid:      #4a4a4a;
  --dialog-bg:     #f8f4ee;
  --dialog-border: #c0b090;
  --hud-bg:        rgba(15,15,20,0.80);
  --hud-color:     #e8e4dc;
  --font-story:    'Lora', Georgia, serif;
  --font-ui:       'Nunito', 'Segoe UI', sans-serif;
  --room-width:    900px;
  --room-height:   560px;
  --floor-height:  150px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  display: block;
  background: #000; font-family: var(--font-ui);
  position: relative;
}

.hidden { display: none !important; }


/* ════════════════════════════════════════════════════
   BOTÃO MUDO — fixo no canto superior direito
════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   CONTROLES UI — container fixo no canto superior direito
════════════════════════════════════════════════════ */
#ui-controls {
  position: fixed;
  top:   max(14px, env(safe-area-inset-top,   14px));
  right: max(16px, env(safe-area-inset-right, 16px));
  z-index: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  pointer-events: all;
}

/* Estilo base compartilhado pelos dois botões */
#mute-btn,
#fullscreen-btn {
  /* Remove position individual — o container cuida disso */
  position: static;
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(15, 15, 20, 0.82);
  border: 1px solid rgba(200, 190, 160, 0.22);
  border-radius: 20px;
  padding: 6px 12px 6px 10px;
  cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background 0.2s, border-color 0.2s, transform 0.12s;
  outline: none;
  color: #e8dfc0;
  white-space: nowrap;
}

#mute-btn:hover,
#fullscreen-btn:hover {
  background: rgba(30, 25, 15, 0.92);
  border-color: rgba(240, 190, 80, 0.35);
  transform: scale(1.05);
}
#mute-btn:active,
#fullscreen-btn:active  { transform: scale(0.97); }

#mute-btn:focus-visible,
#fullscreen-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(240, 190, 80, 0.6);
}

/* Estado MUDO */
#mute-btn[aria-pressed="true"] {
  background: rgba(40, 35, 25, 0.88);
  border-color: rgba(160, 130, 80, 0.30);
  opacity: 0.80;
}

/* Botão fullscreen — quadrado com ícone centrado */
#fullscreen-btn {
  width: 36px; height: 36px;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  font-size: 17px;
}

#mute-icon, #fullscreen-icon {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  transition: transform 0.2s;
}
#mute-btn:hover #mute-icon,
#fullscreen-btn:hover #fullscreen-icon { transform: scale(1.15); }

/* Quando em fullscreen: fundo preto total */
:fullscreen,
:-webkit-full-screen,
:-moz-full-screen,
:-ms-fullscreen {
  background: #000 !important;
  width: 100vw !important;
  height: 100vh !important;
}

#mute-label {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #c8b890;
  text-transform: uppercase;
  line-height: 1;
  user-select: none;
}

/* ── HUD ── */
#hud {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 14px; background: var(--hud-bg);
  border: 1px solid rgba(200,190,160,0.2); border-radius: 24px;
  padding: 7px 20px; font-size: 14px; font-weight: 700;
  color: var(--hud-color); letter-spacing: 0.04em;
  backdrop-filter: blur(6px); transition: background 0.8s, border-color 0.8s;
}
#hud.hud-storm { background: rgba(30,34,44,0.92); border-color: rgba(140,170,210,0.25); }
#hud.hud-golden { background: rgba(60,40,10,0.80); border-color: rgba(240,190,80,0.35); color: #f8e8c0; }
#hud-stage-label { font-family: var(--font-story); font-style: italic; font-size: 13px; color: #b8a888; }
.hud-sep { opacity: 0.4; }
#hud-inv-wrapper { display: flex; align-items: center; gap: 4px; background: rgba(255,255,255,0.08); border-radius: 12px; padding: 2px 10px; font-size: 13px; }


/* ── Scene wrapper + transição ── */
#scene-wrapper { position: relative; width: var(--room-width); }
.scene.hidden  { display: none; }
.scene.active  { display: block; animation: scene-enter 0.7s ease forwards; }
@keyframes scene-enter {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Transição especial para o Estágio 4 — fade de dentro */
.scene.active.s4-enter { animation: s4-bloom 1.1s ease forwards; }
@keyframes s4-bloom {
  from { opacity: 0; transform: scale(0.97); filter: brightness(1.8) sepia(0.5); }
  to   { opacity: 1; transform: scale(1);    filter: brightness(1)   sepia(0); }
}


/* ── Sala (base) ── */
.room { position: relative; width: 100%; height: var(--room-height); overflow: hidden; border-radius: 12px; border: 2px solid #1a1a1a; box-shadow: 0 20px 60px rgba(0,0,0,0.70); }


/* ════════════════════════════════════════════════════
   ESTÁGIO 1 — O APARTAMENTO
════════════════════════════════════════════════════ */
.room-stage1 { background: linear-gradient(to bottom, var(--wall) 0%, var(--wall) calc(100% - var(--floor-height)), var(--floor) calc(100% - var(--floor-height)), var(--floor-dark) 100%); }
.room-stage1::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent 60px, rgba(160,110,60,0.04) 60px, rgba(160,110,60,0.04) 61px); pointer-events: none; z-index: 0; }
.room-stage1::after  { content: ''; position: absolute; bottom: var(--floor-height); left: 0; right: 0; height: 3px; background: var(--wood); opacity: 0.5; z-index: 1; }
.s1-window { position: absolute; top: 28px; left: 50%; transform: translateX(-50%); width: 130px; height: 100px; background: #b8d8f0; border: 3px solid var(--wood); border-radius: 3px; box-shadow: inset 0 0 20px rgba(180,220,255,0.5), inset 0 -10px 30px rgba(255,240,180,0.3); z-index: 1; }
.window-cross-h { position: absolute; top: 50%; left: 0; right: 0; height: 3px; margin-top: -1.5px; background: var(--wood); opacity: 0.5; }
.window-cross-v { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--wood); opacity: 0.5; }
.lamp { position: absolute; bottom: var(--floor-height); left: 50%; transform: translateX(-50%); z-index: 1; }
.lamp-shade { width: 0; height: 0; border-left: 22px solid transparent; border-right: 22px solid transparent; border-bottom: 36px solid #f0d090; margin: 0 auto; }
.lamp-pole { width: 6px; height: 140px; background: var(--wood); opacity: 0.85; margin: 0 auto; border-radius: 2px; }
.lamp-base { width: 30px; height: 8px; background: var(--wood-dark); border-radius: 50%; margin: 0 auto; }
.wall-art { position: absolute; top: 38px; left: 80px; width: 72px; height: 56px; border: 4px solid var(--wood); border-radius: 3px; background: #d4c0a0; z-index: 1; }
.wall-art-inner { width: 100%; height: 100%; background: radial-gradient(ellipse at 40% 55%, #8aaa6a 30%, transparent 60%), radial-gradient(ellipse at 70% 40%, #b8c890 20%, transparent 50%), #c8b490; }
.rug { position: absolute; bottom: calc(var(--floor-height) - 12px); left: 50%; transform: translateX(-50%); width: 380px; height: 22px; background: #c06840; border-radius: 50%; opacity: 0.45; z-index: 1; }
.sofa { position: absolute; bottom: var(--floor-height); left: 50%; transform: translateX(-50%); width: 300px; z-index: 2; }
.sofa-back { display: flex; gap: 4px; height: 56px; background: var(--wood); border-radius: 8px 8px 0 0; padding: 6px 8px 0; }
.sofa-cushion { flex: 1; height: 100%; background: #9a7858; border-radius: 4px 4px 0 0; }
.sofa-seat { height: 30px; background: #8a6848; border-radius: 0 0 4px 4px; }
.sofa-arm { position: absolute; bottom: 0; width: 18px; height: 82px; background: var(--wood); border-radius: 4px; }
.sofa-arm.left { left: -14px; } .sofa-arm.right { right: -14px; }
.sofa-leg { position: absolute; bottom: -12px; width: 16px; height: 12px; background: var(--wood-dark); border-radius: 0 0 4px 4px; }
.sofa-leg.left { left: 20px; } .sofa-leg.right { right: 20px; }
.coffee-table { position: absolute; bottom: calc(var(--floor-height) - 22px); left: 50%; transform: translateX(-50%); width: 160px; z-index: 3; }
.coffee-table-top { height: 12px; background: var(--wood-light); border-radius: 4px; border: 1px solid var(--wood); }
.coffee-table-leg { position: absolute; top: 12px; width: 12px; height: 18px; background: var(--wood); border-radius: 0 0 3px 3px; }
.coffee-table-leg.left { left: 20px; } .coffee-table-leg.right { right: 20px; }


/* ════════════════════════════════════════════════════
   ESTÁGIO 2 — JARDIM DO CONDOMÍNIO
════════════════════════════════════════════════════ */
.room-stage2 { background: linear-gradient(180deg, #7a9ab0 0%, var(--condo-sky) 28%, var(--concrete-light) 28%, var(--concrete) 55%, var(--condo-floor) 55%, #7a7468 100%); }
.room-stage2::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, transparent 0, transparent 18px, rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 19px), repeating-linear-gradient(90deg, transparent 0, transparent 18px, rgba(0,0,0,0.04) 18px, rgba(0,0,0,0.04) 19px); pointer-events: none; z-index: 0; }
.room-stage2::after  { content: ''; position: absolute; bottom: var(--floor-height); left: 0; right: 0; height: 4px; background: linear-gradient(90deg, #6a6458, #8a8278, #6a6458); z-index: 1; }
.condo-gate { position: absolute; top: 0; right: 60px; width: 110px; height: 250px; z-index: 2; }
.gate-frame { width: 100%; height: 220px; border: 4px solid var(--iron); border-bottom: none; display: flex; gap: 10px; padding: 8px 10px 0; background: rgba(30,30,30,0.15); }
.gate-bar { flex: 1; background: var(--iron); border-radius: 0 0 3px 3px; position: relative; }
.gate-bar::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%); width: 6px; height: 12px; background: var(--iron); clip-path: polygon(50% 0%, 100% 100%, 0% 100%); }
.gate-handle { position: absolute; bottom: 80px; left: -10px; width: 16px; height: 40px; border: 3px solid var(--iron); border-radius: 8px; background: transparent; }
.concrete-wall { position: absolute; top: 0; bottom: 0; width: 44px; background: repeating-linear-gradient(180deg, var(--concrete-light) 0px, var(--concrete-light) 24px, var(--concrete) 24px, var(--concrete) 26px); z-index: 2; }
.left-wall  { left: 0; border-right: 2px solid var(--concrete-dark); }
.right-wall { right: 0; border-left: 2px solid var(--concrete-dark); }
.ceiling-light { position: absolute; top: 0; z-index: 3; }
.left-light { left: 140px; } .right-light { right: 180px; }
.cl-body { width: 28px; height: 12px; background: var(--concrete-dark); border-radius: 0 0 6px 6px; margin: 0 auto; }
.cl-glow { width: 80px; height: 40px; background: radial-gradient(ellipse at 50% 0%, rgba(255,240,180,0.45) 0%, transparent 80%); margin-left: -26px; pointer-events: none; }
.condo-bench { position: absolute; bottom: calc(var(--floor-height) + 12px); left: 50%; transform: translateX(-50%); width: 200px; z-index: 2; }
.bench-top { height: 14px; background: var(--concrete-light); border-radius: 3px; border-top: 2px solid var(--concrete-dark); }
.bench-leg { position: absolute; top: 14px; width: 16px; height: 28px; background: var(--concrete); border-radius: 0 0 3px 3px; }
.bench-leg.left { left: 24px; } .bench-leg.right { right: 24px; }
.floor-tiles { position: absolute; bottom: 0; left: 44px; right: 44px; height: var(--floor-height); background: repeating-linear-gradient(90deg, transparent 0, transparent 49px, var(--tile-dark) 49px, var(--tile-dark) 50px), repeating-linear-gradient(0deg, transparent 0, transparent 29px, var(--tile-dark) 29px, var(--tile-dark) 30px), var(--tile-light); z-index: 1; }
.planter-box { position: absolute; bottom: var(--floor-height); width: 70px; height: 30px; background: var(--planter-gray); border-top: 3px solid var(--concrete-light); border-radius: 2px; z-index: 2; }
.left-planter { left: 60px; } .right-planter { right: 60px; }


/* ════════════════════════════════════════════════════
   ESTÁGIO 3 — A RUA
════════════════════════════════════════════════════ */
.room-stage3 { background: var(--sky-storm-low); overflow: hidden; }
.s3-sky { position: absolute; top: 0; left: 0; right: 0; height: 52%; background: linear-gradient(180deg, var(--sky-storm) 0%, var(--sky-storm-low) 100%); z-index: 0; }
.s3-building { position: absolute; bottom: var(--floor-height); z-index: 1; }
.b1 { left: 0;    width: 130px; height: 260px; background: var(--building-1); }
.b2 { left: 115px; width: 90px;  height: 200px; background: var(--building-2); }
.b3 { right: 0;   width: 140px; height: 280px; background: var(--building-3); }
.b4 { right: 125px; width: 80px; height: 220px; background: var(--building-4); }
.s3-windows { position: absolute; bottom: var(--floor-height); z-index: 2; display: grid; gap: 5px; padding: 12px 10px; }
.w1 { left: 4px;   width: 130px; grid-template-columns: repeat(3, 1fr); }
.w2 { right: 4px;  width: 140px; grid-template-columns: repeat(3, 1fr); }
.s3-win { height: 14px; background: var(--win-dark); border-radius: 1px; }
.s3-win.lit { background: var(--win-lit); box-shadow: 0 0 6px rgba(248,224,144,0.4); animation: flicker 4s ease-in-out infinite; }
.s3-win.lit:nth-child(2) { animation-delay: 1.3s; }
.s3-win.lit:nth-child(3) { animation-delay: 2.7s; }
@keyframes flicker { 0%,100% { opacity: 1; } 45% { opacity: 0.85; } 50% { opacity: 0.7; } 55% { opacity: 0.9; } }
.s3-sidewalk { position: absolute; bottom: var(--floor-height); left: 0; right: 0; height: var(--floor-height); background: linear-gradient(180deg, var(--sidewalk-light) 0%, var(--sidewalk) 100%); z-index: 2; }
.s3-curb { position: absolute; bottom: var(--floor-height); left: 0; right: 0; height: 6px; background: #5a5850; z-index: 3; }
.s3-asphalt { position: absolute; bottom: 0; left: 0; right: 0; height: calc(var(--floor-height) - 6px); background: linear-gradient(180deg, var(--asphalt-wet) 0%, var(--asphalt) 100%); z-index: 2; }
.s3-pavement-pattern { position: absolute; bottom: var(--floor-height); left: 0; right: 0; height: var(--floor-height); z-index: 3; pointer-events: none; background: repeating-linear-gradient(45deg, transparent 0, transparent 14px, rgba(80,76,68,0.18) 14px, rgba(80,76,68,0.18) 15px), repeating-linear-gradient(-45deg, transparent 0, transparent 14px, rgba(80,76,68,0.18) 14px, rgba(80,76,68,0.18) 15px); }
.s3-pole { position: absolute; bottom: var(--floor-height); left: 50%; transform: translateX(-50%); width: 8px; height: 220px; background: linear-gradient(to right, var(--pole-color), #3a3c40, var(--pole-color)); border-radius: 4px; z-index: 4; }
.s3-pole-arm { position: absolute; top: 10px; right: 0; width: 48px; height: 6px; background: var(--pole-color); border-radius: 3px; }
.s3-pole-lamp { position: absolute; top: 2px; right: -16px; width: 24px; height: 14px; background: var(--lamp-warm); border-radius: 3px; box-shadow: 0 0 20px rgba(248,224,144,0.7); }
.s3-pole-glow { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 120px; height: 80px; background: radial-gradient(ellipse at 50% 0%, rgba(248,224,144,0.25) 0%, transparent 70%); pointer-events: none; }
.s3-manhole { position: absolute; bottom: 16px; left: 200px; width: 48px; height: 28px; background: #1a1a1e; border-radius: 50%; border: 3px solid #3a3a3e; z-index: 4; }
.s3-puddle { position: absolute; z-index: 3; background: rgba(40,44,60,0.7); border-radius: 50%; animation: puddle-ripple 2.5s ease-in-out infinite; }
.p1 { width: 80px; height: 16px; bottom: 22px; left: 280px; } .p2 { width: 50px; height: 10px; bottom: 18px; right: 240px; animation-delay: 1.2s; }
@keyframes puddle-ripple { 0%,100% { opacity: 0.55; transform: scaleX(1); } 50% { opacity: 0.75; transform: scaleX(1.04); } }
.s3-crosswalk { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: calc(var(--floor-height) - 6px); display: flex; gap: 6px; z-index: 4; }
.cw-stripe { flex: 1; background: rgba(220,215,200,0.18); border-radius: 1px; }

/* Chuva */
#rain-overlay { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 20; opacity: 0; transition: opacity 1.2s ease; }
#scene-stage3.active #rain-overlay { opacity: 1; }
.raindrop { position: absolute; top: -60px; width: 1.5px; border-radius: 2px; background: var(--rain-color); animation: rain-fall linear infinite; will-change: transform; }
.rd-s { height: 12px; } .rd-m { height: 20px; } .rd-l { height: 30px; }
@keyframes rain-fall { 0% { transform: translateY(0) translateX(0) rotate(14deg); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 0.8; } 100% { transform: translateY(680px) translateX(90px) rotate(14deg); opacity: 0; } }
.rain-splash { position: absolute; bottom: var(--floor-height); width: 4px; height: 4px; border-radius: 50%; background: var(--rain-color); pointer-events: none; z-index: 21; animation: splash-out 0.4s ease-out forwards; }
@keyframes splash-out { 0% { transform: scale(0.5); opacity: 0.8; } 100% { transform: scaleX(3) scaleY(0.2) translateY(2px); opacity: 0; } }


/* ════════════════════════════════════════════════════
   ESTÁGIO 4 — O RETORNO TRANSFORMADOR
════════════════════════════════════════════════════ */
.room-stage4 {
  background: linear-gradient(
    to bottom,
    var(--wall-warm) 0%,
    var(--wall-warm) calc(100% - var(--floor-height)),
    var(--floor) calc(100% - var(--floor-height)),
    var(--floor-dark) 100%
  );
  /* Saturação aumentada + levíssimo sépia dourado */
  filter: saturate(1.25) sepia(0.12);
}

/* Linha de rodapé aquecida */
.room-stage4::after {
  content: ''; position: absolute; bottom: var(--floor-height); left: 0; right: 0;
  height: 3px; background: var(--wood); opacity: 0.6; z-index: 1;
}

/* Luz dourada de fim de tarde (overlay) */
.s4-afternoon-light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse at 30% 10%, rgba(255,210,100,0.28) 0%, transparent 65%);
}

/* Raios de luz entrando pela janela */
.s4-light-beam {
  position: absolute; top: 0; z-index: 2; pointer-events: none;
  width: 60px; height: 100%;
  opacity: 0.07;
  animation: beam-pulse 4s ease-in-out infinite;
}
.lb1 { left: 33%; background: linear-gradient(to bottom, var(--afternoon-gold), transparent); transform: rotate(8deg) translateX(-20px); animation-delay: 0s; }
.lb2 { left: 40%; background: linear-gradient(to bottom, var(--afternoon-glow), transparent); transform: rotate(8deg); animation-delay: 0.8s; width: 40px; }
.lb3 { left: 46%; background: linear-gradient(to bottom, var(--afternoon-gold), transparent); transform: rotate(8deg) translateX(20px); animation-delay: 1.6s; }

@keyframes beam-pulse {
  0%,100% { opacity: 0.07; }
  50%      { opacity: 0.14; }
}

/* Janela do E4 — vidro com tom dourado */
.s4-window {
  position: absolute; top: 28px; left: 50%; transform: translateX(-50%);
  width: 130px; height: 100px;
  background: linear-gradient(135deg, #f8d898 0%, #f0c060 50%, #e8a840 100%);
  border: 3px solid var(--wood); border-radius: 3px;
  box-shadow: inset 0 0 24px rgba(255,220,120,0.6), 0 0 30px rgba(240,180,60,0.25);
  z-index: 3;
}

/* Abajur do E4 — mais brilhante */
.s4-lamp .lamp-shade { border-bottom-color: #f8e0a0; }

/* Quadro do E4 — mais vivo */
.s4-wall-art .wall-art-inner {
  background: radial-gradient(ellipse at 40% 55%, #a8d070 30%, transparent 60%),
              radial-gradient(ellipse at 65% 38%, #e8c060 25%, transparent 55%),
              radial-gradient(ellipse at 75% 70%, #c0a870 20%, transparent 50%), #d8c8a0;
}

/* Mesa do E4 com jabuticaba */
.s4-coffee-table { position: absolute; bottom: calc(var(--floor-height) - 22px); left: 50%; transform: translateX(-50%); width: 200px; z-index: 5; }

/* Prato com frutos */
.s4-fruit-display {
  position: absolute;
  top: -52px; left: 50%; transform: translateX(-50%);
  width: 70px;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer;
  transition: transform 0.2s;
  animation: fruit-sway 3s ease-in-out infinite;
}
.s4-fruit-display:hover { transform: translateX(-50%) scale(1.1); }

@keyframes fruit-sway {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-3px); }
}

.s4-plate {
  width: 60px; height: 10px;
  background: linear-gradient(180deg, #f0ece4, #d8d0c4);
  border-radius: 50%;
  border: 1.5px solid #c0b8a8;
  box-shadow: 0 3px 8px rgba(0,0,0,0.18);
}

.s4-fruit-pile {
  position: relative; width: 50px; height: 36px; margin-top: -3px;
}
.s4-fruit {
  position: absolute;
  width: 14px; height: 14px;
  background: radial-gradient(circle at 35% 30%, #6a4a7a, #1a0a2a);
  border-radius: 50%;
  border: 1.5px solid #0a0018;
  box-shadow: inset 2px 2px 4px rgba(255,255,255,0.2);
  animation: fruit-gleam 2.5s ease-in-out infinite;
}
.sf1 { bottom: 0;  left: 4px;  animation-delay: 0.0s; }
.sf2 { bottom: 0;  left: 18px; animation-delay: 0.3s; }
.sf3 { bottom: 0;  left: 32px; animation-delay: 0.6s; }
.sf4 { bottom: 13px; left: 10px; animation-delay: 0.9s; }
.sf5 { bottom: 13px; left: 24px; animation-delay: 1.2s; }

@keyframes fruit-gleam {
  0%,100% { box-shadow: inset 2px 2px 4px rgba(255,255,255,0.2); }
  50%      { box-shadow: inset 2px 2px 4px rgba(255,255,255,0.2), 0 0 6px rgba(140,80,180,0.5); }
}

.s4-fruit-label {
  font-family: var(--font-story); font-style: italic; font-size: 10px;
  color: var(--wood-dark); background: rgba(248,240,220,0.9);
  border-radius: 8px; padding: 1px 6px; margin-top: 4px;
  white-space: nowrap;
}

/* Tapete do E4 — mais vivo */
.s4-rug { opacity: 0.65; }

/* Partículas douradas flutuando na sala */
.s4-particle {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 6;
  background: var(--afternoon-gold); opacity: 0;
  animation: particle-float linear infinite;
}
.p1 { width: 3px; height: 3px; left: 15%; bottom: 200px; animation-duration: 8s; animation-delay: 0s; }
.p2 { width: 2px; height: 2px; left: 28%; bottom: 160px; animation-duration: 6s; animation-delay: 1.5s; }
.p3 { width: 4px; height: 4px; left: 55%; bottom: 250px; animation-duration: 9s; animation-delay: 0.8s; }
.p4 { width: 2px; height: 2px; left: 70%; bottom: 190px; animation-duration: 7s; animation-delay: 2.2s; }
.p5 { width: 3px; height: 3px; left: 82%; bottom: 230px; animation-duration: 10s; animation-delay: 3s; }
.p6 { width: 2px; height: 2px; left: 42%; bottom: 170px; animation-duration: 6.5s; animation-delay: 1s; }

@keyframes particle-float {
  0%   { opacity: 0; transform: translateY(0) translateX(0); }
  15%  { opacity: 0.7; }
  85%  { opacity: 0.5; }
  100% { opacity: 0; transform: translateY(-120px) translateX(20px); }
}


/* ════════════════════════════════════════════════════
   PLANTAS — BASE COMPARTILHADA
════════════════════════════════════════════════════ */
.plant {
  position: absolute; bottom: var(--floor-height);
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; z-index: 4; outline: none;
  transition: transform 0.2s ease, filter 0.3s ease;
}
.plant:hover, .plant:focus-visible { transform: scale(1.07) translateY(-4px); }
.plant-s2  { bottom: var(--floor-height); }
.plant-s3  { bottom: var(--floor-height); }
.s4-plant  { bottom: var(--floor-height); }

/* Plantas "felizes" no E4 — brilho suave + movimento de respiração */
.plant-happy {
  animation: happy-breathe 3s ease-in-out infinite;
  filter: saturate(1.4) brightness(1.08);
}
.plant-happy:hover { filter: saturate(1.6) brightness(1.15); }
.s4-plant:nth-child(odd)  { animation-delay: 0s; }
.s4-plant:nth-child(even) { animation-delay: 1.5s; }

@keyframes happy-breathe {
  0%,100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.03) translateY(-3px); }
}

/* Folhagem exuberante no E4 */
.foliage--lush { filter: saturate(1.3) brightness(1.08); }

.plant-label {
  font-family: var(--font-story); font-style: italic; font-size: 11px;
  color: var(--text-mid); background: rgba(248,244,238,0.9);
  border: 1px solid var(--dialog-border); border-radius: 10px;
  padding: 2px 9px; margin-bottom: 5px;
  opacity: 0; transform: translateY(4px);
  transition: opacity 0.2s, transform 0.2s; white-space: nowrap; pointer-events: none;
}
.plant:hover .plant-label, .plant:focus-visible .plant-label { opacity: 1; transform: translateY(0); }
.plant-s3 .plant-label { color: #2a2a2a; background: rgba(220,220,210,0.92); border-color: #8a8a80; }
.s4-plant .plant-label { background: rgba(255,248,230,0.92); border-color: var(--afternoon-gold); color: #5a3010; }

.plant-need-indicator {
  font-size: 20px; margin-bottom: 3px; line-height: 1;
  animation: float 2.4s ease-in-out infinite;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); transition: all 0.35s;
}
.plant.cared .plant-need-indicator, .plant-happy .plant-need-indicator {
  animation: happy-icon-float 3s ease-in-out infinite;
}
.plant.cared .plant-need-indicator { animation: pop-in 0.4s cubic-bezier(0.36,1.56,0.64,1) forwards; }
.plant.visited .plant-need-indicator { animation: pop-in 0.4s cubic-bezier(0.36,1.56,0.64,1) forwards; }

@keyframes happy-icon-float {
  0%,100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-5px) rotate(-5deg); }
  75%      { transform: translateY(-3px) rotate(4deg); }
}

.plant--locked { cursor: not-allowed; opacity: 0.75; filter: grayscale(0.4); }
.plant--locked:hover { transform: none; }
.plant--locked.unlocked { cursor: pointer; opacity: 1; filter: none; }
.plant--locked.unlocked:hover { transform: scale(1.07) translateY(-4px); }
.lock-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 10; }
.lock-overlay span { font-family: var(--font-story); font-size: 10px; font-style: italic; color: #888; text-align: center; background: rgba(248,244,238,0.85); border-radius: 8px; padding: 4px 8px; line-height: 1.4; }
.lock-overlay.gone { display: none; }



/* ── Imagens das plantas ── */

/* Posicionamento — mantidos do CSS original */
#plant-maranta,    #s4-plant-maranta    { left: 36px; }
#plant-samambaia,  #s4-plant-samambaia  { right: 36px; }
#plant-palmeira,   #s4-plant-palmeira   { left: 160px; }
#plant-bromelia,   #s4-plant-bromelia   { right: 155px; }
#plant-ipe    { left: 60px; }
#plant-manaca { left: 180px; }
#plant-quaresmeira { right: 60px; }
#plant-jabuticabeira { right: 180px; }
#plant-iris    { left: 40px; }
#plant-guaivira { left: 160px; }
#plant-inga    { right: 160px; }
#plant-taboa   { right: 50px; }

/* Imagem base — substitui todos os <div class="foliage"> */
.plant-img {
  display: block;
  width: auto;
  max-width: 120px;
  object-fit: contain;
  pointer-events: none;
  flex-shrink: 0;
}

/* Tamanhos por tipo */
.plant-img          { height: 130px; max-width: 130px; }  /* E1 vasos */
.plant-img--tall    { height: 160px; max-width: 120px; }  /* palmeira */
.plant-img--tree    { height: 130px; max-width: 130px; }  /* árvores E2/E3 */
.plant-img--street  { height: 110px; max-width: 110px; }  /* plantas chão E3 */

/* Estado feliz (E4) */
.plant-img--lush {
  filter: saturate(1.3) brightness(1.08);
}

/* Cuidada — brilho dourado leve */
.plant.cared   .plant-img { filter: saturate(1.2) brightness(1.12) drop-shadow(0 0 6px rgba(100,200,60,0.5)); }
.plant.visited .plant-img { filter: saturate(1.1) brightness(1.08); }

/* ═══════════════════════════════════════════════════
   BOTÕES DE AÇÃO FINAL (Estágio 4)
═══════════════════════════════════════════════════ */
#next-stage-wrapper { margin-top: 18px; min-height: 52px; display: flex; align-items: center; justify-content: center; }
#next-stage-btn {
  display: none; font-family: var(--font-story); font-style: italic;
  font-size: 17px; font-weight: 600; color: #fff;
  background: var(--green-mid); border: none; border-radius: 30px;
  padding: 14px 40px; cursor: pointer;
  box-shadow: 0 6px 24px rgba(50,120,40,0.5);
  animation: pulse-btn 2.2s ease-in-out infinite;
  transition: background 0.15s, transform 0.15s;
}
#next-stage-btn.btn-storm { background: #3a5878; animation: pulse-btn-storm 2.2s ease-in-out infinite; }
#next-stage-btn.btn-golden { background: #c87820; animation: pulse-btn-golden 2.2s ease-in-out infinite; }
#next-stage-btn:hover  { filter: brightness(1.15); transform: scale(1.04); }
#next-stage-btn:active { transform: scale(0.98); }

#final-actions {
  display: flex; gap: 14px; margin-top: 18px;
  animation: scene-enter 0.6s ease forwards;
}
.final-btn {
  font-family: var(--font-story); font-style: italic;
  font-size: 15px; font-weight: 600;
  border: none; border-radius: 24px; padding: 12px 28px; cursor: pointer;
  transition: filter 0.15s, transform 0.15s;
}
.final-btn:hover  { filter: brightness(1.1); transform: scale(1.03); }
.final-btn:active { transform: scale(0.97); }
.btn-restart { background: #4a7040; color: #f0f8e8; box-shadow: 0 4px 18px rgba(60,100,40,0.4); }


/* ═══════════════════════════════════════════════════
   DIÁLOGO / MODAL
═══════════════════════════════════════════════════ */
#dialog-overlay { display: none; position: fixed; inset: 0; background: rgba(10,8,4,0.62); align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(4px); }
#dialog-overlay.open { display: flex; }
#dialog-box { background: var(--dialog-bg); border: 2px solid var(--dialog-border); border-radius: 16px; padding: 28px 30px 24px; max-width: 400px; width: 90%; box-shadow: 0 12px 48px rgba(0,0,0,0.45); text-align: center; animation: dialog-in 0.28s cubic-bezier(0.36,1.4,0.64,1); }
#dialog-box.storm-theme { background: #1e2230; border-color: #4a6080; }
#dialog-box.storm-theme #dlg-title { color: #c8daf0; }
#dialog-box.storm-theme #dlg-body  { color: #90a8c0; }
#dialog-box.golden-theme { background: #fdf4dc; border-color: var(--afternoon-gold); }
#dialog-box.golden-theme #dlg-title { color: #5a3010; }
#dialog-box.golden-theme #dlg-body  { color: #7a5030; }
#dlg-plant-icon { font-size: 38px; margin-bottom: 10px; line-height: 1; }
#dlg-title { font-family: var(--font-story); font-size: 18px; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; }
#dlg-body  { font-family: var(--font-story); font-style: italic; font-size: 14px; line-height: 1.75; color: var(--text-mid); margin-bottom: 20px; }
#dlg-action-btn { font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: #f8f0e0; background: #3a3a3a; border: none; border-radius: 10px; padding: 10px 28px; cursor: pointer; transition: background 0.15s, transform 0.12s; letter-spacing: 0.03em; }
#dlg-action-btn.btn-rain   { background: #2a4060; color: #c8e0f8; }
#dlg-action-btn.btn-golden { background: #c87820; color: #fff8e8; }
#dlg-action-btn:hover  { filter: brightness(1.2); }
#dlg-action-btn:active { transform: scale(0.96); }

/* ── Linha de botões do diálogo ── */
#dlg-btn-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── Botão Continuar (fecha ao clicar — única saída do diálogo) ── */
#dlg-close-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  color: #9a8870;
  background: transparent;
  border: 1px solid rgba(160, 140, 100, 0.35);
  border-radius: 10px;
  padding: 10px 20px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.12s;
  letter-spacing: 0.03em;
}
#dlg-close-btn:hover  { color: #5a3a18; border-color: rgba(160,120,60,0.6); }
#dlg-close-btn:active { transform: scale(0.96); }

/* Estado primário — aparece após a ação ser executada */
#dlg-close-btn.dlg-close-btn--primary {
  background: #4a7040;
  color: #e8f8d8;
  border-color: #4a7040;
  font-size: 14px;
  font-weight: 700;
  padding: 10px 28px;
  box-shadow: 0 4px 16px rgba(60,110,40,0.40);
  animation: pulse-btn 2s ease-in-out infinite;
}
#dlg-close-btn.dlg-close-btn--primary:hover { background: #3a6030; border-color: #3a6030; }


/* ═══════════════════════════════════════════════════
   POP-UP INVENTÁRIO
═══════════════════════════════════════════════════ */
#item-acquired-popup { position: fixed; top: 24px; right: 24px; z-index: 300; animation: slide-in-right 0.4s cubic-bezier(0.36,1.4,0.64,1); }
#item-acquired-box { background: #1a1a1a; border: 1.5px solid #4a4a4a; border-radius: 14px; padding: 16px 20px; min-width: 220px; box-shadow: 0 8px 32px rgba(0,0,0,0.55); text-align: center; }
#iap-icon { font-size: 32px; margin-bottom: 6px; }
#iap-name { font-family: var(--font-story); font-weight: 600; font-size: 14px; color: #e8e0d0; margin-bottom: 4px; }
#iap-desc { font-family: var(--font-story); font-style: italic; font-size: 12px; color: #8a8070; line-height: 1.5; }


/* ═══════════════════════════════════════════════════
   ANIMAÇÕES
═══════════════════════════════════════════════════ */
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes pop-in { 0% { transform: scale(0.5); opacity: 0.3; } 60% { transform: scale(1.3); } 100% { transform: scale(1); opacity: 1; } }
@keyframes pulse-btn       { 0%,100% { box-shadow: 0 6px 24px rgba(50,120,40,0.5); } 50% { box-shadow: 0 6px 36px rgba(50,120,40,0.8); } }
@keyframes pulse-btn-storm  { 0%,100% { box-shadow: 0 6px 24px rgba(60,100,140,0.5); } 50% { box-shadow: 0 6px 36px rgba(80,140,200,0.8); } }
@keyframes pulse-btn-golden { 0%,100% { box-shadow: 0 6px 24px rgba(180,100,20,0.5); } 50% { box-shadow: 0 6px 36px rgba(220,140,40,0.9); } }
@keyframes dialog-in  { from { transform: scale(0.88) translateY(12px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@keyframes slide-in-right { from { opacity: 0; transform: translateX(30px); } to { opacity: 1; transform: translateX(0); } }


/* ═══════════════════════════════════════════════════════════
   TELA DE ENCERRAMENTO
   Overlay fullscreen com fundo floresta + apartamento fundidos,
   tipografia orgânica, folhas caindo e efeito typewriter.
═══════════════════════════════════════════════════════════ */

/* ── Container principal ── */
#ending-overlay {
  /* Oculto até ser ativado por JS */
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;

  /* Fundo: floresta vibrante mesclada com luz de apartamento */
  background:
    /* Névoa dourada vinda de cima — luz do apartamento */
    radial-gradient(ellipse at 50% -10%, rgba(240, 180, 60, 0.45) 0%, transparent 55%),
    /* Luz verde de floresta da esquerda */
    radial-gradient(ellipse at -10% 60%, rgba(40, 120, 30, 0.55) 0%, transparent 50%),
    /* Luz verde de floresta da direita */
    radial-gradient(ellipse at 110% 70%, rgba(20, 100, 20, 0.50) 0%, transparent 50%),
    /* Clarão central dourado-esverdeado */
    radial-gradient(ellipse at 50% 45%, rgba(60, 100, 30, 0.35) 0%, transparent 65%),
    /* Base: verde-floresta profundo */
    linear-gradient(160deg, #0d2010 0%, #142816 35%, #1a3a1a 60%, #0f2010 100%);

  /* Garante que o scroll interno não quebre o layout */
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Quando aberto por JS */
#ending-overlay.open {
  display: flex;
  animation: ending-reveal 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes ending-reveal {
  from {
    opacity: 0;
    transform: scale(1.04);
    filter: brightness(2.5) saturate(0.2);
  }
  to {
    opacity: 1;
    transform: scale(1);
    filter: brightness(1) saturate(1);
  }
}

/* ── Folhas caindo (partículas CSS + JS) ── */
#leaves-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

/* Cada folha é um .leaf-particle criado por JS */
.leaf-particle {
  position: absolute;
  top: -60px;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  animation: leaf-fall linear forwards;
  will-change: transform, opacity;
  /* Cada folha recebe animation-duration e left aleatórios via JS */
}

@keyframes leaf-fall {
  0% {
    opacity: 0;
    transform: translateY(0) translateX(0) rotate(0deg) scale(0.8);
  }
  8% { opacity: 0.9; }
  /* Movimento sinusoidal simulado com keyframes intermediários */
  25% {
    transform: translateY(25vh) translateX(30px) rotate(60deg) scale(1);
  }
  50% {
    transform: translateY(50vh) translateX(-20px) rotate(140deg) scale(0.9);
    opacity: 0.8;
  }
  75% {
    transform: translateY(75vh) translateX(40px) rotate(220deg) scale(1.05);
  }
  95% { opacity: 0.4; }
  100% {
    opacity: 0;
    transform: translateY(110vh) translateX(-10px) rotate(300deg) scale(0.7);
  }
}

/* ── Conteúdo central ── */
#ending-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 32px 40px;
  max-width: 680px;
  width: 94%;

  /* Vidro orgânico — fundo levemente translúcido */
  background: rgba(8, 24, 8, 0.55);
  border: 1px solid rgba(100, 200, 80, 0.20);
  border-radius: 24px;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(60, 160, 40, 0.10),
    0 24px 80px rgba(0, 0, 0, 0.60),
    inset 0 1px 0 rgba(140, 220, 100, 0.12);
}

/* ── Ícones decorativos de flora ── */
#ending-flora {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  font-size: 22px;
}

.flora-icon {
  opacity: 0;
  animation: flora-rise 0.6s ease forwards;
  display: inline-block;
}
.fi-1 { animation-delay: 0.2s; }
.fi-2 { animation-delay: 0.4s; }
.fi-3 { animation-delay: 0.6s; }
.fi-4 { animation-delay: 0.8s; }
.fi-5 { animation-delay: 1.0s; }

@keyframes flora-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.7); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ── Supertítulo ── */
#ending-supertitle {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: #78c860;
  margin-bottom: 18px;
  opacity: 0;
  animation: fade-up 0.7s ease 0.8s forwards;
}

/* ── Headline (typewriter) ── */
#ending-headline {
  font-family: var(--font-story);
  font-size: clamp(22px, 4.5vw, 38px);
  font-weight: 600;
  line-height: 1.35;
  color: #e8f4d8;
  margin-bottom: 28px;
  opacity: 0;
  animation: fade-up 0.5s ease 1.1s forwards;
}

.ending-line {
  display: block;
}

/* O nome "Cunan" recebe cor especial */
#ending-name {
  color: #a0e870;
  font-style: italic;
  text-shadow:
    0 0 20px rgba(100, 220, 60, 0.50),
    0 0 40px rgba(60, 160, 20, 0.30);
}

/* Cursor piscante do typewriter */
#ending-cursor {
  display: inline-block;
  color: #a0e870;
  font-weight: 300;
  animation: cursor-blink 0.75s step-end infinite;
  margin-left: 1px;
  /* Cursor some depois que o typewriter termina — controlado por JS */
}

@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* Texto que aparece após o nome */
.ending-suffix {
  color: #e8f4d8;
  font-style: normal;
}

/* ── Corpo narrativo ── */
#ending-body {
  font-family: var(--font-story);
  font-style: italic;
  font-size: clamp(13px, 2vw, 16px);
  line-height: 1.80;
  color: #b0d8a0;
  max-width: 520px;
  margin-bottom: 28px;
  opacity: 0;
  /* Aparece via JS após o typewriter terminar */
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(8px);
}
#ending-body.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Divisor ── */
#ending-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
  opacity: 0;
  transition: opacity 0.8s ease;
}
#ending-divider.visible { opacity: 1; }
.divider-line {
  width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(100, 200, 70, 0.45), transparent);
}
#ending-divider span:not(.divider-line) { font-size: 16px; }

/* ── Botões de ação final ── */
#ending-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 340px;
  margin-bottom: 28px;
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;
  transform: translateY(10px);
}
#ending-actions.visible {
  opacity: 1;
  transform: translateY(0);
}

.ending-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-story);
  font-size: 15px;
  font-weight: 600;
  border: none;
  border-radius: 30px;
  padding: 14px 28px;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: filter 0.2s, transform 0.15s, box-shadow 0.3s;
  position: relative;
  overflow: hidden;
}

.ending-btn .btn-icon {
  font-size: 18px;
  line-height: 1;
}

/* Efeito de brilho percorrendo o botão */
.ending-btn::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: btn-shimmer 2.8s ease-in-out infinite;
}

@keyframes btn-shimmer {
  0%   { left: -100%; }
  40%  { left: 130%; }
  100% { left: 130%; }
}

.btn-restart-ending {
  background: rgba(255, 255, 255, 0.06);
  color: #90c878;
  border: 1px solid rgba(100, 200, 70, 0.28);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.30);
}

.ending-btn:hover  { filter: brightness(1.15); transform: scale(1.03); }
.ending-btn:active { transform: scale(0.97); }

/* ── Crédito final ── */
#ending-credit {
  font-family: var(--font-story);
  font-style: italic;
  font-size: 12px;
  color: rgba(140, 200, 110, 0.55);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 1s ease;
}
#ending-credit.visible { opacity: 1; }

/* ── Animação utilitária ── */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════
   MODAL: GUIA DE PLANTAS — Catálogo Botânico
═══════════════════════════════════════════════════ */
#guia-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(8, 6, 2, 0.76);
  backdrop-filter: blur(8px);
  z-index: 1000; padding: 16px;
}
#guia-modal:not(.hidden) { display: flex; }
#guia-modal.hidden       { display: none !important; }

#guia-modal-box {
  background: linear-gradient(168deg, #fefaf0 0%, #f9edd8 55%, #f1e3c6 100%);
  border: 2px solid var(--afternoon-gold);
  border-radius: 24px;
  width: 100%; max-width: 700px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.54), inset 0 1px 0 rgba(255,245,165,.38);
  animation: dialog-in 0.32s cubic-bezier(0.36,1.4,0.64,1);
}

#guia-header {
  background: linear-gradient(135deg, #2a1604 0%, #512c0c 50%, #724418 100%);
  padding: 17px 20px 14px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-shrink: 0; border-bottom: 2px solid rgba(225,165,45,.25);
}
#guia-header-info { display: flex; align-items: center; gap: 11px; min-width: 0; }
#guia-header-icone { font-size: 22px; line-height: 1; flex-shrink: 0; }
#guia-titulo { font-family: var(--font-story); font-size: 17px; font-weight: 600; color: #f8e8c0; margin: 0 0 2px; }
#guia-subtitulo { font-family: var(--font-story); font-style: italic; font-size: 11px; color: #aa8845; margin: 0; }
#btn-fechar-guia {
  flex-shrink: 0; width: 34px; height: 34px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,205,95,.26); border-radius: 50%;
  font-size: 14px; cursor: pointer; color: #e0c060;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, transform .12s;
}
#btn-fechar-guia:hover  { background: rgba(255,255,255,.18); color: #fff5d0; }
#btn-fechar-guia:active { transform: scale(.88); }

#guia-nav {
  display: flex; background: #ede0bf; border-bottom: 2px solid #d9bc60;
  padding: 0 6px; gap: 2px; flex-shrink: 0; overflow-x: auto; scrollbar-width: none;
}
#guia-nav::-webkit-scrollbar { display: none; }
.guia-nav-btn {
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  background: transparent; border: none; border-bottom: 3px solid transparent;
  padding: 11px 14px 9px; cursor: pointer; color: #8a5e28;
  white-space: nowrap; margin-bottom: -2px;
  display: flex; align-items: center; gap: 5px;
  border-radius: 8px 8px 0 0;
  transition: color .14s, border-color .14s, background .14s;
}
.guia-nav-btn:hover  { color: #3e1e06; background: rgba(180,130,40,.10); }
.guia-nav-btn.active { color: #2a1006; border-bottom-color: var(--cat-cor, #c87820); background: rgba(180,130,40,.13); }
.guia-nav-icone { font-size: 14px; line-height: 1; }

#guia-conteudo {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: #c09840 transparent;
}
#guia-conteudo::-webkit-scrollbar       { width: 5px; }
#guia-conteudo::-webkit-scrollbar-thumb { background: #c09840; border-radius: 4px; }

.guia-cat-header {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 22px 12px;
  border-bottom: 1px solid rgba(195,155,55,.18);
  border-left: 4px solid var(--cat-cor, #c87820);
}
.guia-cat-icone { font-size: 20px; flex-shrink: 0; }
.guia-cat-nome  { display: block; font-family: var(--font-story); font-size: 14px; font-weight: 700; color: #3a2010; margin-bottom: 2px; }
.guia-cat-desc  { font-size: 11.5px; color: #9a7040; font-style: italic; }
.guia-cat-badge { margin-left: auto; font-family: var(--font-ui); font-size: 11px; font-weight: 700; color: #7a5020; background: rgba(195,150,45,.14); border: 1px solid rgba(195,150,45,.26); border-radius: 20px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; }

.guia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 22px 22px; }
@media (max-width: 520px) { .guia-grid { grid-template-columns: 1fr; } }

.guia-card {
  display: flex; flex-direction: column;
  background: rgba(255,252,236,.74);
  border: 1px solid rgba(205,165,80,.26);
  border-top: 3px solid var(--cat-cor, #c87820);
  border-radius: 4px 4px 14px 14px; overflow: hidden;
  transition: transform .18s, box-shadow .18s;
}
.guia-card:hover { transform: translateY(-3px); box-shadow: 0 10px 28px rgba(70,45,5,.15); }
.guia-card-img-wrap { width: 100%; aspect-ratio: 4/3; background: linear-gradient(135deg, #e8f0d8, #d0e0b0); overflow: hidden; flex-shrink: 0; }
.guia-card-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.guia-card:hover .guia-card-img { transform: scale(1.04); }
.guia-card-img-fallback { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 48px; background: linear-gradient(135deg, #e8f0d0, #c8dca0); }
.guia-card-body { padding: 12px 13px 13px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.guia-card-nome { font-family: var(--font-story); font-size: 13.5px; font-weight: 700; color: #3a2010; margin: 0; }
.guia-card-sci  { font-family: var(--font-story); font-style: italic; font-size: 10.5px; color: #9a7040; }
.guia-card-desc { font-size: 12px; color: #5a3a18; line-height: 1.65; flex: 1; }
.guia-card-dica { display: flex; flex-direction: column; gap: 3px; background: rgba(190,148,42,.10); border: 1px solid rgba(190,148,42,.22); border-radius: 8px; padding: 8px 10px; margin-top: 4px; }
.guia-card-dica-label { font-family: var(--font-ui); font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: #8a5e20; }
.guia-card-dica-texto { font-size: 11.5px; color: #6a4618; line-height: 1.55; font-style: italic; }

#guia-rodape {
  background: linear-gradient(to right, #ece0bf, #e2d19e, #ece0bf);
  padding: 10px 22px; text-align: center;
  font-family: var(--font-story); font-style: italic;
  font-size: 11.5px; color: #8a6030;
  border-top: 1px solid rgba(195,155,50,.26); flex-shrink: 0;
}
   BOTÃO CERTIFICADO
═══════════════════════════════════════════════════ */
.btn-certificado {
  background: linear-gradient(135deg, #7a4e08, #c08020, #7a4e08);
  background-size: 200% 100%;
  color: #fff8e0;
  box-shadow: 0 6px 26px rgba(160,100,10,.55), inset 0 1px 0 rgba(255,240,140,.25);
  animation: cert-gold-shimmer 3s ease-in-out infinite;
}
@keyframes cert-gold-shimmer {
  0%,100% { background-position: 0%   50%; box-shadow: 0 6px 26px rgba(160,100,10,.55), inset 0 1px 0 rgba(255,240,140,.25); }
  50%      { background-position: 100% 50%; box-shadow: 0 8px 36px rgba(200,140,10,.75), inset 0 1px 0 rgba(255,240,140,.35); }
}

/* ═══════════════════════════════════════════════════
   MODAL: NOME DO GUARDIÃO
═══════════════════════════════════════════════════ */
#nome-modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,4,1,.82); backdrop-filter: blur(10px);
  z-index: 1100; padding: 20px;
}
#nome-modal:not(.hidden) { display: flex; }
#nome-modal.hidden { display: none !important; }
#nome-modal-box {
  background: linear-gradient(160deg, #fdf8ee 0%, #f5e8cc 100%);
  border: 2px solid var(--afternoon-gold, #c87820);
  border-radius: 22px; padding: 36px 32px 28px;
  max-width: 420px; width: 100%; text-align: center;
  box-shadow: 0 24px 70px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,245,165,.4);
  animation: dialog-in 0.3s cubic-bezier(0.36,1.4,0.64,1);
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
#nome-modal-icone { font-size: 44px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(160,100,10,.35)); }
#nome-modal-titulo { font-family: var(--font-story); font-size: 20px; font-weight: 600; color: #3a1e06; margin: 0; }
#nome-modal-desc { font-family: var(--font-story); font-style: italic; font-size: 14px; color: #7a5020; margin: 0; }
#nome-input {
  width: 100%; box-sizing: border-box;
  font-family: var(--font-story); font-size: 18px; font-weight: 600; color: #2a1006;
  background: rgba(255,248,225,.9); border: 2px solid rgba(184,136,58,.45);
  border-radius: 12px; padding: 12px 16px; text-align: center; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
#nome-input:focus { border-color: #c08020; box-shadow: 0 0 0 3px rgba(192,128,32,.18); }
#nome-input::placeholder { color: #c0a060; font-weight: 400; }
#nome-modal-acoes { display: flex; gap: 10px; width: 100%; margin-top: 4px; }
#nome-modal-cancelar {
  flex: 1; font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  background: rgba(255,255,255,.12); border: 1px solid rgba(180,130,50,.3);
  border-radius: 10px; padding: 11px; cursor: pointer; color: #8a6030;
  transition: background .15s;
}
#nome-modal-cancelar:hover { background: rgba(255,255,255,.22); }
#nome-modal-confirmar {
  flex: 2; font-family: var(--font-ui); font-size: 14px; font-weight: 700;
  background: linear-gradient(135deg, #7a4e08, #c08020); border: none;
  border-radius: 10px; padding: 11px 16px; cursor: pointer; color: #fff8e0;
  box-shadow: 0 4px 16px rgba(160,100,10,.40); transition: filter .15s, transform .1s;
}
#nome-modal-confirmar:hover  { filter: brightness(1.12); }
#nome-modal-confirmar:active { transform: scale(.97); }

/* ═══════════════════════════════════════════════════
   CERTIFICADO DE GUARDIÃO — 1080×756px fora do viewport
═══════════════════════════════════════════════════ */
#certificado-wrapper {
  position: fixed; left: -9999px; top: 0;
  width: 1080px; height: 756px; pointer-events: none; z-index: -1;
}
#certificado {
  width: 1080px; height: 756px;
  background: linear-gradient(160deg, #fdf8ee 0%, #f7ecce 45%, #f2e4b8 100%);
  position: relative; font-family: 'Lora', Georgia, serif;
  color: #2a1a06; overflow: hidden; box-sizing: border-box;
}
.cert-corner { position: absolute; font-size: 52px; line-height: 1; opacity: .55; filter: drop-shadow(0 2px 4px rgba(0,0,0,.15)); }
.cert-corner.tl { top: 18px;    left: 22px;  transform: rotate(-30deg); }
.cert-corner.tr { top: 18px;    right: 22px; transform: rotate(30deg) scaleX(-1); }
.cert-corner.bl { bottom: 18px; left: 22px;  transform: rotate(30deg); }
.cert-corner.br { bottom: 18px; right: 22px; transform: rotate(-30deg) scaleX(-1); }
.cert-border {
  position: absolute; inset: 30px; border: 3px solid #b8883a;
  box-shadow: inset 0 0 0 6px rgba(184,136,58,.18), inset 0 0 0 8px #b8883a, inset 0 0 0 14px rgba(184,136,58,.12);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 28px 52px 24px; box-sizing: border-box;
}
.cert-header { text-align: center; margin-bottom: 2px; }
.cert-emblema { font-size: 54px; line-height: 1; filter: drop-shadow(0 3px 8px rgba(80,50,0,.25)); margin-bottom: 6px; }
.cert-supertitulo { font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: #8a5e18; margin: 0 0 8px; }
.cert-titulo { font-size: 42px; font-weight: 700; color: #4a2e08; margin: 0 0 10px; letter-spacing: .04em; }
.cert-divisor { font-size: 22px; color: #b8883a; letter-spacing: .4em; }
.cert-corpo { text-align: center; }
.cert-texto-intro { font-size: 16px; font-style: italic; color: #7a5020; margin: 0 0 4px; }
.cert-nome { font-size: 36px; font-weight: 700; color: #3a1e06; margin: 0 0 10px; letter-spacing: .03em; border-bottom: 2px solid rgba(184,136,58,.4); display: inline-block; padding-bottom: 4px; min-width: 280px; }
.cert-texto { font-size: 15px; color: #5a3a10; line-height: 1.7; max-width: 680px; margin: 0 auto 10px; }
.cert-nivel { font-size: 17px; color: #7a4e12; letter-spacing: .08em; margin: 0; }
.cert-nivel strong { color: #4a2e08; font-size: 19px; }
.cert-selos { display: flex; gap: 32px; justify-content: center; margin: 4px 0; }
.cert-selo { display: flex; flex-direction: column; align-items: center; gap: 5px; background: rgba(184,136,58,.10); border: 2px solid rgba(184,136,58,.35); border-radius: 12px; padding: 10px 18px 8px; min-width: 80px; }
.cert-selo-icone { font-size: 28px; line-height: 1; }
.cert-selo-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .10em; color: #7a4e18; }
.cert-rodape { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; padding-top: 8px; border-top: 1px solid rgba(184,136,58,.28); }
.cert-assinatura { text-align: center; }
.cert-assinatura-linha { width: 180px; height: 1px; background: #b8883a; margin: 0 auto 5px; }
.cert-assinatura-texto { font-size: 13px; font-style: italic; color: #7a5020; margin: 0; letter-spacing: .08em; }
.cert-data-wrap { text-align: center; }
.cert-data { font-size: 15px; font-weight: 600; color: #3a2010; margin: 0 0 3px; }
.cert-data-label { font-size: 11px; color: #9a7040; font-style: italic; margin: 0; text-transform: uppercase; letter-spacing: .08em; }


/* ═══════════════════════════════════════════════════
   OVERLAY: GIRAR DISPOSITIVO
═══════════════════════════════════════════════════ */
#orientation-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 99999;
  background: #0e1a0e;
  align-items: center; justify-content: center;
  flex-direction: column;
  text-align: center;
  padding: 32px;
}
#orientation-box {
  display: flex; flex-direction: column; align-items: center; gap: 16px;
  max-width: 280px;
}
#orientation-icon {
  font-size: 64px;
  animation: rotate-hint 2s ease-in-out infinite;
}
@keyframes rotate-hint {
  0%,100% { transform: rotate(0deg); }
  40%      { transform: rotate(90deg); }
  60%      { transform: rotate(90deg); }
}
#orientation-title {
  font-family: var(--font-story);
  font-size: 22px; font-weight: 700;
  color: #c8e8a0; margin: 0;
}
#orientation-desc {
  font-family: var(--font-ui);
  font-size: 15px; color: #8aaa70;
  line-height: 1.6; margin: 0;
}

/* ═════════════════════════════════
   TELA DE PRÉVIA — Introdução narrativa
═══════════════════════════════════════════════════ */
#start-screen {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 25% 15%, rgba(50,100,30,0.6) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 85%, rgba(20,60,10,0.5) 0%, transparent 50%),
    linear-gradient(160deg, #071408 0%, #0e1e0a 45%, #091206 100%);
}

/* Fade-out ao iniciar jornada */
#start-screen.fade-out {
  animation: start-fade-out 0.9s ease forwards;
  pointer-events: none;
}
@keyframes start-fade-out {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

/* Folhas flutuantes */
.start-leaf {
  position: absolute;
  font-size: 26px;
  opacity: 0.18;
  animation: leaf-drift 9s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.sl1 { top: 7%;   left: 5%;   animation-duration: 7.5s; animation-delay: 0s;   font-size: 20px; }
.sl2 { top: 14%;  right: 7%;  animation-duration: 10s;  animation-delay: 1.8s; font-size: 30px; }
.sl3 { bottom: 18%; left: 10%; animation-duration: 12s; animation-delay: 0.6s; font-size: 16px; }
.sl4 { bottom: 10%; right: 12%; animation-duration: 8s; animation-delay: 3.2s; font-size: 24px; }
.sl5 { top: 45%;  left: 2%;   animation-duration: 11s; animation-delay: 2.4s; font-size: 18px; }
@keyframes leaf-drift {
  0%, 100% { transform: translateY(0)    rotate(-4deg); opacity: 0.18; }
  33%       { transform: translateY(-16px) rotate(5deg); opacity: 0.30; }
  66%       { transform: translateY(9px)  rotate(-9deg); opacity: 0.20; }
}

/* Etapas */
.start-step {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.start-step.active {
  opacity: 1;
  pointer-events: all;
}
.start-step.exit {
  animation: step-exit 0.4s ease forwards;
}
.start-step.enter {
  animation: step-enter 0.5s ease forwards;
}
@keyframes step-exit  { to { opacity: 0; transform: translateX(-40px); } }
@keyframes step-enter { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }

/* Conteúdo central — mobile-first sem corte de texto */
.start-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 32px 24px;
  width: min(480px, 92vw);        /* nunca ultrapassa a tela */
  box-sizing: border-box;
  animation: content-enter 0.8s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes content-enter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

.start-emblem {
  font-size: clamp(48px, 10vw, 64px);
  line-height: 1;
  filter: drop-shadow(0 4px 14px rgba(80,180,40,0.55));
  animation: emblem-pulse 3.2s ease-in-out infinite;
}
@keyframes emblem-pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.07); filter: drop-shadow(0 6px 22px rgba(80,210,40,0.7)); }
}

.start-eyebrow {
  font-family: var(--font-ui);
  font-size: clamp(11px, 2vw, 13px);
  font-weight: 700;
  color: #5a9040;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0;
}
.start-eyebrow strong { color: #88c060; }

.start-title {
  font-family: var(--font-story);
  font-size: clamp(26px, 6vw, 46px);
  font-weight: 600;
  color: #dff0c0;
  margin: 0;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-shadow: 0 2px 18px rgba(80,180,40,0.4);
  /* Garante quebra de linha correta no mobile */
  word-break: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
  max-width: 100%;
}

.start-body {
  font-family: var(--font-story);
  font-style: italic;
  font-size: clamp(13px, 2.6vw, 16px);
  color: #88b068;
  line-height: 1.7;
  margin: 0;
  max-width: 100%;
  word-break: break-word;
}
.start-body.secondary { color: #5a7848; font-size: clamp(12px, 2.2vw, 14px); }
.start-body strong { color: #88c060; font-style: normal; }

/* Quebra de linha — só em desktop */
.br-desktop { display: none; }
@media (min-width: 560px) { .br-desktop { display: inline; } }

.start-divider {
  font-size: 16px;
  color: #3a6028;
  letter-spacing: 0.45em;
  opacity: 0.65;
}

/* Botão principal */
.start-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-story);
  font-size: clamp(15px, 3vw, 19px);
  font-weight: 600;
  color: #071408;
  background: linear-gradient(135deg, #70c038, #98de58, #70c038);
  background-size: 200% 100%;
  border: none;
  border-radius: 50px;
  padding: clamp(12px, 2.5vw, 16px) clamp(28px, 6vw, 44px);
  cursor: pointer;
  letter-spacing: 0.03em;
  box-shadow: 0 8px 28px rgba(70,170,30,0.45), inset 0 1px 0 rgba(255,255,255,0.28);
  animation: btn-shine 2.8s ease-in-out infinite;
  transition: transform .15s, box-shadow .2s;
  width: 100%;
  max-width: 320px;
}
.start-btn:hover  { transform: scale(1.04) translateY(-2px); box-shadow: 0 12px 36px rgba(70,200,30,0.6); }
.start-btn:active { transform: scale(0.98); }
@keyframes btn-shine {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}
.start-btn-icon { font-size: clamp(16px, 3.5vw, 20px); line-height: 1; }

/* Campo de nome */
.start-name-wrap { width: 100%; }
#start-name-input {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-story);
  font-size: clamp(15px, 3vw, 18px);
  font-weight: 600;
  color: #d8f0b8;
  background: rgba(255,255,255,0.07);
  border: 2px solid rgba(110,190,50,0.35);
  border-radius: 12px;
  padding: 12px 18px;
  text-align: center;
  outline: none;
  transition: border-color .2s, box-shadow .2s, background .2s;
  caret-color: #90d050;
}
#start-name-input::placeholder { color: #3a5828; font-weight: 400; }
#start-name-input:focus {
  border-color: rgba(110,210,50,0.7);
  background: rgba(255,255,255,0.10);
  box-shadow: 0 0 0 3px rgba(70,170,30,0.2);
}

/* Botão voltar */
#btn-voltar-inicio {
  font-family: var(--font-ui);
  font-size: 13px;
  color: #3a5828;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  transition: color .15s;
}
#btn-voltar-inicio:hover { color: #70a840; }

/* Créditos */
.start-credits {
  font-family: var(--font-ui);
  font-size: clamp(10px, 1.8vw, 12px);
  color: #2e4820;
  margin: 0;
  letter-spacing: 0.04em;
}


/* ═══════════════════════════════════════════════════
   TRAVA E4 — Jabuticabeira oculta até 4 plantas lidas
═══════════════════════════════════════════════════ */
.hidden-until-ready {
  opacity: 0;
  pointer-events: none;
  transform: scale(0.85);
  transition: none;
}

.reveal-fade {
  animation: jabuti-reveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  pointer-events: all;
}

@keyframes jabuti-reveal {
  0%   { opacity: 0; transform: scale(0.85) translateY(12px); }
  60%  { opacity: 1; transform: scale(1.06) translateY(-4px); }
  100% { opacity: 1; transform: scale(1)    translateY(0); }
}


/* ═══════════════════════════════════════════════════
   BOTÕES GALERIA
═══════════════════════════════════════════════════ */

/* Par de botões lado a lado na tela de encerramento */
.ending-btn-row {
  display: flex;
  gap: 10px;
  width: 100%;
}
.ending-btn-half {
  flex: 1;
}

/* Botão galeria — encerramento */
a.ending-btn-galeria {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: rgba(80, 160, 40, 0.12);
  border: 1px solid rgba(100, 190, 50, 0.45);
  color: #a8e070;
  font-weight: 700;
  transition: background .2s, border-color .2s, transform .15s;
}
a.ending-btn-galeria:hover {
  background: rgba(80, 160, 40, 0.22);
  border-color: rgba(120, 210, 60, 0.7);
  transform: translateY(-2px);
}
a.ending-btn-galeria:active { transform: scale(0.98); }

/* Botão galeria — tela de início */
#btn-galeria-inicio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: clamp(13px, 2.4vw, 15px);
  font-weight: 600;
  color: #88c060;
  background: transparent;
  border: 1px solid rgba(100, 180, 50, 0.35);
  border-radius: 50px;
  padding: clamp(9px, 2vw, 12px) clamp(22px, 5vw, 36px);
  cursor: pointer;
  text-decoration: none;
  letter-spacing: 0.04em;
  width: 100%;
  max-width: 320px;
  transition: background .2s, border-color .2s, color .2s, transform .15s;
}
#btn-galeria-inicio:hover {
  background: rgba(100, 180, 50, 0.10);
  border-color: rgba(120, 210, 60, 0.6);
  color: #a8e070;
  transform: scale(1.03);
}
#btn-galeria-inicio:active { transform: scale(0.98); }


/* ═══════════════════════════════════════════════════════════
   MOBILE — style.css
   Único bloco responsivo. Desktop intocado acima desta linha.
   Todas as regras aqui se aplicam APENAS a <= 768px.
   ───────────────────────────────────────────────────────────
   [DESKTOP-RESTORE]   max-width dos modais no desktop
   [GLOBAL]            html/body no mobile
   [TELA-INICIO]       #start-screen, .start-step, .start-content
   [TELA-ENCERRAMENTO] #ending-overlay + scroll interno
   [MODAL-PLANTA]      #dialog-overlay, #dialog-box
   [MODAL-NOME]        #nome-modal
   [GUIA-PLANTAS]      #guia-modal
   [TIPOGRAFIA]        fontes e quebra de texto
   [BOTOES]            touch targets e larguras
   [HUD]               Mudo + Fullscreen
   [ORIENTACAO]        overlay "gire o dispositivo"
═══════════════════════════════════════════════════════════ */


/* ── [DESKTOP-RESTORE] — fora de media query ─────────────── */
#dialog-box     { max-width: 400px; }
#nome-modal-box { max-width: 420px; }
#guia-modal-box { max-width: 700px; }
#ending-content { max-width: 680px; }
.start-content  { max-width: 480px; }


/* ── MOBILE ≤ 768px ──────────────────────────────────────── */
@media (max-width: 768px) {

  /* [GLOBAL]
     html: só bloqueia scroll lateral (overflow:hidden nos dois
     mata scroll em position:fixed no iOS — bug histórico).
     body: hidden mantém o jogo sem rolagem. */
  html { overflow-x: hidden !important; height: 100% !important; }
  body { height: 100vh !important; overflow: hidden !important; }


  /* [TELA-INICIO]
     Ocupa 100vh exato. Conteúdo distribuído verticalmente
     com space-between: ícone no topo, botão embaixo. */
  #start-screen {
    position:        fixed         !important;
    inset:           0             !important;
    overflow:        hidden        !important;
    align-items:     center        !important;
    justify-content: center        !important;
  }

  .start-step.active {
    position:        absolute      !important;
    inset:           0             !important;
    overflow:        hidden        !important;
    display:         flex          !important;
    align-items:     center        !important;
    justify-content: center        !important;
  }

  .start-content {
    width:           100%          !important;
    max-width:       100%          !important;
    height:          100%          !important;
    display:         flex          !important;
    flex-direction:  column        !important;
    align-items:     center        !important;
    justify-content: space-between !important;
    padding:         max(20px, env(safe-area-inset-top, 20px)) 20px
                     max(20px, env(safe-area-inset-bottom, 20px)) 20px !important;
    box-sizing:      border-box    !important;
    overflow:        hidden        !important;
  }

  .start-emblem         { font-size: clamp(32px, 8vw, 48px) !important; }
  .start-eyebrow        { font-size: 0.75rem !important; }
  .start-divider        { display: none !important; }
  .start-body.secondary { font-size: 0.85rem !important; line-height: 1.4 !important; }
  .start-credits        { font-size: 0.7rem !important; }
  .start-name-wrap      { width: 90% !important; }
  #btn-voltar-inicio    { padding: 4px !important; }


  /* [TELA-ENCERRAMENTO]
     O overlay é o container de scroll (overflow-y: scroll).
     overscroll-behavior: contain evita bounce fora da área.
     #ending-content cresce livremente dentro do overlay. */
  #ending-overlay,
  #ending-overlay.open {
    position:            fixed      !important;
    inset:               0          !important;
    overflow-y:          scroll     !important;
    overflow-x:          hidden     !important;
    overscroll-behavior: contain    !important;
    -webkit-overflow-scrolling: touch !important;
    display:             flex       !important;
    flex-direction:      column     !important;
    align-items:         center     !important;
    justify-content:     flex-start !important;
    padding:             max(16px, env(safe-area-inset-top, 16px))
                         16px
                         max(48px, env(safe-area-inset-bottom, 48px))
                         16px       !important;
    box-sizing:          border-box !important;
  }

  /* Folhas: desativadas no mobile (economiza CPU e espaço) */
  #leaves-container { display: none !important; }

  /* Caixa de conteúdo: sem card visual, cresce livremente */
  #ending-content {
    width:           92%       !important;
    max-width:       92%       !important;
    height:          auto      !important;
    max-height:      none      !important;
    background:      none      !important;
    border:          none      !important;
    border-radius:   0         !important;
    backdrop-filter: none      !important;
    box-shadow:      none      !important;
    padding:         0         !important;
    margin:          0 auto    !important;
    display:         flex      !important;
    flex-direction:  column    !important;
    align-items:     center    !important;
    flex-shrink:     0         !important;
  }

  /* Elementos decorativos compactos */
  #ending-flora      { font-size: 18px !important; margin-bottom: 4px !important; opacity: 1 !important; }
  #ending-supertitle { font-size: 0.65rem !important; margin-bottom: 6px !important; opacity: 1 !important; }
  #ending-headline   { font-size: clamp(1.1rem, 5vw, 1.5rem) !important; line-height: 1.25 !important; margin: 6px 0 8px !important; padding: 0 16px !important; opacity: 1 !important; }
  #ending-body       { font-size: 0.85rem !important; line-height: 1.5 !important; padding: 0 16px !important; margin-bottom: 8px !important; opacity: 1 !important; transform: none !important; }
  #ending-divider    { display: none !important; }
  #ending-credit     { font-size: 0.65rem !important; margin: 4px 0 6px !important; opacity: 1 !important; }

  /* Botões de encerramento: coluna única, 90% largura */
  #ending-actions {
    display:        flex    !important;
    flex-direction: column  !important;
    align-items:    center  !important;
    width:          90%     !important;
    max-width:      90%     !important;
    gap:            8px     !important;
    margin-top:     10px    !important;
    opacity:        1       !important;
    transform:      none    !important;
    flex-shrink:    0       !important;
  }

  .ending-btn-row {
    display:        flex    !important;
    flex-direction: column  !important;
    width:          100%    !important;
    gap:            8px     !important;
    flex-shrink:    0       !important;
  }

  .ending-btn-half { width: 100% !important; flex: none !important; }

  .ending-btn-half .ending-btn,
  .ending-btn-half a.ending-btn-galeria,
  #ending-actions > .ending-btn,
  #ending-actions > button.ending-btn {
    width:           100%         !important;
    min-height:      48px         !important;
    font-size:       1rem         !important;
    padding:         12px 20px    !important;
    white-space:     nowrap       !important;
    text-align:      center       !important;
    box-sizing:      border-box   !important;
    display:         flex         !important;
    align-items:     center       !important;
    justify-content: center       !important;
    gap:             8px          !important;
    border-radius:   30px         !important;
    flex-shrink:     0            !important;
  }

  /* Recomeçar: margem de segurança acima da barra home */
  #btn-restart-ending {
    margin-bottom: max(20px, env(safe-area-inset-bottom, 20px)) !important;
    position:      relative !important;
    z-index:       10       !important;
  }


  /* [MODAL-PLANTA] — centralizado, scroll interno até 85vh */
  #dialog-overlay {
    align-items:     center  !important;
    justify-content: center  !important;
    padding:         16px    !important;
  }

  #dialog-box {
    width:           92vw    !important;
    max-width:       92vw    !important;
    max-height:      85vh    !important;
    overflow-y:      auto    !important;
    -webkit-overflow-scrolling: touch !important;
    height:          auto    !important;
    margin:          0 auto  !important;
    padding:         24px 20px !important;
    box-sizing:      border-box !important;
    display:         flex    !important;
    flex-direction:  column  !important;
    align-items:     center  !important;
  }

  #dlg-btn-row {
    flex-direction: column !important;
    align-items:    center !important;
    gap:            8px    !important;
    width:          100%   !important;
  }

  #dlg-action-btn,
  #dlg-close-btn {
    width:      90%   !important;
    min-height: 48px  !important;
    box-sizing: border-box !important;
  }


  /* [MODAL-NOME] — centralizado, scroll interno até 85vh */
  #nome-modal {
    align-items:     center  !important;
    justify-content: center  !important;
    padding:         16px    !important;
  }

  #nome-modal-box {
    width:      92vw  !important;
    max-width:  92vw  !important;
    max-height: 85vh  !important;
    overflow-y: auto  !important;
    height:     auto  !important;
    margin:     0 auto !important;
    padding:    28px 20px 24px !important;
    box-sizing: border-box !important;
  }

  #nome-modal-acoes             { width: 100% !important; }
  #nome-input                   { width: 100% !important; min-height: 48px !important; font-size: 1rem !important; box-sizing: border-box !important; }
  #nome-modal-cancelar,
  #nome-modal-confirmar         { min-height: 48px !important; }


  /* [GUIA-PLANTAS] — scroll interno até 90vh */
  #guia-modal     { padding: 12px !important; }

  #guia-modal-box {
    width:      96vw  !important;
    max-width:  96vw  !important;
    max-height: 90vh  !important;
    box-sizing: border-box !important;
  }

  #guia-conteudo {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .guia-grid { grid-template-columns: 1fr !important; padding: 12px 14px 18px !important; }


  /* [TIPOGRAFIA] — leitura fácil, sem vazamentos laterais */
  .start-title  { font-size: clamp(1.3rem, 6vw, 1.8rem) !important; line-height: 1.2 !important; text-align: center !important; }
  .start-body   { font-size: 1rem !important; line-height: 1.5 !important; text-align: center !important; padding: 0 20px !important; }
  #dlg-title    { font-size: 1.1rem !important; text-align: center !important; }
  #dlg-body     { font-size: 1rem !important; line-height: 1.6 !important; text-align: center !important; padding: 0 15px !important; }
  #nome-modal-titulo { font-size: 1.1rem !important; text-align: center !important; }
  #nome-modal-desc   { font-size: 1rem !important; text-align: center !important; }

  .start-title, .start-body,
  #dlg-title, #dlg-body,
  #ending-headline, #ending-body,
  #nome-modal-titulo, #nome-modal-desc,
  p, h1, h2, h3 {
    overflow-wrap: break-word !important;
    word-break:    break-word !important;
    hyphens:       auto       !important;
    white-space:   normal     !important;
    max-width:     100%       !important;
  }


  /* [BOTOES] — touch targets 48px, 90% largura */
  .start-btn,
  #btn-galeria-inicio {
    width:      90%   !important;
    max-width:  90%   !important;
    min-height: 48px  !important;
    margin:     0 auto !important;
    font-size:  1.05rem !important;
    box-sizing: border-box !important;
  }

  #start-name-input {
    width:      90%   !important;
    max-width:  90%   !important;
    min-height: 48px  !important;
    margin:     0 auto !important;
    font-size:  1rem  !important;
    box-sizing: border-box !important;
  }

  .ending-btn { min-height: 48px !important; }


  /* [HUD] — z-index 1001 para ficar acima do ending-overlay */
  #ui-controls {
    position:       fixed !important;
    top:            15px  !important;
    right:          15px  !important;
    display:        flex  !important;
    flex-direction: row   !important;
    gap:            8px   !important;
    z-index:        1001  !important;
  }

  #mute-btn,
  #fullscreen-btn { position: static !important; }

  #item-acquired-popup {
    right:     10px !important;
    top:       max(16px, env(safe-area-inset-top, 16px)) !important;
    max-width: calc(100vw - 20px) !important;
    z-index:   1002 !important;
  }


  /* ── [ELEMENTOS FORA DO #game-scaler] ──────────────────────
     Estes overlays existem no DOM acima ou abaixo do scaler
     e NÃO são afetados pelo transform:scale do JS.
     São eles: #start-screen, #ending-overlay, #dialog-overlay,
               #guia-modal, #nome-modal.
     Podemos dar overflow-y:auto livremente pois o #game-scaler
     (o jogo em si) continua travado por trás.
  ──────────────────────────────────────────────────────────── */

  /* Caixas internas — largura e altura máximas seguras */
  #ending-content,
  #dialog-box,
  #nome-modal-box,
  #guia-modal-box {
    max-width:  90vw !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
  }

  /* Fontes maiores — estes textos não são escalados pelo JS */
  #ending-headline,
  #ending-body,
  #dlg-title,
  #dlg-body,
  #nome-modal-titulo,
  #nome-modal-desc,
  .start-title,
  .start-body {
    font-size: 1.3rem !important;
    line-height: 1.6  !important;
  }

  /* Supertítulo e créditos: menores que o corpo */
  #ending-supertitle,
  #ending-credit,
  .start-eyebrow,
  .start-credits {
    font-size: 0.8rem !important;
  }

} /* fim @media (max-width: 768px) */


/* [ORIENTACAO] — condição separada: portrait */
@media (max-width: 768px) and (orientation: portrait) {
  #orientation-overlay { display: flex; }
  body > *:not(#orientation-overlay) { visibility: hidden; }
}