@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:'DM Sans',sans-serif;color:#293f34;--green:#344c3f;--paper:#fffcf5}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#e8e3d8}button,select{font:inherit}button{cursor:pointer;touch-action:manipulation}button:focus-visible,select:focus-visible{outline:3px solid #d6894d;outline-offset:4px}#game{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:fixed;top:32px;left:38px;right:38px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.brand{display:flex;align-items:center;gap:14px}.brand-icon{font-size:36px;border:1px solid #344c3f35;border-radius:17px;background:#fff9;display:grid;place-items:center;width:58px;height:58px}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2.4px;opacity:.7}h1{font-family:Manrope,sans-serif;font-size:25px;letter-spacing:-1px;margin:4px 0;font-weight:800}h1 span{color:#bd7047}.round{pointer-events:auto;width:40px;height:40px;border:1px solid #344c3f26;background:#fff9;border-radius:50%;font-weight:700;color:var(--green)}.room-label{position:fixed;top:110px;left:110px;display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:.4px}.live-dot{width:6px;height:6px;border-radius:50%;background:#749466}aside{position:fixed;top:165px;left:38px;width:242px;background:#fffaf0de;backdrop-filter:blur(12px);border:1px solid #fff9;border-radius:18px;padding:21px;box-shadow:0 10px 40px #3331}aside b{font-family:Manrope;font-size:17px}aside p{font-size:12px;line-height:1.7;color:#697468;margin:9px 0 18px}.keys{display:flex;gap:10px;align-items:center;font-size:10px;color:#687368;margin:11px 0}kbd{font:9px 'DM Sans';font-weight:700;white-space:nowrap;background:#eeeee4;border:1px solid #d4d9cb;border-bottom-width:2px;border-radius:5px;padding:5px 6px;min-width:60px;text-align:center}aside .small{font-size:10px;margin:15px 0 0;opacity:.8}footer{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);display:flex;gap:13px;align-items:center;white-space:nowrap}.actions,.view-tools{display:flex;gap:5px;background:#fffcf2eb;border:1px solid #fff;border-radius:19px;padding:7px;box-shadow:0 8px 35px #32352512;backdrop-filter:blur(15px)}footer button{border:0;border-radius:12px;background:transparent;color:#425444;padding:12px 17px;font-size:12px;display:flex;align-items:center;gap:8px;transition:background .2s}footer button:hover{background:#e7ecdf}.actions button:first-child{background:var(--green);color:#fffaf0}.actions button:first-child:hover{background:#4b6854}footer button>span:first-child{font-size:17px}button[aria-pressed=true]{background:#e5b48c!important;color:#453726}.view-tools button{padding:12px}#loading{position:fixed;inset:0;background:#e8e3d8;display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .5s;z-index:10}#loading h2{font-family:Manrope;font-size:27px;margin:15px}#loading p{font-size:13px;color:#7a8374}.loader-house{font-size:70px;color:#5d755b}.load-bar{width:200px;height:3px;background:#cdd0c2;border-radius:4px;margin-top:15px;overflow:hidden}.load-bar i{display:block;background:#526f51;width:45%;height:100%;animation:load 1.5s infinite ease-in-out}@keyframes load{from{transform:translateX(-100%)}to{transform:translateX(330%)}}#toast{position:fixed;left:50%;bottom:112px;transform:translateX(-50%);border-radius:30px;background:#344c3fe8;color:white;padding:10px 20px;font-size:12px;opacity:0;transition:opacity .25s;pointer-events:none;max-width:90%;text-align:center}.corner-note{position:fixed;bottom:14px;right:26px;font-size:9px;color:#60725c;letter-spacing:.6px}#animation-panel{position:fixed;bottom:113px;right:32px;background:#fffaf0f5;backdrop-filter:blur(15px);padding:20px;border-radius:15px;box-shadow:0 8px 40px #0002;width:280px}#animation-panel label{display:block;font-size:13px;font-weight:700;margin-bottom:12px}#animation-panel select{width:100%;padding:10px;border:1px solid #cfd5c9;border-radius:8px;background:#fff;color:#344c3f;font-size:12px}#stop-animation{background:#344c3f;color:white;border:0;border-radius:8px;padding:10px;width:100%;margin-top:9px;font-size:12px}#joystick{position:fixed;bottom:127px;left:26px;width:110px;height:110px;background:#fff7;border:1px solid #fff9;border-radius:50%;touch-action:none;display:none;backdrop-filter:blur(8px)}#stick{width:46px;height:46px;background:#49604ce0;border:5px solid #fff9;border-radius:50%;position:absolute;top:31px;left:31px;pointer-events:none}#joystick>span{position:absolute;bottom:-20px;left:39px;font-size:9px;letter-spacing:2px;color:#52684e;pointer-events:none}@media(pointer:coarse){#joystick{display:block}aside{display:none}}@media(max-width:800px){header{top:22px;left:22px;right:22px}.brand-icon{width:44px;height:44px;font-size:29px;border-radius:13px}.eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:20px}.room-label{top:88px;left:80px;font-size:10px}aside{top:130px;left:22px;width:210px;padding:16px}footer{bottom:28px;width:calc(100% - 32px);flex-direction:column;gap:8px}.actions{width:100%;justify-content:space-between;border-radius:17px;padding:5px}footer button{padding:10px 9px;font-size:10px;gap:5px}.view-tools{padding:3px;align-self:flex-end;border-radius:12px}.view-tools button{padding:5px 10px;font-size:10px}.view-tools button>span:first-child{font-size:10px}.corner-note{display:none}#joystick{bottom:155px;width:100px;height:100px}#stick{top:26px;left:26px}#joystick>span{left:34px}#toast{bottom:145px}#animation-panel{bottom:145px;right:17px;width:240px}}@media(max-height:540px){aside{display:none}header{top:14px}footer{bottom:14px;flex-direction:row;width:auto}#joystick{bottom:90px}.corner-note{display:none}}