@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{color-scheme:dark;font-family:'DM Sans',sans-serif;color:#f6f3df;background:#14251c}*{box-sizing:border-box}body{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer;border:1px solid #e4edcd36;background:#17291eb8;border-radius:999px;padding:12px 20px;backdrop-filter:blur(12px);font-size:14px;min-height:44px}button:hover{background:#415338}button:focus-visible,a:focus-visible{outline:3px solid #e2eea2;outline-offset:5px}button:disabled{opacity:.55;cursor:default}.primary{background:#dfe9b1;color:#223423;border:none;font-weight:600;padding:17px 25px}.primary:hover{background:#f0f6d4}#world{position:relative;height:100vh;height:100svh;height:100dvh;min-height:0;overflow:hidden}#canvas,.shade{position:absolute;inset:0}canvas{width:100%;height:100%;display:block;touch-action:none}.shade{pointer-events:none;background:linear-gradient(90deg,#0a1b17a6,transparent 62%),linear-gradient(0deg,#0917109c,transparent 24%,transparent 80%,#10201655)}header{position:absolute;top:36px;left:48px;right:48px;display:flex;justify-content:space-between;align-items:center}.brand{color:inherit;text-decoration:none;font:500 26px 'Playfair Display',serif}.brand span{display:block;font:10px 'DM Sans',sans-serif;letter-spacing:2.2px;margin-top:9px}.top-actions{display:flex;gap:10px}#help{width:46px;padding:0;font-size:20px}.intro{position:absolute;left:8%;top:28%;max-width:650px}.eyebrow{font-size:11px;letter-spacing:2.5px;font-weight:600;color:#d4e4b6}h1{font:500 clamp(44px,5.3vw,78px)/1.13 'Playfair Display',serif;letter-spacing:-2px;margin:23px 0}h1 em,h2 em{color:#dfebb4;font-weight:500}.intro>p:not(.eyebrow){font-size:16px;line-height:1.8;color:#e4e8d7}.intro .primary{margin-top:19px;min-width:216px;text-align:left}.primary span{margin-left:27px}.intro-note{font-size:10px;letter-spacing:2px;margin-top:24px;color:#c4cdb6}.location,.view-label{position:absolute;bottom:30px;font-size:10px;letter-spacing:2px;color:#d8e0cc;pointer-events:none}.location{left:48px;display:flex;align-items:center;gap:12px}.view-label{right:48px}.sun{width:9px;height:9px;border:1px solid #e4edba;border-radius:50%;box-shadow:0 0 12px #ebff87}.divider{opacity:.4}.mission{position:absolute;top:145px;left:48px;max-width:320px}.mission h2{font:500 29px/1.2 'Playfair Display',serif;margin:10px 0}.mission>p:last-of-type{font-size:14px;color:#d5dfcb;line-height:1.5}.steps{display:flex;gap:7px;margin-top:20px}.steps i{height:3px;width:36px;background:#ffffff30}.steps .active{background:#dfebb4}.vitals{position:absolute;right:48px;top:148px;width:145px;font-size:12px}.vitals span{display:flex;justify-content:space-between}meter{display:block;width:100%;height:6px;margin-top:9px}meter::-webkit-meter-bar{background:#ffffff22;border:0}meter::-webkit-meter-optimum-value{background:#cddfa1}.controls{position:absolute;bottom:75px;width:100%;display:flex;flex-direction:column;align-items:center;gap:19px}.desktop-help{font-size:12px;color:#d8dfce}.desktop-help span{margin:0 12px;opacity:.5}kbd{font:11px 'DM Sans',sans-serif;letter-spacing:1px}.action-buttons{display:flex;gap:10px}#sense[aria-pressed=true],#shell[aria-pressed=true]{background:#dce9ab;color:#253825}.sensation{position:absolute;bottom:210px;left:50%;transform:translateX(-50%);text-align:center;font:italic 19px 'Playfair Display',serif;width:min(85%,600px);text-shadow:0 2px 8px #000}.sensation:empty{display:none}dialog{border:1px solid #b9cf8c40;border-radius:22px;background:#192e23f5;color:#f1f0dd;padding:40px;max-width:500px;width:calc(100% - 36px);max-height:85svh;box-shadow:0 30px 100px #0008}dialog::backdrop{background:#08150cc2;backdrop-filter:blur(8px)}dialog h2{font:500 37px/1.2 'Playfair Display',serif;margin:18px 0}dialog p,dd{font-size:15px;line-height:1.7;color:#cbd5c2}dt{margin-top:16px;font-weight:600;font-size:14px}dd{margin:5px 0}dialog .small{font-size:12px}.close{position:absolute;top:10px;right:10px;padding:0;width:44px;font-size:23px}#finish button{display:block;width:100%;margin-top:12px}#joystick{display:none}#error{position:absolute;inset:30%;background:#13271f;padding:30px;border-radius:20px}body.shelled .shade{background:radial-gradient(ellipse at center,#0a130655 0%,#080e09f5 65%)}[hidden]{display:none!important}
@media(max-width:700px){#world{min-height:0}header{top:24px;left:24px;right:24px}.brand{font-size:23px}.brand span{font-size:8px;letter-spacing:1.5px}.top-actions button{padding:10px 13px;font-size:12px}#help{width:42px}.intro{left:27px;right:22px;top:27%}h1{font-size:clamp(39px,10.4vw,58px);letter-spacing:-1.3px}.intro>p:not(.eyebrow){font-size:15px}.location{left:24px;bottom:22px;font-size:8px;letter-spacing:1.4px;gap:8px}.view-label{display:none}.mission{top:116px;left:24px;max-width:250px}.mission h2{font-size:25px}.mission .eyebrow{font-size:9px;letter-spacing:1.7px}.mission>p:last-of-type{max-width:220px;font-size:13px}.vitals{right:24px;top:auto;bottom:229px;width:110px}.controls{bottom:67px;align-items:flex-end;padding-right:20px}.desktop-help{display:none}.action-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:177px}.action-buttons button{padding:12px 10px}.action-buttons .primary{grid-column:1 / 3;font-size:13px}.sensation{bottom:285px;font-size:17px}#joystick{display:block;position:absolute;bottom:86px;left:26px;width:112px;height:112px;border:1px solid #ffffff35;background:#ffffff08;border-radius:50%;touch-action:none}#stick{position:absolute;left:33px;top:33px;width:44px;height:44px;border:1px solid #e2ecc07a;border-radius:50%;background:#dce9b32a;pointer-events:none}dialog{padding:30px}dialog h2{font-size:30px}#error{inset:20px}}
@media(max-height:600px) and (min-width:701px){header{top:18px}.intro{top:20%}h1{font-size:44px}.intro-note{display:none}.intro .primary{margin-top:0}.mission{top:100px}.controls{bottom:50px}.sensation{bottom:160px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}

#sensoryVeil,#rainFlash{position:absolute;inset:0;pointer-events:none;transition:opacity .8s;opacity:0}#sensoryVeil{background:radial-gradient(ellipse at center,transparent 15%,#061c1dcc 100%);backdrop-filter:blur(1.5px)}body.sensing #sensoryVeil{opacity:1}#rainFlash{background:radial-gradient(ellipse at 65% 25%,#e5f6f81a,transparent 70%)}body.raining #rainFlash{opacity:1}body.immersed .mission,body.immersed .vitals,body.immersed .location,body.immersed .view-label,body.immersed .desktop-help,body.immersed header .brand{opacity:0;pointer-events:none}body.immersed .sensation{font-size:21px}body.immersed .action-buttons{opacity:.6}body.immersed .action-buttons:hover{opacity:1}.mission,.vitals,.location,.view-label,.brand{transition:opacity .6s}@media(max-width:700px){#immerse{font-size:11px;padding:9px 10px}.top-actions{gap:5px}header{left:20px;right:20px}.brand{font-size:20px}.brand span{max-width:100px;line-height:1.5;font-size:7px}.sensation{line-height:1.45}}

.treasures{position:absolute;right:48px;top:210px;display:flex;flex-direction:column;align-items:flex-end;gap:9px;font-size:13px;color:#f1df9d}.treasures>span:first-child{font:25px 'Playfair Display',serif}#questProgress{font-size:12px;margin-top:13px;color:#e6eabb}#bearing{position:absolute;left:50%;top:120px;transform:translateX(-50%);border:1px solid #d9e5be33;border-radius:50px;padding:8px 16px;background:#1a30226b;backdrop-filter:blur(8px);font-size:12px;letter-spacing:.5px;color:#eaf0d2}#results{display:flex;justify-content:center;gap:20px;padding:20px 0;border-block:1px solid #dce8af33;text-align:center}#results b{display:block;font:32px 'Playfair Display',serif;color:#eddfa4}#results span{font-size:12px;color:#c5d4bd}body.immersed .treasures,body.immersed #bearing{opacity:0;pointer-events:none}.treasures{transition:opacity .6s}#cameraMode{font-size:12px}body.bird-danger .vitals{color:#ffcb9f}body.bird-danger #bearing{background:#543328b0;border-color:#edbf8970}@media(max-width:700px){header{flex-wrap:wrap;row-gap:12px}.top-actions{gap:4px}#cameraMode{position:fixed;top:85px;right:20px;font-size:10px;padding:8px 12px;min-height:36px}#bearing{top:auto;bottom:260px;max-width:85%;white-space:nowrap;font-size:11px}.treasures{top:154px;right:24px;font-size:11px;gap:5px}.treasures>span:first-child{font-size:21px}.mission{max-width:230px}.mission h2{max-width:220px;font-size:23px}.mission>p:last-of-type{max-width:190px}.mission .steps{gap:5px}.steps i{width:26px}.sensation{bottom:304px}.vitals{bottom:219px}#questProgress{max-width:200px;font-size:11px}.intro{top:26%}.intro>p:not(.eyebrow){max-width:330px}}

#bodyVeil,#scentSides{position:absolute;inset:0;pointer-events:none}#bodyVeil{background:radial-gradient(ellipse at 50% 42%,transparent 38%,#07130d70 100%);box-shadow:inset 0 0 100px #10251744;opacity:var(--body-opacity,.6)}#scentSides{background:linear-gradient(90deg,rgba(138,218,201,var(--scent-left,0)),transparent 35%,transparent 65%,rgba(138,218,201,var(--scent-right,0)));transition:background .3s}body.embodied .mission{opacity:0;pointer-events:none}body.embodied .vitals{opacity:0;pointer-events:none}body.embodied #bearing{background:none;border:none;backdrop-filter:none;top:auto;bottom:180px;font:italic 17px 'Playfair Display',serif;white-space:normal;text-align:center;width:min(80%,500px)}body.embodied .location,body.embodied .view-label,body.embodied .brand{opacity:0;pointer-events:none}body.embodied .desktop-help{opacity:.6}body.embodied header{justify-content:flex-end}body.embodied .sensation{bottom:auto;top:17%;font-size:20px;color:#e0e8ce}body.embodied .controls{bottom:45px}.action-buttons button{background:#14281b66}.action-buttons .primary{background:#dfe9b1d9}body.shelled #bodyVeil{background:radial-gradient(ellipse at center,transparent 6%,#170e08cc 68%)}@media(max-width:700px){body.embodied #bearing{bottom:242px;font-size:16px}body.embodied .sensation{top:19%;font-size:18px}body.embodied .controls{bottom:67px}}

/* A quieter frame around the living world. */
.shade{background:linear-gradient(90deg,#071d18a6 0%,#091d1722 48%,transparent 72%),linear-gradient(0deg,#06180e66,transparent 28%,transparent 80%,#0b211f33)}header{top:32px;left:40px;right:40px}.brand{font-size:25px;letter-spacing:-.4px}.brand span{opacity:.65;font-size:9px;letter-spacing:2.4px}.intro{left:7.5%;top:29%}.intro .eyebrow{font-size:10px;letter-spacing:3px;color:#d1dda6}h1{font-size:clamp(48px,5.7vw,83px);line-height:1.1;letter-spacing:-2.4px;text-shadow:0 4px 35px #08190a33}h1 em{color:#dce9ac}.intro>p:not(.eyebrow){color:#d0dbca;font-size:15px;line-height:1.85}.intro .primary{border:1px solid #f0f8c95c;box-shadow:0 6px 30px #14260833;padding:17px 25px;min-width:220px}.intro-note{opacity:.6;font-size:9px;letter-spacing:2.3px}.top-actions button{background:#14271f55;border-color:#d9e7b524;backdrop-filter:blur(16px)}.action-buttons{padding:7px;border:1px solid #edf5d217;border-radius:40px;background:#0c221b3b;backdrop-filter:blur(14px)}.action-buttons button{border-color:#e2ecc221;min-height:47px}.action-buttons .primary{background:#dae6b6;color:#253b28}.sensation{font-weight:500;text-shadow:0 2px 18px #081e12cc}body.embodied .top-actions{opacity:.62;transition:opacity .25s}body.embodied .top-actions:hover,body.embodied .top-actions:focus-within{opacity:1}body.embodied .desktop-help{font-size:11px;letter-spacing:.25px}body.embodied #bearing{color:#cbdcc0;text-shadow:0 2px 14px #0e241c}dialog{background:linear-gradient(150deg,#243c2f,#112a23);border-color:#c4dba536;box-shadow:0 35px 120px #020e09b3}.close{border-color:transparent}@media(max-width:700px){header{top:23px;left:23px;right:23px}.intro{left:28px;right:24px;top:28%}h1{font-size:clamp(43px,11.4vw,66px);letter-spacing:-1.5px}.intro>p:not(.eyebrow){font-size:14px}.action-buttons{padding:6px;width:183px;border-radius:25px}.controls{padding-right:17px}body.embodied .sensation{top:17%;font-size:18px}.brand{font-size:22px}.brand span{font-size:8px}#joystick{background:#17372822;border-color:#dceabe30;backdrop-filter:blur(4px)}#stick{background:#dfefad24;border-color:#e1ecb358}}

#fieldNotes{list-style:none;padding:0;color:#b9cbb5;font-size:14px;line-height:1.65}#fieldNotes li{padding:13px 0;border-bottom:1px solid #bbd2ab20}#fieldNotes strong,#fieldNotes span{display:block}#fieldNotes strong{color:#e4ebcc;font-weight:500;margin-bottom:4px}dialog h3{font:24px 'Playfair Display',serif;margin:30px 0 10px}body.embodied .vitals{opacity:0;transition:opacity 1s}body.bird-danger .vitals{opacity:.8}@media(prefers-reduced-motion:reduce){.shade,#bodyVeil,#scentSides{transition:none}}

#effectPanel{position:absolute;top:88px;left:50%;transform:translateX(-50%);display:flex;align-items:center;flex-direction:column;gap:7px;padding:12px 18px;border:1px solid #e2bffa44;border-radius:20px;background:#15231cdb;backdrop-filter:blur(12px);color:#f6e8ff;z-index:8;max-width:90%;width:max-content;text-align:center}#effectPanel[hidden]{display:none}#effectName{font-size:10px;letter-spacing:.18em}#effectTime{font-size:11px;opacity:.7}#effectPanel button{min-height:38px;padding:7px 16px;font-size:12px}.strange-routes{display:flex;flex-wrap:wrap;gap:8px}.strange-routes button{min-height:44px;font-size:12px}#guide{max-height:85dvh;overflow-y:auto}@media(max-width:600px){#effectPanel{top:75px;padding:10px 14px;gap:4px}#effectName{font-size:9px}}
body.embodied:has(#effectPanel:not([hidden])) .sensation{top:205px;font-size:17px}
@media(max-width:600px){body.embodied:has(#effectPanel:not([hidden])) .sensation{top:190px;font-size:16px}}

#eventPanel{position:absolute;top:90px;left:50%;transform:translateX(-50%);z-index:7;display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;width:min(85%,380px);padding:13px 18px;border-radius:20px;border:1px solid #cfe6cb33;background:#122b24d9;backdrop-filter:blur(12px)}#eventName{font-size:10px;letter-spacing:.17em;color:#e4efc6}#eventDetail{font-size:12px;line-height:1.5;color:#cbded4}#eventPanel button{min-height:38px;padding:7px 16px;font-size:12px}body.embodied:has(#eventPanel:not([hidden])) .sensation{top:235px;font-size:17px}body:has(#eventPanel:not([hidden])) #effectPanel{top:auto;bottom:245px}@media(max-width:600px){#eventPanel{top:80px;padding:10px 14px}body.embodied:has(#eventPanel:not([hidden])) .sensation{top:225px;font-size:16px}body:has(#eventPanel:not([hidden])) #effectPanel{bottom:320px}}

/* The game occupies the current viewport as mobile browser bars open/close. */
html,body{width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
#canvas canvas{width:100%;height:100%}

/* Let the garden's own light breathe once the player enters it. */
body.embodied .shade{background:linear-gradient(0deg,#071b1824,transparent 28%,transparent 85%,#091d1714)}
body.embodied #bodyVeil{box-shadow:inset 0 0 80px #1025171a}
@media(pointer:coarse){button,.top-actions button,.action-buttons,#joystick{backdrop-filter:none}.action-buttons{background:#112b23b5}.top-actions button{background:#14271f99}}

/* Loading is HTML/CSS so it stays legible before any 3D work is ready. */
#world{background:radial-gradient(ellipse at 80% 15%,#53644255,transparent 55%),radial-gradient(ellipse at 18% 75%,#345f4555,transparent 60%),#13271e}
/* A fully transparent canvas can suspend default-framebuffer GPU work in browsers. */
#canvas{transition:opacity .65s}body.loading-garden #canvas{opacity:.001;pointer-events:none}
#loading{display:flex;align-items:center;gap:13px;margin-top:20px;color:#deebc5;font-size:13px;line-height:1.5;max-width:330px}
#loading small{display:block;color:#aebfa5;font-size:11px;margin-top:4px}
.load-seed{flex:0 0 23px;width:23px;height:23px;border:1px solid #dce8ac30;border-top-color:#e5edba;border-radius:50%;animation:garden-turn 2.5s linear infinite}
#loadRetry{padding:8px 0;border:0;background:none;font-size:12px;text-decoration:underline;text-underline-offset:4px}
#start:disabled{opacity:.5}#error{z-index:50;inset:0;border-radius:0;display:grid;place-items:center;background:#10281f;padding:max(24px,env(safe-area-inset-top)) 24px;overflow:auto}
#error>div{width:min(100%,430px)}#error h2{font:500 38px/1.15 'Playfair Display',serif}#error p:not(.eyebrow){font-size:15px;line-height:1.7;color:#cbd9c1}#error button{margin:10px 8px 0 0}
.no-script{position:absolute;bottom:30px;left:24px;right:24px;background:#13271e;padding:20px}
@keyframes garden-turn{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.load-seed{animation:none}#canvas{transition:none}}
@media(max-width:700px) and (max-height:740px){body.loading-garden .intro{top:20%}body.loading-garden h1{font-size:39px;margin:15px 0}body.loading-garden .intro-note{display:none}}