@import url('https://fonts.googleapis.com/css2?family=IM+Fell+English:ital@0;1&family=Crimson+Text:wght@400;600;700&display=swap');
:root{font-family:'Crimson Text',Georgia,serif;color:#372414;background:#304629;font-synthesis:none;--ink:#372414;--gold:#b99957;--paper:#e8d4aa;--parchment:url('./assets/parchment.jpg');--wood:#35251b;--heading:'IM Fell English',Georgia,serif}
*{box-sizing:border-box}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #9c632f;outline-offset:4px}[hidden]{display:none!important}
#game,canvas{position:fixed;inset:0;width:100%;height:100%;touch-action:none}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#302519;color:#ead8ac;font:24px var(--heading);z-index:9}
header{position:fixed;top:0;left:0;right:0;padding:18px 24px;display:flex;align-items:center;gap:24px;background:linear-gradient(#211c16bb,transparent);z-index:3}
.brand{display:flex;gap:11px;align-items:center;color:#f1dfb8;text-decoration:none;white-space:nowrap;font:18px var(--heading);letter-spacing:1px;text-shadow:0 2px 2px #20180d}.brand-icon{display:grid;place-items:center;width:46px;height:46px;border:3px double #ae8c4e;border-radius:50%;background:#463022;box-shadow:0 2px 6px #24180a80;font:32px var(--heading);color:#efd9a9}.brand small{display:block;font:10px 'Crimson Text',Georgia,serif;letter-spacing:1.3px;margin-top:5px;color:#ead4aa}
nav{display:flex;gap:0;margin:auto;padding:4px;border:3px double #806137;border-radius:3px;background-image:linear-gradient(#54371b15,#54371b05),var(--parchment);background-color:var(--paper);background-size:auto,480px;box-shadow:0 3px 12px #20160c66,inset 0 0 12px #86613b50}nav button{background:none;border:0;border-right:1px solid #8f6d393b;padding:8px 17px;min-height:44px;font:17px var(--heading);white-space:nowrap;color:var(--ink)}nav button:last-child{border-right:0}nav button:hover{background:#77522a20;color:#6b351a}
#sound,.camera-controls button{color:#f4dcb0;background:linear-gradient(#57402d,#35241a);border:2px solid #b1955d;box-shadow:inset 0 0 0 2px #2b2019,0 3px 6px #21170e60;border-radius:4px}#sound{padding:10px 14px;font:15px var(--heading);white-space:nowrap}
.location{position:fixed;top:107px;left:50%;transform:translateX(-50%);display:flex;gap:10px;align-items:center;background-image:var(--parchment);background-color:var(--paper);background-size:480px;border:2px solid #806137;border-radius:2px;padding:8px 16px;font:14px var(--heading);letter-spacing:.6px;box-shadow:0 2px 8px #24190b55,inset 0 0 8px #986f3d55;pointer-events:none;z-index:2;white-space:nowrap}.location>span{font-size:20px;color:#765127}.location small{display:none}
h1,h2{font-family:var(--heading);font-weight:400}h1{font-size:40px;line-height:1.1;margin:12px 0}h2{font-size:30px;line-height:1.15;margin:12px 0}p{font-size:18px;line-height:1.5}.eyebrow{font-size:12px;letter-spacing:1.4px;font-weight:700;color:#77542c}
.welcome,.quest,dialog,#fallback{background-color:var(--paper);background-image:linear-gradient(90deg,#9d71332e,transparent 10%,transparent 90%,#9d71332e),var(--parchment);background-size:auto,640px;border:3px double #76502b;border-radius:3px;box-shadow:0 12px 35px #231a1280,inset 0 0 24px #83592a44;color:var(--ink)}.welcome{position:fixed;left:24px;top:145px;z-index:2;width:250px;padding:20px}.welcome p{font-size:17px}.primary{padding:12px 20px;border:2px solid #715730;border-radius:3px;background:linear-gradient(#53623b,#344327);color:#f4e5c4;font:18px var(--heading);box-shadow:inset 0 0 0 1px #aab08160,0 2px 4px #63432635}.primary:hover{background:#596e3d}
.quest{display:none;position:fixed;right:24px;bottom:220px;width:250px;padding:20px;z-index:3}.quest.is-open{display:block}.quest h2{font-size:27px}.quest p{font-size:17px;margin-bottom:12px}.quest button{border:0;background:none;color:#6b371a;text-decoration:underline;text-underline-offset:4px;padding:0;font-size:16px}.quest-progress{border-top:1px solid #8a633866;margin-top:16px;padding-top:12px;display:flex;justify-content:space-between;font-size:15px}
#quest-toggle,#action{position:fixed;right:24px;z-index:4;background-color:var(--paper);background-image:var(--parchment);background-size:480px;border:3px double #78592f;border-radius:3px;box-shadow:0 3px 10px #25170e50,inset 0 0 10px #8c642e44;color:var(--ink);font:17px var(--heading)}#quest-toggle{bottom:184px;padding:10px 16px}#action{bottom:128px;min-width:150px;padding:12px 20px}#action.ready{color:#f1e1bd;background-image:linear-gradient(#53623b,#344327);border-color:#c4a66b}#action:disabled{opacity:.72;cursor:default}
#joystick{position:fixed;left:38px;bottom:86px;width:122px;height:122px;border:4px double #b19762;border-radius:50%;background:radial-gradient(circle,#37271daa 43%,#211810bb 65%,#71573caa 67%);box-shadow:0 3px 10px #21180d50,inset 0 0 0 7px #392a2150;z-index:4;touch-action:none;user-select:none}#stick{position:absolute;left:34px;top:34px;width:46px;height:46px;border:3px double #73502c;border-radius:50%;background-color:var(--paper);background-image:var(--parchment);background-size:240px;box-shadow:0 4px 10px #21160c80;pointer-events:none}#joystick>span{position:absolute;top:130px;width:100%;text-align:center;font:12px var(--heading);letter-spacing:1.5px;color:#f0dfb7;text-shadow:0 1px 3px #261c11}
.camera-controls{position:fixed;right:24px;bottom:79px;display:flex;gap:6px;z-index:4}.camera-controls button{height:42px;width:42px;font-size:23px}.camera-controls button:hover,#sound:hover{background:#6a4c30}#look-hint{position:fixed;left:50%;bottom:85px;transform:translateX(-50%);font-size:12px;letter-spacing:1px;color:#f1e0b9;text-shadow:0 1px 4px #21170e;pointer-events:none;transition:opacity 1s}
footer{position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 24px;background:#30241bee;border-top:2px solid #ad8b50;color:#e7d2a8;z-index:3;font-size:12px;letter-spacing:.5px}.controls{font-size:12px}.controls i{font-style:normal;padding:0 8px;color:#b8995c}footer button{background:none;border:0;color:#f0d6a4;font:15px var(--heading);text-decoration:underline;text-underline-offset:4px}.network{font-size:11px;color:#bfa26d}
#labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}.npc-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;white-space:nowrap;background-color:var(--paper);background-image:var(--parchment);background-size:480px;border:2px solid #806137;border-radius:2px;padding:8px 13px;font:17px var(--heading);color:var(--ink);box-shadow:0 3px 8px #21170b70,inset 0 0 8px #88653544}.npc-label small{display:block;font:14px 'Crimson Text',Georgia,serif;color:#77542f;margin-top:3px}.npc-label:hover{filter:brightness(1.1)}
#toast{position:fixed;bottom:235px;left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 40px);background-color:var(--paper);background-image:var(--parchment);background-size:480px;border:2px solid #806137;padding:12px 20px;border-radius:3px;font-size:17px;text-align:center;z-index:8;opacity:0;transition:opacity .25s;pointer-events:none;box-shadow:0 3px 12px #21180d70}#toast.show{opacity:1}
dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:36px}dialog::backdrop{background:#20180eb3;backdrop-filter:blur(3px)}dialog h2{font-size:40px;margin-top:12px}dialog p{color:#4a3320;font-size:19px}dialog .quote{font-style:italic;border-bottom:1px solid #89603355;padding-bottom:18px}dialog .primary{margin-top:22px}.close{position:absolute;right:12px;top:8px;min-width:44px;min-height:44px;border:0;background:none;color:#75512e;font-size:30px}.info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #89603344;font-size:17px;gap:20px}.info-row span:last-child{color:#765d3c}dialog ol{padding-left:22px;font-size:18px;line-height:1.65}.notice{background:#986c2420;border-left:3px solid #8b6234;padding:12px;font-size:16px!important}#fallback{position:fixed;top:30%;left:20%;right:20%;padding:30px;z-index:2}
@media(max-width:900px){header{padding:12px 16px;flex-wrap:wrap;gap:9px}.brand{font-size:16px}nav{order:3;width:100%;justify-content:center}nav button{padding:7px 16px;font-size:16px}#sound{margin-left:auto}.location{top:123px}.quest{right:16px;bottom:218px}#joystick{left:22px;bottom:80px}.camera-controls{right:16px;bottom:74px}#action{right:16px;bottom:124px}#quest-toggle{right:16px;bottom:177px}.controls{max-width:280px;font-size:11px}.network{display:none}footer{padding:12px 16px}}
@media(max-width:540px){.brand{font-size:15px;gap:8px}.brand small{font-size:9px;letter-spacing:.7px}.brand-icon{width:34px;height:34px;font-size:27px}#sound{font-size:14px;padding:9px 10px}nav{padding:2px}nav button{font-size:14px;padding:7px 10px}.location{top:114px;padding:7px 12px;font-size:13px}.location>span{font-size:17px}#joystick{width:106px;height:106px;left:18px;bottom:75px}#stick{left:26px;top:26px;width:46px;height:46px}#joystick>span{top:113px;font-size:11px}.camera-controls button{width:36px;height:36px;font-size:21px}.camera-controls{bottom:68px;gap:4px}#action{bottom:113px;min-width:133px;font-size:16px;padding:11px 14px}#quest-toggle{bottom:165px;font-size:15px;padding:9px 12px}.quest{bottom:211px;width:218px;padding:16px}.quest h2{font-size:25px}.quest p{font-size:16px}.quest button{font-size:16px}.controls{display:none}footer{height:46px;justify-content:center}#look-hint{display:none}.npc-label{font-size:15px;padding:7px 10px}.npc-label small{font-size:13px}#toast{bottom:213px;font-size:16px}dialog{padding:28px}dialog h2{font-size:33px}dialog p{font-size:18px}#fallback{left:16px;right:16px}}
@media(max-height:520px){header{flex-wrap:nowrap;padding:10px 16px;gap:12px}.brand small{display:none}nav{order:0;width:auto}nav button{font-size:14px;padding:6px 9px;min-height:40px}.location{top:76px;padding:5px 12px}#joystick{bottom:59px;width:100px;height:100px}#stick{top:23px;left:23px}#joystick>span{display:none}.camera-controls{bottom:56px}#action{bottom:103px}#quest-toggle{bottom:156px}.quest{top:74px;bottom:auto;max-height:calc(100dvh - 245px);overflow:auto;padding:13px}.quest h2{font-size:22px}.quest p{font-size:15px}.welcome{top:90px}.controls{font-size:10px;max-width:260px}footer{padding:10px 16px}}
@media(max-width:540px){footer{display:none}}
.music-credit{font-size:14px!important;border-top:1px solid #89603355;padding-top:14px}.music-credit a{color:#754323;text-underline-offset:3px}

.header-actions{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}.social-button{display:grid;place-items:center;width:44px;height:44px;color:#f4dcb0;background:linear-gradient(#57402d,#35241a);border:2px solid #b1955d;border-radius:4px;box-shadow:inset 0 0 0 2px #2b2019,0 3px 6px #21170e60}.social-button:hover{background:#6a4c30}.social-button svg{width:20px;height:20px;fill:currentColor}.info-row a{color:#754323;text-underline-offset:3px}
@media(max-width:540px){header{gap:8px}.brand{min-width:0;font-size:14px}.brand small{white-space:normal;max-width:128px;font-size:8px;letter-spacing:.3px}.header-actions{gap:5px}#sound{font-size:13px;padding:9px 8px}.social-button{width:38px;height:44px}.social-button svg{width:18px;height:18px}}
@media(max-height:520px) and (min-width:541px){.brand{font-size:14px;gap:7px}.brand-icon{width:32px;height:32px;font-size:25px}.header-actions{gap:5px}.social-button{width:38px;height:40px}#sound{padding:9px 10px;font-size:13px}}

.brand-icon{object-fit:cover;object-position:center;padding:0;overflow:hidden}

.music-control{position:relative}.music-credit-tooltip{display:none;position:absolute;right:0;top:calc(100% + 7px);width:260px;max-width:calc(100vw - 32px);padding:12px;color:var(--ink);background:var(--paper);border:2px solid #806137;box-shadow:0 3px 8px #21170b70;font:14px/1.4 'Crimson Text',Georgia,serif;z-index:6}.music-control:hover .music-credit-tooltip,.music-control:focus-within .music-credit-tooltip{display:block}.music-credit-tooltip a{color:#754323;text-underline-offset:3px}
@media(max-width:370px){header{padding:10px;gap:7px}.brand{font-size:12px;gap:5px}.brand-icon{width:28px;height:28px}.brand small{font-size:7px;max-width:104px}.header-actions{gap:4px}#sound{font-size:12px;padding:9px 6px}.social-button{width:34px}nav button{padding:7px 7px;font-size:13px}}