:root{
 --ink:#102519;--forest:#0f2f1d;--green:#2f7842;--green2:#75aa58;
 --cream:#f5efdc;--paper:#eadfbe;--gold:#f1b52c;--muted:#657066;
 --danger:#9b2c2c;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;background:#cbdcbc;color:var(--ink)}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.6}
#app{width:min(100%,440px);min-height:100vh;margin:auto;background:var(--cream);border-inline:3px solid var(--ink)}
.screen{min-height:100vh;display:grid;grid-template-rows:auto 1fr auto;background:linear-gradient(#e6efda,#f6efdc 48%,#ecdfc1)}
.topbar{height:58px;background:var(--forest);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 16px}
.brand{font-weight:900}.stats{display:flex;gap:8px}.pill{padding:7px 10px;border-radius:999px;background:#ffffff1e;border:1px solid #ffffff3a;font-weight:850}
.content{padding:16px;display:grid;gap:14px;align-content:start;overflow:auto}
.footer{padding:12px 14px 16px;background:#fffffff0;border-top:1px solid #d5ddcf;display:grid;grid-template-columns:.8fr 1.4fr;gap:10px}
.btn{border:0;border-radius:15px;padding:14px 12px;font-weight:900;box-shadow:0 4px 0 #0002;transition:.12s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 #0002}
.primary{background:var(--green);color:white}.secondary{background:#e5e9e1;color:var(--ink)}.gold{background:var(--gold);color:#402a00}.blue{background:#357db7;color:white}.danger{background:var(--danger);color:white}
.sound-btn{position:fixed;right:12px;top:12px;width:42px;height:42px;border:0;border-radius:50%;background:#12341f;color:white;z-index:20}
.title{text-align:center;text-transform:uppercase;font-size:clamp(2.5rem,11vw,3.6rem);line-height:.88;letter-spacing:-2.5px;margin:0;color:#285f39;text-shadow:0 3px #fff,0 6px #f1b52c66}
.subtitle{text-align:center;margin:0;color:#5a421e;font-weight:800}
.hero{position:relative;min-height:325px;border-radius:24px;overflow:hidden;background:radial-gradient(circle at 70% 20%,#dff2c7,#8fbd73 38%,#365c3a 100%);border:2px solid #173f27;box-shadow:0 14px 30px #0b251729}
.hero img{position:absolute;left:0;bottom:-4px;width:72%;max-height:310px;object-fit:contain;filter:drop-shadow(0 12px 10px #0004)}
.quest-tag{position:absolute;right:16px;top:18px;background:#fff8df;border:2px solid #7a5b22;border-radius:16px;padding:9px 11px;font-weight:950;transform:rotate(2deg)}
.dialogue{background:#fffdf6;border:2px solid #2f7140;border-radius:18px;padding:14px 15px;line-height:1.4;box-shadow:0 8px 18px #10281914}
.dialogue strong{color:#2b6a3b}
.kicker{justify-self:start;background:#dbe9cf;color:#2e6c3e;border-radius:999px;padding:6px 11px;font-weight:900;font-size:.82rem}
.section-title{margin:0;font-size:1.6rem;line-height:1.08}
.profile{background:var(--paper);border:2px solid #c8aa61;border-radius:19px;padding:13px;display:grid;grid-template-columns:82px 1fr;gap:12px;align-items:center}
.profile-avatar{position:relative;font-size:4rem;display:grid;place-items:center}.gear{position:absolute;right:0;bottom:0;font-size:1.6rem}
.profile-name{font-size:1.18rem;font-weight:900}.level{font-weight:850;color:#2d6b3d}
.track{height:12px;background:#d2d8cb;border-radius:999px;overflow:hidden;margin-top:7px}.bar{height:100%;background:linear-gradient(90deg,#59994c,#f1b52c)}
.small{font-size:.83rem;color:var(--muted)}
.camp-scene{position:relative;min-height:210px;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,#aecf8e,#6fa064 58%,#466d49);border:2px solid #3d6b40;padding:14px}
.camp-scene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 30%,#fff8 0 4%,transparent 5%),linear-gradient(transparent 65%,#18331e55)}
.camp-companion{position:absolute;left:15px;bottom:10px;font-size:5.4rem;animation:idle 2.2s ease-in-out infinite}.camp-bubble{position:absolute;right:14px;top:15px;width:57%;background:#fffdf3;border:2px solid #315f38;border-radius:17px;padding:12px;font-weight:800}
@keyframes idle{50%{transform:translateY(-5px) rotate(1deg)}}
.hub-actions{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:9px}.hub-actions .btn{padding:12px 8px}
.map{position:relative;min-height:350px;border-radius:24px;overflow:hidden;background:linear-gradient(155deg,#b8d79c,#7eaf70 56%,#5c8a5f);border:2px solid #3e6c40}
.map:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 28% 25%,#e7f2d7 0 8%,transparent 9%),radial-gradient(circle at 72% 22%,#e7f2d7 0 8%,transparent 9%),radial-gradient(circle at 25% 72%,#e7f2d7 0 8%,transparent 9%),radial-gradient(circle at 72% 72%,#e7f2d7 0 8%,transparent 9%),linear-gradient(35deg,transparent 47%,#e7d2a966 48% 52%,transparent 53%)}
.map-node{position:absolute;width:122px;background:#fff9e8;border:2px solid #6d5725;border-radius:16px;padding:9px;text-align:center;font-weight:850;box-shadow:0 7px 15px #0002}
.map-node:nth-child(1){right:12px;top:20px}.map-node:nth-child(2){right:12px;bottom:28px}.map-node:nth-child(3){left:12px;top:18px}.map-node:nth-child(4){left:12px;bottom:30px}.map-node:nth-child(5){left:50%;top:50%;transform:translate(-50%,-50%)}
.map-node span{display:block;font-size:2rem}.map-node small{display:block;color:#6a6f66;font-weight:700}.map-node .points{margin-top:5px;color:#755006;font-size:.8rem}
.companion-strip{position:sticky;bottom:0;z-index:4;background:#fffdf8;border:2px solid #2f7140;border-radius:18px;padding:10px 12px;display:grid;grid-template-columns:50px 1fr;gap:10px;align-items:center;box-shadow:0 8px 20px #10281924}
.companion-face{font-size:2.7rem}.companion-text{font-weight:800}
.challenge-grid{display:grid;gap:10px}.challenge{border:2px solid #c0ccbe;background:#fff;border-radius:17px;padding:12px;display:grid;grid-template-columns:50px 1fr auto;gap:10px;align-items:center;text-align:left}
.challenge.done{background:#e5f0dd;border-color:#2e7040}.challenge-icon{font-size:2rem}.challenge-xp{font-weight:900;color:#755006}
.photo-input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.file-name{display:block;margin-top:3px;font-size:.75rem;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:230px}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.choice{border:2px solid #c2cec0;background:white;border-radius:16px;padding:12px 10px;min-height:90px;font-weight:850}.choice.selected{background:#e5f0dd;border-color:#2e7040}
.field{display:grid;gap:7px}.field label{font-weight:850;color:#2b6339}.field input,.field textarea,.field select{width:100%;border:1.8px solid #bbc7b7;border-radius:13px;padding:13px 14px;background:white;outline:none}.field textarea{min-height:100px;resize:none}
.counter-card{background:#fff;border:2px solid #c1ccbe;border-radius:18px;padding:13px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:10px}.counter-controls{display:flex;align-items:center;gap:10px}.counter-controls button{width:40px;height:40px;border:0;border-radius:12px;background:#2f7540;color:white;font-size:1.4rem;font-weight:900}.counter-value{min-width:72px;text-align:center;font-size:1.35rem;font-weight:900}
.tip{background:#fff8dc;border:2px dashed #b38a2f;border-radius:16px;padding:12px;line-height:1.35}
.location-info{display:grid;gap:5px;margin-top:10px;font-size:.85rem}
.sending{display:grid;place-items:center;gap:12px;text-align:center;padding:24px}.spinner{width:48px;height:48px;border:5px solid #d7dfd3;border-top-color:var(--green);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.finish{text-align:center;display:grid;justify-items:center;gap:12px}.finish-title{font-size:2rem;margin:0}.loot{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.loot-card{background:#fff2bd;border:2px solid #dbaa27;border-radius:16px;padding:12px;text-align:center;font-weight:900}
.inventory{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.item{background:white;border:2px solid #d1c9ad;border-radius:14px;padding:10px;text-align:center}
.error-box{background:#fff1f1;border:2px solid #b94a48;border-radius:16px;padding:13px;color:#6f1d1b}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,18px);opacity:0;background:#102f1d;color:white;padding:11px 16px;border-radius:999px;font-weight:850;transition:.2s;z-index:30}.toast.show{opacity:1;transform:translate(-50%,0)}
.reward{position:fixed;left:50%;top:42%;transform:translate(-50%,-50%) scale(.55);opacity:0;z-index:50;background:#fff0b7;border:3px solid #dfaa20;border-radius:18px;padding:16px 22px;font-size:1.8rem;font-weight:950;color:#684600;pointer-events:none}.reward.show{animation:pop 1s ease both}
@keyframes pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.55)}30%{opacity:1;transform:translate(-50%,-58%) scale(1.14)}70%{opacity:1;transform:translate(-50%,-55%) scale(1)}100%{opacity:0;transform:translate(-50%,-80%) scale(1)}}
.particles{position:fixed;inset:0;display:none;pointer-events:none;z-index:45}.particles.show{display:block}.particles.show:before{content:"🍃 ✦ ⭐ 🍂 ✦ 🍃 ⭐";position:absolute;left:50%;top:43%;transform:translate(-50%,-50%);font-size:2rem;animation:fall 1.2s ease both}
@keyframes fall{0%{opacity:0;transform:translate(-50%,-20%) scale(.5)}35%{opacity:1}100%{opacity:0;transform:translate(-50%,85%) scale(1.5)}}

/* Mapa MapLibre para elegir la ubicación del árbol */
.tree-map-wrap{width:100%;min-width:0;overflow:hidden;border:2px solid #315f38;border-radius:20px;background:#dce8d3;box-shadow:0 8px 18px #10281918}
#treeMap{display:block;position:relative;width:100%;height:420px;min-height:420px;overflow:hidden;background:#cfdac8}
#treeMap.maplibregl-map{width:100%;height:420px;min-height:420px;font-family:inherit}
.map-help{padding:11px 13px;background:#fffdf6;border-top:1px solid #c7d2c2;font-size:.84rem;color:var(--muted);line-height:1.35}
.location-actions{display:grid;grid-template-columns:1fr;gap:9px}
.location-selected{background:#e5f0dd;border:2px solid #2e7040;border-radius:16px;padding:11px 12px;display:grid;gap:4px}
.location-empty{background:#fff8dc;border:2px dashed #b38a2f;border-radius:16px;padding:11px 12px}
.maplibregl-ctrl-group{border-radius:12px!important;overflow:hidden;box-shadow:0 3px 12px #0003!important}
.maplibregl-ctrl-group button{width:38px;height:38px}
.maplibregl-ctrl-attrib{max-width:80%;font-size:9px}
.tree-map-marker{width:48px;height:58px;display:grid;place-items:end center;cursor:grab}
.tree-map-marker:active{cursor:grabbing}
.tree-map-marker-pin{width:44px;height:44px;display:grid;place-items:center;border-radius:50% 50% 50% 0;background:#f1b52c;border:3px solid #173f27;transform:rotate(-45deg);box-shadow:0 5px 12px #0005;font-size:22px}
.tree-map-marker-pin span{transform:rotate(45deg)}
.player-map-marker{display:grid;justify-items:center;gap:2px;pointer-events:none}
.player-map-avatar{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;border:4px solid white;background:#2f7842;box-shadow:0 4px 12px #0005;font-size:28px}
.player-map-label{padding:3px 7px;border-radius:999px;background:#102519;color:white;font-size:11px;font-weight:900;box-shadow:0 2px 7px #0004}
.map-load-error{height:100%;display:grid;place-items:center;padding:20px;text-align:center;color:#6f1d1b;background:#fff1f1;font-weight:850}
@media(max-height:720px){.content{align-content:start}.hero{min-height:250px}.hero img{max-height:245px}#treeMap,#treeMap.maplibregl-map{height:350px;min-height:350px}}
/* =========================================================
   CARTEL DE INSTALACIÓN PWA
========================================================= */

.install-banner {
    position: fixed;
    inset: 0;
    z-index: 99999;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 18px;
    background: rgba(5, 20, 12, 0.55);
    backdrop-filter: blur(4px);
}

.install-banner[hidden] {
    display: none;
}

.install-card {
    position: relative;

    width: min(100%, 460px);
    display: grid;
    grid-template-columns: 62px 1fr;
    gap: 14px;

    padding: 18px;
    padding-top: 22px;

    background: #f6f1df;
    border: 3px solid #163c25;
    border-radius: 22px;

    box-shadow:
        0 10px 0 #0d2818,
        0 18px 35px rgba(0, 0, 0, 0.35);

    animation: installBannerEnter 0.35s ease-out;
}

.install-icon {
    width: 62px;
    height: 62px;
    object-fit: cover;
    border-radius: 16px;
    border: 2px solid #163c25;
}

.install-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;

    padding-right: 22px;
    color: #173522;
}

.install-text strong {
    font-size: 18px;
    line-height: 1.15;
}

.install-text span {
    font-size: 13px;
    line-height: 1.35;
    opacity: 0.8;
}

.install-button {
    grid-column: 1 / -1;

    width: 100%;
    padding: 13px 18px;

    border: 0;
    border-radius: 14px;

    background: #247744;
    color: white;

    font: inherit;
    font-size: 16px;
    font-weight: 800;

    cursor: pointer;
    box-shadow: 0 4px 0 #15532e;
}

.install-button:active {
    transform: translateY(3px);
    box-shadow: 0 1px 0 #15532e;
}

.install-close {
    position: absolute;
    top: 7px;
    right: 9px;

    width: 32px;
    height: 32px;

    border: 0;
    background: transparent;
    color: #173522;

    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

@keyframes installBannerEnter {
    from {
        opacity: 0;
        transform: translateY(35px) scale(0.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (min-width: 700px) {
    .install-banner {
        align-items: center;
    }
}