#tree{padding:0;min-width:0;overflow:hidden;background:#e9e7c3}#tree .tree-world{position:relative;height:calc(100dvh - var(--tree-nav-height,76px));min-height:250px;overflow:hidden;isolation:isolate;user-select:none;-webkit-user-select:none;touch-action:pan-y}.tree-landscape{position:absolute;inset:0;width:100%;height:100%}.tree-heading{position:absolute;top:12px;left:12px;right:12px;text-align:center;pointer-events:none;color:#355540;text-shadow:0 1px 9px #fff8}.tree-heading h1{font-size:clamp(21px,3vw,32px);margin:0 0 3px;line-height:1.2}.tree-heading p{font-size:12px;line-height:1.4;margin:0 auto;max-width:440px;background:#fff9;padding:5px 12px;border-radius:18px}.tree-empty,.tree-hint{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:max-content;max-width:85%;margin:0;text-align:center;background:#fff9;color:#355540;padding:8px 14px;border-radius:16px;font-size:13px;pointer-events:none}.tree-resident{position:absolute;transform:translate(-50%,-50%);border:0!important;background:transparent!important;padding:0!important;box-shadow:none!important;min-height:44px;min-width:44px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;animation:tree-walk var(--duration) linear var(--delay) infinite}.tree-resident-turn{display:block;animation:tree-turn var(--duration) steps(1) var(--delay) infinite}.tree-resident-body{display:block;animation:tree-bob 2.8s ease-in-out var(--delay) infinite}.tree-resident svg{width:100%;height:auto;display:block;filter:drop-shadow(0 3px 2px #37542d30)}.tree-resident-name{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;color:#294832;background:#ffffefb0;border-radius:8px;padding:1px 3px}.tree-resident:focus-visible{outline:3px solid #fff1a5!important;border-radius:12px}.tree-snack{position:absolute;right:12%;bottom:25%;font-size:15px;animation:tree-snack var(--duration) steps(1) var(--delay) infinite}.tree-forest{animation:tree-forest 24s ease-in-out infinite alternate}.tree-apple{animation:tree-shine 7s ease-in-out infinite}.tree-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.tree-particles i{position:absolute;font-style:normal;color:#fff6b5;font-size:22px;animation:tree-drift var(--duration) linear var(--delay) infinite}#tree:not(.tree-running) *,#tree:not(.tree-running) *:before{animation-play-state:paused!important}.tree-letter{position:relative;background:repeating-linear-gradient(#fff8e6,#fff8e6 29px,#d5c9aa55 30px);color:#65513e;border:1px solid #d8c49c;border-radius:5px 22px 6px 18px;padding:25px clamp(15px,4vw,32px);text-align:left;max-width:540px;margin:auto;overflow-wrap:anywhere}.tree-letter small{font-size:10px;letter-spacing:2px}.tree-letter h2{margin:8px 0;font-size:27px}.tree-letter p{font-size:14px;line-height:1.7}.tree-letter-portrait{width:108px;float:right;margin:0 0 8px 12px}.tree-letter-portrait svg{width:100%;height:auto}.tree-letter-seal{float:right;background:#b4544f;color:#ffe6b5;border:4px double #e5a08a;border-radius:50%;width:42px;height:42px;display:grid;place-items:center;font-size:25px}.tree-letter-details{font-size:12px!important}.tree-letter-sign{font-style:italic}.tree-letter-actions{clear:both;display:flex;flex-wrap:wrap;gap:9px;padding-top:10px}.tree-letter-actions button{flex:1 1 180px;min-height:44px}
@keyframes tree-walk{0%,10%{transform:translate(calc(-50% - var(--walk)),-50%)}40%,60%{transform:translate(calc(-50% + var(--walk)),-50%)}90%,100%{transform:translate(calc(-50% - var(--walk)),-50%)}}@keyframes tree-turn{0%,59%{transform:scaleX(1)}60%,99%{transform:scaleX(-1)}100%{transform:scaleX(1)}}@keyframes tree-bob{50%{transform:translateY(-2px) rotate(1deg)}}@keyframes tree-snack{0%,43%,61%,100%{opacity:0}44%,60%{opacity:1}}@keyframes tree-forest{to{transform:translateX(4px)}}@keyframes tree-shine{50%{opacity:.75}}@keyframes tree-drift{0%{transform:translate(0,-15px);opacity:0}20%,70%{opacity:.8}100%{transform:translate(22px,110px) rotate(100deg);opacity:0}}
@media(min-width:850px){.tree-landscape{left:50%;transform:translateX(-50%);width:min(100%,1100px)}.tree-world{background:linear-gradient(#f7dfb1,#c5d4a4 70%,#96ba70)}}
@media(max-width:420px){.tree-heading p{max-width:310px;font-size:11px}.tree-heading p span{display:block}.tree-hint{font-size:11px}.tree-letter{padding:18px 14px}}
@media(max-height:500px){.tree-heading{top:5px}.tree-heading h1{font-size:20px}.tree-heading p{font-size:10px;padding:2px 10px}.tree-hint,.tree-empty{font-size:10px;bottom:5px;padding:4px 10px}.tree-resident{max-width:55px}.tree-resident-name{font-size:8px}}
@media(prefers-reduced-motion:reduce){#tree *{animation:none!important}.tree-snack{display:none}}


/* Preserve the tree proportions and reserve both navigation bars on mobile. */
#tree .tree-world{height:calc(100dvh - var(--nav,76px));min-height:0;background:linear-gradient(#f7dfb1,#c5d4a4 70%,#96ba70)}
#tree .tree-landscape{left:50%;inset-block:0;transform:translateX(-50%);width:max(100%,75dvh);height:100%}
.tree-resident{min-width:0;min-height:0;animation-name:tree-stroll}.tree-resident-turn{position:relative;animation-name:tree-face}.tree-resident-body{animation:tree-gait var(--duration) linear var(--delay) infinite}.tree-resident-name{font-size:clamp(7px,1.8vw,10px)}
.tree-apple{transform-box:fill-box;transform-origin:center}.tree-apple-special{animation:tree-golden 4s ease-in-out infinite}
@keyframes tree-stroll{0%,12%{transform:translate(calc(-50% - var(--walk)),-50%)}42%,64%{transform:translate(calc(-50% + var(--walk)),-50%)}94%,100%{transform:translate(calc(-50% - var(--walk)),-50%)}}
@keyframes tree-face{0%,63%{transform:scaleX(1)}64%,99%{transform:scaleX(-1)}100%{transform:scaleX(1)}}
@keyframes tree-gait{0%,12%,42%,45%,64%,94%,100%{transform:translateY(0)}16%,24%,32%,40%,68%,76%,84%,92%{transform:translateY(-2px) rotate(2deg)}20%,28%,36%,72%,80%,88%{transform:translateY(0) rotate(-2deg)}48%,60%{transform:translateY(3px) scaleY(.88)}}
@keyframes tree-golden{50%{filter:drop-shadow(0 0 7px #ffe890) brightness(1.25)}}
@media(max-width:760px){#tree .tree-world{height:calc(100dvh - var(--nav,65px) - env(safe-area-inset-top,0px) - 70px - env(safe-area-inset-bottom,0px))}#tree .tree-landscape{width:max(100%,calc((100dvh - 135px) * .82))}.tree-hint,.tree-empty{bottom:6px}}
@media(max-height:500px){.tree-resident-name{font-size:7px}.tree-heading p span{display:inline}.tree-heading h1{margin:0}}
@media(prefers-reduced-motion:reduce){#tree .tree-resident,#tree .tree-resident-body,#tree .tree-resident-turn,#tree .tree-apple{animation:none!important}}

/* Celular vertical: barra arriba (--nav) y abajo (70px + zona segura) */
@media(max-width:760px) and (min-height:501px){#tree{padding-bottom:0!important}#tree .tree-world{height:calc(100dvh - var(--nav,65px) - 70px - env(safe-area-inset-bottom,0px))}}