:root{--sand: #d8c3a5;--clay: #8c6a4a;--dark: #2b2118;--gold: #e0b252}*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#1a140d;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#f4ecdf}#game-canvas{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;touch-action:none}.hidden{display:none!important}.overlay{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 30%,#3a2c1c,#160f08);z-index:10}.panel{width:min(90vw,440px);padding:32px;text-align:center;background:#1e160ed9;border:1px solid var(--clay);border-radius:14px;box-shadow:0 20px 60px #00000080}.panel h1{margin:0 0 8px;font-size:28px;color:var(--gold);letter-spacing:.5px}.subtitle{margin:0 0 24px;opacity:.8;font-size:14px}#login-form{display:flex;flex-direction:column;gap:12px}#username-input{padding:12px 14px;font-size:16px;border-radius:8px;border:1px solid var(--clay);background:#120c06;color:#f4ecdf}button{padding:12px 14px;font-size:16px;font-weight:600;border:none;border-radius:8px;background:var(--gold);color:#2b2118;cursor:pointer}button:hover{filter:brightness(1.08)}.hint{margin:18px 0 0;font-size:12px;opacity:.6}#hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:5}#quest-tracker{position:absolute;top:16px;left:16px;max-width:280px;padding:12px 14px;background:#140e08c7;border-left:3px solid var(--gold);border-radius:6px;font-size:13px;line-height:1.4}#quest-tracker .quest-title{font-weight:700;color:var(--gold);margin-bottom:4px}#quest-tracker.complete{border-left-color:#3cb44b}#quest-tracker.complete .quest-title{color:#8ce99a}#players-online{position:absolute;top:16px;right:16px;padding:8px 12px;background:#140e08c7;border-radius:6px;font-size:13px}#dialogue{position:fixed;top:0;right:0;bottom:0;left:0;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8vh;z-index:8;pointer-events:none}.dialogue-box{width:min(90vw,560px);padding:20px 22px;background:#140e08f2;border:1px solid var(--clay);border-radius:12px;pointer-events:auto}#dialogue-speaker{color:var(--gold);font-weight:700;margin-bottom:8px}#dialogue-text{font-size:15px;line-height:1.5;margin-bottom:16px}#toast{position:fixed;bottom:6vh;left:50%;transform:translate(-50%);padding:10px 18px;background:#140e08eb;border:1px solid var(--gold);border-radius:999px;font-size:14px;z-index:7}#touch-joystick{position:fixed;left:28px;bottom:28px;width:132px;height:132px;border-radius:50%;background:#140e0873;border:2px solid rgba(224,178,82,.55);z-index:6;touch-action:none;user-select:none;-webkit-user-select:none}#touch-knob{position:absolute;left:50%;top:50%;width:60px;height:60px;border-radius:50%;background:#e0b252d9;transform:translate(-50%,-50%);pointer-events:none}#touch-interact{position:fixed;right:32px;bottom:44px;width:84px;height:84px;border-radius:50%;font-size:26px;font-weight:700;color:#2b2118;background:var(--gold);border:2px solid rgba(20,14,8,.4);box-shadow:0 6px 18px #0006;z-index:6;touch-action:none;user-select:none;-webkit-user-select:none}#touch-interact:active{filter:brightness(.9)}#attribution{position:fixed;bottom:4px;left:50%;transform:translate(-50%);font-size:11px;color:#fff9;text-shadow:0 1px 2px rgba(0,0,0,.6);pointer-events:none;z-index:4}
