body{touch-action:none;user-select:none;overscroll-behavior:none;background-color:#080a14;margin:0;padding:0;overflow:hidden}html,body{width:100%;height:100%}#app{width:100%;height:100%;position:relative}canvas{width:100vw;height:100vh;display:block;position:absolute;top:0;left:0}#offline-banner{color:#fff;text-align:center;z-index:2000;background-color:#a00;width:100vw;padding:10px 0;font-family:system-ui,sans-serif;font-size:14px;font-weight:700;position:absolute;top:0;left:0;box-shadow:0 4px 10px #00000080}#auth-layer{z-index:1000;background-color:#000000d9;justify-content:center;align-items:center;width:100vw;height:100vh;font-family:system-ui,sans-serif;display:flex;position:absolute;top:0;left:0}.auth-modal{text-align:center;color:#ddd;background-color:#111116;border:2px solid #c9a84c;border-radius:20px;width:80%;max-width:400px;padding:40px;box-shadow:0 0 20px #000c}.auth-modal h2{color:#c9a84c;margin-top:0}.auth-modal input{box-sizing:border-box;color:#fff;background:#0a0a14;border:1px solid #444;border-radius:8px;width:100%;margin:10px 0;padding:12px;font-size:16px}.auth-modal input:focus{border-color:#c9a84c;outline:none}.auth-buttons button{cursor:pointer;border:none;border-radius:8px;width:100%;margin:5px 0;padding:15px;font-size:16px;font-weight:700}.btn-primary{color:#fff;background:#3498db}.btn-secondary{color:#111;background:#c9a84c}.btn-close{color:#aaa;background:0 0;border:1px solid #444!important}#ui-layer{pointer-events:none;transform-origin:0 0;z-index:500;box-sizing:border-box;flex-direction:column;justify-content:space-between;width:1080px;height:1920px;padding:40px;font-family:Inter,sans-serif;display:flex;position:absolute;top:0;left:0}#ui-layer>*{pointer-events:auto}.ui-top-bar{justify-content:space-between;align-items:center;width:100%;display:flex}.resource-pill{-webkit-backdrop-filter:blur(12px);background:#1a1a24b3;border:2px solid #c9a84c99;border-radius:50px;align-items:center;gap:15px;padding:10px 40px;transition:transform .2s cubic-bezier(.25,.46,.45,.94);display:flex;box-shadow:0 10px 30px #00000080}.resource-pill:hover{transform:scale(1.05)}.resource-pill .val{text-shadow:0 2px 4px #000c;font-family:Cinzel,serif;font-size:32px;font-weight:900}.gold-val{color:gold}.prem-val{color:#00fafa}.ui-center-action{justify-content:center;display:flex;position:absolute;bottom:240px;left:50%;transform:translate(-50%)}.btn-epic{color:#111;letter-spacing:2px;text-transform:uppercase;cursor:pointer;background:linear-gradient(135deg,#e3c46a 0%,#a9802d 100%);border:4px solid #fffc;border-radius:60px;padding:30px 80px;font-family:Cinzel,serif;font-size:36px;font-weight:900;transition:transform .1s;animation:2s ease-in-out infinite pulse-glow;box-shadow:0 15px 40px #c9a84c66,inset 0 4px 10px #fff9}.btn-epic:active{transform:scale(.95)}@keyframes pulse-glow{0%{box-shadow:0 15px 40px #c9a84c4d,inset 0 4px 10px #fff9}50%{box-shadow:0 15px 60px #c9a84ccc,inset 0 4px 10px #fff9}to{box-shadow:0 15px 40px #c9a84c4d,inset 0 4px 10px #fff9}}.ui-bottom-dock{-webkit-backdrop-filter:blur(16px);background:#0f0f15d9;border:2px solid #ffffff1a;border-radius:40px;justify-content:space-around;align-items:center;width:calc(100% - 80px);height:120px;display:flex;position:absolute;bottom:40px;left:40px;box-shadow:0 -5px 40px #000c}.dock-item{cursor:pointer;border-radius:25px;flex-direction:column;justify-content:center;align-items:center;gap:8px;width:100px;height:100px;transition:all .3s cubic-bezier(.25,.46,.45,.94);display:flex;position:relative}.dock-item svg{stroke:#777;stroke-width:2px;fill:none;width:36px;height:36px;transition:stroke .3s}.dock-item span{color:#777;font-size:16px;font-weight:600;transition:color .3s}.dock-item.active{background:#c9a84c1a}.dock-item.active svg{stroke:#c9a84c;filter:drop-shadow(0 0 8px #c9a84c99)}.dock-item.active span{color:#c9a84c}.dock-item:hover{transform:translateY(-5px)}