*{box-sizing:border-box;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none;margin:0;padding:0}html,body{color:#fff;background-color:#101c29;width:100%;height:100%;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;overflow:hidden}#game-container{z-index:1;width:100%;height:100%;position:absolute;top:0;left:0}#ui-root{z-index:10;pointer-events:none;width:100%;height:100%;position:absolute;top:0;left:0}.hud-top{pointer-events:none;justify-content:space-between;align-items:center;display:flex;position:absolute;top:16px;left:16px;right:16px}.resource-bar{-webkit-backdrop-filter:blur(8px);pointer-events:auto;background:#0e1621bf;border:1px solid #ffffff1f;border-radius:20px;gap:10px;padding:6px 12px;display:flex;box-shadow:0 4px 16px #00000059}.resource-item{letter-spacing:.5px;color:#fff;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:14px;align-items:center;gap:6px;padding:5px 9px;font-size:14px;font-weight:700;transition:all .2s;display:flex;position:relative}.resource-item:hover{background:#ffffff1a;border-color:#fff3}.resource-item.active-auto{background:#22c55e47;border-color:#22c55e;animation:1.6s ease-in-out infinite pulse-auto;box-shadow:0 0 14px #22c55e8c}@keyframes pulse-auto{0%{transform:scale(1)}50%{transform:scale(1.05)}to{transform:scale(1)}}.auto-tag{color:#94a3b8;letter-spacing:.5px;background:#ffffff26;border-radius:6px;padding:1px 5px;font-size:9px;font-weight:900;transition:all .2s}.resource-item.active-auto .auto-tag{color:#fff;background:#22c55e;box-shadow:0 0 8px #22c55eb3}.resource-icon{filter:drop-shadow(0 2px 4px #0006);font-size:18px;transition:transform .15s ease-out}.resource-item.bump .resource-icon{transform:scale(1.35)rotate(-10deg)}.resource-count{color:#fff;text-shadow:0 1px 3px #0009;min-width:24px}.hud-actions{pointer-events:auto;gap:8px;display:flex}.hud-btn{-webkit-backdrop-filter:blur(8px);color:#fff;cursor:pointer;background:#0e1621bf;border:1px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;font-size:18px;transition:transform .1s,background-color .2s;display:flex}.hud-btn:active{background:#fff3;transform:scale(.92)}.hint-badge{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#cbd5e1;text-align:center;pointer-events:none;opacity:.9;background:#0e1621bf;border:1px solid #ffffff1a;border-radius:20px;padding:8px 18px;font-size:13px;font-weight:500;transition:opacity .5s;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0000004d}.joystick-base{pointer-events:none;opacity:0;background:radial-gradient(circle,#ffffff26 0%,#ffffff0d 70%,#fff3 100%);border:2px solid #ffffff4d;border-radius:50%;width:120px;height:120px;margin-top:-60px;margin-left:-60px;transition:opacity .15s ease-out,transform .15s ease-out;position:absolute;transform:scale(.85);box-shadow:0 0 20px #00000059}.joystick-base.active{opacity:1;transform:scale(1)}.joystick-thumb{pointer-events:none;background:radial-gradient(circle at 35% 35%,#ffd166,#f77f00);border:2px solid #ffffffb3;border-radius:50%;width:52px;height:52px;margin-top:-26px;margin-left:-26px;position:absolute;transform:translate(60px,60px);box-shadow:0 4px 12px #00000073}.title-tag{text-transform:uppercase;letter-spacing:1px;pointer-events:none;background:linear-gradient(135deg,#f77f00d9,#d62828d9);border-radius:12px;padding:4px 10px;font-size:11px;font-weight:800;position:absolute;top:72px;left:20px;box-shadow:0 2px 8px #0000004d}