:root{--ink:#213b34;--paper:#eee4c9;--muted:#6a6a50;--gold:#c7a665;--mint:#95dfc4;--safe-top:env(safe-area-inset-top,0px);--safe-bottom:env(safe-area-inset-bottom,0px);font-family:Arial,Helvetica,sans-serif;color:#f2e7cb;font-synthesis:none}
*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;overscroll-behavior:none}body{background:#10241e;user-select:none;-webkit-user-select:none;touch-action:none}button,input,select{font:inherit}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:disabled{cursor:default;opacity:.55}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #76c9b1;outline-offset:4px}button{border:0;background:none}svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}button svg{pointer-events:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}#world,#game{position:fixed;inset:0;width:100%;height:100%;display:block;outline:0}.cinematic-vignette{pointer-events:none;position:fixed;inset:0;z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 40%,#07151045 100%),linear-gradient(0deg,#071a1b38,transparent 27%,transparent 70%,#08181138)}
.primary{min-height:52px;border:1px solid #f2dba1;background:linear-gradient(135deg,#e9d4a0,#c7a45f);color:#263b2f;border-radius:4px;box-shadow:inset 0 0 0 3px #dcc38d,0 4px 0 #69542f,0 8px 22px #11231e25;display:inline-flex;align-items:center;justify-content:space-between;gap:35px;padding:15px 25px;font-weight:700;font-size:16px}.primary:hover{filter:brightness(1.06)}.primary:active{transform:translateY(2px);box-shadow:inset 0 0 0 3px #dcc38d,0 2px 0 #69542f}.primary span{font-size:23px}.secondary{min-height:44px;border:1px solid #84755466;border-radius:3px;padding:11px 16px;color:var(--ink);background:#ddcca342;font-size:14px}.secondary:hover{background:#bca77b33}.danger{color:#874536}.icon-btn{width:46px;height:46px;display:grid;place-items:center;border:1px solid #e8d4a061;border-radius:50%;background:#17382ce8;color:#ecddba;box-shadow:inset 0 0 0 3px #24473b}.eyebrow{font-size:12px;letter-spacing:.16em;font-weight:700;text-transform:uppercase;line-height:1.6}.loading{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;z-index:8}.fade{position:fixed;inset:0;background:#0a211b;opacity:0;pointer-events:none;z-index:30;transition:opacity .2s}.fade.show{opacity:1;pointer-events:auto}.title-screen{position:fixed;inset:0}.title-top,.title-bottom{position:absolute;display:flex;align-items:center;justify-content:space-between;left:6vw;right:6vw}.title-top{top:calc(25px + var(--safe-top))}.title-bottom{bottom:calc(27px + var(--safe-bottom));font-size:13px}.title-content{position:absolute;left:7vw;top:45%;transform:translateY(-50%);max-width:590px}.mini-brand{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.18em}.sigil{font-size:26px}.chapter-kicker{font-size:13px;letter-spacing:.17em}.title-line{font:italic 20px/1.5 Georgia,serif}.title-links{display:flex;gap:28px;margin-top:25px}.title-links button{font-size:14px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #e4d6b13d;padding:10px 0}
/* Brass wayfinder and folded quest ribbon leave the centre of the world clear. */
.hud{position:fixed;inset:0;z-index:3;pointer-events:none}.hud button{pointer-events:auto}.top-hud{position:absolute;inset:calc(24px + var(--safe-top)) 30px auto;display:flex;justify-content:space-between;align-items:flex-start}.quest-panel{display:flex;gap:14px;width:325px;max-width:38vw;padding:17px 18px 16px;text-align:left;background:linear-gradient(110deg,#18392eee,#173a2bbf);border:1px solid #bca36a7a;border-left:4px solid #d7b66c;box-shadow:0 7px 24px #091d1b40,inset 0 0 0 3px #75917a17;border-radius:2px 9px 9px 2px;backdrop-filter:blur(9px)}.quest-panel>span:last-child{flex:1;min-width:0}.quest-symbol{color:#f2d992;font:34px/1 Georgia,serif;margin-top:19px}.quest-kicker{display:flex;justify-content:space-between;gap:15px;font-size:12px;letter-spacing:.12em;color:#c3c5a8}.quest-kicker b{font-variant-numeric:tabular-nums;font-weight:400;white-space:nowrap}.quest-panel strong{display:block;font:700 20px/1.2 Georgia,serif;margin:7px 0;color:#f5e5bd}#quest-line{display:block;font-size:14px;line-height:1.45;color:#dddcc2}.quest-track{display:block;height:3px;background:#d6d7af27;margin-top:12px}.quest-track i{height:100%;display:block;background:linear-gradient(90deg,#8ac5a6,#e8d392);transition:width .4s}.top-actions{display:flex;align-items:center;gap:16px}.wisp-counter{display:flex;align-items:center;gap:9px;font-size:16px;text-shadow:0 2px 6px #102b25;background:#19352b9c;border-radius:25px;padding:10px 14px;border:1px solid #a4c6a935}.wisp-counter svg{color:#a6ebd2;width:19px}.compass{position:absolute;left:50%;top:3px;transform:translateX(-50%);width:220px;text-align:center;text-shadow:0 2px 4px #10251b}.compass>div{display:flex;justify-content:space-between;align-items:center;height:27px;font:13px Georgia,serif;border-bottom:1px solid #ebdfae88;padding:0 24px}.compass .north{color:#f0dc9d}.compass>i{position:absolute;left:50%;top:20px;margin-left:-4px;font-size:12px;font-style:normal;color:#eccb7f}.compass>span{display:block;font-size:12px;letter-spacing:.16em;margin-top:15px;color:#eddfbf}.health{position:absolute;left:33px;top:calc(174px + var(--safe-top));display:flex;gap:7px;color:#e9d39b;filter:drop-shadow(0 2px 3px #09251b)}.health .empty{opacity:.24}.health svg{width:23px;height:23px}.bottom-tools{position:absolute;left:30px;bottom:calc(35px + var(--safe-bottom));display:flex;gap:10px}.bottom-tools button{display:flex;align-items:center;gap:8px;min-height:44px;border:1px solid #ddcba14d;background:#19372cbb;padding:10px 13px;border-radius:3px;font-size:14px;backdrop-filter:blur(4px)}.bottom-tools button:last-child{width:44px;padding:10px}.keyboard-guide{position:absolute;bottom:calc(34px + var(--safe-bottom));right:30px;display:flex;gap:16px;font-size:12px;text-shadow:0 2px 3px #123627}.keyboard-guide kbd{border:1px solid #d9deb46e;border-radius:2px;font:11px Arial;padding:4px 5px;background:#18392e85;margin-right:5px}.touch-controls{display:none}.interaction{position:absolute;bottom:calc(90px + var(--safe-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;min-height:48px;padding:10px 19px;background:#173b30ef;border:1px solid #ebce85;border-radius:5px;font-size:15px;box-shadow:0 6px 30px #0d221a6b;color:#ffebbc}.keycap{border:1px solid #e6cb8ba1;padding:4px 7px;border-radius:3px;font-size:13px;color:#ffe7a8}.toast{position:absolute;top:calc(132px + var(--safe-top));left:50%;transform:translate(-50%,-12px);opacity:0;width:max-content;max-width:min(420px,85vw);background:#153629f0;border:1px solid #cdb57a75;padding:13px 20px;font-size:14px;line-height:1.6;box-shadow:0 6px 26px #102a2345;transition:opacity .25s,transform .25s;text-align:center;border-radius:3px}.toast.show{opacity:1;transform:translate(-50%,0)}.region-intro{position:absolute;top:25%;left:50%;transform:translate(-50%,-10px);text-align:center;opacity:0;transition:opacity .8s,transform .8s;width:90%;text-shadow:0 4px 20px #0d2617}.region-intro.show{opacity:1;transform:translate(-50%,0)}.region-intro span{display:block;font-size:12px;letter-spacing:.3em;color:#f3db9e}.region-intro strong{display:block;font:48px/1.2 Georgia,serif;margin:12px 0 9px}.region-intro em{font:italic 17px Georgia,serif}.world-labels{position:absolute;inset:0;pointer-events:none}.world-pin{position:absolute;top:0;left:0;display:flex;flex-direction:column;align-items:center;gap:6px;will-change:transform}.pin-label{font-size:12px;line-height:1.3;background:#17372bd6;color:#f6e2b0;border:1px solid #ceb16e8c;border-radius:3px;padding:6px 10px;white-space:nowrap;box-shadow:0 4px 14px #081d1c40}.world-pin.selected .pin-label{font-size:14px;background:#254237ed;border-color:#f0d693;max-width:245px;white-space:normal;text-align:center}.pin-diamond{color:#f5d67b;font-size:29px;text-shadow:0 0 13px #e8d387}.quest-bearing{position:absolute;top:calc(108px + var(--safe-top));left:50%;transform:translateX(-50%);width:67px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #d2b57273;background:#173b30de;border-radius:28px;padding:8px;color:#ecd397;font-size:12px;min-height:40px}.bearing-arrow{display:block;font-size:23px;line-height:1}.quest-bearing.offscreen{border-color:#e3c779;box-shadow:0 0 15px #eac77626}.bearing-distance{font-variant-numeric:tabular-nums;white-space:nowrap}
/* The journal opens as a bound, illustrated adventure book. */
dialog{padding:0;width:min(1050px,94vw);max-width:94vw;max-height:92dvh;border:1px solid #d0b778;border-radius:8px;color:var(--ink);background:#e8dcc0;box-shadow:0 25px 100px #031c19b3,0 0 0 7px #254136,0 0 0 8px #ba9f6280;touch-action:pan-y}dialog::backdrop{background:#061d18b3;backdrop-filter:blur(9px)}.panel-shell{display:flex;flex-direction:column;max-height:92dvh}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:23px 31px 24px;background:linear-gradient(100deg,#19372c,#304e3e);color:#ead8b2;position:relative;flex-shrink:0;border-bottom:4px solid #c2a66b}.panel-header:after{content:'';position:absolute;bottom:5px;left:0;right:0;border-bottom:1px solid #ebdbb329}.panel-header h2{font:32px/1.15 Georgia,serif;margin:5px 0 0;color:#f2e1b9}.panel-header .eyebrow{color:#c6be9c}.panel-header .icon-btn{flex-shrink:0}#panel-body{padding:30px;background:linear-gradient(#eee5cded,#e8dcc0e8),url('./art/journal-paper.webp');overflow:auto;overscroll-behavior:contain;scrollbar-color:#9a8f69 transparent;scrollbar-width:thin;line-height:1.6;font-size:16px}.button-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}.map-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:30px}.atlas{align-self:start;position:sticky;top:0;border:1px solid #7c735244;background:#cfbf8c22;padding:10px;transform:rotate(-1deg);box-shadow:1px 6px 14px #665a4120}.atlas img{width:100%;display:block}.atlas-caption{font-size:12px;letter-spacing:.17em;text-align:center;margin:10px;color:#686746}.chapter-list{display:flex;flex-direction:column;gap:0;border-left:1px solid #a89d744f;padding-left:18px}.chapter-card{display:flex;align-items:center;gap:15px;text-align:left;min-height:97px;padding:11px 9px;border-bottom:1px solid #9b8d5f3a;color:var(--ink);position:relative;border-radius:0}.chapter-card img{width:82px;height:74px;object-fit:cover;filter:saturate(.8);border:3px solid #f6efd9;box-shadow:1px 2px 6px #433f2933;transform:rotate(-3deg)}.chapter-card.current{background:#1f493c;color:#f4e5c1;margin:4px -9px;padding:11px 18px;box-shadow:inset 0 0 0 4px #1f493c,inset 0 0 0 5px #d0b67850;border-radius:2px}.chapter-card.current img{transform:rotate(2deg)}.chapter-info{flex:1}.chapter-card>svg{width:18px;flex-shrink:0}.chapter-number{display:block;font-size:12px;letter-spacing:.1em;color:#817a55}.chapter-card.current .chapter-number{color:#cec6a2}.chapter-card strong{display:block;font:21px/1.2 Georgia,serif;margin:4px 0}.chapter-state{font-size:12px;line-height:1.3;opacity:.75}.chapter-card:disabled{opacity:.62}.chapter-card:disabled img{filter:saturate(.2)}.map-footer{display:flex;align-items:center;justify-content:space-between;gap:30px;border-top:1px solid #97875b59;margin-top:24px;padding-top:18px;font-size:14px}.map-footer p{margin:0;max-width:580px}.toggle{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:14px}.toggle input{appearance:none;width:40px;height:23px;flex-shrink:0;background:#b5ac8c;border:1px solid #817352;border-radius:14px;position:relative;margin:0;cursor:pointer}.toggle input:after{content:'';position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:#fff1d1;box-shadow:0 1px 3px #363f2755;transition:transform .2s}.toggle input:checked{background:#285847;border-color:#32624e}.toggle input:checked:after{transform:translateX(17px)}
.tabs{display:flex;gap:2px;margin:-6px 0 26px;border-bottom:2px solid #87765466;overflow:auto;white-space:nowrap;padding-top:3px}.tabs button{padding:13px 17px;color:#687058;border-radius:3px 3px 0 0;font-size:14px;border:1px solid transparent}.tabs button.active{background:#d5c698;border-color:#ad996b;color:#254437;font-weight:700}.journal-grid{display:grid;grid-template-columns:1.08fr 1fr;gap:30px}.journal-art{display:block;width:100%;border:7px solid #f2ead5;box-shadow:0 3px 14px #6455371a;object-fit:contain;background:#f2ead5}.journal-copy h3{font:29px/1.2 Georgia,serif;margin:12px 0 15px}.journal-copy p{font-size:16px;line-height:1.75}.small-stat{border-bottom:1px solid #b1a0784a;padding:13px 0;font-size:14px}.small-stat small{color:#74755b;font-size:13px}.friends-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}.friend{padding:12px 0;border-bottom:1px solid #b5a1754a;font:17px/1.3 Georgia,serif}.friend span{display:block;font:12px/1.6 Arial,sans-serif;color:#858367;margin-top:7px}.friend.found{color:#2d694e}.outfits{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.outfit{border:1px solid #9a88565c;padding:18px 10px;border-radius:3px;color:#40523f;background:#e6d9b4;font-size:14px}.outfit.selected{background:#2d503c;color:#f1dfb4;border:2px solid #bea15e}.outfit-note{font-size:14px}.swatches{display:flex;gap:7px;justify-content:center;margin-bottom:12px}.swatches i{width:27px;height:27px;border:2px solid #ffe9b58c;border-radius:50%}.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 35px}.setting{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;border-bottom:1px solid #b3a27659;font-size:16px}.setting small{display:block;font-size:13px;line-height:1.5;color:#74775e;margin-top:6px;max-width:230px}.setting select{border:1px solid #9c946d;border-radius:3px;padding:10px 9px;background:#f2e7c9;color:#3b503e;font-size:14px}.setting input[type=range]{width:130px;accent-color:#456b4b;min-height:44px}.settings-note{font-size:14px;line-height:1.8;color:#616c56;margin:25px 0}.pause-body{text-align:center;padding:8px 20px 24px}.pause-body h3{font:40px Georgia,serif;margin:20px 0 10px}.pause-body p{margin:15px auto 25px;color:#697358;line-height:1.8}.pause-options{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:23px}.completion{text-align:center;max-width:720px;margin:auto;padding:10px 15px 30px}.big-sigil{font:84px Georgia,serif;color:#b7934e;line-height:1.1}.completion h3{font:40px/1.2 Georgia,serif;margin:15px 0 20px}.completion p{font-size:17px;line-height:1.8;color:#59684e}.reward{display:flex;justify-content:center;gap:26px;padding:21px 0;margin:18px 0 25px;border-top:1px solid #a7966559;border-bottom:1px solid #a7966559;font-size:14px}.dialogue{display:grid;grid-template-columns:170px 1fr;gap:32px;align-items:center;max-width:820px;margin:auto;padding:10px}.dialogue .portrait{width:170px;height:230px;object-fit:cover;object-position:top;border:6px solid #f5ebcf;box-shadow:2px 4px 12px #66552e26;transform:rotate(-2deg)}.dialogue p{font:italic 24px/1.65 Georgia,serif;color:#3d5543}
.quest-spread{display:grid;grid-template-columns:.75fr 1fr;gap:34px}.chapter-illustration{position:sticky;top:0;align-self:start;min-width:0;background:#294839;border:8px solid #f2e6c4;box-shadow:1px 4px 17px #514c3229;transform:rotate(-1deg)}.chapter-illustration img{width:100%;aspect-ratio:1/1.25;object-fit:cover;display:block;opacity:.9}.chapter-illustration>div{position:absolute;bottom:0;left:0;right:0;padding:60px 22px 25px;background:linear-gradient(transparent,#122e24);color:#f4e1b9}.chapter-illustration h3{font:34px/1.1 Georgia,serif;margin:8px 0}.chapter-illustration p{font:italic 15px/1.5 Georgia,serif}.journal-heading{border-bottom:1px solid #9c8d674f;padding-bottom:20px}.journal-heading h3{font:30px/1.2 Georgia,serif;margin:8px 0 13px}.journal-heading p{font-size:15px;line-height:1.65;margin:0}.journal-heading .eyebrow{color:#8a794c}.chapter-tally{display:inline-block;font-size:12px;color:#6c7356;margin-top:16px;letter-spacing:.05em}.story-beats{list-style:none;padding:0;margin:0 0 24px}.story-beats li{position:relative;display:flex;align-items:flex-start;gap:13px;padding:18px 0;border-bottom:1px solid #a2926640}.beat-seal{width:28px;height:28px;flex-shrink:0;border:1px solid #a59161;border-radius:50%;font:13px/26px Georgia,serif;text-align:center;color:#84734c;margin-top:1px}.story-beats li strong{font:18px/1.3 Georgia,serif;display:block}.story-beats li p{font-size:14px;line-height:1.65;color:#73775d;margin:6px 0 0}.story-beats li.done{opacity:.62}.story-beats li.done .beat-seal{background:#4b6c50;color:#f4e5bd;border-color:#4b6c50}.story-beats li.current .beat-seal{background:#bba05d;color:#fff3ca}.story-beats li.current strong{color:#1f694d}.ink-label{font-size:12px;letter-spacing:.08em;font-weight:700;color:#2b7955;margin-top:5px}.journal-heading.compact{border:0;padding-bottom:5px}.journal-heading.compact h3{font-size:23px}.task-list{margin-bottom:24px}.task-row{width:100%;display:flex;gap:12px;align-items:center;text-align:left;border:1px solid #a9986969;padding:14px;margin:9px 0;border-radius:3px;background:#e2d4af66;color:#2a4636}.task-row>span:nth-child(2){flex:1}.task-row strong{display:block;font-size:14px;line-height:1.4}.task-row small{display:block;font-size:13px;line-height:1.5;margin-top:5px;color:#6e785c}.task-row.tracked{border-color:#688966;background:#b3c2a531}.task-glyph{font-size:25px;color:#957d45}.track-state{font-size:12px;white-space:nowrap}.walkthrough{border-top:1px solid #9b8c614f;border-bottom:1px solid #9b8c614f;margin:20px 0 25px}.walkthrough summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 0;font:20px/1.3 Georgia,serif;cursor:pointer;list-style:none}.walkthrough summary::-webkit-details-marker{display:none}.walkthrough summary span{font:25px Arial;color:#9a7d40}.walkthrough ol{padding-left:26px;margin-bottom:23px}.walkthrough li{padding:4px 0 12px;color:#876f42}.walkthrough h4{font:18px Georgia,serif;margin:6px 0;color:#294939}.walkthrough p{font-size:14px;line-height:1.75;color:#657057;margin:0}.quest-pages>.primary{width:100%}
.mechanism{max-width:710px;margin:0 auto;text-align:center;padding:12px 10px 25px}.mechanism>p{font:19px/1.7 Georgia,serif;margin:15px 0 25px}.mechanism>p:last-child{font:14px/1.7 Arial;color:#6d785e;margin:24px 0 0}.mechanism-seal{font:65px Georgia;color:#a78a48}.dial-bank{display:flex;justify-content:center;gap:35px;margin:30px 0 40px}.brass-dial{display:flex;flex-direction:column;align-items:center;gap:16px;font-size:14px}.dial-face{width:115px;height:115px;border-radius:50%;position:relative;background:repeating-conic-gradient(from -117deg,#bda064 0deg 1deg,transparent 1deg 13deg),radial-gradient(circle,#eadbb5 57%,#566350 59%,#2e4b3c 66%,#cdb26e 67%,#9d803d 77%);box-shadow:0 3px 9px #5c563548,inset 0 0 0 3px #c8ad68}.dial-face:after{content:'';position:absolute;inset:50px;border-radius:50%;background:#847144;border:2px solid #e7d196}.dial-face i{position:absolute;width:3px;height:39px;background:#384d39;left:56px;top:17px;transform-origin:50% 100%;transition:transform .2s;box-shadow:1px 1px 2px #70634055}.dial-face output{position:absolute;left:46px;bottom:11px;width:24px;line-height:20px;background:#f1e5c4;border-radius:3px;font:14px Georgia}.brass-dial input{width:115px;accent-color:#657b54;min-height:44px}.note-bank{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin:28px 0}.note-bank button{border:1px solid #a99258;background:linear-gradient(#e7d7ac,#cdb67e);border-radius:4px;padding:18px 6px 15px;font-size:14px;color:#3a543d;box-shadow:0 4px 0 #a28c56}.note-bank button span{display:block;font:43px Georgia,serif;line-height:1.1;margin-bottom:15px}.note-bank button:active{transform:translateY(3px);box-shadow:0 1px 0 #a28c56}.note-progress{display:flex;gap:12px;justify-content:center;margin:20px 0 30px}.note-progress i{width:12px;height:12px;border:1px solid #81916b;border-radius:50%;background:#9eaa8950}.note-progress i.lit{background:#5fa683;box-shadow:0 0 15px #5fca9670;border-color:#2f7551}.wind-meter{height:34px;background:#3f5741;border:5px solid #bba363;box-shadow:0 2px 6px #594d322b;position:relative;border-radius:20px;margin:35px 0 23px;overflow:hidden}.wind-meter>span{position:absolute;top:0;bottom:0;background:#9bc585}.wind-meter i{position:absolute;top:1px;bottom:1px;width:5px;background:#fff3b7;box-shadow:0 0 12px #fff3b7;border-radius:3px}
@media(pointer:coarse),(max-width:900px){.keyboard-guide{display:none}.touch-controls{display:block}.joystick{position:absolute;left:35px;bottom:calc(43px + var(--safe-bottom));width:123px;height:123px;border:1px solid #e0cc945e;border-radius:50%;background:radial-gradient(circle,#264c3980,#14352a8c);box-shadow:inset 0 0 0 6px #0f302122,inset 0 0 0 7px #e6d2a02e;touch-action:none;pointer-events:auto}.joystick-cross{position:absolute;inset:20px;border:1px dashed #c7d0a62e;border-radius:50%}.stick{position:absolute;left:40px;top:40px;width:43px;height:43px;background:radial-gradient(circle at 35% 25%,#c0c7a997,#5b8566);border:1px solid #eddfb48f;border-radius:50%;box-shadow:0 4px 11px #102d2670;pointer-events:none}.action-cluster{position:absolute;right:28px;bottom:calc(37px + var(--safe-bottom));width:166px;height:161px}.action-btn{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid #d8c593bd;background:radial-gradient(circle,#42614aaa,#183c2cef);border-radius:50%;box-shadow:inset 0 0 0 4px #112e2a55,inset 0 0 0 5px #e4d2a020,0 3px 15px #123a2a26;color:#f8eac0;touch-action:none;min-width:48px;min-height:48px}.action-btn small{font-size:12px}.action-btn svg{width:27px;height:27px}.action-btn.active,.action-btn:active{background:#528f63;box-shadow:0 0 22px #bee7bc44}.pip-btn{left:0;top:15px;width:54px;height:54px}.pip-btn svg{width:22px;color:#9bdfc2}.interact-btn{right:0;top:0;width:66px;height:66px}.jump-btn{right:4px;bottom:0;width:82px;height:82px}.jump-btn svg{width:32px;height:32px}.bottom-tools{top:calc(220px + var(--safe-top));bottom:auto;left:30px;flex-direction:column;gap:9px}.bottom-tools button{border-radius:50%;width:42px;height:42px;min-height:42px;padding:10px}.bottom-tools button span:not(:first-child){display:none}.interaction{bottom:calc(20px + var(--safe-bottom));max-width:83vw;white-space:normal;text-align:center;font-size:14px;justify-content:center;padding:9px 16px}.interaction .keycap{display:none}.left-handed .joystick{left:auto;right:35px}.left-handed .action-cluster{right:auto;left:28px}.compass{width:170px}.quest-panel{max-width:37vw}.dialogue p{font-size:22px}}
@media(max-width:700px){.top-hud{inset:calc(15px + var(--safe-top)) 15px auto}.quest-panel{width:calc(100% - 63px);max-width:320px;gap:9px;padding:12px 12px 11px}.quest-panel strong{font-size:18px;margin:6px 0}.quest-symbol{font-size:27px;margin-top:23px}.quest-kicker{font-size:12px;letter-spacing:.06em}#quest-line{font-size:14px}.quest-track{margin-top:10px}.top-actions{flex-direction:column-reverse;gap:8px}.top-actions .icon-btn{width:43px;height:43px}.wisp-counter{padding:7px 9px;border-radius:16px;font-size:14px;gap:4px}.wisp-counter svg{width:15px}.compass{top:146px;width:135px}.compass>span{font-size:12px}.compass>div{height:20px}.compass>i{top:14px}.quest-bearing{top:calc(213px + var(--safe-top));width:68px}.health{left:18px;top:calc(165px + var(--safe-top));gap:4px}.health svg{width:20px;height:20px}.bottom-tools{left:18px;top:calc(207px + var(--safe-top))}.bottom-tools button{width:39px;height:39px;min-height:39px}.joystick{left:22px;bottom:calc(47px + var(--safe-bottom));width:110px;height:110px}.stick{left:34px;top:34px;width:42px;height:42px}.action-cluster{right:18px;bottom:calc(45px + var(--safe-bottom));width:147px;height:146px}.jump-btn{width:74px;height:74px}.interact-btn{width:62px;height:62px}.pip-btn{width:51px;height:51px;top:13px}.left-handed .joystick{right:22px}.left-handed .action-cluster{left:18px}.toast{top:auto;bottom:calc(207px + var(--safe-bottom));max-width:87vw;font-size:14px;padding:12px 16px}.region-intro{top:34%}.region-intro strong{font-size:36px}.region-intro em{font-size:15px}.world-pin.selected .pin-label{max-width:210px}.pin-label{font-size:12px}.world-pin.selected .pin-label{font-size:13px}dialog{width:94vw;max-width:94vw;max-height:92dvh}.panel-header{padding:20px}.panel-header h2{font-size:27px}.panel-header .eyebrow{font-size:12px;letter-spacing:.06em}#panel-body{padding:22px 18px}.map-layout{grid-template-columns:1fr}.atlas{position:relative;transform:none;max-height:180px;overflow:hidden;padding:0}.atlas img{object-fit:cover;height:180px;object-position:50% 48%;opacity:.88}.atlas-caption{position:absolute;bottom:0;left:0;right:0;background:#1a382edf;padding:8px;color:#e3d4a7;margin:0;font-size:12px}.chapter-list{padding-left:0;border:0}.chapter-card{min-height:97px}.chapter-card img{width:77px;height:69px}.map-footer{flex-direction:column;gap:16px;align-items:flex-start;font-size:14px}.journal-grid,.quest-spread{grid-template-columns:1fr;gap:23px}.chapter-illustration{position:relative;transform:none;border-width:5px}.chapter-illustration img{aspect-ratio:auto;height:160px;object-position:50% 45%}.chapter-illustration>div{padding:45px 18px 15px}.chapter-illustration h3{font-size:29px}.chapter-illustration p{display:none}.journal-heading h3{font-size:28px}.story-beats li strong{font-size:18px}.story-beats li p{font-size:14px}.tabs{margin-top:0}.tabs button{padding:12px 14px;font-size:14px}.settings-grid{grid-template-columns:1fr}.setting{font-size:16px}.setting small{font-size:13px}.completion{padding:0 0 23px}.completion h3,.pause-body h3{font-size:31px}.completion p{font-size:16px}.pause-body{padding:0 0 24px}.pause-body p{font-size:15px}.reward{gap:15px;flex-wrap:wrap;font-size:14px}.dialogue{grid-template-columns:78px 1fr;gap:17px;padding:0}.dialogue .portrait{width:78px;height:138px;border-width:4px}.dialogue p{font-size:19px;line-height:1.6}.outfits{grid-template-columns:repeat(2,1fr)}.dial-bank{gap:16px}.dial-face{width:88px;height:88px}.dial-face:after{inset:38px}.dial-face i{height:29px;top:15px;left:42px}.dial-face output{left:32px;bottom:6px;font-size:12px}.brass-dial input{width:85px}.brass-dial{font-size:13px}.note-bank{gap:10px;grid-template-columns:1fr 1fr}.note-bank button{min-height:99px}.note-bank button span{font-size:32px;margin-bottom:10px}.mechanism>p{font-size:18px}.primary{font-size:16px;padding:14px 20px;min-width:0;max-width:100%}.title-top,.title-bottom{left:6vw;right:6vw}.title-content{left:8vw;right:8vw}.title-links{justify-content:center}.device-hint{display:none}}
@media(orientation:landscape) and (max-height:560px){.top-hud{inset:calc(12px + var(--safe-top)) 20px auto}.quest-panel{padding:10px 12px;max-width:280px;gap:8px}.quest-panel strong{font-size:17px}.quest-panel .quest-symbol{display:none}#quest-line{font-size:13px}.quest-kicker{font-size:12px}.quest-track{margin-top:7px}.compass{top:0;width:175px}.compass>span{font-size:12px;margin-top:12px}.health{top:calc(128px + var(--safe-top));left:23px}.health svg{width:18px}.bottom-tools{top:calc(167px + var(--safe-top));left:23px;gap:7px}.bottom-tools button{width:36px;height:36px;min-height:36px;padding:8px}.quest-bearing{top:calc(83px + var(--safe-top))}.joystick{left:55px;bottom:22px;width:98px;height:98px}.stick{left:29px;top:29px;width:40px;height:40px}.action-cluster{right:32px;bottom:18px;width:142px;height:138px}.jump-btn{width:70px;height:70px}.interact-btn{width:59px;height:59px}.pip-btn{width:49px;height:49px}.left-handed .joystick{right:55px}.left-handed .action-cluster{left:32px}.interaction{bottom:20px;font-size:14px;max-width:47vw}.toast{top:calc(138px + var(--safe-top));bottom:auto;max-width:47vw;font-size:13px}.region-intro{top:25%}.region-intro strong{font-size:32px}.region-intro em{font-size:15px}.panel-header{padding:14px 22px}.panel-header h2{font-size:25px}#panel-body{padding:22px}.quest-spread,.journal-grid{grid-template-columns:.75fr 1fr}.map-layout{grid-template-columns:.8fr 1fr}.atlas{display:block}.chapter-illustration img{height:auto;aspect-ratio:1/1.25}.settings-grid{grid-template-columns:1fr 1fr}.dial-bank{margin:10px 0 20px}.note-bank{grid-template-columns:repeat(4,1fr)}.note-bank button{min-height:85px}.note-bank button span{margin-bottom:7px}.mechanism{padding-top:0}.mechanism>p{margin:8px 0 15px}.note-progress{margin:15px 0}.pin-label{max-width:210px!important;font-size:12px!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Character-led launch and reusable cinematic entrance. */
.splash-background{position:fixed;inset:0;z-index:4;background:#071d1b;display:none;pointer-events:none}.launch .splash-background{display:block}.splash-background>img{position:absolute;right:0;top:0;height:100%;width:68%;object-fit:cover;object-position:50% 51%}.splash-background>div{position:absolute;inset:0;background:linear-gradient(90deg,#0b211f 6%,#0b211ffa 23%,#0b211fa0 44%,transparent 70%),linear-gradient(0deg,#0b211f 0%,transparent 24%,transparent 80%,#071a1960)}
.loading{background:transparent;z-index:8;align-items:flex-start;padding:0 clamp(30px,7vw,130px)}.launch-copy{position:absolute;top:25%;width:43vw;max-width:580px}.launch-kicker{font-size:12px;font-weight:650;letter-spacing:.23em;color:#cab891}.app-logo{display:block;max-width:100%;height:auto;object-fit:contain;filter:drop-shadow(0 7px 18px #07171370)}.launch-copy .app-logo{margin:18px -4% 6px;width:106%;max-width:106%}.launch-tagline{font-family:Georgia,serif;font-size:18px!important;font-style:italic;opacity:.8!important;line-height:1.7}.loading-bottom{position:absolute;bottom:calc(11% + env(safe-area-inset-bottom));width:35vw;max-width:430px}.loading-label{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#e3d9be;font-size:12px;letter-spacing:.035em}#load-percent{font-variant-numeric:tabular-nums;color:#a6edd6}#load-progress{width:100%;height:5px;display:block;margin:14px 0 0;border:0;border-radius:5px;overflow:hidden;background:#a4cec126;appearance:none}#load-progress::-webkit-progress-bar{background:#a4cec126;border-radius:5px}#load-progress::-webkit-progress-value{background:linear-gradient(90deg,#7ca99c,#b2f5d6);border-radius:5px;transition:width .2s}#load-progress::-moz-progress-bar{background:#b2f5d6;border-radius:5px}.loading #load-note{margin:12px 0 0;min-height:32px;line-height:1.5;font-size:12px;letter-spacing:.025em;opacity:.65}.loading #load-retry{margin-top:12px;font-size:13px;background:#153b33}
.title-screen{z-index:5;background:transparent}.title-content{top:47%;width:43vw;max-width:580px}.title-content .app-logo{width:106%;max-width:106%;margin:18px -4% 0}.title-content .title-line{margin:12px 0 27px}.title-top .mini-brand{opacity:.75;font-size:12px}.title-links{gap:24px}.title-bottom{font-size:12px}.primary{border-radius:8px;background:linear-gradient(115deg,#f2e5c0,#d6bb83);box-shadow:0 8px 28px #02171366,inset 0 0 0 3px #eedbbb;letter-spacing:.015em}
.entrance-layer{position:fixed;inset:0;pointer-events:none;z-index:6}.letterbox{position:absolute;left:0;right:0;height:6dvh;background:#081c1ade}.letterbox.top{top:0}.letterbox.bottom{bottom:0}.skip-entrance{pointer-events:auto;position:absolute;right:max(22px,env(safe-area-inset-right));top:calc(20px + env(safe-area-inset-top));display:flex;align-items:center;gap:22px;background:#112b24bc;border:1px solid #d9d1ab70;backdrop-filter:blur(10px);border-radius:30px;padding:12px 18px;font-size:12px;min-height:44px}.skip-entrance span{font-size:19px;color:#c0edd7}#entrance-caption{position:absolute;left:10%;right:10%;bottom:calc(7% + env(safe-area-inset-bottom));text-align:center;font-family:Georgia,serif;font-size:17px;font-style:italic;color:#ebdebc;text-shadow:0 2px 10px #062319;margin:0}.entrance-logo{position:fixed;z-index:7;pointer-events:none;width:clamp(200px,30vw,410px);height:auto;transform:translate(-50%,-75%);filter:drop-shadow(0 4px 16px #061e16aa);will-change:opacity,left,top}.hud.entering{pointer-events:none}.hud.entering button,.hud.entering .joystick{pointer-events:none}.hud.entering .top-hud,.hud.entering .health,.hud.entering .bottom-tools,.hud.entering .keyboard-guide{opacity:var(--control-reveal,0)}.hud.entering .touch-controls{opacity:var(--control-reveal,0);transform:translateY(calc((1 - var(--control-reveal,0))*22px))}.hud.entering .interaction,.hud.entering .toast,.hud.entering .region-intro{visibility:hidden}.action-btn{transition:opacity .16s,border-color .16s,background .16s}.action-btn.unavailable{opacity:.46}.action-btn.cooldown{opacity:.55}.jump-btn.gliding{box-shadow:0 0 24px #9fe6d659}.interaction{min-height:44px}
@media(orientation:portrait){.splash-background>img{width:100%;height:100%;object-fit:cover;object-position:50% 55%}.splash-background>div{background:linear-gradient(0deg,#071f1ff7,transparent 33%,transparent 58%,#071d1b45 77%,#071d1bcc)}.launch-copy{top:calc(5% + env(safe-area-inset-top));left:7%;width:86%;text-align:center}.launch-kicker{font-size:12px;letter-spacing:.19em}.launch-copy .app-logo{width:94%;max-width:94%;margin:13px auto 0}.launch-tagline{font-size:13px!important;margin-top:0!important}.loading-bottom{left:10%;width:80%;max-width:none;bottom:calc(6% + env(safe-area-inset-bottom))}.title-content{left:7%;right:7%;top:auto;bottom:calc(9% + env(safe-area-inset-bottom));width:86%;max-width:none;transform:none;text-align:center}.title-content .chapter-kicker{font-size:12px}.title-content .app-logo{position:fixed;top:calc(7dvh + env(safe-area-inset-top));left:7vw;width:86vw;max-width:86vw;margin:0}.title-content .title-line{font-size:14px;margin:10px 0 18px;text-shadow:0 2px 12px #000}.title-content .primary{width:100%;min-width:0;padding:16px 23px}.title-links{justify-content:center;margin-top:13px;gap:30px}.title-links button{font-size:12px}.title-top{top:calc(14px + var(--safe-top));left:19px;right:19px}.title-top .mini-brand{font-size:12px;letter-spacing:.08em}.title-top .sigil{font-size:20px}.title-bottom{justify-content:center;bottom:calc(20px + var(--safe-bottom));font-size:12px;left:8%;right:8%}.entrance-logo{width:62vw;max-width:320px}#entrance-caption{font-size:14px;bottom:calc(9% + env(safe-area-inset-bottom))}}
@media(orientation:landscape) and (max-height:520px){.launch-copy{top:20%;width:40vw}.launch-tagline{font-size:14px!important}.loading-bottom{bottom:7%;width:37vw}.title-content{top:50%;transform:translateY(-43%);width:38vw}.title-content .app-logo{margin-top:5px}.title-content .title-line{font-size:14px;margin:5px 0 14px}.title-content .primary{min-width:220px;padding:12px 18px;font-size:13px}.title-links{margin-top:10px}.title-links button{font-size:12px}.title-top{top:14px}.title-bottom{bottom:12px}.letterbox{height:4dvh}#entrance-caption{font-size:13px}.skip-entrance{top:12px;padding:8px 15px}}
@media(prefers-reduced-motion:reduce){#load-progress::-webkit-progress-value{transition:none}.entrance-logo{will-change:auto}}
.intro-sound{pointer-events:auto;position:absolute;left:max(22px,env(safe-area-inset-left));top:calc(20px + env(safe-area-inset-top));border:1px solid #d9d1ab70;background:#112b24bc;backdrop-filter:blur(10px);border-radius:30px;padding:12px 18px;font-size:12px;min-height:44px;color:#ede1c5}
@media(orientation:landscape) and (max-height:520px){.intro-sound{top:12px;padding:8px 15px}}

/* Append after existing launch styles. The fallback image remains until WebGL paints. */
.splash-3d-ready #splash-background{display:block;opacity:0;visibility:hidden;transition:opacity .28s ease,visibility 0s .28s}
.splash-3d-ready #loading{background:linear-gradient(180deg,#061c1dda 0%,#061c1d12 28%,transparent 70%,#061c1de8 100%)}
.splash-3d-ready .launch-copy{top:calc(4.5% + env(safe-area-inset-top));left:50%;width:clamp(240px,31vw,430px);max-width:80vw;transform:translateX(-50%);text-align:center}
.splash-3d-ready .launch-copy .app-logo{width:100%;max-width:100%;margin:9px auto 0;filter:drop-shadow(0 4px 18px #021412b0)}
.splash-3d-ready .launch-kicker{font-size:12px;letter-spacing:.19em}
.splash-3d-ready .launch-tagline{font-size:14px!important;margin:0!important;text-shadow:0 2px 12px #021412}
.splash-3d-ready .loading-bottom{left:50%;width:min(430px,76vw);max-width:none;bottom:calc(5.5% + env(safe-area-inset-bottom));transform:translateX(-50%);text-shadow:0 2px 10px #021412}
.splash-3d-ready .loading #load-note{min-height:16px;margin-top:10px;font-size:12px}
.splash-3d-ready #load-progress{height:4px;margin-top:11px}
.splash-reduced #load-progress::-webkit-progress-value{transition:none}
@media(orientation:portrait){.splash-3d-ready .launch-copy{top:calc(5% + env(safe-area-inset-top));width:77vw;max-width:380px}.splash-3d-ready .launch-kicker{font-size:12px}.splash-3d-ready .launch-tagline{font-size:12px!important}.splash-3d-ready .loading-bottom{width:80vw;bottom:calc(5% + env(safe-area-inset-bottom))}}
@media(orientation:landscape) and (max-height:520px){.splash-3d-ready .launch-copy{top:4%;width:27vw;max-width:320px}.splash-3d-ready .launch-kicker,.splash-3d-ready .launch-tagline{display:none}.splash-3d-ready .loading-bottom{bottom:4%;width:42vw}.splash-3d-ready .loading #load-note{font-size:12px;margin-top:7px}.splash-3d-ready #load-progress{margin-top:7px}}

.guide-select{display:flex;align-items:center;gap:20px;margin:0 0 25px;font-size:14px}.guide-select select{padding:12px 15px;border:1px solid #a29164;background:#f1e5c5;color:#294735;border-radius:3px;font-size:15px;max-width:70%}.guide-steps{padding-left:25px;margin:20px 0}.guide-steps li{padding:0 0 17px 4px}.guide-steps h4{font:20px/1.3 Georgia,serif;margin:7px 0}.guide-steps p{font-size:15px;line-height:1.8;margin:7px 0;color:#637156}.guide-link{display:inline-block;text-decoration:none}

/* Small phone mechanisms and landscape world pins. */
.dial-bank{flex-wrap:wrap}.dial-bank label{min-width:0}.world-pin .pin-label{max-width:min(240px,62vw);white-space:normal;text-align:center}


/* Mobile Gameplay System sheet: authored scale, opacity and explicit clusters. */
:root{--hud-scale:1;--control-opacity:1;--cinematic-mask:0}
#world{height:100dvh}#game{position:absolute;inset:0;width:100%;height:100%}
.hud,.loading,.title-screen,.entrance-layer,.cinematic-vignette{height:100dvh}
.cinematic-vignette:before,.cinematic-vignette:after{content:'';position:absolute;left:0;right:0;height:6dvh;background:#081c1ade;opacity:var(--cinematic-mask);pointer-events:none}
.cinematic-vignette:before{top:0}.cinematic-vignette:after{bottom:0}.letterbox{display:none}
.title-ready #splash-background{display:none}.title-ready .title-screen{background:linear-gradient(90deg,#0a211fe8,transparent 70%)}
.quest-panel{width:calc(300px * var(--hud-scale));padding:calc(12px * var(--hud-scale)) calc(14px * var(--hud-scale));gap:calc(10px * var(--hud-scale))}
.quest-panel strong{font-size:calc(18px * var(--hud-scale));line-height:1.25;margin:6px 0}
.quest-kicker{font-size:calc(11px * var(--hud-scale));letter-spacing:.06em}#quest-line{font-size:calc(13px * var(--hud-scale));line-height:1.45}
.quest-symbol{font-size:calc(27px * var(--hud-scale));margin-top:20px}.quest-track{margin-top:8px}
.compass{width:calc(180px * var(--hud-scale))}.compass>div{font-size:calc(13px * var(--hud-scale))}.compass>span{font-size:calc(11px * var(--hud-scale))}
.wisp-counter{font-size:calc(15px * var(--hud-scale))}.world-pin.selected .pin-label{font-size:calc(13px * var(--hud-scale));line-height:1.35}
.quest-bearing{min-height:44px;z-index:2}.quest-bearing.offscreen{display:grid;grid-template-columns:24px 1fr auto;gap:8px;max-width:calc(100% - 24px);padding:9px 12px;border-radius:8px;background:#183a30f5}
.quest-bearing.offscreen .bearing-target{grid-column:2;grid-row:1;text-align:left;font-size:calc(12px * var(--hud-scale));line-height:1.35;overflow-wrap:anywhere;white-space:normal}
.quest-bearing.offscreen .bearing-distance{grid-column:3;grid-row:1}.quest-bearing.in-ribbon{visibility:hidden}
.bottom-tools button,.top-actions .icon-btn{min-width:44px;min-height:44px;width:44px;height:44px}
.region-intro{top:auto;bottom:calc(210px + var(--safe-bottom));width:min(460px,70vw)}.region-intro strong{font-size:clamp(24px,4vw,40px);margin:6px 0}.region-intro em{font-size:14px}
.companion-status{display:none}
.action-btn[data-state='available']{border-color:#acedd2;box-shadow:inset 0 0 0 4px #17362a88,0 0 13px #9be9c235;background:radial-gradient(circle,#42614aaa,#183c2cef)}
.action-btn[data-state='pressed'],.action-btn[data-state='held']{border-color:#dafff0;background:#438773;box-shadow:inset 0 2px 6px #06251c80,0 0 19px #a6f4d480;transform:translateY(2px)}
.action-btn[data-state='disabled'],.action-btn[data-state='cooldown']{opacity:1;color:#d0d1bd80;border-color:#d0d1bd52;background:#4c504a80;box-shadow:inset 0 0 0 4px #d0d1bd12;transform:none}
.action-btn[data-state='cooldown']:after{content:'';position:absolute;inset:5px;border:1px dashed #d8d2b4a0;border-radius:50%}
.action-btn[data-state='default']{transform:none}.action-btn:disabled{cursor:default;opacity:1}
.hud.entering .companion-status{opacity:var(--control-reveal,0)}
.settings-grid select{min-height:44px;max-width:155px}.settings-grid input[type='range']{min-height:44px}
@media(pointer:coarse),(max-width:900px){
 .touch-controls{position:absolute;inset:0;pointer-events:none;opacity:var(--control-opacity)}
 .hud.entering .touch-controls{opacity:calc(var(--control-opacity) * var(--control-reveal,0));transform:none}
 .joystick{left:24px;right:auto;bottom:calc(35px + var(--safe-bottom));width:110px;height:110px}
 .stick{left:34px;top:34px;width:42px;height:42px}.action-cluster{right:22px;left:auto;bottom:calc(30px + var(--safe-bottom));width:150px;height:160px}
 .jump-btn{right:0;bottom:0;width:78px;height:78px}.interact-btn{right:0;top:0;width:62px;height:62px}.pip-btn{left:0;top:15px;width:52px;height:52px}
 .bottom-tools .camera-touch{display:flex;position:fixed;right:121px;left:auto;top:auto;bottom:calc(37px + var(--safe-bottom));width:44px;height:44px;opacity:var(--control-opacity)}.camera-touch svg{width:23px;height:23px}
 .companion-status{display:flex;position:absolute;left:141px;right:auto;bottom:calc(98px + var(--safe-bottom));flex-direction:column;align-items:center;gap:3px;pointer-events:none;text-shadow:0 2px 5px #0b2519}
 .companion-status>svg{width:44px;height:54px;filter:drop-shadow(0 0 7px #8ff2c766)}.companion-state{font-size:11px;color:#d2efc7}
 .companion-status[data-status='resting']{filter:saturate(.55)}.companion-status[data-status='guiding']>svg{filter:drop-shadow(0 0 11px #afffec)}
 .bottom-tools{left:24px;right:auto;top:auto;bottom:calc(162px + var(--safe-bottom));flex-direction:row;gap:8px}
 .bottom-tools button{min-width:44px;min-height:44px;width:44px;height:44px;padding:10px}
 .left-handed .joystick,.left-handed .action-cluster{left:unset;right:unset}
 body[data-touch-layout='left'] .joystick{left:24px;right:auto}
 body[data-touch-layout='left'] .action-cluster{inset:0;width:auto;height:auto;pointer-events:none}
 body[data-touch-layout='left'] .action-cluster button{pointer-events:auto}
 body[data-touch-layout='left'] .jump-btn{right:22px;bottom:calc(30px + var(--safe-bottom));left:auto;top:auto}
 body[data-touch-layout='left'] .bottom-tools .camera-touch{right:116px;bottom:calc(37px + var(--safe-bottom));left:auto;top:auto}
 body[data-touch-layout='left'] .interact-btn{left:83px;bottom:calc(163px + var(--safe-bottom));right:auto;top:auto}
 body[data-touch-layout='left'] .pip-btn{left:24px;bottom:calc(175px + var(--safe-bottom));right:auto;top:auto}
 body[data-touch-layout='left'] .bottom-tools{right:22px;left:auto;bottom:calc(127px + var(--safe-bottom))}
 body[data-touch-layout='right'] .joystick{left:24px;right:auto}body[data-touch-layout='right'] .action-cluster{right:22px;left:auto}
 .interaction{bottom:calc(4px + var(--safe-bottom));max-width:min(420px,calc(100vw - 36px));font-size:13px;min-height:44px}
 .keyboard-guide{display:none}
}
@media(max-width:700px){
 .top-hud{inset:calc(12px + var(--safe-top)) 12px auto}.quest-panel{width:calc(100% - 66px);max-width:none}.quest-kicker{gap:7px}
 .top-actions{gap:6px}.top-actions .icon-btn{width:44px;height:44px}.wisp-counter{padding:6px 8px;font-size:13px}
 .compass{top:calc(126px * var(--hud-scale));width:calc(126px * var(--hud-scale))}.health{top:calc(148px * var(--hud-scale) + var(--safe-top));left:16px}
 .health svg{width:18px;height:18px}.quest-bearing:not(.offscreen){top:calc(171px * var(--hud-scale) + var(--safe-top))}
 .toast{bottom:calc(229px + var(--safe-bottom));top:auto;padding:10px 13px;font-size:13px}
 .region-intro{bottom:calc(242px + var(--safe-bottom));width:70vw}.region-intro strong{font-size:28px}.region-intro em{display:none}
 .world-pin.selected .pin-label{font-size:calc(12px * var(--hud-scale))}.settings-grid select{max-width:145px}
}
@media(max-width:360px){
 .joystick,body[data-touch-layout='left'] .joystick,body[data-touch-layout='right'] .joystick{left:16px;width:98px;height:98px}
 .stick{left:29px;top:29px;width:40px;height:40px}.action-cluster,body[data-touch-layout='right'] .action-cluster{right:14px;width:142px;height:154px}
 .companion-status{left:115px;bottom:calc(101px + var(--safe-bottom))}.companion-status>svg{width:35px;height:45px}
 .bottom-tools{left:16px}.quest-panel{padding:10px;gap:7px}.quest-symbol{display:none}.quest-panel strong{font-size:calc(16px * var(--hud-scale))}
 #quest-line{font-size:calc(12px * var(--hud-scale))}.quest-kicker{font-size:10px}.region-intro{bottom:calc(215px + var(--safe-bottom))}
 body[data-touch-layout='left'] .jump-btn{right:14px}body[data-touch-layout='left'] .bottom-tools .camera-touch{right:108px}
 body[data-touch-layout='left'] .pip-btn{left:16px}body[data-touch-layout='left'] .interact-btn{left:74px}
}
@media(orientation:landscape) and (max-height:560px){
 .top-hud{inset:calc(9px + var(--safe-top)) 16px auto}.quest-panel{max-width:32vw;width:calc(250px * var(--hud-scale));padding:8px 10px}.quest-panel strong{font-size:calc(15px * var(--hud-scale));margin:4px 0}.quest-kicker{font-size:10px}#quest-line{font-size:calc(12px * var(--hud-scale))}.quest-symbol,.quest-track{display:none}
 .compass{top:1px;width:calc(152px * var(--hud-scale))}.health{top:calc(113px + var(--safe-top));left:18px}.health svg{width:16px;height:16px}
 .top-actions{flex-direction:row;gap:8px}.quest-bearing:not(.offscreen){top:calc(67px + var(--safe-top))}
 .joystick,body[data-touch-layout='left'] .joystick,body[data-touch-layout='right'] .joystick{left:30px;bottom:24px;width:98px;height:98px}.stick{left:29px;top:29px;width:40px;height:40px}
 .action-cluster,body[data-touch-layout='right'] .action-cluster{right:25px;bottom:19px;width:148px;height:149px}.jump-btn{width:72px;height:72px}.interact-btn{width:58px;height:58px}.pip-btn{width:48px;height:48px;top:10px}
 .bottom-tools .camera-touch{right:128px;bottom:26px}.companion-status{left:135px;bottom:72px}.companion-status>svg{width:38px;height:48px}
 .bottom-tools{left:30px;bottom:132px;gap:6px}.bottom-tools button{width:44px;height:44px;min-height:44px}
 body[data-touch-layout='left'] .action-cluster{inset:0;width:auto;height:auto}
 body[data-touch-layout='left'] .pip-btn{left:29px;bottom:155px}body[data-touch-layout='left'] .interact-btn{left:84px;bottom:143px}
 body[data-touch-layout='left'] .jump-btn{right:25px;bottom:19px}body[data-touch-layout='left'] .bottom-tools .camera-touch{right:122px;bottom:26px}
 body[data-touch-layout='left'] .bottom-tools{right:25px;left:auto;bottom:107px}
 .interaction{bottom:8px;max-width:46vw}.toast{top:auto;bottom:68px;max-width:45vw;font-size:12px;padding:8px 12px}
 .region-intro{top:auto;bottom:128px;width:42vw}.region-intro strong{font-size:27px}.region-intro em{display:none}
}
@media(prefers-reduced-motion:reduce){.splash-3d-ready #splash-background{transition:none}.cinematic-vignette:before,.cinematic-vignette:after{display:none}}

/* Keep a changing action and its feedback together, clear of the thumb targets.
   The source sheet's left movement/Pip and right action clusters stay intact. */
:root{--safe-left:env(safe-area-inset-left,0px);--safe-right:env(safe-area-inset-right,0px)}
.context-messages{display:contents}
@media(pointer:coarse),(max-width:900px){
 .context-messages{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;left:calc((100% + var(--safe-left) - var(--safe-right))/2);bottom:calc(216px + var(--safe-bottom));width:min(420px,calc(100% - 32px - var(--safe-left) - var(--safe-right)));transform:translateX(-50%);pointer-events:none}
 .context-messages .interaction,.context-messages .toast{position:relative;inset:auto;transform:none;max-width:100%;margin:0}
 .context-messages .interaction{min-height:44px;line-height:1.4;padding:9px 14px;pointer-events:auto}
 .context-messages .toast:not(.show){display:none}
 .context-messages .toast.show{transform:none}
 .hud:has(.interaction:not([hidden])) .region-intro,.hud:has(.toast.show) .region-intro{visibility:hidden}
 .top-hud{left:calc(30px + var(--safe-left));right:calc(30px + var(--safe-right))}
 .joystick,body[data-touch-layout='left'] .joystick,body[data-touch-layout='right'] .joystick{left:calc(24px + var(--safe-left))}
 .action-cluster,body[data-touch-layout='right'] .action-cluster{right:calc(22px + var(--safe-right))}
 .bottom-tools{left:calc(24px + var(--safe-left))}.companion-status{left:calc(141px + var(--safe-left))}
 .bottom-tools .camera-touch{right:calc(121px + var(--safe-right))}
 body[data-touch-layout='left'] .action-cluster{inset:0}
 body[data-touch-layout='left'] .jump-btn{right:calc(22px + var(--safe-right))}
 body[data-touch-layout='left'] .bottom-tools .camera-touch{right:calc(116px + var(--safe-right))}
 body[data-touch-layout='left'] .interact-btn{left:calc(83px + var(--safe-left))}
 body[data-touch-layout='left'] .pip-btn{left:calc(24px + var(--safe-left))}
 body[data-touch-layout='left'] .bottom-tools{left:auto;right:calc(22px + var(--safe-right))}
 body[data-touch-layout='left'] .context-messages{bottom:calc(239px + var(--safe-bottom))}
}
@media(max-width:700px){.top-hud{left:calc(12px + var(--safe-left));right:calc(12px + var(--safe-right))}.health{left:calc(16px + var(--safe-left))}}
@media(max-width:360px){
 .joystick,body[data-touch-layout='left'] .joystick,body[data-touch-layout='right'] .joystick{left:calc(16px + var(--safe-left))}
 .action-cluster,body[data-touch-layout='right'] .action-cluster{right:calc(14px + var(--safe-right))}.bottom-tools{left:calc(16px + var(--safe-left))}.companion-status{left:calc(115px + var(--safe-left))}
 body[data-touch-layout='left'] .jump-btn{right:calc(14px + var(--safe-right))}body[data-touch-layout='left'] .bottom-tools .camera-touch{right:calc(108px + var(--safe-right))}
 body[data-touch-layout='left'] .pip-btn{left:calc(16px + var(--safe-left))}body[data-touch-layout='left'] .interact-btn{left:calc(74px + var(--safe-left))}
}
@media(orientation:landscape) and (max-height:560px){
 .context-messages{bottom:calc(8px + var(--safe-bottom));width:min(420px,calc(100% - 380px - var(--safe-left) - var(--safe-right)))}
 body[data-touch-layout='left'] .context-messages{bottom:calc(8px + var(--safe-bottom))}
 /* Health belongs below the resource row when the left action pair is raised. */
 body[data-touch-layout='left'] .health{left:auto;right:calc(25px + var(--safe-right));top:calc(65px + var(--safe-top))}
 .top-hud{left:calc(16px + var(--safe-left));right:calc(16px + var(--safe-right))}.health{left:calc(18px + var(--safe-left))}
 .joystick,body[data-touch-layout='left'] .joystick,body[data-touch-layout='right'] .joystick{left:calc(30px + var(--safe-left));bottom:calc(24px + var(--safe-bottom))}
 .action-cluster,body[data-touch-layout='right'] .action-cluster{right:calc(25px + var(--safe-right));bottom:calc(19px + var(--safe-bottom))}
 .bottom-tools .camera-touch{right:calc(128px + var(--safe-right));bottom:calc(26px + var(--safe-bottom))}.companion-status{left:calc(135px + var(--safe-left));bottom:calc(72px + var(--safe-bottom))}
 .bottom-tools{left:calc(30px + var(--safe-left));bottom:calc(132px + var(--safe-bottom))}
 body[data-touch-layout='left'] .action-cluster{inset:0}
 body[data-touch-layout='left'] .pip-btn{left:calc(29px + var(--safe-left));bottom:calc(155px + var(--safe-bottom))}body[data-touch-layout='left'] .interact-btn{left:calc(84px + var(--safe-left));bottom:calc(143px + var(--safe-bottom))}
 body[data-touch-layout='left'] .jump-btn{right:calc(25px + var(--safe-right));bottom:calc(19px + var(--safe-bottom))}body[data-touch-layout='left'] .bottom-tools .camera-touch{right:calc(122px + var(--safe-right));bottom:calc(26px + var(--safe-bottom))}
 body[data-touch-layout='left'] .bottom-tools{left:auto;right:calc(25px + var(--safe-right));bottom:calc(107px + var(--safe-bottom))}
}

html{touch-action:manipulation}#game,#hud{touch-action:none}dialog,dialog *{touch-action:pan-y}

/* A soft portal veil masks the exact void-to-world crossing. */
.entrance-layer:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 48% 55%,#8edfd4 0%,#236b68 54%,#0a2529 100%);opacity:var(--portal-wash,0);pointer-events:none}