@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;1,500&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#f1eee0;background:#233b35;font-synthesis:none}
*{box-sizing:border-box}body{margin:0;overflow:hidden}[hidden]{display:none!important}
button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible,a:focus-visible{outline:2px solid #edd5a0;outline-offset:5px}
#world,.vignette{position:fixed;inset:0;width:100%;height:100%}.vignette{pointer-events:none;background:linear-gradient(90deg,#10251dd9,transparent 70%),linear-gradient(0deg,#10251d77,transparent 24%)}
header{position:fixed;top:0;left:0;right:0;padding:26px 32px;display:flex;align-items:center;justify-content:space-between}.brand{color:inherit;text-decoration:none;font-size:25px;letter-spacing:1px}nav{display:flex;gap:10px}nav button{background:#1a322ad9;border:1px solid #d7dbbb40;border-radius:9px;padding:11px 16px;color:#eee7d1;font-size:16px}
main{position:absolute;top:28%;left:8%;max-width:580px}h1{font-family:'Playfair Display',Georgia,serif;font-weight:500;font-size:clamp(52px,5.7vw,84px);letter-spacing:-2px;line-height:1.12;margin:0 0 24px}h1 em{color:#dbc699;font-weight:500}p{font-size:18px;color:#c6d1bd;line-height:1.5;margin:16px 0}.primary{border:0;border-radius:7px;background:#d9bf86;color:#26372b;padding:18px 24px;font-size:18px;min-width:275px;display:flex;justify-content:space-between;gap:28px;align-items:center;font-weight:600;margin-top:30px}.primary:hover{background:#efdaad}.primary span{font-size:25px}.muted{color:#b0c0a8;font-size:16px}
#hud{position:absolute;left:32px;top:115px;display:flex;align-items:center;gap:25px;background:#19342be6;border:1px solid #e0d7b32b;border-radius:12px;padding:14px 22px}.altitude{font-size:36px;font-variant-numeric:tabular-nums}.altitude small{font-size:20px;margin-left:5px;color:#b9cab0}.amber{font-size:25px;color:#ecd199}
footer{position:fixed;bottom:26px;left:32px;display:flex;gap:22px;font-size:16px;padding:12px 18px;background:#183128df;border-radius:9px;color:#e2e6d4;align-items:center}footer>span{display:flex;align-items:center;gap:6px}kbd{font:14px 'DM Sans',sans-serif;border:1px solid #c4d0b864;border-radius:4px;padding:3px 7px;color:#f0e8ca}body.playing .vignette{background:linear-gradient(0deg,#10251d55,transparent 18%)}
#toast{position:fixed;top:110px;left:50%;transform:translate(-50%,-10px);opacity:0;transition:.2s;padding:15px 23px;border:1px solid #d7d1a13d;border-radius:9px;background:#20382ff5;color:#eee0b8;font-size:18px;pointer-events:none;text-align:center;max-width:90%}#toast.show{opacity:1;transform:translate(-50%,0)}
#interact{position:fixed;bottom:115px;left:50%;transform:translateX(-50%);background:#dec48d;color:#253d2d;border:0;border-radius:8px;font-size:19px;padding:15px 22px}#interact kbd{color:#253d2d;border-color:#253d2d55}
dialog{width:min(470px,94vw);max-height:92vh;overflow:auto;background:#203b32;color:#eee8d7;border:1px solid #8c9b7577;border-radius:13px;padding:30px;box-shadow:0 24px 100px #0c211c88}dialog::backdrop{background:#0c2019aa;backdrop-filter:blur(5px)}h2{font:34px Georgia,serif;margin:0 0 12px}dialog p{font-size:16px}.camp-balance{padding:15px 0;border-top:1px solid #c8d2b42b;border-bottom:1px solid #c8d2b42b;color:#e7cd90;font-size:23px}.upgrade{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:24px}.upgrade strong{font-size:17px;font-weight:500}.upgrade strong span{font-size:14px;color:#adc0a4}.upgrade small{display:block;font-size:14px;color:#adc0a4;margin-top:5px}.upgrade button{font-size:17px;border:1px solid #cfb98566;border-radius:6px;background:#d0b88415;padding:12px;color:#e1c794;white-space:nowrap}.upgrade button:disabled{opacity:.4;cursor:default}dialog .primary{width:100%;min-width:0}.secondary{background:transparent;border:0;color:#cbd7c2;width:100%;font-size:16px;padding:22px 0 0}
#touch{display:none;position:fixed;bottom:20px;left:15px;right:15px;gap:8px}#touch button{height:54px;min-width:50px;border-radius:9px;border:1px solid #e0d4ad77;background:#203a32ed;color:#eee3c7;font-size:23px;touch-action:none}#touch button:last-child{margin-left:auto;padding:0 16px;font-size:18px}#error{position:fixed;inset:40% 20%;background:#203b32;padding:30px;border:1px solid #d6bc83;font-size:18px;line-height:1.6}
@media(max-width:700px){header{padding:20px}.brand{font-size:21px}nav button{padding:10px;font-size:14px}nav kbd{display:none}main{left:7%;right:7%;top:25%}h1{font-size:54px}p{font-size:18px}#hud{left:20px;top:88px;padding:10px 15px;gap:18px}.altitude{font-size:30px}.amber{font-size:23px}footer{left:20px;right:20px;bottom:20px;gap:16px;font-size:14px}body.playing footer{display:none}body.playing #touch{display:flex}#toast{top:170px;width:max-content;font-size:16px}#interact{bottom:90px;white-space:nowrap}dialog{padding:24px}.upgrade strong{font-size:16px}}
@media(max-height:650px){main{top:22%}h1{font-size:52px}.primary{margin-top:20px}dialog{padding:24px}.upgrade{margin-top:14px}}
.loot-reward{position:fixed;pointer-events:none;color:#ffe1a0;font:bold 25px Georgia,serif;text-shadow:0 2px 4px #152d22,0 0 18px #c79037;white-space:nowrap;z-index:2;will-change:transform,opacity}
/* The skill tree grows from a shared root into three persistent paths. */
#camp{width:min(1080px,96vw);padding:28px 34px;background:radial-gradient(ellipse at 30% 65%,#304936,#182f29 70%)}
#camp h2{font-size:32px;margin-bottom:6px}#camp-copy{margin:0 0 16px}#camp .camp-balance{position:absolute;right:34px;top:28px;border:0;padding:0;font-size:22px}#camp-stats{font-size:13px;margin:0 0 12px}
.skill-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:26px;border-top:1px solid #b8c99730;padding-top:20px}.skill-map{min-width:0}.path-headings{display:flex;justify-content:space-around;color:#c4cfa8;text-transform:uppercase;letter-spacing:2px;font-size:10px}.tree-canvas{position:relative;aspect-ratio:720/610}.tree-canvas svg,.tree-nodes{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.tree-branch,.tree-root{fill:none;stroke-linecap:round}.tree-root{stroke:#bea273}.tree-branch.ghost{stroke:#839373;opacity:.17;stroke-dasharray:3 8}.tree-branch.alive{stroke:#b6be7f}.tree-leaf{fill:#98ad6e;opacity:.8}.growing{stroke-dasharray:1;animation:branch-grow 1.1s ease-out both}.sprouting{transform-box:fill-box;transform-origin:bottom center;animation:leaf-grow .7s .6s both}.skill-node{position:absolute;transform:translate(-50%,-50%);width:42px;height:42px;border:1px solid #718875;background:#233c32;color:#94a88e;border-radius:50%;padding:0;display:grid;place-items:center;transition:background .25s,box-shadow .25s}.skill-node>span{font-size:21px}.skill-node small{position:absolute;top:46px;white-space:nowrap;font-size:11px;color:#a0b199;font-weight:400}.skill-node.learned{background:#acbc7f;color:#263b2b;border-color:#d1d9a2;box-shadow:0 0 18px #b0c57c25}.skill-node.available{border:2px solid #e3c988;color:#f1d390;box-shadow:0 0 20px #d9b96733}.skill-node.saving{color:#cabd8f;border-color:#a79568}.skill-node.selected{outline:2px solid #e6d5a8;outline-offset:5px}.skill-node.locked{background:#1d332b}.skill-node:hover small,.skill-node.selected small{color:#f2e3b9}.blooming{animation:node-bloom 1.2s ease-out}.tree-legend{display:flex;justify-content:center;gap:20px;font-size:11px;color:#aab99a;margin-top:4px}.tree-legend span:first-child{color:#c1ce91}.tree-legend span:nth-child(2){color:#ead094}.skill-detail{border-left:1px solid #aab78b25;padding:28px 0 0 26px;align-self:stretch}.eyebrow{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#d5bd85}.skill-detail h3{font:30px Georgia,serif;margin:16px 0}.skill-effect{font-size:16px!important;min-height:54px}.skill-requirements{border-top:1px solid #bac39d30;border-bottom:1px solid #bac39d30;margin:24px 0}.skill-requirements p{font-size:12px;color:#96a58f;display:flex;justify-content:space-between;gap:8px}.skill-requirements .met{color:#cbd7a1}.skill-requirements .met:before{content:'✓'}.skill-price{font-size:25px;color:#e3c78b}.skill-price small{font-size:13px;color:#aabb9d}.skill-detail .primary{font-size:14px;padding:15px;margin-top:15px;display:block}.learn-skill:disabled{opacity:.45;cursor:default}.skill-note{font-size:12px!important;line-height:1.7}.skill-announcement{font-size:12px;color:#dbd69a}#camp>#resume{margin-top:22px;padding:13px 20px}#camp>#restart{font-size:13px;padding-top:14px}
@keyframes branch-grow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes leaf-grow{from{scale:0;opacity:0}to{scale:1;opacity:.8}}@keyframes node-bloom{0%,45%{box-shadow:0 0 0 0 #d5df9740}75%{box-shadow:0 0 0 18px #d5df9700}100%{box-shadow:0 0 18px #b0c57c25}}
@media(max-width:760px){#camp{padding:22px 18px}#camp h2{font-size:25px}#camp .camp-balance{position:static;font-size:18px;margin:8px 0}#camp-copy{font-size:13px}.skill-layout{grid-template-columns:1fr;gap:20px}.skill-detail{border-left:0;border-top:1px solid #aab78b25;padding:18px 0 0}.skill-node{width:34px;height:34px}.skill-node small{top:37px;font-size:9px}.path-headings{font-size:9px;letter-spacing:1px}.skill-effect{min-height:0}.skill-requirements{margin:15px 0}}
@media(prefers-reduced-motion:reduce){.growing,.sprouting,.blooming{animation:none}.skill-node{transition:none}}
.skill-node small{background:#20392f;border-radius:4px;padding:2px 5px;color:#cbd6b9}.skill-node.learned small{color:#e0e8c5}
#gamepad-controls{position:fixed;bottom:55px;left:30px;right:30px;text-align:center;font-size:13px;color:#eee3c7;pointer-events:none}
#camp button:focus{outline:2px solid #ffe1a0;outline-offset:5px}
#grapple-status{position:fixed;left:32px;top:183px;max-width:min(460px,80vw);margin:0;padding:9px 13px;border:1px solid #d8c18b44;border-radius:7px;background:#19342be8;color:#f1d69a;font-size:12px;pointer-events:none}
#grapple-aim{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;color:#ecd199}
#grapple-guide{stroke:currentColor;stroke-width:1.5;stroke-dasharray:6 5;opacity:.85}
#grapple-reticle{stroke:currentColor;stroke-width:2;fill:#152d2244}#grapple-dot{fill:currentColor}
#grapple-camp{padding:12px 15px;border:1px solid #d8c18b44;border-radius:7px;color:#f1d69a;font-size:13px}
body.aiming #world{cursor:none}
#world{touch-action:none}#touch button{min-width:0;flex:1}#touch #touch-hook{font-size:13px;padding:0 4px}#touch button:last-child{padding:0 8px}
body.aiming #toast{top:auto;bottom:100px}
@media(max-width:700px){#grapple-status{left:20px;top:151px;font-size:11px}}
@media(max-width:700px){#gamepad-controls{bottom:80px;left:15px;right:15px;font-size:11px}}