@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=Russo+One&display=swap');
:root{--lime:#b9ef53;--ink:#18221b;--paper:#f0f1df}*{box-sizing:border-box}body{margin:0;background:#18261f;color:var(--paper);font-family:'Golos Text',sans-serif;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:700 11px 'Golos Text',sans-serif;letter-spacing:1px;cursor:pointer}button:hover{filter:brightness(1.12);transform:translateY(-2px)}button:focus-visible{outline:3px solid white;outline-offset:4px}#world{position:fixed;width:100%;height:100%;image-rendering:pixelated}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(12,25,21,.97),rgba(12,25,21,.87) 32%,rgba(12,25,21,.12) 73%),linear-gradient(0deg,rgba(9,18,14,.6),transparent 35%)}body.playing .vignette{background:radial-gradient(ellipse,transparent 45%,#07120e60)}header{position:fixed;top:0;left:0;width:100%;padding:27px 40px;display:flex;align-items:center;justify-content:space-between;z-index:3;border-bottom:1px solid #d8efcc20}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--paper);font-family:'Russo One',sans-serif;font-size:17px;letter-spacing:1px}.brand-icon{background:var(--lime);color:var(--ink);font-size:23px;padding:4px 9px;box-shadow:4px 4px 0 #5a7737}.craft{color:var(--lime)}.server{font-size:9px;letter-spacing:1.7px;display:flex;align-items:center;gap:11px}.server i,.eyebrow>span{display:inline-block;width:6px;height:6px;background:var(--lime);box-shadow:0 0 15px #b9ef5390}.server>span{opacity:.3}.small{background:#1c2e27a0;color:var(--paper);border:1px solid #d6e8d12e;padding:10px 14px;font-size:9px}main{position:fixed;inset:0;padding:147px 6.2% 0;pointer-events:none}main button,main a{pointer-events:auto}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:#c3cbb9;display:flex;gap:12px;align-items:center}h1{font:clamp(64px,8vw,115px)/.91 'Russo One',sans-serif;letter-spacing:-3px;margin:29px 0 25px;text-shadow:5px 6px 0 #0b1712}h1 em{font-style:normal;color:var(--lime)}h1 em span{font:16px 'Golos Text';vertical-align:top;margin-left:8px}.tagline{font-weight:700;font-size:24px;line-height:1.3;margin:0 0 15px}.intro{color:#afbbad;font-size:12px;line-height:1.8;margin-bottom:25px}.menu-actions{display:flex;gap:12px}.primary,.secondary{padding:18px 22px;border:0;min-width:185px;text-align:left;display:flex;align-items:center;justify-content:space-between;gap:25px}.primary{background:var(--lime);color:var(--ink);box-shadow:0 4px 0 #719333}.primary span{font-size:19px}.secondary{background:#1a2a22aa;color:var(--paper);border:1px solid #d8efcc33;min-width:160px}.secondary span{border:1px solid #a6b399;border-radius:50%;width:16px;text-align:center}.features{display:flex;gap:22px;font-size:8px;color:#91a08e;letter-spacing:1px;margin-top:28px}.scene-label{position:absolute;right:6%;top:65%;border-left:2px solid var(--lime);padding-left:20px;transform:rotate(-2deg)}.scene-label>span{font-size:9px;letter-spacing:2px;color:var(--lime)}.scene-label strong{display:block;font-size:22px;line-height:1.3;margin:12px 0}.scene-label>div{font-size:8px;letter-spacing:1.4px;color:#c4c9b6}footer{position:absolute;bottom:24px;left:40px;right:40px;display:flex;justify-content:space-between;font-size:8px;color:#869781;letter-spacing:1.5px}.hidden{display:none!important}.panel{background:#13231cd9;border:1px solid #cde6bb25;padding:16px;backdrop-filter:blur(8px)}.objective{position:fixed;left:25px;top:100px}.objective small,.map small{font-size:8px;letter-spacing:1.7px;color:#98ab8b}.objective strong{display:block;font-size:12px;margin:10px 0}.objective #books{color:var(--lime);font-family:'Russo One';font-size:24px}.map{position:fixed;right:25px;top:100px;padding:10px}.map canvas{display:block;width:132px;height:132px;image-rendering:pixelated}.map small{display:block;margin-top:8px;font-size:7px}.map small span{float:right;color:var(--lime)}#crosshair{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff9;font:22px monospace}#hint{position:fixed;top:57%;width:100%;text-align:center;font-size:13px;text-shadow:0 2px 3px #000}.bottom{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);width:450px}.status{display:flex;gap:10px;align-items:center;font-size:8px;letter-spacing:1px;margin-bottom:12px}.meter{height:7px;background:#12241f;border:1px solid #5c7058;width:100px}.meter i{display:block;background:var(--lime);height:100%;width:100%}#danger{margin-left:auto;color:#c4d2ba}.hotbar{display:flex;justify-content:center;gap:5px}.slot{width:110px;height:72px;background:#14281ede;border:2px solid #a2b98a44;position:relative;text-align:center;padding:8px;font-size:24px}.slot.active{border-color:var(--lime);background:#436035cc}.slot small{position:absolute;left:5px;top:4px;font-size:9px;color:#c0cbb6}.slot>span{display:block;font-size:8px;letter-spacing:.5px;margin-top:3px}.cube{display:inline-block;width:23px;height:23px;background:#aa8863;border-top:7px solid #8bad48;box-shadow:inset -6px 0 #806344}.keys{text-align:center;word-spacing:3px;font-size:9px;margin-top:12px}.keys span{color:#99ac91;margin:0 10px 0 1px}.pause{position:fixed;left:25px;bottom:25px}#toast{position:fixed;top:110px;left:50%;transform:translateX(-50%);padding:12px 20px;background:var(--lime);color:var(--ink);font-size:12px;font-weight:700;opacity:0;transition:opacity .2s}.overlay{position:fixed;inset:0;background:#0b1713b5;backdrop-filter:blur(9px);z-index:10;display:flex;justify-content:center;align-items:center}.dialog{width:min(460px,90vw);background:#1c3026;border:1px solid #88a56c;padding:35px;box-shadow:9px 9px 0 #0a1711}.dialog>small{font-size:9px;letter-spacing:2px;color:var(--lime)}.dialog h2{font-family:'Russo One';font-size:31px;margin:15px 0}.dialog p{color:#bfcdb3;font-size:13px;line-height:1.8}.dialog .primary{width:100%;margin-top:25px}.dialog input{width:100%;padding:14px;color:var(--lime);border:1px solid #78955b;background:#11221a;font:24px 'Russo One';outline:none}.rule{display:flex;gap:16px;border-bottom:1px solid #a2be8c20;padding:12px 0;font-size:12px;line-height:1.6}.rule b{color:var(--lime);min-width:80px}#mobile{display:none}@media(max-height:760px) and (min-width:701px){main{padding-top:115px}h1{font-size:86px;margin:22px 0}.tagline{font-size:20px}.intro{margin-bottom:19px}.features{margin-top:22px}}@media(max-width:700px){header{padding:20px}.server{display:none}main{padding:120px 25px 0}h1{font-size:78px}.intro{font-size:11px}.scene-label{display:none}.tagline{font-size:22px}.features{gap:12px;font-size:6px}.primary,.secondary{min-width:145px;padding:15px}.vignette{background:linear-gradient(90deg,#102119ed,#10211980)}footer{left:25px;right:25px;font-size:6px}.objective{left:12px;top:83px;padding:10px}.objective strong{font-size:10px}.map{right:12px;top:83px}.map canvas{width:85px;height:85px}.bottom{width:320px;bottom:20px}.keys{display:none}.pause{bottom:115px;left:12px}#mobile{display:flex;position:fixed;bottom:205px;left:10px;gap:3px}#mobile button{padding:14px;background:#203b2bd0;border:1px solid #96bc6d;color:var(--lime)}#toast{top:240px;width:80%;text-align:center}}

.character{display:flex;align-items:center;gap:16px;border-bottom:1px solid #a2be8c20;padding:5px 0}.character img{width:40px;height:60px;object-fit:contain;image-rendering:pixelated}.character b{font-size:13px;color:#e0edcf}.character p{font-size:11px;margin:3px 0;line-height:1.5}.scene-label button{margin-top:6px}.dialog{max-height:92vh;overflow:auto}h1{font-weight:900}.brand{font-weight:900}
.menu-actions{flex-wrap:wrap;max-width:570px}.menu-actions .primary{min-width:160px}.menu-actions #how{min-width:130px}.field-label{display:block;font-size:9px;letter-spacing:1px;margin:17px 0 8px;color:var(--lime)}.join-row{display:flex;gap:8px}.join-row input{min-width:0}.join-row .secondary{min-width:120px}#netError{color:#ffbc91;font-size:11px;min-height:18px}.text-button{border:0;background:none;color:#c7d6bc;padding:12px 0;font-size:10px}.lobby-player{padding:9px 0;font-size:13px;border-bottom:1px solid #b5d39822}.lobby-player>span{color:var(--lime)}.lobby-player small{font-size:8px;color:var(--lime);margin-left:8px}#inviteLink{font:11px monospace;margin:16px 0 10px;padding:12px}button:disabled{opacity:.45;cursor:wait;transform:none}#roomBadge{position:fixed;left:50%;top:100px;transform:translateX(-50%);font-size:9px;background:#163424cd;padding:9px 12px;color:var(--lime);letter-spacing:1px}#rotate{display:none}#mobile{pointer-events:none}#mobile>*{pointer-events:auto}body{touch-action:none;overscroll-behavior:none}input{touch-action:manipulation}#joystick{position:fixed;left:max(28px,env(safe-area-inset-left));bottom:max(30px,env(safe-area-inset-bottom));width:120px;height:120px;border:1px solid #c0ec7e66;border-radius:50%;background:#1e39246e;touch-action:none}#stick{position:absolute;left:38px;top:38px;width:44px;height:44px;border-radius:50%;background:#bbef5399;border:2px solid #dbff99;pointer-events:none}.touch-actions{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:35px;display:flex;align-items:flex-end;gap:12px}.touch-actions button{width:54px;height:54px;border-radius:50%;background:#1e3924b0;border:1px solid #c0ec7e99;color:var(--lime);font-size:13px;touch-action:none}.touch-actions #touchUse{width:68px;height:68px;background:var(--lime);color:var(--ink);font-size:23px}#fullscreen{position:fixed;right:max(20px,env(safe-area-inset-right));top:58px;background:#18302099;border:1px solid #b9ef5377;color:var(--lime);font-size:22px;width:42px;height:36px}.look-tip{position:fixed;right:20px;bottom:112px;color:#d5e5c699;font-size:7px;letter-spacing:1px;pointer-events:none!important}
@media(pointer:coarse){#mobile{display:block;position:static}.keys{display:none}#world{touch-action:none}.dialog input{font-size:16px}.slot{cursor:pointer}.dialog{padding:22px}body.playing header{padding:10px 20px;padding-left:max(20px,env(safe-area-inset-left));height:50px}body.playing .brand{font-size:12px}body.playing .brand-icon{font-size:15px}body.playing .server{display:none}.pause{left:50%;transform:translateX(-50%);bottom:110px}.bottom{bottom:12px;width:300px;pointer-events:none}.hotbar{pointer-events:auto}.slot{width:80px;height:56px;font-size:18px;padding:6px}.slot>span{font-size:7px}.status{font-size:7px;gap:5px;margin-bottom:6px}.meter{width:65px}.objective{top:58px;left:max(12px,env(safe-area-inset-left));padding:8px 10px}.objective strong{font-size:9px;margin:5px 0}.objective #books{font-size:18px}.objective small{font-size:6px}.map{right:max(12px,env(safe-area-inset-right));top:104px;padding:5px}.map canvas{width:68px;height:68px}.map small{display:none}#toast{top:57px;width:auto;max-width:45%;font-size:10px;padding:9px}#roomBadge{top:37px;font-size:7px;padding:5px;background:none}#hint{top:55%;font-size:11px}}
@media(pointer:coarse) and (orientation:landscape) and (max-height:550px){main{padding:72px 5% 0}h1{font-size:51px;line-height:.9;margin:13px 0}.eyebrow{font-size:7px}.tagline{font-size:16px;margin:0 0 6px}.intro{font-size:10px;margin:4px 0 13px}.intro br{display:none}.intro{max-width:340px}.features{display:none}.menu-actions{gap:8px}.menu-actions button{padding:11px 13px;min-width:120px!important;font-size:8px}.scene-label{display:none}header{padding:16px 25px}.server{display:none}footer{bottom:10px;font-size:6px}#mobile .touch-actions button{padding:0}.dialog{max-width:430px;max-height:95dvh}.dialog h2{font-size:24px;margin:9px 0}.dialog p{font-size:11px;margin:8px 0}.dialog .primary{padding:13px;margin-top:15px}.dialog input{padding:9px}.field-label{margin-top:10px}.character{padding:2px 0}.character img{height:40px;width:30px}}
@media(pointer:coarse) and (orientation:portrait){#rotate{display:flex;position:fixed;inset:0;z-index:30;background:#102119f5;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:30px}#rotate>span{font-size:90px;color:var(--lime)}#rotate h2{font-family:'Russo One',sans-serif}#rotate p{color:#b6c6a8;font-size:14px;line-height:1.7}#rotate button{margin-top:20px}}
footer a{color:inherit;text-decoration:none;pointer-events:auto}#mobile .touch-actions #touchRun{position:absolute;right:78px;bottom:75px}@media(pointer:coarse) and (max-width:740px){.bottom{width:210px}.slot{width:64px;height:53px}.slot>span{font-size:6px}.status{flex-wrap:wrap;justify-content:center}#danger{margin-left:0;font-size:6px}#joystick{width:110px;height:110px;left:max(20px,env(safe-area-inset-left));bottom:22px}#stick{left:33px;top:33px}.touch-actions{right:18px;bottom:22px}.touch-actions button{width:48px;height:48px}.touch-actions #touchUse{width:60px;height:60px}.look-tip{display:none}.pause{bottom:114px}}
/* Stable touch layers: camera behind HUD, all controls above it. */
#lookZone{position:fixed;inset:0 0 0 40%;z-index:1;touch-action:none;user-select:none;-webkit-user-select:none}
.objective,.map,.bottom{z-index:2}.objective,.map,#crosshair,#hint,#toast,#roomBadge{pointer-events:none}#crosshair,#hint,#toast,#roomBadge{z-index:2}.touch-actions,#joystick{z-index:5}#fullscreen{z-index:5}.pause{z-index:6}.look-tip{z-index:2}.overlay{z-index:20}.slot,.touch-actions button,#joystick,#lookZone{-webkit-user-select:none;user-select:none;touch-action:none}
@media(pointer:coarse){#quality{position:fixed;top:8px;right:max(150px,calc(env(safe-area-inset-right) + 150px));padding:9px 10px;font-size:8px;min-height:34px}body.playing header{height:54px}.pause{top:59px;left:max(12px,env(safe-area-inset-left));right:auto;bottom:auto;transform:none!important;width:52px;height:44px;padding:0;font-size:9px;letter-spacing:0}.objective{top:110px}.objective strong{max-width:140px}.map{top:110px}.panel{backdrop-filter:none}.vignette{opacity:.85}.look-tip{bottom:115px;right:28px}#toast{top:62px;max-width:52%}.bottom{bottom:max(12px,env(safe-area-inset-bottom))}#joystick{bottom:max(24px,env(safe-area-inset-bottom))}.touch-actions{bottom:max(24px,env(safe-area-inset-bottom))}button:hover{transform:none}.overlay{backdrop-filter:none}.dialog{max-height:94dvh;overscroll-behavior:contain;touch-action:pan-y}.dialogBody{touch-action:pan-y}.server{display:none}}
@media(pointer:coarse) and (max-height:350px){.objective{display:none}.map{top:106px}.map canvas{width:54px;height:54px}.hotbar .slot{height:46px}.status{font-size:6px}.pause{top:58px}.look-tip{display:none}}
/* Let long dialogs scroll; only game gestures suppress browser panning. */
body{touch-action:manipulation}#dialogBody{touch-action:pan-y}
@media(pointer:coarse){#sound,#quality{min-height:44px}#quality{top:5px}#fullscreen{height:44px}}